/* =============================================================================
   Automotora Sucre - hoja de estilo unica del sitio.
   Extraida de index.html cuando el sitio paso de una pagina a dieciocho.
   La primera mitad es el CSS de la portada, tal cual estaba. Al final estan
   los bloques nuevos de las paginas interiores (migas, prose, listados).
   ============================================================================= */
/* ================================ TOKENS ================================ */
:root{
  /* --- superficies claras --------------------------------------------------
     Los ratios son contra --white; sobre --paper varían menos de un 3%.       */
  --ink:#101317;         /* titulares y texto principal — 18,9:1              */
  --slate:#4A535E;       /* cuerpo sobre claro          —  8,3:1  (AAA)       */
  --muted:#5F6A78;       /* metadatos sobre claro       —  5,5:1  (AA)        */
  --line:#E4E8ED;        /* separadores y bordes suaves                       */
  --paper:#F5F6F8;
  --white:#FFFFFF;

  /* --- superficies oscuras -------------------------------------------------
     Ratios contra --graphite, que es la más clara de las dos: si pasan ahí,
     pasan también sobre --ink. Esta familia NO existía como token y por eso
     el hero se quedó sin sus colores al faltarle la clase .dark.             */
  --graphite:#191E25;    /* superficie oscura elevada                         */
  --surface-dark:#141A21;/* hueco / marco de foto dentro de lo oscuro         */
  --on-dark:#FFFFFF;     /* titulares sobre oscuro      — 15,9:1              */
  --on-dark-2:#C4CCD5;   /* cuerpo sobre oscuro         — 10,5:1  (AAA)       */
  --on-dark-3:#949EAB;   /* metadatos sobre oscuro      —  6,2:1  (AA)        */
  --line-dark:#2B333D;   /* separadores sobre oscuro                          */
  --edge-dark:#5E6A78;   /* borde de CONTROL sobre oscuro — 3,3:1 (WCAG 1.4.11)*/

  --accent:#FFB800;      /* EXCLUSIVO del CTA primario + foco. Nada más.      */
  --accent-press:#E8A600;
  --danger:#B3261E;

  --s1:4px;  --s2:8px;  --s3:16px; --s4:24px;
  --s5:32px; --s6:48px; --s7:64px; --s8:96px;

  --r:16px; --r-sm:12px; --pill:999px;
  --wrap:1180px;
  --f-display:"Saira Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bar-h:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 var(--f-body);overflow-x:hidden;padding-bottom:var(--bar-h)}

h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:.95;
  letter-spacing:.005em;text-transform:uppercase;margin:0}
h1{font-size:clamp(40px,10.5vw,84px)}
h2{font-size:clamp(32px,6.6vw,60px)}
h3{font-size:clamp(21px,2.7vw,26px);line-height:1.1}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4)}
section{padding-block:var(--s7)}
@media(min-width:768px){section{padding-block:var(--s8)}}
.lede{font:400 clamp(16px,2.1vw,19px)/1.6 var(--f-body);color:var(--slate)}
.dark{background:var(--ink);color:var(--white)}
/* Texto claro sobre oscuro: un punto más de interletraje e interlínea. Es lo que
   compensa el sangrado óptico del texto claro contra un fondo oscuro. */
.dark .lede{color:var(--on-dark-2);letter-spacing:.006em;line-height:1.65}

/* ===================== SIGNATURE: palabra contorneada ===================== */
/* Un tramo del titular va en contorno en vez de relleno. Es el recurso que se
   repite en toda la página. No usa color de acento (el acento es sólo del CTA). */
.ol{color:inherit}
@supports((-webkit-text-stroke:1px #000)){
  .ol{color:transparent;-webkit-text-stroke:.035em var(--ink)}
  .dark .ol,.hero .ol{-webkit-text-stroke-color:var(--white)}
}

/* ============================ BADGE de sección ============================ */
.badge{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--pill);padding:7px 16px 7px 12px;
  font:600 12px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);margin-bottom:var(--s4)}
.badge svg{flex:none;color:var(--ink)}
.dark .badge{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:var(--on-dark-2)}
.dark .badge svg{color:var(--white)}
/* En móvil el tracking de .13em estiraba la píldora a 320px dentro de una columna
   de 327px: dejaba de leerse como chip y parecía una barra de ancho completo. */
@media(max-width:599px){
  .badge{font-size:11px;letter-spacing:.08em;padding:6px 14px 6px 11px}
}

