/* ============================================================
   PROTOTIPO AGO — hoja de estilo única
   Los colores y medidas de todo el sitio salen de las variables
   de aquí abajo. Cambia una y cambia en todas las páginas.
   ============================================================ */

/* ------------------------------------------------------------
   TIPOGRAFÍAS · descargadas 2026-08-08 de Google Fonts y alojadas
   en `fuentes/` dentro de este mismo repositorio. NO están
   instaladas en Windows y no hace falta que lo estén: el visitante
   las recibe junto con la página.
   Licencias en `fuentes/LICENCIAS.txt`.
   Solo los subconjuntos latinos y solo dos pesos (400 y 700), que
   es la restricción de KOMA. 317 KB en total.
   ------------------------------------------------------------ */
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/RobotoCondensed-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/RobotoCondensed-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/RobotoCondensed-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/RobotoCondensed-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Roboto de ancho normal — la misma familia que la Condensed, sin
   estrechar. Descargada 2026-08-08 para probarla en el logotipo. */
/* Roboto Light. Bajada el 14/08/2026 porque el nombre de las
   piezas en Exhibición se pidió más fino, y pedir font-weight:300
   sin este archivo NO adelgazaba nada: el navegador caía al 400 y
   el texto medía exactamente lo mismo. Se comprobó midiendo. */
@font-face { font-family:'Roboto'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fuentes/Roboto-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fuentes/Roboto-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/Roboto-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/Roboto-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/Roboto-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/Roboto-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Poppins — geométrica de ojo circular, la que más se parece al
   dibujo del logotipo. Muy liviana: 26 KB los cuatro archivos. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/Poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/Poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/Poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/Poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/Oswald-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/Oswald-700-latin.woff2') format('woff2'); }

@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/BarlowCondensed-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fuentes/BarlowCondensed-700-latin.woff2') format('woff2'); }

:root {
  /* ---- 2026-08-08 · INVERSIÓN ----------------------------------
     Antes: cuerpo hueso con tinta marrón. Ahora: negro puro con
     blanco encima, al modo de KOMA pero invertido. El marrón pasa
     de ser el suelo a ser un acento escaso; el color lo pone el
     material dibujado, no la interfaz.
     Todas las razones de contraste de abajo están MEDIDAS, no
     estimadas. Mínimo 4,5:1 para texto. -------------------------- */
  --tinta:    #FFFFFF;   /* texto — 21:1 sobre negro */
  --papel:    #000000;   /* fondo del cuerpo — negro puro */
  --apagado:  #A0A0A0;   /* texto secundario — 8,03:1. No bajar de
                            #767676, que es el límite (4,62:1) */
  --linea:    #2E2E2E;   /* rayas y bordes. NO es color de texto:
                            1,66:1. Es el filete de 1px, y ese es
                            todo su trabajo */

  /* OJO — al invertir, los dos rojos INTERCAMBIAN PAPELES.
     Sobre el hueso el puro no llegaba a 4,5:1 y por eso existía el
     profundo. Sobre negro es al revés:
       #FF0009 sobre negro  = 5,26:1  → sirve para texto y líneas
       #D10010 sobre negro  = 3,72:1  → ya NO sirve para texto
       blanco sobre #D10010 = 5,65:1  → sí sirve de relleno
       blanco sobre #FF0009 = 4,00:1  → NO poner blanco encima del vivo
     Conclusión: el vivo escribe, el profundo rellena. */
  /* 2026-08-11 · El acento pasó de rojo puro a SIENA TOSTADA.
     Se mantiene el reparto de papeles: el claro escribe, el hondo
     rellena. Contrastes medidos, no estimados:
       #E97451 sobre negro   = 7,08:1  → sirve para texto y líneas
       blanco sobre #E97451  = 2,97:1  → NO poner blanco encima
       blanco sobre #B4441F  = 5,55:1  → éste es el de relleno   */
  --realce:      #E97451;  /* texto, líneas, subrayados */
  --realce-hondo:#B4441F;  /* relleno sólido con blanco encima */
  --realce-vivo: #E97451;  /* alias antiguo, se conserva por compatibilidad */

  /* Burnt Sugar, de la paleta que él pasó. NO es color de texto:
     es para rellenar cosas pequeñas — el cuadradito que marca la
     opción escogida. Vale igual en los dos temas, que es raro y
     por eso está fuera del bloque del tema claro:
       sobre negro  6,46:1
       sobre blanco 3,25:1  (mínimo 3:1 para elementos no textuales) */
  --acento-claro: #D07847;

  /* El MISMO acento, pero para cuando hace de TEXTO y no de
     relleno. Auditado el 15/08/2026: --acento-claro se coló como
     color de letra en cuatro sitios (el aviso de "pides más de lo
     que hay" y la cota protagonista de los diagramas), y ahí sus
     3,25:1 sobre blanco se quedan cortos — para texto hacen falta
     4,5:1, no 3:1.
     En OSCURO es exactamente el mismo color, así que no cambia
     nada de lo que ya estaba decidido. En claro se hunde, igual
     que ya hace --realce. Medido:
       #D07847 sobre negro   6,46:1  → vale
       #D07847 sobre blanco  3,25:1  → NO vale de texto
       #A05429 sobre blanco  5,53:1  → éste sí (ver tema claro) */
  --acento-texto: #D07847;

  /* La barra vertical que marca la sección abierta en el menú.
     En oscuro basta el acento de siempre. */
  --nav-activa: #E97451;

  /* Sin sombras. KOMA no tiene ni una sola box-shadow, y sobre
     negro una sombra no se ve: lo que separa es el filete. */
  --sombra:   transparent;
  --caja:     #0D0D0D;   /* fondo de tarjetas — negro levantado un punto */
  --caja-alta:#171717;   /* la misma caja con el ratón encima */

  /* ---- RAYADO DIAGONAL -----------------------------------------
     Nació como relleno de los recuadros sin imagen del catálogo y
     le gustó lo bastante como para subirlo a detalle de marca.
     Hay dos versiones y no son intercambiables:

     --rayado        opaco, hecho de --papel y --caja. Se voltea
                     solo con el tema. Para huecos vacíos, donde
                     no hay nada debajo que tapar.
     --rayado-sutil  translúcido. Al ser gris medio a poca opacidad
                     se ve tanto sobre blanco como sobre negro, así
                     que sirve encima de CUALQUIER fondo — botón
                     claro, botón oscuro, los dos temas. Va como
                     background-image, dejando el color de fondo
                     al background-color de debajo.
     45° y 9px de paso en las dos, para que sea el mismo rayado. */
  --rayado: repeating-linear-gradient(135deg,
              var(--papel) 0 9px, var(--caja) 9px 18px);
  /* Variante MÁS MARCADA para los huecos sin foto de las
     cuadrículas (él, 14/08/2026). El --rayado normal se hace de
     --papel y --caja, que en claro son blanco y casi blanco: el
     hueco quedaba lavado y no se leía como un sitio vacío. Este
     usa los dos grises de contraste que ya se usan en el resto de
     la página, así que se voltea solo con el tema. */
  --rayado-hueco: repeating-linear-gradient(135deg,
              var(--caja) 0 9px, var(--caja-alta) 9px 18px);
  /* El translúcido ya NO es gris medio para los dos temas: eso lo
     dejaba muy marcado en claro y algo apagado en oscuro. Ahora
     cada tema lleva el suyo en --raya, y van en direcciones
     contrarias — en oscuro la raya ACLARA, en claro OSCURECE muy
     poco. Ver el bloque del tema claro más abajo. */
  /* Subió de .055 a .085: en el pie, sobre negro puro, al 5,5% no
     se veía nada. */
  --raya: rgba(255,255,255,.085);
  --rayado-sutil: repeating-linear-gradient(135deg,
              transparent 0 9px, var(--raya) 9px 18px);

  /* Madera. Acento cálido y ESCASO: sale de sus propios specs
     (los mismos del generador de isométricos), no de una paleta
     inventada. 8,69:1 sobre negro. */
  --madera:      #C9A063;  /* pino. RELLENO (hover del botón) */
  --madera-clara:#D8B98A;  /* contraenchapado 18 mm */
  /* El mismo pino, pero para cuando hace de TEXTO. En oscuro es
     idéntico; en claro se hunde (ver el bloque del tema claro).
     Antes esto era --madera a secas y el plazo "~3 semanas" de
     las tarjetas daba 2,20:1 en tema claro. */
  --madera-texto:#C9A063;

  /* El encabezado ya no necesita contrastar con el cuerpo: los dos
     son negros. Lo que lo separa es un filete de 1px. */
  --barra:       #000000;
  --barra-tinta: #FFFFFF;
  --barra-suave: #A0A0A0;
  --barra-linea: #2E2E2E;

  /* colores del sello 3D. Los originales (#2A5180 azul, #B4453C
     rojo) daban 2,59:1 y 3,86:1 sobre negro — el azul se perdía,
     el mismo problema que el acero #5A6169. Aclarados para pasar
     de 3:1 como elemento gráfico. */
  --tres:     #7BA7DE;
  --de:       #E0736A;

  --ancho:    1240px;
  --canal:    clamp(20px, 5vw, 56px);

  /* Altura común de los controles del encabezado (lupa, idioma,
     tema). Es la del conmutador de idioma, que era el del medio. */
  --alto-control: 31px;

  /* Esquinas: TODO cuadrado. Decisión suya del 2026-08-08.
     Se conservan las variables para no reescribir 40 reglas, pero
     valen 0. Si alguna vez se quiere volver a redondear, se cambia
     aquí y vuelve todo. */
  --radio:    0;
  --radio-chico: 0;
  --radio-grande: 0;

  /* La curva colgante del encabezado: eliminada. */
  --curva-barra: 0;

  /* Curva de aceleración. Es la que le da el aire de Apple:
     arranca rápido y frena suave. */
  --curva:    cubic-bezier(.22, .68, 0, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);

  /* DECISIÓN 2026-08-09 · sistema de dos letras:
       · El LOGOTIPO va en Poppins, y es una imagen (img/marca/),
         no texto. Por eso Poppins no hace falta aquí.
       · TODO lo demás del sitio va en Roboto.
     Son dos familias distintas a propósito: la geométrica firma,
     la neutra se lee. Roboto no compite con el logotipo.

     Para probar otra, cambia SOLO esta línea. Descargadas y listas
     en `fuentes/`: 'Roboto Condensed', 'Poppins', 'Barlow Condensed',
     'Oswald'. Ojo: solo hay pesos 400 y 700 de cada una. */
  --sans: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  /* La del logotipo. Desde el 2026-08-11 el logo es texto, así que
     Poppins sí hace falta en la hoja. Solo la usa .marca__texto. */
  --display: 'Poppins', 'Roboto', system-ui, sans-serif;
}

/* ============================================================
   MODO CLARO  ·  2026-08-09
   El sitio arranca en OSCURO. El visitante puede pasarlo a claro
   con el conmutador del encabezado, y la elección se guarda.
   NO sigue la preferencia del sistema a propósito: la marca es
   negra, y quien no toque nada debe ver la marca.

   Todo el modo claro son estos tokens. No hay una sola regla
   duplicada más abajo, porque el sitio entero lee de aquí.

   Razones de contraste MEDIDAS, no estimadas (mínimo 4,5:1):
     #000000 sobre blanco = 21:1
     #5A5A5A sobre blanco = 6,9:1   (límite util: #767676 = 4,54)
     #D10010 sobre blanco = 5,65:1
     blanco  sobre #B00010 = 7,36:1

   OJO, y es la trampa que ya mordió al invertir a negro: LOS DOS
   ROJOS VUELVEN A INTERCAMBIAR PAPELES.
     sobre NEGRO  -> escribe #FF0009 (5,26) · rellena #D10010
     sobre BLANCO -> escribe #D10010 (5,65) · rellena #B00010
   El #FF0009 sobre blanco solo da 4:1 y NO sirve para texto.
   ============================================================ */
:root[data-tema="claro"] {
  --tinta:    #000000;
  --papel:    #FFFFFF;
  --apagado:  #5A5A5A;
  --linea:    #DDDDDD;
  --caja:     #F4F4F4;
  --caja-alta:#EAEAEA;

  /* La raya del modo claro, mucho más floja: sobre blanco un gris
     al 14% se veía casi como una persiana. */
  --raya: rgba(0,0,0,.03);

  /* Siena tostada sobre blanco. Sobre papel claro el vivo #E97451
     solo da 2,81:1, así que aquí escribe el oscuro:
       #B4441F sobre blanco  = 5,55:1  → texto y líneas
       blanco sobre #93361A  = 7,55:1  → relleno                */
  --realce:      #B4441F;   /* texto y líneas */
  --realce-hondo:#93361A;   /* relleno con blanco encima */
  --realce-vivo: #B4441F;

  /* En claro la barra del menú va MÁS VIVA que el resto del
     acento: Burnt Orange 1923 (#C04E00) de su paleta. Al no
     llevar azul es el naranja más saturado que hay ahí, y aun así
     da 4,85:1 sobre blanco — de sobra para una barra de 3px. */
  --nav-activa: #C04E00;

  /* El encabezado deja de ser una franja oscura: es el mismo
     blanco que el cuerpo, separado por el filete de 1px. */
  --barra:       #FFFFFF;
  --barra-tinta: #000000;
  --barra-suave: #5A5A5A;
  --barra-linea: #DDDDDD;

  /* Sello 3D: sobre blanco vuelven a servir los colores originales,
     que sobre negro se perdían (2,59:1 el azul). */
  --tres:     #2A5180;      /* 8,12:1 */
  --de:       #B4453C;      /* 5,44:1 */

  /* ---- LOS DOS QUE FALTABAN (auditado el 15/08/2026) ----------
     El comentario de arriba decía "todo el modo claro son estos
     tokens", y era verdad salvo por éstos dos, que se quedaron
     con su valor oscuro. Los dos son tostados que sobre fondo
     claro no se leen. Se conserva el MISMO tono (36° y 22°); solo
     baja la luminosidad, que es lo que hace falta. Medido, no
     estimado:
       --madera  #C9A063 sobre #F4F4F4 = 2,20:1  ← fallaba
                 #7D5C2B sobre #F4F4F4 = 5,55:1
                 #7D5C2B sobre blanco  = 6,11:1
       acento    #D07847 sobre #F4F4F4 = 2,96:1  ← fallaba de texto
                 #A05429 sobre #F4F4F4 = 5,03:1
                 #A05429 sobre blanco  = 5,53:1
     OJO — y esto es la trampa de todo este arreglo: NO se tocan
     ni --madera ni --acento-claro, solo sus gemelos de texto.
     Los dos originales también hacen de RELLENO, y ahí el que
     manda es el color que va encima:
       · --acento-claro rellena el cuadradito de la opción
         escogida — a 3,25:1 cumple el mínimo de 3:1 que le toca.
       · --madera rellena el hover del botón de pedir, que lleva
         letra NEGRA encima. Negro sobre #C9A063 da 8,69:1;
         cambiándolo a #7D5C2B se caería a 3,44:1 y el botón
         quedaría ilegible justo al pasarle el ratón.
     Se probó y se midió: por eso van tokens separados. */
  --madera-texto:  #7D5C2B;
  --acento-texto:  #A05429;
}

/* El sello "3D" por defecto es blanco, que es lo seguro sobre la
   tarjeta negra. En claro la tarjeta es #F4F4F4 y el blanco
   desaparece, así que el valor por defecto pasa a negro. Las dos
   variantes que pone el JS según el brillo de la foto siguen
   mandando igual en los dos temas. */
:root[data-tema="claro"] .marca3d {
  border-color: var(--barra-tinta);
  color: var(--barra-tinta);
}

/* La franja del encabezado ya no contrasta por color, solo por el
   filete. Sin esto, en claro no se distingue del cuerpo al bajar. */
:root[data-tema="claro"] .cabecera { border-bottom-color: var(--linea); }

:root { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }

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

/* ------------------------------------------------------------
   SOLO PARA LECTORES DE PANTALLA (15/08/2026)
   Texto que no se ve pero sí se lee en voz alta. Sirve para poner
   el título de una página que a propósito no enseña titular —el
   caso de Novedades, que él dejó arrancando directo en el
   carrusel—: sin un <h1> esa página no dice de qué trata, ni a
   Google ni a quien no ve la pantalla.
   NO se usa `display:none` ni `visibility:hidden`: eso también lo
   esconde del lector, que es justo lo contrario de lo que se
   busca. La receta es sacarlo de la vista recortándolo a un píxel.
   ------------------------------------------------------------ */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--canal); }

