/* ===================================================================
   204 · VIPACAR Electricidad Automotriz · Pitrufquen
   Demo comercial sin encargo. Construida el 02-09-2026.

   DESLINDE MAS DURO DE LA TANDA. Es el DECIMOSEXTO automotriz del
   registro y el TERCERO DE PITRUFQUEN:
   · 54-mecanica-pitrufquen es «La pantalla del scanner»: carbon con
     fosforo verde de terminal. Su tema es LA MAQUINA que diagnostica.
   · 193-ingecar (de esta misma tanda) es «El manual que nadie lee»:
     papel con reticula tecnica y los tres colores del tablero. Su tema
     es EL PAPEL, y su pieza son las luces de aviso.
   · taller-electrico-sandoval (Villarrica) es EL MISMO RUBRO: ver el
     deslinde de paleta mas abajo — obligo a cambiar acento y objeto.
   · 204 es otro OFICIO, no otro taller: un mecanico repara lo que se
     mueve, un electrico repara lo que circula. Y su pieza no son las
     luces del tablero (eso es de la 193) sino EL RUIDO QUE HACE EL
     AUTO AL GIRAR LA LLAVE.
   Las tres se pueden poner una al lado de la otra sin que se parezcan.

   DIRECCION - «NO PARTE»
   El problema comercial del rubro es uno solo: bateria, alternador y
   motor de arranque fallan igual desde afuera —el auto no parte—,
   cuestan distinto, y la gente cambia la bateria. Cuando era el
   alternador, la bateria nueva se descarga en dos dias. La pagina
   entera existe para evitar ese gasto.

   INDICE NUEVO DEL REGISTRO: LA PIEZA FIRMA SE INDEXA POR SONIDO. La
   158 indexa por EDAD, la 184 por SINTOMA de maquina, la 199 por
   TRABAJO A HACER, la 202 por SECUENCIA. Esta es la primera indexada
   por EL RUIDO QUE HACE, y es la unica informacion que el cliente
   puede levantar solo, sentado, sin abrir el capo.

   DESLINDE QUE OBLIGO A REHACER LA PALETA (encontrado el 02-09-2026 al
   revisar la carpeta de demos construidas, DESPUES de escribir la
   pagina): **taller-electrico-sandoval, en Villarrica, es exactamente
   el mismo rubro y su direccion es «Polaridad»** — hueso frio
   `#ECEEEF` + tinta + **rojo de borne `#A62C22`**, con el borne como
   objeto. Esta demo tenia el mismo referente (el borne positivo) y el
   mismo color, en otro fondo. **Se cambio entero**: otro acento, otro
   objeto de cabecera y otra luminancia de pagina. Que sean de comunas
   distintas no basta cuando el referente es el mismo.

   PALETA — dark. El acento es **EL ARCO ELECTRICO** `#8FD2FF` para
   TEXTO y `#4FA8E8` para OBJETOS: el blanco-azul del chispazo cuando
   un borne hace masa. No es el color de una pieza ni de una pintura —
   es el color de la electricidad cuando se ve.
   Deslinde de los azules del registro: el `#22415C` de la 62 es
   PAVONADO (acabado del metal), el de ekla es EL PLANO, el `#1B5FA8`
   de la 185 es PLASTICO DE JABA, la prusia de la 180 es casi negra, el
   `#0E5A70` de la 196 es la ARISTA DE UN BLOQUE DE HIELO, el `#1C5480`
   de la 199 es ESMALTE DE TABLERO, el `#175E70` de la 207 es AGUA DE
   RIO, el `#08697A` de la 74 es AGUA DE LAGO y el cian de la 187 es
   GAS. **Este es el unico casi-blanco del grupo, y el unico que es
   LUZ y no materia.**

   Contrastes medidos sobre el PEOR fondo (`--panel-2`):
   · luz   `#E8EBEE` -> 15,5:1 sobre noche
   · medio `#9AA4AC` -> 6,1:1 sobre panel-2
   · arco  `#8FD2FF` -> 8,7:1 sobre panel-2 · 11,6:1 sobre noche

   TRIO — verificado contra identidades.md el 02-09-2026:
   · Display ELECTROLIZE (0 usos). Cuadrada, de esqueleto tecnico y un
     solo peso: la letra de un instrumento, no la de un aviso.
   · Cuerpo TITILLIUM WEB (3 usos). Sans tecnica de buena lectura.
   · Mono VICTOR MONO (6 usos) — el menos usado que calza.

   AMBIENTE: LA CORRIENTE (primera del registro, y no esta en el
   catalogo: se agrega con esta demo). Cuatro lineas horizontales muy
   tenues y un tramo brillante que las recorre de izquierda a derecha.
   Deslinde con todo lo demas del catalogo: no cae, no sube, no flota y
   no late — RECORRE, que es exactamente lo unico que hace la
   electricidad. Solo transform y opacity, determinista, sin JS.

   REGLA DE SEGURIDAD DE ESTA PAGINA, escrita aca y repetida en el pie:
   ni un procedimiento de puenteo, ni una prueba con el motor en
   marcha, ni un desarme. Todo lo que se propone revisar se hace con el
   motor APAGADO y a simple vista. Y la pieza firma dice expresamente
   que orienta una llamada y no diagnostica.
   =================================================================== */

