/* ==========================================================================
   Automoción Benijófar — hoja de estilo

   Rehecha el 17-09-2026. La anterior venía de mi propia plantilla: foto a
   sangre con velo, titular a dos tintas y texto encima de la imagen. Esta
   parte de otro esqueleto: el nombre del taller arriba, el titular ancho a un
   solo color, lo que hay que leer en columnas y la foto grande debajo.

   El rojo hace de filo y de botón. No pinta letras de titular: eso es el tic
   de plantilla más reconocible que hay.
   ========================================================================== */
:root{
  --rojo:#c1121f; --rojo-vivo:#e01523;
  /* El vivo sobre tinta da 3,83 y la letra pequeña necesita 4,5. Este da
     5,95 sobre la tinta y 4,52 sobre el gris de servicios, que es el fondo
     oscuro más claro que hay. Medido. Solo para texto chico sobre oscuro. */
  --rojo-sobre-tinta:#ff5555;
  --papel:#f4f3f1; --blanco:#fff; --papel-2:#e6e4e0;
  /* Negro casi neutro en vez del marron-negro de antes: mas limpio y es
     lo que hace que las fotos del taller no salgan amarillentas. */
  --tinta:#121215; --tinta-alt:#1b1b1f; --tinta-2:#4c4c52; --tinta-3:#6c6c73;
  /* Las estrellas sobre papel se quedaban en 3,4:1. Este ambar da 4,54:1,
     que ya pasa el minimo, y es el mismo tono. */
  --oro:#9a6300;
  --linea:rgba(18,18,21,.14); --linea-clara:rgba(244,243,241,.13);
  /* Para lo que separa de verdad —una pregunta de la siguiente, un
     síntoma del siguiente— hace falta un filete que se vea. */
  --linea-fuerte:rgba(18,18,21,.24); --linea-fuerte-clara:rgba(244,243,241,.22);
  /* Archivo y no Chakra Petch: la otra tenia aire de videojuego. Esta es
     una grotesca de periodico, que es lo que pega con un taller. */
  --display:"Archivo",system-ui,sans-serif;
  --texto:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(20px,4.4vw,72px);
  /* En una pantalla grande 1280 dejaba 300 px de blanco a cada lado. Se
     abre a 1600 y lo que se limita es cada bloque de texto por su cuenta,
     con un max-width en caracteres, que es como se hace. */
  /* Clavada en 1600 dejaba 550 px de tinta muerta a cada lado en una
     pantalla de 2560 y 990 en una de 3440. Ahora crece con el ancho: a
     1920 el margen baja de 232 a 128 px y a 2560 de 552 a 397. */
  --ancho:min(1500px + 16vw,100%);
  --ease:cubic-bezier(.22,1,.36,1);
  /* El margen de lectura llevado al borde: lo usan las secciones cuya foto
     se sale por un lateral. Ojo: aqui no vale --ancho, porque su 100%
     depende del padre; hace falta la version en unidades de pantalla. */
  --ventana:calc(100vw - var(--barra-scroll,0px));
  /* La misma curva que --ancho, pero en unidades de pantalla: si aquí se
     queda el 1600 fijo, las secciones que sangran por un lateral (cómo
     funciona, servicios, David, contacto) siguen arrancando 550 px más
     adentro que las demás y no se alinean con ellas. */
  --marco:max(var(--pad),calc((var(--ventana) - min(1500px + 16vw,var(--ventana))) / 2 + var(--pad)));
  /* El aire entre secciones, en un solo sitio. Antes cada una traia el
     suyo y la pagina se estiraba sin motivo. */
  /* Manda el ancho, no el alto de la ventana: 58 px en el móvil, 77 a
     1440 y 112 de 2560 en adelante. Con vh se quedaba clavado en 50. */
  --sec:clamp(58px,4.6vw + 1.2vh,112px);
}
*{box-sizing:border-box}
html{font-size:clamp(16px,.28vw + 13.2px,18px);scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--texto);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.env{width:var(--ancho);margin-inline:auto;padding-inline:var(--pad)}
/* La barra es pegajosa: al saltar a un apartado desde el menú, lo
   primero de la sección quedaba debajo de ella. */
