/* ============================================================
   Grúas Hermanos García
   Dirección: editorial de automoción. La identidad la llevan la
   tipografía condensada, las líneas de un píxel y el espacio.
   La fotografía es material de apoyo, nunca el fondo.
   ============================================================ */

:root{
  --tinta:#16242E;        /* azul noche cálido, no negro */
  --carbon:#1E3241;
  --hueso:#F7F3EC;        /* crema */
  --arena:#EDE6D9;        /* fondo alterno claro */
  --oscuro:#1B2A33;       /* tinta de texto sobre fondo claro */
  --gris:#93A5B0;
  --gris-claro:#D2DCE2;
  --amarillo:#FDC40E;     /* muestreado del logotipo */
  --linea:rgba(247,243,236,.16);
  --linea-oscura:rgba(27,42,51,.16);

  /* Un solo superfamiliar en dos anchos opuestos:
     ancho extendido para los titulares, estrecho para los datos.
     El contraste de ancho es el sistema, no una pareja de fuentes. */
  /* Saira: grotesca técnica de ejes variables, la familia más
     cercana al trazo del logotipo. Anchos opuestos como sistema. */
  --display:'Saira',system-ui,sans-serif;
  --texto:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --ancho-titular:'wdth' 112;
  --ancho-dato:'wdth' 72;

  --margen:clamp(1.15rem,5vw,5.5rem);
  --ancho:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--tinta);
  color:var(--hueso);
  font-family:var(--texto);
  font-size:17.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
p{margin:0}

/* ── Escala tipográfica ───────────────────────────────────── */
h1,h2,h3,.display{
  font-family:var(--display);
  font-variation-settings:var(--ancho-titular);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.022em;
  text-transform:uppercase;
  margin:0;
}

.titular{font-size:clamp(2.1rem,5vw,4.6rem)}
.titular--medio{font-size:clamp(1.75rem,3.4vw,3rem)}

.etiqueta{
  font-family:var(--display);
  font-variation-settings:var(--ancho-dato);
  font-size:1.12rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--gris);
  display:flex;align-items:center;gap:.75rem;
}
.etiqueta::after{
  content:"";height:1px;flex:1;max-width:120px;
  background:currentColor;opacity:.35;
}

:focus-visible{outline:2px solid var(--amarillo);outline-offset:4px}

.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amarillo);color:#000;padding:.7rem 1.2rem;font-weight:600}
.saltar:focus{left:0}

.icono{width:1.05em;height:1.05em;fill:currentColor;flex:none}

/* Secciones claras: se invierte todo el sistema */
.seccion--clara{background:var(--hueso);color:var(--oscuro)}
.seccion--clara .etiqueta{color:var(--gris)}

/* ── Botones ──────────────────────────────────────────────── */
.boton{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:1.02rem;font-weight:600;letter-spacing:.02em;
  padding:.95rem 1.5rem;border-radius:2px;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.boton--linea{border:1px solid var(--linea);color:var(--hueso)}
.boton--linea:hover{border-color:var(--hueso);background:var(--hueso);color:var(--tinta)}
.boton--negro{background:var(--tinta);color:var(--hueso)}
.boton--negro:hover{background:var(--carbon)}

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background-color .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.cabecera.esta-fija{background:rgba(22,36,46,.9);backdrop-filter:blur(14px);border-bottom-color:var(--linea)}
.cabecera__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding-inline:var(--margen);
  min-height:76px;display:flex;align-items:center;gap:2rem;
}
.marca{display:flex;align-items:center;gap:.75rem;margin-right:auto}
.marca__sello{width:34px;height:34px;flex:none}
.marca__texto{display:flex;flex-direction:column;line-height:1}
.marca__texto strong{
  font-family:var(--display);font-variation-settings:'wdth' 112;
  font-weight:800;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:-.005em;
}
.marca__texto span{
  font-size:.86rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-top:.3rem;
}


.menu{display:flex;gap:1.5rem}
.menu a{
  font-size:.98rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris);
  position:relative;padding-block:.4rem;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:.1rem;height:1px;width:0;
  background:var(--amarillo);transition:width .3s cubic-bezier(.2,.8,.25,1);
}
.menu a:hover{color:var(--hueso)}
.menu a:hover::after{width:100%}

.telefono-nav{display:flex;flex-direction:column;line-height:1;text-align:right}
.telefono-nav__etiqueta{
  font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amarillo);margin-bottom:.3rem;
}
.telefono-nav__numero{
  font-family:var(--display);font-variation-settings:'wdth' 100;
  font-weight:800;font-style:italic;font-size:1.6rem;letter-spacing:-.01em;
  transition:color .2s ease;
}
.telefono-nav:hover .telefono-nav__numero{color:var(--amarillo)}

@media (max-width:560px){
  .cabecera__interior{min-height:64px}
  .telefono-nav__numero{font-size:1.25rem}
}
/* El número nunca parte en dos líneas en pantallas estrechas */
.telefono-nav__numero{white-space:nowrap}
@media (max-width:400px){.telefono-nav__numero{font-size:1.1rem}}

/* Segundo teléfono, en los sitios donde el número se muestra como
   información (no como botón de una sola acción): pie, tarjetas de
   contacto, bandas de llamada y el menú móvil. */
.telefono-alt{
  display:block;margin-top:.5rem;font-size:.95rem;font-weight:600;
  color:var(--gris);transition:color .2s ease;
}
.telefono-alt a{color:inherit}
.telefono-alt:hover,.telefono-alt a:hover{color:var(--amarillo)}

/* ── Menú: botón hamburguesa y desplegable en móvil ──────────
   Por encima de 1000px el menú es la fila horizontal de siempre.
   Por debajo, el botón lo abre como panel desplegable bajo la
   cabecera, con los mismos enlaces (no se duplican). */