:root {
  --noche:   #0F1114;
  --panel:   #181B1F;
  --panel-2: #20242A;   /* el peor fondo: todo se calibra contra este */
  --luz:     #E8EBEE;
  --medio:   #9AA4AC;
  --arco:    #8FD2FF;   /* TEXTO */
  --arco-o:  #4FA8E8;   /* OBJETOS: nunca texto */
  --linea:   #2E343B;

  --sale:   cubic-bezier(.16, 1, .3, 1);
  --sale-2: cubic-bezier(.2, 0, 0, 1);

  --ancho: min(92vw, 1160px);
  --p--1: clamp(.78rem, .74rem + .18vw, .88rem);
  --p-0:  clamp(1rem, .95rem + .25vw, 1.1rem);
  --p-1:  clamp(1.12rem, 1.02rem + .45vw, 1.34rem);
  --p-2:  clamp(1.5rem, 1.25rem + 1.15vw, 2.1rem);
  --p-3:  clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --p-4:  clamp(3.2rem, 2rem + 6vw, 7.2rem);
}

*, *::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(--noche); color: var(--luz);
  font-family: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  font-size: var(--p-0); line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
.ancho { width: var(--ancho); margin-inline: auto; }

.rotulo {
  font-family: "Victor Mono", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--arco); margin: 0 0 1.4rem;
}
.h2 {
  font-family: Electrolize, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: var(--p-3); line-height: 1.14; letter-spacing: -.01em; margin: 0 0 1.5rem;
}
.h2--chico { font-size: var(--p-2); }
.mini { font-size: var(--p--1); color: var(--medio); max-width: 70ch; }
.mini b { color: var(--luz); }
.nota { font-size: var(--p--1); color: var(--medio); max-width: 74ch; margin-top: 2.4rem; }
.nota b { color: var(--luz); }
.falta { color: var(--medio); font-style: italic; }
.ej { color: var(--medio); font-style: italic; border-bottom: 1px dashed var(--linea); }
.ej::after {
  content: " (ej.)"; font-family: "Victor Mono", ui-monospace, monospace;
  font-size: .78em; font-style: normal; opacity: .85;
}

