/* Fuentes servidas desde el propio sitio (subconjunto latin: cubre el español completo). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format('woff2');
  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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  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;
}

body{margin:0}
a{color:inherit}a:hover{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #16324F;outline-offset:2px;box-shadow:0 0 0 7px #FFFFFF}
@keyframes sa-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sa-msg{animation:sa-in .35s ease-out both}
@keyframes sa-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.sa-dot{animation:sa-dot 1.2s infinite}
.sa-dot2{animation-delay:.2s}.sa-dot3{animation-delay:.4s}
.sa-tone{transition:background-color .6s ease,color .6s ease}
.sa-hand{transition:transform .5s ease}
.sa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.sa-msg,.sa-dot{animation:none !important}.sa-tone,.sa-hand{transition:none !important}}

/* ---- Portada: tono noche/día según la escena (data-tone en .sa-tone) ---- */
.sa-tone[data-tone="night"]{--bg:#16324F;--fg:#FFFFFF;--muted:#F3F4F6;--frame:#F3F4F6;--cta-bg:#FFFFFF;--cta-fg:#16324F}
.sa-tone[data-tone="day"]{--bg:#FFFFFF;--fg:#16324F;--muted:#4B5563;--frame:#16324F;--cta-bg:#16324F;--cta-fg:#FFFFFF}
/* overflow-x: clip — las marcas de la carátula son cuadros rotados cuyo recuadro
   (transparente) se sale del círculo; sin esto, en celular la página se desplaza
   de lado. No recorta nada visible. */
.sa-tone{background:var(--bg);color:var(--fg);overflow-x:clip}
.sa-tone[data-tone="night"] .sa-logo-day,.sa-tone[data-tone="day"] .sa-logo-night{display:none}

/* Manecilla: naranja cuando la cita de la escena quedó confirmada */
.sa-dial{--hand:var(--fg)}
.sa-dial[data-confirmed="true"]{--hand:#D97B3F}
.sa-dial[data-dragging="true"] .sa-hand{transition:none}
.sa-check[hidden],.sa-confirm[hidden],.sa-typing[hidden]{display:none !important}

/* Píldoras de hora: la elegida se invierte */
.sa-pill{background:var(--bg);color:var(--fg)}
.sa-pill[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* Teléfono: WhatsApp o Instagram según la escena (data-app en la figura) */
.sa-phone[data-app="wa"] .sa-ig,.sa-phone[data-app="ig"] .sa-wa{display:none !important}
.sa-phone[data-app="wa"] .sa-screen{background:#F3F4F6}
.sa-phone[data-app="ig"] .sa-screen{background:#FFFFFF}

/* Chat del teléfono: desplazable (rueda, dedo o teclado) sin perder el "pegado abajo" de un chat:
   el primer mensaje empuja todo hacia abajo mientras sobra espacio; cuando no, se desplaza.
   Sin overscroll-behavior:contain a propósito: en celular, al llegar al tope del chat el gesto
   debe seguir desplazando la página, no quedarse atrapado. */
.sa-log{scrollbar-width:thin;scrollbar-color:#4B5563 transparent}
.sa-log > :first-child{margin-top:auto}
.sa-log:focus-visible{outline:3px solid #D97B3F;outline-offset:-3px;box-shadow:none}

/* Interruptor "Atiendo yo" */
.sa-switch-track{background:#4B5563}
.sa-switch-knob{left:3px}
[aria-checked="true"] .sa-switch-track{background:#16324F}
[aria-checked="true"] .sa-switch-knob{left:25px}