/* ================================================================
   Landing de estudio / playbook — variante CLARA
   Se carga solo en paginas con el template "Descargable" que tengan
   activado el campo ACF `lp_enable` (ver mu-plugins/boomit-playbook-lp.php).

   Este archivo se carga DESPUES de descargable-style.php, asi que
   sobreescribe el fondo violeta cuando el body tiene `.lp-light`.
   ================================================================ */

body.page-template-descargable.lp-light {
  /* Marca */
  --lp-navy:      #24284D;
  --lp-navy-soft: #5A5F86;
  --lp-indigo:    #3D4EE4;
  --lp-coral:     #EA464E;
  --lp-mint:      #80FBDE;   /* verde agua: SOLO en las quote cards, viene del docx */
  --lp-lime:      #E8FB8C;   /* acento de marca sobre violeta (mismo del hero de cac-latam) */
  --lp-accent-dark: var(--lp-lime);
  --lp-lavender:  #E9E8FC;
  --lp-line:      #E4E6F2;
  --lp-band:      #F6F7FC;

  /* Variantes legibles sobre blanco.
     El coral y el verde agua de marca no llegan a 4.5:1 como texto
     (3.83:1 y 2.1:1 medidos): para texto usamos estas versiones oscurecidas
     y dejamos los tonos originales para barras, bordes y fondos. */
  --lp-coral-text: #C4323A;
  --lp-mint-text:  #0E7C6A;

  /* Oscuro */
  --lp-ink:       #12103F;
  --lp-ink-2:     #1A1560;
  --lp-ink-3:     #231B84;
  --lp-on-dark:   rgba(255, 255, 255, 0.78);
  --lp-on-dark-2: rgba(255, 255, 255, 0.55);
  --lp-hair:      rgba(255, 255, 255, 0.14);

  --lp-radius:    18px;
  --lp-radius-sm: 12px;

  /* Movimiento */
  --lp-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --lp-ease-out:  cubic-bezier(0.33, 1, 0.68, 1);
  --lp-dur:       780ms;
  --lp-dur-micro: 240ms;
}

/* ----------------------------------------------------------------
   1) Apagar el fondo violeta full-bleed y la aurora
   ---------------------------------------------------------------- */
body.page-template-descargable.lp-light,
body.page-template-descargable.lp-light .site-wrapper {
  background: #ffffff;
}

body.page-template-descargable.lp-light .site-wrapper {
  overflow-x: clip;
}

body.page-template-descargable.lp-light .site-wrapper::before,
body.page-template-descargable.lp-light .site-wrapper::after {
  content: none;
}

/* ----------------------------------------------------------------
   2) Header sobre blanco: logo a color y menu oscuro
      (descargable-style.php lo pone blanco para el fondo violeta)
   ---------------------------------------------------------------- */
body.page-template-descargable.lp-light header.header-v8-alt .header-inn:not(.hoveredMenu) .hd-logo img,
body.page-template-descargable.lp-light header.header-v8-alt .header-inn:not(.hoveredMenu) .menuToggle img {
  filter: none;
  -webkit-filter: none;
}

body.page-template-descargable.lp-light header.header-v8-alt .header-inn:not(.hoveredMenu) .mainmenu nav#menu > ul > li > a,
body.page-template-descargable.lp-light header.header-v8-alt .header-inn:not(.hoveredMenu) .wpml-ls a,
body.page-template-descargable.lp-light header.header-v8-alt .header-inn:not(.hoveredMenu) .wpml-ls-current-language > a,
body.page-template-descargable.lp-light header.header-v8-alt .header-inn:not(.hoveredMenu) .wpml-ls .wpml-ls-flag + span {
  color: var(--lp-navy);
}

/* ----------------------------------------------------------------
   3) HERO claro
      Mismo layout que el descargable clasico: texto izquierda,
      portada derecha. Solo cambia la paleta.
   ---------------------------------------------------------------- */
