/* ═══════════════════════════════════════════════════════════
   CÍRCULO CONSCIENTE — «Cuaderno de práctica»
   La página está hecha de papel, no de pantalla. Las divisiones
   son pinceladas, no bordes. Nada está perfectamente alineado.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Los nombres se conservan para no tocar 600 líneas, pero la carga
     está invertida: --papel es ahora el fondo oscuro y --tinta el trazo
     claro que se escribe encima. Tinta china sobre seda, no sobre papel. */
  --papel:#12100C;         /* negro cálido, con tierra */
  --papel-claro:#1A1712;   /* superficie levantada */
  --papel-tostado:#191510;
  --papel-hondo:#241E16;

  --tinta:#EFE9DB;         /* el trazo: marfil */
  --tinta-media:#C6BDA9;
  --tinta-suave:#9E947F;

  --bosque:#7E9377;
  --te:#93AC86;
  --bronce:#C79A57;        /* decorativo: trazos, capitular, firma */
  --bronce-texto:#CFA76A;  /* texto pequeño: 7.4:1 sobre el fondo más claro */
  --bronce-claro:#E0BE84;

  --linea:rgba(239,233,219,.17);
  --linea-fina:rgba(239,233,219,.10);

  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --nota:"Karla","Segoe UI",system-ui,sans-serif;

  /* escala editorial */
  --t-nota:.78rem;
  --t-peq:.875rem;
  --t-base:1.0625rem;
  --t-lectura:clamp(1.075rem, 1.02rem + .25vw, 1.2rem);
  --t-med:clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
  --t-grande:clamp(1.8rem, 1.4rem + 1.7vw, 2.9rem);
  --t-titular:clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
  --t-voz:clamp(1.9rem, 1.25rem + 2.7vw, 3.6rem);

  --e:cubic-bezier(.4,0,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
  --ancho:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth}

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--serif); font-size:var(--t-lectura); line-height:1.68;
  font-optical-sizing:auto; overflow-x:clip;
  text-rendering:optimizeLegibility;
}

/* fibra de papel: dos capas muy tenues, una fina y otra ancha */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.30'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
body > *{position:relative; z-index:2}

img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.1; letter-spacing:-.014em; text-wrap:balance}
::selection{background:rgba(138,102,49,.28)}
:focus-visible{outline:2px solid var(--bronce); outline-offset:3px}

.hoja{max-width:var(--ancho); margin-inline:auto; padding-inline:clamp(22px,5.5vw,64px)}
.aire{padding-block:clamp(80px,11vw,150px)}
.aire-corto{padding-block:clamp(56px,7vw,96px)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ─── voz editorial ─── */
.folio{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinta-suave); font-weight:500;
  display:flex; align-items:baseline; gap:11px;
}
.folio b{color:var(--bronce-texto); font-weight:500; font-variant-numeric:tabular-nums}
.titular{font-size:var(--t-grande); max-width:17ch}
.lectura{max-width:62ch; color:var(--tinta-media)}
.lectura p + p{margin-top:.95em}
.lectura em{font-style:italic; color:var(--tinta)}
.lectura strong{font-weight:600; color:var(--tinta)}
.suelta{
  font-size:var(--t-voz); line-height:1.16; letter-spacing:-.02em;
  max-width:20ch; text-wrap:balance;
}
.suelta i{font-style:italic; color:var(--bronce)}

/* nota al margen: la voz de quien anota el cuaderno */
.margen{
  font-family:var(--nota); font-size:var(--t-nota); line-height:1.55;
  color:var(--tinta-suave); max-width:31ch; padding-left:15px;
  border-left:1px solid var(--linea);
}
.margen b{display:block; color:var(--tinta-media); font-weight:600; margin-bottom:3px}

/* palabra subrayada a mano */
.marcada{position:relative; white-space:nowrap}
.marcada svg{position:absolute; left:-2%; bottom:-.3em; width:104%; height:.4em; overflow:visible}
.marcada svg path{fill:var(--bronce); opacity:.5}

/* ─── pinceladas divisorias ─── */
.pincel{display:block; width:100%; height:16px; overflow:visible; color:var(--tinta)}
.pincel path{fill:currentColor; opacity:.42}
.pincel--fino path{opacity:.26}

/* ─── enlaces y llamadas ─── */
.llamada{
  display:inline-flex; align-items:baseline; gap:10px; font-size:var(--t-base);
  color:var(--tinta); position:relative; padding-bottom:5px;
}
.llamada::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--tinta); opacity:.42; transform-origin:left;
  transition:transform .5s var(--out), opacity .3s var(--e);
}
.llamada:hover::after{transform:scaleX(1.04); opacity:.85}
.llamada .fl{font-size:.9em; transition:transform .4s var(--out)}
.llamada:hover .fl{transform:translateX(5px)}
.llamada--fuerte{
  font-family:var(--nota); font-weight:600; font-size:var(--t-peq); letter-spacing:.04em;
  background:var(--tinta); color:var(--papel-claro); padding:15px 28px;
  /* estampado, no rectángulo: el borde se come como un tampón de tinta */
  clip-path:polygon(0.00% -0.29%,5.56% 0.41%,11.11% 0.56%,16.67% 0.66%,22.22% 0.55%,27.78% 0.35%,33.33% 0.01%,38.89% 0.05%,44.44% -0.02%,50.00% -0.58%,55.56% 0.18%,61.11% 0.11%,66.67% 0.29%,72.22% 0.14%,77.78% 0.43%,83.33% 0.62%,88.89% 0.44%,94.44% -0.19%,99.47% 0.00%,99.42% 16.67%,100.15% 33.33%,99.94% 50.00%,99.83% 66.67%,100.03% 83.33%,100.00% 100.29%,94.44% 99.47%,88.89% 99.95%,83.33% 99.72%,77.78% 99.88%,72.22% 100.26%,66.67% 99.81%,61.11% 99.88%,55.56% 100.36%,50.00% 100.20%,44.44% 100.17%,38.89% 100.29%,33.33% 100.18%,27.78% 99.54%,22.22% 99.41%,16.67% 99.50%,11.11% 99.99%,5.56% 99.63%,0.04% 100.00%,0.52% 83.33%,-0.11% 66.67%,0.07% 50.00%,-0.19% 33.33%,0.30% 16.67%);
  transition:background-color .3s var(--e), transform .3s var(--out), clip-path .35s var(--e);
}
/* al pulsar, el sello se vuelve a estampar y el borde cae distinto */
.llamada--fuerte:active{clip-path:polygon(0.00% -0.14%,5.56% -0.06%,11.11% -0.14%,16.67% -0.18%,22.22% -0.67%,27.78% 0.06%,33.33% -0.25%,38.89% -0.59%,44.44% -0.44%,50.00% 0.42%,55.56% 0.15%,61.11% 0.79%,66.67% 0.87%,72.22% 0.54%,77.78% -0.12%,83.33% 0.42%,88.89% 0.12%,94.44% -0.14%,99.60% 0.00%,100.35% 16.67%,100.75% 33.33%,99.67% 50.00%,99.79% 66.67%,99.73% 83.33%,100.00% 99.98%,94.44% 99.60%,88.89% 100.24%,83.33% 100.14%,77.78% 100.66%,72.22% 99.80%,66.67% 100.80%,61.11% 100.15%,55.56% 100.54%,50.00% 99.91%,44.44% 99.69%,38.89% 99.96%,33.33% 99.41%,27.78% 99.90%,22.22% 99.92%,16.67% 100.26%,11.11% 100.57%,5.56% 100.07%,0.53% 100.00%,-0.50% 83.33%,-0.73% 66.67%,0.03% 50.00%,0.51% 33.33%,-0.27% 16.67%)}
.llamada--fuerte::after{display:none}
.llamada--fuerte:hover{background:var(--bronce-claro); transform:translateY(-1px)}
/* con el selector de idioma la cabecera va justa: el botón no se parte */
.llamada--fuerte{white-space:nowrap}