/* ================================ BOTONES ================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:14px 16px 14px 24px;border-radius:var(--pill);
  border:2px solid transparent;font-family:var(--f-display);font-weight:700;
  font-size:19px;letter-spacing:.02em;text-transform:uppercase;line-height:1;
  text-decoration:none;cursor:pointer;text-align:left;
  transition:background-color .15s ease,transform .08s ease,border-color .15s ease}
.btn:active{transform:translateY(1px)}
/* --- CTA PRIMARIO: único elemento que lleva el acento en toda la página --- */
.btn--primary{background:var(--accent);color:var(--ink);width:100%}
.btn--primary:hover{background:var(--accent-press)}
.btn__ico{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);
  color:var(--accent);display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto}
@media(min-width:600px){.btn--primary{width:auto}}
/* --- Móvil: el botón ocupa todo el ancho, así que la flecha queda flotando lejos
   del rótulo y abre un vacío en medio. Se oculta y el rótulo se centra: el texto
   recupera el ancho completo y entra en UNA sola línea. La flecha vuelve en ≥600px,
   donde el botón es de ancho automático y la flecha sí queda pegada al texto. --- */
@media(max-width:599px){
  .btn{font-size:17px;padding:14px 20px;justify-content:center;text-align:center}
  .btn .btn__ico{display:none}
}
/* Mismo criterio, pero por COMPONENTE y no por viewport: los CTA que viven
   dentro de una tarjeta son siempre de ancho completo en una columna estrecha
   (en 2 o 3 up la tarjeta baja de ~350px), así que la flecha volvería a abrir
   un hueco en medio y a partir el rótulo en dos líneas. Compactos siempre. */
.svc .btn,.step .btn{font-size:17px;padding:14px 20px;justify-content:center;text-align:center}
.svc .btn .btn__ico,.step .btn .btn__ico{display:none}
/* Envío del formulario: vía alternativa, sólido oscuro. Nunca naranjo/ámbar. */
.btn--solid{background:var(--ink);color:var(--white);width:100%}
.btn--solid:hover{background:var(--graphite)}
.btn--solid .btn__ico{background:rgba(255,255,255,.12);color:var(--white)}
/* Enlace de llamada: peso claramente menor que el CTA */
.callmini{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 2px;
  color:var(--slate);font-size:15px;font-weight:500;text-decoration:underline;
  text-underline-offset:3px}
.callmini:hover{color:var(--ink)}
.dark .callmini{color:var(--on-dark-2)}.dark .callmini:hover{color:var(--white)}

/* ================================ HEADER ================================ */
.hdr{background:var(--ink);color:var(--white);position:relative;z-index:40}
.hdr .wrap{display:flex;align-items:center;gap:var(--s3);min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white);min-height:48px}
.brand-mark{width:34px;height:34px;flex:none}
.brand-txt{font-family:var(--f-display);font-weight:800;font-size:19px;line-height:1;
  text-transform:uppercase;letter-spacing:.02em}
.brand-txt span{display:block;font:500 10px/1.4 var(--f-body);letter-spacing:.18em;
  color:var(--on-dark-3);margin-top:3px}
.hdr nav{display:none;margin-left:auto;gap:var(--s5)}
.hdr nav a{font-size:15px;font-weight:500;color:var(--on-dark-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.hdr nav a:hover{color:var(--white)}
.hdr-tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 4px;color:var(--white);text-decoration:none;font-weight:600;font-size:15px}
.hdr-cta{display:none}
@media(min-width:960px){
  .hdr nav{display:flex}
  .hdr nav a{white-space:nowrap}
  .hdr-tel{margin-left:var(--s6);white-space:nowrap}
  .hdr-cta{display:inline-flex;margin-left:var(--s4);min-height:50px;font-size:16px;
    padding:12px 12px 12px 22px;white-space:nowrap}
  .hdr-cta .btn__ico{width:30px;height:30px}
}
/* Franja estrecha: la barra fija ya no está (se oculta en 960) pero el header
   todavía no tiene ancho para marca + 4 enlaces + teléfono + CTA. Se comprime
   el header en vez de partir el rótulo del CTA en dos líneas. */
@media(min-width:960px) and (max-width:1129px){
  .hdr nav{gap:var(--s4)}
  .hdr nav a{font-size:14px}
  .hdr-tel{margin-left:var(--s4)}
  .hdr-cta{margin-left:var(--s3);font-size:15px;padding:12px 18px}
  .hdr-cta .btn__ico{display:none}
}

/* ================================= HERO ================================= */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden;
  padding-block:var(--s6) var(--s7)}
