/* ===========================================================
   TSB Motos — hoja de estilo unica para todo el sitio
   =========================================================== */

:root{
  --rojo:#e1231c;
  --rojo-hondo:#a8130e;
  --negro:#000;
  --tinta:#1c1c1e;
  --gris:#6e6e73;
  --niebla:#f3f3f1;
  --linea:#dededa;
  --display:'Archivo','Arial Black',system-ui,sans-serif;
  --texto:'Barlow','Helvetica Neue',Arial,sans-serif;
  --ancho:1180px;
  --rail:clamp(1.15rem,5vw,3.5rem);
  /* logo (48px) + padding vertical + borde; se recalcula en el breakpoint de movil */
  --alto-cabecera:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--tinta);font-family:var(--texto);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 112;
  line-height:.95;letter-spacing:-.022em;margin:0;text-transform:uppercase}
h2{font-size:clamp(1.9rem,1.2rem + 3vw,3.2rem)}
h3{font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);line-height:1.08}
p{margin:0 0 1em}
.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--rail)}
/* Texto que no se ve pero que siguen leyendo Google y los lectores de pantalla.
   Se usa en el <h1> de la portada, que por diseno va sin titular visible. */
.oculto-visual{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* los anclajes no deben quedar debajo de la cabecera fija */
[id]{scroll-margin-top:calc(var(--alto-cabecera) + 1.2rem)}

/* ---- salto al contenido (teclado y lector de pantalla) ---- */
.salto{position:absolute;left:.5rem;top:-100px;z-index:100;background:var(--rojo);color:#fff;
  font-weight:600;padding:.7rem 1.1rem;text-decoration:none;transition:top .15s}
.salto:focus{top:.5rem}

/* ---- cabecera ----
   Dos columnas: el logo a la izquierda y el menu pegado a la derecha. La
   segunda va a 1fr para que el menu se quede en el borde sea cual sea el
   ancho, sin depender de lo que ocupe el logo. */
.cabecera{position:fixed;inset:0 0 auto 0;z-index:60;
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;
  padding:.45rem var(--rail);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);transition:box-shadow .2s}
.cabecera.fija{box-shadow:0 6px 24px rgba(0,0,0,.09)}
.cabecera__logo{grid-column:1;justify-self:start;
  display:flex;align-items:flex-end;gap:.14em;text-decoration:none}
/* el archivo va recortado al dibujo, sin margen transparente: estos 48 px son
   48 px de logo de verdad (antes, con el PNG original, se quedaban en 35) */
/* flex:none es imprescindible: sin el, cuando la columna se queda corta el
   navegador encoge la imagen a lo ancho sin tocar el alto y el logo sale
   aplastado (pasaba en movil: 3.72 de proporcion real contra 2.62 pintada) */
.cabecera__logo img{height:48px;width:auto;flex:none}
/* el ".com" va en texto, no incrustado en la imagen: asi se ve nitido a
   cualquier tamano y se cambia sin rehacer el archivo */
.cabecera__com{font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 112;font-size:1.05rem;line-height:1.55;
  color:var(--tinta);letter-spacing:-.02em;
  /* el punto se alinea con la base del logo, no con la caja de la fuente */
  margin-bottom:-.14em}
.nav{display:flex;align-items:center;gap:1.35rem;grid-column:2;justify-self:end}
/* El menu de escritorio va a 1.2rem (el de movil no hereda esto: tiene su
   propio tamano mas abajo). Los dos limites que lo fijan, medidos:
   - Alto: la cabecera la marca el logo, 48 px. A 1.2rem el boton "Pedir cita"
     mide 42,5, asi que la cabecera sigue en 63,4. Pasado 1.5rem los enlaces
     superan los 48 y la estiran.
   - Ancho: el sitio mas apretado es 881 px, justo antes de que entre el menu de
     movil. Ahi el menu ocupa 460 de los 536 disponibles.
   nowrap: sin esto, entre 880 y ~1050 px la columna se queda corta y "24 Horas"
   o "Pedir cita" parten en dos lineas, estirando la cabecera. */
