/* ============================================================
   ALQVIMIA I NADIA ELCACHO — SPA multipágina (una sola web)
   BASE: reset, variables globales, tipografía, botones, sistema de páginas
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --cream:#FAF6EF; --cream-2:#F1E7D8; --cream-3:#EAE0CE;
  --ink:#211C17; --ink-soft:#5B5247; --ink-faint:#8A8073;
  --gold:#A9824C; --gold-deep:#8C6A38; --gold-light:#D9C39D;
  --rose:#C6A79B; --sage:#7C8570;
  --line:#E2D5BE; --line-soft:#EDE3D0; --white:#FFFFFF;
  --ink-rgb:33,28,23;
  --shadow-1: 0 1px 2px rgba(33,28,23,.05), 0 8px 24px -12px rgba(33,28,23,.14);
  --shadow-2: 0 24px 64px -20px rgba(33,28,23,.38);
  --serif:'Fraunces', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans:'Jost', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1200px;
  --nav-h: 78px;
}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-weight:400;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.14;letter-spacing:-.01em;color:var(--ink)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
::selection{background:var(--gold-light);color:var(--ink)}
html[data-lang="es"] .i18n-ca{display:none !important}
html[data-lang="ca"] .i18n-es{display:none !important}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
noscript{display:block;background:var(--ink);color:#fff;text-align:center;padding:14px}

/* ---------- typo utils ---------- */
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--gold-deep);font-weight:600;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold-deep);display:inline-block}
.h-xl{font-size:clamp(2.3rem,5.4vw,4.3rem)}
.h-lg{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.h-md{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.lede{font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--ink-soft);line-height:1.75;font-weight:300}
.center{text-align:center}
.section-head{max-width:660px;margin-bottom:48px}
.section-head.center{margin-inline:auto}
.section-head .eyebrow{margin-bottom:16px}
.section-head h1, .section-head h2{margin-bottom:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;border-radius:999px;font-size:.9rem;font-weight:500;letter-spacing:.02em;transition:transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);white-space:nowrap}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--ink);color:var(--cream);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(var(--ink-rgb),.22);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(var(--ink-rgb),.05);transform:translateY(-2px)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:var(--white);transform:translateY(-2px)}
.btn-wa{background:#2E4A3D;color:#fff}
.btn-wa:hover{background:#213A2F;transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:.8rem}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none !important}

/* ============ PAGE SYSTEM (compartido por todas las secciones) ============ */
.page{display:none;padding-top:var(--nav-h);min-height:100svh}
.page.active{display:block;animation:pagein .55s var(--ease)}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
main{position:relative}
.pad{padding-block:clamp(64px,9vw,110px)}
.pad-sm{padding-block:clamp(44px,6vw,72px)}
.alt-bg{background:var(--cream-2)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.stagger .reveal:nth-child(1){transition-delay:.02s}
.stagger .reveal:nth-child(2){transition-delay:.09s}
.stagger .reveal:nth-child(3){transition-delay:.16s}
.stagger .reveal:nth-child(4){transition-delay:.23s}
.stagger .reveal:nth-child(5){transition-delay:.30s}