/* =========================================================
   Landing Pages especializadas por Buyer Persona — estilos
   COMPARTIDOS por las 4 landings (Carlos, Madre Migrante,
   Daniela, Padre Trabajador).

   Reutiliza tokens.css (colores/tipografía/radius/shadow) y los
   patrones ya existentes en sections.css/hero.css (.section,
   .section-head, .img-pending, .tone-1..4, .persona-grid,
   .persona-card, .about-split, .timeline, .faq-*, .final-cta,
   .hero-checklist, .check-icon, .btn/.btn-primary/.btn-secondary).

   Aquí solo se definen los componentes que SON exclusivos de
   estas landings (no existen en el Home): hero de landing a
   pantalla completa, tarjetas "¿Te suena familiar?", Antes vs
   Después, galería de escenarios, y la tarjeta narrativa de
   historia (distinta del .story-card testimonial del Home).
   ========================================================= */

/* ---------------------------------------------------------
   Hero de landing — 2 columnas, 100vh, foto dominante a la
   derecha (ver Especificación UX/UI, sección Hero > Layout).
   --------------------------------------------------------- */
.landing-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--ivory);
}
.landing-hero-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.landing-hero-content {
  width: min(560px, 46%);
  flex-shrink: 0;
  padding: 2.5rem 3vw 2.5rem 45px;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.landing-hero-content h1 {
  font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.16;
}
.landing-hero-sub {
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(10, 27, 51, 0.75);
  max-width: 46ch;
}
.landing-hero-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 0.25rem; }
.landing-hero-ctas .btn { width: 68%; }

/* Mismo estilo premium de pill del Hero del Home (2026-07-26), aplicado
   a las 4 landing pages — decisión final tras comparar variantes en
   landing-carlos. Primario: icono + texto en una sola línea (incluye
   "GRATIS" en la misma frase, sin el tratamiento de línea aparte del
   Home) + flecha. Secundario: sin icono a la izquierda (solo texto +
   flecha) — ver nota del cliente: "la flecha ya comunica 'haz clic y
   te lo muestro'". */
.landing-hero-ctas .btn-primary,
.landing-hero-ctas .btn-secondary {
  position: relative;
  justify-content: flex-start;
  gap: 11px;
  padding: 7px 9px;
  border: none;
  white-space: normal;
  text-align: left;
  overflow: hidden;
}

