/* Fuentes alojadas en el servidor (SIL OFL: assets/fuentes/LICENCIA-*.txt). Archivo es variable: 400 y 600 salen del mismo fichero. */
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/gloock-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:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/gloock-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:"Archivo";font-style:normal;font-weight:400 600;font-display:swap;src:url(fuentes/archivo-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:"Archivo";font-style:normal;font-weight:400 600;font-display:swap;src:url(fuentes/archivo-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}

/* ============ Tokens: propuesta 2 «Blanco», iguales que en la portada (diseno/home/home-f.html) ============
   Marfil y tinta. El único color de la interfaz es el dorado del logo (#E2C270), y solo sobre el bloque
   oscuro: un filete. Las fotos van en color.
   Gloock 400 en titulares; Archivo 400 y 600 en el texto.
   Cinco tamaños en toda la página; nunca más de cuatro por pantalla. Radio 0 en todo. Ninguna sombra. */
:root{
  /* superficies */
  --c-fondo:        #FAF9F6;  /* la página. El examen prohíbe el blanco puro */
  --c-noche:        #121110;  /* el único bloque oscuro: «Me llaman el Poeta de los Vientos» */
  --c-espera:       #ECE9E4;  /* hueco de una foto mientras carga */
  /* tinta. Contrastes medidos (WCAG 2) */
  --c-tinta:        #141210;  /* 17,8:1 sobre el fondo. También la acción principal, con marfil encima */
  --c-tinta-2:      #6B655D;  /* 5,5:1 sobre el fondo: texto secundario */
  --c-filete:       #D9D5CE;  /* filetes de adorno, 1 px */
  --c-luz:          #F3EEE5;  /* texto sobre noche, 16,3:1 (el marfil del logo) */
  --c-luz-2:        #A39C91;  /* secundario sobre noche, 6,9:1 */
  --c-filete-noche: #3A3631;
  --c-oro:          #E2C270;  /* SOLO logo sobre noche y su filete. Sobre el fondo da 1,6:1: nunca texto */
  --c-error:        #8F2A1D;  /* 7,9:1 sobre el fondo */
  /* lo que cambia entre modos */
  --c-campo:        #FAF9F6;  /* fondo de los campos */
  --c-control:      #141210;  /* borde de los campos */
  --c-tinta-hover:  #2E2A26;  /* la acción principal al pasar por encima */
  --c-pantalla:     #141210;  /* detrás de un vídeo */
  --c-pend:         rgba(20,18,16,.07);
  --c-giro:         rgba(250,249,246,.35);
  --c-barra:        #FAF9F6;
  --c-barra-borde:  #141210;
  --b-noche:        0 solid transparent;  /* en claro, el bloque noche no lleva filete: ya contrasta */
  --fundir:         normal;   /* en oscuro, las fotos de fondo negro se funden con la superficie */
  --ver-claro:      block;    /* logo de tinta y la luna del botón */
  --ver-oscuro:     none;     /* logo marfil y el sol del botón */
  color-scheme: light;

  --f-titular: "Gloock", Georgia, serif;
  --f-texto:   "Archivo", system-ui, sans-serif;
  --w-texto: 400; --w-fuerte: 600;

  /* los 5 tamaños de toda la página */
  --t-pie:     .8125rem;                                  /* 13: etiquetas en versalitas, pies, menú, botones */
  --t-texto:   1.0625rem;                                 /* 17: texto y campos */
  --t-frase:   clamp(1.375rem, 1.1rem + .9vw, 1.75rem);   /* 22 → 28: la pregunta, las facetas, los lugares, las preguntas */
  --t-cap:     clamp(2.375rem, 1.2rem + 3.9vw, 5rem);     /* 38 → 80: H2 */
  --t-portada: clamp(3.25rem, .6rem + 6.4vw, 6.75rem);    /* 52 → 108: el H1 */

  --espaciado: .17em;  /* versalitas: menú, etiquetas, botones */

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --aire: clamp(5rem, 3rem + 7vw, 11rem);               /* 80 → 176: entre secciones */

  --max: 1440px;
  --margen: 20px;
  --hueco: 24px;
}
@media (min-width:700px){:root{--margen:40px}}
@media (min-width:1100px){:root{--margen:56px}}

/* ============ Modo oscuro: la paleta de la propuesta 3 sobre la composición de la 2 ============
   Va dos veces porque CSS no deja nombrar un bloque: con el sistema en oscuro (salvo que se haya elegido claro)
   y cuando se elige oscuro con el botón. Si se cambia un valor, se cambia en los dos. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --c-fondo:#0F0E0D; --c-noche:#1A1816; --c-espera:#1A1816;
    --c-tinta:#EDE8DF; --c-tinta-2:#A0988C; --c-filete:#3A3530;
    --c-luz:#EDE8DF; --c-luz-2:#A39C91; --c-filete-noche:#45403A;
    --c-oro:#E2C270; --c-error:#E8937F;
    --c-campo:#1A1816; --c-control:#8A8277; --c-tinta-hover:#D4CDC1; --c-pantalla:#0B0A09;
    --c-pend:rgba(237,232,223,.1); --c-giro:rgba(15,14,13,.3);
    --c-barra:#1A1816; --c-barra-borde:#45403A;
    --b-noche:1px solid #45403A; --fundir:lighten;
    --ver-claro:none; --ver-oscuro:block;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --c-fondo:#0F0E0D; --c-noche:#1A1816; --c-espera:#1A1816;
  --c-tinta:#EDE8DF; --c-tinta-2:#A0988C; --c-filete:#3A3530;
  --c-luz:#EDE8DF; --c-luz-2:#A39C91; --c-filete-noche:#45403A;
  --c-oro:#E2C270; --c-error:#E8937F;
  --c-campo:#1A1816; --c-control:#8A8277; --c-tinta-hover:#D4CDC1; --c-pantalla:#0B0A09;
  --c-pend:rgba(237,232,223,.1); --c-giro:rgba(15,14,13,.3);
  --c-barra:#1A1816; --c-barra-borde:#45403A;
  --b-noche:1px solid #45403A; --fundir:lighten;
  --ver-claro:none; --ver-oscuro:block;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-fondo);color:var(--c-tinta);font:var(--w-texto) var(--t-texto)/1.6 var(--f-texto);font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--c-tinta);color:var(--c-fondo)}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}
b,strong{font-weight:var(--w-fuerte)}
h1,h2,h3{margin:0;font-family:var(--f-titular);font-weight:var(--w-texto);letter-spacing:-.025em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ol,ul{margin:0;padding:0;list-style:none}
figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pend{font-style:italic;background:var(--c-pend);padding:0 .3em}
.noche .pend{background:rgba(243,238,229,.12)}

/* ---------- la malla: 12 columnas dentro de 1440 px, con carriles a sangre a los lados ---------- */
.caja{max-width:var(--max);margin:0 auto;padding:0 var(--margen)}
.malla{display:grid;grid-template-columns:[sangre-ini] var(--margen) [c] minmax(0,1fr) [c-fin] var(--margen) [sangre-fin]}
.malla > *{grid-column:c / c-fin}
@media (min-width:1000px){
  .malla{--col:calc((var(--max) - 2 * var(--margen) - 11 * var(--hueco)) / 12);
    grid-template-columns:[sangre-ini] minmax(calc(var(--margen) - var(--hueco)),1fr) repeat(12,[c] minmax(0,var(--col))) [c-fin] minmax(calc(var(--margen) - var(--hueco)),1fr) [sangre-fin];
    column-gap:var(--hueco)}
}

.seccion{padding:var(--aire) 0}
section h2{font-size:var(--t-cap);line-height:1}
.pie-foto{font-size:var(--t-pie);line-height:1.5;color:var(--c-tinta-2)}
.noche .pie-foto{color:var(--c-luz-2)}
.foto img,.foto video{width:100%;height:auto;object-fit:cover;background:var(--c-espera)}
.foto video.sonando{background:var(--c-pantalla);object-fit:contain}
.enlaces{font-size:var(--t-pie);display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-5)}
.enlaces a{display:inline-flex;min-height:44px;align-items:center;font-weight:var(--w-fuerte)}
.enlaces a:not([href]){font-weight:var(--w-texto);color:var(--c-tinta-2)}
.etiqueta{font:var(--w-texto) var(--t-pie)/1.3 var(--f-texto);text-transform:uppercase;letter-spacing:var(--espaciado);color:var(--c-tinta-2)}
.noche .etiqueta{color:var(--c-luz-2)}