/* --- Tipografía ------------------------------------------- */

/* Sin tracking negativo: eso se le hace a una grotesca ancha para
   apretarla. Una condensada ya viene apretada de fábrica, y
   restarle más junta las astas y ensucia el titular. */
h1, h2, h3 { font-weight: 700; letter-spacing: 0; line-height: 1.05; margin: 0; }
/* 2026-08-09 · bajado un 25%: era clamp(2.4rem, 6vw, 4.6rem) */
/* 2026-08-11 · Los titulares bajaron un 20% a petición suya.
   h1: 1,8 / 4,5vw / 3,45rem  ->  1,44 / 3,6vw / 2,76rem
   h2: 1,7 / 3,4vw / 2,6rem   ->  1,36 / 2,72vw / 2,08rem
   El clamp entero se escala, no solo el tope: si se toca solo el
   máximo, en pantallas medianas el tamaño no cambia. */
h1 { font-size: clamp(1.44rem, 3.6vw, 2.76rem); }
h2 { font-size: clamp(1.36rem, 2.72vw, 2.08rem); }
h3 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; }

.rotulo {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--apagado);
}
.bajada { color: var(--apagado); font-size: 1rem; max-width: 54ch; margin: .5rem 0 0; }

/* --- Cabecera --------------------------------------------- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--barra) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  color: var(--barra-tinta);
  border-bottom: 1px solid var(--barra-linea);
}

/* 2026-08-12 · Aquí vivía una franja rayada pegada al borde de
   abajo del encabezado. Fuera: el encabezado vuelve a separarse
   solo con el filete de 1px. El rayado se queda únicamente en el
   pie (.pie::after), que es donde le gustó. */

/* 2026-08-08 · Aquí colgaban dos cuartos de círculo invertidos del
   borde inferior de la franja. Eliminados: el encabezado ya no es
   una barra de otro color sobre el cuerpo, es el mismo negro, y lo
   único que lo separa es el filete de 1px de arriba. Nada de
   curvas en el sitio. */
.cabecera__fila {
  display: flex; align-items: center; gap: 2rem;
  height: 120px; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--canal);
  transition: height .35s var(--curva);
}
.cabecera.encogida .cabecera__fila { height: 84px; }
/* text-decoration: none hace falta desde que el logotipo es texto.
   Con las dos imágenes no se notaba; ahora .marca es un enlace con
   palabras dentro y salía subrayado. */
.marca { flex: none; display: flex; align-items: center; gap: .85rem; text-decoration: none; }

/* 2026-08-09 · el perfil crece un 15% en los tres estados:
   62→71, 44→51 y 38→44 en móvil. */
.marca__perfil {
  height: 71px; width: 71px; border-radius: 0; object-fit: cover;
  flex: none; background: var(--caja);
  transition: height .35s var(--curva), width .35s var(--curva);
}
/* ------------------------------------------------------------
   2026-08-11 · El logotipo es TEXTO, no imagen.
   Poppins 700, todo en caja baja, dos renglones alineados al ras
   del mismo borde derecho — la geometría del PNG original.
   Al ser texto hereda el color del tema: el modo claro sale solo
   y ya no hacen falta dos archivos conmutados.
   Los PNG de img/marca/ NO se borran: los usan los PDF.
   ------------------------------------------------------------ */
.marca__texto {
  font-family: var(--display, Poppins), var(--sans);
  font-weight: 700;
  font-size: 38px;
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: lowercase;
  text-align: right;
  color: var(--barra-tinta);
  white-space: nowrap;
  transition: font-size .35s var(--curva);
}
.cabecera.encogida .marca__texto { font-size: 27px; }
.cabecera.encogida .marca__perfil { height: 51px; width: 51px; }

/* La barra va oscura en los dos temas, así que el logo del
   encabezado es siempre el claro. El oscuro queda para cuando
   haga falta sobre fondo hueso. */
/* Dos archivos del mismo logotipo; se enseña el que contrasta.
   --claro  = letras BLANCAS, para el fondo negro (por defecto)
   --oscuro = letras NEGRAS, para el modo claro
   Los dos están encajados en el mismo marco (1747×886, tinta a
   la derecha en x1732, arriba en y8), así que al conmutar el
   logotipo no se mueve ni cambia de tamaño. */
/* 2026-08-11 · Aquí vivían las cuatro reglas que conmutaban
   logo.png y logo-claro.png según el tema. El logotipo es texto y
   hereda --barra-tinta, así que ya no hay nada que conmutar. */

.menu { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; }
/* 2026-08-12 · La sección activa se marcaba con un filete bajo el
   texto. Ahora la marca es una BARRA VERTICAL a la izquierda del
   nombre, de la altura del texto — como una viñeta.

   Se hace con ::before y no con border-left para que la barra
   pueda medir exactamente el alto de la línea sin estirar el
   enlace, y para poder animarla desde cero al cambiar de página.
   El padding-left está SIEMPRE puesto, también en los inactivos:
   si solo lo llevara el activo, el menú entero se desplazaría al
   cambiar de sección. */
.menu a {
  position: relative;
  /* 2026-08-12 · Sin negrita. Solo existen los pesos 400 y 700 de
     Roboto en fuentes/, así que 400 es el que hay — nada de 500
     o 600, que el navegador se inventaría deformando el trazo. */
  text-decoration: none; font-size: 1rem; font-weight: 400;
  color: var(--barra-suave); padding: .3rem 0 .3rem .62rem;
  transition: color .15s; white-space: nowrap;
}
.menu a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 1em; transform: translateY(-50%) scaleY(0);
  background: var(--nav-activa);
  transition: transform .2s var(--curva);
}
.menu a:hover { color: var(--barra-tinta); }
.menu a[aria-current="page"] { color: var(--barra-tinta); }
.menu a[aria-current="page"]::before { transform: translateY(-50%) scaleY(1); }

/* 2026-08-12 · La palabrita que sale ENCIMA del nombre de la
   sección abierta: "Tienda de" Prototipos, "Establece" Contacto.

   Va en position:absolute a propósito. Si fuera un bloque más
   dentro del enlace, la pestaña activa mediría dos renglones y
   quedaría desalineada de las demás cada vez que cambias de
   página. Así ocupa cero altura y nada se mueve. */
.menu__pre {
  position: absolute; left: .62rem; bottom: 100%;
  margin-bottom: .1rem;
  font-size: 0.75rem; line-height: 1;
  letter-spacing: .04em; white-space: nowrap;
  color: var(--barra-suave); opacity: .62;
  pointer-events: none;
}
.menu__nombre { display: block; }

/* Los tres controles de la esquina —lupa, idioma y tema— comparten
   ALTURA. Antes medían 38, 31 y 23 px y se veían desalineados. La
   altura la manda una sola variable: cámbiala y cambian los tres. */