.menu-boton{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:26px;height:22px;padding:0;border:0;background:none;cursor:pointer;flex:none;
}
.menu-boton__linea{
  display:block;width:100%;height:2px;background:var(--hueso);
  transition:transform .3s cubic-bezier(.2,.8,.25,1),opacity .3s ease;
}
.menu-boton[aria-expanded="true"] .menu-boton__linea:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .menu-boton__linea:nth-child(2){opacity:0}
.menu-boton[aria-expanded="true"] .menu-boton__linea:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1000px){
  .menu-boton{display:flex}
  .menu{
    display:flex;flex-direction:column;gap:0;
    position:fixed;left:0;right:0;top:76px;z-index:99;
    background:var(--tinta);border-bottom:1px solid var(--linea);
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .4s cubic-bezier(.2,.8,.25,1),opacity .3s ease;
  }
  .menu.esta-abierto{max-height:calc(100vh - 76px);overflow-y:auto;opacity:1}
  .menu a{
    padding:1.1rem var(--margen);border-top:1px solid var(--linea);
    text-transform:none;font-size:1.05rem;
  }
  .menu a:first-child{border-top:0}
  .menu a::after{display:none}
}
@media (max-width:560px){
  .menu{top:64px}
  .menu.esta-abierto{max-height:calc(100vh - 64px)}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-boton__linea{transition:none}
}

/* ============================================================
   PORTADA
   La marca es la pieza. Todo lo demás calla.
   ============================================================ */
.portada{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:8rem 0 2.5rem;
  border-bottom:1px solid var(--linea);
  background:var(--tinta);
}

/* Luz cálida muy tenue detrás de la marca */
.portada::after{
  content:"";position:absolute;z-index:-2;pointer-events:none;
  left:50%;top:36%;width:min(120vw,1150px);aspect-ratio:1.5;
  transform:translate(calc(-50% + var(--halo-x,0px)),calc(-50% + var(--halo-y,0px)));
  background:radial-gradient(closest-side,rgba(253,196,14,.16),rgba(253,196,14,.04) 52%,transparent 76%);
}

.portada__interior{
  perspective:1200px;
  max-width:var(--ancho);margin-inline:auto;width:100%;
  padding-inline:var(--margen);
  display:flex;flex-direction:column;gap:clamp(2rem,6vh,4rem);
  flex:1;
}

.portada__indice{
  display:flex;justify-content:space-between;gap:1rem;
  padding:0 .25rem 1.2rem;border-bottom:1px solid var(--linea);
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-size:1.15rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--gris);
}
.portada__indice span:last-child{color:var(--amarillo)}

.portada__alto{
  display:flex;flex-direction:column;align-items:center;
  transform-style:preserve-3d;will-change:transform;
}

/* El logotipo, a tamaño de cartel */
.portada__logo{
  width:min(92%,880px);height:auto;
  margin-top:clamp(1.5rem,5vh,4rem);
}

.portada__frase{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;margin-top:clamp(1.2rem,3.5vh,2.4rem);
}
.frase__lugar{
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-size:clamp(1.3rem,3.8vw,3.2rem);
  font-weight:600;letter-spacing:.24em;line-height:1;
  text-transform:uppercase;text-indent:.24em;
  color:var(--hueso);
}
.frase__servicio{
  font-family:var(--texto);text-transform:none;
  font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:400;
  letter-spacing:.01em;line-height:1.5;color:var(--gris);
  margin-top:1.4rem;padding-top:1.4rem;position:relative;
  max-width:38ch;
}
.frase__servicio::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(280px,38vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--amarillo),transparent);
}

.portada__bajo{
  display:flex;flex-direction:column;align-items:center;gap:2rem;
  text-align:center;
}
.portada__entrada{display:none}

.portada__contacto{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:center;gap:1.2rem 2.2rem;
}
.portada__telefono{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding-bottom:.7rem;border-bottom:3px solid var(--amarillo);
}
.portada__telefono__etiqueta{
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-size:1.02rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amarillo);
}
.portada__telefono__numero{
  font-family:var(--display);font-variation-settings:'wdth' 108;
  font-weight:800;font-style:italic;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:.95;letter-spacing:-.02em;
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
.portada__telefono:hover .portada__telefono__numero{transform:translateX(6px)}

.portada__datos{
  max-width:var(--ancho);margin:clamp(2rem,5vh,3.4rem) auto 0;width:100%;
  padding-inline:var(--margen);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linea);
}
.portada__datos div{
  padding:1.4rem 1.5rem;
  border-right:1px solid var(--linea);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.portada__datos div:last-child{border-right:0}
.portada__datos dt{
  font-size:.9rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.45rem;
}
.portada__datos dd{
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-size:1.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;
}

.portada__pista{
  margin:clamp(1.4rem,3.5vh,2.2rem) auto 0;text-align:center;
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-size:1rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);
}

@media (max-width:900px){
  .portada{padding-top:6.5rem;min-height:0}
  .portada__logo{width:100%;margin-top:1.5rem}
  .portada__datos{grid-template-columns:1fr 1fr;gap:0}
  .portada__datos div{padding:1.2rem 1rem}
  .portada__datos div:nth-child(2n){border-right:0}
  .portada__datos div:nth-child(n+3){border-top:1px solid var(--linea)}
  .portada__contacto{width:100%}
  .portada__telefono{width:100%}
}
@media (max-width:520px){
  .portada__indice{flex-direction:column;gap:.4rem;align-items:center;font-size:1rem}
  .frase__lugar{font-size:1.3rem;letter-spacing:.2em}
}

/* ── Cinta ────────────────────────────────────────────────── */
.cinta{
  overflow:hidden;border-bottom:1px solid var(--linea);
  padding-block:1.1rem;
}
.cinta__tren{display:flex;width:max-content;will-change:transform}
.cinta__tren span{
  font-family:var(--display);font-variation-settings:var(--ancho-titular);
  font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1px rgba(247,243,236,.42);
  padding-right:1.5rem;white-space:nowrap;
}

/* ============================================================
   CONFIANZA
   ============================================================ */
