/* ==========================================================================
   Obrería — PORTADA PÚBLICA de obreria.es (raíz). Maqueta 2 "El tablón vivo",
   elegida por María el 03/08/2026.

   Paleta CHISPA (GUIA_MARCA_BRIDA.md §2). Tipografía Archivo autohospedada —
   la MISMA que ya usa la app (`/fonts/archivo-var.woff2`), así que no se
   descarga dos veces si la persona pasa de la portada a la aplicación.
   Mobile-first. Cero estilos incrustados, cero peticiones externas.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --carbon: #1a1a1d;
  --carbon-2: #202024;
  --superficie: #26262b;
  --borde: #3d3d44;
  --hueso: #f0eeea;
  --ceniza: #c7c4be;
  --naranja: #ff5a1f;
  --brasa: #ff8a3d;
  --ambar: #ffc24b;
  --tinta: #1a1a1d;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;

  --r: 14px;
  --r-s: 9px;
  --max: 72rem;
  --max-texto: 42rem;

  --tipo: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--hueso);
  font-family: var(--tipo);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--naranja); }

h1, h2, h3, h4 { margin: 0 0 var(--s4); line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.15rem, 8vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.35rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0 0 var(--s4); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: -999px;
  background: var(--naranja);
  color: var(--tinta);
  font-weight: 700;
  padding: var(--s2) var(--s4);
  z-index: 100;
}
.salto:focus { left: 0; top: 0; }

.caja {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s4);
}
.caja--texto { max-width: calc(var(--max-texto) + var(--s8)); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(26, 26, 29, 0.92);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(10px);
}
.barra__interior {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--hueso);
  margin-right: auto;
}
.logo__texto { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.logo__marca { flex: none; }

.nav { order: 3; width: 100%; }
.nav ul {
  list-style: none;
  display: flex;
  gap: var(--s4);
  margin: 0;
  padding: var(--s2) 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--ceniza);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.nav a:hover, .nav a:focus { color: var(--hueso); }

/* El acceso queda pequeño a propósito (pedido de María): la portada informa,
   no obliga a entrar. */
.entrar {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ceniza);
  text-decoration: none;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}
.entrar:hover, .entrar:focus { color: var(--hueso); border-color: var(--ceniza); }

/* ---------- Botones ---------- */
.botones { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--r-s);
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  text-align: center;
  /* Desde el 05/08 hay un `.btn` que es un <button> de verdad (el de cargar la
     publicación de LinkedIn). Un <button> no hereda la tipografía del cuerpo
     por su cuenta: sin estas tres líneas saldría con la fuente del sistema. En
     los <a> no cambia nada, porque ya heredaban esto mismo. */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}
.btn--fuego { background: var(--naranja); color: var(--tinta); }
.btn--fuego:hover { background: var(--brasa); }
.btn--linea { color: var(--hueso); border-color: var(--borde); background: rgba(255, 255, 255, 0.02); }
.btn--linea:hover { border-color: var(--ceniza); }
.btn--grande { padding: 1.05rem 2.2rem; font-size: 1.0625rem; }

/* ---------- Hero con la turbina ----------
   El vídeo va de FONDO y el texto encima. El velo es lo que hace que el texto
   se lea: sin él, el hueso sobre la nave iluminada se queda por debajo del
   contraste mínimo. Es un degradado (no un gris plano) para que la turbina siga
   viéndose a la derecha, que es donde está el motivo. */
.hero {
  position: relative;
  padding: var(--s7) 0 var(--s8);
  overflow: hidden;
  background: var(--carbon);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__velo {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(180deg, rgba(26, 26, 29, 0.78) 0%, rgba(26, 26, 29, 0.58) 45%, rgba(26, 26, 29, 0.88) 100%),
    linear-gradient(90deg, rgba(26, 26, 29, 0.88) 0%, rgba(26, 26, 29, 0.28) 70%);
}

.hero__caja { position: relative; }
.etiqueta {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--tinta);
  background: var(--ambar);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  margin-bottom: var(--s4);
}
.resalte { color: var(--brasa); }
.bajada {
  font-size: 1.15rem;
  color: var(--ceniza);
  max-width: 34rem;
}
.hero .bajada { color: var(--hueso); }
.lema {
  margin: var(--s6) 0 0;
  color: var(--ceniza);
  font-size: 0.9375rem;
  border-left: 3px solid var(--naranja);
  padding-left: var(--s3);
}