/* ─── fotografía: copias pegadas en el cuaderno ─── */
.copia{position:relative; margin:0}
.copia img{
  width:100%; height:auto; display:block;
  box-shadow:0 0 0 1px rgba(239,233,219,.09), 0 26px 50px -34px #000;
}
.copia figcaption{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  margin-top:11px; display:flex; gap:8px; align-items:baseline; line-height:1.45;
}
.copia figcaption i{font-style:normal; color:var(--bronce-texto)}
.girada-i{transform:rotate(-.7deg)}
.girada-d{transform:rotate(.55deg)}

/* ═══════════ CABECERA ═══════════ */
.cabecera{
  position:sticky; top:0; z-index:40; background:rgba(18,16,12,.88);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid transparent; transition:border-color .4s var(--e), padding .4s var(--e);
  padding-block:16px;
}
.cabecera.posada{border-bottom-color:var(--linea-fina); padding-block:11px}
.cabecera-in{display:flex; align-items:center; gap:clamp(12px,2vw,26px)}
.rotulo{display:flex; align-items:center; gap:12px; margin-right:auto}
.rotulo .sello{width:34px; height:34px; flex:none; color:var(--tinta)}
.rotulo b{
  font-size:1.12rem; font-weight:500; letter-spacing:.005em; display:block; line-height:1.1;
}
.rotulo small{
  display:block; font-family:var(--nota); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinta-suave); margin-top:3px;
}
.cabecera nav ul{display:flex; gap:clamp(12px,1.5vw,20px); list-style:none; margin:0; padding:0}
.cabecera nav a{
  font-family:var(--nota); font-size:var(--t-peq); color:var(--tinta-media);
  position:relative; padding-block:4px; transition:color .25s var(--e);
}
.cabecera nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bronce);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--out);
}
.cabecera nav a:hover{color:var(--tinta)}
.cabecera nav a:hover::after{transform:scaleX(1); transform-origin:left}
@media (max-width:1180px){ .cabecera nav{display:none} }

/* ═══════════ PORTADA ═══════════ */
.portada{padding-top:clamp(48px,7vw,90px)}
.portada-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(30px,5vw,70px); align-items:end;
}
.portada h1{
  font-size:var(--t-titular); line-height:1.04; letter-spacing:-.028em;
  max-width:14ch; margin-top:26px;
}
.portada h1 i{font-style:italic}
.portada .entrada{
  margin-top:clamp(24px,3vw,36px); max-width:44ch; color:var(--tinta-media);
  font-size:var(--t-lectura);
}
.portada-acc{display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,30px); align-items:center; margin-top:clamp(28px,3.5vw,40px)}
.enso-portada{width:min(100%,320px); justify-self:end; color:var(--tinta); opacity:.88}
.enso-portada svg{width:100%; height:auto; display:block}
.datos-portada{
  margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(3,auto);
  gap:clamp(20px,4vw,54px); justify-content:start; font-family:var(--nota);
}
.datos-portada div{font-size:var(--t-nota); color:var(--tinta-suave); line-height:1.5}
.datos-portada b{
  display:block; font-family:var(--serif); font-size:var(--t-base); font-weight:500;
  color:var(--tinta); margin-bottom:2px; letter-spacing:0;
}
@media (max-width:860px){
  .portada-grid{grid-template-columns:1fr}
  .enso-portada{width:150px; justify-self:start; margin-top:8px}
  .datos-portada{grid-template-columns:1fr; gap:14px}
}

/* horizonte: la foto ancha al pie de la portada */
.horizonte{margin-top:clamp(46px,6vw,80px); position:relative; overflow:hidden}
.horizonte img{width:100%; height:clamp(200px,30vw,360px); object-fit:cover; object-position:50% 62%}
.horizonte figcaption{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;
}
.horizonte figcaption i{font-style:normal; color:var(--bronce-texto)}

/* ═══════════ RESPIRACIÓN (pausa) ═══════════ */
.pausa{text-align:center; padding-block:clamp(76px,10vw,140px)}
.pausa .palabras{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,4vw,52px);
  font-size:var(--t-voz); line-height:1.2;
}
.pausa .palabras span{position:relative}
.pausa .palabras span:nth-child(2){font-style:italic; color:var(--bronce)}
.pausa .pie{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  margin-top:clamp(24px,3vw,36px); letter-spacing:.02em;
}

/* ═══════════ BANDAS DE PAPEL ═══════════ */
.tostado{background:var(--papel-tostado)}
.hondo{background:var(--papel-hondo)}
.claro{background:var(--papel-claro)}

/* ═══════════ QUÉ ES (editorial a dos columnas) ═══════════ */
.editorial{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:clamp(28px,5vw,72px)}
.editorial-izq{display:grid; gap:22px; align-content:start; position:sticky; top:96px}
.entradilla{
  font-size:var(--t-med); line-height:1.42; color:var(--tinta); max-width:30ch;
  margin-bottom:.6em;
}
.entradilla::first-letter{
  float:left; font-size:3.1em; line-height:.82; padding:.06em .1em 0 0;
  color:var(--bronce); font-weight:500;
}
@media (max-width:900px){
  .editorial{grid-template-columns:1fr}
  .editorial-izq{position:static}
}

/* ═══════════ GAUDENCIO ═══════════ */
.maestro{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(30px,5vw,76px); align-items:center}
.maestro-foto{position:relative}
.maestro-firma{
  font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--bronce);
  margin-top:20px; transform:rotate(-1.6deg); transform-origin:left;
}
.maestro h2{font-size:var(--t-grande); max-width:16ch}
.dicho{
  margin-top:clamp(30px,4vw,44px); font-size:var(--t-med); line-height:1.45;
  font-style:italic; color:var(--tinta); max-width:34ch; position:relative; padding-left:24px;
}
.dicho::before{
  content:""; position:absolute; left:0; top:.35em; bottom:.25em; width:2px;
  background:var(--bronce); opacity:.55;
}
.dicho cite{
  display:block; font-style:normal; font-family:var(--nota); font-size:var(--t-nota);
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); margin-top:14px;
}
@media (max-width:880px){ .maestro{grid-template-columns:1fr} }

/* ═══════════ LAS PRÁCTICAS (índice, no tarjetas) ═══════════ */
.practicas{display:grid; gap:0}
.practica{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr) minmax(0,.4fr);
  gap:clamp(20px,4vw,56px); padding-block:clamp(30px,4vw,46px);
  border-top:1px solid var(--linea-fina); align-items:start;
  transition:background-color .5s var(--e);
}
.practica:last-child{border-bottom:1px solid var(--linea-fina)}
.practica:hover{background:rgba(239,233,219,.035)}
.practica-nom{display:block}
.practica h3{font-size:var(--t-med); letter-spacing:-.012em}
.practica .cn{
  display:block; font-family:var(--serif); font-size:.9rem; color:var(--te);
  letter-spacing:.1em; margin-top:7px;
}
.practica .cuerpo{color:var(--tinta-media); max-width:52ch; font-size:var(--t-base)}
.practica .detalle{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave); line-height:1.6;
}
.practica .detalle b{display:block; color:var(--tinta-media); font-weight:600; margin-bottom:2px}
.practica .detalle + .detalle{margin-top:12px}
@media (max-width:900px){
  .practica{grid-template-columns:1fr; gap:14px; padding-block:30px}
}

