/* Componentes: masthead, regla, CTA, tarjeta, paso, acordeón, campo — Tarea 2 y siguientes */

/* --- Masthead (cabecera) --- */
/* Wordmark arriba a la izquierda, isotipo a la derecha, misma línea de base. */
.masthead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--gap);
  padding:1.5rem var(--pad) 1.25rem;
}
.masthead__wordmark{
  width:clamp(160px, 32vw, 220px);
  height:auto;
}

/* --- Regla de cierre --- */
/* Usada por la cabecera y por cualquier sección que abra/cierre con regla pesada. */
.hrule{
  height:6px;
  background:var(--rule);
  border:0;
}

/* --- Eyebrow --- */
/* Etiqueta corta en versalitas sobre un titular (chip del hero, tira de hechos). */
.eyebrow{
  display:block;
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.75rem;
}

/* --- Found (isotipo, una vez por sección) --- */
/* Marca pequeña que cierra una sección, según docs/diseno.md: "el isotipo, una vez por sección". */

/* --- CTA primario --- */
.cta{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--ink); color:var(--stock);
  font-weight:700; font-size:.95rem; text-decoration:none;
  padding:.85rem 1.5rem; border:0; cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out);
}
.cta::after{
  content:""; width:1.6rem; height:1px; background:var(--spot);
  transform:scaleX(0.6875); transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-out);
}
.cta:active{ transform:scale(0.98) }
@media (hover:hover) and (pointer:fine){
  .cta:hover::after{ transform:scaleX(1) }
}

/* --- Acordeón (pregunta/respuesta) — Tarea 7 --- */
/* Única excepción del proyecto a "solo transform/opacity": docs/motion.md, fila 9, anima
   grid-template-rows. Estructura: .faq-i (fila) > h3 > .faq__trigger (button real, aria-expanded/
   aria-controls) + .faq-a (grid 0fr→1fr) > div (overflow:hidden, recorta el contenido en 0fr). */
.faq-i{
  border-top:1px solid var(--ink-2);
}
.faq-i:last-child{
  border-bottom:1px solid var(--ink-2);
}
.faq__q{
  font: inherit;
}
.faq__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  background:transparent;
  border:0;
  margin:0;
  padding:1.25rem 0;
  font-family:var(--body);
  font-size:var(--t-lede);
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.faq-plus{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  font-size:1.4rem;
  line-height:1;
  color:var(--ink);
  transition:transform var(--dur-ui) var(--ease-out);
}
.faq-i.open .faq-plus{ transform:rotate(45deg) }
/* EL PLEGADO CUELGA DE `.js-faq`, Y ESO ES LO QUE ARREGLA LA PÁGINA SIN JAVASCRIPT. Sin esa
   condición, las nueve respuestas quedaban en `0fr` para todo el mundo y sólo las abría el
   script: quien llegaba sin JavaScript veía nueve botones con un «+» que no hacía nada y no
   podía leer ninguna respuesta. Ahí está el pedido mínimo, lo que incluye la muestra, la
   garantía y los envíos.
   La clase la pone js/faq.js al arrancar. Si no llega, el acordeón se queda desplegado, que es
   el estado útil, y el «+» se esconde para no ofrecer un gesto que nadie puede hacer. */
.js-faq .faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-ui) var(--ease-out);
}
.js-faq .faq-i.open .faq-a{ grid-template-rows:1fr }
.js-faq .faq-a > div{ overflow:hidden }
html:not(.js-faq) .faq-plus{ display:none }
html:not(.js-faq) .faq__trigger{ cursor:default }
.faq__answer{
  padding-bottom:1.25rem;
  max-width:var(--measure);
  color:var(--ink-2);
}
@media (prefers-reduced-motion:reduce){
  .faq-a{ transition-duration:100ms }
  .faq-plus{ transition:none }
}

/* --- Pie — Tarea 9 --- */
/* Fondo navy, texto gris claro y el logotipo como miniatura: lo pidió el cliente así.
   Los dos colores son los del par de panel que ya existe y que check-guards.mjs comprueba en cada
   build: --panel-ink-2 sobre --panel da 10,26:1 y --panel-ink 17,71:1. No hace falta token nuevo,
   y por eso tampoco hace falta guarda nueva.
   El relleno pasa a --section-pad arriba y abajo: con fondo propio, el pie es un bloque, y un
   bloque de color con 1,5rem de aire arriba se lee como un corte, no como una sección. */