.confianza__interior{
  max-width:var(--ancho);margin-inline:auto;padding:clamp(4.5rem,11vw,9rem) var(--margen);
}
.confianza .titular{max-width:14ch}
.confianza__texto{
  margin-top:2rem;max-width:44ch;color:#5A6870;font-size:1.15rem;
}
.marcadores{
  margin-top:clamp(3rem,7vw,5.5rem);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linea-oscura);
}
.marcadores li{
  padding:1.9rem 1.5rem 1.4rem;
  border-right:1px solid var(--linea-oscura);
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;
}
.marcadores li:last-child{border-right:0}
.marcadores__dato{
  display:block;font-family:var(--display);
  font-variation-settings:var(--ancho-dato);
  font-weight:700;
  font-size:clamp(3.4rem,7vw,6rem);line-height:.85;letter-spacing:-.01em;
}
.marcadores__pie{
  display:block;margin-top:.8rem;font-size:.98rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
}
@media (max-width:760px){
  .marcadores{grid-template-columns:1fr 1fr}
  .marcadores li:nth-child(2n){border-right:0}
  .marcadores li:nth-child(n+3){border-top:1px solid var(--linea-oscura)}
  .marcadores li{padding:1.5rem 1rem 1.2rem}
}

/* ============================================================
   SERVICIOS + RUEDA
   ============================================================ */
.rueda{position:relative;height:240vh;background:var(--tinta)}
.rueda__fijo{
  position:sticky;top:0;height:100svh;
  max-width:var(--ancho);margin-inline:auto;
  padding-inline:var(--margen);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;gap:clamp(1.5rem,4vw,4rem);
}

.rueda__escena{position:relative;display:flex;align-items:center;justify-content:center;height:min(72svh,620px)}
.rueda__lienzo{width:100%;height:100%;max-width:min(72svh,620px);object-fit:contain}

/* Indicador de velocidad */
.rueda__medidor{
  position:absolute;left:0;bottom:4%;width:100%;
  display:flex;align-items:center;gap:.8rem;
}
.rueda__medidor::before{
  content:"Velocidad";
  font-size:.9rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);
}
.rueda__medidor__barra{flex:1;height:1px;background:var(--linea);position:relative;display:block}
.rueda__medidor__barra i{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:var(--amarillo);display:block;
}

.rueda__texto .titular--medio{margin-top:1.3rem;max-width:12ch}

.servicios{margin-top:clamp(1.8rem,4vw,3rem);border-top:1px solid var(--linea)}
.servicio{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;
  column-gap:1.4rem;align-items:baseline;
  padding:1.15rem 0 1.15rem 1.8rem;
  border-bottom:1px solid var(--linea);
  color:#6E808C;
  transition:color .4s ease,background-color .4s ease,padding-left .5s cubic-bezier(.2,.8,.25,1);
}
/* Barra ámbar que se despliega de arriba abajo en el servicio activo */
.servicio::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--amarillo);
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
.servicio::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(242,169,59,.13),rgba(242,169,59,0) 62%);
  opacity:0;transition:opacity .45s ease;
}
.servicio__num{
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-weight:700;font-size:1.2rem;
  letter-spacing:.02em;color:#5D6E79;
  transition:color .4s ease,transform .5s cubic-bezier(.2,.8,.25,1);
}
.servicio h3{
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  color:#8296A3;
  transform-origin:left center;
  transition:color .4s ease,transform .55s cubic-bezier(.2,.8,.25,1);
}
.servicio p{
  grid-column:2;font-size:1.02rem;margin-top:.3rem;max-width:40ch;
  opacity:.55;transition:opacity .45s ease;
}

/* Activo: la fila se abre, crece y se enciende */
.servicio.esta-activo{padding-left:2.4rem;color:var(--gris-claro)}
.servicio.esta-activo::before{transform:scaleY(1)}
.servicio.esta-activo::after{opacity:1}
.servicio.esta-activo .servicio__num{color:var(--amarillo);transform:translateY(-2px)}
.servicio.esta-activo h3{color:#FFFFFF;transform:scale(1.13)}
.servicio.esta-activo p{opacity:1}

@media (max-width:1000px){
  .rueda{height:210vh}
  .rueda__fijo{
    grid-template-columns:1fr;align-content:center;
    gap:1rem;padding-block:5rem 6rem;
  }
  .rueda__escena{height:30svh;order:-1}
  .rueda__lienzo{max-width:30svh}
  .rueda__medidor{display:none}
  .servicio p{display:none}
  .servicio{padding-block:.75rem}
}

/* ============================================================
   LLAMADA
   ============================================================ */
.llamada{background:var(--amarillo);color:var(--tinta)}
.llamada__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:clamp(3.5rem,8vw,6.5rem) var(--margen);
}
.llamada h2{font-size:clamp(1.9rem,4vw,3.4rem);max-width:18ch}
.llamada p{margin-top:1.4rem;max-width:46ch;color:#4A3A0B;font-weight:500}
.llamada__acciones{
  margin-top:2.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.5rem;
}
.llamada__telefono{
  font-family:var(--display);font-variation-settings:'wdth' 108;
  font-weight:800;font-style:italic;
  font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:.9;letter-spacing:-.03em;
  border-bottom:3px solid var(--tinta);padding-bottom:.15rem;
  transition:opacity .2s ease;
}
.llamada__telefono:hover{opacity:.72}

/* ============================================================
   TRABAJOS
   ============================================================ */
.trabajos{background:var(--arena);color:var(--oscuro)}
.trabajos__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:clamp(4.5rem,10vw,8rem) var(--margen);
}
.trabajos .etiqueta{color:var(--gris)}
.trabajos__cabeza .titular--medio{margin-top:1.3rem;max-width:14ch}
.tira{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2.6rem);
  perspective:1400px;perspective-origin:50% 40%;
}
.tira figure{
  margin:0;
  transform-style:preserve-3d;
  transform:
    perspective(1400px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translateZ(var(--tz,0px));
  transition:transform .7s cubic-bezier(.2,.8,.25,1);
  will-change:transform;
}
.tira figure.esta-tocada{transition:transform .18s ease-out}
.tira__marco{
  position:relative;overflow:hidden;background:var(--carbon);
  box-shadow:0 26px 60px -30px rgba(10,20,27,.75);
}
.tira__marco::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 42%);
  opacity:var(--brillo,.35);transition:opacity .4s ease;
}
.tira img{
  aspect-ratio:4/3;object-fit:cover;width:100%;
  filter:saturate(.95) contrast(1.03) brightness(.95);
  transform:scale(1.03);
  transition:filter .7s ease,transform 1s cubic-bezier(.2,.8,.25,1);
}
.tira figure:hover img{filter:none;transform:scale(1.07)}
.tira figcaption{
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--linea-oscura);
  font-size:1rem;color:#5A6870;
  display:flex;gap:.9rem;
}
.tira figcaption span{font-family:var(--display);font-weight:700;color:var(--amarillo)}

