@charset "UTF-8";
/* paulorebolledo.cl — «Del cielo a la ribera»
   Sistema tomado de la referencia visual del mismo nombre. El sitio es un recorrido por Chiloé
   en cinco actos: la noche sobre Castro, el bosque y la pampa, el mar abierto, la ribera de
   palafitos y el muelle de madera. Cada acto trae su propio cielo y su propio color, y las
   transiciones se resuelven con el degradado, no con un corte.

   Fraunces en títulos, Atkinson Hyperlegible en texto, Caveat en lo escrito a mano,
   IBM Plex Mono en datos. Un solo punto de quiebre: 900px.
   Sin estilos inline (CSP): el JS solo escribe transform y variables por CSSOM. */

:root {
  /* Noche */
  --noche-0: #070f1f;
  --noche-1: #0b1628;
  --noche-2: #0f1f38;
  --noche-3: #1c3250;

  /* Mar */
  --mar-alto: #25506a;
  --mar-medio: #1a3b56;
  --mar-hondo: #112a44;
  --puente-cielo: #3b5163;

  /* Tierra */
  --campo: #56733f;
  --piedras: #6d6350;

  /* Muelle */
  --muelle-a: #4d2d1a;
  --muelle-b: #5d3721;

  /* Papel y crema */
  --crema: #eadfcd;         /* texto sobre fondo oscuro */
  --crema-claro: #fbf3e4;   /* títulos sobre fondo oscuro */
  --parrafo: #e3dccd;
  --papel: #fbf6ec;         /* tarjetas */
  --papel-blanco: #fffef9;  /* la tarjeta del índice */
  --papel-2: #fffdf6;
  --tinta: #262a31;
  --tinta-2: #3a3f48;
  --gris: #4a5160;

  /* Acentos */
  --acento: #b8322a;        /* rojo de techo de zinc: botones y lo escrito a mano */
  --acento-hondo: #8f251f;
  --azul: #1e3a8a;          /* azul de enlace y de título sobre papel */
  --salmon: #f4a98c;        /* el acento sobre fondo oscuro */
  --mono-arena: #e9c98e;    /* datos y coordenadas sobre fondo oscuro */
  --dorado: #ffd98f;        /* luz encendida, pulsos del muelle */
  --raya: rgba(30, 58, 138, .28);   /* el punteado de los cuadernos */
  --raya-clara: rgba(233, 201, 142, .22);

  /* Tipografía */
  --f-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-texto: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mano: 'Caveat', 'Segoe Script', cursive;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Forma */
  --ancho-max: 1600px;
  --margen-i: clamp(20px, 11.4vw, 164px);   /* la referencia empuja el contenido a la derecha */
  --margen-d: clamp(20px, 5.6vw, 80px);
  --seccion-y: clamp(64px, 7vw, 110px);
  --r-boton: 10px;
  --r-card: 14px;
  --r-mini: 12px;
  --r-panel: 18px;
  --salida: cubic-bezier(.23, 1, .32, 1);
  --sombra-card: 0 24px 48px -24px rgba(10, 20, 5, .75);
  --sombra-papel: 0 26px 50px -24px rgba(10, 5, 2, .75);
  --sombra-polaroid: 0 22px 40px -18px rgba(10, 5, 2, .7);
  --alto-encabezado: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #2b4463 var(--noche-1); }
body {
  margin: 0;
  background: var(--noche-1);
  color: var(--crema);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  caret-color: var(--acento);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; overflow-wrap: anywhere; }
h1, h2 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.06; color: var(--crema-claro); }
h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; color: var(--crema-claro); }
h3 { font-family: var(--f-texto); font-size: 20px; font-weight: 700; line-height: 1.3; }
h1 em, h2 em { font-style: italic; color: var(--salmon); }
p { margin: 0 0 1em; color: var(--parrafo); }
p:last-child { margin-bottom: 0; }
p.destacado { font-size: 20px; line-height: 1.55; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
img, svg { max-width: 100%; display: block; }
ul, dl { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
strong { font-weight: 700; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--acento); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--dorado); outline-offset: 3px; border-radius: 4px;
}

.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding-left: var(--margen-i); padding-right: var(--margen-d); }
.seccion { position: relative; z-index: 2; padding-top: var(--seccion-y); padding-bottom: var(--seccion-y); }
.grilla-4-8 { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: start; }
.grilla-4-8 > * { min-width: 0; }
.columna-fija { position: sticky; top: calc(var(--alto-encabezado) + 24px); }
.grilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.grilla-3 > * { min-width: 0; }

/* ---------- Actos: cada sección es un lugar ---------- */
.acto { position: relative; overflow: hidden; }
.acto > .contenedor, .acto > .seccion, .acto > .cabecera { position: relative; z-index: 2; }
/* La primera pasa por debajo del encabezado pegado, que ahí es transparente. */
.acto--entrada { margin-top: calc(var(--alto-encabezado) * -1); }

.acto--noche { background: linear-gradient(180deg, var(--noche-0) 0%, var(--noche-2) 55%, var(--noche-3) 80%); }
.acto--bosque { background: linear-gradient(180deg, var(--noche-3) 0, var(--puente-cielo) clamp(120px, 17vw, 250px), var(--campo) clamp(190px, 27.8vw, 400px), var(--campo) 100%); }
.acto--mar { background: linear-gradient(180deg, var(--mar-alto) 0%, var(--mar-medio) 30%, var(--mar-hondo) 100%); }
.acto--ribera { background-color: var(--piedras); }
.acto--muelle {
  background-color: var(--muelle-b);
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .5) 0 3px, transparent 3px 68px),
    repeating-linear-gradient(.6deg, rgba(255, 214, 170, .07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-.4deg, rgba(20, 10, 4, .16) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(180deg, rgba(255, 196, 140, .07) 0 68px, rgba(0, 0, 0, .1) 68px 136px, rgba(255, 210, 160, .03) 136px 204px),
    linear-gradient(90deg, var(--muelle-a), var(--muelle-b) 50%, var(--muelle-a));
}
/* Costura bosque -> mar: la loma se funde en el azul antes de que empiece el acto del mar. */
.acto--bosque::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  height: clamp(60px, 7vw, 110px);
  background: linear-gradient(180deg, transparent, var(--mar-alto));
}
/* Costura acto de entrada -> cuerpo de lectura, en las páginas interiores. El :has distingue
   la cabecera interior de la portada; donde no hay soporte, queda el corte de antes. */
.acto--entrada:has(.cabecera)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  height: clamp(60px, 8vw, 120px);
  background: linear-gradient(180deg, transparent, var(--papel));
}
.acto--entrada:has(.cabecera) { min-height: clamp(360px, 40vw, 560px); }

.piedras {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .08) 3px, transparent 4px),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .14) 4px, transparent 5px);
  background-size: 40px 40px, 56px 56px;
}