body.page-template-descargable.lp-light section.dl-hero.hero-banner-n-24 {
  padding: 190px 0 84px;
  /* Recorta las cintas: el contenedor del fondo se extiende por arriba y
     por abajo para tener recorrido de parallax, y sin esto se derramaba
     167px sobre la franja de datos (el hero tiene z-index 2 y pinta
     encima de lo que sigue). */
  overflow: hidden;
  background-color: #ffffff;
  background-image:
    radial-gradient(1100px 560px at 88% -10%, rgba(61, 78, 228, 0.13), transparent 62%),
    radial-gradient(820px 460px at 2% 8%, rgba(234, 70, 78, 0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #FAFAFE 100%);
}

/* El hero necesita contexto de apilado propio para que las cintas queden
   detras del texto y de la portada. */
body.page-template-descargable.lp-light section.dl-hero.hero-banner-n-24 > .container {
  position: relative;
  z-index: 2;
}

/* ---- Cintas del logo ----
   Mismo asset que el blog. Alla va `position: fixed` a pagina completa; aca
   se queda dentro del hero para no aparecer detras de las bandas oscuras.
   Se le da altura de sobra (140%) y se desplaza con --lp-bgy: asi hay
   recorrido para el parallax sin que se despegue de los bordes. */
.lp-hero-bg {
  position: absolute;
  inset: -20% 0 -20% 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Velo blanco sobre las cintas.
   Sin esto la cinta azul pasa justo detras de la bajada, que tambien es
   azul: medido, 1.07:1. Ilegible. El velo es casi opaco del lado del
   texto y se abre hacia la derecha, donde esta el libro y no hay nada
   que leer: la cinta se ve fuerte ahi y queda como un susurro detras de
   la copy. */
.lp-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(97deg,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(255, 255, 255, 0.91) 44%,
    rgba(255, 255, 255, 0.62) 56%,
    rgba(255, 255, 255, 0.12) 67%,
    rgba(255, 255, 255, 0) 76%);
}

.lp-hero-bg img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 118%;
  min-width: 1180px;
  height: auto;
  transform: translate3d(-50%, var(--lp-bgy, 0px), 0);
  will-change: transform;
  /* Se desvanece hacia abajo para entregar el hero al blanco de la
     franja de datos sin un corte duro. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 92%);
}

body.page-template-descargable.lp-light .dl-hero .text {
  max-width: 640px;
}

/* El theme la esconde entera en telefonos:
   @media (max-width:575px) { .hero-banner-n-24 .subTitle { display:none !important } }
   En esta landing esa linea es la bajada del H1 y no puede desaparecer, asi que
   hay que ganarle con !important (la regla original lo usa). */
body.page-template-descargable.lp-light .dl-hero .subTitle {
  display: block !important;
  color: var(--lp-indigo);
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}

body.page-template-descargable.lp-light .dl-hero h1.h2 {
  color: var(--lp-navy);
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}

body.page-template-descargable.lp-light .dl-hero .subtitle,
body.page-template-descargable.lp-light .dl-hero .subtitle p {
  color: var(--lp-navy-soft);
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 0;
}

body.page-template-descargable.lp-light .dl-hero .subtitle {
  margin-bottom: 32px;
}

/* Portada del hero.
 *
 * Sin `filter: drop-shadow()` a proposito. El PNG ya trae su propia sombra
 * y el filtro hacia dos cosas malas: la duplicaba, y como la sombra se
 * calcula desde la silueta del canal alfa, dibujaba tambien el halo
 * difuso que el PNG trae alrededor del libro. Eso era el "cuadrado" que
 * se veia en los costados.
 *
 * Tampoco lleva rotacion ni animacion de hover: el cliente prefirio
 * sacarla antes que convivir con el artefacto. */
body.page-template-descargable.lp-light .dl-hero .image.dl-hero-image img.full-image {
  filter: none;
  transform: none;
  transition: none;
  max-height: 540px;
}

/* Sin animacion de hover: se saco a pedido del cliente. */
body.page-template-descargable.lp-light .dl-hero .image.dl-hero-image img.full-image:hover {
  transform: none;
}

/* El libro crece a medida que se scrollea el hero. Lo maneja el JS con
   --lp-grow y --lp-rise desde el mismo rAF que el resto del movimiento;
   sin `transition` a proposito, para que siga al scroll en vez de ir
   siempre un poco atrasado. */
html.lp-js body.page-template-descargable.lp-light .dl-hero .image.dl-hero-image img.full-image {
  transform: translate3d(0, var(--lp-rise, 0px), 0) scale(var(--lp-grow, 1));
  transform-origin: 50% 42%;
  will-change: transform;
}

/* Logos de partners (si el cliente carga alguno): SVGs blancos -> gris */
body.page-template-descargable.lp-light .dl-logo-item img {
  filter: brightness(0);
  opacity: 0.55;
}

body.page-template-descargable.lp-light .dl-logo-item:hover img {
  opacity: 0.8;
}



/* ----------------------------------------------------------------
   4b) Franja de datos — separa el hero de la primera seccion

   Patron de "credibility bar": va inmediatamente despues del hero,
   antes del primer bloque de contenido. Ademas de aportar la prueba
   dura, es lo que corta el blanco sobre blanco entre el hero y
   "¿Que es el estudio?".
   ---------------------------------------------------------------- */
.lp-stats {
  position: relative;
  padding: 0;
  background-color: #E9E8FC;
  background-image: linear-gradient(180deg, #F1F1FD 0%, #E9E8FC 100%);
  border-top: 1px solid rgba(61, 78, 228, 0.10);
  border-bottom: 1px solid rgba(61, 78, 228, 0.10);
}

.lp-stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.lp-stat {
  position: relative;
  padding: 34px 28px;
  text-align: center;
}

/* Hairline vertical entre columnas (no en la primera) */
.lp-stat + .lp-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: rgba(61, 78, 228, 0.16);
}

.lp-stat-value {
  display: block;
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--lp-indigo);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.lp-stat-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lp-navy-soft);
  max-width: 200px;
  margin: 0 auto;
}

/* El item sin numero (el sello de autoria) se compone distinto */
.lp-stat--plain { display: flex; align-items: center; justify-content: center; }

.lp-stat--plain .lp-stat-label {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lp-indigo);
  max-width: 220px;
}

/* ----------------------------------------------------------------
   5) Estructura comun de seccion
   ---------------------------------------------------------------- */
.lp-sections {
  position: relative;
  z-index: 2;
}

.lp-section {
  padding: 84px 0;
  background: #ffffff;
}

.lp-section.lp-band {
  background: var(--lp-band);
}

/* Ritmo de fondos. Ninguna seccion repite el fondo de la anterior:
   hero (degradado) -> franja de datos (lavanda) -> ¿que es? (blanco) ->
   participantes (banda) -> hallazgos (OSCURO) -> voces (blanco) ->
   contenido (banda) -> metodologia (OSCURO) -> faq (blanco) ->
   organizaciones (OSCURO) -> CTA (banda, con la card violeta). */
.lp-who,
.lp-inside { background: var(--lp-band); }
.lp-about,
.lp-voices,
.lp-faq { background: #ffffff; }
/* El fondo del .lp-cta se define mas abajo, junto a su padding: va con el
   tono exacto del footer para que el cierre no tenga costura. */

.lp-narrow {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.lp-h2 {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--lp-navy);
  margin: 0 0 20px;
}

.lp-lead {
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--lp-navy);
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--lp-coral);
}

.lp-section-intro {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lp-navy-soft);
  margin: 0 auto 48px;
}

.lp-prose {
  font-family: 'Roboto', sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--lp-navy-soft);
}

/* El theme pinta `p` en navy con una regla propia, que sobre la banda oscura
   deja el texto en 1.13:1. Forzamos herencia para que el color lo mande
   siempre el contenedor .lp-prose (navy-soft en claro, blanco en oscuro). */
.lp-prose p,
.lp-prose li,
.lp-orgs-footer p {
  color: inherit;
}

