/* ═══════════════════════════════════════════════════════════════════
   187 · FertyVet — Fertilidad y Veterinaria · Villarrica
   Demo comercial sin encargo. Construida el 02-09-2026.

   DIRECCIÓN — «MENOS 196 GRADOS»
   Un banco de semen no vende potrero bonito: vende una cadena de frío
   que no se corta. La página es acero y vapor, y el único color cálido
   es el pelaje del animal, una sola vez.

   PALETA — cian sobre acero. DESLINDES escritos contra el registro:
   · 64 «Hielo patagónico» (nieve #F6F9FA + hielo #0A2A3D + glaciar
     #0B6E93) es AGUA QUIETA: azul de glaciar sobre blanco de nieve.
     Acá el fondo es ACERO (#161C22, gris con algo de azul, no azul) y
     el cian es GAS, no agua.
   · 111 «Resultado de laboratorio» (papel #FCFDFE + cian #0E6A82) es
     BLANCO CLÍNICO con cian de instrumento sobre papel. Acá es al
     revés: oscuro, y el cian es el vapor que sale del termo al abrirlo.
   · 136 es CINTA cian sobre beige piel. Nada que ver.
   · Lo que ninguno de los tres tiene: el ÁMBAR DE PELAJE (#C8703C),
     un único toque cálido que aparece sólo en el número de teléfono y
     en la línea del paso final. Es el animal dentro del laboratorio.

   TRÍO — verificado contra identidades.md el 02-09-2026:
   · Display LEDGER (0 usos en el registro). Slab de una sola cara,
     dientes marcados; «ledger» es el libro de registro, que es
     literalmente lo que lleva un banco de semen.
   · Cuerpo BRICOLAGE GROTESQUE (1 uso). Variable, con carácter, buena
     en textos medianos.
   · Mono XANH MONO (3 usos, el menos usado que calza). Mono con
     serifas: conversa con el slab y no se ve a terminal.

   ESTRUCTURA J · FICHA TÉCNICA — pares rótulo-valor con reglas finas.
   Concretada: la página entera es el expediente de un reproductor.
   CONTACTO T3 (enlace-flecha) + el número en tamaño de titular.
   AMBIENTE: polvo en el rayo de luz (movimiento-web).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --acero:   #161C22;
  --panel:   #1F272E;
  --panel-2: #28323A;
  --vapor:   #EAF0F2;   /* texto principal sobre acero: 14,8:1 */
  --medio:   #9FADB6;   /* secundario sobre acero: 7,2:1 — calibrado
                           contra --panel (6,0:1), que es el peor fondo */
  --nitro:   #7FD4E0;   /* objetos y cifras sobre oscuro: 9,9:1 */
  --nitro-2: #B7E7EF;   /* texto chico sobre oscuro */
  --ambar:   #E39A63;   /* pelaje — único cálido. 8,1:1 sobre acero */
  --linea:   #33404A;

  --sale:    cubic-bezier(.16, 1, .3, 1);
  --sale-2:  cubic-bezier(.2, 0, 0, 1);
  --suave:   ease-in-out;

  --ancho:   min(92vw, 1180px);
  --p--1: clamp(.78rem, .74rem + .18vw, .88rem);
  --p-0:  clamp(1rem, .95rem + .25vw, 1.12rem);
  --p-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --p-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --p-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.8rem);
  --p-4:  clamp(2.8rem, 1.7rem + 5vw, 6.4rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--acero);
  color: var(--vapor);
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: var(--p-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }

.ancho { width: var(--ancho); margin-inline: auto; }

.rotulo {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nitro);
  margin: 0 0 1.4rem;
}

.h2 {
  font-family: Ledger, Georgia, serif;
  font-weight: 400;
  font-size: var(--p-3);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 1.6rem;
}
.h2--chico { font-size: var(--p-2); }

.mono { font-family: "Xanh Mono", ui-monospace, monospace; }
.mini { font-size: var(--p--1); color: var(--medio); max-width: 62ch; }

