/* ============================================================================
   RARA · base.css — reset, layout primitives, header/nav/drawer, hero, section
   heads, generic states, shared form controls, footer, messages.
   Loaded globally after tokens.css. Page-specific rules live in their page file.

   Migrated 1:1 from the old rara.css with the Slice-4 palette applied and gold
   DEMOTED: burgundy is the single accent (links/focus/active), warm-grey carries
   labels/eyebrows, gold survives only on the Colección tier badge (components.css).
   ============================================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-grey)}

/* focus visible on everything (a11y §2.2) — accent ring, not gold */
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
button,input{font:inherit}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand b{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:.22em;padding-left:.22em;color:var(--burgundy)}
/* .brand span wraps the Sello lituus (currentColor); on the light header it reads
   burgundy — the signature the brief reserves for the seal. Footer override below. */
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--burgundy)}
.nav{display:flex;align-items:center;gap:30px;font-size:14px;letter-spacing:.02em}
/* Nav link: burgundy hairline underline that scales in from the left on hover/focus
   (BRAND_BRIEF: "nav links get a red underline that scales in"). Transform-only, so
   no reflow; ::after is out of flow so nothing shifts when it draws. */
.nav a{position:relative;padding:6px 0;transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--burgundy);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid,.4s) var(--ease-out,ease)}
.nav a:hover,.nav a:focus-visible{color:var(--burgundy)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hdr-actions{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.hdr-actions a{display:inline-flex;align-items:center;min-height:40px;white-space:nowrap}
.hdr-actions .hdr-search-icon{display:none;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;color:var(--warm-grey);transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.hdr-search-icon:hover,.hdr-search-icon:focus-visible{color:var(--burgundy)}
.hdr-search-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
/* Lang toggle stays a horizontal inline pair (ES / EN), never stacks; the cart link
   above never wraps — the header holds one clean row down to 375px. Anchors keep the
   motion underline-draw below. */
.langtog{display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto}
/* Language toggle gets the same underline draw so switching locale reads as a nav act. */
.langtog a{position:relative;color:var(--warm-grey);transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.langtog a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--burgundy);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid,.4s) var(--ease-out,ease)}
.langtog a:hover::after{transform:scaleX(1)}
.langtog a.on{color:var(--burgundy);font-weight:600}
.burger{display:none;flex:0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink)}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:20px 24px}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:52px}
.drawer nav{display:flex;flex-direction:column;margin-top:10px}
.drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:24px;min-height:44px}
.drawer nav a span{font-family:var(--mono);font-size:14px;color:var(--warm-grey)}
.x{background:none;border:0;font-family:var(--mono);font-size:13px;letter-spacing:.08em;cursor:pointer;min-height:44px;padding:0 6px}

/* ---------- hero ---------- */
.hero{padding:64px 0 16px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.01em;margin:24px 0}
.hero p{max-width:38ch;color:var(--muted);font-size:17px;margin-bottom:28px}

/* ---------- section heads ---------- */
/* Vertical rhythm only: horizontal gutter comes from .wrap's padding-inline so the
   shorthand's 0 no longer overrides it (content would otherwise touch the edge). */
.sec{padding-block:64px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:-.01em}
.sec-head a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy);border-bottom:1px solid var(--burgundy);padding-bottom:3px}

/* ---------- generic states (loading / empty / error) ---------- */
.state{padding:80px 0;text-align:center;color:var(--muted)}
.state h3{font-family:var(--serif);font-size:28px;color:var(--ink);margin-bottom:10px}

/* ---------- messages (Slice 3) ---------- */
.msgs{margin:18px auto 0;display:flex;flex-direction:column;gap:8px}
.msg{font-size:14px;padding:12px 16px;border:1px solid var(--line-2);background:var(--surface)}
.msg-success{border-color:var(--good);color:var(--good)}
.msg-error{border-color:var(--burgundy);color:var(--burgundy)}
.msg-warning{border-color:var(--gold-ink);color:var(--gold-ink)}   /* warn = amber status (AA-safe), not decorative gold */