/* -- BANDA DE PROPUESTA ------------------------------------------ */
.propuesta { background: var(--arco-o); color: #04141F; }
.propuesta__in { padding: .9rem 0; }
.propuesta__q { font-family: "Victor Mono", ui-monospace, monospace; font-size: var(--p--1); letter-spacing: .03em; margin: 0 0 .2rem; }
.propuesta__d { margin: 0; font-size: var(--p--1); line-height: 1.5; max-width: 100ch; }

/* -- CABECERA ---------------------------------------------------- */
.cab {
  position: sticky; top: 0; z-index: 50;
  background: var(--noche); 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: .8rem; text-decoration: none; min-height: 44px; }
.cab__txt {
  font-family: Electrolize, "Arial Narrow", sans-serif;
  font-size: var(--p-1); line-height: 1.05; display: flex; flex-direction: column; gap: .24rem;
  letter-spacing: .04em;
}
.cab__sub {
  font-family: "Victor Mono", ui-monospace, monospace;
  font-size: .52em; letter-spacing: .06em; 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(--luz); }
.cab__tel { color: var(--arco) !important; font-family: "Victor Mono", ui-monospace, monospace; white-space: nowrap; }

/* Cabecera 170a - EL CLIC: tres marcas verticales que se van achicando.
   Es el sonido con el que empieza la pagina, y no hay ningun SONIDO
   dibujado en las 203 anteriores.
   NO ES UNA BATERIA, Y ES A PROPOSITO: taller-electrico-sandoval
   (Villarrica) es del mismo rubro y ya tiene el borne como objeto y el
   rojo de borne como acento. Ver el deslinde escrito en la cabecera. */
.clic { position: relative; width: 26px; height: 24px; flex: 0 0 auto; display: flex; align-items: flex-end; gap: 4px; }
.clic span { width: 4px; border-radius: 2px; background: var(--arco-o); }
.clic span:nth-child(1) { height: 20px; }
.clic span:nth-child(2) { height: 13px; opacity: .7; }
.clic span:nth-child(3) { height: 7px;  opacity: .45; }

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

/* -- 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: -3; }
.portada__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.28) 41%, rgba(0,0,0,.76) 62%, #000 80%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.28) 41%, rgba(0,0,0,.76) 62%, #000 80%, #000 100%);
}
/* Velo entero en rgba terminando en alfa 0. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(15,17,20,1) 0%, rgba(15,17,20,1) 36%, rgba(15,17,20,.9) 51%,
    rgba(15,17,20,.5) 68%, rgba(15,17,20,.15) 86%, rgba(15,17,20,0) 97%);
}
.portada__in { position: relative; z-index: 1; }
.portada__h1 {
  font-family: Electrolize, "Arial Narrow", sans-serif;
  font-size: var(--p-4); line-height: .98; letter-spacing: -.02em; margin: 0 0 1.4rem;
}
.portada__bajada { max-width: 46ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 2.4rem; }
.portada__bajada b { color: var(--luz); }
.portada__pie { margin: 0; }

/* -- AMBIENTE: LA CORRIENTE -------------------------------------- */
/* Primera del registro y ampliacion del catalogo. Cuatro lineas muy
   tenues y un tramo brillante que las recorre de izquierda a derecha.
   No cae, no sube, no flota y no late: RECORRE, que es lo unico que
   hace la electricidad. Determinista: --i por nth-child (la CSP
   bloquea style=""). Solo transform y opacity. */
.amb { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.amb__l {
  position: absolute; left: -8%; right: -8%; height: 1px;
  top: calc(20% + var(--i) * 17%);
  background: rgba(232, 235, 238, .042);   /* muy tenue: a .08 se leian como filetes de maqueta y cortaban el titular */
  overflow: hidden;
}
.amb__l::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 16%; height: 3px;
  background: linear-gradient(90deg, rgba(143,210,255,0) 0%, rgba(143,210,255,.9) 50%, rgba(143,210,255,0) 100%);
  animation: amb-corre var(--dur, 9s) linear infinite;
  animation-delay: calc(var(--i) * -2.7s);
  will-change: transform;
}
.amb--corriente .amb__l:nth-child(1) { --i: 0; --dur: 8s;  }
.amb--corriente .amb__l:nth-child(2) { --i: 1; --dur: 11s; }
.amb--corriente .amb__l:nth-child(3) { --i: 2; --dur: 14s; }
.amb--corriente .amb__l:nth-child(4) { --i: 3; --dur: 10s; }
@keyframes amb-corre {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(720%); }
}
@media (prefers-reduced-motion: reduce) { .amb { display: none; } }
@media (max-width: 760px) { .amb__l:nth-child(n+3) { display: none; } }

