/*
Theme Name: Transportes Peña
Theme URI: https://transportesfp.com
Author: Pep
Description: Theme custom para Transportes Peña — transporte de palets B2B puerta a puerta. Baix Llobregat + nacional.
Version: 0.4.5
Requires at least: 6.0
Tested up to: 7.0
License: GPLv2 or later
Text Domain: transportes-pena
*/

/* ==========================================================================
   1. FUENTES AUTOALOJADAS (self-hosted, sin Google Fonts CDN)
   Rutas relativas a la raíz del theme (donde vive style.css).
   ========================================================================== */

/* --- Archivo (display) --- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-800-normal.woff2') format('woff2');
}

/* --- Inter (body) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* ==========================================================================
   2. TOKENS (:root)
   ========================================================================== */
:root {
  --clr-ink:#111418;          /* tinta/base: titulares, header, texto principal */
  --clr-blue:#10457E;         /* primario confianza */
  --clr-blue-dark:#0D3A6B;    /* hover azul */
  --clr-orange:#F2711C;       /* acento/CTA */
  --clr-orange-dark:#D95F0E;  /* hover naranja */
  --clr-neutral-light:#F4F6F8;/* fondos de sección alternos */
  --clr-neutral-mid:#6B7480;  /* texto secundario, líneas */
  --clr-white:#FFFFFF;
  --clr-success:#1E9E5A;
  --clr-text:#1B2129;         /* cuerpo (un pelín más suave que ink puro) */
  --clr-border:#E1E6EB;

  --font-display:'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --space-xs:.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4.5rem; --space-xl:8rem;
  --wrap-max:1200px; --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-pill:999px;
  --nav-h:76px;
  --ease:cubic-bezier(.4,0,.2,1); --dur:260ms;
  --shadow-sm:0 1px 3px rgba(17,20,24,.08); --shadow-md:0 8px 30px rgba(17,20,24,.12);
}

/* ==========================================================================
   3. RESET
   ========================================================================== */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html:focus-within { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--clr-text);
  background:var(--clr-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
img,picture,svg,video { display:block; max-width:100%; }
img { height:auto; }
input,button,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
a { color:var(--clr-blue); text-decoration:none; }
a:hover { color:var(--clr-blue-dark); }
ul[role="list"],ol[role="list"] { list-style:none; padding:0; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.12; color:var(--clr-ink); font-weight:800; letter-spacing:-.02em; }
p { text-wrap:pretty; }
h1,h2,h3 { text-wrap:balance; }

/* Foco visible accesible en todos los interactivos */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline:3px solid var(--clr-blue);
  outline-offset:2px;
  border-radius:4px;
}

/* Skip link accesible */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--clr-ink); color:var(--clr-white);
  padding:.75rem 1.25rem; border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;
}
.skip-link:focus { left:0; color:var(--clr-white); }

/* ==========================================================================
   4. UTILIDADES BASE
   ========================================================================== */
.wrap { width:100%; max-width:var(--wrap-max); margin-inline:auto; padding-inline:1.25rem; }

.section { padding-block:var(--space-lg); }
.section--alt { background:var(--clr-neutral-light); }
.section--ink { background:var(--clr-ink); color:var(--clr-white); }
.section--ink h1,.section--ink h2,.section--ink h3 { color:var(--clr-white); }

.section__head { max-width:56ch; margin-bottom:var(--space-md); }
.section__eyebrow {
  display:inline-block; font-family:var(--font-body); font-weight:700;
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--clr-blue); margin-bottom:.5rem;
}
.section--ink .section__eyebrow { color:var(--clr-orange); }
.section__title { font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem); }
.section__lead { margin-top:.75rem; font-size:1.125rem; color:var(--clr-neutral-mid); }
.section--ink .section__lead { color:#C7CDD4; }

/* Botones */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1;
  padding:.9rem 1.5rem; border-radius:var(--radius-pill);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space:nowrap; border:2px solid transparent;
}
.btn:hover { transform:translateY(-2px); }
.btn .icon { width:1.15em; height:1.15em; }

/* CTA primario naranja -> texto SIEMPRE oscuro (AA). Blanco sobre naranja NO pasa. */
.btn-primary { background:var(--clr-orange); color:var(--clr-ink); box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--clr-orange-dark); color:var(--clr-ink); box-shadow:var(--shadow-md); }

/* Secundario: azul con texto blanco (AA) */
.btn-secondary { background:var(--clr-blue); color:var(--clr-white); }
.btn-secondary:hover { background:var(--clr-blue-dark); color:var(--clr-white); }

/* Terciario/ghost sobre fondo claro */
.btn-ghost { background:transparent; color:var(--clr-ink); border-color:var(--clr-border); }
.btn-ghost:hover { background:var(--clr-white); border-color:var(--clr-ink); color:var(--clr-ink); }

/* Ghost sobre fondo oscuro */
.section--ink .btn-ghost { color:var(--clr-white); border-color:rgba(255,255,255,.35); }
.section--ink .btn-ghost:hover { background:rgba(255,255,255,.08); color:var(--clr-white); border-color:var(--clr-white); }

.tag {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-body); font-weight:600; font-size:.8125rem;
  padding:.35rem .75rem; border-radius:var(--radius-pill);
  background:rgba(16,69,126,.08); color:var(--clr-blue);
}
.tag--orange { background:rgba(242,113,28,.12); color:var(--clr-orange-dark); }
.tag--success { background:rgba(30,158,90,.12); color:var(--clr-success); }