/* ---------- botones: tinta sólida (la acción principal) y hueco con filete ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:56px;padding:var(--s-3) var(--s-6);border:1px solid var(--c-tinta);border-radius:0;font:var(--w-fuerte) var(--t-pie)/1.2 var(--f-texto);text-transform:uppercase;letter-spacing:var(--espaciado);text-decoration:none;cursor:pointer;text-align:center}
.btn-tinta{background:var(--c-tinta);color:var(--c-fondo)}
.btn-tinta:hover{background:var(--c-tinta-hover);border-color:var(--c-tinta-hover)}
.btn-hueco{background:transparent;color:var(--c-tinta)}
.btn-hueco:hover{background:var(--c-tinta);color:var(--c-fondo)}
.btn svg,.wa svg,.directo svg{width:18px;height:18px;flex:none;fill:currentColor}
.btn[disabled]{cursor:default;opacity:.55}
.btn .pend{text-transform:none;letter-spacing:0;font-weight:var(--w-texto)}

/* ---------- campos ---------- */
input,select,textarea{width:100%;min-height:56px;background:var(--c-campo);color:var(--c-tinta);border:1px solid var(--c-control);border-radius:0;padding:var(--s-3) var(--s-4);font-size:var(--t-texto)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--c-tinta);outline-offset:2px}
textarea{min-height:120px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--c-tinta) 50%),linear-gradient(135deg,var(--c-tinta) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--s-7)}
label{display:block;font-size:var(--t-pie);text-transform:uppercase;letter-spacing:var(--espaciado);margin-bottom:var(--s-2)}
label .opc{text-transform:none;letter-spacing:0;color:var(--c-tinta-2)}
.error{margin-top:var(--s-2);font-size:var(--t-pie);color:var(--c-error)}
[aria-invalid=true]{border-color:var(--c-error);outline:1px solid var(--c-error);outline-offset:-2px}

