@charset "UTF-8";
/* =========================================================================
   imprentasantutxu.com — hoja de estilos
   Sistema de diseño: opción A «taller gráfico», aprobada el 19/08/2026.
   Papel crudo, retícula tenue, marcas de corte, cuatricromía con descaro.
   ========================================================================= */

/* --- Fuentes servidas desde el propio servidor. NUNCA Google Fonts por CDN --- */
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/fuentes/montserrat-latin-800-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:900; font-display:swap;
  src:url('/fuentes/montserrat-latin-900-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fuentes/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fuentes/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fuentes/inter-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/fuentes/inter-latin-800-normal.woff2') format('woff2');
}

:root{
  --papel:#F2EEE5; --papel2:#E8E2D5; --tinta:#14161A; --gris:#6B6862;
  --cian:#00A0D0; --magenta:#D00080; --amarillo:#F5C400; --marino:#0A1A31;
  --verde:#5CB800; --linea:#D6CFBE;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel); color:var(--tinta);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(0,0,0,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.022) 1px,transparent 1px);
  background-size:28px 28px;
}
h1,h2,h3,.tipo{font-family:Montserrat,Inter,sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1}
a{color:inherit}
img{max-width:100%}
.env{max-width:1180px;margin:0 auto;padding:0 28px}

/* Enlace de salto: invisible hasta que se llega con el tabulador */
.saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--papel);
  padding:10px 16px;z-index:100;font-weight:700}
.saltar:focus{left:0}

/* Foco visible en todo. Sin esto, la web no se puede recorrer con teclado */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--magenta);outline-offset:2px}

/* --- Tira CMYK: la firma de la casa ------------------------------------- */
.cmyk{display:flex;height:5px}
.cmyk i{flex:1}
.cmyk i:nth-child(1){background:var(--cian)}
.cmyk i:nth-child(2){background:var(--magenta)}
.cmyk i:nth-child(3){background:var(--amarillo)}
.cmyk i:nth-child(4){background:var(--tinta)}
/* En el pie el fondo YA es tinta: la cuarta banda se perdía y la tira parecía
   de tres colores. Sobre negro, el negro se representa con el papel. */
footer .cmyk i:nth-child(4){background:var(--papel)}

/* --- Aviso (vacaciones): sólo aparece si el servidor lo enciende --------- */
/* El borde de tinta arriba separa el aviso de la banda amarilla de la tira CMYK:
   sin él parecen la misma franja y la tira pierde uno de sus cuatro colores */
.aviso{background:var(--amarillo);color:var(--tinta);
  border-top:2px solid var(--tinta);border-bottom:2px solid var(--tinta)}
.aviso .env{padding-top:10px;padding-bottom:10px;font-size:14px;font-weight:600}
.aviso strong{font-weight:800}

/* --- CABECERA ------------------------------------------------------------ */
header{position:sticky;top:0;z-index:50;background:rgba(242,238,229,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;gap:26px;padding:12px 0}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{height:62px;width:auto}
.marca .nom{font-family:Montserrat,sans-serif;font-weight:900;font-size:17px;line-height:1;
  letter-spacing:-.01em;text-transform:uppercase}
.marca .nom span{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:9px;
  letter-spacing:.22em;color:var(--gris);margin-top:5px}
nav{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:600}
nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--magenta)}
nav a[aria-current="page"]{border-bottom-color:var(--magenta);font-weight:700}

/* Menú de móvil: desplegable sin una línea de JavaScript */
.plegable{display:none;margin-left:auto}
.plegable summary{list-style:none;cursor:pointer;font-family:Montserrat,sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid var(--tinta);padding:10px 14px}
.plegable summary::-webkit-details-marker{display:none}
.plegable[open] summary{background:var(--tinta);color:var(--papel)}
.plegable .lista{position:absolute;left:0;right:0;background:var(--papel);
  border-bottom:1px solid var(--linea);box-shadow:0 10px 20px rgba(0,0,0,.08);
  display:grid;padding:8px 0}
.plegable .lista a{display:block;padding:13px 28px;text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--linea)}
.plegable .lista a:last-child{border-bottom:0}

/* --- Botones ------------------------------------------------------------- */
.btn{display:inline-block;background:var(--tinta);color:var(--papel);text-decoration:none;
  font-weight:800;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 20px;border:2px solid var(--tinta);transition:.15s}
.btn:hover{background:var(--magenta);border-color:var(--magenta)}
.btn.hueco{background:transparent;color:var(--tinta)}
.btn.hueco:hover{background:var(--tinta);color:var(--papel)}

