/* ángel ferrer photo — estilo
   Unidades: la maqueta de Miro mide 1366 × 768.
   --ux = 1 px de Miro en horizontal, --uy = en vertical, --u = el menor.
   --uf = unidad de letra = --u × --escala-letra (los tamaños de Miro se multiplican por la escala). */

/* Canela (Commercial Type, de pago): se usa la instalada en el ordenador o, si existen,
   los archivos de plantilla/fuentes/. Si no hay ninguna, se ve Cormorant Garamond en su lugar. */
@font-face {
  font-family: 'Canela AF'; font-weight: 400; font-style: normal; font-display: block;
  src: local('Canela Regular'), local('Canela-Regular'), local('Canela'),
       url('fuentes/Canela-Regular-Web.woff2') format('woff2'), url('fuentes/Canela-Regular.woff2') format('woff2'),
       url('fuentes/Canela-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Canela AF'; font-weight: 300; font-style: normal; font-display: block;
  src: local('Canela Light'), local('Canela-Light'),
       url('fuentes/Canela-Light-Web.woff2') format('woff2'), url('fuentes/Canela-Light.woff2') format('woff2'),
       url('fuentes/Canela-Light.otf') format('opentype');
}

/* Cormorant Garamond servida desde assets/fuentes (13/11/2026; antes Google Fonts con display=swap: al cambiar de
   página se veía un instante Georgia, más grande, y luego Cormorant). «block»: el texto espera a la letra en vez de
   saltar de tamaño. Archivos de Fontsource (licencia OFL), solo latin y latin-ext. */
/* cormorant-garamond-latin-ext-400-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url('fuentes/cormorant-garamond-latin-ext-400-normal.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;
}
/* cormorant-garamond-latin-400-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url('fuentes/cormorant-garamond-latin-400-normal.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;
}
/* cormorant-garamond-latin-ext-500-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: block;
  font-weight: 500;
  src: url('fuentes/cormorant-garamond-latin-ext-500-normal.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;
}
/* cormorant-garamond-latin-500-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: block;
  font-weight: 500;
  src: url('fuentes/cormorant-garamond-latin-500-normal.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;
}
/* cormorant-garamond-latin-ext-600-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: block;
  font-weight: 600;
  src: url('fuentes/cormorant-garamond-latin-ext-600-normal.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;
}
/* cormorant-garamond-latin-600-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: block;
  font-weight: 600;
  src: url('fuentes/cormorant-garamond-latin-600-normal.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;
}
/* cormorant-garamond-latin-ext-400-italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: block;
  font-weight: 400;
  src: url('fuentes/cormorant-garamond-latin-ext-400-italic.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;
}
/* cormorant-garamond-latin-400-italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: block;
  font-weight: 400;
  src: url('fuentes/cormorant-garamond-latin-400-italic.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;
}
/* cormorant-garamond-latin-ext-500-italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: block;
  font-weight: 500;
  src: url('fuentes/cormorant-garamond-latin-ext-500-italic.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;
}
/* cormorant-garamond-latin-500-italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: block;
  font-weight: 500;
  src: url('fuentes/cormorant-garamond-latin-500-italic.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;
}

:root {
  --ux: calc(100vw / 1366);
  --uy: calc(100vh / 768);
  --u: min(calc(100vw / 1366), calc(100vh / 768));
  --escala-letra: .8;
  --uf: calc(var(--u) * var(--escala-letra));
  --negro: #1a1a1a;          /* Miro: textos principales */
  --gris: #595959;           /* Miro: "photo" y rótulos de sección */
  --texto: #2a2a2a;          /* cuerpo de texto */
  --bg: #f5f3ee;
  --rotulo: 'Cormorant Garamond', Garamond, Georgia, serif;   /* 14/11/2026: sin Canela; la letra se elige en el directorio (tipos.css) */
  --serif: 'Cormorant Garamond', Garamond, Georgia, serif;
  --lh-miro: 1.4375;         /* alto de caja de Miro / tamaño de letra (46/32) */
  --fundido: .6s ease;
  --cab-y: 15.89;
}
@supports (height: 100svh) { :root { --uy: calc(100svh / 768); --u: min(calc(100vw / 1366), calc(100svh / 768)); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--negro); }
/* reserva siempre el hueco de la barra de desplazamiento, para que nada salte al cambiar de una vista con scroll a otra sin él */
html { scrollbar-gutter: stable; overflow-x: clip; }
body { font-family: var(--rotulo); font-weight: 400; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 1px solid var(--gris); outline-offset: 4px; }

/* --cab-y (altura de la cabecera): siempre la de la portada, 11.28 (web.js) */

/* ---------------------------------------------------------------- cabecera */
.cab a {
  position: fixed; z-index: 40;
  top: calc(var(--cab-y) * var(--uy));
  font-size: calc(32 * var(--uf)); line-height: var(--lh-miro);
  color: var(--negro); white-space: nowrap;
}
/* Las tres posiciones se miden desde la izquierda en unidades de pantalla (como todo lo demás), no con 50 % ni
   con «right»: así no se mueven cuando aparece o desaparece la barra de desplazamiento (11/11/2026). */
.cab-about  { left: calc(20.54 * var(--ux)); }
.cab-marca  { left: calc(389.83 * var(--ux)); width: calc(586 * var(--ux)); text-align: center; }
.cab-jardin { left: calc(1084.78 * var(--ux)); width: calc(264 * var(--ux)); text-align: right; }
.cab .photo { color: var(--gris); }
/* tilde vertical de «ángel»: trazo recto sobre la a. web.js calcula --tilde-top midiendo la «a»
   de la letra que se esté viendo, para que la distancia sea la misma con cualquier tipografía. */
.tilde { position: relative; display: inline-block; }
.tilde::before {
  content: ''; position: absolute;
  /* 13/11/2026: más clara (gris de «photo») y un grosor (.037em) a la derecha de la original (-.052em) */
  left: 50%; width: .037em; margin-left: -.015em;
  top: var(--tilde-top, .155em); height: .2em;
  background: var(--gris);
}