/* Tres capas, y el orden de pintado es el del DOM: ::before (respaldo pintado),
   luego el <video>, luego ::after (el velo). Si el vídeo no llega a cargar —o el
   navegador se niega a reproducirlo— queda el poster; si tampoco llega el poster,
   queda el degradado de ::before. Nunca hay un hueco negro. */
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media::before{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 11px),
    /* Halo bajo, a la altura del panel de vidrio: sin algo que refractar, un
       backdrop-filter sobre color plano se ve igual que un rectángulo opaco. */
    radial-gradient(760px 320px at 20% 94%,rgba(126,146,178,.17),transparent 70%),
    radial-gradient(900px 520px at 78% 8%,#242B34,transparent 70%),
    linear-gradient(180deg,#151A20,var(--ink))}
/* El metraje del taller es plata sobre gris a media luz y con reflejos vivos en
   las carrocerías. Sin corregirlo, el blanco del titular compite con esos brillos:
   se les baja algo de luz y saturación a los dos —foto y vídeo— para que el fondo
   sea fondo sin apagar el metraje. La corrección va idéntica en ambos: el vídeo
   arranca en el mismo cuadro que la foto, y cualquier diferencia se vería como un
   salto de color al entrar. */
.hero__still,.hero__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(.88) saturate(.92) contrast(1.03)}
/* El vídeo espera en transparente sobre la foto y sólo aparece cuando ya tiene
   cuadros que enseñar: así no hay ni caja negra ni parpadeo al empezar. */
.hero__video{opacity:0;transition:opacity .6s ease}
.hero__video.on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero__video{transition:none}}
/* Velo en dos ejes. El vertical sostiene el titular arriba y la tira de vidrio
   abajo; el horizontal abre la derecha, que es donde queda el mecánico trabajando
   y lo único que hay que dejar ver. Multiplicados dan ~.92 sobre la columna de
   texto y ~.13 en el tercio derecho. */
.hero__media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(16,19,23,.34),rgba(16,19,23,.06) 45%,rgba(16,19,23,.58)),
    linear-gradient(90deg,rgba(16,19,23,.88),rgba(16,19,23,.46) 45%,rgba(16,19,23,.08))}
/* En móvil el texto ocupa TODO el ancho, así que el velo horizontal no sirve:
   dejaría el final de cada línea sobre la parte clara del cuadro. Se cambia por
   uno plano y más cerrado. Ahí abajo, además, sólo se ve el poster. */
@media(max-width:767px){
  .hero__media::after{background:
    linear-gradient(180deg,rgba(16,19,23,.76),rgba(16,19,23,.62) 45%,rgba(16,19,23,.87))}
}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin-bottom:var(--s4);max-width:15ch}
.hero .lede{max-width:50ch;margin-bottom:var(--s4)}
.hero .actions{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;
  max-width:440px;margin-bottom:var(--s6)}
@media(min-width:600px){
  .hero .actions{flex-direction:row;align-items:center;max-width:none;gap:var(--s4)}
}
@media(min-width:900px){
  .hero{padding-top:var(--s8)}
  /* Hijo directo: .hstrip también contiene un .wrap y heredaba el min-height,
     dejando 492px de alto alrededor de un panel de 116px. */
  .hero > .wrap{display:flex;flex-direction:column;justify-content:center;min-height:60vh}
  .hero .actions{margin-bottom:var(--s7)}
}
/* franja de proof — obligatoria sobre la línea de flotación */
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--s4);
  margin-bottom:var(--s5);font-size:14.5px;color:var(--on-dark-2)}
.proof b{color:var(--white);font-weight:600}
.proof .sep{display:none;width:4px;height:4px;border-radius:50%;background:var(--on-dark-3);flex:none}
@media(min-width:560px){.proof .sep{display:block}}
/* Las estrellas NO llevan el acento: está reservado al CTA.
   Se colorean por contexto — no por la clase de la sección, porque .gbox es un
   bloque oscuro dentro de una sección clara. */
.stars{letter-spacing:2px;font-size:14px;color:currentColor}
.hero .stars{color:var(--white)}
.rev .stars{color:var(--ink)}
.gbox .stars{color:var(--white)}

/* ==================== TIRA DE SERVICIOS — VIDRIO LÍQUIDO ====================
   Traducción del recurso de la referencia (una píldora translúcida flotando
   sobre la foto del hero) a vidrio líquido de verdad, no a un rectángulo con
   opacidad: canto especular arriba, sombra de elevación, brillo que sigue al
   puntero y una lente que se desliza entre ítems.

   El panel vive DENTRO del hero, sobre fondo oscuro, y no invade la sección
   clara de abajo: si lo hiciera, el desenfoque tomaría el blanco del fondo,
   el panel se aclararía y el texto blanco perdería contraste.

   Sobre el coste: aquí sí se paga el backdrop-filter y en la barra fija no.
   La diferencia es real — este panel mide ~110px, se desplaza con la página y
   sale de pantalla; la barra fija está compuesta en cada frame del scroll.  */
