/* =========================================================
   Comparalo - Hero B Test v8
   Preview seguro y reversible.
   Carga solo desde index-hero-b-test.php.
   No modifica productos ni ofertas.json.
   ========================================================= */

body.hero-blue-test-page {
  background: #f6f9ff;
}

/* Hero: celeste cálido arriba, sin cambiar el resto de la identidad del sitio. */
body.hero-blue-test-page .hero-blue-test__section,
body.hero-blue-test-page main > section:first-of-type {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 16%, rgba(117, 187, 255, 0.42), transparent 31%),
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.95), transparent 34%),
    linear-gradient(105deg, #f7fbff 0%, #e8f3ff 46%, #d8eaff 100%) !important;
}

body.hero-blue-test-page .hero-blue-test__section::before,
body.hero-blue-test-page main > section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.62), rgba(255,255,255,0) 50%),
    radial-gradient(circle at 90% 76%, rgba(255, 98, 116, 0.10), transparent 22%);
  pointer-events: none;
}

body.hero-blue-test-page .hero-blue-test__section::after,
body.hero-blue-test-page main > section:first-of-type::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -128px;
  height: 230px;
  z-index: -1;
  background: rgba(255,255,255,0.34);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

/* Se oculta cualquier elemento vacío que pueda quedar al sacar la frase superior. */
body.hero-blue-test-page .hero-blue-test__section p:empty,
body.hero-blue-test-page .hero-blue-test__section div:empty,
body.hero-blue-test-page main > section:first-of-type p:empty,
body.hero-blue-test-page main > section:first-of-type div:empty {
  display: none !important;
}

/* Recuadro del título: aplica la misma lógica celeste/cálida sin volverlo pesado. */
body.hero-blue-test-page .hero-blue-test__copy-box {
  width: fit-content;
  max-width: 680px;
  padding: clamp(18px, 2.6vw, 32px);
  margin: 0;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72) 0%, rgba(229,243,255,0.78) 100%) !important;
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow: 0 22px 52px rgba(31, 78, 150, 0.12);
  backdrop-filter: blur(8px);
}

/* Título principal: más editorial/cool, sin cambiar el mensaje. */
body.hero-blue-test-page .hero-blue-test__title,
body.hero-blue-test-page main > section:first-of-type h1 {
  margin-top: 0 !important;
  margin-bottom: 0.20em !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.94 !important;
  color: #0e2555 !important;
  text-wrap: balance;
}

body.hero-blue-test-page .hero-blue-test__title span {
  display: block;
}

body.hero-blue-test-page .hero-blue-test__title span:first-child {
  color: #0e2555 !important;
}

body.hero-blue-test-page .hero-blue-test__title span:nth-child(2) {
  color: #2467f2 !important;
}

body.hero-blue-test-page .hero-blue-test__dot {
  display: inline !important;
  color: #ff5f72 !important;
}

/* Nueva frase única debajo del título. */
body.hero-blue-test-page .hero-blue-test__lead,
body.hero-blue-test-page .hero-blue-test__section h1 + p,
body.hero-blue-test-page main > section:first-of-type h1 + p {
  max-width: 590px;
  color: #243f69 !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
}

/* Tarjeta/celular existentes: celeste suave, para que el bloque superior deje de sentirse verde. */
body.hero-blue-test-page .hero-blue-test__section [class*="card"],
body.hero-blue-test-page .hero-blue-test__section [class*="preview"],
body.hero-blue-test-page .hero-blue-test__section [class*="phone"],
body.hero-blue-test-page .hero-blue-test__section [class*="device"],
body.hero-blue-test-page main > section:first-of-type [class*="card"],
body.hero-blue-test-page main > section:first-of-type [class*="preview"],
body.hero-blue-test-page main > section:first-of-type [class*="phone"],
body.hero-blue-test-page main > section:first-of-type [class*="device"] {
  background:
    linear-gradient(150deg, rgba(255,255,255,0.88) 0%, rgba(229,243,255,0.82) 100%) !important;
  border-color: rgba(255,255,255,0.68) !important;
  box-shadow: 0 24px 56px rgba(28, 73, 150, 0.16) !important;
  backdrop-filter: blur(8px);
}

/* Si hay textos o iconos verdes dentro de la tarjetita del hero, los enfriamos solo arriba. */
body.hero-blue-test-page .hero-blue-test__section [class*="card"] [style*="green"],
body.hero-blue-test-page main > section:first-of-type [class*="card"] [style*="green"] {
  color: #2467f2 !important;
}

/* Badges/descuentos: coral suave, compatible con azul. */
body.hero-blue-test-page .hero-blue-test__section [class*="badge"],
body.hero-blue-test-page main > section:first-of-type [class*="badge"] {
  box-shadow: 0 10px 20px rgba(255, 95, 114, 0.16);
}

/* Botones del hero, si existen: no tocar agresivamente; solo sombra azul. */
body.hero-blue-test-page .hero-blue-test__section a[class*="btn"],
body.hero-blue-test-page .hero-blue-test__section button[class*="btn"],
body.hero-blue-test-page main > section:first-of-type a[class*="btn"],
body.hero-blue-test-page main > section:first-of-type button[class*="btn"] {
  box-shadow: 0 14px 28px rgba(43, 111, 240, 0.18);
}