/* ═══════════ EL CÍRCULO / COMUNIDAD ═══════════ */
.mosaico{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2.6vw,30px);
  align-items:start; margin-top:clamp(36px,5vw,60px);
}
.mosaico .a{grid-column:1 / span 7}
.mosaico .b{grid-column:9 / span 4; margin-top:clamp(30px,6vw,90px)}
.mosaico .c{grid-column:2 / span 4; margin-top:clamp(8px,2vw,24px)}
.mosaico .d{grid-column:7 / span 6}
@media (max-width:820px){
  .mosaico{grid-template-columns:1fr; gap:26px}
  .mosaico .a,.mosaico .b,.mosaico .c,.mosaico .d{grid-column:1; margin-top:0}
}
.pueblos{
  font-size:clamp(1.05rem,.95rem + .7vw,1.55rem); line-height:1.75; color:var(--tinta-media);
  max-width:56ch; margin-top:clamp(28px,3.5vw,40px);
}
.pueblos span{white-space:nowrap}
.pueblos i{font-style:normal; color:var(--bronce); opacity:.65; padding-inline:9px}

/* ═══════════ CONTINUAR (escuela online) ═══════════ */
.repertorio{margin-top:clamp(34px,4.5vw,52px)}
.rep-fila{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(18px,3vw,40px);
  padding-block:19px; border-bottom:1px solid var(--linea-fina); align-items:baseline;
}
.rep-fila:first-child{border-top:1px solid var(--linea-fina)}
.rep-nom{font-size:var(--t-base)}
.rep-nom span{
  display:block; font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  margin-top:3px;
}
.rep-dato{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.rep-dato em{font-style:normal; color:var(--bronce-texto)}
.dos-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:880px){ .dos-col{grid-template-columns:1fr} }

/* ═══════════ PERTENECER (membresía como carta) ═══════════ */
.carta{
  background:var(--papel-claro); padding:clamp(30px,5vw,64px);
  box-shadow:0 0 0 1px rgba(239,233,219,.10), 0 34px 70px -46px #000;
  max-width:660px; position:relative; transform:rotate(-.35deg);
}
.carta h3{font-size:var(--t-grande); max-width:15ch}
.carta .lectura{margin-top:20px}
.carta ul{list-style:none; margin:clamp(24px,3vw,34px) 0 0; padding:0; display:grid; gap:15px}
.carta li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  color:var(--tinta-media); font-size:var(--t-base);
}
.carta li::before{
  content:""; width:6px; height:6px; border-radius:50% 50% 50% 20%; background:var(--bronce);
  opacity:.7; transform:translateY(-2px) rotate(12deg);
}
.carta .cierre-carta{
  margin-top:clamp(26px,3vw,36px); padding-top:22px; border-top:1px solid var(--linea-fina);
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
}
.carta .apunte{font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave); max-width:32ch}

/* ═══════════ CALENDARIO ═══════════ */
.calendario{margin-top:clamp(30px,4vw,48px)}
.cita{
  display:grid; grid-template-columns:minmax(0,.3fr) minmax(0,1fr) minmax(0,.26fr);
  gap:clamp(18px,3.4vw,44px); padding-block:26px; border-top:1px solid var(--linea-fina);
  align-items:baseline;
}
.cita:last-child{border-bottom:1px solid var(--linea-fina)}
.cita .cuando{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.14em;
  text-transform:uppercase; color:var(--bronce-texto); font-weight:600;
}
.cita .cuando span{
  display:block; letter-spacing:.02em; text-transform:none; color:var(--tinta-suave);
  font-weight:400; margin-top:4px;
}
.cita h4{font-size:var(--t-base); font-weight:500}
.cita p{color:var(--tinta-suave); font-size:var(--t-peq); margin-top:5px; max-width:48ch}
.cita .dur{font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave); text-align:right}
@media (max-width:820px){
  .cita{grid-template-columns:1fr; gap:8px}
  .cita .dur{text-align:left}
}

/* ═══════════ CIERRE ═══════════ */
.cierre{text-align:center}
.cierre .enso-cierre{width:min(230px,52vw); margin:0 auto clamp(26px,3.4vw,40px); color:var(--tinta); opacity:.8}
.cierre .enso-cierre svg{width:100%; height:auto}
.cierre h2{font-size:var(--t-grande); max-width:17ch; margin-inline:auto}
.cierre .lectura{margin:clamp(20px,2.6vw,30px) auto 0; text-align:center}
.cierre-acc{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,3vw,28px); align-items:center; margin-top:clamp(30px,4vw,44px)}

/* ═══════════ PIE ═══════════ */
.pie-pagina{border-top:1px solid var(--linea-fina); padding-block:clamp(46px,6vw,70px) 30px}
.pie-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:clamp(24px,4vw,50px)}
.pie-pagina h5{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:600; margin:0 0 14px;
}
.pie-pagina ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:var(--t-peq)}
.pie-pagina a{color:var(--tinta-media); transition:color .25s var(--e)}
.pie-pagina a:hover{color:var(--bronce-texto)}
.pie-bajo{
  margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid var(--linea-fina);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
}
@media (max-width:800px){ .pie-grid{grid-template-columns:1fr 1fr} }

/* nota honesta sobre la maqueta */
.aviso{
  margin-top:clamp(34px,4vw,50px); padding:22px 26px; background:rgba(239,233,219,.045);
  font-family:var(--nota); font-size:var(--t-nota); line-height:1.65; color:var(--tinta-media);
  max-width:78ch; border-left:2px solid var(--bronce);
}
.aviso b{display:block; letter-spacing:.14em; text-transform:uppercase; color:var(--bronce-texto); margin-bottom:6px; font-size:11px}

/* ═══════════ APARICIONES ═══════════ */
@media (prefers-reduced-motion:no-preference){
  .ap{opacity:0; transform:translateY(15px); transition:opacity 1s var(--out), transform 1s var(--out)}
  .ap.vis{opacity:1; transform:none}
  /* la tinta se seca: el trazo aparece de un lado al otro */
  .tinta-ap{clip-path:inset(0 100% 0 0); transition:clip-path 1.5s var(--out)}
  .tinta-ap.vis{clip-path:inset(0 0 0 0)}
  .foto-ap{opacity:0; transform:scale(1.012); transition:opacity 1.25s var(--out), transform 1.4s var(--out)}
  .foto-ap.vis{opacity:1; transform:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .ap,.foto-ap{opacity:1 !important; transform:none !important}
  .tinta-ap{clip-path:none !important}
}

section[id]{scroll-margin-top:92px}
@media (max-width:760px){
  .cabecera{padding-block:11px}
  .rotulo small{display:none}
  .rotulo b{font-size:1rem; white-space:nowrap}
  .llamada--fuerte{padding:12px 19px; white-space:nowrap}
  section[id]{scroll-margin-top:70px}
}

/* ═══════════ PUENTE HACIA LA ESCUELA ONLINE ═══════════ */
.puente{position:relative}
.puente-foto{
  margin:clamp(30px,4.5vw,60px) auto 0; overflow:hidden;
  max-width:min(540px,80vw); box-shadow:0 0 0 1px rgba(239,233,219,.09), 0 30px 56px -36px #000;
}
.puente-foto img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover; will-change:transform;
}
.puente-texto{padding-block:clamp(46px,7vw,90px); text-align:center}
.puente-texto .suelta{margin-inline:auto; max-width:23ch}
.puente-texto .lectura{margin:22px auto 0; text-align:center; max-width:54ch}

