/*
 * estilos.css — cómo SE VE la página (colores, letras, tamaños, posiciones y animaciones).
 *
 * Cómo leer una regla de CSS:
 *   .boton { color: red; }
 *   └─┬──┘   └────┬────┘
 *   a quién   qué cambia
 *   ".algo"  = elementos con class="algo"      "#algo" = el elemento con id="algo"
 *   "a b"    = un b que está dentro de un a    ":hover" = cuando el mouse está encima
 *   "@media (max-width:760px) { ... }" = reglas que solo valen en pantallas de 760 px o menos (celulares).
 *   "var(--rojo)" = usa el color guardado con el nombre --rojo (están todos juntos más abajo, en :root).
 */

/* ===================== LETRAS (fuentes) =====================
 * Los archivos de letras están en la carpeta fuentes/ (licencia libre SIL OFL).
 * font-display:swap = mientras carga la letra, muestra el texto con una letra común (nunca queda en blanco). */
/* Oswald mediana: títulos chicos */
@font-face{font-family:"Oswald";font-weight:500;font-display:swap;src:url(fuentes/oswald-latin-500-normal.woff2) format("woff2")}
/* Oswald semi negrita */
@font-face{font-family:"Oswald";font-weight:600;font-display:swap;src:url(fuentes/oswald-latin-600-normal.woff2) format("woff2")}
/* Oswald negrita: títulos grandes */
@font-face{font-family:"Oswald";font-weight:700;font-display:swap;src:url(fuentes/oswald-latin-700-normal.woff2) format("woff2")}
/* Rubik normal: textos */
@font-face{font-family:"Rubik";font-weight:400;font-display:swap;src:url(fuentes/rubik-latin-400-normal.woff2) format("woff2")}
/* Rubik mediana */
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(fuentes/rubik-latin-500-normal.woff2) format("woff2")}
/* Rubik semi negrita: botones */
@font-face{font-family:"Rubik";font-weight:600;font-display:swap;src:url(fuentes/rubik-latin-600-normal.woff2) format("woff2")}
/* Big Shoulders Stencil: los números y códigos tipo "pintados con plantilla" (MOT, 1, 2, 3...) */
@font-face{font-family:"Big Shoulders Stencil Display";font-weight:800;font-display:swap;src:url(fuentes/big-shoulders-stencil-display-latin-800-normal.woff2) format("woff2")}

/* ===================== BASE (reglas generales para toda la página) ===================== */
/* El ancho de cada caja incluye su borde y relleno (así los tamaños son fáciles de calcular) */
*,*::before,*::after{box-sizing:border-box}
/* Evita que el iPhone agrande el texto solo al girar el celular */
html{-webkit-text-size-adjust:100%}
/* Sin margen alrededor de la página */
body{margin:0}
/* Las imágenes nunca son más anchas que su contenedor */
img{max-width:100%}
/* Lo que tiene el atributo "hidden" no se ve, pase lo que pase */
[hidden]{display:none!important}
/* Texto invisible en pantalla pero que sí leen los lectores de pantalla (personas ciegas) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===================== COLORES Y MEDIDAS (variables) =====================
 * Diseño: el galpón por dentro. Portada de noche con chapa acanalada, cinta roja de piezas, etiquetas de
 * depósito por categoría, banda de motores, recorrido con un auto, oblea y anti estafas. Todo termina en WhatsApp.
 * Para cambiar un color en toda la página alcanza con cambiarlo acá. */
:root{
  /* Fondos, líneas y textos del modo claro */
  --fondo:#F4F2EE; --superficie:#FBFAF7; --alta:#FFFFFF; --linea:#E2DED6; --control:#8A8478;
  --tinta:#1A1F2B; --suave:#545C6B; --titulo:#1C2C52; --azul:#1C2C52; --sobre-azul:#FFFFFF;
  /* Rojos de la marca (y el color del texto que va encima del rojo) */
  --rojo:#C41E26; --rojo-p:#A3171E; --rojo-suave:#FBE6E7; --sobre-rojo:#FBFAF7;
  /* Verdes (stock y WhatsApp) y color del contorno del foco del teclado */
  --stock:#166B3A; --stock-suave:#E3F2E8; --wa:#1A7F45; --wa-burbuja:#DCF5E3; --foco:#1C2C52;
  /* Colores de las secciones de noche (galpón, pedido, pie) */
  --noche:#111722; --noche-2:#1A2232; --negro:#090B10; --crema-n:#F4F2EE; --gris-n:#B9C1CF; --rojo-n:#F0585E;
  /* Sombra suave de las tarjetas */
  --sombra:0 1px 2px rgba(17,23,34,.06),0 10px 28px rgba(17,23,34,.10);
  /* Familias de letras: si una no carga, se usa la siguiente de la lista */
  --display:Oswald,"Arial Narrow",Arial,sans-serif; --text:Rubik,system-ui,Arial,sans-serif;
  --stencil:"Big Shoulders Stencil Display",Oswald,"Arial Narrow",sans-serif;
  /* Curvas de velocidad de las animaciones: salida suave, persiana y rebote */
  --salida:cubic-bezier(.2,.8,.2,1); --persiana:cubic-bezier(.65,0,.35,1); --rebote:cubic-bezier(.3,1.5,.5,1);
}
/* Modo oscuro automático: si el celular o la compu están en modo oscuro, se cambian los colores */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fondo:#111722; --superficie:#1A2232; --alta:#222C3F; --linea:#2E3A52; --control:#6B7690;
  --tinta:#F4F2EE; --suave:#B9C1CF; --titulo:#F4F2EE; --azul:#2A3F73; --sobre-azul:#F4F2EE;
  --rojo:#F0585E; --rojo-p:#F47A7F; --rojo-suave:#3A1A1F; --sobre-rojo:#111722;
  --stock:#5CC98A; --stock-suave:#163024; --wa-burbuja:#163024; --foco:#9FB3E0; --noche:#0B0F17; --noche-2:#141B29;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.4); color-scheme:dark}}