.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header {
  position:sticky; top:0; z-index:100;
  background:var(--clr-white);
  border-bottom:1px solid var(--clr-border);
  transition:box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow:var(--shadow-sm); }
.site-header__inner {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:var(--nav-h);
}

/* Marca / logo */
.site-brand {
  color:var(--clr-ink);
  display:inline-flex; align-items:center; gap:.55rem;
}
.site-brand:hover { color:var(--clr-ink); }
.site-brand__mark { height:44px; width:auto; display:block; flex:none; color:var(--clr-ink); }
.site-brand__text {
  font-family:var(--font-display); font-weight:500; font-size:1.15rem;
  letter-spacing:.02em; text-transform:uppercase; line-height:1;
}
.site-brand__text strong { font-weight:800; }
.site-brand__accent { color:var(--clr-blue); }
@media (max-width:420px) { .site-brand__text { display:none; } }

/* Logo del footer (lockup completo sobre fondo oscuro) */
.footer__logo { height:64px; width:auto; display:block; color:var(--clr-white); margin-bottom:.9rem; }

/* Utilidad accesible: oculto visualmente, visible para lectores de pantalla */
.screen-reader-text {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Nav */
.site-nav { display:flex; align-items:center; gap:1.75rem; }
.primary-menu { display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0; }
.primary-menu a {
  font-family:var(--font-body); font-weight:500; font-size:.95rem;
  color:var(--clr-ink); padding:.4rem 0; position:relative;
}
.primary-menu a::after {
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--clr-orange); transition:width var(--dur) var(--ease);
}
.primary-menu a:hover { color:var(--clr-blue); }
.primary-menu a:hover::after { width:100%; }

.header-actions { display:flex; align-items:center; gap:1rem; }
.header-phone {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  color:var(--clr-blue); border:1px solid var(--clr-border);
  transition:background .15s, color .15s, border-color .15s;
}
.header-phone:hover { color:var(--clr-white); background:var(--clr-blue); border-color:var(--clr-blue); }
.header-phone .icon { width:20px; height:20px; color:currentColor; }

.nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  color:var(--clr-ink); border:1px solid var(--clr-border);
}
.nav-toggle .icon-close { display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display:none; }
.nav-toggle[aria-expanded="true"] .icon-close { display:block; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  position:relative; overflow:hidden;
  background:var(--clr-white);
  background-image:radial-gradient(120% 90% at 85% 0%, rgba(16,69,126,.06) 0%, rgba(16,69,126,0) 55%);
  padding-block:var(--space-lg) 0;
}
.hero__grid { display:grid; gap:var(--space-md); align-items:center; }
.hero__content { position:relative; z-index:2; }
.hero__title {
  font-size:clamp(2.25rem,1.4rem + 4vw,4rem);
  color:var(--clr-ink);
}
.hero__title em { font-style:normal; color:var(--clr-blue); }
.hero__lead {
  margin-top:1.25rem; font-size:1.25rem; line-height:1.5;
  color:var(--clr-neutral-mid); max-width:44ch;
}
.hero__actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.75rem; }
.hero__micro {
  margin-top:1.1rem; font-size:.9rem; color:var(--clr-neutral-mid);
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.hero__micro .dot { width:5px; height:5px; border-radius:50%; background:var(--clr-orange); }

.hero__media { position:relative; }
.hero__stage {
  position:relative;
  will-change:transform,opacity;
}
.hero__truck {
  display:block; width:100%; height:auto; margin-left:auto;
  filter:drop-shadow(0 24px 40px rgba(17,20,24,.18));
  /* Mira a la izquierda: así "entrar desde la derecha" es avanzar, no recular.
     Al hacer scroll avanza y baja de forma bien visible (anticipa el gesto del palet).
     OJO: con scaleX(-1) el eje X va invertido → translateX positivo mueve a la izquierda. */
  transform:scaleX(-1)
    translate(
      calc(var(--truck-progress, 0) * 34px),
      calc(var(--truck-progress, 0) * 72px)
    );
  transition:transform 80ms linear;
}

/* El camión entra conduciendo desde la derecha al cargar (above the fold). */
@keyframes truck-drive-in {
  from { opacity:0; transform:translateX(115%); }
  to   { opacity:1; transform:translateX(0); }
}
.hero__stage { animation:truck-drive-in 1100ms var(--ease) both; }

/* --- Secuencia 3D scrubbeada por scroll (canvas sobre el fotograma 0) ---
   Inerte hasta que el markup del hero use .hero__seq. La sombra suave vive
   aquí (no en .hero__truck) para que el canvas también la proyecte. */
.hero__seq {
  position:relative;
  filter:drop-shadow(0 24px 40px rgba(17,20,24,.18));
}
/* Los fotogramas ya vienen volteados y el movimiento lo dan ellos:
   anulamos el scaleX(-1) y el translateY de scroll del hero de una imagen. */
.hero__seq .hero__truck { display:block; width:100%; height:auto; filter:none; transform:none; }
.hero__canvas {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 240ms var(--ease); pointer-events:none;
}
.hero__canvas.is-ready { opacity:1; }

/* Pin estilo Apple: el hero se clava y el camión hace la entrega mientras se
   scrollea el track, luego se libera. Solo activo con .is-pinned (lo pone el JS
   en cuanto la secuencia corre, en cualquier ancho). Sin JS/reduced-motion
   → hero normal, sin track.
   `top` y `min-height` usan --header-h (alto real del header, medido por
   main.js) en vez de 0/100vh a secas: el .site-header también es sticky y
   pinta por encima (z-index:100 vs. el hero sin z-index), así que clavar el
   hero a top:0 lo mete DEBAJO del header durante el scrub — la etiqueta
   "Baix Llobregat · Barcelona · Nacional" y el arranque del título quedaban
   tapados. Confirmado con Playwright (scroll al 30% del track, 375px):
   tagTop=57 vs headerBottom=103 → tapado; con el offset, el hero se clava
   justo debajo del header, nunca por detrás. */
.hero-track.is-pinned { height:220vh; }
.hero-track.is-pinned .hero {
  position:sticky; top:var(--header-h, var(--nav-h));
  min-height:calc(100vh - var(--header-h, var(--nav-h)));
  display:flex; align-items:center;
  padding-block:0;
}

/* Móvil/tablet: track más corto (menos scroll bruto para la misma lectura) y
   hero pinned compactado. Sin comprimir, el hero apilado (texto + imagen)
   supera el 100vh en móviles de altura corta (iPhone SE 2022 375×667, o
   cualquier Android ~360×780) y, al ir pinned, la parte que sobra queda
   inaccesible durante todo el scrubbing (sticky no se desplaza internamente,
   solo se "suelta" al final del track). Comprobado con Playwright: sin este
   ajuste sobran 97–152px en esos anchos; con él, el hero encaja exacto
   (0px) en 320–412px de ancho reales probados. */
@media (max-width:899px) {
  .hero-track.is-pinned { height:160vh; }
  .hero-track.is-pinned .hero__grid { gap:.5rem; }
  .hero-track.is-pinned .hero__title { font-size:clamp(1.6rem,1.2rem + 2.4vw,2.1rem); }
  .hero-track.is-pinned .hero__lead { margin-top:.5rem; font-size:1rem; }
  .hero-track.is-pinned .hero__actions { margin-top:.75rem; }
  .hero-track.is-pinned .hero__micro { margin-top:.5rem; font-size:.8rem; }
  /* El ancho de la imagen NO cuelga de .is-pinned, a diferencia del resto del
     bloque, y es deliberado: el `sizes` del <img> (front-page.php) promete
     56vw en este rango, y un atributo HTML no puede condicionarse a una clase
     que pone el JS. Si el cap solo existiera con .is-pinned, quien navega con
     "reducir movimiento" —o sin JS— tendría la imagen a ancho completo de
     columna mientras el navegador ya ha elegido el candidato del srcset para
     un hueco del 56%: recibiría una imagen sub-resolución, peor que antes de
     tener srcset. Anclarlo al media query lo hace cierto para todos.
     El resto sí depende del pin porque comprime para caber en 100vh, cosa que
     solo hace falta cuando el hero está clavado. */
  .hero__media { max-width:56%; margin-inline:auto; }
}

/* ==========================================================================
   7. REVEAL (scroll)
   ========================================================================== */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

/* ==========================================================================
   8. FEATURES
   ========================================================================== */
.features__grid {
  display:grid; grid-template-columns:1fr; gap:1.25rem;
}
.feature {
  background:var(--clr-white); border:1px solid var(--clr-border);
  border-radius:var(--radius-md); padding:1.75rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feature__icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--radius-sm);
  background:rgba(16,69,126,.09); color:var(--clr-blue); margin-bottom:1rem;
}
.feature__icon .icon { width:28px; height:28px; }
.feature__title { font-size:1.2rem; margin-bottom:.4rem; }
.feature__text { color:var(--clr-neutral-mid); font-size:.975rem; }