@media (max-width: 768px) {
  body.hero-blue-test-page .hero-blue-test__section,
  body.hero-blue-test-page main > section:first-of-type {
    background:
      radial-gradient(circle at 84% 10%, rgba(117, 187, 255, 0.32), transparent 36%),
      linear-gradient(180deg, #f8fbff 0%, #e6f2ff 100%) !important;
  }

  body.hero-blue-test-page .hero-blue-test__copy-box {
    width: 100%;
    padding: 18px;
    border-radius: 24px;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1 {
    letter-spacing: -0.045em !important;
    line-height: 0.98 !important;
  }
}


/* =========================================================
   V4 - Limpieza final del hero superior
   - Saca frase/icono/carrito sobre el título.
   - Fuerza celeste en recuadro del título, tarjeta derecha y círculo.
   ========================================================= */

/* Quitar cualquier kicker/eyebrow/pill que haya quedado arriba del H1 en el hero. */
body.hero-blue-test-page main > section:first-of-type [class*="kicker"],
body.hero-blue-test-page main > section:first-of-type [class*="eyebrow"],
body.hero-blue-test-page main > section:first-of-type [class*="pretitle"],
body.hero-blue-test-page main > section:first-of-type [class*="label"]:not([class*="price"]):not([class*="store"]),
body.hero-blue-test-page main > section:first-of-type [class*="cart"],
body.hero-blue-test-page main > section:first-of-type [class*="bag"] {
  display: none !important;
}

/* Recuadro de título: cero verde, más blanco/celeste y borde frío. */
body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page main > section:first-of-type h1.parent-blue-test,
body.hero-blue-test-page main > section:first-of-type h1,
body.hero-blue-test-page main > section:first-of-type h1 + p {
  --hero-test-blue-soft: #eaf5ff;
  --hero-test-blue-mid: #d7ebff;
  --hero-test-blue-edge: rgba(96, 166, 255, 0.34);
}

body.hero-blue-test-page .hero-blue-test__copy-box {
  background:
    radial-gradient(circle at 82% 18%, rgba(165, 213, 255, 0.34), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.86) 0%, rgba(232,246,255,0.92) 52%, rgba(216,236,255,0.88) 100%) !important;
  border: 1px solid rgba(120, 181, 255, 0.36) !important;
  box-shadow: 0 22px 52px rgba(31, 78, 150, 0.13) !important;
}

/* Si el recuadro real del título en la base tiene otra clase, se fuerza solo alrededor del bloque que contiene el h1. */
body.hero-blue-test-page main > section:first-of-type :has(> h1.hero-blue-test__title) {
  background:
    radial-gradient(circle at 82% 18%, rgba(165, 213, 255, 0.34), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.86) 0%, rgba(232,246,255,0.92) 52%, rgba(216,236,255,0.88) 100%) !important;
  border-color: rgba(120, 181, 255, 0.36) !important;
}

/* Círculos, halos, blobs o formas decorativas del hero: todos a celeste suave. */
body.hero-blue-test-page main > section:first-of-type [class*="circle"],
body.hero-blue-test-page main > section:first-of-type [class*="blob"],
body.hero-blue-test-page main > section:first-of-type [class*="halo"],
body.hero-blue-test-page main > section:first-of-type [class*="orb"],
body.hero-blue-test-page main > section:first-of-type [class*="shape"],
body.hero-blue-test-page main > section:first-of-type [class*="glow"],
body.hero-blue-test-page main > section:first-of-type [class*="decor"] {
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.78), rgba(160, 211, 255, 0.50) 46%, rgba(122, 186, 255, 0.20) 74%) !important;
  border-color: rgba(126, 190, 255, 0.32) !important;
  color: #2467f2 !important;
  box-shadow: 0 22px 54px rgba(45, 112, 210, 0.14) !important;
}

/* Tarjeta visual derecha: más celeste, menos verde. */
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="card"],
body.hero-blue-test-page main > section:first-of-type [class*="mockup"] [class*="card"],
body.hero-blue-test-page main > section:first-of-type [class*="phone"],
body.hero-blue-test-page main > section:first-of-type [class*="device"],
body.hero-blue-test-page main > section:first-of-type [class*="preview"] {
  background:
    radial-gradient(circle at 78% 12%, rgba(160, 211, 255, 0.30), transparent 34%),
    linear-gradient(150deg, rgba(255,255,255,0.91) 0%, rgba(232,246,255,0.88) 54%, rgba(219,239,255,0.84) 100%) !important;
  border-color: rgba(130, 190, 255, 0.38) !important;
  box-shadow: 0 24px 56px rgba(28, 73, 150, 0.16) !important;
}

/* Si algún color verde venía como texto/acento en el hero, lo reemplazamos solo arriba. */
body.hero-blue-test-page main > section:first-of-type [class*="green"],
body.hero-blue-test-page main > section:first-of-type [class*="success"] {
  color: #2467f2 !important;
  border-color: rgba(70, 142, 255, 0.28) !important;
}

body.hero-blue-test-page main > section:first-of-type [class*="green"]::before,
body.hero-blue-test-page main > section:first-of-type [class*="green"]::after,
body.hero-blue-test-page main > section:first-of-type [class*="success"]::before,
body.hero-blue-test-page main > section:first-of-type [class*="success"]::after {
  background: #d8ecff !important;
}

/* =========================================================
   V5 - Descontaminación verde agresiva, SOLO en preview hero
   Objetivo: que el título/recuadro/círculo derecho dejen de verse verdosos.
   ========================================================= */

/* Caja exacta del título y sus posibles envoltorios: celeste/frío sí o sí. */
body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page .hero-blue-test__force-blue-box,
body.hero-blue-test-page .hero-blue-test__section .hero-blue-test__copy-box,
body.hero-blue-test-page main > section:first-of-type .hero-blue-test__copy-box,
body.hero-blue-test-page main > section:first-of-type .hero-blue-test__force-blue-box {
  background:
    radial-gradient(circle at 82% 14%, rgba(173, 219, 255, 0.52), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(235,247,255,0.96) 50%, rgba(217,237,255,0.94) 100%) !important;
  background-color: #eaf6ff !important;
  border-color: rgba(92, 167, 255, 0.38) !important;
  box-shadow: 0 24px 56px rgba(31, 83, 160, 0.14) !important;
}