section[id]{scroll-margin-top:var(--alto-barra,71px)}
.mono{font-family:var(--mono);font-size:.64rem;letter-spacing:.085em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* Titulares a UN solo color. El rojo hace de filo y de botón: no pinta letras.
   El titular a dos tintas es el tic de plantilla más reconocible que hay. */
/* Archivo es variable en ancho y en grosor. Fijar los dos ejes a mano en
   vez de dejar que el navegador sintetice el estrechado es lo que separa
   un titular bien puesto de uno que parece una fuente de sistema. */
.h1,.h2,.h3{
  font-family:var(--display);text-transform:uppercase;margin:0;
  font-variation-settings:"wdth" 88,"wght" var(--peso,800);
  font-weight:var(--peso,800);font-stretch:88%;
  text-wrap:balance;font-kerning:normal;
}
.h1{font-size:clamp(2rem,4.2vw,3.7rem);line-height:.92;letter-spacing:-.042em;color:var(--tinta)}
.h2{font-size:clamp(1.56rem,2.8vw,2.6rem);line-height:.98;letter-spacing:-.038em}
.h3{--peso:700;font-size:clamp(.96rem,1.34vw,1.18rem);line-height:1.16;letter-spacing:-.024em}
p{margin:0;text-wrap:pretty}
.lead{font-size:clamp(1.02rem,1.12vw,1.16rem);line-height:1.6;color:var(--tinta-2);letter-spacing:-.004em}
/* Los números de teléfono, a ancho fijo: si no, el 1 es más estrecho que
   el resto y la cifra baila al cambiar de pantalla. */
.cont__dato--tel dd,.faq__tel,.bar__tel b,.pie__tel a{font-variant-numeric:tabular-nums}

/* El botón no crece el hueco al pasar el cursor —eso movía el texto—:
   se levanta dos píxeles, la flecha avanza y debajo aparece una sombra
   teñida del propio color. El relleno lleva un degradado muy corto, lo
   justo para que no parezca un rectángulo de color plano. */
.btn{
  --corte:13px;position:relative;
  display:inline-flex;align-items:center;gap:.78em;
  font-family:var(--texto);font-weight:600;font-size:.92rem;letter-spacing:-.003em;
  padding:.94em 1.5em;min-height:50px;border:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%);
  transition:background .3s var(--ease),color .3s var(--ease),
             transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);
}
.btn i{width:.8em;height:.8em;position:relative;display:inline-block;flex:0 0 auto;transition:transform .3s var(--ease)}
.btn i::before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:currentColor}
.btn i::after{content:"";position:absolute;top:50%;right:0;width:.42em;height:.42em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn--rojo{background:linear-gradient(180deg,#d11626,var(--rojo));color:#fff}
.btn--rojo:hover{background:linear-gradient(180deg,var(--rojo-vivo),#cc1420);box-shadow:0 12px 26px -14px rgba(193,18,31,.9)}
.btn--linea{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.4px var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--papel);box-shadow:inset 0 0 0 1.4px var(--tinta),0 12px 26px -14px rgba(18,18,21,.8)}
.btn--claro{background:transparent;color:var(--papel);box-shadow:inset 0 0 0 1.4px rgba(244,243,241,.44)}
.btn--claro:hover{background:var(--papel);color:var(--tinta);box-shadow:inset 0 0 0 1.4px var(--papel),0 12px 26px -14px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}.btn:hover i{transform:none}}

/* ══════════ BARRA ══════════ */
/* Encima de la portada la barra va transparente y con el logo en claro,
   como en la referencia; en cuanto se baja de la foto se vuelve solida. */
.bar{
  position:sticky;top:0;z-index:60;background:var(--blanco);
  border-bottom:1px solid var(--linea);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.bar__claro{display:none}
.bar--sobre{background:transparent;border-bottom-color:transparent;color:var(--papel)}
.bar--sobre .bar__oscuro{display:none}
.bar--sobre .bar__claro{display:block}
.bar--sobre .bar__nav a{color:rgba(245,243,239,.86)}
.bar--sobre .bar__nav a:hover{color:#fff}
.bar--sobre .lang{color:var(--papel);border-color:rgba(245,243,239,.45)}
.bar--sobre .lang:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.bar--sobre .burger{color:var(--papel)}
.bar--sobre .prog{opacity:0}
.bar__in{display:flex;align-items:center;gap:clamp(12px,1.9vw,26px);padding-block:12px}
.bar__logo img{height:34px;width:auto}
.bar__nav{display:flex;gap:clamp(11px,1.5vw,22px);margin-left:auto}
/* Sin partir: un enlace de la barra a dos lineas descoloca toda la fila. */
.bar__nav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.065em;text-transform:uppercase;color:var(--tinta-2);padding:8px 0;white-space:nowrap;transition:color .26s var(--ease)}
.bar__nav a:hover{color:var(--rojo)}
.bar__tel{--corte:9px;background:var(--rojo);color:#fff;font-weight:700;font-size:.86rem;padding:.72em 1.1em;white-space:nowrap;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%)}
@media (max-width:1140px){.bar__nav{display:none}}

/* ══════════ SOBRETÍTULOS ══════════
   El filete rojo y la etiqueta en mono encima de cada titular. Va en la
   maqueta que mandó David y es lo que ata todas las secciones entre sí. */
.kick{
  display:flex;align-items:center;gap:.8em;margin:0 0 clamp(13px,1.7vh,19px);
  color:var(--rojo);font-size:.66rem;font-weight:500;letter-spacing:.11em;
}
.kick i{display:block;width:clamp(22px,2.4vw,34px);height:2px;background:var(--rojo);flex:0 0 auto}
.oscura .kick,.port .kick{color:var(--rojo-sobre-tinta)}
.oscura .kick i,.port .kick i{background:var(--rojo-sobre-tinta)}

/* Los iconos van dibujados a mano, uno por uno, no de una librería. */
.ico{flex:0 0 auto;width:clamp(24px,2.2vw,30px);height:auto;color:var(--tinta);transition:color .3s var(--ease),transform .5s var(--ease)}
.oscura .ico{color:var(--papel)}

/* ══════════ PORTADA ══════════
   La nave a toda pantalla, muy apagada, y encima el texto centrado. La
   foto es el sitio donde pasa, no el asunto: por eso el velo es fuerte y
   no se lee nada a través de ella.

   Dos botones y nada más: el que abre el formulario corto y el de llamar. */
.port{
  /* La barra es pegajosa, asi que ocupa sitio en el flujo y la foto
     empezaba por debajo: una franja blanca encima de la portada. Se sube
     la portada lo que mide la barra y la barra queda encima de la foto,
     que es lo que hace la maqueta. */
  margin-top:calc(var(--alto-barra,71px) * -1);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:max(620px,min(94svh,960px));
  display:grid;place-items:center;
  background:var(--tinta);color:var(--papel);
  padding:calc(var(--alto-barra,71px) + clamp(36px,6vh,84px)) var(--marco) clamp(76px,11vh,132px);
}
.port__fondo{position:absolute;inset:0;z-index:-2}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease)}
.slide.is-on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.slides.sin-zoom .slide{transition:opacity 3.2s var(--ease)}
/* El velo: la foto baja a un tercio y el centro se oscurece más todavía,
   que es donde cae el titular. Sin esto el rótulo del fondo compite. */
.port__fondo::after{
  content:"";position:absolute;inset:0;
  /* Tres capas y ninguna de negro puro: el negro sobre una foto da un
     agujero, y lo que hace falta es que la foto se apague sin dejar de
     ser una foto. La primera baja la nave entera, la segunda carga la
     mitad izquierda —donde cae el titular— y la tercera cierra arriba y
     abajo, que es donde van la barra y las marcas del pase. */
  background:
    linear-gradient(0deg,rgba(22,22,28,.74),rgba(22,22,28,.74)),
    linear-gradient(100deg,rgba(18,18,24,.8) 0%,rgba(18,18,24,.58) 34%,rgba(18,18,24,.22) 64%,rgba(18,18,24,.36) 100%),
    linear-gradient(to bottom,rgba(13,13,17,.5) 0,rgba(13,13,17,0) 20%,rgba(13,13,17,0) 62%,rgba(13,13,17,.58) 100%);
}
/* Dos columnas: lo que hay que leer a la izquierda y el cuadro de la
   avería a la derecha, siempre a la vista. El texto alineado a la
   izquierda deja sitio al cuadro y de paso gana ancho de línea, que
   centrado y estrecho era lo que dejaba tanto aire a los lados. */
.port__in{
  position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;gap:clamp(26px,3.6vw,68px);
}
.port__texto{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
/* A -0,042 em las letras se tocaban: en mayúsculas y a este cuerpo, el
   apretado que funciona en un titular pequeño convierte «QUE» en un
   borrón. -0,012 em y una pizca de separación entre palabras. */
.port .h1{
  color:var(--papel);max-width:19ch;
  font-size:clamp(1.9rem,3.7vw,4.2rem);line-height:.98;letter-spacing:-.016em;word-spacing:.03em;
  text-shadow:0 2px 34px rgba(0,0,0,.45);
}
/* En el móvil no va centrada y suelta: se apoya abajo, alineada a la
   izquierda y apretada contra la foto, con los dos botones en una fila.
   Centrada dejaba una cuarta parte de pantalla en blanco arriba y otra
   abajo, y era lo que hacía que pareciera una plantilla. */
@media (max-width:620px){
  .port{
    min-height:0;align-items:end;
    padding:calc(var(--alto-barra,69px) + clamp(18px,4.6vh,50px)) var(--pad) clamp(30px,4.4vh,46px);
  }
  .port__in{width:100%}
  .port .h1{
    font-size:clamp(1.9rem,9.6vw,2.9rem);letter-spacing:-.01em;line-height:1.02;max-width:11ch;
  }
  .port__lead{font-size:1rem;line-height:1.54;max-width:34ch;margin-top:12px}
  .port__abajo{width:100%;gap:8px;justify-content:flex-start;margin-top:20px}
  /* A partes iguales, el de la derecha —que lleva una palabra más— parte
     en dos líneas y quedan desiguales. Se reparte por lo que ocupa. */
  .port__abajo .btn{flex:1 1 0;min-width:0;justify-content:center;padding-inline:.78em;font-size:.9rem;gap:.46em}
  .port__abajo .btn:last-child{flex-grow:1.24}
  .port__pie{left:var(--pad);right:auto;bottom:clamp(10px,1.8vh,16px);justify-content:flex-start}
  .rap{text-align:left}
}
.port__lead{
  margin-top:clamp(16px,2.4vh,28px);max-width:52ch;
  color:rgba(244,243,241,.86);font-size:clamp(1.02rem,1.24vw,1.3rem);line-height:1.58;
  text-wrap:balance;
}
.port__abajo{display:flex;flex-wrap:wrap;gap:11px;justify-content:flex-start;margin-top:clamp(22px,3vh,32px)}
.btn__mas{width:.72em;height:.72em;position:relative;display:inline-block;flex:0 0 auto}
.btn__mas::before,.btn__mas::after{content:"";position:absolute;background:currentColor;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.btn__mas::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.btn__mas::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
[aria-expanded="true"] .btn__mas::after{transform:translateX(-50%) rotate(90deg);opacity:0}

.port__pie{
  position:absolute;z-index:2;right:var(--marco);bottom:clamp(16px,2.6vh,28px);
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:flex-end;max-width:70%;
}
.port__cap{
  color:rgba(244,243,241,.78);font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;margin:0;text-align:right;max-width:28ch;
  opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.port__cap.is-on{opacity:1;transform:none}
.ticks{display:flex;gap:6px;align-items:center}
.tick{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.tick::after{content:"";display:block;width:8px;height:2px;background:rgba(244,243,241,.45);transition:background .3s var(--ease),width .3s var(--ease)}
.tick:hover::after{background:rgba(244,243,241,.85)}
.tick.is-on::after{background:var(--rojo-sobre-tinta);width:16px}

/* La flecha de bajar, como en la maqueta */
.port__baja{
  position:absolute;z-index:2;left:50%;bottom:clamp(14px,2.4vh,26px);transform:translateX(-50%);
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(244,243,241,.3);color:var(--papel);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.port__baja:hover{background:rgba(244,243,241,.14);border-color:rgba(244,243,241,.6)}
.port__baja i{display:block;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
/* Sin rebote perpetuo: una animación que no para nunca no explica ningún
   cambio de estado, solo distrae. Se mueve cuando se apunta, y ya. */
.port__baja i{transition:transform .35s var(--ease)}
.port__baja:hover i{transform:translateY(2px) rotate(45deg)}

/* El cuadro de la avería, puesto de entrada al lado del texto */
.rap{min-width:0;width:100%;text-align:left}
/* El cuadro: base desenfocada sobre la foto —no un rectángulo opaco
   pegado encima—, filo doble para que se despegue del fondo y un chaflán
   del mismo tamaño que el de los botones. El desenfoque solo se aplica si
   el navegador lo admite; si no, la base sube de opacidad y punto. */
.rap__caja{
  --corte:20px;position:relative;
  background:linear-gradient(158deg,rgba(24,24,30,.9),rgba(11,11,14,.94));
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px) clamp(18px,2vw,26px);
  box-shadow:
    inset 0 0 0 1px rgba(244,243,241,.16),
    inset 0 1.6px 0 rgba(244,243,241,.12),
    0 34px 70px -44px rgba(0,0,0,.95);
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%);
}
@supports (backdrop-filter:blur(1px)){
  .rap__caja{background:linear-gradient(158deg,rgba(24,24,30,.7),rgba(11,11,14,.82));backdrop-filter:blur(18px) saturate(115%)}
}
/* El canto de arriba, en rojo. Es lo único que lleva de marca: el titular
   de al lado ya dice qué hacer aquí, y repetirlo dentro con una etiqueta y
   una bolita era exactamente lo que delata una plantilla. */
.rap__caja::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--rojo-vivo),var(--rojo) 42%,rgba(193,18,31,0));
}
.rap__chips{display:flex;flex-wrap:wrap;gap:8px}
/* Las marcas: al pulsarlas no cambian solo de color, sacan un tilde. Es
   lo que hace que se vea de un vistazo cuántas llevas puestas. */
.chip{
  --corte:9px;position:relative;
  font-family:var(--texto);font-size:.85rem;font-weight:500;line-height:1;
  display:inline-flex;align-items:center;gap:0;
  background:rgba(244,243,241,.05);color:rgba(244,243,241,.92);
  border:1px solid rgba(244,243,241,.24);
  padding:.55em .85em;min-height:38px;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%);
  transition:background .24s var(--ease),color .24s var(--ease),
             border-color .24s var(--ease),gap .3s var(--ease),transform .24s var(--ease);
}
.chip::before{
  content:"";width:0;height:.52em;flex:0 0 auto;overflow:hidden;
  border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg) translateY(-.1em);opacity:0;
  transition:width .26s var(--ease),opacity .26s var(--ease);
}
.chip:hover{border-color:rgba(244,243,241,.7);background:rgba(244,243,241,.12);transform:translateY(-1px)}
.chip[aria-pressed="true"]{
  background:var(--rojo);color:#fff;border-color:var(--rojo-vivo);gap:.55em;
  box-shadow:0 8px 20px -12px rgba(224,21,35,.95);
}
.chip[aria-pressed="true"]::before{width:.3em;opacity:1}
@media (prefers-reduced-motion:reduce){.chip:hover{transform:none}}
.rap__pie{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:16px}
.rap__campo{position:relative;display:flex;flex-direction:column;gap:5px;flex:1 1 190px;min-width:0}
.rap__campo span{color:rgba(244,243,241,.6)}
.rap__campo input{
  font-family:var(--texto);font-size:.97rem;color:var(--papel);width:100%;
  background:transparent;border:0;border-bottom:1.5px solid rgba(244,243,241,.32);
  padding:.5em 0;min-height:44px;transition:border-color .3s var(--ease);
}
.rap__campo input::placeholder{color:rgba(244,243,241,.42)}
/* El filete se enciende de rojo desde el centro al escribir: es la señal
   de que el campo está vivo sin tener que pintarle una caja alrededor. */
.rap__campo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--rojo-vivo);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .4s var(--ease);
}
.rap__campo:focus-within::after{transform:scaleX(1)}
.rap__campo input:hover{border-bottom-color:rgba(244,243,241,.6)}
.rap__campo input:focus-visible{outline:2px solid var(--papel);outline-offset:4px}
.rap__nota{
  display:block;
  margin-top:16px;padding-top:15px;border-top:1px solid rgba(244,243,241,.13);
  color:rgba(244,243,241,.62);font-size:.82rem;line-height:1.5;
}


