@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/jost.woff2) format('woff2')}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/instrument-sans.woff2) format('woff2')}

:root{
  --f-disp:'Jost',system-ui,sans-serif;
  --f-tx:'Instrument Sans',system-ui,sans-serif;

  /* los cinco del PDF de paleta */
  --marino:#001471; --coral:#E66876; --durazno:#DCA180;
  --rosa:#D9C3C9; --cielo:#7B9DC7;
  /* el dorado no viene del PDF: se agrego el 6 de septiembre */
  --dorado:#F2B366;

  --bg:#000B37;
  --tx:#F3EFE9; --tx-2:#AFBCE0; --tx-3:#7A88B4;
  --sup:rgba(255,255,255,.055); --sup-alza:rgba(255,255,255,.09);
  --linea:rgba(255,255,255,.11); --borde-fuerte:rgba(255,255,255,.22);
  --nav-bg:rgba(0,11,55,.72);
  --acento:var(--dorado); --sobre-acento:#14100A;
  --vineta:rgba(0,5,28,.72);
  --radio:18px; --radio-btn:100px;
  --pad-sec:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
/* varias clases declaran display, y eso le gana al atributo hidden */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;color:var(--tx);font-family:var(--f-tx);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(120% 85% at 50% 0%,#001471 0%,#000B37 55%,#00072A 100%) fixed}
a{color:inherit;text-decoration:none}
p{margin:0}
img,svg{max-width:100%}
button{font:inherit;font-family:var(--f-tx)}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:99;
  padding:10px 16px;background:var(--acento);color:var(--sobre-acento);border-radius:8px}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.centrado{text-align:center;margin-top:36px}

/* ── fondo ─────────────────────────────────────────────────────────────── */
.fondo{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.fondo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 42%,transparent 30%,var(--vineta) 100%)}
.video-capa{position:absolute;inset:0}
.video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.video-tinte{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,20,113,.82),rgba(0,7,42,.94)),
    radial-gradient(70% 55% at 50% 46%,rgba(242,179,102,.2),transparent 70%);
  mix-blend-mode:multiply}
.video-capa::after{content:"";position:absolute;inset:0;background:rgba(0,11,55,.5)}
.halo{position:absolute;border-radius:50%;filter:blur(90px)}
.halo-a{left:-14vw;top:-16vh;width:64vw;height:64vw;
  background:radial-gradient(circle,rgba(230,104,118,.42),transparent 66%)}
.halo-b{right:-20vw;bottom:-24vh;width:70vw;height:70vw;
  background:radial-gradient(circle,rgba(123,157,199,.36),transparent 68%)}
.orbe{position:absolute;border-radius:50%;will-change:transform}
.lente{left:50%;top:44%;width:min(76vw,780px);height:min(76vw,780px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(255,236,208,.3) 0%,
    rgba(242,179,102,.26) 26%,rgba(230,104,118,.22) 50%,transparent 72%)}
.respira{position:absolute;inset:0;border-radius:50%}
.orbe .tex-ven{position:absolute;inset:-16%;opacity:.2;will-change:transform;
  background:url(assets/textura-venas.svg) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(circle,transparent 12%,#000 34%,#000 48%,transparent 72%);
  mask-image:radial-gradient(circle,transparent 12%,#000 34%,#000 48%,transparent 72%)}
.tex-cel{position:absolute;left:50%;top:50%;width:205vmax;height:205vmax;
  transform:translate(-50%,-50%);will-change:transform;opacity:.045;
  background:url(assets/textura-celulas.svg) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(circle at 50% 44%,transparent 6%,#000 58%);
  mask-image:radial-gradient(circle at 50% 44%,transparent 6%,#000 58%)}
.grano{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;
  opacity:.13;mix-blend-mode:overlay;animation:grano 1.1s steps(3) infinite}
@keyframes grano{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1.5%)}
  66%{transform:translate(1.5%,-2%)} 100%{transform:translate(0,0)}}

/* ── en telefono el fondo va en version ligera ───────────────────────────
   La portada se trababa en celular. No era el peso de la descarga: era lo
   que el telefono tiene que volver a pintar en cada cuadro. Se apagan las
   capas caras y queda la misma imagen, quieta. En computadora no cambia
   nada.                                                                  */
@media(max-width:760px){
  /* El grano no es una imagen: el navegador lo genera con feTurbulence en
     toda la pantalla, lo mezcla con todo lo de abajo y lo mueve tres veces
     por segundo. Es lo mas caro del sitio y en pantalla chica no se ve. */
  .grano{display:none}

  /* El video se cambia por su propia foto fija. Ademas de decodificarlo sin
     parar, el telefono se lo baja con datos moviles. */
  .video{display:none}
  .video-capa::before{content:"";position:absolute;inset:0;
    background:url(assets/video/hero-poster.jpg) center/cover no-repeat;
    filter:grayscale(1) contrast(1.15)}

  /* Un desenfoque de 90px se recalcula sobre media pantalla; 44 se ve igual
     a este tamano y cuesta una fraccion. */
  .halo{filter:blur(44px)}

  /* La textura de celulas medias 205vmax: mas de cuatro pantallas de imagen
     enmascarada guardadas en memoria de video. */
  .tex-cel{width:135vmax;height:135vmax}

  /* backdrop-filter obliga a releer lo que quedo detras cada vez que algo se
     mueve. Con fondo solido se ve casi igual. */
  .nav.peg,.menu-movil,.ficha{backdrop-filter:none}
  .menu-movil{background:rgba(0,7,42,.99)}
}

/* ── entrada ───────────────────────────────────────────────────────────── */
.telon{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:#00072A;transition:opacity .7s ease,visibility .7s}
.telon .logo{height:52px;opacity:0;transform:scale(.94);
  animation:entra 1.15s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes entra{to{opacity:.95;transform:scale(1)}}
body.listo .telon{opacity:0;visibility:hidden}

/* ── tipografia ────────────────────────────────────────────────────────── */
h1,h2{font-family:var(--f-disp);font-weight:300;text-transform:uppercase;
  letter-spacing:.045em;line-height:1.12;margin:0}
h1,h2{font-size:clamp(27px,3.7vw,46px)}
h3{font-family:var(--f-tx);font-weight:600;font-size:19px;letter-spacing:-.006em;
  line-height:1.32;margin:0}
.sub{color:var(--tx-2);max-width:60ch;margin:18px 0 0}
.sec-head .sub{margin-inline:auto}
.prosa{max-width:62ch;margin:0 auto;display:grid;gap:20px;color:var(--tx-2);
  font-size:clamp(17px,1.7vw,19px)}
/* Los retratos de Nosotros. En ovalo, con un aro fino separado de la foto:
   el borde pegado se veia pesado. Van algo tenues para no ganarle al texto;
   ya vienen teñidas con la paleta, asi que no desentonan con el fondo. */
.duo{max-width:720px;margin:0 auto clamp(36px,5vw,56px);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px)}
.retrato{margin:0;display:grid;align-content:start;justify-items:center;text-align:center}
.retrato img{width:100%;max-width:300px;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:50%;opacity:.82;outline:1px solid rgba(217,195,201,.35);outline-offset:7px}
.retrato figcaption{margin-top:30px;max-width:40ch;color:var(--tx-2);
  font-size:clamp(15px,1.4vw,16px);font-style:italic}
.retrato strong{display:block;margin-bottom:10px;color:var(--tx);font-style:normal;
  font-family:var(--f-disp);font-weight:400;font-size:24px;letter-spacing:.04em}
@media(max-width:640px){.duo{grid-template-columns:1fr}
  .retrato img{max-width:240px}}
.aviso{max-width:60ch;margin:0 auto clamp(34px,4vw,48px);padding:14px 20px;
  border-radius:12px;border:1px dashed var(--borde-fuerte);color:var(--tx-2);
  font-size:14px;text-align:center}
.pal{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .5s,transform .5s;transition-delay:calc(var(--p) * 55ms)}
.vis .pal,h1.vis .pal,h2.vis .pal{opacity:1;transform:none}

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:16px var(--pad-sec);
  border-bottom:1px solid transparent;
  transition:background .35s,backdrop-filter .35s,border-color .35s}
.nav.peg{background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--linea)}
.nav-izq,.nav-der{display:none;align-items:center;gap:22px;flex:1}
.nav-der{justify-content:flex-end}
.nav a{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-2);
  transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--tx)}
.nav a[aria-current]{color:var(--acento)}
.marca{display:block;height:23px;color:var(--tx);flex:0 0 auto}
.logo{display:block;height:100%;aspect-ratio:1195.91/385.59;background:currentColor;
  -webkit-mask:url(assets/logo-xikal.webp) center/contain no-repeat;
  mask:url(assets/logo-xikal.webp) center/contain no-repeat}
.nav-cta{padding:9px 18px;border-radius:var(--radio-btn);
  background:var(--acento);color:var(--sobre-acento)!important;font-weight:600;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-cta:hover{filter:brightness(1.08)}
.con-globo{position:relative}
.globo{position:absolute;top:-8px;right:-12px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--acento);color:var(--sobre-acento);font-size:10px;
  font-weight:700;display:grid;place-items:center;letter-spacing:0}
/* Con la palabra "Menu" junto a las rayas: solas, quien llega por primera vez
   no las reconocia como menu. */
.menu-btn{display:flex;align-items:center;gap:10px;height:34px;padding:0 2px;
  background:transparent;border:0;cursor:pointer;font:inherit;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tx)}