/* Modo oscuro forzado (si algún día se agrega un botón para elegirlo) */
:root[data-theme="dark"]{
  --fondo:#111722; --superficie:#1A2232; --alta:#222C3F; --linea:#2E3A52; --control:#6B7690;
  --tinta:#F4F2EE; --suave:#B9C1CF; --titulo:#F4F2EE; --azul:#2A3F73; --sobre-azul:#F4F2EE;
  --rojo:#F0585E; --rojo-p:#F47A7F; --rojo-suave:#3A1A1F; --sobre-rojo:#111722;
  --stock:#5CC98A; --stock-suave:#163024; --wa-burbuja:#163024; --foco:#9FB3E0; --noche:#0B0F17; --noche-2:#141B29;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.4); color-scheme:dark}
/* Si la persona pidió "reducir movimiento" en su dispositivo: se apagan todas las animaciones de CSS */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ===================== ELEMENTOS COMUNES ===================== */
/* Página: color de fondo, de texto, letra y tamaño base. overflow-x:hidden evita que se pueda correr de costado */
body{background:var(--fondo);color:var(--tinta);font-family:var(--text);font-size:16px;line-height:1.55;overflow-x:hidden}
/* Los links usan el color del texto que los rodea */
a{color:inherit}
/* ".in" = contenedor centrado de hasta 1180 px con márgenes a los costados (respeta la "muesca" del iPhone) */
.in{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* Títulos: letra Oswald, renglones equilibrados (text-wrap:balance) y sin margen */
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
/* ".ceja" = textito rojo en mayúsculas arriba de los títulos */
.ceja{margin:0;font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--rojo)}
/* ".btn" = botón: ícono + texto centrados, alto mínimo de 48 px (cómodo para el dedo) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;border:1px solid transparent;font:600 16px var(--text);text-decoration:none;cursor:pointer;transition:transform 120ms,background-color 200ms}
/* Al apretar un botón se achica un poquito (se siente que se apretó) */
.btn:active{transform:scale(.95)}
/* Ícono dentro de un botón */
.btn svg{width:20px;height:20px;flex:none}
/* Botón verde de WhatsApp */
.wa{background:var(--wa);color:#fff}
/* Verde más oscuro con el mouse encima */
.wa:hover{background:#156A39}
/* Botón rojo */
.rojo{background:var(--rojo);color:var(--sobre-rojo)}
/* Rojo más oscuro con el mouse encima */
.rojo:hover{background:var(--rojo-p)}
/* Botón de contorno (transparente con borde claro), para fondos oscuros */
.cont-n{background:transparent;color:var(--crema-n);border-color:rgba(244,242,238,.45)}
/* Se aclara apenas con el mouse encima */
.cont-n:hover{background:rgba(244,242,238,.08)}
/* Contorno visible al moverse con la tecla Tab (accesibilidad) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
/* Animación "sacudir": gira a un lado y al otro */
@keyframes sacudir{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}75%{transform:rotate(16deg)}}
/* Mientras se abre WhatsApp, el ícono se sacude dos veces */
.abriendo svg{animation:sacudir .45s 2}

/* ===================== INTRO: arranque del motor ===================== */
/* Pantalla negra que tapa todo, con el logo y el tacómetro centrados */
.intro{position:fixed;inset:0;z-index:100;background:var(--negro);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;overflow:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
/* Si tiene "hidden", no se ve */
.intro[hidden]{display:none!important}
/* Logo: el más chico entre 62% del ancho, 44% del alto o 360 px. height:auto mantiene la proporción (antes salía estirado) */
.intro img{width:min(62vw,44vh,360px);height:auto}
/* Tacómetro: mismo criterio, más chico */
.intro svg{width:min(40vw,26vh,220px);height:auto;flex:none}
/* Botón "Saltar", abajo a la derecha */
.intro .skip{position:absolute;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));background:transparent;color:var(--gris-n);border:1px solid rgba(185,193,207,.4);border-radius:8px;padding:8px 16px;font:500 14px var(--text);cursor:pointer}
/* Líneas de velocidad que cruzan la pantalla al final */
.vel{position:absolute;left:0;height:2px;width:30%;background:rgba(244,242,238,.35)}
/* La intro empieza oculta... */
.intro{display:none}
/* ...y solo se ve si inicio.js le puso la clase "con-intro" al <html> (sin JavaScript, nunca aparece) */
html.con-intro .intro{display:flex}
/* Mientras está la intro, la página de atrás no se puede bajar */
html.con-intro body{overflow:hidden}

/* ===================== ENCABEZADO (barra azul de arriba) ===================== */
/* Franja azul detrás de la "muesca" del iPhone */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--azul)}
/* El encabezado queda pegado arriba al bajar (sticky) */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--azul);color:var(--sobre-azul)}
/* Logo, menú y botón en una fila de 72 px de alto */
.hd .in{display:flex;align-items:center;gap:20px;height:72px}
/* Logo + nombre */
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
/* Imagen del logo (se achica con transición) */
.marca img{width:52px;height:52px;border-radius:6px;transition:transform 300ms var(--salida);transform-origin:left center}
/* Nombre "La Nave Autopartes" */
.marca b{font-family:var(--display);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1;transition:opacity 250ms,transform 300ms var(--salida)}
/* Al bajar (clase "chico", la pone app.js): el logo se achica... */
.hd.chico .marca img{transform:scale(.8)}
/* ...y el nombre se desvanece */
.hd.chico .marca b{opacity:0;transform:translateX(-10px)}
/* Menú: links en fila, empujados a la derecha */
.nav{display:flex;gap:24px;margin-left:auto;font-size:15px;font-weight:500}
/* Cada link del menú, un poco transparente */
.nav a{text-decoration:none;opacity:.82;position:relative;padding-block:6px}
/* Subrayado rojo escondido (ancho 0) */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rojo-n);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--persiana)}
/* Con el mouse encima, el link se ve entero */
.nav a:hover{opacity:1}
/* Con el mouse encima o si es la sección actual, aparece el subrayado */
.nav a:hover::after,.nav a.activo::after{transform:none}
/* La sección actual se ve entera */
.nav a.activo{opacity:1}
/* Íconos de redes del encabezado (Instagram, Facebook...) */
.hd-redes{display:flex;align-items:center;gap:4px}
/* Cada ícono: círculo tocable de 40 px */
.hd-redes a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--sobre-azul);opacity:.85;transition:background-color 200ms,opacity 200ms}
/* Con el mouse encima se marca */
.hd-redes a:hover{opacity:1;background:rgba(255,255,255,.12)}
/* El dibujo del ícono */
.hd-redes svg{width:22px;height:22px}
/* El botón "Escribinos" del encabezado es más chico */
.hd .btn{min-height:42px;padding:0 16px;font-size:14px}
/* Franja roja debajo del encabezado (barra de progreso) */
.franja{height:6px;background:rgba(196,30,38,.35);overflow:hidden}
/* La parte llena de la barra: app.js cambia su ancho según cuánto se bajó */
.franja span{display:block;height:100%;background:#C41E26;transform-origin:left;transform:scaleX(0)}
/* Pantallas de 1080 px o menos (tablets y celulares): el menú baja a una segunda fila
 * que se desliza de costado con el dedo, así las secciones se ven sin tener que bajar. */
@media (max-width:1080px){
  /* El encabezado pasa a tener dos filas: logo + botón arriba, menú abajo */
  .hd .in{flex-wrap:wrap;height:auto;column-gap:12px;row-gap:0;padding-top:8px}
  /* Los íconos de redes y el botón de WhatsApp quedan a la derecha de la primera fila */
  .hd-redes{margin-left:auto}
  .hd-redes[hidden]+.btn,.hd .btn:first-child{margin-left:auto}
  /* Nombre un poco más chico */
  .marca b{font-size:17px}
  /* Logo un poco más chico para que el encabezado no ocupe tanto */
  .marca img{width:44px;height:44px}
  /* El menú: fila completa, se desliza de costado; el borde derecho se desvanece para mostrar que hay más */
  .nav{order:3;flex:0 0 100%;margin-left:0;gap:6px;overflow-x:auto;padding:8px 0 10px;font-size:14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  /* Sin barra de desplazamiento visible (Chrome y Safari) */
  .nav::-webkit-scrollbar{display:none}
  /* Cada sección es un botoncito redondeado, fácil de tocar con el dedo */
  .nav a{flex:none;white-space:nowrap;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.10);opacity:.92}
  /* Sin el subrayado de la versión de computadora */
  .nav a::after{display:none}
  /* La sección que se está viendo, en rojo */
  .nav a.activo{background:#C41E26;opacity:1}
}
/* Celulares muy angostos: el botón muestra solo el ícono */
@media (max-width:400px){.hd .btn span{display:none}.hd .btn{padding:0 13px}}

/* ===================== PEDÍ TU REPUESTO (sección de noche con el formulario) ===================== */
/* Fondo de noche */
.hero{position:relative;background:var(--noche);color:var(--crema-n);overflow:hidden}
/* Rayas verticales que imitan chapa acanalada */
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 3px,transparent 3px 14px,rgba(0,0,0,.18) 14px 17px,transparent 17px 28px);pointer-events:none}
/* Dos columnas: textos a la izquierda, formulario a la derecha */
.hero .in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-block:64px 72px}
/* Columna de textos, uno abajo del otro */
.hero-txt{display:flex;flex-direction:column;gap:22px;min-width:0}
/* La ceja en rojo claro (se lee mejor sobre fondo oscuro) */
.hero .ceja{color:var(--rojo-n)}
/* Título "¿Qué pieza necesita tu auto?": tamaño que se adapta entre 40 y 72 px */
.hero .h-pedido{font-size:clamp(40px,6vw,72px);font-weight:700;text-transform:uppercase;line-height:.94;color:var(--crema-n)}
/* Cada renglón del título en su propia línea */
.hero .h-pedido .linea{display:block}