@media (max-width:980px){
  /* En el teléfono la foto se queda en rastro: se intuye la nave y poco
     más. A este ancho el titular ocupa todo y cualquier cosa que pase por
     detrás le compite, cosa que en el ordenador no pasa porque el texto
     vive en una mitad. */
  .port__fondo::after{
    background:
      linear-gradient(0deg,rgba(22,22,28,.88),rgba(22,22,28,.88)),
      linear-gradient(to bottom,rgba(13,13,17,.4) 0,rgba(13,13,17,.06) 26%,rgba(13,13,17,.2) 60%,rgba(13,13,17,.6) 100%);
  }
  .port__in{grid-template-columns:1fr;gap:clamp(22px,3.2vh,34px)}
  .port__texto{align-items:flex-start;text-align:left}
  .rap{width:min(100%,640px)}
}
@media (max-width:760px){
  .port{min-height:0;padding-bottom:clamp(44px,7vh,70px)}
  .port__pie{left:var(--pad);right:var(--pad);max-width:none;justify-content:center}
  .port__cap{display:none}
  .port__baja{display:none}
  .port__abajo{width:100%;gap:8px}
  .port__abajo .btn{flex:1 1 0;min-width:0;justify-content:center;padding-inline:.95em}
}

/* ══════════ PROFUNDIDAD ══════════
   Lo oscuro no es un color liso: los bordes bajan un punto y encima va un
   grano de 160 px que se repite. Sin eso, una sección oscura grande parece
   plástico y se nota que es un rectángulo de color, no un sitio.        */
.oscura{
  position:relative;isolation:isolate;
  background-color:var(--tinta);color:var(--papel);
  background-image:linear-gradient(180deg,#0b0b0d 0%,var(--tinta) 14%,var(--tinta) 86%,#0b0b0d 100%);
}
.oscura::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/grano.png") repeat;background-size:160px 160px;
  opacity:.16;mix-blend-mode:overlay;
}
/* Un halo rojo muy bajo donde hay foto: es la luz que hay en la nave. */
.oscura--luz::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(52vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(193,18,31,.16),rgba(193,18,31,0) 66%);
}
@media (prefers-reduced-motion:no-preference){
  .oscura--luz::after{filter:blur(18px)}
}
.oscura .lead{color:rgba(244,243,241,.76)}

/* ══════════ EL CORTE EN DIAGONAL ══════════
   Dos secciones entran en su foto con el mismo sesgo y un filo rojo encima
   de la línea. El recorte es el mismo; lo único que cambia es quién lo
   lleva, así que se escribe una vez y se hereda.                        */
.corta{
  --corte:clamp(44px,6.4vw,150px);position:relative;
  clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%);
  margin-left:calc(var(--corte) * -1);
}
/* El filo: una banda de 3 px recortada sobre la propia diagonal. Sin él la
   costura no se ve, porque a los dos lados hay materia oscura. */
.corta::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(193,18,31,.25),var(--rojo-vivo) 34%,var(--rojo) 72%,rgba(193,18,31,.25));
  clip-path:polygon(var(--corte) 0,calc(var(--corte) + 3px) 0,3px 100%,0 100%);
}

