/*
Theme Name: CH&V Arquitectura
Theme URI: https://chocomelivaliente.com
Author: Chocomeli & Valiente
Author URI: https://chocomelivaliente.com
Description: Tema a medida para el estudio de arquitectura Chocomeli & Valiente. Concepto «ficha de proyecto»: la web como dossier de láminas con cajetín, en monocromo estricto, donde el único color es el de las fotografías al pasar el ratón. Todo el contenido visible se edita desde el Personalizador.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chv-arquitectura
Tags: custom-logo, custom-menu, featured-images, translation-ready, one-column, editor-style

Este archivo contiene, íntegra y sin modificar, la hoja de estilos de la maqueta
original (Maqueta/styles.css). Cualquier añadido necesario para WordPress va al
final, en el bloque marcado «Añadidos del tema».
*/

/* ============================================================
   CH&V Arquitectura — Concepto 02 · FICHA DE PROYECTO
   La web como dossier de láminas con cajetín, sobre la mesa.
   ============================================================ */

:root{
  --ink:#111111;
  --paper:#ffffff;
  --mesa:#e8e8e8;             /* la mesa de trabajo, neutro croma 0 */
  --tinta-media:#3d3d3d;
  --rotulacion:#6e6e6e;
  --gris-marca:#7a7a7a;       /* solo texto grande */
  --line:rgba(17,17,17,.16);

  --display-mono:"Atkinson Hyperlegible Mono","Atkinson Mono Fallback",monospace;
  --display-sans:"Montserrat","Montserrat Fallback",sans-serif;
  --mono:"Atkinson Hyperlegible Mono","Atkinson Mono Fallback",monospace;
  --sans:"Montserrat","Montserrat Fallback",sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  /* el color de las fotos entra despacio y se retira algo más rápido:
     curva casi simétrica, nada de la salida expo de --ease */
  --ease-foto:cubic-bezier(.42,0,.3,1);
  --foto-entra:1.1s;
  --foto-sale:.55s;
  --sombra-papel:0 1px 2px rgba(17,17,17,.05),0 10px 30px rgba(17,17,17,.09);

  --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem;
  --sp-5:clamp(2.5rem,7vh,4.5rem); --sp-6:clamp(4rem,12vh,7rem);

  /* La lámina manda: el canto del papel es la línea vertical de la web.
     Cabecera y pie se alinean a ella, nunca a un ancho propio. */
  --margen:clamp(1rem,4vw,3rem);
  --carril:min(82rem,calc(100% - 2*var(--margen)));
}

*{margin:0;padding:0;box-sizing:border-box}

/* ---- Monocromo estricto ----
   El navegador pone color por su cuenta (azul de enlace, azul de
   selección, autorrelleno, controles nativos). Se neutraliza todo:
   el único color de la web es el de las fotos al pasar el ratón. */
:root{color-scheme:only light}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
input,select,textarea,button{accent-color:var(--ink);caret-color:var(--ink)}
input:-webkit-autofill,input:-webkit-autofill:hover,
input:-webkit-autofill:focus,textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 100vmax var(--paper) inset;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.65;
  color:var(--ink);background:var(--mesa);font-kerning:normal;
}
img{display:block;max-width:100%;height:auto}

/* ---- Cabecera: portada del expediente ---- */
.cabecera{
  background:var(--paper);border-bottom:1px solid var(--ink);
  position:sticky;top:0;z-index:50;
}
.cabecera-int{
  width:var(--carril);margin-inline:auto;
  padding:1rem 0;
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
}
.logo{display:inline-flex}
.logo img{width:auto;height:18px}
.cabecera nav{display:flex;flex-wrap:wrap;gap:.25rem clamp(.9rem,2.2vw,2rem);margin-left:auto}
.cabecera nav a{
  font-family:var(--mono);font-size:.8125rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink);text-decoration:none;padding:.6rem .25rem;
}
.cabecera nav a:hover,.cabecera nav a:focus-visible{text-decoration:underline;text-underline-offset:.45em}
.expediente{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--rotulacion);
  border:1px solid var(--line);padding:.35rem .65rem;
}
a:focus-visible,.boton:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---- Láminas ---- */
main{display:flex;flex-direction:column;gap:var(--sp-5);padding-block:var(--sp-5)}
.lamina{
  background:var(--paper);border:1px solid var(--ink);
  box-shadow:var(--sombra-papel);
  width:var(--carril);
  margin-inline:auto;
}
.cajetin-strip{
  display:flex;border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;
}
.cajetin-strip span{padding:.6rem 1rem;border-right:1px solid var(--ink);color:var(--rotulacion)}
.cajetin-strip span:first-child{color:var(--ink);font-weight:500}
.cajetin-strip span:nth-child(2){flex:1}
.cajetin-strip span:last-child{border-right:none}
.lamina-cuerpo{padding:clamp(1.75rem,5vw,4rem)}