/* Si la base usa un fondo verde en el h1 mismo o en spans, lo anulamos. */
body.hero-blue-test-page .hero-blue-test__title,
body.hero-blue-test-page .hero-blue-test__title span,
body.hero-blue-test-page main > section:first-of-type h1,
body.hero-blue-test-page main > section:first-of-type h1 span {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

/* Forzar color del texto, sin verdes heredados. */
body.hero-blue-test-page .hero-blue-test__title span:first-child,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title span:first-child {
  color: #0e2555 !important;
}

body.hero-blue-test-page .hero-blue-test__title span:nth-child(2),
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title span:nth-child(2) {
  color: #2467f2 !important;
}

/* Hero: si algún pseudo-elemento grande trae verde, lo llevamos a celeste. */
body.hero-blue-test-page .hero-blue-test__section::before,
body.hero-blue-test-page .hero-blue-test__section::after,
body.hero-blue-test-page main > section:first-of-type::before,
body.hero-blue-test-page main > section:first-of-type::after {
  background-color: rgba(218, 238, 255, 0.45) !important;
}

/* Círculo/halo derecho: selector amplio pero acotado al primer hero. */
body.hero-blue-test-page main > section:first-of-type [class*="circle"],
body.hero-blue-test-page main > section:first-of-type [class*="blob"],
body.hero-blue-test-page main > section:first-of-type [class*="halo"],
body.hero-blue-test-page main > section:first-of-type [class*="orb"],
body.hero-blue-test-page main > section:first-of-type [class*="shape"],
body.hero-blue-test-page main > section:first-of-type [class*="bubble"],
body.hero-blue-test-page main > section:first-of-type [class*="accent"],
body.hero-blue-test-page main > section:first-of-type [class*="glow"],
body.hero-blue-test-page main > section:first-of-type [class*="decor"] {
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.84), rgba(178, 222, 255, 0.58) 48%, rgba(118, 185, 255, 0.22) 76%) !important;
  background-color: #dbeeff !important;
  border-color: rgba(118, 185, 255, 0.34) !important;
  color: #2467f2 !important;
}

/* Nombres de clase comunes que podrían venir en verde desde el CSS real. */
body.hero-blue-test-page main > section:first-of-type [class*="green"],
body.hero-blue-test-page main > section:first-of-type [class*="emerald"],
body.hero-blue-test-page main > section:first-of-type [class*="success"],
body.hero-blue-test-page main > section:first-of-type [class*="mint"],
body.hero-blue-test-page main > section:first-of-type [class*="brand"]:not(header *):not(nav *) {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90) 0%, rgba(230,244,255,0.92) 100%) !important;
  background-color: #e8f5ff !important;
  border-color: rgba(108, 178, 255, 0.34) !important;
  color: #2467f2 !important;
}

/* Estilos inline/verdes típicos, acotados al hero. */
body.hero-blue-test-page main > section:first-of-type [style*="#16a34a"],
body.hero-blue-test-page main > section:first-of-type [style*="#059669"],
body.hero-blue-test-page main > section:first-of-type [style*="#10b981"],
body.hero-blue-test-page main > section:first-of-type [style*="#22c55e"],
body.hero-blue-test-page main > section:first-of-type [style*="#047857"],
body.hero-blue-test-page main > section:first-of-type [style*="#065f46"],
body.hero-blue-test-page main > section:first-of-type [style*="green"],
body.hero-blue-test-page main > section:first-of-type [style*="rgb(34, 197, 94)"],
body.hero-blue-test-page main > section:first-of-type [style*="rgb(16, 185, 129)"],
body.hero-blue-test-page main > section:first-of-type [style*="rgb(5, 150, 105)"] {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90) 0%, rgba(230,244,255,0.92) 100%) !important;
  background-color: #e8f5ff !important;
  border-color: rgba(108, 178, 255, 0.34) !important;
  color: #2467f2 !important;
}

/* Tarjeta derecha: fondo azul-blanco más evidente para no mezclar con verde. */
body.hero-blue-test-page .hero-blue-test__right-card,
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="card"],
body.hero-blue-test-page main > section:first-of-type [class*="product"] [class*="card"],
body.hero-blue-test-page main > section:first-of-type [class*="mockup"],
body.hero-blue-test-page main > section:first-of-type [class*="phone"],
body.hero-blue-test-page main > section:first-of-type [class*="device"],
body.hero-blue-test-page main > section:first-of-type [class*="preview"] {
  background:
    radial-gradient(circle at 78% 12%, rgba(171, 219, 255, 0.36), transparent 36%),
    linear-gradient(150deg, rgba(255,255,255,0.94) 0%, rgba(231,246,255,0.92) 55%, rgba(214,236,255,0.88) 100%) !important;
  background-color: #edf8ff !important;
  border-color: rgba(112, 180, 255, 0.42) !important;
  box-shadow: 0 24px 56px rgba(28, 73, 150, 0.16) !important;
}


/* =========================================================
   V6 - Corrección quirúrgica sobre lo que quedó verde
   ========================================================= */

/* Elimina visualmente el texto residual exacto que el parser web muestra como “Mejores ofertas del día”. */
body.hero-blue-test-page main > section:first-of-type > *:first-child:not(h1),
body.hero-blue-test-page .hero-blue-test__section > *:first-child:not(h1) {
  /* El JS lo elimina; esto es solo respaldo si queda un wrapper vacío. */
}

/* Si el verde viene de pseudo-elementos, esta vez anulamos TODO el background, no solo background-color. */
body.hero-blue-test-page main > section:first-of-type::before,
body.hero-blue-test-page main > section:first-of-type::after,
body.hero-blue-test-page .hero-blue-test__section::before,
body.hero-blue-test-page .hero-blue-test__section::after,
body.hero-blue-test-page .hero-blue-test__copy-box::before,
body.hero-blue-test-page .hero-blue-test__copy-box::after,
body.hero-blue-test-page .hero-blue-test__force-blue-box::before,
body.hero-blue-test-page .hero-blue-test__force-blue-box::after,
body.hero-blue-test-page .hero-blue-test__kill-green-pseudo::before,
body.hero-blue-test-page .hero-blue-test__kill-green-pseudo::after {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.78), rgba(180,224,255,0.52) 48%, rgba(118,185,255,0.20) 78%) !important;
  background-color: #dff1ff !important;
  border-color: rgba(118, 185, 255, 0.34) !important;
  box-shadow: 0 18px 44px rgba(44, 106, 205, 0.11) !important;
}

