/* =========================================================================
   NOEMA · Llévatelo  (D8)
   Va después de noema.css.

   ORDEN DEL ARCHIVO
   01 · La columna
   02 · Cabecera
   03 · Las dos salidas
   04 · El boletín
   05 · Qué hacer ahora
   06 · Puntos de corte
   ========================================================================= */


/* 01 · LA COLUMNA ======================================================== */
.columna-entrega { max-width: calc(980px + var(--margen) * 2); }


/* 02 · CABECERA ========================================================== */
.cabecera-entrega { padding-top: var(--e9); padding-bottom: var(--e6); }

.sello-listo {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.sello-claro { color: var(--verde-claro); }
.cabecera-entrega h1:focus { outline: none; }
.cabecera-entrega h1:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 6px; }

/* La línea que confirma de qué plan estamos hablando. Sin esto, una
   pantalla de entrega es igual para cualquiera. */
/* Inline-block y no flex: con `gap` los puntos medios se despegan de las
   palabras y la línea se lee como tres etiquetas sueltas en vez de una
   frase. */
.linea-plan {
  display: inline-block;
  margin: 0;
  padding: var(--e3) var(--e5);
  border-radius: var(--r-boton);
  background: var(--fondo-superficie);
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
}
.linea-plan b { color: var(--texto-principal); font-weight: 600; }


/* 03 · LAS DOS SALIDAS ===================================================
   Lado a lado y con la misma jerarquía visual, porque la decisión no es
   cuál es mejor: es que una caduca y la otra no. Esa asimetría es lo único
   que las diferencia y va escrita en las dos. */
.salidas-franja { padding-bottom: var(--e10); }

.dos-salidas {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil);
  align-items: stretch;
}
.salida {
  display: flex; flex-direction: column;
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  padding: var(--e7);
}
.salida h2 { margin: 0 0 var(--e2); }
.salida .parrafo { margin: 0 0 var(--e6); }
.salida .boton { align-self: flex-start; }
.salida .micro { margin: var(--e4) 0 0; }

.marca-salida {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--e5);
}
.salida-pdf .marca-salida    { background: rgba(49, 125, 85, .14); color: var(--verde-profundo); }
.salida-enlace .marca-salida { background: rgba(93, 103, 226, .18); color: var(--purpura-profundo); }

.vida {
  margin: 0 0 var(--e5);
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
/* Verde: la confirmación y el avance. Es la copia que se queda. */
.vida-siempre { color: var(--verde-profundo); }
/* Amarillo sobre grafito, no rojo: no es un error, es una fecha. Rojo aquí
   asustaría de algo que el usuario eligió a sabiendas. */
.vida-caduca {
  display: inline-block;
  color: var(--grafito);
  background: var(--ambar-pleno);
  border-radius: var(--r-s);
  padding: 3px 9px;
  letter-spacing: .04em;
}

.caja-enlace {
  display: flex; gap: var(--e2);
  margin-top: auto;
}
.caja-enlace input {
  flex: 1; min-width: 0;
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
  background: var(--papel);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-boton);
  padding: 0 var(--e5);
  min-height: 46px;
  text-overflow: ellipsis;
}
.caja-enlace input:focus { outline: 2px solid var(--foco-anillo); outline-offset: 2px; }
.caja-enlace .boton { flex: 0 0 auto; }

.volver-plan {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--e7);
  font-family: var(--grot); font-size: 15px; font-weight: 500;
  color: var(--azul-profundo); text-decoration: none;
}
.volver-plan:hover { text-decoration: underline; text-underline-offset: 3px; }


/* 04 · EL BOLETÍN ========================================================
   Al final del recorrido, nunca como ventana de entrada. Aquí el usuario
   ya recibió algo; pedirle el correo antes habría sido cobrarle la
   entrada. */
.boletin-caja {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--e9); align-items: start;
}
.boletin-caja[hidden] { display: none; }

.promesas li { align-items: center; }
.promesas .marca-si { color: var(--verde-claro); }

.forma-boletin label {
  display: block; margin-bottom: var(--e3);
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul-claro);
}
.forma-boletin .campo {
  padding: 0;
  border-radius: var(--r-boton);
}
.forma-boletin input {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--e5);
  background: rgba(252, 250, 245, .08);
  border: 1px solid var(--borde-inverso);
  border-radius: var(--r-boton);
  color: var(--texto-inverso);
  font-family: var(--grot); font-size: 16px;
}
.forma-boletin input::placeholder { color: rgba(252, 250, 245, .45); }
.forma-boletin input:focus { outline: none; border-color: var(--carmin-pleno); }
.forma-boletin input:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; }
.forma-boletin .boton { width: 100%; margin-top: var(--e4); }
.forma-boletin .micro { margin-top: var(--e4); }

/* El error se dice donde está el campo, no en un aviso del navegador que
   se pierde si haces clic fuera. */
.error-correo {
  margin: var(--e3) 0 0;
  font-family: var(--grot); font-size: 14px;
  color: var(--ambar-profundo);
}
.error-correo[hidden] { display: none; }

.boletin-gracias[hidden] { display: none; }
.boletin-gracias h2:focus { outline: none; }
.boletin-gracias h2:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 6px; }


/* 05 · QUÉ HACER AHORA ================================================== */
.siguiente-franja { padding-bottom: var(--e10); }
.tres-salidas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--medianil);
}
.salida-corta {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e6);
  border-radius: var(--r-l);
  background: var(--fondo-superficie);
  text-decoration: none;
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.salida-corta:hover { transform: translateY(-2px); }
.salida-corta > .ms { color: var(--azul-profundo); margin-bottom: var(--e2); }
.nombre-corta {
  font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.2;
  color: var(--texto-principal);
}
.salida-corta:hover .nombre-corta { text-decoration: underline; text-underline-offset: 4px; }
.glosa-corta {
  font-family: var(--grot); font-size: 14px; line-height: 1.5;
  color: var(--texto-secundario);
}


/* 06 · PUNTOS DE CORTE ================================================== */
@media (max-width: 1023px) {
  .boletin-caja { grid-template-columns: 1fr; gap: var(--e7); }
  .tres-salidas { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* Apiladas se sigue leyendo la asimetría, porque cada una lleva su
     línea de vida escrita en la propia tarjeta. */
  .dos-salidas { grid-template-columns: 1fr; }
  .salida { padding: var(--e6) var(--e5); }
  .salida .boton { width: 100%; }
  .caja-enlace { flex-direction: column; }
  .caja-enlace .boton { width: 100%; }
  .volver-plan { margin-top: var(--e6); }
}

@media print {
  /* Esta pantalla no se imprime: lo que se imprime es el plan. */
  body::before {
    content: "Esta es la pantalla de entrega. Lo que se imprime es el plan, en la página anterior.";
    display: block; font-family: sans-serif; font-size: 12pt; padding: 20mm;
  }
  main, .nav, .pie, .hoja-menu { display: none !important; }
}