.hstrip{position:relative;z-index:2;margin-top:var(--s7)}
.glass{
  position:relative;border-radius:26px;overflow:hidden;isolation:isolate;
  /* base translúcida oscura: sostiene el contraste por sí sola */
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.03) 46%,rgba(255,255,255,.07)),
    rgba(16,19,23,.42);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),   /* canto especular superior      */
    inset 1px 0 0 rgba(255,255,255,.10),   /* canto izquierdo (luz arriba-izq) */
    inset -1px 0 0 rgba(255,255,255,.05),  /* canto derecho, más apagado    */
    inset 0 -1px 0 rgba(255,255,255,.07),  /* rebote inferior               */
    0 30px 56px -22px rgba(0,0,0,.75),     /* elevación                     */
    0 3px 12px rgba(0,0,0,.3);
}
@supports((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass{-webkit-backdrop-filter:blur(22px) saturate(165%);
                 backdrop-filter:blur(22px) saturate(165%)}
}
/* brillo que sigue al puntero — el "líquido" del vidrio */
.glass__sheen{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px 160px at var(--gx,50%) var(--gy,-30%),
    rgba(255,255,255,.16),transparent 68%);
  transition:opacity .3s ease}
/* Lente que se desliza hasta el ítem apuntado.
   Cubre todo el panel y se recorta con clip-path en vez de animar width/height:
   clip-path se compone, mientras que animar el tamaño provoca reflow en cada
   frame. El degradado da el canto de luz superior dentro del recorte. */
.glass__lens{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07));
  clip-path:inset(50% 50% 50% 50% round 16px);
  transition:clip-path .34s cubic-bezier(.16,1,.3,1),opacity .22s ease}
.glass ul{position:relative;z-index:1;display:flex;gap:var(--s1);list-style:none;margin:0;
  padding:var(--s3);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.glass ul::-webkit-scrollbar{display:none}
.glass li{flex:none}
.glass a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-width:96px;min-height:64px;padding:10px;border-radius:16px;text-decoration:none;
  color:var(--on-dark-2);font:600 11px/1.2 var(--f-body);letter-spacing:.09em;
  text-transform:uppercase;text-align:center;transition:color .2s ease}
.glass a:hover,.glass a:focus-visible{color:var(--white)}
.glass svg{color:var(--white);opacity:.9;transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.glass a:hover svg{opacity:1;transform:translateY(-2px)}
@media(min-width:900px){.glass ul{justify-content:center;gap:var(--s2);padding:var(--s4) var(--s3)}}

/* ======================= MURO DE MARCAS + MEDIOS DE PAGO =======================
   Los logos reales van en assets/logos/*.svg. Mientras no existan, el JS
   detecta el error de carga y deja la palabra de la marca compuesta: nunca
   se muestra un cuadro de imagen rota. Ver assets/logos/README.md.          */
.trust{background:var(--white);border-bottom:1px solid var(--line);padding-block:var(--s7)}
.kicker{font:600 12px/1 var(--f-body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s4)}
/* ------------------------------ CINTA DE MARCAS ------------------------------
   Bucle horizontal continuo. El truco: dos juegos idénticos de logos dentro de
   una pista que se desplaza -50%; al terminar, el segundo juego está justo donde
   estaba el primero y el corte no se ve. El duplicado va aria-hidden para que
   un lector de pantalla no lea 18 marcas cuando hay 9.
   Se anima transform (compuesto), nunca left/margin.                          */
.marquee{position:relative;margin-bottom:var(--s7);overflow:hidden;
  /* difuminado en los bordes: los logos entran y salen en vez de cortarse */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}
/* El padding lateral de cada juego (32px) suma exactamente el gap (64px) en la
   costura entre juego 1 y juego 2: por eso el bucle no tiene un salto de ritmo. */
.marquee__set{display:flex;align-items:center;gap:var(--s7);list-style:none;margin:0;
  padding:0 var(--s5)}
.marquee__set li{flex:none;height:64px;display:flex;align-items:center;justify-content:center}
.logo{display:flex;align-items:center;justify-content:center}
/* --h por marca: un escudo alto y un logotipo muy ancho no pueden compartir la
   misma altura o uno aplasta al otro. Se iguala el PESO óptico, no la altura. */
.logo img{max-height:var(--h,34px);width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:opacity .3s ease,filter .3s ease}
.marquee__set li:hover .logo img{filter:none;opacity:1}
/* Marcas sin archivo de logo: manda la palabra, nunca un cuadro roto. */
.logo b{display:none;font-family:var(--f-display);font-weight:700;font-size:19px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  transition:color .3s ease;text-align:center;line-height:1.1;white-space:nowrap}
.marquee__set li:hover .logo b{color:var(--ink)}
.logo--txt img{display:none}
.logo--txt b{display:block}

@media(prefers-reduced-motion:reduce){
  /* Sin desplazamiento automático: pasa a ser una fila que el visitante
     desplaza a mano, y se oculta el juego duplicado. */
  .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
  .marquee__track{animation:none}
  .marquee__set[aria-hidden="true"]{display:none}
}

.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--s3);
  list-style:none;margin:0;padding:0}