.lp-prose p { margin: 0 0 18px; }
.lp-prose p:last-child { margin-bottom: 0; }
.lp-prose strong { color: var(--lp-navy); font-weight: 600; }
.lp-dark .lp-prose strong { color: #ffffff; }

.lp-narrow.text-center .lp-prose { margin-bottom: 0; }
.lp-narrow.text-center .lp-h2 { margin-bottom: 16px; }

/* Editorial a dos columnas (titulo + cuerpo) */
.lp-editorial { row-gap: 28px; }

/* Columna de titulo que acompana al scroll del cuerpo */
@media (min-width: 992px) {
  .lp-sticky-col > * { position: sticky; top: 130px; }
}

/* ----------------------------------------------------------------
   5b) Secciones oscuras
       Rompen el blanco y marcan los dos "capitulos de datos" de la
       pagina (hallazgos y metodologia). El ritmo es:
       hero blanco -> que es -> participantes -> OSCURO -> voces ->
       contenido -> OSCURO -> faq -> organizaciones -> CTA violeta.
   ---------------------------------------------------------------- */
.lp-section.lp-dark {
  position: relative;
  isolation: isolate;
  color: #ffffff;
  /* Color solido primero y degradados encima. Dos motivos:
     1) si el degradado no pinta (navegador viejo, modo ahorro de datos,
        impresion) el texto blanco seguiria sobre blanco: ilegible.
     2) los auditores de accesibilidad leen `background-color`, no saben
        resolver un degradado, y reportan falso negativo de contraste. */
  background-color: var(--lp-ink-2);
  background-image:
    radial-gradient(900px 520px at 82% -12%, rgba(208, 64, 255, 0.20), transparent 60%),
    radial-gradient(760px 480px at 6% 112%, rgba(61, 78, 228, 0.28), transparent 58%),
    linear-gradient(118deg, var(--lp-ink) 0%, var(--lp-ink-2) 55%, var(--lp-ink-3) 100%);
  padding: 104px 0;
  overflow: hidden;
}

.lp-section.lp-dark .lp-h2            { color: #ffffff; }
.lp-section.lp-dark .lp-prose         { color: var(--lp-on-dark); }
.lp-section.lp-dark .lp-prose strong  { color: #ffffff; }
.lp-section.lp-dark .lp-section-intro { color: var(--lp-on-dark); }

/* Trama de retícula: le da el aire de informe tecnico sin pesar nada */
.lp-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}

/* ----------------------------------------------------------------
   5c) Eyebrow de seccion
   ---------------------------------------------------------------- */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-indigo);
}

.lp-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--lp-coral);
}

.lp-dark .lp-eyebrow { color: var(--lp-accent-dark); }
.lp-dark .lp-eyebrow::before { background: var(--lp-accent-dark); }

.text-center .lp-eyebrow { justify-content: center; }

/* ----------------------------------------------------------------
   6) Chips de perfiles
   ---------------------------------------------------------------- */
.lp-chips {
  list-style: none;
  margin: 42px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
}

.lp-chip {
  padding: 9px 18px;
  border-radius: 60px;
  background: var(--lp-lavender);
  color: var(--lp-navy);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

/* ----------------------------------------------------------------
   7) Hallazgos — sobre banda oscura
   ---------------------------------------------------------------- */
/* Flex en vez de grid a proposito: con 5 hallazgos la ultima fila queda de 2
   y se centra sola, y sigue funcionando si el cliente agrega o saca items. */
.lp-findings-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.lp-finding {
  position: relative;
  flex: 0 1 calc(33.333% - 14px);
  min-width: 260px;
  padding: 32px 28px 30px;
  border-radius: var(--lp-radius);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--lp-hair);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  overflow: hidden;
  transition: transform var(--lp-dur-micro) var(--lp-ease-out),
              background var(--lp-dur-micro) var(--lp-ease-out),
              border-color var(--lp-dur-micro) var(--lp-ease-out);
}

/* Halo que sigue al puntero (las coordenadas las escribe el JS) */
.lp-finding::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--lp-mx, 50%) var(--lp-my, 0%),
              rgba(232, 251, 140, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity var(--lp-dur-micro) var(--lp-ease-out);
  pointer-events: none;
}

/* Filo superior que se dibuja de izquierda a derecha en hover */
.lp-finding::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lp-accent-dark), var(--lp-coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--lp-ease);
}

.lp-finding:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.24);
}

.lp-finding:hover::before { opacity: 1; }
.lp-finding:hover::after  { transform: scaleX(1); }

.lp-finding-num {
  display: block;
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--lp-accent-dark);
  margin-bottom: 16px;
  transition: transform 420ms var(--lp-ease);
}

.lp-finding:hover .lp-finding-num { transform: translateX(4px); }

.lp-finding-title {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 19px;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 12px;
}

.lp-finding-text {
  font-family: 'Roboto', sans-serif;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--lp-on-dark);
  margin: 0;
}

/* ----------------------------------------------------------------
   8) Voces del estudio
   ---------------------------------------------------------------- */
.lp-voices-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.lp-voice {
  position: relative;
  margin: 0;
  padding: 28px 30px 30px;
  background: #ffffff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: 0 4px 18px rgba(36, 40, 77, 0.05);
  overflow: hidden;
}

.lp-voice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--lp-coral);
}

.lp-voice--teal::before { background: var(--lp-mint); }

.lp-voice-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.lp-voice-photo {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lp-lavender);
}

.lp-voice-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 22px;
  color: var(--lp-indigo);
}

/* El theme estila `figcaption` con text-align:center y border-bottom.
   Lo reseteamos porque aca la ficha va alineada a la izquierda. */
.lp-voice .lp-voice-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  text-align: left;
  border: 0;
  padding: 0;
  margin: 0;
}

/* El theme italiciza el figcaption y el nombre lo heredaba. El nombre va
   en negrita y derecho; el cargo y la empresa siguen en cursiva. */
.lp-voice-name {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.25;
  font-style: normal;
  color: var(--lp-navy);
}

.lp-voice-role {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: var(--lp-navy-soft);
}

/* Texto en la variante oscurecida (el tono de marca se queda en la barra
   lateral y en el punto, donde no hay requisito de contraste de texto). */
.lp-voice-org {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lp-coral-text);
}

.lp-voice-org::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-coral);
  flex: 0 0 auto;
}

.lp-voice--teal .lp-voice-org { color: var(--lp-mint-text); }
.lp-voice--teal .lp-voice-org::before { background: var(--lp-mint); }

.lp-voice-in {
  margin-left: auto;
  align-self: flex-start;
  color: #9AA0BF;
  transition: color 180ms ease;
}

.lp-voice-in:hover { color: #0A66C2; }

.lp-voice-quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.lp-voice-quote p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.62;
  color: var(--lp-navy);
}

.lp-voice-quote p::before { content: "\201C"; }
.lp-voice-quote p::after  { content: "\201D"; }

/* ----------------------------------------------------------------
   9) Que encontraras en el informe
   ---------------------------------------------------------------- */
.lp-inside-row { row-gap: 40px; }

/* Misma portada, mismo criterio: la sombra ya viene en el PNG. */
.lp-inside-cover {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  filter: none;
}

.lp-toc {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  counter-reset: lptoc;
}