/* --- HERO ---------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:64px;padding-bottom:56px}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.5rem);margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--magenta)}
.hero p.entrada{font-size:1.14rem;color:#3A3A38;max-width:44ch;margin:0 0 30px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.sello{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:Montserrat,sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--gris);
  margin:0 0 20px}
.sello b{color:var(--tinta)}
.sello span{width:26px;height:2px;background:var(--magenta);display:inline-block}

/* Marco con marcas de corte: el encuadre de la imprenta */
.corte{position:relative;padding:16px}
.corte img{width:100%;height:auto;display:block}
.corte::before,.corte::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none}
.corte::before{top:0;left:0;border-top:1.5px solid var(--tinta);border-left:1.5px solid var(--tinta)}
.corte::after{bottom:0;right:0;border-bottom:1.5px solid var(--tinta);border-right:1.5px solid var(--tinta)}
.corte i.e1,.corte i.e2{position:absolute;width:26px;height:26px}
.corte i.e1{top:0;right:0;border-top:1.5px solid var(--tinta);border-right:1.5px solid var(--tinta)}
.corte i.e2{bottom:0;left:0;border-bottom:1.5px solid var(--tinta);border-left:1.5px solid var(--tinta)}
.pie-foto{font-size:11.5px;color:var(--gris);letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;margin-top:10px}

/* --- El atajo a los ejemplos ---------------------------------------------- */
/* La galería de trabajos estaba tan abajo en la ficha que no se veía. Este
   enlace baja hasta ella. Va debajo del pie de la foto de cabecera, tiene que
   CANTAR —es lo que más vende de la ficha— y no puede parecer un pie más:
   por eso magenta, caja y flecha. */