.nav a{color:var(--tinta);text-decoration:none;font-weight:600;font-size:1.2rem;
  padding:.25rem 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a:focus-visible,.nav a.activo{border-bottom-color:var(--rojo);color:var(--rojo)}
.nav__tel{background:var(--rojo);color:#fff!important;padding:.52rem 1.1rem;border:0;border-bottom:none!important;
  font-family:var(--texto);font-weight:600;font-size:1.2rem;line-height:1.35;cursor:pointer;
  white-space:nowrap}
.nav__tel:hover{background:var(--rojo-hondo)}
.menu-btn{display:none;background:var(--rojo);border:0;color:#fff;font-family:var(--texto);
  font-weight:600;font-size:.9rem;padding:.5rem .9rem;cursor:pointer;
  grid-column:2;justify-self:end}
@media (max-width:880px){
  :root{--alto-cabecera:54px}
  .cabecera{gap:.45rem;padding-block:.4rem}
  .cabecera__logo img{height:40px}
  .cabecera__com{font-size:.85rem}
  .menu-btn{display:block}
  /* Dos cosas hacen falta para que el desplegable ocupe el ancho de la cabecera
     y no 114 px sueltos a la derecha:
       grid-column:1/-1  porque un elemento de rejilla colocado en absoluto se
         ancla a SU celda, no al contenedor. Abarcando las dos columnas la
         referencia pasa a ser la caja de contenido de la cabecera, que ya viene
         con el rail metido: por eso left y right van a 0.
       justify-self:stretch  porque el .nav de escritorio lo lleva en `end`, y
         en un elemento absoluto eso lo encoge al contenido en lugar de
         estirarlo entre left y right. */
  .nav{position:absolute;grid-column:1 / -1;justify-self:stretch;
    top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    border:1px solid var(--linea);
    box-shadow:0 14px 30px rgba(0,0,0,.14);padding:.4rem;display:none}
  .nav.abierto{display:flex}
  /* El tamano del menu de escritorio no vale aqui: en el desplegable cada
     entrada va en su propia linea a lo ancho de la pantalla y no necesita
     crecer. Vuelve al tamano de siempre. */
  .nav a{padding:.8rem .7rem;border-bottom:1px solid var(--linea);font-size:.95rem}
  .nav__tel{text-align:center;margin-top:.35rem;font-size:.95rem}
}

/* ---- barra roja diagonal (elemento recurrente) ---- */
.tira{height:10px;background:var(--rojo)}
.tira--doble{height:14px;background:
  repeating-linear-gradient(115deg,var(--rojo) 0 26px,#fff 26px 32px)}

/* ---- portada ---- */
/* La altura sigue al ancho (53vw ~ 1/2,2) para que la proporcion del hueco se
   mantenga pegada a la del recorte de la foto. Con una altura fija, al cambiar
   el ancho de pantalla el hueco se volvia mas o menos apaisado que la foto y
   object-fit:cover se comia los bordes. Los topes son para que no quede
   ridicula en pantallas muy anchas ni mas baja que su contenido. */
.portada{position:relative;background:var(--negro);min-height:clamp(440px,53vw,860px);
  display:flex;align-items:flex-end;overflow:hidden}
.portada__foto{position:absolute;inset:0}
/* Velo vertical, no diagonal, y la foto a plena opacidad.
   Antes la imagen iba al 55 % Y ADEMAS bajo un degradado que la oscurecia de
   arriba abajo: el resultado era que no se distinguia nada. Ahora la foto se ve
   limpia en la mitad de arriba y solo se oscurece la franja de abajo, que es
   donde esta el texto.
   Sin z-index: al ser el ultimo hijo ya se pinta sobre la foto, y asi sigue
   quedando por debajo del texto de la portada (z-index 2) */
.portada__foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.10) 26%,
    rgba(0,0,0,.26) 48%,
    rgba(0,0,0,.76) 72%,
    rgba(0,0,0,.93) 100%)}
/* La foto ocupa todo el hueco. Va en un <picture> que sirve un recorte apaisado
   en escritorio y otro mas alto en movil, para no descargar pixel que el recorte
   acabaria tirando. */
.portada__foto img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%}

/* ---- carrusel de la portada ----
   Las diapositivas van apiladas en el mismo hueco y se cruzan por opacidad. No
   se desplazan de lado: la banda roja y el panel blanco estan DIBUJADOS en cada
   imagen y en la misma x, asi que al fundirse una con otra el corte se queda
   quieto y solo cambia la foto. Deslizando se veria la banda moverse.
   La primera lleva .es-activa en el HTML: sin JavaScript se queda esa fija, que
   es la que habia antes del carrusel. */
.portada__diapo{position:absolute;inset:0;opacity:0;transition:opacity .9s ease-in-out}
.portada__diapo.es-activa{opacity:1}
/* Los puntos los crea js/app.js. Van sobre la foto, a la izquierda, por encima
   del velo de .portada__foto::after pero por debajo del texto (z-index 2). */
.portada__puntos{position:absolute;z-index:1;left:0;right:0;bottom:.85rem;
  display:flex;gap:.45rem;justify-content:center}
.portada__punto{width:34px;height:4px;padding:0;border:0;border-radius:2px;
  background:rgba(255,255,255,.42);cursor:pointer;
  transition:background .2s}
.portada__punto[aria-current="true"]{background:var(--rojo)}
.portada__punto:hover{background:rgba(255,255,255,.75)}
.portada__punto[aria-current="true"]:hover{background:var(--rojo)}
/* El area pulsable tiene que llegar a 24x24 (WCAG 2.5.8) sin que el punto se
   vea mas gordo: se agranda con un pseudoelemento, no con padding. */