/* ---- Tipografía ---- */
h1,h2,h3{
  font-weight:800;text-transform:uppercase;
  line-height:1.02;letter-spacing:-.005em;text-wrap:balance;
}
h1{font-family:var(--display-mono);letter-spacing:-.02em}
h2,h3{font-family:var(--display-sans)}
h1{font-size:clamp(2.2rem,5.8vw,4.5rem);max-width:20ch}
h1 .gris{color:var(--gris-marca)}
h2{font-size:clamp(1.75rem,4vw,2.9rem);margin-bottom:var(--sp-4)}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.nota-mono{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rotulacion);
}

/* ---- Hero (L-01) ---- */
.hero-sub{
  margin-top:var(--sp-3);max-width:56ch;color:var(--tinta-media);
  font-size:1.0625rem;text-wrap:pretty;
}
.hero-figura{margin-top:var(--sp-4)}
.img-marco{overflow:hidden;border:1px solid var(--ink)}
.img-marco img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transition:transform .7s var(--ease),filter var(--foto-sale) var(--ease-foto);
}
figure:hover .img-marco img,figure:active .img-marco img{
  transform:scale(1.03);filter:grayscale(0);
  transition:transform .9s var(--ease),filter var(--foto-entra) var(--ease-foto) 60ms;
}
.hero-figura .img-marco{aspect-ratio:21/10}
/* La cuadrícula se dibuja con el hueco de 1px, no con filetes en cada casilla:
   así las líneas salen solas aunque la fila se parta en varias, que es lo que
   pasa en tableta y en móvil. */
.datos-fila{
  display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--ink);border-top:none;
}
.datos-fila>div{
  flex:1 1 auto;padding:.7rem 1rem;background:var(--paper);
  min-width:9rem;
}
.datos-fila dt,.datos-tabla dt,.alcance dt{
  font-family:var(--mono);font-size:.6563rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rotulacion);
}
.datos-fila dd{font-weight:600;font-size:.9rem;margin-top:.1rem}
.datos-fila .muestra dd{font-weight:400;color:var(--tinta-media);font-style:italic}

.boton{
  display:inline-block;margin-top:var(--sp-4);
  font-family:var(--mono);font-size:.875rem;text-transform:uppercase;
  letter-spacing:.08em;text-decoration:none;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  padding:1rem 1.75rem;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.boton:hover{background:var(--paper);color:var(--ink)}

/* ---- Proyectos (L-02) ---- */
.ficha{border:1px solid var(--ink);margin:0;background:var(--paper)}
.ficha .img-marco{border:none;border-bottom:1px solid var(--ink)}
.ficha figcaption{padding:clamp(1.1rem,2.5vw,1.6rem)}
.ficha h3{margin-bottom:var(--sp-2)}
.datos-tabla>div{
  display:grid;grid-template-columns:7rem 1fr;gap:1rem;align-items:baseline;
  padding-block:.55rem;border-bottom:1px solid var(--line);
}
.datos-tabla>div:last-child{border-bottom:none}
.datos-tabla dd{font-weight:500;font-size:.9375rem}

.ficha-apaisada{display:grid;grid-template-columns:1.35fr 1fr}
.ficha-apaisada .img-marco{border-bottom:none;border-right:1px solid var(--ink);aspect-ratio:auto}
.ficha-apaisada figcaption{padding:clamp(1.5rem,3.5vw,2.5rem);align-self:center}

.fichas-fila{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(1.25rem,3vw,2.5rem);
}
.fichas-fila .img-marco{aspect-ratio:4/3}

/* ---- Página Proyectos: tomo II del expediente ---- */
.cabecera nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.45em}
.archivo-nota{margin-top:var(--sp-2);margin-bottom:var(--sp-4);max-width:72ch}
.ficha h2{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-bottom:var(--sp-2)}
.archivo-cierre{margin-top:var(--sp-5);display:flex;align-items:baseline;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap}
.archivo-cierre .boton{margin-top:0}