/* ══════════ CÓMO FUNCIONA ══════════
   Foto a la izquierda y el panel claro entrando en ella con el sesgo.  */
.pasos{position:relative;background:var(--papel);display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);align-items:stretch;overflow:hidden}
.pasos__foto{margin:0;position:relative;min-height:clamp(400px,58vh,660px);background:var(--tinta)}
.pasos__foto img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:center 52%}
.pasos__panel{
  background:var(--papel);z-index:2;display:flex;align-items:center;min-width:0;
  --corte:clamp(32px,3.4vw,78px);
  clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%);
  margin-left:calc(var(--corte) * -1);
  padding:var(--sec) var(--marco) var(--sec) calc(var(--corte) + clamp(24px,2.6vw,52px));
}
.pasos__panel::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(193,18,31,.25),var(--rojo-vivo) 34%,var(--rojo) 72%,rgba(193,18,31,.25));
  clip-path:polygon(var(--corte) 0,calc(var(--corte) + 3px) 0,3px 100%,0 100%);
}
.pasos__panel{position:relative}
.pasos__in{width:100%;min-width:0;position:relative;z-index:1}
.pasos__in .lead{margin-top:12px;max-width:52ch}
.pasos__lista{
  list-style:none;margin:clamp(26px,3.6vh,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.paso{min-width:0;padding:0 clamp(12px,1.4vw,24px);border-left:1px solid var(--linea)}
.paso:first-child{padding-left:0;border-left:0}
.paso:last-child{padding-right:0}
.paso__t{
  margin:clamp(14px,1.8vh,20px) 0 0;font-family:var(--display);font-weight:700;font-stretch:88%;
  text-transform:uppercase;font-size:.94rem;letter-spacing:-.016em;line-height:1.18;
}
.paso__d{margin-top:8px;color:var(--tinta-2);font-size:.88rem;line-height:1.54;text-wrap:pretty}
@media (max-width:1180px){
  .pasos__lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vh,30px) 0}
  .paso:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .pasos{grid-template-columns:1fr}
  .pasos__foto{min-height:clamp(240px,38svh,340px)}
  .pasos__panel{margin-left:0;clip-path:none;padding:var(--sec) var(--pad)}
  .pasos__panel::before{display:none}
}

/* ══════════ SERVICIOS ══════════
   La lista a la izquierda y la foto a la derecha entrando con el sesgo.
   Al pasar el ratón por un servicio cambia la foto y el bloque se inclina
   siguiendo al puntero: no es un fundido, es un objeto que se mueve.

   En el móvil no hay ratón, así que los servicios van saliendo uno detrás
   de otro conforme se desliza.                                          */
/* La portada acaba en casi negro y esta sección empezaba en el mismo
   tono: las dos se leían como un solo bloque de tinta de dos pantallas.
   Sube un punto y arranca con un degradado corto, que además marca dónde
   empieza. */
.hace{
  position:relative;overflow:hidden;
  background-color:#1f1f27;
  background-image:linear-gradient(180deg,#2a2a34 0%,#22222b 30%,#1f1f27 70%,#17171d 100%);
}
.hace .hace__lista{background:rgba(244,243,241,.13)}
.hace::after{right:-14%;top:12%}
.hace__in{--corte:clamp(32px,3.4vw,78px);display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:stretch}
/* La foto entra en diagonal y monta --corte px sobre esta columna: sin
   reservarlos, la última línea del servicio de abajo se lee por debajo de
   la imagen. */
.hace__col{
  min-width:0;
  padding:calc(var(--sec) * 1.04) calc(var(--corte) + clamp(12px,1.3vw,26px)) calc(var(--sec) * 1.04) var(--marco);
  display:flex;flex-direction:column;justify-content:center;
}
.hace__col .lead{margin-top:12px;max-width:54ch}
.hace__lista{
  list-style:none;margin:clamp(24px,3.4vh,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--linea-clara);
}
.serv{min-width:0;background:#1f1f27}
.serv__b{
  position:relative;
  width:100%;height:100%;display:flex;gap:clamp(12px,1.3vw,18px);align-items:flex-start;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;font:inherit;
  padding:clamp(14px,1.8vh,21px) clamp(13px,1.4vw,20px);
  transition:background .3s var(--ease),padding-left .3s var(--ease);
}
/* El filete que marca cuál está activo. Va de graphic, no de texto: por
   eso puede ir en rojo y el titular no. */
.serv__b::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--rojo-sobre-tinta);transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .38s var(--ease);
}
.serv__b:hover::before,.serv__b[aria-pressed="true"]::before{transform:scaleY(1)}
.serv__txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.serv__t{font-family:var(--display);font-weight:700;font-stretch:88%;font-size:1.04rem;letter-spacing:-.018em;transition:color .3s var(--ease)}
.serv__d{color:rgba(244,243,241,.66);font-size:.88rem;line-height:1.52}
.serv__b:hover,.serv__b[aria-pressed="true"]{background:rgba(244,243,241,.05);padding-left:clamp(20px,2.1vw,30px)}
.serv__b:hover .serv__d,.serv__b[aria-pressed="true"] .serv__d{color:rgba(244,243,241,.82)}
.serv__b:hover .ico,.serv__b[aria-pressed="true"] .ico{color:var(--rojo-sobre-tinta);transform:rotate(-8deg) scale(1.08)}

/* El visor: tres dimensiones de verdad, con perspectiva y el giro saliendo
   de dónde está el puntero. El JavaScript solo escribe --gx y --gy. */
.hace__visor{
  position:relative;overflow:hidden;min-height:clamp(380px,58vh,700px);
  background:var(--tinta);perspective:1100px;
  clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%);
  margin-left:calc(var(--corte) * -1);
}
.hace__visor::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(193,18,31,.25),var(--rojo-vivo) 34%,var(--rojo) 72%,rgba(193,18,31,.25));
  clip-path:polygon(var(--corte) 0,calc(var(--corte) + 3px) 0,3px 100%,0 100%);
}
.hace__vidrio{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(calc(var(--gx,0) * 5deg)) rotateX(calc(var(--gy,0) * -4deg)) scale(1.04);
  transition:transform .6s var(--ease);
}
.hace__vidrio img{
  position:absolute;inset:-4% -2%;width:104%;height:108%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  transition:opacity .5s var(--ease),transform 1.1s var(--ease);
}
.hace__vidrio img.is-on{opacity:1;transform:none}
.hace__visor::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,rgba(13,13,15,.86) 0,rgba(13,13,15,.2) 34%,rgba(13,13,15,0) 58%,rgba(13,13,15,.62) 100%);
}
.hace__rotulo{
  position:absolute;z-index:3;right:clamp(20px,2.4vw,46px);bottom:clamp(22px,3.4vh,44px);
  display:flex;flex-direction:column;text-align:right;
  font-family:var(--display);font-weight:800;font-stretch:88%;text-transform:uppercase;
  font-size:clamp(.94rem,1.24vw,1.24rem);line-height:1.18;letter-spacing:-.02em;color:var(--papel);
}
.hace__rotulo::after{content:"";width:clamp(34px,3.4vw,58px);height:2px;background:var(--rojo-vivo);margin:11px 0 0 auto}
@media (max-width:980px){
  /* En columna flexible y no en rejilla: un pegajoso solo se pega dentro de
     su celda, y en la rejilla la foto tenía una fila para ella sola, o sea
     ningún recorrido. Así su caja es la sección entera. */
  /* Y la sección recorta con `clip` y no con `hidden`: `hidden` crea un
     puerto de desplazamiento y un pegajoso dentro de él no se pega a la
     ventana, se va con la página. `clip` recorta igual sin crear puerto. */
  .hace{overflow:clip}
  .hace__in{display:flex;flex-direction:column}
  .hace__col{padding:calc(var(--sec) * 1.12) var(--pad);order:2}
  .hace__in{--corte:0px}
  /* La foto se queda pegada arriba mientras la lista pasa por debajo: es
     lo que hace que se vea cambiar de servicio al bajar. Sin esto el
     cambio ocurriría fuera de pantalla y no serviría de nada. */
  .hace__visor{
    order:1;min-height:clamp(190px,27svh,260px);margin-left:0;clip-path:none;
    /* En columna flexible align-self manda en el eje horizontal: con
       `start` la foto se quedaba del ancho de su contenido, que es cero
       porque va todo posicionado. */
    position:sticky;top:var(--alto-barra,69px);z-index:1;align-self:stretch;flex:0 0 auto;
  }
  .hace__visor::before,.hace__visor::after{display:none}
  /* Y el rótulo de la foto estorba a ese tamaño */
  .hace__rotulo{font-size:.9rem;right:var(--pad);bottom:14px}
  .hace__lista{grid-template-columns:1fr}
}