.pay li{font:500 15px/1 var(--f-body);color:var(--slate);display:flex;align-items:center;gap:10px var(--s3)}
.pay li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--line)}
/* En pantallas angostas la fila se parte en dos y la segunda línea empezaba con
   un punto suelto. Sin separadores: el espacio ya agrupa lo suficiente. */
@media(max-width:520px){
  .pay{gap:10px var(--s4)}
  .pay li+li::before{display:none}
  .marquee__set{gap:var(--s6)}
  .marquee__set{padding-inline:var(--s4)}
}

/* ========================= PROBLEMA → RESULTADO ========================= */
.probs{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media(min-width:860px){.probs{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
.prob{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5) var(--s4)}
.prob .q{font-family:var(--f-display);font-weight:700;font-size:23px;line-height:1.08;
  text-transform:uppercase;margin-bottom:var(--s3)}
.prob>p{color:var(--slate);font-size:16px}
.prob .out{display:flex;gap:12px;margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--line);font-size:16px;font-weight:500;color:var(--ink)}
.prob .out svg{flex:none;margin-top:4px}

/* =============================== SERVICIOS =============================== */
.svcs{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media(min-width:720px){.svcs{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.svc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s3) var(--s4);display:flex;flex-direction:column}
.svc__body{padding:var(--s4) var(--s2) 0;display:flex;flex-direction:column;flex:1}
.svc h3{margin-bottom:var(--s2)}
.svc p{color:var(--slate);font-size:16px}
.svc .price{font-size:14px;color:var(--muted);font-weight:500;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.svc .btn{margin-top:var(--s4);width:100%}

/* marco de foto — el crop real que necesita el cliente */
.shot{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--graphite);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:var(--s4);text-align:center;color:var(--on-dark-3);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 10px)}
.shot--16x9{aspect-ratio:16/9}
.shot--4x3{aspect-ratio:4/3}
/* Con foto dentro, el marco deja de ser un hueco rotulado: la imagen va absoluta
   para que el centrado flex del rótulo no la encoja, y el fondo punteado se
   queda debajo como respaldo si el archivo no carga. */
.shot--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot b{font:700 11px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.shot small{font-size:12.5px;line-height:1.45;max-width:28ch;color:var(--on-dark-3)}
.shot svg{color:var(--on-dark-3)}

/* ================================= PASOS ================================= */
.steps{display:grid;gap:var(--s3);margin-top:var(--s6);list-style:none;padding:0}
/* 3 columnas sólo desde 1040px: por debajo, la tarjeta baja de ~300px y el CTA
   del paso 1 (el único paso que lleva botón) parte el rótulo en dos líneas. */
@media(min-width:1040px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5) var(--s4)}
/* Mismo recurso que la palabra contorneada del hero, para que el numeral
   pertenezca al sistema. Antes: relleno --paper + trazo --line = 1,08:1,
   literalmente invisible, y la secuencia (el único motivo para numerar) se perdía. */
.step .n{font-family:var(--f-display);font-weight:800;font-size:56px;line-height:1;
  color:var(--paper);-webkit-text-stroke:1.5px var(--muted);display:block;margin-bottom:var(--s3)}
.step h3{margin-bottom:var(--s2)}
.step p{color:var(--slate);font-size:16px}
.step .btn{margin-top:var(--s4)}

/* ============================ RESEÑAS / PROOF ============================ */
.revs{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media(min-width:860px){.revs{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5) var(--s4);display:flex;flex-direction:column;margin:0}
.rev blockquote{margin:var(--s3) 0 var(--s4);font-size:16.5px;line-height:1.6;flex:1}
.rev blockquote::before{content:"“"}.rev blockquote::after{content:"”"}
/* Resumen: NO es cita literal, por eso no lleva comillas y va etiquetado */
.rev--sum blockquote::before,.rev--sum blockquote::after{content:""}
.rev--sum blockquote{color:var(--slate)}
.rev .tag{align-self:flex-start;font:600 10px/1 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:var(--pill);padding:5px 10px;margin-bottom:var(--s3)}
.rev cite{font-style:normal;font-weight:600;font-size:15.5px;display:block}
.rev .meta{font-size:13px;color:var(--muted);margin-top:2px}
.gbox{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
  background:var(--ink);color:var(--white);border-radius:var(--r);padding:var(--s5) var(--s4);
  margin-top:var(--s4)}
.gbox .score{font-family:var(--f-display);font-weight:800;font-size:56px;line-height:.9}
.gbox .score span{font-size:22px;color:var(--on-dark-3)}
.gbox a{font-weight:600;font-size:15px;display:inline-flex;align-items:center;
  min-height:44px;color:var(--white)}
@media(min-width:700px){.gbox a{margin-left:auto}}

/* ============================== EL TALLER ============================== */
.about .grid{display:grid;gap:var(--s5);margin-top:var(--s4)}
@media(min-width:940px){
  .about .grid{grid-template-columns:1fr 1.1fr;gap:var(--s7);align-items:center}
}
.about p{color:var(--on-dark-2);margin-bottom:var(--s4)}
.feats{list-style:none;margin:var(--s5) 0;padding:0;display:grid;gap:var(--s4)}
.feats li{display:flex;gap:var(--s3)}
.feats svg{flex:none;margin-top:2px;color:var(--white)}
.feats b{display:block;font-family:var(--f-display);font-weight:700;font-size:20px;
  text-transform:uppercase;line-height:1.1;margin-bottom:4px}
.feats span{font-size:15.5px;color:var(--on-dark-2)}

/* ================================== FAQ ================================== */
.faq{margin-top:var(--s6);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;
  padding:var(--s4) 52px var(--s4) 0;min-height:64px;
  font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.15;
  text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:14px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq .a{padding:0 0 var(--s5);color:var(--slate);font-size:16.5px;max-width:70ch}
.faq .a a{color:var(--ink);font-weight:600}

/* ============================== FORMULARIO ============================== */
.formwrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4)}
@media(min-width:700px){.formwrap{padding:var(--s6)}}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.field input,.field textarea{width:100%;font:400 17px/1.5 var(--f-body);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px;min-height:54px}
.field textarea{min-height:108px;resize:vertical}
.field input:focus,.field textarea:focus{background:var(--white);border-color:var(--ink)}
.err{display:none;color:var(--danger);font-size:14px;font-weight:600;margin-top:6px}
.field.bad input,.field.bad textarea{border-color:var(--danger)}
.field.bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:15px;color:var(--slate);margin-top:var(--s4);text-align:center}
.formnote a{color:var(--ink);font-weight:600}
.ok{display:none;text-align:center;padding:var(--s5) var(--s2)}
.ok h3{margin-bottom:var(--s3)}
.ok p{color:var(--slate);margin-bottom:var(--s5)}
.sent .ok{display:block}.sent form,.sent .formnote{display:none}