.menu-rayas{display:grid;gap:5px}
.menu-rayas i{display:block;width:22px;height:1.5px;background:var(--tx);transition:.3s}
.menu-btn[aria-expanded="true"] .menu-rayas i:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-rayas i:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}
.menu-movil{position:fixed;inset:0;z-index:39;background:rgba(0,7,42,.97);
  backdrop-filter:blur(20px);display:grid;place-items:center}
.menu-movil nav{display:grid;gap:6px;text-align:center}
.menu-movil a{font-family:var(--f-disp);font-size:26px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx-2);padding:10px 30px}
.menu-movil a:hover{color:var(--acento)}
@media(min-width:1040px){
  .nav-izq,.nav-der{display:flex}
  .menu-btn{display:none}
  .menu-movil{display:none!important}}

/* ── botones ───────────────────────────────────────────────────────────── */
.btn{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 30px;border:1px solid transparent;
  border-radius:var(--radio-btn);cursor:pointer;transition:.22s;text-align:center}
.btn-chico{padding:11px 20px;font-size:10.5px}
.ancho{width:100%}
.btn-1{background:var(--acento);color:var(--sobre-acento)}
.btn-1:hover{filter:brightness(1.09)}
.btn-2{background:transparent;color:var(--tx);border-color:var(--borde-fuerte)}
.btn-2:hover{border-color:var(--acento);color:var(--acento)}
.btn.iman{will-change:transform}

/* ── portada ───────────────────────────────────────────────────────────── */
.portada-in{padding:0 var(--pad-sec) 12px}
.portada-alto{min-height:calc(100svh - 56px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(26px,4vh,44px);
  padding:clamp(20px,4vh,44px) 0}
.marca-grande{position:relative;font-family:var(--f-disp);font-weight:500;
  font-size:clamp(58px,16.5vw,248px);letter-spacing:.02em;line-height:.92;
  text-transform:uppercase;margin:0;cursor:pointer;user-select:none;
  --mx:50%; --my:50%}
.mg-capa{display:block;grid-area:1/1}
.marca-grande{display:grid}
.mg-base{color:#E9E4FA;opacity:.92;
  transition:transform .6s cubic-bezier(.2,.8,.3,1),opacity .6s}
.mg-luz{background:radial-gradient(closest-side at var(--mx) var(--my),
    #FFE9C4 0%,var(--dorado) 38%,rgba(230,104,118,.9) 62%,transparent 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.marca-grande.abierta .mg-base{clip-path:inset(0 0 50% 0);transform:translateY(-.06em)}
.marca-grande.abierta .mg-luz{clip-path:inset(50% 0 0 0);transform:translateY(.06em)}
.portada-dice{font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--tx-3);margin:-14px 0 0}
.portada-dice em{font-style:italic;text-transform:none;letter-spacing:.04em}
.portada-cta{flex:0 0 auto}
.portada-eventos{display:flex;flex-direction:column;align-items:center;
  gap:clamp(26px,4vh,44px)}
.portada-eventos .portada-cal{width:100%;padding-top:0}

/* ── rueda (carrusel giratorio) ────────────────────────────────────────── */
.rueda{width:100%;max-width:1120px;text-align:center}
.rueda-caja{position:relative}
.rueda-pista{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:4px calc(50% - min(41vw,168px))}
.rueda-pista::-webkit-scrollbar{display:none}
.ficha{scroll-snap-align:center;flex:0 0 auto;width:min(82vw,336px);text-align:left;
  padding:24px 24px 22px;border-radius:var(--radio);background:var(--sup);
  border:1px solid var(--linea);backdrop-filter:blur(6px);
  transition:border-color .3s,background .3s,transform .3s}
.ficha:hover{border-color:var(--acento);background:var(--sup-alza)}
.ficha-tipo{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);margin:0 0 12px;font-weight:600}
.ficha h3{font-size:18px;min-height:2.6em}
.ficha-fecha{margin:14px 0 0;font-size:14.5px;color:var(--tx)}
.ficha-lugar{margin:2px 0 18px;font-size:13.5px;color:var(--tx-3)}
.rueda-mandos{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:18px}
.rueda-puntos{display:flex;gap:7px}
.rueda-pausa{width:24px;height:24px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--tx-3);cursor:pointer;font-size:9px;
  line-height:1;letter-spacing:1px;transition:.2s}
