/* ==========================================================================
   Caso de estudio · Editorial Círculo Cultural & Temas y Libros
   Ballestastudio — hoja de estilos

   Paleta: base de papel cálido, acento corporativo teal de Ballestastudio y
   los dos colores reales de los sellos (azul Círculo Cultural, rojo Temas y
   Libros) usados solo para diferenciarlos.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca Ballestastudio.
     En el sitio principal este color se llama literalmente `--brand-blue`
     aunque tire a turquesa: es el azul de la marca y es el que se usa aquí
     para resaltar. */
  --teal:            #2699A6;
  --teal-oscuro:     #17656E;
  /* El de resaltar palabras sueltas dentro de un párrafo. Va el oscuro y no
     el de marca a secas: #2699A6 sobre el papel cálido da 2,9:1 de contraste
     y no pasa el mínimo para texto pequeño. #17656E da 6,3:1. */
  --resalte:         var(--teal-oscuro);
  --teal-claro:      #6FD9E2;   /* acento sobre fondo oscuro */
  --teal-suave:      rgba(38, 153, 166, .10);

  /* Sellos del cliente */
  --sello-cc:        #23417E;
  --sello-tyl:       #D2202B;

  /* Superficies */
  --papel:           #FAF8F4;
  --papel-alt:       #FFFFFF;
  --tinta:           #14181B;
  --tinta-fuerte:    #0B0E10;
  --texto:           #4C5459;
  --texto-tenue:     #6F787D;
  --borde:           #E8E2D8;
  --borde-fuerte:    #D8D0C3;

  /* Sombras */
  --sombra-1:  0 1px 2px rgba(20, 24, 27, .04);
  --sombra-2:  0 6px 24px rgba(20, 24, 27, .07);
  --sombra-3:  0 20px 50px rgba(20, 24, 27, .12);

  /* Tipografía */
  --display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --ui:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --label:    'Montserrat', var(--ui);

  /* Escala fluida */
  --t-xs:   clamp(.72rem,  .70rem + .10vw, .78rem);
  --t-sm:   clamp(.84rem,  .81rem + .14vw, .92rem);
  --t-base: clamp(.98rem,  .94rem + .20vw, 1.08rem);
  --t-md:   clamp(1.08rem, 1.01rem + .34vw, 1.28rem);
  --t-lg:   clamp(1.35rem, 1.18rem + .80vw, 1.85rem);
  --t-xl:   clamp(1.75rem, 1.40rem + 1.65vw, 2.90rem);
  --t-2xl:  clamp(2.30rem, 1.60rem + 3.30vw, 4.60rem);

  /* Ritmo vertical fluido */
  --paso-1: clamp(.5rem, .45rem + .25vw, .75rem);
  --paso-2: clamp(1rem, .85rem + .70vw, 1.75rem);
  --paso-3: clamp(1.75rem, 1.40rem + 1.60vw, 3rem);
  --paso-4: clamp(2.75rem, 2.10rem + 3.00vw, 5.25rem);
  --paso-5: clamp(4rem, 3.00rem + 4.80vw, 8rem);

  --ancho:      1180px;
  --ancho-texto: 68ch;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --curva: cubic-bezier(.16, 1, .3, 1);

  /* ---- Contrato que consume base.css. Mismos valores, nombres compartidos. */
  --acento:        var(--teal);
  --acento-fuerte: var(--teal-oscuro);
  --ui:            var(--ui-fuente, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --r-sm:          var(--r-sm, 8px);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* `pretty` es lo que evita que la última línea de un párrafo quede con una
   palabra suelta. Va en todo lo que lleve prosa, no solo en <p>: las listas y
   los pies de foto tenían el mismo problema. El script remata lo que el
   navegador no resuelva (bloque 6 de script.js). */
p, li, figcaption, dd, blockquote { text-wrap: pretty; }
p { margin: 0 0 var(--paso-2); }
p:last-child { margin-bottom: 0; }

/* Palabra resaltada. Se usa en los títulos de sección, un término por título:
   si se resaltan tres, no se resalta ninguno. */
.resalta { color: var(--resalte); }

a { color: var(--teal-oscuro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal); }

img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
/* La negrilla dentro de la prosa va en el azul de marca, no en tinta: son
   pocas y siempre marcan un nombre propio o el término del que va el párrafo.
   Las excepciones se apagan más abajo (las cifras de la portada ya son teal
   por su cuenta, y las etiquetas en negrilla de los pies son rótulos). */
strong { color: var(--resalte); font-weight: 600; }


.contenedor {
  width: min(92%, var(--ancho));
  margin-inline: auto;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--tinta);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
}
.salto-contenido:focus { left: 0; top: 0; color: #fff; }

/* ---------- 3. Piezas reutilizables ---------- */
.etiqueta {
  margin: 0 0 var(--paso-1);
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-oscuro);
}
.etiqueta--claro { color: rgba(255, 255, 255, .72); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--label);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--curva), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.boton--grande { padding: 16px 34px; }