/* ══════════ CAJAS DE CAMBIO ══════════
   Texto a la izquierda y los dos antes/después a la derecha, uno al lado
   del otro. Son fotos del taller, las mismas piezas antes y después.   */
.cc{position:relative;isolation:isolate;overflow:hidden;background:var(--blanco);padding-block:var(--sec)}
.cc__marca{position:absolute;z-index:-1;right:-7%;top:-12%;width:min(38vw,520px);height:auto;opacity:.05;pointer-events:none}
/* El texto cede sitio y las fotos crecen: el antes/después es lo que hay
   que ver aquí, y con 1,16fr se quedaba en 340 px por lado. */
.cc__in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,3vw,56px);align-items:center}
.cc__col{min-width:0}
.cc__col .lead{margin-top:12px;max-width:40ch}
.sint{margin:clamp(24px,3.2vh,36px) 0 0}
.sint div{padding:clamp(13px,1.8vh,19px) 0;border-bottom:1px solid var(--linea);position:relative}
.sint div:first-child{border-top:2px solid var(--rojo)}
.sint div:last-child{border-bottom-color:var(--linea-fuerte)}
.sint div::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--rojo);transition:width .5s var(--ease)}
.sint div:hover::after{width:100%}
.sint dt{font-family:var(--display);font-weight:700;font-stretch:88%;text-transform:uppercase;font-size:.92rem;letter-spacing:-.016em}
.sint dd{margin:6px 0 0;color:var(--tinta-2);font-size:.91rem;line-height:1.56}
.cc__botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vh,32px)}

.cc__pares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.par{margin:0}
.par figcaption{margin-top:15px;color:var(--tinta-2);font-size:.92rem;line-height:1.55}
.par figcaption b{display:block;color:var(--tinta);margin-bottom:6px;font-family:var(--display);font-weight:700;font-stretch:88%;text-transform:uppercase;font-size:.92rem;letter-spacing:-.016em}
.desl{position:relative;width:100%;aspect-ratio:5/4;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y;background:var(--tinta)}
.desl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.desl__top{clip-path:inset(0 0 0 var(--x,50%))}
/* El tirador: un cuadrado achaflanado con sombra propia y dos flechas
   dibujadas. Antes eran dos glifos de texto —◀ ▶— y a ese tamaño se veían
   como dos manchas. */
.desl__tira{
  position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;z-index:3;pointer-events:none;
  background:var(--papel);box-shadow:0 0 0 1px rgba(9,9,11,.32);
}
.desl__tira::after{
  content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);background:var(--papel);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  box-shadow:0 8px 22px -8px rgba(9,9,11,.75);
}
.desl__fl{
  position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);
  z-index:4;pointer-events:none;display:flex;align-items:center;gap:9px;
}
.desl__fl i{
  display:block;width:6px;height:6px;
  border-left:1.6px solid var(--tinta);border-bottom:1.6px solid var(--tinta);
  transform:rotate(45deg);
}
.desl__fl i:last-child{transform:rotate(-135deg)}
.desl__et{
  position:absolute;top:12px;z-index:2;
  padding:.52em .9em;font-family:var(--mono);font-weight:600;
  font-size:clamp(.64rem,.76vw,.76rem);letter-spacing:.1em;text-transform:uppercase;
  --corte:7px;
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte));
}
.desl__et--a{left:12px;background:rgba(9,9,11,.78);color:var(--papel);box-shadow:inset 0 0 0 1px rgba(244,243,241,.28)}
.desl__et--b{right:12px;background:var(--rojo);color:#fff}
.desl::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(9,9,11,.16),inset 0 -40px 64px -48px rgba(9,9,11,.9);
}
.desl:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
@media (max-width:1080px){
  .cc__in{grid-template-columns:1fr;gap:clamp(26px,4vh,40px)}
}
@media (max-width:620px){
  .cc__pares{grid-template-columns:1fr;gap:clamp(22px,3.4vh,32px)}
}

/* ══════════ MANTENIMIENTO ══════════
   Centrada y con los cuatro en fila: servicios va dos secciones antes y es
   oscura con foto a un lado, así que repetir la forma cantaba.          */
.man{background:var(--papel);padding-block:var(--sec)}
.man__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.man__cab{max-width:58ch;display:flex;flex-direction:column;align-items:center}
.man__cab .lead{margin-top:12px}
/* Una banda a lo ancho entre el titular y los cuatro apartados, y la
   manda el apartado: al pasar por «frenos» se ve una rueda fuera, al pasar
   por «aire» la máquina de carga. Es el mismo mecanismo que en servicios,
   pero puesto de otra forma para que no se repita la estampa. */
/* Alto escrito, no aspect-ratio: esta banda es hija de una columna flex y
   ahí el reparto de altura manda sobre la proporción, así que la caja se
   quedaba en cero y la foto no se veía. */
.man__visor{
  margin:clamp(24px,3vh,38px) 0 0;position:relative;width:100%;flex:0 0 auto;
  height:clamp(190px,22vw,340px);overflow:hidden;background:var(--papel-2);
}
.man__vidrio{position:absolute;inset:0;overflow:hidden}
.man__vidrio img{
  position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:center 56%;
  opacity:0;transform:scale(1.05);
  transition:opacity .55s var(--ease),transform 1.2s var(--ease);
}
.man__vidrio img.is-on{opacity:1;transform:none}
.man__visor::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(244,243,241,.3),rgba(244,243,241,0) 32%,rgba(244,243,241,0) 68%,rgba(244,243,241,.36));
}
@media (max-width:760px){
  .man{overflow:clip}
  .man__visor{height:clamp(170px,44vw,230px);position:sticky;top:var(--alto-barra,69px);z-index:1}
}

.man__lista{
  list-style:none;padding:0;
  width:100%;margin:clamp(20px,2.6vh,32px) 0 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);text-align:left;
}
.man__lista li{min-width:0}
.man__b{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;font:inherit;padding:12px 0 0;
  border-top:2px solid var(--linea);
  transition:border-color .35s var(--ease);
}
.man__b::after{
  content:"";position:absolute;inset:auto 0 0 0;height:0;
}
.man__t{
  font-family:var(--display);font-weight:700;font-stretch:88%;text-transform:uppercase;
  font-size:.94rem;letter-spacing:-.02em;transition:color .3s var(--ease);
}
.man__d{color:var(--tinta-2);font-size:.89rem;line-height:1.55}
.man__b:hover,.man__b[aria-pressed="true"]{border-top-color:var(--rojo)}
.man__b:hover .man__t,.man__b[aria-pressed="true"] .man__t{color:var(--rojo)}
.man__botones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(24px,3.2vh,34px)}
@media (max-width:1000px){.man__lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vh,24px)}}
@media (max-width:560px){.man__lista{grid-template-columns:1fr}}

/* ══════════ QUIÉN LO HACE ══════════
   La foto de David a la izquierda y lo que hay que leer a la derecha,
   sobre tinta. Es el bloque de la maqueta con nuestra foto.            */
