/* ==========================================================================
   LANDING — hoja propia, escrita desde el mockup

   No es una variante del sistema de `site.css`: el mockup es otro diseño y
   adaptarlo desde el anterior fue justo lo que salió mal dos veces. Todas las
   medidas de aquí están MEDIDAS sobre la imagen aprobada (1344×768) y llevadas
   a un ancho de referencia de 1440. Las que importan:

     héroe        498/1344  → relación 2.70:1  → 533 px de alto a 1440
     nav píldora  1078 ancho · 67 alto · 17 arriba · 124 lateral
     titular      altura de mayúscula 40 px → 56 px de cuerpo · interlínea 1.08
     franja cian  66 px de alto
     sello        140 px de diámetro
     CTA          38 px de alto

   El error de las versiones anteriores fue el alto del héroe: iba en 795 px
   cuando el mockup pide 533. Todo lo demás se desplazaba por eso.

   Solo se carga en la landing (front matter `extra_css: landing`).
   ========================================================================== */


/* ---------- Paleta, muestreada del mockup ----------
   No son los tokens de marca. El sistema usa --hr-navy #003A85, que es un azul
   más apagado; el mockup corre un royal profundo y un cian más brillante, y esa
   combinación es buena parte de por qué se ve vivo. Como la landing tiene hoja
   propia, la paleta vive aquí y no contamina las otras 18 páginas.

   Cada valor es la moda de los píxeles del elemento en la imagen aprobada. */
.page--landing {
  --lp-navy:        #001F6B;   /* titulares y botones */
  --lp-navy-deep:   #011A5C;   /* hover */
  --lp-cyan:        #00A9F2;   /* "More Life.", eyebrow */
  --lp-cyan-bright: #00B4FA;   /* círculos de viñeta y de check */
  --lp-grey:        #5C6469;   /* subtítulo — ver nota de contraste abajo */
  --lp-gold:        #F5BD4E;   /* destello y corazón */
  --lp-pitch-bg:    #ECF7FD;   /* fondo de "Peace of mind" */
}

/* ---------- Lo que la landing apaga del sistema anterior ---------- */
.page--landing .audience { display: none; }
.page--landing #theme { display: none; }

/* Nav flotando sobre la foto, con aire por arriba y por los lados. */
.page--landing .header {
  /* fixed, no absolute: así el nav —y el "Get a quote"— siguen visibles
     durante todo el scroll. No ocupa hueco porque flota sobre el héroe. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  padding-top: 18px;
}
/* El mockup pone la píldora al 80.2% del ancho, dejando 9.9% a cada lado, y el
   texto del héroe arranca en el mismo 9.6%. Con un contenedor centrado de
   1180px fijo, en pantallas anchas el texto se iba al 18% y dejaba el hueco
   vacío que se veía a la izquierda. En porcentaje, ambos caen donde deben a
   cualquier ancho. */
/* Mismo ancho para nav, héroe y las secciones de la landing: si el héroe va
   al 81% y las secciones a 1200 fijos, las columnas de abajo se estrechan y
   el texto se parte en exceso. */
.page--landing .header .container,
.lp-hero__inner.container,
.lp-pitch__grid.container,
.lp-close__grid.container,
.lp-strip .container { width: 81%; max-width: 1560px; padding-inline: 0; }

.page--landing .nav { min-height: 71px; padding: 5px 26px 5px 22px; }
.page--landing .logo__img { height: 34px; }
.page--landing .logo__wm { font-size: 24px; }
/* 26px hasta el borde de la píldora, medido del mockup. Sin esto el botón
   quedaba pegado al filo. */
.page--landing .nav__cta { min-height: 38px; padding: 0 22px; font-size: 15px; }

/* ==========================================================================
   HÉROE
   ========================================================================== */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #D7EAFA;   /* muestreado del cielo de la foto, para que la
                            máscara funda sin salto de tono */
  /* 37vw da los 533 px del mockup a 1440. Los topes evitan que en pantallas
     muy anchas se vuelva una banda gigante y en portátiles se aplaste. */
  /* Relación 2.70:1, la del mockup. La foto no se recorta: se ENCOGE hasta caber
     entera (ver .lp-hero__bg), así el sello quemado sale completo sin tener que
     alargar el héroe. Decisión de Alex el 2026-07-31.

     MIN-height y no height: si el bloque de texto crece —fuentes del sistema,
     traducción, zoom— empuja en vez de meterse debajo del nav flotante. */
  min-height: clamp(500px, 37vw, 780px);
  display: flex;
  align-items: flex-end;
  /* deja libre la banda del nav flotante */
  padding-top: clamp(96px, 7vw, 130px);
}
.lp-hero__bg,
.lp-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  /* CONTAIN, no cover: la foto entra completa en vez de recortarse. Como es
     1.75:1 dentro de un héroe 2.70:1, entra por el alto y ocupa ~65% del ancho;
     se ancla a la derecha para que el hueco caiga en la izquierda, que es donde
     va el texto y donde el velo la cubriría igual. */
  object-fit: contain; object-position: 100% 50%;
  border-radius: 0;
  /* Al no cubrir todo el ancho, `contain` deja un canto vertical visible donde
     arranca la foto. La máscara lo funde con el fondo del héroe en unos 120px,
     así el corte deja de leerse como un borde. */
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 44%);
          mask-image: linear-gradient(to right, transparent 30%, #000 44%);
}
/* Velo. `to right` y no un ángulo: con ángulo, la línea del degradado mide
   |W·sinθ|+|H·cosθ| — más que el ancho — y las paradas caen fuera del recuadro,
   así que nunca llega a transparente y tapa la foto entera. Pasó exactamente
   eso. Las paradas salen de medir el peor píxel bajo cada bloque de texto. */
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right,
    rgba(226,241,252,.96) 0%,  rgba(226,241,252,.93) 26%,
    rgba(226,241,252,.84) 42%, rgba(226,241,252,.46) 54%,
    rgba(226,241,252,.12) 63%, rgba(226,241,252,0) 71%);
}