/* ---- Servicios (L-03) ---- */
.servicios-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) clamp(2.5rem,6vw,5rem)}
.servicios-cols p{color:var(--tinta-media);max-width:48ch;margin-top:var(--sp-2);text-wrap:pretty}
.alcance{margin-top:var(--sp-3);border-top:1px solid var(--ink)}
.alcance>div{
  display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:baseline;
  padding-block:.6rem;border-bottom:1px solid var(--line);
}
.alcance dd{font-size:.9375rem;font-weight:500}

/* ---- Estudio (L-04) ---- */
.estudio{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.estudio-figura{margin:0}
.estudio-figura .img-marco{aspect-ratio:4/3}
.estudio-texto p{color:var(--tinta-media);max-width:46ch;margin-top:var(--sp-3);text-wrap:pretty}
.estudio-texto .nota-mono{margin-top:var(--sp-3)}
/* El `padding-top` reserva la banda en la que se dibuja la rúbrica: va en
   posición absoluta y sin ese hueco se montaría sobre el párrafo anterior. */
.firmas{display:flex;gap:var(--sp-4);margin-top:var(--sp-4);padding-top:3.4rem;flex-wrap:wrap}
.firma{
  position:relative;
  border-top:1px solid var(--ink);padding-top:.6rem;min-width:10rem;
  font-weight:600;font-size:1rem;
}
.rubrica{
  position:absolute;left:.15rem;bottom:calc(100% - .2rem);
  width:min(11rem,100%);height:auto;overflow:visible;pointer-events:none;
  fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;opacity:.88;
}
.rubrica-trazo{stroke-width:1.7}
.rubrica-flor{stroke-width:1.1}
.firma span{
  display:block;font-family:var(--mono);font-size:.6563rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rotulacion);
  margin-bottom:.25rem;
}

/* ---- Contacto (L-05) ---- */
.contacto{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-4) clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.contacto h2{margin-bottom:var(--sp-2)}
.contacto-sub{color:var(--tinta-media);max-width:46ch;text-wrap:pretty}
.boton-grande{font-size:clamp(.9375rem,2vw,1.0625rem);text-transform:none;letter-spacing:.03em;padding:1.2rem 2rem}
.contacto .nota-mono{margin-top:var(--sp-3)}
.sello{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;line-height:1.7;
  border:2px solid var(--ink);padding:1.4rem 1.6rem;
  transform:rotate(-5deg);justify-self:center;
}
.sello span{
  display:block;font-family:var(--display-sans);font-weight:800;font-size:1.6rem;
  letter-spacing:.02em;margin-bottom:.45rem;
}

/* ---- Pie ---- */
.pie{
  width:var(--carril);margin-inline:auto;
  padding:0 0 var(--sp-5);
}
.pie img{width:170px;height:auto}
.pie p{
  font-family:var(--mono);font-size:.75rem;color:var(--rotulacion);
  letter-spacing:.06em;margin-top:var(--sp-2);
}