/* =================== CABECERA: logo real, apodo, menú, modo e idioma (compartida con la portada) =================== */
.cabecera{border-bottom:1px solid var(--c-filete)}
.cabecera .caja{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--s-6);padding-top:var(--s-4);padding-bottom:var(--s-2)}
.marca{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1)}
.logo{display:inline-flex;align-items:center;min-height:44px;flex:none}
.logo img{height:28px;width:auto;max-width:none}
.apodo{font-size:var(--t-pie);text-transform:uppercase;letter-spacing:var(--espaciado);color:var(--c-tinta-2);line-height:1.3;white-space:nowrap}
.ajustes{grid-column:2;grid-row:1;display:flex;align-items:center;gap:var(--s-1)}
.idioma{display:flex;font-size:var(--t-pie);letter-spacing:.1em;align-items:center}
.idioma a,.idioma span{min-width:36px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.idioma span[aria-current]{text-decoration:underline;text-underline-offset:.35em}
.idioma .sep{min-width:auto;color:var(--c-tinta-2)}
.indice{grid-column:1/-1;margin:var(--s-2) calc(var(--margen) * -1) 0;overflow-x:auto;scrollbar-width:none}
.indice::-webkit-scrollbar{display:none}
.indice ul{display:flex;column-gap:28px;padding:0 var(--margen);width:max-content}
.indice a{display:inline-flex;min-height:44px;align-items:center;font-size:var(--t-pie);text-transform:uppercase;letter-spacing:var(--espaciado);text-decoration:none;white-space:nowrap}
.indice a:hover{text-decoration:underline}
/* la página en la que se está: subrayada como el idioma activo (WordPress pone aria-current="page" solo) */
.indice a[aria-current]{text-decoration:underline;text-underline-offset:.35em}
@media (max-width:699px){
  .marca{display:contents}
  .logo{grid-column:1;grid-row:1;justify-self:start}
  .apodo{grid-column:1 / -1;grid-row:2}
  .indice{grid-row:3}
}
@media (min-width:700px){
  .cabecera .logo{min-height:0;margin-top:var(--s-1)}
  .cabecera .logo img{height:34px}
}
@media (min-width:1200px){
  .cabecera .caja{grid-template-columns:auto 1fr auto;padding-top:var(--s-5);padding-bottom:var(--s-5)}
  .indice{grid-column:2;grid-row:1;justify-self:end;margin:0;overflow:visible}
  .indice ul{padding:0}
  .ajustes{grid-column:3}
}

/* el logo: el de tinta en claro y el marfil en oscuro (dos <img>; mask-image no pinta desde file://) */
.solo-claro{display:var(--ver-claro)}
.solo-oscuro{display:var(--ver-oscuro)}
/* el botón de modo: dice a qué modo cambia (aria-label); luna en claro y sol en oscuro. Sin JS no se enseña. */
.tema{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:var(--c-tinta);cursor:pointer}
.tema:hover{color:var(--c-tinta-2)}
.tema svg{width:17px;height:17px;fill:currentColor}
.tema .luna{display:var(--ver-claro)}
.tema .sol{display:var(--ver-oscuro)}
:root:not([data-theme]) .tema{display:none}

/* =================== PIEZA 1 · CABEZA DE SERVICIO: miga, H1 y entradilla, y el medio principal a sangre ===================
   Escritorio: la miga arriba y el H1 con la entradilla y la fecha abajo, en 7 columnas; el medio (vertical) ocupa de la columna 9
   al borde derecho y llena el alto de la cabeza. El H1 va algo menor que el de la portada porque los de servicio son más
   largos: así caben en 3 líneas y el botón de la fecha queda en la primera pantalla a 1440×900, 1280×800 y 1024×768.
   Toca el filete de la cabecera. En oscuro, una foto de fondo negro se funde con la página.
   Móvil y tableta: miga, H1, entradilla y el medio a todo el ancho. */
.portada{padding-top:var(--s-8)}
.portada h1{font-size:var(--t-portada);line-height:.94;letter-spacing:-.03em}
.entradilla{margin-top:var(--s-6);max-width:36ch}
/* La fecha bajo la entradilla, tras un filete: la misma pregunta que en la portada, para que la primera pantalla
   tenga a dónde ir. Mismo HTML (#comprobar, #fecha-hero) y mismo destino, /contacto/?fecha=. */
.servicio .fecha{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--c-filete)}
.fecha label{font:var(--w-texto) var(--t-frase)/1.15 var(--f-titular);letter-spacing:-.015em;text-transform:none;margin-bottom:var(--s-4)}
.fecha-fila{display:grid;gap:var(--s-2)}
.fecha-alt{margin-top:var(--s-2);display:flex;align-items:center;gap:.4em;font-size:var(--t-pie);color:var(--c-tinta-2)}
.wa{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;color:var(--c-tinta);font-weight:var(--w-fuerte)}
@media (min-width:700px){
  .fecha{max-width:520px}
  .fecha-fila{grid-template-columns:1fr auto}
}
.portada.servicio{padding-top:var(--s-3)}
.portada.servicio .malla{row-gap:var(--s-6)}
.portada.servicio h1{hyphens:auto;-webkit-hyphens:auto}  /* «representación» no cabe entera a 360 px */
.miga ol{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--t-pie);color:var(--c-tinta-2)}
.miga li{display:flex;align-items:center}
.miga a{display:inline-flex;min-height:44px;align-items:center;color:var(--c-tinta)}
.miga .sep{padding:0 .55em}
.cartel{grid-column:sangre-ini / sangre-fin;margin-top:var(--s-4);background:var(--c-fondo)}
.cartel img,.cartel video{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:42% 30%;background:var(--c-espera);mix-blend-mode:var(--fundir)}
@media (min-width:700px){
  .entradilla{max-width:54ch}
  .cartel img,.cartel video{aspect-ratio:1/1}
}
@media (min-width:1000px){
  .portada.servicio{padding-top:0}
  .portada.servicio .malla{grid-template-rows:auto 1fr;row-gap:0}
  .miga{grid-column:c 1 / c 8;grid-row:1;padding-top:var(--s-5)}
  .portada.servicio h1{font-size:clamp(2.875rem,.6rem + 5vw,5.5rem)}
  .portada.servicio .titular{grid-column:c 1 / c 8;grid-row:2;align-self:end;padding:var(--s-8) 0 var(--s-7)}
  .cartel{grid-column:c 9 / sangre-fin;grid-row:1 / span 2;margin-top:0;position:relative;min-height:clamp(600px,84vh,800px)}
  .cartel img,.cartel video{position:absolute;inset:0;aspect-ratio:auto;height:100%;object-position:42% 28%}  /* llena la cabeza, mida lo que mida el texto */
}
@media (prefers-reduced-motion:no-preference){
  .portada{animation:aparecer .18s cubic-bezier(.22,1,.36,1) both}
}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}}