/* La segunda pieza se desplaza: composición asimétrica */
@media (min-width:901px){
  .tira figure:nth-child(2){margin-top:3.5rem}
  .tira figure:nth-child(3){margin-top:1.5rem}
}
@media (max-width:900px){
  .tira{grid-template-columns:1fr;gap:2.5rem}
  .tira img{aspect-ratio:16/10}
}

/* ============================================================
   ZONAS
   ============================================================ */
.zonas__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:clamp(4.5rem,11vw,9rem) var(--margen);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.zonas__cabeza .titular--medio{margin-top:1.3rem}
.zonas__nota{margin-top:1.6rem;color:#5A6870;max-width:36ch;font-size:1.12rem}
.zonas__lista{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(1.5rem,4vw,3.5rem);
  border-top:1px solid var(--linea-oscura);
}
.zonas__lista li{
  font-family:var(--display);font-variation-settings:'wdth' 108;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.9vw,1.5rem);letter-spacing:-.005em;
  padding:.95rem .25rem;border-bottom:1px solid var(--linea-oscura);
  transition:padding-left .35s cubic-bezier(.2,.8,.25,1),color .3s ease;
}
.zonas__lista li:hover{padding-left:.7rem;color:var(--tinta)}
@media (max-width:900px){
  .zonas__interior{grid-template-columns:1fr}
  .zonas__lista{margin-top:2.5rem}
}
@media (max-width:520px){
  .zonas__lista{grid-template-columns:1fr}
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{border-top:1px solid var(--linea)}
.contacto__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:clamp(4rem,9vw,7rem) var(--margen);
}
.contacto__telefono{
  display:block;margin-top:1.5rem;
  font-family:var(--display);font-variation-settings:'wdth' 108;
  font-weight:800;font-style:italic;
  font-size:clamp(2.6rem,9vw,7.6rem);line-height:.9;letter-spacing:-.035em;
  transition:color .3s ease;
}
.contacto__telefono:hover{color:var(--amarillo)}

.contacto__alt-etiqueta{
  margin-top:2rem;font-size:.86rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}
.contacto__telefono--alt{
  margin-top:.5rem;font-size:clamp(2.3rem,7.8vw,6.6rem);color:var(--gris-claro);
}
.contacto__telefono--alt:hover{color:var(--amarillo)}

.contacto__rejilla{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem clamp(2rem,6vw,6rem);
  border-top:1px solid var(--linea);padding-top:2rem;
  max-width:900px;
}
.contacto__rejilla dt{
  padding-left:.15rem;font-size:.86rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.4rem;
}
.contacto__rejilla dd{margin-bottom:1.8rem;color:var(--gris-claro);padding-left:.15rem}
.contacto__rejilla dd a{border-bottom:1px solid var(--linea);padding-bottom:.15rem}
.contacto__rejilla dd a:hover{border-bottom-color:var(--amarillo);color:var(--amarillo)}
@media (max-width:620px){.contacto__rejilla{grid-template-columns:1fr;gap:0}}

/* ============================================================
   PIE
   ============================================================ */
.pie{border-top:1px solid var(--linea);background:var(--tinta)}
.pie__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:2rem var(--margen) calc(2rem + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;
  font-size:1rem;color:var(--gris);
}
.pie__marca{
  font-family:var(--display);font-variation-settings:'wdth' 112;
  font-weight:800;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:-.005em;color:var(--hueso);
}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:1.5rem;margin-right:auto}
.pie__enlaces a:hover{color:var(--amarillo)}

