/* Apartados nuevos v3.2 (cada uno con su efecto; JS en assets/js/efectos.js).
   Tokens, vidrio y botones vienen de base.css. */

/* ── Cursor de vidrio: solo con mouse, en toda la web ── */
.cursor{position:fixed;left:0;top:0;z-index:300;width:36px;height:36px;border-radius:18px;pointer-events:none;opacity:0;
  background:rgba(250,250,250,.07);box-shadow:inset 0 0 0 1px rgba(250,250,250,.4),inset 0 1px 1px rgba(255,255,255,.45),0 10px 30px -10px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(3px) saturate(180%) brightness(1.2);backdrop-filter:blur(3px) saturate(180%) brightness(1.2);
  transition:opacity .25s,background-color .3s,box-shadow .3s,scale .25s var(--ease-pop)}
.cursor.is-on{opacity:1}
.cursor.is-abajo{scale:.86}
.cursor--boton{background:rgba(250,250,250,.1);box-shadow:inset 0 0 0 1px rgba(250,250,250,.3);-webkit-backdrop-filter:none;backdrop-filter:none}
.cursor--texto,.cursor--punto{background:rgba(250,250,250,.92);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.cursor.is-claro{background:rgba(10,10,10,.05);box-shadow:inset 0 0 0 1px rgba(10,10,10,.42),0 10px 24px -12px rgba(10,10,10,.35)}
.cursor.is-claro.cursor--boton{background:rgba(10,10,10,.06);box-shadow:inset 0 0 0 1px rgba(10,10,10,.22)}
.cursor.is-claro.cursor--texto,.cursor.is-claro.cursor--punto{background:rgba(10,10,10,.88);box-shadow:none}
.cursor-vidrio,.cursor-vidrio *{cursor:none}
.cursor-vidrio :is(input,textarea,select,[contenteditable]){cursor:text}
.cursor-vidrio select{cursor:default}

/* ── Manifiesto: frase con peso ── */
.sec--manifiesto{padding-block:clamp(96px,14vw,190px)}
.peso{margin-top:22px;max-width:17ch;font-size:clamp(2.5rem,8.2vw,6.8rem);font-weight:680;line-height:1;letter-spacing:-.045em;font-variation-settings:"opsz" 32}
.peso__p{display:inline-block;white-space:nowrap}
.peso__c{display:inline-block}

/* ── Disponibilidad ── */
.disp{display:grid;gap:10px;margin-top:36px}
@media (min-width:760px){.disp{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.disp{grid-template-columns:1.4fr 1fr 1.2fr 1fr}}
.disp__i{display:grid;gap:10px;padding:18px 20px;border-radius:var(--r-md)}
.disp__k{font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.disp__v{display:flex;align-items:center;gap:9px;font-size:clamp(18px,1.9vw,22px);font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.disp__punto{flex:none;width:7px;height:7px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px rgba(250,250,250,.14)}

/* ── Cierre: la firma que vibra + gota magnética ── */
.sec--final .sec__in{display:grid;justify-items:start}
.hilos{position:relative;width:100%;height:clamp(190px,40vw,420px);margin-bottom:28px;touch-action:pan-y}
.hilos canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hilos__svg{position:absolute;inset:12%;width:76%;height:76%;fill:none;stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.efx-js .hilos__svg{visibility:hidden}
.final__t{max-width:16ch}
.final__accion{margin-top:28px}
.gota-zona{position:relative;display:inline-block}
.gota-zona__goo{position:absolute;inset:-70px;display:none;filter:url(#goo);pointer-events:none}
.gota-zona.is-viva .gota-zona__goo{display:block}
.gota-zona__pill{position:absolute;inset:70px;border-radius:var(--r-pill);background:var(--cta)}
.gota-zona__drop{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--cta);transform:scale(0)}
.gota-zona .btn{position:relative;z-index:1}


/* ── Contacto: credencial de vidrio colgada de un cordón (JS en assets/js/credencial.js) ──
   Sin JS queda quieta sobre la cinta de CSS; con JS (.is-viva) la cinta es un canvas
   y la tarjeta se mueve por transform. «44px» = PIE en credencial.js. */
.cred{--cw:clamp(176px,15vw,214px);--ch:calc(var(--cw) * 1.42);position:relative;height:calc(var(--ch) + clamp(190px,18vw,240px));
  margin-bottom:30px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.cred canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cred__cinta{position:absolute;top:0;left:50%;bottom:calc(var(--ch) + 44px);width:10px;margin-left:-5px;
  background:linear-gradient(rgba(236,236,236,0),rgba(236,236,236,.94) 70px);box-shadow:0 0 0 1.5px rgba(10,10,10,.35)}
.cred__tarjeta{position:absolute;left:50%;bottom:44px;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);overflow:hidden;
  touch-action:none;cursor:grab;transform-origin:50% 0}
.cred.is-viva .cred__cinta{display:none}
.cred.is-viva .cred__tarjeta{left:0;top:0;bottom:auto;margin:0;will-change:transform}
.cred.is-arrastrando .cred__tarjeta{z-index:5;cursor:grabbing}
.cred__ranura{position:absolute;z-index:2;top:12px;left:50%;width:34px;height:6px;margin-left:-17px;border-radius:3px;
  background:rgba(10,10,10,.6);box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(250,250,250,.22)}
.cred__cara{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:32px 16px 15px}
.cred__dorso{visibility:hidden;transform:scaleX(-1)}             /* girada 180°, el espejo la deja legible */
.cred__tarjeta.is-dorso .cred__frente{visibility:hidden}
.cred__tarjeta.is-dorso .cred__dorso{visibility:visible}
.cred__k{display:flex;justify-content:space-between;gap:8px;margin:0;font:500 9.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.cred__mono{width:62%;align-self:center;overflow:visible;fill:none;stroke:var(--paper);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 14px rgba(250,250,250,.28))}
.cred__dorso .cred__mono{width:30%;align-self:flex-start;stroke-width:4;filter:none}
.cred__id b{display:block;font-size:17px;font-weight:650;line-height:1.15;letter-spacing:-.025em}
.cred__id span{display:block;margin-top:5px;font-size:12px;line-height:1.3;color:var(--fg-2)}
.cred__vale{margin:0;font-size:15px;font-weight:620;line-height:1.25;letter-spacing:-.02em}
.cred__barras{height:34px;opacity:.78;background:repeating-linear-gradient(90deg,var(--paper) 0 2px,transparent 2px 4px,var(--paper) 4px 5px,transparent 5px 9px,var(--paper) 9px 12px,transparent 12px 14px)}
.cred__luz{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,calc(.2 * var(--foco,0))),transparent 58%),
    linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 47%,rgba(255,255,255,.07) 53%,transparent 62%) var(--brillo,0%) 0/300% 100% no-repeat}
.cred__pista{position:absolute;left:0;right:0;bottom:6px;justify-content:center;margin:0;opacity:0;transition:opacity .6s}
.cred.is-viva .cred__pista{opacity:1}