footer{
  background:var(--panel);
  color:var(--panel-ink-2);
  padding:var(--section-pad) var(--pad);
}
.footer__content{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-size:var(--t-small);
  color:var(--panel-ink-2);
}
/* Los enlaces en hueso, que es el par fuerte: dentro de un párrafo gris claro, el enlace tiene que
   distinguirse por algo más que el subrayado del navegador. */
/* El nombre de la marca en el pie de las páginas secundarias —el 404 y el aviso—, donde no va el
   logotipo. Llevaba clase y NINGUNA regla, así que se pintaba como un párrafo más. Va en negrita
   y con el interletraje de la marca, que es lo que hace que se lea como una firma y no como texto. */
.footer__brand{
  font-weight:900;
  letter-spacing:-.02em;
  margin-bottom:.35rem;
}
.footer__content a{
  color:var(--panel-ink);
}
/* AQUÍ VIVÍA .footer__placa, Y SE FUE EL 29 DE OCTUBRE. Era un rectángulo hueso detrás del
   logotipo: el wordmark está dibujado en navy —el 34,6 % de sus píxeles— y sobre el navy del pie
   se perdía, así que la placa era lo que permitía tener el logotipo en sus colores originales
   sobre fondo oscuro. El cliente entregó la versión con contorno claro, que recorta las letras
   contra el fondo sin necesidad de caja, y con ella la placa dejó de tener motivo.
   El margen de abajo que daba la placa pasa al propio logotipo, que es quien lo necesitaba. */
.footer__logo{
  display:block;
  width:9rem;
  height:auto;
  margin-bottom:1.25rem;
}
/* Las dos redes. El icono ya viene en hueso sobre navy, así que encaja con el pie sin tocar nada;
   va con alt vacío porque el nombre de la red está al lado, en texto, y un lector de pantalla que
   lo nombrara otra vez diría dos veces lo mismo. */
.footer__redes{
  list-style:none;
  display:flex;
  gap:1.1rem;
  margin:.6rem 0 .35rem;
}
.footer__redes a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.footer__redes img{
  display:block;
  width:1.3em;
  height:1.3em;
}

/* --- 10 · Formulario de cotización (Tarea 9) --- */
/* Un solo paso, cinco campos más el correo opcional (docs/plan/08-formulario.md, 10.1). Sin
   movimiento propio en campos ni botón de envío: son la acción, no la vitrina (docs/motion.md,
   fila "10 Wizard"). La confirmación se trata más abajo. */
.quote{
  padding:var(--section-pad) var(--pad);
}
.quote__rule{
  margin-bottom:var(--gap);
}
.quote__title{
  font-family:var(--body);
  font-size:var(--t-h2);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.035em;
  max-width:var(--measure);
  color:var(--ink);
  margin-bottom:1rem;
}
.quote__lede{
  font-size:var(--t-lede);
  color:var(--ink-2);
  max-width:var(--measure);
  margin-bottom:var(--gap);
}

.quote__form{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  max-width:var(--measure);
  margin-bottom:var(--gap);
}
.quote__field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.quote__field label{
  font-size:var(--t-small);
  font-weight:700;
  color:var(--ink);
}
/* Corrige el heredado de Tarea 9: `.eyebrow` es `display:block` con margen inferior, pensado
   para ir sobre un titular, no dentro de un <label> en línea con su texto. */
.quote__optional-tag{
  display:inline-block;
  margin:0 0 0 .5rem;
}
.quote__field input,
.quote__field select{
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--stock);
  border:1px solid var(--ink-2); /* 7.42:1 sobre --stock; WCAG 1.4.11 pide 3:1 en bordes de control */
  padding:.75rem .85rem;
  width:100%;
}
.quote__field input[aria-invalid="true"],
.quote__field select[aria-invalid="true"]{
  border-color:var(--alert);
}
.quote__error{
  font-size:var(--t-small);
  color:var(--alert);
  min-height:1.2em;
}
.quote__submit{
  justify-self:start;
}
/* La salida de quien no tiene JavaScript. Va con regla a la izquierda y no con un recuadro de
   alerta: no es un error del visitante ni algo que pueda arreglar, es una condición de la página,
   y pintarlo de rojo sólo lo asustaría. Lo que tiene que destacar es el correo y el teléfono. */
