/* ==========================================================================
   Artsessions · main.css
   Estilos compartidos por todas las páginas: fuentes, tokens, base,
   cabecera, menú móvil, botones, cabeceras de sección y pie.
   ========================================================================== */

/* ---------- Fuentes autoalojadas (SIL Open Font License) ----------------- */
/* Sin peticiones a terceros: más rápido y sin ceder IPs (RGPD).              */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/Archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/Archivo-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:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Onest-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Onest-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:"Martian Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/MartianMono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/MartianMono-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}

/* ---------- Tokens -------------------------------------------------------- */
:root{
  color-scheme:dark;

  /* Fondo: tinta cálida, sesgada hacia el marrón del logotipo Artsessions */
  --ink:#0E0C0B;
  --surface:#161211;
  --raised:#1E1917;
  --line:#2B2421;
  --line-soft:#211B19;
  --text:#F2EBE6;
  --muted:#A89B94;
  --faint:#716660;

  /* Estudio */
  --tulip:#E8563A;

  /* Productos */
  --replai-a:#0A6CE6;
  --replai-b:#00D2E0;
  --omw-a:#FDB834;
  --omw-b:#F0553C;
  --omw-c:#FE2C82;
  --replai-grad:linear-gradient(100deg,var(--replai-a),var(--replai-b));
  --omw-grad:linear-gradient(100deg,var(--omw-a),var(--omw-b) 50%,var(--omw-c));

  /* Estado */
  --live:#46D99B;
  --soon:#F5C451;

  /* Tipografía */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Layout */
  --gutter:clamp(20px,4vw,48px);
  --maxw:1240px;
  --nav-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-stretch:115%;font-weight:700;letter-spacing:-.02em;line-height:1;text-wrap:balance}
p,figure{margin:0}
:focus-visible{outline:2px solid var(--tulip);outline-offset:3px;border-radius:4px}
::selection{background:rgba(232,86,58,.35);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--text);color:var(--ink);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none}
.skip-link:focus{top:12px}

/* ---------- Cabecera ------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,12,11,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-scrolled,.nav.is-open{border-bottom-color:var(--line-soft)}
.nav__bar{display:flex;align-items:center;gap:32px;height:var(--nav-h)}
.nav__logo{display:block;flex:none}
.nav__logo img{height:26px;width:auto}
.nav__links{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0}
.nav__links a{text-decoration:none;font-size:14.5px;color:var(--muted);transition:color .2s}
.nav__links a:hover{color:var(--text)}

.langs{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.langs a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:5px 10px;border-radius:999px;color:var(--faint);text-decoration:none;transition:background .2s,color .2s}
.langs a:hover{color:var(--text)}
.langs a[aria-current="true"]{background:var(--raised);color:var(--text)}

.nav__toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-left:4px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);cursor:pointer}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),background .2s}
.nav__toggle span{position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0}
.nav__toggle span::before{top:-5px}
.nav__toggle span::after{top:5px}
.nav.is-open .nav__toggle span{background:transparent}
.nav.is-open .nav__toggle span::before{transform:translateY(5px) rotate(45deg)}
.nav.is-open .nav__toggle span::after{transform:translateY(-5px) rotate(-45deg)}

.nav__panel{display:none}

@media (max-width:860px){
  .nav__links{display:none}
  .langs{margin-left:auto}
  .nav__toggle{display:inline-flex}
  .nav__panel{display:block;max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .nav.is-open .nav__panel{max-height:420px}
  .nav__panel ul{list-style:none;margin:0 auto;padding-block:8px 24px}
  .nav__panel a{display:block;padding:14px 0;border-top:1px solid var(--line-soft);font-family:var(--display);font-stretch:112%;font-weight:600;font-size:22px;letter-spacing:-.01em;text-decoration:none}
}

/* ---------- Botones ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;border:1px solid var(--line);color:var(--text);transition:background .25s,border-color .25s,transform .25s}
.btn:hover{background:var(--raised);border-color:#3A302C}
.btn--primary{border-color:transparent;background:var(--text);color:var(--ink)}
.btn--primary:hover{background:#fff;transform:translateY(-1px)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

/* ---------- Secciones ----------------------------------------------------- */
.section{padding-block:clamp(80px,10vw,140px)}
.section--divided{border-top:1px solid var(--line-soft)}
.kicker{display:flex;align-items:center;gap:12px;color:var(--faint);margin-bottom:22px}
.kicker b{font-weight:500;color:var(--muted)}
.section-heading .kicker{display:flex;font-weight:400;font-stretch:100%;line-height:1.6;margin-bottom:22px}
.section-heading__title{display:block}
h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.04}
.intro{font-size:18px;color:var(--muted);max-width:56ch;margin-top:22px}