/* reveal palabra a palabra */
.frase .pal{display:inline-block; overflow:hidden; vertical-align:bottom}
.frase .pal > span{display:inline-block; transform:translateY(105%); transition:transform .95s var(--out)}
.frase.vis .pal > span{transform:translateY(0)}

/* ═══════════ CAMINOS DE PRÁCTICA ═══════════ */
.vias{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(18px,2.6vw,34px) clamp(14px,2vw,26px);
  margin-top:clamp(28px,3.5vw,44px); align-items:start;
}
.via{display:block; color:inherit}
/* tres arriba en vertical, dos abajo en horizontal: rompe la fila mecánica */
.via:nth-child(1){grid-column:1 / span 2}
.via:nth-child(2){grid-column:3 / span 2; margin-top:clamp(22px,3.4vw,54px)}
.via:nth-child(3){grid-column:5 / span 2}
.via:nth-child(4){grid-column:1 / span 3; margin-top:clamp(18px,2.6vw,36px)}
.via:nth-child(5){grid-column:4 / span 3; margin-top:clamp(42px,5.6vw,82px)}
.via figure{margin:0; overflow:hidden; background:var(--papel-hondo)}
.via img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; transition:transform 1.2s var(--out)}
.via:nth-child(4) img,.via:nth-child(5) img{aspect-ratio:4/3}
.via:hover img{transform:scale(1.035)}
.via h3{font-size:var(--t-med); margin-top:15px}
.via .tres{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  margin-top:5px; letter-spacing:.015em;
}
.via .entrar{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:13px; position:relative;
  font-family:var(--nota); font-size:var(--t-nota); color:var(--bronce-texto); padding-bottom:3px;
}
.via .entrar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  opacity:.5; transform:scaleX(0); transform-origin:left; transition:transform .55s var(--out);
}
.via:hover .entrar::after{transform:scaleX(1)}
.via .entrar i{font-style:normal; transition:transform .45s var(--out)}
.via:hover .entrar i{transform:translateX(4px)}
@media (max-width:1000px){
  .vias{grid-template-columns:repeat(4,1fr)}
  .via:nth-child(1){grid-column:1 / span 2; margin-top:0}
  .via:nth-child(2){grid-column:3 / span 2; margin-top:clamp(20px,4vw,40px)}
  .via:nth-child(3){grid-column:1 / span 2; margin-top:0}
  .via:nth-child(4){grid-column:3 / span 2; margin-top:clamp(20px,4vw,40px)}
  .via:nth-child(5){grid-column:1 / span 4; margin-top:clamp(14px,3vw,26px)}
  .via:nth-child(3) img{aspect-ratio:4/3}
}
@media (max-width:600px){
  .vias{grid-template-columns:1fr; gap:clamp(26px,6vw,34px)}
  .via:nth-child(n){grid-column:1; margin-top:0}
  .via img,.via:nth-child(4) img,.via:nth-child(5) img{aspect-ratio:4/3}
}

/* ═══════════ PROGRAMAS GUIADOS ═══════════ */
.programas{margin-top:clamp(24px,3.2vw,38px)}
.programa{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr) auto;
  gap:clamp(16px,3vw,46px); padding-block:25px; border-top:1px solid var(--linea-fina);
  align-items:baseline; transition:background-color .5s var(--e);
}
.programa:last-child{border-bottom:1px solid var(--linea-fina)}
.programa h4{font-size:var(--t-med); font-weight:400}
.programa .sobre{color:var(--tinta-media); font-size:var(--t-base)}
.programa .ficha{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  text-align:right; line-height:1.6;
}
.programa .ficha b{display:block; color:var(--tinta-media); font-weight:600}
@media (max-width:820px){
  .programa{grid-template-columns:1fr; gap:8px; padding-block:22px}
  .programa .ficha{text-align:left}
}