.boton--solido {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 14px rgba(38, 153, 166, .3);
}
.boton--solido:hover {
  background: var(--teal-oscuro);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38, 153, 166, .38);
}

.boton--linea {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--tinta);
}
.boton--linea:hover {
  border-color: var(--teal);
  color: var(--teal-oscuro);
  background: var(--teal-suave);
}

.boton--fantasma {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}
.boton--fantasma:hover {
  background: #fff;
  color: var(--tinta);
  transform: translateY(-2px);
}

/* ---------- 4. Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, .88);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .35s var(--curva);
}
.cabecera.esta-oculta { transform: translateY(-105%); }

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso-2);
  min-height: 68px;
}

.cabecera__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cabecera__marca img { height: 32px; width: auto; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
}
.nav__lista a {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.nav__lista a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width .3s var(--curva);
}
.nav__lista a:hover,
.nav__lista a.esta-activo { color: var(--tinta); }
.nav__lista a:hover::after,
.nav__lista a.esta-activo::after { width: 100%; }

.hamburguesa {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--tinta);
  border-radius: 2px;
  transition: transform .3s var(--curva), opacity .2s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Portada ---------- */
.portada { padding-top: var(--paso-4); }

/* Titular a la izquierda, vista de montaje a la derecha. La columna de la
   imagen se fija en 520 px: es cuadrada, y dejarla elástica hacía que creciera
   en alto al ensanchar la ventana y empujara la ficha fuera de la primera
   pantalla. Con un ancho fijo, lo que se estira es la columna de texto. */
.portada__reja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: var(--paso-4);
  /* `start` y no `center`: centrado, el titular flotaba a media altura y
     dejaba un hueco arriba y otro abajo. Alineado arriba, y con el pie de la
     imagen cerrando esta columna, las dos terminan casi a la par. */
  align-items: start;
  margin-bottom: var(--paso-4);
}
.portada__texto {
  min-width: 0;
  /* Empuja el pie al fondo de la columna para que quede a la altura del borde
     inferior de la imagen en vez de pegado al párrafo de arriba. */
  display: flex;
  flex-direction: column;
  min-height: 520px;
}
.portada__texto .portada__pie { margin-top: auto; }

.portada__titulo {
  max-width: 15ch;
  margin-bottom: var(--paso-2);
  font-size: var(--t-2xl);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.portada__titulo .amp {
  font-style: italic;
  font-weight: 600;
  color: var(--teal);
}

.portada__entrada {
  max-width: 60ch;
  margin-bottom: var(--paso-3);
  font-size: var(--t-md);
  color: var(--texto);
}

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--paso-2);
  margin: 0 0 var(--paso-4);
  padding-top: var(--paso-2);
  border-top: 1px solid var(--borde);
}
.ficha dt {
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.ficha dd {
  margin: 4px 0 0;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta);
}

.portada__imagen { position: relative; min-width: 0; }
.portada__imagen img {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  cursor: zoom-in;
}

.tira figcaption {
  width: min(92%, var(--ancho));
  margin: 10px auto 0;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

/* El pie de la portada carga más peso que un pie normal: es lo único que
   explica qué se está viendo antes de que el lector baje a la sección. Vive
   en la columna de texto, no debajo de la imagen. */
.portada__pie {
  max-width: 46ch;
  padding-top: var(--paso-2);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}
.portada__pie b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sello-cc);
}
/* La imagen es una reconstrucción hecha ahora, no un render de 2019. Va en
   letra pequeña, pero va: queda al lado de piezas que sí son de la época. */
.portada__nota {
  display: block;
  margin-top: var(--paso-1);
  padding-top: var(--paso-1);
  border-top: 1px solid var(--borde);
  font-size: var(--t-xs);
}

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--paso-2);
  padding: var(--paso-3) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.cifras li { text-align: center; }
.cifras strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}
.cifras span {
  display: block;
  margin-top: 6px;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--texto-tenue);
}

/* ---------- 6. Secciones ---------- */
.seccion { padding: var(--paso-5) 0; position: relative; }
/* background-color y no background: el shorthand borraría los iconos de fondo */
.seccion--claro { background-color: var(--papel-alt); border-block: 1px solid var(--borde); }

/* ---------- 6b. Iconos editoriales de fondo ----------
   Marcas de agua en línea, una por sección, para que el papel no quede plano.
   Van como background-image: así nunca desbordan ni tocan el flujo, y no
   suman ni una petición porque son SVG en línea. */
.seccion,
.portada {
  background-repeat: no-repeat;
  background-size: clamp(120px, 14vw, 210px);
}

/* Libro abierto */
#catalogo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23DCD3C3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 28c-8-6-20-8-32-7v50c12-1 24 1 32 7 8-6 20-8 32-7V21c-12-1-24 1-32 7z'/%3E%3Cpath d='M50 28v50'/%3E%3Cpath d='M26 34h14M26 44h14M60 34h14M60 44h14'/%3E%3C/svg%3E");
  background-position: right max(2vw, 12px) top var(--paso-4);
}

