/* ==========================================================================
   tokens.css — Champions Tailor · design tokens (bridal-elegant)
   Paleta: blush/champán + tinta/charcoal + oro suave · toque rosa polvo.
   Light-committed (sin auto-oscuro por preferencia del SO; sólo toggle manual).
   ========================================================================== */
:root{
  /* superficies */
  --blush:oklch(97.2% .008 45);
  --blush-2:oklch(94.2% .015 34);
  --champagne:oklch(93% .028 84);
  --white:oklch(99.3% .004 60);
  --ink:oklch(26% .013 55);
  --ink-soft:oklch(43% .013 52);

  /* marca */
  --gold:oklch(75% .082 80);
  --gold-deep:oklch(62% .092 72);
  --gold-tint:oklch(93.5% .04 84);
  --rose:oklch(72% .055 22);
  --rose-deep:oklch(60% .07 20);
  --rose-tint:oklch(94.5% .022 22);

  /* roles */
  --bg:var(--blush);
  --bg-elevated:var(--white);
  --bg-sunken:var(--blush-2);
  --bg-inverse:oklch(24% .014 55);
  --text:var(--ink);
  --text-muted:var(--ink-soft);
  --text-inverse:oklch(96% .01 80);
  --border:oklch(89% .012 55);
  --border-strong:oklch(80% .02 58);

  --primary:var(--ink);
  --primary-strong:oklch(20% .012 55);
  --primary-contrast:oklch(97% .012 82);
  --primary-tint:var(--champagne);
  --accent:var(--gold);
  --accent-deep:var(--gold-deep);
  --focus-ring:var(--gold-deep);

  /* tipografía */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Inter",ui-sans-serif,system-ui,sans-serif;

  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.12rem);
  --step-1:clamp(1.18rem,1.1rem + .4vw,1.45rem);
  --step-2:clamp(1.5rem,1.32rem + .8vw,2.1rem);
  --step-3:clamp(1.95rem,1.6rem + 1.5vw,3rem);
  --display:clamp(2.4rem,1.6rem + 3.4vw,4.6rem);

  /* espaciado / forma */
  --gutter:clamp(1rem,4vw,2.6rem);
  --container:73rem;
  --section-y:clamp(3.5rem,7vw,6.5rem);
  --radius-sm:10px;--radius:16px;--radius-lg:26px;--radius-pill:999px;
  --header-h:5rem;
  --shadow-sm:0 2px 10px oklch(30% .03 55 / .06);
  --shadow:0 18px 46px oklch(30% .04 55 / .10);
  --shadow-lg:0 34px 80px oklch(28% .05 45 / .16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg:oklch(21% .012 50);--bg-elevated:oklch(25% .015 50);--bg-sunken:oklch(18% .01 50);
  --bg-inverse:oklch(96% .01 80);
  --text:oklch(95% .01 82);--text-muted:oklch(78% .015 70);--text-inverse:var(--ink);
  --border:oklch(34% .015 55);--border-strong:oklch(46% .02 58);
  --primary:oklch(93% .01 82);--primary-strong:oklch(88% .012 82);--primary-contrast:oklch(22% .012 55);
  --primary-tint:oklch(30% .02 60);
  --gold:oklch(80% .09 82);--gold-deep:oklch(72% .09 78);--gold-tint:oklch(30% .04 78);
  --rose:oklch(76% .06 22);--rose-tint:oklch(30% .03 20);
  --shadow:0 18px 46px oklch(0% 0 0 / .5);--shadow-lg:0 34px 80px oklch(0% 0 0 / .6);
}
/* ==========================================================================
   base.css — Reset moderno + tipografía base + accesibilidad + scroll-reveal
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100svh;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.01em;text-wrap:balance;color:var(--text)}
h1{font-size:var(--display)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:0}
p{text-wrap:pretty}

.u-serif{font-family:var(--font-display);font-weight:600}
.eyebrow{font-family:var(--font-body);font-size:var(--step--1);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
em{font-style:italic;color:var(--rose-deep)}

::selection{background:var(--gold-tint);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:3px}

.skip-link{position:absolute;left:1rem;top:-120%;z-index:200;padding:.6rem 1rem;background:var(--ink);color:var(--blush);border-radius:8px;font-weight:600}
.skip-link:focus-visible{top:1rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Scroll-reveal (orquestado) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* ==========================================================================
   layout.css — Contenedores, secciones y rejillas
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:82rem}

.section{padding-block:var(--section-y)}
.section--sunken{background:var(--bg-sunken)}
.section--tint{background:linear-gradient(180deg,var(--bg),var(--gold-tint) 60%,var(--bg))}
.section--rose{background:linear-gradient(180deg,var(--rose-tint),var(--bg))}

.section-head{max-width:44rem;margin-inline:auto;text-align:center;display:grid;gap:.7rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-head p.lead{color:var(--text-muted);font-size:var(--step-1)}

.cluster{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.mt-lg{margin-top:1.5rem}

/* Hero grid */
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr;gap:1.4rem}}