/* ---------- Temas por sección --------------------------------------------- */
/* La página no es 100% negra: cada sección redefine los tokens y los        */
/* componentes se adaptan solos (ritmo oscuro · claro · off-black · acento). */
.theme-light,.theme-deep,.theme-accent{background:var(--ink);color:var(--text)}
.theme-light{
  color-scheme:light;
  --ink:#F4F2EF;
  --surface:#FFFFFF;
  --raised:#E9E6E2;
  --line:#DAD5D0;
  --line-soft:#E4E0DB;
  --text:#15110F;
  --muted:#5C534E;
  --faint:#857A74;
}
.theme-deep{
  --ink:#1B1716;
  --surface:#231E1C;
  --raised:#2B2523;
  --line:#3A322F;
  --line-soft:#2E2826;
}
.theme-accent{
  color-scheme:light;
  --ink:#E8563A;
  --surface:#EC6A51;
  --raised:#F07C65;
  --line:rgba(20,15,13,.18);
  --line-soft:rgba(20,15,13,.12);
  --text:#140F0D;
  --muted:#2A120C;
  --faint:#3A180F;
}
.theme-light ::selection,.theme-accent ::selection{background:rgba(20,15,13,.18);color:#140F0D}
.theme-light .btn:hover,.theme-accent .btn:hover{border-color:var(--text)}
.theme-light .btn--primary:hover,.theme-accent .btn--primary:hover{background:#000;color:#fff}
.theme-accent :focus-visible{outline-color:#140F0D}

/* ---------- Pie ----------------------------------------------------------- */
.footer{border-top:1px solid var(--line-soft);padding-block:36px 44px}
.footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px}
.footer__logo img{height:22px;width:auto;opacity:.85}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer nav a,.footer small{font-size:13.5px;color:var(--faint);text-decoration:none}
.footer nav a:hover{color:var(--text)}

.footer__button{font:inherit;font-size:13.5px;color:var(--faint);background:none;border:0;padding:0;cursor:pointer}
.footer__button:hover{color:var(--text)}

/* ---------- Banner de consentimiento ------------------------------------- */
/* Rechazar y Aceptar tienen el mismo peso visual (criterio AEPD).            */
[hidden]{display:none!important}
.consent{position:fixed;z-index:60;left:16px;bottom:16px;width:min(420px,calc(100vw - 32px));padding:22px 22px 20px;border:1px solid var(--line);border-radius:18px;background:rgba(30,25,23,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);animation:consent-in .45s var(--ease) both}
.consent__title{font-family:var(--display);font-size:17px;font-stretch:110%;font-weight:640;letter-spacing:-.01em;line-height:1.25;margin-bottom:8px}
.consent__text{font-size:14.5px;line-height:1.55;color:var(--muted)}
.consent__text a{color:var(--text);text-underline-offset:3px}
.consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.consent__btn{justify-content:center;padding:11px 16px;font-size:14.5px;background:var(--surface)}
.consent__btn:hover{background:var(--text);color:var(--ink);border-color:var(--text)}
@keyframes consent-in{from{opacity:0;transform:translateY(12px)}}

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