/* ---------- Marcador de cifras ---------- */
.marcador {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: var(--s6) 0;
}
.marcador__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
}
.marcador__lista li {
  border-left: 3px solid var(--naranja);
  padding-left: var(--s3);
}
.marcador__lista b {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hueso);
}
.marcador__lista span {
  display: block;
  font-size: 0.875rem;
  color: var(--ceniza);
  margin-top: var(--s1);
}
.marcador__pie { margin: var(--s5) 0 0; font-size: 0.8125rem; color: var(--ceniza); }

/* ---------- Secciones ---------- */
.seccion { padding: var(--s7) 0; }
.seccion--oscura {
  background: var(--carbon-2);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.intro { color: var(--ceniza); max-width: 38rem; }

/* ==========================================================================
   EL TABLÓN: LA PARED DE TUERCAS (07/08/2026, idea de María)

   Sustituye a las 3 tarjetas de ofertas + 3 de paradas que había aquí desde el
   04/08 y que se quedaban pobres. Ahora el tablón es un MURO de piezas
   hexagonales —tuercas vistas de frente— que encajan entre sí y aprovechan
   todo el ancho.

   TRES REGLAS DE ESTE MURO, dictadas por María el 07/08:

   1. Solo lleva DOS tipos de pieza: las últimas ofertas publicadas y las
      próximas paradas y revisiones mayores. Las noticias del gremio y las
      cifras del marcador siguen donde estaban, en sus propias secciones.
   2. TODAS LAS PIEZAS MIDEN LO MISMO. No hay tuercas dobles ni fundidas: una
      pieza es una tuerca. El texto que no cabe se recorta con puntos
      suspensivos y el texto completo viaja en `title` y `aria-label`.
   3. Las piezas se asientan UNA A UNA y despacio, para que se vea cómo se
      monta la pared (ver `--paso` abajo).

   El tejido —agrupar las piezas en filas de N y N-1 con medio paso de
   desplazamiento, que es lo que deja los dos cantos rectos— lo hace
   `portada.js`. SIN JavaScript la misma lista se queda como tarjetas normales
   y legibles: el hexágono es una mejora sobre una sección que ya está
   completa, nunca la condición para que se vea.

   MEDIDAS SIN `vw`: todo se calcula con porcentajes del contenedor, no del
   ancho de ventana. Con `100vw` la barra de desplazamiento del escritorio
   (~15 px) haría el muro más ancho que el resto de la página. Los porcentajes
   verticales (`margin-top`) se resuelven contra el ANCHO del bloque
   contenedor, que es justo lo que hace falta aquí.
   ========================================================================== */

.panal {
  --cols: 3;
  --sep: 6px;
  /* Ancho de una tuerca. Se usa también en los desplazamientos: por eso vive
     en una variable y no repetido en cada regla. */
  --celda: calc((100% - (var(--cols) - 1) * var(--sep)) / var(--cols));
  /* Cadencia del montaje. 110 ms entre pieza y pieza: con 15 piezas la última
     arranca a 1,5 s y el muro termina de asentarse sobre los 2,2 s. Se ve
     montarse sin que nadie tenga que esperar. */
  --paso: 110ms;
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: var(--s5);
}

/* La escalera de columnas se elige por el ANCHO QUE LE QUEDA A CADA TUERCA, no
   por cuántas caben: por debajo de unos 105 px no cabe un oficio escrito. */
@media (min-width: 30rem) { .panal { --cols: 4; } }
@media (min-width: 45rem) { .panal { --cols: 5; } }
@media (min-width: 60rem) { .panal { --cols: 6; } }

/* --- Estado SIN JavaScript: tarjetas normales, todo el contenido a la vista -- */
.panal__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s3);
}
.panal__lista .tuerca__cara {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s1);
  min-height: 7rem;
  padding: var(--s4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--hueso);
}
.panal__lista .tuerca--parada .tuerca__cara { border-top: 3px solid var(--ambar); }
.panal__lista .tuerca--oferta .tuerca__cara { border-top: 3px solid var(--naranja); }
/* Sin el hexágono, la pieza tiene que leerse como la tarjeta que ya conocía
   quien visitaba la portada: rótulo pequeño en versalitas, titular en negrita y
   pie en gris. (En cuanto el muro se teje mandan las reglas de `.panal--tejido`,
   que están más abajo y por eso ganan.) */