/* Services / bridal / craft grids */
.svc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:clamp(1rem,2.2vw,1.6rem)}
.bridal__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
@media (max-width:860px){.bridal__grid{grid-template-columns:1fr}}
.craft__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
@media (max-width:860px){.craft__grid{grid-template-columns:1fr}}

.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem)}
@media (max-width:820px){.visit__grid{grid-template-columns:1fr}}

.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(1.4rem,3vw,2.6rem)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
/* ==========================================================================
   components.css — Champions Tailor · componentes (bridal-elegant)
   ========================================================================== */

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55ch;
  padding:.85rem 1.5rem;min-height:3rem;border-radius:var(--radius-pill);
  background:var(--primary);color:var(--primary-contrast);font-weight:600;font-size:var(--step-0);
  line-height:1;white-space:nowrap;letter-spacing:.01em;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,oklch(100% 0 0/.18) 50%,transparent 80%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:hover::after{transform:translateX(120%)}
.btn--lg{padding:1.02rem 1.9rem;min-height:3.4rem;font-size:calc(var(--step-0) + .02rem)}
.btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:oklch(24% .03 60)}
.btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--border-strong)}
.btn--ghost:hover{border-color:var(--gold-deep);background:var(--gold-tint);color:var(--ink)}
.btn--call{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:oklch(24% .03 60);font-size:var(--step-1)}

.pill{display:inline-flex;align-items:center;gap:.5ch;padding:.4rem .85rem;border-radius:var(--radius-pill);
  background:var(--bg-elevated);border:1px solid var(--border);font-size:var(--step--1);color:var(--text-muted);font-weight:500}
.pill svg{color:var(--gold-deep)}

/* ---------- Header (custom P13: hairline dorada, wordmark, transparente sobre hero) ---------- */
.site-header{position:sticky;top:0;z-index:100;block-size:var(--header-h);display:flex;align-items:center;
  background:transparent;border-block-end:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.site-header[data-scrolled="true"]{
  background:color-mix(in oklch,var(--bg) 88%,transparent);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-block-end-color:color-mix(in oklch,var(--gold) 55%,var(--border));
  box-shadow:0 6px 26px oklch(30% .04 55 / .08)}
.nav{display:flex;align-items:center;justify-content:space-between;inline-size:100%;gap:1.25rem}
.brand{display:inline-flex;align-items:center;gap:.6ch;color:var(--text)}
.brand__logo{height:2.55rem;width:auto;max-width:13.5rem;object-fit:contain}
[data-theme="dark"] .brand__logo{filter:invert(1) brightness(1.9) contrast(1.05)}
.brand__wordmark{font-family:var(--font-display);font-weight:600;font-size:1.7rem;letter-spacing:.01em}

.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav-links a{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--text-muted);position:relative;padding-block:.4rem;transition:color .2s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold-deep);transition:width .28s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
@media (max-width:900px){.nav-links{display:none}}

.nav-actions{display:flex;align-items:center;gap:.6rem}
.hdr-phone{display:inline-flex;align-items:center;gap:.5ch;padding:.55rem 1.05rem;border-radius:var(--radius-pill);
  border:1.5px solid var(--border-strong);font-weight:600;font-size:var(--step--1);letter-spacing:.02em;color:var(--text);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.hdr-phone svg{color:var(--gold-deep)}
.hdr-phone:hover{border-color:var(--gold-deep);background:var(--gold-tint)}
@media (max-width:620px){.hdr-phone{display:none}}
.icon-btn{width:2.7rem;height:2.7rem;border-radius:var(--radius-pill);display:grid;place-items:center;border:1.5px solid var(--border);color:var(--text-muted);transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--gold-deep);color:var(--text)}
.icon-btn .sun{display:none}
[data-theme="dark"] .icon-btn .sun{display:block}
[data-theme="dark"] .icon-btn .moon{display:none}
.nav-toggle{display:none;width:2.7rem;height:2.7rem;border-radius:var(--radius-pill);place-items:center;border:1.5px solid var(--border);color:var(--text)}
@media (max-width:900px){.nav-toggle{display:grid}}