/* ==========================================================================
   9. CÓMO FUNCIONA
   ========================================================================== */
.steps__grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.step { position:relative; padding-top:1rem; }
.step__num {
  font-family:var(--font-display); font-weight:800; font-size:2.5rem;
  color:var(--clr-orange); line-height:1; display:block; margin-bottom:.5rem;
}
.step__title { font-size:1.2rem; margin-bottom:.35rem; }
.step__text { color:var(--clr-neutral-mid); font-size:.975rem; }

/* ==========================================================================
   10. STATS
   ========================================================================== */
.stats__grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem;
  text-align:center;
}
.stat__num {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem); color:var(--clr-white);
  line-height:1.1;
}
.stat__label { color:#C7CDD4; font-size:.95rem; margin-top:.35rem; }

/* ==========================================================================
   11. CONFIANZA
   ========================================================================== */
.trust__grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.trust__item { display:flex; gap:.9rem; align-items:flex-start; }
.trust__item .icon { color:var(--clr-success); flex-shrink:0; margin-top:.1rem; }
.trust__item h3 { font-size:1.05rem; margin-bottom:.2rem; }
.trust__item p { color:var(--clr-neutral-mid); font-size:.95rem; }

/* ==========================================================================
   12. ZONAS
   ========================================================================== */
.zonas__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
.zona-card {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:var(--clr-white); border:1px solid var(--clr-border);
  border-radius:var(--radius-sm); padding:1rem 1.15rem;
  font-family:var(--font-display); font-weight:600; color:var(--clr-ink);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.zona-card:hover {
  border-color:var(--clr-blue); color:var(--clr-blue);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.zona-card .icon { width:18px; height:18px; color:var(--clr-orange); }

/* ==========================================================================
   13. TESTIMONIOS
   ========================================================================== */
.founder { max-width:62ch; margin-inline:auto; text-align:center; }
.founder .section__eyebrow { display:block; margin-bottom:var(--space-sm); }
.founder__quote {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.5rem, 3.4vw, 2.35rem); line-height:1.28;
  color:var(--clr-ink); margin:0 0 var(--space-md); text-wrap:balance;
}
.founder__quote::before { content:'\201C'; color:var(--clr-orange); }
.founder__quote::after  { content:'\201D'; color:var(--clr-orange); }
.founder__author { display:flex; flex-direction:column; gap:.15rem; }
.founder__author strong { font-family:var(--font-display); font-size:1.15rem; color:var(--clr-ink); }
.founder__author span { color:var(--clr-blue); font-size:.95rem; }

/* ==========================================================================
   Contacto — formulario + panel de contacto directo
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns:1fr; gap:var(--space-md); align-items:start; }
@media (min-width:820px) { .contact-grid { grid-template-columns:1.4fr 1fr; } }

.tp-form { display:flex; flex-direction:column; gap:1rem; }
.tp-field { display:flex; flex-direction:column; gap:.35rem; }
.tp-field-row { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:520px) { .tp-field-row { grid-template-columns:1fr 1fr; } }
.tp-form label { font-weight:600; font-size:.9rem; color:var(--clr-ink); }
.tp-form input, .tp-form textarea {
  width:100%; padding:.7rem .85rem; font:inherit; color:var(--clr-ink);
  background:var(--clr-white); border:1px solid var(--clr-border);
  border-radius:var(--radius-md); transition:border-color .15s, box-shadow .15s;
}
.tp-form input:focus, .tp-form textarea:focus {
  outline:none; border-color:var(--clr-blue); box-shadow:0 0 0 3px rgba(16,69,126,.15);
}
.tp-form textarea { resize:vertical; }
.tp-form .btn { align-self:flex-start; }
.tp-form__note { font-size:.85rem; color:var(--clr-neutral-mid); margin:.25rem 0 0; }
.tp-hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.tp-notice { padding:.9rem 1.1rem; border-radius:var(--radius-md); margin-bottom:1.25rem; font-weight:500; }
.tp-notice--ok { background:#e7f4ea; color:#1c6b34; border:1px solid #cfe8d5; }
.tp-notice--error { background:#fdecea; color:#a12820; border:1px solid #f5c6c2; }

.contact-info-col {
  background:var(--clr-bg-alt, #f4f6f8); border:1px solid var(--clr-border);
  border-radius:var(--radius-md); padding:1.75rem;
}
.contact-info__title { font-size:1.15rem; margin:0 0 1rem; }
.contact-info__list { list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.contact-info__list li { display:flex; align-items:center; gap:.6rem; }
.contact-info__list a { color:var(--clr-ink); }
.contact-info__list a:hover { color:var(--clr-blue); }
.contact-info__list .icon { color:var(--clr-blue); flex:none; }
.contact-info__hours { font-size:.9rem; color:var(--clr-neutral-mid); margin:0; }

/* Hero visual de páginas interiores (Servicio) */
.page-hero-grid { display:grid; grid-template-columns:1fr; gap:var(--space-md); align-items:center; }
@media (min-width:860px) { .page-hero-grid { grid-template-columns:1.05fr .95fr; gap:var(--space-lg); } }
.page-hero-grid .section__head { margin-bottom:0; max-width:none; }
.page-hero-grid .btn { margin-top:1.4rem; }
.page-hero-grid__media { margin:0; }
.page-hero-grid__media img { display:block; width:100%; height:auto; }

/* Flujo de paletización (Servicio) — raíl vertical animado en móvil (mismo
   --p y data-at que ya pone el JS, sin tocarlo), horizontal en desktop.
   Los colores de marcador (blanco inactivo / naranja activo) se comparten
   entre ambos porque el bloque desktop ya redeclara los mismos valores
   (más el centrado), así que no hay diferencia visual en desktop. La
   geometría del raíl/relleno/palet SÍ va en su propio media query: el
   bloque desktop no resetea top/bottom/height, así que si esas propiedades
   vivieran fuera de un media query se colarían en el raíl horizontal y lo
   romperían. */
.flow { position:relative; --p:0; margin-top:var(--space-md); }
.flow__steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:1.6rem; }
.flow__step { display:flex; gap:1rem; align-items:flex-start; text-align:left; }
.flow__marker {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:52px; height:52px; border-radius:50%;
  background:var(--clr-white); border:2px solid var(--clr-border); color:var(--clr-blue);
  transition:background .4s, border-color .4s, color .4s;
}
.flow__step.is-active .flow__marker { background:var(--clr-orange); border-color:var(--clr-orange); color:var(--clr-white); }
.flow__marker .icon { width:24px; height:24px; }
.flow__step h3 { font-size:1.1rem; margin:0 0 .3rem; }
.flow__step p { color:var(--clr-neutral-mid); font-size:.95rem; margin:0; }

/* Raíl vertical en móvil: de centro del primer marcador (26px = mitad de
   los 52px del círculo) a 26px del borde inferior del contenedor. Con el
   contenido real (3 pasos) el último marcador cae ~45px por encima de ese
   punto, así que el palet en p=1 queda tocando el borde del último círculo
   en vez de perfectamente centrado — aproximación deliberada (comprobada
   con Playwright, apenas se aprecia en pantalla) para no depender de medir
   el alto exacto de cada paso, que varía con el ajuste de línea del texto. */
@media (max-width:759px) {
  .flow__rail {
    display:block; position:absolute; top:26px; bottom:26px; left:26px; width:4px;
    background:var(--clr-border); border-radius:99px; transform:translateX(-50%);
  }
  .flow__rail-fill {
    position:absolute; inset:0 auto auto 0; width:100%;
    height:calc(var(--p) * 100%); background:var(--clr-orange); border-radius:99px;
  }
  .flow__palet {
    display:block; position:absolute; top:calc(var(--p) * 100%); left:50%;
    transform:translate(-50%,-50%); width:36px; height:36px;
    filter:drop-shadow(0 6px 10px rgba(19,24,32,.2));
  }
  .flow__palet svg { display:block; width:100%; height:100%; }
  /* Contexto de apilamiento propio para que el raíl (fuera de flujo, primero
     en el DOM) quede detrás de los marcadores/texto en vez de encima. */
  .flow__steps { position:relative; z-index:1; }
}

@media (min-width:760px) {
  .flow__rail { display:block; position:relative; height:4px; background:var(--clr-border); border-radius:99px; margin:0 8% 2.8rem; }
  .flow__rail-fill { position:absolute; inset:0 auto 0 0; width:calc(var(--p) * 100%); background:var(--clr-orange); border-radius:99px; }
  .flow__palet { display:block; position:absolute; top:50%; left:calc(var(--p) * 100%); transform:translate(-50%,-50%); width:44px; height:44px; filter:drop-shadow(0 6px 10px rgba(19,24,32,.2)); }
  .flow__palet svg { display:block; width:100%; height:100%; }
  .flow__steps { grid-template-columns:repeat(3,1fr); gap:1.75rem; }
  .flow__step { display:block; text-align:center; opacity:.4; transform:translateY(8px); transition:opacity .45s, transform .45s; }
  .flow__step.is-active { opacity:1; transform:none; }
  .flow__marker { margin:0 auto .9rem; background:var(--clr-white); border-color:var(--clr-border); color:var(--clr-blue); }
  .flow__step.is-active .flow__marker { background:var(--clr-orange); border-color:var(--clr-orange); color:var(--clr-white); }
}

/* Zonas: buscador de cobertura */
.zonecheck { max-width:34rem; margin:0 auto var(--space-md); }
.zonecheck__box {
  display:flex; align-items:center; gap:.6rem;
  background:var(--clr-white); border:1px solid var(--clr-border);
  border-radius:var(--radius-md); padding:.15rem .95rem;
  transition:border-color .15s, box-shadow .15s;
}
.zonecheck__box:focus-within { border-color:var(--clr-blue); box-shadow:0 0 0 3px rgba(16,69,126,.15); }
.zonecheck__box .icon { width:22px; height:22px; color:var(--clr-blue); flex:none; }
.zonecheck__box input { flex:1; min-width:0; border:none; background:none; padding:.8rem 0; font:inherit; color:var(--clr-ink); }
.zonecheck__box input:focus { outline:none; }
.zonecheck__result { min-height:1.5em; margin:.85rem 0 0; text-align:center; font-weight:600; color:var(--clr-neutral-mid); }
.zonecheck__result.is-yes { color:var(--clr-blue); }

/* Zonas: mapa de cobertura animado */
.coverage-map { margin:0 auto; max-width:600px; }
.coverage-map svg { display:block; width:100%; height:auto; overflow:visible; }
.coverage-map__land path { fill:#dbe4ef; stroke:#bccddf; stroke-width:1.5; }
.coverage-map__routes .route { fill:none; stroke:var(--clr-orange); stroke-width:4; stroke-linecap:round; opacity:.9; stroke-dasharray:1; stroke-dashoffset:1; }
.coverage-map__dots .dot { fill:var(--clr-blue); opacity:0; transform-box:fill-box; transform-origin:center; }
.coverage-map__dots .hub { fill:var(--clr-orange); }
.coverage-map__dots .hub-pulse { fill:var(--clr-orange); opacity:0; transform-box:fill-box; transform-origin:center; }
/*
 * Las etiquetas se escriben en user units del viewBox (992 de ancho), así que
 * el navegador las multiplica por la escala del SVG (ancho renderizado / 992).
 * A 320px de viewport la escala es 0,28: un font-size de 22 sale a 6,2px en
 * pantalla. Ninguna unidad CSS escapa a eso — medido contra Chrome: px, vw,
 * cqw, rem y em se multiplican todas por la escala (vw dos veces). Por eso el
 * tamaño real lo fija initMapLabels() en main.js vía --maplabel-size, y los
 * valores de aquí son solo el fallback sin JS y el primer pintado.
 *
 * El selector cuelga de .coverage-map y NO de .coverage-map__labels a
 * propósito: la etiqueta del hub vive en el grupo .coverage-map__dots
 * (coverage-map.php), así que con el selector anterior no recibía ni tamaño ni
 * color y salía negra a 16px, el default del navegador.
 */
.coverage-map .maplabel { font-family:var(--font-body, system-ui, sans-serif); font-size:var(--maplabel-size, 22px); font-weight:600; fill:var(--clr-ink); }
.coverage-map .maplabel--hub { fill:var(--clr-orange); font-weight:800; }

.coverage-map.is-visible .route { animation:tp-route-draw 1s ease forwards; }
.coverage-map.is-visible .dot { animation:tp-dot-pop .45s ease forwards; }
.coverage-map.is-visible .hub-pulse { animation:tp-hub-pulse 2.2s ease-out .3s infinite; }
@keyframes tp-route-draw { to { stroke-dashoffset:0; } }
@keyframes tp-dot-pop { 0%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.3)} 100%{opacity:1;transform:scale(1)} }
@keyframes tp-hub-pulse { from{transform:scale(1);opacity:.55} to{transform:scale(3.4);opacity:0} }