/* ---------- forms (auth · account · checkout) ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field>label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-grey)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:15px;padding:12px 13px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--burgundy);outline-offset:1px}
.field-err{font-size:12px;color:var(--burgundy)}
.field-help{font-size:11px;color:var(--muted);line-height:1.45}
.field-help ul{margin:0;padding-left:16px}
.field-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);margin-bottom:18px;cursor:pointer}
.field-check input{width:16px;height:16px;accent-color:var(--burgundy);margin-top:2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-block{width:100%;justify-content:center}
.link-btn{background:none;border:0;color:var(--burgundy);text-decoration:underline;cursor:pointer;font-size:13px;padding:0;font-family:inherit}
.link-btn:hover{color:var(--burgundy-deep)}
.form-msg{font-size:13px;padding:11px 14px;border:1px solid var(--line-2);margin-bottom:16px}
.form-msg-error{border-color:var(--burgundy);color:var(--burgundy)}
.form-msg-warn{border-color:var(--gold-ink);color:var(--gold-ink)}
.inline-resend{display:inline;margin-left:4px}

/* ---------- footer ---------- */
.ftr{background:var(--burgundy);color:var(--cream);margin-top:72px}
.ftr-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:56px 40px}
.ftr .brand b{color:var(--cream)}
.ftr p{color:var(--cream-2);max-width:34ch;margin-top:14px;font-size:14px}
.ftr h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.ftr a{color:var(--cream-2);font-size:14px;display:block;padding:5px 0}
.ftr a:hover{color:var(--cream)}
.ftr-legal{border-top:1px solid rgba(242,239,234,.16);padding:18px 40px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cream-2)}

/* ---------- header + drawer search (chrome-level inputs) ---------- */
.hdr-search input,.drawer-search input{font-family:var(--mono);font-size:12px;padding:9px 12px;border:1px solid var(--line-2);background:var(--surface);min-width:200px;min-height:40px}
.hdr-search input:focus,.drawer-search input:focus{outline:2px solid var(--burgundy);outline-offset:2px}
.drawer-search{margin:12px 0 4px}.drawer-search input{width:100%;font-size:15px;padding:13px 14px}

/* ---------- shared responsive (chrome) ---------- */
/* ES chrome labels run wider than EN; tighten only header gaps so the row stays
   clean within 1280px while leaving lang/cart nowrap rules untouched. */
@media(max-width:1320px){
  .hdr-top{gap:18px}
  .nav{gap:24px}
  .hdr-actions{gap:14px}
}
/* 821-1250px tablet band: design-lead primary lever is search -> icon, preserving
   primary nav, cart, and language toggle across ES/EN header chrome. */
@media(max-width:1250px){
  .hdr-search{display:none}
  .hdr-actions .hdr-search-icon{display:inline-flex}
}
/* Tight low band only: account/login text yields here, still reachable in footer
   and the burger drawer; gaps shrink to keep the row within 821px. */
@media(max-width:940px){
  .hdr-actions a.desktop-only{display:none}
  .hdr-top{gap:12px}
  .nav{gap:20px}
  .hdr-actions{gap:12px}
}
@media(max-width:820px){.nav,.hdr-actions .desktop-only,.hdr-actions .hdr-search-icon{display:none}.burger{display:flex}.ftr-in{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftr-in{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}}
/* Small phones (<=460px): the logo + burger + cart + lang budget exceeds the row,
   so tighten the gaps and scale the wordmark to keep the header one clean line. The
   cart link and lang toggle already nowrap; the burger keeps its 44px touch target. */
@media(max-width:460px){
  .hdr-top{gap:12px}
  .brand{gap:6px}
  .brand b{font-size:18px;letter-spacing:.12em;padding-left:.12em}
  .brand-seal svg{width:22px;height:22px}
  .hdr-actions{gap:12px}
}
/* Reduced motion: the nav / language underline still appears on hover+focus (state
   feedback), it just snaps in with no scale animation — no movement. */
@media(prefers-reduced-motion:reduce){
  .nav a::after,.langtog a::after{transition:none}
}