/* Datos de ejemplo y huecos — honestidad visible */
.ej {
  color: var(--medio);
  font-style: italic;
  border-bottom: 1px dashed var(--linea);
}
.ej::after {
  content: " (ej.)";
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: .78em;
  font-style: normal;
  opacity: .75;
}
.falta { color: var(--medio); font-style: italic; }

/* ── BANDA DE PROPUESTA ─────────────────────────────────────────── */
.propuesta { background: var(--nitro); color: var(--acero); }
.propuesta__in { padding: .9rem 0; }
.propuesta__q {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .04em;
  margin: 0 0 .2rem; font-weight: 400;
}
.propuesta__d { margin: 0; font-size: var(--p--1); line-height: 1.45; }
.propuesta .dato { font-family: "Xanh Mono", ui-monospace, monospace; font-weight: 700; }

/* ── CABECERA ───────────────────────────────────────────────────── */
/* Estado por defecto (sin JS): SÓLIDO y legible. El JS agrega la
   transparencia sobre la portada. Regla aprendida en la 47. */
.cab {
  position: sticky; top: 0; z-index: 50;
  background: var(--acero);
  border-bottom: 1px solid var(--linea);
  transition: transform .3s var(--sale-2), background-color .3s ease, border-color .3s ease;
}
.cab__in { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .55rem 0; }
.cab__marca {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; min-height: 44px;
}
.cab__txt {
  font-family: Ledger, Georgia, serif;
  font-size: var(--p-1); line-height: 1;
  display: flex; flex-direction: column; gap: .12rem;
}
.cab__sub {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: .58em; letter-spacing: .1em; color: var(--medio); text-transform: uppercase;
}
.cab__nav { display: flex; align-items: center; gap: 1.5rem; }
.cab__nav a {
  font-size: var(--p--1); text-decoration: none; color: var(--medio);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .2s ease;
}
.cab__nav a:hover, .cab__nav a:focus-visible { color: var(--vapor); }
.cab__tel { color: var(--nitro) !important; font-family: "Xanh Mono", ui-monospace, monospace; letter-spacing: .04em; }

/* Cabecera 153ª — EL TERMO CRIOGÉNICO */
.termo { position: relative; width: 22px; height: 30px; flex: 0 0 auto; }
.termo__cuerpo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  border: 1.5px solid var(--nitro); border-radius: 3px 3px 5px 5px;
}
.termo__cuello {
  position: absolute; left: 6px; right: 6px; top: 3px; height: 7px;
  border: 1.5px solid var(--nitro); border-bottom: none; border-radius: 2px 2px 0 0;
}
.termo__vaho {
  position: absolute; left: 50%; top: -3px; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%;
  background: var(--nitro-2); opacity: .5;
  animation: vaho 3.6s var(--suave) infinite;
}
@keyframes vaho {
  0%   { transform: translate3d(0, 2px, 0) scale(.5); opacity: 0; }
  35%  { opacity: .55; }
  100% { transform: translate3d(-3px, -9px, 0) scale(1.5); opacity: 0; }
}

.js .cab--top { background: transparent; border-bottom-color: transparent; }
.js .cab--oculta { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .cab { transition-duration: 1ms; }
  .termo__vaho { animation: none; opacity: .4; }
}

/* ── PORTADA ────────────────────────────────────────────────────── */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 88svh; display: flex; align-items: center;
  padding: 5rem 0 4rem;
}
.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.72) 60%, #000 78%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.72) 60%, #000 78%, #000 100%);
}
/* ── VIDEO DE FONDO DE LA PORTADA ───────────────────────────────────
   Va encima de la foto, dentro del mismo .portada__foto, y por eso
   hereda el velo (::after) que protege el contraste del titular. La
   MASCARA se repite igual que en la foto: sin ella el video pinta un
   rectangulo con borde recto justo donde la foto ya se disolvia.
   Arranca en opacidad 0 y sube cuando el JS confirma que el clip
   esta reproduciendo; si el navegador bloquea el autoplay, queda la
   foto y no se nota nada. */