/* ── Barra fija móvil ─────────────────────────────────────── */
.barra-movil{display:none}
@media (max-width:1000px){
  .barra-movil{
    position:fixed;left:0;right:0;bottom:0;z-index:110;
    display:grid;grid-template-columns:1.6fr 1fr;gap:1px;
    background:var(--linea);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -16px 34px rgba(10,20,27,.45);
  }
  .barra-movil a{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:62px;
    font-family:var(--display);font-weight:800;font-size:1.2rem;
    text-transform:uppercase;letter-spacing:.02em;
  }
  .barra-movil__llamar{background:var(--amarillo);color:var(--tinta)}
  .barra-movil__whatsapp{background:var(--carbon);color:var(--hueso)}
  .pie__interior{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ============================================================
   MOVIMIENTO
   ============================================================ */

/* Entrada de la portada */
.portada__logo{
  animation:asomar-marca 1.25s .15s cubic-bezier(.16,.84,.28,1) both;
}
@keyframes asomar-marca{
  from{opacity:0;transform:translateY(26px) scale(.965)}
  to{opacity:1;transform:none}
}
.portada__frase{animation:subir .9s .55s cubic-bezier(.2,.8,.25,1) both}
.portada__indice{animation:subir .8s .05s cubic-bezier(.2,.8,.25,1) both}
.portada__bajo{animation:subir .9s .5s cubic-bezier(.2,.8,.25,1) both}
.portada__datos{animation:subir .9s .62s cubic-bezier(.2,.8,.25,1) both}
@keyframes subir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Revelado al hacer scroll */
[data-revelar]{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.8,.25,1),transform .9s cubic-bezier(.2,.8,.25,1);
  transition-delay:var(--retardo,0ms);
}
[data-revelar].esta-dentro{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .linea,.portada__indice,.portada__bajo,.portada__datos,.portada__franja,.portada::after{animation:none}
  [data-revelar]{opacity:1;transform:none;transition:none}
  .rueda{height:auto}
  .rueda__fijo{position:static;height:auto;padding-block:4rem}
  .rueda__escena{height:auto;max-height:50svh}
  .cinta__tren{transform:none !important}
  *{scroll-behavior:auto}
}

/* ============================================================
   PANTALLA DE CARGA
   La grúa avanza sobre la barra a medida que se carga la web.
   ============================================================ */
.cargando{
  position:fixed;inset:0;z-index:300;
  background:var(--tinta);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s ease;
}
.cargando.se-va{opacity:0;visibility:hidden}

.cargando__caja{width:min(78vw,520px);padding-inline:1rem}
.cargando__logo{
  width:min(78%,380px);height:auto;margin:0 auto 2.6rem;
}
.cargando__pista{position:relative;height:64px}

.cargando__grua{
  position:absolute;bottom:-3px;left:0;width:96px;height:auto;color:var(--hueso);
  transform:translateX(0);
  will-change:transform;
}
.cargando__ruedas{transform-box:fill-box;transform-origin:center}
.cargando__ruedas circle{
  transform-box:fill-box;transform-origin:center;
  animation:girar-rueda .55s linear infinite;
}
@keyframes girar-rueda{to{transform:rotate(360deg)}}

.cargando__barra{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(247,243,236,.16);display:block;
}
.cargando__barra i{
  display:block;height:100%;width:0%;
  background:var(--amarillo);
}
.cargando__pie{
  margin-top:1.1rem;text-align:right;
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-weight:600;font-size:1.2rem;
  letter-spacing:.02em;color:var(--gris);
}

@media (prefers-reduced-motion:reduce){
  .cargando{display:none}
}

/* ============================================================
   PORTADA: profundidad y movimiento
   ============================================================ */

/* Carretera en perspectiva con la línea discontinua alejándose */
.portada__carretera{
  position:absolute;left:50%;bottom:-2%;z-index:-2;
  width:min(150vw,1500px);height:46vh;
  transform:translateX(-50%) perspective(520px) rotateX(72deg);
  transform-origin:50% 100%;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 6%,transparent 82%);
  mask-image:linear-gradient(to top,#000 6%,transparent 82%);
}
.portada__carretera span{
  position:absolute;left:50%;top:-100%;width:14px;height:300%;
  transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,
    rgba(247,243,236,.5) 0 44px, transparent 44px 118px);
  animation:correr-linea 2.6s linear infinite;
}
@keyframes correr-linea{to{transform:translate(-50%,118px)}}

/* Indicador de scroll */
.portada__pista{
  margin:clamp(1.6rem,4vh,2.6rem) auto 0;text-align:center;
  font-size:.95rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);
}
.portada__pista span{display:inline-block;padding-bottom:2.4rem;position:relative}
.portada__pista span::after{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:2rem;
  background:linear-gradient(to bottom,var(--amarillo),transparent);
  transform-origin:top;
  animation:bajar-pista 2.2s ease-in-out infinite;
}
@keyframes bajar-pista{
  0%,100%{transform:scaleY(.35);opacity:.4}
  50%{transform:scaleY(1);opacity:1}
}

/* Capas movidas por el scroll y por el cursor */

/* Brillo que cruza ALMERÍA una sola vez, al entrar */

/* La entrada espera a que termine la carga */
.portada__indice,.portada__logo,.portada__frase,
.portada__bajo,.portada__datos,.portada__pista{
  animation-play-state:paused;
}
body.esta-cargada .portada__logo,
body.esta-cargada .portada__frase,
body.esta-cargada .portada__indice,
body.esta-cargada .portada__bajo,
body.esta-cargada .portada__datos,
body.esta-cargada .portada__pista{
  animation-play-state:running;
}
.portada__pista{animation:subir .8s .95s cubic-bezier(.2,.8,.25,1) both}

@media (prefers-reduced-motion:reduce){
  .portada__carretera span,.portada__pista span::after{animation:none}
}

/* Terminada la entrada, se retiran esas animaciones: si no, su
   fill-mode seguiría pisando los transform del parallax. */
body.entrada-lista .portada__indice,
body.entrada-lista .portada__logo,
body.entrada-lista .portada__frase,
body.entrada-lista .portada__bajo,
body.entrada-lista .portada__datos,
body.entrada-lista .portada__pista{animation:none}

/* ============================================================
   PORTADA: capas de profundidad
   Cada capa se mueve a una velocidad distinta con el scroll.
   El eco de ALMERÍA es la más lejana; la grúa, la más cercana.
   ============================================================ */


/* ============================================================
   FONDOS DE SECCIÓN
   Textura de apoyo detrás de cada categoría. Estáticos.
   ============================================================ */
.confianza,.llamada,.contacto{position:relative;overflow:hidden}

.confianza__fondo,.llamada__fondo,.contacto__fondo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}

/* Sección clara: trama de líneas finas, apenas perceptible */
.confianza__fondo{
  background-image:repeating-linear-gradient(90deg,
    var(--linea-oscura) 0 1px, transparent 1px 132px);
  opacity:.55;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 50%,#000 20%,transparent 82%);
  mask-image:radial-gradient(90% 70% at 50% 50%,#000 20%,transparent 82%);
}

/* Banda ámbar: el asfalto por debajo, en modo multiplicado */
.llamada__fondo{
  background-image:repeating-linear-gradient(115deg,
    rgba(27,42,51,.06) 0 22px, transparent 22px 44px);
}

/* Contacto: el mismo asfalto, más apagado */
.contacto__fondo{
  background-image:repeating-linear-gradient(90deg,
    var(--linea) 0 1px, transparent 1px 148px);
  opacity:.7;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 70%,transparent);
}

.confianza__interior,.llamada__interior,.contacto__interior{position:relative;z-index:1}


