/* ATERRIZA EU — R1: composición específica de la portada nueva (/).
 * Los componentes reutilizables viven en componentes.css; aquí solo la
 * maquetación de cada sección y las cabeceras/pie de esta página en concreto.
 */

/* ---- Cabecera --------------------------------------------------------- */
.cabecera {
  background: var(--color-crema);
  padding-block: var(--espacio-4);
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  border-bottom: 1px solid var(--color-borde);
}
.cabecera-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  flex-wrap: wrap;
}
.cabecera-nav__marca img { height: 34px; width: auto; }
.cabecera-nav ul { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5); }
/* Cabecera y pie: listas de navegación sin viñetas ni sangría. Sus <ul> no llevan clase y el `ul[class]` del reset no
   las alcanza; paginas.css ya lo corrige (bloque «Cabecera, migas y pie») pero la portada no carga paginas.css, y se
   veía con viñetas entre los enlaces y 40 px de sangría (09/10/2026, prueba previa al estreno pagado). */
.cabecera-nav ul, .pie ul { list-style: none; padding: 0; margin: 0; }
.cabecera-nav a {
  text-decoration: none;
  font-weight: var(--peso-semibold);
  font-size: var(--texto-sm);
  color: var(--color-carbon-70);
}
.cabecera-nav a:hover { color: var(--color-carbon); }
.cabecera-nav li:last-child a {
  background: var(--color-carbon);
  color: var(--color-crema);
  padding: 0.5em 1em;
  border-radius: var(--radio-completo);
}

/* ---- Secciones genéricas ------------------------------------------------ */
main > section { padding-block: var(--espacio-10); }
/* La cabecera es sticky: cualquier ancla (#como-funciona) necesita este
   margen o el título queda tapado al saltar directamente a la sección. */
main section[id] { scroll-margin-top: 92px; }
.superficie-oscura {
  background: var(--color-carbon);
  color: var(--color-crema);
}
.superficie-oscura h2, .superficie-oscura h3 { color: var(--color-crema); }
.superficie-oscura p { color: rgba(247, 245, 239, 0.82); }
.envoltura--angosta { max-width: 760px; }

/* ---- Hero ---------------------------------------------------------------- */
.seccion-hero { padding-top: var(--espacio-8); }
.hero__envoltura {
  display: grid;
  gap: var(--espacio-8);
  align-items: center;
}
@media (min-width: 860px) {
  .hero__envoltura { grid-template-columns: 1.1fr 0.9fr; }
}
.hero__lema {
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-salvia);
  margin-bottom: var(--espacio-3);
}
.hero__titular { margin-bottom: var(--espacio-4); }
.hero__subtexto { font-size: var(--texto-md); color: var(--color-carbon-70); margin-bottom: var(--espacio-5); }
.seccion-hero .acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
.seccion-hero .boton--secundario { color: var(--color-carbon); }

/* Pliegue móvil (09/10/2026, prueba previa al estreno pagado del 15/10): con el hero en una columna
   (menos de 860 px) el botón que lleva a crear la cuenta quedaba a 659-709 px del borde de arriba en
   un móvil de 360 px de ancho, es decir, bajo el pliegue de un Android pequeño y de cualquier
   navegador dentro de Facebook/Instagram (que enseña menos altura que Chrome). Se sube justo debajo
   del titular, que ya dice «empieza por aquí», y el párrafo explicativo pasa detrás. Solo cambia el
   orden visual: el HTML no se toca y el párrafo no es enfocable, así que el orden de tabulación es
   el mismo. En escritorio (dos columnas) no cambia nada. */
@media (max-width: 859px) {
  .hero__texto { display: flex; flex-direction: column; }
  .hero__texto .acciones { order: 1; margin-bottom: var(--espacio-5); }
  .hero__texto .hero__subtexto { order: 2; margin-bottom: 0; }
}

.hero__grafico { position: relative; }
.hero__vista-previa { display: flex; flex-direction: column; gap: var(--espacio-3); }
.hero__vista-previa-etiqueta { font-weight: var(--peso-extrabold); font-size: var(--texto-lg); }
.hero__vista-previa-sub { color: var(--color-carbon-50); font-size: var(--texto-sm); margin-top: -0.5rem; }
.resumen-personal--mini { grid-template-columns: repeat(2, 1fr) !important; }
.hero__escalerita {
  position: absolute;
  right: -18px;
  bottom: -28px;
  filter: drop-shadow(0 10px 18px rgba(15, 42, 43, 0.18));
}
@media (max-width: 859px) {
  .hero__escalerita { display: none; }
}

/* ---- Problema -------------------------------------------------------------- */
.seccion-problema__intro { font-size: var(--texto-md); color: var(--color-carbon-70); margin-bottom: var(--espacio-6); }
.lista-golpes { margin-top: var(--espacio-5); }
.lista-golpes .tarjeta-recurso p:last-child { font-size: var(--texto-sm); color: var(--color-carbon-70); max-width: none; }

/* ---- Entiende / Organiza / Avanza ------------------------------------------- */
.verbos__rejilla { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .verbos__rejilla { grid-template-columns: 1fr; } }
.verbos__numero {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: var(--texto-sm);
  color: var(--color-amarillo);
  letter-spacing: 0.08em;
  margin-bottom: var(--espacio-2);
}
.verbos__item h3 { margin-bottom: var(--espacio-2); }