.rueda-pausa:hover{color:var(--tx)}
.rueda-pausa[hidden]{display:none!important}
.rueda-puntos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.25);cursor:pointer;transition:.25s}
.rueda-puntos button.on{background:var(--acento);transform:scale(1.35)}
/* Flechas: antes solo habia puntos y en computadora nada invitaba a avanzar.
   En telefono no salen: ahi el dedo ya arrastra, y estorbarian. */
.rueda-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--linea);background:var(--sup);backdrop-filter:blur(6px);
  color:var(--tx-2);font-size:22px;line-height:1;transition:.2s}
.rueda-flecha:hover:not(:disabled){color:var(--acento);border-color:var(--acento)}
.rueda-flecha:disabled{opacity:.25;cursor:default}
.rueda-izq{left:0}
.rueda-der{right:0}
.rueda-sola .rueda-mandos,.rueda-sola .rueda-flecha{display:none}
@media (max-width:760px){.rueda-flecha{display:none}}

.portada-cal{max-width:880px;margin:0 auto;padding:clamp(30px,5vw,56px) 0 20px}

/* ── la portada respira ──────────────────────────────────────────────────
   4 s inhala, 2 s sostiene, 6 s exhala: un ciclo de 12 s. La luz del orbe
   crece y las nervaduras se marcan al inhalar; al exhalar regresa despacio.
   Va en .respira, una capa DENTRO del orbe, porque al orbe mismo le cambia
   el transform el codigo que lo hace seguir al cursor: animarlo directo
   haria que uno pisara al otro. Solo transform y opacity, que el telefono
   anima sin volver a pintar. Los colores ya vienen mas saturados que en el
   resto del sitio: un filter:saturate() obligaria a repintar cada cuadro. */
.p-index .lente{background:none;top:50%}
/* XIKAL y el orbe comparten centro: la mitad de la pantalla. El orbe va en
   el 50 % (en las otras paginas, 44 %) y la portada mide una pantalla entera
   contando el menu, que es pegajoso y ocupa ~68 px arriba; por eso sube esa
   misma medida. Antes XIKAL quedaba ~65 px abajo del orbe y en el iPhone se
   veia chueco (8 oct 2026). La palabra de la respiracion va suelta abajo,
   para que no empuje a XIKAL fuera del centro. */
.p-index .portada-alto{position:relative;min-height:100svh;margin-top:-68px}
.p-index .respira{animation:respira 12s ease-in-out infinite;
  background:radial-gradient(circle at 50% 50%,rgba(255,230,190,.42) 0%,
    rgba(247,172,82,.45) 26%,rgba(236,90,108,.40) 50%,transparent 72%)}
.p-index .tex-ven{animation:lineas 12s ease-in-out infinite}
@keyframes respira{0%{transform:scale(.84)}33.3%,50%{transform:scale(1.12)}
  100%{transform:scale(.84)}}
@keyframes lineas{0%{opacity:.22}33.3%,50%{opacity:.48}100%{opacity:.22}}
/* La palabra que acompana, en el mismo ciclo y arrancando a la vez. */
.ritmo{position:absolute;left:0;right:0;height:1.6em;margin:0;
  top:calc(50% + clamp(58px,16.5vw,248px) * .46 + 24px);
  font-size:clamp(16px,.5vw + 14px,19px);letter-spacing:.32em;color:var(--tx-2)}
.ritmo span{position:absolute;left:50%;transform:translateX(-50%);opacity:0;
  white-space:nowrap}
.ritmo .r1{animation:r1 12s ease-in-out infinite}
.ritmo .r2{animation:r2 12s ease-in-out infinite}
.ritmo .r3{animation:r3 12s ease-in-out infinite}
@keyframes r1{0%,2%{opacity:0}8%,27%{opacity:1}33%,100%{opacity:0}}
@keyframes r2{0%,33%{opacity:0}37%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes r3{0%,50%{opacity:0}56%,92%{opacity:1}98%,100%{opacity:0}}

/* ── las frases: una a la vez, la anterior se disuelve ───────────────────
   La seccion mide una pantalla mas un tramo (--paso) por frase; la caja de
   adentro se queda pegada y app.js enciende la frase segun cuanto se ha
   bajado. En celular el tramo es mas largo y el scroll se detiene a la
   mitad de cada uno: con el dedo se bajaba tan rapido que la segunda frase
   desaparecia antes de leerse (8 oct 2026). */
.mani{--paso:50svh;position:relative;height:calc(100svh + var(--n,3) * var(--paso))}
.mani-parada{position:absolute;left:0;width:1px;height:1px;
  top:calc((var(--i) + .5) * var(--paso))}
@media(max-width:760px){
  .mani{--paso:60svh}
  html:has(body.p-index){scroll-snap-type:y proximity}
  .mani-parada{scroll-snap-align:start}
}
.mani-fija{position:sticky;top:0;height:100svh;display:grid;place-items:center;
  padding:0 26px}
.mani-frases{position:relative;max-width:780px;width:100%;min-height:8em}
.frase{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  margin:0;font-family:var(--f-disp);font-weight:300;font-size:clamp(25px,4.2vw,44px);
  line-height:1.28;opacity:0;filter:blur(10px);transform:scale(.97);
  transition:opacity .55s ease,filter .55s ease,transform .55s ease}
.frase.activa{opacity:1;filter:none;transform:none}

/* ── Nosotros y Books en la portada ──────────────────────────────────────
   Suben mas lento y desde mas abajo que en las otras paginas: aqui son
   parte del recorrido, no contenido que se busca. */
.portada-sec{text-align:center}
.portada-sec .sub{margin:18px auto 0}
.p-index .rev{transform:translateY(60px);transition-duration:1.3s}
.portada-mas{margin-top:34px}
.ovalos{display:flex;justify-content:center;gap:clamp(18px,3.4vw,30px);margin-bottom:40px}
.oval{width:clamp(130px,28vw,210px);height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:50%;outline:1px solid rgba(242,179,102,.45);outline-offset:5px}
.oval+.oval{transition-delay:.18s}
.libros{display:grid;gap:18px;max-width:1040px;margin:40px auto 0;text-align:left}
@media(min-width:820px){.libros{grid-template-columns:repeat(3,1fr)}}
.libro{display:flex;flex-direction:column;padding:28px;border-radius:20px;background:var(--sup);
  border:1px solid var(--linea)}
.libro:hover{border-color:var(--acento)}
.libro:nth-child(2){transition-delay:.15s}
.libro:nth-child(3){transition-delay:.3s}
.libro h3{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;
  letter-spacing:.08em;margin:0 0 8px;font-size:20px}
.libro p{color:var(--tx-2);font-size:15px}
/* El hueco de abajo: portada o "Proximamente", centrado y del mismo alto en
   las tres tarjetas, para que los titulos queden parejos. */
.libro-medio,.man-medio{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;margin:auto 0 4px;padding-top:26px;min-height:220px}
.man-medio{margin-bottom:22px;min-height:326px}
.pronto{font-family:var(--f-disp);font-size:16px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--acento);text-align:center}
.libro-tapa{display:block;width:100%;max-width:150px}
.libro-tapa img,.man-tapa img{display:block;width:100%;height:auto;border-radius:6px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}