/* ===================== LA PORTADA (foto del taller con profundidad) ===================== */
/* Ocupa la pantalla entera menos el encabezado (--alto-hd lo mide app.js; 78 px si todavía no lo midió).
 * "isolation" crea su propia pila de capas para que nada de afuera se meta entre la foto y el texto. */
.portada{position:relative;isolation:isolate;display:flex;align-items:center;min-height:max(520px,calc(100svh - var(--alto-hd,78px)));overflow:hidden;background:var(--noche);color:var(--crema-n);perspective:1200px}
/* Capa de la foto: un poco más grande que la portada (inset negativo) para que al moverse nunca se vea el borde.
 * Flota sola, muy despacio, aunque nadie mueva el mouse. */
.p-fondo{position:absolute;inset:-6%;z-index:-3;animation:p-flota 18s ease-in-out infinite alternate}
/* Animación de flotar: se corre un poquito y se agranda apenas */
@keyframes p-flota{from{transform:translate(0,0) scale(1.02)}to{transform:translate(-1.5%,-1%) scale(1.06)}}
/* La foto en sí. Primero la versión JPG (para navegadores viejos) y después la WEBP, más liviana, si el navegador la entiende.
 * app.js le cambia "transform" en cada cuadro (sigue al mouse en la compu; en el celular pasea sola y acompaña el scroll). */
.p-foto{position:absolute;inset:0;background:#1A2030 url(/img/taller.jpg) center 38%/cover no-repeat;background-image:image-set(url(/img/taller.webp) type("image/webp"),url(/img/taller.jpg) type("image/jpeg"));transform:scale(1.08);will-change:transform}
/* En pantallas chicas usamos la foto más liviana (900 px de ancho) */
@media (max-width:900px){.p-foto{background-image:url(/img/taller-900.jpg);background-image:image-set(url(/img/taller-900.webp) type("image/webp"),url(/img/taller-900.jpg) type("image/jpeg"))}}
/* Sombra: clara en el centro y bien oscura en los bordes, para que el texto blanco se lea sobre cualquier parte de la foto */
.p-velo{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 55%,rgba(11,15,23,.35) 0%,rgba(11,15,23,.78) 70%,rgba(11,15,23,.96) 100%)}
/* Haz de luz: una franja inclinada apenas más clara que va y viene */
.p-haz{position:absolute;top:-20%;left:30%;z-index:-1;width:30%;height:140%;background:linear-gradient(90deg,rgba(244,242,238,0) 0%,rgba(244,242,238,.07) 50%,rgba(244,242,238,0) 100%);transform:rotate(18deg);animation:p-haz 9s ease-in-out infinite alternate;pointer-events:none}
/* Recorrido del haz: de un costado al otro */
@keyframes p-haz{from{left:18%}to{left:58%}}
/* Capa de adelante: todo centrado, en columna. app.js la mueve un poco (efecto 3D) */
.p-capa{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:56px 96px;text-align:center;will-change:transform,opacity}
/* Logo grande con sombra para que se despegue de la foto */
.p-logo{width:clamp(84px,9vw,118px);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
/* Ceja en rojo claro */
.portada .ceja{color:var(--rojo-n)}
/* Título "Entrá a La Nave" con sombra suave */
.portada h1{font-size:clamp(44px,6.2vw,88px);font-weight:700;text-transform:uppercase;line-height:.95;color:var(--crema-n);text-shadow:0 6px 30px rgba(0,0,0,.6)}
/* "La Nave" en rojo */
.portada h1 span{color:var(--rojo-n)}
/* Párrafo debajo del título, con renglones de hasta 46 caracteres */
.p-lead{margin:0;font-size:19px;color:#D5DAE3;max-width:46ch;text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* Botones centrados (si no entran, pasan al renglón de abajo) */
.portada .acciones{justify-content:center}
/* Los tres datos (años, m², piezas) en fila, centrados */
.datos{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0;padding:0;list-style:none}
/* Cada dato en un recuadro semitransparente */
.datos li{display:flex;flex-direction:column;padding:12px 16px;border:1px solid rgba(244,242,238,.2);border-radius:8px;background:rgba(11,15,23,.45);font-size:14px;color:var(--gris-n)}
/* El número grande del dato */
.datos b{font-family:var(--display);font-size:28px;color:var(--crema-n);line-height:1.1}
/* "Cómo trabajamos ↓" abajo de todo, centrado */
.p-bajar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;font-size:14px;color:var(--gris-n);text-decoration:none}
/* Al pasar el mouse, se aclara */
.p-bajar:hover{color:var(--crema-n)}
/* Flechita que sube y baja */
.p-bajar svg{width:20px;height:20px;animation:pista 1.6s ease-in-out infinite}
/* Animación de la flechita: a mitad de camino baja 5 px */
@keyframes pista{50%{transform:translateY(5px)}}
/* Celulares: letras y espacios más chicos */
@media (max-width:900px){
  .portada h1{font-size:clamp(40px,11vw,60px)}
  .p-lead{font-size:16px}
  .p-capa{gap:14px;padding-block:40px 80px}
  .datos b{font-size:22px}
}
/* Celulares de pantalla baja (ej. iPhone SE): todavía más compacto */
@media (max-width:900px) and (max-height:760px){
  .p-logo{width:72px}
  .portada h1{font-size:clamp(34px,9vw,44px)}
  .p-lead{font-size:15px;line-height:1.45}
  .p-capa{gap:10px;padding-block:28px 72px}
  .datos li{padding:8px 12px}
  .datos b{font-size:20px}
}
/* RESPALDO: con movimiento reducido (o si app.js le pone la clase "quieta") la foto no flota ni sigue al mouse */
@media (prefers-reduced-motion:reduce){.p-fondo,.p-haz,.p-bajar svg{animation:none}}
.portada.quieta .p-fondo,.portada.quieta .p-haz{animation:none}
/* En celulares el haz de luz es un poco más ancho y marcado, para que se note en pantalla chica */
.portada.tactil .p-haz{width:55%;background:linear-gradient(90deg,rgba(244,242,238,0) 0%,rgba(244,242,238,.1) 50%,rgba(244,242,238,0) 100%);animation-duration:7s}

/* ===================== CÓMO TRABAJAMOS (5 pasos) ===================== */
/* Línea gris de fondo arriba de los pasos */
.linea-proc{height:4px;background:var(--linea);border-radius:2px;overflow:hidden;margin-bottom:-12px}
/* La parte roja que se dibuja al aparecer (la anima app.js) */
.linea-proc span{display:block;height:100%;background:var(--rojo);transform-origin:left}
/* Cinco columnas; "counter-reset" arranca un contador para numerar los pasos */
.proc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0;counter-reset:pr}
/* Cada paso suma 1 al contador */
.proc li{display:flex;flex-direction:column;gap:10px;counter-increment:pr;min-width:0}
/* El número del paso, escrito automáticamente con letra de plantilla */
.proc li::before{content:counter(pr);font-family:var(--stencil);font-weight:800;font-size:48px;line-height:.9;color:var(--rojo)}
/* Ícono del paso */
.proc svg{width:44px;height:44px;color:var(--titulo)}
/* Título del paso */
.proc h3{font-size:22px;font-weight:600;text-transform:uppercase;color:var(--titulo);line-height:1.05}
/* Explicación del paso */
.proc p{margin:0;color:var(--suave);font-size:15px}
/* Tablets: dos columnas y sin línea */
@media (max-width:960px){.proc{grid-template-columns:repeat(2,minmax(0,1fr))}.linea-proc{display:none}}
/* Celulares: una columna */
@media (max-width:520px){.proc{grid-template-columns:1fr}}