.portada__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 45%;
  opacity: 0;
  transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.72) 60%, #000 78%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.72) 60%, #000 78%, #000 100%);
}
.portada__video.video--ver { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .portada__video { display: none; }
}

/* Velo ENTERO en rgba y terminando en alfa 0: un var() dentro del
   gradiente no tiene alfa y pinta la foto de punta a punta. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(22,28,34,1) 0%, rgba(22,28,34,1) 26%, rgba(22,28,34,.8) 44%,
    rgba(22,28,34,.38) 62%, rgba(22,28,34,.1) 82%, rgba(22,28,34,0) 96%);
}
.portada__in { position: relative; z-index: 1; }

.portada__h1 {
  font-family: Ledger, Georgia, serif;
  font-weight: 400;
  font-size: var(--p-4);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0 0 1.4rem;
}
.portada__frio { color: var(--nitro); }
.portada__bajada { max-width: 46ch; color: var(--medio); font-size: var(--p-1); line-height: 1.5; margin: 0 0 2.6rem; }
.portada__pie { margin: 2.4rem 0 0; }

/* Cifras como elemento gráfico — sueltas sobre el fondo, no en tarjetas */
.specs { display: flex; flex-wrap: wrap; gap: 2.6rem 3.4rem; margin: 0; }
.specs__par { margin: 0; }
.specs dt {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--medio); margin-bottom: .3rem;
}
.specs dd {
  margin: 0;
  font-family: Ledger, Georgia, serif;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1; color: var(--nitro);
}

/* ── AMBIENTE: polvo en el rayo de luz ──────────────────────────── */
/* Motor de movimiento-web: 12 hijos, posición y ritmo por --i con
   nth-child (la CSP bloquea style=""). Determinista: las duraciones
   15/19/23 s no son múltiplos entre sí. Sólo transform y opacity. */
.amb { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.amb__p {
  position: absolute; top: 100%;
  left: calc(var(--i) * 8.3%);
  width: var(--tam, 3px); height: var(--tam, 3px);
  border-radius: 50%;
  background: rgba(255, 238, 205, .62);
  opacity: 0;
  animation: amb-polvo var(--dur, 17s) linear infinite;
  animation-delay: calc(var(--i) * -1.7s);
  will-change: transform, opacity;
}
.amb--polvo .amb__p:nth-child(3n+1) { --tam: 3px; --dur: 15s; }
.amb--polvo .amb__p:nth-child(3n+2) { --tam: 2px; --dur: 19s; }
.amb--polvo .amb__p:nth-child(3n+3) { --tam: 4px; --dur: 23s; }
.amb__p:nth-child(1){--i:0}  .amb__p:nth-child(2){--i:1}
.amb__p:nth-child(3){--i:2}  .amb__p:nth-child(4){--i:3}
.amb__p:nth-child(5){--i:4}  .amb__p:nth-child(6){--i:5}
.amb__p:nth-child(7){--i:6}  .amb__p:nth-child(8){--i:7}
.amb__p:nth-child(9){--i:8}  .amb__p:nth-child(10){--i:9}
.amb__p:nth-child(11){--i:10} .amb__p:nth-child(12){--i:11}

@keyframes amb-polvo {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  12%  { opacity: .62; }
  100% { transform: translate3d(26vw, -104vh, 0) scale(1); opacity: 0; }
}
/* Una partícula quieta a media portada es un defecto, no un ambiente. */
@media (prefers-reduced-motion: reduce) { .amb { display: none; } }
@media (max-width: 760px) { .amb__p:nth-child(n+7) { display: none; } }

/* ── FICHA DE SERVICIOS ─────────────────────────────────────────── */
.ficha { padding: 7rem 0; }
.ficha__grid { border-top: 1px solid var(--linea); }
.fila {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 15rem;
  gap: 1.5rem;
  align-items: start;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--linea);
}
.fila__n {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1); color: var(--nitro); margin: .35rem 0 0;
}
.fila__c h3 {
  font-family: Ledger, Georgia, serif; font-weight: 400;
  font-size: var(--p-1); margin: 0 0 .5rem; line-height: 1.15;
}
.fila__c p { margin: 0; color: var(--medio); max-width: 56ch; }
.fila__t {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1); color: var(--nitro-2); margin: .4rem 0 0; text-align: right;
}