/* ── la portada y la vista previa de los Books ───────────────────────────
   La portada abre la vista previa, igual que el boton de texto. El visor no
   cuenta paginas a proposito: la muestra salta paginas y "2 de 5" haria
   pensar en un libro de cinco. */
.man-tapa{display:block;width:100%;max-width:200px;margin:0;padding:0;
  border:0;background:none;cursor:pointer;transition:transform .3s}
.man-tapa:hover{transform:translateY(-3px)}
.man-ver{font-size:14px}
.muestra{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;
  border:0;background:rgba(0,5,28,.96);color:var(--tx)}
.muestra::backdrop{background:rgba(0,5,28,.6)}
.muestra[open]{display:flex;flex-direction:column}
.muestra-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad-sec)}
.muestra-t{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-2)}
.muestra-x{width:42px;height:42px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--linea);background:var(--sup);color:var(--tx);font-size:22px;line-height:1}
.muestra-x:hover{border-color:var(--acento);color:var(--acento)}
.muestra-caja{position:relative;flex:1;min-height:0}
.muestra-pista{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior:contain}
.muestra-pista::-webkit-scrollbar{display:none}
/* El foco se le da a la pista para que las flechas del teclado funcionen
   desde que abre; el aro de foco ahi solo se veia como una raya dorada. */
.muestra-pista:focus{outline:none}
.muestra-pista img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;
  scroll-snap-align:center;padding:0 12px 20px}
.muestra-flecha{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  padding:0;border-radius:50%;cursor:pointer;border:1px solid var(--linea);
  background:rgba(0,11,55,.8);color:var(--tx);font-size:24px;line-height:1}
.muestra-flecha:hover:not(:disabled){border-color:var(--acento);color:var(--acento)}
.muestra-flecha:disabled{opacity:.25;cursor:default}
.muestra-izq{left:var(--pad-sec)}
.muestra-der{right:var(--pad-sec)}
@media(max-width:760px){.muestra-flecha{display:none}}
/* ── secciones ─────────────────────────────────────────────────────────── */
.sec{position:relative;padding:clamp(74px,9vw,132px) var(--pad-sec)}
.sec-primera{padding-top:clamp(48px,6vw,84px)}
.sec-pegada{padding-top:clamp(30px,4vw,52px)}
/* El menu va pegado arriba: sin esto taparia el titulo de la seccion a la
   que baja el boton "Elegir". */
#catalogo{scroll-margin-top:92px}
.sec-head{max-width:760px;margin:0 auto clamp(44px,5vw,68px);text-align:center}
.dos-col{display:grid;gap:clamp(36px,5vw,72px);max-width:1080px;margin:0 auto;
  grid-template-columns:1fr}
@media(min-width:900px){.dos-col{grid-template-columns:1.25fr .75fr}}
.nos-p{color:var(--tx-2);margin:22px 0 0;max-width:56ch}
.lista-no{list-style:none;margin:0;padding:32px 30px;border-radius:var(--radio);
  background:var(--sup);border:1px solid var(--linea);align-self:start}
.lista-no li{padding:12px 0;border-bottom:1px solid var(--linea);color:var(--tx-2);
  font-size:15.5px}
.lista-no li:last-child{border-bottom:0}
.lista-no-t{font-size:10.5px!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600;padding-top:0!important}
.caja-grande{max-width:760px;margin:0 auto;text-align:center;
  padding:clamp(44px,6vw,76px) clamp(24px,4vw,54px);border-radius:var(--radio);
  background:var(--sup);border:1px solid var(--borde-fuerte)}
.caja-grande .sub{margin:20px auto 32px}
.vacio{text-align:center;padding:60px 20px}
.vacio-t{font-size:19px;color:var(--tx-2);margin-bottom:26px}

/* ── calendario ────────────────────────────────────────────────────────── */
.cal{max-width:880px;margin:0 auto;padding:clamp(20px,3vw,30px);
  border-radius:var(--radio);background:var(--sup);border:1px solid var(--linea)}
.cal-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:20px}
.cal-mes{font-family:var(--f-disp);font-size:clamp(17px,2.2vw,23px);letter-spacing:.14em;
  text-transform:uppercase;font-weight:300}
.cal-flecha{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);
  background:transparent;color:var(--tx-2);cursor:pointer;transition:.2s;font-size:15px}
.cal-flecha:hover{border-color:var(--acento);color:var(--acento)}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-dias span{text-align:center;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3);padding:6px 0}
.cal-reja{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-celda{position:relative;min-height:62px;border-radius:10px;
  border:1px solid transparent;background:rgba(255,255,255,.025);
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:7px 8px;font:inherit;font-size:13px;color:var(--tx-3);
  text-align:left;cursor:pointer;transition:.2s;overflow:hidden}
.cal-celda:hover{border-color:var(--borde-fuerte);color:var(--tx-2)}
.cal-num{line-height:1;font-variant-numeric:tabular-nums}
.cal-celda.fuera{background:transparent;border:0;pointer-events:none}
.cal-celda.hoy{border-color:var(--borde-fuerte)}
.cal-celda.hoy .cal-num{color:var(--tx);font-weight:700}
.cal-celda.con-ev{background:rgba(242,179,102,.1);
  border-color:rgba(242,179,102,.4);color:var(--tx-2)}
.cal-celda.con-ev .cal-num{color:var(--tx);font-weight:600}
.cal-celda.activa{background:rgba(242,179,102,.24);border-color:var(--acento)}
.cal-punto{width:5px;height:5px;border-radius:50%;background:var(--acento);
  flex:0 0 auto}
.cal-breve{display:none;font-size:10.5px;line-height:1.3;color:var(--acento)}
.cal-breve span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
@media(min-width:820px){
  .cal-celda{min-height:92px}
  .cal-breve{display:block}
  .cal-punto{display:none}
}
.cal-detalle:empty{display:none}
.cal-detalle{margin-top:20px;padding:22px 24px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--linea)}
.cd-tipo{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);font-weight:600;margin-bottom:10px}
.cd-fecha{font-size:13.5px;color:var(--tx-3);margin:4px 0 16px}
.cd-datos{display:grid;gap:5px;font-size:14.5px;color:var(--tx-2);margin:20px 0}
.cd-datos b{font-weight:600;color:var(--tx);margin-right:6px}
.cd-uno + .cd-uno{margin-top:24px;padding-top:24px;border-top:1px solid var(--linea)}
.cd-desc{color:var(--tx-2);font-size:15px;max-width:62ch;margin:14px 0 0;
  line-height:1.6}