/* =================== PIEZA 2 · TIPOS DE EVENTO: una tabla editorial, una fila por evento ===================
   Cada fila: el evento en Gloock, qué toco y el enlace a su página. Entre filetes, sin cajas ni fondos.
   La fila entera se puede tocar (el ::after del enlace la cubre); el lector de pantalla oye un solo enlace.
   Escritorio: tres columnas alineadas a la malla con subgrid (4 · 5 · 3) y en la misma línea base.
   Tableta: el evento a la izquierda y el texto con el enlace a la derecha. Móvil: apilado. */
.tipos-sec .malla{row-gap:var(--s-7)}
.tipos-sec h2{max-width:15ch}
.tipos{border-top:1px solid var(--c-tinta)}
.tipo{position:relative;display:grid;row-gap:var(--s-3);padding:var(--s-5) 0 var(--s-4);border-bottom:1px solid var(--c-filete)}
.tipo h3{font-size:var(--t-frase);line-height:1.1;letter-spacing:-.015em}
.tipo .que{max-width:52ch}
.tipo .ir a::after{content:"";position:absolute;inset:0}
.tipo:hover .ir a{text-decoration-thickness:2px}
@media (min-width:700px) and (max-width:999px){
  .tipo{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--hueco);align-items:baseline}
  .tipo h3{grid-row:1 / span 2}
}
@media (min-width:1000px){
  .tipos-sec h2{grid-column:c 1 / c 9}
  .tipos{grid-column:c 1 / c-fin;display:grid;grid-template-columns:subgrid}
  .tipo{grid-column:1 / -1;grid-template-columns:subgrid;align-items:baseline;padding:var(--s-6) 0 var(--s-5)}
  .tipo h3{grid-column:1 / 5}
  .tipo .que{grid-column:5 / 10}
  .tipo .ir{grid-column:10 / -1}
}