.idioma, .tema {
  display: flex; align-items: stretch;
  height: var(--alto-control);
  border: 1px solid var(--barra-linea); border-radius: var(--radio);
  overflow: hidden; flex: none;
}
/* El rayado estuvo aquí unas horas y salió: en los controles del
   encabezado ensuciaba. Solo se queda en la franja de abajo. */
.idioma button {
  font: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: .05em;
  padding: 0 .55rem; border: 0; background: transparent;
  color: var(--barra-suave); cursor: pointer;
}
.idioma button[aria-pressed="true"] { background: var(--realce-hondo); color: #fff; }

/* Conmutador de tema, al lado del de idioma y con la misma caja.
   Los glifos de sol y luna son neutros de idioma; el texto que lee
   un lector de pantalla va en el aria-label, que sí se traduce. */
/* Idioma + tema son un solo bloque: así la fila del encabezado no
   los reparte en renglones distintos al envolver en móvil. */
.controles { display: flex; align-items: center; flex: none; }
/* 2026-08-17 · El envoltorio de lupa+idioma+tema. En escritorio no
   hace nada visible: reproduce el hueco de 2rem que antes ponía el
   gap de la fila entre la lupa y los controles. Existe para que en
   teléfono se pueda plegar el grupo entero de un golpe. */
.cabecera__utiles { display: flex; align-items: center; gap: 2rem; flex: none; }

/* 2026-08-17 · Lo que sigue es el estado de ESCRITORIO de las tres
   piezas nuevas. El de teléfono está en el bloque de 780px.

   La fila de tres accesos no existe aquí: en escritorio caben las
   cinco secciones en el menú y una fila aparte sería repetirlas. */
.barra-rapida { display: none; }

/* Cada control lleva dos rótulos, el corto y el largo. Arriba solo
   se ve el corto —«ES», el icono—, porque los siete controles
   comparten una esquina y las palabras no caben. */
.ctrl__largo { display: none; }
.ctrl__corto { display: inline; }

/* Los iconos de tema pasaron de ser caracteres (◑ ○) a SVG, así que
   necesitan medida y trazo explícitos: un SVG sin ancho se planta
   en los 300×150 que manda la especificación. */
.tema__icono { display: grid; place-items: center; }
/* El icono del AUTOMÁTICO solo sale en teléfono. Arriba ese botón
   dice «auto» con letras y nada más (él, 2026-08-17): un círculo
   medio relleno no explica que sigue la configuración del sistema,
   y con la palabra al lado sobraba. Clase propia y no `.ctrl__largo`
   porque `.tema__icono` le ganaba por orden y salían los dos. */
.tema__icono--movil { display: none; }
.tema__icono svg, .tema__icono--movil svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
}
.lupa__icono { display: grid; place-items: center; }
.tema { margin-left: .5rem; }
.tema button {
  font: inherit; font-size: 1rem; line-height: 1;
  padding: 0 .5rem; border: 0; background: transparent;
  color: var(--barra-suave); cursor: pointer;
  display: grid; place-items: center;
}
.tema button[aria-pressed="true"] { background: var(--realce-hondo); color: #fff; }
/* El tercer botón dice "auto" con letras, así que necesita su
   propio cuerpo: los otros dos son un glifo suelto. */
.tema__auto {
  font-size: 0.75rem !important; font-weight: 700;
  letter-spacing: .04em; text-transform: lowercase;
  padding: 0 .45rem !important;
}

.hamburguesa { display: none; }

/* 2026-08-11 · Este corte estaba en 900px. Subió a 1060 porque el
   menú pasó de cinco pestañas a seis (entró "Prototipos") y entre
   900 y 1060 la fila desbordaba: los botones de idioma y tema se
   salían por la derecha y aparecía barra horizontal.
   Si algún día se quita una pestaña, se puede volver a bajar. */
@media (max-width: 1060px) {
  .cabecera__fila, .cabecera.encogida .cabecera__fila { height: auto; gap: 1rem; }
  .marca { gap: .55rem; }
  .marca__texto,  .cabecera.encogida .marca__texto  { font-size: 23px; }
  .marca__perfil, .cabecera.encogida .marca__perfil { height: 44px; width: 44px; }
  .hamburguesa {
    display: block; margin-left: auto; order: 2;
    background: none; border: 0; color: inherit; cursor: pointer;
    font-size: 1.5rem; line-height: 1; padding: .2rem .4rem;
  }
  /* El orden lo lleva el GRUPO, no el idioma suelto. Estaba en
     `.idioma { order: 3 }`, y al meterlo dentro de .controles ese
     orden pasó a actuar entre hermanos del grupo: dejaba el tema
     delante del idioma. */
  /* 2026-08-17 · El orden lo lleva ahora el envoltorio .cabecera__utiles,
     que es el hijo directo de la fila. Puesto en .controles ya no
     hacía nada: .controles dejó de ser hermano de .marca. */
  .cabecera__utiles { order: 3; }
  .menu {
    order: 4; width: 100%; display: none; flex-direction: column;
    align-items: flex-start; gap: 0; margin: 0;
    border-top: 1px solid var(--linea); padding: .5rem 0 1rem;
  }
  .menu.abierto { display: flex; }
  .cabecera__fila { flex-wrap: wrap; height: auto; padding-top: .8rem; padding-bottom: .8rem; }
  /* Conserva el hueco de la izquierda: ahí va la barra vertical
     que marca la sección activa. Sin el padding-left, en móvil la
     barra se montaría encima de la primera letra. */
  .menu a { padding: .55rem 0 .55rem .62rem; font-size: 1rem; }
  /* En el menú desplegado de móvil los enlaces van en columna: si
     la palabrita siguiera absoluta se montaría sobre el enlace de
     arriba. Aquí sí puede ocupar su propio renglón. */
  .menu__pre {
    position: static; display: block; margin: 0 0 .12rem;
    font-size: 0.75rem;
  }
}

/* ------------------------------------------------------------
   2026-08-17 · TELÉFONO: se pulsa con el dedo, no con el ratón

   Medido a 375×812: los siete controles del encabezado iban entre
   29 y 34 px de lado. El mínimo que un dedo acierta sin apuntar son
   44 px (WCAG 2.5.5 / las guías de Apple y Google coinciden en esa
   cifra). Aquí se suben los siete, los renglones del menú y los dos
   enlaces del pie.

   El corte va en 780px y no en 1060: entre 780 y 1060 hay tabletas
   y ventanas de escritorio estrechas, donde el ratón sigue mandando
   y unos botones de 44px se ven bastos.
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  /* Los tres controles comparten altura por variable (ver .idioma,
     .tema y .lupa): cambiándola aquí suben los tres a la vez. */
  :root { --alto-control: 44px; }

  .hamburguesa {
    width: 44px; height: 44px; padding: 0;
    display: grid; place-items: center;
  }
  /* Sin min-width, ES/EN salían de 36px y los del tema de 29: el
     alto ya estaba bien pero seguían siendo dianas estrechas. */
  .idioma button, .tema button { min-width: 44px; }
  .tema__auto { padding: 0 !important; }


  /* WhatsApp e Instagram son la vía de contacto y median 64×23. */
  .pie__enlaces { gap: .35rem; }
  .pie__enlaces a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .6rem;
  }
  /* El primero se despega del texto de la izquierda por su relleno;
     se le quita para que siga alineado con el borde del canal. */
  .pie__enlaces a:first-child { padding-left: 0; }

  /* ============================================================
     EL ENCABEZADO DE TELÉFONO · 2026-08-17

     Antes: logotipo + hamburguesa arriba, y debajo una fila con
     SIETE controles (lupa, ES, EN, y tres de tema). Siete cosas
     que casi nadie toca ocupando la mejor franja de la pantalla,
     mientras para ir a cualquier sección había que abrir el menú.

     Ahora, decisión suya: esa segunda fila la ocupan los TRES
     destinos que importan —la tienda, el catálogo y el contacto—
     repartidos a tercios. Lupa, idioma y tema se mudan DENTRO de
     la hamburguesa, con su nombre escrito al lado, junto a
     Novedades y El taller.

         fila 1   [logotipo]              [☰]
         fila 2   [Prototipos][Exhibición][Contacto]

     Y al desplegar la hamburguesa, debajo:
         Novedades · El taller · Buscar · Español/English ·
         Claro/Oscuro/Automático
     ============================================================ */
  .cabecera__fila { gap: .7rem; }

  /* 2026-08-17 · SEGUNDA VUELTA. La hamburguesa baja a la fila de
     los tres accesos, y el logotipo se queda solo en la de arriba
     —una franja que DESAPARECE ENTERA al bajar (él)—.

         arriba del todo        al bajar
         ┌─────────────────┐      ┌─────────────────┐
         │prototipo ago     │      │Prot│Exhi│Cont│☰│
         ├────┬────┬────┬─┐      └─────────────────┘
         │Prot│Exhi│Cont│☰│           ~52px
         └────┴────┴────┴─┘
                128px

     El logotipo se lleva `width: 100%` para forzar el salto de
     renglón: la fila es un flex con wrap, y ese 100% es lo que
     empuja a los demás abajo. */
  .marca { width: 100%; order: 1; }

  /* La fila de tres, ahora compartiendo renglón con la hamburguesa:
     `flex: 1` en vez de ancho completo, para que se reparta lo que
     sobre después del botón. */
  .barra-rapida {
    order: 2; display: flex; flex: 1; min-width: 0;
    border-top: 1px solid var(--barra-linea);
    margin-top: .1rem;
  }
  .hamburguesa {
    order: 3; margin-left: 0;
    border-top: 1px solid var(--barra-linea);
    border-left: 1px solid var(--barra-linea);
    margin-top: .1rem; height: 44px;
  }
  /* A tercios exactos con flex:1. Cada uno mide unos 111px de 335,
     muy por encima de los 44 del mínimo táctil, y como van pegados
     no queda ni un hueco muerto entre ellos donde fallar el dedo. */
  .barra-rapida__a {
    flex: 1; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; text-align: center;
    /* 1rem, el mismo cuerpo que Novedades y El taller dentro de la
       hamburguesa (él, 2026-08-17). Con 0,875 los de arriba se veían
       más chicos que los de dentro, que es al revés de lo que dice
       la jerarquía: estos tres son los principales. */
    font-size: 1rem; line-height: 1.15;
    color: var(--barra-suave);
    /* El filete separador es un borde de la izquierda de cada uno
       menos el primero: así no hay bordes dobles ni sobra uno al
       final. Es 1px, que es el único grosor que usa el sitio. */
    border-left: 1px solid var(--barra-linea);
  }
  .barra-rapida__a:first-child { border-left: 0; }
  /* La sección abierta se marca con la tinta llena y una barra
     abajo, no con la vertical del menú de escritorio: aquí los
     enlaces están en fila, y una barra vertical a la izquierda del
     texto se leería como el separador de al lado. */
  .barra-rapida__a[aria-current="page"] {
    color: var(--barra-tinta);
    box-shadow: inset 0 -2px 0 var(--nav-activa);
  }

  /* --- dentro de la hamburguesa ------------------------------
     Los tres principales ya están arriba: aquí se ocultan para que
     no salgan dos veces. `display: none` los saca también del
     árbol de accesibilidad, así que un lector de pantalla tampoco
     los oye repetidos. */
  .menu a[data-principal="1"] { display: none; }
  /* 2026-08-17 · Novedades y El taller van UNO AL LADO DEL OTRO, no
     en lista (él). Se ven igual que los tres de arriba —mismo alto,
     mismo centrado, mismo filete— pero solo aparecen al desplegar.

     `auto-fit` y no `repeat(2, 1fr)`: si algún día una sección se
     queda sin nada publicado, el menú la quita y el que sobrevive
     ocupa el ancho entero en vez de dejar media fila vacía. */
  .menu {
    order: 4; width: 100%;
    display: none; flex-direction: row;
    border-top: 1px solid var(--linea);
    padding: .5rem 0 .5rem;
  }
  .menu.abierto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
  }
  .menu a {
    min-height: 44px; padding: 0 .5rem;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    border-left: 1px solid var(--barra-linea);
  }
  .menu a:first-of-type { border-left: 0; }
  /* La barra vertical del menú de escritorio marca la sección activa
     a la IZQUIERDA del texto. Aquí los enlaces van en fila y esa
     barra se confundiría con el filete separador de al lado, así que
     se apaga y se marca abajo, igual que en la fila de tres. */
  .menu a::before { display: none; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--nav-activa); }
  /* La palabrita de encima («Descubre», «Conoce»…) cabe centrada
     sobre el nombre, que es para lo que se hizo estática en móvil. */
  .menu__pre { text-align: center; }

  /* Lupa + idioma + tema pasan a ser un bloque más del desplegable.
     Se enseñan y se esconden con él; la clase la lleva la CABECERA
     y no el menú, porque son hermanos suyos y no hijos. */
  .cabecera__utiles {
    order: 5; width: 100%; display: none;
    flex-direction: column; align-items: stretch; gap: .5rem;
    padding-bottom: .4rem;
  }
  .cabecera--abierta .cabecera__utiles { display: flex; }

  /* Cada control ocupa el renglón entero, como los enlaces de
     arriba, y enseña su palabra en vez del glifo. */
  .ctrl__corto { display: none; }
  .ctrl__largo { display: inline; }

  /* La lupa se ajusta MÁS ABAJO, detrás de su regla base de la
     sección BUSCADOR: puesta aquí perdía por orden —misma
     especificidad y el `width: var(--alto-control)` viene después
     en el archivo—. Es la tercera vez que muerde lo mismo. */

  /* Idioma y tema dejan de ser dos cajitas en fila y pasan a ser
     dos grupos de botones a lo ancho, repartidos por igual. */
  .controles { flex-direction: column; align-items: stretch; gap: .5rem; }
  .idioma, .tema { height: auto; margin-left: 0; }
  .idioma { display: grid; grid-template-columns: 1fr 1fr; }
  .tema   { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .idioma button, .tema button {
    min-height: 44px; padding: .4rem .3rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .18rem; font-size: 0.8125rem; letter-spacing: .01em;
  }
  .tema__auto { font-size: 0.8125rem !important; padding: .4rem .2rem !important; }
  .tema__icono, .tema__icono--movil { display: grid; place-items: center; }
  .tema__icono svg, .tema__icono--movil svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
  }

  /* --- y el encabezado se encoge DE VERDAD ------------------
     En escritorio la fila pasa de 120 a 84px al bajar. En teléfono
     la regla de arriba le pone `height: auto` a los dos estados, o
     sea que no se encogía nada: 126px fijos de una pantalla de 812,
     pegados todo el rato.

     Al bajar, el logotipo mengua. La fila de tres NO se pliega, y
     es a propósito: es la navegación principal, y esconderla al
     hacer scroll obliga a abrir el menú para todo justo cuando el
     visitante ya se metió dentro de una página. Lo que se plegaba
     antes eran los controles, que ahora ni están. */
  .cabecera.encogida .cabecera__fila { padding-top: .3rem; padding-bottom: .3rem; row-gap: 0; }
  /* La franja del logotipo se pliega entera. Se hace con `height`
     y no con `display: none` para que se vaya animada; y la altura
     de partida tiene que ser un NÚMERO (44px, el alto de la foto de
     perfil), porque desde `auto` no hay a dónde transicionar. */
  .marca {
    /* 56 y no 44. El recorte que hace falta para la animación
       (`overflow: hidden`) se estaba comiendo el descendente de la
       «g» de «ago»: sobresalía 6,2 px por debajo. Pasa porque el
       logotipo lleva interlinea 0,92 —más apretada que la letra—,
       así que la tinta se sale de su propio renglón, y con el
       contenido centrado subir la altura solo devuelve la mitad
       —por eso 52 no bastaba y 56 se quedaba a 0,2 px—.
       Medido con la tinta real de la fuente: a 60 sobran 4 px. */
    height: 60px; overflow: hidden;
    transition: height .28s var(--curva), opacity .2s var(--curva);
  }
  .cabecera.encogida .marca {
    height: 0; opacity: 0; margin: 0; pointer-events: none;
  }
  /* La navegación se queda entera: es lo único que hay arriba
     cuando el logotipo se va, y esconderla también dejaría una
     barra vacía ocupando sitio sin servir para nada. */

  /* El desplegable de filtros se quedaba en 39px por un pelo. */
  .filtro select { min-height: 44px; }

  /* Las flechas de la tarjeta y su contador se ajustan MÁS ABAJO,
     detrás de sus reglas base: puestos aquí perdían por orden, que
     es lo que pasó la primera vez —misma especificidad, y el
     `width: 2rem` de .tarjeta__flecha viene después en el archivo—.

     Los títulos de las tarjetas y de las fichas de prototipo salen
     de 21px al medirlos y NO hay que tocarlos: llevan un ::after
     con `inset: 0` que hace pulsable la tarjeta entera. Lo que mide
     el navegador es el texto; lo que recibe el dedo es el recuadro. */
}