/* Zonas: ruta del usuario (buscador) */
.coverage-map__user .user-route { fill:none; stroke:var(--clr-blue); stroke-width:4.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
.coverage-map__user .user-route.is-drawing { opacity:1; animation:tp-route-draw .9s ease forwards; }
.coverage-map__user .user-dot { fill:var(--clr-blue); opacity:0; transform-box:fill-box; transform-origin:center; }
.coverage-map__user .user-dot.is-on { animation:tp-dot-pop .4s ease forwards; }
/* Un 15% por encima del resto: es el resultado del buscador, el pago de la
   interacción. Misma var, así que hereda el escalado de initMapLabels(). */
.coverage-map__user .user-label { font-family:var(--font-body, system-ui, sans-serif); font-size:calc(var(--maplabel-size, 21px) * 1.15); font-weight:800; fill:var(--clr-blue); opacity:0; paint-order:stroke; stroke:#fff; stroke-width:5px; }
.coverage-map__user .user-label.is-on { opacity:1; }
.zonecheck__result.is-no { color:var(--clr-neutral-mid); }

@media (prefers-reduced-motion:reduce) {
  .coverage-map .route { stroke-dashoffset:0 !important; animation:none !important; }
  .coverage-map .dot { opacity:1 !important; animation:none !important; }
  .coverage-map .hub-pulse { display:none; }
  .coverage-map__user .user-route.is-drawing { stroke-dashoffset:0 !important; animation:none !important; }
  .coverage-map__user .user-dot.is-on { opacity:1 !important; animation:none !important; }
}
/*
 * Fallback sin JS (y primer pintado antes de que corra initMapLabels).
 * Escalones que aproximan ~12-14px reales; con JS, --maplabel-size se fija
 * inline sobre .coverage-map y gana a todo esto.
 *
 * La regla anterior era un único @media (max-width:520px){font-size:30px} y
 * estaba invertida: a 520px daba 14,5px reales y a 521px caía a 10,7px, o sea
 * las etiquetas ENCOGÍAN al ensanchar la pantalla, y no se recuperaban nunca
 * porque el mapa capa a max-width:600px (techo real en escritorio: 13,3px).
 */
@media (max-width:360px) { .coverage-map { --maplabel-size:44px; } }
@media (min-width:361px) and (max-width:440px) { .coverage-map { --maplabel-size:36px; } }
@media (min-width:441px) and (max-width:520px) { .coverage-map { --maplabel-size:30px; } }
@media (min-width:521px) and (max-width:640px) { .coverage-map { --maplabel-size:24px; } }

/* Blog: estado vacío */
.blog-empty { max-width:56ch; margin-inline:auto; text-align:center; padding-block:var(--space-md); }
.blog-empty h2 { font-size:1.6rem; margin-bottom:1rem; }
.blog-empty p { color:var(--clr-neutral-mid); margin-bottom:1rem; }
.blog-empty .btn { margin-top:.5rem; }

/* Blog: rejilla de tarjetas (mismo estilo que las webs hermanas) */
.page-hero__desc { color:var(--clr-neutral-mid); margin-top:.5rem; max-width:62ch; }
.blog-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:640px) { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .blog-grid { grid-template-columns:repeat(3,1fr); } }
.blog-card { display:flex; flex-direction:column; background:var(--clr-white); border:1px solid var(--clr-border); border-radius:var(--radius-md); box-shadow:0 1px 2px rgba(19,24,32,.05); overflow:hidden; transition:box-shadow .25s, transform .25s; }
.blog-card:hover { box-shadow:0 12px 28px -8px rgba(19,24,32,.18); transform:translateY(-3px); }
.blog-card__thumbnail { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--clr-neutral-light); flex-shrink:0; }
.blog-card__thumbnail img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.blog-card:hover .blog-card__thumbnail img { transform:scale(1.04); }
.blog-card__body { display:flex; flex-direction:column; flex:1; padding:1.4rem; gap:.7rem; }
.blog-card__category { display:inline-block; align-self:flex-start; background:var(--clr-orange); color:var(--clr-white); font-size:.72rem; font-weight:700; line-height:1; padding:.34rem .7rem; border-radius:999px; text-decoration:none; text-transform:uppercase; letter-spacing:.05em; transition:background .2s; }
.blog-card__category:hover { background:var(--clr-orange-dark); color:var(--clr-white); }
.blog-card__title { font-family:var(--font-display); font-size:1.3rem; font-weight:800; line-height:1.2; margin:0; color:var(--clr-ink); }
.blog-card__title a { color:inherit; text-decoration:none; transition:color .2s; }
.blog-card__title a:hover { color:var(--clr-blue); }
.blog-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-size:.82rem; color:var(--clr-neutral-mid); }
.blog-card__separator { color:var(--clr-border); }
.blog-card__excerpt { font-size:.95rem; color:var(--clr-neutral-mid); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.blog-card__read-more { margin-top:auto; font-weight:600; font-size:.9rem; color:var(--clr-blue); text-decoration:none; }
.blog-card__read-more:hover { color:var(--clr-blue-dark); }

/* Blog: imagen destacada en el artículo */
.entry__thumb { margin:0 0 2rem; border-radius:var(--radius-md); overflow:hidden; box-shadow:0 6px 28px rgba(19,24,32,.12); }
.entry__thumb img { width:100%; max-height:460px; object-fit:cover; display:block; }

/* ==========================================================================
   14. FAQ (details/summary)
   ========================================================================== */
.faq { max-width:760px; margin-inline:auto; }
.faq__item {
  border:1px solid var(--clr-border); border-radius:var(--radius-sm);
  background:var(--clr-white); margin-bottom:.75rem; overflow:hidden;
}
.faq__item[open] { border-color:var(--clr-blue); }
.faq__q {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--clr-ink);
}
.faq__q::-webkit-details-marker { display:none; }
.faq__q .icon { color:var(--clr-blue); transition:transform var(--dur) var(--ease); flex-shrink:0; }
.faq__item[open] .faq__q .icon { transform:rotate(180deg); }
.faq__a { padding:0 1.35rem 1.35rem; color:var(--clr-neutral-mid); }