.cd-nada{color:var(--tx-2);font-size:15px}
.cd-nada span{color:var(--tx-3)}
.cal-nota{text-align:center;font-size:13px;color:var(--tx-3);margin-top:18px}

/* ── rejillas de contenido ─────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;list-style:none;
  padding:0;margin:0 auto clamp(40px,5vw,60px);max-width:840px}
.chips li,.tira li{font-size:13px;padding:9px 17px;border-radius:99px;
  border:1px solid var(--linea);background:var(--sup);color:var(--tx-2);
  white-space:nowrap}

/* la tira de temas: se desliza sola de derecha a izquierda */
.tira{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tira-pista{display:flex;align-items:center;gap:10px;list-style:none;padding:4px 0;
  margin:0;width:max-content;animation:desliza 42s linear infinite}
.tira-copia{display:flex;align-items:center;gap:10px;margin-left:10px}
.tira:hover .tira-pista{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(calc(-50% - 5px))}}
@media(prefers-reduced-motion:reduce){
  .tira{-webkit-mask-image:none;mask-image:none}
  .tira-pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .tira-copia{display:none}
}
.lista-med,.planes,.mans,.prods{display:grid;gap:16px;max-width:1180px;margin:0 auto;
  grid-template-columns:1fr}
@media(min-width:640px){.lista-med,.prods{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.planes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.lista-med,.mans{grid-template-columns:repeat(3,1fr)}
  .prods{grid-template-columns:repeat(4,1fr)}}
@media(min-width:700px) and (max-width:959px){.mans{grid-template-columns:1fr 1fr}}
.med,.plan,.man,.prod{display:flex;flex-direction:column;padding:28px 26px;
  border-radius:var(--radio);background:var(--sup);border:1px solid var(--linea);
  transition:.28s}
.med:hover,.man:hover,.prod:hover{border-color:var(--acento);background:var(--sup-alza);
  transform:translateY(-4px)}
.med-cat,.prod-cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento);margin:0 0 12px;font-weight:600}
.med-min{font-size:13.5px;color:var(--tx-3);margin:8px 0 22px;flex:1}
.plan-alza{border-color:var(--acento);background:var(--sup-alza);
  box-shadow:0 30px 66px -40px var(--acento)}
.plan-precio{font-family:var(--f-disp);font-size:21px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--acento);margin:16px 0 0}
.plan-p{font-size:14.5px;color:var(--tx-2);margin:12px 0 28px;flex:1}
.man-p{font-size:14.5px;color:var(--tx-2);margin:14px 0 0}
.man-kit{margin:22px 0 0;padding:17px 19px;border-radius:12px;flex:1;
  border:1px solid var(--linea);background:rgba(255,255,255,.03)}
.man-kit-t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento);margin:0 0 8px;font-weight:600}
.man-kit p{font-size:14px;color:var(--tx-2)}
.man-precios{margin:22px 0 20px;border-top:1px solid var(--linea)}
.man-precios p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--linea);font-size:14px;color:var(--tx-2)}
.man-precios b{font-family:var(--f-disp);font-size:17px;letter-spacing:.04em;
  color:var(--tx);font-weight:400}
.man-btns{display:grid;gap:8px;grid-template-columns:1fr 1fr;min-height:41px}
/* El alto minimo es el de un boton: los que dicen Proximamente no traen
   boton, y sin esto su fila de precio quedaba mas abajo que la de los demas.
   Por lo mismo "Ya es tuyo" va en la esquina y no encima del titulo. */
.man{position:relative}
.man .sello{position:absolute;top:22px;right:22px;margin:0}
.prod-p{font-size:13.5px;color:var(--tx-2);margin:10px 0 0;flex:1}
.prod-precio{font-family:var(--f-disp);font-size:20px;letter-spacing:.05em;
  color:var(--acento);margin:16px 0 18px}
.buscador{max-width:460px;margin:0 auto 20px;text-align:center}
.buscador input{width:100%;padding:14px 20px;font:inherit;font-size:16px;
  color:var(--tx);background:rgba(255,255,255,.06);border:1px solid var(--linea);
  border-radius:var(--radio-btn);transition:.2s}
.buscador input:focus{border-color:var(--acento);background:rgba(255,255,255,.09)}
.buscador input::placeholder{color:var(--tx-3)}
.buscador-nada{margin-top:16px;font-size:14px;color:var(--tx-3)}
.filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 auto clamp(34px,4vw,52px)}
.filtros button{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:10px 18px;border-radius:99px;border:1px solid var(--linea);
  background:transparent;color:var(--tx-2);cursor:pointer;transition:.2s}
.filtros button:hover{color:var(--tx);border-color:var(--borde-fuerte)}
.filtros button.on{background:var(--acento);color:var(--sobre-acento);
  border-color:var(--acento);font-weight:600}
.prod[hidden]{display:none}

/* ── grabaciones ───────────────────────────────────────────────────────── */
.grabs{list-style:none;padding:0;margin:0 auto;max-width:880px;display:grid;gap:11px}
.grabs li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:20px 22px;border-radius:var(--radio);background:var(--sup);
  border:1px solid var(--linea);transition:.24s;cursor:pointer}
.grabs li:hover{border-color:var(--acento);transform:translateX(5px)}
.gr-play{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--acento);color:var(--acento);font-size:11px}
.gr-tipo{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:4px}
.gr-t{font-weight:600;font-size:15.5px}
.gr-m{font-size:13px;color:var(--tx-3);white-space:nowrap}

/* ── carrito ───────────────────────────────────────────────────────────── */
.carrito{display:grid;gap:20px;max-width:1000px;margin:0 auto;grid-template-columns:1fr}
@media(min-width:860px){.carrito{grid-template-columns:1.5fr .8fr;align-items:start}}
.carrito-lineas{display:grid;gap:11px}
.linea{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;
  padding:20px 22px;border-radius:var(--radio);background:var(--sup);
  border:1px solid var(--linea)}
.linea-n{font-weight:600;font-size:15.5px}
.linea-p{font-size:13px;color:var(--tx-3);margin-top:3px}
.cantidad{display:flex;align-items:center;gap:4px}
.cantidad button{width:30px;height:30px;border-radius:8px;border:1px solid var(--linea);
  background:transparent;color:var(--tx-2);cursor:pointer;transition:.2s}