/* ===================== SELECTOR DE VEHÍCULO Y TEXTOS DEL PEDIDO ===================== */
/* La palabra que gira ("AUTO", "MOTO"...) en rojo */
.giro{display:inline-block;color:var(--rojo-n);position:relative}
/* El texto adentro puede girar porque es un bloque */
.giro span{display:inline-block}
/* Párrafo de introducción */
.lead{margin:0;font-size:19px;color:var(--gris-n);max-width:44ch}
/* Caja de los tres botones Autos / Motos / Pick-ups */
.selector{position:relative;display:inline-grid;grid-template-columns:repeat(3,auto);background:rgba(244,242,238,.08);border:1px solid rgba(244,242,238,.18);border-radius:12px;padding:4px;align-self:flex-start;max-width:100%}
/* El fondo rojo que se desliza hasta el botón elegido (app.js le cambia ancho y posición) */
.selector .ind{position:absolute;top:4px;bottom:4px;left:0;border-radius:9px;background:#C41E26;transition:transform 380ms var(--persiana),width 380ms var(--persiana);z-index:0}
/* Cada botón del selector, por encima del fondo rojo */
.tipo{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:none;background:transparent;color:var(--gris-n);font:600 15px var(--text);cursor:pointer;border-radius:9px;transition:color 250ms}
/* El botón elegido, en blanco */
.tipo[aria-pressed="true"]{color:#FBFAF7}
/* Ícono del vehículo */
.tipo svg{width:22px;height:22px}
/* Celulares angostos: botones más compactos y sin ícono */
@media (max-width:400px){.tipo{padding:0 11px;font-size:14px}.tipo svg{display:none}}
/* Fila de botones de acción */
.acciones{display:flex;flex-wrap:wrap;gap:12px}
/* Lista de sellos (Oblea en cada pieza, etc.) */
.sellos{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--gris-n)}
/* Cada sello: tilde + texto */
.sellos li{display:flex;align-items:center;gap:7px}
/* El tilde verde */
.sellos svg{width:18px;height:18px;color:#5CC98A}

/* ===================== ORDEN DE PEDIDO (el "ticket" del formulario) ===================== */
/* El ticket: fondo claro, sombra fuerte y apenas torcido */
.orden{position:relative;background:var(--superficie);color:var(--tinta);border-radius:6px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:0 24px 60px rgba(0,0,0,.45);transform:rotate(1.2deg)}
/* Borde de arriba y de abajo "troquelado" (semicírculos), como un ticket cortado */
.orden::before,.orden::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 7px 0,transparent 5px,var(--superficie) 5.5px) 0 0/14px 10px repeat-x}
/* El troquelado de arriba, dado vuelta */
.orden::before{top:-9px;transform:rotate(180deg)}
/* El troquelado de abajo */
.orden::after{bottom:-9px}
/* Encabezado del ticket con línea punteada */
.orden-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px dashed var(--linea);padding-bottom:12px}
/* Título "Orden de pedido" */
.orden h3{font-size:26px;font-weight:700;text-transform:uppercase;color:var(--titulo);line-height:1}
/* "Va por WhatsApp" */
.orden-top span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);white-space:nowrap}
/* Dos campos por fila */
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Cada campo: etiqueta arriba, casilla abajo */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
/* La etiqueta del campo (MARCA, MODELO...) */
.campo label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
/* La casilla donde se escribe. 16 px de letra evita que el iPhone haga zoom al tocarla */
.campo input,.campo select{box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;background:var(--alta);color:var(--tinta);border:1px solid var(--control);border-radius:8px;font:16px var(--text)}
/* Campo con error: borde rojo grueso */
.campo.err input{border:2px solid var(--rojo)}
/* Texto del error debajo del campo */
.campo small{font-size:13px;color:var(--rojo);font-weight:500}
/* Si no hay error (texto vacío), no ocupa lugar */
.campo small:empty{display:none}
/* Zona de "chat" con la vista previa del mensaje */
.chat{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:10px;background:var(--fondo)}
/* Burbuja verde estilo WhatsApp */
.burbuja{align-self:flex-end;max-width:92%;background:var(--wa-burbuja);color:var(--tinta);border-radius:12px 12px 2px 12px;padding:9px 12px 6px;font-size:14px;line-height:1.45;overflow-wrap:anywhere;transition:transform 200ms var(--rebote)}
/* "Latido" de la burbuja al escribir */
.burbuja.late{transform:scale(1.03)}
/* Hora y doble tilde de la burbuja */
.burbuja time{display:flex;justify-content:flex-end;align-items:center;gap:3px;margin-top:3px;font-size:11px;color:var(--suave)}
/* Doble tilde celeste */
.burbuja time svg{width:16px;height:10px;color:#3B9BD9}
/* El botón de enviar ocupa todo el ancho */
.orden .btn{width:100%}
/* Nota chiquita al pie del ticket */
.nota{margin:0;font-size:12px;color:var(--suave);text-align:center}
/* Tablets y celulares: una sola columna y el ticket derecho */
@media (max-width:940px){.hero .in{grid-template-columns:1fr;gap:44px;padding-block:44px 64px}.orden{transform:none}}

/* ===================== CINTA ROJA DE PIEZAS ===================== */
/* Franja roja con bordes negros; lo que se sale no se ve */
.cinta{background:#C41E26;color:#FBFAF7;overflow:hidden;white-space:nowrap;border-block:3px solid var(--negro)}
/* Fila de palabras que se mueve sin parar (38 segundos por vuelta) */
.cinta-t{display:inline-flex;gap:28px;padding-block:14px;animation:cinta 38s linear infinite;font-family:var(--display);font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.06em}
/* Puntito negro entre palabra y palabra */
.cinta-t span::after{content:"";display:inline-block;width:8px;height:8px;margin-left:28px;border-radius:50%;background:var(--negro);vertical-align:middle}
/* Con el mouse encima, la cinta se frena */
.cinta:hover .cinta-t{animation-play-state:paused}
/* La cinta se corre la mitad de su largo (la lista está repetida dos veces, así no se nota el salto) */
@keyframes cinta{to{transform:translateX(-50%)}}

/* ===================== SECCIONES CLARAS (títulos y espacios) ===================== */
/* Espacio arriba y abajo de cada sección; contenido en columna */
.sec{padding-block:80px;display:flex;flex-direction:column;gap:40px}
/* Encabezado de sección: ceja, título y texto */
.sec-head{display:flex;flex-direction:column;gap:10px;max-width:64ch}
/* Título de sección; "overflow:hidden" esconde la persiana cuando sube */
.sec-head h2{position:relative;align-self:flex-start;font-size:clamp(32px,4.6vw,52px);font-weight:700;text-transform:uppercase;line-height:1;color:var(--titulo);overflow:hidden;padding-bottom:4px}
/* Texto bajo el título */
.sec-head p{margin:0;color:var(--suave);font-size:18px}
/* Las cejas no heredan el tamaño grande del párrafo */
.sec-head p.ceja,.caja p.ceja,.caja.alerta p.ceja{color:var(--rojo);font-size:13px}
/* Persiana azul con listones que tapa el título y sube (la crea app.js) */
.persiana-t{position:absolute;inset:0;background:repeating-linear-gradient(#1C2C52 0 9px,#27396B 9px 11px);border-bottom:4px solid #C41E26;pointer-events:none}
/* Sección sin espacio arriba (cuando sigue a otra sección clara) */
.sin-arriba{padding-top:0}

/* ===================== ETIQUETAS DE DEPÓSITO (repuestos por categoría) ===================== */
/* Tres columnas de etiquetas */
.etqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px;padding-top:22px}
/* La etiqueta gira desde el punto donde "cuelga" (22 px arriba) */
.etq-w{position:relative;transform-origin:50% -22px}
/* El hilo del que cuelga la etiqueta */
.etq-w::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:34px;margin-left:-1px;background:var(--control);z-index:2}
/* Con el mouse encima, la etiqueta se hamaca */
.etq-w:hover{animation:hamaca 1.1s var(--salida)}
/* Movimiento de hamaca: va y viene cada vez menos */
@keyframes hamaca{0%{transform:rotate(0)}20%{transform:rotate(-3deg)}45%{transform:rotate(2deg)}70%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
/* La etiqueta en sí, con las puntas de arriba cortadas en diagonal (clip-path) */
.etq{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 22px 0;background:var(--superficie);clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%,0 22px);box-shadow:inset 0 0 0 1px var(--linea);min-height:100%;box-sizing:border-box}
/* El agujerito de la etiqueta */
.etq::before{content:"";position:absolute;left:50%;top:9px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--fondo);box-shadow:inset 0 0 0 2px var(--control)}
/* Fila de arriba: código y dibujo */
.etq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
/* Código grande (MOT, TRA...) con letra de plantilla */
.cod{font-family:var(--stencil);font-weight:800;font-size:54px;line-height:.85;letter-spacing:.03em;color:var(--rojo)}
/* Dibujo de la categoría */
.etq-ic{width:46px;height:46px;color:var(--titulo);flex:none}
/* Nombre de la categoría */
.etq h3{font-size:26px;font-weight:600;text-transform:uppercase;line-height:1;color:var(--titulo)}
/* Lista de piezas como botoncitos */
.piezas{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
/* Cada pieza: botoncito gris */
.piezas a{display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:6px;background:var(--fondo);border:1px solid var(--linea);font-size:14px;text-decoration:none;transition:background-color 200ms,border-color 200ms,color 200ms,transform 120ms}
/* Con el mouse encima se pone verde WhatsApp */
.piezas a:hover{background:var(--wa-burbuja);border-color:var(--wa);color:var(--tinta)}
/* Al apretarlo se achica */
.piezas a:active{transform:scale(.95)}
/* "Consultar toda la categoría", abajo con línea punteada */
.etq-pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 18px;border-top:2px dashed var(--linea);text-decoration:none;font-weight:600;font-size:15px;color:var(--wa)}
/* Flechita */
.etq-pie svg{width:20px;height:20px;transition:transform 250ms var(--salida)}
/* La flechita avanza con el mouse encima */
.etq-pie:hover svg{transform:translateX(5px)}
/* Tablets: dos columnas */
@media (max-width:960px){.etqs{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Celulares: una columna y código más chico */
@media (max-width:600px){.etqs{grid-template-columns:1fr;gap:40px}.cod{font-size:46px}}

/* ===================== BANDA DE MOTORES (franja azul) ===================== */
/* Fondo azul */
.banda{position:relative;background:var(--azul);color:var(--sobre-azul);overflow:hidden}
/* Chapa acanalada */
.banda::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 3px,transparent 3px 14px,rgba(0,0,0,.14) 14px 17px,transparent 17px 28px)}
/* Texto a la izquierda, tacómetro y botón a la derecha */
.banda .in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding-block:64px}
/* Ceja en rojo claro */
.banda .ceja{color:var(--rojo-n)}
/* Título de la banda */
.banda h2{font-size:clamp(32px,5vw,56px);font-weight:700;text-transform:uppercase;line-height:.95;color:var(--sobre-azul);margin-top:10px}
/* Texto de la banda */
.banda p{margin:14px 0 0;font-size:18px;opacity:.86;max-width:52ch}
/* Columna derecha: tacómetro arriba, botón abajo */
.banda-r{display:flex;flex-direction:column;align-items:center;gap:18px}
/* Tamaño del tacómetro */
.taco{width:210px;max-width:100%}
/* Celulares: todo en una columna */
@media (max-width:760px){.banda .in{grid-template-columns:1fr}.banda-r{align-items:flex-start}}

