@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA · servida desde aquí, no desde Google

   POR QUÉ. Las 108 páginas pedían las fuentes a fonts.googleapis.com y
   fonts.gstatic.com ANTES de que nadie aceptara nada. Eso manda la IP del
   visitante a un tercero fuera de la UE en cuanto abre la página, y la
   política de cookies no lo declaraba. Para una empresa española es una
   conversación que no interesa tener, y se evita entera alojándolas.

   De paso se ahorran dos conexiones nuevas —DNS, TLS y handshake con dos
   hosts distintos— en el camino crítico del primer pintado.

   Se conservan los `unicode-range` de Google: el navegador solo descarga el
   subconjunto que la página necesita, igual que antes. Y solo van latin y
   latin-ext; el cirílico, el griego y el vietnamita no pintan nada en una web
   en castellano, inglés y francés.
   ═══════════════════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fuentes/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
 
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fuentes/EJRLQgErUN8XuHNEtX81i9TmEkrnfc9Q-a2fli0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
 
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fuentes/EJRLQgErUN8XuHNEtX81i9TmEkrnfc9Q962f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
 
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fuentes/EJRLQgErUN8XuHNEtX81i9TmEkrnGc5Q-a2fli0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
 
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fuentes/EJRLQgErUN8XuHNEtX81i9TmEkrnGc5Q962f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ROLLER INDUSTRIAL — hoja única
   Diseñado y desarrollado por InfinyAi · https://infinyai.com

   DIRECCIÓN DE ARTE, declarada para que no se diluya a mitad:

   ROMBO      Su logotipo ES un rombo. De ahí sale todo el sistema: la trama de
              fondo es una retícula romboidal a 45° en CSS puro (0 KB), y el
              mismo rombo hace de viñeta, de eyebrow y de marcador de familia.
              Esa trama no puede ser de otra empresa.

   PAPEL      Fondo cálido, nunca blanco puro. El blanco se lee como documento;
              el papel se lee como material impreso de calidad, que es el
              lenguaje de un catálogo industrial.

   CIFRA      Aquí el contenido son códigos: 6204 2RS C3 WWB, GSFNUR01610T3D.
              Van con cifra tabular y CERO RASGADO. En un catálogo de 4.000
              referencias, distinguir 0 de O no es un capricho tipográfico.

   Los colores NO se estiman: los calcula scripts/contraste.py leyendo este
   mismo :root en cada compilado, y el build falla si un par baja del mínimo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color de marca ───────────────────────────────────────────────────────
     #004091 es el azul REAL del logotipo, muestreado píxel a píxel sobre
     wp-content/uploads/logo.png: 2.804 px de un plano único.

     Su web usa #006fb2 en 102 sitios, pero ese es el azul del tema comercial
     «fastex» que compraron, no el suyo. La diferencia va de azul marino a azul
     cielo. Cuando el cliente diga «el corporativo», es #004091.

     Y este azul es de los pocos que no obligan a elegir: da 9,80:1 con texto
     blanco encima y 8,91:1 como texto sobre el papel. No hay que apagarlo para
     cumplir, así que --marca y --marca-on-light son el MISMO valor. Se
     mantienen los dos tokens a propósito: el día que se toque el papel o el
     azul, el sitio donde mirar ya está separado.                            */
  --marca:            #004091;
  --marca-on-light:   #004091;   /* 8,91:1 sobre papel */
  --marca-900:        #002b62;   /* topbar y pie */
  --marca-700:        #00357a;   /* superficie elevada dentro de lo oscuro */
  --marca-100:        #c3d4ee;   /* texto secundario SOBRE las bandas azules */

  /* El azul vivo NO es un segundo acento: es una variante del azul de marca, y
     sale de su propio logotipo de RLM, que va de marino a azul vivo.         */
  --marca-viva:       #006fb2;

  /* ── Acento único: el ámbar del punto de la «o» del logotipo ──────────────
     #ffc500, medido en el mismo fichero.
     Vive SOLO sobre el azul (6,18:1) o con texto oscuro encima (13,24:1).
     Sobre el papel da 1,44:1 y por eso nunca es texto sobre claro.           */
  --acento:           #ffc500;
  --acento-on-light:  #8a5a00;   /* el caso raro de ámbar como texto sobre papel */

  /* ── Neutros ──────────────────────────────────────────────────────────── */
  --papel:            #f5f4f0;   /* nunca blanco puro */
  --papel-2:          #edebe4;
  --blanco:           #ffffff;   /* superficies elevadas: tarjetas, formularios */
  --tinta:            #101a26;
  --tinta-2:          #4d5b6b;   /* texto secundario */
  --linea:            #dcd9d0;
  --linea-oscura:     rgb(195 212 238 / .18);

  /* ── Tipografía ───────────────────────────────────────────────────────────
     Saira Condensed tiene carácter técnico sin gritar. Hay veinte titulares
     por página y una Anton en cada h3 cansa a la tercera sección.            */
  --display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Ritmo ───────────────────────────────────────────────────────────────
     Mayor que los 72px del modo landing: aquí las secciones son bloques de
     contenido independientes, no una narración continua.                     */
  --seccion:   clamp(64px, 9vw, 120px);
  --ancho:     1240px;
  --ancho-txt: 74ch;
  --gutter:    clamp(18px, 4vw, 34px);

  /* ── Forma ── */
  --r-s: 6px;
  --r:   12px;
  --r-l: 18px;

  /* ── UN SOLO RITMO EN TODA LA WEB. Mezclar curvas se nota aunque nadie sepa
        decir por qué, y `ease` a secas delata la plantilla. ──────────────── */
  --curva:  cubic-bezier(.2, .65, .2, 1);
  --t-card: 400ms;   /* hover de tarjeta   */
  --t-foto: 800ms;   /* fotos              */
  --t-in:   900ms;   /* entradas al scroll */

  /* ── Sombras ──────────────────────────────────────────────────────────────
     En reposo, neutras y oscuras: solo separan del fondo. El resplandor de
     color es el premio de acercarse; puesto en reposo se lee como mancha y
     además deja de significar nada, porque ya no distingue activo de inactivo.
     Y las sombras de color son de COLOR: un elemento azul que proyecta sombra
     negra es físicamente falso. Nadie lo verbaliza y todo el mundo lo nota.  */
  --s-reposo: 0 1px 2px rgb(16 26 38 / .05), 0 8px 24px -12px rgb(16 26 38 / .18);
  --s-hover:  0 24px 50px -18px rgb(0 64 145 / .38);
  --s-alta:   0 40px 90px -28px rgb(0 43 98 / .55);
  --s-dialog: 0 40px 120px -20px rgb(0 0 0 / .55);

  --cabecera: 76px;   /* alto del header sólido, usado por scroll-margin-top */
}


/* ═══════════════════════════════════════════════════════════════════════════
   ROLLER INDUSTRIAL — bloques
   Se concatena detrás de estilos.css (tokens) al compilar: en producción sale
   UNA sola hoja. Están separados en desarrollo porque contraste.py lee el
   :root de estilos.css y no debe tener que atravesar 2.000 líneas para eso.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. BASE ═══════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  /* La cabecera es sólida y flota: sin esto un salto de ancla deja el titular
     debajo de la barra. Se mide contra el token, no contra un número suelto. */
  scroll-padding-top: calc(var(--cabecera) + 14px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  line-height: 1.65;
  /* Cifra tabular en TODA la web. El contenido de este sitio son códigos:
     6204 2RS C3 WWB, GSFNUR01610T3D. Con cifra proporcional, dos referencias
     seguidas no alinean y la lista se lee como un párrafo. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* El atributo `hidden` vale `display:none`, pero es una regla del navegador y
   CUALQUIER `display` del CSS la pisa. Pasó con las fichas de filtro: el JS
   ponía hidden, la regla `.filtros__grupo { display:flex }` ganaba y seguían
   viéndose. No da error y cuesta encontrarlo, así que se blinda una vez. */
[hidden] { display: none !important; }
a { color: inherit; }

/* FOCO. El anillo es un elemento de interfaz y la norma le pide 3:1 contra lo
   que tiene al lado. El ambar #ffc500 sobre el papel #f5f4f0 da 1,44:1 —el
   mismo calculo que ya prohibia el texto ambar sobre claro—, y ese anillo
   estaba en el 90 % de la web: quien navega con teclado no veia donde estaba.
   El azul de marca da 8,91:1 sobre papel. El ambar se queda para los fondos
   oscuros, donde da 6,18:1 y el azul no se veria.

   La lista de contextos oscuros va ENTERA. Enumerar solo dos de seis es como
   se coló la vez anterior un eyebrow a 1,64:1 sin que fallara ninguna puerta. */
:focus-visible {
  outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 3px;
}
.topbar :focus-visible,
.header :focus-visible,
.cajon :focus-visible,
.hero :focus-visible,
.banda :focus-visible,
.banda--honda :focus-visible,
.portada-doc :focus-visible,
.cookies :focus-visible,
.pie :focus-visible,
.flotantes :focus-visible {
  outline-color: var(--acento);
}
::selection { background: var(--marca); color: #fff; }

* { scrollbar-color: var(--marca) var(--papel-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--papel-2); }
::-webkit-scrollbar-thumb { background: var(--marca); border: 3px solid var(--papel-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--marca-900); }

.contenedor { width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 50%; translate: -50% -140%; z-index: 999;
  background: var(--marca); color: #fff; padding: .7rem 1.3rem;
  border-radius: 0 0 var(--r) var(--r); font-weight: 700; text-decoration: none;
  transition: translate .25s var(--curva);
}
.salta:focus { translate: -50% 0; }


/* ═══ 2. EL ROMBO — el motivo de marca ══════════════════════════════════════
   Su logotipo ES un rombo. La trama es una retícula romboidal a 45°, en CSS
   puro y cero KB, y el mismo rombo hace de viñeta, de eyebrow y de marcador de
   familia. No es una rejilla técnica genérica: sale de su marca. */

.rombos { position: relative; isolation: isolate; }
.rombos::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgb(255 255 255 / .07) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 38px);
  /* Se desvanece: una trama que llega al borde se lee como papel pautado. */
  mask-image: linear-gradient(to bottom, #000 25%, transparent 92%);
}
.rombos--claro::before {
  background-image:
    repeating-linear-gradient(45deg,  rgb(0 64 145 / .055) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-45deg, rgb(0 64 145 / .055) 0 1px, transparent 1px 38px);
}

.rombo { display: inline-block; width: .58em; height: .58em; background: currentColor; rotate: 45deg; flex: none; }

.lista-rombo { list-style: none; padding: 0; margin: 0 0 1.2em; }
/* El marcador va en ABSOLUTO, no como item flexible.
   Con `display:flex` en el <li>, cada hijo inline se convierte en item de
   flex: un `<strong>Guías y patines</strong>: diferentes…` se parte en dos
   cajas separadas por el gap, y la negrita queda colgando en su propia línea.
   Sus textos llevan negrita técnica en casi todas las viñetas, así que esto
   rompía las 14 fichas de familia a la vez. */
.lista-rombo li { position: relative; padding-left: 1.45em; margin-bottom: .55em; }
.lista-rombo li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .5em; height: .5em; background: var(--marca); rotate: 45deg;
}
.banda .lista-rombo li::before { background: var(--acento); }