/* ---------- Cielo: estrellas, luna, constelación ---------- */
.estrellas {
  position: absolute; inset: 0 0 26% 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 60px 90px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 110px 40px, #fff8e0, transparent),
    radial-gradient(1px 1px at 150px 150px, #fff, transparent),
    radial-gradient(2px 2px at 180px 70px, #fdf2d0, transparent),
    radial-gradient(1px 1px at 90px 180px, #fff, transparent);
  background-size: 200px 200px;
}
.estrellas--2 {
  inset: 0 0 30% 0;
  background-image:
    radial-gradient(1px 1px at 40px 60px, #dfe8ff, transparent),
    radial-gradient(1.5px 1.5px at 200px 20px, #fff, transparent),
    radial-gradient(1px 1px at 280px 240px, #fff, transparent),
    radial-gradient(2px 2px at 120px 290px, #fff4d8, transparent);
  background-size: 330px 330px;
}
.luna {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(72px, 9vw, 120px); right: clamp(24px, 12.5vw, 180px);
  width: clamp(52px, 6.2vw, 90px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffaf0, #eadfc4 60%, #cbbd9c);
  box-shadow: 0 0 70px 24px rgba(255, 240, 200, .16);
}
.constelacion {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(110px, 12vw, 170px); right: clamp(96px, 27vw, 390px);
  width: clamp(150px, 16.6vw, 240px); height: auto;
}
.constelacion__nombre { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1px; fill: rgba(233, 236, 244, .65); }
.enlace { stroke: #e9ecf4; stroke-width: 1; opacity: .4; stroke-dasharray: 3 5; }
.nodo { fill: #fff6dc; filter: drop-shadow(0 0 6px #ffe7a8); }

/* ---------- Lluvia y olas: capas que se mueven por transform ---------- */
.lluvia { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; opacity: .35; }
.lluvia--tenue { opacity: .18; }
.lluvia__capa { position: absolute; inset: -120px 0; }
.lluvia__capa--fina { background-image: linear-gradient(104deg, transparent 46%, rgba(205, 222, 245, .5) 48%, transparent 50%); background-size: 22px 70px; }
.lluvia__capa--gruesa { background-image: linear-gradient(104deg, transparent 46%, rgba(205, 222, 245, .28) 48%, transparent 50%); background-size: 37px 110px; }

.olas { position: absolute; left: 0; right: 0; top: 0; height: 300px; overflow: hidden; pointer-events: none; z-index: 1; }
.olas__capa {
  position: absolute; inset: 0 -120px;
  background-image: radial-gradient(circle at 50% 100%, transparent 18px, rgba(205, 228, 242, .22) 19px, rgba(205, 228, 242, .22) 20.5px, transparent 21.5px);
  background-size: 60px 24px;
}
.olas--hondas { top: 300px; bottom: 0; height: auto; opacity: .8; }
.olas--hondas .olas__capa {
  background-image: radial-gradient(circle at 50% 100%, transparent 26px, rgba(205, 228, 242, .14) 27px, rgba(205, 228, 242, .14) 28.5px, transparent 29.5px);
  background-size: 90px 32px;
}
.olas--pie { top: auto; bottom: 18px; height: 44px; }

@media (prefers-reduced-motion: no-preference) {
  .titilar { animation: titilar 4s ease-in-out infinite alternate; }
  .estrellas--2 { animation-delay: -2s; }   /* va despues del atajo, o se pierde */
  .lluvia__capa--fina { animation: llover-fina 1.1s linear infinite; }
  .lluvia__capa--gruesa { animation: llover-gruesa 1.65s linear infinite; }
  .olas__capa { animation: ola 9s linear infinite; }
  .olas--hondas .olas__capa { animation: ola-honda 14s linear infinite; }
  .mece { animation: mecer 4.5s ease-in-out infinite; }
  .mece--tarde { animation-delay: -1.8s; }
  .nodo { animation: latir 3.2s ease-in-out infinite; }
  .nodo--b { animation-delay: -1s; } .nodo--c { animation-delay: -2s; }
  .nodo--d { animation-delay: -.4s; } .nodo--e { animation-delay: -2.6s; }
  .pulso { animation: fluir 7s linear infinite; }
  .pulso--b { animation-delay: -2s; } .pulso--c { animation-delay: -4s; }
}
@keyframes titilar { from { opacity: .45; } to { opacity: 1; } }
@keyframes llover-fina { to { transform: translate3d(-22px, 70px, 0); } }
@keyframes llover-gruesa { to { transform: translate3d(-37px, 110px, 0); } }
@keyframes ola { to { transform: translate3d(-60px, 0, 0); } }
@keyframes ola-honda { to { transform: translate3d(90px, 0, 0); } }
@keyframes latir { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes fluir { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -714; } }
@keyframes mecer {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
.mece { transform-box: fill-box; transform-origin: center; }

/* ---------- Escenografía por acto ---------- */
.horizonte { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(190px, 25vw, 360px); z-index: 0; pointer-events: none; }
.arboleda { position: absolute; left: 0; top: clamp(70px, 10.4vw, 150px); width: 100%; height: clamp(140px, 19.4vw, 280px); z-index: 0; pointer-events: none; }
.campo { position: absolute; left: 0; top: clamp(190px, 27.8vw, 400px); width: 100%; height: clamp(300px, 39vw, 560px); z-index: 0; pointer-events: none; }
.botes { position: absolute; top: clamp(12px, 1.7vw, 24px); right: clamp(-120px, 2.8vw, 40px); width: clamp(360px, 48.6vw, 700px); height: auto; z-index: 1; pointer-events: none; }
.ribera { position: absolute; left: 0; top: 0; width: 100%; height: clamp(180px, 20.8vw, 300px); z-index: 0; pointer-events: none; }
.circuito { position: absolute; left: 0; top: 0; width: 100%; height: clamp(300px, 38vw, 550px); z-index: 0; pointer-events: none; }
.traza { fill: none; stroke: #c99a4b; stroke-width: 2; opacity: .6; stroke-linecap: round; stroke-linejoin: round; }
.pulso { fill: none; stroke: var(--dorado); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 700; filter: drop-shadow(0 0 5px #ffc766); }
.pad { fill: #3a2112; stroke: #d8aa5a; stroke-width: 2; }

/* ---------- Tejuelas: el patrón de las tapas y miniaturas ---------- */
.teja, .teja-azul, .teja-roja, .teja-video { background-size: 30px 18px; background-position: 0 0, 15px 9px; }
.teja { background-color: #efe4cc; background-image: radial-gradient(circle at 50% 0, transparent 13px, rgba(120, 98, 62, .5) 13.5px, rgba(120, 98, 62, .5) 14.6px, transparent 15px), radial-gradient(circle at 50% 0, transparent 13px, rgba(120, 98, 62, .5) 13.5px, rgba(120, 98, 62, .5) 14.6px, transparent 15px); }
.teja-azul { background-color: #dde5ee; background-image: radial-gradient(circle at 50% 0, transparent 13px, rgba(30, 58, 138, .38) 13.5px, rgba(30, 58, 138, .38) 14.6px, transparent 15px), radial-gradient(circle at 50% 0, transparent 13px, rgba(30, 58, 138, .38) 13.5px, rgba(30, 58, 138, .38) 14.6px, transparent 15px); }
.teja-roja { background-color: #f2dcd2; background-image: radial-gradient(circle at 50% 0, transparent 13px, rgba(184, 50, 42, .4) 13.5px, rgba(184, 50, 42, .4) 14.6px, transparent 15px), radial-gradient(circle at 50% 0, transparent 13px, rgba(184, 50, 42, .4) 13.5px, rgba(184, 50, 42, .4) 14.6px, transparent 15px); }
.teja-video { background-color: #0f2a44; background-image: radial-gradient(circle at 50% 0, transparent 13px, rgba(255, 255, 255, .1) 13.5px, rgba(255, 255, 255, .1) 14.6px, transparent 15px), radial-gradient(circle at 50% 0, transparent 13px, rgba(255, 255, 255, .1) 13.5px, rgba(255, 255, 255, .1) 14.6px, transparent 15px); }

/* ---------- Iconos ---------- */
.icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  border-radius: var(--r-boton); border: 2px solid transparent;
  font-family: var(--f-texto); font-size: 17px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform 160ms var(--salida), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 260ms var(--salida);
}
.boton .icono { transition: transform 260ms var(--salida); }
.boton:active { transform: scale(.97); }
.boton--primario { background: var(--acento); color: #fff; border-color: var(--acento); }
.boton--fantasma { background: transparent; color: var(--crema-claro); border-color: #f3e9d8; }
.boton--menu { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-2px); }
  .boton:hover .icono { transform: translateX(4px); }
  .boton--primario:hover { background: var(--acento-hondo); border-color: var(--acento-hondo); box-shadow: 0 16px 30px -16px rgba(184, 50, 42, .9); }
  .boton--fantasma:hover { background: var(--crema-claro); color: var(--noche-1); border-color: var(--crema-claro); }
}
/* Sobre papel el botón contorneado cambia de tinta */
.lectura .boton--fantasma { color: var(--azul); border-color: var(--azul); }
@media (hover: hover) and (pointer: fine) {
  .lectura .boton--fantasma:hover { background: var(--azul); color: var(--papel); border-color: var(--azul); }
}

.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; color: inherit; }
.enlace-flecha .icono { width: 18px; height: 18px; color: var(--salmon); transition: transform 260ms var(--salida); }
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha:hover .icono { transform: translateX(5px); }
.indice .enlace-flecha, .blog-ribera .enlace-flecha { color: var(--azul); }
.indice .enlace-flecha .icono, .blog-ribera .enlace-flecha .icono { color: var(--acento); }
.acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 40;
  background: transparent; color: #f3e9d8;
  border-bottom: 1px solid transparent;
  transition: background-color 320ms var(--salida), border-color 320ms var(--salida), box-shadow 320ms var(--salida);
}
.encabezado--solido {
  background: rgba(11, 22, 40, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--raya-clara);
  box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .9);
}
.encabezado__interior { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--alto-encabezado); }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; white-space: nowrap; }
.logo__nombre { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(22px, 1.95vw, 28px); line-height: 1; color: var(--crema-claro); }
.logo__tld { color: var(--salmon); }
.menu { display: flex; align-items: center; gap: 26px; }
.menu .icono--externo { width: 15px; height: 15px; margin-left: 4px; }
.menu a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; text-decoration: none; color: #f3e9d8; transition: color 200ms ease; }
.menu a:not(.boton)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--salmon); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--salida); }
.menu a:not(.boton):hover::after, .menu a[aria-current="page"]:not(.boton)::after { transform: scaleX(1); }
.menu a:not(.boton):hover, .menu a[aria-current="page"]:not(.boton) { color: var(--crema-claro); }

.menu-boton {
  display: none; width: 48px; height: 48px; padding: 0;
  background: none; border: 2px solid currentColor; border-radius: var(--r-boton); color: inherit;
  cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  transition: transform 160ms var(--salida), border-color 200ms ease;
}
.menu-boton:active { transform: scale(.94); }
.menu-boton--abierto { border-color: var(--salmon); }
.menu-boton span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform 250ms var(--salida); }
.menu-boton--abierto span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-boton--abierto span:last-child { transform: translateY(-4px) rotate(-45deg); }

.saltar { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; background: var(--dorado); color: var(--noche-1); border-radius: var(--r-boton); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 16px; }
.svg-defs { position: absolute; width: 0; height: 0; }

/* ---------- Acto 1: la portada ---------- */
.portada { display: flex; align-items: flex-start; min-height: min(100svh, 1000px); padding-top: calc(var(--alto-encabezado) + clamp(56px, 7.8vw, 112px)); padding-bottom: clamp(140px, 16vw, 230px); }
.portada__interior { position: relative; z-index: 2; width: min(660px, 100%); }
.portada__lugar { margin: 0 0 clamp(28px, 3.2vw, 46px); font-family: var(--f-mono); font-size: 14px; letter-spacing: .06em; color: var(--mono-arena); }
.portada__titular { position: relative; }
.portada__mano {
  position: absolute; top: calc(-1 * clamp(28px, 3.2vw, 46px) + 4px); left: clamp(0px, 17vw, 250px);
  font-family: var(--f-mano); font-weight: 700; font-size: clamp(22px, 2vw, 29px);
  color: var(--salmon); transform: rotate(-3deg); white-space: nowrap;
}
.portada__texto { margin: clamp(26px, 2.4vw, 34px) 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--parrafo); }
@media (prefers-reduced-motion: no-preference) {
  .portada__lugar, .portada__titular, .portada__texto, .portada .acciones { animation: subir 900ms var(--salida) both; }
  .portada__titular { animation-delay: 90ms; }
  .portada__texto { animation-delay: 180ms; }
  .portada .acciones { animation-delay: 270ms; }
}
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Acto 2: bosque y pampa ---------- */
.acto--bosque .seccion { padding-top: clamp(56px, 6vw, 86px); padding-bottom: clamp(56px, 6vw, 90px); }
.acto--bosque > .seccion > h2, .acto--bosque .contenedor > h2 { max-width: 20ch; }
.oficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(150px, 20vw, 290px); }
.oficios > * { min-width: 0; }
.oficio { background: var(--papel); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sombra-card); transition: transform 300ms var(--salida), box-shadow 300ms var(--salida); }
.oficio__tapa { height: clamp(112px, 10.4vw, 150px); display: flex; align-items: center; justify-content: center; }
.oficio__sello { width: 84px; height: 84px; padding: 16px; border-radius: 50%; background: var(--papel); }
.oficio__sello .icono { width: 100%; height: 100%; }
.oficio--tecnologia .oficio__sello .icono { color: var(--azul); }
.oficio--arte .oficio__sello .icono { color: var(--acento); }
.oficio--ciencia .oficio__sello .icono { color: #6b5a36; }
.oficio__cuerpo { padding: 24px 28px 28px; }
.oficio h3 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; color: var(--azul); }
.oficio p { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .oficio:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -26px rgba(10, 20, 5, .8); }
}
.nota-minga { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 17px; color: var(--crema-claro); }
.nota-minga .enlace-flecha { color: var(--crema-claro); }
.nota-minga .enlace-flecha .icono { color: var(--dorado); }

/* ---------- Acto 3: mar abierto ---------- */
.acto--mar .seccion { padding-top: clamp(72px, 7.6vw, 110px); }
.mar__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mar__grilla { margin-top: clamp(64px, 9vw, 130px); }
.video { text-decoration: none; color: #e8ecf4; display: block; }
.video .miniatura { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); border: 1px solid rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); }
.reproducir { width: 60px; height: 60px; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform 260ms var(--salida); }
.reproducir .icono { width: 22px; height: 22px; stroke: none; fill: currentColor; }
.video:hover .reproducir { transform: scale(1.08); }
.video .mono { display: block; margin-top: 14px; font-size: 13px; color: var(--salmon); }
.video h3 { margin-top: 6px; font-size: 20px; color: var(--crema-claro); }

.galeria__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); }
.galeria__cabecera h3 { font-family: var(--f-titulo); font-weight: 400; font-size: 30px; color: var(--crema-claro); }
.galeria { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 16px; margin-top: 18px; height: 240px; }
.galeria > * { min-width: 0; border-radius: var(--r-card); overflow: hidden; position: relative; display: block; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--salida); }
.galeria a:hover img { transform: scale(1.05); }
.galeria figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; background: var(--papel); color: var(--tinta); font-family: var(--f-mono); font-size: 12px; }

