/* ==========================================================================
   1.10.42 · vitrina-banner.css — LA PORTADA NUEVA (agente VA)
   Cuatro piezas de la portada, cada una «tal cual» su referencia o su modelo (SP\ref1142):
     1) El banner (includes/sections/hero-vitrina.php) ........ inicio-01
     2) La franja de confianza, debajo del banner (el mismo archivo) ... el modelo que mandó el dueño
        (la búsqueda con pestañas sigue la referencia ajuste-20; sus pestañas las mueve assets/js/vitrina-banner.js)
     3) Las reseñas (sections/reviews.php + partials/review-card.php) ... inicio-02
     4) La tarjeta del formulario del checklist (sections/lead-magnet.php) ... inicio-03
   Solo la carga la portada (index.php → $page_css). Todo va bajo sus clases (va-…, .va-resenas, .lead-magnet), así
   que no toca nada fuera de la portada. Las medidas salen de las referencias, que están a ~64 % de un lienzo de
   1440 px: cada píxel de la referencia son ~1,56 px reales. Los márgenes laterales son los del contenedor de la casa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) EL BANNER
   Escritorio: el texto y la tarjeta de búsqueda a la izquierda, sobre un velo que los deja leerse perfecto; la
   industria se ve a la derecha, detrás de la persona, que está de pie sobre el borde de abajo y por delante del
   final de la tarjeta.
   TONO (lo pone hero-vitrina.php según la foto de cada pareja):
     .va-hero--oscuro          foto de noche: velo azul marino y texto blanco, como la referencia;
     .va-hero--claro-blanco    foto de día/tarde: velo blanco suave desde la izquierda y texto azul marino;
     .va-hero--claro-marino    foto de día/tarde: velo azul marino solo detrás del texto, que se desvanece.
   AJUSTE DE CADA PAREJA (en el style de la sección): --eje (centro de la cabeza en su imagen), --va-escala (su alto
   respecto de 690 px) y, en altos de persona: --va-x (del borde derecho del bloque a ese centro), --va-fin (dónde
   termina la tarjeta respecto de ese centro) y --va-izq (cuánto se abre a la izquierda a la altura de la barra).
   -------------------------------------------------------------------------- */
.va-hero {
  --va-tinta: #07162A;              /* el azul marino de la izquierda de la referencia */
  --va-acento: #4ADE80;             /* «Cursos» y la pastilla (sobre oscuro) */
  --va-texto: #fff;
  --va-texto-2: #E2E8F0;            /* la bajada y «Lo más buscado» */
  --va-sello-fondo: rgba(74, 222, 128, .08);
  --va-sello-borde: rgba(74, 222, 128, .3);
  /* La tarjeta de búsqueda es VIDRIO (el dueño, 05/10: «tiene que ser un poco transparente, no un color sólido»;
     y después: «un poquito más transparente… está todavía muy sólida»): el verde azulado de la referencia con
     poco alfa; detrás se ve la foto, apenas suavizada. */
  --va-vidrio: 16, 118, 134;
  --va-vidrio-a: .4;
  --va-pes-fondo: rgba(255, 255, 255, .09);        /* la pestaña cerrada, más translúcida */
  --va-pes-fondo-hover: rgba(255, 255, 255, .16);
  --va-pes-texto: #C3CEE0;
  --va-pes-texto-hover: #fff;
  --va-boton: var(--verde);         /* el verde de los botones de la casa (blanco encima: 3,3:1; ver el informe 1.10.42) */
  /* El alto de la persona en el escritorio ancho: 690 px por la escala de su pareja ('alto' en hero-vitrina.php: las
     fotorrealistas, 740 px; así la cabeza queda del tamaño de la referencia). Se encoge con la pantalla hasta 1200 px. */
  --va-alto-persona: calc(clamp(575px, 47.9vw, 690px) * var(--va-escala, 1));
  /* EL BLOQUE COMPACTO (el dueño, 05/10, en su monitor de 1893 px: «hay un espacio gigantesco… compactar, acercar un
     poquito a la persona y las palabras, como estaba antes»): texto, tarjeta y persona en 1180 px como mucho y
     centrados; en pantallas grandes los lados quedan para el fondo. Entre 1200 y 1440 px todo escala junto (bloque,
     barra, respiro y persona van en vw), así que la composición es la misma en cualquier escritorio. */
  --va-bloque: min(1180px, 81.95vw);
  --va-barra-max: min(781px, 54.24vw);   /* la barra blanca de la referencia: 781 px a 1440 */
  --va-hueco: min(70px, 4.86vw);         /* el vidrio que queda a la vista entre la barra y la persona */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--va-tinta);
  color: var(--va-texto);
}
.va-hero__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
/* El velo: casi opaco donde va el texto, se abre hacia la derecha para que se vea la industria; arriba, una franja
   suave que separa de la cabecera. Detrás de la tarjeta (la mitad de abajo) se aclara, para que el vidrio deje ver
   la foto: la tarjeta ya da su propio fondo al texto de dentro. */