/* ═══════════ TU PRÁCTICA ═══════════ */
.privada{
  margin-top:clamp(42px,5.5vw,74px); background:var(--papel-claro);
  padding:clamp(26px,4.2vw,52px); transform:rotate(.28deg);
  box-shadow:0 0 0 1px rgba(239,233,219,.10), 0 34px 66px -48px #000;
}
.privada-saludo{font-size:var(--t-med); max-width:34ch}
.privada-saludo span{color:var(--tinta-suave)}
.privada-bloques{display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(22px,3vw,34px)}
.pbloque{padding:clamp(18px,2.4vw,28px) clamp(16px,2.2vw,30px); border-left:1px solid var(--linea-fina)}
.pbloque:first-child{padding-left:0; border-left:0}
.pbloque:last-child{padding-right:0}
.pbloque .que{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.pbloque .cual{font-size:var(--t-base); margin-top:13px}
.pbloque .cual span{display:block; color:var(--tinta-suave); font-size:var(--t-peq); margin-top:4px}
.pbloque .acc{margin-top:15px; font-size:var(--t-peq)}
@media (max-width:820px){
  .privada-bloques{grid-template-columns:1fr}
  .pbloque{padding:20px 0; border-left:0; border-top:1px solid var(--linea-fina)}
  .pbloque:first-child{padding-top:0; border-top:0}
}

/* la frase se revela por palabras, sin el fundido general */
.frase.ap{opacity:1; transform:none}

/* ═══════════════════════════════════════════════════════════
   DETALLES DE OFICIO
   ═══════════════════════════════════════════════════════════ */

:root{ --bermellon:#C8483C; --han-cjk:"Noto Serif SC","Songti SC","SimSun",serif; }

/* los ideogramas ya no dependen de la fuente del sistema.
   .practica .cn gana en especificidad, así que hay que igualarla. */
.practica .cn, .via .cn, .sello-tinta text{ font-family:var(--han-cjk); }

/* ─── sello del maestro (印章) ─── */
.sello-tinta{
  width:var(--s,86px); height:var(--s,86px); flex:none; overflow:visible;
  color:var(--bermellon); transform:rotate(var(--giro,-3.5deg));
}
.sello-tinta path[data-marco]{fill:none; stroke:currentColor; stroke-width:7}
.sello-tinta text{fill:currentColor; font-weight:600}
/* la tinta entra al estampar */
@media (prefers-reduced-motion:no-preference){
  .sello-ap{opacity:0; transform:rotate(var(--giro,-3.5deg)) scale(1.14)}
  .sello-ap.vis{
    opacity:1; transform:rotate(var(--giro,-3.5deg)) scale(1);
    transition:opacity .34s var(--e) .15s, transform .42s cubic-bezier(.2,1.5,.4,1) .15s;
  }
}

.firma-bloque{display:flex; align-items:flex-end; gap:clamp(16px,2.4vw,28px); margin-top:22px}
.firma-bloque .maestro-firma{margin-top:0}

/* ─── ornamento: una gota de tinta ─── */
.gota{display:block; width:52px; height:15px; margin:0 auto; color:var(--tinta); opacity:.4}
.gota path{fill:currentColor}

/* ─── índice del cuaderno ─── */
.indice{border-top:1px solid var(--linea-fina); margin-top:clamp(40px,5vw,64px)}
.indice-fila{
  display:flex; align-items:baseline; gap:14px; padding-block:13px;
  border-bottom:1px solid var(--linea-fina); color:var(--tinta-media);
  transition:color .3s var(--e), padding-left .45s var(--out);
}
.indice-fila:hover{color:var(--tinta); padding-left:9px}
.indice-fila .num{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--bronce-texto);
  min-width:2.6em; font-variant-numeric:tabular-nums; letter-spacing:.08em;
}
.indice-fila .tit{font-size:var(--t-base); white-space:nowrap}
.indice-fila .guia{
  flex:1; border-bottom:1px dotted rgba(239,233,219,.30); transform:translateY(-.28em); min-width:18px;
}
.indice-fila .apostilla{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  text-align:right; white-space:nowrap;
}
@media (max-width:640px){
  .indice-fila{flex-wrap:wrap; gap:8px}
  .indice-fila .guia{display:none}
  .indice-fila .apostilla{width:100%; text-align:left; padding-left:calc(2.6em + 14px)}
}

/* ─── folio vivo: el subtítulo de la marca dice el capítulo ─── */
.rotulo small{transition:opacity .2s var(--e); white-space:nowrap}
.rotulo b{white-space:nowrap}
.cabecera nav a{white-space:nowrap}

/* ─── refinamientos tipográficos ─── */
/* cifras de estilo antiguo en el texto corrido: se integran con las minúsculas */
.lectura, .entradilla, .practica .cuerpo, .programa .sobre, .pueblos, .indice-fila .tit{
  font-variant-numeric:oldstyle-nums;
}
/* pero tabulares donde hay que comparar en columna */
.rep-dato, .programa .ficha, .cita .cuando span, .practica .detalle, .pbloque .cual{
  font-variant-numeric:tabular-nums;
}
.dicho{quotes:"«" "»"}
.dicho::after{content:""}
/* la primera línea de la entradilla, en versalitas: arranque de capítulo */
.entradilla::first-line{font-variant-caps:all-small-caps; letter-spacing:.04em}

/* el recorte del tampón se comería el anillo de foco: al enfocar con
   teclado se suelta el clip para que el borde vuelva a ser visible */
.llamada--fuerte:focus-visible{
  clip-path:none; outline:2px solid var(--bronce-texto); outline-offset:3px;
}

/* ═══════════ EL IDEOGRAMA COMO MARCA DE AGUA ═══════════ */
/* El detalle marcial: el carácter grande detrás de cada práctica,
   a la opacidad justa para que se sienta y no se lea como decoración. */
.practica{position:relative; overflow:hidden}
.practica > *:not(.marca-agua){position:relative; z-index:1}
.marca-agua{
  position:absolute; right:-.22em; top:50%; z-index:0;
  transform:translateY(-50%); pointer-events:none; white-space:nowrap;
  font-family:var(--han-cjk); font-weight:500; line-height:.8;
  font-size:clamp(4.6rem,10vw,9rem); color:var(--tinta); opacity:.05;
  transition:opacity .7s var(--e), transform 1s var(--out);
}
.practica:hover .marca-agua{opacity:.095; transform:translateY(-50%) translateX(-10px)}

/* y sobre la fotografía de cada camino */
.via figure{position:relative}
.via .han-foto{
  position:absolute; right:14px; bottom:10px; z-index:2; pointer-events:none;
  font-family:var(--han-cjk); font-weight:500; line-height:1;
  font-size:clamp(1.9rem,3.4vw,3rem); color:var(--tinta); opacity:.62;
  text-shadow:0 2px 20px rgba(0,0,0,.75);
  transition:opacity .5s var(--e), transform .7s var(--out);
}
.via:hover .han-foto{opacity:.9; transform:translateY(-4px)}
@media (max-width:600px){ .marca-agua{font-size:5.4rem; opacity:.06} }

/* ═══════════════════════════════════════════════════════════
   HERO — atmósfera: imagen, niebla y un carácter enorme detrás
   ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  isolation:isolate; overflow:hidden;
}
.hero-fondo{position:absolute; inset:0; z-index:-3; overflow:hidden}
.hero-fondo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 44%;
  transform:scale(1.06);
}
@media (prefers-reduced-motion:no-preference){
  .hero-fondo img{animation:respiraHero 40s var(--e) infinite alternate}
  @keyframes respiraHero{to{transform:scale(1.17) translate3d(-1.2%,-1.4%,0)}}
}
.hero-velo{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to bottom, rgba(18,16,12,.90) 0%, rgba(18,16,12,.46) 32%, rgba(18,16,12,.70) 66%, var(--papel) 100%),
    linear-gradient(96deg, rgba(18,16,12,.92) 2%, rgba(18,16,12,.30) 54%, rgba(18,16,12,.62) 100%);
}
/* niebla que deriva: tres masas lentísimas */
.niebla{position:absolute; inset:-28%; z-index:-1; pointer-events:none}
.niebla i{position:absolute; border-radius:50%; filter:blur(90px); opacity:.24; mix-blend-mode:screen}
.niebla i:nth-child(1){width:62vw; height:46vw; left:-10%; top:6%; background:radial-gradient(circle,#3E4A3A,transparent 68%)}
.niebla i:nth-child(2){width:50vw; height:38vw; left:54%; top:30%; background:radial-gradient(circle,#514935,transparent 70%)}
.niebla i:nth-child(3){width:38vw; height:32vw; left:24%; top:56%; background:radial-gradient(circle,#2F3B31,transparent 72%)}
@media (prefers-reduced-motion:no-preference){
  .niebla i:nth-child(1){animation:deriva 62s var(--e) infinite alternate}
  .niebla i:nth-child(2){animation:deriva 78s var(--e) infinite alternate-reverse}
  .niebla i:nth-child(3){animation:deriva 96s var(--e) infinite alternate}
  @keyframes deriva{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(6%,-5%,0) scale(1.24)}}
}
/* el carácter 氣 (aliento) enorme, casi invisible */
.hero-han{
  position:absolute; right:-5%; top:48%; transform:translateY(-50%); z-index:-1;
  font-family:var(--han-cjk); font-weight:500; line-height:.8;
  font-size:min(66vh,48vw); color:var(--tinta); opacity:.042;
  pointer-events:none; user-select:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero-han{opacity:0; transition:opacity 2.4s var(--e) .5s, transform 2.6s var(--out) .5s;
            transform:translateY(-50%) translateX(4%)}
  .listo .hero-han{opacity:.042; transform:translateY(-50%)}
}

.hero-cuerpo{flex:1; display:flex; align-items:center; padding-top:clamp(96px,13vw,150px)}
.hero-cuerpo > .hoja{width:100%}

/* logo dentro del círculo de pincel */
.marca-hero{display:flex; align-items:center; gap:clamp(14px,2vw,22px)}
.marca-hero .aro{position:relative; width:clamp(80px,8.4vw,108px); aspect-ratio:1; flex:none; display:grid; place-items:center}
.marca-hero .aro svg{position:absolute; inset:0; width:100%; height:100%; color:var(--tinta); opacity:.9; overflow:visible}
.marca-hero .aro img{width:54%; height:auto; border-radius:50%; opacity:.97}
.marca-hero .nom{font-family:var(--serif); font-size:clamp(1.2rem,1.9vw,1.62rem); letter-spacing:.01em; line-height:1.15}
.marca-hero .nom span{
  display:block; font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinta-suave); margin-top:5px;
}
@media (prefers-reduced-motion:no-preference){
  /* el ensō es un path relleno, no de trazo: se dibuja con un barrido */
  .marca-hero .aro svg{clip-path:inset(0 100% 0 0); transition:clip-path 1.9s var(--out) .35s}
  .listo .marca-hero .aro svg{clip-path:inset(0 0 0 0)}
}

.hero h1{
  font-size:clamp(2.6rem,1.5rem + 4.6vw,5.4rem); line-height:1.02; letter-spacing:-.028em;
  max-width:15ch; margin-top:clamp(26px,3.4vw,44px);
}
.hero h1 i{font-style:italic; color:var(--bronce-claro)}
.hero-sub{
  margin-top:clamp(20px,2.6vw,32px); max-width:46ch; color:var(--tinta-media);
  font-size:clamp(1rem,.96rem + .3vw,1.15rem);
}
.hero-acc{display:flex; flex-wrap:wrap; gap:clamp(16px,2.4vw,26px); align-items:center; margin-top:clamp(28px,3.4vw,42px)}
.hero-pie{
  position:relative; border-top:1px solid var(--linea-fina); backdrop-filter:blur(2px);
  padding-block:20px 24px;
}
.hero-pie .hoja{display:flex; flex-wrap:wrap; gap:clamp(12px,2.4vw,30px); align-items:center}
.hero-pie span{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.hero-pie b{color:var(--tinta-media); font-weight:500}
.hero-pie .sep{color:var(--bronce); opacity:.7}
.hero-baja{
  position:absolute; right:clamp(22px,5.5vw,64px); bottom:112px; z-index:3;
  width:1px; height:54px; background:linear-gradient(var(--bronce),transparent);
}
@media (prefers-reduced-motion:no-preference){
  .hero-baja{animation:baja 3.4s var(--e) infinite}
  @keyframes baja{0%{transform:scaleY(0); transform-origin:top}
    45%{transform:scaleY(1); transform-origin:top}
    55%{transform:scaleY(1); transform-origin:bottom}
    100%{transform:scaleY(0); transform-origin:bottom}}
}
@media (max-width:820px){ .hero-baja{display:none} .hero-han{font-size:78vw; right:-16%} }

/* ═══════════════════════════════════════════════════════════
   PRÁCTICAS COMO PANELES RITUALES
   ═══════════════════════════════════════════════════════════ */
.rituales{margin-top:clamp(34px,4.5vw,58px)}
.ritual{position:relative; border-top:1px solid var(--linea-fina)}
.ritual:last-child{border-bottom:1px solid var(--linea-fina)}
.ritual-in{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4.6vw,74px); align-items:center;
  padding-block:clamp(40px,6vw,88px);
}
.ritual:nth-child(even) .ritual-foto{order:2}
.ritual-foto{position:relative; overflow:hidden; margin:0}
.ritual-foto img{
  width:100%; height:auto; aspect-ratio:5/4; object-fit:cover;
  transition:transform 1.4s var(--out);
}
.ritual:hover .ritual-foto img{transform:scale(1.04)}
.ritual-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(190deg, transparent 45%, rgba(18,16,12,.5));
  pointer-events:none;
}
.ritual-han{
  font-family:var(--han-cjk); font-weight:500; line-height:.82;
  font-size:clamp(3.2rem,6.4vw,5.6rem); color:var(--te);
  display:block; margin-bottom:clamp(14px,1.8vw,22px);
  transition:color .6s var(--e), transform .9s var(--out);
}
.ritual:hover .ritual-han{color:var(--bronce); transform:translateX(5px)}
.ritual h3{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.2rem)}
.ritual .sobre{color:var(--tinta-media); margin-top:clamp(12px,1.6vw,18px); max-width:46ch; font-size:var(--t-base)}
.ritual-datos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,26px); margin-top:clamp(20px,2.6vw,32px);
  padding-top:clamp(16px,2vw,22px); border-top:1px solid var(--linea-fina);
}
.ritual-datos div b{
  display:block; font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.15em;
  text-transform:uppercase; color:var(--bronce-texto); font-weight:600; margin-bottom:6px;
}
.ritual-datos div p{font-size:var(--t-peq); color:var(--tinta-suave); line-height:1.6; font-variant-numeric:tabular-nums}
.ritual-entrar{margin-top:clamp(20px,2.4vw,28px); display:inline-flex}
@media (max-width:880px){
  .ritual-in{grid-template-columns:1fr; gap:22px; padding-block:38px}
  .ritual:nth-child(even) .ritual-foto{order:0}
  .ritual-datos{grid-template-columns:1fr 1fr; gap:16px}
}
@media (max-width:520px){ .ritual-datos{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════
   AGUADA — las fotos dejan de ser rectángulos y se pintan
   ═══════════════════════════════════════════════════════════ */
.ritual-foto img,
.maestro-foto .copia img,
.puente-foto img,
.mosaico .copia img{
  -webkit-mask-image:url(img/mask-aguada.webp); mask-image:url(img/mask-aguada.webp);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* alternando el canto para que no se repita la misma mancha */
.ritual:nth-child(even) .ritual-foto img,
.mosaico .b img, .mosaico .d img{
  -webkit-mask-image:url(img/mask-aguada-b.webp); mask-image:url(img/mask-aguada-b.webp);
}
.maestro-foto .copia img, .puente-foto img{
  -webkit-mask-image:url(img/mask-aguada-v.webp); mask-image:url(img/mask-aguada-v.webp);
}
/* con la mancha pintada, el marco y la sombra sobran */
.ritual-foto::after{display:none}
.copia img, .puente-foto{box-shadow:none}
.puente-foto{overflow:visible}


/* ═══════════════════════════════════════════════════════════
   CIERRE DE LA SECCIÓN DEL MAESTRO — la cita, a plana entera
   ═══════════════════════════════════════════════════════════ */
.maestro-cierre{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,5vw,72px); align-items:end;
  padding-bottom:clamp(70px,10vw,130px);
}
.maestro-cierre .dicho{margin-top:0; max-width:30ch; font-size:clamp(1.4rem,1.1rem + 1.1vw,2.05rem)}
.maestro-cierre .firma-bloque{justify-content:flex-end; margin-top:0}
@media (max-width:860px){
  .maestro-cierre{grid-template-columns:1fr; gap:30px; align-items:start}
  .maestro-cierre .firma-bloque{justify-content:flex-start}
}
/* la nota al margen se posa al final de su columna, no flota arriba */
.dos-col > div:last-child > .margen:first-child{align-self:end}
.dos-col{align-items:stretch}
.dos-col > div:last-child{display:flex; flex-direction:column; justify-content:flex-end}

/* ═══════════════════════════════════════════════════════════
   NUBES AUSPICIOSAS (祥云) — atmósfera, no decoración
   ═══════════════════════════════════════════════════════════ */
.nube{position:absolute; z-index:-1; color:var(--bronce); pointer-events:none; opacity:0}
.nube svg{width:100%; height:auto; display:block}
.listo .nube{opacity:.10; transition:opacity 2.6s var(--e) .8s}
.hero .nube--a{top:9%; left:-4%; width:min(31vw,360px)}
.hero .nube--b{bottom:19%; right:-3%; width:min(23vw,270px); transform:scaleX(-1)}
.cierre .nube--c{top:6%; left:50%; width:min(20vw,220px); margin-left:-38vw}
@media (prefers-reduced-motion:no-preference){
  .hero .nube--a{animation:flota 46s var(--e) infinite alternate}
  .hero .nube--b{animation:flotaInv 58s var(--e) infinite alternate}
  @keyframes flota{to{transform:translate3d(3.5%,-9%,0)}}
  @keyframes flotaInv{to{transform:scaleX(-1) translate3d(3%,-7%,0)}}
}
@media (max-width:820px){
  .hero .nube--a{width:52vw; top:6%}
  .hero .nube--b{width:40vw; bottom:23%}
  .cierre .nube--c{display:none}
}

/* ═══════════════════════════════════════════════════════════
   PLANCHA — una sola fotografía a sangre y una frase
   ═══════════════════════════════════════════════════════════ */
.plancha{
  position:relative; min-height:min(82svh,760px); display:grid; place-items:center;
  overflow:hidden; isolation:isolate; text-align:center;
}
.plancha img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; will-change:transform;
}
.plancha::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 60% at 50% 50%, transparent 20%, rgba(18,16,12,.55) 78%),
    linear-gradient(to bottom, var(--papel) 0%, rgba(18,16,12,.28) 22%, rgba(18,16,12,.34) 72%, var(--papel) 100%);
}
.plancha .dicho-grande{
  font-family:var(--serif); font-size:clamp(1.7rem,1.1rem + 2.6vw,3.4rem);
  line-height:1.16; max-width:19ch; margin-inline:auto; letter-spacing:-.02em;
  text-wrap:balance; padding-inline:22px;
}
.plancha .dicho-grande i{font-style:italic; color:var(--bronce-claro)}
.plancha .pie-foto{
  position:absolute; left:0; right:0; bottom:clamp(20px,3vw,34px);
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-suave);
}