.cantidad button:hover{border-color:var(--acento);color:var(--acento)}
.cantidad span{min-width:26px;text-align:center;font-size:15px}
.quitar{background:transparent;border:0;color:var(--tx-3);cursor:pointer;font-size:18px;
  padding:4px 6px;line-height:1}
.quitar:hover{color:var(--coral)}
.carrito-total{padding:28px 26px;border-radius:var(--radio);background:var(--sup);
  border:1px solid var(--borde-fuerte)}
.ct-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;font-size:15px;color:var(--tx-2)}
.ct-chico{font-size:13.5px;color:var(--tx-3)}
.ct-grande{border-top:1px solid var(--linea);margin-top:8px;padding-top:16px;
  font-size:17px;color:var(--tx)}
.ct-grande b{font-family:var(--f-disp);font-size:24px;letter-spacing:.04em;
  font-weight:400;color:var(--acento)}
.carrito-total .btn{margin-top:18px}
.ct-nota{font-size:12.5px;color:var(--tx-3);margin-top:14px;line-height:1.5}

/* ── cuenta ────────────────────────────────────────────────────────────── */
.form-caja{max-width:420px;margin:0 auto;padding:34px 32px;border-radius:var(--radio);
  background:var(--sup);border:1px solid var(--linea);display:grid;gap:8px}
.form-caja label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-3);margin-top:12px}
.form-caja input{padding:14px 18px;font:inherit;font-size:16px;color:var(--tx);
  background:rgba(255,255,255,.07);border:1px solid var(--borde-fuerte);
  border-radius:12px}
.form-caja input::placeholder{color:var(--tx-3)}
.form-caja .btn{margin-top:20px}
.form-nota{font-size:12.5px;color:var(--tx-3);margin-top:14px;line-height:1.5;
  text-align:center}
/* La nota que explica el segundo paso va arriba de todo, sin el aire que el
   resto de las notas lleva por ir al final de la caja. */
.form-nota-arriba{margin-top:0;color:var(--tx-2);font-size:13.5px}
/* Seis numeros separados, para que se lean de un vistazo contra el correo.
   El espacio de mas a la derecha compensa el que la ultima letra arrastra. */
.campo-codigo{text-align:center;font-size:26px;letter-spacing:.42em;
  text-indent:.42em;font-family:var(--f-disp)}
/* Un boton que se ve como liga: va dentro de una frase, no es una accion
   grande. Se hizo boton y no <a> porque no lleva a ninguna parte. */
.liga-texto{background:none;border:0;padding:0;font:inherit;color:var(--acento);
  text-decoration:underline;cursor:pointer}
/* Apagado mientras corre la cuenta regresiva de reenviar: sin subrayado, para
   que no se vea como algo en lo que se puede picar. */
.liga-texto:disabled{color:var(--tx-3);text-decoration:none;cursor:default}
/* Eran tres bloques; con "tus proximos talleres" fuera quedan dos, y a tres
   columnas uno se quedaba colgando solo. */
.espacio{display:grid;gap:16px;max-width:760px;margin:0 auto 16px;grid-template-columns:1fr}
@media(min-width:760px){.espacio{grid-template-columns:repeat(2,1fr)}}
/* Con un bloque escondido (Meditaciones, mientras no haya MP3) el que queda
   ocupa todo el ancho, en vez de media pantalla y un hueco al lado. */
.espacio>[hidden]{display:none}
@media(min-width:760px){.espacio:has(>[hidden]){grid-template-columns:1fr}}
.esp-bloque{padding:28px 26px;border-radius:var(--radio);background:var(--sup);
  border:1px solid var(--linea)}
.esp-bloque h3{margin-bottom:16px}
.esp-lista{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.esp-lista li{border-bottom:1px solid var(--linea);font-size:15px}
.esp-lista li:last-child{border-bottom:0}
.esp-vacio{display:grid;gap:3px;padding:13px 0}
/* El renglon entero es la liga, no solo el titulo: el area para picarle es la
   fila completa, que en telefono es la diferencia entre atinarle y no. */
.esp-fila{display:grid;gap:3px;padding:13px 10px 13px 0;color:inherit;
  border-radius:8px;transition:.18s}
.esp-fila:hover,.esp-fila:focus-visible{color:var(--acento);padding-left:10px;
  background:var(--sup-alza)}
.esp-t{font-size:15px}
.esp-meta{font-size:12.5px;color:var(--tx-3)}
/* Al llegar desde "tu espacio" la tarjeta se senala sola un momento: si no,
   la pagina salta y no queda claro cual de todas era. */
.med:target,.man:target{border-color:var(--acento);background:var(--sup-alza)}
.med,.man{scroll-margin-top:100px}

/* ── la página de estado ────────────────────────────────────────────────
   Interna: no se parece al resto del sitio a proposito. Lo unico que importa
   aqui es distinguir de un vistazo lo que pasa de lo que no. */
.estado{max-width:720px;margin:0 auto;padding:28px 26px;border-radius:var(--radio);
  background:var(--sup);border:1px solid var(--linea)}
.estado-resumen{font-family:var(--f-disp);font-size:19px;letter-spacing:.04em;
  margin:0 0 20px}
.estado-bien{color:var(--acento)}
.estado-mal{color:#E5806F}
.estado-lista{list-style:none;padding:0;margin:0}
.estado-lista li{display:grid;grid-template-columns:24px 1fr;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--linea);font-size:15px}
.estado-lista li:last-child{border-bottom:0}
.er-cuerpo{display:grid;gap:3px}
.er-marca{font-size:14px;line-height:1.5;text-align:center;border-radius:99px;
  height:22px;width:22px}
.er-bien .er-marca{color:var(--acento);border:1px solid var(--acento)}
.er-mal .er-marca{color:#E5806F;border:1px solid #E5806F}

/* ── la Vista de Xikal ───────────────────────────────────────────────────
   Interna, como estado. Una sola columna a proposito: se usa en el celular
   el dia del encuentro, con una mano y el QR en la otra. */
.vista{display:grid;gap:16px;max-width:720px;margin:0 auto}
.vista-aviso{max-width:720px;margin:0 auto 16px}
.vista-form{display:grid;gap:14px}
.vista-form label{display:grid;gap:8px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3)}
.vista-form input,.vista-form select,.vista-form textarea{padding:12px 16px;font:inherit;
  font-size:16px;letter-spacing:0;text-transform:none;color:var(--tx);
  background:rgba(255,255,255,.07);border:1px solid var(--borde-fuerte);border-radius:12px}
.vista-form select option{color:#14100A}
.vista-form input::placeholder,.vista-form textarea::placeholder{color:var(--tx-3)}
.vista-form .btn{justify-self:start}
.vista-renglon{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0}
.vista-renglon .esp-t{word-break:break-all}
.vista-sub{margin:26px 0 6px;font-size:15px}
.vista-nota{margin:-8px 0 10px}
.vista-nota-abajo{margin:10px 0 0}
.esp-lista+.vista-form{margin-top:20px}
.vista-borrar{margin-top:26px;font-size:13px;text-align:right}
/* El QR siempre en blanco y negro con su margen blanco: con el fondo marino
   detras, varios celulares no lo leen. */
.vista-qr{margin:18px 0 0;display:grid;gap:12px;justify-items:start}
.vista-qr-dibujo{background:#fff;padding:10px;border-radius:12px;width:220px;line-height:0}
.vista-qr-dibujo svg{width:100%;height:auto}
.vista-qr-botones{display:flex;gap:10px;flex-wrap:wrap;margin:0}
/* "Mostrar en grande": el QR ocupa la pantalla para que lo escaneen del
   celular o la laptop, sin imprimir. Se cierra tocando donde sea. */
.vista-grande{position:fixed;inset:0;z-index:200;margin:0;background:#fff;
  place-content:center;justify-items:center;cursor:zoom-out}
.vista-grande .vista-qr-dibujo{width:min(88vw,88vh);padding:0}
.vista-grande .vista-qr-botones{display:none}

/* ── la barrita de "agregaste" ───────────────────────────────────────────
   DE LARGO FIJO a proposito. Antes el aviso era el boton mismo, que cambiaba
   a "Agregado" y volvia: con varios articulos no se entendia cuantos llevabas.
   Y una barrita que crece con cada nombre de articulo brinca de tamano cada
   vez. Esta dice siempre lo mismo y solo le cambia el numero, asi que se
   queda quieta. Tampoco se apilan: es una sola en toda la pagina. */
.barrita{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);
  z-index:60;display:flex;align-items:center;gap:14px;width:min(340px,calc(100vw - 32px));
  justify-content:space-between;padding:13px 10px 13px 20px;border-radius:99px;
  background:var(--sup-alza);border:1px solid var(--acento);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  opacity:0;transition:opacity .22s,transform .22s}
.barrita.se-ve{opacity:1;transform:translate(-50%,0)}
.barrita-t{font-size:13.5px;color:var(--tx);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.barrita-liga{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acento);border:1px solid var(--acento);border-radius:99px;
  padding:8px 15px;white-space:nowrap;transition:.2s}
.barrita-liga:hover{background:var(--acento);color:var(--sobre-acento)}
@media (prefers-reduced-motion:reduce){
  .barrita{transition:opacity .22s;transform:translate(-50%,0)}
}

/* ── pie ───────────────────────────────────────────────────────────────── */
.pie{padding:clamp(60px,8vw,92px) var(--pad-sec);border-top:1px solid var(--linea);
  text-align:center}
.pie-marca{height:38px;color:var(--tx);opacity:.9;margin-bottom:28px;display:flex;
  justify-content:center}
.pie-ligas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 28px}
.pie-ligas a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-2);padding:9px 18px;border-radius:99px;border:1px solid var(--linea);
  transition:.2s}