.va-hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 22, 42, .5) 0%, rgba(7, 22, 42, 0) 20%),
    linear-gradient(90deg, rgba(7, 22, 42, .97) 0%, rgba(7, 22, 42, .95) 28%, rgba(7, 22, 42, .86) 44%, rgba(7, 22, 42, .55) 58%, rgba(7, 22, 42, .18) 74%, rgba(7, 22, 42, .08) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 41%, rgba(0, 0, 0, .5) 58%, rgba(0, 0, 0, .5) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 41%, rgba(0, 0, 0, .5) 58%, rgba(0, 0, 0, .5) 100%);
}
/* Dentro del contenedor de la casa (.contenedor), la caja del bloque compacto, centrada: ocupa todo el alto del
   banner y es la referencia de la persona. */
.va-hero__in { position: relative; }
.va-hero__caja { position: relative; width: var(--va-bloque); max-width: 100%; margin-inline: auto; padding-block: 45px 39px; }
.va-hero__texto { position: relative; z-index: 1; }

/* La pastilla «Academia de seguridad industrial» */
.va-hero__sello {
  display: inline-flex; align-items: center; gap: 7px;
  height: 37px; padding: 0 16px 0 14px;
  border: 1px solid var(--va-sello-borde); border-radius: 999px;
  background: var(--va-sello-fondo);
  color: var(--va-acento);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1;
  white-space: nowrap;
}
.va-hero__sello svg { width: 19px; height: 19px; flex: none; }

/* «Cursos de seguridad industrial» */
.va-hero__titulo {
  margin: 11px 0 0;
  max-width: none;
  color: var(--va-texto);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 1.125rem + 2.5vw, 3.375rem);
  line-height: 1.1; letter-spacing: -.025em;
}
.va-hero__acento { color: var(--va-acento); }
.va-hero__bajada {
  margin: 8px 0 0;
  max-width: none;
  color: var(--va-texto-2);
  font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.45;
}
.va-hero__bajada strong { color: var(--va-texto); font-weight: 700; }

/* LA TARJETA DE BÚSQUEDA (referencia ajuste-20): dos PESTAÑAS arriba a la izquierda y, debajo, el cuerpo de vidrio con
   la barra blanca (lupa, campo, selector y «Buscar» dentro) y «Lo más buscado». El cuerpo termina detrás de la persona
   (--va-fin altos de persona a la derecha del centro de su cabeza) y su final se desvanece: nunca se ve suelto. */
.va-busca {
  --va-pad: 17px;
  position: relative; z-index: 1;
  width: calc(100% - (var(--va-x, .24) - var(--va-fin, 0)) * var(--va-alto-persona));
  margin-top: 50px;
  color: #fff;
}
.va-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.va-busca__pestanas { display: flex; gap: 8px; }
.va-busca__pestana {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 17px;
  border-radius: 10px 10px 0 0;
  background: rgba(var(--va-vidrio), var(--va-vidrio-a));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  transition: background-color .15s ease, color .15s ease;
}
.va-busca__pestana svg { flex: none; width: 16px; height: 16px; }
.va-busca__pestana[aria-selected="false"] { background: var(--va-pes-fondo); color: var(--va-pes-texto); }
.va-busca__pestana[aria-selected="false"]:hover { background: var(--va-pes-fondo-hover); color: var(--va-pes-texto-hover); }
.va-busca__pestana:focus-visible { outline: 2px solid #4ADE80; outline-offset: -3px; }
/* Sin desenfoque (navegadores viejos) el vidrio se vería sucio: más opaco. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .va-busca { --va-vidrio-a: .9; }
}
/* El cuerpo. Desenfoque MÍNIMO (el dueño: detrás de la persona «se difumina horrible… no tiene por qué difuminarse
   ahí»): la transparencia se queda y la foto se ve casi nítida. Solo blur(): saturate()/brightness() en el
   backdrop-filter cambiaban el suavizado del texto de la cabecera de la portada (aviso de VC). El final se desvanece
   en sus últimos 150 px, que caen detrás de la persona: ni un borde duro ni un rectángulo asomando a su lado. */
.va-busca__panel {
  padding: 19px var(--va-pad) 16px;
  border-radius: 0 16px 16px 16px;
  background: rgba(var(--va-vidrio), var(--va-vidrio-a));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 150px), rgba(0, 0, 0, .55) calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 150px), rgba(0, 0, 0, .55) calc(100% - 60px), transparent 100%);
}
.va-busca__panel[hidden] { display: none; }
/* La barra blanca mide lo de la referencia (781 px a 1440) y termina antes de que empiece la persona (--va-izq), con
   un respiro (--va-hueco): el codo o la tableta de alguien nunca tapan el botón. */
