/* Artesanos — crema de cappuccino sobre tinta de barro.
   Una sola atmosfera: la pagina no invierte en modo oscuro, a proposito.
   Tipografia de marca Suuel: Cormorant Garamond + Jost.                    */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --paper:#f2ece1; --paper-2:#eae1d1; --rule:#dcd0bb;
  --ink:#3a2a1e; --muted:#8b7460; --terracota:#a9542f; --ocre:#c6923f;
  --serif:'Cormorant Garamond',Cormorant,Garamond,'Times New Roman',serif;
  --sans:'Jost','Century Gothic',Optima,'Gill Sans MT',sans-serif;
  color-scheme: light;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
       font-weight:300; line-height:1.7; letter-spacing:.04em; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--ocre); outline-offset:4px; }

/* ---------- entrada: telon fijo que sube al primer gesto ---------- */
body { overflow:hidden; }
body.abierto { overflow:auto; }
.hero { position:fixed; inset:0; z-index:60; background:var(--paper);
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        padding:24px 20px 0; overflow:hidden; will-change:transform; }
.hero.fuera { display:none; }
.stage { width:100%; max-width:900px; aspect-ratio:1000/800; position:relative; }
.stage svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage path { fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round;
              stroke-linejoin:round; vector-effect:non-scaling-stroke; }

/* el nombre se pinta de izquierda a derecha, como a mano */
.nombre-wrap { position:absolute; left:0; right:0; bottom:2.5%; display:flex; justify-content:center;
               pointer-events:none; }
.nombre-tipo { display:inline-block; font-family:var(--serif); font-weight:400;
               font-size:clamp(38px,7.4vw,84px); letter-spacing:.24em; margin-right:-.24em;
               color:var(--ink); line-height:1.1;
               clip-path:inset(0 100% 0 -6%);
               transition:clip-path 2600ms cubic-bezier(.42,.16,.58,.84); }
.nombre-tipo.on { clip-path:inset(0 -6% 0 -6%); }
.nombre-tipo.sin-anim { transition:none; }
@media (prefers-reduced-motion: reduce) { .nombre-tipo { transition:none; } }

/* ---- pie de escena ---- */
.scene-text { position:absolute; left:0; right:0; bottom:4%; text-align:center;
              opacity:0; transition:opacity .9s ease; pointer-events:none; color:var(--muted); }
.scene-text.on { opacity:1; }
.st-eyebrow { display:none; }
.st-linea { margin:0; }

.modo-simple .st-linea { font-family:var(--sans); font-size:clamp(13px,1.8vw,17px);
                         letter-spacing:.62em; text-transform:uppercase; font-weight:300; }

/* editorial: cada escena lleva su texto en un lugar distinto del cuadro */
.modo-relato .scene-text { text-align:left; }
.modo-relato .st-eyebrow { display:block; font-family:var(--sans); font-size:10.5px;
                           letter-spacing:.42em; text-transform:uppercase; font-weight:400;
                           color:var(--terracota); margin-bottom:13px; padding-bottom:13px;
                           border-bottom:1px solid var(--rule); }
.modo-relato .st-linea { font-family:var(--serif); font-weight:400;
                         font-size:clamp(17px,2.05vw,23px); line-height:1.56;
                         letter-spacing:.035em; color:var(--ink); text-wrap:pretty; }

.modo-relato .pos-arriba    { left:3%;  right:auto; top:2%;  bottom:auto; width:40%; }
.modo-relato .pos-der       { left:auto; right:1%;  top:31%; bottom:auto; width:30%; }
.modo-relato .pos-der-alta  { left:auto; right:2%;  top:10%; bottom:auto; width:29%; }
.modo-relato .pos-izq       { left:2%;  right:auto; top:28%; bottom:auto; width:30%; }
.modo-relato .pos-abajo     { left:6%;  right:auto; top:auto; bottom:1.5%; width:46%; }
.modo-relato .pos-cierre    { left:12%; right:12%; top:auto; bottom:3%; width:auto;
                              text-align:center; }
