/* Alexa Grasso — Estelar (4a desktop / 5a mobile), implemented from the Claude Design handoff */

:root{
  --obsidian:#12100C;
  --cream:#EDE6D6;
  --champagne:#C6A15B;
  --muted:#8A7B62;
  --tile:#E2D9C6;
  --ink-soft:rgba(237,230,214,.66);
  --mono:ui-monospace,Menlo,monospace;
  --serif:'Bodoni Moda',serif;
  --sans:'Archivo',sans-serif;
  --display:'Big Shoulders Display',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--obsidian);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
::selection{background:#C6A15B;color:#12100C}

/* language forks — html[data-lang] is set statically to "es" so no-JS shows Spanish */
html[data-lang="es"] .l-en{display:none!important}
html[data-lang="en"] .l-es{display:none!important}

@keyframes agUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes agFade{from{opacity:0}to{opacity:1}}
@keyframes agMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes agKen{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes agLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

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

/* ---------- shared bits ---------- */
.kicker{display:flex;align-items:center;gap:10px}
.kicker .rule{display:block;width:26px;height:1px;background:var(--champagne);flex:none;transform-origin:left;animation:agLine 1.1s cubic-bezier(.22,.61,.21,1) .5s both}
.kicker .label{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.lang-toggle{cursor:pointer;background:rgba(18,16,12,.4);backdrop-filter:blur(6px);border:1px solid rgba(198,161,91,.6);border-radius:999px;min-height:40px;padding:0 18px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);transition:all .3s}
.lang-toggle:hover{background:var(--champagne);color:var(--obsidian)}

/* ---------- desktop nav (4a) ---------- */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 56px;border-bottom:1px solid rgba(237,230,214,.1)}
.site-nav .brand{display:flex;align-items:baseline;gap:14px}
.site-nav .brand .name{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.04em}
.site-nav .brand .star{color:var(--champagne);font-size:13px}
.site-nav .brand .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:rgba(237,230,214,.5)}
.site-nav .links{display:flex;align-items:center;gap:30px;font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,230,214,.82)}
.site-nav .links a{text-decoration:none;transition:opacity .3s}
.site-nav .links a:hover{opacity:.72}
.site-nav .lang-toggle{min-height:0;padding:7px 16px;background:none;font-size:9.5px}

/* ---------- hero (shared skeleton, forked content) ---------- */
.hero{position:relative;overflow:hidden;background:var(--obsidian)}
.hero .ken{position:absolute;inset:0;animation:agKen 3.2s cubic-bezier(.22,.61,.21,1) .1s both;transform-origin:50% 22%}
.hero .ken img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;pointer-events:none}
.hero .side{position:absolute;top:0;bottom:0;pointer-events:none;display:flex;align-items:center}
.hero .side span{writing-mode:vertical-rl;font-family:var(--mono);letter-spacing:.3em;color:rgba(237,230,214,.4);animation:agFade 2s 1.1s both}
.hero h1{margin:0;font-family:var(--serif);font-weight:500;line-height:.84;letter-spacing:.005em;text-transform:uppercase;text-shadow:0 4px 50px rgba(18,16,12,.55)}
.hero h1 span{display:inline-block;animation:agUp 1s cubic-bezier(.22,.61,.21,1) both}
.hero h1 span:nth-child(1){animation-delay:.15s}
.hero h1 span:nth-child(2){animation-delay:.23s}
.hero h1 span:nth-child(3){animation-delay:.31s}
.hero h1 span:nth-child(4){animation-delay:.39s}
.hero h1 span:nth-child(5){animation-delay:.47s}
.hero h1 span:nth-child(6){animation-delay:.55s}
.stat-num{font-family:var(--display);font-weight:700;line-height:.9;color:var(--cream)}
.stat-num.gold{color:var(--champagne)}
.stat-label{font-family:var(--mono);text-transform:uppercase;color:var(--champagne);letter-spacing:.16em}