/* El recuadro del título queda explícitamente azul-blanco, sin matiz verde. */
body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page main > section:first-of-type .hero-blue-test__copy-box,
body.hero-blue-test-page main > section:first-of-type .hero-blue-test__force-blue-box {
  background:
    radial-gradient(circle at 83% 16%, rgba(178, 222, 255, 0.50), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.94) 0%, rgba(236,248,255,0.98) 52%, rgba(220,240,255,0.96) 100%) !important;
  background-color: #eef8ff !important;
  border: 1px solid rgba(112, 180, 255, 0.38) !important;
  box-shadow: 0 22px 52px rgba(30, 78, 150, 0.13) !important;
}

/* Anula cualquier variable verde común dentro del hero de prueba. */
body.hero-blue-test-page main > section:first-of-type,
body.hero-blue-test-page .hero-blue-test__section {
  --green: #2f7ef7 !important;
  --brand-green: #2f7ef7 !important;
  --accent-green: #2f7ef7 !important;
  --mint: #dff1ff !important;
  --success: #2f7ef7 !important;
}

/* Cualquier círculo grande en el lado derecho queda celeste, incluso si su clase no contiene circle/blob. */
body.hero-blue-test-page main > section:first-of-type .hero-blue-test__right-card,
body.hero-blue-test-page main > section:first-of-type [class*="visual"] *,
body.hero-blue-test-page main > section:first-of-type [class*="mock"] *,
body.hero-blue-test-page main > section:first-of-type [class*="phone"] *,
body.hero-blue-test-page main > section:first-of-type [class*="device"] * {
  --green: #2f7ef7 !important;
  --brand-green: #2f7ef7 !important;
  --accent-green: #2f7ef7 !important;
}


/* =========================================================
   V7 - Candidata final: celeste cálido + toque turquesa
   Objetivo: que el hero se vea moderno, pero conectado al verde del sitio.
   Scope: solo index-hero-b-test.php por body.hero-blue-test-page.
   ========================================================= */

body.hero-blue-test-page .hero-blue-test__section,
body.hero-blue-test-page main > section:first-of-type {
  background:
    radial-gradient(circle at 82% 18%, rgba(116, 189, 255, 0.34), transparent 31%),
    radial-gradient(circle at 92% 76%, rgba(117, 219, 213, 0.16), transparent 24%),
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(112deg, #f7fbff 0%, #eaf5ff 43%, #dcefff 76%, #dff3f2 100%) !important;
}

/* Transición suave al resto verde: un borde turquesa casi invisible, no un bloque nuevo. */
body.hero-blue-test-page .hero-blue-test__section::after,
body.hero-blue-test-page main > section:first-of-type::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -126px;
  height: 230px;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.38) 48%, rgba(218,244,241,0.20) 100%);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

/* Sin frase/ícono sobre el título. Si quedó algún kicker del hero original, fuera. */
body.hero-blue-test-page main > section:first-of-type [class*="eyebrow"],
body.hero-blue-test-page main > section:first-of-type [class*="kicker"],
body.hero-blue-test-page main > section:first-of-type [class*="pretitle"],
body.hero-blue-test-page main > section:first-of-type [class*="overline"],
body.hero-blue-test-page main > section:first-of-type [class*="cart"],
body.hero-blue-test-page main > section:first-of-type [class*="bag"] {
  display: none !important;
}

/* Recuadro del título: celeste claro con matiz turquesa, nunca verde puro. */
body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page main > section:first-of-type :has(> h1.hero-blue-test__title) {
  background:
    radial-gradient(circle at 86% 14%, rgba(151, 211, 255, 0.38), transparent 35%),
    radial-gradient(circle at 8% 92%, rgba(140, 224, 218, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.90) 0%, rgba(237,248,255,0.95) 52%, rgba(222,241,255,0.91) 100%) !important;
  border: 1px solid rgba(116, 184, 255, 0.34) !important;
  box-shadow:
    0 22px 52px rgba(31, 78, 150, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* Pequeño gesto premium en el bloque del título, sin sumar elementos visibles grandes. */
body.hero-blue-test-page .hero-blue-test__copy-box {
  position: relative;
  overflow: hidden;
}

body.hero-blue-test-page .hero-blue-test__copy-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #3d8cff 0%, #6ddbd2 100%) !important;
  opacity: 0.9;
  pointer-events: none;
}

/* Título: azul profundo + azul vivo, con punto coral. */
body.hero-blue-test-page .hero-blue-test__title,
body.hero-blue-test-page main > section:first-of-type h1 {
  color: #0d2454 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.42);
}

body.hero-blue-test-page .hero-blue-test__title span:first-child {
  color: #0d2454 !important;
}

body.hero-blue-test-page .hero-blue-test__title span:nth-child(2) {
  color: #2367e8 !important;
}

body.hero-blue-test-page .hero-blue-test__dot {
  color: #ff6074 !important;
}

body.hero-blue-test-page .hero-blue-test__lead,
body.hero-blue-test-page .hero-blue-test__section h1 + p,
body.hero-blue-test-page main > section:first-of-type h1 + p {
  color: #28466f !important;
  max-width: 620px;
}

/* Tarjeta derecha y celular: blanco/celeste, con un guiño turquesa para unir con el verde del sitio. */
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="card"],
body.hero-blue-test-page main > section:first-of-type [class*="mockup"] [class*="card"],
body.hero-blue-test-page main > section:first-of-type [class*="phone"],
body.hero-blue-test-page main > section:first-of-type [class*="device"],
body.hero-blue-test-page main > section:first-of-type [class*="preview"],
body.hero-blue-test-page .hero-blue-test__right-card,
body.hero-blue-test-page .hero-blue-test__force-blue-box {
  background:
    radial-gradient(circle at 82% 10%, rgba(139, 206, 255, 0.30), transparent 36%),
    radial-gradient(circle at 10% 88%, rgba(119, 220, 214, 0.13), transparent 35%),
    linear-gradient(150deg, rgba(255,255,255,0.93) 0%, rgba(235,247,255,0.90) 56%, rgba(223,241,255,0.88) 100%) !important;
  border-color: rgba(126, 190, 255, 0.36) !important;
  box-shadow: 0 24px 56px rgba(28, 73, 150, 0.15) !important;
}