/* ── CITA ───────────────────────────────────────────────────────── */
.cita {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(56vh, 440px); display: grid; align-items: center;
}
.cita img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Peor caso medido a mano: crin dorada clara bajo el velo .76 sobre
   acero → el texto vapor queda en 6,1:1 a tamaño grande. Con alfa
   bajo .70 no se garantiza. */
.cita::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(22,28,34,.76); }
.cita__txt p {
  font-family: Ledger, Georgia, serif; font-weight: 400;
  font-size: var(--p-3); line-height: 1.12; letter-spacing: -.015em;
  max-width: 20ch; margin: 0; color: var(--vapor);
}

/* ── PIEZA FIRMA: LA CADENA ─────────────────────────────────────── */
.cadena { padding: 7rem 0; background: var(--panel); }
.cadena .intro { max-width: 62ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 3.5rem; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.paso {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 17rem;
  grid-template-rows: auto auto;
  gap: .5rem 2.5rem;
  padding: 2.2rem 0;
  border-top: 1px solid var(--linea);
  position: relative;
}
/* Posiciones explicitas: sin esto el navegador llena por orden de DOM
   y las specs caen debajo del numero en vez de a la derecha. */
.paso__n     { grid-column: 1; grid-row: 1; }
.paso__h     { grid-column: 2; grid-row: 1; }
.paso__d     { grid-column: 2; grid-row: 2; }
.paso__specs { grid-column: 3; grid-row: 1 / span 2; }
.paso__n {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1); color: var(--nitro); margin: .3rem 0 0;
}
.paso__h {
  font-family: Ledger, Georgia, serif; font-weight: 400;
  font-size: var(--p-1); margin: 0 0 .5rem; line-height: 1.15;
}
.paso__d { margin: 0; color: var(--medio); max-width: 54ch; }
.paso__specs { margin: 0; display: flex; flex-direction: column; gap: .9rem; }
/* Apiladas, no en dos columnas: en 17rem un valor como
   «Concentracion · movilidad» se parte en cuatro lineas si compite
   con el rotulo por el ancho. */
.paso__specs > div { border-top: 1px dotted var(--linea); padding-top: .45rem; }
.paso__specs dt {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: .74rem; color: var(--medio); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: .15rem;
}
.paso__specs dd { margin: 0; font-size: var(--p--1); color: var(--vapor); line-height: 1.35; }
.paso--fin { border-bottom: 1px solid var(--linea); }
.paso--fin .paso__h { color: var(--ambar); }

.nota {
  margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--linea);
  font-size: var(--p--1); color: var(--medio); max-width: 70ch;
}

/* ── TAJO ───────────────────────────────────────────────────────── */
.tajo {
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  min-height: min(58vh, 460px); display: flex; align-items: flex-end;
}
.tajo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.tajo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg,
    rgba(22,28,34,.95) 0%, rgba(22,28,34,.8) 32%, rgba(22,28,34,.34) 62%, rgba(22,28,34,0) 92%);
}
.tajo__txt { padding: 2.8rem 0; }
.tajo__f {
  font-family: Ledger, Georgia, serif; font-size: var(--p-2);
  margin: 0; line-height: 1.15; max-width: 24ch;
}

/* ── MITADES ────────────────────────────────────────────────────── */
.mitades { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mitades__txt { padding: 5.5rem clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.mitades__txt > p { color: var(--medio); max-width: 46ch; }

.lista { margin: 1.4rem 0; padding: 0; list-style: none; }
.lista li {
  padding: .55rem 0 .55rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--linea); font-size: var(--p--1);
}
.lista li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 1px; background: var(--nitro);
}
.lista--marca li { border-bottom: none; padding-bottom: .3rem; }

/* ── MOSAICO ────────────────────────────────────────────────────── */
/* Sobre su PROPIO fondo, para que el título contraste aunque la página
   mezcle secciones: fue un 1,00:1 real en la demo 151. */
