/* ==========================================================================
   Jupá · Sistema de diseño (única fuente de verdad)
   Todas las páginas cargan este archivo PRIMERO. Ningún otro CSS debe
   declarar @font-face ni colores/tipografías sueltas: usar estas variables.
   ========================================================================== */

/* Tipografías ---------------------------------------------------------------
   display: Nura (marca) · títulos en MAYÚSCULAS
   accent:  serif itálica · la palabra que se destaca dentro de un título (<em>)
   body:    sistema · textos, formularios, interfaz                          */
@font-face{font-family:Nura;src:url('fonts/Nura-Normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nura;src:url('fonts/Nura-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Nura;src:url('fonts/Nura-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
/* Texto: Figtree · Palabra destacada: Instrument Serif (ambas SIL Open Font License 1.1, alojadas acá) */
@font-face{font-family:'Figtree';src:url('fonts/Figtree-var.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Letras de reemplazo mientras llegan las propias (Arial/Times del teléfono), con las medidas de Nura, Figtree e Instrument
   Serif: cuando llega la letra real no se corre ni salta nada. Valores calculados con fontTools sobre los textos de la portada. */
@font-face{font-family:'Nura Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica');font-weight:100 500;size-adjust:99.2%;ascent-override:90.7%;descent-override:20.2%;line-gap-override:10.1%}
@font-face{font-family:'Nura Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Helvetica Bold');font-weight:600 900;size-adjust:100.6%;ascent-override:89.4%;descent-override:19.9%;line-gap-override:9.9%}
@font-face{font-family:'Figtree Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica');font-weight:100 550;size-adjust:97.8%;ascent-override:97.1%;descent-override:25.6%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Helvetica Bold');font-weight:551 900;size-adjust:97.8%;ascent-override:97.1%;descent-override:25.6%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif Fallback';src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Liberation Serif Italic'),local('Times Italic');font-style:italic;size-adjust:87.7%;ascent-override:112.9%;descent-override:35.4%;line-gap-override:0%}
@font-face{font-family:'Instrument Serif Fallback';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('Times');font-style:normal;size-adjust:87.7%;ascent-override:112.9%;descent-override:35.4%;line-gap-override:0%}
:root{
  --font-display:Nura,'Nura Fallback',system-ui,sans-serif;
  --font-accent:'Instrument Serif','Instrument Serif Fallback',Georgia,serif;
  --font-body:Figtree,'Figtree Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* Paleta de marca (kit v2, 15-oct-2026). Fuente: src/brand/marca.json · guía: MARCA.md · control: scripts/marca.py.
     Nada de cremas ni amarillos de fondo: los claros son papel, bruma y lila. Los nombres viejos quedan como alias. */
  --ink:#292534;          /* tinta: texto principal, "falso negro" */
  --ink-2:#292534;        /* superficies oscuras, botones */
  --night:#231a2e;        /* noche: fondo de escenas oscuras */
  --violet:#715492;       /* violeta: acento, links, botón principal */
  --violet-deep:#4b3658;  /* ciruela: botón presionado, textos sobre lila */
  --lilac:#e8dcf7;        /* lila de marca */
  --lilac-soft:#f3ecfa;   /* bruma: fondos lila suaves */
  --lavender:#cdb8ec;     /* lavanda: bordes activos, gráficos */
  --lavender-deep:#b99be0;/* lavanda oscura: acento sobre noche */
  --paper:#fbfafc;        /* papel: fondo claro */
  --muted:#686270;        /* texto secundario */
  --muted-2:#8d8496;      /* texto terciario, ayudas */
  --line:#ece5f1;         /* bordes suaves */
  --line-strong:#d8c4dc;  /* bordes de campos */
  --butter:#f3ecfa;       /* (retirado: era manteca; ahora bruma) */
  --peach:#ece5f1;        /* (retirado: era durazno; ahora el lila grisáceo, distinto de bruma) */
  --paper-warm:#f3ecfa;   /* (retirado: era papel cálido; ahora bruma) */
  --ok:#2f6b4f;           /* confirmado */
  --pending:#f2b47c;      /* pendiente: solo para estado, nunca de fondo */
  --err:#a3283f;          /* atención */

  /* Formas */
  --radius-s:10px; --radius-m:14px; --radius-l:24px; --radius-pill:999px;
  --arch:240px 240px 26px 26px/150px 150px 26px 26px;  /* tarjeta-invitación */

  /* Sombras */
  --shadow-card:0 30px 60px -30px #0d0814;
  --shadow-float:0 50px 90px -40px #0d0814cc,0 20px 40px -20px #231a2e66;

  /* Movimiento */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:.25s; --dur:.5s; --dur-slow:1s;
}

/* Títulos de marca: MAYÚSCULAS en Nura + palabra destacada en serif itálica */
.display{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.display em,.accent{font-family:var(--font-accent);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em}
.eyebrow-line{font:500 12px/1.4 var(--font-body);letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.eyebrow-line::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}

/* Alias heredados (no usar en código nuevo) */
:root{--bg:var(--paper);--lilac-deep:var(--violet);--lime:#e0ecca}
[hidden]{display:none!important}
/* Casillas y opciones con la estética de la marca (en vez de las celestes del navegador) */
input[type=checkbox]:not(:where([role=switch])),input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:0;display:inline-grid;place-items:center;border:1.5px solid #cbbfd8;background:#fff;cursor:pointer;vertical-align:middle;transition:background .2s,border-color .2s,box-shadow .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
input[type=checkbox]:not(:where([role=switch])){border-radius:7px}input[type=radio]{border-radius:50%}
input[type=checkbox]:not(:where([role=switch]))::after{content:"";width:11px;height:6px;border:2.2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
input[type=radio]::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
input[type=checkbox]:not(:where([role=switch])):checked,input[type=radio]:checked{background:#715492;border-color:#715492}
input[type=checkbox]:not(:where([role=switch])):checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}input[type=radio]:checked::after{transform:scale(1)}
input[type=checkbox]:not(:where([role=switch])):hover,input[type=radio]:hover{border-color:#715492}
input[type=checkbox]:not(:where([role=switch])):active,input[type=radio]:active{transform:scale(.9)}
input[type=checkbox]:not(:where([role=switch])):focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(113,84,146,.25)}
input[type=checkbox]:not(:where([role=switch])):disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}

/* ——— Interruptor: el único de Jupá (panel, invitación y maquetas de la landing) ———
   <label class="jswitch"><input type="checkbox" role="switch"><span class="jswitch-track" aria-hidden="true"><span class="jswitch-thumb"></span></span></label>
   (Si toda la fila es un <label>, el envoltorio va como <span class="jswitch">.) La bolita es un elemento de verdad: nada de ::after
   sobre el input, que Safari y Firefox no dibujan. El input, invisible, cubre el área táctil (≥44px) y lleva el estado (prendido/apagado
   para lectores de pantalla). Guardando: aria-busy="true" en el input (src/switch.js): la bolita gira, nunca se apaga ni desaparece.
   Ajustes por página: --jsw-w/--jsw-h (tamaño), --jsw-off/--jsw-on (colores), --jsw-dis-off/--jsw-dis-on/--jsw-dis-edge (deshabilitado).
   Maqueta quieta (sin input): <span class="jswitch-track is-on"><span class="jswitch-thumb"></span></span>. */
.jswitch{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:max(44px,calc(var(--jsw-w,52px) + 4px));min-height:44px;margin:0;padding:0;cursor:pointer;vertical-align:middle;touch-action:manipulation}
.jswitch>input[type=checkbox]{-webkit-appearance:none;appearance:none;position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:0;opacity:0;cursor:inherit;transform:none}
.jswitch-track{position:relative;display:block;flex:none;width:var(--jsw-w,52px);height:var(--jsw-h,32px);border-radius:999px;background:var(--jsw-off,#857796);box-shadow:inset 0 1px 2px rgba(35,26,46,.2);transition:background-color .2s ease-out}
.jswitch-thumb{--x:0px;position:absolute;top:3px;left:3px;width:calc(var(--jsw-h,32px) - 6px);height:calc(var(--jsw-h,32px) - 6px);border-radius:50%;background:#fff;color:var(--jsw-on,#715492);box-shadow:0 0 0 .5px rgba(35,26,46,.3),0 2px 5px rgba(35,26,46,.35);transform:translateX(var(--x));transition:transform .22s cubic-bezier(.3,1.3,.5,1),box-shadow .2s ease-out}
/* tilde en la bolita: prendido no depende solo del color */
.jswitch-thumb::after{content:"";position:absolute;left:50%;top:50%;width:38%;height:20%;border:solid currentColor;border-width:0 0 2.2px 2.2px;transform:translate(-50%,-68%) rotate(-45deg) scale(0);transition:transform .2s ease-out}
input:checked+.jswitch-track,.jswitch-track.is-on{background:var(--jsw-on,#715492)}
input:checked+.jswitch-track .jswitch-thumb,.jswitch-track.is-on .jswitch-thumb{--x:calc(var(--jsw-w,52px) - var(--jsw-h,32px))}
input:checked+.jswitch-track .jswitch-thumb::after,.jswitch-track.is-on .jswitch-thumb::after{transform:translate(-50%,-68%) rotate(-45deg) scale(1)}
.jswitch>input:active:not(:disabled)+.jswitch-track .jswitch-thumb{transform:translateX(var(--x)) scale(.9)}
.jswitch>input:focus-visible+.jswitch-track{outline:2.5px solid var(--jsw-on,#715492);outline-offset:3px}
/* guardando: bloqueado (src/switch.js) y con la bolita girando, bien visible */
.jswitch>input[aria-busy=true]{cursor:progress}
.jswitch>input[aria-busy=true]+.jswitch-track .jswitch-thumb::after{transform:translate(-50%,-68%) rotate(-45deg) scale(0)}
.jswitch>input[aria-busy=true]+.jswitch-track .jswitch-thumb::before{content:"";position:absolute;inset:22%;border-radius:50%;border:2.2px solid currentColor;border-right-color:transparent;animation:jsw-spin .7s linear infinite}
@keyframes jsw-spin{to{transform:rotate(360deg)}}
/* deshabilitado: más claro, pero la bolita conserva borde y se sigue viendo */
.jswitch>input:disabled{cursor:not-allowed}
.jswitch>input:disabled+.jswitch-track{background:var(--jsw-dis-off,#d3cadc);box-shadow:none}
.jswitch>input:disabled:checked+.jswitch-track{background:var(--jsw-dis-on,#b5a3c9)}
.jswitch>input:disabled+.jswitch-track .jswitch-thumb{color:var(--jsw-dis-edge,#8e81a0);box-shadow:0 0 0 1.5px var(--jsw-dis-edge,#8e81a0)}
@media (prefers-reduced-motion:reduce){.jswitch-track,.jswitch-thumb,.jswitch-thumb::after{transition:none}.jswitch>input[aria-busy=true]+.jswitch-track .jswitch-thumb::before{animation:none;border-style:dotted;border-right-color:currentColor}}
@media (forced-colors:active){.jswitch-track{border:1px solid CanvasText}.jswitch-thumb{forced-color-adjust:none;background:CanvasText;color:Canvas}input:checked+.jswitch-track{background:Highlight}.jswitch>input:focus-visible+.jswitch-track{outline-color:Highlight}}

/* Al tocar en el celular: sin el recuadro gris del navegador; cada botón tiene su propio estado (color / escala) */
*{-webkit-tap-highlight-color:transparent}