/* Círculo / halo derecho: deja de verse verde, pero conserva un guiño turquesa muy suave. */
body.hero-blue-test-page main > section:first-of-type [class*="circle"],
body.hero-blue-test-page main > section:first-of-type [class*="blob"],
body.hero-blue-test-page main > section:first-of-type [class*="halo"],
body.hero-blue-test-page main > section:first-of-type [class*="orb"],
body.hero-blue-test-page main > section:first-of-type [class*="shape"],
body.hero-blue-test-page main > section:first-of-type [class*="glow"],
body.hero-blue-test-page main > section:first-of-type [class*="decor"] {
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.82), rgba(153, 211, 255, 0.48) 48%, rgba(117, 219, 213, 0.18) 76%) !important;
  border-color: rgba(126, 190, 255, 0.30) !important;
  color: #2367e8 !important;
  box-shadow: 0 22px 54px rgba(45, 112, 210, 0.13) !important;
}

/* Neutralizar verdes heredados solo en el hero, sin matar el verde del resto de la página. */
body.hero-blue-test-page main > section:first-of-type [style*="green"],
body.hero-blue-test-page main > section:first-of-type [class*="green"],
body.hero-blue-test-page main > section:first-of-type [class*="success"] {
  color: #2367e8 !important;
  border-color: rgba(71, 150, 255, 0.25) !important;
}

body.hero-blue-test-page main > section:first-of-type [class*="green"]::before,
body.hero-blue-test-page main > section:first-of-type [class*="green"]::after,
body.hero-blue-test-page main > section:first-of-type [class*="success"]::before,
body.hero-blue-test-page main > section:first-of-type [class*="success"]::after {
  background: #dcefff !important;
}

@media (max-width: 768px) {
  body.hero-blue-test-page .hero-blue-test__section,
  body.hero-blue-test-page main > section:first-of-type {
    background:
      radial-gradient(circle at 84% 10%, rgba(126, 196, 255, 0.30), transparent 36%),
      radial-gradient(circle at 92% 78%, rgba(117, 219, 213, 0.12), transparent 28%),
      linear-gradient(180deg, #f9fcff 0%, #e8f4ff 78%, #e4f5f3 100%) !important;
  }

  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page main > section:first-of-type :has(> h1.hero-blue-test__title) {
    border-radius: 24px !important;
  }
}

/* =========================================================
   V8 - Limpieza de verdes en la tarjeta derecha
   Criterio: mantener verde solo si es identidad de tienda/logotipo.
   Quitar verde de fondos, halos, badges y acentos decorativos del hero.
   ========================================================= */

/* Superficies visuales de la tarjeta derecha: azul/blanco/turquesa suave, sin verde dominante. */
body.hero-blue-test-page main > section:first-of-type [class*="visual"],
body.hero-blue-test-page main > section:first-of-type [class*="hero-visual"],
body.hero-blue-test-page main > section:first-of-type [class*="comparison"],
body.hero-blue-test-page main > section:first-of-type [class*="compare"],
body.hero-blue-test-page main > section:first-of-type [class*="mini"],
body.hero-blue-test-page main > section:first-of-type [class*="floating"],
body.hero-blue-test-page main > section:first-of-type [class*="mockup"] {
  --green: #2f7ef7 !important;
  --brand-green: #2f7ef7 !important;
  --accent-green: #2f7ef7 !important;
  --success: #2f7ef7 !important;
  --mint: #e6f5ff !important;
}

/* Cajas internas de la tarjeta: neutralizar fondos verdes heredados. */
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="box"],
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="panel"],
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="tile"],
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="item"],
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="pill"],
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="badge"],
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="box"],
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="panel"],
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="tile"],
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="item"],
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="pill"],
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="badge"] {
  background-color: rgba(237, 248, 255, 0.92) !important;
  border-color: rgba(126, 190, 255, 0.28) !important;
}

/* Acentos de precio/estado dentro de la tarjeta: azul o coral, no verde. */
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="price"]:not([class*="store"]):not([class*="logo"]),
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="tag"]:not([class*="store"]):not([class*="logo"]),
body.hero-blue-test-page main > section:first-of-type [class*="visual"] [class*="label"]:not([class*="store"]):not([class*="logo"]),
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="price"]:not([class*="store"]):not([class*="logo"]),
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="tag"]:not([class*="store"]):not([class*="logo"]),
body.hero-blue-test-page main > section:first-of-type [class*="comparison"] [class*="label"]:not([class*="store"]):not([class*="logo"]) {
  color: #2367e8 !important;
  border-color: rgba(35, 103, 232, 0.22) !important;
}