.lp-toc-item {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--lp-line);
}

.lp-toc-item:last-child { border-bottom: 1px solid var(--lp-line); }

.lp-toc-num {
  flex: 0 0 auto;
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lp-indigo);
  min-width: 28px;
}

.lp-toc-body { display: flex; flex-direction: column; gap: 3px; }

.lp-toc-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--lp-navy);
}

.lp-toc-text {
  font-family: 'Roboto', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lp-navy-soft);
}

/* ----------------------------------------------------------------
   10) Metodologia — modulo oscuro tipo informe de investigacion

   Cabecera + dos columnas (prosa / ficha tecnica) + franja con la
   composicion de la muestra. La ficha va en filas con hairline y un
   indice numerado: es el lenguaje visual de un paper, y deja respirar
   los valores mucho mas que las cards que habia antes.
   ---------------------------------------------------------------- */
.lp-method-head {
  max-width: 760px;
  margin-bottom: 56px;
}

.lp-method-head .lp-h2 { margin-bottom: 0; }

.lp-method-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}

/* La composicion de la muestra vive en la columna izquierda: rellena el
   hueco que dejaba la prosa (mas corta que la ficha) y cierra el modulo. */
.lp-method-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.lp-method .lp-prose { font-size: 17px; }

/* Ficha tecnica */
.lp-specs {
  margin: 0;
  display: block;
}

.lp-spec {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 4px;
  row-gap: 4px;
  padding: 22px 0;
  border-top: 1px solid var(--lp-hair);
  transition: border-color var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-spec:last-child { border-bottom: 1px solid var(--lp-hair); }
.lp-spec:hover { border-top-color: rgba(232, 251, 140, 0.55); }

.lp-spec-index {
  grid-row: 1 / span 2;
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lp-accent-dark);
  letter-spacing: 0.04em;
}

.lp-spec-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-on-dark-2);
  margin: 0 0 2px;
}

.lp-spec-value {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 23px;
  line-height: 1.28;
  color: #ffffff;
  margin: 0;
}

/* Composicion de la muestra */
.lp-sample {
  padding-top: 32px;
  border-top: 1px solid var(--lp-hair);
}

.lp-sample-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-accent-dark);
  margin-bottom: 20px;
}

.lp-sample-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-sample-item {
  padding: 10px 20px;
  border: 1px solid var(--lp-hair);
  border-radius: 60px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-on-dark);
  transition: border-color var(--lp-dur-micro) var(--lp-ease-out),
              color var(--lp-dur-micro) var(--lp-ease-out),
              transform var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-sample-item:hover {
  border-color: var(--lp-accent-dark);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   11) FAQ — todas las respuestas siempre visibles

   El cliente lo pidio por SEO: una respuesta detras de un acordeon
   cerrado se indexa peor y, en AEO, los motores prefieren el texto a
   la vista. No hay acordeon: es una lista de pregunta + respuesta.
   ---------------------------------------------------------------- */
/* Estructura pedida por el cliente: una pregunta ancha arriba y tres
   abajo. Se resuelve con :first-child en vez de una clase en el markup,
   asi el cliente puede reordenar las preguntas en ACF y la destacada
   sigue siendo la primera de la lista. */
.lp-faq-list {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lp-faq-item:first-child {
  grid-column: 1 / -1;
  /* A ancho completo una sola columna de texto queda larguisima:
     la partimos en pregunta / respuesta. */
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: 44px;
  align-items: start;
  padding: 34px 36px 36px;
}

.lp-faq-item:first-child .lp-faq-q {
  margin-bottom: 0;
  font-size: 22px;
}

.lp-faq-item:first-child .lp-faq-a { padding-left: 0; }

.lp-faq-item {
  position: relative;
  padding: 30px 32px 32px;
  background: #ffffff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  transition: transform 380ms var(--lp-ease),
              box-shadow 380ms var(--lp-ease),
              border-color 380ms var(--lp-ease);
}

.lp-faq-item:hover {
  transform: translateY(-3px);
  border-color: #D5D9EE;
  box-shadow: 0 16px 36px rgba(36, 40, 77, 0.08);
}

.lp-faq-q {
  display: flex;
  gap: 14px;
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 19px;
  line-height: 1.32;
  color: var(--lp-navy);
  margin: 0 0 14px;
}

.lp-faq-q::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--lp-coral);
}

.lp-faq-a {
  padding-left: 22px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: var(--lp-navy-soft);
}

.lp-faq-a p { margin: 0 0 14px; color: inherit; }
.lp-faq-a p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   12) Organizaciones + autores — banda oscura

   Va en oscuro por una razon concreta: el logo de ThinkUp existe solo
   en blanco (sobre claro se pierde). En oscuro las dos marcas se ven a
   su valor real y la seccion cierra como un bloque de creditos.
   ---------------------------------------------------------------- */
.lp-orgs-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.lp-org {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 48px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lp-org + .lp-org { border-left: 1px solid var(--lp-hair); }

/* Zona de logo con alto fijo: los dos lockups quedan opticamente
   alineados aunque tengan proporciones distintas. */
.lp-org-logo-wrap {
  display: flex;
  align-items: center;
  min-height: 62px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--lp-hair);
  width: 100%;
}

.lp-org-logo {
  height: 42px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  object-position: left center;
  /* Ambos logos se normalizan a blanco para que pesen igual en la
     composicion. Si el cliente sube uno propio ya en blanco, no le
     afecta. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
  transition: opacity var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-org:hover .lp-org-logo { opacity: 1; }

/* Ajuste optico: los dos lockups tienen proporciones muy distintas
   (Boomit 3.7:1, ThinkUp 2.1:1). A la misma altura el de ThinkUp se lee
   la mitad de grande, asi que se compensa a mano. */
.lp-org--boomit .lp-org-logo  { height: 40px; }
.lp-org--thinkup .lp-org-logo { height: 56px; }

.lp-org-name {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 26px;
  color: #ffffff;
}

.lp-org-text {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: var(--lp-on-dark);
  margin: 0 0 22px;
}

.lp-org-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-accent-dark);
  text-decoration: none;
  border: 0;
  padding: 0;
  transition: gap var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-org-link::after {
  content: "";
  width: 16px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M12 0l4 4-4 4V5H0V3h12V0z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M12 0l4 4-4 4V5H0V3h12V0z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.lp-org-link:hover { gap: 14px; color: #ffffff; }

.lp-orgs-footer {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--lp-hair);
  font-family: 'Roboto', sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--lp-on-dark);
}