/* mobile hero (5a) */
.hero-m{height:100svh;min-height:640px;max-height:1000px}
.hero-m .scrim{background:linear-gradient(180deg,rgba(18,16,12,.72) 0%,rgba(18,16,12,.12) 30%,rgba(18,16,12,.14) 55%,rgba(18,16,12,.95) 100%)}
.hero-m .toprow{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 20px 0}
.hero-m .toprow .brand{display:flex;align-items:baseline;gap:9px;pointer-events:none}
.hero-m .toprow .brand .name{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.04em}
.hero-m .toprow .brand .star{color:var(--champagne);font-size:11px}
.hero-m .side{right:9px}
.hero-m .side span{font-size:8px}
.hero-m .low{position:absolute;left:22px;right:34px;bottom:42px;pointer-events:none}
.hero-m .kicker{animation:agUp .9s cubic-bezier(.22,.61,.21,1) .2s both}
.hero-m h1{margin:12px 0 0 -3px;font-size:clamp(64px,20vw,84px)}
.hero-m .lede{margin:18px 0 0;max-width:32ch;font-size:14.5px;line-height:1.6;color:rgba(237,230,214,.88);animation:agUp 1s cubic-bezier(.22,.61,.21,1) .6s both}
.hero-m .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(237,230,214,.22);animation:agUp 1s cubic-bezier(.22,.61,.21,1) .7s both}
.hero-m .stat-num{font-size:36px}
.hero-m .stat-label{margin-top:5px;font-size:7px}
.hero-m .metarow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:18px;animation:agUp 1s cubic-bezier(.22,.61,.21,1) .8s both;font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(237,230,214,.55)}

/* desktop hero (4a) */
.hero-d{height:min(836px,calc(100svh - 66px))}
.hero-d .scrim{background:linear-gradient(180deg,rgba(18,16,12,.66) 0%,rgba(18,16,12,.08) 30%,rgba(18,16,12,.12) 58%,rgba(18,16,12,.94) 100%)}
.hero-d .side span{font-size:9px;letter-spacing:.34em}
.hero-d .side.left{left:22px}
.hero-d .side.right{right:22px}
.hero-d .side.right span{animation-delay:1.2s}
.hero-d .low{position:absolute;left:64px;right:64px;bottom:176px;pointer-events:none}
.hero-d .kicker{gap:18px;animation:agUp .9s cubic-bezier(.22,.61,.21,1) .2s both}
.hero-d .kicker .rule{width:72px}
.hero-d .kicker .label{font-size:10.5px;letter-spacing:.3em}
.hero-d h1{margin:14px 0 0 -8px;font-size:clamp(140px,15.5vw,224px);line-height:.82}
.hero-d .subrow{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-top:22px;animation:agUp 1s cubic-bezier(.22,.61,.21,1) .6s both}
.hero-d .lede{margin:0;max-width:40ch;font-size:17.5px;line-height:1.65;color:rgba(237,230,214,.88)}
.hero-d .scrollcue{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,230,214,.55);white-space:nowrap}
.hero-d .stats{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(237,230,214,.18);background:rgba(18,16,12,.58);backdrop-filter:blur(12px);animation:agUp 1s cubic-bezier(.22,.61,.21,1) .8s both}
.hero-d .stats>div{padding:24px 18px 27px;text-align:center;border-right:1px solid rgba(237,230,214,.12)}
.hero-d .stats>div:last-child{border-right:none}
.hero-d .stat-num{font-size:64px}
.hero-d .stat-label{margin-top:9px;font-size:9.5px;letter-spacing:.28em}

/* ---------- marquee ---------- */
.marquee{background:var(--champagne);color:var(--obsidian);overflow:hidden;padding:11px 0;border-top:1px solid rgba(18,16,12,.25)}
.marquee .track{display:flex;width:max-content;animation:agMarquee 34s linear infinite}
.marquee .chunk{white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:17px;padding-right:40px}

/* ---------- la tienda ---------- */
.shop{background:var(--cream);color:var(--obsidian);padding:60px 0 64px}
.shop .head{padding:0 22px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.shop h2{margin:0;font-family:var(--serif);font-weight:500;font-size:52px;line-height:.9}
.shop .drop{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.shop .drop .drop-ship{display:none}
.shop .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding:36px 22px 6px}
.product .frame{cursor:pointer;height:350px;overflow:hidden;position:relative;background:var(--tile)}
.product .frame .zoom{position:absolute;inset:0;transition:transform .9s cubic-bezier(.19,1,.22,1)}
.product .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-family:var(--mono)}
.product .meta .num{font-size:9.5px;letter-spacing:.2em;color:var(--muted)}
.product .meta .price{font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.product .pname{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:22px}
.product .add{display:block;margin-top:14px;text-decoration:none;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--obsidian);border:1px solid var(--obsidian);padding:14px 0;transition:all .3s;background:none;width:100%;cursor:pointer}
.product .add:hover{background:var(--obsidian);color:var(--cream)}