.mos { padding: 7rem 0 0; background: var(--panel); }
.mos__grilla { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }
.mos__p { margin: 0; overflow: hidden; }
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
.mos__p img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--sale); }
.mos__p:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .mos__p:hover img { transform: none; } }

/* ── CONTACTO ───────────────────────────────────────────────────── */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%; object-fit: cover; opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
}
.contacto { padding: 7rem 0; }
.contacto__num { margin: 0 0 3rem; }
.contacto__num a {
  font-family: Ledger, Georgia, serif;
  font-size: clamp(2.2rem, 1.2rem + 4.6vw, 5rem);
  line-height: 1; letter-spacing: -.02em;
  color: var(--ambar); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease;
}
.contacto__num a:hover, .contacto__num a:focus-visible { border-bottom-color: var(--ambar); }

.datos { margin: 0 0 2rem; max-width: 46rem; }
.datos > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--linea);
}
.datos dt {
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1); color: var(--medio); letter-spacing: .06em; text-transform: uppercase;
}
.datos dd { margin: 0; text-align: right; font-size: var(--p--1); }
.datos dd a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── ENLACE-FLECHA (T3) ─────────────────────────────────────────── */
.flecha {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  font-family: "Xanh Mono", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .05em;
  color: var(--nitro); text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: border-bottom-width .2s ease, color .2s ease;
}
.flecha:hover, .flecha:focus-visible { border-bottom-width: 3px; }
.flecha--fuerte { color: var(--ambar); }

/* ── PARA EL DUEÑO ──────────────────────────────────────────────── */
.dueno { padding: 7rem 0; border-top: 1px solid var(--linea); background: var(--panel-2); }
.dueno__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.dueno h3 {
  font-family: "Xanh Mono", ui-monospace, monospace; font-weight: 400;
  font-size: var(--p--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--nitro); margin: 2rem 0 1rem;
}
.dueno p { color: var(--medio); max-width: 60ch; }
.dueno .lista li { color: var(--medio); }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 3rem; }

/* ── PIE ────────────────────────────────────────────────────────── */
.pie { padding: 3rem 0; border-top: 1px solid var(--linea); }
.pie__in p { font-size: var(--p--1); color: var(--medio); margin: 0 0 .8rem; }
.pie__leg { opacity: .8; }

/* ── REVEALS ────────────────────────────────────────────────────── */
/* Estados ocultos SOLO bajo .js, con rescate a 4 s en rescate.js.
   Stagger 60 ms (= min(60ms, 500/N)); opacidad corta y transform
   largo: el fundido lento pelea con el golpe. */
.js [data-rev-grupo] > * { opacity: 0; transform: translateY(26px); }
.js [data-rev-grupo].ok > * {
  opacity: 1; transform: none;
  transition: opacity .32s ease-out, transform .6s var(--sale);
  transition-delay: calc(var(--r, 0) * 60ms);
}
[data-rev-grupo] > :nth-child(1){--r:0} [data-rev-grupo] > :nth-child(2){--r:1}
[data-rev-grupo] > :nth-child(3){--r:2} [data-rev-grupo] > :nth-child(4){--r:3}
[data-rev-grupo] > :nth-child(5){--r:4} [data-rev-grupo] > :nth-child(6){--r:5}
[data-rev-grupo] > :nth-child(7){--r:6}
@media (prefers-reduced-motion: reduce) {
  .js [data-rev-grupo] > * { opacity: 1; transform: none; transition: none; }
}

:focus-visible { outline: 2px solid var(--nitro); outline-offset: 3px; }