/* =================== PIEZA 3 · ARGUMENTO: H2, una frase grande, una nota y un medio a sangre (opcional) ===================
   Escritorio: el H2 a lo ancho; debajo, la frase arriba y la nota abajo en 6 columnas, y el medio horizontal
   de la columna 7 al borde derecho. Sin medio (clase sin-medio), la frase y la nota ocupan 8 columnas.
   Móvil: H2, frase, nota y el medio a todo el ancho. */
.argumento .malla{row-gap:var(--s-6)}
.argumento h2{max-width:18ch}
.argumento .frase{font:var(--w-texto) var(--t-frase)/1.3 var(--f-titular);letter-spacing:-.01em;max-width:34ch}
.argumento .nota{border-top:1px solid var(--c-filete);padding-top:var(--s-4);max-width:46ch}
.argumento .medio{grid-column:sangre-ini / sangre-fin;margin-top:var(--s-4)}
.argumento .medio img,.argumento .medio video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--c-espera)}
@media (min-width:1000px){
  .argumento .malla{row-gap:0}
  .argumento h2{grid-column:c 1 / c 11;grid-row:1;margin-bottom:var(--s-8)}
  .argumento .frase{grid-column:c 1 / c 7;grid-row:2;align-self:start}
  .argumento .nota{grid-column:c 1 / c 6;grid-row:3;align-self:end}
  .argumento .medio{grid-column:c 7 / sangre-fin;grid-row:2 / span 2;margin-top:0;align-self:start}
  .argumento.sin-medio .frase{grid-column:c 1 / c 9}
  .argumento.sin-medio .nota{margin-top:var(--s-7)}
}

