/* felucho.es (maqueta) · paleta «Granito de Ávila»: el gris cálido de la piedra de la muralla, texto pizarra
   y el rojo ladrillo de su tienda solo para lo importante. El fondo lleva un grano suave, como el granito.
   Los nombres de las variables vienen de la primera versión oscura: --tinta es el fondo y --grafito el texto.
   Formas: botones redondos (píldora), tarjetas y láminas a 14px, marcos de cuadro rectos. */

:root {
  --tinta: #dcd6cb;          /* fondo: granito */
  --tinta-2: #d2cbbf;        /* superficies un punto más oscuras */
  --tinta-3: #c7bfb2;
  --grafito: #2b2925;        /* texto y trazo principal: pizarra */
  --suave: #4f4a43;          /* texto secundario */
  --gris: #625c53;           /* notas pequeñas (4.7:1 sobre el granito) */
  --linea: #b3ab9d;          /* filetes y bordes */
  --ladrillo: #ab2421;       /* rojo de la marca: trazo, botones */
  --ladrillo-claro: #962019; /* el rojo como texto sobre el granito */
  --papel: #f7f4ee;          /* passe-partout de las láminas */
  --lapiz: #3b3936;          /* trazo sobre papel claro */
  --marco: #2b2925;
  /* Grano de granito: motas oscuras finas, algún punto claro (cuarzo) y dos manchas de luz muy suaves para que el
     fondo no sea plano. Todo en imágenes pequeñas que se repiten; nada que se mueva ni que pese. */
  --grano:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .15 .9 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='310'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .98 1.4 0 0 0 -.86'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60vw 40vw at 15% 20%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(50vw 50vw at 85% 70%, rgba(110, 98, 82, .08), transparent 70%);
  --curva: cubic-bezier(.7, 0, .2, 1);
  --salida: cubic-bezier(.16, 1, .3, 1);
  --ancho: 1320px;
  --lado: clamp(20px, 5vw, 56px);
}
/* Bloques oscuros (cita, exposición): la misma web en pizarra, para dar ritmo */
.oscuro { --tinta: #2f2c28; --tinta-2: #3a3631; --tinta-3: #46413b; --grafito: #efe9df; --suave: #d0c8bb; --gris: #aaa295; --linea: #57514a; --ladrillo-claro: #ec7a6f; color: var(--grafito); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #a59d90 var(--tinta); }
body {
  background: var(--tinta); background-image: var(--grano); background-attachment: fixed; color: var(--grafito);
  font: 400 1.125rem/1.6 "Bricolage Grotesque", system-ui, sans-serif; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; }
::selection { background: var(--ladrillo); color: #fff; }
:focus-visible { outline: 2px solid var(--ladrillo-claro); outline-offset: 4px; border-radius: 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.grande { font-size: clamp(2.6rem, 8vw, 6rem); }
.medio { font-size: clamp(2rem, 5.2vw, 3.8rem); }
.pequeno { font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; }
.rojo { color: var(--ladrillo-claro); }
p { max-width: 62ch; text-wrap: pretty; }
.entrada { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--suave); line-height: 1.5; }
.firma { font-family: "Reenie Beanie", cursive; font-weight: 400; letter-spacing: 0; }
.pendiente { border-bottom: 1px dashed var(--gris); cursor: help; }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; gap: .55em; min-height: 52px; padding: 0 1.5em; border-radius: 999px;
  font-weight: 600; font-size: 1.05rem; text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s, transform .2s var(--salida);
}
.boton:active { transform: scale(.97); }
.boton.rojo { background: var(--ladrillo); color: #fff; }
.boton.rojo:hover { background: #c22b27; }
.boton.claro { background: var(--grafito); color: var(--tinta); }
.boton.claro:hover { background: #46423c; }
.boton.borde { box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton.borde:hover { box-shadow: inset 0 0 0 1.5px var(--grafito); }
.boton i { font-size: 1.2em; }
.enlace { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-color: var(--ladrillo); }
.enlace:hover { text-decoration-color: var(--grafito); }

/* ── Cabecera ── */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 72px; padding: 0 var(--lado);
  background: var(--tinta); background-image: var(--grano); background-attachment: fixed;
}
.cabecera::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1px; background: var(--linea); opacity: .6; pointer-events: none; }
.cabecera .marca { font-size: 2.4rem; line-height: 1; text-decoration: none; color: var(--grafito); padding-top: 6px; }
.cabecera nav ul { display: flex; align-items: center; gap: 6px; list-style: none; }
.cabecera nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 1rem; font-weight: 500; text-decoration: none; color: var(--suave); transition: color .2s; }
.cabecera nav a:hover, .cabecera nav a[aria-current="page"] { color: var(--grafito); }
.cabecera nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ladrillo); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.cabecera .tienda { min-height: 44px; padding: 0 1.15em; font-size: 1rem; }
.cabecera .idioma { font-size: .9rem; color: var(--gris); text-decoration: none; padding: 0 6px; }
.boton-menu { display: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--tinta-3); color: var(--grafito); font: 600 1rem "Bricolage Grotesque", sans-serif; cursor: pointer; }
@media (max-width: 899px) {
  .cabecera nav { position: fixed; inset: 0; z-index: -1; display: grid; place-content: center; background: var(--tinta); background-image: var(--grano); background-attachment: fixed; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .cabecera nav ul { flex-direction: column; gap: 4px; }
  .cabecera nav a { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--grafito); }
  .menu-abierto .cabecera nav { opacity: 1; visibility: visible; }
  .boton-menu { display: inline-flex; align-items: center; }
  .cabecera .derecha { display: flex; align-items: center; gap: 8px; }
  .cabecera .idioma { display: none; }
}
@media (min-width: 900px) { .cabecera .derecha { display: flex; align-items: center; gap: 8px; } }