.mobile-menu{position:fixed;inset:var(--header-h) 0 auto 0;z-index:99;background:var(--bg-elevated);
  border-block-end:1px solid var(--border);box-shadow:var(--shadow);
  display:grid;gap:.2rem;padding:1rem var(--gutter) 1.4rem;
  transform:translateY(-130%);transition:transform .38s var(--ease);visibility:hidden}
.mobile-menu[data-open="true"]{transform:none;visibility:visible}
.mobile-menu a{padding:.85rem .4rem;font-size:1.05rem;font-weight:500;border-block-end:1px solid var(--border)}
.mobile-menu .mm-call{margin-top:.8rem;justify-content:center;display:inline-flex;align-items:center;gap:.5ch;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:oklch(24% .03 60);border-radius:var(--radius-pill);
  border:none;font-weight:600;padding:.95rem}

/* ---------- Hero (una sola pantalla) ---------- */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:grid;align-content:center;
  padding-block:clamp(.7rem,1.8svh,1.7rem);isolation:isolate;transform:scale(var(--hero-scale,1));transform-origin:top center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 82% 8%,var(--gold-tint),transparent 55%),radial-gradient(90% 70% at 6% 96%,var(--rose-tint),transparent 60%)}
.hero__text{display:grid;gap:clamp(.7rem,1.6svh,1.15rem);max-width:34rem}
.hero__title{font-size:clamp(2.1rem,1.2rem + 3.2vw + 1.2svh,4.2rem);line-height:1.02;font-weight:600}
.hero__title em{color:var(--rose-deep)}
.hero__sub{color:var(--text-muted);font-size:var(--step-1);max-width:32rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:.5rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.3rem}
.hero__link{display:inline-flex;align-items:center;gap:.5ch;font-weight:600;color:var(--text);border-bottom:1.5px solid var(--gold-deep);padding-bottom:2px}
.hero__link .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--gold-deep);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

.hero__media{position:relative}
.hero__frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid var(--border);background:var(--bg-elevated);aspect-ratio:4/5;
  max-height:calc(100svh - var(--header-h) - 4.5rem)}
.hero__frame img{width:100%;height:100%;object-fit:cover}
.hero__badge{position:absolute;left:-.6rem;bottom:1.1rem;background:var(--bg-elevated);border:1px solid var(--border);
  box-shadow:var(--shadow);border-radius:var(--radius);padding:.7rem 1rem;display:flex;align-items:center;gap:.7ch;max-width:15rem}
.hero__badge svg{color:var(--gold-deep);flex:none}
.hero__badge b{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:600;line-height:1.1}
.hero__badge span{font-size:var(--step--1);color:var(--text-muted)}
@media (max-width:860px){
  .hero{min-height:calc(100svh - var(--header-h));padding-block:1rem .6rem;align-content:start}
  .hero__grid{gap:1rem}
  .hero__text{gap:.6rem}
  .hero__frame{aspect-ratio:16/11;max-height:38svh}
  .hero__sub{font-size:var(--step-0)}
}
@media (max-width:520px){
  .hero__meta{display:none}
  .hero__frame{max-height:34svh}
}
@media (max-height:820px) and (min-width:861px){.hero__title{font-size:clamp(2rem,2.6vw,3.2rem)}.hero__frame{max-height:calc(100svh - var(--header-h) - 2rem)}}
@media (max-height:660px) and (min-width:861px){.hero__sub{display:none}.hero__badge{display:none}}
/* Short viewports (landscape phones / very short windows): compact hero so headline+CTA stay above the fold */
@media (max-height:560px){
  .hero{min-height:auto;padding-block:.6rem}
  .hero__sub,.hero__meta,.hero__badge{display:none}
  .hero__title{font-size:clamp(1.7rem,4.5vw,2.4rem)}
  .hero__frame{max-height:30svh;aspect-ratio:16/9}
}

/* ---------- Signals marquee ---------- */
.signals{border-block:1px solid var(--border);background:var(--bg-elevated);overflow:hidden;padding-block:.85rem}
.signals__track{display:flex;gap:1.4rem;width:max-content;animation:marq 34s linear infinite}
@media (prefers-reduced-motion:reduce){.signals__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.signals__item{display:inline-flex;align-items:center;gap:.55ch;font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--text);white-space:nowrap}
.signals__item svg{color:var(--gold-deep)}
.signals__dot{color:var(--gold-deep);align-self:center}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Services ---------- */
.svc__card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;
  display:grid;gap:.7rem;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.svc__card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--rose));transition:width .4s var(--ease)}