/* ==========================================================================
   15. CTA FINAL
   ========================================================================== */
.cta-band { text-align:center; }
.cta-band .section__title { color:var(--clr-white); }
.cta-band__lead { color:#C7CDD4; font-size:1.15rem; margin-top:.75rem; max-width:52ch; margin-inline:auto; }
.cta-band__actions { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:1.75rem; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer { background:var(--clr-ink); color:#C7CDD4; padding-block:var(--space-lg) var(--space-md); }
.site-footer a { color:#C7CDD4; }
.site-footer a:hover { color:var(--clr-white); }
.footer__grid {
  display:grid; grid-template-columns:1fr; gap:2rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer__brand-name {
  font-family:var(--font-display); font-weight:500; font-size:1.2rem;
  color:var(--clr-white); text-transform:uppercase; letter-spacing:.02em;
  display:inline-flex; gap:.4ch; margin-bottom:.75rem;
}
.footer__brand-name strong { font-weight:800; }
.footer__tagline { font-size:.95rem; max-width:34ch; }
.footer__col h3 {
  font-family:var(--font-display); font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--clr-white);
  margin-bottom:1rem;
}
.footer__list { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:.95rem; }
.footer__list .icon { width:16px; height:16px; color:var(--clr-orange); display:inline-block; vertical-align:-2px; margin-right:.4rem; }
/* El color NO es --clr-neutral-mid, y es a propósito: ese token (#6B7480) está
   pensado para texto secundario sobre fondo CLARO, y aquí el fondo es
   --clr-ink. Daba 3,90:1, por debajo del 4,5:1 que exige WCAG AA, y PageSpeed
   lo marcaba (Accesibilidad 96, señalando estos dos <span>). Era el único sitio
   del theme donde ese token caía sobre fondo oscuro; el resto del texto sobre
   ink usa #C7CDD4.
   #8B949E da 6,00:1 y conserva la intención del diseño: la letra pequeña del
   pie queda más apagada que el cuerpo del pie (#C7CDD4), que es lo que hacía
   --clr-neutral-mid respecto al texto normal sobre claro. Heredar #C7CDD4 sin
   más también pasaría AA, pero igualaría la letra pequeña con el cuerpo. */
.footer__bottom {
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding-top:1.5rem; font-size:.875rem; color:#8B949E;
}

/* ==========================================================================
   17. CONTENIDO GENÉRICO (page/single/index/search/404)
   ========================================================================== */
.page-hero { background:var(--clr-neutral-light); padding-block:var(--space-md); border-bottom:1px solid var(--clr-border); }
.page-hero__title { font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem); }
.content-area { padding-block:var(--space-lg); }
.entry { max-width:720px; margin-inline:auto; }
.entry__title { font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem); margin-bottom:.75rem; }
.entry__meta { color:var(--clr-neutral-mid); font-size:.9rem; margin-bottom:1.5rem; }
.entry__content > * + * { margin-top:1.1rem; }
.entry__content h2 { font-size:1.6rem; margin-top:2rem; }
.entry__content h3 { font-size:1.3rem; margin-top:1.5rem; }
.entry__content a { text-decoration:underline; }
.entry__content ul,.entry__content ol { padding-left:1.4rem; }
.entry__content img { border-radius:var(--radius-md); }
.entry__content blockquote {
  border-left:4px solid var(--clr-orange); padding-left:1.25rem;
  color:var(--clr-neutral-mid); font-size:1.1rem;
}

.post-list { display:grid; gap:1.5rem; max-width:760px; margin-inline:auto; }
.post-card {
  border:1px solid var(--clr-border); border-radius:var(--radius-md);
  padding:1.75rem; background:var(--clr-white);
}
.post-card__title { font-size:1.4rem; margin-bottom:.4rem; }
.post-card__meta { color:var(--clr-neutral-mid); font-size:.875rem; margin-bottom:.75rem; }
.post-card__excerpt { color:var(--clr-text); }
.post-card__more { display:inline-block; margin-top:1rem; font-weight:600; color:var(--clr-orange-dark); }

.pagination {
  display:flex; gap:.5rem; justify-content:center; margin-top:var(--space-md);
  flex-wrap:wrap;
}
.pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 .75rem;
  border:1px solid var(--clr-border); border-radius:var(--radius-sm);
  font-weight:600; color:var(--clr-ink);
}
.pagination .page-numbers.current { background:var(--clr-blue); color:var(--clr-white); border-color:var(--clr-blue); }
.pagination .page-numbers:hover:not(.current) { border-color:var(--clr-blue); color:var(--clr-blue); }

.notice-404 { text-align:center; max-width:560px; margin-inline:auto; }
.notice-404__code { font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,3rem + 6vw,7rem); color:var(--clr-blue); line-height:1; }
.notice-404__actions { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top:1.75rem; }