.modo-relato .pos-cierre .st-eyebrow { border-bottom:0; padding-bottom:0; margin-bottom:16px; }
.modo-relato .pos-cierre .st-linea   { font-size:clamp(21px,2.9vw,32px); line-height:1.4;
                                        text-wrap:balance; }

@media (max-width:760px) {
  .modo-relato .scene-text,
  .modo-relato .scene-text[class*="pos-"] { left:5%; right:5%; top:auto; bottom:2%;
                                            width:auto; text-align:center; }
  .modo-relato .st-eyebrow { border-bottom:0; padding-bottom:0; margin-bottom:8px; }
}

/* ---- indicador de scroll ---- */
.lockup { text-align:center; margin-top:18px; min-height:96px;
          opacity:0; transform:translateY(10px);
          transition:opacity 1.3s ease .5s, transform 1.3s ease .5s; pointer-events:none; }
.lockup.on { opacity:1; transform:none; pointer-events:auto; }

.scroll-cue { display:inline-flex; flex-direction:column; align-items:center; gap:16px;
              text-decoration:none; color:var(--muted); padding:6px 12px 0; }
.scroll-cue span { font-size:9.5px; letter-spacing:.55em; text-transform:uppercase;
                   text-indent:.55em; font-weight:300; }
.scroll-cue i { position:relative; display:block; width:1px; height:58px; background:var(--rule); }
.scroll-cue i::after { content:""; position:absolute; left:-1.5px; top:0; width:4px; height:4px;
                       border-radius:50%; background:var(--terracota);
                       animation:gota 3s cubic-bezier(.6,0,.35,1) infinite; }
@keyframes gota {
  0%   { transform:translateY(0);    opacity:0; }
  18%  { opacity:1; }
  72%  { opacity:1; }
  100% { transform:translateY(54px); opacity:0; }
}
.scroll-cue:hover, .scroll-cue:focus-visible { color:var(--ink); }
.scroll-cue:hover i { background:var(--muted); }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation:none; opacity:1; } }

/* ---- controles ---- */
.controls { display:flex; gap:24px; align-items:center; justify-content:center; padding:14px 0 30px; }
.controls button { background:none; border:0; font-family:inherit; font-size:10px; letter-spacing:.42em;
                   text-transform:uppercase; color:var(--muted); cursor:pointer; padding:8px 4px;
                   border-bottom:1px solid transparent; font-weight:300; }
.controls button:hover, .controls button:focus-visible { color:var(--ink); border-bottom-color:var(--ocre); }
.ticks { display:flex; gap:7px; }
.tick { width:16px; height:1px; background:var(--rule); transition:background .5s ease; }
.tick.on { background:var(--terracota); }

/* ---------- cierre: una sola pantalla, sin scroll ---------- */
.pagina { min-height:100svh; display:flex; flex-direction:column; align-items:center;
          justify-content:center; padding:44px 26px 52px; position:relative; text-align:center; }
.centro { display:flex; flex-direction:column; align-items:center;
          gap:clamp(14px,2.6svh,34px); }

.eyebrow { font-size:10.5px; letter-spacing:.55em; text-transform:uppercase;
           color:var(--terracota); text-indent:.55em; }
.claim { font-family:var(--serif); font-weight:300; margin:0;
         font-size:clamp(25px,4.4vw,50px); line-height:1.24; letter-spacing:.02em;
         color:var(--ink); }

#mark { height:clamp(110px,25svh,240px); width:auto; max-width:80vw; display:block;
        color:var(--ink); }
#mark path { fill:none; }

.cierre-name { font-family:var(--serif); font-size:clamp(28px,4.4vw,50px); letter-spacing:.24em;
               text-indent:.24em; font-weight:400; }
.sub { font-size:10.5px; letter-spacing:.5em; text-indent:.5em;
       text-transform:uppercase; color:var(--terracota); }

.pie { position:absolute; left:0; right:0; bottom:18px; text-align:center;
       font-size:9.5px; letter-spacing:.4em; text-transform:uppercase;
       color:var(--rule); text-decoration:none; }
.pie:hover, .pie:focus-visible { color:var(--muted); }