.svc__card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in oklch,var(--gold) 45%,var(--border))}
.svc__card:hover::before{width:100%}
.svc__ico{width:3rem;height:3rem;border-radius:14px;display:grid;place-items:center;background:var(--gold-tint);color:var(--gold-deep)}
.svc__card h3{font-size:var(--step-1)}
.svc__card p{color:var(--text-muted);font-size:.98rem}
.svc__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.svc__tags span{font-size:var(--step--1);padding:.28rem .65rem;border-radius:var(--radius-pill);background:var(--bg-sunken);color:var(--text-muted);border:1px solid var(--border)}
.svc__card--feature{background:linear-gradient(155deg,var(--ink),oklch(30% .02 40));color:var(--text-inverse);border-color:transparent}
.svc__card--feature h3{color:var(--blush)}
.svc__card--feature p{color:oklch(86% .02 80)}
.svc__card--feature .svc__ico{background:oklch(100% 0 0 / .12);color:var(--gold)}
.svc__card--feature .svc__link{color:var(--gold)}
.svc__link{display:inline-flex;align-items:center;gap:.4ch;font-weight:600;color:var(--gold-deep);margin-top:.2rem}
.svc__link svg{transition:transform .25s var(--ease)}
.svc__card:hover .svc__link svg{transform:translateX(4px)}

/* ---------- Bridal specialty band ---------- */
.bridal{position:relative}
.bridal__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border);aspect-ratio:3/4}
.bridal__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bridal__media:hover img{transform:scale(1.05)}
.bridal__chip{position:absolute;right:-.5rem;top:1.2rem;background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow);
  border-radius:var(--radius-pill);padding:.5rem 1rem;font-weight:600;font-size:var(--step--1);display:flex;align-items:center;gap:.5ch}
.bridal__chip svg{color:var(--rose-deep)}
.bridal__body{display:grid;gap:1rem}
.bridal__body h2 em{color:var(--rose-deep)}
.bridal__list{display:grid;gap:.6rem;margin-top:.3rem}
.bridal__row{display:flex;gap:.7ch;align-items:flex-start;font-size:1rem}
.bridal__row svg{color:var(--rose-deep);flex:none;margin-top:.15rem}
.bridal__row b{font-weight:600}

/* ---------- FIT FINDER (star moment) ---------- */
.fitfinder{position:relative}
.ff{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.2rem,3vw,2.6rem);align-items:stretch;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:clamp(1.1rem,2.4vw,2rem)}
@media (max-width:880px){.ff{grid-template-columns:1fr}}

.ff__stage{position:relative;border-radius:var(--radius);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,var(--gold-tint),var(--bg-sunken));
  border:1px solid var(--border);display:grid;place-items:center;padding:1rem;min-height:24rem}
.ff__figure{width:100%;max-width:19rem;height:auto}
.ff__badge{position:absolute;left:.9rem;top:.9rem;display:inline-flex;align-items:center;gap:.5ch;
  font-size:var(--step--1);font-weight:600;color:var(--text-muted);background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:.32rem .75rem}
.ff__state-tag{position:absolute;right:.9rem;top:.9rem;font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  padding:.15rem .8rem;border-radius:var(--radius-pill);background:var(--bg-elevated);border:1px solid var(--border);color:var(--rose-deep);transition:color .3s,border-color .3s}
.ff__stage[data-fit="after"] .ff__state-tag{color:var(--gold-deep);border-color:color-mix(in oklch,var(--gold) 55%,var(--border))}

/* SVG garment: loose -> tailored */
.ff__garment{transition:transform .7s var(--ease);transform-box:fill-box;transform-origin:center center}
.ff__stage[data-fit="before"] .ff__garment{transform:scaleX(1.14)}
.ff__stage[data-fit="after"] .ff__garment{transform:scaleX(1)}
.ff__excess{opacity:1;transition:opacity .55s var(--ease)}
.ff__stage[data-fit="after"] .ff__excess{opacity:0}
.ff__pins{opacity:0;transition:opacity .55s var(--ease) .1s}
.ff__stage[data-fit="after"] .ff__pins{opacity:1}
.ff__g{display:none}
.ff__g.is-active{display:block}
@media (prefers-reduced-motion:reduce){.ff__garment,.ff__excess,.ff__pins{transition:none}}