/* ============================================================
   PÁGINAS INTERIORES (arquitectura SEO)
   Reutilizan el sistema existente; solo añaden lo que falta.
   ============================================================ */
.articulo{padding-top:7rem}
.articulo__interior{
  max-width:920px;margin-inline:auto;
  padding:clamp(2.5rem,6vw,4.5rem) var(--margen) clamp(3rem,7vw,5rem);
}
.articulo h1{font-size:clamp(2rem,4.4vw,3.8rem);max-width:18ch}
.articulo__entrada{
  margin-top:1.6rem;max-width:52ch;
  font-size:clamp(1.1rem,1.7vw,1.32rem);color:var(--gris-claro);
}
.articulo__acciones{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.articulo .titular--medio{margin-top:clamp(2.8rem,6vw,4rem)}
.articulo .titular--medio + p{margin-top:1.2rem}
.articulo p{max-width:62ch;color:var(--gris-claro);line-height:1.65}

.lista-servicio{margin-top:1.6rem;border-top:1px solid var(--linea)}
.lista-servicio li{
  padding:1rem .25rem 1rem 1.7rem;position:relative;
  border-bottom:1px solid var(--linea);color:var(--gris-claro);
}
.lista-servicio li::before{
  content:"";position:absolute;left:0;top:1.55rem;
  width:9px;height:2px;background:var(--amarillo);
}

.migas{margin-bottom:2.2rem}
.migas ol{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.migas li{
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-size:.95rem;font-weight:600;text-transform:uppercase;color:var(--gris);
}
.migas li:not(:last-child)::after{content:"/";margin-left:.55rem;opacity:.5}
.migas a:hover{color:var(--amarillo)}

.ramas{background:var(--carbon);border-block:1px solid var(--linea)}
.ramas__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:clamp(3rem,7vw,5rem) var(--margen);
}
.ramas__lista{
  margin-top:2.2rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  border-top:1px solid var(--linea);
}
.ramas__lista li{border-bottom:1px solid var(--linea);border-right:1px solid var(--linea)}
.ramas__lista li:last-child{border-right:0}
.ramas__lista a{display:block;padding:1.6rem 1.6rem 1.8rem;transition:background-color .3s ease}
.ramas__lista a:hover{background:rgba(253,196,14,.07)}
.ramas__lista strong{
  display:block;font-family:var(--display);font-variation-settings:var(--ancho-titular);
  font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
}
.ramas__lista span{display:block;margin-top:.6rem;color:var(--gris);font-size:1rem}

@media (max-width:900px){
  .articulo{padding-top:5.5rem}
  .ramas__lista li{border-right:0}
}
.servicio h3 a{color:inherit;text-decoration:none}

/* Preguntas frecuentes y zonas de las páginas interiores */
.articulo .etiqueta{margin-bottom:1.4rem}
.preguntas{background:var(--carbon);border-block:1px solid var(--linea)}
.preguntas__interior{max-width:920px;margin-inline:auto;padding:clamp(3rem,7vw,4.5rem) var(--margen)}
.preguntas dl{margin-top:2rem;border-top:1px solid var(--linea)}
.preguntas dl div{padding:1.5rem 0;border-bottom:1px solid var(--linea)}
.preguntas dt{
  font-family:var(--display);font-variation-settings:var(--ancho-titular);
  font-weight:800;text-transform:uppercase;font-size:1.15rem;letter-spacing:-.01em;
}
.preguntas dd{margin-top:.7rem;color:var(--gris-claro);max-width:62ch;line-height:1.65}
.preguntas dd a{
  color:var(--hueso);
  border-bottom:1px solid rgba(253,196,14,.45);
  transition:color .25s ease,border-color .25s ease;
}
.preguntas dd a:hover{color:var(--amarillo);border-bottom-color:var(--amarillo)}
.zonas-pagina__interior{max-width:920px;margin-inline:auto;padding:clamp(3rem,7vw,4.5rem) var(--margen)}
.zonas-pagina p{margin-top:1.2rem;color:var(--gris);max-width:56ch}
.zonas-pagina .zonas__lista{margin-top:2rem;border-top:1px solid var(--linea)}
.zonas-pagina .zonas__lista li{border-bottom:1px solid var(--linea)}

/* ============================================================
   PÁGINA DE ASISTENCIA EN CARRETERA
   Bloques largos: subtítulo de marca, H3, listas con título,
   guía por pasos, contacto con formulario y mapa, cierre.
   Sin tarjetas genéricas: la retícula la marcan las líneas.
   ============================================================ */

/* Imagen opcional que no existe: recuadro discreto, no icono roto */
.articulo__figura img.no-disponible{
  visibility:hidden;
}
.articulo__figura:has(img.no-disponible){
  aspect-ratio:2.4/1;
  border:1px dashed var(--linea);
  display:grid;place-items:center;
}
.articulo__figura:has(img.no-disponible)::before{
  content:"Falta la foto: img/asistencia-carretera.jpg";
  grid-area:1/1;
  font-variation-settings:var(--ancho-dato);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}
.articulo__figura:has(img.no-disponible) img{grid-area:1/1;height:100%}

/* ── H1 con línea de marca ─────────────────────────────────── */
.titulo__marca{
  display:block;margin-top:.55rem;
  font-size:clamp(.82rem,1.5vw,1.05rem);
  font-variation-settings:var(--ancho-dato);
  font-weight:600;letter-spacing:.22em;
  color:var(--amarillo);
}

/* ── H3 dentro del artículo ────────────────────────────────── */
.articulo h3{
  margin-top:clamp(2rem,4vw,2.8rem);
  font-size:clamp(1.1rem,1.9vw,1.45rem);
  letter-spacing:-.01em;
}
.articulo h3 + p{margin-top:.9rem}
.articulo p a{
  color:var(--hueso);
  border-bottom:1px solid rgba(253,196,14,.45);
  padding-bottom:.05rem;
  transition:color .25s ease,border-color .25s ease;
}
.articulo p a:hover{color:var(--amarillo);border-bottom-color:var(--amarillo)}

.articulo__figura{margin:clamp(2.4rem,5vw,3.4rem) 0 0}
.articulo__figura img{
  width:100%;aspect-ratio:2.4/1;object-fit:cover;object-position:center 60%;
  filter:grayscale(1) contrast(1.06);
  transition:filter .6s ease;
}
.articulo__figura:hover img{filter:none}
.articulo__figura figcaption{
  margin-top:.8rem;padding-top:.8rem;
  border-top:1px solid var(--linea);
  font-variation-settings:var(--ancho-dato);
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);
}