/* =============================== CTA FINAL =============================== */
.final{text-align:center}
.final .lede{margin:var(--s4) auto var(--s6);max-width:48ch}
.final .btn--primary{max-width:440px;margin-inline:auto}
.guarantee{display:inline-flex;align-items:flex-start;gap:12px;text-align:left;
  border:1px solid var(--line-dark);border-radius:var(--r);padding:14px 18px;margin-top:var(--s6);
  font-size:15px;color:var(--on-dark-2);max-width:420px}
.guarantee svg{flex:none;margin-top:2px}

/* ================================= FOOTER ================================= */
.ftr{background:var(--graphite);color:var(--on-dark-2);padding-block:var(--s7) var(--s6);font-size:15px}
.ftr .grid{display:grid;gap:var(--s6)}
@media(min-width:860px){.ftr .grid{grid-template-columns:1.15fr 1fr 1.3fr;gap:var(--s6)}}
.ftr h3{color:var(--white);font-size:15px;letter-spacing:.15em;margin-bottom:var(--s4)}
.ftr a{color:var(--white)}
.ftr address{font-style:normal;line-height:1.75}
.ftr address a{display:inline-block;padding:9px 0}
.ftr .note{margin-top:var(--s3);font-size:14px;color:var(--on-dark-3)}
.ftr .row{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;
  border-bottom:1px solid var(--line-dark)}