/* --- Botones ---------------------------------------------- */

.boton {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  padding: .8rem 1.5rem; border-radius: var(--radio);
  border: 1px solid var(--tinta); color: var(--papel);
  /* 2026-08-11 · SIN rayado. Lo tuvo unas horas y lo quitó: sobre
     un botón el patrón se lee como "deshabilitado". El rayado se
     quedó para fondos y contenedores, no para cosas pulsables. */
  background: var(--tinta);
  transition: opacity .15s;
}
.boton:hover { opacity: .82; }
.boton--linea { background: transparent; color: var(--tinta); }
.boton--ancho { width: 100%; text-align: center; }

/* --- Portada ---------------------------------------------- */

/* 2026-08-11 · Todo el aire vertical bajó a la mitad. Se quejó del
   hueco entre la cabecera y el título, y entre el título y la
   lista: eran clamp(3.5rem, 9vw, 7rem) arriba. */
.portada { padding: clamp(1.75rem, 4.5vw, 3.5rem) 0 clamp(1.25rem, 3vw, 2.25rem); }
.portada h1 { max-width: 16ch; }
.portada .acciones { display: flex; gap: .8rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* 2026-08-12 · El título de sección y su bajada van PEGADOS A LA
   DERECHA y sin negrita. Los `margin-left: auto` son necesarios:
   sin ellos el `max-width` deja la caja a la izquierda y el texto
   se alinea a la derecha dentro de una caja que no llega al borde,
   que no es lo que se ve venir al leer "pegado a la derecha".
   La portada de Novedades queda fuera: ahí el titular es el
   reclamo de la marca y va a la izquierda con sus botones. */
body:not([data-pagina="novedades"]) .portada {
  text-align: right;
}
body:not([data-pagina="novedades"]) .portada h1 {
  font-weight: 400; margin-left: auto;
}
body:not([data-pagina="novedades"]) .portada .bajada {
  margin-left: auto;
}

.seccion { padding: clamp(1.5rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--linea); }
.seccion__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}
.seccion__cabeza a { color: var(--apagado); font-size: 1rem; font-weight: 700; }

/* --- Rejilla de tarjetas ---------------------------------- */

/* 2026-08-11 · Las tarjetas dejaron de flotar separadas y pasaron
   a ser un BLOQUE PEGADO: sin huecos, divididas por un filete de
   1px y todas cuadradas. Es lo que él pidió al ver la maqueta del
   catálogo.

   El truco: la rejilla lleva gap:1px y se pinta del color del
   filete; las tarjetas van encima con el fondo de caja. Los
   "huecos" de 1px que quedan son el fondo asomándose, así que no
   hay bordes dobles ni esquinas que no cuadren. */
/* 2026-08-14 · El fondo pasó de --linea (#2E2E2E) a --caja-alta
   (#171717). Ojo, esto NO es solo el color de los filetes: como
   el fondo asoma por los huecos, la última fila incompleta se
   veía como un BLOQUE gris claro al lado de las tarjetas, y era
   lo que más cantaba de la cuadrícula. Los filetes quedan más
   tenues; es el precio de que el hueco no grite. */
.rejilla {
  display: grid;
  gap: 1px;
  background: var(--caja-alta);
  border: 1px solid var(--caja-alta);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
}

/* La cuadrícula de Exhibición: TRES por fila y separadas (él,
   14/08/2026). Al ser menos columnas cada pieza sale bastante más
   grande, que es de lo que se trataba.

   Aquí el fondo se quita: en la de Prototipos el fondo es lo que
   dibuja los filetes de 1px entre tarjetas pegadas, pero con hueco
   de verdad ese fondo se vería como un marco alrededor de todo.
   En móvil baja a una sola columna: tres piezas a 360px de ancho
   no se ven, se adivinan. */
.rejilla--tres {
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  background: none;
  border: 0;
}
@media (max-width: 900px) { .rejilla--tres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rejilla--tres { grid-template-columns: 1fr; } }

.tarjeta {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  background: var(--caja);
  padding-bottom: .85rem;
  transition: background .18s var(--curva-suave);
}
.tarjeta:hover { background: var(--caja-alta); }

/* La tarjeta de Exhibición ya no es un <a>: lleva flechas dentro y un
   enlace no puede contener botones. El enlace de verdad es el del
   título, y este ::after lo estira sobre toda la tarjeta para que se
   siga pudiendo pulsar donde sea. Mismo arreglo que .pt-ficha__abrir. */
.tarjeta { position: relative; }
.tarjeta__abrir { text-decoration: none; color: inherit; }
.tarjeta__abrir::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Las flechas y el contador, por ENCIMA de ese ::after. */
.tarjeta__flecha, .tarjeta__cuenta { z-index: 2; }
.tarjeta__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2.6rem; border: 0; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff;
  font-size: 1.35rem; line-height: 1; padding: 0;
  opacity: 0; transition: opacity .15s var(--curva-suave);
}
.tarjeta__flecha--izq { left: 0; }
.tarjeta__flecha--der { right: 0; }
.tarjeta:hover .tarjeta__flecha,
.tarjeta__flecha:focus-visible { opacity: 1; }
.tarjeta__cuenta {
  position: absolute; right: .4rem; bottom: .4rem;
  font-size: .7rem; color: #fff; background: rgba(0,0,0,.5);
  padding: .1rem .35rem; pointer-events: none;
}
/* En táctil no hay hover: si se ocultan, no hay forma de pasarlas. */
@media (hover: none) { .tarjeta__flecha { opacity: .85; } }
/* 2026-08-17 · En teléfono la flecha medía 32px de ancho y va pegada
   al borde de la tarjeta, que es justo donde peor llega el pulgar.
   El contador «1/4» iba a 11,2px: no se pulsa, pero se lee. */
@media (max-width: 780px) {
  .tarjeta__flecha { width: 44px; }
  .tarjeta__cuenta { font-size: .75rem; }
}
/* El texto lleva su propio margen; la imagen va al ras del borde. */
.tarjeta > h3,
.tarjeta > .tarjeta__meta,
.tarjeta > .tarjeta__precio { padding-left: .8rem; padding-right: .8rem; }

.tarjeta__marco {
  position: relative; background: var(--caja); border-radius: 0;
  aspect-ratio: 4 / 3; overflow: hidden;
  margin-bottom: .7rem; border-bottom: 1px solid var(--linea);
}
/* SOLO EN EXHIBICIÓN, la foto va CUADRADA (él, 06/09/2026).
   `.rejilla--tres` es la clase que js/sitio.js le pone únicamente a
   la cuadrícula de Exhibición, así que la tienda y los destacados de
   la portada se quedan en 4/3. Si algún día se quiere cuadrado en
   todas, se cambia el `aspect-ratio` de arriba y se borra esto. */
