/* ══════════════════════════════════════════════════════════════════════
   RACOL EXPRESS · página de clientes
   ──────────────────────────────────────────────────────────────────────
   La paleta sale del MANUAL DE IDENTIDAD, no de una decisión de pantalla:
   rojo e12319, azul 2a399b, negro 111111, blanco fcfcfc, y sus
   secundarios. No se escribe un color a mano fuera de este bloque.

   REGLA DEL COLOR, igual que en el panel: el color significa algo.
     ROJO    la marca y la acción. Nunca un dato por ser dato.
     AZUL    profundidad y apoyo (halos, filos secundarios).
     NEUTRO  el texto y la información.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --rojo:#e12319;          /* el del manual: fondos, filos, botones */
  --rojo-hondo:#990000;
  /* El mismo rojo, aclarado SOLO para texto sobre fondo oscuro: #e12319
     da 4.01 contra #111 y AA pide 4.5. Este da 5.28. Medido, no supuesto. */
  --rojo-texto:#f4493f;
  /* Y el mismo rojo oscurecido para texto sobre fondo CLARO, donde el
     aclarado se cae a 3.25. Este da 5.24. */
  --rojo-tinta:#c81d14;
  --azul:#2a399b;
  --azul-hondo:#253a82;
  --tinta:#111111;
  --tinta-honda:#0a0a0a;
  --tinta-pie:#050505;
  --papel:#fcfcfc;
  --claro:#f4f4f4;
  --gris:#515153;

  /* Texto sobre fondo oscuro. Medidos contra #111: 15.9:1 y 7.3:1. */
  --texto:#fcfcfc;
  --texto-suave:#c9c9c9;

  --marco:1180px;
  --barra-alto:78px;

  /* ── Las que usan /terminos y /mi-carro ─────────────────────────────
     Esas dos páginas cargan ESTE archivo y traen su propio <style>
     encima. Cuando la web pasó de clara a oscura, sus variables se
     quedaron sin definir — y una variable que no existe no da error: la
     declaración se descarta en silencio. Aquí están, ya en tono oscuro. */
  --acero:#17171c;        /* superficie de bloque */
  --azul-claro:#15192e;   /* realce, sobre el azul del manual */
  --linea:#2a2a2a;        /* bordes */
  --texto-tenue:#9a9a9a;  /* texto secundario: 7.2:1 sobre #111 */
  --letra:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --curva:cubic-bezier(.16,1,.3,1);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-alto) + 12px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--tinta);
  color:var(--texto);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

.marco{width:min(100% - 40px,var(--marco));margin-inline:auto}

/* `hidden` tiene que esconder SIEMPRE. El navegador se lo da con
   `display:none`, pero cualquier regla que declare un `display` —como
   `.como-llegar{display:flex}`— le gana por especificidad y el elemento se
   queda a la vista. Se cazó con los botones de «cómo llegar»: sin punto
   seguían dibujándose, con el enlace en blanco. */
[hidden]{display:none !important}

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

.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--rojo);color:var(--papel);padding:12px 18px;font-weight:700;
}
.saltar:focus{left:12px;top:12px}

/* El foco se ve SIEMPRE: se navega con teclado y con lector de pantalla. */
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:2px}
.seccion-clara :focus-visible{outline-color:var(--tinta)}
.contacto :focus-visible{outline-color:var(--papel)}

/* ── Tipografía de titular ─────────────────────────────────────────────
   Oswald, condensada y alta, para los titulares; Archivo para el texto.
   Las dos alojadas aquí. */
h1,h2,.servicio h3,.valores h3,.servicio-num,.valor-num{
  font-family:'Oswald','Archivo',system-ui,sans-serif;
  font-weight:600;
  line-height:1.05;   /* .98 cortaba el acento de «RAÍCES» contra la línea de arriba */
  letter-spacing:.5px;
  text-transform:uppercase;
  text-wrap:balance;  /* reparte las líneas en vez de dejar una palabra sola */
}

