/* ============================================================
   AUT-INOS 5.0 — SISTEMA VISUAL "Papel y tinta"
   Fondo crema · tinta negra · grises. Pulcro y editorial.
   Principios: motion con propósito, 60fps, reduced-motion.
   ============================================================ */

:root{
  /* --- Superficies --- */
  --cream:#f4f1ea;        /* fondo principal (marca) */
  --paper:#faf8f3;        /* superficie elevada */
  --paper-2:#ffffff;      /* superficie máxima */
  --sand:#e9e5db;         /* superficie hundida / marco */

  /* --- Tinta --- */
  --ink:#0d0d12;          /* texto principal, botones */
  --ink-2:#2a2a30;
  --muted:#55596a;        /* texto secundario */
  --soft:#8a8a95;         /* texto terciario */

  /* --- Líneas --- */
  --line:rgba(13,13,18,.10);
  --line-2:rgba(13,13,18,.18);

  /* --- Sombras (clave del look pulcro) --- */
  --sh-sm:0 1px 3px rgba(13,13,18,.06);
  --sh-md:0 8px 24px rgba(13,13,18,.08);
  --sh-lg:0 18px 44px rgba(13,13,18,.10);
  --sh-xl:0 30px 70px rgba(13,13,18,.14);

  /* --- Tipografía --- */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* --- Motion --- */
  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-cam:cubic-bezier(.22,.61,.36,1);

  /* --- Radios --- */
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===== TIPOGRAFÍA ===== */
.display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
}
.eyebrow{
  font-family:var(--font-display);
  font-size:.7rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}

/* ===== BOTONES ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  padding:14px 26px;border-radius:100px;
  transition:transform .32s var(--ease-out), background .28s, color .28s,
             box-shadow .32s var(--ease-out), gap .32s var(--ease-out), border-color .28s;
  will-change:transform;
}
.btn svg{transition:transform .32s var(--ease-out)}
.btn:hover{transform:translateY(-2px);gap:14px}
.btn:hover svg{transform:translateX(3px)}

.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{box-shadow:0 14px 32px rgba(13,13,18,.26)}

.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}

.btn-soft{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.btn-soft:hover{border-color:var(--ink);box-shadow:var(--sh-md)}

/* ===== SUPERFICIES ===== */
.panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}

/* ===== SPINNER ===== */
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(13,13,18,.13);
  border-top-color:var(--ink);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== ENTRADA ESCALONADA ===== */
.rise{opacity:0;transform:translateY(16px);animation:rise .85s var(--ease-out) forwards}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}
.d4{animation-delay:.36s}.d5{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .rise,.rv{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}