/* Pluma */
#encargo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23DCD3C3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 82C33 46 56 26 84 18c3 28-13 52-42 60'/%3E%3Cpath d='M20 82l17-9'/%3E%3Cpath d='M33 71c9-15 22-26 37-32'/%3E%3C/svg%3E");
  background-position: right max(2vw, 12px) bottom var(--paso-4);
}

/* Pila de libros */
#sellos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23DCD3C3' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='20' y='62' width='60' height='13' rx='2'/%3E%3Crect x='25' y='47' width='50' height='13' rx='2'/%3E%3Crect x='18' y='32' width='64' height='13' rx='2'/%3E%3Cpath d='M30 62v13M35 47v13M28 32v13'/%3E%3C/svg%3E");
  background-position: left max(2vw, 12px) top var(--paso-4);
}

/* Marcapáginas */
#stands {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23DCD3C3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M31 17h38v66L50 68 31 83z'/%3E%3Cpath d='M42 33h16'/%3E%3C/svg%3E");
  background-position: right max(2vw, 12px) top var(--paso-4);
}

/* Gafas de lectura */
#campana {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23DCD3C3' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='29' cy='57' r='15'/%3E%3Ccircle cx='71' cy='57' r='15'/%3E%3Cpath d='M44 55h12'/%3E%3Cpath d='M14 49l6-9M86 49l-6-9'/%3E%3C/svg%3E");
  background-position: left max(2vw, 12px) bottom var(--paso-4);
}

/* Letra: la A del tipógrafo */
#impresos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23DCD3C3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 78L50 22l24 56'/%3E%3Cpath d='M35 60h30'/%3E%3Cpath d='M20 86h60'/%3E%3C/svg%3E");
  background-position: right max(2vw, 12px) top var(--paso-4);
}

/* En pantallas pequeñas los iconos compiten con el texto */
@media (max-width: 720px) {
  .seccion { background-image: none !important; }
}

.seccion__encabezado {
  max-width: var(--ancho-texto);
  margin: 0 auto var(--paso-4);
  text-align: center;
}
.seccion__encabezado h2,
.seccion__encabezado h3 { margin-bottom: var(--paso-2); font-size: var(--t-xl); }
.seccion__bajada { font-size: var(--t-md); color: var(--texto); }

.rejilla-texto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: var(--paso-4);
  align-items: start;
}
.rejilla-texto h2 { font-size: var(--t-xl); }
.prosa { max-width: var(--ancho-texto); font-size: var(--t-md); }
.prosa__sub {
  margin: var(--paso-3) 0 var(--paso-2);
  font-family: var(--label);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-oscuro);
}

.lista-marcada { display: grid; gap: 10px; font-size: var(--t-base); }
.lista-marcada li {
  position: relative;
  padding-left: 26px;
}
.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 2px;
  background: var(--teal);
}

/* ---------- 7. Los sellos ---------- */
.sellos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--paso-2);
}
.sello {
  position: relative;
  padding: var(--paso-3);
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.sello::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.sello--cc::before  { background: var(--sello-cc); }
.sello--tyl::before { background: var(--sello-tyl); }
.sello:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }

.sello__logo {
  height: 62px;
  width: auto;
  margin-bottom: var(--paso-2);
  object-fit: contain;
}
.sello h3 { font-size: var(--t-lg); }
.sello__rol {
  margin: 4px 0 var(--paso-2);
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sello--cc  .sello__rol { color: var(--sello-cc); }
.sello--tyl .sello__rol { color: var(--sello-tyl); }

.sello__lista {
  display: grid;
  gap: 8px;
  margin-top: var(--paso-2);
  padding-top: var(--paso-2);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}
.sello__lista li::before { content: '— '; color: var(--borde-fuerte); }

/* ---------- 8. Catálogo ---------- */
.catalogo {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 2fr);
  gap: var(--paso-3);
  align-items: start;
}
.catalogo__portada img {
  width: 100%;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-3);
  cursor: zoom-in;
  transition: transform .4s var(--curva);
}
.catalogo__portada img:hover { transform: translateY(-6px) scale(1.01); }
.catalogo__portada figcaption,
.catalogo__paginas figcaption {
  margin-top: 8px;
  font-family: var(--label);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Columnas fijas, no auto-fill: son 12 páginas y 12 divide exacto en 4, 3 y 2.
   Con auto-fill el navegador puede dar 5 columnas y dejar dos huérfanas. */
.catalogo__paginas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--paso-2);
}
.catalogo__paginas img {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-1);
  cursor: zoom-in;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), border-color .35s;
}
.catalogo__paginas img:hover {
  transform: translateY(-5px);
  border-color: var(--teal);
  box-shadow: var(--sombra-2);
}