.ff__panel{display:flex;flex-direction:column;gap:1rem}
.ff__choose{display:flex;flex-wrap:wrap;gap:.5rem}
.ff__opt{display:inline-flex;align-items:center;gap:.5ch;padding:.6rem 1rem;border-radius:var(--radius-pill);
  border:1.5px solid var(--border);font-weight:600;font-size:.95rem;color:var(--text-muted);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.ff__opt svg{color:var(--gold-deep)}
.ff__opt:hover{border-color:var(--gold-deep);color:var(--text)}
.ff__opt[aria-pressed="true"]{background:var(--ink);color:var(--primary-contrast);border-color:var(--ink)}
.ff__opt[aria-pressed="true"] svg{color:var(--gold)}

.ff__readout{display:grid;gap:.3rem}
.ff__gname{font-family:var(--font-display);font-size:var(--step-2);font-weight:600;line-height:1.1}
.ff__gdesc{color:var(--text-muted);font-size:.98rem}
.ff__alts{display:grid;gap:.5rem}
.ff__alt{display:flex;gap:.7ch;align-items:flex-start;font-size:1rem;padding:.55rem .7rem;border-radius:12px;
  background:var(--bg-sunken);border:1px solid var(--border);opacity:0;transform:translateY(6px);
  animation:altin .5s var(--ease) forwards}
.ff__alt svg{color:var(--gold-deep);flex:none;margin-top:.15rem}
.ff__alt b{font-weight:600}
.ff__alt span{color:var(--text-muted)}
@keyframes altin{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ff__alt{opacity:1;transform:none;animation:none}}

.ff__toggle{display:inline-flex;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius-pill);padding:.25rem;gap:.2rem;align-self:flex-start}
.ff__toggle button{padding:.5rem 1.1rem;border-radius:var(--radius-pill);font-weight:600;font-size:.9rem;color:var(--text-muted)}
.ff__toggle button[aria-pressed="true"]{background:var(--bg-elevated);color:var(--text);box-shadow:var(--shadow-sm)}
.ff__note{display:flex;gap:.5ch;align-items:flex-start;font-size:var(--step--1);color:var(--text-muted)}
.ff__note svg{color:var(--gold-deep);flex:none;margin-top:.1rem}
.ff__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:auto;padding-top:.4rem}
.ff__cta .meta{font-size:var(--step--1);color:var(--text-muted)}

/* ---------- Craft band ---------- */
.craft__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border);aspect-ratio:4/5}
.craft__media img{width:100%;height:100%;object-fit:cover}
.craft__body{display:grid;gap:1rem}
.craft__quote{font-family:var(--font-display);font-size:var(--step-2);font-weight:500;font-style:italic;line-height:1.25;color:var(--text)}
.craft__quote em{color:var(--rose-deep)}
.craft__marks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.craft__mark{display:inline-flex;align-items:center;gap:.5ch;padding:.45rem .9rem;border-radius:var(--radius-pill);background:var(--bg-elevated);border:1px solid var(--border);font-size:.92rem;font-weight:500}
.craft__mark svg{color:var(--gold-deep)}

/* ---------- FAQ ---------- */
.faq{max-width:48rem;margin-inline:auto;display:grid;gap:.7rem}
.faq__item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .25s}
.faq__item[data-open="true"]{border-color:color-mix(in oklch,var(--gold) 50%,var(--border))}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;
  font-family:var(--font-display);font-size:var(--step-1);font-weight:600;text-align:left;color:var(--text)}
.faq__q .chev{color:var(--gold-deep);transition:transform .3s var(--ease);flex:none}
.faq__item[data-open="true"] .chev{transform:rotate(180deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq__item[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 1.3rem 1.2rem;color:var(--text-muted)}

/* ---------- Visit ---------- */
.visit__card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.7rem;display:grid;gap:1rem;align-content:start}
.visit__row{display:flex;gap:.8ch;align-items:flex-start}
.visit__row svg{color:var(--gold-deep);flex:none;margin-top:.15rem}
.visit__row b{display:block;font-weight:600}
.visit__row span{color:var(--text-muted);font-size:.96rem}
.visit__hours{display:grid;gap:.4rem;border-top:1px solid var(--border);padding-top:1rem;margin-top:.2rem}
.visit__hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.98rem}
.visit__hours li span{color:var(--text-muted)}
.visit__hours li b{font-weight:600}
.visit__confirm{display:inline-flex;gap:.5ch;align-items:center;font-size:var(--step--1);color:var(--text-muted)}
.visit__confirm svg{color:var(--gold-deep)}