.portada__punto::before{content:'';position:absolute;inset:-10px -2px}
.portada__punto{position:relative}
@media (min-width:881px){
  /* El corte del banner cae en el 57,9 % (x=1320 de 2280) y a su derecha el
     panel es blanco. Centrados en todo el ancho, los puntos quedaban justo
     encima de la banda roja y la mitad se perdia sobre el blanco, porque son
     blancos. Se encierran en la parte de la foto. */
  .portada__puntos{right:42.1%}
}
@media (prefers-reduced-motion:reduce){
  /* Sin transicion y sin paso automatico (lo decide js/app.js). La diapositiva
     activa tiene que quedarse VISIBLE: anular la animacion sin devolver el
     estado final es la trampa que ya dejo el titular en opacity:0. */
  .portada__diapo{transition:none}
  .portada__diapo.es-activa{opacity:1}
}
/* padding-block, no el atajo `padding`: con el atajo se anulaba el padding-inline
   de .contenedor y el titular quedaba pegado al borde en pantallas de <=1180 px */
.portada__texto{position:relative;z-index:2;width:100%;padding-block:8.5rem clamp(2rem,5vh,3.4rem)}
.marca-linea{display:inline-block;background:var(--rojo);color:#fff;font-weight:600;
  font-size:.82rem;letter-spacing:.1em;padding:.35rem .8rem;margin-bottom:1.1rem;
  transform:skewX(-10deg)}
.marca-linea span{display:block;transform:skewX(10deg)}
/* Tope de 5.1rem: la linea mas larga del titular ("con equipo propio") mide
   12,5 em, asi que por encima de ~85 px parte en dos y el titular se va a cinco
   lineas en lugar de tres. */
.portada h1{color:#fff;font-size:clamp(2.5rem,.8rem + 7.4vw,5.1rem);font-weight:900;
  font-variation-settings:'wdth' 118;letter-spacing:-.035em}
.portada h1 em{font-style:normal;color:var(--rojo)}
/* El bloque de la portada. Por defecto (movil y tablet) va abajo, a lo ancho y
   sobre la foto, que es como estaba. De 881 para arriba se va al panel negro:
   ver el bloque "portada partida" mas abajo. */
.portada__pie{display:flex;flex-wrap:wrap;gap:1.1rem 2.4rem;align-items:center;
  margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.25)}
