/* ============================================================
   SCG — Direction themes
   [data-dir="a"] = base (Editorial) — defined in site.css
   [data-dir="b"] = Cobre (color-forward)
   [data-dir="c"] = Índice (editorial-technical)
   ============================================================ */

/* =====================================================
   DIRECTION B — COBRE
   Cobre as protagonist: filled accents, bolder blocks
   ===================================================== */
[data-dir="b"] { --accent: var(--copper); }

[data-dir="b"] .brand span { color: var(--copper-bright); }

/* Buttons lean copper */
[data-dir="b"] .btn--solid { background: var(--copper); border-color: var(--copper); color: #fff; }
[data-dir="b"] .btn--solid:hover { background: var(--ink); border-color: var(--ink); }

/* Marquee on copper wash */
[data-dir="b"] .marquee { background: linear-gradient(180deg, var(--copper-wash), transparent); border-color: var(--copper-wash-2); }

/* Problem — copper number plates */
[data-dir="b"] .pcard { border-top-color: var(--copper); }
[data-dir="b"] .pcard__num { color: var(--copper); }
[data-dir="b"] .pcard__num i { color: var(--ink); }

/* Services — star card becomes a solid copper block */
[data-dir="b"] .svc--star {
  background: linear-gradient(155deg, var(--copper), var(--copper-bright));
  border-color: var(--copper);
  color: #fff;
}
[data-dir="b"] .svc--star .svc__cat,
[data-dir="b"] .svc--star .svc__desc { color: rgba(255,255,255,0.85); }
[data-dir="b"] .svc--star .svc__flag { background: #fff; color: var(--copper); }
[data-dir="b"] .svc--star .svc__list { border-top-color: rgba(255,255,255,0.28); }
[data-dir="b"] .svc--star .svc__list li { color: #fff; }
[data-dir="b"] .svc--star .svc__list li::before { color: #fff; }
[data-dir="b"] .svc:hover { box-shadow: 0 24px 50px rgba(169,119,42,0.18); }

/* Pricing — featured plan goes full copper */
[data-dir="b"] .plan--feat { background: linear-gradient(120deg, var(--copper), var(--copper-bright)); color: #fff; }
[data-dir="b"] .plan--feat .plan__price, [data-dir="b"] .plan--feat .plan__price b { color: #fff; }
[data-dir="b"] .plan--feat .plan__tag { color: #fff; border-color: rgba(255,255,255,0.6); }
[data-dir="b"] .plan--feat .plan__go { border-color: rgba(255,255,255,0.5); color: #fff; }
[data-dir="b"] .plan--feat .plan__go:hover { background: #fff; color: var(--copper); border-color: #fff; }

/* Automoción — copper stat panel */
[data-dir="b"] .auto__stats { background: var(--copper); border-color: var(--copper); }
[data-dir="b"] .astat { background: var(--copper); color: #fff; }
[data-dir="b"] .astat:nth-child(even) { background: var(--copper-bright); }
[data-dir="b"] .astat__v { color: #fff; }
[data-dir="b"] .astat__d { color: rgba(255,255,255,0.82); }

/* Client cards — copper hover wash */
[data-dir="b"] .ccard__mono { background: linear-gradient(135deg, var(--copper-wash-2), transparent 70%); }
[data-dir="b"] .ccard:hover { box-shadow: 0 24px 50px rgba(169,119,42,0.16); }

/* Reviews avatar fuller */
[data-dir="b"] .rev__av { background: var(--copper); color: #fff; }
[data-dir="b"] .gscore__n { color: var(--copper); }

/* =====================================================
   DIRECTION C — ÍNDICE (editorial-technical)
   Hairlines, mono metadata, squared corners, ledger feel
   ===================================================== */
[data-dir="c"] { --accent: var(--copper); }

/* Squared, flatter, more structural */
[data-dir="c"] .btn { border-radius: 0; }
[data-dir="c"] .svc, [data-dir="c"] .pricing, [data-dir="c"] .ccard,
[data-dir="c"] .rev, [data-dir="c"] .pf, [data-dir="c"] .cform,
[data-dir="c"] .auto__stats, [data-dir="c"] .field input,
[data-dir="c"] .field select, [data-dir="c"] .field textarea { border-radius: 0; }

[data-dir="c"] .ccard, [data-dir="c"] .ccard__shot { border-radius: 0; }

/* Sections gain a hairline column grid feel via stronger top rules */
[data-dir="c"] .block + .block { border-top-color: var(--ink); }

/* Headlines a touch tighter, less display-size flamboyance */
[data-dir="c"] h2 { letter-spacing: -0.025em; }

/* Eyebrow becomes a boxed index tag */
[data-dir="c"] .eyebrow { border: 1px solid var(--line-strong); padding: 5px 10px; border-radius: 0; }
[data-dir="c"] .eyebrow::before { display: none; }
[data-dir="c"] .eyebrow .idx { color: var(--ink); background: var(--copper-wash-2); padding: 1px 5px; }

/* Problem — index numbers in mono frame */
[data-dir="c"] .pcard { border-top: 1px solid var(--ink); position: relative; }
[data-dir="c"] .pcard__num { font-variant-numeric: tabular-nums; }

/* Services — flat, no lift; underline + copper rule on hover */
[data-dir="c"] .svc { box-shadow: none; transition: border-color 0.3s var(--ease), background 0.3s; }
[data-dir="c"] .svc:hover { transform: none; box-shadow: none; border-color: var(--ink); background: var(--white); }
[data-dir="c"] .svc__flag { border-radius: 0; }
[data-dir="c"] .svc--star { border-width: 1px; border-color: var(--ink); }
[data-dir="c"] .svc--star::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--copper); }

/* Pricing — monospace ledger prices */
[data-dir="c"] .plan__price b { font-family: var(--font-mono); font-size: 20px; font-weight: 500; }
[data-dir="c"] .plan--feat { background: transparent; border-top: 1px solid var(--ink); border-radius: 0; margin: 0; padding: 20px 0; position: relative; }
[data-dir="c"] .plan--feat::after { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 3px; background: var(--copper); }
[data-dir="c"] .plan__tag { border-radius: 0; }

/* Automoción — squared ledger stat grid */
[data-dir="c"] .astat__v { font-variant-numeric: tabular-nums; }

/* Client cards — index style, flat */
[data-dir="c"] .ccard:hover { transform: none; box-shadow: none; border-color: var(--ink); }
[data-dir="c"] .ccard__tags span { border-radius: 0; }
[data-dir="c"] .lchip { border-radius: 0; }

/* Portfolio — flat */
[data-dir="c"] .pf:hover { transform: none; box-shadow: none; border-color: var(--ink); }

/* Reviews flat + squared avatar */
[data-dir="c"] .rev__av { border-radius: 0; }
[data-dir="c"] .plan__go { border-radius: 0; }

/* Contact form fields squared, mono labels */
[data-dir="c"] .field > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
[data-dir="c"] .chan__v { font-family: var(--font-mono); font-size: 16px; }

/* =====================================================
   DIRECTION D — NOCTURNE (dark)
   Token inversion: warm near-black + gold, modeled on the
   brand's social/OG cards. Most sections invert via tokens.
   ===================================================== */
[data-dir="d"] {
  --paper:        #14110b;
  --paper-deep:   #1d1810;
  --white:        #1b1710;   /* card surfaces */
  --ink:          #f4efe3;   /* primary text */
  --ink-soft:     #a89f8c;
  --line:         rgba(231, 223, 206, 0.12);
  --line-strong:  rgba(231, 223, 206, 0.24);
  --copper:       #c2871f;   /* gold reads brighter on dark */
  --copper-bright:#dca12f;
  --copper-wash:  rgba(194, 135, 31, 0.12);
  --copper-wash-2:rgba(194, 135, 31, 0.22);
  --accent:       var(--copper);
}
[data-dir="d"] body::before { opacity: 0.06; }
[data-dir="d"] .brand span { color: var(--copper-bright); }

/* Header: translucent dark */
[data-dir="d"] .site-head.scrolled { background: color-mix(in srgb, #14110b 92%, transparent); }

/* Solid buttons become gold (a cream button would glare on black) */
[data-dir="d"] .btn--solid { background: var(--copper); border-color: var(--copper); color: #14110b; }
[data-dir="d"] .btn--solid:hover { background: var(--copper-bright); border-color: var(--copper-bright); color: #14110b; }
[data-dir="d"] .btn--copper { color: #14110b; }
[data-dir="d"] .btn--copper:hover { background: var(--copper-bright); border-color: var(--copper-bright); }

/* Service flag chip: gold on dark instead of cream-on-dark */
[data-dir="d"] .svc__flag { background: var(--copper); color: #14110b; }
[data-dir="d"] .svc--star { border-color: var(--copper); }
[data-dir="d"] .svc:hover { box-shadow: 0 24px 50px rgba(0,0,0,0.45); border-color: var(--line-strong); }

/* Star service: subtle gold glow */
[data-dir="d"] .svc--star { background: linear-gradient(160deg, rgba(194,135,31,0.10), var(--white) 60%); }

/* Pricing featured: gold wash */
[data-dir="d"] .plan--feat { background: var(--copper-wash); }

/* Marquee + cards lift shadows tuned for dark */
[data-dir="d"] .ccard:hover, [data-dir="d"] .pf:hover { box-shadow: 0 26px 54px rgba(0,0,0,0.5); }

/* Reviews gold stars stay bright */
[data-dir="d"] .rev__stars, [data-dir="d"] .gscore__stars { color: var(--copper-bright); }

/* Footer: deepest black, keep its light text legible */
[data-dir="d"] .foot { background: #0c0a06; }
[data-dir="d"] .brand--foot { color: #f4efe3; }

/* Contact availability dot stays green; form focus ring gold */
[data-dir="d"] .field input:focus, [data-dir="d"] .field select:focus, [data-dir="d"] .field textarea:focus { box-shadow: 0 0 0 3px var(--copper-wash); }

/* Hero D headline gold accent + watermark a touch stronger */
[data-dir="d"] .hero-d__mark { opacity: 0.05; }