/* EL AVISO SIMPLIFICADO. Va pequeño y en gris a propósito: la ley pide que esté a la vista en el
   punto donde se recaban los datos, no que compita con el formulario. Mismo tamaño y color que la
   línea legal que había antes, para que se lea como lo que es —la letra pequeña— y no como un
   bloque de contenido más. El ancho se topa en --measure para que no se vuelva un muro. */
.quote__aviso{
  /* .8rem y no --t-small: es el mismo cuerpo que el del aviso integral, donde el cliente ya pidió
     «haz la letra mucho más pequeña». Sigue pasando de sobra el contraste —#48507A sobre #F8FAFC
     da 7,43:1, y el mínimo para texto normal es 4,5— así que pequeño no es ilegible.
     Sin ninguna regla para `strong` porque ya no hay ninguno: el párrafo va entero en la misma
     tinta. Lo único que se distingue son los dos enlaces, que es donde hay que pulsar. */
  font-size:.8rem;
  line-height:1.5;
  color:var(--ink-2);
  max-width:var(--measure);
}
.quote__aviso a{ color:var(--ink-2) }

/* La salida de quien no tiene JavaScript. Ni recuadro de alerta ni barra lateral de color: lo
   primero lo asustaría —no es un error suyo ni algo que pueda arreglar, es una condición de la
   página— y lo segundo sería un adorno que no aparece en ninguna otra parte de esta hoja. Se
   trata como lo que es, una nota, y una nota aquí se marca igual que .sectors__note: ancho de
   medida, tinta normal y la frase en negrita al principio. Lo que tiene que destacar es el correo
   y el teléfono, y de eso ya se encargan los enlaces. */
.quote__sinjs{
  margin-top:.9rem;
  max-width:var(--measure);
  color:var(--ink);
}

@media (min-width:840px){
  .quote__form{
    grid-template-columns:1fr 1fr;
    column-gap:var(--gap);
  }
  .quote__submit{
    grid-column:1 / -1;
  }
}

/* --- Confirmación (docs/motion.md, fila "10 Wizard") --- */
/* Reposo: oculta con `hidden` (no `opacity:0` sobre un elemento visible). Al mostrarse, JS marca
   `data-enter` un instante para fijar el estado inicial y lo quita para disparar la transición
   hacia el estado de reposo de abajo. Bajo `prefers-reduced-motion` no hay transición: el estado
   final aparece de inmediato, tal como pide la fila del wizard en docs/motion.md. */
.quote__confirm{
  max-width:var(--measure);
  padding:1.75rem;
  border:1px solid var(--ink-2);
  opacity:1;
  transform:translateY(0);
  transition:opacity var(--dur-confirm) var(--ease-out), transform var(--dur-confirm) var(--ease-out);
}
.quote__confirm[data-enter]{
  opacity:0;
  transform:translateY(10px);
}
@media (prefers-reduced-motion:reduce){
  .quote__confirm{
    transition:none;
  }
}
.quote__confirm-title{
  font-family:var(--body);
  font-size:var(--t-h2);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.035em;
  color:var(--ink);
  margin-bottom:1.1rem;
}
.quote__summary{
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:1rem;
  row-gap:.4rem;
  margin-bottom:1.25rem;
}
.quote__summary dt{
  font-size:var(--t-small);
  font-weight:700;
  color:var(--ink-2);
}
.quote__summary dd{
  color:var(--ink);
}
.quote__nudge{
  /* una regla encima, el dispositivo de la página; ningún separador es vertical */
  padding:1rem 0 0;
  margin-bottom:1.25rem;
  border-top:3px solid var(--rule);
  color:var(--ink);
  max-width:var(--measure);
}
.quote__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
}
.quote__secondary{
  display:inline-flex;
  align-items:center;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  padding:.85rem 1.5rem;
  cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-out);
}
.quote__secondary:active{
  transform:scale(0.98);
}
.quote__copy-status{
  width:100%;
  margin-top:.25rem;
  font-size:var(--t-small);
  color:var(--ink-2);
  min-height:1.2em;
}