/* ---- Lo que puedes llevarte (19/10/2026) ------------------------------------ */
.seccion-productos__intro { font-size: var(--texto-md); color: var(--color-carbon-70); margin-bottom: var(--espacio-6); }
.productos__rejilla { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tarjeta-producto { display: flex; flex-direction: column; gap: var(--espacio-2); }
.tarjeta-producto__titulo { font-size: var(--texto-lg); }
.tarjeta-producto__precio { font-size: var(--texto-xl); font-weight: var(--peso-extrabold); color: var(--color-carbon); line-height: var(--interlineado-ajustado); }
.tarjeta-producto__condicion { display: block; font-size: var(--texto-sm); font-weight: var(--peso-semibold); color: var(--color-carbon-50); }
.tarjeta-producto__texto { font-size: var(--texto-sm); color: var(--color-carbon-70); }
.tarjeta-producto__incluye-titulo { font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-carbon-70); margin-top: var(--espacio-2); }
.tarjeta-producto__incluye { list-style: disc; padding-left: 1.2em; font-size: var(--texto-sm); color: var(--color-carbon-70); flex-grow: 1; }
.tarjeta-producto__incluye li + li { margin-top: var(--espacio-1); }
.tarjeta-producto .acciones { margin-bottom: 0; }
.tarjeta-producto .boton--secundario { color: var(--color-carbon); }
.seccion-productos__nota { margin-top: var(--espacio-5); font-size: var(--texto-sm); color: var(--color-carbon-70); }
.seccion-productos__nota a { color: var(--color-carbon); }

/* ---- Hola, María ------------------------------------------------------------- */
.panel-hola-maria { max-width: 640px; margin-top: var(--espacio-6); gap: var(--espacio-5); display: flex; flex-direction: column; }
.panel-hola-maria__saludo { font-size: var(--texto-xl); font-weight: var(--peso-extrabold); }
.panel-hola-maria__sub { color: var(--color-carbon-50); margin-top: -0.75rem; }
.panel-hola-maria__alerta { margin: 0; }
.panel-hola-maria__proximos { display: flex; flex-direction: column; }

/* ---- Áreas de vida ------------------------------------------------------------- */
.areas__rejilla { grid-template-columns: repeat(2, 1fr); margin-top: var(--espacio-6); }
@media (min-width: 640px) { .areas__rejilla { grid-template-columns: repeat(4, 1fr); } }
.tarjeta-area__icono { font-size: 1.4rem; background: none; }

/* ---- Confianza ------------------------------------------------------------------ */
.confianza__ejemplo { margin-top: var(--espacio-5); }
.confianza__cita { font-size: var(--texto-md); font-style: italic; color: var(--color-carbon); margin-bottom: 0; }

/* ---- Comunidad -------------------------------------------------------------------- */
.seccion-comunidad .publicacion-comunidad { max-width: 640px; margin-top: var(--espacio-5); background: rgba(247, 245, 239, 0.06); border-color: rgba(247, 245, 239, 0.35); }
.seccion-comunidad .publicacion-comunidad__origen,
.seccion-comunidad .publicacion-comunidad__cabecera,
.seccion-comunidad .publicacion-comunidad p { color: rgba(247, 245, 239, 0.85); }
.seccion-comunidad__nota { margin-top: var(--espacio-5); font-size: var(--texto-sm); }

/* ---- Agente ------------------------------------------------------------------------- */
.seccion-agente .entrada-agente { margin-top: var(--espacio-5); }

/* ---- 5 fases (pequeño) ---------------------------------------------------------------- */
.fases__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  counter-reset: fase;
  margin-top: var(--espacio-4);
}
.fases__lista li { counter-increment: fase; }
.fases__lista a {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-completo);
  text-decoration: none;
  font-weight: var(--peso-semibold);
  font-size: var(--texto-sm);
  color: var(--color-carbon-70);
}
.fases__lista a::before {
  content: counter(fase);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-salvia);
  color: white;
  font-size: 0.65rem;
  font-weight: var(--peso-bold);
}
.fases__nota { margin-top: var(--espacio-4); font-size: var(--texto-sm); color: var(--color-carbon-70); }

/* ---- Origen -------------------------------------------------------------------------------- */
.origen__frase { font-size: var(--texto-xl); font-weight: var(--peso-semibold); line-height: var(--interlineado-titular); }
.origen__enlace { margin-top: var(--espacio-5); font-weight: var(--peso-semibold); }
.origen__enlace a { color: var(--color-amarillo); text-decoration-color: rgba(255, 211, 77, 0.45); text-underline-offset: 0.2em; }

/* ---- CTA final ------------------------------------------------------------------------------- */
.seccion-cta-final { padding-block: var(--espacio-12); }

/* ---- Pie --------------------------------------------------------------------------------------- */
.pie { background: var(--color-carbon); color: rgba(247, 245, 239, 0.75); padding-block: var(--espacio-8); }
.pie__marca img { height: 30px; width: auto; margin-bottom: var(--espacio-5); }
.pie-aviso { font-size: var(--texto-sm); max-width: var(--ancho-lectura); margin-bottom: var(--espacio-5); }
.pie__enlaces ul, .pie__redes ul, .pie nav[aria-label="Legal"] ul {
  display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5);
  margin-bottom: var(--espacio-4);
}
.pie a { color: var(--color-crema); text-decoration: underline; text-decoration-color: rgba(247,245,239,0.35); }
.pie-cuenta { margin-bottom: var(--espacio-5); font-weight: var(--peso-semibold); }
/* Subrayado: el enlace se distinguía del texto solo por el color (amarillo sobre gris claro: 1,26:1), y eso no basta
   (WCAG 1.4.1; «link-in-text-block» de Lighthouse). */
.pie-cuenta a { color: var(--color-amarillo); text-decoration: underline; text-decoration-color: currentColor; }
.pie-sello { font-size: var(--texto-xs); color: rgba(247, 245, 239, 0.55); }
.pie-operador { font-size: var(--texto-xs); color: rgba(247, 245, 239, 0.75); margin-bottom: var(--espacio-4); }
.pie-sello--mysaaslux { margin-top: var(--espacio-2); }