.panal__lista .tuerca__tipo {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--naranja);
}
.panal__lista .tuerca--parada .tuerca__tipo { color: var(--ambar); }
.panal__lista .tuerca__titulo { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.panal__lista .tuerca__pie { font-size: 0.875rem; color: var(--ceniza); }
.panal__lista .tuerca__aviso { font-size: 0.8125rem; font-weight: 700; color: var(--ambar); }

/* --- Estado tejido: el panal de verdad ------------------------------------- */
.panal--tejido .panal__lista { display: block; }

.panal__fila { display: flex; gap: var(--sep); }
.panal--tejido .panal__fila { margin-top: calc(var(--celda) * -0.2887 + var(--sep)); }
.panal--tejido .panal__fila:first-child { margin-top: 0; }

/* El medio paso de las filas cortas se hace con una PIEZA SEPARADORA vacía, no
   con `margin-left` ni con `transform`:
     · un margen le quita ancho a la fila y sus tuercas se calcularían sobre un
       contenedor más estrecho — así se descuadra un panal;
     · un `transform` no toca el ancho, pero sí cuenta para el área que se puede
       desplazar: en el móvil sacaba la página 45 px a la derecha (medido).
   El separador deja la fila con su ancho entero y no se sale de la caja. */
.panal--tejido .panal__hueco {
  flex: 0 0 auto;
  width: calc((var(--celda) - var(--sep)) / 2);
}

.panal--tejido .tuerca {
  position: relative;
  width: var(--celda);
  aspect-ratio: 1 / 1.1547;      /* hexágono regular de punta arriba */
  flex: 0 0 auto;
}

/* El filo mecanizado: el envoltorio se pinta del color de la junta y la cara se
   recorta 1,5 px por dentro. Lo que asoma es un hilo hexagonal que da grosor a
   la pieza y hace que una tuerca ciega siga leyéndose como pieza, no como un
   agujero. */
.panal--tejido .tuerca::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--borde);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: none;
}

.panal--tejido .tuerca__cara {
  position: absolute;
  inset: 1.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 13%;
  text-align: center;
  text-decoration: none;
  color: var(--hueso);
  background: var(--superficie);
  border: 0;
  border-radius: 0;
  min-height: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background 0.24s var(--salida), color 0.24s var(--salida);
}

/* La junta de la brida. En reposo NO se pinta: un anillo detrás del texto lo
   cruza y ensucia la lectura de un muro que se ojea de un vistazo. Aparece al
   pasar por encima o al llegar con el teclado, y gira como se aprieta una
   tuerca. */
.panal--tejido .tuerca__cara::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 84%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.86);
  border: 2px solid var(--naranja);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--salida), transform 0.45s var(--salida);
}

.panal--tejido .tuerca__tipo {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--naranja);
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.panal--tejido .tuerca__titulo {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  hyphens: auto;
}
/* Un escalón de letra para los rótulos largos. Cambia la LETRA, nunca el
   tamaño de la pieza: todas las tuercas miden lo mismo (regla de María). */
.panal--tejido .tuerca--largo .tuerca__titulo { font-size: 0.8125rem; }
.panal--tejido .tuerca__pie {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--ceniza);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Obra alargada: el operador ha movido la fecha de fin. Para un montador eso es
   una oportunidad (suelen hacer falta refuerzos), así que se marca aparte y en
   ámbar en vez de esconderlo dentro de la línea del lugar. */
.panal--tejido .tuerca__aviso {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ambar);
  line-height: 1.2;
}

/* Familias de pieza. El color dice qué es cada una sin leer la etiqueta: la
   oferta en naranja y sobre gris medio, la parada en ámbar y sobre carbón —
   exactamente el mismo idioma que usaban las tarjetas de antes. */
.panal--tejido .tuerca--parada .tuerca__cara { background: var(--carbon-2); }
.panal--tejido .tuerca--parada .tuerca__tipo { color: var(--ambar); }

/* Tuercas ciegas: las piezas sin datos que cierran la fila. Un muro real
   también lleva tornillos que no sujetan ningún cartel. Sin texto y fuera del
   árbol de accesibilidad. */
.panal--tejido .tuerca--ciega .tuerca__cara { background: var(--carbon-2); }

/* Puntero y teclado. El foco se pinta en el envoltorio, que no está recortado:
   un `outline` sobre el hexágono se lo comería el `clip-path`. */