.landing-hero-ctas .btn-primary::before,
.landing-hero-ctas .btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 160% at 18% 0%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.landing-hero-ctas .btn-primary {
  background: linear-gradient(135deg, #ff6a4d 0%, var(--red) 55%, #b81c24 100%);
  box-shadow: 0 16px 32px -12px rgba(230, 48, 56, 0.55);
}
.landing-hero-ctas .btn-primary:hover {
  background: linear-gradient(135deg, #ff7a5e 0%, var(--red) 55%, var(--red-dark) 100%);
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -12px rgba(230, 48, 56, 0.6);
}

.landing-hero-ctas .btn-secondary {
  background: linear-gradient(135deg, #1c66ad 0%, var(--navy) 55%, var(--navy-dark) 100%);
  color: var(--white);
  padding-left: 20px;
}
.landing-hero-ctas .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -12px rgba(11, 72, 136, 0.5);
}

.landing-hero-ctas .btn-primary .hero-cta-arrow { color: var(--red); }
.landing-hero-ctas .btn-secondary .hero-cta-arrow { color: var(--navy); }

@media (max-width: 560px) {
  .landing-hero-ctas .btn { width: 100%; }
}

/* Misma corrección aplicada al Hero del Home (2026-07-26): la imagen
   se posiciona de forma absoluta dentro de su contenedor para que la
   caja SIEMPRE se estire (align-items:stretch en .landing-hero-inner)
   exactamente al mismo alto que la columna de texto, en cualquier
   ancho/alto de pantalla — sin esto, un <img> con height:100% dentro
   de un contenedor sin alto definido termina calculando su propio alto
   "natural" a partir de su proporción intrínseca, lo que deja huecos
   de color de fondo entre la foto y el texto (bug real, corregido
   primero en el Home). object-fit:contain garantiza que la foto nunca
   se recorte ni se deforme. */
.landing-hero-photo { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.landing-hero-photo .img-pending { width: 100%; height: 100%; min-height: 460px; }
.landing-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* Indicador de scroll (exclusivo de landings) */
.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(10, 27, 51, 0.5);
  font-size: 0.78rem;
  font-weight: 700;
}
.scroll-indicator svg { width: 16px; height: 16px; animation: scrollBounce 1.6s ease-in-out infinite; }
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 980px) {
  .landing-hero { min-height: auto; padding-top: 24px; }
  .landing-hero-inner { flex-direction: column; align-items: stretch; }
  .landing-hero-photo { order: -1; height: 46vh; min-height: 320px; }
  .landing-hero-photo .img-pending { min-height: 0; }
  .landing-hero-photo img { object-fit: cover; }
  .landing-hero-content { width: 100%; padding: 2rem 6vw 1.75rem; }
}

/* Laptops con poco alto de viewport (2026-07-26) — misma lección
   aprendida en el Hero del Home: el Hero completo (incluyendo los
   botones) debe verse sin necesidad de scroll. No se toca el diseño/
   color de los botones ni los emojis — solo se reduce interlineado y
   espaciado vertical de los textos. El ajuste de la foto (stretch +
   object-fit:contain, ver reglas base de .landing-hero-inner/
   .landing-hero-photo más arriba) ya aplica siempre, en todos los
   tamaños de pantalla. */
@media (min-width: 981px) and (max-height: 820px) {
  /* El Hero de landing centra su contenido verticalmente dentro de
     min-height:100vh (diseño original) — en viewports cortos eso resta
     margen de seguridad (empuja el contenido hacia abajo la mitad del
     espacio sobrante). Se alinea arriba solo en este rango para
     maximizar el espacio disponible antes de los botones.

     Como el contenido ya es más compacto aquí, forzar min-height:100vh
     dejaba el Hero pegado al header (0px arriba) y un hueco enorme
     antes de la siguiente sección (todo el sobrante de 100vh caía
     abajo). Se reemplaza por un espacio fijo pequeño (~1cm) arriba y
     abajo, en vez de forzar el alto completo del viewport. */
  .landing-hero { min-height: auto; align-items: flex-start; padding: 1cm 0; }
  .landing-hero-content { padding: 0.6rem 3vw 0.6rem 45px; gap: 0.35rem; }
  .landing-hero-content h1 { font-size: clamp(1.9rem, 1rem + 1.6vw, 2.6rem); line-height: 1.08; }
  .landing-hero-sub { line-height: 1.3; }
  .landing-hero-ctas { margin-top: 10px; }
}

/* ---------------------------------------------------------
   "¿Te suena familiar?" — misma retícula de 4 tarjetas que
   .persona-grid del Home, con hover propio (zoom de imagen +
   elevación) porque el hover pedido aquí es distinto al de
   .persona-card.
   --------------------------------------------------------- */
.familiar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.familiar-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.familiar-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -16px rgba(10, 27, 51, 0.24); }
.familiar-photo { height: 190px; overflow: hidden; }
.familiar-photo .img-pending { width: 100%; height: 100%; transition: transform 0.4s ease; }
.familiar-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.familiar-card:hover .familiar-photo .img-pending,
.familiar-card:hover .familiar-photo img { transform: scale(1.05); }
.familiar-card-body { padding: 20px 22px 24px; }
.familiar-card-body p { font-weight: 700; font-size: 1rem; color: var(--navy-ink); line-height: 1.4; }