.va-busca__barra,
.va-busca__mas {
  max-width: min(var(--va-barra-max), calc(100% + var(--va-pad) - (var(--va-fin, 0) + var(--va-izq, .32)) * var(--va-alto-persona) - var(--va-hueco)));
}
.va-busca__barra {
  display: flex; align-items: center;
  height: 59px; padding-right: 5px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(2, 10, 24, .12);
}
/* 1.10.42 · Al hacer clic en la búsqueda, nada de bordes verdes (el dueño: «que no se mire ese stroke verde… solamente
   normal»): la barra se queda igual y el cursor que parpadea dice dónde se escribe. */
.va-busca__barra:focus-within { box-shadow: 0 2px 6px rgba(2, 10, 24, .12); }
.va-busca__campo { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%; }
.va-busca__lupa { flex: none; width: 18px; height: 18px; margin: 0 13px 0 19px; color: #7B8089; }
.va-busca__q {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0;
  padding: 0 12px 0 0;
  border: 0; border-radius: 0; background: transparent; color: #0F172A;
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  text-overflow: ellipsis;          /* si el ejemplo no cabe entero, que se note («…») */
  -webkit-appearance: none; appearance: none;
}
.va-busca__q::placeholder { color: #737983; opacity: 1; }
.va-busca__q:focus, .va-busca__q:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.va-busca__q::-webkit-search-cancel-button { cursor: pointer; }
.va-busca__sep { flex: none; width: 1px; height: 26px; background: #E2E8F0; }
.va-busca__sel { position: relative; flex: none; display: flex; }
.va-busca__sel select {
  height: 48px; margin: 0 6px 0 2px; padding: 0 30px 0 12px;
  border: 0; border-radius: 8px; background: transparent; color: #1E293B; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  -webkit-appearance: none; appearance: none;
}
.va-busca__sel select:hover { background: #F1F5F9; }
.va-busca__sel select:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.va-busca__sel::after {
  content: ""; position: absolute; right: 18px; top: 50%; margin-top: -2px; pointer-events: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #475569;
}
.va-busca__btn {
  flex: none;
  height: 48px; padding: 0 26px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--va-boton); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.va-busca__btn:hover { background: var(--verde-600); }
.va-busca__btn:active { transform: translateY(1px); }
.va-busca__btn:focus-visible { outline: 3px solid #4ADE80; outline-offset: 2px; }

/* «Lo más buscado» (y, en presenciales, «Ciudades con fechas») y sus pastillas */
.va-busca__mas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.va-busca__mas-t {
  color: #E2E8F0;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; white-space: nowrap;
}
.va-busca__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.va-busca__pill {
  display: inline-flex; align-items: center;
  height: 35px; padding: 0 13.5px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  transition: background-color .15s ease, border-color .15s ease;
}
.va-busca__pill:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); color: #fff; }
.va-busca__pill:focus-visible { outline: 2px solid #4ADE80; outline-offset: 2px; }

/* LA PERSONA: de pie sobre el borde de abajo del banner (el banner la corta a la altura de la cintura, como la
   referencia) y por delante del final de la tarjeta, pegada a ella. Se coloca por el centro de su cabeza. Sin filtros
   ni tintes: el color ya viene hecho para su fondo. */
.va-hero__figura { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.va-hero__persona {
  position: absolute;
  top: 31px; left: calc(100% - var(--va-x, .24) * var(--va-alto-persona));
  /* Nunca más baja que el banner: siempre queda de pie sobre el borde de abajo, sin un hueco debajo. */
  width: auto; height: max(var(--va-alto-persona), calc(100% - 27px)); max-width: none;
  transform: translateX(calc(var(--eje, .5) * -100%));
  user-select: none;
}

/* --- TONO CLARO, opción «blanco»: velo blanco suave desde la izquierda, texto azul marino. El verde de «Cursos»
   pasa al verde de la casa (#16A34A): el verde claro de la versión oscura sobre blanco no se lee (1,6:1). El vidrio
   de la tarjeta es un verde azulado más hondo: así, con poca opacidad, el blanco de dentro sigue en AA. La pestaña
   cerrada, clara y con el texto azul marino. --- */
.va-hero--claro-blanco {
  --va-tinta: #F4F7FA;
  --va-acento: #16A34A;
  --va-texto: #0E2245;
  --va-texto-2: #334155;
  --va-sello-fondo: rgba(22, 163, 74, .1);
  --va-sello-borde: rgba(22, 163, 74, .34);
  --va-vidrio: 3, 52, 66;
  --va-vidrio-a: .72;               /* sobre el velo blanco y casi sin desenfoque: lo justo para AA (medido) */
  --va-pes-fondo: rgba(14, 34, 69, .08);
  --va-pes-fondo-hover: rgba(14, 34, 69, .14);
  --va-pes-texto: #0E2245;
  --va-pes-texto-hover: #0E2245;
}
.va-hero--claro-blanco .va-hero__sello { color: var(--verde-700); }   /* #0F7A34: 4,9:1 sobre su fondo (#15803D daba 4,4) */
.va-hero--claro-blanco .va-hero__velo {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .92) 32%, rgba(255, 255, 255, .8) 48%, rgba(255, 255, 255, .42) 62%, rgba(255, 255, 255, .08) 76%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 41%, rgba(0, 0, 0, .72) 58%, rgba(0, 0, 0, .72) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 41%, rgba(0, 0, 0, .72) 58%, rgba(0, 0, 0, .72) 100%);
}
.va-hero--claro-blanco .va-busca__mas-t { color: #fff; }
.va-hero--claro-blanco .va-busca__pill { background: rgba(2, 20, 28, .14); border-color: rgba(255, 255, 255, .34); }
.va-hero--claro-blanco .va-busca__pill:hover { background: rgba(2, 20, 28, .26); }

/* --- TONO CLARO, opción «marino»: velo azul marino solo detrás del texto, que se desvanece hacia la foto. El texto
   sigue blanco, como en la referencia. --- */
.va-hero--claro-marino { --va-vidrio-a: .5; }
.va-hero--claro-marino .va-hero__velo {
  background:
    linear-gradient(90deg, rgba(7, 22, 42, .94) 0%, rgba(7, 22, 42, .9) 34%, rgba(7, 22, 42, .78) 50%, rgba(7, 22, 42, .45) 62%, rgba(7, 22, 42, .1) 76%, rgba(7, 22, 42, 0) 88%);
  -webkit-mask-image: none; mask-image: none;
}

/* --------------------------------------------------------------------------
   TABLETA (600–1199 px): el texto arriba a la izquierda y la persona a su derecha, de pie sobre el cuerpo de la
   tarjeta, que va a lo ancho debajo. El cuerpo la corta: no tapa nada. Las pestañas quedan a la izquierda.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .va-hero { --va-alto-persona: calc(400px * var(--va-escala, 1)); }
  .va-hero__caja { width: auto; padding-block: 34px 30px; }
  .va-hero__escena { position: relative; }
  .va-hero__texto { width: 62%; padding-bottom: 26px; }
  .va-hero__titulo { font-size: 40px; }
  .va-hero__bajada { font-size: 17px; }
  /* La persona baja hasta el cuerpo de la tarjeta (las pestañas, a la izquierda, dejan libre ese tramo). */
  .va-hero__figura {
    inset: auto; top: -34px; right: 0; bottom: -42px; width: 38%;
    clip-path: inset(-40px -100vw 0 -100vw);   /* solo por abajo: un brazo o un plano no se cortan de lado */
  }
  .va-hero__persona { top: 10px; left: 50%; height: var(--va-alto-persona); }
  .va-busca { width: 100%; margin-top: 0; }
  .va-busca__panel { -webkit-mask-image: none; mask-image: none; }
  .va-busca__barra, .va-busca__mas { max-width: none; }
  .va-hero__velo { -webkit-mask-image: none !important; mask-image: none !important; }
  .va-hero--oscuro .va-hero__velo {
    background:
      linear-gradient(180deg, rgba(7, 22, 42, .5) 0%, rgba(7, 22, 42, 0) 30%, rgba(7, 22, 42, .4) 100%),
      linear-gradient(90deg, rgba(7, 22, 42, .95) 0%, rgba(7, 22, 42, .88) 45%, rgba(7, 22, 42, .45) 70%, rgba(7, 22, 42, .2) 100%);
  }
  .va-hero--claro-blanco .va-hero__velo {
    background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, .45) 68%, rgba(255, 255, 255, .1) 100%);
  }
  .va-hero--claro-marino .va-hero__velo {
    background: linear-gradient(90deg, rgba(7, 22, 42, .94) 0%, rgba(7, 22, 42, .86) 50%, rgba(7, 22, 42, .4) 70%, rgba(7, 22, 42, .1) 100%);
  }
}
@media (max-width: 767px) {
  /* Tableta estrecha: la persona, un poco más chica, para que no roce la pestaña «Presenciales y en vivo». */
  .va-hero { --va-alto-persona: calc(360px * var(--va-escala, 1)); }
  .va-busca__pestana { padding: 0 13px; font-size: 13px; gap: 7px; }
}

/* --------------------------------------------------------------------------
   TELÉFONO (< 600 px): arriba, la industria con su persona (más chica, en su franja); debajo, el texto y la
   búsqueda a lo ancho, sobre el color liso del tono. Nada queda encima del texto. La barra se reparte en dos filas:
   el campo arriba; el selector y «Buscar» debajo.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .va-hero { --va-franja: 214px; --va-alto-persona: calc(360px * var(--va-escala, 1)); }
  .va-hero__fondo { height: var(--va-franja); bottom: auto; }
  /* La franja de la foto se funde con el color liso de abajo (sin un corte duro). */
  .va-hero--oscuro .va-hero__velo,
  .va-hero--claro-marino .va-hero__velo {
    background:
      linear-gradient(180deg, rgba(7, 22, 42, .3) 0, rgba(7, 22, 42, 0) 60px, rgba(7, 22, 42, 0) calc(var(--va-franja) - 90px), rgba(7, 22, 42, .75) calc(var(--va-franja) - 30px), #07162A var(--va-franja));
  }
  .va-hero--claro-marino { --va-tinta: #07162A; }
  .va-hero--claro-blanco .va-hero__velo {
    background: linear-gradient(180deg, rgba(244, 247, 250, 0) 0, rgba(244, 247, 250, 0) calc(var(--va-franja) - 80px), rgba(244, 247, 250, .75) calc(var(--va-franja) - 26px), #F4F7FA var(--va-franja));
  }
  .va-hero__in, .va-hero__caja, .va-hero__escena { position: static; }
  .va-hero__caja { padding-block: calc(var(--va-franja) + 6px) 24px; }
  .va-hero__texto { width: auto; padding-bottom: 0; }
  .va-hero__figura {
    position: absolute; inset: 0 0 auto 0; width: auto; height: var(--va-franja);
    overflow: hidden; clip-path: none;
  }
  .va-hero__persona {
    top: 16px; left: 64%;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--va-franja) - 70px), transparent calc(var(--va-franja) - 16px));
    mask-image: linear-gradient(180deg, #000 calc(var(--va-franja) - 70px), transparent calc(var(--va-franja) - 16px));
  }
  .va-hero__sello { height: 32px; padding: 0 13px 0 11px; font-size: 13px; gap: 7px; }
  .va-hero__sello svg { width: 16px; height: 16px; }
  .va-hero__titulo { margin-top: 12px; font-size: 32px; line-height: 1.12; }
  .va-hero__bajada { font-size: 16px; line-height: 1.45; }
  .va-busca { margin-top: 20px; --va-pad: 14px; }
  .va-busca__pestanas { gap: 6px; }
  .va-busca__pestana { flex: 1 1 auto; justify-content: center; height: 40px; padding: 0 10px; font-size: 13px; gap: 6px; }
  .va-busca__pestana svg { width: 15px; height: 15px; }
  .va-busca__panel { padding: 14px var(--va-pad) 14px; border-radius: 0 0 14px 14px; }
  /* En el teléfono la tarjeta va sobre el color liso del tono (no sobre la foto): un punto más de opacidad. */
  .va-hero--oscuro .va-busca, .va-hero--claro-marino .va-busca { --va-vidrio-a: .5; }
  .va-busca__barra {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    height: auto; padding: 0; background: transparent; box-shadow: none;
  }
  .va-busca__barra:focus-within { box-shadow: none; }
  .va-busca__campo, .va-busca__sel { border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(2, 10, 24, .12); }
  .va-busca__campo { grid-column: 1 / -1; height: 52px; }
  .va-busca__campo:focus-within, .va-busca__sel:focus-within { box-shadow: 0 2px 6px rgba(2, 10, 24, .12); }
  .va-busca__lupa { margin: 0 11px 0 16px; }
  .va-busca__sep { display: none; }
  .va-busca__sel select { width: 100%; height: 48px; margin: 0; padding-left: 14px; }
  .va-busca__btn { height: 48px; padding: 0 22px; border-radius: 10px; }
  .va-busca__mas { margin-top: 14px; gap: 8px 10px; }
  .va-busca__mas-t { flex-basis: 100%; }
  .va-busca__pill { height: 34px; padding: 0 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .va-busca__btn, .va-busca__pill, .va-busca__pestana { transition: none; }
}

/* --------------------------------------------------------------------------
   2) LA FRANJA DE CONFIANZA (debajo del banner, de lado a lado). AZUL MEDIO de la marca (el dueño, 05/10: «no la
   coloques en blanco, tampoco en un navy oscuro: un azul, ni oscuro ni claro, algo normal»): #1E4F8F, títulos
   blancos, bajadas azul muy claro e iconos verde claro (contraste: 8,2:1, 5,8:1 y 4,7:1). Cuatro puntos separados
   por líneas finas; en una línea; en el teléfono, dos por fila. Variante .va-confianza--azul2: #24569A, un punto
   más clara (7,3:1, 5,2:1 y 4,2:1).
   -------------------------------------------------------------------------- */
.va-confianza {
  --vc-fondo: #1E4F8F; --vc-titulo: #fff; --vc-bajada: #C9DBF5; --vc-icono: #4ADE80; --vc-linea: rgba(255, 255, 255, .18);
  position: relative; z-index: 1;
  background: var(--vc-fondo); color: var(--vc-titulo);
}
.va-confianza--azul2 { --vc-fondo: #24569A; }
/* Cada punto crece según su texto y se centra en su tramo; las líneas finas quedan entre uno y otro. */
.va-confianza__lista { display: flex; margin-block: 0; padding-block: 0; list-style: none; }
.va-confianza__item {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 62px; padding: 10px 18px;
  font-family: var(--font-display); font-size: 13.5px; line-height: 1.35; white-space: nowrap;
}
.va-confianza__item:first-child { justify-content: flex-start; padding-left: 0; }
.va-confianza__item:last-child { justify-content: flex-end; padding-right: 0; }
.va-confianza__item + .va-confianza__item { border-left: 1px solid var(--vc-linea); }
.va-confianza__item svg { flex: none; width: 22px; height: 22px; color: var(--vc-icono); }
.va-confianza__item b { font-weight: 600; color: var(--vc-titulo); }
.va-confianza__sub { color: var(--vc-bajada); font-weight: 500; }
.va-confianza__enlace {
  display: inline-flex; align-items: center; gap: 10px;
  margin: -6px -8px; padding: 6px 8px; border-radius: 8px;
  color: inherit; text-decoration: none;
}
.va-confianza__enlace:hover .va-confianza__sub { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.va-confianza__enlace:focus-visible { outline: 2px solid #4ADE80; outline-offset: 2px; }
/* Donde no caben en una línea (por debajo de 1440 px): el título arriba y la bajada abajo, en cuatro tramos iguales. */
@media (max-width: 1439px) {
  .va-confianza__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .va-confianza__item, .va-confianza__item:first-child, .va-confianza__item:last-child {
    justify-content: center; padding: 12px 12px; white-space: normal; text-align: left;
  }
  .va-confianza__item > span, .va-confianza__enlace > span { display: flex; flex-direction: column; }
  .va-confianza__sub { font-size: 12.5px; }
  .va-confianza__punto { display: none; }   /* el «·» sobra cuando la bajada va en su propio renglón */
}
@media (max-width: 767px) {
  .va-confianza__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-confianza__item:nth-child(3) { border-left: 0; }
  .va-confianza__item:nth-child(n+3) { border-top: 1px solid var(--vc-linea); }
  .va-confianza__item, .va-confianza__item:first-child, .va-confianza__item:last-child { justify-content: flex-start; padding: 13px 10px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   3) LAS RESEÑAS (inicio-02). Cabecera a la izquierda, pastilla del promedio y «Ver todas →» a la derecha; UNA fila
   de tarjetas que se desplaza sola, continua y lenta, y se detiene al pasar el ratón o con el foco.
   -------------------------------------------------------------------------- */
.va-resenas { padding-block: 51px 51px; }
.va-resenas__cab {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
  margin-bottom: 22px;
}
.va-resenas__ceja {
  display: block;
  color: var(--verde);
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase;
}
.va-resenas__h {
  margin: 9px 0 0;
  color: #0F172A;
  font-family: var(--font-display); font-weight: 800; font-size: 29px; line-height: 1.15; letter-spacing: 0;
}
.va-resenas__lado { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 13px; }
.va-resenas__nota {
  display: inline-flex; align-items: center; gap: 7px;
  height: 45px; margin: 0; padding: 0 18px;
  border: 1px solid #EEF2F6; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05);
  color: #64748B; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
}
.va-resenas__nota b { color: #0F172A; font-weight: 700; margin-left: 3px; }
.va-resenas__estrellas .stars { gap: 1px; }
.va-resenas__estrellas .star { width: 11.5px; height: 11.5px; }
.va-resenas .star.is-full, .va-resenas .star.is-half { fill: #F59E0B; }
.va-resenas__todas {
  color: var(--verde); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.va-resenas__todas:hover { color: var(--verde-700); text-decoration: underline; text-underline-offset: 3px; }

/* La cinta. La pista lleva dos tandas iguales y viaja una tanda entera (−50 % menos medio espacio): el bucle no
   tiene costura. Los bordes se desvanecen en 24 px FUERA del contenido (margen negativo + relleno), así que en reposo
   la primera tarjeta está entera y alineada con el título, como la referencia; al moverse, entran y salen sin un
   corte seco. Es contenedor de consulta: el ancho de cada tarjeta sale de su ancho (cuatro enteras a 1440 px). */
.va-cinta {
  --va-borde-cinta: 24px;
  position: relative; overflow: hidden;
  margin: -6px calc(-1 * var(--va-borde-cinta)); padding: 6px var(--va-borde-cinta);
  container-type: inline-size;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--va-borde-cinta), #000 calc(100% - var(--va-borde-cinta)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--va-borde-cinta), #000 calc(100% - var(--va-borde-cinta)), transparent 100%);
}
.va-cinta:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.va-cinta__pista {
  display: flex; gap: 20px; width: max-content;
  animation: va-cinta var(--va-cinta-dur, 160s) linear infinite;
}
.va-cinta:hover .va-cinta__pista,
.va-cinta:focus-within .va-cinta__pista { animation-play-state: paused; }
@keyframes va-cinta {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}
/* Con «reducir movimiento»: quieta, se desplaza a mano y sin los clones (que solo existen para el bucle). */
@media (prefers-reduced-motion: reduce) {
  .va-cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .va-cinta__pista { animation: none; }
  .va-cinta [data-va-clon] { display: none; }
}

/* La tarjeta en la portada (en resenas.php sigue con su estilo de rejilla, de sections.css). */
.va-resenas .review-card {
  flex: none; width: 328px; width: calc((100cqw - 60px) / 4); height: 183px;
  padding: 20px 20px 19px;
  border: 1px solid #E9EEF4; border-radius: 14px;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.va-resenas .review-card:hover { transform: none; border-color: #DDE5EE; box-shadow: 0 6px 18px rgba(15, 23, 42, .07); }
.js .va-resenas .reveal { opacity: 1; transform: none; }
.va-resenas .review-card__top { margin: 0; gap: 8px; min-height: 13px; line-height: 1; }
.va-resenas .review-card__stars .stars { gap: 2px; }
.va-resenas .review-card__stars .star { width: 12px; height: 12px; }
.va-resenas .review-card__verified {
  gap: 2px; color: var(--verde);
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
}
.va-resenas .review-card__verified svg { width: 11px; height: 11px; }
.va-resenas .review-card__text {
  margin-top: 12px;
  color: #1E293B;
  font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 1.57;
  -webkit-line-clamp: 3;
}
.va-resenas .review-card__person { margin-top: auto; padding-top: 10px; border-top: 0; gap: 10px; }
.va-resenas .review-card__av { --zv-av: 35px; font-size: 14px; }
.va-resenas .review-card__name { color: #0F172A; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.25; }
.va-resenas .review-card__meta { margin-top: 2px; color: #64748B; font-family: var(--font-display); font-weight: 500; font-size: 11px; line-height: 1.3; }
@media (max-width: 1279px) { .va-resenas .review-card { width: calc((100cqw - 40px) / 3); } }
@media (max-width: 899px)  { .va-resenas .review-card { width: calc((100cqw - 20px) / 2); } }
@media (max-width: 767px) {
  .va-resenas { padding-block: 40px 42px; }
  .va-resenas__h { font-size: 25px; }
  .va-resenas .review-card { width: 286px; }
  .va-resenas__nota { height: 40px; padding: 0 14px; font-size: 13px; }
  .va-cinta { --va-borde-cinta: 12px; }
}

/* --------------------------------------------------------------------------
   4) LA TARJETA DEL FORMULARIO DEL CHECKLIST (inicio-03). Solo la tarjeta blanca: el resto de la sección sigue como
   está. 424 px de ancho, campos de 46 px, botón azul marino de 48 px a lo ancho.
   -------------------------------------------------------------------------- */
.lead-magnet .lead-band__form {
  justify-self: end;
  width: 100%; max-width: 424px;
  padding: 21px 20px 18px;
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(7, 40, 20, .2);
}
.lead-magnet .lead-band__form .campo { gap: 5px; }
.lead-magnet .lead-band__form .campo + .campo { margin-top: 9px; }
.lead-magnet .lead-band__form label {
  color: #0F172A;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; line-height: 1.3;
}
.lead-magnet .lead-band__form .input {
  height: 46px; padding: 0 15px;
  border: 1px solid #E6EBF1; border-radius: 10px;
  color: #0F172A;
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
}
.lead-magnet .lead-band__form .input::placeholder { color: #737983; }
.lead-magnet .lead-band__form .input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.lead-magnet .lead-band__btn {
  margin-top: 14px; height: 48px;
  border-radius: 10px;
  background: #1D3A6B;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
}
.lead-magnet .lead-band__btn:hover { filter: none; background: #16305A; }
.lead-magnet .lead-band__privacy {
  margin-top: 10px;
  color: #64748B; text-align: center;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
}
@media (max-width: 860px) {
  .lead-magnet .lead-band__form { justify-self: stretch; max-width: none; }
}
/* LA ESTRELLA Y LAS ANILLAS, como en producción y relativas a la banda verde (el dueño: «se mira mal, está fuera de
   lugar; colócala como estaba antes»). Con los márgenes nuevos de la vitrina (~4,5 %) la estrella, que asoma por la
   izquierda casi tres cuartos de su ancho, quedaba cortada contra el borde de la pantalla. Ahora:
   · la estrella mide lo de siempre respecto de la banda (43 % de su alto; 172 px con la tarjeta nueva) y asoma lo
     mismo que en producción (71 % de su ancho = 113 px), de pie sobre el borde de abajo;
   · la banda deja ese hueco a su izquierda cuando el margen de la página no alcanza (a 1440 px, 56 px), así la
     estrella nunca se corta;
   · las anillas montan 22 px sobre el borde derecho, centradas, con el 64 % del alto de la banda (como allá).
   Por debajo de 1100 px siguen escondidas (regla de sections.css). */
@media (min-width: 1101px) {
  .lead-magnet .lead-wrap { margin-left: max(0px, calc(121px - max(var(--gutter), 4.5vw))); }
  .lead-magnet .lead-wrap__mascota { left: -113px; bottom: -3px; height: 172px; }
  .lead-magnet .lead-wrap__anillas { right: -22px; height: 64%; }
}