.panal--tejido .tuerca:has(a):hover { z-index: 2; }
.panal--tejido .tuerca:has(a:hover) .tuerca__cara { background: var(--borde); }
.panal--tejido .tuerca:has(a:hover) .tuerca__cara::after,
.panal--tejido .tuerca:has(a:focus-visible) .tuerca__cara::after {
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1);
}
.panal--tejido .tuerca:has(a:focus-visible) {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
  z-index: 2;
}
.panal--tejido .tuerca a:focus-visible { outline: 0; }

/* En pantallas estrechas la tuerca baja a unos 110 px: la letra y el aire
   interior se recortan a la vez, si no el texto choca con el corte del
   hexágono. */
@media (max-width: 30rem) {
  .panal--tejido .tuerca__cara { padding: 0 10%; }
  .panal--tejido .tuerca__tipo { font-size: 0.5625rem; letter-spacing: 0.06em; }
  .panal--tejido .tuerca__titulo { font-size: 0.75rem; }
  .panal--tejido .tuerca--largo .tuerca__titulo { font-size: 0.6875rem; }
  .panal--tejido .tuerca__pie { font-size: 0.625rem; line-height: 1.2; }
  .panal--tejido .tuerca__aviso { font-size: 0.5625rem; }
}

/* --- El montaje: cada tuerca entra girada y se asienta en su hueco ---------- */
.panal--anima .tuerca {
  opacity: 0;
  transform: rotate(-16deg) scale(0.82);
  transition:
    opacity 0.42s var(--salida),
    transform 0.62s var(--salida);
  transition-delay: var(--retardo, 0ms);
}
.panal--anima.panal--dentro .tuerca {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
/* Salida de emergencia: si el revelado no llegara a dispararse a tiempo, el
   muro se enseña de golpe y sin transición. Un adorno no puede ser nunca la
   razón de que algo no se vea. */
.panal--sin-espera .tuerca {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Los escalones de retardo se aplican con CLASE y no con `style`, porque en
   esta casa no se escriben estilos incrustados. Uno por pieza: el muro se monta
   tuerca a tuerca, en orden. */
.d-0  { --retardo: 0ms; }
.d-1  { --retardo: calc(var(--paso) * 1); }
.d-2  { --retardo: calc(var(--paso) * 2); }
.d-3  { --retardo: calc(var(--paso) * 3); }
.d-4  { --retardo: calc(var(--paso) * 4); }
.d-5  { --retardo: calc(var(--paso) * 5); }
.d-6  { --retardo: calc(var(--paso) * 6); }
.d-7  { --retardo: calc(var(--paso) * 7); }
.d-8  { --retardo: calc(var(--paso) * 8); }
.d-9  { --retardo: calc(var(--paso) * 9); }
.d-10 { --retardo: calc(var(--paso) * 10); }
.d-11 { --retardo: calc(var(--paso) * 11); }
.d-12 { --retardo: calc(var(--paso) * 12); }
.d-13 { --retardo: calc(var(--paso) * 13); }
.d-14 { --retardo: calc(var(--paso) * 14); }
.d-15 { --retardo: calc(var(--paso) * 15); }
.d-16 { --retardo: calc(var(--paso) * 16); }
.d-17 { --retardo: calc(var(--paso) * 17); }
.d-18 { --retardo: calc(var(--paso) * 18); }
.d-19 { --retardo: calc(var(--paso) * 19); }
.d-20 { --retardo: calc(var(--paso) * 20); }

/* ---------- Los dos lados ---------- */
.par { display: grid; gap: var(--s5); }
.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: var(--s5);
}
.panel__titulo { color: var(--hueso); }
.panel__precio {
  margin: var(--s4) 0 0;
  font-weight: 800;
  color: var(--ambar);
}
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--s3);
  color: var(--ceniza);
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--naranja);
}

/* ---------- Noticias ---------- */
.noticias { list-style: none; margin: 0; padding: 0; }
.noticias li {
  border-bottom: 1px solid var(--borde);
  padding: var(--s4) 0;
  color: var(--ceniza);
}
.noticias li:last-child { border-bottom: 0; }
.noticias a { color: var(--ceniza); }
.noticias a:hover, .noticias a:focus { color: var(--hueso); }

/* ---------- Preguntas ---------- */
.faq { margin: 0; }
.faq dt { font-weight: 700; margin-top: var(--s5); }
.faq dd { margin: var(--s2) 0 0; color: var(--ceniza); }