/* ===================== CÓMO COMPRAR (3 pasos con el autito) ===================== */
/* Ruta por donde avanza el auto */
.ruta{position:relative;height:44px;margin-bottom:-8px}
/* La línea punteada de la ruta */
.ruta::before{content:"";position:absolute;left:0;right:0;top:32px;border-top:3px dashed var(--control)}
/* El autito */
.ruta svg{position:absolute;left:0;top:0;width:88px;height:40px}
/* Tres columnas numeradas automáticamente */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0;counter-reset:p}
/* Cada paso suma 1 */
.paso{display:flex;flex-direction:column;gap:10px;counter-increment:p}
/* Número grande del paso */
.paso::before{content:counter(p);font-family:var(--stencil);font-weight:800;font-size:64px;line-height:.9;color:var(--rojo)}
/* Título del paso */
.paso h3{font-size:24px;font-weight:600;text-transform:uppercase;color:var(--titulo)}
/* Texto del paso */
.paso p{margin:0;color:var(--suave)}
/* Celulares: una columna y sin ruta */
@media (max-width:760px){.pasos{grid-template-columns:1fr}.ruta{display:none}}

/* ===================== CONFIANZA (oblea y anti estafas) ===================== */
/* Dos cajas lado a lado */
.conf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
/* Caja con borde redondeado */
.caja{padding:28px;border-radius:16px;background:var(--superficie);border:1px solid var(--linea);display:flex;flex-direction:column;gap:14px}
/* Título de la caja */
.caja h3{font-size:28px;font-weight:700;text-transform:uppercase;line-height:1;color:var(--titulo)}
/* Texto de la caja */
.caja p{margin:0;color:var(--suave)}
/* Caja de alerta: fondo rosado */
.caja.alerta{background:var(--rojo-suave);border-color:transparent}
/* Título de la alerta en rojo */
.caja.alerta h3{color:var(--rojo)}
/* Texto de la alerta más oscuro (más importante) */
.caja.alerta p{color:var(--tinta)}
/* Dibujo de la oblea: etiqueta blanca con código de barras, apenas torcida */
.oblea{align-self:flex-start;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;background:#FFFFFF;color:#1A1F2B;border-radius:8px;padding:12px 16px;box-shadow:0 0 0 1px #D5D0C6,0 6px 16px rgba(17,23,34,.12);transform:rotate(-2deg);transition:transform 400ms var(--rebote)}
/* Con el mouse encima se endereza y crece un poco */
.oblea:hover{transform:rotate(0) scale(1.04)}
/* "Ley 25.761 · RUDAC" */
.oblea .ley{grid-column:1/-1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#545C6B}
/* Código de barras dibujado con rayas de CSS */
.oblea .barras{width:96px;height:38px;background:repeating-linear-gradient(90deg,#1A1F2B 0 2px,transparent 2px 4px,#1A1F2B 4px 5px,transparent 5px 8px,#1A1F2B 8px 11px,transparent 11px 12px)}
/* Número de la oblea, con números del mismo ancho */
.oblea b{font-family:var(--display);font-size:18px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* Botón "Copiar" del número */
.copiar{min-height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--rojo);background:transparent;color:var(--rojo);font:600 14px var(--text);cursor:pointer;flex:none}
/* Celulares: una caja abajo de la otra */
@media (max-width:760px){.conf{grid-template-columns:1fr}}
/* Lista de números oficiales */
.numeros{display:flex;flex-direction:column;gap:10px}
/* Tarjetas de número con fondo blanco */
.numeros .linea-fija{background:var(--alta)}

/* ===================== PREGUNTAS FRECUENTES ===================== */
/* Lista con una línea arriba */
.faq{display:flex;flex-direction:column;border-top:2px solid var(--titulo)}
/* Cada pregunta separada por una línea */
.faq details{border-bottom:1px solid var(--linea)}
/* La pregunta (lo que se toca para abrir) */
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-weight:500;font-size:18px}
/* Saca el triangulito que pone Safari */
.faq summary::-webkit-details-marker{display:none}
/* El "+" rojo a la derecha */
.faq summary::after{content:"+";font-family:var(--display);font-size:32px;color:var(--rojo);line-height:1;transition:transform 300ms var(--salida)}
/* Abierta: el "+" gira y queda como "×" */
.faq details[open] summary::after{transform:rotate(45deg)}
/* La respuesta */
.faq details p{margin:0 0 20px;color:var(--suave);max-width:70ch}

/* ===================== PIE: todos los canales de contacto ===================== */
/* Fondo negro */
.pie{background:var(--negro);color:var(--gris-n);font-size:15px}
/* Parte de arriba del pie: título y canales, uno abajo del otro */
.pie-contacto{display:flex;flex-direction:column;gap:40px;padding-block:72px 48px}
/* Encabezado: ceja arriba; título y texto lado a lado (con "áreas" de grilla con nombre) */
.pie-head{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ceja ceja" "titulo texto";column-gap:40px;row-gap:8px;align-items:end}
/* La ceja va en el área "ceja" y en rojo claro */
.pie-head .ceja{grid-area:ceja;color:var(--rojo-n)}
/* "HABLEMOS" va en el área "titulo" */
.pie-head h2{grid-area:titulo;font-size:clamp(40px,5vw,64px);font-weight:700;text-transform:uppercase;line-height:.92;color:var(--crema-n)}
/* Párrafos del encabezado */
.pie-head p{margin:0;max-width:52ch}
/* El texto explicativo va en el área "texto" */
.pie-head p:not(.ceja){grid-area:texto;padding-bottom:6px}
/* Columnas de canales: tantas como entren de al menos 230 px */
.canales{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:32px 24px;align-content:start}
/* Cada columna (WhatsApp, Email, Redes, El galpón) */
.canal{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Título de la columna con línea roja */
.canal h3{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:2px solid #C41E26;font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--crema-n)}
/* Ícono del título */
.canal h3 svg{width:20px;height:20px;flex:none}
/* Lista de renglones */
.canal-lista{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
/* Cada renglón tocable (número, mail o red) */
.canal-link{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:10px;border:1px solid rgba(185,193,207,.2);color:var(--crema-n);text-decoration:none;transition:background-color 200ms,border-color 200ms,transform 120ms}
/* Con el mouse encima se aclara */
.canal-link:hover{background:rgba(244,242,238,.06);border-color:rgba(185,193,207,.5)}
/* Al apretarlo se achica */
.canal-link:active{transform:scale(.97)}
/* Ícono del renglón */
.canal-link svg{width:24px;height:24px;flex:none;color:var(--gris-n)}
/* Textos del renglón, uno abajo del otro */
.canal-link span{display:flex;flex-direction:column;min-width:0}
/* Título chico (VENTAS, INSTAGRAM...) */
.canal-link small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-n)}
/* Dato grande (número o @usuario). text-transform:none: los usuarios se muestran tal cual, sin mayúsculas */
.pie .canal-link b{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--crema-n);overflow-wrap:anywhere}
/* Ícono de WhatsApp en verde */
#canal-wa .canal-link svg{color:#5CC98A}
/* El mail con letra común y más chica (es largo) */
.pie #pie-mail b{font-family:var(--text);font-size:14px;font-weight:500;letter-spacing:0}
/* Botón rojo "Cómo llegar" */
#pie-mapa{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;background:#C41E26;color:#FBFAF7;font-weight:600;text-decoration:none}
/* Más oscuro con el mouse encima */
#pie-mapa:hover{background:#A3171E}
/* Franja de abajo del pie: logo y botón "Ver la intro de nuevo" */
.pie-base{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding-block:28px calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(185,193,207,.18)}
/* Logo + nombre */
.pie-m{display:flex;align-items:center;gap:14px}
/* Logo del pie */
.pie-m img{width:64px;height:auto}
/* Nombre arriba, texto del RUDAC abajo */
.pie-m div{display:flex;flex-direction:column}
/* "LA NAVE AUTOPARTES" */
.pie b{font-family:var(--display);color:var(--crema-n);font-size:20px;text-transform:uppercase}
/* Texto del RUDAC */
.pie-m span{font-size:14px}
/* Botón "Ver la intro de nuevo" */
.pie button{background:transparent;color:var(--gris-n);border:1px solid rgba(185,193,207,.4);border-radius:8px;min-height:40px;padding:8px 14px;font:500 13px var(--text);cursor:pointer}
/* Con el mouse encima se aclara */
.pie button:hover{color:var(--crema-n);border-color:var(--gris-n)}
/* Botones de la franja final, en fila */
.pie-botones{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Link discreto a la página interna de presupuestos */
.pie-personal{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;font-size:13px;color:var(--gris-n);text-decoration:underline;text-underline-offset:3px}
/* Con el mouse encima se aclara */
.pie-personal:hover{color:var(--crema-n)}
/* Celulares: todo en una columna */
@media (max-width:760px){.pie-contacto{gap:32px;padding-block:56px 40px}.pie-head{grid-template-columns:1fr;grid-template-areas:"ceja" "titulo" "texto"}}

/* ===================== PIE: AYUDA Y LEGALES ===================== */
/* Franja final con los links legales y el copyright */
.pie-legal{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 32px;align-items:start;padding-block:24px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(185,193,207,.18);font-size:14px}
/* Fila de links que baja sola si no entra */
.pie-links{display:flex;flex-wrap:wrap;gap:4px 20px}
/* Cada link legal: gris, con alto cómodo para el dedo */
.pie-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--gris-n);text-decoration:none}
/* Con el mouse encima, subrayado claro */
.pie-links a:hover{color:var(--crema-n);text-decoration:underline}
@media (max-width:760px){.pie-legal{grid-template-columns:1fr}}
/* La franja de arriba (logo) ya no necesita tanto espacio abajo */
.pie-base{padding-bottom:24px}

/* ===================== BOTÓN FLOTANTE DE WHATSAPP ===================== */
/* Círculo verde fijo abajo a la derecha */
.flota{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;width:62px;height:62px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(17,23,34,.35);transition:transform 250ms var(--salida)}
/* Crece un poco con el mouse encima */
.flota:hover{transform:scale(1.08)}
/* Al llegar al pie se esconde (los canales ya están ahí). Clase que pone app.js */
.flota.oculta{transform:scale(0);pointer-events:none}
/* Ícono */
.flota svg{width:32px;height:32px}
/* Aro que "late" alrededor del botón */
.flota::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:pulso 2.6s ease-out infinite}
/* El aro crece y se desvanece */
@keyframes pulso{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.6);opacity:0}}