.pie-ligas a:hover{color:var(--acento);border-color:var(--acento)}
.pie-legal{font-size:13px;color:var(--tx-3);max-width:56ch;margin:0 auto;line-height:1.6}
.pie-nota{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);
  margin:28px 0 0;opacity:.75}

/* ── lo que todavia falta (solo se ve en modo borrador) ────────────────── */
.falta{display:inline-block;font-size:11px;line-height:1.3;letter-spacing:.02em;
  color:#F2B366;background:rgba(242,179,102,.13);
  border:1px dashed rgba(242,179,102,.5);border-radius:8px;padding:4px 9px;
  text-transform:none;font-weight:500}
.aviso-borrador{position:fixed;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:70;display:flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:100px;background:rgba(0,7,42,.9);
  backdrop-filter:blur(14px);border:1px solid rgba(242,179,102,.45);
  color:#F2B366;font-size:12.5px;text-decoration:none;transition:.2s}
.aviso-borrador:hover{background:rgba(242,179,102,.16)}
.aviso-borrador b{font-weight:700}
@media(min-width:900px){.aviso-borrador{bottom:16px}}

/* ── la lista de pendientes ─────────────────────────────────────────────── */
.pend-grupo{max-width:900px;margin:0 auto clamp(30px,4vw,46px)}
.pend-grupo h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);margin:0 0 12px;font-weight:600;
  font-family:ui-monospace,Consolas,monospace}
.pend-titulo{max-width:900px;margin:clamp(34px,4vw,50px) auto 18px;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.pend-titulo.urge{color:var(--acento)}
.pend-titulo.normal{color:var(--tx-3)}
.pend-lista.urge li{border-color:rgba(242,179,102,.45);
  background:rgba(242,179,102,.07)}
.legal{max-width:760px;margin:0 auto;color:var(--tx-2);font-size:15.5px;
  line-height:1.75}
.legal h3{font-family:var(--f-tx);font-size:16px;font-weight:600;color:var(--tx);
  margin:38px 0 14px;letter-spacing:-.005em}
.legal h3:first-child{margin-top:0}
.legal p{margin:0 0 14px}
.pie-legal-liga{margin:18px 0 0;font-size:13px}
.pie-legal-liga a{color:var(--tx-2);text-decoration:underline;
  text-underline-offset:3px}
.pie-legal-liga a:hover{color:var(--acento)}
.pend-como{max-width:900px;margin:0 auto clamp(30px,4vw,44px);padding:26px 28px;
  border-radius:16px;background:var(--sup);border:1px solid var(--linea)}
.pend-como h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);margin:0 0 12px;font-weight:600}
.pend-como h3 + *{margin-top:0}
.pend-como ol,.pend-como ul{margin:0 0 22px;padding-left:20px;color:var(--tx-2);
  font-size:14.5px}
.pend-como li{margin-bottom:7px}
.pend-como b{color:var(--tx);font-weight:600}
.pend-como code{font-family:ui-monospace,Consolas,monospace;font-size:13px;
  background:rgba(255,255,255,.07);padding:2px 6px;border-radius:5px}
.pend-como > *:last-child{margin-bottom:0}
.pend-lista{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pend-lista li{display:grid;grid-template-columns:1fr;gap:4px;padding:15px 18px;
  border-radius:14px;background:var(--sup);border:1px solid var(--linea)}
@media(min-width:760px){.pend-lista li{grid-template-columns:230px 1fr;gap:18px;
  align-items:baseline}}
.pend-donde{font-size:12px;letter-spacing:.05em;color:var(--tx-3);
  font-family:ui-monospace,Consolas,monospace}
.pend-que{color:var(--tx)}
.pend-cuenta{text-align:center;color:var(--tx-2);margin:0 auto 8px;max-width:60ch}
.pend-cero{text-align:center;color:var(--acento);font-size:19px}

/* ── lo que ya es tuyo ─────────────────────────────────────────────────── */
.sello{align-self:flex-start;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--sobre-acento);
  background:var(--acento);padding:5px 11px;border-radius:99px;margin-bottom:12px}