/* Descuentos/alertas conservan coral para contraste. */
body.hero-blue-test-page main > section:first-of-type [class*="discount"],
body.hero-blue-test-page main > section:first-of-type [class*="off"],
body.hero-blue-test-page main > section:first-of-type [class*="deal"] {
  background: linear-gradient(180deg, #ff6b7c 0%, #f05268 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 96, 116, 0.28) !important;
}

/* Importante: no tocar imágenes/logos de tiendas; si Falabella es verde por marca, puede quedar. */
body.hero-blue-test-page main > section:first-of-type img,
body.hero-blue-test-page main > section:first-of-type [class*="logo"],
body.hero-blue-test-page main > section:first-of-type [class*="store"] {
  filter: none !important;
}

/* Si queda un fondo verde visualmente claro en el lado derecho, lo lavamos a celeste por clase auxiliar del JS. */
body.hero-blue-test-page .hero-blue-test__right-card,
body.hero-blue-test-page .hero-blue-test__kill-green-pseudo,
body.hero-blue-test-page .hero-blue-test__right-card::before,
body.hero-blue-test-page .hero-blue-test__right-card::after,
body.hero-blue-test-page .hero-blue-test__kill-green-pseudo::before,
body.hero-blue-test-page .hero-blue-test__kill-green-pseudo::after {
  background:
    radial-gradient(circle at 80% 12%, rgba(159, 216, 255, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.94) 0%, rgba(235,247,255,0.95) 58%, rgba(222,242,255,0.90) 100%) !important;
  background-color: #eef8ff !important;
  border-color: rgba(112, 180, 255, 0.36) !important;
}

/* =========================================================
   ROOT V3 - Corrección móvil del hero
   Objetivo: en celular no dejar solo el título; mostrar la frase bajo el H1.
   Mantiene desktop igual.
   ========================================================= */

@media (max-width: 768px) {
  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page main > section:first-of-type :has(> h1.hero-blue-test__title) {
    padding: 20px 18px 22px !important;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1 {
    margin-bottom: 12px !important;
  }

  body.hero-blue-test-page .hero-blue-test__lead,
  body.hero-blue-test-page .hero-blue-test__section h1 + p,
  body.hero-blue-test-page main > section:first-of-type h1 + p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    color: #28466f !important;
    font-size: clamp(15.5px, 4.2vw, 17px) !important;
    line-height: 1.43 !important;
    font-weight: 520 !important;
    letter-spacing: -0.01em !important;
    text-wrap: pretty;
  }

  /* En móviles muy angostos, la frase sigue visible pero no compite con el título. */
  @media (max-width: 380px) {
    body.hero-blue-test-page .hero-blue-test__lead,
    body.hero-blue-test-page .hero-blue-test__section h1 + p,
    body.hero-blue-test-page main > section:first-of-type h1 + p {
      font-size: 15px !important;
      line-height: 1.38 !important;
    }
  }
}


/* =========================================================
   Ajuste v2 sobre index recuperado completo
   Objetivo: replicar el test aprobado, matar verdoso del recuadro,
   recuperar tamaño del título y evitar que el punto salte de línea.
   ========================================================= */
body.hero-blue-test-page .hero-blue-test__section {
  padding-top: clamp(34px, 5vw, 58px) !important;
  padding-bottom: clamp(32px, 4.4vw, 52px) !important;
}

body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  padding: clamp(20px, 2.8vw, 34px) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 84% 14%, rgba(161, 215, 255, 0.44), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(235,248,255,0.96) 50%, rgba(219,239,255,0.94) 100%) !important;
  background-color: #eaf6ff !important;
  border: 1px solid rgba(113, 179, 255, 0.38) !important;
  box-shadow: 0 24px 54px rgba(31, 78, 150, 0.13) !important;
}

body.hero-blue-test-page .hero-blue-test__title,
body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
  font-size: clamp(62px, 7.8vw, 98px) !important;
  line-height: .92 !important;
  letter-spacing: -0.058em !important;
  margin: 0 0 14px !important;
  max-width: 620px !important;
}

body.hero-blue-test-page .hero-blue-test__title > span {
  display: block !important;
}

body.hero-blue-test-page .hero-blue-test__title > span:nth-child(2) {
  white-space: nowrap !important;
}

body.hero-blue-test-page .hero-blue-test__title .hero-blue-test__dot,
body.hero-blue-test-page .hero-blue-test__dot {
  display: inline !important;
  white-space: nowrap !important;
  color: #ff5f72 !important;
}

body.hero-blue-test-page .hero-blue-test__lead,
body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
  font-size: clamp(16px, 1.55vw, 18px) !important;
  line-height: 1.45 !important;
  max-width: 560px !important;
  margin: 0 !important;
  color: #253f69 !important;
}

/* Enfriar con más precisión los restos verdes de la tarjeta derecha, sin tocar logos reales de tiendas abajo. */
body.hero-blue-test-page .hero-blue-test__section .hero-laptop-bar {
  color: #1b4f96 !important;
  background: linear-gradient(180deg, #f7fbff 0%, #eef7ff 100%) !important;
}
body.hero-blue-test-page .hero-blue-test__section .hero-laptop-bar span:nth-child(3) {
  background: #3ba8ff !important;
}
body.hero-blue-test-page .hero-blue-test__section .hero-mini-img {
  background: linear-gradient(135deg, #e7f5ff 0%, #83caff 42%, #2b6ff2 100%) !important;
}
body.hero-blue-test-page .hero-blue-test__section .hero-price-row,
body.hero-blue-test-page .hero-blue-test__section .hero-price-row:nth-of-type(2),
body.hero-blue-test-page .hero-blue-test__section .hero-price-row:nth-of-type(3),
body.hero-blue-test-page .hero-blue-test__section .hero-price-row:nth-of-type(4) {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(108,166,255,.20) !important;
}
body.hero-blue-test-page .hero-blue-test__section .hero-price-best {
  background: linear-gradient(90deg, rgba(228,242,255,.96), rgba(255,255,255,.96)) !important;
}
body.hero-blue-test-page .hero-blue-test__section .hero-float-pill {
  background: rgba(255,255,255,.94) !important;
  color: #2467f2 !important;
  border: 1px solid rgba(108,166,255,.24) !important;
}
body.hero-blue-test-page .hero-blue-test__section .hero-pill-c {
  color: #ff5f72 !important;
}
body.hero-blue-test-page .hero-blue-test__section .hero-phone {
  background: linear-gradient(180deg, #f8fbff 0%, #e8f4ff 100%) !important;
  color: #17202a !important;
}

@media (max-width: 980px) {
  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(52px, 11vw, 76px) !important;
  }
}

@media (max-width: 700px) {
  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(45px, 13vw, 62px) !important;
    line-height: .96 !important;
    letter-spacing: -0.048em !important;
    margin-bottom: 12px !important;
  }

  body.hero-blue-test-page .hero-blue-test__lead,
  body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
    display: block !important;
    font-size: 15.5px !important;
    line-height: 1.42 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(40px, 12.3vw, 52px) !important;
  }
}