/* --- Carrusel de movimiento continuo — Tarea 6 --- */
/* Dos carruseles con el mismo mecanismo y dos maquetas: los sectores son fichas de texto y la
   galería son cinco filas de piezas. Lo que comparten es el desfile.

   EL ESTADO POR OMISIÓN ES LA RETÍCULA, NO LA TIRA, y eso es deliberado. Antes lo tenía al revés
   —la tira por omisión y la retícula bajo `prefers-reduced-motion`— y sin JavaScript la sección
   quedaba rota: una pista de `width:max-content` dentro de un contenedor con `overflow:hidden`
   deja fuera de la ventana todo lo que no cabe, y sin animación que lo traiga nunca vuelve.
   Medido: 8 fichas visibles de 32 y nada que las alcance. Ahora, sin la clase, la pista es una
   retícula que envuelve y están las 8 y las 25; la tira sólo existe con `js-carrusel` puesta.
   Es la misma arquitectura que el recorrido y por el mismo motivo.

   POR QUÉ LA PISTA LLEVA COPIAS EN EL HTML. El desfile lleva la pista de 0 a -50 % de su propio
   ancho y vuelve a empezar. Para que no se vea el salto hacen falta dos cosas: que el contenido
   sea periódico —y media pista caiga en un múltiplo del periodo— y que MEDIA PISTA CUBRA LA CAJA.
   Lo segundo es lo que se me escapó al principio: con dos copias, media pista es una copia, y una
   copia de la galería mide cinco columnas —560 px— contra una caja de 1265. Al llegar al -50 %
   quedaba la mitad derecha vacía. Medido, no deducido.
   De ahí salen los números: cuatro copias en sectores (media pista 2649 px a 1280 de ventana,
   2675 a 2560) y seis en la galería (media pista 1680 px, y la galería se topa en 80rem). Si se
   cambia el número de piezas o el lado, hay que rehacer esta cuenta.

   Y POR QUÉ NO SE USA `gap` EN LA TIRA. Con `gap`, el ancho de una pista de n piezas es
   n·pieza + (n-1)·hueco, y su mitad se queda medio hueco corta de lo que mide media pista de
   contenido. Ese medio hueco es un tirón en cada vuelta. Con el hueco metido en la pieza —margen
   a la derecha en las fichas, celda que ya lo incluye en la galería— la cuenta cierra exacta. */

/* Sin JavaScript: retícula que envuelve y una sola copia de cada cosa. */
.carrusel__pista{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  gap:var(--gap);
  list-style:none;
  padding:0;
}
/* SE ESCONDEN LAS COPIAS, NO LOS ICONOS. Aquí había además un `img[alt=""]`, y se lleva por
   delante los ocho iconos de sector: también llevan `alt=""`, porque el nombre del sector va al
   lado en texto y un lector de pantalla que lo nombrara otra vez diría dos veces lo mismo. O sea
   que la regla escondía justo lo que el cliente entregó. Comprobado en navegador: sin la clase
   `js-carrusel` quedaban ocho fichas y cero iconos.
   `[aria-hidden="true"]` basta y sobra: es lo que marca las copias, y es lo único que hay que
   esconder cuando la pista deja de desfilar. */
html:not(.js-carrusel) .carrusel__pista [aria-hidden="true"]{ display:none }

/* Con JavaScript: la tira desfila. */
.js-carrusel .carrusel{ overflow:hidden }
.js-carrusel .carrusel__pista{
  display:flex;
  width:max-content;
  gap:0;
  animation:desfilar var(--dur-carrusel,40s) linear infinite;
  will-change:transform;
}
.js-carrusel .carrusel__ficha{ margin-right:var(--gap) }
@keyframes desfilar{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
/* Se para al pasar el ratón por encima. El movimiento continuo es para que la sección se lea
   viva, no para impedir mirar una prenda. Sólo donde hay ratón de verdad: en una pantalla táctil
   `:hover` se queda pegado tras tocar y dejaría el carrusel parado para siempre. */
@media (hover:hover) and (pointer:fine){
  .js-carrusel .carrusel:hover .carrusel__pista{ animation-play-state:paused }
}

/* Las fichas de sectores: NOMBRE Y SU ICONO AL LADO, sin recuadro. El recuadro se fue porque el
   cliente lo pidió, y sin él la tira se lee como una frase que pasa en vez de como una lista de
   etiquetas. El icono va después del nombre, con alt vacío: el nombre ya está en texto.
   `white-space:nowrap` es lo que impide que un sector de dos palabras parta por la mitad en la
   tira; en la retícula —sin JavaScript o con movimiento reducido— se quita, que ahí sí envuelve. */
.carrusel__ficha{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--t-small);
  letter-spacing:.02em;
}
.js-carrusel .carrusel__ficha{ white-space:nowrap }
/* EL ICONO CRECIÓ DE 1.45em A 2.4em EL 29 DE OCTUBRE, y el motivo es que cambió lo que hay dentro.
   Hasta esa fecha eran ocho siluetas macizas de relleno —un casco, una cruz, un escudo— que a
   1.45em se leían porque no tenían nada que perder. Los que llegaron del cliente son dibujos de
   línea con detalle: una grúa con celosía, un guardia con insignia, una hamburguesa con ajonjolí.
   Medido en pantalla, 1.45em son 20,4 px con el cuerpo en 14,08: a ese tamaño ninguno de los ocho
   se reconoce, se ven ocho manchas. A 2.4em son 33,8 px y se distinguen los ocho.
   Para volver atrás basta con cambiar estas dos cifras; no depende de nada más. */