/* -- BOTONES ----------------------------------------------------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.8rem;
  border: 1px solid var(--arco); color: var(--arco); background: transparent;
  font-family: "Victor Mono", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; overflow: hidden; isolation: isolate;
}
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--arco); transform: translateY(101%); transition: transform .4s var(--sale);
}
.boton:hover, .boton:focus-visible { color: var(--noche); }
.boton:hover::before, .boton:focus-visible::before { transform: translateY(0); }
.boton--fuerte { background: var(--arco); color: var(--noche); }
.boton--fuerte::before { background: var(--luz); }
@media (prefers-reduced-motion: reduce) { .boton::before { transition-duration: 1ms; } }

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

/* -- PIEZA FIRMA: LOS SEIS RUIDOS -------------------------------- */
.ruido { padding: 7rem 0; background: var(--panel); }
.ruido .intro, .revisar .intro { max-width: 66ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 3rem; }
.ruido .intro b, .revisar .intro b { color: var(--luz); }

.son { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--arco-o); }
.so { padding: 1.5rem 0; border-bottom: 1px solid var(--linea); }
.so__q {
  font-family: Electrolize, "Arial Narrow", sans-serif;
  font-size: var(--p-1); line-height: 1.28; margin: 0 0 .55rem; color: var(--luz);
}
.so__a { margin: 0; color: var(--medio); font-size: var(--p--1); line-height: 1.68; max-width: 82ch; }
.so__a b { color: var(--luz); }
/* El caso del alternador es el que cuesta plata: va marcado. */
.so.destacado { background: var(--panel-2); padding-inline: 1.2rem; border-left: 3px solid var(--arco-o); }
.so.destacado .so__q { color: var(--arco); }

/* -- CITA -------------------------------------------------------- */
.cita { position: relative; isolation: isolate; overflow: hidden; min-height: min(48vh, 370px); display: grid; align-items: center; }
.cita img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* Peor caso medido a mano: las estelas de luz bajo el velo .82 sobre
   noche dejan el texto en 12:1. El auditor marca 1,00:1 porque no ve
   el ::after y trepa hasta el body — falso positivo conocido. */
.cita::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15,17,20,.82); }
.cita__txt p {
  font-family: Electrolize, "Arial Narrow", sans-serif;
  font-size: var(--p-2); line-height: 1.26; max-width: 26ch; margin: 0; color: var(--luz);
}

/* -- QUÉ PUEDE REVISAR ------------------------------------------- */
.revisar { padding: 7rem 0; }
.chk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem; margin-bottom: 2.4rem; }
.ck { border-top: 2px solid var(--linea); padding-top: 1rem; }
.ck h3 { font-family: Electrolize, "Arial Narrow", sans-serif; font-weight: 400; font-size: var(--p-1); margin: 0 0 .6rem; line-height: 1.2; color: var(--luz); }
.ck p { margin: 0; color: var(--medio); font-size: var(--p--1); line-height: 1.66; }
.ck p b { color: var(--luz); }

/* -- TAJO -------------------------------------------------------- */
.tajo { position: relative; isolation: isolate; overflow: hidden; margin: 0; min-height: min(52vh, 400px); 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% 50%; }
.tajo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(15,17,20,.95) 0%, rgba(15,17,20,.8) 34%, rgba(15,17,20,.3) 64%, rgba(15,17,20,0) 92%);
}
.tajo__txt { padding: 2.8rem 0; }
.tajo__f { font-family: Electrolize, "Arial Narrow", sans-serif; font-size: var(--p-2); margin: 0; line-height: 1.22; max-width: 24ch; color: var(--luz); }

/* -- MITADES ----------------------------------------------------- */
.mitades { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel-2); }
.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); }
.mitades__txt p b { color: var(--luz); }
.lista { margin: 1.3rem 0; padding: 0; list-style: none; }
.lista li { padding: .6rem 0 .6rem 1.5rem; position: relative; border-bottom: 1px solid var(--linea); font-size: var(--p--1); color: var(--medio); }
.lista li b { color: var(--luz); }
.lista li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 8px; height: 1px; background: var(--arco-o); }
.lista--marca li { border-bottom: none; padding-bottom: .3rem; }

/* -- MOSAICO ----------------------------------------------------- */
.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: .12;
  -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 2.4rem; }