/* Enlace suelto (no va dentro de una frase) -> debe cumplir el mínimo de 44px */
.maplink{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.mapbox{position:relative;border:1px solid var(--line-dark);border-radius:var(--r-sm);overflow:hidden;
  aspect-ratio:16/10;background:var(--surface-dark)}
.mapbox button{position:absolute;inset:0;width:100%;border:0;background:transparent;
  color:var(--on-dark-2);cursor:pointer;font:600 15px/1.5 var(--f-body);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:8px}
.mapbox button:hover{color:var(--white);background:rgba(255,255,255,.04)}
.mapbox iframe{width:100%;height:100%;border:0;display:block}
.legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-dark);
  font-size:13px;color:var(--on-dark-3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  justify-content:space-between}

/* ============================== BARRA FIJA ============================== */
/* El gutter de la barra es el MISMO que el de .wrap (24px). Con 16px el CTA fijo
   quedaba 8px más cerca del borde que el CTA del hero justo encima: al aparecer,
   las dos píldoras ámbar se veían desalineadas. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;align-items:center;
  /* Sin backdrop-filter: a 97% de opacidad el desenfoque no se ve, y era la
     única capa compuesta por GPU presente durante el 100% del scroll. */
  background:rgba(16,19,23,.97);border-top:1px solid var(--line-dark);
  padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .22s ease;visibility:hidden}
.bar.on{transform:none;visibility:visible}
.bar .btn--primary{flex:1;min-height:54px;font-size:16px;padding:12px 14px;width:auto}
.bar .icall{flex:none;width:54px;height:54px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--edge-dark);border-radius:50%;color:var(--white);
  text-decoration:none}
.bar .icall:hover{border-color:var(--on-dark-3)}
@media(min-width:960px){.bar{display:none}}
/* Flotante WhatsApp — sólo desktop; en móvil manda la barra */
.float{display:none}
@media(min-width:960px){
  .float{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;
    align-items:center;gap:10px;background:var(--accent);color:var(--ink);
    text-decoration:none;font:700 17px/1 var(--f-display);text-transform:uppercase;
    letter-spacing:.02em;padding:17px 24px;border-radius:var(--pill);
    box-shadow:0 10px 30px rgba(16,19,23,.3);opacity:0;pointer-events:none;
    transition:opacity .22s ease,background-color .15s ease}
  .float.on{opacity:1;pointer-events:auto}
  .float:hover{background:var(--accent-press)}
}

/* ================================= MOTION =================================
   Tesis: UN momento de autor, no una entrada idéntica en cada sección.
   · Focal   — el titular del hero. La palabra contorneada es la firma de la
               página, así que entra SÓLIDA y se vacía hasta quedar en trazo.
               Sólo cambia `color`: no toca layout y funciona con el título
               partido en varias líneas.
   · Soporte — las rejillas de tarjetas aparecen escalonadas, porque son listas.
   · Feedback— 120-150ms en controles. Nunca más lento: se siente como latencia.
   ------------------------------------------------------------------------ */
@keyframes lift-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.hero .badge,.hero h1,.hero .lede,.hero .proof,.hero .actions{
  animation:lift-in .55s cubic-bezier(.16,1,.3,1) backwards}
.hero .badge  {animation-delay:.04s}
.hero h1      {animation-delay:.10s}
.hero .lede   {animation-delay:.18s}
.hero .proof  {animation-delay:.24s}
.hero .actions{animation-delay:.30s}

/* El vaciado sólo existe donde el trazo existe: si el navegador no soporta
   -webkit-text-stroke, .ol se queda sólido y esta animación no se declara. */
@supports((-webkit-text-stroke:1px #000)){
  @keyframes hollow-out{from{color:var(--on-dark)}to{color:transparent}}
  .hero h1 .ol{animation:hollow-out .45s ease .62s backwards}
}

/* Revelado de listas. El escalonado lo aplica el JS y está topado a 3 pasos
   (210ms) para que la última tarjeta nunca se haga esperar. */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  /* Se elimina el DESPLAZAMIENTO, no el feedback: hover, foco, apertura de FAQ
     y cambios de color siguen transicionando. Un `*{transition:.001ms}` global
     borraría también esas señales de estado. */
  .hero .badge,.hero h1,.hero .lede,.hero .proof,.hero .actions,
  .hero h1 .ol{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .bar{transition:none}
  .btn:active{transform:none}
  /* La lente sigue marcando el ítem apuntado, pero aparece en vez de deslizarse. */
  .glass__lens{transition:opacity .2s ease}
  .glass a:hover svg{transform:none}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);z-index:99;background:var(--accent);color:var(--ink);
  display:inline-flex;align-items:center;min-height:44px;
  padding:12px 18px;border-radius:var(--pill);font-weight:700}