.lp-hero__inner {
  position: relative;
  width: 100%;
  padding-bottom: 26px;
}
/* 470/1344 del mockup = 35% del ancho. Fijo en 560px se quedaba corto en
   pantallas anchas y el texto se veía pequeño frente a la foto. */
.lp-hero__text { display: grid; gap: clamp(14px, 1.5vw, 30px); max-width: min(42%, 820px); }

.lp-h1 {
  margin: 0;
  /* 56px sobre 1344 = 4.17vw. Antes topaba en 60px, así que en pantallas
     anchas el titular se quedaba chico frente al resto. */
  font-size: clamp(2.1rem, 4.17vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 800;
  color: var(--lp-navy);
}
.lp-h1 em { font-style: normal; color: var(--lp-cyan); }
/* `img, svg { display: block }` en site.css tira estos adornos a su propio
   renglón si no se revierte. */
.lp-h1 .spark { display: inline-block; color: var(--lp-gold); margin-left: .1em; }
.lp-h1 .spark svg { display: inline-block; width: .38em; height: .38em; vertical-align: .2em; }

.lp-lede {
  font-size: clamp(.95rem, 1.27vw, 1.45rem); line-height: 1.5;
  color: var(--lp-grey);
  /* 52ch para que rompa después de "MO" y queden DOS líneas como el mockup.
     Con 34ch salían tres y el bloque no cabía en el alto del héroe. */
  max-width: 52ch;
}

.lp-points {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, .9vw, 18px) clamp(18px, 1.9vw, 34px); align-items: start; max-width: 100%;
}
.lp-point { display: flex; gap: clamp(10px, 1.26vw, 22px); align-items: center; }
.lp-point__ico {
  flex: none; width: clamp(30px, 2.38vw, 44px); height: clamp(30px, 2.38vw, 44px); border-radius: 50%;
  /* FLEX y no grid+place-content: con el svg dimensionado en % el track de grid
     se auto-dimensiona contra el propio hijo y el centrado sale desplazado un
     cuarto del círculo — medido, 8.6px de 34. Flex resuelve el porcentaje
     contra la caja del contenedor y centra de verdad. */
  display: flex; align-items: center; justify-content: center;
  background: var(--lp-cyan-bright);
}
/* Especificidad reforzada a propósito, para que no vuelva a perder. */
.lp-point .lp-point__ico { color: #fff; }
.lp-point__ico svg { width: 52%; height: 52%; flex: none; }
/* Las dos líneas miden LO MISMO y van del mismo navy. Lo tuve mal dos veces:
   primero ambas a 1.04vw, luego la segunda encogida a .86vw porque medí la
   altura de MAYÚSCULA en la primera línea y la de EQUIS en la segunda — no son
   comparables. En "Easy booking / & reliable service", donde ambas tienen
   ascendentes, las dos miden 18px en el recorte de referencia. */
.lp-point b { display: block; font-size: clamp(.8125rem, 1.12vw, 1.3rem); font-weight: 700; color: var(--lp-navy); line-height: 1.3; }
/* `.lp-point > span > span` y no `.lp-point span`: el segundo también alcanzaba
   al <span class="lp-point__ico"> y le pintaba los glifos de gris en vez de
   blanco. Mismo patrón que el botón del footer — una regla de descendiente
   ganándole por especificidad a la del componente. */
.lp-point > span > span { display: block; font-size: clamp(.8125rem, 1.12vw, 1.3rem); font-weight: 500; color: var(--lp-navy); line-height: 1.3; }

/* Botón y confianza en la MISMA fila, como el mockup. Con wrap la lista se
   iba debajo y el bloque crecía 55px, que era parte de por qué no cabía. */
.lp-cta { display: flex; flex-wrap: nowrap; gap: clamp(14px, 1.6vw, 30px); align-items: center; }
.lp-cta .btn { flex: none; }
.lp-trust { min-width: 0; }
.lp-cta .btn {
  min-height: clamp(44px, 3.2vw, 58px); padding: 0 clamp(22px, 1.9vw, 34px); gap: 9px;
  font-size: clamp(.9375rem, 1.19vw, 1.35rem);
}
.lp-cta .btn__badge { width: auto; height: auto; background: none; color: inherit; }

.lp-trust { display: grid; gap: 3px; }
.lp-trust li {
  display: flex; gap: 7px; align-items: center;
  font-size: clamp(.8125rem, 1.04vw, 1.2rem); font-weight: 600; color: var(--lp-navy);
}
.lp-trust svg { width: 14px; height: 14px; color: var(--lp-cyan); flex: none; }

/* Sello circular sobre la foto. */
.lp-seal { display: none; }
@media (min-width: 1080px) {
  .lp-seal {
    display: grid; place-content: center; text-align: center;
    position: absolute; right: 7.5%; top: 50%; transform: translateY(-42%); z-index: 2;
    width: clamp(150px, 11.2vw, 210px); height: clamp(150px, 11.2vw, 210px); border-radius: 50%;
    background: var(--lp-navy); color: #fff;
    border: 3px solid rgba(255,255,255,.9);
    box-shadow: 0 12px 30px rgba(0,28,64,.3);
    padding: 12px;
  }
}
.lp-seal small { display: block; font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; opacity: .85; }
.lp-seal strong { display: block; font-size: 14px; line-height: 1.15; margin-block: 5px; letter-spacing: -.01em; }
.lp-seal svg { display: block; width: 13px; height: 13px; color: var(--lp-gold); margin: 2px auto 0; }

@media (prefers-reduced-motion: no-preference) {
  .lp-hero__bg { animation: hr-kenburns 34s ease-in-out infinite alternate; }
}

/* En vertical el texto cae encima de la persona: el héroe deja de tener alto
   fijo y el velo pasa a cubrir todo. */
@media (max-width: 899px) {
  .lp-hero { height: auto; padding-top: 120px; }
  .lp-hero::before { background: rgba(226,241,252,.94); }
  .lp-hero__bg { object-position: 58% 40%; }
  .lp-hero__inner { padding-block: 20px 44px; }
  .lp-points { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FRANJA CIAN
   Cian exacto del mockup por decisión de Alex. Mide 2.53:1 con el texto blanco
   encima; el mínimo para texto es 4.5:1. Ver SPECS D-22.
   ========================================================================== */
.lp-strip { background: var(--hr-cyan-bright); color: #fff; }
.lp-strip ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  min-height: 70px; align-items: center;
}
.lp-strip li { display: flex; gap: 12px; align-items: center; padding-block: 12px; }
.lp-strip li + li { border-left: 1px solid rgba(255,255,255,.35); padding-left: 26px; }
.lp-strip svg { width: 24px; height: 24px; flex: none; }
.lp-strip b { display: block; font-size: .8125rem; font-weight: 700; line-height: 1.35; }
.lp-strip span span { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.lp-strip b, .lp-strip span { text-shadow: 0 1px 2px rgba(0,60,90,.38); }
@media (max-width: 1059px) {
  .lp-strip ul { grid-template-columns: 1fr 1fr; gap: 14px; padding-block: 16px; }
  .lp-strip li + li { border-left: 0; padding-left: 0; }
}
@media (max-width: 559px) { .lp-strip ul { grid-template-columns: 1fr; } }

/* ==========================================================================
   PEACE OF MIND
   Tres zonas: titular · párrafo arriba a su derecha · foto.
   Fondo medido del mockup: #ECF7FD.
   ========================================================================== */
.lp-pitch { background: var(--lp-pitch-bg); padding-block: 64px; }
@media (min-width: 1000px) { .lp-pitch { padding-block: 76px; } }
.lp-pitch__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) {
  /* Proporciones del markup aprobado: titular · párrafo+checks · foto.
     La foto pesa más que las otras dos porque es la que sostiene la sección. */
  .lp-pitch__grid {
    grid-template-columns: minmax(0,1fr) minmax(0,.76fr) minmax(0,1.42fr);
    gap: 32px clamp(28px, 3vw, 56px);
    align-items: center;
  }
}
.lp-pitch__head { display: grid; gap: 22px; justify-items: start; }
.lp-pitch__mid { display: grid; gap: 22px; }
.lp-eyebrow {
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lp-cyan); margin-bottom: 14px;
}
.lp-pitch h2 {
  margin: 0 0 22px;
  font-size: clamp(1.9rem, 3.1vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.032em; font-weight: 800;
  text-transform: none; color: var(--lp-navy);
}
.lp-pitch h2 .heart { display: inline-block; color: var(--lp-gold); margin-left: .2em; }
.lp-pitch h2 .heart svg { display: inline-block; width: .52em; height: .52em; vertical-align: -.02em; }
.lp-pitch__note { font-size: clamp(.9375rem, 1.1vw, 1.25rem); line-height: 1.6; color: var(--lp-grey); }

.lp-checks { display: grid; gap: 13px; }
.lp-checks li { display: flex; gap: 12px; align-items: center; font-size: clamp(.875rem, 1.02vw, 1.15rem); color: var(--lp-navy); }
.lp-checks .tick {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  background: var(--lp-cyan-bright); color: #fff; display: grid; place-content: center;
}
.lp-checks .tick svg { width: 11px; height: 10px; }
/* Proporción NATIVA de la foto (1344x768), no 3/2: con un marco 3:2 `cover` le
   recortaba los lados y la familia quedaba pequeña dentro de un sofá vacío. */
.lp-pitch__media img, .lp-pitch__media .imgph {
  width: 100%; aspect-ratio: 1344 / 768; object-fit: cover; border-radius: 18px;
}

/* Botones: el mockup los corre en #001F6B, no en el --hr-primary del sistema. */
.page--landing .nav__cta,
.page--landing .lp-cta .btn--primary { background: var(--lp-navy); border-color: var(--lp-navy); }
.page--landing .nav__cta:hover,
.page--landing .lp-cta .btn--primary:hover { background: var(--lp-navy-deep); }
.page--landing .logo__wm { color: var(--lp-navy); }
.lp-pitch .btn--outline { color: var(--lp-navy); border-color: var(--lp-navy); }
.lp-pitch .btn--outline .btn__badge { background: var(--lp-navy); }

/* ==========================================================================
   CIERRE — foto a la izquierda, texto a la derecha
   ========================================================================== */
.lp-close { background: #fff; padding-block: clamp(56px, 5vw, 96px); }
.lp-close__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .lp-close__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(36px, 4vw, 72px); }
}
/* 16:9 y no 4:3: la foto vino en 1.79 y con un marco 4:3 `cover` le recortaba
   los lados — justo donde están el frutero y la planta, que es el color. */
.lp-close__media img, .lp-close__media .imgph {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px;
}
.lp-close__copy { display: grid; gap: 18px; justify-items: start; }
.lp-close__copy h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.1vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.032em; font-weight: 800;
  text-transform: none; color: var(--lp-navy);
}
.lp-close__copy h2 .heart { display: inline-block; color: var(--lp-gold); margin-left: .18em; }
.lp-close__copy h2 .heart svg { display: inline-block; width: .42em; height: .42em; vertical-align: .1em; }
.lp-close__copy > p { font-size: clamp(.9375rem, 1.1vw, 1.25rem); line-height: 1.6; color: var(--lp-grey); max-width: 48ch; }


/* ---------- Vídeo de fondo ----------
   Arranca invisible y solo se descubre cuando de verdad está reproduciendo. Si
   el autoplay está bloqueado, si el usuario pidió menos movimiento o si va con
   ahorro de datos, nunca se muestra y queda el póster — que es la misma imagen,
   así que no hay salto visual. */
.lp-hero__video { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.lp-hero__video.is-playing { opacity: 1; }
/* Con el vídeo en marcha, el Ken Burns del póster sobraría y además pelearía
   con el movimiento real. */
.lp-hero:has(.lp-hero__video.is-playing) .lp-hero__bg { animation: none; }
@media (prefers-reduced-motion: reduce) { .lp-hero__video { display: none; } }