.lp-orgs-footer p:last-child { margin-bottom: 0; }

.lp-authors {
  margin-top: 56px;
  padding-top: 0;
  border-top: 0;
  text-align: center;
}

.lp-authors-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-accent-dark);
  margin-bottom: 24px;
}

.lp-authors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.lp-author {
  flex: 0 1 320px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--lp-hair);
  border-radius: var(--lp-radius);
  transition: transform var(--lp-dur-micro) var(--lp-ease-out),
              border-color var(--lp-dur-micro) var(--lp-ease-out),
              background var(--lp-dur-micro) var(--lp-ease-out);
}

/* Toda la tarjeta es el enlace */
.lp-author-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--lp-radius);
  text-decoration: none;
  color: inherit;
}

.lp-author:has(.is-link):hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.085);
}

.lp-author-link.is-link:focus-visible {
  outline: 2px solid var(--lp-accent-dark);
  outline-offset: 3px;
}

/* Avatar con anillo */
.lp-author-photo {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 1px var(--lp-hair), 0 0 0 4px rgba(255, 255, 255, 0.04);
}

.lp-author-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--lp-accent-dark);
}

.lp-author-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  min-width: 0;
  flex: 1 1 auto;
}

.lp-author-name {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.2;
  color: #ffffff;
  transition: color var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-author-role {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: var(--lp-on-dark-2);
}

/* Badge de LinkedIn: circulo que se pinta con el azul de la marca */
.lp-author-in {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--lp-hair);
  color: var(--lp-on-dark-2);
  transition: background var(--lp-dur-micro) var(--lp-ease-out),
              border-color var(--lp-dur-micro) var(--lp-ease-out),
              color var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-author-link.is-link:hover .lp-author-in {
  background: #0A66C2;
  border-color: #0A66C2;
  color: #ffffff;
}

.lp-author-link.is-link:hover .lp-author-name { color: var(--lp-accent-dark); }

/* ----------------------------------------------------------------
   12b) Casos de exito

   Cabecera editorial a dos columnas (titulo | bajada + enlace) y
   grilla 2x2 de tarjetas con la portada mandando. Las portadas ya
   traen el logo del cliente y las etiquetas de servicio quemadas, asi
   que la tarjeta no compite: solo suma el sello de Boomit.
   ---------------------------------------------------------------- */
.lp-cases-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: 72px;
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--lp-line);
}

.lp-cases-head .lp-h2 {
  margin-bottom: 0;
  font-size: 44px;
  letter-spacing: -0.018em;
}

.lp-cases-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 4px;
}

.lp-cases-lead {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lp-navy-soft);
}

.lp-cases-all-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-indigo);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(61, 78, 228, 0.28);
  transition: gap var(--lp-dur-micro) var(--lp-ease-out),
              color var(--lp-dur-micro) var(--lp-ease-out),
              border-color var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-cases-all-link::after {
  content: "";
  width: 16px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M12 0l4 4-4 4V5H0V3h12V0z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M12 0l4 4-4 4V5H0V3h12V0z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.lp-cases-all-link:hover {
  gap: 16px;
  color: var(--lp-coral-text);
  border-bottom-color: var(--lp-coral);
}

/* ---- Grilla ---- */
.lp-cases-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.lp-case {
  background: #ffffff;
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 480ms var(--lp-ease),
              box-shadow 480ms var(--lp-ease),
              border-color 480ms var(--lp-ease);
}

.lp-case:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 60px rgba(36, 40, 77, 0.16);
}

.lp-case-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.lp-case-link:focus-visible { outline: 2px solid var(--lp-indigo); outline-offset: -3px; }

/* ---- Media ---- */
.lp-case-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lp-lavender);
}

.lp-case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 900ms var(--lp-ease);
}

.lp-case:hover .lp-case-media img { transform: scale(1.07); }

/* Velo que aparece en hover: apoya la lectura del sello y da profundidad */
.lp-case-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 63, 0.28) 0%, transparent 42%, rgba(18, 16, 63, 0.16) 100%);
  opacity: 0;
  transition: opacity 480ms var(--lp-ease);
  pointer-events: none;
}

.lp-case:hover .lp-case-media::after { opacity: 1; }

/* Sello de Boomit */
.lp-case-seal {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(36, 40, 77, 0.18);
  transition: transform 480ms var(--lp-ease), box-shadow 480ms var(--lp-ease);
}

.lp-case:hover .lp-case-seal {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(36, 40, 77, 0.26);
}

.lp-case-seal img { width: 17px; height: auto; display: block; }

/* ---- Cuerpo ---- */
.lp-case-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 28px 28px;
  flex: 1 1 auto;
}

.lp-case-term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lp-indigo);
}

.lp-case-term::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--lp-coral);
  transition: width 420ms var(--lp-ease);
}

.lp-case:hover .lp-case-term::before { width: 26px; }

.lp-case-title {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 22px;
  line-height: 1.26;
  letter-spacing: -0.005em;
  color: var(--lp-navy);
  transition: color var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-case:hover .lp-case-title { color: var(--lp-indigo); }

.lp-case-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-indigo);
  transition: gap var(--lp-dur-micro) var(--lp-ease-out),
              color var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-case-cta::after {
  content: "";
  width: 16px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M12 0l4 4-4 4V5H0V3h12V0z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M12 0l4 4-4 4V5H0V3h12V0z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.lp-case:hover .lp-case-cta { gap: 15px; color: var(--lp-coral-text); }

/* Entrada: la portada se descubre de abajo hacia arriba */
html.lp-js .lp-case.lp-reveal .lp-case-media img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--lp-ease) 120ms, transform 900ms var(--lp-ease);
}

html.lp-js .lp-case.lp-reveal.is-in .lp-case-media img {
  clip-path: inset(0 0 0 0);
}

/* ----------------------------------------------------------------
   13) CTA final — unica banda violeta de la pagina
   ---------------------------------------------------------------- */
/* Mismo tono exacto que el footer para que el cierre sea una sola
   superficie continua, sin la costura entre #F6F7FC y #F8F8FD. */