.es-mio{border-color:rgba(242,179,102,.5)}
/* Lo que ya es tuyo no lleva precio: junto a "Descargar" parecia que bajarlo
   volvia a cobrar. Se oculta sin quitarle su lugar para que la fila de abajo
   siga alineada con la de las otras tarjetas. */
.es-mio .man-precios{visibility:hidden}
/* Tampoco lleva vista previa: ya lo puede descargar entero. La portada se
   queda como imagen, sin el gesto de boton. */
.es-mio .man-ver{display:none}
.man-tapa:disabled{cursor:default;transform:none;opacity:1}
.esp-vacio{color:var(--tx-3);font-size:14px}
.esp-vacio a{color:var(--acento);text-decoration:underline}

/* ── entrar con Google ─────────────────────────────────────────────────── */
.form-recado{margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:13.5px;
  line-height:1.5;background:rgba(242,179,102,.12);border:1px solid rgba(242,179,102,.35);
  color:var(--tx-2)}
.form-recado.recado-malo{background:rgba(230,104,118,.12);border-color:rgba(230,104,118,.4)}
.o-bien{display:flex;align-items:center;gap:14px;margin:22px 0 4px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--linea)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#1F1F1F;border-color:#fff}
.btn-google:hover{filter:brightness(.94)}
.btn-google svg{width:17px;height:17px;flex:0 0 auto}

/* ── los sellos ────────────────────────────────────────────────────────────
   Todo en un solo bloque, arriba de lo comprado: el universo, la linea de lo
   que falta y el regalo si hay. Las clases van con `uni-` porque `.sello` ya
   es la etiqueta de "ya es tuyo" de las tarjetas. */
.uni-bloque{max-width:760px;margin:0 auto 16px;text-align:center}
.uni{position:relative;width:100%;max-width:340px;margin:4px auto 0;aspect-ratio:1}
.uni-svg{width:100%;height:100%;overflow:visible}
.uni-centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.uni-num{font-family:var(--f-disp);font-size:54px;font-weight:300;line-height:1}
.uni-de{font-size:13px;color:var(--tx-3);margin-top:4px}
.uni-aro{fill:none;stroke:var(--linea);stroke-width:3}
.uni-aro-lleno{fill:none;stroke:var(--acento);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset 1s ease}
.uni-hilo{stroke:var(--acento);stroke-width:1.5;opacity:.55;stroke-dasharray:200}
.uni-traza{animation:uniTraza 1s .3s ease both}
@keyframes uniTraza{from{stroke-dashoffset:200}}
.uni-lugar{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center}
.uni-lugar:focus-visible .uni-hueco,.uni-lugar:focus-visible circle:last-of-type{
  stroke:var(--tx);stroke-width:2}
.uni-elegido circle:last-of-type{stroke:var(--tx);stroke-width:2}
.uni-halo{opacity:.18;transform-box:fill-box;transform-origin:center;
  animation:uniLate 3s ease-in-out infinite}
@keyframes uniLate{50%{transform:scale(1.18);opacity:.35}}
.uni-nuevo{animation:uniLlega .9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes uniLlega{0%{transform:scale(0);opacity:0}60%{opacity:1}100%{transform:scale(1)}}
.uni-hueco{fill:transparent;stroke:var(--borde-fuerte);stroke-width:1.5;stroke-dasharray:4 5}
.uni-n{font-family:var(--f-disp);font-size:18px;text-anchor:middle;fill:var(--sobre-acento)}
.uni-n-vacio{font-family:var(--f-tx);font-size:12px;fill:var(--tx-3)}
.uni-marca{font-size:15px;text-anchor:middle}
.uni-falta{margin:14px auto 0;max-width:460px;font-size:15px}
.uni-toque{margin:6px auto 0;min-height:1.5em;font-size:13px;color:var(--tx-3)}
.uni-regalo{display:grid;gap:3px;margin:16px auto 0;max-width:460px;padding:14px 16px;
  border-radius:14px;background:rgba(242,179,102,.09);border:1px solid rgba(242,179,102,.3)}
.uni-regalo .esp-t{color:var(--acento)}

/* La ventana del sello nuevo. Se arma y se quita desde app.js. */
.uni-velo{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(0,5,28,.8);backdrop-filter:blur(6px)}
.uni-ventana{width:100%;max-width:400px;padding:28px 24px;border-radius:22px;text-align:center;
  background:#051552;border:1px solid var(--borde-fuerte);animation:uniSube .4s ease both}
@keyframes uniSube{from{transform:translateY(20px);opacity:0}}
.uni-ventana h3{font-size:26px;margin:14px 0 6px}
.uni-ventana p{color:var(--tx-2);font-size:15px;margin:0 0 8px}
.uni-ventana .btn{margin-top:12px}
.uni-v-regalo{color:var(--acento)!important}
.uni-grande{width:96px;height:96px;border-radius:50%;margin:0 auto;display:flex;
  align-items:center;justify-content:center;box-shadow:0 0 40px currentColor;
  animation:uniLlega .9s cubic-bezier(.3,1.6,.5,1) both}
.uni-grande span{font-family:var(--f-disp);font-size:36px;color:var(--sobre-acento)}
.uni-confeti{position:fixed;top:-10px;width:8px;height:8px;border-radius:50%;z-index:61;
  pointer-events:none;animation:uniCae linear forwards}
@keyframes uniCae{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}
@media(prefers-reduced-motion:reduce){
  .uni-halo,.uni-nuevo,.uni-traza,.uni-grande,.uni-ventana{animation:none}
}

/* ── aparicion y transicion de pagina ──────────────────────────────────── */
.rev{opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rev.vis{opacity:1;transform:none}
@view-transition{navigation:auto}
::view-transition-old(root){animation:sale .32s ease forwards}
::view-transition-new(root){animation:entraP .42s cubic-bezier(.2,.7,.3,1)}
@keyframes sale{to{opacity:0;transform:translateY(-12px)}}
@keyframes entraP{from{opacity:0;transform:translateY(16px)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev,.pal,.p-index .rev{opacity:1;transform:none}
  .grano{animation:none}
  .p-index .respira,.p-index .tex-ven{animation:none}
  .ritmo{display:none}
  .mani{height:auto}
  .mani-parada{display:none}
  .mani-fija{position:static;height:auto;padding:clamp(60px,10vh,110px) 26px}
  .mani-frases{display:grid;gap:36px;min-height:0}
  .frase{position:static;opacity:1;filter:none;transform:none}
  .telon{display:none}
  *{transition:none!important}
}