.rejilla--tres .tarjeta__marco { aspect-ratio: 1 / 1; }

.tarjeta__marco img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
/* El zoom de la foto al pasar por encima se quitó el 14/08/2026,
   por decisión suya: lo único que cambia al apuntar una pieza es
   que se aclara el fondo de la franja del nombre. */
.tarjeta:hover .tarjeta__marco img { transform: none; }
.tarjeta__vacio {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--apagado); font-size: 0.875rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--rayado-hueco);
}
/* Sin negrita en los títulos de la cuadrícula (él, 14/08/2026):
   con la categoría fuera, el nombre es lo único que hay debajo de
   la foto y en negrita pesaba demasiado. */
/* h2 y h3 juntos: Exhibición usa h2 (cuelga del h1 de la página) y
   el resto de cuadrículas h3. Se ven igual; lo que cambia es el
   nivel en el índice, no el dibujo. */
.tarjeta h3, .tarjeta h2 { margin-bottom: .2rem; font-weight: 400; }

/* En Exhibición el nombre va CENTRADO, más chico y en el peso
   más fino de Roboto. Es lo único que lleva la tarjeta debajo de
   la foto, y así pesa lo justo. */
.rejilla--tres .tarjeta h3,
.rejilla--tres .tarjeta h2 {
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 0;
}
.tarjeta__meta { color: var(--apagado); font-size: 0.875rem; }
.tarjeta__precio { font-weight: 700; margin-top: .25rem; }

.insignia {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: var(--papel); color: var(--apagado);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 0; border: 1px solid var(--linea);
}
.insignia--borrador { background: var(--realce-hondo); color: #fff; border-color: transparent; }

/* ------------------------------------------------------------
   Sello 3D — solo las letras, sin recuadro.
   El color no está pintado sobre cada letra: es un degradado
   detrás del texto, recortado con background-clip. Al pasar el
   ratón se desliza y las letras acaban con el color cambiado.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Sello 3D — marco con la misma esquina que el recuadro de la
   imagen, sin relleno: se ve la foto por detrás.
   ------------------------------------------------------------ */

.marca3d {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-weight: 700; font-size: 0.875rem; letter-spacing: .04em;
  line-height: 1; pointer-events: none; user-select: none;

  padding: .34rem .55rem;
  background: transparent;                 /* sin relleno */
  border-radius: var(--radio-chico);
  /* Por defecto BLANCO: es el valor seguro. El sello vive sobre una
     tarjeta negra, y mientras la imagen no ha cargado no hay nada
     que medir. Si arranca en negro, no se ve. */
  border: 2.5px solid var(--tinta);
  color: var(--tinta);
  transition: color .2s var(--curva-suave), border-color .2s var(--curva-suave);
}

/* La imagen resultó CLARA: el sello pasa a negro para verse encima. */
.marca3d--oscuro {
  border-color: var(--barra);
  color: var(--barra);
}

/* Sobre imagen oscura el sello negro no se ve. El JS mira el brillo
   de la esquina donde cae y, si está oscura, lo pasa a blanco.
   2026-08-08 — antes esto apuntaba a --papel, que era el hueso.
   Con la inversión --papel pasó a ser NEGRO, así que la variante
   "clara" quedó negra sobre negro: 1,08:1, invisible. Ahora apunta
   a --tinta (blanco, 21:1), que es lo que siempre quiso decir. */
.marca3d--claro {
  border-color: var(--tinta);
  color: var(--tinta);
}


/* --- Filtros ---------------------------------------------- */

.filtros {
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-end;
  padding: 1.4rem 0 1.8rem; border-bottom: 1px solid var(--linea); margin-bottom: 2.2rem;
}
.filtro { display: flex; flex-direction: column; gap: .35rem; }
.filtro label { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.filtro select {
  font: inherit; font-size: 1rem; padding: .5rem .7rem; min-width: 11rem;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.filtros__conteo { margin-left: auto; color: var(--apagado); font-size: 0.875rem; }
.filtros button {
  font: inherit; font-size: 0.875rem; background: none; border: 0; cursor: pointer;
  color: var(--apagado); text-decoration: underline; padding: .5rem 0;
}

/* --- Ficha (detalle) -------------------------------------- */

/* 2026-08-17 · Tres hijos, no dos: los botones de navegación
   (anterior · volver · siguiente) salieron de .ficha__datos para
   poder colocarse solos. Se reparten con áreas nombradas, que es
   lo único que deja poner una pieza en el hueco de arriba de una
   columna mientras otra ocupa las dos filas de al lado.

       escritorio            teléfono
       ┌──────┐┌────┐      ┌──────┐
       │      ││ nav│      │ nav  │
       │medios│└────┘      ├──────┤
       │      │┌────┐      │medios│
       └──────┘│datos      ├──────┤
                └────┘      │datos │
                              └──────┘

   El `row-gap` va aparte y pequeño: el hueco grande de `gap` es
   para separar las dos COLUMNAS, y entre los botones y el título
   que va justo debajo dejaría un vacío de 4,5rem. */
.ficha {
  display: grid; align-items: start;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: "medios nav" "medios datos";
  /* `auto 1fr` hace falta y no es decorativo. La columna de medios
     ocupa las DOS filas y es mucho más alta que nav+datos juntos,
     así que sin esto la rejilla repartía el sobrante entre las dos
     filas por igual y abría un hueco de 143px entre los botones y
     el título. Con `auto` la primera fila mide lo que miden los
     botones y el resto se lo queda la segunda. */
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0;
}
.ficha > .navpieza    { grid-area: nav; }
.ficha > .ficha__medios { grid-area: medios; }
.ficha > .ficha__datos  { grid-area: datos; }

@media (max-width: 880px) {
  /* Una sola columna, y el orden que él pidió: los botones justo
     debajo del encabezado, luego la foto grande, y las miniaturas
     al final —esas van dentro de .ficha__medios—. */
  .ficha {
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "medios" "datos";
    row-gap: 1.5rem;
  }
  /* El margen inferior de los botones lo pone ahora el row-gap;
     dejarlo puesto sumaba 2rem de más justo debajo. */
  .ficha > .navpieza { margin-bottom: 0; }
}

.ficha__medios { position: relative; }
.ficha__principal {
  position: relative;
  background: var(--caja); border-radius: var(--radio-grande); overflow: hidden;
  display: grid; place-items: center; min-height: 180px;
}
.ficha__principal img { width: 100%; height: auto; display: block; }
/* ------------------------------------------------------------
   Visor de medios — miniaturas a la izquierda, pieza grande a
   la derecha, como en una ficha de tienda.
   ------------------------------------------------------------ */

.visor-medios { display: grid; grid-template-columns: 84px 1fr; gap: .7rem; align-items: start; }

.visor-medios__tiras { display: flex; flex-direction: column; gap: .55rem; }

.tira {
  position: relative; padding: 0; cursor: pointer; flex: none;
  width: 84px; aspect-ratio: 1; overflow: hidden;
  background: var(--caja); border: 2px solid transparent;
  border-radius: var(--radio-chico);
  transition: border-color .2s var(--curva-suave), opacity .2s var(--curva-suave);
  opacity: .68;
}
.tira:hover { opacity: 1; }
.tira[aria-current="true"] { border-color: var(--realce); opacity: 1; }
.tira img, .tira video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La miniatura del 3D. Un .glb no tiene imagen que enseñar, así
   que va un rótulo — el mismo recurso que usan los prototipos. */
.tira--glifo { display: grid; place-items: center; }
.tira__glifo {
  font-size: 0.875rem; font-weight: 700; letter-spacing: .1em;
  color: var(--tinta);
}

/* el triangulito que marca cuáles son video */
.tira__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.tira__play span {
  width: 26px; height: 26px; border-radius: 0;
  background: rgba(0,0,0,.62); color: #fff;
  display: grid; place-items: center; font-size: 0.75rem; padding-left: 2px;
}

/* 2026-08-17 · CAMBIO SUYO. En teléfono la columna de miniaturas
   caía ENCIMA de la foto grande y en vertical, una debajo de otra:
   lo primero que se veía al abrir una pieza era la tira de
   miniaturas y había que bajar para ver la pieza.

   Ahora la foto va primero y las miniaturas debajo, en cuadrícula.
   Se hace con `order` y no cambiando el HTML porque en escritorio
   el orden del DOM (tiras, luego principal) es el bueno: ahí la
   columna va a la izquierda.

   El corte sube de 620 a 780 para ir con el resto del sitio. */
@media (max-width: 780px) {
  .visor-medios { grid-template-columns: 1fr; gap: .5rem; }
  .visor-medios__principal { order: 1; }
  .visor-medios__tiras     { order: 2; }
  /* Cuadrícula que se llena sola, no una fila con scroll lateral:
     una tira que se desplaza esconde la mitad de los medios detrás
     de un gesto que nadie sabe que está ahí. Así se ven todos. */
  .visor-medios__tiras {
    display: grid; flex-direction: row;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: .4rem;
  }
  .tira { width: auto; }
}

/* SIN aspect-ratio fijo: la pieza grande toma la forma del
   archivo. Antes iba a 4:3 recortando, y a una foto vertical le
   cortaba media pieza. Las miniaturas sí siguen cuadradas. */
.visor-medios__principal {
  position: relative; overflow: hidden;
  background: var(--caja); border-radius: var(--radio-grande);
  display: block; min-height: 180px;
}
.visor-medios__principal > img,
.visor-medios__principal > video {
  width: 100%; height: auto; display: block;
}

.visor-medios__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 0; border: 0; cursor: pointer; z-index: 3;
  /* Va encima de una foto, así que no sigue el tema: velo oscuro y
     glifo blanco, igual que la flecha del carrusel. Antes era crema
     con `color: var(--barra)`, y en modo claro eso quedaba blanco
     sobre casi blanco. */
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
  opacity: 0; transition: opacity .25s var(--curva-suave), transform .2s var(--curva-suave);
}
.visor-medios__principal:hover .visor-medios__flecha,
.visor-medios__flecha:focus-visible { opacity: 1; }
.visor-medios__flecha:hover { transform: translateY(-50%) scale(1.08); }
.visor-medios__flecha--izq { left: .7rem; }
.visor-medios__flecha--der { right: .7rem; }
@media (hover: none) { .visor-medios__flecha { opacity: .9; } }

.ficha__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: .6rem; margin-top: .6rem; }
.ficha__galeria img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); cursor: pointer; background: var(--caja); }

.hueco-video {
  margin-top: .6rem; border: 1px dashed var(--linea); border-radius: var(--radio);
  padding: 1.6rem; text-align: center; color: var(--apagado); font-size: 0.875rem;
}

.ficha__datos { position: sticky; top: 110px; }
@media (max-width: 880px) { .ficha__datos { position: static; } }
.ficha__datos h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: .8rem; }

.especs { border-top: 1px solid var(--linea); margin-top: 2rem; }
.especs div { display: flex; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--linea); font-size: 1rem; }
.especs dt { flex: 0 0 8.5rem; color: var(--apagado); margin: 0; }
.especs dd { margin: 0; }

/* El «cómo está hecha» de una pieza de Exhibición: texto corrido
   en párrafos. Mismo cuerpo y mismo color que la lista de al lado,
   pero sin la raya ni la sangría, que partían el texto. */
.texto-como { margin: 2rem 0 0; }
.texto-como p {
  margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.7; color: var(--tinta);
}
.texto-como p:last-child { margin-bottom: 0; }

.lista-como { list-style: none; padding: 0; margin: 2rem 0 0; }
.lista-como li {
  position: relative; padding-left: 1.5rem; margin-bottom: .85rem;
  font-size: 1rem; color: var(--tinta);
}
.lista-como li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 7px; height: 1px; background: var(--realce);
}

