/* ═══════════════════════════════════════════════════════════════
   AGENDA NORTE · Vita Nutrición · sistema visual
   Norte Studio · nrtstd.com

   Misma familia que el sitio: salvia sobre papel arena, Fraunces
   para los títulos e Inter para el texto.

   Nota de contraste: el salvia de marca (#6E8062) es demasiado
   claro para texto chico o para fondo de botón con letra blanca.
   Por eso el verde "de trabajo" es #55684B y el profundo #3D4A36,
   que sí se leen. El salvia queda para lo decorativo.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#F4F0E6; --paper-2:#EDE7D9; --paper-3:#E5DECB;
  --ink:#2A2E27; --ink-2:#5A6154; --mute:#5C6356;
  --rosa:#6E8062; --rosa-d:#55684B; --rosa-dd:#3D4A36; --rosa-soft:#E4EADD;
  --line:#DED6C2; --line-2:#CEC5AE;
  --ok:#1E8C7E; --alerta:#8a5a12; --malo:#A8402C;
  --eo:cubic-bezier(0.16,1,0.3,1);
  --disp:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --script:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden;font-size:1.0625rem}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.03;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--rosa-d);color:#fff}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.ey{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rosa-d)}
.script{font-family:var(--script);font-weight:400;letter-spacing:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Marca ── */
.brand{display:flex;align-items:baseline;gap:.5rem;line-height:1}
.brand .nm{font-family:var(--script);font-size:1.5rem;color:var(--rosa-d);white-space:nowrap}
.brand .tg{font-family:var(--sans);font-weight:600;font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2)}
@media(max-width:560px){.brand .tg{display:none}}

/* flex-wrap para que en pantallas angostas la marca y el botón se
   acomoden en dos renglones en vez de empujar la página 4 px a la
   derecha y dejar barra de scroll horizontal. */
header{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  padding:13px clamp(20px,5vw,48px);background:var(--paper);box-shadow:0 1px 0 var(--line)}
@media(max-width:560px){ header .brand .nm{font-size:1.32rem} }

/* ── Botones ── */
.btn{font-family:var(--sans);font-weight:600;font-size:.94rem;padding:12px 20px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--rosa-d);color:#fff;border:1.5px solid var(--rosa-d);cursor:pointer;white-space:nowrap;
  transition:background .2s var(--eo),transform .16s var(--eo),box-shadow .2s var(--eo);
  box-shadow:0 8px 22px rgba(85,104,75,.26)}
.btn:hover{background:var(--rosa-dd);border-color:var(--rosa-dd);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.btn.line{background:transparent;color:var(--rosa-dd);border-color:var(--line-2);box-shadow:none}
.btn.line:hover{background:var(--paper-2);border-color:var(--rosa-d)}
.btn.wide{width:100%}
.btn.sm{padding:9px 16px;font-size:.86rem;box-shadow:none}
.btn.xs{padding:6px 12px;font-size:.8rem;box-shadow:none;border-radius:999px}
.btn svg{width:18px;height:18px;fill:currentColor}

/* ── Campos ── */
.fld{margin-bottom:17px}
.fld label{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);display:block;margin-bottom:7px}
.fld label .opt{color:var(--mute);letter-spacing:.04em;text-transform:none;font-weight:400}
.fld input,.fld textarea,.fld select{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;font-size:1rem;outline:none;transition:border-color .2s}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--rosa-d)}
.fld input[aria-invalid="true"]{border-color:var(--malo)}
.fld textarea{resize:vertical;min-height:76px}
.fld .hint{font-size:.84rem;color:var(--mute);margin-top:6px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink-2);margin-bottom:18px;cursor:pointer}
.check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--rosa-d)}
/* El enlace al aviso vive dentro de la etiqueta de la casilla: tiene
   que verse como enlace y no como texto de relleno. */