/* ═══════════════════════════════════════════════════════════
   EL RITMO DE LA SEMANA
   ═══════════════════════════════════════════════════════════ */
.semana{margin-top:clamp(34px,4.6vw,58px)}
.franja{
  display:grid; grid-template-columns:minmax(0,.22fr) minmax(0,1fr) minmax(0,.34fr);
  gap:clamp(18px,3.4vw,52px); align-items:baseline;
  padding-block:clamp(22px,3vw,34px); border-top:1px solid var(--linea-fina);
  transition:background-color .6s var(--e);
}
.franja:last-of-type{border-bottom:1px solid var(--linea-fina)}
.franja:hover{background:rgba(239,233,219,.03)}
.franja .h{
  font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1.2vw,2.3rem);
  color:var(--bronce); font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1;
}
.franja .h span{
  display:block; font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-suave); margin-top:9px;
}
.franja h4{font-size:var(--t-med); font-weight:400}
.franja h4 em{font-style:normal; font-family:var(--han-cjk); font-size:.62em; color:var(--te); margin-left:12px}
.franja .dice{color:var(--tinta-media); font-size:var(--t-base); margin-top:8px; max-width:44ch}
.franja .quien{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  line-height:1.6; text-align:right;
}
.franja .quien b{display:block; color:var(--tinta-media); font-weight:600}
@media (max-width:860px){
  .franja{grid-template-columns:1fr; gap:6px; padding-block:24px}
  .franja .h{display:flex; align-items:baseline; gap:14px}
  .franja .h span{margin-top:0}
  .franja .quien{text-align:left; margin-top:8px}
}