.dav{position:relative;overflow:hidden}
.dav::after{left:-14%;bottom:-4%}
/* Más estrecha y más alta: la foto es vertical (4:5) y en una caja ancha
   el recorte se comía todo menos la cara. Así sale entero y además ocupa
   menos, que es lo que pidió David. */
.dav__foto{margin:0;position:relative;min-height:clamp(430px,68vh,780px);background:var(--tinta)}
.dav__foto img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:46% 22%}
/* Aquí la costura no es una línea: la foto se apaga hasta la tinta. En la
   maqueta este bloque es el único que no lleva filo rojo. */
.dav__foto::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(92deg,rgba(18,18,21,0) 44%,rgba(18,18,21,.72) 76%,var(--tinta) 100%);
}
.dav__foto figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:1em clamp(16px,2vw,28px);color:var(--papel);
  background:linear-gradient(to top,rgba(9,9,11,.9),rgba(9,9,11,0));
}
/* El panel es ancho y el texto se quedaba pegado a la izquierda con medio
   metro de tinta vacía al lado. Ahora el bloque se centra dentro del panel
   y sube de cuerpo, que es lo que pidió David. */
.dav__panel{
  background:transparent;z-index:2;display:flex;align-items:center;justify-content:center;min-width:0;
  padding:calc(var(--sec) * 1.12) var(--marco) calc(var(--sec) * 1.12) clamp(24px,3vw,64px);
}
.dav__in{width:100%;max-width:48rem;min-width:0}
.dav__in .lead{margin-top:14px;max-width:54ch;font-size:clamp(1rem,1.16vw,1.18rem)}
.dav__nos{
  list-style:none;margin:clamp(24px,3.2vh,36px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0;
}
.nos{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:0 clamp(16px,1.8vw,30px);border-left:1px solid var(--linea-clara);
}
.nos:first-child{padding-left:0;border-left:0}
.nos__txt{display:flex;flex-direction:column;line-height:1.35}
.nos__txt b{font-family:var(--display);font-weight:700;font-stretch:88%;text-transform:uppercase;font-size:.92rem;letter-spacing:-.014em}
.nos__txt span{color:rgba(244,243,241,.7);font-size:.9rem}
.dav__botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3.2vh,34px)}
@media (max-width:980px){
  .dav{display:block}
  .dav__foto{min-height:clamp(260px,40svh,380px)}
  .dav__panel{margin-left:0;clip-path:none;padding:calc(var(--sec) * 1.12) var(--pad)}
  .dav__foto::after{background:linear-gradient(to bottom,rgba(18,18,21,0) 52%,var(--tinta) 100%)}
  .nos{padding-left:0;border-left:0;flex:1 1 210px;padding-block:8px}
}
@media (min-width:981px){
  .dav{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:stretch}
}

/* ══════════ OPINIONES ══════════
   Titular y botón a la izquierda; las reseñas, en tarjetas que se
   arrastran, a la derecha. Cada una con su inicial, que es lo que hay:
   las fotos de perfil son de Google y no son nuestras para copiarlas. */
.revs{background:var(--papel);padding-block:var(--sec);overflow:hidden}
.revs__in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,3.4vw,64px);align-items:center}
.revs__cab{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.revs__cab .lead{margin-top:12px;max-width:38ch}
.revs__cab .btn{margin-top:clamp(20px,2.6vh,28px)}
.revs__carril{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
.revs__carril::-webkit-scrollbar{display:none}
.revs__carro{display:flex;gap:clamp(13px,1.5vw,22px);padding-bottom:4px}
.rev{
  flex:0 0 min(84%,330px);margin:0;display:flex;flex-direction:column;gap:11px;
  background:var(--blanco);border:1px solid var(--linea);
  padding:clamp(18px,2vw,26px);
  --corte:16px;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.rev:hover{transform:translateY(-4px)}
.rev__stars{color:var(--oro);letter-spacing:.2em;font-size:.84rem;line-height:1;margin:0}
.rev p:not(.rev__stars){color:var(--tinta-2);font-size:.95rem;line-height:1.58;margin:0}
.rev cite{display:flex;align-items:center;gap:11px;font-style:normal;margin-top:auto;padding-top:5px}
.rev__ini{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--tinta);color:var(--papel);
  font-family:var(--display);font-weight:800;font-stretch:88%;font-size:.92rem;line-height:1;
}
.rev__quien{min-width:0}
.rev cite b{display:block;font-family:var(--display);font-weight:700;font-stretch:88%;text-transform:uppercase;font-size:.86rem;letter-spacing:-.014em;color:var(--tinta)}
.rev cite .mono{display:block;margin-top:3px;font-size:.62rem;letter-spacing:.075em;color:var(--tinta-3)}
.rev__ir{
  display:inline-flex;align-items:center;gap:.55em;align-self:flex-start;
  padding:6px 0;font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3);
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.rev__ir:hover,.rev:hover .rev__ir{color:var(--rojo);border-bottom-color:var(--rojo)}
.revs__pista{margin-top:14px;color:var(--tinta-3)}
@media (max-width:980px){
  .revs__in{grid-template-columns:1fr;gap:clamp(22px,3vh,32px)}
  .revs__carril{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
}

/* ══════════ PREGUNTAS ══════════
   Titular a la izquierda, lista a la derecha. Es el único sitio donde el
   texto se queda quieto mientras se abre y se cierra lo de al lado.    */
.faq{padding-block:var(--sec)}
.faq__in{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(24px,3.4vw,64px);align-items:start}
.faq__cab{position:sticky;top:clamp(80px,10vh,110px);display:flex;flex-direction:column;align-items:flex-start}
.faq__cab .lead{margin-top:12px;max-width:34ch}
.faq__tel{
  display:inline-block;margin-top:clamp(16px,2.2vh,24px);
  font-family:var(--display);font-weight:800;font-stretch:88%;font-size:clamp(1.15rem,1.7vw,1.5rem);
  letter-spacing:-.024em;color:var(--papel);border-bottom:2px solid var(--rojo-sobre-tinta);padding-bottom:3px;
}
.faq__tel:hover{color:var(--rojo-sobre-tinta)}
.faq__lista{display:flex;flex-direction:column;margin:0;min-width:0}
.faq__item{border-bottom:1px solid var(--linea-clara)}
.faq__item:first-child{border-top:1px solid var(--linea-fuerte-clara)}
.faq__item:last-child{border-bottom-color:var(--linea-fuerte-clara)}
.faq__b{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;
  padding:clamp(15px,2.1vh,21px) 0;min-height:56px;
  font-family:var(--display);font-weight:700;font-stretch:88%;text-transform:uppercase;
  font-size:clamp(.88rem,1.06vw,.98rem);letter-spacing:-.016em;
  transition:color .26s var(--ease),padding-left .3s var(--ease);
}
.faq__b:hover{color:var(--rojo-sobre-tinta);padding-left:9px}
.faq__b i{position:relative;width:15px;height:15px;flex:0 0 auto}
.faq__b i::before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.6px;background:currentColor;transform:translateY(-50%)}
.faq__b i::after{content:"";position:absolute;left:50%;top:0;width:1.6px;height:100%;background:currentColor;transform:translateX(-50%);transition:transform .32s var(--ease),opacity .32s var(--ease)}
.faq__b[aria-expanded="true"] i::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq__r{margin:0;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq__r>div{min-height:0;overflow:hidden}
.faq__r p{padding:0 0 clamp(16px,2.2vh,22px);max-width:66ch;color:rgba(244,243,241,.76);font-size:.97rem;line-height:1.62}
.faq__item.abierta .faq__r{grid-template-rows:1fr}
@media (max-width:900px){
  .faq__in{grid-template-columns:1fr;gap:clamp(20px,2.8vh,30px)}
  .faq__cab{position:static}
  .faq__cab .lead{max-width:none}
}

/* ══════════ CONTACTO ══════════
   Texto a la izquierda y la fachada a la derecha, con el degradado claro
   por encima para que la foto no corte de golpe.                       */
.cont{background:var(--papel);overflow:hidden}
/* La foto pesaba la mitad de la sección y el texto quedaba encajonado a
   la izquierda con un hueco enorme en medio. Ahora el texto manda. */
.cont__in{display:grid;grid-template-columns:minmax(0,1.26fr) minmax(0,.74fr);align-items:center;gap:0}
/* En pantalla ancha el margen de página deja aquí 400 px de blanco antes
   de que empiece a leerse nada. La sección sangra por la derecha, así que
   puede recogerse un poco por la izquierda sin romper el eje. */
.cont__col{
  min-width:0;position:relative;z-index:2;
  padding:var(--sec) clamp(22px,2.6vw,48px) var(--sec)
          max(var(--pad),calc(var(--marco) - clamp(0px,5vw,140px)));
}
.cont__col .lead{margin-top:13px;max-width:52ch;font-size:clamp(1rem,1.16vw,1.18rem)}
.cont__datos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vh,28px) clamp(20px,2.4vw,40px);margin:clamp(24px,3vh,34px) 0 0;
  border-top:1px solid var(--linea);padding-top:clamp(20px,2.8vh,28px);
}
.cont__dato dt{margin:0;color:var(--tinta-3);font-size:.66rem}
.cont__dato dd{margin:7px 0 0;font-size:.95rem;line-height:1.5}
.cont__dato--tel dd{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:clamp(1.15rem,1.7vw,1.52rem);letter-spacing:-.026em}
.cont__dato--tel dd a{border-bottom:2px solid var(--rojo);padding-bottom:2px}
.cont__dato--tel dd a:hover{color:var(--rojo)}
.cont__dato--zona{grid-column:1 / -1}
@media (max-width:1180px){.cont__datos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cont__botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vh,34px)}
.cont__foto{margin:0;position:relative;align-self:stretch;min-height:clamp(360px,56vh,660px)}
.cont__foto img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:46% 46%}
.cont__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--papel) 0,rgba(244,243,241,.72) 22%,rgba(244,243,241,0) 58%);
}
@media (max-width:980px){
  .cont__in{grid-template-columns:1fr}
  .cont__col{order:2;padding:var(--sec) var(--pad)}
  /* La fachada es 3:2 y el rótulo está arriba del todo. Cualquier caja que
     no sea 3:2 le corta el rótulo, que es justo lo que hay que ver: aquí
     la caja toma la proporción de la foto y no se recorta nada. */
  .cont__foto{order:1;min-height:0;aspect-ratio:3/2}
  .cont__foto img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  .cont__foto::after{background:linear-gradient(to bottom,rgba(244,243,241,0) 72%,var(--papel) 100%)}
}
@media (max-width:520px){.cont__datos{grid-template-columns:1fr}}