/* ---------- patrocinadores ---------- */
.sponsors{padding:64px 22px 70px;border-top:1px solid rgba(237,230,214,.1)}
.sponsors .kick{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne)}
.sponsors h2{margin:14px 0 0;font-family:var(--serif);font-weight:500;font-size:46px;line-height:.94;color:var(--cream)}
.sponsors .copy{margin:20px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.sponsors .logos{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sponsors .logos .tile{height:100px;position:relative;border:1px solid rgba(198,161,91,.3);background:#050403;display:flex;align-items:center;justify-content:center}
.sponsors .logos .tile img{max-width:82%;max-height:78%;object-fit:contain}
.sponsors .logos .tile.wide{grid-column:1/-1}

.desk{margin-top:44px;background:var(--cream);color:var(--obsidian);padding:36px 26px 38px}
.desk h3{margin:0;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.05}
.desk .note{margin:12px 0 0;font-size:13px;line-height:1.6;color:#5C5344}
.desk .fields{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.desk label{display:flex;flex-direction:column;gap:8px}
.desk label span{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.desk input,.desk textarea{background:transparent;border:1px solid rgba(18,16,12,.3);color:var(--obsidian);padding:14px;font-family:var(--sans);font-size:15px;outline:none;transition:border-color .3s}
.desk input:focus,.desk textarea:focus{border-color:var(--champagne)}
.desk textarea{resize:vertical}
.desk .send{display:block;margin-top:22px;text-decoration:none;text-align:center;background:var(--obsidian);color:var(--cream);padding:17px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;transition:all .3s}
.desk .send:hover{background:var(--champagne);color:var(--obsidian)}

/* ---------- footers ---------- */
.footer-m{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 22px 14px;border-top:1px solid rgba(237,230,214,.1);font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:rgba(237,230,214,.5)}
.footer-m .mail{color:var(--champagne);text-decoration:none}
.footer-d{position:relative;padding:110px 64px 60px;overflow:hidden}
.footer-d .ghost{font-family:var(--display);font-weight:700;font-size:clamp(90px,11vw,158px);line-height:.86;letter-spacing:.01em;text-transform:uppercase;color:rgba(198,161,91,.1);-webkit-text-stroke:1px rgba(198,161,91,.45);text-align:center}
.footer-d .row{margin-top:70px;display:flex;justify-content:space-between;align-items:flex-end;gap:48px;border-top:1px solid rgba(237,230,214,.12);padding-top:44px}
.footer-d .contact .kick{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne)}
.footer-d .contact .mail{display:inline-block;margin-top:12px;font-family:var(--serif);font-weight:500;font-size:30px;color:var(--cream);text-decoration-color:var(--champagne)}
.footer-d .contact .sub{margin-top:10px;font-size:13px;color:rgba(237,230,214,.5)}
.footer-d .socials{display:flex;gap:28px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.footer-d .socials a{text-decoration:none}
.footer-d .fine{text-align:right;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:rgba(237,230,214,.4);line-height:1.9}
.disclaimer{padding:0 22px 34px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:rgba(237,230,214,.32);text-align:center}

/* ---------- product modal ---------- */
.pd-overlay{position:fixed;inset:0;z-index:80;display:none;background:rgba(18,16,12,.92);animation:agFade .25s both}
.pd-overlay.open{display:flex;align-items:center;justify-content:center}
.pd-card{width:100%;height:100%;display:flex;flex-direction:column;background:var(--obsidian);color:var(--cream)}
.pd-card .bar{display:flex;justify-content:space-between;align-items:center;padding:24px 20px 14px;flex:none}
.pd-card .bar .num{font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--champagne)}
.pd-card .close{cursor:pointer;background:none;border:1px solid rgba(237,230,214,.35);border-radius:999px;width:44px;height:44px;font-size:15px;color:var(--cream);transition:all .3s}
.pd-card .close:hover{border-color:var(--champagne);color:var(--champagne)}
.pd-card .photo{flex:1;min-height:0;margin:0 20px;position:relative;background:#EFECE7}
.pd-card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-card .info{padding:18px 20px 34px;flex:none}
.pd-card .titlerow{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pd-card .pdname{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.05}
.pd-card .pdprice{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--champagne);white-space:nowrap}
.pd-card .pdadd{display:block;margin-top:18px;text-decoration:none;text-align:center;background:var(--champagne);color:var(--obsidian);padding:16px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;border:none;width:100%;cursor:pointer}

/* ---------- responsive: desktop ≥860 (4a) ---------- */
.d-only{display:none}
@media (min-width:860px){
  .m-only{display:none}
  .d-only{display:block}
  .marquee{padding:14px 0}
  .marquee .chunk{font-size:24px;padding-right:56px}

  .shop{padding:120px 64px 130px}
  .shop .head{padding:0;gap:48px}
  .shop h2{font-size:104px}
  .shop .drop{font-size:10.5px;letter-spacing:.26em}
  .shop .drop .drop-ship{display:inline}
  .shop .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;padding:70px 0 0;align-items:start}
  .product:nth-child(2){margin-top:64px}
  .product .frame{height:500px}
  .product .frame:hover .zoom{transform:scale(1.05)}
  .product .meta{margin-top:20px}
  .product .meta .num{font-size:10px}
  .product .meta .price{font-size:11px}
  .product .pname{margin-top:8px;font-size:27px}
  .product .add{display:inline-block;width:auto;padding:11px 22px}

  .sponsors{padding:120px 64px}
  .sponsors .inner{display:grid;grid-template-columns:1fr 500px;gap:90px;align-items:start}
  .sponsors .kick{font-size:10px;letter-spacing:.3em}
  .sponsors h2{margin-top:20px;font-size:84px;line-height:.92}
  .sponsors .copy{margin-top:28px;max-width:46ch;font-size:16px;line-height:1.75}
  .sponsors .logos{margin-top:48px;grid-template-columns:repeat(3,1fr);gap:22px}
  .sponsors .logos .tile{height:130px}
  .sponsors .logos .tile.wide{grid-column:auto}
  .desk{margin-top:0;padding:48px 44px 50px}
  .desk h3{font-size:34px}
  .desk .note{margin-top:14px;font-size:13.5px;line-height:1.65}
  .desk .fields{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .desk .fields label.full{grid-column:1/-1}
  .desk input,.desk textarea{padding:12px 14px;font-size:14px}
  .desk .send{margin-top:26px;font-size:10.5px;letter-spacing:.26em}

  .pd-overlay{padding:48px 64px}
  .pd-card{width:100%;max-width:1020px;height:620px;background:var(--cream);color:var(--obsidian);display:grid;grid-template-columns:minmax(0,1fr) 400px;position:relative;animation:agUp .4s cubic-bezier(.22,.61,.21,1) both}
  .pd-card .bar{position:absolute;top:18px;right:18px;padding:0;z-index:2}
  .pd-card .bar .num{display:none}
  .pd-card .close{border-color:rgba(18,16,12,.3);color:var(--obsidian)}
  .pd-card .close:hover{background:var(--obsidian);color:var(--cream);border-color:var(--obsidian)}
  .pd-card .photo{margin:0;background:#E8E3D8}
  .pd-card .info{padding:48px 44px;display:flex;flex-direction:column;justify-content:flex-end}
  .pd-card .titlerow{display:block}
  .pd-card .pdnum-d{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--muted)}
  .pd-card .pdname{margin-top:14px;font-size:44px;line-height:1.02}
  .pd-card .pdprice{display:block;margin-top:14px;font-size:12px;color:var(--muted)}
  .pd-card .pdadd{margin-top:32px;background:var(--obsidian);color:var(--cream);padding:17px;font-size:10.5px;letter-spacing:.26em;transition:all .3s}
  .pd-card .pdadd:hover{background:var(--champagne);color:var(--obsidian)}

  .disclaimer{padding-bottom:28px}
}