.lp-cta { padding: 72px 0 88px; background: #F8F8FD; }

.lp-cta-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 56px 60px;
  border-radius: 28px;
  overflow: hidden;
  background-color: #221A72;
  background-image:
    radial-gradient(760px 420px at 85% 10%, rgba(208, 64, 255, 0.28), transparent 62%),
    linear-gradient(120deg, #171357 0%, #221a72 55%, #2b2093 100%);
}

.lp-cta-copy { flex: 1 1 auto; min-width: 0; }

.lp-cta-title {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 16px;
}

.lp-cta-text {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 30px;
  max-width: 620px;
}

.lp-cta-media { flex: 0 0 auto; }

.lp-cta-media img {
  display: block;
  width: 190px;
  height: auto;
  filter: none;
}

/* ----------------------------------------------------------------
   14) Barra fija de conversion
   ---------------------------------------------------------------- */
.lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--lp-line);
  box-shadow: 0 -6px 26px rgba(36, 40, 77, 0.10);
  transform: translateY(100%);
  transition: transform 260ms ease;
}

.lp-sticky.is-visible { transform: translateY(0); }

.lp-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.lp-sticky-text {
  font-family: 'GalanoGrotesque-SemiBold', 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.3;
  color: var(--lp-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-sticky-btn.pink-btn {
  flex: 0 0 auto;
  padding: 12px 28px;
  font-size: 16px;
}

/* ================================================================
   15) SISTEMA DE MOVIMIENTO

   Reglas que se respetan en todo el archivo:
   - Solo se anima `transform` y `opacity` (compositor, sin reflow).
   - Nada depende del JS para ser legible: las animaciones de entrada
     se activan solo si el script marco <html class="lp-js">.
   - `prefers-reduced-motion: reduce` apaga todo el sistema al final.
   ================================================================ */

/* ---------- Entradas al hacer scroll ---------- */
html.lp-js .lp-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--lp-dur) var(--lp-ease),
              transform var(--lp-dur) var(--lp-ease);
  transition-delay: calc((var(--lp-i, 1) - 1) * 70ms);
  will-change: transform, opacity;
}

html.lp-js .lp-reveal--left  { transform: translate3d(-28px, 0, 0); }
html.lp-js .lp-reveal--right { transform: translate3d(28px, 0, 0); }
html.lp-js .lp-reveal--scale { transform: translate3d(0, 26px, 0) scale(0.97); }

html.lp-js .lp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Al terminar la entrada soltamos el will-change (lo saca el JS) */
html.lp-js .lp-reveal.is-done { will-change: auto; }

/* ---------- Barra de progreso de lectura ---------- */
.lp-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  pointer-events: none;
  background: transparent;
}

.lp-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--lp-indigo), var(--lp-coral) 55%, var(--lp-lime));
}

/* ---------- Micro: badges del hero ---------- */
/* ---------- Micro: chips ---------- */
.lp-chip {
  transition: background var(--lp-dur-micro) var(--lp-ease-out),
              color var(--lp-dur-micro) var(--lp-ease-out),
              transform var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-chip:hover {
  background: var(--lp-indigo);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ---------- Micro: quote cards ---------- */
.lp-voice {
  transition: transform 380ms var(--lp-ease),
              box-shadow 380ms var(--lp-ease),
              border-color 380ms var(--lp-ease);
}

.lp-voice::before {
  transform: scaleY(0.35);
  transform-origin: top;
  transition: transform 460ms var(--lp-ease);
}

.lp-voice:hover {
  transform: translateY(-5px);
  border-color: #D5D9EE;
  box-shadow: 0 18px 40px rgba(36, 40, 77, 0.11);
}

.lp-voice:hover::before { transform: scaleY(1); }

.lp-voice-photo {
  transition: transform 460ms var(--lp-ease);
}

.lp-voice:hover .lp-voice-photo { transform: scale(1.06); }

.lp-voice-in { transition: color var(--lp-dur-micro) var(--lp-ease-out), transform var(--lp-dur-micro) var(--lp-ease-out); }
.lp-voice-in:hover { transform: translateY(-2px); }

/* ---------- Micro: indice de capitulos ---------- */
.lp-toc-item {
  transition: background var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-toc-item:hover { background: rgba(61, 78, 228, 0.035); }

.lp-toc-num { transition: transform 320ms var(--lp-ease); }
.lp-toc-item:hover .lp-toc-num { transform: translateX(4px); }

/* ---------- Micro: cards de organizacion ---------- */
.lp-author {
  transition: transform var(--lp-dur-micro) var(--lp-ease-out),
              border-color var(--lp-dur-micro) var(--lp-ease-out),
              background var(--lp-dur-micro) var(--lp-ease-out);
}

.lp-author:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 251, 140, 0.45);
  background: rgba(255, 255, 255, 0.09);
}

/* ---------- Micro: botones ---------- */
.pink-btn.dl-cta,
.lp-cta-btn,
.lp-sticky-btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--lp-dur-micro) var(--lp-ease-out),
              box-shadow var(--lp-dur-micro) var(--lp-ease-out);
}

/* Destello que cruza el boton al pasar el mouse */
.pink-btn.dl-cta::after,
.lp-cta-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
  transition: left 620ms var(--lp-ease);
  pointer-events: none;
}

.pink-btn.dl-cta:hover,
.lp-cta-btn:hover,
.lp-sticky-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 70, 78, 0.32);
}

.pink-btn.dl-cta:hover::after,
.lp-cta-btn:hover::after { left: 115%; }

/* ---------- Portadas con parallax (el JS mueve --lp-py) ---------- */
.lp-inside-cover,
.lp-cta-media img {
  will-change: transform;
}

html.lp-js .lp-inside-cover {
  transform: translate3d(0, var(--lp-py, 0px), 0);
}

html.lp-js .lp-inside-cover.lp-reveal:not(.is-in) {
  transform: translate3d(0, 26px, 0) scale(0.97);
}

html.lp-js .lp-cta-media img {
  transform: translate3d(0, var(--lp-py, 0px), 0);
}

/* ---------- CTA final ---------- */
.lp-cta-card {
  transition: transform 520ms var(--lp-ease);
}

/* ================================================================
   16) Responsive
   ================================================================ */
@media (max-width: 1199px) {
  body.page-template-descargable.lp-light .dl-hero h1.h2 { font-size: 44px; }
  .lp-h2 { font-size: 36px; }
  .lp-cta-card { padding: 48px 44px; gap: 36px; }
  .lp-cta-title { font-size: 33px; }
  .lp-method-grid { gap: 44px; }
}