.en-preparacion {
  border-radius: var(--r-card); border: 1px dashed rgba(255, 255, 255, .28);
  padding: 26px 28px; color: var(--crema-claro); max-width: 52ch;
}
.en-preparacion .mono { display: block; font-size: 13px; color: var(--salmon); margin-bottom: 6px; }
.en-preparacion p { color: var(--parrafo); margin: 0; }

/* ---------- Acto 4: la ribera ---------- */
.ribera__grilla { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 72px; padding-top: clamp(200px, 23.6vw, 340px); padding-bottom: var(--seccion-y); }
.ribera__grilla > * { min-width: 0; }
.ribera__columna { position: relative; }
.polaroid {
  position: absolute; z-index: 2; top: -70px; right: -40px; margin: 0; width: 210px;
  padding: 10px 10px 36px; background: var(--papel);
  box-shadow: var(--sombra-polaroid); transform: rotate(5deg);
  transition: transform 500ms var(--salida);
}
.polaroid img { width: 100%; height: 170px; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 14px; bottom: 6px; font-family: var(--f-mano); font-weight: 600; font-size: 21px; color: var(--azul); }
@media (hover: hover) and (pointer: fine) { .polaroid:hover { transform: rotate(0deg) scale(1.03); } }

.indice { position: relative; background: var(--papel-blanco); padding: 30px 32px 22px; box-shadow: var(--sombra-papel); transform: rotate(-1deg); color: var(--tinta); }
.indice h2 { margin: 0 0 8px; font-family: var(--f-mano); font-weight: 700; font-size: 38px; line-height: 1; color: var(--acento); text-decoration: underline; text-underline-offset: 6px; }
.indice dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; font-size: 16px; line-height: 1.4; }
.indice dt, .indice dd { margin: 0; padding: 13px 0; border-bottom: 1px dashed var(--raya); }
.indice dt { font-family: var(--f-mono); font-size: 14px; color: var(--acento); }
.indice dd { color: var(--tinta); }
.indice dl > *:nth-last-child(-n+2) { border-bottom: 0; }