.destacado{
  margin-top:2rem;
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.86rem;color:var(--hueso) !important;
}

/* ── Lista con título en negrita ───────────────────────────── */
.lista-detalle{margin-top:1.4rem;border-top:1px solid var(--linea)}
.lista-detalle li{
  position:relative;
  padding:1.25rem 0 1.25rem 3.2rem;
  border-bottom:1px solid var(--linea);
  color:var(--gris-claro);line-height:1.6;max-width:68ch;
  transition:padding-left .35s cubic-bezier(.2,.8,.25,1),color .35s ease;
}
.lista-detalle li::before{
  content:"";position:absolute;left:0;top:2.05rem;
  width:2rem;height:1px;background:var(--amarillo);
  transform-origin:left;transform:scaleX(.45);
  transition:transform .45s cubic-bezier(.2,.8,.25,1);
}
.lista-detalle li:hover{padding-left:3.7rem;color:var(--hueso)}
.lista-detalle li:hover::before{transform:scaleX(1)}
.lista-detalle strong{
  display:block;margin-bottom:.3rem;
  font-family:var(--display);font-variation-settings:var(--ancho-titular);
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.05rem;color:#FFFFFF;
}

/* ── Opiniones · apartado propio, banda clara ──────────────── */
.opiniones-seccion{background:var(--arena);color:var(--oscuro);border-block:1px solid var(--linea-oscura)}
.opiniones-seccion__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:clamp(3.4rem,8vw,6rem) var(--margen);
}
.opiniones-seccion .etiqueta{color:var(--gris);margin-bottom:1.3rem}
.opiniones-seccion .etiqueta::after{background:var(--linea-oscura)}
.opiniones-seccion__entrada{
  margin-top:1.3rem;max-width:52ch;
  color:#5A6870;font-size:1.08rem;line-height:1.6;
}

.opiniones{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--linea-oscura);
}
.opinion{
  margin:0;
  padding:2.2rem clamp(1.2rem,2.5vw,2.2rem) 2.4rem 0;
  border-right:1px solid var(--linea-oscura);
  display:flex;flex-direction:column;
}
.opinion:last-child{border-right:0}
.opinion blockquote{margin:0;position:relative;padding-top:2.2rem;flex:1}
.opinion blockquote::before{
  content:"";position:absolute;left:0;top:0;
  width:2.2rem;height:2px;background:var(--amarillo);
  transform-origin:left;transform:scaleX(0);
  transition:transform .7s cubic-bezier(.2,.8,.25,1);
}
.opinion[data-revelar].esta-dentro blockquote::before{
  transform:scaleX(1);
  transition-delay:calc(var(--retardo,0ms) + 220ms);
}
.opinion blockquote p{
  margin:0;color:var(--oscuro);
  font-size:1.06rem;line-height:1.62;
}
.opinion figcaption{
  margin-top:1.6rem;padding-top:1rem;
  border-top:1px solid var(--linea-oscura);
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oscuro);
}
.opinion figcaption span{display:block;margin-top:.35rem;color:var(--gris);font-weight:400}

.opiniones-seccion__pie{margin-top:2.2rem}
.opiniones-seccion__pie a{
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-weight:700;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oscuro);
  border-bottom:1px solid var(--linea-oscura);padding-bottom:.35rem;
  transition:border-color .3s ease,padding .3s ease;
}
.opiniones-seccion__pie a:hover{border-bottom-color:var(--amarillo);padding-left:.3rem}

@media (max-width:900px){
  .opiniones{grid-template-columns:1fr}
  .opinion{border-right:0;border-bottom:1px solid var(--linea-oscura);padding-right:0}
  .opinion:last-child{border-bottom:0}
}

/* ── Guía por pasos ────────────────────────────────────────── */
.pasos{background:var(--carbon);border-block:1px solid var(--linea)}
.pasos__interior{
  max-width:1040px;margin-inline:auto;
  padding:clamp(3.4rem,8vw,6rem) var(--margen);
}
.pasos .etiqueta{margin-bottom:1.3rem}
.pasos__entrada{margin-top:1.3rem;max-width:58ch;color:var(--gris-claro);line-height:1.65}

.pasos__lista{margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--linea)}
.paso{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(1.4rem,3vw,2.6rem);
  padding:clamp(2rem,4vw,2.8rem) 0;
  border-bottom:1px solid var(--linea);
}
/* El icono ocupa la primera columna entera; todo lo demás fluye en la segunda,
   cada hijo en su propia fila. Así el bloque admite cualquier combinación
   de párrafos y listas sin que se solapen. */
.paso > *{grid-column:2}
.paso__num{
  font-family:var(--display);font-variation-settings:var(--ancho-dato);
  font-weight:700;font-size:.8rem;letter-spacing:.28em;
  color:var(--amarillo);
}
.paso__icono{
  grid-column:1;grid-row:1 / -1;align-self:start;
  width:clamp(38px,5vw,52px);height:auto;
  fill:none;stroke:var(--hueso);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.55;
  transition:opacity .5s ease,stroke .5s ease,transform .6s cubic-bezier(.2,.8,.25,1);
}
.paso h3{
  margin-top:.65rem;
  font-size:clamp(1.15rem,2.2vw,1.6rem);
}
.paso > p{margin-top:1rem;color:var(--gris);max-width:62ch}
.paso ul{margin-top:1rem;max-width:66ch}
.paso ul li{
  position:relative;padding:.42rem 0 .42rem 1.5rem;
  color:var(--gris-claro);line-height:1.6;
}
.paso ul li::before{
  content:"";position:absolute;left:0;top:1.04em;
  width:.55rem;height:1px;background:var(--amarillo);opacity:.8;
}
.paso ul + p{margin-top:1.1rem}
.paso em{color:var(--hueso);font-style:italic}
.paso strong{color:var(--hueso)}