.search-form { display:flex; gap:.5rem; max-width:520px; margin:1.5rem auto 0; }
.search-form input[type="search"] {
  flex:1; padding:.85rem 1rem; border:1px solid var(--clr-border);
  border-radius:var(--radius-sm); background:var(--clr-white);
}
.search-form input[type="search"]:focus-visible { outline:3px solid var(--clr-blue); outline-offset:1px; }

/* ==========================================================================
   18. MENÚ MÓVIL (panel)
   ========================================================================== */
@media (max-width:900px) {
  .nav-toggle { display:inline-flex; }
  .header-phone-text { display:none; }

  /* El desplegable usa --header-h (alto REAL del header, medido por JS en
     main.js) en vez de --nav-h a secas: --nav-h solo cubre la fila del logo
     (76px), pero el header también incluye la línea del bucle SEO (H1 por
     URL) encima, de alto variable según el texto/ancho. Si el offset se
     queda corto, el panel se abre pisando el botón de cerrar y el logo
     (confirmado en vivo con Playwright a 375px: solape de ~10px). Fallback a
     --nav-h antes de que main.js corra (primer pintado) o si JS está
     desactivado, que es el comportamiento previo — sigue sin ser perfecto
     ese primer instante, pero el usuario no puede abrir el menú tan rápido. */
  .site-nav {
    position:fixed; inset:var(--header-h, var(--nav-h)) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--clr-white); border-bottom:1px solid var(--clr-border);
    padding:1rem 1.25rem 1.5rem; box-shadow:var(--shadow-md);
    transform:translateY(-120%); transition:transform var(--dur) var(--ease);
    max-height:calc(100vh - var(--header-h, var(--nav-h))); overflow:auto;
  }
  .site-nav.is-open { transform:translateY(0); }

  .primary-menu { flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .primary-menu li { border-bottom:1px solid var(--clr-border); }
  .primary-menu a { display:block; padding:.9rem 0; font-size:1.05rem; }
  .primary-menu a::after { display:none; }

  .header-actions { flex-direction:column; align-items:stretch; gap:.75rem; margin-top:1rem; width:100%; }
  .header-actions .btn { width:100%; }
  .header-phone { justify-content:center; padding:.6rem 0; }
  .header-phone-text { display:inline; }
}