.blog-ribera { background: var(--papel); border-radius: var(--r-panel); padding: 36px 40px 20px; box-shadow: var(--sombra-papel); color: var(--tinta); align-self: start; }
.blog-ribera__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog-ribera h2 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(32px, 3vw, 44px); color: var(--azul); }
.blog-ribera h2 em { color: var(--acento); }
.entradas { margin-top: 22px; border-top: 2px solid var(--azul); }
.entradas a { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px dashed var(--raya); text-decoration: none; color: var(--tinta); }
.entradas li:last-child a { border-bottom: 0; }
.entradas a > * { min-width: 0; }
.entrada__miniatura { height: 96px; border-radius: var(--r-mini); overflow: hidden; }
.entrada__miniatura img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--salida); }
.entradas a:hover .entrada__miniatura img { transform: scale(1.06); }
.entradas .mono { display: block; font-size: 13px; color: var(--acento); }
.entradas h3 { margin-top: 6px; font-size: 23px; font-weight: 700; color: var(--azul); }
.entradas p { margin: 4px 0 0; font-size: 16px; color: var(--gris); }
.entradas a:hover h3 { text-decoration: underline; }

/* ---------- Acto 5: el muelle ---------- */
.cierre { position: relative; overflow: hidden; }
.cierre__velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(28, 15, 8, .7), rgba(28, 15, 8, .1) 65%, transparent); }
.cierre__interior { position: relative; z-index: 2; padding-top: clamp(64px, 6.2vw, 90px); padding-bottom: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 56px; align-items: start; }
.cierre__lugar { display: block; margin-bottom: 18px; font-family: var(--f-mono); font-size: 14px; color: var(--mono-arena); }
.cierre__titulo { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; color: var(--crema-claro); }
.cierre p { color: var(--parrafo); max-width: 46ch; margin-top: 18px; }
.vias { display: grid; gap: 2px; }
.vias li { border-top: 1px solid var(--raya-clara); }
.vias li:first-child { border-top: 0; }
.vias a { display: grid; grid-template-columns: 44px 1fr 22px; align-items: center; gap: 12px; min-height: 62px; text-decoration: none; color: var(--crema-claro); }
.vias a > * { min-width: 0; }
.vias .icono { width: 44px; height: 44px; padding: 11px; border-radius: var(--r-mini); background: rgba(255, 214, 170, .08); border: 1px solid var(--raya-clara); color: var(--dorado); transition: background-color 200ms ease, transform 260ms var(--salida); }
.vias .icono--flecha { width: 22px; height: 22px; padding: 0; background: none; border: 0; color: var(--mono-arena); }
.vias span { display: block; font-size: 13px; color: var(--mono-arena); }
.vias strong { display: block; font-size: 17px; }
.vias a:hover .icono:first-child { background: rgba(255, 214, 170, .2); transform: translateY(-2px); }
.vias a:hover .icono--flecha { transform: translateX(4px); }
.redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-boton); border: 1px solid var(--raya-clara); color: var(--crema-claro); text-decoration: none; font-size: 14px; font-weight: 700; transition: border-color 200ms ease, background-color 200ms ease, transform 160ms var(--salida); }
.redes a .icono { width: 20px; height: 20px; color: var(--dorado); }
.redes a:hover { border-color: var(--dorado); background: rgba(255, 214, 170, .12); }
.redes a:active { transform: scale(.97); }
.cierre__barra { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 22px; border-top: 1px solid var(--raya-clara); font-family: var(--f-mono); font-size: 13px; color: var(--mono-arena); }
.cierre__barra nav { display: flex; gap: 20px; flex-wrap: wrap; }
.cierre__barra a { display: inline-flex; align-items: center; min-height: 40px; color: var(--mono-arena); text-decoration: none; }
.cierre__barra a:hover { color: var(--crema-claro); text-decoration: underline; }

/* ---------- Páginas interiores: cabecera de acto ---------- */
.cabecera { padding-top: calc(var(--alto-encabezado) + clamp(40px, 5vw, 72px)); padding-bottom: clamp(56px, 6vw, 88px); }
.cabecera h1 { max-width: 20ch; }
.cabecera__grilla { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.cabecera__grilla > * { min-width: 0; }
.cabecera__roles { margin-top: 22px; max-width: 58ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--crema); }
.cabecera__contacto { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-family: var(--f-mono); font-size: 13px; color: var(--mono-arena); }
.cabecera__contacto a { text-decoration: none; }
.cabecera__contacto a:hover { text-decoration: underline; }
.cabecera__foto { position: relative; }
.cabecera__foto img { width: 100%; border-radius: var(--r-card); box-shadow: var(--sombra-papel); }
.cabecera__foto figcaption { margin-top: 12px; font-family: var(--f-mano); font-size: 21px; color: var(--mono-arena); }
.etiqueta { display: block; margin-top: 18px; font-family: var(--f-mono); font-size: 13px; color: var(--mono-arena); }

/* Cuerpo de lectura de las páginas interiores: tras el acto de entrada, la página se vuelve
   papel. Un solo envoltorio cambia todos los tokens de texto, sin tocar el marcado de cada
   sección; los bloques que deben seguir oscuros (la minga) recuperan los suyos más abajo. */
.lectura { background: var(--papel); color: var(--tinta); padding-bottom: clamp(32px, 4vw, 56px); }
.lectura h1, .lectura h2, .lectura h3 { color: var(--azul); }
.lectura h1 em, .lectura h2 em { color: var(--acento); }
.lectura p { color: var(--tinta-2); }
.lectura .mono, .lectura .etiqueta { color: var(--acento); }
.lectura a { color: var(--azul); }
.lectura .seccion { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.lectura .seccion--alterna { background: #f4ecdc; }
.lectura .enlace-flecha { color: var(--azul); }
.lectura .enlace-flecha .icono { color: var(--acento); }
.lectura .filtro { border-color: rgba(30, 58, 138, .3); color: var(--azul); }
.lectura .filtro:hover { border-color: var(--azul); background: rgba(30, 58, 138, .07); }
.lectura .filtro--activo { background: var(--azul); border-color: var(--azul); color: var(--papel); }
.lectura .articulo__foto figcaption { color: var(--gris); }
.lectura .articulo__foto figcaption a { color: var(--azul); }
/* La minga se queda verde dentro del papel */
.lectura .minga h2, .lectura .minga h3, .lectura .minga p, .lectura .minga .ficha dd { color: var(--crema-claro); }
.lectura .minga h2 em, .lectura .minga .mono, .lectura .minga .ficha dt { color: var(--dorado); }
.lectura .minga .ficha-pendiente { color: var(--crema-claro); }

/* Franja de hechos */
.hechos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hechos > div { min-width: 0; padding: 20px 22px; border-radius: var(--r-card); background: var(--papel); box-shadow: var(--sombra-card); }
.hechos .mono { display: block; margin-bottom: 8px; font-size: 13px; color: var(--acento); }
.hechos p { font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--azul); margin: 0; }
.hechos--pagina { padding-bottom: clamp(28px, 3vw, 40px); }

/* ---------- Perfil y credenciales ---------- */
.estudios li, .credenciales li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--raya); }
.estudios li:last-child, .credenciales li:last-child { border-bottom: 0; }
.estudios li > *, .credenciales li > * { min-width: 0; }
.estudios > li > .mono, .credenciales > li > .mono { font-family: var(--f-mono); font-size: 14px; color: var(--acento); padding-top: 2px; }
.estudios strong, .credenciales strong { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--azul); }
.estudios strong em { font-style: italic; color: var(--acento); }
.estudios span, .credenciales span { display: block; color: var(--tinta-2); font-size: 15px; margin-top: 4px; }
.estudios a, .credenciales a { color: var(--azul); }
.credenciales { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.credenciales li { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 13px 0; }
.diplomados__ancho { grid-column: 1 / -1; }
.modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--raya); }
.modulos li { min-width: 0; }
.modulos strong { font-size: 15px; }
.modulos .mono { display: block; margin-top: 2px; font-size: 12px; color: var(--gris); }