/* El icono se ilumina y se asienta cuando el paso entra en pantalla */
.paso[data-revelar] .paso__icono{transform:translateY(10px) scale(.94)}
.paso[data-revelar].esta-dentro .paso__icono{
  opacity:1;stroke:var(--amarillo);transform:none;
  transition-delay:calc(var(--retardo,0ms) + 160ms);
}

@media (max-width:640px){
  .paso{grid-template-columns:minmax(0,1fr)}
  .paso > *{grid-column:1}
  .paso__icono{grid-row:auto;margin:.9rem 0 .4rem}
}

/* ── Contacto de página ────────────────────────────────────── */
.contacto-pagina{border-top:1px solid var(--linea)}
.contacto-pagina__interior{
  max-width:var(--ancho);margin-inline:auto;
  padding:clamp(3.4rem,8vw,6rem) var(--margen);
}
.contacto-pagina .etiqueta{margin-bottom:1.3rem}

.contacto-pagina__rejilla{
  margin-top:clamp(2.2rem,5vw,3.2rem);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linea);
}
.via{
  padding:2rem clamp(1.2rem,2.5vw,2.2rem) 2.2rem 0;
  border-right:1px solid var(--linea);
}
.via:last-child{border-right:0}
.via h3{
  font-size:.84rem;font-variation-settings:var(--ancho-dato);
  letter-spacing:.2em;color:var(--gris);
}
.via p{margin-top:1rem;color:var(--gris-claro);line-height:1.6;max-width:40ch}
.via address{margin-top:1.1rem;font-style:normal;color:var(--gris-claro);line-height:1.75}
.via address strong{color:var(--hueso)}
.via .boton{margin-top:1.4rem}
.via__telefono{
  display:inline-block;margin-top:1.1rem;
  font-family:var(--display);font-variation-settings:var(--ancho-titular);
  font-weight:800;text-transform:uppercase;line-height:.92;
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  color:var(--amarillo);
  transition:transform .35s cubic-bezier(.2,.8,.25,1);
}
.via__telefono:hover{transform:translateX(6px)}

@media (max-width:860px){
  .contacto-pagina__rejilla{grid-template-columns:1fr}
  .via{border-right:0;border-bottom:1px solid var(--linea);padding-right:0}
  .via:last-child{border-bottom:0}
}

/* ── Formulario ────────────────────────────────────────────── */
.formulario{
  margin-top:clamp(2.6rem,5vw,3.6rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem clamp(1.2rem,3vw,2.4rem);
  max-width:840px;
  padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--linea);
}
.formulario__nota{
  grid-column:1/-1;margin:0;
  color:var(--gris);font-size:.98rem;
}
.formulario__nota strong{color:var(--amarillo)}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.campo{display:flex;flex-direction:column;gap:.5rem}
.campo--ancho{grid-column:1/-1}
.campo label{
  font-variation-settings:var(--ancho-dato);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);
}
.campo input[type=text],
.campo input[type=tel],
.campo textarea{
  width:100%;
  padding:.85rem 0;
  background:transparent;border:0;
  border-bottom:1px solid var(--linea);
  color:var(--hueso);
  font-family:var(--texto);font-size:1.02rem;
  border-radius:0;
  transition:border-color .3s ease;
}
.campo textarea{resize:vertical;line-height:1.6}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(147,165,176,.6)}
.campo input:focus,.campo textarea:focus{
  outline:none;border-bottom-color:var(--amarillo);
}
.campo--consentimiento label{
  flex-direction:row;display:flex;align-items:flex-start;gap:.7rem;
  text-transform:none;letter-spacing:0;font-size:.95rem;
  font-variation-settings:var(--ancho-titular);
  color:var(--gris-claro);line-height:1.5;
}
.campo--consentimiento input{
  accent-color:var(--amarillo);
  width:1.05rem;height:1.05rem;margin-top:.2rem;flex:none;
}
.campo--consentimiento a{border-bottom:1px solid var(--linea)}
.campo--consentimiento a:hover{color:var(--amarillo);border-bottom-color:var(--amarillo)}
.formulario button{justify-self:start;cursor:pointer;border:0;font-size:1rem}

@media (max-width:640px){.formulario{grid-template-columns:1fr}}

/* ── Mapa ──────────────────────────────────────────────────── */
.mapa{
  margin-top:clamp(2.6rem,5vw,3.6rem);
  position:relative;
  aspect-ratio:21/9;
  border:1px solid var(--linea);
  overflow:hidden;
  filter:grayscale(1) contrast(.92) brightness(.88);
  transition:filter .6s ease;
}
.mapa:hover{filter:none}
.mapa iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:700px){.mapa{aspect-ratio:4/3}}

/* ── Cierre ────────────────────────────────────────────────── */
.diferencia{background:var(--carbon);border-top:1px solid var(--linea)}
.diferencia__interior{
  max-width:920px;margin-inline:auto;
  padding:clamp(3.4rem,8vw,5.5rem) var(--margen);
}
.diferencia p{margin-top:1.4rem;color:var(--gris-claro);line-height:1.65;max-width:60ch}
.diferencia .lista-detalle{margin-top:2.2rem}
.lista-detalle--cierre li{padding-left:3.2rem}

/* ── Revelado lateral para los H2 largos ───────────────────── */
[data-revelar="lateral"]{transform:translateX(-26px)}
[data-revelar="lateral"].esta-dentro{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-revelar="lateral"]{transform:none}
  .paso[data-revelar] .paso__icono{transform:none;opacity:1;stroke:var(--amarillo)}
}