@media (max-width: 980px) { .familiar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .familiar-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Carrusel de historia — usado en "¿Te suena familiar?" de
   landing-carlos en vez de .familiar-grid (3 de las 4 fotos
   originales eran la misma imagen genérica reutilizada; el
   cliente aportó 4 fotos propias, una por escena, mejor
   mostradas una a la vez con navegación). Reutiliza tokens del
   Design System (colores, radius, shadow, tipografía) — solo
   la mecánica de carrusel es exclusiva de esta landing.
   --------------------------------------------------------- */
.story-carousel { max-width: 640px; margin: 0 auto; }
.story-carousel-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.story-carousel-visual {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 18px;
}
.story-carousel-arrow {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(11, 72, 136, 0.08);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.story-carousel-arrow:hover { background: var(--red); color: var(--white); }
.story-carousel-arrow:active { transform: scale(0.94); }
.story-carousel-arrow svg { width: 20px; height: 20px; }

.story-carousel-image {
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ivory);
}
.story-carousel-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story-carousel-timeline { max-width: 480px; margin: 22px auto 0; }
.story-carousel-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(10, 27, 51, 0.45);
  margin-bottom: 8px;
}
.story-carousel-track { height: 4px; background: rgba(10, 27, 51, 0.1); border-radius: 999px; position: relative; }
.story-carousel-fill {
  position: absolute;
  left: 0; top: 0; height: 100%;
  background: var(--red);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.story-carousel-nodes { display: flex; justify-content: space-between; margin-top: -12px; }
.story-carousel-node {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(10, 27, 51, 0.2);
  border: 3px solid var(--white);
  transition: background 0.3s ease;
}
.story-carousel-node.is-active { background: var(--red); }

.story-carousel-text { max-width: 480px; margin: 18px auto 0; text-align: left; }
.story-carousel-counter {
  color: var(--red);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  margin-bottom: 6px;
}
.story-carousel-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy-ink);
  margin-bottom: 8px;
  line-height: 1.22;
}
.story-carousel-desc { font-size: 0.95rem; line-height: 1.55; color: rgba(10, 27, 51, 0.72); }

@media (max-width: 640px) {
  .story-carousel-card { padding: 20px; }
  .story-carousel-visual { grid-template-columns: 38px 1fr 38px; gap: 10px; }
  .story-carousel-image { height: 220px; }
  .story-carousel-arrow { width: 38px; height: 38px; }
  .story-carousel-arrow svg { width: 18px; height: 18px; }
  .story-carousel-labels { font-size: 0.62rem; }
}

/* ---------------------------------------------------------
   "Antes vs Después" — dos columnas + flecha animada + foto
   de fondo desenfocada.
   --------------------------------------------------------- */
.before-after {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 56px 40px;
  isolation: isolate;
}
.before-after-bg { position: absolute; inset: 0; z-index: -2; filter: blur(8px) brightness(0.9); transform: scale(1.08); }
.before-after-bg .img-pending { width: 100%; height: 100%; }
.before-after-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.before-after::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(248, 246, 244, 0.9); }

.before-after-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
}
.before-after-col { text-align: center; }
.before-after-col h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; }
.before-after-col.is-before h3 { color: rgba(10, 27, 51, 0.55); }
.before-after-col.is-after h3 { color: var(--navy); }
.before-after-col ul { display: flex; flex-direction: column; gap: 12px; }
.before-after-col li { font-weight: 700; font-size: 1rem; padding: 10px 0; border-bottom: 1px solid rgba(10, 27, 51, 0.08); }
.before-after-col.is-before li { color: rgba(10, 27, 51, 0.5); }
.before-after-col.is-after li { color: var(--navy-ink); }

.before-after-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  animation: arrowPulse 1.8s ease-in-out infinite;
}
.before-after-arrow svg { width: 26px; height: 26px; }
@keyframes arrowPulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

@media (max-width: 760px) {
  .before-after-grid { grid-template-columns: 1fr; }
  .before-after-arrow { margin: 4px auto; transform: rotate(90deg); }
}