/* ── MÓVIL ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .fila, .paso { grid-template-columns: 3rem minmax(0, 1fr); }
  .fila__t { grid-column: 2; text-align: left; margin-top: .6rem; }
  /* En dos columnas las specs NO pueden heredar el `grid-row: 1 / span 2`
     del escritorio: ahi ocupaban la misma celda que el titulo y la
     descripcion, y los textos se dibujaban uno encima del otro. Van a su
     propia fila, debajo de todo. */
  .paso__specs { grid-column: 2; grid-row: 3; margin-top: .8rem; }
  .paso { grid-template-rows: auto auto auto; }
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto img { aspect-ratio: 16 / 10; height: auto; }
  .dueno__cols { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 760px) {
  .cab__nav a:not(.cab__tel) { display: none; }
  .portada { min-height: auto; padding: 3.5rem 0 3rem; }
  /* En telefono TODO el texto cae sobre la foto: la mascara lateral no
     sirve y el velo tiene que proteger de arriba abajo, no al reves.
     La foto queda como textura, no como imagen a plena vista. */
  .portada__foto img {
    object-position: 58% 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }
  /* el video sigue a la foto: en movil la mascara es vertical */
  .portada__video {
    object-position: 58% 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg,
      rgba(22,28,34,.88) 0%, rgba(22,28,34,.8) 34%, rgba(22,28,34,.86) 62%, rgba(22,28,34,1) 100%);
  }
  .specs { gap: 1.8rem 2.4rem; }
  .ficha, .cadena, .contacto, .dueno { padding: 4.5rem 0; }
  .mos { padding-top: 4.5rem; }
  .mos__grilla { grid-template-columns: repeat(2, 1fr); }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 460px) {
  .datos > div { flex-direction: column; gap: .2rem; }
  .datos dd { text-align: left; }
}

/* ── WHATSAPP FLOTANTE ──────────────────────────────────────────────
   Botón fijo abajo a la derecha. 56 px de alto: por encima de los 44
   del mínimo táctil. Verde de WhatsApp a propósito — se reconoce sin
   leerlo, y eso es lo que hace que se toque.

   La dirección del truco importa: el botón se ve SIEMPRE por defecto y
   el JS sólo lo esconde mientras el visitante está en la portada, para
   no tapar el titular. Si el script no arranca, o si rescate.js quita
   la clase .js, el botón queda visible, que es el estado que vende.
   Al revés (oculto por defecto, revelado por JS) un fallo del script
   se lleva el CTA principal. */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 56px;
  padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #07310F;
  text-decoration: none;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover,
.wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .34); }
/* mientras se está arriba del todo, el botón se aparta */
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }
/* que el pie no quede tapado por el botón */
.pie__in { padding-bottom: 4.5rem; }

@media (max-width: 520px) {
  .wapp { width: 56px; padding: 0; justify-content: center; }
  /* el rótulo se va, el icono queda: en un teléfono el círculo verde ya dice qué es */
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wapp { transition: opacity .28s ease; }
  .wapp:hover, .wapp:focus-visible { transform: none; }
  .js .wapp--arriba { transform: none; }
}

/* ── MAPA DE UBICACION ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohibe
   pedir nada a un tercero, asi que un iframe de Google Maps quedaria en
   blanco SIN dar un solo error. El "Como llegar" si es un enlace, y un
   enlace no lo bloquea nada.
   Los colores salen de currentColor a proposito: asi el bloque se adapta
   a la paleta de cada demo sin conocerla y sin chocar con ella.
   La atribucion a OpenStreetMap la exige su licencia (ODbL). */
.mapa-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mapa { margin: 1.4rem 0 0; border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa { border-color: rgba(128, 128, 128, .35); } }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: .86em; line-height: 1.45;
  border-top: 1px solid; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa__pie { border-top-color: rgba(128, 128, 128, .35); } }
.mapa__pie b { font-weight: 700; }
.mapa__ir { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { width: 100%; font-size: .84em; opacity: .8; }
.mapa__cred a { color: inherit; }
/* ── SIN BOTON FLOTANTE, A PROPOSITO ────────────────────────────────
   se habia puesto un segundo boton por error; el original .wapp ya estaba y lleva el sello por confirmar.
   WhatsApp no funciona en numeros fijos: el boton abriria la aplicacion
   y no encontraria la cuenta. Peor que no tenerlo. Cuando el negocio
   confirme un movil o una cuenta de Instagram, se pone con
   demos\poner-contacto.ps1 y queda igual que en el resto. */