/* =========================================================
   V3 - Compactar hero/banner aprobado
   Objetivo: mantener el look celeste, pero reducir altura visual.
   ========================================================= */

body.hero-blue-test-page .hero-blue-test__section,
body.hero-blue-test-page main > section:first-of-type.hero-blue-test__section {
  padding-top: clamp(22px, 3.2vw, 36px) !important;
  padding-bottom: clamp(22px, 3vw, 34px) !important;
  min-height: 0 !important;
}

body.hero-blue-test-page .hero-with-visual.hero-blue-test__section {
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 20px !important;
  align-items: center !important;
}

body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
  max-width: 600px !important;
  padding: clamp(17px, 2vw, 24px) !important;
  border-radius: 26px !important;
}

body.hero-blue-test-page .hero-blue-test__title,
body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
  font-size: clamp(54px, 6.4vw, 82px) !important;
  line-height: .93 !important;
  letter-spacing: -0.055em !important;
  margin: 0 0 10px !important;
  max-width: 560px !important;
}

body.hero-blue-test-page .hero-blue-test__title > span:nth-child(2) {
  white-space: nowrap !important;
}

body.hero-blue-test-page .hero-blue-test__lead,
body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
  font-size: clamp(15px, 1.25vw, 16.5px) !important;
  line-height: 1.38 !important;
  max-width: 540px !important;
}

body.hero-blue-test-page .hero-compare-visual {
  min-height: 230px !important;
  transform: scale(.88) !important;
  transform-origin: center right !important;
  margin-right: -6px !important;
}

body.hero-blue-test-page .hero-compare-visual:before {
  width: 260px !important;
  height: 260px !important;
  right: 8px !important;
  top: -14px !important;
}

body.hero-blue-test-page .hero-compare-visual:after {
  width: 145px !important;
  height: 145px !important;
  left: 100px !important;
  bottom: -16px !important;
}

body.hero-blue-test-page .hero-laptop {
  width: 300px !important;
  min-height: 185px !important;
  top: 28px !important;
}

body.hero-blue-test-page .hero-laptop-bar {
  height: 34px !important;
}

body.hero-blue-test-page .hero-laptop-body {
  padding: 12px !important;
}

body.hero-blue-test-page .hero-mini-product {
  grid-template-columns: 62px 1fr !important;
  gap: 9px !important;
  margin-bottom: 9px !important;
}

body.hero-blue-test-page .hero-mini-img {
  height: 48px !important;
}

body.hero-blue-test-page .hero-price-row {
  min-height: 30px !important;
  margin-top: 6px !important;
  font-size: 11px !important;
}

body.hero-blue-test-page .hero-price-row b {
  font-size: 12px !important;
}

body.hero-blue-test-page .hero-phone {
  width: 112px !important;
  height: 178px !important;
  right: 0 !important;
  top: 62px !important;
  border-radius: 22px !important;
  border-width: 6px !important;
  padding: 19px 10px 10px !important;
}

body.hero-blue-test-page .hero-phone b,
body.hero-blue-test-page .hero-phone em {
  font-size: 16px !important;
  padding: 6px 7px 7px !important;
}

body.hero-blue-test-page .hero-phone strong,
body.hero-blue-test-page .hero-phone span {
  font-size: 9px !important;
  padding: 6px 7px 3px !important;
}

body.hero-blue-test-page .hero-float-pill {
  min-height: 29px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
}

body.hero-blue-test-page .hero-pill-a { top: 6px !important; left: 16px !important; }
body.hero-blue-test-page .hero-pill-b { top: 22px !important; right: 40px !important; }
body.hero-blue-test-page .hero-pill-c { bottom: 6px !important; left: 102px !important; }

@media (max-width: 980px) {
  body.hero-blue-test-page .hero-with-visual.hero-blue-test__section {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body.hero-blue-test-page .hero-compare-visual {
    display: none !important;
  }

  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  body.hero-blue-test-page .hero-blue-test__section,
  body.hero-blue-test-page main > section:first-of-type.hero-blue-test__section {
    padding-top: 18px !important;
    padding-bottom: 20px !important;
  }

  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
    padding: 17px !important;
    border-radius: 22px !important;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(43px, 12.4vw, 58px) !important;
    line-height: .96 !important;
    margin-bottom: 9px !important;
  }

  body.hero-blue-test-page .hero-blue-test__lead,
  body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
    font-size: 15px !important;
    line-height: 1.36 !important;
  }
}

/* =========================================================
   V4 - Ajuste fino: título menos gigante y hero más proporcionado
   Objetivo: conservar el look aprobado, pero bajar el peso visual del H1.
   ========================================================= */

body.hero-blue-test-page .hero-blue-test__section,
body.hero-blue-test-page main > section:first-of-type.hero-blue-test__section {
  padding-top: clamp(20px, 2.8vw, 32px) !important;
  padding-bottom: clamp(20px, 2.6vw, 30px) !important;
}

body.hero-blue-test-page .hero-with-visual.hero-blue-test__section {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 18px !important;
}

body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
  max-width: 560px !important;
  padding: clamp(16px, 1.8vw, 22px) !important;
  border-radius: 24px !important;
}

body.hero-blue-test-page .hero-blue-test__title,
body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
  font-size: clamp(46px, 5.45vw, 70px) !important;
  line-height: .94 !important;
  letter-spacing: -0.052em !important;
  margin: 0 0 9px !important;
  max-width: 500px !important;
}