/* ══════════ PIE ══════════
   Marca, navegación y teléfono en una fila; debajo una línea y la letra
   pequeña. Y el nombre entero a lo ancho, muy apagado, que es lo que cierra
   la página sin necesidad de poner nada más.                            */
.pie{padding-top:clamp(36px,5vh,60px);overflow:hidden}
.pie__in{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(20px,3vw,48px);padding-bottom:clamp(24px,3.4vh,40px);
}
.pie__marca-logo img{height:clamp(30px,2.4vw,38px);width:auto}
.pie__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.8vw,30px)}
.pie__nav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.075em;text-transform:uppercase;
  color:rgba(244,243,241,.7);padding:8px 0;min-height:24px;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.pie__nav a:hover{color:#fff;border-bottom-color:var(--rojo-sobre-tinta)}
.pie__tel{text-align:right}
.pie__tel .mono{color:rgba(244,243,241,.58)}
.pie__tel p+p{margin-top:5px}
.pie__tel a{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:1.06rem;letter-spacing:-.024em;color:var(--papel)}
.pie__tel a:hover{color:var(--rojo-sobre-tinta)}
.pie__baja{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--linea-clara);
  padding-top:clamp(16px,2.2vh,24px);padding-bottom:clamp(16px,2.4vh,26px);
}
.pie__legal,.pie__sitio{margin:0;color:rgba(244,243,241,.58);font-size:.66rem;letter-spacing:.06em}
.foot__lineas>span{display:block}
/* El nombre entero a lo ancho del pie. El tamaño sale de contar caracteres:
   20 en mayúsculas ocupan ~11 em, así que por encima de 8,4vw se saldría. */
.pie__rotulo{
  font-family:var(--display);font-weight:800;font-stretch:88%;text-transform:uppercase;
  font-size:clamp(1.05rem,8.4vw,7.6rem);line-height:.8;letter-spacing:-.035em;
  color:rgba(244,243,241,.07);margin:0 0 -.13em;white-space:nowrap;text-align:center;
}
/* Centrado, la navegación partía en cuatro y dos y parecía que se había
   roto. En columna y alineado a la izquierda se lee como una lista, que es
   lo que es. */
@media (max-width:900px){
  .pie{padding-bottom:0}
  .pie__in{grid-template-columns:1fr;justify-items:start;text-align:left;gap:clamp(20px,3vh,30px)}
  .pie__nav{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px clamp(14px,4vw,30px);justify-content:start;width:100%;
  }
  .pie__nav a{padding:7px 0}
  .pie__tel{text-align:left}
  .pie__baja{justify-content:flex-start;text-align:left;gap:6px}
  .pie__rotulo{margin-bottom:0;font-size:clamp(1.6rem,11vw,3rem)}
}

/* ══════════ BARRA DE LLAMADA EN MÓVIL ══════════ */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--tinta);border-top:1px solid rgba(244,243,241,.16);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;
    color:var(--papel);font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  }
  .callbar a:first-child{background:var(--rojo)}
  body{padding-bottom:54px}
}

/* ══════════ MOVIMIENTO ══════════
   Las fotos entran al deslizar y algunas siguen flotando a distinta
   velocidad mientras pasan. Nunca deja texto invisible: hay red de
   seguridad a los 4 segundos.                                           */
/* ── Revelado al deslizar ──
   Las fotos se descubren con una cortinilla de abajo arriba mientras la
   imagen de dentro se asienta: es un movimiento de material, no el fundido
   de siempre. Los titulares suben 14 px y poco mas.

   Regla de la casa: si el JavaScript no llega, no puede quedar nada
   invisible. Por eso lo que oculta cuelga de .con-js y ademas hay red de
   seguridad a los 4 segundos.                                            */
[data-entra]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-entra].dentro{opacity:1;transform:none}

/* overflow ademas del clip-path: el clip solo recorta al pintar, no evita
   que la foto ampliada estire el ancho del documento. Sin esto, el movil
   se desplazaba 20 px de lado. */
.con-js [data-revela]{position:relative;overflow:hidden}
.con-js [data-revela]::before{
  content:"";position:absolute;inset:-1px;z-index:5;pointer-events:none;
  background:var(--velo,var(--papel));transform-origin:bottom;
  transition:transform .85s var(--ease);
}
.con-js [data-revela]{perspective:900px}
.con-js [data-revela] img{transform:scale(1.08) rotateX(2.2deg);transform-origin:50% 100%;transition:transform 1.2s var(--ease)}
.con-js [data-revela] figcaption{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s .3s var(--ease),transform .5s .3s var(--ease)}
.con-js [data-revela].dentro::before{transform:scaleY(0)}
.con-js [data-revela].dentro img{transform:none}
.con-js [data-revela].dentro figcaption{opacity:1;transform:none}
/* La cortinilla tiene que ser del color de su seccion o se ve el parche */
.hace,.dav,.faq{--velo:var(--tinta)}
.pasos,.man,.revs,.cont{--velo:var(--papel)}
.man__visor{--velo:var(--papel)}
.cc{--velo:var(--blanco)}

/* Lo que no se parte en palabras —entradillas, párrafos— sube en bloque. */
.con-js [data-sube]:not([data-palabras]){opacity:0;transform:translate3d(0,14px,0)}
.con-js [data-sube]:not([data-palabras]).dentro{
  opacity:1;transform:none;
  transition:opacity .52s var(--ease),transform .52s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}