.rotulo{
  color:var(--rojo-texto);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.seccion-clara .rotulo{color:var(--rojo-tinta)}
.rotulo-tinta{color:var(--papel)}   /* sobre el rojo, el blanco es el que pasa AA */

/* ── Botones ──────────────────────────────────────────────────────────
   Dos tallas y nada más, como el panel. El alto no depende de lo que
   lleven dentro. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;
  border:2px solid transparent;
  font-family:inherit;font-size:.95rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s;
}
.btn-rojo{background:var(--rojo);border-color:var(--rojo);color:var(--papel)}
.btn-rojo:hover{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}
.btn-linea{border-color:var(--rojo);color:var(--texto)}
.btn-linea:hover{background:rgba(225,35,25,.14)}
.btn-tinta{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.btn-tinta:hover{background:#000}
.btn-linea-tinta{border-color:var(--papel);color:var(--papel)}
.btn-linea-tinta:hover{background:rgba(252,252,252,.16)}

/* ══ BARRA ═════════════════════════════════════════════════════════════ */
.barra{
  position:sticky;top:0;z-index:30;
  background:rgba(17,17,17,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(225,35,25,.35);
}
.barra-fila{
  min-height:var(--barra-alto);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.barra-marca{display:flex;align-items:center;flex:none}
.barra-marca img{width:168px;height:auto}

.menu{display:flex;align-items:center;gap:26px;font-weight:600;font-size:.95rem}
.menu a{padding:6px 0;color:var(--texto-suave);transition:color .18s}
.menu a:hover{color:var(--papel)}
.menu .menu-cta{
  background:var(--rojo);color:var(--papel);
  padding:11px 20px;font-weight:700;letter-spacing:.04em;
}
.menu .menu-cta:hover{background:var(--rojo-hondo)}

.barra-boton{
  display:none;
  width:46px;height:46px;flex:none;
  background:none;border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  align-items:center;justify-content:center;
}
.barra-boton-barras,
.barra-boton-barras::before,
.barra-boton-barras::after{
  display:block;width:20px;height:2px;background:var(--papel);
  transition:transform .2s,opacity .2s;
}
.barra-boton-barras::before,.barra-boton-barras::after{content:"";position:relative}
.barra-boton-barras::before{top:-6px}
.barra-boton-barras::after{top:4px}
.barra-boton[aria-expanded="true"] .barra-boton-barras{background:transparent}
.barra-boton[aria-expanded="true"] .barra-boton-barras::before{transform:translateY(6px) rotate(45deg)}
.barra-boton[aria-expanded="true"] .barra-boton-barras::after{transform:translateY(-4px) rotate(-45deg)}

/* ══ PORTADA ═══════════════════════════════════════════════════════════ */
.portada{
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(225,35,25,.4);
  background:radial-gradient(120% 90% at 78% 40%,#17171c 0%,var(--tinta) 55%);
  display:grid;align-items:center;
  min-height:min(640px,calc(100svh - var(--barra-alto)));
}
/* El taller, debajo de todo. Va MUY atenuada y con un velo encima: da
   textura real sin tocar el contraste del titular ni del logo cromado.
   Medido sobre la página renderizada después de ponerla. */
.portada-foto{
  position:absolute;inset:0;pointer-events:none;
  background:url('/medios/taller/taller.webp') center/cover no-repeat;
  opacity:.17;
}
.portada-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--tinta) 8%,rgba(17,17,17,.55) 62%,rgba(17,17,17,.8));
}
@media (max-width:860px){
  .portada-foto{background-image:url('/medios/taller/taller@small.webp')}
}
.portada-trama{
  position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:
    linear-gradient(135deg,transparent 25%,#fff 25.5%,transparent 26%),
    linear-gradient(315deg,transparent 25%,#fff 25.5%,transparent 26%);
  background-size:100px 100px;
}
.portada-filo{
  position:absolute;height:4px;width:45%;background:var(--rojo);
  transform:skewX(-38deg);pointer-events:none;
}
.portada-filo-1{top:14%;left:-5%}
.portada-filo-2{bottom:10%;right:-5%}

.portada-reja{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center;
  padding:76px 0;
}
.portada-texto h1{
  /* 5.2rem es lo que cabe en dos líneas sin dejar «AL» solo. Medido. */
  font-size:clamp(3.1rem,6.4vw,5.2rem);
  margin:14px 0 20px;
}
.portada-texto h1 strong{color:var(--rojo-texto);font-weight:inherit}
.portada-bajada{
  font-size:1.18rem;color:var(--texto-suave);max-width:36rem;
}
.portada-acciones{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 26px}

.combustibles{
  display:flex;align-items:center;gap:16px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.84rem;
}
.combustibles i{width:1px;height:22px;background:var(--rojo);display:block}

.portada-marca{position:relative;display:grid;place-items:center;min-height:300px}
.portada-marca img{
  position:relative;z-index:2;width:min(100%,560px);
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.7));
}
.portada-halo{
  position:absolute;width:min(72%,360px);aspect-ratio:1;
  background:var(--azul);filter:blur(120px);opacity:.28;
}
.portada-sellos{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px;
}
.portada-sellos li{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(0,0,0,.55);
  padding:7px 12px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}

/* ══ SECCIONES ═════════════════════════════════════════════════════════ */
.seccion{padding:104px 0}
.seccion-clara{background:var(--claro);color:var(--tinta)}
.seccion-tinta{background:var(--tinta-honda)}
.seccion-vision{
  background:linear-gradient(110deg,var(--tinta) 0%,var(--tinta) 55%,#181818 55%);
  border-top:1px solid #222;border-bottom:1px solid #222;
}

.seccion h2{font-size:clamp(2.4rem,4.6vw,4.1rem);margin:12px 0 0}

.seccion-cabeza{
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  margin-bottom:46px;
}
.seccion-cabeza-centrada{display:block;text-align:center;margin-bottom:52px}
.seccion-nota{color:var(--texto-suave);font-size:1.05rem;max-width:22rem}

.dos-columnas{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.texto-largo{font-size:1.1rem;display:grid;gap:20px}
.seccion-clara .texto-largo{color:#3e3e3e}
.seccion-vision .texto-largo{color:var(--texto-suave)}

/* ── Servicios ────────────────────────────────────────────────────────
   Rejilla que se adapta sola: no hay número de columnas escrito a mano,
   así que agregar un servicio no descuadra nada. */
.servicios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  gap:14px;
}
.servicio{
  position:relative;
  border:1px solid #292929;
  background:linear-gradient(135deg,#151515,#0a0a0a);
  padding:0 0 28px;
  min-height:172px;
  overflow:hidden;
}
.servicio::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rojo);
  z-index:2;
}
/* La foto manda su propio alto con `aspect-ratio`, no con un alto fijo: así
   la tarjeta no da el salto de maquetación cuando la imagen termina de
   bajar. El `img` lleva además su `width`/`height` por lo mismo. */
.servicio-foto{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-bottom:1px solid #292929;background:#0a0a0a;
}
.servicio-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.04);
  transition:transform .5s ease;
}
.servicio:hover .servicio-foto img{transform:scale(1.04)}
/* El velo deja el número legible encima de cualquier foto. */
.servicio-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.72) 0,rgba(10,10,10,0) 42%);
}
.servicio-num{
  position:absolute;left:22px;top:16px;z-index:2;
  font-size:1.9rem;color:var(--papel);line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.servicio h3,.servicio p{padding-inline:26px}
.servicio h3{margin-top:22px}
.servicio h3{font-size:1.6rem;margin-bottom:9px}
.servicio p{color:var(--texto-suave);font-size:1rem}

.servicios-pie{
  margin-top:28px;color:var(--texto-suave);font-size:1rem;
}
.servicios-pie a{
  color:var(--papel);font-weight:700;
  border-bottom:2px solid var(--rojo);padding-bottom:1px;cursor:pointer;
}
.servicios-pie a:hover{color:var(--rojo-texto)}

/* ── Valores ──────────────────────────────────────────────────────── */
.valores{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  border-top:1px solid #333;border-left:1px solid #333;
}
.valores li{
  padding:30px;border-right:1px solid #333;border-bottom:1px solid #333;
  min-height:200px;
}
.valor-num{font-size:2.4rem;color:var(--rojo-texto);line-height:1}
.valores h3{font-size:1.5rem;margin:6px 0 8px}
.valores p{color:var(--texto-suave);font-size:1rem}

/* ══ CONTACTO ══════════════════════════════════════════════════════════ */
.contacto{background:var(--rojo);color:var(--papel);padding:100px 0}
.contacto-caja{
  display:flex;align-items:center;justify-content:space-between;gap:48px;
}
.contacto h2{font-size:clamp(2.3rem,4.4vw,3.9rem);margin:12px 0 14px}
.contacto-bajada{font-size:1.1rem;max-width:34rem}

.contacto-datos{
  display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:28px;
}
.contacto-datos dt{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;   /* sin opacidad: bajarla sacaba el rótulo de AA */
}
.contacto-datos dd{margin:3px 0 0;font-weight:700;font-size:1.05rem}
.contacto-datos a{border-bottom:2px solid rgba(252,252,252,.5)}
.contacto-datos a:hover{border-bottom-color:var(--papel)}

.contacto-acciones{display:flex;flex-direction:column;gap:12px;flex:none}

/* ── Cómo llegar ──────────────────────────────────────────────────────
   Van debajo de la dirección, que es lo que acaban de leer. Se esconden
   solos cuando no hay punto (`hidden` en el HTML): nada que estilar. */
.como-llegar{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn-mapa{display:inline-flex;align-items:center;gap:9px}
.btn-mapa svg{flex:none}

/* ── La foto ancha de «Nosotros» ───────────────────────────────────────
   Con el mismo filo rojo de las tarjetas: la foto entra con el lenguaje
   que la página ya tiene, no con uno nuevo. */
.foto-ancha{
  position:relative;margin:56px auto 0;padding-left:5px;
  background:var(--rojo);
}
/* 4:3 y no 3:2: la foto del taller se tomó de pie, y en 3:2 el recorte se
   comía la pared con las herramientas y le cortaba la camiseta al mecánico —
   justo lo que hace que se vea un taller y no un primer plano. Comprobado
   mirando siete recortes. */
.foto-ancha img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
}
.foto-ancha figcaption{
  background:var(--tinta);color:var(--texto-suave);
  padding:12px 18px;font-size:.92rem;
}

/* ══ EL TALLER POR DENTRO ══════════════════════════════════════════════ */
.seccion-taller{background:var(--tinta);border-top:1px solid #222}

/* Las fotos son de celular y vienen de pie (9:16). En vez de recortarlas a
   lo ancho —que es perderles el motivo— se quedan verticales y la rejilla
   se adapta: así se ven como se tomaron. */
.mosaico{
  display:grid;
  /* CUATRO, no `auto-fit`. Son ocho fotos, y el número de columnas tiene que
     DIVIDIR a ocho o la última fila queda a medias: con `auto-fit` daban 5+3 y
     un mosaico con un hueco en el medio se lee como algo que no cargó. Cuatro
     y dos son los únicos repartos que siempre cuadran. */
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media (max-width:980px){ .mosaico{grid-template-columns:repeat(2,1fr)} }
.pieza{position:relative;margin:0;overflow:hidden;background:#0a0a0a}
.pieza img{
  width:100%;height:100%;display:block;aspect-ratio:3/4;object-fit:cover;
  transition:transform .5s ease;
}
.pieza:hover img{transform:scale(1.05)}
.pieza figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 14px 12px;
  color:var(--papel);font-size:.84rem;font-weight:600;
  /* El velo es lo que sostiene el contraste del pie sobre cualquier foto:
     sin él, un pie blanco sobre una culata clara deja de leerse. */
  background:linear-gradient(0deg,rgba(0,0,0,.92) 0,rgba(0,0,0,.72) 45%,transparent);
}
.pieza::before{
  content:"";position:absolute;left:0;bottom:0;width:4px;height:52px;
  background:var(--rojo);z-index:2;
}

/* ── El video ──────────────────────────────────────────────────────── */
.video-bloque{margin-top:56px;padding-top:44px;border-top:1px solid #222}
.video-texto{max-width:46rem;margin-bottom:30px}

/* ── La tira de videos ─────────────────────────────────────────────────
   Se desliza en vez de repartirse en columnas: el número de videos cambia
   —hoy tres, siete cuando lleguen— y una rejilla deja hueco con cualquier
   cantidad que no divida. Con scroll-snap cada uno queda centrado al
   soltar, y SIN una línea de guion: esta página se abre en la calle. */
.videos{
  display:flex;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;
  scrollbar-width:thin;scrollbar-color:#333 transparent;
}
.videos::-webkit-scrollbar{height:6px}
.videos::-webkit-scrollbar-thumb{background:#333}
/* 270 px: con los tres de hoy la tira llena 858 de los 1180 del marco y no
   deja un socavón de negro a la derecha; con los siete desliza, que es
   justamente para lo que es una tira. */
.video-pieza{margin:0;flex:none;width:270px;scroll-snap-align:start}
.video-pieza figcaption{
  margin-top:8px;color:var(--texto-suave);font-size:.84rem;text-align:center;
}
.video-taller{
  width:100%;height:auto;display:block;aspect-ratio:9/16;
  background:#000;border:1px solid #292929;
}
.video-texto h3{font-size:clamp(1.8rem,3.2vw,2.6rem);margin:10px 0 14px}
.video-texto p{color:var(--texto-suave);font-size:1.05rem;max-width:34rem}
.video-pie{
  margin-top:14px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8a8a;
}

/* ── La fachada, en el bloque de contacto ──────────────────────────── */
.contacto-foto{
  margin:0;flex:none;width:300px;
  border:4px solid var(--papel);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.contacto-foto img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.contacto-foto figcaption{
  background:var(--papel);color:var(--tinta);
  padding:9px 12px;font-size:.84rem;font-weight:600;text-align:center;
}

/* ══ PIE ═══════════════════════════════════════════════════════════════ */
.pie{background:var(--tinta-pie);padding:40px 0}
.pie-fila{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;
}
.pie-marca{display:flex;align-items:center;gap:20px}
.pie-marca img{width:150px;height:auto}
.pie-marca p{color:#8a8a8a;font-size:.92rem;line-height:1.5}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:22px;font-size:.95rem}
.pie-enlaces a{color:var(--texto-suave)}
.pie-enlaces a:hover{color:var(--papel)}

/* ══ BARRA DEL PULGAR (solo celular) ═══════════════════════════════════
   El pulgar decide abajo: llamar y escribir, siempre a la vista. */
.pulgar{display:none}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL — no es el escritorio encogido: cambia el orden, el tamaño y
   qué se muestra.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .barra-boton{display:flex}

  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--tinta);
    border-bottom:1px solid rgba(225,35,25,.35);
    padding:10px 20px 18px;
  }
  .menu.abierto{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid #242424;font-size:1.05rem}
  .menu .menu-cta{
    margin-top:14px;border-bottom:0;text-align:center;padding:15px 20px;
  }

  /* La marca primero: es lo que identifica, y el titular se lee después. */
  .portada-reja{grid-template-columns:1fr;gap:34px;padding:46px 0 56px}
  .portada-marca{order:1;min-height:0}
  .portada-texto{order:2}
  .portada-marca img{width:min(100%,380px)}

  .seccion,.contacto{padding:72px 0}
  .seccion-cabeza{display:block}
  .seccion-nota{margin-top:14px;max-width:none}
  .dos-columnas{grid-template-columns:1fr;gap:26px}
  .seccion-vision{background:var(--tinta)}

  .contacto-caja{display:block}
  .contacto-acciones{margin-top:30px}
  /* La fachada se centra y se encoge: a todo lo ancho en un celular, una
     foto vertical se come la pantalla entera y entierra los botones. */
  .contacto-foto{width:min(100%,260px);margin:34px auto 0}
  /* A todo el ancho, como los otros dos del bloque. Al ancho natural quedaban
     de tamaños distintos —«ABRIR EN MAPS» más largo que «IR CON WAZE»— encima
     de dos botones que sí ocupan la línea entera, y esa columna desigual se
     ve antes que cualquier otra cosa. */
  .como-llegar{flex-direction:column}
  .como-llegar .btn{width:100%;justify-content:center}

  .video-bloque{margin-top:40px;padding-top:34px}
  /* La tira se sale del marco a propósito: así el borde del siguiente video
     asoma por la derecha y se ve que hay más. Es lo mismo que hace la hoja
     del cliente con sus fotos. */
  .videos{
    margin-inline:calc(50% - 50vw);
    padding-inline:calc(50vw - 50% );
    gap:10px;
  }
  .video-pieza{width:62vw;max-width:220px}
  .video-pieza figcaption{font-size:.78rem}

  .foto-ancha{margin-top:38px}

  .pie-fila{flex-direction:column;align-items:flex-start;gap:22px}

  /* La barra del pulgar entra, y el cuerpo le deja sitio para que no
     tape el final de la página. */
  .pulgar{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(10,10,10,.97);
    border-top:1px solid rgba(225,35,25,.4);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .pulgar a{
    min-height:58px;display:flex;align-items:center;justify-content:center;
    font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;
    cursor:pointer;
  }
  .pulgar a:first-child{border-right:1px solid #262626;color:var(--texto)}
  .pulgar-wa{background:var(--rojo);color:var(--papel)}
  body{padding-bottom:58px}
}

@media (max-width:520px){
  body{font-size:16px}
  .marco{width:min(100% - 28px,var(--marco))}
  :root{--barra-alto:66px}
  .barra-marca img{width:140px}

  .portada-texto h1{font-size:clamp(2.6rem,11vw,3.4rem)}
  .portada-bajada{font-size:1.05rem}
  .portada-acciones{flex-direction:column;align-items:stretch}
  .portada-acciones .btn{width:100%}

  .seccion,.contacto{padding:58px 0}
  /* El `padding-left:70px` de aquí era del diseño SIN foto, cuando el número
     flotaba a la izquierda del texto. Con la foto arriba dejaba la imagen
     metida 70 px hacia dentro de su propia tarjeta. */
  .servicio{padding:0 0 24px;min-height:0}
  .servicio-num{left:16px;top:12px;font-size:1.6rem}
  .servicio h3{font-size:1.4rem}
  .valores li{padding:26px 22px;min-height:0}
  .mosaico{gap:8px}
  .pieza figcaption{font-size:.76rem;padding:24px 10px 9px}
  .servicio h3,.servicio p{padding-inline:22px}
  .contacto-datos{gap:16px 28px}
  .contacto-acciones .btn{width:100%}
}