/* ==========================================================
   Kizuna · Base
   Reset, tipografía, utilidades y elementos genéricos
   (botones, formularios, modales, avisos). Requiere tokens.css.
   ========================================================== */

/* ---- Reset ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--cream);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---- Tipografía ---- */
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0;text-wrap:balance}
.eyebrow{font:600 14px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--bronze)}
.text-muted{color:var(--steel)}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---- Contenedor y secciones ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
section{scroll-margin-top:calc(var(--nav-h) + 2px)}
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.sec-head h2{font-size:clamp(46px,7vw,92px);font-weight:900;margin-top:16px}
.sec-head p{max-width:42ch;color:var(--text-soft)}

/* Sección clara (fondo crema) */
.light{background:var(--cream);color:var(--navy)}
.light .sec-head p{color:var(--text-soft-light)}
.light .eyebrow{color:var(--bronze)}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;padding:16px 26px;border:2px solid var(--gold);background:var(--gold);color:var(--navy);cursor:pointer;text-decoration:none;transition:background .2s,color .2s,transform .2s;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%)}
.btn:hover{background:var(--cream);border-color:var(--cream)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--navy)}
.btn.small{padding:11px 16px;font-size:14px}
.btn.block{width:100%}
.btn.dark{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.btn.dark:hover{background:var(--bronze);border-color:var(--bronze)}

/* Grupo de botones tipo interruptor (Mensual / Anual) */
.toggle{display:inline-flex;border:1px solid var(--line);padding:4px}
.toggle button{background:none;border:0;color:var(--cream);font:700 14px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--gold);color:var(--navy)}
.toggle em{font-style:normal;color:var(--bronze);margin-left:6px}
.toggle button[aria-pressed="true"] em{color:var(--navy)}

/* Chips de filtro */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{background:none;border:1px solid var(--line);color:inherit;font:600 14px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.light .filters button{border-color:rgba(27,35,56,.25)}
.light .filters button[aria-pressed="true"]{background:var(--navy);color:var(--cream);border-color:var(--navy)}

/* ---- Formularios (sobre fondo oscuro) ---- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.field input,.field select,.field textarea{background:var(--navy-2);border:1px solid var(--navy-3);color:var(--cream);font:500 16px/1.2 var(--body);padding:13px 14px;width:100%;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text-soft);margin:6px 0 20px}
.check input{accent-color:var(--gold);width:18px;height:18px;margin-top:3px}
.err{color:var(--danger);font-size:14px;min-height:20px;margin-bottom:8px}
@media (max-width:420px){.row2{grid-template-columns:1fr}}

/* ---- Panel oscuro con franja dorada ---- */
.panel{background:var(--navy);color:var(--cream);padding:clamp(24px,3vw,36px);position:relative}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--bronze),var(--gold))}
.panel h3{font-size:38px;margin-bottom:6px}
.panel .hint{color:var(--steel);font-size:15px;margin-bottom:22px}

/* ---- Aviso con borde punteado ---- */
.notice{border:1px dashed var(--gold);padding:18px;color:var(--text-soft);font-size:15px}
.notice strong{color:var(--gold)}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;z-index:80;background:rgba(10,13,22,.78);display:flex;align-items:flex-start;justify-content:center;padding:clamp(16px,5vh,60px) 16px;overflow-y:auto}
.modal-card{background:var(--cream);color:var(--navy);width:100%;max-width:720px;position:relative}
.modal-card.dark{background:var(--navy);color:var(--cream);max-width:520px;border:1px solid var(--line)}
.modal-close{position:absolute;top:14px;right:14px;background:var(--navy);color:var(--cream);border:0;width:40px;height:40px;font:700 20px/1 var(--body);cursor:pointer;z-index:2}
.modal-card.dark .modal-close{background:var(--navy-3)}
body.modal-open{overflow:hidden}

/* ---- Aviso flotante ---- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--gold);color:var(--navy);font:700 15px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;padding:14px 20px;z-index:90;max-width:calc(100% - 32px)}

/* Separador entre dos secciones oscuras seguidas */
.sec:not(.light) + .sec:not(.light){border-top:1px solid var(--line)}