/* ═══════════════════════════════════════════════════════════
   EL CAMINO HASTA AQUÍ — cronología
   ═══════════════════════════════════════════════════════════ */
.camino{margin-top:clamp(34px,4.6vw,58px); position:relative}
.hito{
  display:grid; grid-template-columns:minmax(0,.28fr) minmax(0,1fr);
  gap:clamp(20px,4vw,60px); padding-block:clamp(26px,3.4vw,42px);
  border-top:1px solid var(--linea-fina); align-items:start;
}
.hito:last-child{border-bottom:1px solid var(--linea-fina)}
.hito .cuando{
  font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);
  color:var(--bronce); font-variant-numeric:tabular-nums; line-height:1.05;
}
.hito .cuando span{
  display:block; font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-suave); margin-top:8px; font-weight:500;
}
.hito h4{font-size:var(--t-med); font-weight:400; margin-bottom:9px}
.hito p{color:var(--tinta-media); max-width:52ch; font-size:var(--t-base)}
@media (max-width:760px){ .hito{grid-template-columns:1fr; gap:10px; padding-block:24px} }

/* ═══════════════════════════════════════════════════════════
   LA VIDA EN LA ESCUELA — tira horizontal
   ═══════════════════════════════════════════════════════════ */
.tira{
  display:flex; gap:clamp(14px,2vw,26px); overflow-x:auto; scroll-snap-type:x proximity;
  padding:clamp(24px,3.4vw,44px) clamp(22px,5.5vw,64px) clamp(18px,2.4vw,28px);
  scrollbar-width:thin; scrollbar-color:var(--linea-2) transparent;
  -webkit-overflow-scrolling:touch;
}
.tira::-webkit-scrollbar{height:3px}
.tira::-webkit-scrollbar-track{background:transparent}
.tira::-webkit-scrollbar-thumb{background:rgba(239,233,219,.2)}
.tira figure{
  margin:0; flex:none; scroll-snap-align:center; position:relative;
  width:clamp(230px,26vw,360px);
}
.tira figure.alta{width:clamp(200px,22vw,300px)}
.tira img{
  width:100%; height:clamp(280px,38vw,460px); object-fit:cover; display:block;
  -webkit-mask-image:url(img/mask-aguada.webp); mask-image:url(img/mask-aguada.webp);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:transform 1.3s var(--out);
}
.tira figure:hover img{transform:scale(1.03)}
.tira figcaption{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  margin-top:12px; letter-spacing:.1em; text-transform:uppercase;
}
.tira-nota{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:12px;
}
.tira-nota i{display:block; width:34px; height:1px; background:var(--bronce); opacity:.6}

/* ═══════════════════════════════════════════════════════════
   PORTADILLA DE CAPÍTULO
   ═══════════════════════════════════════════════════════════ */
.portadilla{
  display:flex; align-items:baseline; gap:clamp(16px,2.6vw,30px);
  padding-bottom:clamp(20px,2.6vw,30px); border-bottom:1px solid var(--linea-fina);
  margin-bottom:clamp(30px,4vw,52px);
}
.portadilla .num{
  font-family:var(--serif); font-size:clamp(2.2rem,1.6rem + 2.2vw,3.6rem);
  color:var(--bronce); line-height:.9; letter-spacing:-.02em;
}
.portadilla .tit{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinta-suave); font-weight:500;
}
.portadilla .han{
  margin-left:auto; font-family:var(--han-cjk); font-size:clamp(1.6rem,3vw,2.6rem);
  color:var(--te); opacity:.55; line-height:1;
}