.contacto__num a {
  font-family: Electrolize, "Arial Narrow", sans-serif;
  font-size: clamp(1.8rem, 1.2rem + 3.4vw, 3.8rem); line-height: 1; color: var(--arco);
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 3px solid transparent; transition: border-color .25s ease;
}
.contacto__num a:hover, .contacto__num a:focus-visible { border-bottom-color: var(--arco); }

.antes { border-left: 3px solid var(--arco-o); padding: .2rem 0 .2rem 1.4rem; margin: 0 0 2.6rem; max-width: 52rem; }
.antes__t {
  font-family: "Victor Mono", ui-monospace, monospace; font-size: var(--p--1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--arco); margin: 0 0 .9rem;
}
.antes__l { margin: 0 0 .5rem; font-size: var(--p-1); font-family: Electrolize, "Arial Narrow", sans-serif; }
.antes__l span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin-right: .7rem; border-radius: 50%;
  border: 1px solid var(--arco-o); color: var(--arco);
  font-family: "Victor Mono", ui-monospace, monospace; font-size: .7rem;
}
.antes__p { margin: .9rem 0 0; color: var(--medio); font-size: var(--p--1); max-width: 56ch; }

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

/* -- PARA EL DUENO ----------------------------------------------- */
.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: "Victor Mono", ui-monospace, monospace;
  font-size: var(--p--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--arco); margin: 2rem 0 1rem;
}
.dueno p { color: var(--medio); max-width: 62ch; }
.dueno p b { color: var(--luz); }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin-top: 3rem; }

.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__in p b { color: var(--luz); }
.pie__leg { opacity: .95; }

/* -- REVEALS ----------------------------------------------------- */
.js [data-rev-grupo] > * { opacity: 0; transform: translateY(22px); }
.js [data-rev-grupo].ok > * {
  opacity: 1; transform: none;
  transition: opacity .3s ease-out, transform .55s var(--sale);
  transition-delay: calc(var(--r, 0) * 55ms);
}
[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}
@media (prefers-reduced-motion: reduce) {
  .js [data-rev-grupo] > * { opacity: 1; transform: none; transition: none; }
}
:focus-visible { outline: 2px solid var(--arco); outline-offset: 3px; }

/* -- MOVIL ------------------------------------------------------- */
@media (max-width: 1080px) {
  .chk { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .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 el texto cae ENCIMA de la foto: la mascara lateral no
     sirve a 375 px, asi que el velo se da vuelta y baja. */
  .portada__foto img {
    object-position: 60% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg,
      rgba(15,17,20,.86) 0%, rgba(15,17,20,.8) 34%, rgba(15,17,20,.92) 64%, rgba(15,17,20,1) 100%);
  }
  .chk { grid-template-columns: 1fr; gap: 1.8rem; }
  .ruido, .revisar, .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: 480px) {
  .cab__sub { font-size: .46em; }
}
@media (max-width: 460px) {
  .datos > div { flex-direction: column; gap: .2rem; }
  .datos dd { text-align: left; }
}

/* ── 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; }
/* ── BOTON FLOTANTE DE CONTACTO ─────────────────────────────────────
   56 px de alto, por encima del minimo tactil de 44. Los colores de
   marca van a proposito: se reconocen sin leerlos, y eso es lo que hace
   que se toquen. Se ve SIEMPRE por defecto; el JS solo lo aparta sobre
   la portada. Al reves, un fallo del script se llevaria el CTA principal. */
.flota {
  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;
  text-decoration: none;
  font-family: var(--cuerpo, system-ui, sans-serif);
  font-size: .95rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), 0 2px 6px rgba(0, 0, 0, .16);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.flota--wa { background: #25D366; color: #07310F; }
.flota--ig { background: linear-gradient(120deg, #F9CE34 4%, #EE2A7B 48%, #6228D7 96%); color: #FFFFFF; }
.flota__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.flota:hover, .flota:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.js .flota--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .flota { width: 56px; padding: 0; justify-content: center; }
  .flota__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .flota { transition: opacity .28s ease; }
  .flota:hover, .flota:focus-visible { transform: none; }
  .js .flota--arriba { transform: none; }
}