.nota-descarga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paso-2);
  margin-top: var(--paso-3);
  padding-top: var(--paso-3);
  border-top: 1px solid var(--borde);
}
.nota-descarga span { font-size: var(--t-xs); color: var(--texto-tenue); }

/* ---------- 9. Stands ---------- */
/* Bloque de presentación de cada stand. Va separado de las imágenes a
   propósito: el texto necesita su propio aire, no colgar del render. */
.stand-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--paso-3);
  align-items: start;
  margin: var(--paso-5) 0 var(--paso-4);
  padding: var(--paso-2) 0 var(--paso-2) var(--paso-3);
  border-left: 3px solid var(--borde-fuerte);
}
.stand-intro--cc  { border-left-color: var(--sello-cc); }
.stand-intro--tyl { border-left-color: var(--sello-tyl); }

.stand-intro__sello {
  margin-bottom: 6px;
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.stand-intro--cc  .stand-intro__sello { color: var(--sello-cc); }
.stand-intro--tyl .stand-intro__sello { color: var(--sello-tyl); }

.stand-intro h3 { margin-bottom: var(--paso-2); font-size: var(--t-lg); }
.stand-intro__texto { max-width: 54ch; font-size: var(--t-base); }

.stand-intro__datos {
  display: grid;
  gap: 0;
  margin: 0;
  align-self: center;
}
.stand-intro__datos > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--paso-2);
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
}
.stand-intro__datos > div:first-child { border-top: 1px solid var(--borde); }
.stand-intro__datos dt {
  flex-shrink: 0;
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.stand-intro__datos dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: right;
  color: var(--tinta);
}

/* minmax(0,…) para que un alzado de 1800 px no ensanche la columna: los ítems
   de rejilla traen min-width:auto y sacarían la página de cuadro. */
.tiras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--paso-2);
  margin-bottom: var(--paso-3);
}
.tira { min-width: 0; background: #EFEAE2; }
.tira img { width: 100%; cursor: zoom-in; }

/* Pliego técnico: el arte con sus cotas reales encima. Las líneas son de la
   página, no del archivo original — los artes no llevan marcas de impresión. */
.tira--tecnica { background: transparent; }
.pliego {
  position: relative;
  width: min(92%, var(--ancho));
  margin-inline: auto;
  padding: 34px 58px 12px 12px;
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
}
.pliego img { display: block; }

.pliego__cota {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--teal-oscuro);
  white-space: nowrap;
}
/* Los <i> son los brazos de la línea de cota */
.pliego__cota i { display: block; background: var(--teal); }

.pliego__cota--ancho {
  top: 12px;
  left: 12px;
  right: 58px;
}
.pliego__cota--ancho i { flex: 1; height: 1px; }
.pliego__cota--ancho::before,
.pliego__cota--ancho::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  margin-top: -4px;
  background: var(--teal);
}
.pliego__cota--ancho::before { left: 0; }
.pliego__cota--ancho::after  { right: 0; }

.pliego__cota--alto {
  top: 34px;
  bottom: 12px;
  right: 16px;
  flex-direction: column;
  writing-mode: vertical-rl;
}
.pliego__cota--alto i { flex: 1; width: 1px; }
.pliego__cota--alto::before,
.pliego__cota--alto::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 9px;
  height: 1px;
  margin-left: -4px;
  background: var(--teal);
}
.pliego__cota--alto::before { top: 0; }
.pliego__cota--alto::after  { bottom: 0; }

/* Especificaciones de producción en el pie del pliego */
.tira--tecnica figcaption b {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font-family: var(--label);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--teal-oscuro);
}

.marca-ferial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: var(--paso-2);
  align-items: center;
  margin-top: var(--paso-3);
}
.marca-ferial img {
  width: 100%;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-1);
  cursor: zoom-in;
}
.marca-ferial figcaption {
  margin-top: 8px;
  font-family: var(--label);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ---------- 9b. Franjas diagonales del stand técnico ----------
   Seis piezas en bandas inclinadas. El sesgo va en la banda y se deshace en el
   contenido, para que la imagen y el rótulo no salgan deformados. */
/* Párrafo de apoyo que va justo encima de un grupo de imágenes. `.guia` es la
   versión neutra, fuera de la sección de franjas: la usa el bloque de alzados
   del stand infantil.

   ESTOS TEXTOS SE ESCRIBEN PARA QUE QUEPAN EN UNA LÍNEA. Van pegados a la
   imagen de abajo, y partidos en dos se leen como un párrafo huérfano en vez de
   como un rótulo. El contenedor da 631 px: si al editarlos se pasan de ahí, hay
   que recortarlos, no ensanchar la caja. */
.guia,
.franjas__guia {
  max-width: var(--ancho-texto);
  margin-bottom: var(--paso-2);
  font-size: var(--t-sm);
}

.franjas-envoltura {
  overflow: hidden;          /* recorta las puntas que deja el sesgo */
  margin-bottom: var(--paso-3);
}
.franjas {
  display: flex;
  gap: 7px;
  height: clamp(330px, 40vw, 520px);
  /* Se desborda a los lados a propósito: así las bandas de los extremos
     llegan al filo de la pantalla en vez de dejar un triángulo vacío. */
  margin-inline: -7%;
}

.franja {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: #D8D2C7;
  transform: skewX(-13deg);
  transition:
    flex-grow .55s var(--curva),
    transform .7s var(--curva),
    opacity .7s ease;
}

/* La entrada solo se prepara si hay JS: sin él, las franjas se quedarían
   en opacity 0 porque nadie añadiría la clase que las enciende. */
.con-js .franja {
  transform: skewX(-13deg) translateY(46px);
  opacity: 0;
}
.con-js .franjas.esta-visible .franja {
  transform: skewX(-13deg) translateY(0);
  opacity: 1;
  transition-delay: calc(var(--i) * 85ms), calc(var(--i) * 85ms), calc(var(--i) * 85ms);
}

.franja__medio {
  position: absolute;
  inset: 0;
  transform: skewX(13deg) scale(1.3);   /* deshace el sesgo y tapa las esquinas */
}
.franja__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.92);
  transition: filter .5s ease, transform .9s var(--curva);
}

