/* Identidad visual: paleta azul noche, ámbar y durazno, con estilo "Brillo" (opción 2, elegida por el dueño).
   Degradados suaves, brillos y sombras; el texto siempre con buen contraste. Fuentes alojadas en el propio sitio. */
@font-face{font-family:"Outfit";src:url("/fonts/outfit-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("/fonts/nunito-sans-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}

:root{
  /* Paleta */
  --ink:#0B132B;          /* azul noche: texto */
  --dark:#1C2541;         /* azul marino: bloques oscuros */
  --primary:#D97706;      /* ámbar: botones y acentos */
  --primary-claro:#F59E0B;/* ámbar claro: brillo de los botones */
  --primary-oscuro:#B45309;/* ámbar oscuro: sombra de los botones */
  --on-primary:#0B132B;   /* texto sobre ámbar (el blanco no se lee bien) */
  --card:#F4D6B0;         /* durazno: tarjetas */
  --card-claro:#FBE7CD;   /* durazno claro: brillo de las tarjetas */
  --bg:#FFFAF4;           /* fondo claro cálido */
  --muted:#3A506B;        /* pizarra: enlaces */
  --sky:#5BC0DE;          /* azul cielo: solo detalles sobre fondo oscuro */
  --on-dark:#fff;         /* texto sobre fondo oscuro */
  /* Efectos */
  --grad-boton:linear-gradient(180deg,var(--primary-claro) 0%,var(--primary) 55%,var(--primary-oscuro) 100%);
  --sombra-boton:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px rgba(217,119,6,.35);
  --grad-tarjeta:linear-gradient(180deg,var(--card-claro) 0%,var(--card) 100%);
  --sombra-tarjeta:inset 0 1px 0 rgba(255,255,255,.8),0 3px 10px rgba(11,19,43,.10);
  --grad-oscuro:linear-gradient(180deg,var(--dark) 0%,var(--ink) 100%);
  --font-head:"Outfit",system-ui,sans-serif;
  --font-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:1.125rem;line-height:1.6;color:var(--ink);background:var(--bg)}
main{max-width:40rem;margin:0 auto;padding:2rem 1.25rem}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;color:var(--ink)}
h1{font-size:2rem}
a{color:var(--muted)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* Logo de texto */
.logo{font-family:var(--font-head);font-weight:700;font-size:1.5rem;margin:0 0 1rem;color:var(--ink);text-decoration:none}
.logo span{color:var(--primary)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Brillo que pasa por los botones ámbar cada pocos segundos (sesión 10). Solo decorativo: no tapa el texto ni el toque. */
.boton,.boton-whatsapp,.como-funciona__boton,.faq__boton{position:relative;overflow:hidden}
.boton::after,.boton-whatsapp::after,.como-funciona__boton::after,.faq__boton::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-20deg);animation:boton-brillo 5s ease-in-out 1.5s infinite}
@keyframes boton-brillo{0%{transform:translateX(-160%) skewX(-20deg)}30%,100%{transform:translateX(420%) skewX(-20deg)}}