/* ---------------------------------------------------------------- rótulos */
.rotulo {
  position: fixed; z-index: 10;
  color: var(--gris); line-height: var(--lh-miro);
  transition: color .3s, opacity var(--fundido);
  cursor: pointer;
}
.rotulo.activo, .rotulo:hover { color: var(--negro); }

/* ---------------------------------------------------------------- estados (Miro, 11/11/2026)
   body[data-modo] = inicio | abre | sec · body[data-sec] = 1 proyectos · 2 encargos · 3 bazar */
html, body { transition: background-color var(--fundido); }
.cab a { transition: opacity .45s ease, top .45s ease; }
/* about, el nombre y el jardín no se van nunca y están siempre a la altura de la portada (Ángel, 11/11/2026) */

/* los tres nombres de abajo (portada y secciones). web.js los coloca según el estado; aquí, el tono. */
.rotulo-portada { z-index: 12; color: var(--gris);
  transition: color .35s, opacity .45s ease, top .55s ease, left .55s ease, width .55s ease, font-size .55s ease; }
.rotulo-portada[data-tono="actual"] { color: var(--gris); }
.rotulo-portada[data-tono="clara"] { color: #b0b0b0; }
.rotulo-portada[data-tono="blanca"] { color: #fff; }
.rotulo-portada:hover { color: var(--negro); }
.rotulo-portada[data-tono="blanca"]:hover { color: #fff; opacity: .75; }

/* foto al azar en los dos tercios opuestos */
.apertura { position: fixed; top: 0; bottom: 0; z-index: 2; overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity .55s ease; }
.apertura img { width: 100%; height: 100%; object-fit: cover; }
body[data-modo="abre"][data-sec="1"] .apertura[data-sec="1"],
body[data-modo="abre"][data-sec="2"] .apertura[data-sec="2"] { opacity: 1; }

/* subcategorías: visibles al abrir su sección y dentro de ella */
.barra .rotulo { opacity: 0; visibility: hidden; pointer-events: none; color: var(--gris);
  transition: color .3s, opacity .45s ease, visibility 0s .45s; }
body[data-modo="abre"][data-sec="1"] .barra[data-sec="1"] .rotulo,
body[data-modo="sec"][data-sec="1"] .barra[data-sec="1"] .rotulo,
body[data-modo="abre"][data-sec="2"] .barra[data-sec="2"] .rotulo,
body[data-modo="sec"][data-sec="2"] .barra[data-sec="2"] .rotulo {
  opacity: 1; visibility: visible; pointer-events: auto; transition: color .3s, opacity .45s ease; }
body[data-modo="sec"] .barra.con-filtro .rotulo { color: #b0b0b0; }
body[data-modo="sec"] .barra.con-filtro .rotulo.activo { color: var(--gris); }
.barra .rotulo:hover { color: var(--negro) !important; }

/* vistas de cada sección */
.vista { display: none; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
body[data-modo="sec"][data-sec="1"] .vista-proyectos,
body[data-modo="sec"][data-sec="2"] .vista-encargos,
body[data-modo="sec"][data-sec="3"] .vista-bazar { display: block; animation: aparece .6s ease; }

/* encargos: primero el texto del servicio, luego el mosaico */
.servicio { position: relative; height: 100vh; }
@supports (height: 100svh) { .servicio { height: 100svh; } }
.servicio-texto { position: absolute; font-family: var(--serif); font-weight: 500; color: var(--gris);
  line-height: 1.45; text-wrap: pretty; }
.servicio-texto p + p { margin-top: .7em; }
.servicio-texto .clientes { font-style: italic; }
.servicio-texto .falta { color: #b0b0b0; font-style: italic; }
.servicio-texto.entra { animation: aparece .5s ease; }
/* flechas: todas iguales (12/11/2026) — 42 × 17 px de Miro, trazo 0,95, gris; más oscuras al pasar */
.flecha { position: absolute; display: block; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gris); opacity: .7; transition: opacity .3s, transform .4s ease, color .3s; }
.flecha svg, .bazar-flecha svg, .galeria .cerrar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flecha path, .bazar-flecha path, .galeria .cerrar path { fill: none; stroke: currentColor; stroke-width: .95;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.flecha:hover { opacity: 1; color: var(--negro); }
.flecha-abajo:hover { transform: translateY(3px); }
.flecha-arriba:hover { transform: translateY(-3px); }
.flecha.oculta { opacity: 0; pointer-events: none; }

/* encargos sin rama elegida: texto general quieto, sin flecha ni mosaico */
.vista-encargos.sin-rama .flecha, .vista-encargos.sin-rama .lienzo { display: none; }

/* rama de encargos sin texto (solo_foto): sin pantalla de texto; la foto no se abre */
.vista-encargos.solo-foto .servicio { display: none; }
.caja.quieta { pointer-events: none; cursor: default; }
.caja.quieta .nombre { color: var(--gris); }

/* bazar · propuesta A «bisagra»: opciones en el tercio central; imagen a la izquierda y ficha a la derecha */
body[data-modo="abre"][data-sec="3"] .barra[data-sec="3"] .rotulo,
body[data-modo="sec"][data-sec="3"] .barra[data-sec="3"] .rotulo {
  opacity: 1; visibility: visible; pointer-events: auto; transition: color .3s, opacity .45s ease; }
.vista-bazar { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.bazar-imagen { position: fixed; top: 0; bottom: 0; overflow: hidden; }
.bazar-diapo { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.bazar-diapo.activa { opacity: 1; }
.bazar-diapo.llena img { width: 100%; height: 100%; object-fit: cover; }
.bazar-diapo.al-ancho { display: flex; align-items: center; }      /* al ancho del tercio, centrada en la altura de la página */
.bazar-diapo.al-ancho img { width: 100%; height: auto; flex: none; }
.bazar-imagen { animation: aparece .55s ease; }
/* flechas: trazo fino blanco con una sombra suave, para que se vean sobre cualquier foto */
.bazar-flecha { position: fixed; display: none; background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  color: #fff; opacity: .85; filter: drop-shadow(0 0 2px rgba(0,0,0,.45)); transition: opacity .3s, transform .3s; }
.vista-bazar.varias-fotos .bazar-flecha { display: block; }
.bazar-flecha.sobre-fondo { color: var(--gris); filter: none; opacity: .7; }
.bazar-flecha:hover { opacity: 1; }
.bazar-flecha.ant:hover { transform: translateX(-3px); }
.bazar-flecha.sig:hover { transform: translateX(3px); }
.bazar-imagen.sin-foto { top: calc(90 * var(--uy)); bottom: calc(90 * var(--uy)); margin: 0 calc(40 * var(--ux));
  border: 1px dashed rgba(0,0,0,.18); }
.bazar-ficha { position: absolute; pointer-events: auto; font-family: var(--serif); font-weight: 500; color: var(--gris); line-height: 1.55; }
.bazar-ficha h2 { font-family: var(--serif); font-weight: 500; color: var(--negro); line-height: 1.25; margin-bottom: .1em; }
.bazar-ficha .s { font-style: italic; margin-bottom: 1.1em; }
.bazar-ficha .adicional { margin-top: 1.1em; }
.bazar-ficha .adicional p + p { margin-top: .6em; }
.bazar-ficha .precio { margin-top: 1.1em; color: var(--negro); font-size: 1.12em; }
.bazar-ficha .comprar { display: inline-block; margin-top: .6em; border-bottom: 1px solid currentColor; line-height: 1.3; }
.bazar-ficha .comprar:hover { color: var(--negro); }
.bazar-ficha .falta { color: #b0b0b0; font-style: italic; border-bottom-style: dashed; }
.bazar-ficha.entra { animation: aparece .5s ease; }

/* ---------------------------------------------------------------- lienzo de proyectos / encargos */
.lienzo { position: relative; z-index: 0; width: 100%; }
.caja { position: absolute; display: block; }
.caja img { width: 100%; height: 100%; object-fit: cover; background: rgba(0,0,0,.04); }
.caja .nombre {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  padding-top: calc(8 * var(--uf));
  font-family: var(--serif); font-weight: 500;
  font-size: calc(18.4 * var(--uf)); line-height: 1.3; color: var(--gris); text-align: center;   /* +15 % (Ángel, 13/11/2026; antes 16) */
  width: max-content; max-width: calc(340 * var(--ux));
  transition: color .3s ease;
}
.caja:hover .nombre, .caja:focus-visible .nombre { color: var(--negro); }
.caja.oculta { display: none; }
.hueco { position: absolute; border: 1px dashed rgba(0,0,0,.18); }

/* ---------------------------------------------------------------- galería emergente */
.galeria {
  position: fixed; inset: 0; z-index: 30; background: var(--bg);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s;
}
.galeria.abierta { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.laminas { position: absolute; inset: 0; overflow: hidden; }
.diapo {
  position: absolute;
  top: calc(90 * var(--uy)); bottom: calc(80 * var(--uy));
  left: calc(200 * var(--ux)); right: calc(200 * var(--ux));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .95s cubic-bezier(.65, 0, .35, 1), opacity .95s ease; opacity: .0; pointer-events: none;
}
.diapo.activa { opacity: 1; }
.laminas.quieta .diapo { transition: none; }
.diapo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; min-height: 0; }
.diapo.con-pie img { max-height: calc(100% - 70 * var(--u)); }
.pie { margin-top: calc(14 * var(--uf)); text-align: center; }
/* posición de cada foto en la galería (directorio, 14/11/2026): sin texto va a toda la altura, a un lado o centrada */
.diapo.pos-izq { align-items: flex-start; }
.diapo.pos-der { align-items: flex-end; }
.diapo.pos-izq .pie { text-align: left; }
.diapo.pos-der .pie { text-align: right; }
/* dípticos y trípticos (1b03, 13/11/2026): la caja guarda la proporción de la maqueta y cabe entera en la pantalla */
.diapo.con-composicion { container-type: size; }
.composicion { position: relative; aspect-ratio: var(--r); flex: none;
  width: min(100cqw, calc((100cqh - 70 * var(--u)) * var(--r))); }
.diapo.con-composicion .composicion img { position: absolute; display: block; max-width: none; max-height: none; object-fit: cover; }
.pie .t { font-size: calc(22 * var(--uf)); color: var(--negro); line-height: 1.3; }
.pie .s { font-family: var(--serif); font-weight: 500; font-size: calc(17 * var(--uf)); color: var(--gris);
  line-height: 1.35; margin-top: calc(2 * var(--uf)); }
.diapo-texto { max-width: 34em; font-family: var(--serif); font-weight: 500; color: var(--texto);
  font-size: clamp(15px, calc(19 * var(--uf)), 20px); line-height: 1.5; }
.diapo-texto p + p { text-indent: 1.5em; }
.galeria .ctl { position: absolute; z-index: 3; background: none; border: 0; padding: 0; font-family: inherit; color: var(--gris); }
.galeria .contador { line-height: 1; text-align: center; transform: translateY(-50%); cursor: default; }
.galeria .cerrar { cursor: pointer; opacity: .8; transition: opacity .3s, color .3s; }
.galeria .cerrar:hover { opacity: 1; color: var(--negro); }
.galeria .flecha { z-index: 3; }

/* ---------------------------------------------------------------- formato del directorio (13/11/2026) */
strong { font-weight: 600; }
u { text-decoration-thickness: .06em; text-underline-offset: .16em; }

/* ---------------------------------------------------------------- páginas de texto */
.columna {
  position: relative; margin-left: calc(389.83 * var(--ux)); width: calc(586 * var(--ux));
  padding: calc(150 * var(--uy)) 0 calc(120 * var(--uy));
  font-family: var(--serif); font-weight: 500; color: var(--texto);
  font-size: clamp(15px, calc(19 * var(--uf)), 20px); line-height: 1.5;
}
.columna p + p { text-indent: 1.5em; }
.columna h2 { font-family: var(--rotulo); font-weight: 400; color: var(--gris);
  font-size: calc(26 * var(--uf)); margin-bottom: 1.2em; line-height: var(--lh-miro); }
.aviso { position: fixed; left: 0; right: 0; top: 50%; text-align: center;
  font-size: calc(26 * var(--uf)); color: var(--gris); }
/* about (13/11/2026): letra un 25 % más grande y listas del directorio (año a la izquierda) */
.columna.about { font-size: clamp(18.75px, calc(23.75 * var(--uf)), 25px); }
.about-pres { margin-bottom: 1.4em; font-style: italic; color: var(--gris); }
.about-lista { margin-top: 2.4em; }
.columna .about-lista h2 { font-size: 1em; margin-bottom: .6em; }
.about-lista ul { list-style: none; }
.about-lista li { display: grid; grid-template-columns: 2.9em 1fr; column-gap: .7em; line-height: 1.4; }
.about-lista li + li { margin-top: .4em; }
.about-lista .ano { color: var(--gris); }
.about-lista a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.25); }
.about-lista a:hover { border-bottom-color: currentColor; }
.about-contacto li { grid-template-columns: 0 1fr; column-gap: 0; }

/* ---------------------------------------------------------------- el jardín (12/11/2026) */
.jardin { position: relative; margin-left: calc(200 * var(--ux)); width: calc(966 * var(--ux));
  padding: calc(150 * var(--uy)) 0 calc(140 * var(--uy)); }
.jardin-texto { width: calc(586 * var(--ux)); margin: 0 0 calc(60 * var(--uy)) calc(189.83 * var(--ux));
  font-family: var(--serif); font-weight: 500; color: var(--texto);
  font-size: clamp(15px, calc(19 * var(--uf)), 20px); line-height: 1.5; }
.jardin-mosaico { column-count: 3; column-gap: calc(34 * var(--ux)); }
.jardin-pieza { display: block; break-inside: avoid; margin: 0 0 calc(34 * var(--ux));
  color: inherit; text-decoration: none; opacity: 0; transform: translateY(10px);
  transition: opacity 1.1s ease var(--retraso, 0s), transform 1.1s ease var(--retraso, 0s); }
.jardin.visible .jardin-pieza { opacity: 1; transform: none; }
.jardin-obra img { display: block; width: 100%; height: auto; background: rgba(0,0,0,.04); }
.jardin-pie { display: block; padding-top: .55em; font-family: var(--serif); color: var(--gris);
  font-size: clamp(12px, calc(15 * var(--uf)), 15px); line-height: 1.3; }
.jardin-pie .autor { font-family: var(--rotulo); color: var(--texto); }
.jardin-pie .obra { font-style: italic; }
.jardin-ficha { position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; gap: .55em; padding: 12%;
  border: .95px solid rgba(0,0,0,.18); }
.jardin-ficha .nombre { font-family: var(--rotulo); color: var(--texto);
  font-size: clamp(17px, calc(26 * var(--uf)), 27px); line-height: 1.1; }
.jardin-ficha .nota { font-family: var(--serif); font-style: italic; color: var(--gris);
  font-size: clamp(13px, calc(16 * var(--uf)), 17px); }
.jardin-ficha .ir { font-family: var(--serif); color: var(--gris); margin-top: 1.2em;
  font-size: clamp(12px, calc(14 * var(--uf)), 15px); letter-spacing: .04em; transition: color .4s; }
a.jardin-ficha:hover .ir, a.jardin-obra:hover .jardin-pie { color: var(--negro); }
a.jardin-ficha:hover { border-color: rgba(0,0,0,.4); }
@media (max-width: 760px) {
  .jardin { margin: 0 var(--m); width: auto; padding: 84px 0 60px; }
  .jardin-texto { width: auto; margin: 0 0 32px; }
  .jardin-mosaico { column-count: 2; column-gap: 14px; }
  .jardin-pieza { margin-bottom: 14px; }
}

/* ---------------------------------------------------------------- móvil (provisional: aún no hay diseño en Miro) */
@media (max-width: 760px) {
  :root { --m: 16px; }
  .cab { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--bg); z-index: 40; }
  .cab a { top: 14px !important; font-size: 14px; line-height: 24px; opacity: 1 !important; pointer-events: auto !important; }
  .cab-about { left: var(--m); }
  .cab-jardin { left: auto; right: var(--m); width: auto; }
  .cab-marca { left: 50%; width: auto; transform: translateX(-50%); }
  .cab-marca { font-size: 17px !important; top: 13px !important; }

  /* portada: los tres rótulos en columna; tocar uno lleva a su sección */
  .zona-portada, .apertura { display: none; }
  .rotulo-portada { left: 0 !important; width: 100% !important; font-size: 17px !important; color: var(--gris) !important; }
  body:not([data-modo="inicio"]) .rotulo-portada { display: none; }
  /* cada categoría en el centro de su tercio de pantalla, sin contar la cabecera (Ángel, 12/11/2026) */
  .rotulo-portada { transform: translateY(-50%); }
  .rotulo-portada[data-sec="1"] { top: calc(52px + (100svh - 52px) / 6) !important; }
  .rotulo-portada[data-sec="3"] { top: calc(52px + (100svh - 52px) / 2) !important; }
  .rotulo-portada[data-sec="2"] { top: calc(52px + (100svh - 52px) * 5 / 6) !important; }

  .rotulo { font-size: 14px !important; }
  .barra { position: fixed; top: 82px; left: 0; right: 0; z-index: 30; background: var(--bg);
           display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 6px var(--m) 10px; }
  body:not([data-modo="sec"]) .barra { display: none; }
  .barra .rotulo { position: static !important; width: auto !important; text-align: left !important; }
  .vista-proyectos, .vista-encargos { padding-top: 156px; }
  .servicio { height: auto; padding: 0 var(--m) 24px; }
  .servicio-texto { position: static; width: auto !important; font-size: 17px !important; }
  .flecha { display: none; }
  .lienzo { height: auto !important; padding: 12px var(--m) 60px; display: flex; flex-direction: column; gap: 44px; }
  .caja { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; }
  .caja img { height: auto; }
  .caja .nombre { position: static; transform: none; font-size: 17.25px; padding-top: 8px; max-width: none; width: auto; }
  .hueco { display: none; }

  .vista-bazar { position: static; padding: 0 var(--m) 60px; }
  body[data-modo="sec"][data-sec="3"] .vista-bazar { padding-top: 120px; }
  .bazar-imagen { position: relative; width: 100% !important; height: 62vw; }
  .bazar-imagen.sin-foto { display: none; }
  /* flechas del bazar: sobre la foto, a media altura y pegadas a los lados (12/11/2026) */
  .vista-bazar { position: relative; }
  .bazar-flecha { position: absolute; top: calc(120px + 31vw - 21px) !important; width: 17px !important; height: 42px !important;
    color: #fff !important; opacity: .9; filter: drop-shadow(0 0 2px rgba(0,0,0,.35)); }
  .bazar-flecha.ant { left: calc(var(--m) + 10px) !important; }
  .bazar-flecha.sig { left: auto !important; right: calc(var(--m) + 10px); }
  .bazar-ficha { position: static; width: auto !important; margin-top: 18px; font-size: 16px !important; }
  .diapo { top: 64px; bottom: 56px; left: var(--m); right: var(--m); }
  .diapo.con-pie img { max-height: calc(100% - 64px); }
  .pie .t { font-size: 15px; } .pie .s { font-size: 15px; }
  .galeria .contador { left: var(--m) !important; width: auto !important; top: auto !important; bottom: 18px; transform: none; font-size: 13px !important; }
  .galeria .cerrar { left: auto !important; right: var(--m); top: 62px !important; width: 18px !important; height: 18px !important; }
  .galeria .flecha { display: none; }
  body.con-galeria .menu, body.con-galeria .barra { display: none; }   /* tapaban la × (12/11/2026) */
  .galeria .cerrar { padding: 13px; margin: -13px; box-sizing: content-box; }   /* zona de toque más grande */

  .columna { margin: 0; width: auto; padding: 84px var(--m) 60px; font-size: 17px; }
  .columna h2 { font-size: 15px; }
  .columna.about { font-size: 21px; }
  .about-lista li { grid-template-columns: 2.6em 1fr; column-gap: .5em; }
  .about-contacto li { grid-template-columns: 0 1fr; column-gap: 0; }
  .aviso { font-size: 15px; }
}

/* ---------------------------------------------------------------- menú de secciones bajo el nombre (Miro 08/11) */
.menu-item {
  position: fixed; z-index: 40; text-align: center;
  line-height: calc(26 / 18); color: #b0b0b0;
  transition: color .3s, opacity .45s ease, visibility 0s .45s;
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (max-width: 760px) {
  body[data-modo="sec"]:not(.con-galeria) .menu-item { opacity: 1; visibility: visible; pointer-events: auto;
    transition: color .3s, opacity .45s ease; }
}
.menu-item:hover { color: var(--gris); }
.menu-item.actual { color: var(--gris); }
.menu-item.actual:hover { color: var(--negro); }

@media (max-width: 760px) {
  .menu { position: fixed; top: 52px; left: 0; right: 0; z-index: 40; background: var(--bg);
          display: flex; justify-content: center; gap: 14px; padding: 0 var(--m) 8px; }
  body:not([data-modo="sec"]) .menu { display: none; }
  .menu-item { position: static !important; width: auto !important; font-size: 13.5px !important; line-height: 22px; }
}

/* enlaces dentro de los textos (directorio, 14/11/2026) */
.diapo-texto a, .columna a, .bazar-ficha .adicional a, .servicio-texto a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(0,0,0,.3); }
.diapo-texto a:hover, .columna a:hover, .bazar-ficha .adicional a:hover, .servicio-texto a:hover { text-decoration-color: currentColor; }

/* bazar: dos fotos de 03.port.bazar antes de elegir opción (14/11/2026): 1ª en el tercio izquierdo pegada a la izquierda,
   2ª en el derecho pegada a la derecha, a toda la altura y cortadas por el lado de dentro */
.bazar-portada { position: fixed; top: 0; bottom: 0; z-index: 2; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.bazar-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bazar-portada.izq img { object-position: left center; }
.bazar-portada.der img { object-position: right center; }
body[data-sec="3"][data-modo="abre"] .bazar-portada,
body[data-sec="3"][data-modo="sec"]:not(.bazar-elegida) .bazar-portada { opacity: 1; }
@media (max-width: 760px) { .bazar-portada { display: none; } }
/* con las fotos del bazar detrás, los nombres de proyectos y encargos de la portada pasan a blanco (14/11/2026) */
body.con-bazar-portada[data-sec="3"][data-modo="abre"] .rotulo-portada[data-sec="1"],
body.con-bazar-portada[data-sec="3"][data-modo="abre"] .rotulo-portada[data-sec="2"] { color: #fff !important; text-shadow: 0 0 14px rgba(0,0,0,.35); }

/* 14/11/2026: con proyectos o encargos abiertos, los otros dos nombres se quedan en su sitio, en blanco sobre la foto */
.rotulo-portada[data-tono="blanca"] { text-shadow: 0 0 3px rgba(0,0,0,.35), 0 0 14px rgba(0,0,0,.4); }
/* y si el fondo bajo el nombre es claro, en gris con un halo claro (web.js mide la foto: datos.js → claridad) */
.rotulo-portada[data-tono="gris-foto"] { color: var(--gris); text-shadow: 0 0 3px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.6); }
/* flechas del bazar sobre la foto más fuertes (14/11/2026): opacas, trazo más grueso y sombra más marcada */
.bazar-flecha:not(.sobre-fondo) { opacity: 1; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(0,0,0,.45)); }
.bazar-flecha:not(.sobre-fondo) path { stroke-width: 1.6; }
/* párrafos como en el directorio (14/11/2026): una línea vacía entre párrafos, sin sangría */
.diapo-texto p + p, .columna p + p, .servicio-texto p + p, .bazar-ficha .adicional p + p, .jardin-texto p + p { text-indent: 0; margin-top: 1.5em; margin-top: 1lh; }
/* textos de los proyectos un 30 % más grandes (14/11/2026); la columna mantiene su ancho */
.diapo-texto { font-size: clamp(19.5px, calc(24.7 * var(--uf)), 26px); max-width: 26.15em; }

/* ---------------------------------------------------------------- tipografía editable (14/11/2026)
   Los valores salen del panel «tipografías» del directorio: construir.py los escribe en assets/tipos.css como
   variables (--t-<papel>-px, -mov, -c, -lh, -w, -f). Aquí van los valores por defecto y dónde se aplica cada uno.
   Tamaño (-px) = px en la pantalla de referencia 1366×768 (en Miro = px / 0,8); todo escala con la pantalla.
   Los rótulos que coloca web.js (categorías, subcategorías, contador, ficha y servicios) toman el tamaño de
   maqueta.js, que construir.py recalcula con estos mismos valores. */
:root {
  --t-cabecera-px: 26; --t-cabecera-mov: 14px; --t-cabecera-c: #1a1a1a; --t-cabecera-lh: 1.4375; --t-cabecera-w: 400; --t-cabecera-f: var(--rotulo);
  --t-categorias-mov: 20px; --t-categorias-c: #595959; --t-categorias-lh: 1.4375; --t-categorias-w: 400; --t-categorias-f: var(--rotulo);
  --t-otras-mov: 15.5px; --t-otras-c: #b0b0b0; --t-otras-lh: 1.4375; --t-otras-w: 400; --t-otras-f: var(--rotulo);
  --t-subcategorias-mov: 14px; --t-subcategorias-c: #595959; --t-subcategorias-lh: 1.4375; --t-subcategorias-w: 400; --t-subcategorias-f: var(--rotulo);
  --t-contador-mov: 16px; --t-contador-c: #595959; --t-contador-lh: 1; --t-contador-w: 400; --t-contador-f: var(--rotulo);
  --t-titulos-px: 19; --t-titulos-mov: 17px; --t-titulos-c: #595959; --t-titulos-lh: 1.3; --t-titulos-w: 500; --t-titulos-f: var(--serif);
  --t-titulogal-px: 18; --t-titulogal-mov: 15px; --t-titulogal-c: #1a1a1a; --t-titulogal-lh: 1.3; --t-titulogal-w: 400; --t-titulogal-f: var(--rotulo);
  --t-subtitulogal-px: 14; --t-subtitulogal-mov: 15px; --t-subtitulogal-c: #595959; --t-subtitulogal-lh: 1.35; --t-subtitulogal-w: 500; --t-subtitulogal-f: var(--serif);
  --t-tituloficha-c: #1a1a1a; --t-tituloficha-lh: 1.25; --t-tituloficha-w: 500; --t-tituloficha-f: var(--serif);
  --t-textoproy-px: 20; --t-textoproy-mov: 20px; --t-textoproy-c: #2a2a2a; --t-textoproy-lh: 1.5; --t-textoproy-w: 500; --t-textoproy-f: var(--serif);
  --t-about-px: 19; --t-about-mov: 21px; --t-about-c: #2a2a2a; --t-about-lh: 1.5; --t-about-w: 500; --t-about-f: var(--serif);
  --t-servicio-mov: 17px; --t-servicio-c: #595959; --t-servicio-lh: 1.45; --t-servicio-w: 500; --t-servicio-f: var(--serif);
  --t-ficha-mov: 16px; --t-ficha-c: #595959; --t-ficha-lh: 1.55; --t-ficha-w: 500; --t-ficha-f: var(--serif);
  --t-paginas-px: 15; --t-paginas-mov: 17px; --t-paginas-c: #2a2a2a; --t-paginas-lh: 1.5; --t-paginas-w: 500; --t-paginas-f: var(--serif);
  --t-jardin-px: 15; --t-jardin-mov: 15px; --t-jardin-c: #2a2a2a; --t-jardin-lh: 1.5; --t-jardin-w: 500; --t-jardin-f: var(--serif);
}
/* letra, peso, color e interlineado (escritorio y móvil) */
.cab a { font-family: var(--t-cabecera-f); font-weight: var(--t-cabecera-w); color: var(--t-cabecera-c); line-height: var(--t-cabecera-lh); }
.rotulo-portada { font-family: var(--t-categorias-f); font-weight: var(--t-categorias-w); line-height: var(--t-categorias-lh); color: var(--t-categorias-c); }
.rotulo-portada[data-tono="actual"] { color: var(--t-categorias-c); }
.rotulo-portada[data-tono="clara"] { color: var(--t-otras-c); font-family: var(--t-otras-f); font-weight: var(--t-otras-w); line-height: var(--t-otras-lh); }
.rotulo-portada:hover { color: var(--negro); }
.menu-item { font-family: var(--t-otras-f); font-weight: var(--t-otras-w); color: var(--t-otras-c); }
.menu-item.actual, .menu-item:hover { color: var(--t-categorias-c); }
.menu-item.actual:hover { color: var(--negro); }
.barra .rotulo { font-family: var(--t-subcategorias-f); font-weight: var(--t-subcategorias-w); line-height: var(--t-subcategorias-lh); color: var(--t-subcategorias-c); }
body[data-modo="sec"] .barra.con-filtro .rotulo.activo { color: var(--t-subcategorias-c); }
.galeria .contador { font-family: var(--t-contador-f); font-weight: var(--t-contador-w); color: var(--t-contador-c); line-height: var(--t-contador-lh); }
.caja .nombre { font-family: var(--t-titulos-f); font-weight: var(--t-titulos-w); color: var(--t-titulos-c); line-height: var(--t-titulos-lh); }
.caja:hover .nombre, .caja:focus-visible .nombre { color: var(--negro); }
.pie .t { font-family: var(--t-titulogal-f); font-weight: var(--t-titulogal-w); color: var(--t-titulogal-c); line-height: var(--t-titulogal-lh); }
.pie .s { font-family: var(--t-subtitulogal-f); font-weight: var(--t-subtitulogal-w); color: var(--t-subtitulogal-c); line-height: var(--t-subtitulogal-lh); }
.bazar-ficha h2 { font-family: var(--t-tituloficha-f); font-weight: var(--t-tituloficha-w); color: var(--t-tituloficha-c); line-height: var(--t-tituloficha-lh); }
.diapo-texto { font-family: var(--t-textoproy-f); font-weight: var(--t-textoproy-w); color: var(--t-textoproy-c); line-height: var(--t-textoproy-lh); }
.columna { font-family: var(--t-paginas-f); font-weight: var(--t-paginas-w); color: var(--t-paginas-c); line-height: var(--t-paginas-lh); }
.columna.about { font-family: var(--t-about-f); font-weight: var(--t-about-w); color: var(--t-about-c); line-height: var(--t-about-lh); }
.servicio-texto { font-family: var(--t-servicio-f); font-weight: var(--t-servicio-w); color: var(--t-servicio-c); line-height: var(--t-servicio-lh); }
.bazar-ficha { font-family: var(--t-ficha-f); font-weight: var(--t-ficha-w); color: var(--t-ficha-c); line-height: var(--t-ficha-lh); }
.jardin-texto { font-family: var(--t-jardin-f); font-weight: var(--t-jardin-w); color: var(--t-jardin-c); line-height: var(--t-jardin-lh); }
/* tamaños en escritorio (los textos largos con mínimo y máximo) */
@media (min-width: 761px) {
  .cab a { font-size: calc(var(--t-cabecera-px) * 1.25 * var(--uf)); }
  .caja .nombre { font-size: calc(var(--t-titulos-px) * 1.25 * var(--uf)); }
  .pie .t { font-size: calc(var(--t-titulogal-px) * 1.25 * var(--uf)); }
  .pie .s { font-size: calc(var(--t-subtitulogal-px) * 1.25 * var(--uf)); }
  .columna { font-size: clamp(calc(var(--t-paginas-px) * 1px), calc(var(--t-paginas-px) * 1.25 * var(--uf)), calc(var(--t-paginas-px) * 1.333px)); }
  .columna.about { font-size: clamp(calc(var(--t-about-px) * 1px), calc(var(--t-about-px) * 1.25 * var(--uf)), calc(var(--t-about-px) * 1.316px)); }
  .columna h2, .aviso { font-size: calc(26.25 * var(--uf)); }
  .columna .about-lista h2 { font-size: 1em; }
  .jardin-texto { font-size: clamp(calc(var(--t-jardin-px) * 1px), calc(var(--t-jardin-px) * 1.25 * var(--uf)), calc(var(--t-jardin-px) * 1.333px)); }
  .jardin-ficha .nombre { font-size: clamp(17px, calc(26.25 * var(--uf)), 27px); }
  .jardin-ficha .nota { font-size: clamp(13px, calc(16.25 * var(--uf)), 17px); }
  .jardin-ficha .ir { font-size: clamp(11px, calc(13.75 * var(--uf)), 15px); }
  .diapo-texto { font-size: clamp(calc(var(--t-textoproy-px) * 1px), calc(var(--t-textoproy-px) * 1.25 * var(--uf)), calc(var(--t-textoproy-px) * 1.3px)); }
}
.bazar-ficha .precio { font-size: 1.1333em; }
/* móvil */
@media (max-width: 760px) {
  .cab a { font-size: var(--t-cabecera-mov); }
  .rotulo.rotulo-portada { font-size: var(--t-categorias-mov) !important; }
  /* menú de categorías en una sola línea: su tamaño si cabe; en pantallas estrechas, lo que quepa */
  .menu { gap: 12px; }
  .menu-item { font-size: min(var(--t-otras-mov), calc((100vw - 58px) / 22.6)) !important; white-space: nowrap; }
  .barra .rotulo { font-size: var(--t-subcategorias-mov) !important; }
  .galeria .contador { font-size: var(--t-contador-mov) !important; }
  .caja .nombre { font-size: var(--t-titulos-mov); }
  .pie .t { font-size: var(--t-titulogal-mov); } .pie .s { font-size: var(--t-subtitulogal-mov); }
  .diapo-texto { font-size: var(--t-textoproy-mov); }
  .columna { font-size: var(--t-paginas-mov); }
  .columna.about { font-size: var(--t-about-mov); }
  .servicio-texto { font-size: var(--t-servicio-mov) !important; }
  .bazar-ficha { font-size: var(--t-ficha-mov) !important; }
  .jardin-texto { font-size: var(--t-jardin-mov); }
}
/* precio con «comprar» a la derecha (espinas y pistilos en el bazar, 14/11/2026) */
.bazar-ficha .precio.con-comprar { display: flex; align-items: baseline; gap: 1.4em; }
.bazar-ficha .precio.con-comprar .comprar { margin-top: 0; font-size: .8824em; color: var(--t-ficha-c); }
.bazar-ficha .precio.con-comprar a.comprar:hover { color: var(--negro); }
/* contacto del servicio (encargos, 14/11/2026): correo, Instagram y WhatsApp en una línea debajo del texto */
.servicio-texto .contacto { display: flex; flex-wrap: wrap; gap: .4em 1.8em; margin-top: 1.6em; }
.servicio-texto .contacto a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.25); transition: border-color .3s, color .3s; }
.servicio-texto .contacto a:hover { color: var(--negro); border-bottom-color: currentColor; }
/* referencia de la obra (#P01, #C01…): cifras de caja alta para que el 0 no parezca una o (15/11/2026) */
.bazar-ficha .ref { font-variant-numeric: lining-nums; letter-spacing: .02em; }

/* selector de idioma en la esquina superior derecha (15/11/2026): es / en / pt, donde estaba «el jardín» */
.cab-idiomas { position: fixed; z-index: 40; top: calc(var(--cab-y) * var(--uy));
  left: calc(1084.78 * var(--ux)); width: calc(264 * var(--ux)); text-align: right; white-space: nowrap;
  font-family: var(--t-cabecera-f); font-weight: var(--t-cabecera-w); line-height: var(--t-cabecera-lh);
  font-size: calc(var(--t-cabecera-px) * 1.25 * var(--uf)); color: #b0b0b0; }
.cab .cab-idiomas a { position: static; font-size: inherit; line-height: inherit; color: #b0b0b0; transition: color .3s; }
.cab .cab-idiomas a:hover, .cab .cab-idiomas a.actual { color: var(--t-cabecera-c); }
.cab-idiomas .sep { color: #b0b0b0; }
@media (max-width: 760px) {
  .cab-idiomas { top: 14px; left: auto; right: var(--m); width: auto; font-size: 14px; line-height: 24px; }
  .cab .cab-idiomas a { top: auto !important; }
}
/* enlaces en los textos de la galería (15/11/2026): las diapositivas no reciben clics (pointer-events: none), salvo
   el texto y el pie de la que se está viendo, para que sus enlaces funcionen y el texto se pueda seleccionar */
.diapo.activa .diapo-texto, .diapo.activa .pie { pointer-events: auto; }
/* proyectos, encargos y bazar (15/11/2026): media línea vacía entre párrafos (antes una entera); about y páginas siguen igual */
.diapo-texto p + p, .servicio-texto p + p, .bazar-ficha .adicional p + p { margin-top: .75em; margin-top: .5lh; }
/* subcabecera de la portada (15/11/2026): letra de la cabecera a 22 px, en gris; solo en reposo */
.subcab { position: fixed; z-index: 39; top: calc((var(--cab-y) + 47) * var(--uy)); white-space: nowrap; pointer-events: none;
  font-family: var(--t-cabecera-f); font-weight: var(--t-cabecera-w); font-size: calc(22 * 1.25 * var(--uf)); line-height: 1.3;
  color: var(--gris); opacity: 0; transition: opacity .45s ease; }
.subcab .l1, .subcab .l2 { display: block; position: relative; }
.subcab .pre { position: absolute; right: 100%; top: 0; }
body.p-portada[data-modo="inicio"] .subcab { opacity: 1; }
@media (max-width: 760px) { .subcab { display: none; } }
/* subcabecera, ajuste (15/11/2026): «que se esconde» más claro; la 1ª línea a 3 veces la distancia que tenía de «photo»
   (14 → 42 px en 1366 × 768) y la 2ª separada de la 1ª un 125 % de aquella distancia (17,5 px) */
.subcab { top: calc((var(--cab-y) + 75) * var(--uy)); }
.subcab .l2 { margin-top: calc(49.9 * var(--uy)); }   /* 2ª línea a 1,25 × 42 = 52,5 px de la 1ª */
.subcab .pre { color: #b0b0b0; }
/* subcabecera, ajuste 2 (15/11/2026): «tras el mundo» en gris claro y «que se esconde» aún más claro; las dos distancias
   × 1,25 (1ª línea a 52,5 px de «photo»; 2ª a 65,6 px de la 1ª, en 1366 × 768) */
.subcab { top: calc((var(--cab-y) + 85.5) * var(--uy)); color: #b0b0b0; }
.subcab .l2 { margin-top: calc(63 * var(--uy)); }
.subcab .pre { color: #d2d2d2; }
/* subcabecera, ajuste 3 (15/11/2026): un poco más oscura; 1ª línea al doble de distancia de «photo» (105 px en 1366 × 768) */
.subcab { top: calc((var(--cab-y) + 138) * var(--uy)); color: #9c9c9c; }
.subcab .pre { color: #c2c2c2; }
/* subcabecera, ajuste 4 (15/11/2026): vuelta a las primeras distancias pedidas: 1ª línea a 42 px de «photo» y 2ª a 52,5 px
   de la 1ª (1366 × 768); colores del ajuste 3 */
.subcab { top: calc((var(--cab-y) + 75) * var(--uy)); }
.subcab .l2 { margin-top: calc(49.9 * var(--uy)); }
/* subcabecera, ajuste 5 (15/11/2026): 20 px y las dos distancias a la mitad (21 px de «photo»; 26,25 px entre líneas, en
   1366 × 768). Letra, tamaño, color e interlineado se editan en el panel de tipografías del directorio (papel «subcab»);
   el texto, en la pestaña portada */
:root { --t-subcab-px: 20; --t-subcab-c: #9c9c9c; --t-subcab-f: var(--rotulo); --t-subcab-w: 400; --t-subcab-lh: 1.3; }
.subcab { font-size: calc(var(--t-subcab-px) * 1.25 * var(--uf)); font-family: var(--t-subcab-f); font-weight: var(--t-subcab-w);
  line-height: var(--t-subcab-lh); color: var(--t-subcab-c); top: calc((var(--cab-y) + 54) * var(--uy)); }
.subcab .l2 { margin-top: calc(24.25 * var(--uy)); }
/* subcabecera, ajuste 6 (15/11/2026): «photo» y «tras el mundo» se encuentran en el punto medio de sus grises
   (#595959 y #9c9c9c → #7b7b7b); «que se esconde» un poco más claro (#c2c2c2 → #cfcfcf). Solo «photo» cambia:
   el resto de rótulos sigue en --gris */
:root { --t-subcab-c: #7b7b7b; }
.cab .photo { color: #7b7b7b; }
.subcab .pre { color: #cfcfcf; }
/* subcabecera, ajuste 7 (15/11/2026): «que se esconde» un poco más oscuro (#cfcfcf → #b8b8b8) */
.subcab .pre { color: #b8b8b8; }

/* textos legales (15/11/2026): página /legal/ y enlaces discretos al final del about */
.about-legal { margin-top: 3.2em; font-size: .72em; color: var(--gris); }
.about-legal a { color: inherit; }
.legal-seccion { scroll-margin-top: 90px; }
.legal-seccion + .legal-seccion { margin-top: 2.6em; }
.columna.legal h2 { margin-bottom: .8em; }
.legal-fecha { margin-top: 2.6em; font-size: .85em; color: var(--gris); }