/* Velo inferior para que el rótulo se lea sobre cualquier imagen */
.franja::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(11, 14, 16, .82), transparent);
  transition: opacity .4s ease;
  pointer-events: none;
}

.franja__rotulo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--paso-2) 18% var(--paso-2) 14%;
  transform: skewX(13deg);
  pointer-events: none;
}
.franja__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .55);
  transition: color .35s ease;
}
.franja__nombre {
  display: block;
  margin-top: 4px;
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  transition: color .35s ease;
}

/* Filete de acento que sube desde abajo */
.franja__rotulo::before {
  content: '';
  position: absolute;
  left: 14%;
  bottom: calc(var(--paso-2) - 8px);
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width .45s var(--curva);
}

.franja:hover,
.franja:focus-visible {
  flex-grow: 2.2;
}
.franja:hover .franja__medio img,
.franja:focus-visible .franja__medio img {
  filter: none;
  transform: scale(1.05);
}
.franja:hover .franja__num,
.franja:focus-visible .franja__num { color: #fff; }
.franja:hover .franja__nombre,
.franja:focus-visible .franja__nombre { color: var(--teal-claro); }
.franja:hover .franja__rotulo::before,
.franja:focus-visible .franja__rotulo::before { width: 42px; }

/* Al destacar una, las demás se apagan un poco */
.franjas:hover .franja:not(:hover) { flex-grow: .82; }
.franjas:hover .franja:not(:hover)::after { opacity: .55; }

/* ---------- 9c. Modelo 3D ---------- */
.modelo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--paso-3);
  align-items: center;
  margin-top: var(--paso-4);
  padding: var(--paso-3);
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
}
.seccion--claro .modelo { background: var(--papel); }

.modelo__texto { min-width: 0; }
.modelo h3 { margin-bottom: var(--paso-2); font-size: var(--t-lg); }

.modelo__accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--paso-1);
  text-align: center;
}
.modelo__accion span { font-size: var(--t-xs); color: var(--texto-tenue); }

/* Los cuatro datos van en una sola fila. Con `wrap` y el relleno de antes,
   «Color» se caía a una segunda línea él solo y parecía un error. Ahora no
   envuelven: el relleno es fluido y se estrecha antes que partirse. */
.modelo__medidas {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
}
.modelo__medidas > div {
  min-width: 0;
  padding: 0 clamp(10px, 1.4vw, 22px);
  border-left: 1px solid var(--borde);
}
/* El valor no se parte: prefiero que se encoja la caja a que «6,30 m por
   cara» se rompa en dos renglones dentro de su columna. */
.modelo__medidas dt,
.modelo__medidas dd { white-space: nowrap; }
.modelo__medidas > div:first-child { border-left: 0; padding-left: 0; }
.modelo__medidas dt {
  font-family: var(--label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.modelo__medidas dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--tinta);
}

.modelo__nota {
  max-width: var(--ancho-texto);
  margin-bottom: var(--paso-2);
  font-size: var(--t-sm);
}

/* ---------- 9d. Ventana del modelo 3D ---------- */
.ventana3d {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 40px);
  background: rgba(11, 14, 16, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .26s ease;
}
.ventana3d[hidden] { display: none; }
.ventana3d.esta-abierta { opacity: 1; }

.ventana3d__caja {
  display: flex;
  flex-direction: column;
  width: min(100%, 1180px);
  height: min(100%, 800px);
  overflow: hidden;
  background: var(--papel-alt);
  border-radius: var(--r-md);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
  transform: translateY(14px) scale(.99);
  transition: transform .32s var(--curva);
}
.ventana3d.esta-abierta .ventana3d__caja { transform: none; }