/* ---------------------------------------------------------
   Galería de escenarios (Sección "Cómo son las clases",
   debajo del .timeline reutilizado del Home).
   --------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
.gallery-tile { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.gallery-tile .img-pending { aspect-ratio: 4 / 5; }
.gallery-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.gallery-tile span {
  display: block;
  text-align: center;
  padding: 12px 6px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-ink);
  background: var(--white);
}
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------
   Subsección "Cada clase se adapta a tu realidad laboral"
   (2026-07-26, exclusiva de landing-carlos, entre el timeline y
   las tarjetas de escenarios de la sección "Cómo son las clases").
   --------------------------------------------------------- */
.scenario-subhead { text-align: center; max-width: 640px; margin: 48px auto 0; }
.scenario-subhead h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  color: var(--navy-ink);
  margin: 0 0 10px;
}
.scenario-subhead p {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(10, 27, 51, 0.72);
  margin: 0;
}

/* ---------------------------------------------------------
   Flip Cards de escenarios (2026-07-26, exclusivo de
   landing-carlos — la sección "¿Cómo son las clases?" de las
   otras 3 landings sigue usando .gallery-tile sin cambios).
   Mismas imágenes del frente; el reverso muestra lo que se
   practica en cada escenario. Gira con hover/focus (rotateY 3D).
   --------------------------------------------------------- */
.flip-tile { perspective: 1200px; }
.flip-tile-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.5s cubic-bezier(0.4, 0.15, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.flip-tile:hover .flip-tile-inner,
.flip-tile:focus-within .flip-tile-inner {
  transform: rotateY(180deg);
}
.flip-tile-front,
.flip-tile-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-tile-front { display: flex; flex-direction: column; }
.flip-tile-front img { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; }
.flip-tile-front span {
  display: block;
  text-align: center;
  padding: 12px 6px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-ink);
  background: var(--white);
}
.flip-tile-back {
  transform: rotateY(180deg);
  background: var(--navy);
  color: var(--white);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.flip-tile-back h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.flip-tile-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.flip-tile-back ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.flip-tile-back li {
  position: relative;
  padding-left: 18px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--white);
}
.flip-tile-back li::before { content: "✔"; position: absolute; left: 0; top: 0; font-size: 0.68rem; color: var(--white); }
.flip-tile-quote {
  margin-top: auto;
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .flip-tile-inner { transition: none; }
}

/* ---------------------------------------------------------
   Historia (tarjeta narrativa grande — NO es un testimonio
   tradicional, por eso no reutiliza .story-card del Home).
   --------------------------------------------------------- */
.story-feature {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 48px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
.story-feature-photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 5; }
.story-feature-photo .img-pending { width: 100%; height: 100%; }
.story-feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-feature-body h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; }
.story-beat { margin-bottom: 16px; }
.story-beat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.story-beat p { font-size: 0.98rem; line-height: 1.55; color: rgba(10, 27, 51, 0.78); }
.story-feature-body .btn { margin-top: 12px; }
.story-cta-hint {
  display: block;
  margin-top: 10px;
  font-size: 0.85rem;
  color: rgba(10, 27, 51, 0.55);
}

@media (max-width: 980px) {
  .story-feature { grid-template-columns: 1fr; padding: 28px; }
  .story-feature-photo { aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------
   Animaciones pedidas explícitamente para las landings
   (no aplican al Home, por eso se escriben aquí y no en
   sections.css, y se acotan con .landing-page en <body>).
   --------------------------------------------------------- */

/* Glow rojo en el botón principal al pasar el cursor */
.landing-page .btn-primary:hover { box-shadow: 0 0 0 6px rgba(230, 48, 56, 0.14), var(--shadow-btn); }

/* Fade Up de entrada de secciones/tarjetas al hacer scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.18s ease, transform 0.18s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-indicator svg, .before-after-arrow { animation: none; }
}