/* =================== PIEZA 4 · CLIP CON SONIDO (el mismo .clipsec de la portada) ===================
   Vertical (9:16), sin recortar: el póster es el propio clip. Al tocar, el póster se cambia por el vídeo con sonido.
   clip-izq: el clip a la izquierda, y el titular y el texto juntos, centrados en su alto (el «repertorio» de la portada).
   clip-der: el clip a la derecha, el titular arriba y el texto abajo, a ras del clip (el «distingue» de la portada).
   Móvil: titular, texto, clip y, debajo del clip, el botón. */
.clipsec .malla{row-gap:var(--s-6)}
.clipsec .texto,.clipsec .abajo{display:contents}
.clipsec h2,.clipsec .cuerpo,.clipsec .accion{grid-column:c / c-fin}  /* con display:contents pasan a ser hijos de la malla */
.clipsec h2{order:1}
.clipsec .cuerpo{order:2;max-width:46ch}
.clipsec .vertical{order:3;width:100%;max-width:440px}
.clipsec .vertical img,.clipsec .vertical video{width:100%;aspect-ratio:9/16;object-fit:cover}
.clipsec .accion{order:4;margin-top:calc(var(--s-3) * -1)}
@media (min-width:1000px){
  .clipsec .malla{align-items:start}
  .clipsec h2,.clipsec .cuerpo,.clipsec .accion{order:0}
  .clipsec .texto{display:flex;flex-direction:column;gap:var(--s-7)}
  .clipsec .abajo{display:grid;gap:var(--s-5);justify-items:start}
  .clipsec .abajo > *{grid-column:auto}  /* dentro de .abajo no hay líneas «c»: sin esto, el texto se va a una columna implícita (en home-f sale 114 px a la derecha del H2) */
  .clipsec .vertical{grid-row:1;max-width:none}
  .clipsec .accion{margin-top:0}
  .clip-der .texto{grid-column:c 1 / c 8;grid-row:1;align-self:stretch;justify-content:space-between}
  .clip-der .vertical{grid-column:c 9 / c-fin}
  .clip-izq .vertical{grid-column:c 1 / c 5}
  .clip-izq .texto{grid-column:c 7 / c-fin;grid-row:1;align-self:center}
  .clip-izq h2{max-width:10ch}
}

/* =================== PIEZA 5 · BLOQUE NOCHE: formación (el único bloque oscuro de la página) ===================
   Filete de oro, H2, texto y enlace; la foto (opcional) a sangre por la derecha. En oscuro, el bloque se eleva
   sobre la página con una superficie más clara y un filete, y la foto de fondo negro se funde con él. */
.noche{background:var(--c-noche);color:var(--c-luz);border-top:var(--b-noche);border-bottom:var(--b-noche)}
.noche :focus-visible{outline-color:var(--c-luz)}
.bloque-noche .malla{row-gap:var(--s-7)}
.bloque-noche .texto{border-top:1px solid var(--c-oro);padding-top:var(--s-6);display:grid;gap:var(--s-5);justify-items:start}
.bloque-noche h2{max-width:17ch}
.bloque-noche .texto p{max-width:46ch}
.bloque-noche .foto{grid-column:c / sangre-fin;width:86%;justify-self:end}
.bloque-noche .foto img,.bloque-noche .foto video{aspect-ratio:4/5;background:var(--c-noche);mix-blend-mode:var(--fundir)}
@media (min-width:1000px){
  .bloque-noche .malla{align-items:center;row-gap:0}
  .bloque-noche .texto{grid-column:c 1 / c 7;grid-row:1}
  .bloque-noche .foto{grid-column:c 8 / sangre-fin;grid-row:1;width:auto}
  .bloque-noche.sin-foto .texto{grid-column:c 1 / c 10}
}