/* --- Configurador (piezas) -------------------------------- */

.precio-vivo {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: 0;
  margin: .3rem 0 .2rem;
}
.precio-nota { color: var(--apagado); font-size: 0.875rem; margin: 0 0 1.6rem; }

.opcion { margin-bottom: 1.5rem; }
.opcion > span {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--apagado); margin-bottom: .55rem;
}
.opcion__valores { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion__valores label {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .5rem .85rem; font-size: 1rem; cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.opcion__valores input { position: absolute; opacity: 0; pointer-events: none; }
.opcion__valores label:hover { border-color: var(--apagado); }
.opcion__valores label:has(input:checked) { border-color: var(--tinta); background: var(--caja); }
.opcion__valores small { color: var(--apagado); margin-left: .3rem; }

.disponible { display: inline-flex; align-items: center; gap: .5rem; font-size: 0.875rem; color: var(--apagado); margin-bottom: 1.2rem; }
.punto { width: 7px; height: 7px; border-radius: 0; background: var(--apagado); flex: none; }
.punto--si { background: #3E8E4E; }
.punto--no { background: #B4453C; }

/* --- Contacto --------------------------------------------- */

.contactos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.6rem; margin-top: 2.5rem; }
.contactos a {
  display: block; text-decoration: none; padding: 1.5rem;
  border: 1px solid var(--linea); border-radius: var(--radio); transition: border-color .15s;
}
.contactos a:hover { border-color: var(--tinta); }
.contactos strong { display: block; margin-top: .3rem; font-size: 1rem; letter-spacing: -.02em; }

.prosa { max-width: 62ch; }
.prosa p { margin: 0 0 1.15rem; }
.pasos { list-style: none; counter-reset: n; padding: 0; margin: 2rem 0 0; max-width: 62ch; }
.pasos li { counter-increment: n; position: relative; padding-left: 3rem; margin-bottom: 1.6rem; }
.pasos li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-weight: 700; font-size: 0.875rem; color: var(--realce); letter-spacing: .05em;
}
.pasos strong { display: block; letter-spacing: -.02em; }

/* --- El taller -------------------------------------------- */

.intro-taller {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 820px) { .intro-taller { grid-template-columns: 1fr; } }
.retrato {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%;
  background: var(--caja); border-radius: var(--radio);
}
.pie-foto { color: var(--apagado); font-size: 0.875rem; margin-top: .7rem; }

.dos-columnas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem); margin-top: 2.4rem;
}
.dos-columnas h3 { margin-bottom: .5rem; }
.dos-columnas p  { margin: 0; color: var(--apagado); font-size: 1rem; }

.lista-marcas { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.lista-marcas li {
  padding: .8rem 0; border-bottom: 1px solid var(--linea);
  display: flex; gap: 1rem; align-items: baseline; font-size: 1rem;
}
.lista-marcas b { flex: 0 0 11rem; font-weight: 700; letter-spacing: -.01em; }
.lista-marcas span { color: var(--apagado); }
@media (max-width: 560px) { .lista-marcas li { flex-direction: column; gap: .15rem; } }

/* --- Las maderas (taller.html#maderas) --------------------
   La muestra de color va DIBUJADA, no es una foto: publicar
   imágenes de otro sitio en una página comercial es material con
   derechos. El color de cada especie viaja en --m, puesto en el
   propio <li>. Cuando haya fotos de sus retales, este cuadro se
   sustituye por un <img> y el resto de la fila no cambia. */
.maderas { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.maderas li {
  padding: .9rem 0; border-bottom: 1px solid var(--linea);
  display: grid; column-gap: 1rem; font-size: 1rem;
  grid-template-columns: 2.6rem 11rem 1fr;
  grid-template-areas: "muestra nombre texto" "muestra especie texto";
  align-items: baseline;
}
.maderas i {
  grid-area: muestra; align-self: center;
  width: 2.6rem; height: 2.6rem; background: var(--m, var(--linea));
  border: 1px solid var(--linea);
}
.maderas b  { grid-area: nombre; font-weight: 700; letter-spacing: -.01em; }
.maderas em { grid-area: especie; font-style: italic; font-size: .82rem;
              color: var(--apagado); }
.maderas span { grid-area: texto; color: var(--apagado); }
@media (max-width: 560px) {
  .maderas li {
    grid-template-columns: 2.6rem 1fr;
    grid-template-areas: "muestra nombre" "muestra especie" "texto texto";
    row-gap: .15rem;
  }
  .maderas span { margin-top: .5rem; }
}

/* --- Pie -------------------------------------------------- */

/* 2026-08-12 · La única franja rayada que queda en el sitio.
   Arranca sólida pegada a la línea de separación y se desvanece
   hacia abajo. Nació como gemela de una que había en el
   encabezado; aquella se quitó y esta se quedó.

   `position: relative` es lo que ancla el ::after; sin eso se
   colocaría respecto de la página entera.
   -webkit-mask hace falta para Safari, que aún no toma `mask` a
   secas para gradientes. */
.pie {
  position: relative;
  border-top: 1px solid var(--linea);
  margin-top: clamp(3rem,7vw,6rem); padding: 2.6rem 0 3.4rem;
}
.pie::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 38px; background-image: var(--rayado-sutil);
  pointer-events: none;
  /* Al revés que arriba: allí el degradado va `to top`, aquí
     `to bottom`. Sólido en la línea, transparente al 55%. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 55%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 55%);
}
.pie__fila { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; color: var(--apagado); font-size: 0.875rem; }
.pie__enlaces { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--tinta); }

/* ============================================================
   ANIMACIONES
   Todo aparece al entrar en pantalla, no al cargar la página.
   Si el visitante pidió menos movimiento en su sistema, se
   desactiva todo (el bloque del final).
   ============================================================ */

.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--curva), transform .85s var(--curva);
  transition-delay: var(--retraso, 0ms);
  will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; }

/* la portada entra sola al cargar, sin esperar scroll */
.entrada { animation: subir .95s var(--curva) both; animation-delay: var(--retraso, 0ms); }
@keyframes subir {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* botones y tarjetas responden al puntero */
.boton { transition: opacity .2s var(--curva-suave), transform .2s var(--curva-suave); }
.boton:hover  { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.tarjeta__marco { transition: box-shadow .45s var(--curva); }
.tarjeta:hover .tarjeta__marco { box-shadow: 0 18px 40px -20px var(--sombra); }
/* El nombre NO cambia de color al pasar por encima (él,
   14/08/2026): con el fondo aclarándose ya se sabe cuál está
   apuntada, y dos señales a la vez era ruido. */

.menu a, .contactos a, .opcion__valores label { transition: all .22s var(--curva-suave); }

/* ============================================================
   CARRUSEL DE LA PORTADA
   ============================================================ */

.carrusel {
  position: relative; overflow: hidden; background: var(--caja);
  border-radius: var(--radio-grande);
  /* Se alinea con el CONTENIDO de .contenedor, no con su caja.
     .contenedor mide --ancho y lleva --canal de relleno a cada
     lado, así que su texto vive en (--ancho - 2×--canal). Antes el
     carrusel usaba --ancho a secas y se salía --canal por cada lado
     respecto de todo lo demás de la página. */
  max-width: calc(var(--ancho) - var(--canal) * 2);
  width: calc(100% - var(--canal) * 2);
  margin: 0 auto;
}
.carrusel__pista {
  display: flex;
  transition: transform .85s var(--curva);
  will-change: transform;
}
.carrusel__lamina { flex: 0 0 100%; position: relative; }
.carrusel__lamina img {
  width: 100%; height: clamp(340px, 58vh, 620px); object-fit: cover;
  background: var(--caja);
}
.carrusel__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 5vw, 3rem);
  /* Mismo caso: velo oscuro sobre foto, texto blanco fijo en los dos
     temas. El degradado era el marrón viejo rgba(42,35,24,...). */
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.42) 55%, transparent);
  color: #fff;
}
.carrusel__pie .rotulo { color: rgba(255,255,255,.75); }
.carrusel__pie h3 {
  font-size: clamp(1.3rem, 3vw, 2.1rem); margin-top: .3rem; color: #fff;
}
.carrusel__pie p { margin: .5rem 0 0; max-width: 46ch; font-size: 1rem; color: rgba(255,255,255,.85); }

.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 0;
  border: 0; cursor: pointer; z-index: 3;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
  opacity: 0; transition: opacity .3s var(--curva-suave), transform .2s var(--curva-suave);
}
.carrusel:hover .carrusel__flecha, .carrusel__flecha:focus-visible { opacity: 1; }
.carrusel__flecha:hover { transform: translateY(-50%) scale(1.08); }
.carrusel__flecha--izq { left: clamp(.6rem, 2vw, 1.4rem); }
.carrusel__flecha--der { right: clamp(.6rem, 2vw, 1.4rem); }
@media (hover: none) { .carrusel__flecha { opacity: .85; } }

.carrusel__puntos {
  position: absolute; bottom: .9rem; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: .45rem;
}
.carrusel__puntos button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 0;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: width .35s var(--curva), background .35s var(--curva-suave);
}
.carrusel__puntos button[aria-current="true"] { width: 22px; border-radius: 0; background: #fff; }

/* ============================================================
   NOVEDAD — la tarjeta grande del inicio con el video
   ============================================================ */

.novedad {
  display: block; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  border-radius: var(--radio-grande);
  background: var(--caja);
}
.novedad__medio { position: relative; aspect-ratio: 16 / 9; background: var(--caja); }
.novedad__medio video, .novedad__medio img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--curva);
}
.novedad:hover .novedad__medio video, .novedad:hover .novedad__medio img { transform: scale(1.03); }

.novedad__capa {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: clamp(1.4rem, 4vw, 2.8rem);
  /* Velo para que el texto blanco se lea sobre la foto. Es negro en
     los dos temas: lo que hay debajo es una imagen, no el fondo del
     sitio. Antes era el marrón viejo rgba(30,24,16,...). */
  background: linear-gradient(to top, rgba(0,0,0,.90), rgba(0,0,0,.35) 55%, rgba(0,0,0,.05));
  /* REGLA: lo que va encima de una foto es BLANCO FIJO, nunca
     var(--tinta). El velo de abajo es oscuro en los dos temas, así
     que en modo claro un --tinta negro quedaba negro sobre negro.
     Es el fallo que se veía en el título del carrusel. */
  color: #fff;
}
.novedad__etiqueta {
  align-self: flex-start; margin-bottom: .8rem;
  /* relleno con el rojo PROFUNDO: blanco sobre #FF0009 solo da 4:1,
     sobre #D10010 da 5,65:1. Medido 2026-08-08. */
  background: var(--realce-hondo); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: 0;
}
.novedad__capa h2 { color: #fff; max-width: 18ch; }
/* Los textos de la portada y del carrusel van SIEMPRE sobre foto,
   con su propio velo oscuro: son blancos en los dos temas y no
   siguen los tokens. Antes eran crema, de la paleta vieja. */
.novedad__capa p  { color: rgba(255,255,255,.86); max-width: 52ch; margin: .8rem 0 0; font-size: 1rem; }
.novedad__ir {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem;
  font-weight: 700; font-size: 1rem; color: var(--tinta);
}
.novedad__ir span { transition: transform .25s var(--curva); }
.novedad:hover .novedad__ir span { transform: translateX(5px); }

/* --- el reproductor y su texto al lado --------------------- */

.pieza-video {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 880px) { .pieza-video { grid-template-columns: 1fr; } }
.pieza-video video {
  width: 100%; display: block; border-radius: var(--radio-grande);
  background: var(--barra); aspect-ratio: 16 / 9; object-fit: cover;
}
.pieza-video__texto p { margin: 0 0 1.05rem; }
.pieza-video__texto p:last-of-type { margin-bottom: 0; }
.pieza-video__texto .rotulo { display: block; margin-bottom: .8rem; color: var(--realce); }

/* --- el mapa del taller ------------------------------------ */

.mapa { margin: 2.4rem 0 0; }
.mapa svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linea); border-radius: var(--radio-grande);
  background: var(--caja);
}
.mapa figcaption {
  color: var(--apagado); font-size: 0.875rem; margin-top: .8rem; max-width: 56ch;
}