.carrusel__icono{
  display:block;
  width:2.4em;
  height:2.4em;
  flex:none;
}

/* La galería — ajustada el 20 de octubre: YA NO ES CARRUSEL.
   El cliente la quiere como una galería de Instagram: piezas pegadas, sin hueco. Al dejar de
   desfilar se va todo lo del carrusel —las copias, el ancho de contenido, la animación— y queda
   una retícula, que además es lo que ya se veía sin JavaScript. Menos máquina para el mismo sitio.
   Son veinte fotos reales del cliente: 5x4 en escritorio y 3x6 en teléfono. */
.galeria{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;
}
.galeria__pieza{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

/* LA GALERÍA ENTRA RENGLÓN A RENGLÓN Y DE IZQUIERDA A DERECHA, que es lo que pidió el cliente:
   antes aparecían las veinte de golpe. El mecanismo ya existía —js/reveal.js y la clase .rv de
   base.css— pero no lo llevaba nada en la página: estaba montado y sin usar.
   LO QUE HACE EL RENGLÓN es `--i`, el retardo escalonado. Va por COLUMNA y no por posición en la
   lista: el observador avisa de cada pieza cuando entra, así que los renglones llegan solos al
   bajar, y dentro de cada uno el retardo por columna lo barre de izquierda a derecha. Por eso
   `--i` se redefine abajo cuando la retícula pasa a tres columnas; si no, en el teléfono el barrido
   iría 0,1,2,3,4,0,1… y se vería desordenado.
   SÓLO OPACIDAD, SIN DESPLAZAMIENTO, y esto es a propósito. La retícula va pegada, `gap:0`, y es
   lo que la hace parecer un mosaico; el `translateY(10px)` que lleva .rv por omisión abriría una
   rendija de hueso debajo de cada pieza mientras dura la animación y el mosaico se desarmaría a
   la vista. El barrido en escalera ya da el movimiento.
   LA VELOCIDAD BAJÓ A 140 ms ENTRE COLUMNAS Y 700 DE FUNDIDO el 30 de octubre, y es corrección
   del cliente: la primera versión iba en 40 y 240 —un renglón entero en 400 ms— y me dijo que
   era demasiado rápida. Ahora un renglón tarda 1,26 s: cuatro retardos de 140 más el fundido de
   la última. En el teléfono, con tres columnas, 980 ms.
   Que sea larga NO entorpece el scroll, y conviene tener claro por qué: la opacidad la compone
   la GPU en su propio hilo, así que la página sigue corriendo igual mientras dura. Lo único que
   cambia es cuánto tarda cada pieza en acabar de verse. */
.js-reveal .galeria__pieza{
  transform:none;
  transition:opacity 700ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 140ms);
}
.js-reveal .galeria__pieza.on{ transform:none }
.galeria__pieza:nth-child(5n+1){ --i:0 }
.galeria__pieza:nth-child(5n+2){ --i:1 }
.galeria__pieza:nth-child(5n+3){ --i:2 }
.galeria__pieza:nth-child(5n+4){ --i:3 }
.galeria__pieza:nth-child(5n+5){ --i:4 }