body.hero-blue-test-page .hero-blue-test__title > span:nth-child(2) {
  white-space: nowrap !important;
}

body.hero-blue-test-page .hero-blue-test__title .hero-blue-test__dot,
body.hero-blue-test-page .hero-blue-test__dot {
  display: inline !important;
  white-space: nowrap !important;
}

body.hero-blue-test-page .hero-blue-test__lead,
body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
  font-size: clamp(14px, 1.08vw, 15.5px) !important;
  line-height: 1.35 !important;
  max-width: 490px !important;
}

body.hero-blue-test-page .hero-compare-visual {
  min-height: 210px !important;
  transform: scale(.80) !important;
  transform-origin: center right !important;
  margin-right: -10px !important;
}

body.hero-blue-test-page .hero-compare-visual:before {
  width: 235px !important;
  height: 235px !important;
  right: 10px !important;
  top: -8px !important;
}

body.hero-blue-test-page .hero-laptop {
  width: 282px !important;
  min-height: 174px !important;
  top: 24px !important;
}

body.hero-blue-test-page .hero-phone {
  width: 104px !important;
  height: 166px !important;
  top: 58px !important;
}

@media (max-width: 980px) {
  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
    max-width: 100% !important;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(42px, 9.5vw, 62px) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  body.hero-blue-test-page .hero-blue-test__section,
  body.hero-blue-test-page main > section:first-of-type.hero-blue-test__section {
    padding-top: 16px !important;
    padding-bottom: 18px !important;
  }

  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
    padding: 16px !important;
    border-radius: 21px !important;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(39px, 11.2vw, 52px) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 8px !important;
  }

  body.hero-blue-test-page .hero-blue-test__lead,
  body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
    font-size: 14.5px !important;
    line-height: 1.34 !important;
  }
}


/* =========================================================
   V5 - REAL compact fix + cache-bust
   La v4 se veía igual porque el PHP seguía llamando el CSS con ?v=azul-v3.
   Esta capa fuerza proporciones más chicas con versión de CSS nueva.
   ========================================================= */

body.hero-blue-test-page .hero-blue-test__section,
body.hero-blue-test-page main > section:first-of-type.hero-blue-test__section {
  padding-top: 18px !important;
  padding-bottom: 20px !important;
}

body.hero-blue-test-page .hero-with-visual.hero-blue-test__section {
  grid-template-columns: minmax(0, 1fr) 330px !important;
  gap: 18px !important;
}

body.hero-blue-test-page .hero-blue-test__copy-box,
body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
  max-width: 520px !important;
  padding: 18px 22px !important;
  border-radius: 22px !important;
}

body.hero-blue-test-page .hero-blue-test__title,
body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
  font-size: clamp(42px, 4.7vw, 64px) !important;
  line-height: .95 !important;
  letter-spacing: -0.048em !important;
  margin: 0 0 8px !important;
  max-width: 480px !important;
}

body.hero-blue-test-page .hero-blue-test__title > span:nth-child(2) {
  display: block !important;
  white-space: nowrap !important;
}

body.hero-blue-test-page .hero-blue-test__title .hero-blue-test__dot,
body.hero-blue-test-page .hero-blue-test__dot {
  display: inline !important;
  white-space: nowrap !important;
}

body.hero-blue-test-page .hero-blue-test__lead,
body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
  font-size: clamp(13.5px, 1vw, 15px) !important;
  line-height: 1.34 !important;
  max-width: 470px !important;
}

body.hero-blue-test-page .hero-compare-visual {
  min-height: 190px !important;
  transform: scale(.76) !important;
  transform-origin: center right !important;
  margin-right: -18px !important;
}

body.hero-blue-test-page .hero-compare-visual:before {
  width: 220px !important;
  height: 220px !important;
  right: 18px !important;
  top: -6px !important;
}

body.hero-blue-test-page .hero-laptop {
  width: 264px !important;
  min-height: 164px !important;
  top: 22px !important;
}

body.hero-blue-test-page .hero-phone {
  width: 98px !important;
  height: 156px !important;
  top: 56px !important;
  right: 4px !important;
}

body.hero-blue-test-page .hero-float-pill {
  font-size: 10px !important;
  min-height: 26px !important;
}

@media (max-width: 980px) {
  body.hero-blue-test-page .hero-with-visual.hero-blue-test__section {
    grid-template-columns: 1fr !important;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(40px, 9.2vw, 58px) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  body.hero-blue-test-page .hero-blue-test__section,
  body.hero-blue-test-page main > section:first-of-type.hero-blue-test__section {
    padding-top: 15px !important;
    padding-bottom: 17px !important;
  }

  body.hero-blue-test-page .hero-blue-test__copy-box,
  body.hero-blue-test-page .hero-blue-test__section > .hero-card.hero-blue-test__copy-box {
    padding: 15px !important;
    border-radius: 20px !important;
  }

  body.hero-blue-test-page .hero-blue-test__title,
  body.hero-blue-test-page .hero-blue-test__copy-box h1.hero-blue-test__title,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title {
    font-size: clamp(37px, 10.8vw, 49px) !important;
    line-height: .99 !important;
    margin-bottom: 8px !important;
  }

  body.hero-blue-test-page .hero-blue-test__lead,
  body.hero-blue-test-page .hero-blue-test__copy-box .hero-blue-test__lead,
  body.hero-blue-test-page main > section:first-of-type h1.hero-blue-test__title + p.hero-blue-test__lead {
    font-size: 14px !important;
    line-height: 1.34 !important;
  }
}


/* Final: punto coral del titular, con selector más fuerte para evitar herencia azul. */
body.hero-blue-test-page .hero-blue-test__title .hero-blue-test__dot,
body.hero-blue-test-page main > section:first-of-type h1 .hero-blue-test__dot {
  display: inline !important;
  color: #f05265 !important;
  -webkit-text-fill-color: #f05265 !important;
}