/* ── Dibujos de línea ── */
.linea path { fill: none; stroke: var(--grafito); stroke-width: calc(var(--peso, 1) * 2px); stroke-linecap: round; stroke-linejoin: round; opacity: calc(.4 + var(--peso, 1) * .5); }
.papel .linea path { stroke: var(--lapiz); }

/* ── 1 · Portada con pantalla de carga ──
   Mientras carga: sin cabecera ni frase, el dibujo en el centro y una línea fina que se llena. Al terminar, el dibujo
   sube a su sitio, entra la cabecera y la frase aparece en tres golpes. */
.portada { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.portada-lienzo { position: absolute; left: 50%; top: 40%; width: min(82vw, 1180px); translate: -50% -50%; transition: top .8s var(--curva), scale .8s var(--curva); }
.portada-dibujo { width: 100%; height: auto; overflow: visible; }
.portada-frase { position: absolute; left: var(--lado); bottom: clamp(28px, 7vh, 72px); z-index: 2; }
.portada-frase h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.portada-frase span { display: block; transition: opacity .8s var(--salida), transform .8s var(--salida), filter .8s var(--salida); }
.portada-frase span:nth-child(2) { transition-delay: .12s; } .portada-frase span:nth-child(3) { transition-delay: .24s; }
.portada-bajar { position: absolute; right: var(--lado); bottom: clamp(32px, 7vh, 76px); display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--gris); transition: opacity .6s .6s; }
.portada-bajar i { font-size: 1.2rem; animation: bajar 2s var(--salida) infinite; }
@keyframes bajar { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
.carga { position: absolute; inset: auto var(--lado) clamp(28px, 7vh, 72px); display: grid; gap: 12px; pointer-events: none; opacity: 0; transition: opacity .5s; }
.carga-texto { font-size: 1rem; color: var(--suave); }
.carga-barra { height: 2px; background: var(--tinta-3); }
.carga-barra span { display: block; height: 100%; background: var(--ladrillo); transform-origin: 0 50%; transform: scaleX(0); }
.cargando { overflow: hidden; }
.cargando .carga { opacity: 1; }
.cargando .portada-lienzo { top: 46%; scale: .92; }
.cargando .cabecera { transform: translateY(-110%); }
.cargando .portada-frase span { opacity: 0; transform: translateY(.35em); filter: blur(6px); }
.cargando .portada-bajar { opacity: 0; transition-delay: 0s; }
.cabecera { transition: transform .7s var(--curva) .05s; }
.nota-dibujo { position: absolute; right: var(--lado); top: 92px; z-index: 2; max-width: 30ch; font-size: .82rem; line-height: 1.4; color: var(--gris); text-align: right; }
@media (max-width: 759px) {
  .portada-lienzo { width: 150vw; left: 38%; top: 36%; }
  .portada-bajar { display: none; }
}

/* Cita de Felucho, grande, sola */
.cita-felucho figure { max-width: 22ch; margin-left: auto; font-size: clamp(2rem, 4.6vw, 3.6rem); }
.cita-felucho blockquote { font-family: "Bodoni Moda", Georgia, serif; font-style: italic; font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
.cita-felucho .firma { display: block; margin-top: 12px; font-size: 1.1em; color: var(--ladrillo-claro); }

/* ── 2 · El trazo rojo que une la página ── */
.contenido { position: relative; }
.hilo { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.hilo path { fill: none; stroke: var(--ladrillo); stroke-width: clamp(5px, .7vw, 9px); stroke-linecap: round; stroke-linejoin: round; }
.contenido > section, .contenido > div { position: relative; z-index: 1; }

/* ── Secciones ── */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(96px, 16vh, 180px) var(--lado) 0; }
.seccion > p, .seccion .texto p { margin-top: 18px; }
.cabeza-pagina { max-width: var(--ancho); margin: 0 auto; padding: clamp(120px, 20vh, 200px) var(--lado) 0; }
.cabeza-pagina .entrada { margin-top: 22px; }

/* ── 3 · Láminas (tarjetas que se doblan) ── */
.laminas { display: grid; gap: clamp(18px, 3vw, 36px); margin-top: 48px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .laminas { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .laminas > :nth-child(6n+1) { grid-column: 1 / span 5; }
  .laminas > :nth-child(6n+2) { grid-column: 7 / span 4; margin-top: 120px; }
  .laminas > :nth-child(6n+3) { grid-column: 2 / span 4; }
  .laminas > :nth-child(6n+4) { grid-column: 7 / span 5; margin-top: 40px; }
  .laminas > :nth-child(6n+5) { grid-column: 1 / span 4; margin-top: 40px; }
  .laminas > :nth-child(6n+6) { grid-column: 6 / span 5; margin-top: 140px; }
  .laminas.rejilla > * { grid-column: span 4 !important; margin-top: 0 !important; }
  .laminas.rejilla > :nth-child(3n+2) { margin-top: 60px !important; }
}
.lamina {
  display: block; text-decoration: none; color: inherit; transform-origin: 50% 0;
  transform: perspective(1100px) rotateX(calc(var(--doblez, 0) * -0.9deg + var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) skewY(calc(var(--doblez, 0) * .1deg));
  transition: transform .5s var(--salida);
}
.marco { position: relative; aspect-ratio: 4 / 5; padding: clamp(10px, 1.4vw, 16px); background: var(--marco); border-radius: 2px; box-shadow: 0 30px 50px -26px rgba(43, 35, 25, .55), 0 2px 4px rgba(43, 35, 25, .25); }
.marco.horizontal { aspect-ratio: 5 / 4; }
.papel { position: relative; height: 100%; padding: 12%; background: var(--papel); display: grid; place-items: center; overflow: hidden; }
.papel svg { width: 100%; height: auto; }
.papel .vacio { text-align: center; color: #625d56; font-size: .9rem; line-height: 1.35; }
.papel .vacio b { display: block; margin-bottom: 4px; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.02em; color: #4b4843; }
.pie-lamina { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.pie-lamina h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.pie-lamina span { color: var(--gris); font-size: .95rem; white-space: nowrap; }
@media (max-width: 599px) { .pie-lamina { flex-direction: column; gap: 2px; } }
.lamina:hover .pie-lamina h3 { text-decoration: underline; text-decoration-color: var(--ladrillo); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ── Historia en tres líneas (portada) ── */
.tres-lineas { display: grid; gap: 40px; align-items: center; }
.tres-lineas ol { list-style: none; display: grid; gap: 10px; }
.tres-lineas li { font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.tres-lineas li:nth-child(2) { color: var(--suave); }
.tres-lineas svg { width: 100%; max-width: 560px; }
@media (min-width: 900px) { .tres-lineas { grid-template-columns: 1.3fr 1fr; } }

/* ── Valores del taller ── */
.valores { display: grid; gap: 0; margin-top: 48px; list-style: none; }
.valores li { display: grid; gap: 6px; padding: 26px 0; border-top: 1px solid var(--linea); }
.valores li h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.valores li p { color: var(--suave); }
@media (min-width: 900px) { .valores { grid-template-columns: repeat(4, 1fr); gap: 32px; } .valores li { align-content: start; } }

/* ── Exposición (estilo Beyeler) ── */
.expo { position: relative; min-height: 86vh; min-height: 86dvh; margin-top: clamp(96px, 16vh, 180px); display: grid; align-items: end; overflow: hidden; }
.expo .foto { position: absolute; inset: 0; border-radius: 0; }
.expo .sobre { position: relative; max-width: var(--ancho); width: 100%; margin: 0 auto; padding: 0 var(--lado) clamp(40px, 8vh, 80px); }
.expo h1, .expo h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(3rem, 10vw, 8rem); color: var(--ladrillo-claro); max-width: 12ch; }
.expo p { margin-top: 16px; color: var(--grafito); }

/* Huecos de foto: se ven como lo que son (un sitio reservado), con la nota de qué iría */
.foto { position: relative; display: grid; place-items: center; padding: 24px; border-radius: 14px; background: var(--tinta-2); color: var(--gris); text-align: center; font-size: .95rem; line-height: 1.4; }
.foto::before { content: ""; position: absolute; inset: 14px; border: 1px dashed var(--linea); border-radius: inherit; }
.foto i { display: block; margin: 0 auto 8px; font-size: 1.8rem; color: var(--gris); }
.foto span { position: relative; max-width: 30ch; }

/* ── Cierre: dos puertas ── */
.puertas { display: grid; gap: 18px; margin-top: 48px; }
.puerta { position: relative; display: grid; align-content: space-between; gap: 40px; min-height: 260px; padding: clamp(26px, 4vw, 44px); border-radius: 14px; text-decoration: none; overflow: hidden; transition: transform .4s var(--salida); }
.puerta:hover { transform: translateY(-4px); }
.puerta h3 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.puerta p { color: inherit; opacity: .85; }
.puerta.rojo { background: var(--ladrillo); color: #fff; }
.puerta.clara { background: var(--grafito); color: var(--tinta); }
.puerta .flecha { font-size: 2rem; transition: transform .4s var(--salida); }
.puerta:hover .flecha { transform: translateX(8px); }
@media (min-width: 900px) { .puertas { grid-template-columns: 1fr 1fr; } }

/* ── Pie ── */
.pie { position: relative; z-index: 1; max-width: var(--ancho); margin: clamp(120px, 18vh, 200px) auto 0; padding: 0 var(--lado) 48px; display: grid; gap: 36px; }
.pie .firma { font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: var(--grafito); }
.pie .lema { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; max-width: 26ch; }
.pie .columnas { display: grid; gap: 28px; padding-top: 28px; border-top: 1px solid var(--linea); font-size: 1rem; color: var(--suave); }
.pie .columnas h3 { font-size: .95rem; letter-spacing: 0; color: var(--grafito); margin-bottom: 6px; }
.pie ul { list-style: none; display: grid; gap: 4px; }
.pie a { text-decoration: none; } .pie a:hover { color: var(--grafito); text-decoration: underline; }
.maqueta { font-size: .85rem; color: var(--gris); }
@media (min-width: 900px) { .pie .columnas { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ── Ciudad ── */
.ciudad { display: grid; gap: clamp(28px, 5vw, 72px); max-width: var(--ancho); margin: 0 auto; padding: clamp(110px, 16vh, 160px) var(--lado) 0; }
.ciudad .texto { display: grid; gap: 18px; align-content: center; }
.ciudad .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.migas { font-size: .95rem; color: var(--gris); }
.migas a { color: var(--suave); }
@media (min-width: 900px) { .ciudad { grid-template-columns: 1.15fr 1fr; align-items: center; min-height: 100vh; } }
.pared { padding: clamp(28px, 6vw, 72px); border-radius: 14px; background: radial-gradient(90% 80% at 50% 30%, rgba(255, 255, 255, .28), rgba(120, 108, 92, .12)); }
.lupa { position: absolute; z-index: 3; width: clamp(150px, 22vw, 230px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; translate: -50% -50%; background: var(--papel); box-shadow: 0 0 0 2px var(--ladrillo), 0 20px 40px -12px rgba(43, 35, 25, .45); pointer-events: none; opacity: 0; scale: .7; transition: opacity .25s, scale .35s var(--salida); }
.lupa svg, .lupa img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; }
.pared .marco { max-width: 520px; margin: 0 auto; }
.con-lupa .lupa { opacity: 1; scale: 1; }
.con-lupa .papel { cursor: none; }
.formatos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.formatos li { padding: 6px 14px; border-radius: 999px; background: var(--tinta-2); color: var(--suave); font-size: .95rem; }

/* ── Historia: capítulos ── */
.capitulo { display: grid; gap: 18px; }
.capitulo h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.capitulo p { color: var(--suave); }
.capitulo blockquote { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; color: var(--ladrillo-claro); }
/* Historia: «Felucho dibuja su vida» (Draw My Life). La hoja es de papel; el rotulador, negro y rojo. */
.video-historia { margin: 40px 0 0; }
.dml-pantalla { position: relative; display: grid; overflow: hidden; padding: 2.5% 3% 0; border-radius: 14px; background: #fbf9f5; box-shadow: 0 30px 50px -30px rgba(43, 35, 25, .5), 0 0 0 1px var(--linea); }
.dml-dibujo { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 720; overflow: visible; }
.dml-escena { transform-box: view-box; }
.dml-trazo { fill: none; stroke: #1f1d1b; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dml-trazo.fino { stroke-width: 3; }
.dml-trazo.grueso { stroke-width: 8; }
.dml-trazo.rojo { stroke: var(--ladrillo); }
.dml-letra { font-family: "Permanent Marker", "Reenie Beanie", cursive; fill: #1f1d1b; }
.dml-letra.rojo { fill: var(--ladrillo); }
.dml-letra.mano { font-family: "Reenie Beanie", cursive; }
.dml-texto { display: grid; place-items: center; min-height: 3.2em; max-width: none; margin: 0 3%; padding: 6px 0 18px; text-align: center; font: 400 clamp(.95rem, 2.4vw, 1.8rem)/1.25 "Permanent Marker", cursive; color: #1f1d1b; }
.dml-texto.entra { animation: dml-entra .6s var(--salida) both; }
@keyframes dml-entra { from { opacity: 0; transform: translateY(10px); } }
.dml-portada { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; border: 0; background: #fbf9f5; color: var(--grafito); font: inherit; cursor: pointer; transition: opacity .5s, visibility .5s; }
.en-marcha .dml-portada { opacity: 0; visibility: hidden; }
.video-play { display: grid; place-items: center; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--ladrillo); color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 14px 30px -12px rgba(171, 36, 33, .6); transition: transform .3s var(--salida); }
.dml-portada:hover .video-play { transform: scale(1.06); }
.video-titulo { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; }
.video-titulo .firma { font-size: 1.5em; font-weight: 400; color: var(--ladrillo); margin-right: .1em; }
.dml-controles { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.dml-boton { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: var(--grafito); color: var(--tinta); font-size: 1.3rem; cursor: pointer; }
.dml-puntos { display: flex; flex: 1; gap: 6px; list-style: none; }
.dml-puntos li { flex: 1; }
.dml-puntos button { display: block; width: 100%; height: 24px; border: 0; background: none; cursor: pointer; position: relative; }
.dml-puntos button::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: var(--linea); transition: background .3s; }
.dml-puntos .activo button::after { background: var(--ladrillo); }
.video-nota { max-width: 60ch; font-size: .95rem; color: var(--gris); }
.video-historia figcaption { margin-top: 10px; }
.historia-texto { max-width: var(--ancho); margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--lado) 0; }
.capitulos-texto { display: grid; gap: 48px 64px; }
@media (min-width: 900px) { .capitulos-texto { grid-template-columns: 1fr 1fr; } }
.capitulos-texto .capitulo { min-height: 0; padding: 0; align-content: start; }
.capitulo { display: grid; gap: 18px; }
.capitulo h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.capitulo p { color: var(--suave); }
.capitulo blockquote { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; color: var(--ladrillo-claro); }

/* ── Bloques sencillos: listas de dos columnas, datos de visita ── */
.dos { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 900px) { .dos { grid-template-columns: 1fr 1fr; gap: 56px; } }
.bloque h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
.bloque h2 { margin-bottom: 18px; }
.bloque p { color: var(--suave); }
.datos { display: grid; gap: 22px; margin-top: 28px; font-size: 1.25rem; }
.datos dt { font-size: .95rem; color: var(--gris); }
.datos dd a { text-decoration: none; font-weight: 600; } .datos dd a:hover { text-decoration: underline; }
.vias { display: grid; gap: 0; margin-top: 40px; list-style: none; counter-reset: via; }
.vias li { display: grid; gap: 6px; padding: 24px 0; border-top: 1px solid var(--linea); }
.vias li h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.vias li p { color: var(--suave); }
@media (min-width: 900px) { .vias { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.fila-fotos { display: grid; gap: 14px; margin-top: 40px; grid-template-columns: 1fr; }
.fila-fotos .foto { min-height: 240px; }
@media (min-width: 760px) { .fila-fotos { grid-template-columns: 1.4fr 1fr 1fr; } .fila-fotos .foto:first-child { min-height: 380px; } }

/* ── 4 · Transiciones entre páginas: la página se desliza ──
   Hacia delante en el menú: la nueva entra por la derecha y la anterior se aparta un poco a la
   izquierda, como al pasar de pantalla en el móvil. Hacia atrás, al revés. La cabecera no se mueve. */
@view-transition { navigation: auto; }
.cabecera { view-transition-name: cabecera; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
html:active-view-transition-type(adelante)::view-transition-old(root) { animation-name: sale-izquierda; }
html:active-view-transition-type(adelante)::view-transition-new(root) { animation-name: entra-derecha; }
html:active-view-transition-type(atras)::view-transition-old(root) { animation-name: sale-derecha; }
html:active-view-transition-type(atras)::view-transition-new(root) { animation-name: entra-izquierda; }
::view-transition-new(root) { box-shadow: 0 0 60px rgba(43, 35, 25, .25); }
@keyframes sale-izquierda { to { transform: translateX(-22%); opacity: .4; } }
@keyframes entra-derecha { from { transform: translateX(100%); } }
@keyframes sale-derecha { to { transform: translateX(22%); opacity: .4; } }
@keyframes entra-izquierda { from { transform: translateX(-100%); } }
::view-transition-group(lamina) { z-index: 2; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.expo .foto { place-items: start center; padding-top: clamp(90px, 16vh, 160px); }
.expo .foto::before { inset: 14px; }

/* ── Dibujos reales de Felucho (sacados de su tienda) y fotos de relleno ── */
.papel:has(.dibujo-real) { padding: 9%; display: block; }
.dibujo-real { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; transform: scale(var(--zoom, 1)); transform-origin: 0 50%; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
.foto.con-imagen { padding: 0; overflow: hidden; background: var(--tinta-2); }
.foto.con-imagen::before { display: none; }
.foto.con-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto.blanca { background: #fff; min-height: 420px; } .foto.blanca img { object-fit: contain; padding: 6%; }
.foto.local { min-height: 520px; } .foto.local img { object-position: 50% 60%; }
.expo .foto.con-imagen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(47, 44, 40, 0) 35%, rgba(47, 44, 40, .9)); }
.logo-editorial { width: 210px; height: auto; border-radius: 8px; margin: 6px 0 12px; }

/* Serie de láminas de cada ciudad (las de su galería) */
.serie { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2.4vw, 28px); margin-top: 40px; list-style: none; }
@media (min-width: 760px) { .serie { grid-template-columns: repeat(4, 1fr); } }
.pieza { display: grid; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.pieza img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #fff; transition: transform .5s var(--salida); }
.pieza:hover img { transform: translateY(-4px); }
.pieza:hover span { text-decoration: underline; text-decoration-color: var(--ladrillo); text-underline-offset: .2em; }

/* La cita de Felucho, en una banda de pizarra a todo lo ancho */
.cita-felucho.oscuro { max-width: none; margin-top: clamp(96px, 16vh, 180px); padding: clamp(80px, 14vh, 150px) var(--lado); background: var(--tinta); background-image: var(--grano); background-attachment: fixed; }
.cita-felucho.oscuro figure { max-width: min(22ch, var(--ancho)); margin: 0 auto 0 max(0px, calc((100% - var(--ancho)) / 2 + var(--lado))); }
.expo.oscuro { background: var(--tinta); }

/* Mapa de Google Maps (Visítanos), en grises para que vaya con el granito */
.mapa { position: relative; min-height: 360px; border-radius: 14px; overflow: hidden; background: var(--tinta-2); box-shadow: 0 0 0 1px var(--linea); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.18) contrast(.95); }
@media (min-width: 900px) { .cabeza-pagina.dos { align-items: stretch; } .mapa { min-height: 480px; } }
.mapa-enlace { position: absolute; right: 12px; bottom: 34px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--grafito); color: var(--tinta); font-size: .9rem; font-weight: 600; text-decoration: none; }

/* Franja de foto a todo lo ancho, con una frase pequeña encima */
.franja { position: relative; z-index: 1; height: clamp(320px, 62vh, 640px); margin-top: clamp(96px, 16vh, 180px); overflow: hidden; }
.franja img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.franja figcaption { position: absolute; left: var(--lado); bottom: clamp(20px, 5vh, 48px); max-width: 24ch; padding: 10px 16px; border-radius: 10px; background: rgba(47, 44, 40, .78); color: #efe9df; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.pieza small { display: block; font-weight: 400; color: var(--gris); font-size: .88rem; }
.dos > .foto { min-height: clamp(280px, 40vw, 460px); }