/* ==========================================================================
   19. MEDIA QUERIES (progressive enhancement, mobile-first)
   ========================================================================== */
@media (min-width:640px) {
  .features__grid { grid-template-columns:repeat(2,1fr); }
  .steps__grid { grid-template-columns:repeat(2,1fr); }
  .zonas__grid { grid-template-columns:repeat(3,1fr); }
  .stats__grid { grid-template-columns:repeat(4,1fr); }
  .testi__grid { grid-template-columns:repeat(2,1fr); }
  .trust__grid { grid-template-columns:repeat(3,1fr); }
}

@media (min-width:900px) {
  .hero { padding-block:var(--space-lg) var(--space-md); }
  .hero__grid { grid-template-columns:1.05fr .95fr; gap:var(--space-lg); }
  .features__grid { grid-template-columns:repeat(4,1fr); }
  .steps__grid { grid-template-columns:repeat(4,1fr); }
  .zonas__grid { grid-template-columns:repeat(5,1fr); }
  .testi__grid { grid-template-columns:repeat(3,1fr); }
  .footer__grid { grid-template-columns:1.4fr 1fr 1fr 1fr; }
}

@media (min-width:1100px) {
  .section { padding-block:var(--space-xl); }
}

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
  html:focus-within { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal { opacity:1 !important; transform:none !important; }
  .hero__stage { animation:none !important; }
  .hero__truck { transform:scaleX(-1) !important; }
  /* Con la secuencia, el fotograma 0 ya viene volteado: no re-voltear. */
  .hero__seq .hero__truck { transform:none !important; }
}