.ventana3d__barra {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--paso-2);
  padding: var(--paso-2) var(--paso-3);
  border-bottom: 1px solid var(--borde);
}
.ventana3d__barra h2 { font-size: var(--t-md); }

.ventana3d__cerrar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .25s, color .25s, transform .25s var(--curva);
}
.ventana3d__cerrar:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: rotate(90deg);
}

.ventana3d__lienzo { flex: 1; min-height: 0; background: #E9E4DB; }
.ventana3d__lienzo canvas { width: 100% !important; height: 100% !important; display: block; }

.ventana3d__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso-1) var(--paso-2);
  padding: var(--paso-2) var(--paso-3);
  border-top: 1px solid var(--borde);
}
.ventana3d__pie p { margin: 0; font-size: var(--t-xs); color: var(--texto-tenue); }
.ventana3d__pie p:empty { display: none; }
.ventana3d__acciones {
  display: flex;
  align-items: center;
  gap: var(--paso-2);
  margin-left: auto;
}
.ventana3d__pista { font-size: var(--t-xs); color: var(--texto-tenue); }
.ventana3d__acciones .boton { padding: 9px 18px; }

/* ---------- 10. Mosaicos ---------- */
/* Miniaturas cuadradas y columnas fijas. Las piezas originales tienen
   proporciones muy distintas (cuadradas, verticales, banners de 4:1); si se
   dejan a su tamaño natural la rejilla queda con huecos. Recortadas al
   cuadrado la retícula es perfecta, y el visor muestra la pieza completa.
   Los conteos están escogidos para dividir exacto: campaña 12, impresos 6. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--paso-2);
}
/* Láminas: piezas impresas mostradas completas, sin recorte, sobre una lámina
   neutra. La banda apaisada abre a todo el ancho —es su proporción natural— y
   las otras cuatro van en 2×2, así no queda ninguna suelta. */
/* Las cinco piezas tienen proporciones muy distintas —una es 4:1, otra es
   vertical— así que en rejilla uniforme siempre sobraba hueco al final.
   El reparto 0,886fr : 1fr está resuelto para que las dos columnas terminen a
   la misma altura con las piezas a tamaño natural, contando el marco de cada
   lámina (10 px de padding + 1 px de borde). Como las alturas escalan de forma
   lineal con el ancho, la proporción se sostiene en cualquier pantalla.
   Si cambias una pieza o el padding, hay que rehacer la cuenta. */
.laminas {
  display: grid;
  grid-template-columns: 0.886fr 1fr;
  gap: var(--paso-2);
  align-items: start;
}
.laminas__col {
  display: flex;
  flex-direction: column;
  gap: var(--paso-2);
  min-width: 0;
}
.laminas figure {
  min-width: 0;
  padding: 10px;
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), border-color .35s;
}
.laminas figure:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: var(--sombra-2);
}
/* Tamaño natural, sin recorte ni caja fija: es lo que hace que la cuenta cierre */
.laminas img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: zoom-in;
}

.mosaico img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: var(--papel-alt);
  box-shadow: var(--sombra-1);
  cursor: zoom-in;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), border-color .35s;
}
.mosaico img:hover {
  transform: translateY(-5px);
  border-color: var(--teal);
  box-shadow: var(--sombra-2);
}

/* ---------- 11. Cierre ---------- */
.cierre {
  padding: var(--paso-5) 0;
  background:
    radial-gradient(120% 120% at 15% 0%, #1E7F8A 0%, transparent 55%),
    linear-gradient(160deg, #15606A 0%, #0E4750 100%);
  color: rgba(255, 255, 255, .84);
}
.cierre__caja { max-width: 780px; text-align: center; }
.cierre h2 {
  margin-bottom: var(--paso-2);
  font-size: var(--t-xl);
  color: #fff;
}
.cierre__texto {
  margin-inline: auto;
  max-width: 56ch;
  font-size: var(--t-md);
  color: rgba(255, 255, 255, .82);
}
.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--paso-2);
  margin-top: var(--paso-3);
}
.cierre__acciones .boton--solido {
  background: #fff;
  color: var(--teal-oscuro);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.cierre__acciones .boton--solido:hover { background: var(--papel); color: var(--tinta); }
.cierre__pie {
  margin-top: var(--paso-3);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .6);
}

/* ---------- 12. Pie ----------
   Vive completo en base.css, igual que en los demás casos de estudio.
   Los colores salen de --acento / --acento-fuerte, declarados arriba. */