/* ---- Entrada + revelado ---- */
@media (prefers-reduced-motion:no-preference){
  .hero>*{animation:subir .8s var(--ease) both}
  .hero>*:nth-child(2){animation-delay:.08s}
  .hero>*:nth-child(3){animation-delay:.16s}
  .hero>*:nth-child(4){animation-delay:.24s}
  @keyframes subir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
[data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].pre{opacity:0;transform:translateY(18px)}

/* ---- Firmado de las rúbricas ---- */
/* Estado de reposo: dibujadas. Es `js/firmas.js` quien las borra al cargar
   (clase `firmando`) y las escribe al entrar en pantalla (clase `escrita`),
   así que sin JavaScript, o con menos movimiento, se ven de una pieza. */
@media (prefers-reduced-motion:no-preference){
  .firmas.firmando .rubrica>*{stroke-dasharray:1;stroke-dashoffset:1}
  .firmas.escrita .rubrica-trazo{
    animation:firmar 1.5s cubic-bezier(.5,.05,.35,1) var(--retardo,0s) forwards;
  }
  .firmas.escrita .rubrica-flor{
    animation:firmar .5s cubic-bezier(.4,0,.3,1) calc(var(--retardo,0s) + 1.45s) forwards;
  }
  /* La segunda firma empieza cuando la primera va por la mitad. */
  .firma:nth-child(2){--retardo:.9s}
  .firma:nth-child(3){--retardo:1.8s}
  .firma:nth-child(4){--retardo:2.7s}
  @keyframes firmar{to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.boton{transition:none}
  /* Se retira el movimiento (el zoom), pero NO el fundido de color:
     un cambio de color no es movimiento, y es lo que da vida al B/N. */
  .img-marco img{transition:filter var(--foto-sale) var(--ease-foto)}
  figure:hover .img-marco img,figure:active .img-marco img{
    transform:none;
    transition:filter var(--foto-entra) var(--ease-foto) 60ms;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:64rem){
  .fichas-fila{grid-template-columns:1fr 1fr}
}
@media (max-width:56rem){
  .ficha-apaisada{grid-template-columns:1fr}
  .ficha-apaisada .img-marco{border-right:none;border-bottom:1px solid var(--ink);aspect-ratio:16/10}
  .servicios-cols,.estudio,.contacto{grid-template-columns:1fr}
  .sello{justify-self:start;transform:rotate(-3deg)}
  .cajetin-strip span:last-child{display:none}
}
/* ---- Táctil y safe areas ---- */
body{overflow-x:clip}
@supports (padding:env(safe-area-inset-left)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
@media (pointer:coarse){
  .cabecera nav a{padding:.85rem .5rem}
}
.boton:active{transform:scale(.985)}

@media (max-width:44rem){
  .cabecera{position:static}
  .cabecera-int{flex-direction:column;align-items:flex-start;gap:.35rem;padding-block:.9rem}
  .cabecera nav{margin-left:0}
  .fichas-fila{grid-template-columns:1fr}
  .datos-fila{display:grid;grid-template-columns:1fr 1fr}
  .datos-fila>div{min-width:0}
  /* Si el número de casillas es impar, la última ocupa la fila entera:
     la cuadrícula nunca se queda con medio hueco vacío. */
  .datos-fila>div:last-child:nth-child(odd){grid-column:1/-1}
  .expediente{display:none}
}

/* ============================================================
   Páginas interiores · Servicios / Estudio / Contacto
   Mismas láminas del dossier: cajetín, tablas y firmas.
   ============================================================ */
.plana-lead{
  color:var(--tinta-media);font-size:clamp(1.0625rem,2.2vw,1.3rem);
  max-width:62ch;text-wrap:pretty;
}
.lamina-cuerpo>.plana-lead{margin-bottom:var(--sp-4)}
.lamina-cuerpo h1+.plana-lead{margin-top:var(--sp-3)}
.lamina-cuerpo h2+.plana-lead{margin-top:calc(-1*var(--sp-2))}

/* contacto: expediente de entrada */
.contacto-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contacto-info>.boton-grande:first-child{margin-top:0}
.contacto-info .datos-tabla{margin-top:var(--sp-4);border:1px solid var(--ink)}
.contacto-info .datos-tabla>div{padding:.7rem 1rem}
.contacto-info .datos-tabla dd a{color:var(--ink)}

/* formulario */
.form-contacto .campo{margin-bottom:var(--sp-3)}
.form-contacto label{
  display:block;font-family:var(--mono);font-size:.6563rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rotulacion);margin-bottom:.4rem;
}
.form-contacto input,.form-contacto select,.form-contacto textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);border-radius:0;padding:.75rem .9rem;
}
.form-contacto textarea{min-height:8rem;resize:vertical}
.form-contacto input:focus,.form-contacto select:focus,.form-contacto textarea:focus{
  outline:2px solid var(--ink);outline-offset:2px;
}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.form-contacto button.boton{appearance:none;-webkit-appearance:none;cursor:pointer;width:100%}
.form-contacto>p:first-child{margin-bottom:var(--sp-3)}
.form-nota{margin-top:var(--sp-3)}

@media (max-width:56rem){
  .contacto-cols,.form-fila{grid-template-columns:1fr}
}

/* ============================================================
   AÑADIDOS DEL TEMA
   Todo lo anterior es la maqueta original, intacta. Lo que sigue es
   lo que WordPress necesita y no existía en el HTML estático. Nada de
   esto cambia el aspecto por defecto de ninguna lámina.
   ============================================================ */

/* -- Accesibilidad: texto solo para lectores de pantalla --
   Lo usan el buscador y la paginación de las plantillas de respaldo. */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}