/* ============================================================
   BUCLE — líneas keyword por URL (plugin gentle-seo-keywords).
   H1 discreto en cabecera + H2 discreto en pie: valor SEO on-page
   sin robarle peso visual a los títulos de hero. Se resetea el
   estilo display (h1/h2 heredan Archivo 800) a una línea sobria.
   ============================================================ */
.nav-bucle {
  padding-block:.3rem;
  text-align:center;
  border-bottom:1px solid var(--clr-border);
}
.nav-bucle-h1 {
  margin:0;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.75rem;
  line-height:1.3;
  letter-spacing:0;
  color:var(--clr-neutral-mid);
}
.foot-bucle-h2 {
  margin:1rem 0 0;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.75rem;
  line-height:1.3;
  letter-spacing:0;
  text-align:center;
  color:#8A929C;
}

/* ============================================================
   BACK-TO-TOP — botón flotante "volver arriba".
   Blanco (contrasta con el footer oscuro), lateral inferior derecho,
   oculto hasta hacer scroll. Progresivo: sin JS no aparece.
   ============================================================ */
.back-to-top {
  position:fixed;
  right:clamp(1rem,3vw,1.5rem);
  bottom:clamp(1rem,3vw,1.5rem);
  z-index:90;
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  padding:0;
  border:1px solid var(--clr-border);
  border-radius:50%;
  background:var(--clr-white);
  color:var(--clr-blue);
  box-shadow:0 4px 16px rgba(17,20,24,.18);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .18s ease, color .18s ease;
}
.back-to-top.is-visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover {
  background:var(--clr-blue);
  color:var(--clr-white);
  border-color:var(--clr-blue);
}
.back-to-top:focus-visible {
  outline:3px solid var(--clr-blue);
  outline-offset:2px;
}
.back-to-top .icon {
  width:1.4rem;
  height:1.4rem;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition:opacity .01ms; transform:none; }
}