/* ---------- 14. Visor de imágenes ---------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 48px);
  background: rgba(11, 14, 16, .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}
.visor[hidden] { display: none; }
.visor.esta-abierto { opacity: 1; }

.visor__marco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--paso-2);
  max-width: 100%;
  max-height: 100%;
}
.visor__marco img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: #1B2024;
  transition: opacity .2s ease;
}
.visor__info {
  max-width: 62ch;
  text-align: center;
  color: rgba(255, 255, 255, .68);
}
.visor__info h2 {
  margin-bottom: 6px;
  font-size: var(--t-md);
  color: #fff;
}
.visor__info p { margin: 0; font-size: var(--t-sm); }
.visor__contador {
  margin-top: 10px !important;
  font-family: var(--label);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45);
}

.visor__cerrar,
.visor__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s, transform .25s var(--curva);
}
.visor__cerrar:hover,
.visor__nav:hover { background: var(--teal); transform: scale(1.06); }
.visor__cerrar { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); font-size: 1.9rem; }
.visor__nav { top: 50%; margin-top: -23px; font-size: 2rem; }
.visor__nav--prev { left: clamp(8px, 2vw, 28px); }
.visor__nav--sig  { right: clamp(8px, 2vw, 28px); }
.visor__nav[hidden] { display: none; }

/* ---------- 14b. Entradas al hacer scroll ----------
   Un solo gesto para toda la página: el elemento sube 18 px y aparece. Nada
   de escalas, giros ni rebotes — en un caso de estudio la animación guía la
   lectura, no se hace notar.

   La portada no está en la lista a propósito: se ve sin bajar, así que
   animarla sería esconder lo primero que el visitante vino a ver. Y su imagen
   es la que mide el LCP; desvanecerla empeora la métrica sin que nadie gane.

   `.con-js` es obligatorio. Sin JS nadie añadiría `.esta-dentro` y la página
   entera se quedaría invisible. Misma trampa que ya tienen las franjas.

   ⚠ ESTA LISTA VIVE TAMBIÉN EN script.js (bloque 3c) Y LAS DOS TIENEN QUE
   COINCIDIR. Está aquí y no solo en el JS por una razón concreta: el estado
   oculto tiene que existir desde la primera pintada. Poniéndolo desde el
   script, lo que ya se había dibujado se desvanecía y volvía a aparecer.

   La lista va dentro de `:where()` para que no pese nada en la cascada. Sin
   él, `.catalogo__paginas figure` y `.cifras li` pesan más que la clase que
   las enciende y se quedaban ocultas para siempre. */
/* La portada entra sola al cargar, con animación y no con observador: se ve
   sin bajar, así que no hay scroll que esperar. Al ser `animation` y no una
   clase puesta por JS, no depende de nada y no puede dejar la página en
   blanco — por eso aquí no hace falta el candado de `.con-js`. */
@keyframes entra {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.portada__texto > *,
.portada__imagen {
  animation: entra .75s var(--curva) backwards;
}
/* La imagen entra casi de primera y no de última: es la que mide el LCP y
   cada milisegundo de retardo lo empeora. Detrás va el texto, escalonado. */
.portada__imagen             { animation-delay: .06s; }
.portada__texto .etiqueta    { animation-delay: .02s; }
.portada__texto h1           { animation-delay: .10s; }
.portada__entrada            { animation-delay: .18s; }
.portada__texto .portada__pie{ animation-delay: .26s; }

.con-js :where(
  .seccion__encabezado,
  .rejilla-texto > *,
  .cifras li,
  .sello,
  .catalogo__portada,
  .catalogo__paginas figure,
  .stand-intro,
  .tira,
  .mosaico > *,
  .marca-ferial > *,
  .laminas__col > *,
  .modelo,
  .cierre__caja
) {
  opacity: 0;
  transform: translateY(18px);
}

/* La transición vive en el estado de llegada, no en el de partida: así el
   elemento nace oculto de golpe y solo hay animación al entrar. */
.con-js .esta-dentro {
  opacity: 1;
  transform: none;
  transition:
    opacity .65s ease,
    transform .65s var(--curva);
  /* El escalonado va por posición en la fila, no en el grupo: en la rejilla de
     13 páginas del catálogo un índice corrido dejaba la última esperando casi
     un segundo. Con el módulo, ninguna pasa de 210 ms. */
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- 15. Adaptación a pantallas ---------- */
@media (max-width: 1080px) {
  .rejilla-texto { grid-template-columns: 1fr; gap: var(--paso-2); }
  .modelo { grid-template-columns: 1fr; }
  .catalogo { grid-template-columns: 1fr; }
  .catalogo__portada { max-width: 380px; margin-inline: auto; }
  .stand-intro { grid-template-columns: 1fr; gap: var(--paso-2); }
  .stand-intro__datos { align-self: start; }

  /* La portada se apila: primero el titular, después la imagen. Se colapsa aquí
     y no a 900 px porque la imagen ocupa 520 px fijos y por debajo de 1080 al
     titular le quedaba menos de la mitad del ancho. */
  .portada__reja { grid-template-columns: 1fr; gap: var(--paso-3); }
  .portada__imagen { max-width: 560px; margin-inline: auto; }
  /* Apilada ya no hay imagen al lado con la que emparejar la altura, y el
     mínimo solo dejaría un hueco muerto debajo del pie. */
  .portada__texto { min-height: 0; }
}

@media (max-width: 900px) {
  .cabecera__cta { display: none; }
  .hamburguesa { display: block; }

  /* 12 páginas / 12 piezas siguen dividiendo exacto en 3 columnas */
  .catalogo__paginas,
  .mosaico { grid-template-columns: repeat(3, 1fr); }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--papel-alt);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-2);
    /* Cerrado por defecto; se abre con la clase .esta-abierto */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--curva);
  }
  .nav.esta-abierto { grid-template-rows: 1fr; }
  .nav__lista {
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Sin esto los enlaces siguen recibiendo el foco con Tab estando
       colapsados e invisibles. visibility los saca del orden de tabulación. */
    visibility: hidden;
    transition: visibility 0s linear .32s;
  }
  .nav.esta-abierto .nav__lista {
    visibility: visible;
    transition-delay: 0s;
  }
  .nav.esta-abierto .nav__lista { padding: var(--paso-1) 0 var(--paso-2); }
  .nav__lista li { border-top: 1px solid var(--borde); }
  .nav__lista li:first-child { border-top: 0; }
  .nav__lista a {
    display: block;
    padding: 14px 4vw;
    font-size: var(--t-base);
  }
  .nav__lista a::after { display: none; }

  .marca-ferial { grid-template-columns: 1fr; }
  .marca-ferial figure:first-child { max-width: 300px; margin-inline: auto; }
}