@media (max-width:639.98px){
  .galeria{ grid-template-columns:repeat(3, 1fr) }
  /* tres columnas: el barrido se mide sobre tres y no sobre cinco */
  .galeria__pieza:nth-child(3n+1){ --i:0 }
  .galeria__pieza:nth-child(3n+2){ --i:1 }
  .galeria__pieza:nth-child(3n+3){ --i:2 }
  /* CON VEINTE FOTOS Y TRES COLUMNAS SOBRAN DOS, así que las dos últimas se esconden y quedan
     seis filas llenas. Antes se escondía la vigesimoquinta por lo mismo: veinticinco en tres
     columnas dejaban una sola en la última fila, que se lee como un hueco y no como un final.
     Se esconden las dos ÚLTIMAS y no dos cualesquiera porque el orden de la retícula está
     pensado —se alternan prendas y gorras— y quitar de en medio rompería esa alternancia. */
  .galeria__pieza:nth-child(n+19){ display:none }
}

/* MOVIMIENTO REDUCIDO: la red. js/carrusel.js ni pone la clase cuando el ajuste está activo y la
   quita si cambia con la página ya cargada, así que esto es por si el JavaScript no llega a
   correr. Devuelve la pista a retícula sin depender de la clase. */
@media (prefers-reduced-motion:reduce){
  .js-carrusel .carrusel{ overflow:visible }
  .js-carrusel .carrusel__pista{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
    grid-template-rows:none;
    grid-auto-flow:row;
    gap:var(--gap);
    width:auto;
    animation:none;
    transform:none;
  }
  .js-carrusel .carrusel__ficha{ margin-right:0 }
  /* Mismo motivo que arriba: sólo las copias. El `img[alt=""]` que había aquí dejaba sin iconos
     a quien tiene activado «reducir movimiento» en su sistema, que es un ajuste corriente. */
  .carrusel__pista [aria-hidden="true"]{ display:none }
}

/* --- El banner de consentimiento --------------------------------------------------------- */
/* NO ES UNA VENTANA MODAL Y NO TAPA NADA. Un banner que bloquea la página fuerza a contestar sin
   haber visto de qué se trata, y lo que sale de ahí no es un consentimiento sino un reflejo.
   Éste se apoya en una esquina, deja leer la página entera y espera.

   SE ENCOGIÓ EL 31 DE OCTUBRE DE 2026, a petición del cliente: la primera versión cruzaba la
   pantalla de lado a lado y estorbaba. Ahora es una tarjeta de 23rem en una esquina, con la letra
   en .8rem —la misma del aviso simplificado y la del aviso integral, o sea la letra pequeña de la
   casa—. Ocupa una fracción de lo que ocupaba y sigue siendo legible.
   LO QUE NO SE ENCOGIÓ ES EL CONTRASTE NI EL ÁREA DE PULSACIÓN de los botones: hacer un banner
   discreto es correcto, hacerlo difícil de leer o de pulsar es otra cosa, y es la forma habitual
   de conseguir que la gente acepte sólo por quitárselo de encima. */
/* A LA DERECHA Y NO A LA IZQUIERDA, y es una corrección medida: en la esquina izquierda la
   tarjeta tapaba el botón de «Solicitar cotización» del hero, que es la llamada a la acción
   principal de la página. Un aviso de medición no puede estorbar justo lo que la página existe
   para conseguir. A la derecha no hay nada debajo en ninguno de los cortes. */
.consent{
  position:fixed;
  right:var(--pad);
  bottom:var(--pad);
  z-index:50;
  width:min(23rem, calc(100vw - var(--pad) * 2));
  padding:.85rem 1rem;
  background:var(--panel);
  color:var(--panel-ink);
  font-size:.8rem;
  line-height:1.45;
  box-shadow:0 2px 14px rgba(0, 0, 0, .18);
}
.consent__texto{
  margin:0 0 .7rem;
}
.consent__texto a{ color:var(--panel-ink) }
.consent__botones{
  display:flex;
  gap:.5rem;
}
/* LOS DOS BOTONES SON IDÉNTICOS, y es lo más importante de este bloque: mismo tamaño, mismo
   color, mismo sitio. Hacer «Rechazar» más pequeño o más pálido que «Aceptar» es la forma
   habitual de fabricar un consentimiento que no vale, y además se nota.
   El relleno vertical mantiene el botón por encima de los 32 px de alto aunque la letra sea
   pequeña: por debajo de eso se falla el dedo en un teléfono. */
.consent__boton{
  font:inherit;
  font-weight:700;
  flex:1 1 0;
  padding:.5rem .9rem;
  border:1px solid var(--panel-ink);
  background:transparent;
  color:var(--panel-ink);
  cursor:pointer;
}
.consent__boton:hover{ background:var(--panel-ink); color:var(--panel) }