/* =============================================================
   NOVOVET · CAPA ACERO  ·  tema-acero/acero.css
   -------------------------------------------------------------
   Camino 3c del tablero: celeste metalico + blanco + negro, con el
   verde de marca sobreviviendo en un solo uso (estados y disponibilidad).

   Es HERMANA de tema-calidez/calidez.css, no su reemplazo. Se carga
   una o la otra, nunca las dos: son direcciones opuestas.

   Metalico no es un color: es un celeste desaturado y frio apoyado en
   un grafito. Un celeste saturado y plano no da acero, da hospital.
   Y el negro lleva sesgo azul: #000 puro sobre #fff vibra.

   Los puntos del fondo NO se tocan: siguen en petroleo al 18%,
   identicos a novovet.cl. Es la razon por la que el verde sobrevive.
   ============================================================= */

:root {
  /* Blanco para los fondos, donde estan los puntos */
  --bg:       #ffffff;
  --bg-lum:   #ffffff;
  --bg-soft:  #f4f6f8;
  --bg-mint:  #f4f6f8;
  --bg-warm:  #f4f6f8;

  /* Tinta en grafito, no en negro puro */
  --ink:       #12171c;
  --slate:     #5b6672;
  --muted:     #7d8b99;
  --gray-cap:  #5b6672;

  --line:        #e4e8ed;
  --line-strong: #dfe4e9;

  /* Celeste metalico. El claro es superficie; el oscuro es el unico
     que puede llevar texto (5,4:1 sobre blanco). */
  --steel:     #8FA9BF;
  --steel-soft:#eef2f6;
  --steel-ink: #3E5A73;

  /* El acento calido se retira por completo de esta direccion */
  --warm:      #8FA9BF;
  --warm-soft: #eef2f6;
  --warm-ink:  #3E5A73;

  --focus: #3E5A73;

  /* Sombras neutras y cortas: el acero no difumina */
  --shadow-sm: 0 1px 3px  rgba(18, 23, 28, .07);
  --shadow-md: 0 6px 18px rgba(18, 23, 28, .09);
  --shadow-lg: 0 16px 40px rgba(18, 23, 28, .12);
  --glow-cta:       0 4px 14px rgba(18, 23, 28, .18);
  --glow-cta-hover: 0 8px 22px rgba(18, 23, 28, .26);

  /* Halos: casi apagados. El brillo es lo primero que delata lo no-tecnico. */
  --glow-top:    radial-gradient(58% 50% at 50% -6%, rgba(143,169,191,.16), transparent 70%);
  --glow-petrol: radial-gradient(46% 42% at 6% 108%, rgba(62,90,115,.10), transparent 64%);
  --glow-warm:   radial-gradient(48% 44% at 108% 106%, rgba(143,169,191,.14), transparent 64%);

  /* Bloque nv-* (vitrinas) */
  --nv-bg:  #ffffff;
  --nv-bg2: #f4f6f8;
  --nv-tx:  #5b6672;
  --nv-tx2: #7d8b99;
  --nv-ln:  #e4e8ed;
  --nv-ink: #12171c;
  --nv-ac:    #12171c;
  --nv-ac-tx: #3E5A73;
  --nv-rad: 6px;   /* 38px era una decision de otra epoca */

  /* Los tokens de marca de styles.css. Sin redeclararlos el verde se
     filtraba a enlaces, nombres de producto y la banda de campaña, que
     no son estados: en esta direccion el verde queda reservado a
     "disponible / activo / cumplido" y se aplica solo en las reglas
     explicitas de la seccion EL VERDE SUPERVIVIENTE, mas abajo. */
  --green:        #3E5A73;
  --green-dark:   #2f4a61;
  --green-darker: #12171c;
  --green-light:  #8FA9BF;
  --petrol:       #5b6672;
  --mint:         #eef2f6;
  --grad:         linear-gradient(135deg, #12171c, #2f4a61);
  --grad-soft:    linear-gradient(135deg, #eef2f6, #f4f6f8);
  --aura-dark:    linear-gradient(135deg, #12171c, #2f4a61);
  --dark:         #12171c;
}

html, body { background: #ffffff; }

/* Radios: lo tecnologico se lee en la geometria antes que en el color */
:root { --radius: 6px; }

/* ---------- HALOS DE LECTURA ---------- */
.hero__content::before,
.split__content::before,
.section-head::before,
.strip-head::before,
.page-hero__inner::before {
  background: radial-gradient(60% 58% at 40% 50%,
              rgba(255,255,255,.94) 0%,
              rgba(255,255,255,.68) 44%,
              rgba(255,255,255,0)  80%);
}

.feat-card, .value-card, .cat-card, .perk,
.hero__badge, .mainnav__quote, .post-card,
.gate__box, .callout .ico {
  background: #ffffff;
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.hero__img img { filter: drop-shadow(0 12px 20px rgba(18,23,28,.18)); }

/* Filete alternado: acero / verde superviviente */
.cat-card, .value-card { border-top: 2px solid var(--steel); }
.cat-card:nth-child(even), .value-card:nth-child(even) { border-top-color: #0E6E63; }

/* ---------- TIPOGRAFIA ----------
   Raleway se queda, pero el acento serif del inicio no pertenece a esta
   direccion: un titular en cursiva serif no se lee tecnologico. */
.eyebrow {
  color: var(--steel-ink);
  letter-spacing: .18em;
  font-weight: 700;
}
.hero__stat .num {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* Raleway, la del manual. La capa acero no la redeclaraba y caia al
   stack de styles.css, que es Inter. */
body, .btn, .nav__menu > li > a, .eyebrow,
.hero__content h1, .hero__content .lead,
.hero__stat .lbl, .trust__label {
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hero__content h1 { font-weight: 700; letter-spacing: -.03em; }

/* vesper-novovet.css lo declara como .hero__content h1 .text-grad y con
   animacion propia: hay que igualar esa especificidad para ganarle. */
.hero__content h1 .text-grad,
.text-grad, .hero__content h1 em, .hero__content h1 i {
  font-family: "Raleway", sans-serif;
  font-style: normal;
  font-weight: 700;
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: var(--steel-ink);
  color: var(--steel-ink);
  filter: none;
}

/* ---------- BANDA SUPERIOR ---------- */
.topbar {
  background: #ffffff url("banda-creacion-acero.png") no-repeat center center;
  background-size: contain;
  color: var(--slate);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.topbar .container {
  height: auto;
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 20px 14px;
  max-width: none;
}
.topbar__msg { max-width: 40ch; text-shadow: 0 1px 10px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.85); }
.topbar__msg strong { color: var(--ink); }
.topbar__links a       { color: var(--steel-ink); opacity: 1; font-weight: 600; }
.topbar__links a:hover { color: var(--ink); }
@media (max-width: 1080px) { .topbar .container { min-height: 180px; } .topbar__msg { max-width: 30ch; } }
@media (max-width: 720px)  { .topbar { background-image: none; } .topbar .container { min-height: 0; padding: 11px 14px; } }

/* ---------- NAVEGACION ---------- */
.header { background: rgba(255,255,255,.94); }
.mainnav {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.nav__menu > li > a {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--slate);
  font-weight: 500;
  box-shadow: none;
}
.nav__menu > li > a::before { display: none; }
.nav__menu > li > a:hover  { background: var(--steel-soft); border-color: #dde5ec; color: var(--ink); box-shadow: none; }
.nav__menu > li > a.active { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
.nav__menu > li > a:focus-visible { outline: 2px solid var(--steel-ink); outline-offset: 2px; }

.nav__search { border-color: var(--line-strong); background: #fff; border-radius: var(--radius); }
.nav__search input { background: transparent; }
.nav__search input::placeholder { color: var(--muted); }
.nav__search button { background: var(--ink); }
.nav__search button:hover { background: #000; filter: none; }
.nav__cta { display: none; }

/* ---------- BOTONES · negro donde estan los botones ---------- */
.btn {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: -.005em;
  overflow: visible;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, color .18s ease, transform .1s ease;
}
.btn::after { display: none; }

.btn--primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #ffffff;
  box-shadow: var(--glow-cta);
}
.btn--primary:hover { background: #000000; border-color: #000000; box-shadow: var(--glow-cta-hover); }

.btn--ghost {
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn--ghost:hover { background: var(--steel-soft); border-color: var(--steel); color: var(--ink); }

.btn--light, .btn--white {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn--light:hover, .btn--white:hover { background: var(--steel-soft); border-color: var(--steel-soft); }

.btn--accent { background: var(--steel-ink); border: 1px solid var(--steel-ink); color: #fff; box-shadow: none; }
.btn--accent:hover { background: #2f4a61; border-color: #2f4a61; }

.btn--link, .btn--link.btn--ghost, .btn--link.btn--lg {
  padding: 0 0 3px;
  min-height: 0; height: auto;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--steel);
  border-radius: 0;
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn--link:hover { background: transparent; border-bottom-color: var(--ink); color: var(--ink); }
.btn--link svg { transition: transform .2s ease; }
.btn--link:hover svg { transform: translateX(3px); }

/* Estados */
.btn:focus-visible { outline: 2px solid var(--steel-ink); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.btn--primary:active { background: #000; }
.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled, .btn.is-loading {
  background: #eef1f4; border-color: #eef1f4; color: #9aa6b2;
  box-shadow: none; transform: none; pointer-events: none;
}
.btn.is-loading::before {
  content: ""; width: 13px; height: 13px; margin-right: 9px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: nv-spin .7s linear infinite;
}
@keyframes nv-spin { to { transform: rotate(360deg); } }
.btn--pulse { animation: none; }

/* ---------- EL VERDE SUPERVIVIENTE ----------
   Un solo trabajo: decir que algo esta disponible, activo o cumplido.
   Nunca decorativo, nunca en areas grandes. */
.badge--stock, .chip--activo, .is-ok,
.perk__ico svg, .trust__ico svg {
  color: #0E6E63;
}
.hero__badge .dot,
.vd .dot,
.ring3d__sello,
.prov-chip {
  background: #04B464;
  color: #062b1d;
}
.vit__sello { background: #0E6E63; color: #fff; }

/* ---------- VITRINAS ---------- */
.vit__marca, .vit__panel, .vit__nota, .vit__cierre {
  background: #fff; border-color: var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.vit__zoom { box-shadow: var(--shadow-md); border-radius: var(--radius); }
.vit__lupa { background: rgba(255,255,255,.94); color: var(--steel-ink); box-shadow: var(--shadow-sm); }
.vit__volver, .vit__ey, .vit__paso { color: var(--steel-ink); }
.vit__mini.activa, .vit__mini[aria-current="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(18,23,28,.14);
}
.ring3d__card--vitrina {
  border-color: var(--ink) !important;
  box-shadow: 0 6px 18px rgba(18,23,28,.16) !important;
}
.vd { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.vd__go { color: var(--steel-ink); }

/* ---------- BLOG ---------- */
.page-hero, .page-hero.art-hero { background: transparent; color: var(--ink); }
.page-hero__blob { background: radial-gradient(circle, rgba(143,169,191,.20), transparent 66%); }

/* El halo del hero del inicio (460x460, el area mas grande de la
   pagina): se quedo sin portar al pasar de la capa calida. */
.hero__blob { background: radial-gradient(circle, rgba(143,169,191,.20), transparent 68%); }
.page-hero .breadcrumb { color: var(--muted); }
.page-hero .breadcrumb a { color: var(--slate); }
.page-hero .breadcrumb a:hover { color: var(--steel-ink); }
.art-hero h1 { color: var(--ink); }
.art-hero .dek { color: var(--slate); }
.art-hero .post-meta { color: var(--muted); }
.art-hero .post-meta .dot { background: var(--line-strong); }
.art-progress { background: var(--ink); }
.gate__fade { background: linear-gradient(180deg, rgba(255,255,255,0), #fff 82%); }
.cat-tag--cuidado, .post-card__media .cat-tag--cuidado { background: var(--steel-soft); color: var(--steel-ink); }
.cat-tag--pro, .post-card__media .cat-tag--pro { background: var(--ink); color: #fff; }
.cat-tag--tecnico { background: var(--steel-soft); color: var(--steel-ink); }
.cat-tag--novedades { background: #e8f5ee; color: #0a5c40; }
.post-card--locked .post-card__media::after {
  background: linear-gradient(180deg, rgba(18,23,28,.18), rgba(18,23,28,.76));
}
.post-card--locked .post-card__media .lock { background: rgba(255,255,255,.94); color: var(--ink); }
.blog-sub::before { background: radial-gradient(circle, rgba(143,169,191,.26), transparent 66%); }
.callout { border-color: var(--line); background: var(--bg-soft); }
.callout--warm { background: var(--steel-soft); border-color: #dde5ec; }
.callout--warm .ico svg { color: var(--steel-ink); }

/* ---------- FOCO GENERAL ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--steel-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn--link svg { transition: none; }
  .btn.is-loading::before { animation: none; }
}

/* ---------- CABECERA · ESCENA A LA DERECHA + BUSCADOR EN LAS PESTAÑAS ----------
   La barra de anuncio vuelve a ser SOLO TEXTO, como estaba antes.
   La escena se muda a la fila del logo: Novovet a la izquierda, la
   ilustracion pegada al extremo opuesto.

   El degradado es un mask-image sobre un pseudo-elemento, no pixeles
   horneados en el PNG: se disuelve contra el fondo real cualquiera sea,
   asi que no hay borde visible ni parche de color. El PNG va limpio. */
.topbar { background: #f4f6f8; background-image: none; }
.topbar .container {
  height: auto;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 22px;
  max-width: 1200px;
}
.topbar__msg { max-width: none; text-shadow: none; }

/* La fila del logo aloja la escena */
.nav {
  position: relative;
  min-height: 154px;
  align-items: center;
  gap: 20px;
}
.nav::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  /* al medio de la fila, corrida a la derecha para despegarse del logo */
  transform: translateX(-38%);
  /* El ancho sigue a la imagen, no al contenedor: la escena mide
     2,565 veces su alto, asi que el fundido cubre exactamente la
     imagen y no deja costura donde empieza el PNG. */
  background: url("escena-header.png") no-repeat center center;
  background-size: contain;     /* entera y sin estirar */
  aspect-ratio: 2.565;          /* la caja calza el borde real del PNG */
  /* El fundido anterior comia hasta el 50% del ancho y el 20% del alto:
     con eso el gato y el medico quedaban dentro del degradado y la
     escena se leia recortada. Ahora es una orla ancha pero con paradas
     intermedias: llega al 90% de opacidad recien al 15-16% del recorrido
     y a opacidad plena al 26%, asi que el fundido es largo y suave pero
     todavia cae sobre el margen pintado (cielo, nube, pared) sin tocar
     al gato ni al medico. */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.45) 8%, rgba(0,0,0,.88) 17%, #000 27%,
      #000 73%, rgba(0,0,0,.88) 83%, rgba(0,0,0,.45) 92%, transparent 100%),
    linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.45) 7%, rgba(0,0,0,.88) 15%, #000 24%,
      #000 76%, rgba(0,0,0,.88) 85%, rgba(0,0,0,.45) 93%, transparent 100%);
  mask-image:
    linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.45) 8%, rgba(0,0,0,.88) 17%, #000 27%,
      #000 73%, rgba(0,0,0,.88) 83%, rgba(0,0,0,.45) 92%, transparent 100%),
    linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.45) 7%, rgba(0,0,0,.88) 15%, #000 24%,
      #000 76%, rgba(0,0,0,.88) 85%, rgba(0,0,0,.45) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  pointer-events: none;
  z-index: 0;
}
.nav__logo, .nav__account { position: relative; z-index: 1; }
.nav__logo img, .header.is-scrolled .nav__logo img { height: 92px; }

/* Buscador: al lado de las pestañas */
.mainnav > .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: nowrap;
}
.nav__menu { flex: 0 0 auto; }
.mainnav .nav__search {
  order: 0;
  flex: 1 1 170px;
  min-width: 0;
  max-width: 470px;
  margin: 8px 0 8px auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
}
.mainnav .nav__search input {
  padding: 8px 16px;
  font-size: .88rem;
  color: var(--ink);
}
.mainnav .nav__search input::placeholder { color: var(--muted); }
.mainnav .nav__search button {
  background: var(--ink);
  padding: 0 17px;
}
.mainnav .nav__search button:hover { background: #000; filter: none; }
.mainnav .nav__search button svg { width: 16px; height: 16px; }

@media (max-width: 1080px) {
  .nav { min-height: 132px; }

}
@media (max-width: 860px) {
  /* la escena no cabe junto al logo: se retira */
  .nav { min-height: 0; }
  .nav::after { display: none; }
  .nav__logo img, .header.is-scrolled .nav__logo img { height: 64px; }
}
@media (max-width: 760px) {
  .mainnav > .container { display: block; padding: 0; }
  .mainnav .nav__search { max-width: none; margin: 10px 16px; }
}

/* ---------- FLOTANTES ----------
   .wa-float y .aa-float quedan fijos toda la sesion y eran los
   elementos mas saturados de la pantalla, en el verde de la capa
   calida. En acero el verde esta reservado a "disponible / activo /
   cumplido", asi que estos pasan a grafito. */
.wa-float, .aa-float {
  background: var(--ink);
  background-image: none;
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.wa-float:hover, .aa-float:hover {
  background: #000;
  background-image: none;
  box-shadow: var(--shadow-lg);
}
.wa-float:focus-visible, .aa-float:focus-visible {
  outline: 2px solid var(--steel-ink);
  outline-offset: 3px;
}

/* ---------- BANDAS OSCURAS Y HALOS ----------
   Todo lo que sigue tiene su verde escrito duro en styles.css o en
   vesper-novovet.css, no tomado de un token: por eso la redeclaracion
   de :root no lo alcanzaba y hubo que portarlo selector por selector.
   Se agrupa aqui completo para no volver a dejar piezas afuera.

   Superficies oscuras: petroleo -> grafito. */
.cta-band {
  background:
    radial-gradient(62% 60% at 50% -4%, rgba(143,169,191,.20), transparent 70%),
    linear-gradient(180deg, #161c22, #12171c);
}
.footer {
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(143,169,191,.14), transparent 70%),
    linear-gradient(180deg, #161c22, #12171c);
  color: #b3bfcb;
}
.newsletter { background: #161c22; }
.newsletter__form { box-shadow: 0 8px 22px rgba(18,23,28,.24); }
.blog-sub { background: #161c22; }

/* Halos que respiran detras de los titulares. Eran verde al 34-40%. */
.cta-band__blob   { background: radial-gradient(circle, rgba(143,169,191,.30), transparent 65%); }
.page-hero__blob  { background: radial-gradient(circle, rgba(143,169,191,.22), transparent 66%); }
.blog-sub::before { background: radial-gradient(circle, rgba(143,169,191,.26), transparent 66%); }

/* Halo pulsante de los iconos y velo de las tarjetas de categoria */
.value-card .ico::before,
.value-list .item .ico::before {
  background: radial-gradient(circle, rgba(143,169,191,.38), transparent 70%);
}
.cat-card::after {
  background: linear-gradient(180deg, rgba(18,23,28,0) 18%, rgba(18,23,28,.55) 52%, rgba(18,23,28,.92) 100%);
}
.value-card::before, .product-card::before {
  background: linear-gradient(100deg, transparent, rgba(143,169,191,.16), rgba(255,255,255,.34), transparent);
}

/* Retículas de fondo de las secciones oscuras */
.page-hero::after, .hero::before, .hero::after {
  background-image:
    linear-gradient(rgba(91,102,114,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,102,114,.06) 1px, transparent 1px);
}
.hero::after {
  background-image: radial-gradient(rgba(91,102,114,.13) 1px, transparent 1.6px);
}

/* Puntos del slider y miniaturas de promo */
.slider__dot       { background: rgba(91,102,114,.24); }
.slider__dot.active { background: var(--ink); }
.promo-thumb.active { border-color: var(--ink); box-shadow: 0 4px 16px rgba(18,23,28,.22); }

/* Eyebrow de las bandas oscuras: el menta original no pertenece aqui */
.page-hero .eyebrow, .cta-band .eyebrow { color: #a8bccd; }

/* La mascota neon que asoma al hover de cada boton brillaba en verde */
.btn::before, .mainnav__quote::before, .nav__login::before {
  filter: drop-shadow(0 0 5px rgba(143,169,191,.95)) drop-shadow(0 0 13px rgba(143,169,191,.7));
}


/* =============================================================
   ACTUALIZACION 22-09-2026 · ENCABEZADO
   -------------------------------------------------------------
   (1) LA ESCENA OCUPA EL BLANCO QUE TENÍA AL LADO.
       Antes flotaba al medio de la fila (left:50% corrido -38%) y
       dejaba muerta toda la franja derecha. Ahora se ancla a ese
       borde con un sangrado de 3% y la fila pasa de 154 a 232px:
       como el ancho sigue al alto por el aspect-ratio, la escena
       gana las dos dimensiones de una vez (395 -> 595px de ancho)
       y llega hasta el filo derecho. El degradado del mask sigue
       haciendo todo el trabajo de borde: no hay recorte duro.

   (2) AL BAJAR SE COMPRIME Y SE DISUELVE, COMO LA BARRA DE ARRIBA.
       El encabezado sigue siendo sticky, pero se le corre el tope
       a -232px: así sube con la página hasta que las pestañas
       tocan el techo, y ahí se clava. Queda la tira delgada, que
       es lo único que viaja.

       No se colapsa con alturas, a propósito: encoger una fila que
       está en el flujo empuja hacia arriba todo lo que viene abajo
       y el cuerpo de la página da un salto de 232px apenas uno
       mueve la rueda. Corriendo el tope no se mueve nada.

       Encima, la escena y el logo bajan su opacidad a la par del
       recorrido: --nv-baja va de 0 a 1 en esos 232px y lo escribe
       tema-acero/acero-scroll.js. Por eso se desvanecen de forma
       continua en vez de apagarse de golpe al cruzar un umbral.

   Sólo desde 861px hacia arriba: más abajo la escena ya estaba
   retirada y esa fila aloja el botón de menú del teléfono.
   ============================================================= */

.header { --nv-baja: 0; }

@media (min-width: 861px) {

  /* El encabezado sube 232px antes de clavarse: la fila del logo
     se va, las pestanas se quedan. */
  .header { top: -232px; }

  .nav,
  .header.is-scrolled .nav {
    height: auto;
    min-height: 232px;
  }

  /* La escena, anclada al borde derecho. */
  .nav::after {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    opacity: calc(1 - var(--nv-baja));
  }

  /* El logo se disuelve y encoge un poco mientras se va. */
  .nav__logo img,
  .header.is-scrolled .nav__logo img {
    height: 104px;
    opacity: calc(1 - var(--nv-baja));
    transform: scale(calc(1 - 0.18 * var(--nv-baja)));
    transform-origin: left center;
  }

  /* El bloque de cuenta vive en la misma fila y se va con ella. */
  .nav__account { opacity: calc(1 - var(--nv-baja)); }
}

/* El sangrado de la escena sale del contenedor a proposito, pero solo
   se concede cuando hay margen libre para absorberlo: el contenedor
   mide 1200px y ese 3% son 36px, asi que hace falta pantalla de 1272px
   hacia arriba. Por debajo, el sangrado empujaba la pagina de lado y
   aparecia una barra horizontal de 27px entre los 861 y los 1100px. */
@media (min-width: 1290px) {
  .nav::after { right: -3%; }
}

/* =============================================================
   NUBES EN LA FRANJA DEL LOGO
   -------------------------------------------------------------
   La fila del logo era blanco liso y la escena quedaba flotando
   sobre la nada. Ahora esa franja tiene cielo: un degradado celeste
   que baja a blanco y, encima, dos capas de nubes dibujadas con
   radial-gradients — nada de imágenes, cero peso.

   Dos reglas que se cumplen a rajatabla:

   1. NO TAPAN NADA. La capa vive en .header::before, detrás de
      todo el contenido de la fila (.nav lleva z-index 1). El logo
      y la escena quedan siempre encima.

   2. NO LE ROBAN CONTRASTE AL LOGO. Las nubes son blancas sobre
      celeste clarísimo — la diferencia entre lo más claro y lo más
      oscuro del cielo no llega al 8% de luminancia, así que el
      verde del logo y el gris del subtítulo conservan su contraste
      contra el blanco. Además el logo lleva su propio halo blanco,
      por si una nube le pasa justo por detrás.

   La franja mide lo que mide la fila del logo: 232px en escritorio,
   92px en el teléfono. Debajo empieza la barra del menú, que tiene
   su propio fondo y corta el cielo.

   La deriva es de 120 y 190 segundos. A esa velocidad una nube
   cruza la pantalla en tres minutos: el ojo no la ve moverse, pero
   la franja nunca está dos veces igual. Con prefers-reduced-motion
   se detiene.
   ============================================================= */

.header { --nv-franja: 92px; }

.header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--nv-franja);
  z-index: 0;
  pointer-events: none;

  /* el cielo */
  background-color: #D7E6F2;
  background-image:
    /* cumulos de adelante: bordes cerrados, para que se lean como nubes
       y no como un velo. El corte a 50-54% es lo que les da borde. */
    radial-gradient(30% 62% at 13% 88%, rgba(255,255,255,1), rgba(255,255,255,0) 52%),
    radial-gradient(22% 46% at 24% 97%, rgba(255,255,255,1), rgba(255,255,255,0) 54%),
    radial-gradient(26% 54% at 34% 84%, rgba(255,255,255,.98), rgba(255,255,255,0) 52%),
    radial-gradient(24% 50% at 63% 92%, rgba(255,255,255,1), rgba(255,255,255,0) 52%),
    radial-gradient(31% 60% at 84% 86%, rgba(255,255,255,.99), rgba(255,255,255,0) 52%),
    /* cumulos del fondo: mas altos, mas abiertos y con menos cuerpo */
    radial-gradient(34% 58% at 9% 34%, rgba(255,255,255,.88), rgba(255,255,255,0) 60%),
    radial-gradient(30% 50% at 40% 26%, rgba(255,255,255,.80), rgba(255,255,255,0) 62%),
    radial-gradient(37% 60% at 66% 32%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(32% 52% at 95% 24%, rgba(255,255,255,.78), rgba(255,255,255,0) 62%),
    /* el aire: celeste arriba, blanco al ras del menu */
    linear-gradient(180deg, #BFD8EC 0%, #D4E4F1 38%, #EAF3F9 74%, #FBFDFE 93%, #FFFFFF 100%);
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x,
                     repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
  background-size:
    62% 100%, 62% 100%, 62% 100%, 62% 100%, 62% 100%,
    88% 100%, 88% 100%, 88% 100%, 88% 100%, 100% 100%;
  animation: nv-deriva-cerca 120s linear infinite,
             nv-deriva-lejos 190s linear infinite;
}

/* Las dos capas derivan a distinto paso: la de adelante mas rapido.
   Se anima background-position, que el compositor resuelve sin
   recalcular nada del resto de la pagina. */
@keyframes nv-deriva-cerca {
  from { background-position: 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%,
                              0% 50%, 0% 50%, 0% 50%, 0% 50%, 0 0; }
  to   { background-position: 62% 50%, 62% 50%, 62% 50%, 62% 50%, 62% 50%,
                              0% 50%, 0% 50%, 0% 50%, 0% 50%, 0 0; }
}
@keyframes nv-deriva-lejos {
  from { background-position: 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%,
                              0% 50%, 0% 50%, 0% 50%, 0% 50%, 0 0; }
  to   { background-position: 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%,
                              88% 50%, 88% 50%, 88% 50%, 88% 50%, 0 0; }
}

/* El contenido de la fila, siempre por encima del cielo. */
.header > .container.nav { position: relative; z-index: 1; }

/* Un halo blanco detras del logo: si una nube le pasa por detras,
   el logo sigue recortandose sobre blanco y no sobre celeste. */
.nav__logo { position: relative; }
.nav__logo::before {
  content: "";
  position: absolute;
  inset: -18px -34px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.96), rgba(255,255,255,.80) 56%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* La barra del menu tapa el cielo con su propio fondo: el corte
   entre franja y menu queda limpio. */
.mainnav { background: rgba(255,255,255,.94); }

@media (min-width: 861px) {
  .header { --nv-franja: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  .header::before { animation: none; }
}

/* Con el sistema en "menos movimiento" el script no escribe nada:
   --nv-baja se queda en 0 y no hay fundido. */
@media (prefers-reduced-motion: reduce) {
  .header { --nv-baja: 0 !important; }
}