/* =================== PREGUNTAS (el acordeón de la portada) =================== */
.preguntas{padding-top:0}
.preguntas .malla{row-gap:var(--s-7)}
.preguntas .regla{height:1px;background:var(--c-tinta);margin-bottom:calc(var(--aire) - var(--s-7))}
@media (min-width:1000px){
  .preguntas .malla{align-items:start}
  .preguntas h2{grid-column:c 1 / c 5}
  .preguntas .lista{grid-column:c 6 / c-fin}
}
.preguntas details{border-bottom:1px solid var(--c-filete)}
.preguntas details:first-of-type{border-top:1px solid var(--c-tinta)}
.preguntas summary{list-style:none;cursor:pointer;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-4) 0;font:var(--w-texto) var(--t-frase)/1.2 var(--f-titular);letter-spacing:-.015em}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";flex:none;width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-3px,-3px)}
.preguntas details[open] summary::after{transform:rotate(-135deg)}
.preguntas details p{color:var(--c-tinta-2);padding:0 0 var(--s-6);max-width:60ch}

/* =================== PIEZA 6 · TAMBIÉN HAGO: las otras páginas de servicio, como un índice corto ===================
   Un filete de tinta; debajo, el H2 a la izquierda y cada página con su miniatura (la misma foto que la lleva en la
   portada) y su nombre en Gloock. Cada entrada es un solo enlace y su ::after la cubre entera.
   Escritorio: H2 en 4 columnas y las entradas en dos de 4. Móvil: H2 y las entradas entre filetes. */
.tambien{padding-top:0}
.tambien .fila{border-top:1px solid var(--c-tinta);padding-top:var(--s-5);display:grid;row-gap:var(--s-5)}
.tambien h2{font-size:var(--t-frase);line-height:1.1;letter-spacing:-.015em}
.otro{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:var(--s-5);align-items:end;padding:var(--s-4) 0;border-top:1px solid var(--c-filete)}
.otro .medio{overflow:hidden;background:var(--c-espera)}
.otro .medio img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}  /* miniatura: siempre foto o póster, nunca vídeo */
.otro a{font:var(--w-texto) var(--t-frase)/1.15 var(--f-titular);letter-spacing:-.015em;text-decoration:underline;text-decoration-thickness:1px;padding-bottom:var(--s-1)}
.otro a::after{content:"";position:absolute;inset:0}
.otro:hover a{text-decoration-thickness:2px}
@media (min-width:1000px){
  .tambien .fila{grid-column:c 1 / c-fin;grid-template-columns:subgrid;align-items:start}
  .tambien h2{grid-column:1 / 5}
  .otros{grid-column:5 / -1;display:grid;grid-template-columns:subgrid}
  .otro{grid-column:span 4;border-top:0;padding-top:0;grid-template-columns:104px minmax(0,1fr)}
  /* con tres entradas (Management), las tres en una fila: el titular cede una columna */
  .tambien .fila:has(.otro:nth-child(3)) h2{grid-column:1 / 4}
  .tambien .fila:has(.otro:nth-child(3)) .otros{grid-column:4 / -1}
  .otros:has(.otro:nth-child(3)) .otro{grid-column:span 3}
}