/* -- Selector de idioma: dos casillas del cajetín --
   Comparte caja, filete y tipografía con el sello de expediente que tiene al
   lado, porque son dos campos del mismo cajetín. La casilla en uso va marcada
   en tinta plena y la otra en gris de rotulación; al pasar por encima, la otra
   se marca también, que es justo lo que va a pasar al pulsarla. */
.idiomas{
  display:flex;
  border:1px solid var(--line);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
}
.idioma{
  display:flex;align-items:center;
  padding:.35rem .65rem;
  color:var(--rotulacion);text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.idiomas>*+*{border-left:1px solid var(--line)}
.idiomas-rotulo{display:none}
.idioma--activo,
a.idioma:hover,a.idioma:focus-visible{background:var(--ink);color:var(--paper)}

/* -- Menú plegable de las pantallas estrechas --
   Los cuatro enlaces no caben en una línea de móvil y la cabecera se
   desarmaba. Ahí se pliegan detrás de un botón y bajan como el índice del
   expediente: una lámina por línea, numeradas y separadas por filetes.

   El botón es otra casilla del cajetín, igual que el idioma y el sello, y
   marca su estado como ellos: al abrirse se rellena de tinta y las dos rayas
   se cruzan. Solo existe con JavaScript (clase `js` en <html>); sin él los
   enlaces se quedan a la vista, que es lo que pasaba hasta ahora. */
.menu-boton{
  display:none;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.75rem;line-height:1.65;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:none;-webkit-appearance:none;appearance:none;
  border:1px solid var(--line);padding:.35rem .65rem;cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.menu-boton:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.menu-boton[aria-expanded="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-icono{position:relative;display:block;width:.95rem;height:.5rem;flex:none}
.menu-icono::before,.menu-icono::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .25s var(--ease);
}
.menu-icono::before{top:0}
.menu-icono::after{bottom:0}
.menu-boton[aria-expanded="true"] .menu-icono::before{transform:translateY(.25rem) rotate(45deg)}
.menu-boton[aria-expanded="true"] .menu-icono::after{transform:translateY(-.25rem) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .menu-icono::before,.menu-icono::after,.menu-boton{transition:none}
}
/* El rótulo lo cambia el CSS, no el script: así el nombre accesible del botón
   pasa de «Menú» a «Cerrar» él solo. */
.menu-txt--cerrar{display:none}
.menu-boton[aria-expanded="true"] .menu-txt--abrir{display:none}
.menu-boton[aria-expanded="true"] .menu-txt--cerrar{display:inline}

@media (max-width:56rem){
  /* Una sola línea, y solo dos cosas en ella: la marca y el botón. Con tres
     cajas —marca, idioma y menú— no cabían y el botón se descolgaba a una
     segunda fila, desalineado con todo. El idioma pasa a ser el último campo
     del menú, que es donde se va a buscar. */
  .cabecera-int{flex-direction:row;align-items:center;gap:0 var(--sp-2)}
  .logo{min-width:0}
  .logo img{max-width:100%;object-fit:contain;object-position:left center}
  .idiomas{order:1;margin-left:auto}
  .js .menu-boton{display:inline-flex;order:2;margin-left:auto;flex:none}
  .cabecera nav{flex:1 0 100%;order:3;margin-left:0}

  /* Con JavaScript el idioma se recoge dentro del menú; sin él se queda en la
     cabecera, donde estaba, porque no hay menú donde meterlo. */
  .js .idiomas{display:none}
  .js .cabecera.menu-abierto .idiomas{
    display:flex;order:4;flex:1 0 100%;margin-top:var(--sp-2);
  }
  .js .cabecera.menu-abierto .idiomas-rotulo{
    display:flex;align-items:center;flex:1;padding:.35rem .65rem;
    color:var(--rotulacion);text-transform:uppercase;
  }

  .js .cabecera nav{display:none}
  .js .cabecera.menu-abierto nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin-top:.9rem;border-top:1px solid var(--ink);counter-reset:chv-lamina;
  }
  .js .cabecera.menu-abierto nav a{
    display:flex;align-items:baseline;gap:.9rem;
    padding:.95rem .1rem;border-bottom:1px solid var(--line);
  }
  .js .cabecera.menu-abierto nav a:last-child{border-bottom:none}
  .js .cabecera.menu-abierto nav a::before{
    counter-increment:chv-lamina;
    content:counter(chv-lamina,decimal-leading-zero);
    font-size:.6875rem;color:var(--rotulacion);
  }
  .js .cabecera.menu-abierto nav a[aria-current]::before{color:var(--ink)}
  .js .cabecera.menu-abierto nav a[aria-current]{text-decoration:underline;text-underline-offset:.35em}
}
@media (max-width:56rem) and (prefers-reduced-motion:no-preference){
  .js .cabecera.menu-abierto nav,
  .js .cabecera.menu-abierto .idiomas{animation:menu-baja .25s var(--ease) both}
  @keyframes menu-baja{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
}
/* Dedo, no ratón: las casillas crecen hasta ser un objetivo cómodo. */
@media (max-width:56rem) and (pointer:coarse){
  .menu-boton,.idioma{padding-block:.65rem}
}
/* El logotipo solo se achica cuando de verdad falta ancho, ya en móvil: entre
   44rem y 56rem la cabecera lleva únicamente marca, idioma y botón, y ahí sigue
   cabiendo a su altura de siempre. */
@media (max-width:44rem){
  .logo img{height:16px}
}

/* -- Entre el escritorio y el menú plegable: la cabecera se queda sin sitio --
   Con la marca, los cinco enlaces, el idioma y el sello en una sola línea, por
   debajo de ~72rem el sello se descolgaba a una segunda fila y la cabecera se
   partía en dos. Antes de plegar nada detrás del botón se retiran campos por
   orden de importancia, como en un cajetín que se queda corto:

   1. «Inicio», a partir de 74rem — el logotipo ya lleva a la portada, así que
      es el único enlace que se puede quitar sin perder ningún destino.
   2. El sello de expediente, a partir de 67rem — solo cuando quitar «Inicio»
      ya no basta. Es decoración rotulada, no navegación, y es lo último que
      queda antes de que entre el menú plegable.
   3. Ya no queda nada más que quitar: por debajo de 56rem los cuatro enlaces
      restantes tampoco caben junto a la marca y el idioma, así que ahí entra
      el menú plegable (antes esperaba hasta 44rem y la cabecera pasaba esas
      doce rem partida en dos filas).

   Los tres límites llevan un margen de unos 30px sobre el punto real en que
   rompe cada uno, para absorber los cambios de ancho del menú. */
@media (max-width:74rem){
  .cabecera nav .nav-inicio{display:none}
}
@media (max-width:67rem){
  .expediente{display:none}
}
/* Dentro del menú plegable sobra el sitio: «Inicio» vuelve al índice. */
@media (max-width:56rem){
  .cabecera nav .nav-inicio{display:inline}
}

/* -- La cabecera pegajosa, por debajo de la barra de administración -- */
body.admin-bar .cabecera{top:32px}
@media (max-width:782px){
  body.admin-bar .cabecera{top:46px}
}

/* -- Banner institucional del Kit Digital --
   Va en color a propósito: los emblemas oficiales no se pueden alterar, así
   que queda fuera del monocromo y del filtro de las fotos. La regla `.pie img`
   fija 170px para el logotipo del pie, y aquí hace falta otro ancho.

   Suelto sobre la mesa no se sostiene: los emblemas traen fondo blanco propio y
   flotaban sobre el gris sin nada que los sujetase. Así que van en una cartela
   —papel blanco, filo de tinta y la misma sombra de las láminas—, que es el
   único objeto que este diseño sabe posar sobre la mesa. Se lee como el sello
   que cierra el expediente, no como un logotipo que sobró. */
.pie-kit-caja{
  max-width:48rem;margin:var(--sp-4) auto 0;
  background:var(--paper);border:1px solid var(--ink);
  box-shadow:var(--sombra-papel);
  padding:var(--sp-3) clamp(1.25rem,3vw,2rem);
}
.pie img.pie-kit{width:100%;height:auto}

/* -- Enlaces legales del pie, en la misma línea del copyright --
   Se comportan como los del menú: sin subrayado hasta que reciben el foco. */
.pie p a{text-decoration:none}
.pie p a:hover,.pie p a:focus-visible{text-decoration:underline;text-underline-offset:.35em}

/* -- Punto focal de las fotos (Personalizador → el punto sobre la foto) --
   Sin ajustar, 50% 50%: exactamente el encuadre por defecto de la maqueta.
   Cada tamaño de pantalla puede llevar el suyo; el que no se pone se hereda
   hacia arriba (móvil → tablet → ordenador), igual que las fotos. Los cortes
   son los mismos que los de <picture>: 64rem y 44rem. */
.img-marco{--foco-x:var(--chv-foco-x,50%);--foco-y:var(--chv-foco-y,50%)}
@media (max-width:64rem){
  .img-marco{
    --foco-x:var(--chv-foco-x-t,var(--chv-foco-x,50%));
    --foco-y:var(--chv-foco-y-t,var(--chv-foco-y,50%));
  }
}
@media (max-width:44rem){
  .img-marco{
    --foco-x:var(--chv-foco-x-m,var(--chv-foco-x-t,var(--chv-foco-x,50%)));
    --foco-y:var(--chv-foco-y-m,var(--chv-foco-y-t,var(--chv-foco-y,50%)));
  }
}
.img-marco img{object-position:var(--foco-x) var(--foco-y)}

/* -- Fotos distintas por dispositivo: <picture> no debe alterar la caja -- */
.img-marco picture{display:contents}

/* -- Formulario de contacto: trampa antispam y avisos de envío -- */
.chv-trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-aviso{
  border:1px solid var(--ink);padding:.9rem 1.1rem;margin-bottom:var(--sp-3);
  line-height:1.5;
}
.form-aviso.form-aviso-error{border-width:2px}
.form-contacto>.form-aviso:first-child{margin-bottom:var(--sp-3)}

/* -- Contenido libre: páginas normales, entradas, resultados y 404 --
   La maqueta no tiene textos largos; esto da ritmo de lectura a
   page.php / index.php / 404.php sin salirse de la estética de lámina. */
.contenido-libre{max-width:72ch}
.contenido-libre>*+*{margin-top:var(--sp-3)}
.contenido-libre h2{font-size:clamp(1.4rem,3vw,2rem);margin-top:var(--sp-4);margin-bottom:0}
.contenido-libre h3{margin-top:var(--sp-4)}
.contenido-libre h4,.contenido-libre h5,.contenido-libre h6{
  font-family:var(--display-sans);font-weight:800;text-transform:uppercase;
  font-size:1rem;letter-spacing:-.005em;margin-top:var(--sp-3);
}
.contenido-libre a{text-decoration:underline;text-underline-offset:.25em}
.contenido-libre ul,.contenido-libre ol{padding-left:1.35rem}
.contenido-libre li+li{margin-top:.35rem}
.contenido-libre blockquote{
  border-left:2px solid var(--ink);padding-left:var(--sp-2);
  color:var(--tinta-media);font-style:italic;
}
.contenido-libre code,.contenido-libre pre{font-family:var(--mono);font-size:.875rem}
.contenido-libre pre{border:1px solid var(--line);padding:var(--sp-2);overflow-x:auto}
.contenido-libre table{border-collapse:collapse;width:100%}
.contenido-libre th,.contenido-libre td{border:1px solid var(--line);padding:.55rem .75rem;text-align:left}
.contenido-libre img{border:1px solid var(--ink)}
.contenido-libre figcaption,.wp-caption-text{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rotulacion);margin-top:.5rem;
}
.contenido-libre .alignleft{float:left;margin:0 var(--sp-3) var(--sp-2) 0}
.contenido-libre .alignright{float:right;margin:0 0 var(--sp-2) var(--sp-3)}
.contenido-libre .aligncenter{margin-inline:auto}
.contenido-libre .alignwide,.contenido-libre .alignfull{max-width:none}
.contenido-libre::after{content:"";display:table;clear:both}

/* ============================================================
   Servicios · las dos láminas que la portada no tiene
   La página repetía las dos columnas de la portada y poco más. Aquí
   están las dos piezas que la hacen una página y no un resumen: el
   método de trabajo y los trabajos técnicos sueltos. Las dos usan
   material que ya existía —el filete de tinta, la rotulación mono, el
   gris de tinta media—, así que no añaden vocabulario al diseño.
   ============================================================ */

/* -- Las fases del encargo --
   Se leen como las láminas del propio dossier: cada una cuelga de su
   filete con el código de rotulación arriba, igual que un cajetín. */
.fases{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4) clamp(2rem,5vw,4rem);
  margin-top:var(--sp-4);list-style:none;
}
.fase{border-top:1px solid var(--ink);padding-top:.85rem}
.fase-num{
  display:block;font-family:var(--mono);font-size:.6563rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rotulacion);margin-bottom:.5rem;
}
.fase h3{font-size:clamp(1.05rem,2vw,1.25rem)}
.fase p{color:var(--tinta-media);font-size:.9375rem;margin-top:.6rem;text-wrap:pretty}