.a-ejemplos{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.a-ejemplos a{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;
  color:var(--magenta);border:1.5px solid var(--magenta);border-radius:2px;
  padding:8px 14px;line-height:1}
.a-ejemplos a b{font-family:Montserrat,system-ui,sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.14em}
.a-ejemplos a span{font-size:12.5px;letter-spacing:.02em}
.a-ejemplos a::after{content:"↓";font-weight:700}
.a-ejemplos a:hover,.a-ejemplos a:focus-visible{background:var(--magenta);color:var(--papel)}
.a-ejemplos small{font-size:11.5px;color:var(--gris);letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}

/* La cabecera va pegada arriba: sin este margen el salto deja el título debajo
   de ella y parece que no ha pasado nada. */
#ejemplos{scroll-margin-top:96px}
#ejemplos:focus{outline:none}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- Franja de datos ------------------------------------------------------ */
.franja{background:var(--tinta);color:var(--papel)}
.franja .env{display:flex;flex-wrap:wrap;gap:34px;padding-top:16px;padding-bottom:16px;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.franja b{color:var(--amarillo)}
.franja a{text-decoration:none}
.franja a:hover{color:var(--amarillo)}

/* --- Secciones ------------------------------------------------------------ */
section{padding:64px 0}
/* 🔴 .env lleva `padding:0 28px` y, por ser clase, GANA a `section`: en un
   <section class="env"> el aire vertical de arriba desaparecía sin avisar.
   Esta regla lo devuelve sin tocar el margen lateral. */
section.env{padding-top:64px;padding-bottom:64px}
.tit{display:flex;align-items:flex-end;gap:18px;margin:0 0 8px}
.tit h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0}
.num{font-family:Montserrat,sans-serif;font-weight:900;font-size:13px;color:var(--magenta);
  letter-spacing:.14em;padding-bottom:6px}
.sub{color:var(--gris);margin:0 0 34px;max-width:60ch}

/* --- Cuadrícula de categorías --------------------------------------------- */
.rej{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat{position:relative;display:block;text-decoration:none;background:#fff;
  border:1px solid var(--linea);overflow:hidden;transition:.18s}
.cat:hover{transform:translateY(-4px);border-color:var(--tinta);box-shadow:6px 6px 0 var(--tinta)}
/* height:auto es imprescindible: sin él, los atributos width/height del <img>
   fijan la altura y la foto sale estirada aunque el aspect-ratio esté puesto */
.cat img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.cat .et{display:block;padding:12px 13px 14px}
.cat .et strong{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:14.5px;
  letter-spacing:-.01em;line-height:1.2}
.cat .et small{display:block;color:var(--gris);font-size:11.5px;margin-top:3px}
.cat .tira{height:4px;background:var(--cian)}
.cat:nth-child(5n+2) .tira{background:var(--magenta)}
.cat:nth-child(5n+3) .tira{background:var(--amarillo)}
.cat:nth-child(5n+4) .tira{background:var(--marino)}
.cat:nth-child(5n+5) .tira{background:var(--verde)}

/* --- Bloque destacado: el comprobador ------------------------------------- */
.gratis{background:var(--marino);color:#EAF1F8}
.gratis .env{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;
  padding-top:60px;padding-bottom:60px}
.gratis h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0}
.gratis .num{color:var(--amarillo)}
.gratis p{color:#BDD0E4;margin:0 0 24px}
.gratis .btn{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.gratis .btn:hover{background:#fff;border-color:#fff}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#DCE7F2}
.checks b{color:#fff}
.tick{flex:0 0 22px;height:22px;border:2px solid var(--amarillo);color:var(--amarillo);
  display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}

/* --- Pasos numerados ------------------------------------------------------ */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.paso{border-top:3px solid var(--tinta);padding-top:16px}
.paso .n{font-family:Montserrat,sans-serif;font-weight:900;font-size:2.6rem;line-height:1;
  color:var(--tinta);margin-bottom:8px}
.paso h3{font-size:1.12rem;margin:0 0 6px}
.paso p{margin:0;color:var(--gris);font-size:14.5px}
.paso:nth-child(2){border-top-color:var(--magenta)}
.paso:nth-child(2) .n{color:var(--magenta)}
.paso:nth-child(3){border-top-color:var(--cian)}
.paso:nth-child(3) .n{color:var(--cian)}

/* --- PIE ------------------------------------------------------------------ */
footer{background:var(--tinta);color:#C9C6BF;padding:52px 0 0;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px;padding-bottom:40px}
footer h4{font-family:Montserrat,sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin:0 0 14px}
footer p{margin:0 0 8px}
footer a{color:#C9C6BF;text-decoration:none}
footer a:hover{color:var(--amarillo)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer .horario{margin-top:6px;color:#8B8880}
.redes a{font-weight:700}
.legal{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:12.5px;color:#8B8880;
  display:flex;gap:20px;flex-wrap:wrap}

/* 🔴 En pantallas muy estrechas el pie a dos columnas desbordaba: el correo
   info@imprentasantutxu.com no cabe en media columna de 320 px y empujaba el
   documento a 363 px de ancho. Una columna y las palabras largas se parten. */
@media (max-width:480px){
  .fgrid{grid-template-columns:1fr;gap:26px}
  footer a,footer p{overflow-wrap:anywhere}
}

/* --- Páginas legales ------------------------------------------------------- */
.legalidad{max-width:70ch}
.legalidad h2{font-size:1.32rem;margin:38px 0 12px;padding-top:20px;
  border-top:2px solid var(--tinta)}
.legalidad h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legalidad h3{font-size:1.02rem;margin:24px 0 8px;color:var(--magenta)}
.legalidad p{margin:0 0 14px;color:#3A3A38}
.legalidad a{color:var(--magenta)}
.legalidad .datos{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:0;
  border-top:1px solid var(--linea)}
.legalidad .datos li{display:grid;grid-template-columns:210px 1fr;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--linea);font-size:15px;color:#3A3A38}
.legalidad .datos b{font-family:Montserrat,sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gris);padding-top:3px}
.listaLegal{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14px}
.listaLegal a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linea)}
.listaLegal a:hover{color:var(--magenta);border-bottom-color:var(--magenta)}
@media (max-width:640px){
  .legalidad .datos li{grid-template-columns:1fr;gap:2px}
  .legalidad .datos b{padding-top:0}
}

/* --- Avisos de la página de Horario ---------------------------------------- */
/* Los rellena el panel (ajustes horario_aviso_arriba / horario_aviso_abajo).
   Vacíos no se pintan, así que esta caja sólo existe cuando hay algo que decir. */
.aviso-horario{background:#FFF6DA;border:1px solid rgba(240,192,0,.65);border-left:5px solid var(--amarillo);
  padding:14px 18px;margin:0 0 8px;font-size:15.5px;line-height:1.55;color:#3A3A38}
.aviso-horario b{color:var(--tinta)}

/* --- Páginas en preparación ----------------------------------------------- */
.obras{padding-top:80px;padding-bottom:90px;max-width:60ch}
.obras h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 18px}
.obras p{color:#3A3A38;font-size:1.08rem}

/* --- Puntos de ruptura ---------------------------------------------------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:34px}
  .gratis .env{grid-template-columns:1fr;gap:32px}
  .rej{grid-template-columns:repeat(3,1fr)}
  .pasos{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  nav{display:none}
  .plegable{display:block}
  header .barra > .btn{display:none}
}
@media (max-width:640px){
  .env{padding:0 18px}
  .barra{gap:12px}
  .marca img{height:46px}
  .marca .nom{font-size:14px}
  .marca .nom span{font-size:8px;letter-spacing:.16em}
  .franja .env{gap:8px;flex-direction:column}
  .acciones .btn{width:100%;text-align:center}
  .plegable .lista a{padding-left:18px;padding-right:18px}
  .hero{padding-top:38px}
  .sello{letter-spacing:.12em;font-size:10.5px}
  .sello span{width:18px}
}
@media (max-width:560px){ .rej{grid-template-columns:repeat(2,1fr)} }

/* =========================================================================
   CATÁLOGO Y FICHAS DE PRODUCTO
   Heredan el mismo sistema: papel, retícula, marcas de corte y cuatricromía.
   ========================================================================= */

/* --- Cabecera de página interior ------------------------------------------ */
.cab{padding-top:52px;padding-bottom:34px}
.cab h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 18px}
.entradilla{font-size:1.14rem;color:#3A3A38;max-width:58ch;margin:0 0 6px}
.migas{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin:0 0 16px}
.migas a{text-decoration:none;border-bottom:1px solid var(--linea)}
.migas a:hover{color:var(--magenta);border-bottom-color:var(--magenta)}
.migas span{color:var(--linea);margin:0 4px}

/* La cuadrícula de categorías se adapta al número que haya: hoy son once,
   mañana las que dé de alta el panel. Nada de cinco columnas fijas.

   🔴 El mínimo son 150 px y NO 190. Con 190, en un móvil de 390 px de ancho
      —quedan 354 útiles— dos columnas de 190 más el hueco no caben, así que
      caía a UNA sola y la portada medía 8.393 px de alto: diez pantallas.
   🔴 Y va con `!important` a propósito: esta regla vive fuera de las media
      queries y, por ir después con la misma especificidad, anulaba las de
      `.rej`. Se deja explícito para que se vea que manda ella, no por azar. */
.rej-cat{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){ .rej-cat{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px) { .rej-cat{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px) { .rej-cat{grid-template-columns:repeat(2,1fr);gap:12px} }

/* --- Cabecera de ficha de producto ---------------------------------------- */
.ficha-cab{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;
  padding-top:44px;padding-bottom:46px}
.ficha-cab h1{font-size:clamp(2.1rem,4.4vw,3.4rem);margin:0 0 16px}
.claves{list-style:none;padding:0;margin:26px 0 28px;display:grid;gap:0;
  border-top:1px solid var(--linea)}
.claves li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--linea);font-size:15px}
.claves b{font-family:Montserrat,sans-serif;font-weight:800;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);padding-top:3px}
.claves.grande li{grid-template-columns:190px 1fr;font-size:16px}
.apunte{font-size:13.5px;color:var(--gris);margin:14px 0 0;max-width:52ch}
.apunte a{color:var(--magenta)}

/* --- Bloques de texto ------------------------------------------------------ */
.texto{max-width:62ch}
.texto p{margin:0 0 16px;color:#3A3A38}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}

/* --- Lo que se puede elegir ------------------------------------------------ */
/* Sin fondo en el contenedor: cuando la última fila queda a medias, un fondo
   común deja un rectángulo vacío a la vista. El borde va en cada grupo. */
.opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.grupo{background:#fff;border:1px solid var(--linea);padding:20px 22px 22px}
.grupo h3{font-family:Montserrat,sans-serif;font-weight:800;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;margin:0 0 4px}
.grupo .ayuda{font-size:12.5px;color:var(--gris);margin:0 0 12px}
.grupo ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px}
/* Listas largas —los dieciséis modelos de sello— a dos columnas: en una sola
   dejaban un pozo de hueco al lado. La caja se ensancha para ocuparlo. */
.grupo:has(ul.larga){grid-column:span 2}
.grupo ul.larga{grid-template-columns:1fr 1fr;column-gap:22px}
@media (max-width:640px){
  .grupo:has(ul.larga){grid-column:auto}
  .grupo ul.larga{grid-template-columns:1fr}
}
.grupo li{font-size:14.5px;line-height:1.35;padding-left:14px;position:relative}
.grupo li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  background:var(--cian)}
.grupo:nth-child(5n+2) li::before{background:var(--magenta)}
.grupo:nth-child(5n+3) li::before{background:var(--amarillo)}
.grupo:nth-child(5n+4) li::before{background:var(--marino)}
.grupo:nth-child(5n+5) li::before{background:var(--verde)}
.grupo li .v{font-weight:600}
.grupo li small{display:block;color:var(--gris);font-size:12.5px}

/* --- Tramos de cantidad ---------------------------------------------------- */
.tramos{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.tramos li{border:2px solid var(--tinta);padding:12px 20px;font-family:Montserrat,sans-serif;
  font-weight:800;font-size:16px;letter-spacing:-.01em;background:#fff}

/* --- Galería de trabajos --------------------------------------------------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.galeria figure{margin:0;background:#fff;border:1px solid var(--linea)}
/* height:auto es imprescindible: los atributos width/height del <img> ganan al
   CSS y sin esto las fotos salen estiradas dentro de la caja cuadrada. */
.galeria img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.galeria figcaption{font-size:11.5px;color:var(--gris);letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;padding:10px 12px 12px;line-height:1.35}

/* --- Cierre de página: llamada + apunte lateral ---------------------------- */
.cierre{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start;
  border-top:3px solid var(--tinta);padding-top:32px}
.cierre h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 14px}
.cierre p{color:#3A3A38;max-width:56ch;margin:0 0 22px}
.prioridad{background:var(--papel2);border:1px solid var(--linea);padding:22px 24px}
.prioridad h3{font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 12px;display:flex;justify-content:space-between;gap:12px}
.prioridad h3 span{color:var(--magenta)}
.prioridad p{font-size:14px;color:#3A3A38;margin:0 0 10px;max-width:none}

/* --- Canales de contacto --------------------------------------------------- */
.canales{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.canal{display:block;text-decoration:none;background:#fff;border:1px solid var(--linea);
  padding:20px 22px 22px;transition:.18s}
.canal:hover{transform:translateY(-4px);border-color:var(--tinta);box-shadow:6px 6px 0 var(--tinta)}
.canal strong{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gris)}
/* El correo es largo y en Montserrat 900 se salía de la tarjeta: se deja que
   parta y que baje de cuerpo en pantallas estrechas. */
.canal .dato{display:block;font-family:Montserrat,sans-serif;font-weight:900;
  font-size:clamp(15px,1.45vw,19px);letter-spacing:-.01em;margin:8px 0 10px;line-height:1.15;
  overflow-wrap:anywhere}
.canal small{display:block;color:var(--gris);font-size:13px;line-height:1.45}

/* --- Tabla ----------------------------------------------------------------- */
.tabla-envuelta{overflow-x:auto;border:1px solid var(--linea);background:#fff}
.tabla{border-collapse:collapse;width:100%;font-size:14.5px;min-width:640px}
.tabla th{background:var(--tinta);color:var(--papel);text-align:left;padding:12px 16px;
  font-family:Montserrat,sans-serif;font-weight:800;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase}
.tabla td{padding:13px 16px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla td a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--linea)}
.tabla td a:hover{color:var(--magenta);border-bottom-color:var(--magenta)}
.tabla td small{display:block;color:var(--gris);font-size:12.5px;margin-top:4px;max-width:44ch}

/* El signo de aviso, para distinguirlo del de comprobado */
.tick{border-color:var(--amarillo)}

/* --- Puntos de ruptura del catálogo ---------------------------------------- */
@media (max-width:980px){
  .ficha-cab{grid-template-columns:1fr;gap:34px}
  .cierre{grid-template-columns:1fr;gap:28px}
  .dos{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
  .cab{padding-top:34px}
  .ficha-cab{padding-top:28px}
  .claves li,.claves.grande li{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .claves b{padding-top:0}
  .tramos li{padding:10px 15px;font-size:14.5px}
  .galeria{grid-template-columns:repeat(2,1fr);gap:10px}
  .opciones{grid-template-columns:1fr}
}

/* --- Impresión ------------------------------------------------------------ */
@media print{
  header,.plegable,.cmyk,.aviso,.saltar,.acciones{display:none}
  body{background:#fff;background-image:none;color:#000}
  .env{max-width:none;padding:0}
  .hero,.ficha-cab,.cierre,.dos{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .canales{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================================
   PORTADA «MUESTRARIO» — propuesta B, aprobada por Bittor el 31/08/2026
   -------------------------------------------------------------------------
   🔴 TODO va colgado de .pb, que sólo lleva el <body> de la portada.
      Las otras 31 páginas no se enteran de nada de lo que hay aquí abajo.
      Si algún día se quiere este lenguaje en toda la web, se quita el .pb
      de delante — pero eso es otra decisión y otra tanda.
   ========================================================================= */

body.pb{background:var(--tinta);color:var(--papel);background-image:none}
.pb ::selection{background:var(--amarillo);color:var(--tinta)}

/* --- cabecera oscura, sólo en la portada --- */
.pb header{background:rgba(20,22,26,.94);border-bottom:1px solid #2A2D33}
.pb header nav a{color:#CFC9BF}
.pb header nav a:hover,.pb header nav a[aria-current="page"]{color:var(--amarillo);border-bottom-color:var(--amarillo)}
.pb .marca .nom{color:var(--papel)}
.pb .marca .nom span{color:#8E8981}
.pb header .btn{background:var(--papel);border-color:var(--papel);color:var(--tinta)}
.pb header .btn:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.pb .plegable summary{border-color:var(--papel);color:var(--papel)}
.pb .plegable[open] summary{background:var(--papel);color:var(--tinta)}
.pb .plegable .lista{background:#1A1D22;border-bottom-color:#2A2D33}
.pb .plegable .lista a{border-bottom-color:#2A2D33;color:var(--papel)}

/* --- portada --- */
.pb-portada{padding:80px 0 0}
.pb-sello{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:#8E8981;margin:0 0 32px}
.pb-sello i{display:block;width:52px;height:5px;flex-shrink:0;
  background:linear-gradient(90deg,var(--cian) 0 25%,var(--magenta) 25% 50%,var(--amarillo) 50% 75%,var(--papel) 75% 100%)}
.pb-portada h1{font-size:clamp(2.9rem,8vw,6.9rem);text-transform:uppercase;letter-spacing:-.03em;line-height:.94}
.pb-dos{display:block;font-size:clamp(1.05rem,2.3vw,1.95rem);letter-spacing:-.01em;line-height:1.14;text-wrap:balance;
  color:var(--amarillo);margin-top:24px;text-transform:none;font-weight:800;max-width:30ch}
.pb-bajada{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:end;margin-top:44px;
  border-top:1px solid #2A2D33;padding-top:26px}
.pb-bajada p{color:#BFB9AF;max-width:58ch;font-size:17px;margin:0}
.pb-acc{display:flex;gap:12px;flex-wrap:wrap}

/* Botón propio de la portada: el .btn general es oscuro y aquí el fondo ya lo es */
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:2px solid var(--papel);background:var(--papel);color:var(--tinta);text-decoration:none;
  font-family:Inter,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;padding:13px 20px;transition:.15s}
.pb-btn:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.pb-btn.hueco{background:transparent;color:var(--papel)}
.pb-btn.hueco:hover{background:var(--papel);color:var(--tinta)}
.pb-btn.oscuro{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.pb-btn.oscuro:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}

/* --- tira de muestras ---------------------------------------------------
   🔴 El hueco lleva LA PROPORCIÓN DE LA FOTO. Las cabeceras son 1600 × 1050
      porque el panel las guarda así: con object-fit:contain la foto entra
      ENTERA, ni se recorta ni deja bandas. Nada de cover aquí. */
.pb-tira{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:54px;padding:0 6px}
/* Fondo TINTA, no blanco: no todas las cabeceras son apaisadas —una foto de
   galeria ascendida a cabecera desde el panel conserva sus 800 x 800— y sobre
   blanco esa celda salia como una caja blanca en medio de la pagina oscura.
   Sobre tinta, la foto entra entera y lo que sobra es fondo, no una caja. */
.pb-tira figure{margin:0;aspect-ratio:1600/1050;overflow:hidden;background:var(--tinta)}
.pb-tira picture{display:block;width:100%;height:100%}
.pb-tira img{width:100%;height:100%;object-fit:contain}

/* --- ficha técnica del taller --- */
.pb-ficha{background:var(--papel);color:var(--tinta)}
.pb-ficha .env{display:grid;grid-template-columns:repeat(4,1fr)}
.pb-ft{padding:38px 26px 34px 0;border-right:1px solid var(--linea)}
.pb-ft:nth-child(4){border-right:0}
.pb-ft:not(:first-child){padding-left:26px}
.pb-ft .cifra{font-family:Montserrat,sans-serif;font-weight:900;letter-spacing:-.045em;
  font-size:clamp(2.3rem,4.4vw,3.4rem);line-height:.9;margin:0;font-variant-numeric:tabular-nums}
.pb-ft .cifra small{font-size:.42em;letter-spacing:-.01em;margin-left:4px}
.pb-ft b{display:block;font-size:13px;font-weight:700;margin-top:14px}
.pb-ft span{display:block;font-size:13.5px;color:var(--gris);line-height:1.45;margin-top:5px}
.pb-ft:nth-child(1) .cifra{color:var(--cian)}
.pb-ft:nth-child(2) .cifra{color:var(--magenta)}
.pb-ft:nth-child(3) .cifra{color:#C69A00}
.pb-ft:nth-child(4) .cifra{color:var(--verde)}
.pb-nota{grid-column:1/-1;border-top:1px solid var(--linea);padding:14px 0 20px;
  font-size:12.5px;color:var(--gris);margin:0}

/* --- índice del muestrario --- */
.pb-indice{padding:88px 0}
.pb-cab{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:2px solid var(--papel);padding-bottom:18px;margin-bottom:8px}
.pb-cab h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;margin:0}
.pb-cab .aparte{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8E8981;font-weight:700}
.pb-idx-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start}
.pb-idx{list-style:none;margin:0;padding:0}
.pb-idx li{border-bottom:1px solid #2A2D33}
.pb-idx a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:18px 6px;text-decoration:none;transition:background .15s,padding .15s}
.pb-idx a:hover,.pb-idx a:focus-visible{background:#1C1F25;padding-left:16px}
.pb-idx .n{font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;color:#8E8981;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.pb-idx a:hover .n{color:var(--magenta)}
.pb-idx .txt strong{display:block;font-family:Montserrat,sans-serif;font-weight:900;
  font-size:clamp(1.2rem,2.2vw,1.75rem);letter-spacing:-.025em;line-height:1.05}
.pb-idx .txt small{display:block;color:#8E8981;font-size:13.5px;margin-top:5px;line-height:1.45}
.pb-idx .fl{color:#8E8981;font-size:20px;transition:.15s}
.pb-idx a:hover .fl{color:var(--amarillo);transform:translateX(4px)}
.pb-idx .mini{display:none}

.pb-visor{position:sticky;top:104px;border:1px solid #2A2D33;padding:13px;background:#1A1D22}
.pb-visor .marco{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
.pb-visor .marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .22s}
.pb-visor .marco img:first-child{opacity:1}
.pb-visor .pie{margin:11px 0 0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#8E8981;font-weight:600}

/* El visor cambia de foto sin una línea de JavaScript. Al pasar por encima de
   una fila se apagan todas y se enciende la que toca. Sin :has() se queda la
   primera encendida, que es una degradación honrada. */
.pb-idx-wrap:has(.pb-idx li:hover) .pb-visor .marco img{opacity:0}
.pb-idx-wrap:has(.pb-idx li:nth-child(1):hover) .pb-visor .marco img:nth-child(1),
.pb-idx-wrap:has(.pb-idx li:nth-child(2):hover) .pb-visor .marco img:nth-child(2),
.pb-idx-wrap:has(.pb-idx li:nth-child(3):hover) .pb-visor .marco img:nth-child(3),
.pb-idx-wrap:has(.pb-idx li:nth-child(4):hover) .pb-visor .marco img:nth-child(4),
.pb-idx-wrap:has(.pb-idx li:nth-child(5):hover) .pb-visor .marco img:nth-child(5),
.pb-idx-wrap:has(.pb-idx li:nth-child(6):hover) .pb-visor .marco img:nth-child(6),
.pb-idx-wrap:has(.pb-idx li:nth-child(7):hover) .pb-visor .marco img:nth-child(7),
.pb-idx-wrap:has(.pb-idx li:nth-child(8):hover) .pb-visor .marco img:nth-child(8),
.pb-idx-wrap:has(.pb-idx li:nth-child(9):hover) .pb-visor .marco img:nth-child(9),
.pb-idx-wrap:has(.pb-idx li:nth-child(10):hover) .pb-visor .marco img:nth-child(10),
.pb-idx-wrap:has(.pb-idx li:nth-child(11):hover) .pb-visor .marco img:nth-child(11),
.pb-idx-wrap:has(.pb-idx li:nth-child(12):hover) .pb-visor .marco img:nth-child(12),
.pb-idx-wrap:has(.pb-idx li:nth-child(13):hover) .pb-visor .marco img:nth-child(13),
.pb-idx-wrap:has(.pb-idx li:nth-child(14):hover) .pb-visor .marco img:nth-child(14),
.pb-idx-wrap:has(.pb-idx li:nth-child(15):hover) .pb-visor .marco img:nth-child(15),
.pb-idx-wrap:has(.pb-idx li:nth-child(16):hover) .pb-visor .marco img:nth-child(16){opacity:1}

/* --- hostelería --- */
.pb-gremio{background:var(--papel);color:var(--tinta)}
.pb-gremio .env{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;max-width:none;
  align-items:center}
.pb-gremio .txt{padding:76px 5vw 76px max(28px,calc((100vw - 1180px)/2 + 28px))}
.pb-gremio h2{font-size:clamp(1.9rem,3.8vw,2.9rem);text-transform:uppercase;margin:0}
.pb-gremio p{color:#43413D;margin:22px 0 0;max-width:44ch;font-size:16.5px}
.pb-lista{list-style:none;margin:26px 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.pb-lista li{padding:11px 0;border-bottom:1px solid var(--linea);font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:10px}
.pb-lista li:before{content:"";width:9px;height:9px;background:var(--magenta);flex-shrink:0}
.pb-gremio .im{background:#fff;overflow:hidden}
.pb-gremio .im img{width:100%;height:auto;aspect-ratio:1600/1050;object-fit:contain}

/* --- el archivo --- */
.pb-archivo{background:var(--marino);padding:84px 0}
.pb-archivo .env{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.pb-archivo h2{font-size:clamp(1.9rem,3.5vw,2.6rem);text-transform:uppercase;color:#fff;margin:0}
.pb-archivo p{color:#AFBDD0;margin:20px 0 28px;max-width:46ch}
.pb-pasos{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.pb-pasos li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  border:1px solid #1D3050;padding:17px 19px;background:#0C1F3B}
.pb-pasos .k{font-family:Montserrat,sans-serif;font-weight:900;font-size:13px;color:var(--amarillo);
  font-variant-numeric:tabular-nums;padding-top:2px}
.pb-pasos b{display:block;color:#fff;font-size:15.5px}
.pb-pasos b + span{color:#AFBDD0;font-size:14px;line-height:1.5;display:block;margin-top:3px}

/* --- cierre / la tienda --- */
.pb-cierre{padding:88px 0 76px}
.pb-cierre .env{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.pb-cierre h2{font-size:clamp(2.2rem,5.2vw,4rem);text-transform:uppercase;line-height:.92;margin:0}
.pb-cierre h2 em{font-style:normal;color:var(--amarillo)}
.pb-cierre .dir{color:#BFB9AF;margin:22px 0 0;font-size:17px;max-width:42ch}
.pb-cierre .pb-acc{margin-top:28px}
.pb-contacto{list-style:none;margin:0;padding:0}
.pb-contacto li{display:grid;grid-template-columns:124px 1fr;gap:18px;padding:16px 0;
  border-bottom:1px solid #2A2D33;align-items:baseline}
.pb-contacto li:first-child{border-top:1px solid #2A2D33}
.pb-contacto .k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#8E8981;font-weight:700}
.pb-contacto .v{font-family:Montserrat,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.015em}
.pb-contacto .v.corto{font-size:16px;letter-spacing:0}
.pb-contacto .v a{text-decoration:none}
.pb-contacto .v a:hover{color:var(--amarillo)}
.pb-contacto .v small{display:block;font-family:Inter,sans-serif;font-weight:400;font-size:13.5px;
  color:#8E8981;letter-spacing:0;margin-top:3px}

@media(max-width:1080px){
  .pb-idx-wrap{grid-template-columns:1fr;gap:0}
  .pb-visor{display:none}
  .pb-idx .mini{display:block;width:58px;height:58px;object-fit:contain;background:#fff}
  .pb-idx .mini.vacia{background:#22262C}
  .pb-idx a{grid-template-columns:36px 58px minmax(0,1fr) auto;gap:16px}
  .pb-idx .n{font-size:11.5px}
  .pb-ficha .env{grid-template-columns:repeat(2,1fr)}
  .pb-ft:nth-child(2){border-right:0}
  .pb-ft:nth-child(1),.pb-ft:nth-child(2){border-bottom:1px solid var(--linea)}
  .pb-ft:nth-child(3){padding-left:0}
  .pb-gremio .env{grid-template-columns:1fr}
  .pb-gremio .txt{padding:58px 28px}
  .pb-gremio .im{order:-1}
  .pb-archivo .env,.pb-cierre .env{grid-template-columns:1fr;gap:38px}
  .pb-tira{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .pb-portada{padding-top:52px}
  .pb-bajada{grid-template-columns:1fr;gap:24px}
  .pb-acc{flex-direction:column;width:100%}
  .pb-acc .pb-btn{width:100%}
  .pb-ficha .env{grid-template-columns:1fr}
  .pb-ft{border-right:0;padding-left:0!important;border-bottom:1px solid var(--linea)}
  .pb-indice,.pb-cierre{padding:52px 0}
  .pb-idx a{grid-template-columns:32px 46px minmax(0,1fr);padding:14px 4px}
  .pb-idx .mini{width:46px;height:46px}
  .pb-idx .fl{display:none}
  .pb-lista{grid-template-columns:1fr}
  /* En el movil se sirve la portada de la familia, que es cuadrada:
     el hueco toma SU proporcion para que siga entrando entera. */
  .pb-tira{grid-template-columns:repeat(2,1fr)}
  .pb-tira figure{aspect-ratio:1/1}
  .pb-contacto li{grid-template-columns:1fr;gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .pb-idx a,.pb-idx .fl,.pb-visor .marco img,.pb-btn{transition:none}
}