/* ---------- Final ---------- */
.final {
  padding: var(--s8) 0;
  text-align: center;
  background:
    radial-gradient(40rem 20rem at 50% 0%, rgba(255, 90, 31, 0.14), transparent 65%),
    var(--carbon-2);
  border-top: 1px solid var(--borde);
}
.final .bajada { margin: 0 auto; color: var(--ceniza); }
.final .botones { justify-content: center; }

/* ---------- Página de error (404) ---------- */
.error { padding: var(--s8) 0; }
.error__codigo {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: var(--s3);
}

/* ---------- Redes sociales (05/08/2026) ----------
   Los iconos se definen una sola vez en un <svg> escondido al principio del
   documento y se usan con <use>. Este bloque es el que lo esconde: nada de
   `display:none`, que en algunos navegadores se lleva por delante el <use>. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.redes__lista {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.red {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--hueso);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
}
.red:hover, .red:focus { color: var(--brasa); border-color: var(--naranja); }
.red__icono { flex: none; }

/* ---------- La publicación traída de LinkedIn ----------
   Antes de pulsar es una tarjeta normal y corriente. Después, el marco de
   LinkedIn ocupa toda la tarjeta (por eso el modificador quita el relleno). */
.incrusta {
  margin: var(--s6) 0 0;
  max-width: 32rem;
}
.incrusta__marco {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: var(--s5);
}
.incrusta__marco--cargado {
  padding: 0;
  overflow: hidden;
}
.incrusta__texto {
  margin: 0;
  color: var(--ceniza);
  font-size: 0.9375rem;
}
.incrusta__alt { margin: var(--s3) 0 0; font-size: 0.875rem; }
.incrusta__alt a { color: var(--ceniza); }
.incrusta__alt a:hover, .incrusta__alt a:focus { color: var(--brasa); }
/* Altura medida contra la publicación real: la justa para que se vea entera
   sin que aparezca una barra de desplazamiento DENTRO del marco (que en el
   móvil se comería el gesto de bajar por la página). */
.incrusta__iframe {
  display: block;
  width: 100%;
  height: 70rem;
  border: 0;
}
.incrusta__pie {
  margin: var(--s3) 0 0;
  font-size: 0.875rem;
  color: var(--ceniza);
}

/* ---------- Pie ---------- */
.pie { padding: var(--s6) 0; border-top: 1px solid var(--borde); font-size: 0.9375rem; }
.pie__nav ul {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}
.pie__nav a { color: var(--ceniza); text-decoration: none; }
.pie__nav a:hover { color: var(--hueso); }
.pie__texto { margin: 0; color: var(--ceniza); }

/* Los iconos del pie: 2,75rem = 44px, que es el tamaño mínimo cómodo para un
   dedo. Sin texto al lado, así que cada enlace lleva su `aria-label`. */
.pie__redes {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--ceniza);
}
.pie__redes a:hover, .pie__redes a:focus { color: var(--brasa); border-color: var(--naranja); }

/* ---------- Pantallas grandes ---------- */
@media (min-width: 48rem) {
  .barra__interior { flex-wrap: nowrap; }
  .nav { order: 0; width: auto; }
  .nav ul { padding-top: 0; }
  .marcador__lista { grid-template-columns: repeat(5, 1fr); }
  .rejilla { grid-template-columns: repeat(3, 1fr); }
  .par { grid-template-columns: 1fr 1fr; }
  .hero { padding: var(--s8) 0; min-height: 32rem; display: flex; align-items: center; }
  .hero__velo {
    background:
      linear-gradient(90deg, rgba(26, 26, 29, 0.95) 0%, rgba(26, 26, 29, 0.78) 42%, rgba(26, 26, 29, 0.25) 100%),
      linear-gradient(180deg, rgba(26, 26, 29, 0.55) 0%, rgba(26, 26, 29, 0.25) 40%, rgba(26, 26, 29, 0.8) 100%);
  }
}

/* ---------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO — obligatorio, no opcional. Todo lo de arriba es un
   adorno sobre una sección que ya está completa: aquí se apaga entero y el
   muro se ve igual, quieto, desde el primer fotograma.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panal--anima .tuerca {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tuerca__cara, .tuerca__cara::after { transition: none; }
}


/* ---------------------------------------------------------------------------
   PIE — regla de la casa (07/08/2026): quién opera esto y el sello legal.
   Los dos van en gris y un punto más pequeños que el resto del pie: son
   información obligatoria (§5 DDG identifica a la responsable), no un reclamo.
   --------------------------------------------------------------------------- */
.pie__operadora,
.pie__sello {
  font-size: 0.85rem;
  line-height: 1.5;
}