/* =================== CONTACTO (el de la portada) =================== */
.contacto{padding-top:0}
.contacto .malla{row-gap:var(--s-7)}
.contacto .senala{width:56%}
.contacto .senala img{aspect-ratio:2/3}
.contacto h2{max-width:15ch}
form.pedir{display:grid;gap:var(--s-6);margin-top:var(--s-7)}
.fila2{display:grid;gap:var(--s-6)}
@media (min-width:640px){.fila2{grid-template-columns:1fr 1fr;column-gap:var(--s-5)}}
.pie-form{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
.pie-form small{font-size:var(--t-pie);color:var(--c-tinta-2)}
.directo{display:grid;margin-top:var(--s-8);border-top:1px solid var(--c-tinta)}
.directo a{display:flex;align-items:center;gap:var(--s-4);min-height:64px;border-bottom:1px solid var(--c-filete);text-decoration:none}
.directo a:hover b{text-decoration:underline}
.directo small{font-size:var(--t-pie);color:var(--c-tinta-2);margin-left:auto}
@media (min-width:1000px){
  .contacto .malla{align-items:start}
  .contacto .senala{grid-column:c 1 / c 5;width:auto;margin-top:var(--s-10)}
  .contacto .formulario{grid-column:c 6 / c-fin}
}

/* =================== PIE (el de la portada) =================== */
.pie{border-top:1px solid var(--c-tinta);padding:var(--s-9) 0 calc(var(--s-7) + 80px)}
@media (min-width:1000px){.pie{padding-bottom:var(--s-7)}}
.pie-rejilla{display:grid;gap:var(--s-7) var(--s-5);grid-template-columns:1fr 1fr}
.pie-marca{grid-column:1/-1}
@media (min-width:1000px){.pie-rejilla{grid-template-columns:5fr 2fr 2fr 2fr}.pie-marca{grid-column:auto}}
.pie-marca .logo img{height:30px}
.pie-marca p{margin-top:var(--s-4);color:var(--c-tinta-2);font-size:var(--t-pie);max-width:42ch}
.pie-tit{font:var(--w-texto) var(--t-pie)/1.3 var(--f-texto);text-transform:uppercase;letter-spacing:var(--espaciado)}
.pie ul{margin-top:var(--s-3)}
.pie li{font-size:var(--t-pie);color:var(--c-tinta-2);min-height:36px;display:flex;align-items:center}
.pie li a{display:inline-flex;min-height:44px;align-items:center;color:var(--c-tinta);text-decoration:none}
.pie li a:hover{text-decoration:underline}
.legal{margin-top:var(--s-9);padding-top:var(--s-4);border-top:1px solid var(--c-filete);display:flex;flex-wrap:wrap;gap:0 var(--s-5);font-size:var(--t-pie);color:var(--c-tinta-2);align-items:center}
.legal a{min-height:44px;display:inline-flex;align-items:center;color:var(--c-tinta)}

/* =================== BARRA FIJA MÓVIL (la de la portada) =================== */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr auto;gap:var(--s-2);padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));background:var(--c-barra);color:var(--c-tinta);border-top:1px solid var(--c-barra-borde);transform:translateY(110%);transition:transform .18s ease-out}
.barra.ver{transform:none}
.barra .btn{padding:0 var(--s-4);white-space:nowrap}
.barra .btn-hueco{width:56px;padding:0}
.barra .btn-hueco svg{width:22px;height:22px}
.barra[data-luz=noche]{background:var(--c-noche);color:var(--c-luz);border-top-color:var(--c-filete-noche)}
.barra[data-luz=noche] .btn-tinta{background:var(--c-luz);color:var(--c-noche);border-color:var(--c-luz)}
.barra[data-luz=noche] .btn-hueco{color:var(--c-luz);border-color:var(--c-luz)}
@media (min-width:1000px){.barra{display:none}}

/* =================== ESTADOS (solo maqueta, no va a producción) =================== */
.estados{padding:var(--s-8) 0 calc(var(--s-8) + 80px);background:var(--c-fondo);border-top:2px dashed var(--c-tinta)}
.estados h2{font:var(--w-fuerte) var(--t-texto)/1.3 var(--f-texto);letter-spacing:0}
.estados .caja > p{margin-top:var(--s-2);font-size:var(--t-pie);color:var(--c-tinta-2);max-width:80ch}
.estados-rejilla{display:grid;gap:var(--s-6);margin-top:var(--s-6)}
@media (min-width:1000px){.estados-rejilla{grid-template-columns:repeat(3,1fr)}}
.estado{display:grid;gap:var(--s-3);align-content:start;border-top:1px solid var(--c-tinta);padding-top:var(--s-4)}
.estado h3{font:var(--w-fuerte) var(--t-pie)/1.3 var(--f-texto);letter-spacing:0;color:var(--c-tinta-2)}
.btn[aria-disabled=true]{cursor:progress;opacity:.8}
.giro{width:14px;height:14px;border-radius:50%;border:2px solid var(--c-giro);border-top-color:var(--c-fondo);animation:giro 1s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.aviso{padding:var(--s-4) var(--s-5);border:1px solid var(--c-tinta);font-size:var(--t-pie);background:var(--c-fondo)}
.aviso.mal{border-color:var(--c-error)}
.accion + .aviso{margin-top:var(--s-4)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* campo trampa: lo rellenan los robots, no las personas */
@media (prefers-reduced-motion:reduce){.giro{animation:none}.barra{transition:none}}