.map-facade{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);min-height:20rem;
  background:linear-gradient(135deg,var(--bg-sunken),var(--gold-tint));display:grid;place-items:center}
.map-facade iframe{width:100%;height:100%;min-height:20rem;border:0;display:block}
.map-facade__btn{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text);font-weight:600}
.map-facade__btn .pin{width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--gold-deep)}

/* ---------- Call CTA band ---------- */
.call-cta{background:linear-gradient(155deg,var(--ink),oklch(31% .02 45));color:var(--text-inverse);position:relative;overflow:hidden}
.call-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 88% 0,oklch(75% .08 80/.22),transparent 55%)}
.call-cta__inner{position:relative;text-align:center;max-width:42rem;margin-inline:auto;display:grid;gap:1rem}
.call-cta__inner h2{color:var(--blush)}
.call-cta__inner h2 em{color:var(--gold)}
.call-cta__inner p{color:oklch(87% .02 80)}
.call-cta__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;margin-top:.5rem}
.call-cta__meta{font-size:var(--step--1);color:oklch(82% .02 80);line-height:1.6}

/* ---------- Sticky mobile call bar ---------- */
.call-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:.6rem var(--gutter);
  background:color-mix(in oklch,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);display:none}
.call-bar .btn{width:100%}
@media (max-width:720px){.call-bar{display:block}body{padding-bottom:4.6rem}}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-sunken);border-top:1px solid var(--border);margin-top:0}
.foot-cta{background:linear-gradient(155deg,var(--ink),oklch(30% .02 40));color:var(--text-inverse)}
.foot-cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;padding-block:clamp(2rem,4vw,3rem)}
.foot-cta__eyebrow{color:var(--gold)}
.foot-cta__title{color:var(--blush);font-size:var(--step-2);max-width:26rem}
.foot-cta__actions{display:grid;gap:.5rem;justify-items:start}
.foot-cta__note{font-size:var(--step--1);color:oklch(84% .02 80)}

.site-footer .container{padding-block:clamp(2.2rem,4vw,3.2rem)}
.footer-about__tag{color:var(--text-muted);font-size:.96rem;margin-top:.7rem;max-width:24rem}
.foot-logo{height:2.6rem;width:auto;max-width:13rem;object-fit:contain}
[data-theme="dark"] .foot-logo{filter:invert(1) brightness(1.9)}
.footer-col h3{font-family:var(--font-body);font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.9rem}
.footer-col a{display:block;color:var(--text-muted);padding-block:.32rem;transition:color .2s}
.footer-col a:hover{color:var(--text)}
.foot-hours{display:grid;gap:.35rem}
.foot-hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.94rem;color:var(--text-muted)}
.foot-hours li b{color:var(--text);font-weight:600}
.foot-hours__note{font-size:var(--step--1);color:var(--text-muted);margin-top:.7rem}
.footer-nap{font-style:normal;color:var(--text-muted);line-height:1.7;font-size:.96rem}
.footer-nap a{display:inline;color:var(--text);font-weight:600}
.foot-map{margin-top:.9rem;min-height:9rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  background:linear-gradient(135deg,var(--bg-sunken),var(--gold-tint));display:grid;place-items:center}
.foot-map iframe{width:100%;height:100%;min-height:9rem;border:0}
.foot-map__btn{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;color:var(--text);font-weight:600;font-size:.9rem}
.foot-map__pin{color:var(--gold-deep)}
.foot-map__link{display:inline-flex;align-items:center;gap:.4ch;margin-top:.6rem;color:var(--gold-deep);font-weight:600;font-size:.92rem}

.footer-bottom{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;font-size:var(--step--1);color:var(--text-muted)}
.studio-credit{opacity:.92}
.studio-credit__link{color:var(--gold-deep);font-weight:600}
/* ==========================================================================
   utilities.css — utilidades atómicas (último en la cascada)
   ========================================================================== */
.u-center{text-align:center}
.u-muted{color:var(--text-muted)}
.u-mt-0{margin-top:0}
.u-mt-sm{margin-top:.6rem}
.u-mt{margin-top:1rem}
.u-mt-lg{margin-top:1.6rem}
.u-mb-0{margin-bottom:0}
.u-maxw{max-width:40rem}
.u-hide{display:none}
.hidden-sm{}
@media (max-width:620px){.hidden-sm{display:none}}
.u-nowrap{white-space:nowrap}
.u-grid{display:grid}
.u-gap{gap:1rem}