/* =============================================================
   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));
}