/* =============================================================================
   PÁGINAS INTERIORES
   -----------------------------------------------------------------------------
   Todo lo de arriba es la portada, tal como estaba. Lo que sigue son los bloques
   que aparecieron cuando el sitio pasó a tener servicios, marcas, guías y zonas:
   migas de pan, cabecera de página, cuerpo de texto largo y listados de enlaces.
   Reutiliza los tokens y los componentes de arriba (.wrap, .badge, .btn, .faq)
   para que una página interior no se vea como un sitio distinto.
   ========================================================================== */

/* ------------------------------- migas de pan ---------------------------- */
.crumbs{background:var(--white);border-bottom:1px solid var(--line);padding-block:var(--s3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 8px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--line)}
.crumbs li[aria-current]{color:var(--ink);font-weight:600}
.crumbs .sep{color:var(--line);user-select:none}

/* ---------------------------- cabecera de página -------------------------- */
/* El h1 de la portada es de 84px porque compite con un vídeo. Aquí encabeza un
   texto que se lee, así que baja a una escala de lectura. */
.phero{background:var(--white);padding-block:var(--s6) var(--s5)}
.phero h1{font-size:clamp(30px,5.4vw,52px);line-height:1.02;max-width:19ch}
.phero .lede{margin-top:var(--s4);max-width:62ch;font-size:clamp(17px,2.2vw,20px)}
.phero .meta{margin-top:var(--s4);font-size:13px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px 18px}
.phero .meta b{color:var(--slate);font-weight:600}

/* ------------------------------ texto largo ------------------------------- */
.prose{max-width:70ch;color:var(--slate);font-size:17px;line-height:1.68}
.prose>*+*{margin-top:var(--s4)}
/* La sección ya pone su propio padding: el primer bloque no suma el suyo. */
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(24px,3.4vw,34px);color:var(--ink);margin-top:var(--s6);line-height:1.08}
.prose h3{font-size:clamp(19px,2.3vw,22px);color:var(--ink);margin-top:var(--s5);
  font-family:var(--f-body);font-weight:600;text-transform:none;letter-spacing:0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:10px}
.prose li::marker{color:var(--muted)}

/* Lista de síntomas: el patrón que más se repite en las páginas de servicio.
   Rejilla, no viñetas: se escanea de un vistazo desde el teléfono. */
.symptoms{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
@media(min-width:720px){.symptoms{grid-template-columns:1fr 1fr;gap:var(--s3)}}
.symptoms li{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-size:15.5px;line-height:1.55}
.symptoms b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* Aviso: lo que el visitante debería saber antes de llamar. */
.callout{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4) var(--s4);font-size:16px;color:var(--slate)}
.callout b{color:var(--ink)}

/* --------------------------- enlaces relacionados ------------------------- */
.related{display:grid;gap:var(--s2);margin-top:var(--s4)}
@media(min-width:720px){.related{grid-template-columns:1fr 1fr;gap:var(--s3)}}
.related a{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);text-decoration:none;display:flex;flex-direction:column;gap:3px;
  transition:border-color .15s,transform .15s}
.related a:hover{border-color:var(--edge-dark);transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.related a:hover{transform:none}}
.related b{font-family:var(--f-display);font-weight:700;font-size:18px;text-transform:uppercase;
  color:var(--ink);line-height:1.1}
.related span{font-size:14px;color:var(--muted);line-height:1.45}

/* Enlace "ver detalle" bajo cada tarjeta de servicio de la portada. */
.svc__more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);
  font-size:14.5px;font-weight:600;color:var(--slate);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px;align-self:flex-start}
.svc__more:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ------------------------- índice de enlaces del pie ---------------------- */
/* Cada página enlaza a todas las demás: con dieciocho documentos y ningún enlace
   entrante todavía, este bloque es lo que hace que el rastreador las encuentre. */
.ftr-nav{border-top:1px solid var(--line-dark);margin-top:var(--s6);padding-top:var(--s5);
  display:grid;gap:var(--s5)}
@media(min-width:720px){.ftr-nav{grid-template-columns:repeat(4,1fr);gap:var(--s4)}}
.ftr-nav h3{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:var(--s3)}
.ftr-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr-nav a{color:var(--on-dark-2);text-decoration:none;font-size:14.5px;line-height:1.4;
  border-bottom:1px solid transparent}
.ftr-nav a:hover{color:var(--white);border-bottom-color:var(--edge-dark)}