/* =============================================================
   VESPER · NOVOVET — capa aditiva de tema
   -------------------------------------------------------------
   Se carga DESPUÉS de site/css/styles.css y solo lo reviste.
   No modifica ningún archivo del sitio original.
   Para desactivarla: comentar su <link> en index.html.

   Qué trasplanta del prompt de referencia:
     · material de vidrio líquido en botones y navegación
     · el barrido de brillo que se mueve (aquí en verde Novovet)
     · la cursiva serif como acento del titular
     · la banda de marcas en movimiento continuo
     · la secuencia de entrada escalonada del hero
     · la capa de grano sobre toda la página
   La paleta NO se invierte: el sitio ya era blanco con verde
   Novovet, así que lo que cambia es el tratamiento, no el color.
   ============================================================= */

:root {
  /* Geometría del tema */
  --vs-radius: 7px;
  --vs-radius-lg: 14px;

  /* Verdes de marca ya existentes, re-expuestos para esta capa */
  --vs-green: #04B464;
  --vs-green-deep: #0A9D58;
  --vs-green-dark: #067a44;

  /* Material */
  --vs-line: rgba(10, 157, 88, 0.42);
  --vs-line-soft: rgba(10, 157, 88, 0.18);
  --vs-glow: rgba(4, 180, 100, 0.22);

  /* Curva del prompt */
  --vs-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 0 · FONDO HOMOGÉNEO ----------
   El sitio pintaba un fondo opaco por sección (hero con tres halos,
   --bg-soft, --bg-mint, el footer oscuro, .promos-section). Eso tapaba
   la capa del ojo de pez, que vive detrás en z-index -1.
   Aquí se apagan esos fondos: queda UNA sola superficie continua,
   la de .trama, visible de punta a punta de la página.

   El efecto es el ORIGINAL — TramaLente, en main.js, el mismo que corre
   hoy en novovet.cl. No se reemplazó por nada: los puntos tienen que ser
   idénticos a los publicados, y para eso lo más seguro es dejar corriendo
   el código que los produce. Lo único que le faltaba era destaparse.

   Excepción, tal como se pidió: las imágenes promocionales y las fotos
   conservan su propio fondo, porque son imágenes y necesitan su marco. */

html, body { background: #ffffff; }

/* .trama ya viene fixed, inset:0 y pointer-events:none desde styles.css.
   Acá SOLO se le cambia la profundidad: estaba en -1, que la dejaba por
   detrás del fondo blanco del body. No se le toca la posición — hacer eso
   sobre elementos que ya la tienen fue lo que rompió el encabezado
   pegajoso en su momento. */
.trama { z-index: 0; }
.trama canvas { display: block; }

/* Todo el contenido va por encima de la capa de fondo.
   OJO: aquí NO puede ir .header (es sticky), ni los flotantes ni el
   lightbox (son fixed). Darles position:relative les rompe el anclaje.
   A esos solo se les toca el z-index. */
.topbar, .mainnav,
.hero, .featured-strip, .promos-section, .section,
.perks-strip, .footer {
  position: relative;
  z-index: 1;
}

/* Conservan su position original; solo se ordenan en profundidad */
.header    { z-index: 100; }   /* sticky, viene de styles.css */
.wa-float,
.aa-float  { z-index: 90; }    /* fixed */
.lightbox  { z-index: 200; }   /* fixed */

/* Fondos de sección apagados: la animación se ve siempre */
.hero,
.section--soft,
.section--mint,
.promos-section,
.featured-strip,
.perks-strip {
  background: transparent;
}

/* El footer conserva su peso pero deja pasar la trama */
.footer {
  background: linear-gradient(180deg, rgba(9, 63, 57, 0.94), rgba(9, 63, 57, 0.985));
}

/* Los separadores dejan de ser necesarios cuando el fondo es continuo */
.promos-section,
.perks-strip {
  border-color: transparent;
}

/* --- Excepciones: lo que SÍ mantiene fondo propio ---
   Solo el MARCO de la imagen promocional, no su contenedor: así la
   trama corre por detrás del banner y se ve alrededor de él. */
.campaign { background: transparent; }
.campaign__card,
.promo-main { background: #0b201c; }

/* Tarjetas: necesitan superficie para poder leerse sobre la trama */
.feat-card,
.value-card,
.cat-card,
.perk,
.hero__badge,
.mainnav__quote {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- 0b · Halo de lectura ----------
   Con el fondo apagado, la onda cruza por detrás del texto y compite
   con él. En vez de devolverle un fondo opaco a la sección — que
   rompería la homogeneidad — cada bloque de texto lleva un halo blanco
   de bordes difusos: levanta el contraste sin dibujar ningún borde y
   la animación se sigue viendo a través. */
.hero__content,
.section-head,
.split__content,
.strip-head {
  position: relative;
  isolation: isolate;
}
.hero__content::before,
.section-head::before,
.split__content::before,
.strip-head::before {
  content: "";
  position: absolute;
  inset: -40px -56px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 58% at 40% 50%,
              rgba(255, 255, 255, 0.86) 0%,
              rgba(255, 255, 255, 0.62) 42%,
              rgba(255, 255, 255, 0) 78%);
}
.section-head::before,
.strip-head::before {
  background: radial-gradient(52% 62% at 50% 50%,
              rgba(255, 255, 255, 0.84) 0%,
              rgba(255, 255, 255, 0.55) 45%,
              rgba(255, 255, 255, 0) 80%);
}

/* ---------- 0c · LA CINTA DEL HERO ----------
   Cruza el hero de lado a lado, centrada, por DEBAJO del texto y por
   DEBAJO de las mascotas recortadas. Entre ambos, que es donde se pidió
   que se viera. No toca la grilla ni la tipografía del hero. */
.hero { position: relative; }

.nv-cinta {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: min(78%, 560px);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  /* Se desvanece en los cuatro bordes: entra y sale sin cortarse */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-composite: intersect;
}

/* El texto y las mascotas van por encima de la cinta */
.hero__content { z-index: 2; }
.hero__visual  { z-index: 1; }
.hero__grid    { position: relative; z-index: 1; }

/* ---------- 0d · La imagen recortada ----------
   El PNG viene sin fondo, así que el marco blanco, el borde redondeado
   y la sombra del contenedor sobran: la recortaban contra una tarjeta.
   Se quitan para que las mascotas floten sobre la cinta. */
.hero__img {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.hero__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  /* Una sombra propia, pegada al contorno del recorte */
  filter: drop-shadow(0 18px 26px rgba(10, 79, 72, 0.22));
}

/* ---------- 1 · Grano sobre toda la página ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 2 · Tipografía ----------
   Inter para interfaz (Raleway sigue disponible si se prefiere:
   basta con borrar esta regla). Instrument Serif solo para el acento. */
body,
.btn,
.nav__menu > li > a,
.eyebrow,
.hero__stat .lbl,
.trust__label {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero__content h1 {
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.12;
}

/* El acento del titular: de gradiente recortado a cursiva serif verde.
   Es el gesto tipográfico característico del prompt. */
.hero__content h1 .text-grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--vs-green);
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.03em;
}

.hero__content .lead {
  letter-spacing: -0.015em;
  line-height: 1.55;
}

.hero__stat .num {
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ---------- 3 · Navegación: de barra verde a píldoras líquidas ---------- */
.mainnav {
  background: #ffffff;
  border-top: 1px solid var(--vs-line-soft);
  border-bottom: 1px solid var(--vs-line-soft);
}

.nav__menu { gap: 8px; align-items: center; padding: 9px 0; }

.nav__menu > li > a {
  position: relative;
  overflow: hidden;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--vs-radius);
  border: 1px solid var(--vs-line);
  background: linear-gradient(105deg, #ffffff 0%, #eafaf2 48%, #c2eeda 100%);
  color: #0B1F16;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* El brillo que se mueve — en verde */
.nav__menu > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(4, 180, 100, 0.30) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.nav__menu > li > a:hover::before { transform: translateX(120%); }

.nav__menu > li > a:hover,
.nav__menu > li > a.active {
  background: linear-gradient(105deg, #ffffff 0%, #d9f5e7 45%, #9ee2c2 100%);
  border-color: rgba(4, 180, 100, 0.85);
  box-shadow: 0 0 18px var(--vs-glow);
  color: #0B1F16;
}

.mainnav__quote { border-radius: var(--vs-radius); }

/* ---------- 4 · Botones: vidrio líquido con barrido ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--vs-radius);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: background 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease, color 0.35s ease, transform 0.25s var(--vs-ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }

/* El contenido del botón queda por encima del barrido */
.btn > * { position: relative; z-index: 1; }

.btn--primary {
  background: linear-gradient(180deg, #04B464 0%, #0A9D58 48%, #068a4c 100%);
  color: #ffffff;
  border: 1px solid #04B464;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #0ac972 0%, #04B464 42%, #0A9D58 100%);
  border-color: #0ac972;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
              0 0 26px rgba(4, 180, 100, 0.40),
              0 8px 18px rgba(4, 180, 100, 0.20);
}

.btn--ghost {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(234, 250, 242, 0.6) 46%, rgba(4, 180, 100, 0.10));
  color: var(--vs-green-deep);
  border: 1px solid var(--vs-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.btn--ghost:hover {
  background: linear-gradient(135deg, rgba(4, 180, 100, 0.14), rgba(255, 255, 255, 0.6) 48%, rgba(4, 180, 100, 0.12));
  border-color: rgba(4, 180, 100, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 24px rgba(4, 180, 100, 0.28);
}

/* El barrido blanco no se ve sobre botones claros: allí va en verde */
.btn--ghost::after,
.btn--white::after,
.btn--accent::after {
  background: linear-gradient(115deg, transparent 20%, rgba(4, 180, 100, 0.26) 48%, transparent 76%);
}

/* ---------- 5 · Banda de marcas en movimiento ----------
   .trust__row deja de ser una fila estática y pasa a desplazarse
   de forma continua. El script de index.html duplica el contenido
   para que el bucle no tenga costura. */
.trust { overflow: hidden; }

.trust__row {
  --vs-band-speed: 38s;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  gap: 64px;
  animation: vs-band var(--vs-band-speed) linear infinite;
  will-change: transform;
}
.trust:hover .trust__row { animation-play-state: paused; }

.trust__row span {
  flex: none;
  color: #a9bdb2;
  transition: color 0.3s ease;
}
.trust__row span:hover { color: var(--vs-green-deep); }

/* Desvanecido en los bordes, para que la banda entre y salga */
.trust .container {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  overflow: hidden;
}

@keyframes vs-band {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 6 · Material de vidrio en las tarjetas ---------- */
.feat-card,
.value-card,
.cat-card,
.perk {
  border-radius: var(--vs-radius-lg);
  border: 1px solid var(--vs-line-soft);
  transition: transform 0.35s var(--vs-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.feat-card:hover,
.value-card:hover,
.perk:hover {
  border-color: rgba(4, 180, 100, 0.55);
  box-shadow: 0 0 22px rgba(4, 180, 100, 0.12), 0 10px 26px rgba(10, 79, 72, 0.10);
}

.feat-btn,
.slider__arrow { border-radius: var(--vs-radius); }

/* ---------- 7 · Entrada escalonada del hero ----------
   Reproduce la secuencia del prompt sobre los elementos que ya
   existen en el hero. El estado de reposo es visible (opacidad 1),
   así que si las animaciones no corren, nada queda en blanco. */

/* El hero no espera al observador de scroll: entra de inmediato */
.hero .reveal { opacity: 1; transform: none; filter: none; }

.hero__content .eyebrow,
.hero__content h1,
.hero__content .lead,
.hero__actions .btn,
.hero__hint,
.hero__stat,
.hero__visual {
  animation-duration: 1.05s;
  animation-fill-mode: both;
  animation-timing-function: var(--vs-ease);
}

.hero__content .eyebrow   { animation-name: vs-pop;  animation-delay: 0.22s; }
.hero__content h1         { animation-name: vs-mask; animation-delay: 0.42s; }
.hero__content .lead      { animation-name: vs-soft; animation-delay: 0.82s; animation-duration: 1.25s; }
.hero__actions .btn:nth-child(1) { animation-name: vs-btn;  animation-delay: 0.96s; }
.hero__actions .btn:nth-child(2) { animation-name: vs-side; animation-delay: 1.10s; }
.hero__hint               { animation-name: vs-soft; animation-delay: 1.18s; }
.hero__stat:nth-child(1)  { animation-name: vs-stat; animation-delay: 1.12s; }
.hero__stat:nth-child(2)  { animation-name: vs-stat; animation-delay: 1.28s; }
.hero__stat:nth-child(3)  { animation-name: vs-stat; animation-delay: 1.44s; }
.hero__visual             { animation-name: vs-scale; animation-delay: 0.34s; }

/* El acento serif entra desenfocado y se afila */
.hero__content h1 .text-grad {
  animation: vs-em 1.2s var(--vs-ease) 0.72s both;
}

@keyframes vs-scale { from { opacity: 0; transform: scale(0.84); } to { opacity: 1; transform: scale(1); } }
@keyframes vs-soft  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vs-mask  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vs-pop {
  0%   { opacity: 0; transform: scale(0.9); }
  70%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vs-btn  { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vs-side { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vs-stat { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vs-em   { from { opacity: 0.35; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

/* Una vez terminada la animación, el elemento queda fijo */
.vs-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ---------- 7b · Foto del hero ----------
   Pediste dejar fuera la imagen del perro y el gato. Se mantiene
   puesta porque es parte del inicio real y sacarla deja la columna
   vacía. Para quitarla, descomentar estas dos reglas: el hero pasa
   a una sola columna y el texto se centra.

.hero__visual { display: none; }
.hero__grid   { grid-template-columns: 1fr; }

*/

/* ---------- 8 · Accesibilidad del movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .hero__content .eyebrow,
  .hero__content h1,
  .hero__content h1 .text-grad,
  .hero__content .lead,
  .hero__actions .btn,
  .hero__hint,
  .hero__stat,
  .hero__visual,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .trust__row { width: auto; flex-wrap: wrap; justify-content: center; }
}

/* ---------- 9 · Teléfono ---------- */
@media (max-width: 900px) {
  .nav__menu { flex-wrap: wrap; gap: 6px; padding: 8px 0; }
  .nav__menu > li > a { height: 36px; padding: 0 14px; font-size: 13px; }
  .trust__row { gap: 40px; }
}

/* ---------- 10 · PÁGINAS INTERIORES ----------
   Productos, Laboratorios, Nosotros y Contacto comparten una estructura
   mucho más simple que el inicio: una banda de título (.page-hero) y
   luego .section una tras otra hasta el pie.

   .section, .section--soft, .footer y las tarjetas ya quedaron resueltos
   arriba, porque el inicio también los usa. Acá va SOLO lo que es propio
   de las interiores. */

/* --- La banda de título ---
   Era el único bloque oscuro arriba de todo: el inicio abre claro y
   estas abrían en negro, que es lo que más se notaba al pasar de una a
   otra. Se pasa a claro y la onda del fondo cruza por detrás, igual que
   en el hero del inicio.

   OJO: .page-hero ya trae position:relative de styles.css. Acá solo se
   le da profundidad — imponerle position otra vez fue el error que en su
   momento rompió el encabezado pegajoso. */
.page-hero {
  background: transparent;
  color: var(--ink);
  z-index: 1;
}

/* El resplandor verde se queda: es el mismo que abre el hero del inicio.
   Sobre claro hay que bajarle el cuerpo, si no ensucia el título. */
.page-hero__blob {
  background: radial-gradient(circle, rgba(4, 180, 100, .16), transparent 66%);
}

/* La retícula geométrica estaba dibujada en blanco para leerse sobre el
   negro. Sobre claro desaparecía: se cambia a la tinta petróleo del
   fondo, muy tenue, para que acompañe sin competir con la trama. */
.page-hero::after {
  opacity: .5;
  background-image:
    linear-gradient(rgba(14, 110, 99, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 110, 99, .07) 1px, transparent 1px);
}

/* Los textos venían todos en blanco sobre el negro. Se devuelven a la
   paleta del inicio. */
.page-hero .breadcrumb        { color: var(--muted); }
.page-hero .breadcrumb a      { color: var(--slate); }
.page-hero .breadcrumb a:hover{ color: var(--green-darker); }
.page-hero .eyebrow           { color: var(--green-darker); }
.page-hero h1                 { color: var(--ink); }
.page-hero p                  { color: var(--slate); }

/* El mismo halo de lectura que llevan los bloques de texto del inicio.
   .page-hero__inner ya es relative; se le agrega el aislamiento para que
   el halo quede por detrás de su propio texto y no del resto. */
.page-hero__inner { isolation: isolate; }
.page-hero__inner::before {
  content: "";
  position: absolute;
  inset: -34px -52px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 60% at 38% 50%,
              rgba(255, 255, 255, .86) 0%,
              rgba(255, 255, 255, .60) 44%,
              rgba(255, 255, 255, 0) 80%);
}

/* El acento cursivo del inicio, también en los títulos interiores:
   la última palabra del h1 no se puede marcar sin tocar el HTML, así
   que acá solo se iguala el peso y el aire. La cursiva serif sigue
   reservada al inicio, donde el marcado ya la tiene. */
.page-hero h1 { letter-spacing: -.02em; }

/* --- La banda de cierre de Nosotros ---
   Es oscura a propósito (cierra la página, como el pie). Se le da el
   mismo trato que al footer: conserva su peso pero deja pasar la trama.
   Ya trae position:relative, así que no se toca. */
.cta-band {
  background: linear-gradient(180deg, rgba(9, 63, 57, .93), rgba(9, 63, 57, .975));
}

/* --- Laboratorios ---
   .proveedores pinta --bg-soft por su cuenta, aparte de .section--soft. */
.proveedores { background: transparent; }

/* Los bordes difuminados del carrusel 3D se fundían contra --bg-mint y
   --bg-soft. Ahora el fondo es blanco continuo: se igualan a blanco, si
   no queda un rectángulo de otro color a los costados del anillo. */
.ring3d__stage::before,
.ring3d--onsoft .ring3d__stage::before {
  background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
}
.ring3d__stage::after,
.ring3d--onsoft .ring3d__stage::after {
  background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0));
}

/* --- Tarjetas propias de las interiores ---
   Mismo vidrio que las del inicio: superficie para poder leerse encima
   de la trama, pero dejándola ver. */
.ring3d__card,
.form-card,
.value-list .item,
.gate__panel,
.ecard {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* El formulario de contacto es el único bloque donde el vidrio estorba:
   son campos que hay que leer y llenar. Se deja casi opaco. */
.form-card {
  background: rgba(255, 255, 255, .94);
}

/* --- Encabezados de sección de las interiores ---
   .section-head ya recibe el halo arriba. .split__content también.
   Falta el de Contacto, que no usa ninguno de los dos. */
.contact-info {
  position: relative;
  isolation: isolate;
}

/* ---------- 11 · CORRECCIÓN · el halo se salía en el teléfono ----------
   Los halos de lectura de la sección 0b se dibujan con inset horizontal
   negativo (-56px, -52px) para desbordar el bloque de texto y difuminarse
   fuera de él. En pantalla ancha eso sobra; en un teléfono no: el
   contenedor ya ocupa el ancho completo con 24px de aire, así que el halo
   se salía 28px por cada lado.

   Y no lo tapaba nada. `body` tiene overflow-x:hidden, pero cuando `html`
   queda en overflow visible el navegador PROPAGA el overflow del body al
   viewport en vez de aplicarlo al body: el body deja de recortar. En un
   teléfono el resultado no es una barra de scroll sino algo peor — el
   navegador ensancha el viewport para que quepa lo que sobresale y aleja
   la página. Medido a 390px: el viewport se estiraba a 422.

   Acá el halo se recoge hasta el borde del contenedor. Sigue difuminado,
   porque el degradado se apaga antes del 80% del radio.

   (Venía de la capa del 14-09, no se introdujo al sumar las interiores:
   el inicio lo tenía igual. Afecta a las cinco páginas.) */
@media (max-width: 900px) {
  .hero__content::before,
  .section-head::before,
  .split__content::before,
  .strip-head::before,
  .page-hero__inner::before {
    inset: -28px -20px;
  }
}

/* ---------- 10 · PÁGINAS INTERIORES ----------
   Productos, Laboratorios, Nosotros y Contacto comparten una estructura
   mucho más simple que el inicio: una banda de título (.page-hero) y
   luego .section una tras otra hasta el pie.

   .section, .section--soft, .footer y las tarjetas ya quedaron resueltos
   arriba, porque el inicio también los usa. Acá va SOLO lo que es propio
   de las interiores. */

/* --- La banda de título ---
   Era el único bloque oscuro arriba de todo: el inicio abre claro y
   estas abrían en negro, que es lo que más se notaba al pasar de una a
   otra. Se pasa a claro y la onda del fondo cruza por detrás, igual que
   en el hero del inicio.

   OJO: .page-hero ya trae position:relative de styles.css. Acá solo se
   le da profundidad — imponerle position otra vez fue el error que en su
   momento rompió el encabezado pegajoso. */
.page-hero {
  background: transparent;
  color: var(--ink);
  z-index: 1;
}

/* El resplandor verde se queda: es el mismo que abre el hero del inicio.
   Sobre claro hay que bajarle el cuerpo, si no ensucia el título. */
.page-hero__blob {
  background: radial-gradient(circle, rgba(4, 180, 100, .16), transparent 66%);
}

/* La retícula geométrica estaba dibujada en blanco para leerse sobre el
   negro. Sobre claro desaparecía: se cambia a la tinta petróleo del
   fondo, muy tenue, para que acompañe sin competir con la trama. */
.page-hero::after {
  opacity: .5;
  background-image:
    linear-gradient(rgba(14, 110, 99, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 110, 99, .07) 1px, transparent 1px);
}

/* Los textos venían todos en blanco sobre el negro. Se devuelven a la
   paleta del inicio. */
.page-hero .breadcrumb        { color: var(--muted); }
.page-hero .breadcrumb a      { color: var(--slate); }
.page-hero .breadcrumb a:hover{ color: var(--green-darker); }
.page-hero .eyebrow           { color: var(--green-darker); }
.page-hero h1                 { color: var(--ink); }
.page-hero p                  { color: var(--slate); }

/* El mismo halo de lectura que llevan los bloques de texto del inicio.
   .page-hero__inner ya es relative; se le agrega el aislamiento para que
   el halo quede por detrás de su propio texto y no del resto. */
.page-hero__inner { isolation: isolate; }
.page-hero__inner::before {
  content: "";
  position: absolute;
  inset: -34px -52px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 60% at 38% 50%,
              rgba(255, 255, 255, .86) 0%,
              rgba(255, 255, 255, .60) 44%,
              rgba(255, 255, 255, 0) 80%);
}

/* El acento cursivo del inicio, también en los títulos interiores:
   la última palabra del h1 no se puede marcar sin tocar el HTML, así
   que acá solo se iguala el peso y el aire. La cursiva serif sigue
   reservada al inicio, donde el marcado ya la tiene. */
.page-hero h1 { letter-spacing: -.02em; }

/* --- La banda de cierre de Nosotros ---
   Es oscura a propósito (cierra la página, como el pie). Se le da el
   mismo trato que al footer: conserva su peso pero deja pasar la trama.
   Ya trae position:relative, así que no se toca. */
.cta-band {
  background: linear-gradient(180deg, rgba(9, 63, 57, .93), rgba(9, 63, 57, .975));
}

/* --- Laboratorios ---
   .proveedores pinta --bg-soft por su cuenta, aparte de .section--soft. */
.proveedores { background: transparent; }

/* Los bordes difuminados del carrusel 3D se fundían contra --bg-mint y
   --bg-soft. Ahora el fondo es blanco continuo: se igualan a blanco, si
   no queda un rectángulo de otro color a los costados del anillo. */
.ring3d__stage::before,
.ring3d--onsoft .ring3d__stage::before {
  background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
}
.ring3d__stage::after,
.ring3d--onsoft .ring3d__stage::after {
  background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0));
}

/* --- Tarjetas propias de las interiores ---
   Mismo vidrio que las del inicio: superficie para poder leerse encima
   de la trama, pero dejándola ver. */
.ring3d__card,
.form-card,
.value-list .item,
.gate__panel,
.ecard {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* El formulario de contacto es el único bloque donde el vidrio estorba:
   son campos que hay que leer y llenar. Se deja casi opaco. */
.form-card {
  background: rgba(255, 255, 255, .94);
}

/* --- Encabezados de sección de las interiores ---
   .section-head ya recibe el halo arriba. .split__content también.
   Falta el de Contacto, que no usa ninguno de los dos. */
.contact-info {
  position: relative;
  isolation: isolate;
}

/* ---------- 11 · CORRECCIÓN · el halo se salía en el teléfono ----------
   Los halos de lectura de la sección 0b se dibujan con inset horizontal
   negativo (-56px, -52px) para desbordar el bloque de texto y difuminarse
   fuera de él. En pantalla ancha eso sobra; en un teléfono no: el
   contenedor ya ocupa el ancho completo con 24px de aire, así que el halo
   se salía 28px por cada lado.

   Y no lo tapaba nada. `body` tiene overflow-x:hidden, pero cuando `html`
   queda en overflow visible el navegador PROPAGA el overflow del body al
   viewport en vez de aplicarlo al body: el body deja de recortar. En un
   teléfono el resultado no es una barra de scroll sino algo peor — el
   navegador ensancha el viewport para que quepa lo que sobresale y aleja
   la página. Medido a 390px: el viewport se estiraba a 422.

   Acá el halo se recoge hasta el borde del contenedor. Sigue difuminado,
   porque el degradado se apaga antes del 80% del radio.

   (Venía de la capa del 14-09, no se introdujo al sumar las interiores:
   el inicio lo tenía igual. Afecta a las cinco páginas.) */
@media (max-width: 900px) {
  .hero__content::before,
  .section-head::before,
  .split__content::before,
  .strip-head::before,
  .page-hero__inner::before {
    inset: -28px -20px;
  }
}