/* ═══════════════════════════════════════════════════════════
   EL AMANECER
   La escuela se define «consagrada al despertar de la consciencia»
   y dice dirigirse hacia la luz. La página hace eso: arranca de noche
   y va clareando hacia el verde bambú y el oro del amanecer.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bambu:#A8C49A;          /* verde vivo de caña, para los ideogramas */
  --oro:#E3B369;            /* la luz del sol bajo */
  --agua:#8FA8A0;           /* el verde azulado del río */
}

/* cada capítulo, un punto más cálido y más claro que el anterior */
#escuela{background:#12100C}
#gaudencio{background:#141109}
#practicas{background:#181308}
#semana{background:#1C1609}
#personas{background:#20190A}
#lejos{background:#251C0B}
#circulo{background:#2A200C}
#calendario{background:#2F240D}
.plancha{background:#1A1409}

/* el verde de los ideogramas gana vida a medida que amanece */
.ritual-han{color:var(--bambu); opacity:.92}
.franja h4 em{color:var(--bambu)}
.portadilla .han{color:var(--bambu); opacity:.6}

/* ═══════════ EL CIERRE: el sol sale por el horizonte ═══════════ */
/* El oro vive abajo, detrás de las montañas, que es donde amanece.
   Arriba el cielo sigue oscuro y el texto se lee en marfil. */
.cierre{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(to bottom, #2A200C 0%, #2E230D 46%, #3E2E12 72%, #6B4E20 100%);
}
.cierre::before{
  content:""; position:absolute; left:50%; bottom:-14%; z-index:-2;
  width:min(96vw,1200px); aspect-ratio:2/1; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%, rgba(255,206,128,.40) 0%, rgba(227,179,105,.16) 38%, transparent 70%);
  pointer-events:none;
}
.sierra{
  position:absolute; left:0; right:0; bottom:0; z-index:-1;
  pointer-events:none; line-height:0;
}
.sierra svg{width:100%; height:auto; display:block}
.sierra path{fill:#14100A}
.cierre .hoja{position:relative; z-index:1}
.cierre .nube{color:var(--oro)}
.listo .cierre .nube{opacity:.12}

/* ═══════════════════════════════════════════════════════════
   IDIOMA
   Sin banderas: una bandera es un país, no una lengua. El nombre
   de cada idioma escrito en su propio idioma, que es lo que la
   gente reconoce y lo único que no ofende a nadie.
   ═══════════════════════════════════════════════════════════ */
.idioma{position:relative; flex:none}
.idioma-btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-media); border-radius:2px;
  transition:color .25s var(--e), background-color .25s var(--e);
}
.idioma-btn:hover{color:var(--tinta); background:rgba(239,233,219,.05)}
.idioma-btn .globo{width:15px; height:15px; flex:none; opacity:.85}
.idioma-btn .globo circle,.idioma-btn .globo path{
  fill:none; stroke:currentColor; stroke-width:1.3; vector-effect:non-scaling-stroke;
}
.idioma-btn .pico{
  width:7px; height:7px; flex:none; transition:transform .35s var(--out); opacity:.6;
}
.idioma[data-abierto="1"] .idioma-btn{color:var(--tinta)}
.idioma[data-abierto="1"] .pico{transform:rotate(180deg)}

.idioma-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:70; min-width:190px;
  background:rgba(20,17,12,.97); backdrop-filter:blur(14px);
  border:1px solid var(--linea); padding:7px;
  box-shadow:0 26px 50px -28px #000;
  opacity:0; visibility:hidden; transform:translateY(-7px);
  transition:opacity .3s var(--e), transform .38s var(--out), visibility .3s;
}
.idioma[data-abierto="1"] .idioma-panel{opacity:1; visibility:visible; transform:none}
.idioma-panel li{list-style:none}
.idioma-panel ul{margin:0; padding:0}
.idioma-panel button{
  display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  padding:11px 13px; color:var(--tinta-media); font-size:var(--t-base);
  font-family:var(--serif); transition:color .22s var(--e), background-color .22s var(--e);
}
.idioma-panel button:hover{color:var(--tinta); background:rgba(239,233,219,.06)}
.idioma-panel button .cod{
  font-family:var(--nota); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); margin-left:auto;
}
.idioma-panel button[aria-current="true"]{color:var(--bronce-texto)}
.idioma-panel button[aria-current="true"] .cod{color:var(--bronce-texto)}
/* el punto de tinta marca el idioma activo */
.idioma-panel button::before{
  content:""; width:5px; height:5px; border-radius:50% 50% 50% 20%; flex:none;
  background:var(--bronce); opacity:0; transform:translateY(-2px) rotate(12deg);
  transition:opacity .25s var(--e);
}
.idioma-panel button[aria-current="true"]::before{opacity:.85}

@media (max-width:760px){
  .idioma-btn{padding:7px 9px}
  .idioma-btn .txt{display:none}
  .idioma-panel{right:-6px}
}

/* ═══════════════════════════════════════════════════════════
   INSCRIPCIÓN
   Provisional hasta que haya sistema de reservas: recoge los
   datos y los entrega por WhatsApp, que es el canal que la
   escuela ya usa. Sin backend y sin depender de terceros.
   ═══════════════════════════════════════════════════════════ */
.apuntarse{
  max-width:660px; margin:clamp(34px,4.6vw,52px) auto 0; text-align:left;
  background:rgba(20,17,12,.55); backdrop-filter:blur(8px);
  border:1px solid var(--linea); padding:clamp(24px,3.6vw,42px);
}
.apuntarse legend{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bronce-texto); padding:0; margin-bottom:22px;
}
.apuntarse fieldset{border:0; padding:0; margin:0}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px)}
.campo{display:flex; flex-direction:column; gap:7px}
.campo--ancho{grid-column:1/-1}
.campo label{
  font-family:var(--nota); font-size:var(--t-nota); letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.campo input, .campo select{
  font-family:var(--serif); font-size:var(--t-base); color:var(--tinta);
  background:transparent; border:0; border-bottom:1px solid var(--linea-2);
  padding:9px 2px; border-radius:0; width:100%;
  transition:border-color .3s var(--e);
}
.campo input::placeholder{color:var(--tinta-suave); opacity:.65}
.campo input:focus, .campo select:focus{
  outline:none; border-bottom-color:var(--bronce);
}
.campo select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%239E947F' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; padding-right:20px;
}
.campo select option{background:#1A1712; color:#EFE9DB}
.apuntarse-pie{
  display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,24px); align-items:center;
  margin-top:clamp(24px,3vw,34px); padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid var(--linea-fina);
}
.apuntarse-nota{
  font-family:var(--nota); font-size:var(--t-nota); color:var(--tinta-suave);
  line-height:1.55; max-width:30ch;
}
.apuntarse .llamada--fuerte{border:0; cursor:pointer}
@media (max-width:640px){
  .campos{grid-template-columns:1fr}
  .apuntarse-pie{flex-direction:column; align-items:flex-start}
}

/* la cabecera en móvil, con el selector de idioma ya no cabía */
@media (max-width:520px){
  .cabecera-in{gap:8px}
  .rotulo{gap:8px; min-width:0}
  .rotulo b{font-size:.88rem; overflow:hidden; text-overflow:ellipsis}
  .rotulo .sello{width:28px; height:28px}
  .idioma-btn{padding:6px 6px; gap:5px}
  .idioma-btn .pico{display:none}
  .llamada--fuerte{padding:10px 13px; font-size:.72rem; letter-spacing:.02em}
}