/* ============================================================
   joan — estudio digital
   Estilos globales, tokens de tema y utilidades.
   Los estilos de maquetación específicos viven inline en index.html
   (heredados del diseño original); aquí están las bases compartidas.
   ============================================================ */

/* ---------- Tokens de color (tema claro por defecto) ---------- */
:root {
  --paper:#ECE7DC; --ink:#16150F; --ink-deep:#100F0A; --card:#ddd6c6;
  --tx:#16150F; --tx-rgb:22,21,15; --tx-2:#3a362c; --tx-3:#5c5749; --tx-4:#8a8475; --tx-muted:#C3BCAA;
  --on-ink:#EBE5D7;
  --accent:#E5541F; --accent-deep:#C63F12; --accent-soft:#FF7A45;
}
:root[data-theme="dark"] {
  --paper:#15140F; --ink:#0D0C0A; --ink-deep:#080807; --card:#23221D;
  --tx:#EBE5D7; --tx-rgb:235,229,215; --tx-2:#CFC9BA; --tx-3:#B4AE9E; --tx-4:#8F897A; --tx-muted:#3A3833;
  --on-ink:#EBE5D7;
}

/* ---------- Reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }

body {
  background:var(--ink);
  font-family:'Geist', system-ui, -apple-system, sans-serif;
  color:var(--tx);
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
::selection { background:var(--accent); color:var(--on-ink); }

/* ---------- Scrollbar minimalista ---------- */
html { scrollbar-width:thin; scrollbar-color:rgba(var(--tx-rgb),0.28) transparent; }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:rgba(var(--tx-rgb),0.22); border-radius:100px;
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background:rgba(229,84,31,0.55); background-clip:padding-box; }

/* ---------- Animaciones ---------- */
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.82)} }
@keyframes scrolldot { 0%{transform:translateY(0);opacity:0} 25%{opacity:1} 75%{opacity:1} 100%{transform:translateY(20px);opacity:0} }
@keyframes breathe { 0%,100%{opacity:0.82;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }
@keyframes foilShift { from{background-position:0% 50%} to{background-position:260% 50%} }

/* ============================================================
   Estados :hover  (reemplazan el antiguo atributo style-hover)
   ============================================================ */

/* Wordmark del hero */
.word:hover { letter-spacing:0.01em; color:var(--accent); }

/* Enlaces subrayados tipo CTA */
.cta-underline { transition:color 0.3s ease, border-color 0.3s ease; }
.cta-underline:hover { color:var(--accent); border-color:var(--accent); }

/* Tarjeta de WhatsApp */
.wa-card { transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; }
.wa-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.4); }

/* Botón de envío del formulario */
.btn-submit { transition:background 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.btn-submit:hover { background:var(--accent-deep); transform:translateY(-2px); }
.btn-submit[disabled] { opacity:0.6; cursor:default; transform:none; }

/* Enlaces que se atenúan al pasar el cursor (nav / footer / email) */
.lk-dim { transition:opacity 0.3s ease; }
.lk-dim:hover { opacity:0.55 !important; }

/* Píldora de contacto en la nav */
.nav-pill:hover { border-color:color-mix(in srgb, currentColor 60%, transparent); }

/* Mensaje de error del formulario */
.form-error {
  display:none; margin-top:18px;
  font-family:'Geist Mono', monospace; font-size:13px; letter-spacing:0.04em;
  color:#ff8a6b;
}
.form-error.is-visible { display:block; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.001ms !important; animation-iteration-count:1 !important; }
}