.portada__pie p{margin:0;max-width:44ch;color:#e6e6e4}
/* El logo va en la version blanca: el fondo ahi es casi negro y la version roja
   se apaga. */
.portada__marca,.titular__marca{flex:none;height:56px;width:auto;opacity:.95}
.titular__marca{margin-left:auto}
/* La firma solo aparece en la portada partida (de 661 para arriba). Por debajo
   el banner ya trae el logo dibujado dentro, asi que ponerlo otra vez sobraria. */
.portada__firma{display:none}
/* En la de 24 horas cabe hasta 880 justos (quedan 66 px de hueco), que ademas
   es donde la portada pasa a apilarse. Por debajo se cae a una segunda linea y
   el pie pasa de 68 a 141 px, asi que ahi se retira. */
@media (max-width:879px){.titular__marca{display:none}}

/* ---- portada partida (EN PRUEBAS) ----
   De 881 para arriba la portada se parte en dos: la foto del pit-lane a la
   izquierda y un panel blanco a la derecha con el logo, el sello y el texto.
   El corte no es de CSS, viene dibujado en el propio banner
   (herramientas/crear-banner.py, salida banner-blanco.jpg). La banda separadora
   va recta y en rojo, con filo blanco: el filo la separa de la foto y el rojo,
   del panel.

   El 60 % sale de la geometria del banner: el corte esta a x=1290 de 2280, o
   sea el 56,6 %, y al ir recto no se mueve con la altura. Quedan ~3,4 puntos de
   margen entre la barra y el texto. Cuando la barra iba inclinada habia que
   arrancar en el 64 %, porque en la esquina de arriba el borde se metia hasta
   el 60,3 %.

   .portada__texto pierde el max-width del .contenedor a proposito: el banner va
   a sangre, asi que el porcentaje del texto tiene que medirse contra la pantalla
   y no contra una columna centrada de 1180, o el bloque se descolgaria del corte
   al cambiar el ancho.

   Para desmontarlo, basta borrar este bloque y devolver el <source> de
   portada-blanco del index. */
/* -- lo que comparten las dos formas (dos columnas y apilada) --
   Son los dos casos en los que el texto acaba sobre el panel blanco, asi que
   aqui van la firma y los colores que hay que devolver a oscuro. El resto del
   sitio pinta estos elementos para fondo oscuro (el pie de portada iba sobre
   foto), por eso hay que deshacerlo aqui y no al reves. */
@media (min-width:661px){
  /* El logo trae su propio fondo negro y el "MOTOS" dentro, asi que va suelto,
     sin chapa. Se mide POR ANCHO (width:100%) para que crezca con el panel. */
  .portada__firma{display:block;max-width:22rem;margin:0 auto 1.6rem}
  .portada__marca{display:block;width:100%;height:auto;margin:0 auto}
  /* El parrafo y los botones se apilan, y la raya separadora sobra: el sello ya
     hace de corte. */
  .portada__pie{display:block;margin-top:0;padding-top:0;border-top:0}
  .portada__pie p{margin-top:1.2rem;color:var(--tinta)}
  .portada__pie .botones{margin-top:1.5rem}
  /* El sello y "Pedir cita" ya vienen en rojo sobre blanco, que es lo que toca
     aqui: no hacen falta. El unico que hay que rehacer es "Como llegar", que va
     perfilado en blanco porque en el resto del sitio se ve sobre foto. */
  .portada__bloque .boton--linea{border-color:var(--tinta);color:var(--tinta)}
  .portada__bloque .boton--linea:hover,
  .portada__bloque .boton--linea:focus-visible{background:var(--tinta);
    border-color:var(--tinta);color:#fff}
}

/* -- dos columnas: foto a la izquierda, panel blanco a la derecha -- */
@media (min-width:881px){
  .portada{align-items:center}
  .portada__texto{max-width:none;align-items:center;
    padding-block:calc(var(--alto-cabecera) + 1.5rem) 1.5rem}
  /* El tope de 34rem es para que en pantallas muy anchas el parrafo no se quede
     flotando en medio de un panel enorme: el bloque deja de crecer y el blanco
     sobrante queda como aire, que es lo que se busca. */
  /* Dos columnas de verdad en vez de un margen izquierdo: la primera llega
     hasta pasada la barra y el bloque se centra en la segunda.
     Con margin-left el bloque se quedaba pegado a la izquierda del panel y a
     1920 sobraban 237 px de blanco muerto a la derecha; centrado, el aire se
     reparte.
     El 56 % sale de la barra: esta en el 53,5 % (1220 de 2280) y al ir recta no
     se mueve con la altura, asi que 2,5 puntos bastan de margen. Medido: 24 px
     a 1280 y 41 px a 1920.
     Ese 53,5 sustituye al 56,6 de antes: para que el logo creciera de verdad
     habia que ensanchar el panel, no arrimar el bloque a la barra. Arrimandolo,
     el margen se quedaba en 7 px y la chapa casi tocaba la barra. */
  /* El +.8rem es un margen FIJO con la barra, no porcentual. Con 61 % a secas
     la holgura se quedaba en 9 px a 890 de ancho (donde el panel es mas
     estrecho) mientras sobraban 47 a 1920. Un valor fijo reparte mejor: 22 px
     abajo y 69 arriba, y cuesta solo 13 px de logo en pantalla grande. */
  .portada__texto{display:grid;grid-template-columns:calc(61% + .8rem) 1fr}
  /* Sin max-width: el bloque llena el panel, que es lo que hace que el logo vaya
     de lado a lado. El parrafo no se descuadra porque tiene su propio tope de
     44ch heredado de .portada__pie p. */
  .portada__bloque{grid-column:2;width:100%}
  /* Sin tope: aqui el limite lo pone ya el panel, y el logo lo llena de lado a
     lado. A 1280 son 437 px pintados de los 1400 del archivo. */
  .portada__firma{max-width:none;margin-bottom:1.8rem}
  /* El velo pasa a ser horizontal y se apaga antes del corte (52 %, y el corte
     empieza en el 52,9 %). Dos motivos: ya no hay texto sobre la foto que
     necesite fondo, y sobre todo que el velo vertical tapaba TAMBIEN el panel
     de la derecha, que quedaba sucio y desigual en vez de limpio. */
  .portada__foto::after{background:linear-gradient(to right,
    rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,0) 52%)}
}

/* -- apilada: foto arriba, bloque blanco debajo (661-880) --
   A estos anchos no caben dos columnas: la del texto se quedaria en unos 220 px
   y el parrafo saldria a tres palabras por linea. Apilado se mantiene el panel y
   el texto respira, que es lo mismo que hace la portada de 24 horas por debajo
   de 880. Aqui el color no viene en la imagen, lo pone el fondo de .portada: el
   <picture> sirve la foto sola (portada-foto-*). */
@media (min-width:661px) and (max-width:880px){
  .portada{display:block;background:#fff;min-height:auto;
    padding-top:var(--alto-cabecera)}
  /* relative, no static: aqui la portada se apila y la foto deja de ir pegada
     al fondo, pero las diapositivas del carrusel van en absoluto y necesitan
     que sea ESTE el bloque que las contiene. Con static se anclarian a
     .portada y se saldrian por encima del texto. */
  .portada__foto{position:relative;display:block;aspect-ratio:1.85}
  .portada__foto>picture{display:block;height:100%}
  .portada__foto::after{content:none}
  .portada__texto{padding-block:1.5rem 1.7rem}
  /* Aqui el bloque ocupa todo el ancho del contenedor, asi que la firma
     necesita su propio tope o saldria un logo de 700 px. */
  .portada__firma{max-width:20rem;margin-bottom:1.4rem}
}
.botones{display:flex;flex-wrap:wrap;gap:.6rem}
button.boton{font-family:var(--texto);font-size:1rem;line-height:1.3;cursor:pointer}
.boton{display:inline-block;text-decoration:none;font-weight:600;padding:.8rem 1.4rem;
  border:2px solid var(--rojo);background:var(--rojo);color:#fff;
  transition:background-color .18s,border-color .18s,color .18s}
.boton:hover,.boton:focus-visible{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}
.boton--linea{background:transparent;border-color:#fff;color:#fff}
.boton--linea:hover,.boton--linea:focus-visible{background:#fff;border-color:#fff;color:var(--negro)}
.boton--oscuro{border-color:var(--tinta);background:transparent;color:var(--tinta)}
.boton--oscuro:hover{background:var(--tinta);color:#fff}
.entra{opacity:0;transform:translateY(12px);animation:sube .7s cubic-bezier(.2,.7,.3,1) forwards}
.entra--2{animation-delay:.09s}
.entra--3{animation-delay:.18s}
.entra--4{animation-delay:.27s}
@keyframes sube{to{opacity:1;transform:none}}

/* ---- cifras ---- */
.cifras{background:var(--rojo);color:#fff;padding:1.5rem 0}
.cifras__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.3rem 2.6rem}
/* en movil, 2x2 en vez de una columna: ocupa la mitad de alto y se lee de un
   vistazo, en lugar de obligar a bajar cuatro pantallazos */
@media (max-width:560px){
  .cifras{padding:1.25rem 0}
  .cifras__grid{grid-template-columns:1fr 1fr;gap:1.05rem .9rem}
  .cifra{padding-left:.7rem;padding-right:.2rem}
  .cifra b{font-size:1.08rem}
  .cifra span{font-size:.82rem;margin-top:.25rem}
}
.cifra{padding-left:.95rem;padding-right:.6rem;border-left:3px solid rgba(255,255,255,.5)}
.cifra b{display:block;font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 108;
  font-size:clamp(1.3rem,1.02rem + .9vw,1.65rem);line-height:1.05;white-space:nowrap}
.cifra span{display:block;font-size:.93rem;line-height:1.35;color:#ffe2e0;margin-top:.35rem}

/* ---- secciones ---- */
.seccion{padding:clamp(2.6rem,5.5vw,4.4rem) 0}
.seccion--niebla{background:var(--niebla)}
.seccion--oscura{background:var(--negro);color:#e7e7e5}
.seccion--oscura h2,.seccion--oscura h3{color:#fff}
.seccion--oscura .encabezado p{color:#c6c6c3}
.encabezado{max-width:62ch;margin-bottom:clamp(1.4rem,3vw,2.1rem)}
.encabezado h2{margin-bottom:.65rem;position:relative;padding-left:1.1rem}
.encabezado h2::before{content:'';position:absolute;left:0;top:.08em;bottom:.08em;
  width:6px;background:var(--rojo);transform:skewX(-10deg)}

/* ---- servicios ---- */
.servicios{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.servicios li{background:#fff;padding:1.15rem 1.25rem}
.seccion--niebla .servicios li{background:var(--niebla)}
.servicios h3{margin-bottom:.35rem}
.servicios p{margin:0;font-size:.97rem;color:var(--gris)}

/* ---- marcas ---- */
.marcas{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem}
.marca{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 105;
  text-transform:uppercase;font-size:clamp(.95rem,.88rem + .4vw,1.2rem);
  border:2px solid var(--tinta);padding:.5rem 1rem;background:#fff}
.marcas__titulo{font-weight:600;font-size:.95rem;color:var(--gris);margin:0 0 .55rem}
/* Las tres marcas principales van destacadas: chapa roja llena y algo mas
   grandes, frente al resto que van en blanco con filete. Es la misma jerarquia
   que ya dice la franja de cifras ("Especialistas en Kawasaki, Honda y Kymco"). */
.marcas__titulo--fuerte{color:var(--tinta);font-size:1rem}
.marcas--principales{margin-bottom:1.9rem}
.marca--principal{background:var(--rojo);border-color:var(--rojo);color:#fff;
  font-size:clamp(1.05rem,.94rem + .55vw,1.4rem);padding:.62rem 1.25rem}

/* ---- recambios ----
   Aqui NO se usan las chapas de .marca: son casi sesenta marcas y en chapas
   quedaba un muro en el que no se lee ninguna. Van en logos, que es lo que el
   cliente pidio, y el nombre de cada una viaja en su alt. */
.recambios{margin-top:2.6rem;padding-top:1.9rem;border-top:1px solid var(--linea)}
.recambios__titulo{font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 110;text-transform:uppercase;
  font-size:clamp(1.1rem,1rem + .45vw,1.35rem);letter-spacing:-.01em;margin:0}
.recambios__intro{margin:.5rem 0 1.6rem;max-width:62ch;color:var(--gris)}

/* Rejilla de logos de marca. Va vacia hasta que haya logos: los prepara
   herramientas/preparar-logos-recambio.py, que los deja todos del mismo tono y
   encajados en la misma caja, e imprime el HTML para pegar aqui.
   Las celdas se reparten solas (auto-fill) y el logo se centra en la suya con
   object-fit:contain, asi que da igual que unos sean alargados y otros
   cuadrados: todos pesan lo mismo a la vista.
   El .55 de opacidad es a proposito: son marcas de proveedor, no del taller, y
   a plena tinta le comen protagonismo al logo de TSB. Al pasar por encima suben
   a 1, que ademas confirma que se puede senalar cada una. */
.logos-marca{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.5rem .8rem;
  grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));align-items:center}
/* Sin object-fit ni max-height: el script ya entrega todos los logos en la
   misma caja y con el fondo de la seccion metido, asi que la imagen es la
   celda. Y sin transparencia, que multiplicaba por cinco el peso. */
.logos-marca img{display:block;width:100%;height:auto;
  opacity:.78;transition:opacity .18s}
.logos-marca img:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.logos-marca img{transition:none}}

/* ---- galeria ----
   Cada celda lleva su proporcion fija. Sin esto la altura de la fila la marcaba
   la foto mas alta, y con fotos verticales de movil el hueco grande acababa
   midiendo 530x1063 (relacion 0,50): cualquier foto con gente quedaba recortada
   a una rendija. Ahora la foto se adapta a la celda y no al reves. */
.galeria{display:grid;gap:8px;grid-template-columns:repeat(4,1fr)}
.galeria figure{margin:0;overflow:hidden;background:var(--tinta);position:relative;
  aspect-ratio:1}
/* las fotos son verticales y el encuadre util queda por encima del centro */
.galeria img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* con `.galeria` delante: si no, `.galeria figure` de arriba gana por
   especificidad y todas las celdas saldrian cuadradas */
.galeria .g-ancha{grid-column:span 2;grid-row:span 2;aspect-ratio:1}   /* 2 col x 2 filas */
.galeria .g-media{grid-column:span 2;aspect-ratio:2.03}                /* 2 col x 1 fila  */
.galeria .g-alta{grid-row:span 2;aspect-ratio:.485}
@media (max-width:760px){
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria .g-ancha,.galeria .g-media{grid-column:span 2}
  .galeria .g-ancha,.galeria .g-alta{grid-row:span 1}
  /* el hueco grande sigue cuadrado tambien en movil: asi las fotos se pueden
     recortar a 1:1 de origen y no se descarga pixel que nadie ve */
  .galeria .g-alta{aspect-ratio:1}
}
/* En La tienda la galeria va la ultima y el bloque que la sigue (.recambios) ya
   trae su propio margen. En El taller la sigue .servicios, que tiene margin:0
   para que la rejilla pegue con el borde: sin esto las fotos quedan tocando las
   cajas de servicios. */
.galeria + .servicios{margin-top:clamp(1.4rem,3vw,2.1rem)}

/* ---- reclamo 24h ---- */
.reclamo{position:relative;background:var(--negro);overflow:hidden}
.reclamo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.reclamo__texto{position:relative;z-index:2;padding:clamp(2.4rem,5.5vw,4rem) 0;color:#fff}
.reclamo h2{color:#fff;margin-bottom:.7rem}
.reclamo p{max-width:50ch;color:#dcdcda}

/* ---- titular de pagina interior ---- */
/* 60vw y no 53: con 53 el hueco se quedaba en 466 px a 880 de ancho y el bloque
   de titulo ocupa 429, asi que de la foto solo quedaban despejados 37 px y la
   moto desaparecia detras del texto. Con 60vw quedan 99 a 880 y 178 a 1024, que
   es donde empieza a leerse como una portada y no como un titulo sobre un
   fondo. El tope sube a 760 por lo mismo: a 1920 se ve el 76 % del alto de la
   foto en vez del 72 %. */
.titular{position:relative;background:var(--negro);display:flex;align-items:flex-end;
  min-height:clamp(400px,60vw,760px);overflow:hidden}
.titular>picture{position:absolute;inset:0}
.titular>picture img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%}
/* mismo criterio que la portada: foto limpia arriba, velo solo donde va el texto */
.titular::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.12) 24%,
    rgba(0,0,0,.34) 44%,
    rgba(0,0,0,.80) 70%,
    rgba(0,0,0,.94) 100%)}
.titular__texto{position:relative;z-index:2;width:100%;padding-block:8.5rem clamp(1.8rem,4vh,3rem)}
.titular h1{color:#fff;font-size:clamp(2.3rem,1.3rem + 5.5vw,5rem);font-weight:900;
  font-variation-settings:'wdth' 118;letter-spacing:-.03em}
.titular p{color:#dcdcda;max-width:52ch;margin:.9rem 0 0}
/* La fila del pie: el parrafo a la izquierda y la marca empujada al borde
   derecho, igual que en la portada del inicio. */
.titular__pie{display:flex;flex-wrap:wrap;gap:1.1rem 2.4rem;align-items:center}
/* En movil la pantalla es vertical y las fotos son apaisadas: un hueco muy alto
   obliga a object-fit:cover a recortar los lados. Bajandolo se ve casi entera.
   Va aqui, despues de .portada y .titular, para que gane por orden. */
/* Por debajo de 660 px la pantalla ya es mas alta que ancha y entra el recorte
   vertical de la foto (el <source> del <picture> cambia en ese mismo punto). */
@media (max-width:660px){
  .portada{min-height:min(66svh,540px)}
  .portada__texto{padding-block:calc(var(--alto-cabecera) + 5.5rem) clamp(1.6rem,4vh,2.4rem)}
}
/* La portada de 24 horas se apila por debajo de 880: foto arriba, titulo debajo.
   La foto es un barrido de perfil y la moto ocupa casi todo el ancho del
   encuadre, asi que necesita el ancho entero y un hueco apaisado (~1,18) para
   salir entera; y a ese alto el bloque de titulo la tapaba por completo. Se
   apilan y caben las dos cosas, con el titulo mas legible sobre negro que sobre
   la foto. El corte va en 880 y no en 660 porque hasta ahi el hueco sigue
   siendo demasiado bajo para que se vea la moto detras del titulo, y es el
   mismo punto donde el <picture> cambia de recorte. */
@media (max-width:879px){
  /* :not(--sobrio) porque aviso legal y privacidad usan la misma clase sin foto:
     ahi no hay nada que apilar y el hueco de la cabecera ya lo pone su padding */
  .titular:not(.titular--sobrio){display:block;min-height:auto;
    padding-top:var(--alto-cabecera)}
  .titular>picture{position:relative;display:block;aspect-ratio:1.18}
  .titular:not(.titular--sobrio)::after{content:none}
  .titular__texto{padding-block:1.5rem clamp(1.2rem,3vh,1.8rem)}
}
.titular--sobrio{min-height:auto}
.titular--sobrio .titular__texto{padding-block:calc(var(--alto-cabecera) + 2.5rem) clamp(1.8rem,4vh,2.6rem)}

/* ---- carrera ---- */
.carrera{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
@media (max-width:880px){.carrera{grid-template-columns:1fr}}
.lista-carrera{list-style:none;margin:1.1rem 0 0;padding:0}
.lista-carrera li{padding:.6rem 0 .6rem 1.5rem;position:relative;border-bottom:1px solid #232325}
.lista-carrera li::before{content:'';position:absolute;left:0;top:1.05rem;width:8px;height:8px;
  background:var(--rojo);transform:skewX(-10deg)}
.podio{margin-top:1.6rem;background:var(--rojo);padding:1.1rem 1.3rem;display:flex;
  gap:1.1rem;align-items:center;flex-wrap:wrap}
.podio b{font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:900;
  font-size:clamp(2rem,1.7rem + 1.8vw,3rem);line-height:1;color:#fff}
.podio span{color:#fff;max-width:34ch}

/* ---- equipo ---- */
.equipo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.4rem,3.5vw,2.6rem);align-items:center}
@media (max-width:880px){.equipo{grid-template-columns:1fr}}
.pendiente{border-left:3px solid var(--rojo);padding:.2rem 0 .2rem 1rem;color:#bdbdba;font-size:.97rem}

/* ---- contacto ---- */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3.5vw,3rem)}
@media (max-width:880px){.contacto{grid-template-columns:1fr}}
.bloque-dato{margin-bottom:1.4rem}
.bloque-dato h3{margin-bottom:.4rem}
.bloque-dato a{color:var(--rojo);font-weight:600}
.horario{width:100%;border-collapse:collapse;font-size:1rem}
.horario th,.horario td{text-align:left;padding:.5rem .35rem;border-bottom:1px solid var(--linea)}
.horario th{font-weight:600;width:10rem}
.horario td{color:var(--gris)}

/* ---- mapa: no se carga hasta que la persona lo pide (evita el rastreo de Google) ---- */
.mapa-caja{position:relative;min-height:320px;height:100%;background:var(--niebla);
  border:1px solid var(--linea);display:flex;flex-direction:column}
.mapa-cargar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;width:100%;min-height:320px;padding:1.5rem;cursor:pointer;text-align:center;
  background:var(--niebla);border:0;font-family:var(--texto);color:var(--tinta)}
.mapa-cargar:hover{background:#eaeae7}
.mapa-cargar__titulo{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.15rem;background:var(--rojo);color:#fff;padding:.65rem 1.2rem}
.mapa-cargar__nota{font-size:.86rem;color:var(--gris);max-width:34ch;line-height:1.4}
.mapa{width:100%;height:100%;min-height:320px;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.mapa-enlace{margin:.7rem 0 0;font-size:.93rem}
.mapa-enlace a{color:var(--rojo);font-weight:600}

/* ---- pie ---- */
.pie{background:var(--negro);color:#a3a3a6;padding:2.2rem 0;font-size:.92rem}
.pie__grid{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;justify-content:space-between;align-items:center}
.pie img{height:32px;width:auto}
.pie a{color:#fff;text-decoration:none;border-bottom:1px solid var(--rojo)}
.pie a:hover{color:var(--rojo)}
.pie__legal{margin:0}

/* ---- ventana de cita ---- */
.cita{border:0;padding:0;width:min(560px,calc(100vw - 2rem));background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.cita::backdrop{background:rgba(0,0,0,.6)}
.cita__cabecera{background:var(--rojo);color:#fff;padding:1rem 1.3rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.cita__cabecera h2{color:#fff;font-size:clamp(1.25rem,1.1rem + .7vw,1.7rem)}
.cita__cerrar{background:transparent;border:2px solid #fff;color:#fff;cursor:pointer;
  font-family:var(--texto);font-weight:600;font-size:1rem;line-height:1;padding:.3rem .6rem}
.cita__cerrar:hover{background:#fff;color:var(--rojo)}
.cita__cuerpo{padding:1.2rem 1.3rem 1.4rem}
.cita__intro{font-size:.95rem;color:var(--gris);margin-bottom:1rem}
.campo{margin-bottom:.85rem}
.campo label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.28rem}
.campo input,.campo textarea{width:100%;font-family:var(--texto);font-size:1rem;
  padding:.6rem .7rem;border:1px solid var(--linea);background:var(--niebla);color:var(--tinta)}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--rojo);outline-offset:0;background:#fff}
.campo textarea{resize:vertical;min-height:92px}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media (max-width:520px){.campo-doble{grid-template-columns:1fr}}
/* casilla de consentimiento (RGPD) */
.campo--acepto{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;
  margin:1rem 0 .9rem}
.campo--acepto input{width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--rojo);
  padding:0;border:1px solid var(--gris);background:#fff}
.campo--acepto label{font-weight:400;font-size:.88rem;line-height:1.45;color:var(--gris);margin:0}
.campo--acepto a{color:var(--rojo);font-weight:600}
.cita__pie{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.4rem}
.cita__nota{font-size:.86rem;color:var(--gris);margin:.8rem 0 0}
.cita__nota a{color:var(--rojo);font-weight:600}
/* mensaje de estado tras enviar */
.aviso{margin:.9rem 0 0;padding:.8rem 1rem;font-size:.92rem;line-height:1.45;
  border-left:4px solid var(--rojo);background:var(--niebla)}
.aviso a{color:var(--rojo);font-weight:600}
.aviso:empty{display:none}

/* ---- barra fija de movil ----
   Llamar y Como llegar siempre a un toque: en un taller, la mayoria de visitas
   llegan desde el movil y lo que buscan es el telefono. En escritorio no
   aparece, porque ahi el numero ya esta en la cabecera y en Contacto. */
.barra-movil{display:none}
@media (max-width:880px){
  .barra-movil{position:fixed;z-index:70;inset:auto 0 0 0;display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--tinta);border-top:1px solid #34343a;
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -6px 22px rgba(0,0,0,.28)}
  .barra-movil a{display:flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:54px;padding:.5rem .6rem;color:#fff;text-decoration:none;
    font-family:var(--texto);font-weight:600;font-size:1rem;line-height:1.2}
  .barra-movil a:first-child{background:var(--rojo)}
  .barra-movil a:first-child:active{background:var(--rojo-hondo)}
  .barra-movil a:last-child:active{background:#2a2a2e}
  .barra-movil svg{width:19px;height:19px;flex:none;fill:currentColor}
  /* que el pie no quede tapado por la barra */
  .pie{padding-bottom:calc(2.2rem + 54px + env(safe-area-inset-bottom,0px))}
}

/* ---- paginas legales ---- */
.legal{max-width:70ch}
.legal h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,1.95rem);margin:2.2rem 0 .7rem}
.legal h2:first-child{margin-top:0}
.legal h3{margin:1.5rem 0 .4rem}
.legal ul{margin:0 0 1em;padding-left:1.2rem}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--rojo);font-weight:600}
.legal dl{margin:0 0 1em}
.legal dt{font-weight:600;margin-top:.7rem}
.legal dd{margin:0 0 0 0;color:var(--gris)}

:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}

/* ---- movimiento reducido ----
   Importante: al anular las animaciones hay que devolver a .entra su estado
   final, o el titular de portada se queda invisible (opacity:0). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .entra{opacity:1;transform:none}
}