/* -- Trabajos técnicos --
   La misma tabla de datos de las fichas, con los papeles cambiados: aquí
   manda el nombre del trabajo y el texto va detrás, en gris. */
.tecnicos{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(2.5rem,6vw,5rem);
  margin-top:var(--sp-4);border-top:1px solid var(--ink);
}
.tecnicos>div{padding-block:.9rem;border-bottom:1px solid var(--line)}
.tecnicos dt{font-weight:600;font-size:1rem;text-wrap:balance}
.tecnicos dd{
  color:var(--tinta-media);font-size:.9375rem;margin-top:.15rem;
  max-width:46ch;text-wrap:pretty;
}

@media (max-width:64rem){
  .fases{grid-template-columns:1fr 1fr}
}
@media (max-width:56rem){
  .tecnicos{grid-template-columns:1fr}
}
@media (max-width:44rem){
  .fases{grid-template-columns:1fr;gap:var(--sp-3)}
}

/* -- Listado de entradas (index.php, búsqueda, archivos) -- */
.lista-entradas{margin-top:var(--sp-4);border-top:1px solid var(--ink)}
.lista-entradas article{padding-block:var(--sp-3);border-bottom:1px solid var(--line)}
.lista-entradas h2{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-bottom:.5rem}
.lista-entradas h2 a{text-decoration:none}
.lista-entradas h2 a:hover{text-decoration:underline;text-underline-offset:.25em}
.lista-entradas p{color:var(--tinta-media);max-width:72ch}
.paginacion{margin-top:var(--sp-4);display:flex;gap:var(--sp-2);flex-wrap:wrap;font-family:var(--mono);font-size:.8125rem}
.paginacion .current{font-weight:600;text-decoration:underline;text-underline-offset:.35em}