@media (max-width: 720px) {
  /* Aquí sí envuelven: cuatro columnas en 360 px no caben de ninguna manera.
     Van de dos en dos, que es una retícula, no un dato descolgado. */
  .modelo__medidas { flex-wrap: wrap; row-gap: var(--paso-2); }
  .modelo__medidas > div { flex: 1 1 45%; }
  .modelo__medidas > div:nth-child(odd) { border-left: 0; padding-left: 0; }

  /* Los alzados son panorámicas de hasta 4:1. A 360 px de ancho quedarían de
     90 px de alto e ilegibles, así que se desplazan en horizontal. */
  .tira {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .tira img {
    height: 240px;
    width: auto;
    max-width: none;
  }
  .tira figcaption::after {
    content: ' · desliza para ver el alzado completo →';
    color: var(--teal-oscuro);
  }

  /* En el pliego técnico el scroll lo lleva la lámina, no la tira. Las cotas
     dibujadas se ocultan: la misma información va en las etiquetas del pie. */
  .tira--tecnica { overflow: visible; }
  .tira--tecnica figcaption::after { content: ''; }

  /* Franjas: en móvil no caben seis a la vez, así que se deslizan.
     El sesgo baja para que las puntas no se coman tanto la imagen. */
  .franjas {
    margin-inline: 0;
    padding-inline: 4vw;
    height: 340px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .franja {
    flex: 0 0 47%;
    scroll-snap-align: center;
    transform: skewX(-8deg);
  }
  .con-js .franja { transform: skewX(-8deg) translateY(46px); }
  .con-js .franjas.esta-visible .franja { transform: skewX(-8deg) translateY(0); }
  .franja__medio { transform: skewX(8deg) scale(1.22); }
  .franja__rotulo { transform: skewX(8deg); padding-inline: 16% 14%; }
  .franja__rotulo::before { left: 16%; }
  /* Sin hover en táctil: que no se encoja nada al tocar */
  .franja:hover, .franjas:hover .franja:not(:hover) { flex-grow: 0; }
  .franjas:hover .franja:not(:hover)::after { opacity: 1; }
  .pliego {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 12px;
  }
  .pliego__cota { display: none; }

  .pie__menu a { padding: 0 clamp(8px, 3vw, 14px); }

  .visor__marco img { max-height: 62vh; }
  .visor__nav { width: 40px; height: 40px; font-size: 1.6rem; }
}

@media (max-width: 560px) {
  /* 12 y 6 también dividen exacto en 2 columnas */
  .catalogo__paginas,
  .mosaico { grid-template-columns: repeat(2, 1fr); }

  /* En una columna las piezas se ven a buen tamaño y siguen completas */
  .laminas { grid-template-columns: minmax(0, 1fr); }

  /* 16:9 en un móvil deja el modelo en 150 px de alto: se pierde */
  .modelo { padding: var(--paso-2); }
  .modelo__marco { aspect-ratio: 4 / 3; }
  .modelo__medidas > div { padding: 0 var(--paso-1); }

  .pie__salidas { justify-content: center; gap: var(--paso-1) var(--paso-3); }
}

@media (max-width: 460px) {
  .cierre__acciones .boton { width: 100%; }
  .boton--grande { padding: 15px 20px; font-size: var(--t-xs); }
}

/* ---------- 16. Preferencias del usuario ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* También el retardo: la entrada de la portada va escalonada, y sin esto
       el titular se quedaba invisible los 260 ms del escalón. */
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .cabecera, .visor, .cierre, .pie__salidas, .nota-descarga { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion { padding: 1.5rem 0; break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .75em; }
}