.experiencia > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px dashed var(--raya); }
.experiencia > li:last-child { border-bottom: 0; }
.experiencia > li > * { min-width: 0; }
.experiencia > li > .mono { font-family: var(--f-mono); font-size: 14px; color: var(--acento); padding-top: 6px; }
.experiencia h3 { margin-bottom: 8px; font-family: var(--f-titulo); font-weight: 400; font-size: 28px; color: var(--azul); }
.experiencia__lugar { font-weight: 700; color: var(--tinta); margin-bottom: 14px; }
.experiencia__lugar small { font-weight: 400; font-size: 14px; color: var(--gris); }
.experiencia__items li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 16px; color: var(--tinta-2); }
.experiencia__items li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; border-radius: 2px; background: var(--acento); }
.experiencia__items a { color: var(--azul); }

.sistemas { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.sistemas li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--azul); border-radius: var(--r-boton); font-size: 15px; font-weight: 700; color: var(--azul); }
.sistemas a { text-decoration: none; color: inherit; }
.sistemas a:hover { text-decoration: underline; }

.diplomados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.diplomados li { min-width: 0; padding: 20px 22px; border-radius: var(--r-card); background: var(--papel-2); border: 1px solid rgba(30, 58, 138, .12); }
.diplomados .mono { display: block; font-size: 13px; color: var(--acento); margin-bottom: 8px; }
.diplomados strong { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--azul); }
.diplomados span { display: block; font-size: 14px; color: var(--tinta-2); margin-top: 6px; }

.competencias > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--raya); }
.competencias > div:last-child { border-bottom: 0; }
.competencias dt { font-weight: 700; font-size: 15px; color: var(--azul); }
.competencias dd { margin: 0; color: var(--tinta-2); }

.prensa__grilla { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.prensa__grilla > * { min-width: 0; }
.recorte { border-radius: var(--r-card); overflow: hidden; background: var(--papel); box-shadow: var(--sombra-card); }
.recorte img { width: 100%; height: auto; }
.recorte figcaption { padding: 10px 14px; font-family: var(--f-mono); font-size: 12px; color: var(--gris); }
.recorte a { display: block; }
.cita { margin: 0 0 20px; padding: 22px 26px; border-radius: var(--r-card); background: var(--papel-2); font-family: var(--f-titulo); font-weight: 400; font-size: 24px; line-height: 1.32; color: var(--azul); }
.cita p { margin: 0; color: inherit; }
.cita footer { margin-top: 12px; font-family: var(--f-texto); font-size: 14px; color: var(--gris); }
.citas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.citas > * { min-width: 0; }
.citas .cita { margin: 0; font-size: 21px; }
.que-hago__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 44px; }
.que-hago__lista > * { min-width: 0; border-top: 2px solid var(--acento); padding-top: 16px; }
.que-hago__lista h3 { margin-bottom: 10px; }
.que-hago__lista p { font-size: 16px; }