.check a{color:var(--rosa-dd);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ── Encabezados de sección ── */
.sec-h{max-width:52ch;margin-bottom:clamp(22px,3vw,34px)}
.sec-h h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:.55rem}
.sec-h h2 em{font-style:normal;font-family:var(--script);color:var(--rosa-d);font-weight:400}
.sec-h p{color:var(--ink-2);margin-top:.8rem;font-size:1.02rem;max-width:46ch}

/* ── Avisos ── */
.aviso{border-radius:14px;padding:13px 16px;font-size:.92rem;line-height:1.5;margin-bottom:16px;border:1px solid}
.aviso.malo{background:#FBEDEA;border-color:#e6c3ba;color:var(--malo)}
.aviso.ok{background:#E7F3F0;border-color:#b4d8d1;color:#12655a}
.aviso.info{background:var(--rosa-soft);border-color:#f0cdd8;color:var(--rosa-dd)}
.aviso b{font-weight:600}

/* ── Badges de estado ── */
.badge{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.03em;padding:5px 11px;
  border-radius:999px;border:1px solid;white-space:nowrap;flex:none}
.badge.pendiente  {color:var(--alerta);border-color:#e6d4a8;background:#FAF3E3}
.badge.confirmada {color:#12655a;border-color:#a8d5cc;background:#DCEFEA}
.badge.asistio    {color:#4a5a52;border-color:var(--line-2);background:var(--paper-2)}
.badge.cancelada  {color:var(--mute);border-color:var(--line-2);background:var(--paper-2)}
.badge.no_llego   {color:var(--malo);border-color:#e6c3ba;background:#FBEDEA}

/* ── Barra de estado del sistema ── */
.modobar{background:var(--ink);color:#c8c1b8;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px clamp(14px,4vw,26px);font-size:.78rem;letter-spacing:.02em}
.modobar .pt{font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.66rem;color:#b8c9a8;flex:1;min-width:180px}
.modobar .led{width:8px;height:8px;border-radius:50%;background:#b8c9a8;flex:none;
  box-shadow:0 0 0 3px rgba(184,201,168,.22)}
.modobar.vivo .led{background:#7fd8c8;box-shadow:0 0 0 3px rgba(127,216,200,.22)}
.modobar a{color:#b8c9a8;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── Loader ── */
#loader{position:fixed;inset:0;z-index:1000;background:var(--paper);display:grid;place-items:center;
  transition:opacity .6s var(--eo),visibility .6s}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
#loader .lg{font-family:var(--script);font-size:clamp(2.4rem,7vw,3.4rem);color:var(--rosa-d);text-align:center}
#loader .lg small{display:block;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink-2);margin-top:.4rem}
#loader .dn{margin-top:1.6rem;font-size:.8rem;color:var(--ink-2);text-align:center;line-height:1.55}
#loader .dn b{font-weight:600;color:var(--rosa-d);letter-spacing:.05em}

/* ── Pie ── */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:clamp(34px,5vh,52px) 0 28px;margin-top:24px}
.ft{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.ft .nm{font-family:var(--script);font-size:1.8rem;color:var(--rosa-d);line-height:1}
.ft .tg{font-family:var(--sans);font-weight:600;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);margin-top:.3rem}
.ft .col p,.ft .col a{color:var(--ink-2);font-size:.92rem;display:block;margin-top:.4rem}
.ft .col a:hover{color:var(--rosa-d)}
.ft .col .h{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:.3rem}

.demo-wm{background:var(--ink);color:#b9b1a7;text-align:center;font-family:var(--sans);font-weight:500;
  font-size:.82rem;letter-spacing:.02em;padding:15px 20px}
.demo-wm b{color:#b8c9a8;font-weight:600;letter-spacing:.06em}
.demo-wm a{color:#b8c9a8;font-weight:600;transition:opacity .2s}
.demo-wm a:hover{opacity:.75}
.demo-wm .sep{margin:0 .55em;opacity:.45}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--rosa-d);outline-offset:2px}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}