/* ============================================================
   BUSCADOR
   ============================================================ */

.lupa {
  flex: none; display: grid; place-items: center;
  width: var(--alto-control); height: var(--alto-control); border-radius: 0;
  background: transparent; border: 1px solid var(--barra-linea);
  color: var(--barra-suave); cursor: pointer;
  transition: background .2s var(--curva-suave), color .2s var(--curva-suave);
}
.lupa:hover { background: var(--realce-hondo); border-color: var(--realce-hondo); color: #fff; }
.lupa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; }

/* 2026-08-17 · Dentro del menú desplegado del teléfono la lupa deja
   de ser un cuadradito y pasa a ser un renglón con su palabra, como
   Novedades y El taller. Un icono suelto entre renglones con nombre
   no se lee como «Buscar»; se lee como un adorno.
   Va aquí y no en el bloque grande de 780px porque el `width` de
   arriba tiene la misma especificidad y viene después: allí perdía. */
@media (max-width: 780px) {
  .lupa {
    width: 100%; height: 44px;
    display: flex; align-items: center; justify-content: flex-start;
    gap: .6rem; padding: 0 .62rem;
  }
  .lupa .ctrl__largo { font-size: 1rem; }
}

.buscador {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--barra) 70%, transparent);
  backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(1rem, 8vh, 6rem) var(--canal);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--curva);
}
.buscador.abierto { opacity: 1; pointer-events: auto; }

.buscador__caja {
  width: 100%; max-width: 680px; background: var(--papel);
  border-radius: var(--radio-grande); overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  transform: translateY(-12px); transition: transform .3s var(--curva);
  display: flex; flex-direction: column; max-height: 76vh;
}
.buscador.abierto .buscador__caja { transform: none; }

.buscador__arriba { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--linea); }
.buscador__arriba svg { width: 19px; height: 19px; fill: none; stroke: var(--apagado); stroke-width: 2.1; flex: none; }
.buscador__arriba input {
  flex: 1; font: inherit; font-size: 1rem; border: 0; background: transparent;
  color: var(--tinta); min-width: 0;
}
/* Aquí había un `outline: none` a secas — el único de todo el
   sitio. Quitaba la marca de foco del campo de búsqueda y no ponía
   nada en su lugar, así que con el teclado no había forma de saber
   que el cursor estaba ahí. Ahora la marca es un filete bajo el
   campo, que encaja mejor que el anillo del navegador en una caja
   que ya ocupa toda la fila. */
.buscador__arriba input:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 var(--realce);
}
.buscador__cerrar {
  font: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--linea); border-radius: var(--radio-chico);
  color: var(--apagado); padding: .35rem .6rem; cursor: pointer; flex: none;
}
.buscador__cerrar:hover { color: var(--tinta); border-color: var(--tinta); }

.buscador__lista { overflow-y: auto; padding: .5rem 0 .8rem; }
.buscador__grupo {
  font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--apagado); padding: .9rem 1.2rem .4rem;
}
.buscador__item {
  display: flex; align-items: center; gap: .9rem; padding: .6rem 1.2rem;
  text-decoration: none; color: inherit;
}
.buscador__item:hover, .buscador__item.activo { background: var(--caja); }
.buscador__item img {
  width: 52px; height: 40px; object-fit: cover; border-radius: var(--radio-chico);
  background: var(--caja); flex: none;
}
.buscador__item strong { display: block; font-size: 1rem; letter-spacing: -.01em; }
.buscador__item small  { color: var(--apagado); font-size: 0.875rem; }
.buscador__vacio { color: var(--apagado); padding: 2rem 1.2rem; text-align: center; font-size: 1rem; }

/* ============================================================
   CONTACTO — tarjetas con icono y pista de que son enlaces
   ============================================================ */

.contactos a {
  display: flex; align-items: center; gap: 1rem;
  position: relative; padding: 1.4rem 2.6rem 1.4rem 1.4rem;
}
/* Sin el salto hacia arriba al pasar por encima (él, 14/08/2026).
   Lo que SÍ se queda es que se marque el borde y se encienda el
   icono con el color de la aplicación: eso dice que es pulsable,
   el brinco solo distraía. */
.contactos a:hover { border-color: var(--tinta); }
.contactos__icono {
  flex: none; width: 42px; height: 42px; border-radius: 0;
  display: grid; place-items: center; background: var(--caja); color: var(--realce);
  transition: background .22s var(--curva-suave), color .22s var(--curva-suave);
}
.contactos a:hover .contactos__icono { background: var(--realce); color: var(--papel); }
.contactos__icono svg { width: 22px; height: 22px; fill: currentColor; }
.contactos__texto { min-width: 0; }
.contactos__accion {
  display: block; font-size: 0.875rem; color: var(--apagado); margin-top: .15rem;
}
.contactos__flecha {
  position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--apagado); font-size: 1rem;
  transition: transform .25s var(--curva), color .25s var(--curva-suave);
}
.contactos a:hover .contactos__flecha { color: var(--realce); transform: translate(3px, -50%); }

/* ============================================================
   VISOR 3D
   ============================================================ */

.medios__caja { position: relative; }

.boton3d {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: 0.875rem; font-weight: 700;
  padding: .6rem 1rem; border-radius: 0; cursor: pointer;
  border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--tinta);
  transition: transform .22s var(--curva), border-color .22s var(--curva-suave);
}
.boton3d:hover { transform: translateY(-2px); border-color: var(--tinta); }
.boton3d svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.visor3d {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--caja); border-radius: var(--radio-grande); overflow: hidden;
  display: grid; place-items: center;
}
.visor3d canvas { display: block; width: 100% !important; height: 100% !important; }
.visor3d__aviso { color: var(--apagado); font-size: 0.875rem; padding: 1rem; text-align: center; }
.visor3d__ayuda {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 1.4rem .9rem .8rem; text-align: center;
  font-size: 0.875rem; color: var(--apagado);
  background: linear-gradient(to top, color-mix(in srgb, var(--caja) 92%, transparent), transparent);
  opacity: 0; transition: opacity .5s var(--curva) .6s;
}
.visor3d--listo .visor3d__ayuda { opacity: 1; }

/* ============================================================ */

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

/* --- Varios ----------------------------------------------- */

.vacio { color: var(--apagado); padding: 4rem 0; text-align: center; }
/* Volver: con marco desde el 14/08/2026. Antes era texto gris a
   secas y no se leía como algo que se puede pulsar — se quejó de
   eso. Ahora tiene caja, borde y área de clic de verdad. */
.volver {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--tinta); text-decoration: none;
  /* sin negrita, decisión suya del 14/08/2026: con el marco ya se
     ve que es pulsable y la negrita lo dejaba pesado */
  font-size: 0.875rem; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .6rem 1.1rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  margin-bottom: 2rem;
  transition: background .15s var(--curva-suave), color .15s var(--curva-suave);
}
.volver:hover, .volver:focus-visible {
  background: var(--tinta); color: var(--papel);
}

/* ------------------------------------------------------------
   LOS TRES BOTONES DE LA FICHA (14/08/2026)
   anterior · volver al catálogo · siguiente

   Van pegados, como un solo control partido en tres: `gap: -1px`
   no existe, así que los de los lados se solapan un píxel con el
   del medio y no queda un borde doble entre ellos.

   El del medio se estira y los de los lados miden lo justo, de
   modo que "Volver al catálogo" queda centrado en la fila pase
   lo que pase con el ancho.
   ------------------------------------------------------------ */
.navpieza {
  display: flex; align-items: stretch;
  margin-bottom: 2rem;
}
/* el margen ya lo lleva el contenedor */
.navpieza .volver { margin-bottom: 0; }
.navpieza__volver { flex: 1 1 auto; justify-content: center; }
/* Las flechas se llevan un 22% cada una y el del medio se queda
   con el resto (él, 14/08/2026). Antes medían lo justo para la
   flecha y eran un blanco pequeño al lado de un botón enorme. */
.navpieza__salto {
  flex: 0 0 22%;
  justify-content: center;
  padding-left: .6rem; padding-right: .6rem;
  font-size: 1rem;   /* la flecha, algo mayor que el texto */
}
.navpieza__antes { margin-right: -1px; }
.navpieza__luego { margin-left: -1px; }
/* Al pasar por encima, el botón se pone delante para que su borde
   iluminado no quede tapado por el solape del vecino. */
.navpieza .volver:hover, .navpieza .volver:focus-visible { position: relative; z-index: 1; }

[hidden] { display: none !important; }

/* ============================================================
   GLITCH AL CAMBIAR DE MEDIO - HOJA COMPARTIDA
   ------------------------------------------------------------
   Vivia en css/prototipos.css, que solo carga index.html. Desde
   el 2026-08-15 lo usan LAS DOS: el panel de prototipos y el
   visor de la ficha de Exhibicion (trabajo.html), que solo carga
   esta hoja. Por eso esta aqui. El prefijo pt- se conserva para
   no tener que renombrar nada en js/prototipos.js.
   ============================================================ */
/* ============================================================
   TRANSICIÓN GLITCH ENTRE IMÁGENES
   ------------------------------------------------------------
   Al pasar de una foto a otra, la que sale se rompe en bandas
   horizontales que saltan de sitio mientras se separan sus
   canales de color, y por encima cruza una barra de barrido.

   Cómo funciona: la imagen NUEVA ya está puesta debajo; lo que
   se anima es una COPIA de la vieja superpuesta, que se
   desintegra y desaparece. Así no hay que precargar nada ni
   esperar a que la nueva decodifique.

   Los tiempos van con `steps(1)` a propósito: un glitch tiene
   que dar saltos, no deslizarse. Con interpolación suave parece
   una animación de diapositivas.
   ============================================================ */

/* La capa se coloca con medidas en píxeles calculadas por el JS,
   no con `inset: 0`. Tiene que caer exactamente sobre el hueco
   que ocupa la imagen, y ese hueco depende del relleno del
   recuadro y de si la imagen va en `contain` o en `cover`. */
.pt-glitch {
  position: absolute; z-index: 3;
  pointer-events: none; overflow: hidden;
}
.pt-glitch img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  animation: pt-bandas .085s steps(1, end) forwards;
}
/* Las dos copias teñidas que hacen la separación de canales. Van
   en modo screen para que sumen luz y no tapen.

   NO son rojo y cian, que es lo típico de un glitch: son NARANJA
   QUEMADO y AMARILLO INTENSO, de la familia de la marca. El
   sepia lleva la imagen a un warm neutro y desde ahí se gira el
   tono; sin el sepia previo, el hue-rotate sobre una foto de
   madera no da un color limpio. */
.pt-glitch img:nth-child(2) {
  mix-blend-mode: screen;
  filter: sepia(1) saturate(8) hue-rotate(-18deg) brightness(1.05);
  animation-name: pt-bandas-naranja;
}
/* Estos números están MEDIDOS, no puestos a ojo: sobre una madera
   media producen #ffd200, que es el amarillo intenso que se
   buscaba. Con más giro de tono (24deg) la madera clara se iba a
   lima #deff00 y la oscura a oliva. */
.pt-glitch img:nth-child(3) {
  mix-blend-mode: screen;
  filter: sepia(1) saturate(6) hue-rotate(8deg) brightness(1.75);
  animation-name: pt-bandas-amarillo;
}