/* ═══ 3. TIPOGRAFÍA ═════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700; line-height: 1.05;
  letter-spacing: -.005em; margin: 0 0 .5em; text-wrap: balance;
}

/* ESCALA. Cuatro escalones y cada uno manda sobre el siguiente.
   Antes el h1 de página interior y los h2 compartían clase, así que «VENTAJAS»
   pesaba igual que «Productos a medida» y la página no se leía: no se sabía
   qué era el título y qué era una sección. Una jerarquía que no se ve no es
   una jerarquía.
     hero     portada
     pagina   h1 de página interior   -- manda
     seccion  h2
     bloque   h3
   Acotado a propósito: aquí el titular convive con párrafo, botones y el
   buscador. Un clamp de landing rompe el pliegue en una corporativa. */
.t-hero    { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
.t-pagina  { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.t-seccion { font-size: clamp(1.45rem, 2.7vw, 2.05rem); letter-spacing: .002em; }
.t-bloque  { font-size: clamp(1.1rem, 1.75vw, 1.34rem); }

/* UNA palabra destacada por titular: dos destacados son ninguno.
   El padding/margin compensa el recorte de la última letra que produce
   background-clip:text sobre una itálica. */
.acento-txt {
  font-style: italic;
  background: linear-gradient(100deg, var(--marca) 5%, var(--marca-viva) 60%, var(--acento) 125%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .14em; margin-right: -.14em;
  white-space: nowrap;
}
/* Sobre CUALQUIER fondo azul el degradado arranca en ámbar, o desaparece.
   Medido en captura: con el degradado de fondo claro, «del almacén» quedaba
   azul marino sobre azul marino y era ilegible. La lista de contextos oscuros
   se declara ENTERA aquí: listar solo dos de los cuatro es como se cuela un
   eyebrow a 1,6:1 sin que salte ninguna puerta. */
.banda .acento-txt, .banda--honda .acento-txt, .hero .acento-txt, .pie .acento-txt {
  background: linear-gradient(100deg, var(--acento) 5%, #fff 125%);
  -webkit-background-clip: text; background-clip: text;
}

.eyebrow {
  display: flex; align-items: center; gap: .55em;
  font-family: var(--display); font-size: .95rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  /* 15px en mayúsculas con letter-spacing NO es «texto grande»: sigue
     exigiendo 4,5:1. Por eso va en el azul y nunca en el ámbar. */
  color: var(--marca-on-light); margin: 0 0 .9rem;
}
.banda .eyebrow, .pie .eyebrow { color: var(--acento); }

.entradilla { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--tinta-2); max-width: var(--ancho-txt); }
.banda .entradilla { color: var(--marca-100); }

p { margin: 0 0 1.1em; max-width: var(--ancho-txt); }
p :last-child, p:last-child { margin-bottom: 0; }

/* ── La referencia: el objeto tipográfico propio de esta web ─────────────────
   CERO RASGADO. GSFNUR01610T3D tiene cuatro ceros y hoy no se distinguen de
   una O. No es un capricho tipográfico: es lo que evita pedir otra pieza. */
.ref {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'zero' 1, 'tnum' 1;
  letter-spacing: .012em; font-weight: 600; white-space: nowrap;
}
.ref--chip {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-s); padding: .38em .68em; font-size: .92rem;
}


/* ═══ 4. RITMO ══════════════════════════════════════════════════════════════
   Dos secciones seguidas nunca comparten fondo. */

.seccion { padding-block: var(--seccion); }
.seccion--papel  { background: var(--papel); }
.seccion--blanco { background: var(--blanco); }
.seccion--alt    { background: var(--papel-2); }
.banda        { background: var(--marca); color: #fff; }
.banda--honda { background: var(--marca-900); color: #fff; }
.banda h2, .banda h3, .banda--honda h2, .banda--honda h3 { color: #fff; }


/* ═══ 5. BOTONES ════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase; text-decoration: none;
  padding: .8em 1.5em; border-radius: var(--r-s); border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--curva), box-shadow .25s var(--curva),
              background-color .25s var(--curva), border-color .25s var(--curva),
              color .25s var(--curva);
}
.btn--principal { background: var(--marca); color: #fff; box-shadow: var(--s-reposo); }   /* 9,80:1 */
.btn--acento    { background: var(--acento); color: var(--tinta); box-shadow: var(--s-reposo); } /* 11,05:1 */
.btn--fantasma  { background: transparent; color: var(--marca-on-light); border-color: var(--marca); }
/* Los CUATRO contextos oscuros, no dos. Sobre azul, el fantasma en
   --marca-on-light es azul marino sobre azul marino: invisible. */
.banda .btn--fantasma, .banda--honda .btn--fantasma,
.hero .btn--fantasma, .pie .btn--fantasma { color: #fff; border-color: rgb(255 255 255 / .55); }

@media (hover: hover) {
  /* La sombra es de COLOR y solo al acercarse. En reposo, neutra: un halo
     permanente no se lee como luz, se lee como mancha, y deja de significar
     nada porque ya no distingue el estado activo del inactivo. */
  .btn--principal:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgb(0 64 145 / .55); }
  .btn--acento:hover    { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgb(255 197 0 / .6); }
  .btn--fantasma:hover  { transform: translateY(-3px); background: var(--marca); color: #fff; border-color: var(--marca); }
  .banda .btn--fantasma:hover, .banda--honda .btn--fantasma:hover,
  .hero .btn--fantasma:hover, .pie .btn--fantasma:hover { background: #fff; color: var(--marca); border-color: #fff; }
}
.btn:active { transform: translateY(-1px); }
.grupo-btn { display: flex; flex-wrap: wrap; gap: .8rem; }


/* ═══ 6. TOPBAR + CABECERA ══════════════════════════════════════════════════
   En este sector el teléfono es el CTA real, y va arriba del todo.
   La cabecera es SÓLIDA desde el principio, al revés que en una landing: el
   visitante viene a buscar algo y necesita ver el menú desde el primer píxel. */

.topbar { background: var(--marca-900); color: var(--marca-100); font-size: .88rem; }
.topbar__fila { display: flex; align-items: center; gap: 1.4rem; min-height: 40px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; color: inherit; }
.topbar a:hover { color: var(--acento); }
.topbar__sep { flex: 1; }
.topbar__dir { display: inline-flex; align-items: center; gap: .45em; }

.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  /* Sin backdrop-filter, y es deliberado: un ancestro con backdrop-filter se
     convierte en containing block de sus descendientes position:fixed, y el
     menú móvil se ancla a la barra en vez de a la ventana. Fondo sólido, que
     además rinde mejor. */
  transition: box-shadow .3s var(--curva);
}
.header[data-scroll="true"] { box-shadow: 0 6px 22px -10px rgb(16 26 38 / .28); }
.header__fila { display: flex; align-items: center; gap: 1.2rem; min-height: var(--cabecera); }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 46px; width: auto; }

.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav__enlace {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  padding: .6em .75em; border-radius: var(--r-s); color: var(--tinta);
  transition: color .25s var(--curva), background-color .25s var(--curva);
  white-space: nowrap;
}
@media (hover: hover) { .nav__enlace:hover { color: var(--marca-on-light); background: var(--papel-2); } }
.nav__enlace[aria-current="page"] { color: var(--marca-on-light); }
/* El rombo de «estás aquí» solo en las entradas SIN desplegable: junto a la
   flecha del submenú se leen como dos adornos peleándose. */
.nav__lista > li:not(.nav__item) > .nav__enlace[aria-current="page"]::after {
  content: ""; width: .38em; height: .38em; background: var(--acento); rotate: 45deg;
}
.nav__item > .nav__enlace[aria-current="page"] { background: var(--papel-2); }

/* Desplegable de catálogo. En táctil no existe el hover: dentro del cajón
   móvil este mismo submenú se convierte en acordeón con aria-expanded. */
.nav__item { position: relative; }
.nav__caja {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--s-hover); padding: .5rem; list-style: none; margin: .35rem 0 0;
  display: none;
}
.nav__item:hover .nav__caja, .nav__item:focus-within .nav__caja { display: block; }

/* El panel PEGA con el botón: cero hueco.
   Llevaba `margin-top: .35rem` para que respirase, y esos 6 px no pertenecían
   ni al botón ni al panel. Al bajar el ratón los cruzabas, se perdía el :hover
   y el desplegable se cerraba antes de que pudieras pinchar. Medido: el botón
   acababa en 101 px y el panel empezaba en 107.

   Se intentó puentear el hueco con un `::after` bajo `:hover`, y NO funciona:
   el puente solo existe mientras hay hover, o sea que desaparece justo en el
   momento en que hace falta. Es circular.

   Un desplegable pegado a su disparador es lo normal y no hay hueco que
   cruzar. La separación visual la da la sombra. */
.nav__caja { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.nav__caja a {
  display: flex; align-items: center; gap: .6em; padding: .55em .7em;
  border-radius: var(--r-s); text-decoration: none; font-weight: 500;
}
@media (hover: hover) { .nav__caja a:hover { background: var(--papel-2); color: var(--marca-on-light); } }

.header__cta { flex: none; padding: .68em 1.15em; font-size: .98rem; }

/* Selector de idioma: control segmentado. Tres enlaces sueltos se leen como
   menú y no se ve cuál está activo. */
.idiomas { display: inline-flex; gap: 2px; background: rgb(255 255 255 / .12); border-radius: 999px; padding: 3px; }
.idiomas a {
  padding: .18em .6em; border-radius: 999px; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-decoration: none; color: var(--marca-100);
  transition: background-color .25s var(--curva), color .25s var(--curva);
}
.idiomas a[aria-current="true"] { background: var(--acento); color: var(--tinta); }
@media (hover: hover) { .idiomas a:not([aria-current]):hover { background: rgb(255 255 255 / .16); color: #fff; } }

.hamburguesa {
  display: none; margin-left: auto; background: transparent; border: 1px solid var(--linea);
  border-radius: var(--r-s); padding: .55em; cursor: pointer; color: var(--tinta);
}


/* ═══ 7. CAJÓN MÓVIL ════════════════════════════════════════════════════════
   Cerrado con display:none, NUNCA con translateX(100%). Sacarlo fuera de
   pantalla con transform es la receta habitual y es la que garantiza
   desbordamiento horizontal el día que algo salga mal. Con display:none no hay
   overflow posible. La animación de entrada va en @keyframes, así el elemento
   nunca existe fuera de la ventana. */

.cajon { display: none; position: fixed; inset: 0; z-index: 90; background: var(--marca-900); color: #fff; }
.cajon.abierto { display: flex; flex-direction: column; animation: cajonEntra .35s var(--curva); }
@keyframes cajonEntra { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
.cajon__cab { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); border-bottom: 1px solid var(--linea-oscura); }
.cajon__cuerpo { overflow-y: auto; padding: 1.2rem var(--gutter) 2rem; flex: 1; }
.cajon a { display: block; padding: .75em 0; text-decoration: none; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--linea-oscura); }
.cajon__acordeon > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; border-bottom: 1px solid var(--linea-oscura);
  color: inherit; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase;
  letter-spacing: .05em; padding: .75em 0; cursor: pointer;
}
.cajon__acordeon > button svg { transition: rotate .3s var(--curva); }
.cajon__acordeon > button[aria-expanded="true"] svg { rotate: 180deg; }
.cajon__sub { display: none; padding-left: 1rem; }
.cajon__acordeon > button[aria-expanded="true"] + .cajon__sub { display: block; }
.cajon__sub a { font-size: 1.05rem; font-family: var(--texto); text-transform: none; letter-spacing: 0; }
.cerrar-cajon { background: transparent; border: 0; color: inherit; cursor: pointer; padding: .4em; }
@media (hover: hover) { .cerrar-cajon:hover svg { rotate: 90deg; } }
.cerrar-cajon svg { transition: rotate .3s var(--curva); }


/* ═══ 8. TARJETAS ═══════════════════════════════════════════════════════════
   La tarjeta ENTERA se adelanta al pasar el ratón, nunca solo su botón:
   obligar a apuntar mata el efecto. El área sensible es toda la tarjeta. */

.rejilla { display: grid; gap: 18px; }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }

.tarjeta {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--s-reposo);
  transition: transform var(--t-card) var(--curva), box-shadow var(--t-card) var(--curva),
              border-color var(--t-card) var(--curva);
}
.tarjeta__cuerpo { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__titulo { font-family: var(--display); font-size: 1.28rem; margin: 0 0 .35rem; }
.tarjeta__txt { color: var(--tinta-2); font-size: .96rem; margin: 0; }
.tarjeta__pie { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; gap: .5em; color: var(--marca-on-light); font-weight: 600; }
.tarjeta__pie svg { transition: translate .3s var(--curva); }

/* Foco radial de marca escondido en la esquina: pasa de 0 a 1 al acercarse.
   En reposo no está puesto — el resplandor es el premio del hover. */
.tarjeta::before {
  content: ""; position: absolute; inset: -40% -40% auto auto;
  width: 80%; height: 80%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(0 111 178 / .16), transparent 68%);
  opacity: 0; transition: opacity var(--t-card) var(--curva);
}

@media (hover: hover) {
  .tarjeta:hover {
    transform: translateY(-8px);
    border-color: rgb(0 64 145 / .45);
    box-shadow: var(--s-hover);
  }
  .tarjeta:hover::before { opacity: 1; }
  .tarjeta:hover .tarjeta__pie svg { translate: 5px 0; }

  /* La DESTACADA no hace lo mismo que sus vecinas: se ACERCA.
     Escala desde el centro, SIN translateY, y la sombra crece y se difumina
     con ella — que es lo que hace un objeto al aproximarse. Mezclar subida y
     escala da un movimiento en diagonal que no se lee ni como una cosa ni como
     la otra. */
  .tarjeta--destacada { transform: scale(1.03); z-index: 2; }
  .tarjeta--destacada:hover {
    transform: scale(1.08);
    border-color: rgb(0 64 145 / .85);
    box-shadow: 0 0 0 1px rgb(0 64 145 / .5), 0 40px 90px -24px rgb(0 43 98 / .95);
  }
}

/* Tarjeta de lista/contacto: se desplaza de LADO, no hacia arriba. En una
   columna, subir una tarjeta la despega de sus vecinas. */
.tarjeta--fila { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.15rem; }
@media (hover: hover) {
  .tarjeta--fila:hover { transform: translateX(8px); }
}


/* ═══ 9. LOGOS DE MARCA ═════════════════════════════════════════════════════
   Nueve logos de nueve colores distintos se pelean entre sí. El gris los
   unifica y el hover les devuelve la vida. Y se sirven al tamaño real de
   pintado: un WebP de 800×800 dibujado a 54×54 es 14,8× de sobremuestreo. */

.marca-celda {
  display: grid; place-items: center; padding: 1.1rem 1.3rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  filter: grayscale(1); opacity: .78;
  transition: filter .3s var(--curva), opacity .3s var(--curva),
              transform .3s var(--curva), box-shadow .3s var(--curva);
}
.marca-celda img { max-height: 46px; width: auto; object-fit: contain; }
@media (hover: hover) {
  .marca-celda:hover { filter: none; opacity: 1; transform: translateY(-4px); box-shadow: var(--s-hover); }
}

.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__pista { display: flex; gap: 3rem; width: max-content; animation: corre 26s linear infinite; }
@media (hover: hover) { .marquee:hover .marquee__pista { animation-play-state: paused; } }
@keyframes corre { from { translate: 0 0; } to { translate: -50% 0; } }


/* ═══ 10. PORTADA DE DOCUMENTO ══════════════════════════════════════════════
   Una portada de catálogo es un objeto con proporción propia: se ve ENTERA.
   El drop-shadow la despega y la hace leer como objeto físico.
   OJO: filter:drop-shadow crea contexto de apilado, así que la insignia
   necesita z-index explícito o queda por debajo de la imagen. */

.cat-tarjeta { position: relative; }
.cat-tarjeta__portada {
  aspect-ratio: 3 / 3.4; display: grid; place-items: center; padding: 22px;
  background: linear-gradient(160deg, #fff, var(--papel-2));
  border-bottom: 1px solid var(--linea);
}
.cat-tarjeta__portada img {
  max-height: 100%; width: auto; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgb(0 43 98 / .2));
}
.cat-tarjeta__insignia {
  position: absolute; top: 12px; right: 12px; z-index: 3;   /* ← el z-index del drop-shadow */
  background: var(--acento); color: var(--tinta);
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .28em .6em; border-radius: var(--r-s);
}


/* ═══ 11. FLOTANTES ═════════════════════════════════════════════════════════
   Apilados en UNA columna: dos flotantes por separado acaban solapándose.
   Y se apartan de la barra de cookies sin JS, con :has() y una medida real. */

.flotantes {
  position: fixed; right: clamp(12px, 3vw, 26px); bottom: clamp(12px, 3vw, 26px);
  z-index: 70; display: flex; flex-direction: column; gap: 12px;
  transition: translate .3s var(--curva);
}
body:has(.cookies:not([hidden])) .flotantes { translate: 0 calc(-1 * var(--alto-cookies, 72px)); }

/* Escondidos mientras se ve la primera pantalla en movil. Lo pone y lo quita
   interfaz.js segun el desplazamiento: en CSS solo no se puede saber si se
   ha pasado el pliegue. Se va con opacidad y no con display para que la
   aparicion no de un salto. */
.flotantes--esperando {
  opacity: 0; pointer-events: none; translate: 0 12px;
  transition: opacity .3s var(--curva), translate .3s var(--curva);
}
/* En móvil el aviso ocupa el triple y apartarse de él sube el flotante 200 px:
   medido, aterriza justo encima del CTA de la portada. Mientras el aviso está,
   el flotante no se enseña — el teléfono ya está en la barra de arriba, y el
   aviso se quita de un toque. Tapar la llamada a la acción es peor que no
   tener botón flotante durante tres segundos. */
@media (max-width: 640px) {
  body:has(.cookies:not([hidden])) .flotantes { display: none; }
}

.flota {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 0; cursor: pointer; text-decoration: none;
  /* Sombra NEUTRA en reposo. El neón solo al acercarse. */
  box-shadow: 0 10px 26px rgb(16 26 38 / .3);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva), background-color .3s var(--curva);
}
.flota--wa  { background: #25d366; color: #fff; }          /* su verde oficial */
.flota--tel { background: var(--marca); color: #fff; }
.flota--arriba { background: var(--marca-900); color: var(--acento); border: 1px solid rgb(255 197 0 / .35); }
@media (hover: hover) {
  .flota--wa:hover  { transform: scale(1.1) rotate(6deg); box-shadow: 0 0 26px rgb(37 211 102 / .55); }
  .flota--tel:hover { transform: scale(1.1) rotate(6deg); box-shadow: 0 0 26px rgb(0 111 178 / .55); }
  .flota--arriba:hover { transform: translateY(-3px); box-shadow: 0 0 24px rgb(255 197 0 / .45); }
}
.flota--arriba[hidden] { display: none; }


/* ═══ 12. COOKIES ═══════════════════════════════════════════════════════════
   Barra de UNA línea pegada abajo, nunca una tarjeta centrada: una tarjeta se
   come el CTA de la portada. Y mide su propio alto y lo publica como token,
   porque un valor fijo falla en móvil, donde la barra mide el doble. */

.cookies { position: fixed; inset: auto 0 0 0; z-index: 80; background: var(--marca-900); color: var(--marca-100); }
.cookies__caja { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .85rem var(--gutter); }
.cookies p { margin: 0; font-size: .9rem; max-width: 78ch; }
.cookies a { color: var(--acento); }


/* ═══ 13. ENTRADA AL SCROLL ═════════════════════════════════════════════════
   Anima `translate`, la propiedad individual, NUNCA `transform`.
   `.js .reveal.is-visible` tiene especificidad (0,3,0) y `.tarjeta:hover`
   (0,2,0): con `transform`, el `transform:none` de la entrada GANA y anula
   todos los hover en silencio. No hay error, no hay aviso: simplemente no pasa
   nada. `translate` y `transform` son propiedades distintas y se componen.

   Y el contenido no puede depender de la animación: la clase `.js` la pone un
   script síncrono. Sin JS, todo visible. */

.js .reveal {
  opacity: 0; translate: 0 34px;
  transition: opacity var(--t-in) var(--curva), translate var(--t-in) var(--curva);
  transition-delay: calc(var(--d, 0) * 120ms);
}
.js .reveal[data-d="1"] { --d: 1; }
.js .reveal[data-d="2"] { --d: 2; }
.js .reveal[data-d="3"] { --d: 3; }
.js .reveal.is-visible { opacity: 1; translate: none; }


/* ═══ 14. RESPONSIVE — tres cortes, cada uno con un trabajo ═════════════════ */

@media (max-width: 1080px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* La cabecera se descompone en DOS pasos, no en uno.
   Medido con las siete entradas: logotipo + menú + botón necesitan 1.158 px, y
   el botón se lleva 168 de ellos. Si todo cayera a la vez a 900 px, entre 900
   y 1.280 la cabecera desbordaría en horizontal — y 17 px de desbordamiento no
   cantan en una captura pero sacan barra a toda la página.

   Primero cae el BOTÓN, que es lo que menos se pierde: el teléfono está en la
   barra de arriba y cada página termina en una llamada a la acción. La
   navegación aguanta hasta que ya no cabe de verdad. */
@media (max-width: 1279px) {
  .header__cta { display: none; }
}

@media (max-width: 1059px) {
  /* Ahora sí: entran hamburguesa y cajón. */
  .nav { display: none; }
  .hamburguesa { display: grid; place-items: center; }
  .logo img { height: 40px; }
}

@media (max-width: 640px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .rejilla--3 > :last-child:nth-child(odd) { grid-column: auto; }
  /* LA BARRA SUPERIOR, EN DOS COLUMNAS.
     En una sola fila envuelta ocupaba 77 px: telefono y correo arriba, y los
     idiomas cayendo a una tercera linea ellos solos. Apilando los dos datos a
     la izquierda y poniendo los idiomas a la derecha, ocupando las dos filas,
     se recupera esa altura sin quitar nada.

     Se coloca cada hijo a mano y no por orden: en el marcado van telefono,
     correo, direccion, separador e idiomas, y el separador solo existe para
     empujar en escritorio. */
  .topbar__fila {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: .2rem .9rem; min-height: 0;
    padding-block: .45rem;
  }
  .topbar__fila > a:nth-of-type(1) { grid-column: 1; grid-row: 1; }   /* teléfono */
  .topbar__fila > a:nth-of-type(2) { grid-column: 1; grid-row: 2; }   /* correo */
  /* Area tactil de 39 px sin que la barra crezca ni un pixel: el relleno se
     compensa con margen negativo, asi que el dedo tiene donde caer y la caja
     sigue midiendo lo mismo. El texto son 23 px y el minimo recomendado son
     44: aqui se llega a 39, que en un enlace de una linea con el icono
     delante es lo que da de si sin separar las dos filas. */
  .topbar__fila > a { padding-block: .5rem; margin-block: -.5rem; }
  .topbar .idiomas { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  /* La dirección se va: es el único dato que no se pulsa, y el que menos
     falta hace en un móvil. El separador tampoco pinta nada en una rejilla. */
  .topbar__dir, .topbar__sep { display: none; }
  .btn { width: 100%; }
  .grupo-btn .btn { width: auto; flex: 1 1 12rem; }
}


/* ═══ 15. ACCESIBILIDAD DE MOVIMIENTO ═══════════════════════════════════════
   Siempre al final. Y resetea `translate` ADEMÁS de `transform`: desde que la
   entrada anima `translate`, apagar solo `transform` deja los bloques
   desplazados. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: none; transform: none; }
}

/* Impresión: el contenido nunca desaparece. */
@media print {
  .js .reveal { opacity: 1 !important; translate: none !important; transform: none !important; }
  .topbar, .header, .cajon, .flotantes, .cookies, .marquee { display: none !important; }
  body { background: #fff; }
}


/* ═══ 15. AVISO DE FORMULARIO ═══════════════════════════════════════════════
   Lo que se ve despues de pulsar Enviar. Antes no habia nada que ver: el
   navegador hacia POST contra la propia URL y nginx devolvia un 405 en crudo. */

.form-aviso {
  margin: 1em 0 0; padding: .9em 1.15em .9em 2.5em; position: relative;
  border-radius: var(--r-s); font-size: .95rem; line-height: 1.5;
}
.form-aviso::before {
  content: ""; position: absolute; left: 1.1em; top: 1.45em;
  width: 8px; height: 8px; rotate: 45deg; background: currentColor;
}
.form-aviso--bien {
  background: rgb(26 127 75 / .1); border: 1px solid rgb(26 127 75 / .35);
  color: #14603a;                                   /* 6,4:1 sobre ese fondo */
}
.form-aviso--mal {
  background: rgb(154 43 31 / .09); border: 1px solid rgb(154 43 31 / .35);
  color: #8a2419;
}
.form-aviso[hidden] { display: none; }

/* Trampa para robots. Fuera de la pantalla, NO con display:none: hay robots
   que saltan lo que esta oculto y este campo tiene que parecerles rellenable.
   Para quien navega con teclado o lector queda fuera con tabindex y aria. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════════
   EL BUSCADOR — la firma
   Vive DENTRO de la banda azul del hero. Es lo único que se permite gritar en
   toda la página: alrededor, todo callado.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--marca-900) 0%, var(--marca) 58%, var(--marca-viva) 140%);
  color: #fff;
  padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(2.2rem, 5vw, 3.6rem);
  overflow: hidden;
}
.hero__fila { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* `min-width: 0` NO sobra. Un hijo de rejilla trae `min-width: auto`, o sea que
   no baja de su ancho MINIMO DE CONTENIDO por mucho que la columna diga `1fr`.
   Con las fichas de familia y las filas de resultados dentro, ese minimo son
   452 px, y en un movil de 375 la caja del buscador se salia 95 px por la
   derecha.

   Y no salia ninguna barra horizontal, porque el `.hero` lo recortaba: la
   pagina medía 365 y parecia sana. Es exactamente la trampa de buscar «quien
   desborda» y quedarse con un elemento que ya esta dentro de algo que corta.
   Se ve midiendo scrollWidth contra clientWidth, no mirando. */
.hero__fila > * { min-width: 0; }
.hero h1 { margin-bottom: .35em; }
.hero__pildora {
  display: inline-flex; align-items: center; gap: .55em;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px; padding: .34em .95em; margin-bottom: 1.15rem;
  font-family: var(--display); font-size: .92rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento);
}
.hero .entradilla { color: var(--marca-100); margin-bottom: 1.6rem; }

/* ── La caja ─────────────────────────────────────────────────────────────── */

.buscador {
  position: relative;
  background: var(--blanco); color: var(--tinta);
  border-radius: var(--r-l);
  box-shadow: 0 40px 90px -28px rgb(0 20 50 / .7);
  padding: 1.15rem 1.15rem 1.25rem;
}
.buscador__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.buscador__cab label { font-family: var(--display); font-size: 1.12rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.buscador__total { font-size: .86rem; color: var(--tinta-2); }

.buscador__campo {
  display: flex; align-items: center; gap: .65rem;
  border: 2px solid var(--linea); border-radius: var(--r-s);
  padding: .1rem .85rem; background: var(--papel);
  transition: border-color .25s var(--curva), box-shadow .25s var(--curva);
}
.buscador__campo:focus-within { border-color: var(--marca); box-shadow: 0 0 0 4px rgb(0 64 145 / .13); }
.buscador__campo input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: .8rem 0;
  font-family: var(--texto); font-size: 1.12rem; color: var(--tinta);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'zero' 1, 'tnum' 1;
}
.buscador__campo input:focus { outline: none; }
.buscador__campo svg { color: var(--marca); flex: none; }

/* ── Filtros: fichas, no desplegables ─────────────────────────────────────
   Los dos <select> de su web son justo lo que hay que jubilar. */
.filtros { margin-top: .8rem; }
.filtros__grupo { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.filtros__et { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); font-weight: 700; margin-right: .3rem; align-self: center; }
.ficha {
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta-2);
  border-radius: 999px; padding: .26em .72em; font-size: .84rem; font-family: var(--texto);
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva);
}
.ficha[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
@media (hover: hover) { .ficha:not([aria-pressed="true"]):hover { border-color: var(--marca); color: var(--marca-on-light); } }

/* ── Resultados ──────────────────────────────────────────────────────────── */

.buscador__lista {
  list-style: none; margin: .85rem 0 0; padding: 0;
  max-height: 46vh; overflow-y: auto;
  border-top: 1px solid var(--linea);
}
.bres {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: .8rem; align-items: center;
  padding: .62rem .3rem; border-bottom: 1px solid var(--linea); cursor: pointer;
  /* 44 px de alto mínimo: es una tablet de taller, no un ratón. */
  min-height: 44px;
}
.bres__ref { font-size: 1rem; }
.bres__meta { font-size: .8rem; color: var(--tinta-2); white-space: nowrap; }
.bres__add {
  width: 30px; height: 30px; border-radius: var(--r-s); border: 1px solid var(--linea);
  background: var(--papel); color: var(--marca-on-light); font-size: 1.15rem; line-height: 1;
  cursor: pointer; flex: none;
}
.bres[aria-selected="true"] { background: rgb(0 64 145 / .07); }
.bres[aria-selected="true"] .bres__add { background: var(--marca); color: #fff; border-color: var(--marca); }
@media (hover: hover) { .bres:hover { background: rgb(0 64 145 / .05); } }
.bres--mas { display: block; text-align: center; color: var(--tinta-2); font-size: .85rem; cursor: default; border-bottom: 0; }
.bres--mas:hover { background: transparent; }

.bvacio { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linea); font-size: .95rem; }
.bvacio p { margin-bottom: .6em; }
.bvacio .ref { background: var(--papel-2); padding: .12em .4em; border-radius: 4px; }
.bvacio__pista { color: var(--marca-on-light); font-weight: 600; }
.bvacio__btn { margin-right: .5rem; margin-top: .3rem; font-size: .9rem; padding: .55em 1em; }

/* ── Cesta ───────────────────────────────────────────────────────────────── */

.cesta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.cesta__item {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-s);
  padding: .3em .3em .3em .65em; font-size: .9rem;
}
.cesta__quitar { border: 0; background: transparent; cursor: pointer; color: var(--tinta-2); font-size: 1.1rem; line-height: 1; padding: 0 .25em; }
@media (hover: hover) { .cesta__quitar:hover { color: #b3261e; } }

/* ── Sin JavaScript ────────────────────────────────────────────────────────
   El catálogo completo va en el HTML servido, en <details> por familia. Se
   oculta SOLO cuando el buscador funciona; nunca al revés. Y de paso lo indexa
   Google, que hoy no ve ni una referencia porque viven tras una query. */
.catalogo-plano { margin-top: var(--seccion); }
html.buscador-ok .catalogo-plano { display: none; }

@media (max-width: 900px) {
  .hero__fila { grid-template-columns: 1fr; }
}

/* Y dentro de la caja, lo que de verdad pide ese ancho minimo: las fichas de
   filtro y las filas de resultados, que llevan nombres largos —«Husillos y
   tuercas de precision»— sin punto de corte. En movil se dejan partir. */
@media (max-width: 620px) {
  .buscador { padding: .95rem .9rem 1.05rem; }
  .bres { min-width: 0; }
  .bres__txt, .bres .ref { overflow-wrap: anywhere; min-width: 0; }
  .buscador__cab { flex-wrap: wrap; gap: .25rem .8rem; }

  /* Las 14 familias y las 9 marcas, envueltas, ocupaban 260 px de alto: los
     resultados quedaban fuera de pantalla en un movil de 667, y dos fichas
     acababan debajo de los botones flotantes, sin poder pulsarlas.
     Una linea por grupo, que se desliza con el dedo. Se ve que hay mas por el
     degradado del borde derecho, que es la unica pista honesta: una fila que
     se corta en seco no parece deslizable. */
  .filtros__grupo {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: .2rem;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .filtros__grupo::-webkit-scrollbar { display: none; }
  .filtros__grupo .ficha { flex: none; }
  /* El rotulo se queda pegado a la izquierda mientras las fichas pasan por
     debajo: con dos filas de fichas y sin rotulo a la vista no hay forma de
     saber si lo que estas mirando son familias o marcas.
     Y NADA de `scroll-snap`: con el puesto, el navegador ajustaba al cargar y
     dejaba el rotulo fuera de pantalla —medido, scrollLeft 70— que es justo lo
     contrario de lo que se busca. */
  .filtros__et {
    flex: none; position: sticky; left: 0; z-index: 1;
    background: var(--blanco); padding-right: .5rem;
    box-shadow: 6px 0 6px -4px var(--blanco);
  }

  /* Y el hilo de resultados no se mete debajo de los flotantes. */
  .buscador__lista { max-height: 46vh; }
}

/* ── La cesta, dentro de la caja del buscador ──────────────────────────────
   Antes solo existía en la página de presupuesto, así que en la portada el
   botón «+» añadía la referencia y no pasaba nada visible. La señal de que
   una acción ha funcionado tiene que estar donde se hace la acción. */
.cesta-bar {
  margin-top: .85rem; padding: .8rem .9rem;
  background: var(--papel-2);
  border: 1px solid var(--marca);
  border-radius: var(--r-s);
}
.cesta-bar__cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.cesta-bar__t { font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cesta-bar__n {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em;
  padding: 0 .35em; margin-left: .3em; border-radius: 999px;
  background: var(--marca); color: #fff; font-size: .82rem;
}
.cesta-bar__cta { padding: .5em 1em; font-size: .9rem; }
.cesta-bar .cesta { max-height: 120px; overflow-y: auto; }

/* Una referencia ya añadida se ve sin bajar a la cesta. */
.bres--dentro { background: rgb(0 64 145 / .06); }
.bres--dentro .bres__add { background: var(--marca); color: #fff; border-color: var(--marca); }

/* Descarga del CAD junto a la referencia. En un catálogo industrial es de lo
   que más se usa: el proyectista se lo lleva al SolidWorks y deja de buscar
   otro proveedor. Su web los tiene y nosotros no los teníamos. */
.bres__cad {
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-decoration: none; white-space: nowrap;
  color: var(--marca-on-light); border: 1px solid var(--linea);
  border-radius: var(--r-s); padding: .22em .55em; background: var(--blanco);
}
@media (hover: hover) {
  .bres__cad:hover { background: var(--marca); color: #fff; border-color: var(--marca); }
}


/* Aviso de cesta vacia. Es una instruccion, no un error: por eso va en el azul
   de marca y no en rojo, y con el rombo delante como el resto de las guias. */
.cesta-vacia {
  margin: 0 0 1.4em; padding: .85em 1.1em .85em 2.4em; position: relative;
  background: rgb(0 64 145 / .06); border: 1px dashed rgb(0 64 145 / .3);
  border-radius: var(--r-s); color: var(--tinta-2); font-size: .94rem;
  max-width: 62ch;
}
.cesta-vacia::before {
  content: ""; position: absolute; left: 1.05em; top: 1.35em;
  width: 8px; height: 8px; rotate: 45deg; background: var(--marca);
}
.cesta-vacia strong { color: var(--marca-on-light); }
.cesta-vacia[hidden] { display: none; }

/* Los campos de quien pide el presupuesto, en dos columnas: nombre y empresa
   arriba, correo y telefono debajo. En movil, una. */
.form-rejilla {
  display: grid; gap: 0 16px; margin-top: 1em;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.form-pres { max-width: 62ch; }


/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUES DE PÁGINA — cabeceras internas, prosa, fichas, opiniones y pie
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera de página interna ─────────────────────────────────────────── */
.cabecera-pagina {
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(1.6rem, 4vw, 2.6rem);
}
.cabecera-pagina h1 { margin: 0; }

.migas { font-size: .86rem; color: var(--tinta-2); margin-bottom: .9rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: .4em; color: var(--linea); }
.migas a { text-decoration: none; }
@media (hover: hover) { .migas a:hover { color: var(--marca-on-light); text-decoration: underline; } }

/* ── Prosa ──────────────────────────────────────────────────────────────── */
.prosa > :first-child { margin-top: 0; }
.prosa h2 { margin-top: 1.6em; }
.prosa h2:first-child { margin-top: 0; }
.prosa strong { color: var(--tinta); font-weight: 600; }

.cols-2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.ficha-lat { display: flex; flex-direction: column; gap: .7rem; position: sticky; top: calc(var(--cabecera) + 18px); }
.ficha-lat .btn { width: 100%; }
.marca-grande {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 1rem; width: 100%; height: auto; object-fit: contain;
}

/* ── Chips de referencia ────────────────────────────────────────────────── */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 0; padding: 0; }
/* Las 5.565 referencias del listado son ENLACES a su familia desde que dejaron
   de ser `<span>` sueltos. Se pintan igual que antes —una ficha, no un enlace
   subrayado en azul— porque 5.565 enlaces con aspecto de enlace serian una
   mancha; el color de marca y el subrayado aparecen al pasar por encima. */
.chips a.ref {
  display: inline-block; text-decoration: none; color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-s); padding: .3em .6em; font-size: .9rem;
  transition: border-color .3s var(--curva), color .3s var(--curva);
}
@media (hover: hover) {
  .chips a.ref:hover { border-color: var(--marca); color: var(--marca-on-light); }
}
.chips a.ref:focus-visible { color: var(--marca-on-light); }
.ref-mas { margin-top: 1rem; color: var(--tinta-2); font-size: .94rem; }
.ref-mas a { color: var(--marca-on-light); font-weight: 600; }

/* ── Opiniones ───────────────────────────────────────────────────────────
   Literales y sin traducir: van con lang="es" en los tres idiomas. */
.opinion {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 1.2rem 1.3rem; margin: 0; box-shadow: var(--s-reposo);
  display: flex; flex-direction: column; gap: .8rem;
  transition: transform var(--t-card) var(--curva), box-shadow var(--t-card) var(--curva);
}
.opinion::before {
  content: ""; width: .7rem; height: .7rem; background: var(--acento); rotate: 45deg;
}
.opinion p { font-size: .97rem; margin: 0; }
.opinion cite { font-style: normal; font-weight: 600; color: var(--tinta-2); font-size: .88rem; margin-top: auto; }
@media (hover: hover) { .opinion:hover { transform: translateY(-6px); box-shadow: var(--s-hover); } }

/* ── Banda de cierre ─────────────────────────────────────────────────────
   En este sector el teléfono convierte más que un formulario, y va a tamaño
   de titular. */
.tel-grande { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.4rem); margin: .2em 0 .6em; }
.tel-grande a { text-decoration: none; color: var(--acento); }
@media (hover: hover) { .tel-grande a:hover { color: #fff; } }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { padding-top: clamp(2.4rem, 6vw, 4rem); }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: clamp(1.4rem, 3vw, 2.6rem); }
.pie__rejilla ul { list-style: none; margin: 0; padding: 0; }
.pie__rejilla li { margin-bottom: .35em; }
.pie a { text-decoration: none; color: var(--marca-100); }
@media (hover: hover) { .pie a:hover { color: var(--acento); } }
.pie p { color: var(--marca-100); font-size: .93rem; }
.pie__t { font-family: var(--display); font-size: 1.06rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: .7rem; }
/* SU logotipo enmarcado en baldosa clara: sobre el pie oscuro, un logotipo de
   tinta azul es invisible, y recolorearlo sería cambiarle la marca. */
.pie__marca {
  display: inline-block; background: var(--blanco); border-radius: var(--r);
  padding: .7rem .9rem; margin-bottom: .9rem;
}
.pie__marca img { height: 44px; width: auto; }
.pie__red { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linea-oscura); border-radius: var(--r-s); color: var(--marca-100); }
@media (hover: hover) { .pie__red:hover { color: var(--acento); border-color: var(--acento); } }

.pie__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 13px;
  flex-wrap: wrap; margin-top: clamp(1.8rem, 4vw, 2.8rem);
  padding: 1.1rem 0; border-top: 1px solid var(--linea-oscura);
  font-size: .86rem; color: var(--marca-100);
}
/* La firma va en la MISMA línea del copyright, nunca en un renglón propio:
   no puede costarle altura al pie ni partirlo en tres bandas. El gap de los
   enlaces legales está apretado a 13 px para que quepa todo en una línea. */
/* La firma no se parte «InfinyAi» por la mitad, pero SÍ puede bajar de línea
   entera. Con `nowrap` a secas medía 248 px pegados al copyright y sacaba
   barra horizontal a la página en pantallas de 320. */
.pie__firma { display: inline-block; }
.pie__firma a { white-space: nowrap; }
.pie__firma a { color: var(--acento); font-weight: 600; }
.pie__legal-nav { display: flex; gap: 13px; flex-wrap: wrap; }

/* ── Formulario ──────────────────────────────────────────────────────────── */
.form-pres { display: grid; gap: .7rem; max-width: 640px; margin-top: 1.2rem; }
.form-pres label { font-weight: 600; font-size: .92rem; }
.form-pres textarea {
  width: 100%; border: 2px solid var(--linea); border-radius: var(--r-s);
  padding: .7rem .85rem; font-family: var(--texto); font-size: 1rem;
  background: var(--blanco); color: var(--tinta); resize: vertical;
}
.form-pres textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px rgb(0 64 145 / .13); }
.form-pres .btn { justify-self: start; }

/* ── Catálogo plano (sin JS) ─────────────────────────────────────────────── */
.catalogo-plano details {
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--blanco); padding: .8rem 1rem; margin-bottom: .6rem;
}
.catalogo-plano summary { font-family: var(--display); font-size: 1.15rem; cursor: pointer; }
.catalogo-plano summary span { color: var(--tinta-2); font-family: var(--texto); font-size: .9rem; }

@media (max-width: 900px) {
  .cols-2 { grid-template-columns: 1fr; }
  .ficha-lat { position: static; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pie__rejilla { grid-template-columns: 1fr; }
  .pie__legal { justify-content: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FICHAS DE MARCA Y DE FAMILIA

   Su versión gana a la primera mía por una razón concreta: enseña la FOTO DEL
   PRODUCTO. El bodegón de materiales de Railko explica lo que es un
   antifricción mejor que los tres párrafos que tiene al lado. Aquí la foto es
   el elemento grande de la columna derecha, no un adorno.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subtítulo de la ficha. Su plantilla lo trae como un párrafo en negrita
   suelto; es el subtítulo y se pinta como tal. */
.ficha-sub {
  color: var(--marca-on-light);
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--linea);
}

.ficha-acciones { margin-top: 1.6rem; }
.ficha-lat { gap: .9rem; }

/* La foto, enmarcada y con la proporción del recorte que hace imagenes.py:
   4/3 aquí y 4/3 en el fichero, así el navegador no vuelve a recortar encima
   de lo ya recortado. */
.foto-producto {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--blanco);
  box-shadow: var(--s-reposo);
}
.foto-producto img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* Baldosa clara para el logotipo de la marca: nueve logotipos de nueve colores
   distintos necesitan un fondo neutro que los iguale. Se ve ENTERO (contain):
   un logotipo es un objeto con proporción propia y no se recorta jamás. */
.marca-tarjeta {
  display: grid; place-items: center;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 1.1rem 1.3rem; min-height: 96px;
}
.marca-tarjeta img { max-height: 62px; width: auto; object-fit: contain; }
.marca-mini { max-height: 30px; width: auto; object-fit: contain; margin-right: .7rem; }

.ficha-fams { display: flex; flex-direction: column; gap: .5rem; }
.ficha-fams .tarjeta--fila { margin: 0; }

/* Aviso de dato pendiente. Se RETIRA en cuanto el cliente confirme: un aviso
   caducado en pantalla hace dudar de todos los demás datos. */
.aviso-pendiente {
  border-left: 4px solid var(--acento);
  background: #fff8e1;
  padding: .9rem 1.1rem;
  border-radius: var(--r-s);
  margin-bottom: 1.6rem;
  font-size: .93rem;
}
.aviso-pendiente p { margin-bottom: .4em; }
.aviso-pendiente ul { margin: 0; padding-left: 1.2em; }

@media (max-width: 900px) {
  .foto-producto { max-width: 520px; }
}

/* ── Contacto y Nosotros ─────────────────────────────────────────────────── */
.form-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; margin: 0; max-width: none; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo input, .campo textarea {
  border: 2px solid var(--linea); border-radius: var(--r-s); padding: .65rem .8rem;
  font-family: var(--texto); font-size: 1rem; background: var(--blanco); color: var(--tinta);
}
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px rgb(0 64 145 / .13);
}
.consent label { flex-direction: row; display: flex; gap: .6em; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.consent input { width: 1.1em; height: 1.1em; margin-top: .25em; flex: none; }

.sede { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.sede p { font-size: .94rem; margin-bottom: .5em; }
.delegaciones { font-size: .92rem; color: var(--tinta-2); }
.seccion--mapa { line-height: 0; }
.mapa { width: 100%; height: clamp(280px, 42vh, 440px); border: 0; display: block; }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.cifra { display: flex; flex-direction: column; gap: .2rem; position: relative; }
.cifra__n { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--acento); line-height: 1; }
.cifra__t { font-size: .95rem; color: var(--marca-100); }
/* En absoluto quedaba pegado a la cifra de la columna siguiente y parecía
   avisar de la que no era. En línea, avisa de la suya y de ninguna más. */
.cifra__av { color: var(--acento); font-size: .95rem; cursor: help; margin-left: .4em; }
.cifras__nota { font-size: .82rem; color: var(--marca-100); margin-top: 1.2rem; opacity: .85; }

.equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.persona { display: flex; align-items: center; gap: .9rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: .9rem 1rem; font-size: .93rem; }
/* Sin retrato: sus fotos publicadas son de 150x150 px e inservibles. Las
   iniciales sobre el rombo de marca quedan bien y no delatan la carencia. */
.persona__ini {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  background: var(--marca); color: #fff; font-family: var(--display); font-size: 1.05rem;
  rotate: 45deg; border-radius: 6px;
}
.persona__ini { text-align: center; }
.persona__ini::first-line { rotate: -45deg; }

@media (max-width: 900px) {
  .form-contacto { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .equipo { grid-template-columns: 1fr; }
}

/* ── Tarjeta con foto y galería de proyectos ──────────────────────────────── */
.foto-celda { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tarjeta > .foto-celda { border-bottom: 1px solid var(--linea); }

.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gal__celda {
  padding: 0; border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--blanco); overflow: hidden; cursor: zoom-in; display: block;
  box-shadow: var(--s-reposo);
  transition: transform var(--t-card) var(--curva), box-shadow var(--t-card) var(--curva);
}
/* La foto no crece: se ENCIENDE al acercarse. Son tres propiedades de un solo
   gesto, y el velo baja a la vez que la saturación sube. */
.gal__celda .foto-celda {
  transition: transform var(--t-foto) var(--curva), filter var(--t-foto) var(--curva);
  filter: saturate(.95);
}
@media (hover: hover) {
  .gal__celda:hover { transform: translateY(-6px); box-shadow: var(--s-hover); }
  .gal__celda:hover .foto-celda { transform: scale(1.07); filter: saturate(1.15); }
}

/* ── Visor ────────────────────────────────────────────────────────────────── */
.visor { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1100px); }
.visor::backdrop { background: rgb(4 12 28 / .88); }
.visor__marco { position: relative; }
.visor__img { width: 100%; height: auto; border-radius: var(--r); display: block; box-shadow: var(--s-dialog); }
.visor__cerrar {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgb(0 43 98 / .82); color: #fff; cursor: pointer;
  transition: rotate .3s var(--curva), background-color .3s var(--curva);
}
@media (hover: hover) { .visor__cerrar:hover { rotate: 90deg; background: var(--marca); } }
.visor__pie { color: #fff; text-align: center; margin: .8rem 0 0; font-size: .92rem; }

@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .galeria { grid-template-columns: 1fr; } }

/* ── Entradilla de pagina ───────────────────────────────────────────────────
   Su plantilla deja la frase de apertura como un titular pequeno en negrita,
   asi que lo primero que se lee pesa menos que la seccion de abajo. Es la
   entradilla: grande, sin gritar, y con aire por debajo. */
.lead {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.42;
  color: var(--tinta);
  font-weight: 500;
  max-width: 62ch;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 2px solid var(--linea);
}
.lead strong { font-weight: 700; }

/* ── Argumentos en tarjeta ─────────────────────────────────────────────────
   Siete vinetas seguidas se leen como una nota interna. Cada una en su caja se
   lee sola, y el trozo en negrita que su texto ya trae hace de titular sin
   inventar nada. */
.args { display: grid; gap: 14px; }
.args--3 { grid-template-columns: repeat(3, 1fr); }
.args--2 { grid-template-columns: repeat(2, 1fr); }
.arg {
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 1.05rem 1.2rem;
  box-shadow: var(--s-reposo);
  transition: transform var(--t-card) var(--curva), box-shadow var(--t-card) var(--curva),
              border-color var(--t-card) var(--curva);
}
.arg > .rombo { color: var(--marca); flex: none; margin-top: .45em; width: .5em; height: .5em; }
.arg__t { font-size: 1.06rem; margin: 0 0 .25em; color: var(--marca-on-light); }
.arg p { margin: 0; font-size: .95rem; color: var(--tinta-2); max-width: none; }
@media (hover: hover) {
  .arg:hover { transform: translateY(-5px); box-shadow: var(--s-hover); border-color: rgb(0 64 145 / .4); }
}
.seccion--alt .arg { background: var(--blanco); }

.sedes-t { margin-top: 2.2rem; }

@media (max-width: 1080px) { .args--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .args--3, .args--2 { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════════
   ASISTENTE TÉCNICO · la ventana de chat

   Se apoya en los tokens de estilos.css y en el mismo rombo de la marca: la
   burbuja del asistente tiene una esquina en pico, que es medio rombo, y el
   lanzador lleva el rombo lleno. No hay ni un color nuevo.

   El lanzador NO es un círculo más. Ya hay dos flotantes redondos —teléfono y
   volver arriba— y un tercero se lee como parte del mismo grupo. Este es una
   PASTILLA con rótulo: se distingue por forma, no por color, y así puede ser
   ámbar sin pelearse con el ámbar del botón de subir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Lanzador ─────────────────────────────────────────────────────────── */

.flota--chat {
  width: auto; height: 52px; border-radius: 26px; padding: 0 18px 0 14px;
  gap: 9px; grid-auto-flow: column; align-items: center;
  background: var(--acento); color: #191104;      /* 13,2:1 sobre el ámbar */
  font: 700 .96rem/1 var(--texto); letter-spacing: .01em;
}
.flota--chat .rombo { width: 13px; height: 13px; background: currentColor; }
@media (hover: hover) {
  .flota--chat:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 28px rgb(255 197 0 / .55);
  }
}
/* Con la ventana abierta el lanzador sobra: ocuparía el mismo sitio que ella. */
body.chat-abierto .flotantes { opacity: 0; pointer-events: none; }

/* En móvil no cabe el rótulo al lado de una ventana a pantalla completa. */
@media (max-width: 420px) {
  .flota--chat { padding: 0; width: 52px; border-radius: 50%; }
  .flota--chat span { display: none; }
}

/* Un punto ámbar que avisa de que esto es nuevo, y solo la primera vez. */
.flota--chat::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid var(--acento); opacity: 0;
}
.flota--chat.pulsa::after { animation: chat-pulso 2.4s var(--curva) 3; }
@keyframes chat-pulso {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.35); }
  100% { opacity: 0;  transform: scale(1.35); }
}


/* ── 2. La ventana ───────────────────────────────────────────────────────── */

.chat {
  position: fixed; z-index: 85;
  right: clamp(12px, 3vw, 26px); bottom: clamp(12px, 3vw, 26px);
  width: min(394px, calc(100vw - 24px));
  height: min(636px, calc(100dvh - 96px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--papel); border-radius: 18px;
  border: 1px solid rgb(0 64 145 / .13);
  box-shadow: 0 26px 70px -18px rgb(16 26 38 / .42),
              0 3px 10px rgb(16 26 38 / .1);
  /* Nace desde la esquina del lanzador, no desde el centro de la pantalla. */
  transform-origin: 100% 100%;
  transition: opacity .28s var(--curva), translate .28s var(--curva),
              scale .28s var(--curva), visibility .28s;
}
.chat[hidden] {
  display: flex;                    /* para poder animar la salida */
  visibility: hidden; opacity: 0; translate: 0 14px; scale: .96;
}
@media (prefers-reduced-motion: reduce) {
  .chat { transition: none; }
  .chat[hidden] { display: none; }
}

@media (max-width: 560px) {
  .chat {
    inset: 0; width: 100%; height: 100dvh;
    border-radius: 0; border: 0;
  }
}


/* ── 3. Cabecera ─────────────────────────────────────────────────────────── */

.chat__cab {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 14px 12px 14px 16px;
  background: var(--marca-900); color: #fff;
}
.chat__cab.rombos::before { opacity: .16; }

.chat__avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: var(--marca);
  border: 1px solid rgb(255 255 255 / .16);
}
.chat__avatar .rombo { width: 15px; height: 15px; background: var(--acento); }

.chat__ident { flex: 1; min-width: 0; }
.chat__titulo {
  font: 700 1.16rem/1.1 var(--display); letter-spacing: .012em;
  text-transform: uppercase; margin: 0;
}
.chat__estado {
  display: flex; align-items: center; gap: 6px; margin: 3px 0 0;
  font-size: .76rem; color: rgb(255 255 255 / .72);
}
.chat__punto {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: none;
  box-shadow: 0 0 0 3px rgb(74 222 128 / .2);
}
.chat__cerrar {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 9px; cursor: pointer;
  background: rgb(255 255 255 / .1); color: #fff;
  transition: background-color .3s var(--curva);
}
@media (hover: hover) { .chat__cerrar:hover { background: rgb(255 255 255 / .22); } }


/* ── 4. Conversación ─────────────────────────────────────────────────────── */

.chat__hilo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: rgb(0 64 145 / .3) transparent;
}

.chat__msg { max-width: 88%; }
.chat__msg--yo { align-self: flex-end; }
.chat__msg--bot { align-self: flex-start; }

.chat__burbuja {
  padding: 11px 14px; border-radius: 14px;
  font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere;
}
.chat__msg--yo .chat__burbuja {
  background: var(--marca); color: #fff;         /* 9,80:1 */
  border-bottom-right-radius: 4px;               /* el pico, medio rombo */
}
.chat__msg--bot .chat__burbuja {
  background: #fff; color: var(--tinta);
  border: 1px solid rgb(0 64 145 / .12);
  border-bottom-left-radius: 4px;
}
.chat__burbuja p { margin: 0 0 .6em; }
.chat__burbuja p:last-child { margin-bottom: 0; }
.chat__burbuja ul { list-style: none; margin: .35em 0 .6em; padding: 0; }
.chat__burbuja li { position: relative; padding-left: 1.15em; margin-bottom: .3em; }
.chat__burbuja li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 6px; rotate: 45deg; background: var(--marca);
}
/* Referencias: rasgado el cero y cifras de una anchura. En un código como
   GSFNUR01610T3D hay cuatro ceros que sin esto no se distinguen de una O. */
.chat__burbuja code, .chat__burbuja strong {
  font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1;
}
.chat__burbuja code {
  background: rgb(0 64 145 / .07); color: var(--marca-on-light);
  padding: .1em .38em; border-radius: 4px; font-size: .92em;
  font-family: inherit; font-weight: 600;
}
.chat__burbuja a { color: var(--marca-on-light); font-weight: 600; }
.chat__msg--yo .chat__burbuja a { color: var(--acento); }

/* Fuentes: de dónde ha salido la respuesta. Es lo que separa un asistente
   comprobable de uno que suena bien. */
.chat__fuentes {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0;
}
.chat__fuente {
  font-size: .72rem; font-weight: 600; text-decoration: none;
  padding: .26em .62em; border-radius: 999px;
  color: var(--marca-on-light); background: rgb(0 64 145 / .06);
  border: 1px solid rgb(0 64 145 / .16);
  transition: background-color .3s var(--curva);
}
@media (hover: hover) { .chat__fuente:hover { background: rgb(0 64 145 / .13); } }

/* Aviso de que está mirando el catálogo de verdad. */
.chat__tarea {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--tinta-2);
  padding: 4px 2px;
}
.chat__tarea .rombo {
  width: 9px; height: 9px; background: var(--marca);
  animation: chat-gira 1.1s linear infinite;
}
@keyframes chat-gira { to { rotate: 405deg; } }

.chat__puntos { display: inline-flex; gap: 4px; padding: 4px 2px; }
.chat__puntos i {
  width: 7px; height: 7px; rotate: 45deg; background: var(--marca); opacity: .3;
  animation: chat-late 1.2s var(--curva) infinite;
}
.chat__puntos i:nth-child(2) { animation-delay: .16s; }
.chat__puntos i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-late { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .chat__tarea .rombo, .chat__puntos i { animation: none; }
}

.chat__aviso {
  align-self: stretch; text-align: center; font-size: .78rem;
  color: var(--tinta-2); padding: 6px 10px;
}
.chat__aviso--mal { color: #9a2b1f; }


/* ── 5. Sugerencias de arranque ──────────────────────────────────────────── */

.chat__sugerencias { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 4px; }
.chat__sug {
  font: 600 .8rem/1.3 var(--texto); text-align: left; cursor: pointer;
  padding: .5em .8em; border-radius: 11px;
  background: #fff; color: var(--marca-on-light);
  border: 1px solid rgb(0 64 145 / .2);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva),
              background-color .3s var(--curva);
}
@media (hover: hover) {
  .chat__sug:hover {
    transform: translateY(-2px); background: var(--marca); color: #fff;
    border-color: var(--marca);
    box-shadow: 0 7px 18px -6px rgb(0 64 145 / .5);
  }
}


/* ── 6. Barra de escritura ───────────────────────────────────────────────── */

.chat__pie {
  flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid rgb(0 64 145 / .1);
}
.chat__caja {
  display: flex; align-items: flex-end; gap: 8px;
  border: 1px solid rgb(0 64 145 / .22); border-radius: 14px;
  padding: 5px 5px 5px 12px; background: var(--papel);
  transition: border-color .3s var(--curva), box-shadow .3s var(--curva);
}
.chat__caja:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgb(0 64 145 / .13);
}
.chat__texto {
  flex: 1; border: 0; background: none; resize: none; outline: none;
  font: 400 .94rem/1.45 var(--texto); color: var(--tinta);
  max-height: 108px; padding: 7px 0; min-width: 0;
}
.chat__texto::placeholder { color: var(--tinta-2); opacity: .8; }

.chat__boton {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 11px; cursor: pointer;
  transition: background-color .3s var(--curva), transform .3s var(--curva),
              color .3s var(--curva);
}
.chat__boton[disabled] { opacity: .4; cursor: default; }
.chat__mic { background: rgb(0 64 145 / .08); color: var(--marca-on-light); }
.chat__enviar { background: var(--marca); color: #fff; }
@media (hover: hover) {
  .chat__mic:not([disabled]):hover { background: rgb(0 64 145 / .16); }
  .chat__enviar:not([disabled]):hover { background: var(--marca-900); transform: translateY(-2px); }
}
/* Grabando: rojo, que es lo que todo el mundo entiende, y latiendo. */
.chat__mic.graba { background: #c0281c; color: #fff; animation: chat-graba 1.3s var(--curva) infinite; }
@keyframes chat-graba {
  0%, 100% { box-shadow: 0 0 0 0 rgb(192 40 28 / .5); }
  60%      { box-shadow: 0 0 0 9px rgb(192 40 28 / 0); }
}
@media (prefers-reduced-motion: reduce) { .chat__mic.graba { animation: none; } }

.chat__legal {
  margin: 7px 2px 0; font-size: .7rem; line-height: 1.35; color: var(--tinta-2);
  text-align: center;
}
.chat__legal a { color: var(--marca-on-light); }

/* Al imprimir no pinta nada un chat. */
@media print { .chat, .flota--chat { display: none !important; } }