@media (max-width: 991px) {
  .lp-finding { flex-basis: calc(50% - 10px); }
  .lp-stats-list { grid-template-columns: repeat(2, 1fr); }
  .lp-stat:nth-child(3)::before { display: none; }
  .lp-stat-value { font-size: 38px; }
  .lp-faq-list { grid-template-columns: repeat(2, 1fr); }
  .lp-faq-item:first-child { grid-template-columns: 1fr; row-gap: 14px; }
  .lp-cases-grid { gap: 20px; }
  .lp-cases-head { grid-template-columns: 1fr; row-gap: 22px; align-items: start; }
  .lp-cases-head .lp-h2 { font-size: 36px; }
  .lp-org { padding: 0; }
  .lp-org + .lp-org { border-left: 0; border-top: 1px solid var(--lp-hair); padding-top: 40px; margin-top: 40px; }
  .lp-voices-grid { grid-template-columns: 1fr; }
  .lp-orgs-grid { grid-template-columns: 1fr; }
  .lp-editorial .col-lg-6.offset-lg-1 { margin-left: 0; }
  .lp-method-grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-method-head { margin-bottom: 40px; }
  body.page-template-descargable.lp-light section.dl-hero.hero-banner-n-24 { padding: 150px 0 56px; }
  .lp-section.lp-dark { padding: 84px 0; }
  .lp-cta-media img { width: 150px; }
}

@media (max-width: 767px) {
  body.page-template-descargable.lp-light section.dl-hero.hero-banner-n-24 { padding: 130px 0 44px; }
  body.page-template-descargable.lp-light .dl-hero h1.h2 { font-size: 33px; }
  body.page-template-descargable.lp-light .dl-hero .subTitle { font-size: 17px; }
  body.page-template-descargable.lp-light .dl-hero .subtitle,
  body.page-template-descargable.lp-light .dl-hero .subtitle p { font-size: 16.5px; }

  /* En telefono el texto ocupa todo el ancho, asi que el velo va parejo
     en vez de abrirse hacia un costado. */
  .lp-hero-bg img { width: 210%; min-width: 0; }

  .lp-hero-bg::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(255, 255, 255, 0.90) 45%,
      rgba(255, 255, 255, 0.94) 100%);
  }

  .lp-section { padding: 60px 0; }
  .lp-section.lp-dark { padding: 68px 0; }
  .lp-h2 { font-size: 29px; }
  .lp-lead { font-size: 17.5px; }
  .lp-findings-grid { gap: 16px; }
  .lp-finding { flex-basis: 100%; min-width: 0; padding: 26px 22px 24px; }
  .lp-finding-num { font-size: 34px; }
  .lp-voice { padding: 24px 22px 26px; }
  .lp-voice-quote p { font-size: 16px; }
  .lp-org-logo { height: 34px; }
  .lp-toc-item { gap: 14px; }

  .lp-spec { grid-template-columns: 38px 1fr; padding: 18px 0; }
  .lp-spec-value { font-size: 20px; }

  .lp-stat { padding: 26px 16px; }
  .lp-stat-value { font-size: 32px; }
  .lp-stat-label { font-size: 13px; }
  .lp-faq-item { padding: 24px 22px 26px; }
  .lp-faq-q { font-size: 17.5px; }
  .lp-faq-a { padding-left: 0; font-size: 15.5px; }

  .lp-cta { padding: 24px 0 84px; }
  .lp-cta-card { flex-direction: column; align-items: flex-start; padding: 36px 26px; gap: 26px; border-radius: 20px; }
  .lp-cta-title { font-size: 27px; }
  .lp-cta-text { font-size: 16px; }
  .lp-cta-media { align-self: center; }
  .lp-cta-media img { width: 132px; }

  body.page-template-descargable.lp-light { --lp-sticky-h: 70px; }

  /* La barra fija en mobile solo muestra el boton, a ancho completo */
  .lp-sticky-text { display: none; }
  .lp-sticky-inner { justify-content: stretch; }
  .lp-sticky-btn.pink-btn { flex: 1 1 auto; text-align: center; }
}

/* ----------------------------------------------------------------
   16b) Pulido de telefono

   Tres frentes: microtipografia (nada por debajo de 12px, y el texto
   de apoyo a 14px), areas tactiles de 44px y ritmo vertical.
   ---------------------------------------------------------------- */
@media (max-width: 767px) {

  /* -- Microtipografia --
     Las etiquetas en mayuscula aguantan menos cuerpo que el texto
     corrido, pero 11.5px en un telefono es demasiado poco. */
  .lp-eyebrow {
    font-size: 12.5px;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
  }

  .lp-spec-label,
  .lp-sample-label,
  .lp-authors-label {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  /* Texto de apoyo: 14px es el minimo comodo de lectura */
  .lp-stat-label,
  .lp-voice-org,
  .lp-author-role,
  .lp-toc-text { font-size: 14px; }

  .lp-spec-index { font-size: 14px; }

  /* -- Areas tactiles --
     El enlace de organizacion medía 23px de alto. */
  .lp-org-link,
  .lp-cases-all-link {
    min-height: 46px;
    align-items: center;
    padding: 11px 0;
  }

  .lp-author-link { padding: 14px 16px; }

  /* -- Franja de datos --
     En dos columnas hace falta separar tambien las filas. */
  .lp-stat { padding: 22px 14px; }

  .lp-stat:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: rgba(61, 78, 228, 0.16);
  }

  /* -- Ritmo vertical --
     Con diez secciones, recortar el aire de las bandas oscuras evita
     que el scroll se haga eterno sin apretar el contenido. */
  .lp-section.lp-dark { padding: 62px 0; }
  .lp-method-head { margin-bottom: 32px; }
  .lp-method-grid { gap: 34px; }
  .lp-method-col { gap: 32px; }
  .lp-orgs-grid { margin-top: 40px; }
  .lp-org + .lp-org { padding-top: 34px; margin-top: 34px; }
  .lp-orgs-footer { margin-top: 40px; padding-top: 32px; }
  .lp-authors { margin-top: 40px; }

  /* -- Tarjetas de autor a ancho completo -- */
  .lp-author { flex: 1 1 100%; }

  /* -- Voces --
     Cabecera mas compacta para que la cita entre antes en pantalla. */
  .lp-voice-head { gap: 14px; margin-bottom: 16px; }
  .lp-voice-photo { width: 58px; height: 58px; }
  .lp-voice-name { font-size: 17px; }

  /* -- Indice de capitulos -- */
  .lp-toc-item { padding: 14px 0; }
  .lp-toc-num { min-width: 24px; }

  /* -- Hallazgos -- */
  .lp-finding { padding: 24px 22px 26px; }
  .lp-finding-title { font-size: 18px; }

  /* -- FAQ --
     La estructura de 1 ancha + 3 abajo es para pantallas grandes. En
     telefono, tres columnas dan tarjetas de 170px: ilegibles. Va todo
     apilado. */
  .lp-faq-list { grid-template-columns: 1fr; gap: 14px; }
  .lp-cases-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .lp-cases-head { padding-bottom: 24px; row-gap: 18px; }
  .lp-cases-head .lp-h2 { font-size: 29px; }
  .lp-cases-lead { font-size: 16px; }
  .lp-case-body { padding: 22px 22px 24px; }
  .lp-case-title { font-size: 20px; }
  .lp-case-term { font-size: 12px; }
  .lp-case-seal { width: 34px; height: 34px; top: 12px; left: 12px; }
  .lp-case-seal img { width: 15px; }
  .lp-faq-item:first-child { grid-template-columns: 1fr; row-gap: 12px; padding: 24px 22px 26px; }
  .lp-faq-item:first-child .lp-faq-q { font-size: 18px; }
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width: 374px) {
  body.page-template-descargable.lp-light .dl-hero h1.h2 { font-size: 30px; }
  .lp-h2 { font-size: 26px; }
  .lp-stat-value { font-size: 28px; }
  .lp-cta-card { padding: 30px 20px; }
  .lp-faq-item { padding: 22px 18px 24px; }
}