/* La mitad de las veces el amarillo se cambia por ROJO. Lo
   sortea el JS al montar la capa.

   El rojo no se saca girando el tono hacia atrás como parecería:
   desde el sepia, girar en negativo lleva a rosa y luego a
   magenta (se probó -35, -45 y -55 y salían #ff6470, #ff64a3 y
   #ff66dd). Lo que cierra el color hacia el rojo es el CONTRASTE
   alto con un giro corto. Medido: #f23526 sobre madera media y
   #f20516 sobre madera oscura. */
.pt-glitch--rojo img:nth-child(3) {
  filter: sepia(1) saturate(14) hue-rotate(-28deg) contrast(1.6) brightness(.95);
}
/* 2026-08-13 · Aquí iba una franja blanca que barría de arriba
   abajo durante el corte. Fuera: a 85 ms no daba tiempo a leerla
   y solo aportaba un destello. El corte lo hacen las bandas y la
   separación de color. */

/* MENOS PASOS que antes, y a propósito. A 85 ms, siete estados
   salían a 12 ms cada uno — por debajo de un cuadro de pantalla
   (16,7 ms), así que la mitad no llegaba a dibujarse y el efecto
   se veía irregular según el momento. Con cuatro estados cada uno
   dura ~21 ms y le toca cuadro seguro.
   Los desplazamientos también bajaron a la mitad: el corte se
   nota, pero sin descuajaringar la pieza. */
@keyframes pt-bandas {
  0%   { clip-path: inset(0 0 0 0);      transform: translateX(0); }
  30%  { clip-path: inset(12% 0 62% 0);  transform: translateX(-3px); }
  60%  { clip-path: inset(54% 0 18% 0);  transform: translateX(4px); }
  85%  { clip-path: inset(30% 0 44% 0);  transform: translateX(-2px); opacity: .55; }
  100% { clip-path: inset(0 0 100% 0);   transform: translateX(0);    opacity: 0; }
}
@keyframes pt-bandas-naranja {
  0%   { clip-path: inset(0 0 100% 0); transform: translateX(0); opacity: 0; }
  30%  { clip-path: inset(18% 0 58% 0); transform: translateX(-4px); opacity: .8; }
  65%  { clip-path: inset(56% 0 24% 0); transform: translateX(3px);  opacity: .7; }
  100% { clip-path: inset(0 0 100% 0);  transform: translateX(0);    opacity: 0; }
}
@keyframes pt-bandas-amarillo {
  0%   { clip-path: inset(0 0 100% 0); transform: translateX(0); opacity: 0; }
  30%  { clip-path: inset(18% 0 58% 0); transform: translateX(4px);  opacity: .8; }
  65%  { clip-path: inset(56% 0 24% 0); transform: translateX(-3px); opacity: .7; }
  100% { clip-path: inset(0 0 100% 0);  transform: translateX(0);    opacity: 0; }
}

/* La imagen que ENTRA da un tirón corto de canales, para que el
   corte no se note solo en la que sale. */
/* Naranja quemado (#C04E00, de su paleta) contra amarillo intenso
   (#FFD400). El mismo par que las bandas, para que el corte se
   lea como una sola cosa. */
.pt-entrando { animation: pt-sacudida .065s steps(1, end); }
@keyframes pt-sacudida {
  0%   { filter: none; transform: translateX(0); }
  33%  { filter: drop-shadow(2px 0 rgba(192,78,0,.9)) drop-shadow(-2px 0 rgba(255,212,0,.9));
         transform: translateX(1px); }
  66%  { filter: drop-shadow(-2px 0 rgba(192,78,0,.85)) drop-shadow(2px 0 rgba(255,212,0,.85));
         transform: translateX(-1px); }
  100% { filter: none; transform: translateX(0); }
}

/* La variante roja del tirón, para que la imagen que entra vaya
   con el mismo par de colores que las bandas. */
.pt-entrando--rojo { animation-name: pt-sacudida-rojo; }
@keyframes pt-sacudida-rojo {
  0%   { filter: none; transform: translateX(0); }
  33%  { filter: drop-shadow(2px 0 rgba(192,78,0,.9)) drop-shadow(-2px 0 rgba(226,32,26,.9));
         transform: translateX(1px); }
  66%  { filter: drop-shadow(-2px 0 rgba(192,78,0,.85)) drop-shadow(2px 0 rgba(226,32,26,.85));
         transform: translateX(-1px); }
  100% { filter: none; transform: translateX(0); }
}

/* ------------------------------------------------------------
   GLITCH AL CAMBIAR DE MEDIO (foto ↔ plano ↔ 3D ↔ vídeo)
   El de arriba desintegra una COPIA de la foto vieja. Aquí se
   corta el nodo original, porque de un canvas WebGL no se puede
   sacar copia: `clip-path` y `transform` valen igual sobre una
   imagen, sobre el plano o sobre el visor.

   La separación de canales se hace con `drop-shadow` y no con
   tres capas teñidas —no hay tres capas que teñir—, así que es
   más discreta que la de foto a foto. Es lo que se puede hacer
   sin rasterizar el contenido, y a 105 ms la diferencia no se
   distingue.
   ------------------------------------------------------------ */
.pt-saliendo {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  animation: pt-corte .085s steps(1, end) forwards;
}
/* Lo de dentro conserva su tamaño: la capa es solo el envoltorio
   que se anima. */
.pt-saliendo > * { position: absolute; inset: 0; }

/* 2026-08-14 · Aquí vivía `.pt-saliendo--espera`: la foto se
   quedaba quieta tapando el visor 3D mientras el modelo cargaba,
   y el corte saltaba al terminar. Fuera con el resto del glitch
   del 3D — no le convenció. */

@keyframes pt-corte {
  0%   { clip-path: inset(0 0 0 0);     transform: translateX(0);
         filter: none; }
  30%  { clip-path: inset(12% 0 62% 0); transform: translateX(-3px);
         filter: drop-shadow(3px 0 rgba(192,78,0,.9)) drop-shadow(-3px 0 rgba(255,212,0,.9)); }
  60%  { clip-path: inset(54% 0 18% 0); transform: translateX(4px);
         filter: drop-shadow(-3px 0 rgba(192,78,0,.85)) drop-shadow(3px 0 rgba(255,212,0,.85)); }
  85%  { clip-path: inset(30% 0 44% 0); transform: translateX(-2px); opacity: .55;
         filter: none; }
  100% { clip-path: inset(0 0 100% 0);  transform: translateX(0);    opacity: 0; }
}
/* La mitad de las veces, el amarillo se cambia por rojo — el
   mismo sorteo y el mismo par de colores que el glitch de fotos. */
.pt-saliendo--rojo { animation-name: pt-corte-rojo; }
@keyframes pt-corte-rojo {
  0%   { clip-path: inset(0 0 0 0);     transform: translateX(0);
         filter: none; }
  30%  { clip-path: inset(12% 0 62% 0); transform: translateX(-3px);
         filter: drop-shadow(3px 0 rgba(192,78,0,.9)) drop-shadow(-3px 0 rgba(226,32,26,.9)); }
  60%  { clip-path: inset(54% 0 18% 0); transform: translateX(4px);
         filter: drop-shadow(-3px 0 rgba(192,78,0,.85)) drop-shadow(3px 0 rgba(226,32,26,.85)); }
  85%  { clip-path: inset(30% 0 44% 0); transform: translateX(-2px); opacity: .55;
         filter: none; }
  100% { clip-path: inset(0 0 100% 0);  transform: translateX(0);    opacity: 0; }
}

/* Quien pidió menos movimiento no ve ningún glitch. */
@media (prefers-reduced-motion: reduce) {
  .pt-glitch { display: none; }
  .pt-saliendo { display: none; }
  .pt-entrando { animation: none; }
}

/* ============================================================
   TIPOGRAFÍA EN TELÉFONO · 2026-08-17

   El problema, medido a 375px: la escala de titulares está
   pensada para pantalla grande y en el teléfono TODOS los
   escalones aterrizan juntos.

       escritorio          teléfono (antes)
       h1  44,2 px         h1  23,0 px   peso 400
       h2  33,3 px         h2  21,8 px   peso 700
       h3  20,0 px         h3  20,0 px   peso 700
       texto 16 px         texto 16 px

   Arriba los saltos son 1,33 y 1,66. Abajo eran 1,06 y 1,09:
   tres niveles dentro de tres píxeles. Y como el h1 va en peso
   400 y el h2 en 700, en El taller «Cómo funciona un encargo»
   pesaba MÁS que «El taller» — el encabezado de sección le
   ganaba al título de la página.

   La causa está escrita arriba, en el comentario del 2026-08-11:
   los titulares se bajaron un 20% escalando el clamp ENTERO, no
   solo el tope. Eso arregló las pantallas medianas y aplastó el
   mínimo, que es el que manda en el teléfono.

   Este bloque va AL FINAL del archivo a propósito: tiene que
   ganarle por orden a .rotulo, a .ficha__datos h1 y a las reglas
   de .portada, que viven más arriba y tienen la misma o más
   especificidad.
   ============================================================ */

/* El mínimo del h1 sube de 1,44rem (23px) a 1,75rem (28px). Se
   toca SOLO el mínimo: el tope de 2,76rem y la pendiente de
   3,6vw se quedan igual, así que de 780px para arriba no cambia
   absolutamente nada. Con el h2 en 21,8 el salto queda en 1,28. */
h1 { font-size: clamp(1.75rem, 3.6vw, 2.76rem); }

/* El nombre de la pieza usaba su propia escala y salía de 30,4px
   en teléfono mientras el resto de títulos de página iban a 23:
   tres tamaños distintos de «título de página» en un mismo sitio.
   Ahora hereda el de arriba. */
.ficha__datos h1 { font-size: clamp(1.75rem, 3.6vw, 2.76rem); }

@media (max-width: 780px) {
  /* Los encabezados de sección pierden la negrita. Ya no la
     necesitan —los separan 6px de tamaño— y en negrita seguían
     compitiendo con el título de la página.

     Se escribe como `h2` a secas, sin clases, y eso es
     deliberado: los títulos de tarjeta (.rejilla--tres .tarjeta h2,
     peso 300) y los rótulos en versalita (.rotulo, peso 700)
     tienen más especificidad y NO se ven afectados. Solo cambian
     los h2 sueltos, que son los de sección. */
  h2 { font-weight: 400; }

  /* Interlínea 1,05 es de titular grande de escritorio. Aquí
     ningún título llega a partirse todavía en ninguno de los dos
     idiomas —lo medí—, pero el día que uno se parta las dos
     líneas se tocarían. 1,15 da el aire justo. */
  h1, h2, h3 { line-height: 1.15; }

  /* Reparte las líneas de un titular partido en trozos parejos en
     vez de dejar una palabra suelta abajo. Sin coste: si el
     titular cabe en una línea no hace nada. */
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  /* --- la bajada vuelve a la izquierda ---------------------
     El título de sección va pegado a la derecha desde el
     2026-08-12 y ahí se queda: es la firma. Pero la bajada
     wrappeaba a TRES renglones a 375px, y alineada a la derecha
     el borde izquierdo queda desflecado — que es justo el borde
     al que vuelve el ojo en cada salto de línea. En escritorio
     son dos líneas cortas y funciona como remate; en teléfono es
     texto corrido con el margen malo irregular. */
  body:not([data-pagina="novedades"]) .portada .bajada {
    text-align: left;
  }

  /* --- el piso de letra chica ------------------------------
     El rótulo en versalita es un ENCABEZADO de sección (va en un
     <h2>), y a 12px salía más chico que los h3 de 20px que tiene
     debajo: el nivel 2 se veía menos importante que el nivel 3, y
     un lector de pantalla anunciaba una jerarquía que la vista
     contradecía. A 14px ya lee como lo que es. */
  .rotulo { font-size: 0.875rem; }
}