/* ---------- Cursos ---------- */
.catalogo__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.catalogo__lista article { min-width: 0; padding: 24px 26px; border-radius: var(--r-card); background: var(--papel-2); border: 1px solid rgba(30, 58, 138, .12); scroll-margin-top: calc(var(--alto-encabezado) + 16px); transition: transform 300ms var(--salida), box-shadow 300ms var(--salida); }
.catalogo__lista article:hover { transform: translateY(-3px); box-shadow: var(--sombra-card); }
.catalogo__lista h3 { margin-bottom: 10px; }
.catalogo__lista p { font-size: 16px; }
.curso__meta { font-size: 14px; color: var(--gris); margin-top: 12px; line-height: 1.7; }
.curso__meta .mono { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; color: var(--acento); }
.minga { position: relative; overflow: hidden; border-radius: var(--r-panel); background: linear-gradient(150deg, #668546, var(--campo) 60%, #435c31); color: var(--crema-claro); padding: clamp(26px, 3.6vw, 52px); box-shadow: var(--sombra-card); }
.minga h2 { color: var(--crema-claro); max-width: 20ch; }
.minga h2 em { color: var(--dorado); }
.minga p { color: var(--crema-claro); }
.minga__intro { max-width: 62ch; }
.ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(251, 243, 228, .3); }
.ficha dt { font-family: var(--f-mono); font-size: 13px; color: var(--dorado); margin-bottom: 6px; }
.ficha dd { margin: 0; font-weight: 700; color: var(--crema-claro); }
.ficha-pendiente { margin-top: 28px; padding: 16px 20px; border-radius: var(--r-mini); background: rgba(251, 243, 228, .12); border: 1px dashed rgba(251, 243, 228, .4); color: var(--crema-claro); font-size: 16px; max-width: 52ch; }

/* ---------- Blog ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.filtro { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(233, 201, 142, .4); border-radius: var(--r-boton); background: transparent; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--crema); transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, transform 160ms var(--salida); }
.filtro:hover { border-color: var(--dorado); color: var(--crema-claro); }
.filtro:active { transform: scale(.97); }
.filtro--activo { background: var(--crema-claro); border-color: var(--crema-claro); color: var(--noche-1); }

.entradas--completo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 0; border-top: 0; }
.entradas--completo li { border: 1px solid rgba(30, 58, 138, .12); border-radius: var(--r-card); background: var(--papel-2); overflow: hidden; transition: transform 300ms var(--salida), box-shadow 300ms var(--salida); }
.entradas--completo li:last-child a { border-bottom: 0; }
.entradas--completo li:hover { transform: translateY(-3px); box-shadow: var(--sombra-card); }
.entradas--completo a { display: block; padding: 0; border-bottom: 0; }
.entrada__portada { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 600ms var(--salida); }
.entradas--completo li:hover .entrada__portada { transform: scale(1.04); }
.entrada__cuerpo { padding: 20px 24px 24px; }
.entradas--completo h3 { margin-top: 6px; font-size: 22px; }

.articulo__cabecera h1 { font-size: clamp(30px, 3.4vw, 48px); max-width: 22ch; }
.articulo__foto { margin-bottom: 40px; }
.articulo__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--sombra-papel); }
.articulo__foto--alta img { aspect-ratio: 5 / 4; }
.articulo__foto figcaption { margin-top: 12px; max-width: 70ch; font-family: var(--f-mono); font-size: 13px; color: var(--mono-arena); }
.articulo__foto figcaption a { color: var(--dorado); }
.articulo__cuerpo { max-width: 72ch; font-size: 18px; line-height: 1.72; }
.articulo__cuerpo h2 { font-size: 30px; margin: 48px 0 16px; color: var(--azul); }
.articulo__cuerpo h3 { font-size: 21px; margin: 36px 0 12px; color: var(--azul); }
.articulo__cuerpo p { margin-bottom: 1.2em; color: var(--tinta-2); }
.articulo__cuerpo ul, .articulo__cuerpo ol { margin: 0 0 1.2em; padding-left: 1.4em; list-style: revert; color: var(--tinta-2); }
.articulo__cuerpo li { margin-bottom: .4em; }
.articulo__cuerpo a { color: var(--azul); }
.articulo__cuerpo blockquote { position: relative; margin: 36px 0; padding: 2px 0 2px 54px; font-family: var(--f-titulo); font-style: italic; font-size: 24px; line-height: 1.36; color: var(--azul); }
.articulo__cuerpo blockquote::before { content: '«'; position: absolute; left: 0; top: -4px; font-family: var(--f-titulo); font-style: normal; font-size: 56px; line-height: .9; color: var(--acento); }
.articulo__cuerpo blockquote p { margin: 0 0 .5em; color: inherit; }
.articulo__cuerpo blockquote p:last-child { margin-bottom: 0; }
.articulo__cuerpo code { font-family: var(--f-mono); font-size: .9em; background: #f0e9d9; padding: 2px 6px; border-radius: 6px; }
.articulo__cuerpo pre { background: var(--noche-1); color: var(--crema); padding: 20px 24px; border-radius: var(--r-card); overflow-x: auto; font-size: 14px; line-height: 1.6; margin: 0 0 1.4em; }
.articulo__cuerpo pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.articulo__cuerpo hr { border: 0; border-top: 1px dashed var(--raya); margin: 40px 0; }
.articulo__cuerpo img { border-radius: var(--r-card); }
.articulo__firma { margin-top: 40px; padding-top: 20px; border-top: 1px dashed var(--raya); font-family: var(--f-mono); font-size: 13px; color: var(--gris); }

/* ---------- Contacto ---------- */
.contacto__grilla { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.contacto__grilla > * { min-width: 0; }
.formulario { display: grid; gap: 18px; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo label { font-weight: 700; font-size: 15px; color: var(--azul); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border-radius: var(--r-boton); border: 2px solid rgba(30, 58, 138, .22); background: var(--papel-2);
  font: inherit; color: var(--tinta);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.campo textarea { min-height: 160px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px rgba(184, 50, 42, .16); }
.campo small { font-size: 13px; color: var(--gris); }
.campo--error input, .campo--error textarea, .campo--error select { border-color: #a3231a; }
.campo__error { font-size: 14px; color: #8f1f18; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { padding: 20px 24px; border-radius: var(--r-card); background: var(--papel-2); border: 1px solid rgba(30, 58, 138, .16); color: var(--tinta-2); }
.aviso--ok { border-color: #7fa98b; background: #eef6ee; }
.aviso--error { border-color: #d49f97; background: #fbeeec; }
.aviso h3 { margin-bottom: 6px; color: var(--azul); }
.vias--claro li { border-top-color: var(--raya); }
.vias--claro a { color: var(--tinta); }
.vias--claro .icono { background: var(--papel-2); border-color: var(--raya); color: var(--acento); }
.vias--claro .icono--flecha { background: none; border: 0; color: var(--gris); }
.vias--claro span { color: var(--gris); }
.vias--claro strong { color: var(--azul); }
.redes--claro a { color: var(--azul); border-color: rgba(30, 58, 138, .24); }
.redes--claro a .icono { color: var(--acento); }
.redes--claro a:hover { border-color: var(--acento); background: rgba(184, 50, 42, .07); }

/* ---------- Estados vacíos y utilidades ---------- */
.vacio { border: 1px dashed rgba(30, 58, 138, .3); border-radius: var(--r-card); padding: 26px 30px; background: var(--papel-2); color: var(--tinta-2); }
.vacio__titulo { font-family: var(--f-titulo); font-size: 26px; line-height: 1.18; color: var(--azul); margin-bottom: 8px; }
.vacio a { color: var(--azul); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-48 { margin-top: 48px; }
.u-pt-0 { padding-top: 0; }
.u-max-56 { max-width: 56ch; }

/* ---------- Revelado por scroll ---------- */
.js-motor .revelar { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--salida), transform 700ms var(--salida); transition-delay: calc(var(--i, 0) * 70ms); }
.js-motor .revelar--visto { opacity: 1; transform: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js-motor .revelar { opacity: 1; transform: none; }
  .polaroid { transform: rotate(5deg) !important; }
  .indice { transform: rotate(-1deg) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .encabezado--solido { background: var(--noche-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Pantalla baja (1366x768 y parecidas): el horizonte tiene que entrar ---------- */
@media (max-height: 820px) and (min-width: 901px) {
  .portada { min-height: min(100svh, 860px); padding-top: calc(var(--alto-encabezado) + 44px); padding-bottom: clamp(130px, 16vw, 200px); }
  .acto--noche .horizonte { height: clamp(170px, 17vw, 250px); }
  .luna { top: 60px; width: clamp(48px, 5vw, 72px); }
  .constelacion { top: 84px; width: clamp(140px, 13vw, 190px); }
}

/* ═══════════ Fondo de fotos de la portada ═══════════
   Las fotos van detrás de todo y por encima lleva un velo doble: uno que oscurece de lado a
   lado, donde va el texto, y otro que baja hasta el azul exacto con el que empieza el acto
   siguiente, para que la portada se funda con el bosque sin costura. Con el velo puesto, el
   crema del titular pasa AA incluso sobre una foto blanca. */
.fondo-fotos { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fondo-fotos__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1400ms ease;
}
.fondo-fotos__foto:first-child { opacity: 1; }          /* sin JS se ve la primera */
.fondo-fotos__foto.es-visible { opacity: 1; }
.fondo-fotos__velo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7, 15, 31, .93) 0%, rgba(7, 15, 31, .6) 55%, rgba(7, 15, 31, .4) 100%),
    linear-gradient(180deg, rgba(7, 15, 31, .8) 0%, rgba(11, 22, 40, .66) 42%, var(--noche-3) 100%);
}
/* Con foto de fondo, la silueta dibujada estorba: manda la fotografía. */
.acto--fotos .horizonte { display: none; }
.acto--fotos .estrellas { inset: 0 0 40% 0; opacity: .8; }

/* ═══════════ Cuenta regresiva ═══════════ */
.contador { margin-top: clamp(28px, 3vw, 40px); }
.contador__titulo { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mono-arena); }
.contador__cifras { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; }
.contador__parte { display: flex; align-items: baseline; gap: 8px; }
.contador__parte b {
  font-family: var(--f-titulo); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1; letter-spacing: -.02em; color: var(--crema-claro); font-variant-numeric: tabular-nums;
}
.contador__parte span { font-family: var(--f-mono); font-size: 13px; color: var(--mono-arena); }
.contador__fecha { margin: 12px 0 0; font-family: var(--f-mono); font-size: 13px; color: var(--parrafo); }

/* ═══════════ Aviso de lanzamiento ═══════════ */
.aviso-lanzamiento {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(7, 15, 31, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 320ms var(--salida);
}
/* El display:flex de arriba le gana al [hidden] del navegador: sin esta regla el aviso cerrado
   (o todavía no abierto por el JS) queda invisible pero encima de todo, tapando cada enlace. */
.aviso-lanzamiento[hidden] { display: none; }
.aviso-lanzamiento:not(.es-visible) { pointer-events: none; }
.aviso-lanzamiento.es-visible { opacity: 1; }
.aviso-lanzamiento__caja {
  position: relative; width: min(520px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-panel); background: var(--noche-2);
  border: 1px solid var(--raya-clara); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  transform: translateY(14px); transition: transform 320ms var(--salida);
}
.aviso-lanzamiento.es-visible .aviso-lanzamiento__caja { transform: none; }
.aviso-lanzamiento__marca { margin: 0 0 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mono-arena); }
.aviso-lanzamiento h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--crema-claro); }
.aviso-lanzamiento__pie { margin: 22px 0 20px; font-size: 16px; color: var(--parrafo); }
.aviso-lanzamiento .boton { width: 100%; }
.aviso-lanzamiento__cerrar {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: var(--r-boton);
  color: var(--mono-arena); cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}
.aviso-lanzamiento__cerrar svg { width: 20px; height: 20px; }
.aviso-lanzamiento__cerrar:hover { color: var(--crema-claro); background: rgba(255, 255, 255, .08); }

/* ═══════════ Página de lanzamiento (modo bloqueo) ═══════════ */
.cuerpo-lanzamiento { background: var(--noche-1); }
.lanzamiento-pagina { display: flex; align-items: center; min-height: 100svh; padding: clamp(80px, 10vw, 140px) 0 clamp(180px, 24vw, 320px); }
.lanzamiento-pagina__interior { position: relative; z-index: 2; width: min(660px, 100%); }
.lanzamiento-pagina h1 { font-size: clamp(40px, 5.6vw, 76px); }
.lanzamiento-pagina h1 em { font-style: normal; color: var(--salmon); }

@media (max-width: 900px) {
  .contador__cifras { gap: 8px 16px; }
  .aviso-lanzamiento__caja { padding: 26px 22px; }
  .lanzamiento-pagina { padding-bottom: clamp(150px, 42vw, 240px); }
}
@media (prefers-reduced-motion: reduce) {
  .fondo-fotos__foto { transition: none; }
  .aviso-lanzamiento, .aviso-lanzamiento__caja { transition: none; }
}

/* ═══════════════════════════ Clima y temporada ═══════════════════════════
   El mundo no cambia: cambian el tiempo que hace y la fecha. El horizonte lleva sus colores
   en variables para que cada tema pueda repintar la escena entera sin tocar el dibujo, y las
   capas de clima van todas en z-index 1, entre la ilustración y el contenido. */

.horizonte {
  --h-cerro1: #2b4463; --h-cerro2: #1f3552; --h-cerro3: #13243c;
  --h-iglesia: #0c1a2d; --h-ventana: #ffd98f; --h-mar: #0c1c32;
  --h-escalera: rgba(255, 240, 200, .5);
}
.h-cerro-1 { fill: var(--h-cerro1); }
.h-cerro-2 { fill: var(--h-cerro2); }
.h-cerro-3 { fill: var(--h-cerro3); }
.h-iglesia { fill: var(--h-iglesia); }
.h-ventana { fill: var(--h-ventana); opacity: .85; }
.h-mar     { fill: var(--h-mar); }
.h-escalera { stroke: var(--h-escalera); }

/* ── Viento ── Dos capas de rachas. Cada SVG lleva el grupo dos veces, uno tras otro, y se
   desplaza exactamente la mitad de su ancho: el ciclo cierra sin salto. */
.viento { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.viento--tenue { opacity: .45; }
.viento__capa { position: absolute; left: 0; right: 0; overflow: hidden; }
.viento__capa--1 { top: 6%; height: 46%; opacity: .5; }
.viento__capa--2 { top: 30%; height: 54%; opacity: .28; }
.viento__capa svg { width: 200%; height: 100%; }
.viento__grupo { fill: none; stroke: #cddef5; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .viento__capa--1 svg { animation: racha 9s linear infinite; }
  .viento__capa--2 svg { animation: racha 15s linear infinite; }
  .tema--viento .mece { animation-duration: 2.6s; }
}
@keyframes racha { to { transform: translateX(-50%); } }

/* ── Sol ── Atardecer despejado. El cielo se mantiene oscuro porque el titular va en crema:
   un mediodía de verdad obligaría a cambiar de mundo, no de clima. */
.tema--sol.acto--noche {
  background: linear-gradient(180deg, #16243f 0%, #33385a 38%, #6b4a55 66%, #8a5a4a 84%, var(--noche-3) 100%);
}
.tema--sol .luna, .tema--sol .estrellas, .tema--sol .constelacion { display: none; }
.tema--sol .horizonte {
  --h-cerro1: #5b6c85; --h-cerro2: #3f4f6b; --h-cerro3: #25344b;
  --h-iglesia: #1b2839; --h-ventana: #ffe6b0; --h-mar: #20344c;
  --h-escalera: rgba(255, 240, 200, .45);
}
.sol {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(96px, 15vw, 210px); right: clamp(28px, 13vw, 190px);
  width: clamp(62px, 7.6vw, 112px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #fff6dc, #ffd08a 56%, #ef9f56);
  box-shadow: 0 0 130px 56px rgba(255, 186, 116, .26);
}
.gaviotas { position: absolute; top: clamp(64px, 9vw, 130px); left: 0; width: 100%; height: clamp(120px, 15vw, 220px); z-index: 1; pointer-events: none; }
.gaviota { fill: none; stroke: rgba(244, 234, 218, .72); stroke-width: 2.4; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .gaviota { animation: planear 30s linear infinite; }
  .gaviota--2 { animation-duration: 38s; animation-delay: -11s; }
  .gaviota--3 { animation-duration: 26s; animation-delay: -19s; }
  .gaviota--4 { animation-duration: 44s; animation-delay: -6s; }
}
@keyframes planear { from { transform: translateX(-180px); } to { transform: translateX(1560px); } }

/* ── Fiestas Patrias ── La guirnalda cuelga bajo el encabezado y se mece entera. */
.guirnalda { position: absolute; top: var(--alto-encabezado); left: 0; width: 100%; height: clamp(88px, 10vw, 150px); z-index: 1; pointer-events: none; }
.guirnalda__cuerda { fill: none; stroke: rgba(250, 240, 220, .55); stroke-width: 2; }
.banderin { stroke: rgba(0, 0, 0, .18); stroke-width: .8; }
@media (prefers-reduced-motion: no-preference) {
  .guirnalda__grupo { transform-origin: 50% 0; animation: mecer-guirnalda 6s ease-in-out infinite alternate; }
}
@keyframes mecer-guirnalda { from { transform: rotate(-.45deg); } to { transform: rotate(.45deg); } }

/* ── Navidad ── Luces de colores que van por turnos. Sin nieve: acá diciembre es verano. */
.luces { position: absolute; top: var(--alto-encabezado); left: 0; width: 100%; height: clamp(78px, 9vw, 120px); z-index: 1; pointer-events: none; }
.luces__cuerda { fill: none; stroke: rgba(250, 240, 220, .5); stroke-width: 2; }
.luz__cable { stroke: rgba(250, 240, 220, .45); stroke-width: 1.5; }
.luz { filter: drop-shadow(0 0 6px rgba(255, 216, 150, .9)); }
@media (prefers-reduced-motion: no-preference) {
  .luz { animation: brillar-luz 2.4s ease-in-out infinite; }
  .luz--2 { animation-delay: -.5s; }
  .luz--3 { animation-delay: -1s; }
  .luz--4 { animation-delay: -1.5s; }
  .luz--5 { animation-delay: -2s; }
}
@keyframes brillar-luz { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ── Halloween ── La luna se pone ámbar y el cielo toma violeta. */
.tema--halloween.acto--noche {
  background: linear-gradient(180deg, #120c22 0%, #241436 46%, #3a1f40 76%, var(--noche-3) 100%);
}
.tema--halloween .luna {
  background: radial-gradient(circle at 40% 38%, #ffdaa4, #f5a742 58%, #cf762a);
  box-shadow: 0 0 90px 32px rgba(255, 168, 78, .24);
}
.tema--halloween .horizonte {
  --h-cerro1: #3b2a4d; --h-cerro2: #2a1c38; --h-cerro3: #180f24;
  --h-iglesia: #120a1c; --h-ventana: #ff9d3c; --h-mar: #160e22;
  --h-escalera: rgba(255, 180, 110, .45);
}
.murcielagos { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.murcielago { position: absolute; left: 0; width: clamp(26px, 2.8vw, 44px); }
.murcielago svg { width: 100%; height: auto; fill: #05030a; }
.murcielago--1 { top: 17%; }
.murcielago--2 { top: 30%; width: clamp(20px, 2vw, 32px); }
.murcielago--3 { top: 11%; width: clamp(32px, 3.4vw, 54px); }
@media (prefers-reduced-motion: no-preference) {
  .murcielago { animation: cruzar 20s linear infinite; }
  .murcielago--2 { animation-duration: 28s; animation-delay: -10s; }
  .murcielago--3 { animation-duration: 24s; animation-delay: -17s; }
}
@keyframes cruzar {
  from { transform: translateX(-14vw) translateY(0); }
  50%  { transform: translateX(50vw) translateY(-24px); }
  to   { transform: translateX(114vw) translateY(0); }
}

@media (max-width: 900px) {
  /* En pantalla angosta el cielo es poco: solo se deja lo que se lee de un vistazo. */
  .gaviotas { height: 120px; }
  .viento__capa--2 { display: none; }
  .murcielago--2 { display: none; }
  .guirnalda, .luces { height: 74px; }
  .sol { top: 74px; right: 22px; }
}

/* ═══════════ Secciones editables: orden libre y fondo propio ═══════════ */
/* El panel puede reordenar los actos y ocultarlos (lib/secciones.php). Cuando el de arriba
   no es el vecino de fábrica del de abajo, lleva hacia--<siguiente> y funde sus últimos
   píxeles con el color con que empieza el que viene. Hacia el muelle no hay fundido: la
   madera corta en seco, igual que corta hoy la ribera. */
.hacia--noche  { --hacia: var(--noche-0); }
.hacia--bosque { --hacia: var(--noche-3); }
.hacia--mar    { --hacia: var(--mar-alto); }
.hacia--ribera { --hacia: var(--piedras); }
.acto.hacia--noche::after, .acto.hacia--bosque::after, .acto.hacia--mar::after, .acto.hacia--ribera::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  height: clamp(60px, 7vw, 110px);
  background: linear-gradient(180deg, transparent, var(--hacia));
}
/* Si otro acto queda primero, pasa bajo el encabezado como lo hacía la noche. */
.acto--entrada:not(.acto--noche) > .contenedor { padding-top: calc(var(--alto-encabezado) + clamp(56px, 6vw, 86px)); }
/* Y si la noche ya no es la primera, no necesita reservar el alto del encabezado. */
.acto--noche:not(.acto--entrada) .portada { min-height: 0; padding-top: clamp(56px, 7.8vw, 112px); }

/* Fondo de sección: una imagen o un video debajo de la escenografía, con velo encima. Misma
   mecánica que el fondo de fotos de la portada: el medio es decoración y el texto no depende
   de él. Con fondo propio, las capas dibujadas opacas (cerros, lomas, olas, playa, tablones)
   se apartan; lo liviano (estrellas, lluvia, gaviotas, botes) se queda encima. */
.fondo-seccion { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fondo-seccion__medio {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.fondo-seccion__velo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7, 15, 31, .9) 0%, rgba(7, 15, 31, .55) 55%, rgba(7, 15, 31, .4) 100%),
    linear-gradient(180deg, rgba(7, 15, 31, .55) 0%, rgba(7, 15, 31, .5) 60%, rgba(7, 15, 31, .8) 100%);
}
.acto--muelle .fondo-seccion__velo {
  background: linear-gradient(180deg, rgba(28, 15, 8, .6), rgba(28, 15, 8, .8));
}
.acto--con-fondo > .horizonte, .acto--con-fondo > .arboleda, .acto--con-fondo > .campo,
.acto--con-fondo > .olas, .acto--con-fondo > .ribera, .acto--con-fondo > .circuito { display: none; }
.acto--con-fondo.acto--noche .estrellas { inset: 0 0 40% 0; opacity: .8; }
/* Sin la loma, el fundido bosque -> mar sobre una foto se ve como una franja: fuera. */
.acto--con-fondo.acto--bosque:not([class*="hacia--"])::after { background: linear-gradient(180deg, transparent, var(--mar-alto)); opacity: .85; }
/* Con fondo propio la ribera pierde las piedras de textura: la foto ya es la textura. */
.acto--con-fondo.piedras { background-image: none; }

/* ---------- Notebook estrecho ---------- */
@media (max-width: 1200px) and (min-width: 901px) {
  .menu { gap: 16px; }
  .menu a { font-size: 15px; white-space: nowrap; }
  .grilla-4-8, .prensa__grilla, .cabecera__grilla, .contacto__grilla, .cierre__interior { gap: 36px; }
  .ribera__grilla { grid-template-columns: 360px minmax(0, 1fr); gap: 44px; }
  .oficios, .grilla-3 { gap: 18px; }
  .galeria { height: 200px; gap: 12px; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 900px) {
  :root { --seccion-y: 56px; --alto-encabezado: 64px; }
  body { font-size: 16px; }
  h3 { font-size: 19px; }
  .grilla-4-8, .prensa__grilla, .cabecera__grilla, .contacto__grilla, .cierre__interior,
  .ribera__grilla, .oficios, .grilla-3, .citas, .que-hago__lista, .catalogo__lista,
  .entradas--completo, .diplomados, .modulos, .formulario__fila { grid-template-columns: 1fr; gap: 24px; }
  .columna-fija { position: static; }
  .acciones { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 26px; }
  .acciones .boton { width: 100%; }
  .acciones .enlace-flecha { justify-content: center; }

  .menu-boton { display: flex; position: relative; z-index: 70; }
  .menu {
    position: fixed; inset: 0; z-index: 60;
    flex-direction: column; justify-content: center; gap: 0;
    padding: 96px var(--margen-d) 40px var(--margen-i);
    background: rgba(7, 15, 31, .97);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    opacity: 0; visibility: hidden;
    transition: opacity 320ms var(--salida), visibility 0s 320ms;
  }
  .menu--abierto { opacity: 1; visibility: visible; transition: opacity 320ms var(--salida), visibility 0s; }
  .menu a:not(.boton) { min-height: 0; padding: 14px 0; border-bottom: 1px solid var(--raya-clara); font-family: var(--f-titulo); font-weight: 400; font-size: clamp(30px, 8vw, 42px); line-height: 1.12; opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--salida), transform 520ms var(--salida); }
  .menu a:not(.boton)::after { display: none; }
  .menu a[aria-current="page"]:not(.boton) { color: var(--salmon); }
  .menu .boton { margin-top: 26px; width: 100%; opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--salida), transform 520ms var(--salida); }
  .menu--abierto a { opacity: 1; transform: none; }
  .menu--abierto a:nth-child(1) { transition-delay: 60ms; }
  .menu--abierto a:nth-child(2) { transition-delay: 120ms; }
  .menu--abierto a:nth-child(3) { transition-delay: 180ms; }
  .menu--abierto a:nth-child(4) { transition-delay: 240ms; }
  .menu--abierto a:nth-child(5) { transition-delay: 300ms; }
  .menu--abierto a:nth-child(6) { transition-delay: 360ms; }
  .menu--abierto a:nth-child(7) { transition-delay: 420ms; }
  .menu-abierto .encabezado--solido { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-abierto, .menu-abierto body { overflow: hidden; }

  .portada { min-height: min(96svh, 760px); padding-bottom: clamp(150px, 42vw, 240px); }
  .portada__mano { position: static; display: block; margin-bottom: 8px; transform: rotate(-2deg); }
  /* Con los minimos de clamp, slice recortaba al centro y se perdian la iglesia, el bote
     varado y las ovejas. A ancho de telefono las alturas siguen la proporcion del viewBox. */
  .acto--noche .horizonte { height: 26vw; }
  .arboleda { height: 19.4vw; top: 10.4vw; }
  .campo { height: 39vw; top: 27.8vw; }
  .ribera { height: 21vw; }
  .circuito { height: 38vw; }
  .luna { top: 64px; right: 20px; }
  .constelacion { top: 96px; right: 14px; width: 128px; opacity: .85; }
  .estrellas { inset: 0 0 34% 0; }
  .botes { top: 8px; right: -90px; width: 420px; }
  .oficios { margin-top: clamp(120px, 42vw, 200px); }
  .oficio__tapa { height: 96px; }
  .oficio__sello { width: 68px; height: 68px; padding: 13px; }
  .mar__grilla { margin-top: 48px; }
  .galeria { grid-template-columns: 1fr 1fr; height: auto; }
  .galeria > * { aspect-ratio: 4 / 3; }
  .galeria__cabecera { margin-top: 44px; }

  .ribera__grilla { padding-top: clamp(150px, 46vw, 240px); }
  .polaroid { position: relative; top: auto; right: auto; margin: 0 0 -28px auto; width: 168px; }
  .polaroid img { height: 136px; }
  .indice { padding: 24px 22px 18px; }
  .indice h2 { font-size: 32px; }
  .indice dl { grid-template-columns: 56px minmax(0, 1fr); font-size: 15px; }
  .blog-ribera { padding: 26px 22px 14px; }
  .entradas a { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  .entrada__miniatura { height: 72px; }
  .entradas h3 { font-size: 19px; }
  .entradas p { display: none; }
  .entradas--completo a { grid-template-columns: none; }
  .entradas--completo h3 { font-size: 20px; }

  .hechos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hechos > div { padding: 16px; }
  .hechos p { font-size: 15px; }
  .estudios li, .credenciales li, .experiencia > li, .competencias > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .credenciales { grid-template-columns: 1fr; gap: 0; }
  .cita { font-size: 20px; padding: 18px 20px; }
  .articulo__cuerpo { font-size: 17px; }
  .articulo__cuerpo h2 { font-size: 26px; margin-top: 34px; }
  .articulo__cuerpo blockquote { font-size: 20px; padding-left: 38px; }
  .articulo__cuerpo blockquote::before { font-size: 42px; }
  .cierre__barra { flex-direction: column; align-items: flex-start; gap: 10px; }
  .minga { padding: 24px 20px; }
  .ficha { grid-template-columns: 1fr; gap: 14px; }
}