/* La barra fija tapa el final del footer: le damos aire al body */
body.page-template-descargable.lp-light.lp-has-sticky { padding-bottom: 72px; }

/* ----------------------------------------------------------------
   19) Convivencia con la barra de cookies (Complianz)

   Dos choques distintos en la esquina de abajo:

   a) El banner (`.cmplz-cookiebanner`, z-index 99999) se superpone con la
      barra de descarga y la tapa. Mientras el banner este abierto la barra
      no se muestra: es una decision que bloquea, no tiene sentido competirle
      con un CTA debajo. Lo resuelve el JS quitando `is-visible`.

   b) Ya aceptado, queda la pestana "Gestionar consentimiento" (z-index 9998)
      justo encima del boton de descarga. Se la sube por arriba de la barra.
      No se oculta a proposito: es el control para revocar el consentimiento
      y tiene que seguir alcanzable.
   ---------------------------------------------------------------- */
/* El desplazamiento tiene que cubrir tres cosas: los 35px que la pestana
   cuelga por debajo del viewport, el alto de la barra, y un respiro.
   Solo se aplica cuando la barra esta realmente visible (`lp-sticky-on`,
   la pone el JS): si no, la pestana quedaria flotando sin motivo.
   Complianz ya le tiene `transition: all`, asi que acompana sola. */
body.page-template-descargable.lp-light.lp-sticky-on .cmplz-manage-consent {
  transform: translateY(calc(-1 * (var(--lp-sticky-h, 76px) + 45px)));
}

body.page-template-descargable.lp-light { --lp-sticky-h: 76px; }

/* ----------------------------------------------------------------
   20) Cierre contra el footer

   El footer es transparente y arranca con 97px de padding mas una
   seccion vacia de 80: eran 177px de blanco entre la banda del CTA y
   el nav del footer. Se le da al footer el mismo tono del nav para que
   el cierre sea continuo, y se recorta el aire sobrante.
   ---------------------------------------------------------------- */
body.page-template-descargable.lp-light footer {
  background-color: #F8F8FD;
  padding-top: 40px;
}

/* ================================================================
   17) Movimiento reducido — se apaga todo
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html.lp-js .lp-reveal,
  html.lp-js .lp-reveal--left,
  html.lp-js .lp-reveal--right,
  html.lp-js .lp-reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.lp-js .lp-inside-cover,
  html.lp-js .lp-cta-media img,
  html.lp-js body.page-template-descargable.lp-light .dl-hero .image.dl-hero-image img.full-image,
  body.page-template-descargable.lp-light .dl-hero .image.dl-hero-image img.full-image {
    transform: none;
  }

  .lp-hero-bg img { transform: translate3d(-50%, 0, 0); }

  .lp-progress span { display: none; }

  .lp-sticky,
  .lp-stat, .lp-chip, .lp-voice, .lp-voice::before, .lp-voice-photo,
  .lp-toc-item, .lp-toc-num, .lp-org, .lp-author, .lp-finding,
  .lp-finding::after, .lp-finding-num, .lp-sample-item,
  .pink-btn.dl-cta, .lp-cta-btn, .lp-sticky-btn, .lp-cta-card {
    transition: none !important;
  }

  .pink-btn.dl-cta::after,
  .lp-cta-btn::after { display: none; }

  /* Casos de exito */
  html.lp-js .lp-case.lp-reveal .lp-case-media img,
  html.lp-js .lp-case.lp-reveal.is-in .lp-case-media img {
    clip-path: none;
    transform: none;
    transition: none;
  }

  .lp-case, .lp-case-media img, .lp-case-media::after, .lp-case-seal,
  .lp-case-term::before, .lp-case-title, .lp-case-cta, .lp-cases-all-link {
    transition: none !important;
  }
}

/* ================================================================
   18) Boton de descarga — contraste AA

   El `.pink-btn` del theme es blanco sobre #EA464E: 3.83:1, por debajo
   del 4.5 que pide AA para texto normal. Se oscurece apenas el coral
   (#D4373F -> 4.75:1). A ojo es el mismo boton; medido, pasa.

   Va scopeado a esta landing a proposito: el boton es del theme y
   cambiarlo global afecta todas las paginas del sitio. Si se decide
   subirlo a nivel marca, la regla es la misma en style.min.css.
   ================================================================ */
body.page-template-descargable.lp-light .pink-btn {
  /* El color va tambien como background-color, no solo en el degradado: es lo
     unico que los auditores saben leer para calcular contraste. */
  background-color: #D4373F;
  background-image: linear-gradient(136deg, #D4373F, #D4373F, #D4373F);
}

body.page-template-descargable.lp-light .pink-btn:hover {
  background-color: #C22F37;
  background-image: linear-gradient(136deg, #C22F37, #C22F37, #C22F37);
}