/* ===================== PASE DE FRANJA ROJA (al navegar con el menú) ===================== */
/* Pantalla roja escondida a la izquierda; app.js la hace cruzar */
.pase{position:fixed;inset:0;z-index:90;background:#C41E26;pointer-events:none;transform:translateX(-101%)}

/* ===================== ACCESIBILIDAD ===================== */
/* "Saltar a la orden de pedido": escondido arriba, aparece al usar Tab */
.saltar{position:absolute;left:16px;top:-60px;z-index:200;background:var(--alta);color:var(--tinta);padding:10px 16px;border-radius:8px;font-weight:600}
/* Visible cuando tiene el foco */
.saltar:focus{top:12px}
/* El "depósito" de íconos (sprite) no ocupa lugar en pantalla */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ===================== VENTANAS (selector de WhatsApp y alerta de estafas) ===================== */
/* La ventana: centrada, redondeada, con sombra; si es más alta que la pantalla, se puede bajar adentro */
dialog.hoja{position:relative;border:0;padding:0;margin:auto;width:min(92vw,440px);max-height:calc(100dvh - 32px);border-radius:16px;background:var(--superficie);color:var(--tinta);box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:auto}
/* RESPALDO: cerrada no se ve (navegadores sin <dialog> no lo saben solos) */
dialog.hoja:not([open]){display:none}
/* Fondo oscuro detrás de la ventana */
dialog.hoja::backdrop{background:rgba(9,11,16,.62)}
/* Al abrirse, sube y aparece */
dialog.hoja[open]{animation:hoja-entra 320ms var(--salida)}
/* Animación de entrada: desde 24 px más abajo y transparente */
@keyframes hoja-entra{from{opacity:0;transform:translateY(24px)}}
/* RESPALDO para navegadores sin ventanas modales: la dibujamos fija, centrada y oscurecemos el resto con una sombra gigante */
dialog.hoja.sin-modal[open]{display:block;position:fixed;inset:0;height:fit-content;z-index:150;box-shadow:0 0 0 100vmax rgba(9,11,16,.62),0 24px 60px rgba(0,0,0,.45)}
/* Franja roja de arriba de la ventana */
.hoja-franja{height:8px;background:#C41E26}
/* Contenido de la ventana */
.hoja-c{display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px}
/* Título de la ventana */
.hoja h2{font-size:28px;font-weight:700;text-transform:uppercase;line-height:1;color:var(--titulo)}
/* Párrafos sin margen */
.hoja p{margin:0}
/* Texto secundario */
.hoja .suave{color:var(--suave);font-size:14px}
/* Lista de líneas de WhatsApp */
.lineas{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
/* Botón verde de cada línea */
.linea-wa{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px;border-radius:12px;background:var(--wa);color:#fff;text-decoration:none;transition:transform 120ms,background-color 200ms}
/* Más oscuro con el mouse encima */
.linea-wa:hover{background:#156A39}
/* Se achica al apretarlo */
.linea-wa:active{transform:scale(.97)}
/* Ícono */
.linea-wa svg{width:26px;height:26px;flex:none}
/* Nombre arriba, número abajo */
.linea-wa span{display:flex;flex-direction:column;line-height:1.25}
/* "WhatsApp Ventas" */
.linea-wa b{font-size:16px}
/* El número */
.linea-wa small{font-size:14px;opacity:.9;font-variant-numeric:tabular-nums}
/* Tarjeta fija con un número (en la alerta y en la caja anti estafas) */
.linea-fija{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:var(--alta);border:1px solid var(--linea)}
/* Ícono verde */
.linea-fija svg{width:24px;height:24px;color:var(--wa);flex:none}
/* Textos de la tarjeta; ocupan el lugar que sobra */
.linea-fija span{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
/* "WhatsApp Ventas" */
.linea-fija small{color:var(--suave);font-size:13px}
/* El número grande */
.linea-fija b{font-family:var(--display);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
/* Fila del botón "Entendido" */
.hoja-acc{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Botón azul "Entendido" */
.btn-sec{background:var(--azul);color:var(--sobre-azul)}
/* Se aclara con el mouse encima */
.btn-sec:hover{filter:brightness(1.1)}
/* Botón "×" para cerrar, arriba a la derecha */
.cerrar-x{position:absolute;top:14px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--suave);font-size:26px;line-height:1;cursor:pointer}
/* Con movimiento reducido, la ventana aparece sin animación */
@media (prefers-reduced-motion:reduce){dialog.hoja[open]{animation:none}}

/* ===================== CUADRO DE DIAGNÓSTICO (solo con ?diagnostico en la dirección) ===================== */
/* Cuadro blanco fijo abajo a la izquierda, con su propia barra si hay muchos avisos */
.diag{position:fixed;left:12px;bottom:12px;z-index:300;width:min(92vw,460px);max-height:45vh;overflow:auto;padding:12px 14px;border-radius:10px;background:#FFFFFF;color:#1A1F2B;box-shadow:0 10px 30px rgba(0,0,0,.35);font:13px/1.45 var(--text)}
/* Título del cuadro */
.diag p{margin:0 0 8px}
/* Lista de avisos */
.diag ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
/* Etiqueta de color de cada aviso */
.diag-t{display:inline-block;padding:1px 6px;border-radius:4px;color:#FFFFFF;font-size:11px}
/* Rojo: error en nuestro código */
.diag-LOCAL{background:#C41E26}
/* Azul: error en código de terceros */
.diag-BIBLIOTECA{background:#1C2C52}
/* Marrón: el navegador no tiene una función, se usa un respaldo */
.diag-NAVEGADOR{background:#8A5A00}

/* ===================== PÁGINA 404 (dirección que no existe) ===================== */
/* Todo centrado en la pantalla */
.pagina-404 main{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding-block:48px}
/* Logo redondeado */
.pagina-404 img{border-radius:12px}
/* Título */
.pagina-404 h1{font-size:clamp(32px,6vw,52px);font-weight:700;text-transform:uppercase;line-height:1;color:var(--titulo)}
/* Texto */
.pagina-404 p{margin:0;color:var(--suave)}
/* Ceja roja */
.pagina-404 .ceja{color:var(--rojo)}

/* ===================== MAPA (autito que llega + Google Maps) ===================== */
/* Bloque del mapa, debajo de los canales de contacto */
.mapa{display:flex;flex-direction:column;gap:0;margin-top:40px;border:1px solid rgba(185,193,207,.18);border-radius:12px;overflow:hidden;background:#0E131D}
/* Franja del camino: alto fijo, con el autito y el destino adentro */
.viaje{position:relative;height:64px;overflow:hidden;background:#151B27}
/* La calle: franja gris oscura con línea punteada amarilla en el medio */
.viaje-calle{position:absolute;left:0;right:0;top:38px;height:18px;background:#232A38}
.viaje-calle::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:repeating-linear-gradient(90deg,#F2C66D 0 14px,transparent 14px 26px);opacity:.7}
/* El autito: empieza a la izquierda; cuando la franja se ve (clase "andando") viaja hasta el destino */
.viaje-auto{position:absolute;left:12px;top:23px;width:64px;height:28px}
.viaje.andando .viaje-auto{animation:auto-viaje 7s cubic-bezier(.45,0,.2,1) infinite}
/* El viaje: arranca, llega al pin (a 150 px del borde derecho), se queda estacionado y se desvanece para volver a empezar */
@keyframes auto-viaje{0%{left:-70px;opacity:1}55%{left:calc(100% - 210px)}88%{left:calc(100% - 210px);opacity:1}96%{left:calc(100% - 210px);opacity:0}100%{left:-70px;opacity:0}}
/* Las ruedas giran mientras el auto anda (giran sobre su propio centro) */
.viaje-auto .rueda{transform-box:fill-box;transform-origin:center;stroke-dasharray:4 3}
.viaje.andando .rueda{animation:rueda-gira 7s linear infinite}
@keyframes rueda-gira{0%{transform:rotate(0)}55%{transform:rotate(1440deg)}100%{transform:rotate(1440deg)}}
/* El destino: pin rojo con "La Nave", fijo a la derecha */
.viaje-destino{position:absolute;right:20px;top:8px;display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--crema-n)}
.viaje-destino svg{width:26px;height:26px;color:#C41E26;fill:currentColor}
/* El pin salta un poquito cuando el auto llega */
.viaje.andando .viaje-destino svg{animation:pin-llega 7s ease-out infinite}
@keyframes pin-llega{0%,52%{transform:none}58%{transform:translateY(-6px)}64%,100%{transform:none}}
/* Marco del mapa: alto cómodo en compu, un poco menos en celular */
.mapa-marco{position:relative;height:340px;background:#1A2030}
.mapa-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.15)}
/* Link "Abrir en Google Maps" debajo del mapa: renglón completo, fácil de tocar */
.mapa-abrir{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;color:var(--crema-n);font-weight:600;text-decoration:none;border-top:1px solid rgba(185,193,207,.18)}
.mapa-abrir:hover{background:rgba(244,242,238,.06)}
.mapa-abrir svg{width:20px;height:20px;color:#F0585E}
/* Texto "Cargando…", centrado (queda debajo del iframe; si el mapa no carga, se lee) */
.mapa-respaldo{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;text-align:center;color:var(--gris-n);font-size:14px}
@media (max-width:760px){.mapa-marco{height:260px}.viaje-destino{right:12px;font-size:14px}@keyframes auto-viaje{0%{left:-70px;opacity:1}55%{left:calc(100% - 180px)}88%{left:calc(100% - 180px);opacity:1}96%{left:calc(100% - 180px);opacity:0}100%{left:-70px;opacity:0}}}
/* Movimiento reducido: el auto queda estacionado al lado del destino, sin animación */
@media (prefers-reduced-motion:reduce){.viaje.andando .viaje-auto,.viaje.andando .rueda,.viaje.andando .viaje-destino svg{animation:none}.viaje-auto{left:auto;right:140px}}