/* Los pasos y los servicios no suben en bloque: caen uno detrás de otro
   girando sobre su borde de arriba, como una ficha que se abate. Es lo
   que pidió David para el móvil y para el ordenador, y es el mismo
   escalonado que llevan las palabras del titular. */
.con-js .pasos__lista,.con-js .hace__lista,.con-js .man__lista{perspective:1000px}
.con-js .paso[data-sube],.con-js .serv[data-sube],.con-js .man__lista li[data-sube]{
  opacity:0;transform:translate3d(0,30px,0) rotateX(-26deg);
  transform-origin:50% 0;
}
.con-js .paso[data-sube].dentro,.con-js .serv[data-sube].dentro,.con-js .man__lista li[data-sube].dentro{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .72s var(--ease);
  transition-delay:calc(var(--i,0) * 95ms);
}
/* En el móvil van en una sola columna y cada uno entra cuando le toca, así
   que el escalonado sobra: con él, el cuarto esperaba casi cuatro décimas
   después de estar ya a la vista. Sin retardo y más despacio. */
@media (max-width:980px){
  /* Más recorrido que en el ordenador: en una sola columna cada uno entra
     por su cuenta y con 34 px el movimiento apenas se veía, sobre todo
     deslizando con el dedo, que va más rápido que la rueda. */
  .con-js .paso[data-sube],.con-js .serv[data-sube],.con-js .man__lista li[data-sube]{
    transform:translate3d(0,52px,0) rotateX(-26deg);
  }
  .con-js .paso[data-sube].dentro,.con-js .serv[data-sube].dentro,.con-js .man__lista li[data-sube].dentro{
    transition:opacity .72s var(--ease),transform .95s var(--ease);
    transition-delay:0s;
  }
}

/* Y los titulares, palabra a palabra, cayendo sobre su propio eje. */
.con-js [data-palabras]{perspective:620px}
.con-js [data-palabras] .pal{
  display:inline-block;opacity:0;
  transform:translate3d(0,.42em,0) rotateX(-52deg);
  transform-origin:50% 100%;
  transition:opacity .46s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 46ms);
}
.con-js [data-palabras].dentro .pal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .con-js [data-revela]::before{display:none}
  .con-js [data-revela] img{transform:none}
  .con-js [data-sube]:not([data-palabras]){transform:none}
  .con-js .paso[data-sube],.con-js .serv[data-sube],.con-js .man__lista li[data-sube]{transform:none}
  .con-js [data-palabras] .pal{transform:none;transition-delay:0s}
}
[data-flota]{will-change:transform}

/* ══════════ PIEZAS QUE SOLO TIENE LA WEB (no la maqueta) ══════════ */

/* Texto que solo leen los lectores de pantalla o que usa el JavaScript */
.vis-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Barra de progreso de lectura */
.prog{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:90;
  background:var(--rojo);transition:width .1s linear;pointer-events:none;
}

/* Saltar al contenido */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tinta);color:var(--papel);padding:12px 18px;
}
.skip:focus{left:0}

/* Botón de idioma */
.lang{
  --corte:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  background:transparent;color:var(--tinta);border:1px solid var(--linea);
  padding:.5em .78em;min-height:36px;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%);
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.lang:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

/* Teléfono de la barra, con su etiqueta */
.bar__tel{display:inline-flex;align-items:baseline;gap:.5em}
.bar__tel span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.bar__tel b{font-size:.92rem}

/* Botón del menú y menú desplegable */
.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  place-items:center;position:relative;color:var(--tinta);
}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:21px;height:1.6px;background:currentColor;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.burger span::before{position:absolute;transform:translateY(-7px)}
.burger span::after{position:absolute;transform:translateY(7px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}
@media (max-width:1140px){.burger{display:grid}}

.menu{
  position:fixed;inset:0;z-index:80;background:var(--tinta);color:var(--papel);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,4vh,34px);
  padding:clamp(70px,12vh,110px) var(--pad) clamp(30px,5vh,50px);
}
.menu[hidden]{display:none;pointer-events:none}
.menu nav{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px)}
.menu nav a{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,7vw,2.5rem);line-height:1.04;letter-spacing:-.02em;
  padding:6px 0;transition:color .26s var(--ease)
}
.menu nav a:hover{color:var(--rojo-vivo)}
.menu__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;color:rgba(245,243,239,.66)}
.menu__tel{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--papel)}

/* Las reseñas las monta el servidor, así que su marca va aquí */
/* El carril tiene dos modos y el JavaScript los conmuta. Con el dedo manda
   el navegador; con raton lo movemos con una transformacion, porque escribir
   el desplazamiento se redondea a pixel entero y se ve ir a cachos. */
.revs__carril.a-dedo{scroll-snap-type:x proximity;scroll-padding-left:var(--pad)}
.revs__carril.a-dedo .rev{scroll-snap-align:start}
.revs__carril.a-rueda{overflow:hidden}
.revs__carril.a-rueda>.revs__carro{will-change:transform}

/* La flecha, suelta: el montador la pone en sitios que no son botones */
.btn__ar{width:.78em;height:.78em;position:relative;display:inline-block;flex:0 0 auto}
.btn__ar::before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.4px;background:currentColor}
.btn__ar::after{content:"";position:absolute;top:50%;right:0;width:.4em;height:.4em;border-top:1.4px solid currentColor;border-right:1.4px solid currentColor;transform:translateY(-50%) rotate(45deg)}

/* El panel mete sus botones dentro de estas listas */
.pn__fila{display:flex;gap:6px;margin-top:10px}


/* ══════════ LA LETRA EN EL MÓVIL ══════════
   Medida la página a 390 px salían veintitantos cuerpos distintos, siete de
   ellos entre 9,9 y 10,6 px. Ni se distinguen entre sí ni se leen bien: por
   debajo de 11 px en un teléfono se entorna el ojo. Aquí quedan seis pasos
   y cada cosa cae en uno.

     11,8   etiquetas en mono
     13,8   letra pequeña: notas, marcas, pies
     15,0   texto corrido
     16,5   entradillas y títulos de apartado
     26     titular de sección
     37     titular de portada                                          */
@media (max-width:760px){
  .mono{font-size:.74rem;letter-spacing:.075em}
  .kick{font-size:.74rem;letter-spacing:.1em}
  .rap__t{font-size:.74rem}
  .rev cite .mono{font-size:.72rem}
  .rev__ir{font-size:.72rem;letter-spacing:.07em}
  .revs__pista{font-size:.74rem}
  .pie__legal,.pie__sitio{font-size:.72rem}
  .pie__nav a{font-size:.74rem}
  .desl__et{font-size:.7rem}
  .cont__dato dt{font-size:.74rem}

  .rap__nota{font-size:.86rem}
  .chip{font-size:.88rem}
  .nos__txt span{font-size:.92rem}

  .serv__d,.paso__d,.man__d{font-size:.94rem;line-height:1.55}
  .sint dd,.par figcaption{font-size:.95rem}
  .rev p:not(.rev__stars),.faq__r p{font-size:1rem;line-height:1.6}

  .serv__t,.man__t,.paso__t,.sint dt,.par figcaption b,.faq__b{font-size:1.02rem}
  .rev cite b,.nos__txt b{font-size:.95rem}

  .lead,.port__lead{font-size:1.04rem;line-height:1.55}

  /* Y que ninguna acabe con una palabra sola en el último renglón. */
  .lead,.port__lead,.serv__d,.paso__d,.man__d,.sint dd,.par figcaption,.rap__nota{text-wrap:pretty}
}

/* ══════════ QUIEN PIDE MENOS MOVIMIENTO ══════════
   No se queda sin web: se le quita el desplazamiento, que es lo que marea,
   y se le deja el fundido, que no. El JavaScript ya atenúa lo suyo; esto lo
   respalda por si no llegara a ejecutarse. */
@media (prefers-reduced-motion:reduce){
  [data-entra]{transform:none}
  [data-flota]{transform:none !important}
  html{scroll-behavior:auto}
  .slide{transition-duration:3.2s}
}