/* ==========================================================================
   SWINCAR DETAILING — Master Luxury Automotive Identity v17.0
   Clean, Focused, Authentic — Zero Slop, 100% Real Detailing Craft
   Supports: Day & Night Theme with Automatic Logo Switching (Dark/Light)
   ========================================================================== */

/* ── DOMAIN 1: DESIGN TOKENS & DUAL THEME COLOR SCHEMES ──────────────────── */
:root {
  color-scheme: dark;

  /* Warm dark foundation */
  --c-canvas-deep:      #0e0e0e;   /* Deepest editorial floor */
  --c-canvas:           #181818;   /* Primary dark surface */
  --c-canvas-elevated:  #242424;   /* Cards & panels (visible step above canvas) */
  --c-canvas-card:      #2e2e2e;   /* Card interiors (step above elevated) */
  --c-canvas-light:     #ffffff;   /* Pure white editorial contrast bands */

  /* Swingcar red accent */
  --c-primary:          #da291c;   /* Primary action and active-state accent */
  --c-primary-hover:    #b81f14;
  --c-primary-active:   #96150b;
  --c-primary-glow:     rgba(218, 41, 28, 0.35);
  --c-primary-dim:      rgba(218, 41, 28, 0.10);
  --c-primary-text:     #ff6b61;
  --c-on-primary:       #ffffff;

  /* Metallic Champagne Gold — from Swingcar logo (used with restraint) */
  --c-gold:             #b8860b;   /* DarkGoldenrod — sophisticated, not orange */
  --c-gold-light:       #d4a017;   /* Contrast-tuned interface gold */
  --c-gold-deep:        #8b6914;   /* Deeper shade for shadows */
  --c-gold-glow:        rgba(212, 160, 23, 0.30);
  --c-gold-dim:         rgba(184, 134, 11, 0.10);
  --c-gold-foil:        linear-gradient(135deg, #f0d060 0%, #d4a017 35%, #b8860b 70%, #a17a16 100%);
  --c-on-gold-foil:     #000000;

  /* Metallic Silver — from Swingcar logo car silhouette */
  --c-silver:           #9e9e9e;   /* Logo metallic silver */
  --c-silver-dim:       rgba(158, 158, 158, 0.15);

  /* Text colors */
  --c-ink:              #ffffff;   /* Display, headers on dark */
  --c-body:             #969696;   /* Reading text on dark */
  --c-body-strong:      #ffffff;   /* Emphasis body on dark */
  --c-body-on-light:    #181818;
  --c-muted:            #a0a0a0;   /* Secondary text accessible on dark surfaces */
  --c-muted-soft:       #b0b0b0;   /* Secondary metadata on dark surfaces */

  /* Dividers and hairlines */
  --c-hairline:         #2a2a2a;   /* 1px divider on dark */
  --c-hairline-bright:  #383838;   /* Visible divider on dark */
  --c-hairline-light:   #d2d2d2;
  --c-hairline-gold:    rgba(212, 160, 23, 0.35);

  /* Headers & Surfaces */
  --c-header-bg:        rgba(24, 24, 24, 0.94);
  --c-header-compact-bg:rgba(14, 14, 14, 0.98);

  /* Semantics */
  --c-success:          #166534;
  --c-success-text:     #4ade80;
  --c-warning:          #f59e0b;

  /* Gradients */
  --g-red:              linear-gradient(180deg, #a00c01 0%, #da291c 64%, #8e0801 100%);
  --g-dark:             linear-gradient(180deg, #242424 0%, #0e0e0e 100%);
  --g-hero-overlay:     linear-gradient(to top, #0e0e0e 0%, rgba(14,14,14,0.90) 22%, rgba(14,14,14,0.42) 62%, rgba(0,0,0,0.10) 100%);

  /* Spacing scale */
  --sp-xxxs: 4px;
  --sp-xxs:  8px;
  --sp-xs:   16px;
  --sp-sm:   24px;
  --sp-md:   32px;
  --sp-lg:   48px;
  --sp-xl:   64px;
  --sp-xxl:  96px;
  --sp-super: 128px;

  /* Geometry */
  --r-none: 0px;     /* Dominant: every CTA, card, band */
  --r-sm:   4px;     /* Form inputs only */
  --r-pill: 9999px;  /* Badge pills only */

  /* Motion */
  --tr-snappy: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-luxury: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts: Titillium Web (Italian automotive tech-grotesque from Urbino) + JetBrains Mono (Technical telemetry) */
  --font:      'Titillium Web', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── LIGHT THEME TOKENS ─────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --c-primary-text:     #b91c1c;
  --c-success:          #047857;
  --c-success-text:     #047857;

  /* Canvases — warm editorial whites */
  --c-canvas-deep:      #f5f5f5;   /* Warm off-white editorial floor */
  --c-canvas:           #ffffff;   /* Pure white bands */
  --c-canvas-elevated:  #ffffff;   /* Elevated panels on light */
  --c-canvas-card:      #fafafa;   /* Card interiors on light */
  --c-canvas-light:     #ffffff;

  /* Text colors */
  --c-ink:              #181818;
  --c-body:             #181818;
  --c-body-strong:      #181818;
  --c-body-on-light:    #181818;
  --c-muted:            #666666;   /* Secondary text accessible on light surfaces */
  --c-muted-soft:       #666666;   /* Secondary metadata on light surfaces */

  /* Gold — high contrast dark bronze for light backgrounds (WCAG AA > 5:1) */
  --c-gold:             #7a5200;
  --c-gold-light:       #8a5f00;
  --c-gold-deep:        #5c3c00;
  --c-gold-glow:        rgba(122, 82, 0, 0.18);
  --c-gold-dim:         rgba(122, 82, 0, 0.08);
  --c-gold-foil:        linear-gradient(135deg, #8a5f00 0%, #7a5200 35%, #6b4600 70%, #5c3c00 100%);
  --c-on-gold-foil:     #ffffff;

  /* Silver on light */
  --c-silver:           #636363;
  --c-silver-dim:       rgba(99, 99, 99, 0.12);

  /* Borders and dividers */
  --c-hairline:         #d2d2d2;
  --c-hairline-bright:  #c0c0c0;
  --c-hairline-light:   #d2d2d2;
  --c-hairline-gold:    rgba(122, 82, 0, 0.25);

  /* Headers & Surfaces */
  --c-header-bg:        rgba(255, 255, 255, 0.94);
  --c-header-compact-bg:rgba(255, 255, 255, 0.98);

  /* Semantic */
  --c-success:          #047857;
  --c-success-text:     #047857;

  /* Gradients */
  --g-dark:             linear-gradient(180deg, #ececec 0%, #f5f5f5 100%);
  --g-hero-overlay:     linear-gradient(to top, #f5f5f5 0%, rgba(245,245,245,0.92) 28%, rgba(245,245,245,0.42) 68%, rgba(0,0,0,0.06) 100%);
}

/* ── DOMAIN 1: GLOBAL RESET & BASE STYLES ────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--c-canvas-deep);
  scrollbar-color: var(--c-gold) var(--c-canvas-deep);
  scrollbar-width: thin;
}

[data-theme="light"] html {
  background-color: var(--c-canvas-deep);
}

/* ── CRITICAL FONT SANITIZER: OVERRIDE TWENTYTWENTYFOUR CARDO & THEME LEAKS ── */
:root {
  --wp--preset--font-family--heading: var(--font) !important;
  --wp--preset--font-family--body: var(--font) !important;
}

h1, h2, h3, h4, h5, h6,
.typo-mega, .typo-xl, .typo-lg, .typo-md, .typo-title, .typo-title-sm,
.pcard__name, .fcard__title, .sec-header__hl,
body, p, span, li, a, button, input, select, textarea {
  font-family: var(--font) !important;
}

strong, b {
  font-family: inherit !important;
  font-weight: 600 !important;
  color: var(--c-ink);
}

.td--mono, .typo-number, .spec-cell__num, code, pre {
  font-family: var(--font-mono) !important;
}

body {
  font-family: var(--font);
  background-color: var(--c-canvas-deep);
  color: var(--c-body);
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--tr-luxury), color var(--tr-luxury);
}

[data-theme="light"] body {
  background-color: var(--c-canvas-deep);
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--tr-snappy);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
}

*:focus-visible {
  outline: 2px solid var(--c-gold-light);
  outline-offset: 3px;
}

/* Accessibility: Screen Reader Text (WordPress & WooCommerce standard) */
.screen-reader-text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* ── LOGO THEME SWITCHING (Day vs Night) ──────────────────────────────────── */
.logo-theme--dark {
  display: block !important;
}
.logo-theme--light {
  display: none !important;
}
[data-theme="light"] .logo-theme--dark {
  display: none !important;
}
[data-theme="light"] .logo-theme--light {
  display: block !important;
}

/* ── DOMAIN 1: TYPOGRAPHY HIERARCHY ──────────────────────────────────────── */
.typo-mega {
  font-family: var(--font);
  font-size: clamp(2.75rem, 7vw, 80px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--c-ink);
  text-wrap: balance;
}

.typo-xl {
  font-family: var(--font);
  font-size: clamp(2rem, 4vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--c-ink);
  text-wrap: balance;
}

.typo-lg {
  font-family: var(--font);
  font-size: clamp(1.75rem, 3vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--c-ink);
  text-wrap: balance;
}

.typo-md {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-ink);
  text-wrap: balance;
}

.typo-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink);
  text-wrap: balance;
}

.typo-title-sm {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.4;
  color: var(--c-ink);
}

.typo-body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-body);
  text-wrap: pretty;
}

.typo-body-sm {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-body);
  text-wrap: pretty;
}

.typo-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.4;
}

.typo-number {
  font-family: var(--font-mono);
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--c-ink);
  font-feature-settings: "tnum";
}

/* ── DOMAIN 4 & 5: LUXURY BUTTONS & BADGES ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xxs);
  min-height: 48px;
  padding: 0 var(--sp-md);
  border-radius: var(--r-none) !important;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: all var(--tr-luxury);
  user-select: none;
}

.btn--primary {
  background: var(--g-red);
  color: var(--c-on-primary) !important;
  border-color: var(--c-primary);
  box-shadow: 0 4px 16px rgba(218, 41, 28, 0.20);
}
.btn--primary:hover {
  background: var(--c-primary-hover);
  box-shadow: 0 6px 24px var(--c-primary-glow);
  transform: translateY(-2px);
}

.btn--gold {
  background: var(--c-gold-foil);
  color: var(--c-on-gold-foil) !important;
  border-color: var(--c-gold-light);
  font-weight: 800;
  box-shadow: 0 4px 16px var(--c-gold-glow);
}
.btn--gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 24px var(--c-gold-glow);
  transform: translateY(-2px);
}

.btn--outline-dark {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.22);
  color: var(--c-ink) !important;
  backdrop-filter: blur(4px);
}
[data-theme="light"] .btn--outline-dark {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.18);
  color: var(--c-ink) !important;
}
.btn--outline-dark:hover {
  border-color: var(--c-ink);
  transform: translateY(-2px);
}

.btn--outline-gold {
  background: rgba(184,134,11,0.04);
  border-color: var(--c-gold);
  color: var(--c-gold-light) !important;
}
.btn--outline-gold:hover {
  background: var(--c-gold-dim);
  border-color: var(--c-gold-light);
  color: var(--c-ink) !important;
  box-shadow: 0 0 16px var(--c-gold-glow);
  transform: translateY(-2px);
}

.btn--text {
  background: none;
  border: none;
  padding: 0;
  min-height: auto;
  color: var(--c-gold-light) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.65px;
}
.btn--text:hover {
  color: var(--c-primary) !important;
}
.btn--text::after {
  content: ' →';
  color: var(--c-gold-light);
  transition: transform var(--tr-snappy);
}
.btn--text:hover::after {
  transform: translateX(4px);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-canvas-card);
  color: var(--c-ink);
  border: 1px solid var(--c-hairline-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.badge--red {
  background: rgba(218, 41, 28, 0.10);
  color: #ff6b61;
  border: 1px solid rgba(218, 41, 28, 0.35);
}

.badge--gold {
  background: rgba(184, 134, 11, 0.10);
  color: var(--c-gold-light);
  border: 1px solid rgba(212, 160, 23, 0.35);
}

/* Brand Accent Line — 3 colors from logo: red | silver | gold */
.brand-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-sm) 0;
}
.brand-line::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--c-primary);
}
.brand-line .brand-line__silver {
  display: none; /* handled via pseudo-elements below */
}
/* Triple line via box-shadow trick */
.brand-line::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--c-silver);
  box-shadow: 22px 0 0 0 var(--c-gold-light);
  margin-right: 22px;
}

/* ── THEME TOGGLE BUTTON (Sun / Moon) ────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--c-canvas-card);
  border: 1px solid var(--c-hairline-bright);
  color: var(--c-gold-light);
  cursor: pointer;
  transition: all var(--tr-snappy);
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  border-color: var(--c-gold-light);
  transform: scale(1.08);
  box-shadow: 0 0 12px var(--c-gold-glow);
}
.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
}
.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn .icon-moon { display: block; }
[data-theme="light"] .theme-toggle-btn .icon-sun { display: block; color: var(--c-gold); }
[data-theme="light"] .theme-toggle-btn .icon-moon { display: none; }

/* ── FLOATING QUICK CONTACT: WHATSAPP (Original Official Icon & High Conversion) ── */
.floating-whatsapp {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 995;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.50);
  transition: transform var(--tr-snappy), box-shadow var(--tr-snappy);
  text-decoration: none;
}
.floating-whatsapp:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.70);
  color: #ffffff !important;
}
.floating-whatsapp svg {
  width: 34px;
  height: 34px;
}

/* ── FLOATING BACK TO TOP BUTTON (Stacked neatly above WhatsApp) ─────────── */
.back-to-top {
  position: fixed;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  right: calc(26px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--c-canvas-elevated);
  border: 1.5px solid var(--c-gold-light);
  color: var(--c-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: all var(--tr-luxury);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: var(--g-red);
  border-color: var(--c-primary);
  color: #ffffff;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 32px var(--c-primary-glow);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* ── DOMAIN 3: EDITORIAL BANDS & LAYOUT SURFACES ─────────────────────────── */
.band--dark {
  background: var(--c-canvas);
  padding: var(--sp-xxl) 0;
  border-top: 1px solid var(--c-hairline);
  position: relative;
}

.band--elevated {
  background: var(--c-canvas-elevated);
  padding: var(--sp-xxl) 0;
  border-top: 1px solid var(--c-hairline);
  position: relative;
}

.band--livery {
  background: linear-gradient(135deg, #a00c01 0%, #da291c 50%, #750901 100%);
  padding: var(--sp-xxl) 0;
  color: var(--c-ink);
  position: relative;
  overflow: hidden;
}

.band--cta {
  background: var(--c-canvas-deep);
  padding: var(--sp-xxl) 0;
  border-top: 1px solid var(--c-hairline);
  text-align: center;
  position: relative;
}

.atmo-divider {
  background: var(--g-dark);
  height: 90px;
  width: 100%;
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
}

.sec-header {
  max-width: 720px;
}
.sec-header__hl {
  color: var(--c-ink);
  margin-bottom: var(--sp-xs);
}
.sec-header__body {
  color: var(--c-body);
  line-height: 1.7;
  font-size: 16px;
}

/* ── DOMAIN 5 & 6: TOP NAVBAR & BRAND HEADER ─────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: var(--c-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-hairline);
  z-index: 1000;
  transition: height var(--tr-luxury), background var(--tr-luxury), border-color var(--tr-luxury);
}

.site-header.is-compact {
  height: 72px;
  background: var(--c-header-compact-bg);
  border-bottom-color: rgba(197, 155, 39, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--sp-md);
}

.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.header-logo img {
  height: 96px;
  width: auto;
  max-width: 280px;
  margin: -6px 0;
  object-fit: contain;
  transition: height var(--tr-luxury);
}

.site-header.is-compact .header-logo img {
  height: 56px;
  margin: 0;
}

.header-brand-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
  text-decoration: none;
}

.header-brand-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-ink);
  transition: color var(--tr-snappy);
  white-space: nowrap;
}

.header-brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-gold-light);
  transition: color var(--tr-snappy);
  white-space: nowrap;
}

.site-header.is-compact .header-brand-title {
  font-size: 15px;
  letter-spacing: 1.2px;
}

.site-header.is-compact .header-brand-sub {
  font-size: 8.5px;
  letter-spacing: 1.5px;
}

.header-nav {
  display: flex;
  gap: clamp(6px, 1.3vw, 20px);
  list-style: none;
  align-items: center;
}

.header-nav__item {
  position: relative;
}

.header-nav__link {
  color: var(--c-body-strong);
  padding: 12px 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  transition: color var(--tr-snappy);
  position: relative;
  min-height: 48px;
}

.header-nav__link:hover,
.header-nav__link.active {
  color: var(--c-ink);
}

.header-nav__link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-gold-light));
  transition: width var(--tr-luxury);
}

.header-nav__link:hover::after,
.header-nav__link.active::after {
  width: calc(100% - 12px);
}

/* Floating Luxury Dropdown Overlay (Safeguard) */
.header-nav__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  background: var(--c-canvas-elevated);
  border: 1px solid var(--c-hairline-bright);
  padding: 8px 0;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all var(--tr-snappy);
  pointer-events: none;
  z-index: 1002;
}

.header-nav__item:hover .header-nav__dropdown,
.header-nav__item:focus-within .header-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header-nav__dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.header-nav__dd-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  text-decoration: none;
  transition: background var(--tr-snappy);
}

.header-nav__dd-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.header-nav__dd-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink);
}

.header-nav__dd-desc {
  font-size: 11px;
  color: var(--c-muted);
}

.header-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxs);
  padding: 10px 18px;
  min-height: 44px;
  border-radius: var(--r-none);
  background: rgba(37, 211, 102, 0.07);
  color: #25d366 !important;
  border: 1px solid rgba(37, 211, 102, 0.30);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  transition: all var(--tr-luxury);
}

.whatsapp-link:hover {
  background: #25d366;
  color: #181818 !important;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.40);
  transform: translateY(-1px);
}

/* ── Mobile Quick Actions in Navbar ──────────────────────────────────────── */
.header-mobile-actions {
  display: none;
}

.mobile-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 11px;
  border-radius: var(--r-none);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  transition: all var(--tr-snappy);
  white-space: nowrap;
  text-decoration: none;
}

.mobile-action-btn--wa {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366 !important;
  border: 1px solid rgba(37, 211, 102, 0.38);
}
.mobile-action-btn--wa:hover {
  background: #25d366;
  color: #121212 !important;
}

.mobile-action-btn--cta {
  background: var(--g-red);
  color: #ffffff !important;
  border: 1px solid var(--c-primary);
  box-shadow: 0 2px 10px rgba(218, 41, 28, 0.35);
}
.mobile-action-btn--cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.mobile-action-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tr-snappy);
}
.mobile-action-ig:hover {
  transform: scale(1.12);
  filter: brightness(1.08);
}
.mobile-action-ig svg {
  display: block;
  width: 28px;
  height: 28px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.mobile-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--c-hairline-bright);
  color: var(--c-ink);
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 36px;
  min-height: 36px;
  min-width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-none);
  transition: all var(--tr-snappy);
}
.mobile-toggle:hover {
  background: var(--c-primary);
  color: #ffffff;
  border-color: var(--c-primary);
}
[data-theme="light"] .mobile-toggle {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: #181818;
}
[data-theme="light"] .mobile-toggle:hover {
  background: var(--c-primary);
  color: #ffffff;
  border-color: var(--c-primary);
}

/* ── DOMAIN 5: MOBILE DRAWER ─────────────────────────────────────────────── */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  z-index: 1998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--tr-luxury);
}
.mobile-drawer-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--c-canvas-elevated);
  border-left: 1px solid var(--c-hairline-bright);
  z-index: 1999;
  transform: translateX(100%);
  transition: transform var(--tr-luxury);
  display: flex;
  flex-direction: column;
  padding: var(--sp-lg) var(--sp-md);
  overflow-y: auto;
}
.mobile-drawer.is-active {
  transform: translateX(0);
}

.mobile-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--c-hairline-bright);
}

.mobile-drawer__close {
  background: transparent;
  border: none;
  color: var(--c-ink);
  cursor: pointer;
  padding: 10px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--tr-snappy);
}
.mobile-drawer__close:hover {
  color: var(--c-primary);
}

/* Luxury Drawer Theme Box */
.drawer-theme-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-top: var(--sp-sm);
  background: var(--c-canvas-card);
  border: 1px solid var(--c-hairline-bright);
  border-radius: var(--r-none);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  gap: 10px;
}

.drawer-theme-box__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-theme-box__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-ink);
}

.drawer-theme-box__hint {
  font-size: 10.5px;
  color: var(--c-muted);
}

.theme-toggle-btn--drawer {
  width: auto;
  min-width: 116px;
  height: 38px;
  padding: 0 12px;
  gap: 7px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--c-hairline-bright);
}

.theme-toggle-btn--drawer .theme-state-dark {
  display: inline;
}
.theme-toggle-btn--drawer .theme-state-light {
  display: none;
}
[data-theme="light"] .theme-toggle-btn--drawer .theme-state-dark {
  display: none;
}
[data-theme="light"] .theme-toggle-btn--drawer .theme-state-light {
  display: inline;
}

[data-theme="light"] .drawer-theme-box {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .drawer-theme-box__label {
  color: #181818;
}
[data-theme="light"] .drawer-theme-box__hint {
  color: #666666;
}
[data-theme="light"] .theme-toggle-btn--drawer {
  background: #f0f0f0;
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--c-gold-dark);
}

.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--sp-lg) 0;
}
.mobile-drawer__link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--c-hairline);
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* ── DOMAIN 7: CINEMA HERO ────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 22%, rgba(218, 41, 28, 0.18), transparent 46%),
    radial-gradient(ellipse at 22% 78%, rgba(212, 160, 23, 0.14), transparent 54%),
    var(--c-canvas-deep);
  padding: 0;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 25%;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-hero-overlay);
  z-index: 2;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-top: 140px;
  padding-bottom: var(--sp-super);
}

.hero__badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-xs);
}

.hero__hl {
  color: var(--c-ink);
  max-width: 900px;
  font-weight: 600;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-xs);
  color: var(--c-gold-light);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero__eyebrow::before {
  width: 20px;
  height: 2px;
  background: var(--c-primary);
  content: "";
}

.hero__hl-accent {
  color: var(--c-gold-light);
}

.hero__hl-period {
  color: var(--c-primary-text);
}

.hero__body {
  color: var(--c-body);
  font-size: 16px;
  line-height: 1.7;
  max-width: 600px;
  margin-top: var(--sp-xs);
}

.hero__ctas {
  display: flex;
  gap: var(--sp-xs);
  margin-top: var(--sp-md);
  flex-wrap: wrap;
}

.spec-bar {
  display: flex;
  gap: 0;
  margin-top: var(--sp-xl);
  border-top: 1px solid var(--c-hairline-bright);
  padding-top: var(--sp-md);
  flex-wrap: wrap;
}

.spec-cell {
  padding: 0 var(--sp-xl) 0 0;
  border-right: 1px solid var(--c-hairline-bright);
  margin-right: 0;
  flex-shrink: 0;
}

.spec-cell:last-child {
  border-right: none;
  padding-right: 0;
}

.spec-cell__num {
  font-family: var(--font-mono);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--c-ink);
  display: block;
}

.spec-cell__label {
  margin-top: 6px;
  color: var(--c-muted-soft);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.spec-cell--accent .spec-cell__num {
  color: var(--c-primary);
}

.spec-cell--gold .spec-cell__num {
  color: var(--c-gold-light);
}

/* ── DOMAIN 2: AUTHORITY BAR ──────────────────────────────────────────────── */
.authority {
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-hairline);
  position: relative;
}

.authority__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.authority__founder {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.authority__avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--g-red);
  border: 2px solid var(--c-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  flex-shrink: 0;
  overflow: hidden;
}

.authority__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.authority__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 2px;
}
.authority__name span {
  color: var(--c-gold-light);
}

.authority__quote {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-body);
  max-width: 480px;
  line-height: 1.6;
}

.authority__tech {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tech-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  padding: 10px 18px;
  min-height: 44px;
  background: var(--c-canvas-deep);
  border: 1px solid var(--c-hairline-bright);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-body);
  border-radius: var(--r-none);
}
.tech-badge strong {
  color: var(--c-ink);
}

/* ── 50/50 BEFORE-AFTER SPLITTER ─────────────────────────────────────────── */
.splitter {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border: 1px solid var(--c-hairline-bright);
  cursor: ew-resize;
  user-select: none;
  margin-top: var(--sp-lg);
  border-radius: var(--r-none);
  touch-action: pan-y;
}

.splitter__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.splitter__before {
  width: 50%;
  border-right: 2px solid var(--c-primary);
  filter: brightness(.72) contrast(.85) saturate(.4);
}

@keyframes splitter-pulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(218, 41, 28, 0.4), 0 0 0 2px var(--c-gold-light);
  }
  50% {
    box-shadow: 0 0 32px rgba(218, 41, 28, 0.8), 0 0 0 4px rgba(229, 169, 60, 0.4);
  }
}

.splitter:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

.splitter__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 2px solid var(--c-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 0 24px rgba(218, 41, 28, 0.5);
  animation: splitter-pulse 3s infinite ease-in-out;
}

.splitter__label {
  position: absolute;
  top: 24px;
  padding: 8px 16px;
  background: rgba(17, 17, 17, 0.9);
  border: 1px solid var(--c-hairline-bright);
  backdrop-filter: blur(8px);
  z-index: 5;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.splitter__label--before {
  left: 24px;
  border-color: rgba(218, 41, 28, 0.5);
}

.splitter__label--after {
  right: 24px;
  border-color: var(--c-gold-light);
  color: var(--c-gold-light);
}

/* ── DOMAIN 3 & 4: CERAMICS & COMPLEMENTARY CARDS ────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.pcard {
  background: var(--c-canvas-elevated);
  border: 1px solid var(--c-hairline-bright);
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--r-none);
  transition: all var(--tr-luxury);
}

.pcard:hover {
  border-color: rgba(212, 160, 23, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.pcard--featured {
  border-top: 3px solid var(--c-gold-light);
  background: var(--c-canvas-card);
}

.pcard__flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 18px;
  background: var(--c-gold-foil);
  color: var(--c-on-gold-foil);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  z-index: 2;
}

.pcard__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--c-hairline);
}

.pcard__body {
  padding: var(--sp-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.pcard__eyebrow {
  color: var(--c-gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.pcard__name {
  color: var(--c-ink);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.pcard__price {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--c-ink);
  margin: 0;
}
.pcard--featured .pcard__price {
  color: var(--c-gold-light);
}

.pcard__price-unit {
  font-size: 14px !important;
  font-weight: 400;
  color: var(--c-muted-soft);
  margin-left: 6px;
}

.pcard__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-body);
  padding: 10px 0;
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
}
.pcard__meta svg {
  color: var(--c-gold-light);
}

.pcard__group-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-body-strong);
  margin-top: var(--sp-xs);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pcard__group-label::before {
  content: '■';
  color: var(--c-primary);
  font-size: 8px;
}

.pcard__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.pcard__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-body);
  line-height: 1.5;
}

.pcard__list li svg {
  width: 14px;
  height: 14px;
  color: var(--c-gold-light);
  flex-shrink: 0;
  margin-top: 3px;
}

.pcard__promo {
  padding: var(--sp-xs);
  background: rgba(229, 169, 60, 0.08);
  border: 1px solid rgba(229, 169, 60, 0.3);
  margin-top: var(--sp-xs);
}

.pcard__footer {
  padding: var(--sp-md);
  border-top: 1px solid var(--c-hairline);
  background: rgba(0,0,0,0.06);
}
.pcard__footer .btn {
  width: 100%;
}

/* Complementary Services Cards (fcard) */
.fcard {
  background: var(--c-canvas-elevated);
  border: 1px solid var(--c-hairline-bright);
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--r-none);
  transition: all var(--tr-luxury);
}

.fcard:hover {
  border-color: rgba(218, 41, 28, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.fcard--featured {
  border-top: 3px solid var(--c-primary);
}

.fcard__img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-bottom: 1px solid var(--c-hairline);
  display: block;
}

.fcard__body {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  flex-grow: 1;
}

.fcard__eyebrow {
  color: var(--c-primary);
}

.fcard__title {
  color: var(--c-ink);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.fcard__price {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--c-ink);
  margin: 0;
}

.fcard__price-unit {
  font-size: 14px !important;
  font-weight: 400;
  color: var(--c-muted-soft);
  margin-left: 6px;
}

.fcard__list {
  list-style: none;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fcard__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-body);
  line-height: 1.5;
}

.fcard__list li svg {
  width: 14px;
  height: 14px;
  color: var(--c-primary);
  flex-shrink: 0;
  margin-top: 3px;
}

.fcard__footer {
  padding: var(--sp-md);
  border-top: 1px solid var(--c-hairline);
  background: rgba(0,0,0,0.06);
}
.fcard__footer .btn {
  width: 100%;
}

/* Vehicle Tabs */
.vtabs {
  display: flex;
  border: 1px solid var(--c-hairline-bright);
  overflow: hidden;
  border-radius: var(--r-none);
  margin: var(--sp-xs) 0;
}

.vtab {
  flex: 1;
  padding: 12px var(--sp-xs);
  min-height: 48px;
  background: var(--c-canvas-deep);
  color: var(--c-body);
  border: none;
  border-right: 1px solid var(--c-hairline);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all var(--tr-snappy);
}

.vtab:last-child {
  border-right: none;
}

.vtab:hover {
  background: var(--c-canvas-card);
  color: var(--c-ink);
}

.vtab--active,
.vtab--active:hover {
  background: var(--g-red);
  color: #ffffff;
}

/* ── DOMAIN 7: INSTAGRAM GALLERY GRID ────────────────────────────────────── */
.gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-lg);
}

.gallery-profile {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--c-canvas-elevated);
  padding: 12px 24px;
  border: 1px solid var(--c-hairline-bright);
  border-radius: var(--r-none);
}

.gallery-handle {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

.gallery-followers {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gold-light);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--c-hairline);
  margin-top: var(--sp-lg);
}

.gallery-tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #0d0d0d;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-luxury);
}

.gallery-tile:hover img {
  transform: scale(1.08);
}

.gallery-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.4) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-md);
  opacity: 0;
  transition: opacity var(--tr-luxury);
}

.gallery-tile:hover .gallery-tile__overlay {
  opacity: 1;
}

.gallery-tile__tag {
  color: var(--c-gold-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.gallery-tile__caption {
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── DOMAIN 1 & 6: COMPARATIVE TABLE ─────────────────────────────────────── */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-hairline-bright);
  margin-top: var(--sp-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.data-table th {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--c-hairline-bright);
  background: var(--c-canvas-elevated);
  color: var(--c-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.data-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-body);
  font-size: 13px;
}

.data-table tr:hover td {
  background: rgba(197, 155, 39, 0.04);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table .col--featured th {
  color: var(--c-gold-light);
  background: rgba(197, 155, 39, 0.1);
  border-left: 1px solid rgba(197, 155, 39, 0.3);
  border-right: 1px solid rgba(197, 155, 39, 0.3);
}

.data-table .col--featured td {
  color: var(--c-ink);
  font-weight: 600;
  background: rgba(197, 155, 39, 0.04);
  border-left: 1px solid rgba(197, 155, 39, 0.2);
  border-right: 1px solid rgba(197, 155, 39, 0.2);
}

.data-table .td--check-yes {
  color: var(--c-gold-light);
  font-weight: 700;
}

.data-table .td--check-no {
  color: var(--c-muted);
}

.data-table .td--price {
  color: var(--c-ink);
  font-weight: 700;
  font-size: 15px;
}

.data-table .td--mono {
  font-family: var(--font-mono);
  color: var(--c-gold-light);
  font-weight: 600;
}

/* ── DOMAIN 4: 5-STAGE PROCESS TIMELINE ──────────────────────────────────── */
.process-list {
  display: flex;
  flex-direction: column;
}

.process-row {
  display: grid;
  grid-template-columns: 88px 1fr 140px;
  gap: var(--sp-md);
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--c-hairline);
  transition: all var(--tr-snappy);
}

.process-row:last-child {
  border-bottom: none;
}

.process-row:hover {
  background: rgba(197, 155, 39, 0.03);
  padding-left: var(--sp-xs);
}

.process-row__num {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--c-muted);
  line-height: 1;
}

.process-row--done .process-row__num {
  color: var(--c-success);
}

.process-row--active .process-row__num {
  color: var(--c-primary);
}

.process-row--active {
  border-left: 3px solid var(--c-primary);
  padding-left: var(--sp-md);
  background: rgba(218, 41, 28, 0.03);
}

.process-row__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.process-row__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
}

.process-row--active .process-row__title {
  color: var(--c-primary);
}

.process-row__desc {
  color: var(--c-body);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

.process-row__status {
  text-align: right;
  padding-top: 6px;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.process-row--done .process-row__status {
  color: var(--c-success);
}

.process-row--active .process-row__status {
  color: var(--c-primary);
}

/* ── DOMAIN 5: BOOKING FORM & LIVE QUOTATION SUITE ───────────────────────── */
.booking-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--c-hairline-bright);
  border: 1px solid var(--c-hairline-bright);
  margin-top: var(--sp-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  box-sizing: border-box;
  max-width: 100%;
}

.booking-form {
  background: var(--c-canvas-elevated);
  padding: var(--sp-xl);
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.booking-form .form-label {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.booking-privacy {
  margin-top: var(--sp-xs);
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.booking-aside {
  background: var(--c-canvas);
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.booking-submit-btn {
  width: 100%;
  min-height: 52px;
  height: auto;
  padding: 14px 18px;
  font-size: 14px;
  letter-spacing: 0.8px;
  white-space: normal !important;
  text-align: center;
  line-height: 1.35;
  word-break: break-word;
  box-sizing: border-box;
}

.booking-call-btn {
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 16px;
  font-size: 14px;
  justify-content: center;
  white-space: normal !important;
  text-align: center;
  line-height: 1.35;
  box-sizing: border-box;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxxs);
  margin-bottom: var(--sp-sm);
}

.form-label {
  color: var(--c-body-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--c-canvas-deep);
  color: var(--c-ink);
  border: 1px solid var(--c-hairline-bright);
  border-radius: var(--r-sm);
  padding: 14px var(--sp-xs);
  min-height: 48px;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  transition: border-color var(--tr-snappy);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--c-muted);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--c-gold-light);
}

.form-textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e5a93c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
  cursor: pointer;
}

.tslot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.tslot {
  padding: 12px 0;
  min-height: 44px;
  background: var(--c-canvas-deep);
  border: 1px solid var(--c-hairline);
  color: var(--c-body);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--r-none);
  transition: all var(--tr-snappy);
}

.tslot:hover {
  border-color: var(--c-gold-light);
  color: var(--c-ink);
}

.tslot--active {
  background: var(--g-red);
  border-color: var(--c-primary);
  color: #ffffff;
}

.summary-box {
  background: var(--c-canvas-elevated);
  border: 1px solid var(--c-hairline-bright);
  border-top: 2px solid var(--c-gold-light);
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-hairline);
  box-sizing: border-box;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-muted-soft);
  flex-shrink: 0;
}

.summary-row__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
  text-align: right;
  word-break: break-word;
}

.summary-row--total {
  padding: 14px 12px;
  background: rgba(197, 155, 39, 0.05);
  margin-top: 8px;
  border-top: 1px dashed rgba(197, 155, 39, 0.35);
  box-sizing: border-box;
}

.summary-row--total .summary-row__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
}

.summary-row--total .summary-row__value {
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 800;
  color: var(--c-gold-light);
  text-align: right;
}

.summary-row--total .summary-row__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
}

.summary-row--total .summary-row__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--c-gold-light);
}

/* ── DOMAIN 4 & 5: VEHICLE TRACKING STATUS PORTAL ────────────────────────── */
.tracking-list {
  border: 1px solid var(--c-hairline-bright);
  background: var(--c-canvas-elevated);
}

.tracking-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: 22px var(--sp-md);
  border-bottom: 1px solid var(--c-hairline);
}

.tracking-step:last-child {
  border-bottom: none;
}

.tracking-step__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-canvas-deep);
  border: 1.5px solid var(--c-hairline-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--c-muted);
  flex-shrink: 0;
}

.tracking-step--done .tracking-step__dot {
  background: var(--c-success);
  border-color: var(--c-success);
  color: #ffffff;
}

.tracking-step--active .tracking-step__dot {
  background: var(--g-red);
  border-color: var(--c-primary);
  color: #ffffff;
}

.tracking-step__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
}

.tracking-step--active .tracking-step__title {
  color: var(--c-primary);
}

.tracking-step__desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-body);
  margin-top: 3px;
  margin-bottom: 0;
}

/* ── DOMAIN 6: FOOTER (5 Columns Architecture) ───────────────────────────── */
.site-footer {
  background: var(--c-canvas-deep);
  border-top: 1px solid var(--c-hairline-bright);
  padding-top: var(--sp-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: var(--sp-xl);
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--c-hairline);
}

.footer-logo {
  height: 54px;
  width: auto;
  margin-bottom: var(--sp-sm);
}

.footer-tagline {
  color: var(--c-body);
  line-height: 1.7;
  max-width: 280px;
  margin: 0;
  font-size: 13px;
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: var(--sp-sm);
}

.footer-col__title {
  color: var(--c-ink);
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-col__title::before {
  content: '■';
  color: var(--c-gold-light);
  font-size: 8px;
}

.footer-col__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.footer-col__links a {
  color: var(--c-body);
  font-size: 13px;
  transition: all var(--tr-snappy);
  padding: 2px 0;
}

.footer-col__links a:hover {
  color: var(--c-gold-light);
  transform: translateX(3px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  padding: var(--sp-md) 0;
}

.footer-copy {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
}

/* ── DOMAIN 6: INNER PAGES & WOOCOMMERCE SYSTEM ──────────────────────────── */
.inner-hero {
  padding: 140px 0 48px;
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-hairline-bright);
}

.inner-main {
  padding: var(--sp-xl) 0;
  min-height: 60vh;
  background: var(--c-canvas-deep);
}

.inner-card {
  background: var(--c-canvas-elevated);
  border: 1px solid var(--c-hairline-bright);
  padding: var(--sp-xl);
  border-radius: var(--r-none);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxs);
  border-right: 1px solid var(--c-hairline-bright);
  padding-right: var(--sp-md);
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-body);
  border: 1px solid transparent;
  transition: all var(--tr-snappy);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--c-canvas-deep);
  border-color: var(--c-hairline-bright);
  color: var(--c-gold-light);
  border-left: 3px solid var(--c-primary);
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-hairline-bright);
}

.woocommerce table.shop_table th {
  background: var(--c-canvas-elevated);
  color: var(--c-ink);
  padding: 16px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-hairline-bright);
}

.woocommerce table.shop_table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-body);
}

.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  background: var(--g-red) !important;
  color: var(--c-on-primary) !important;
  border: 1.5px solid var(--c-primary) !important;
  border-radius: var(--r-none) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  min-height: 48px !important;
  cursor: pointer;
  transition: all var(--tr-snappy) !important;
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  background: var(--c-primary-hover) !important;
  transform: translateY(-2px);
}

/* ── DOMAIN 3 & 6: RESPONSIVE BREAKPOINTS ────────────────────────────────── */
@media (max-width: 1240px) {
  .header-cta .whatsapp-link {
    display: none !important;
  }
  .header-nav {
    gap: clamp(4px, 1vw, 12px);
  }
  .header-nav__link {
    font-size: 12px;
    padding: 10px 4px;
    letter-spacing: 0.5px;
  }
}

@media (max-width: 1120px) {
  /* Ocultar nav desktop y header-cta desktop */
  .header-nav,
  .header-cta {
    display: none !important;
  }

  .header-mobile-actions {
    display: flex !important;
    align-items: center;
    gap: 7px;
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .header-logo {
    gap: 8px;
  }

  .header-brand-title {
    font-size: 14px;
    letter-spacing: 0.8px;
  }

  .header-brand-sub {
    font-size: 8px;
    letter-spacing: 1.2px;
  }

  /* Floating luxury pill navbar */
  .site-header {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: 60px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    background: rgba(14, 14, 14, 0.86) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    z-index: 1000 !important;
  }

  .site-header.is-compact {
    height: 58px !important;
    background: rgba(12, 12, 12, 0.94) !important;
    border-color: rgba(212, 160, 23, 0.35) !important;
  }

  /* Subtle accent rim light at the bottom of the pill */
  .site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, 0.35) 50%, transparent 100%);
    pointer-events: none;
  }

  [data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  }

  .site-header .header-logo img,
  .site-header.is-compact .header-logo img {
    height: 38px !important;
    max-width: 110px !important;
    margin: 0 !important;
  }

  .header-inner {
    justify-content: space-between;
    gap: 0;
    padding: 0 8px 0 12px;
    height: 100%;
  }
}

@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--sp-lg);
  }
  .process-row {
    grid-template-columns: 72px 1fr;
  }
  .process-row__status {
    display: none;
  }
}

@media (max-width: 960px) {
  /* grid-3: 1 columna base (el bloque tablet 640-960px lo sobreescribe a 2 cols) */
  .grid-3 {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* grid-2: permanece en 2 columnas hasta ≤640px */
  .booking-wrap {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero__content {
    padding-bottom: var(--sp-xxl);
  }
  .spec-cell__num {
    font-size: 52px;
  }
  .spec-cell {
    padding-right: var(--sp-md);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
  }
  .band--dark,
  .band--elevated,
  .band--livery,
  .band--cta {
    padding: var(--sp-xl) 0;
  }
  .back-to-top {
    bottom: 24px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  /* ── Tipografía fluid ─────────────────────────────────────────────── */
  .typo-mega {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
    letter-spacing: -1px;
  }
  .typo-lg {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    letter-spacing: -0.3px;
  }

  /* ── Grids: 1 columna total en smartphone ─────────────────────────── */
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* ── Spec Bar: CSS Grid 2×2 (más robusto que flex-wrap + width:50%) ─ */
  .spec-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm) var(--sp-md);
    padding-top: var(--sp-sm);
    margin-top: var(--sp-md);
    border-top-color: var(--c-hairline);
  }
  .spec-cell {
    border-right: none;
    padding-right: 0;
    width: auto;
  }
  .spec-cell__num {
    font-size: clamp(30px, 9vw, 44px);
    letter-spacing: -1px;
  }

  /* ── Hero: padding ajustado para smartphone ───────────────────────── */
  .hero__content {
    padding-top: 96px;
    padding-bottom: var(--sp-xl);
  }

  /* ── Hero CTAs: columna full-width con buen touch target ─────────── */
  .hero__ctas {
    flex-direction: column;
    gap: var(--sp-xxs);
    margin-top: var(--sp-sm);
  }
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }

  /* ── Gallery: 2 columnas en mobile (más compacto que 1 columna) ─── */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Footer: 1 columna ───────────────────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  /* ── Process Timeline: número más pequeño ────────────────────────── */
  .process-row {
    grid-template-columns: 52px 1fr;
    gap: var(--sp-sm);
    padding: var(--sp-sm) 0;
  }
  .process-row__num {
    font-size: 28px;
    letter-spacing: -1px;
  }
  .process-row__title {
    font-size: 15px;
  }

  /* ── Booking Form: padding cómodo en mobile ──────────────────────── */
  .booking-form,
  .booking-aside {
    padding: var(--sp-sm);
  }

  /* ── Time slots: 3 columnas ──────────────────────────────────────── */
  .tslot-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Splitter: altura reducida en smartphone ─────────────────────── */
  .splitter {
    height: 260px;
  }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES — Complete Editorial Day Mode
   Swingcar light theme: editorial surfaces, ink #181818, warm hairlines
   ========================================================================== */

/* Root body/html baseline */
[data-theme="light"] {
  background-color: var(--c-canvas-deep);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .site-header.is-compact {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(212, 160, 23, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .header-nav__link {
  color: #484848;
}
[data-theme="light"] .header-nav__link:hover,
[data-theme="light"] .header-nav__link.active {
  color: #181818;
}
[data-theme="light"] .mobile-toggle {
  color: #181818;
}
[data-theme="light"] .mobile-drawer {
  background: #ffffff;
  border-left-color: var(--c-hairline);
}
[data-theme="light"] .mobile-drawer__link {
  color: #181818;
  border-bottom-color: var(--c-hairline);
}

/* ── WhatsApp ────────────────────────────────────────────────────────────── */
[data-theme="light"] .whatsapp-link {
  background: rgba(37, 211, 102, 0.08) !important;
  color: #1a9e50 !important;
  border: 1px solid rgba(37, 211, 102, 0.30) !important;
  font-weight: 600 !important;
}
[data-theme="light"] .whatsapp-link:hover {
  background: #25d366 !important;
  color: #181818 !important;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .badge {
  background: #f0f0f0;
  color: #484848;
  border: 1px solid #c8c8c8;
}
[data-theme="light"] .badge--red {
  background: #fff0ee !important;
  color: #b91c1c !important;
  border: 1px solid #f0a09b !important;
}
[data-theme="light"] .badge--gold {
  background: #fdf5dc !important;
  color: #7a5200 !important;
  border: 1px solid #d4a017 !important;
}

/* ── Editorial Bands — CRITICAL: these were black in light mode ──────────── */
[data-theme="light"] .band--dark {
  background: var(--c-canvas-deep);  /* #f5f5f5 warm off-white */
  border-top-color: var(--c-hairline);
}
[data-theme="light"] .band--elevated {
  background: var(--c-canvas);  /* #ffffff pure white */
  border-top-color: var(--c-hairline);
}
[data-theme="light"] .band--cta {
  background: var(--c-canvas-deep);
  border-top-color: var(--c-hairline);
}
[data-theme="light"] .atmo-divider {
  background: var(--g-dark);
  border-color: var(--c-hairline);
}

/* ── Authority Bar ───────────────────────────────────────────────────────── */
[data-theme="light"] .authority {
  background-color: var(--c-canvas);
  border-bottom-color: var(--c-hairline);
}
[data-theme="light"] .authority__name {
  color: #181818;
}
[data-theme="light"] .authority__name span {
  color: var(--c-gold-light);
}
[data-theme="light"] .authority__quote {
  color: #484848;
}
[data-theme="light"] .tech-badge {
  background: #f8f8f8;
  border: 1px solid #d2d2d2;
  color: #484848;
}
[data-theme="light"] .tech-badge strong {
  color: #181818;
}

/* ── Section Headers ─────────────────────────────────────────────────────── */
[data-theme="light"] .sec-header__hl,
[data-theme="light"] .typo-mega,
[data-theme="light"] .typo-xl,
[data-theme="light"] .typo-lg,
[data-theme="light"] .typo-md,
[data-theme="light"] .typo-title {
  color: #181818;
}
[data-theme="light"] .sec-header__body,
[data-theme="light"] .typo-body,
[data-theme="light"] .typo-body-sm {
  color: #484848;
}

/* ── Cards (pcards & fcards) ─────────────────────────────────────────────── */
[data-theme="light"] .pcard,
[data-theme="light"] .fcard {
  background: #ffffff;
  border-color: #d2d2d2;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .pcard--featured {
  background: #fefefe;
  border-top-color: var(--c-gold-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .fcard--featured {
  border-top-color: var(--c-primary);
}
[data-theme="light"] .fcard__title,
[data-theme="light"] .pcard__name {
  color: #181818;
}
[data-theme="light"] .fcard__price,
[data-theme="light"] .pcard__price {
  color: #181818;
}
[data-theme="light"] .pcard--featured .pcard__price {
  color: var(--c-gold-light);
}
[data-theme="light"] .fcard__meta,
[data-theme="light"] .pcard__meta {
  border-top-color: #e8e8e8;
  border-bottom-color: #e8e8e8;
  color: #666666;
}
[data-theme="light"] .fcard__list li,
[data-theme="light"] .pcard__list li {
  color: #484848;
}
[data-theme="light"] .pcard__eyebrow {
  color: var(--c-gold-light);
}
[data-theme="light"] .fcard__eyebrow {
  color: var(--c-primary);
}
[data-theme="light"] .pcard__group-label {
  color: #181818;
}
[data-theme="light"] .pcard__promo {
  background: #fdf5dc;
  border-color: #d4a017;
}
[data-theme="light"] .pcard__footer,
[data-theme="light"] .fcard__footer {
  background: #f8f8f8;
  border-top-color: #e0e0e0;
}
[data-theme="light"] .pcard__img {
  border-bottom-color: #e0e0e0;
}

/* ── Vehicle Tabs ────────────────────────────────────────────────────────── */
[data-theme="light"] .vtabs {
  border-color: #d2d2d2;
}
[data-theme="light"] .vtab {
  background: #f5f5f5;
  color: #484848;
  border-right-color: #d2d2d2;
}
[data-theme="light"] .vtab:hover {
  background: #ececec;
  color: #181818;
}
[data-theme="light"] .vtab--active,
[data-theme="light"] .vtab--active:hover {
  background: var(--g-red);
  color: #ffffff;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .gallery-profile {
  background: #ffffff;
  border-color: #d2d2d2;
}
[data-theme="light"] .gallery-grid {
  background: #d2d2d2;
}

/* ── Splitter ────────────────────────────────────────────────────────────── */
[data-theme="light"] .splitter {
  border-color: #d2d2d2;
}
[data-theme="light"] .splitter__label {
  background: rgba(255, 255, 255, 0.92);
  color: #181818;
  border-color: #d2d2d2;
}
[data-theme="light"] .splitter__label--after {
  color: var(--c-gold-light);
  border-color: var(--c-gold-light);
}

/* ── Comparative Table ───────────────────────────────────────────────────── */
[data-theme="light"] .data-table-wrap {
  border-color: #d2d2d2;
  background: #ffffff;
}
[data-theme="light"] .data-table th {
  background: #f0f0f0;
  color: #181818;
  border-bottom: 2px solid #d2d2d2;
}
[data-theme="light"] .data-table td {
  border-bottom-color: #e8e8e8;
  color: #484848;
}
[data-theme="light"] .data-table tr:hover td {
  background: rgba(212, 160, 23, 0.04);
}
[data-theme="light"] .data-table .col--featured th {
  background: rgba(212, 160, 23, 0.08);
  color: var(--c-gold-light);
}
[data-theme="light"] .data-table .col--featured td {
  background: rgba(212, 160, 23, 0.03);
}
[data-theme="light"] .data-table .td--check-yes {
  color: var(--c-gold-light);
}
[data-theme="light"] .data-table .td--check-no {
  color: #b0b0b0;
}

/* ── Process Timeline ────────────────────────────────────────────────────── */
[data-theme="light"] .process-row {
  border-bottom-color: #e8e8e8;
}
[data-theme="light"] .process-row:hover {
  background: rgba(0, 0, 0, 0.018);
  padding-left: var(--sp-xs);
}
[data-theme="light"] .process-row__num {
  color: #d0d0d0;
}
[data-theme="light"] .process-row--done .process-row__num {
  color: var(--c-success);
}
[data-theme="light"] .process-row--active .process-row__num {
  color: var(--c-primary);
}
[data-theme="light"] .process-row--active {
  border-left-color: var(--c-primary);
  background: rgba(218, 41, 28, 0.025);
}
[data-theme="light"] .process-row__title {
  color: #181818;
}
[data-theme="light"] .process-row--active .process-row__title {
  color: var(--c-primary);
}
[data-theme="light"] .process-row__desc {
  color: #666666;
}
[data-theme="light"] .process-row__status {
  color: #b0b0b0;
}
[data-theme="light"] .process-row--done .process-row__status {
  color: var(--c-success);
}
[data-theme="light"] .process-row--active .process-row__status {
  color: var(--c-primary);
}

/* ── Booking Form ────────────────────────────────────────────────────────── */
[data-theme="light"] .booking-wrap {
  background-color: #d2d2d2;
  border: 1px solid #d2d2d2;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .booking-form {
  background-color: #ffffff;
}
[data-theme="light"] .booking-aside {
  background-color: #f5f5f5;
}
[data-theme="light"] .form-label {
  color: #181818;
  font-weight: 600;
}
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background-color: #ffffff !important;
  border: 1.5px solid #d2d2d2 !important;
  color: #181818 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
  border-color: var(--c-primary) !important;
  outline: 2px solid rgba(218, 41, 28, 0.12) !important;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder {
  color: #9e9e9e;
}
[data-theme="light"] .tslot {
  background: #f5f5f5;
  border-color: #d2d2d2;
  color: #666666;
}
[data-theme="light"] .tslot:hover {
  border-color: var(--c-gold-light);
  color: #181818;
}
[data-theme="light"] .summary-box {
  background-color: #ffffff;
  border-color: #d2d2d2;
  border-top-color: var(--c-gold-light);
}
[data-theme="light"] .summary-row {
  border-bottom-color: #ececec;
}
[data-theme="light"] .summary-row__label {
  color: #666666;
}
[data-theme="light"] .summary-row__value {
  color: #181818;
}
[data-theme="light"] .summary-row--total .summary-row__value {
  color: var(--c-primary) !important;
  font-weight: 800;
}

/* ── Tracking Portal ─────────────────────────────────────────────────────── */
[data-theme="light"] .tracking-list {
  background: #ffffff;
  border-color: #d2d2d2;
}
[data-theme="light"] .tracking-step {
  border-bottom-color: #ececec;
}
[data-theme="light"] .tracking-step__dot {
  background: #f0f0f0;
  border-color: #d2d2d2;
  color: #9e9e9e;
}
[data-theme="light"] .tracking-step--done .tracking-step__dot {
  background: var(--c-success);
  border-color: var(--c-success);
  color: #ffffff;
}
[data-theme="light"] .tracking-step--active .tracking-step__dot {
  background: var(--g-red);
  border-color: var(--c-primary);
  color: #ffffff;
}
[data-theme="light"] .tracking-step__title {
  color: #181818;
}
[data-theme="light"] .tracking-step--active .tracking-step__title {
  color: var(--c-primary);
}
[data-theme="light"] .tracking-step__desc {
  color: #666666;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
[data-theme="light"] .site-footer {
  background: #f0f0f0;
  border-top-color: #d2d2d2;
}
[data-theme="light"] .footer-grid {
  border-bottom-color: #d2d2d2;
}
[data-theme="light"] .footer-col__title {
  color: #181818;
}
[data-theme="light"] .footer-col__links a {
  color: #666666;
}
[data-theme="light"] .footer-col__links a:hover {
  color: #181818;
}
[data-theme="light"] .footer-copy {
  color: #9e9e9e;
}
[data-theme="light"] .footer-tagline {
  color: #666666;
}

/* ── Mobile Drawer Active ────────────────────────────────────────────────── */
[data-theme="light"] .mobile-drawer__link.active {
  color: var(--c-primary);
  border-left-color: var(--c-primary);
}

/* ==========================================================================
   RESPONSIVE — Tablet Intermediate + Mobile Improvements
   ========================================================================== */

/* Tablet: 2-column intermediate grid (closes the 3→1 jump) */
@media (min-width: 640px) and (max-width: 960px) {
  /* grid-3 tablet: 2 columnas, ancho completo del container */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Platinum (featured) ocupa ancho completo en tablet */
  .grid-3 .pcard:first-child {
    grid-column: 1 / -1;
  }
  .grid-3 .pcard:first-child .pcard__img {
    height: 280px;
  }
  /* grid-2 tablet: mantiene 2 columnas */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile 768px — splitter y hero ajustes */
@media (max-width: 768px) {
  /* El header-cta está oculto desde ≤1040px; WhatsApp vive en el drawer móvil */
  .splitter {
    height: 340px;
  }
  .hero__content {
    padding-bottom: var(--sp-xxl);
  }
}

/* Ultra-small screens: @360px */
@media (max-width: 380px) {
  .typo-mega {
    font-size: 2rem;
  }
  .spec-cell {
    width: 100%;
    border-right: none;
    padding-right: 0;
  }
  .spec-cell__num {
    font-size: 36px;
  }
  .hero__ctas .btn {
    font-size: 12px;
    padding: 0 var(--sp-xs);
    min-height: 44px;
  }
}

/* ==========================================================================
   PERFORMANCE & MICRO-OPTIMIZATIONS
   ========================================================================== */

/* Deferred Rendering of Heavy Off-screen Sections */
#galeria,
#comparativa,
#proceso,
#seguimiento {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 750px;
}

/* Micro-Typography & Widows Prevention */
.pcard__list li,
.fcard__list li,
.process-row__desc,
.footer-tagline {
  text-wrap: pretty;
}

/* Reactive Summary Feedback Animation */
@keyframes summary-flash {
  0% {
    opacity: 0.3;
    transform: translateX(-3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.summary-row__value.is-updated {
  animation: summary-flash 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Luxury Non-Intrusive Form Validation Alert */
.form-alert {
  display: none;
  padding: 14px 18px;
  margin-bottom: 24px;
  background: rgba(218, 41, 28, 0.07);
  border: 1px solid rgba(218, 41, 28, 0.30);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-sm);
  color: #ff9999;
  font-size: 13px;
  line-height: 1.5;
}

[data-theme="light"] .form-alert {
  background: #fff5f5;
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.22);
  border-left-color: #dc2626;
}

.form-alert.is-visible {
  display: block;
  animation: summary-flash 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input.is-invalid,
.form-select.is-invalid {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 1px var(--c-primary);
}

/* Mobile Drawer Active Navigation Indicator */
.mobile-drawer__link.active {
  color: var(--c-primary);
  border-left: 3px solid var(--c-primary);
  padding-left: 12px;
}


/* ==========================================================================
   DOMAIN 12: SUBPAGES ARCHITECTURE & WOOCOMMERCE LUXURY INTEGRATION (v12.0)
   Swingcar Editorial Identity applied to /my-account/, Cart, Checkout & Pages
   ========================================================================== */

/* ── 12.1 INNER PAGE BASE & HERO ─────────────────────────────────────────── */
.inner-page-body {
  background-color: var(--c-canvas-deep);
  color: var(--c-body);
}

/* ── CRITICAL THEME RESET: TWENTYTWENTYFOUR & GLOBAL OVERRIDES ──────────── */
body,
body.inner-page-body,
body.theme-twentytwentyfour,
body.woocommerce-page {
  background-color: var(--c-canvas-deep) !important;
  color: var(--c-body) !important;
  font-family: var(--font) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

body.inner-page-body h1,
body.inner-page-body h2,
body.inner-page-body h3,
body.inner-page-body h4,
body.inner-page-body h5,
body.inner-page-body h6,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6 {
  font-family: var(--font) !important;
}

/* ── 12.1 INNER PAGE STREAMLINED HORIZONTAL HERO ─────────────────────────── */
.inner-hero {
  position: relative;
  padding: 92px 0 16px 0;
  background: linear-gradient(180deg, var(--c-canvas-deep) 0%, var(--c-canvas) 100%);
  border-bottom: 1px solid var(--c-hairline);
  overflow: hidden;
}

[data-theme="light"] .inner-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--c-canvas-deep) 100%);
  border-bottom-color: var(--c-hairline);
}

.inner-hero__container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Horizontal Top Row: Breadcrumbs on left, Badge on right */
.inner-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--c-muted);
  margin-bottom: 0;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--c-muted);
  transition: color var(--tr-snappy);
}

.breadcrumbs a:hover {
  color: var(--c-ink);
}

.breadcrumbs span:last-child {
  color: var(--c-gold-light);
  font-weight: 700;
}

.badge--gold {
  background: rgba(212, 160, 23, 0.12);
  color: var(--c-gold-light);
  border: 1px solid var(--c-hairline-gold);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

/* Horizontal Main Row: Title with Brand-Line on left, Description on right */
.inner-hero__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.inner-hero__title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inner-hero__title-wrap .brand-line {
  margin: 0;
  flex-shrink: 0;
}

.inner-hero__title {
  font-family: var(--font);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--c-ink);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.inner-hero__desc {
  font-family: var(--font);
  font-size: 13px;
  color: var(--c-body);
  line-height: 1.5;
  max-width: 480px;
  margin: 0;
  text-align: right;
  border-left: 1px solid var(--c-hairline);
  padding-left: 20px;
}

[data-theme="light"] .inner-hero__desc {
  color: #555555;
  border-left-color: var(--c-hairline-light);
}

/* ── 12.2 INNER MAIN CONTAINER & CARD (Elevated & Compact) ────────────────── */
.inner-main {
  padding: 24px 0 56px 0;
  background-color: var(--c-canvas-deep);
}

@media (max-width: 768px) {
  .inner-hero {
    padding: 82px 0 12px 0;
  }
  .inner-hero__container {
    gap: 6px;
  }
  .inner-hero__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .inner-hero__top .badge--gold {
    font-size: 9.5px;
    padding: 2px 8px;
  }
  .inner-hero__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .inner-hero__title-wrap {
    gap: 10px;
  }
  .inner-hero__title {
    font-size: 20px;
  }
  .inner-hero__desc {
    text-align: left;
    border-left: none;
    padding-left: 0;
    font-size: 12px;
    line-height: 1.4;
    max-width: 100%;
  }
  .inner-main {
    padding: 16px 0 32px 0;
  }
}

.inner-card {
  background: var(--c-canvas-elevated);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-none);
  padding: clamp(24px, 4vw, 48px);
  color: var(--c-ink);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  position: relative;
}

[data-theme="light"] .inner-card {
  background: var(--c-canvas);
  border-color: var(--c-hairline);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ── 12.3 WOOCOMMERCE MY ACCOUNT LAYOUT (/my-account/) ────────────────────── */
/* Logged-in state: Full-width container & 2-column luxury telemetry grid */
body.woocommerce-account.logged-in .inner-card {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: clamp(24px, 4vw, 44px) !important;
}

body.woocommerce-account.logged-in .woocommerce {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: clamp(24px, 3.5vw, 44px) !important;
  align-items: start !important;
  width: 100% !important;
}

/* Clear legacy WooCommerce floats completely */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  body.woocommerce-account.logged-in .woocommerce {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Logged-out state (Login / Register / Lost Password): Centered sculpted luxury card */
body.woocommerce-account:not(.logged-in) .inner-card {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: clamp(32px, 5vw, 48px) !important;
  background: var(--c-canvas-card) !important;
  border: 1px solid var(--c-hairline-bright) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="light"] body.woocommerce-account:not(.logged-in) .inner-card {
  background: #ffffff !important;
  border-color: var(--c-hairline) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

body.woocommerce-account:not(.logged-in) .inner-card .woocommerce {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body.woocommerce-account:not(.logged-in) h2 {
  text-align: center !important;
  font-family: var(--font) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--c-ink) !important;
  margin-bottom: 28px !important;
  text-transform: uppercase;
}

body.woocommerce-account:not(.logged-in) .inner-card .woocommerce-form-login {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Navigation Telemetry Bar */
.woocommerce-MyAccount-navigation {
  background: var(--c-canvas-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-none);
  overflow: hidden;
}

[data-theme="light"] .woocommerce-MyAccount-navigation {
  background: var(--c-canvas);
  border-color: var(--c-hairline);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--c-hairline);
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--c-body);
  border-left: 3px solid transparent;
  background: transparent;
  transition: all var(--tr-snappy);
}

.woocommerce-MyAccount-navigation li a:hover {
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.03);
  padding-left: 24px;
}

[data-theme="light"] .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(0, 0, 0, 0.02);
}

.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--c-ink);
  background: var(--c-canvas-elevated);
  border-left-color: var(--c-primary);
  font-weight: 700;
}

[data-theme="light"] .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--c-canvas-deep);
}

/* My Account Content Panel */
.woocommerce-MyAccount-content {
  background: var(--c-canvas-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-none);
  padding: clamp(24px, 3.5vw, 40px);
  min-width: 0 !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .woocommerce-MyAccount-content {
  background: var(--c-canvas);
  border-color: var(--c-hairline);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--c-ink);
  margin-bottom: var(--sp-sm);
}

.woocommerce-MyAccount-content p {
  color: var(--c-body);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: var(--sp-xs);
}

.woocommerce-MyAccount-content p a {
  color: var(--c-gold-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-MyAccount-content p a:hover {
  color: var(--c-primary);
}

/* ── 12.4 WOOCOMMERCE LUXURY FORMS (Login, Register, Edit Account) ───────── */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm {
  background: transparent;
  padding: 0;
  border: none;
  width: 100%;
}

/* Form rows: clean vertical stack with zero floating collisions */
.woocommerce form.woocommerce-form-login p.form-row,
.woocommerce form.woocommerce-form-register p.form-row,
.woocommerce form .form-row {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

.woocommerce form.woocommerce-form-login p.form-row label,
.woocommerce form.woocommerce-form-register p.form-row label,
.woocommerce form .form-row label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.1px !important;
  color: var(--c-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.woocommerce form.woocommerce-form-login p.form-row label .required,
.woocommerce form.woocommerce-form-register p.form-row label .required,
.woocommerce form .form-row label .required {
  color: var(--c-primary) !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.woocommerce form.woocommerce-form-login p.form-row input.input-text,
.woocommerce form.woocommerce-form-register p.form-row input.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: var(--c-canvas-deep) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-hairline-bright) !important;
  border-radius: var(--r-none) !important;
  padding: 12px 16px !important;
  height: 48px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  width: 100% !important;
  transition: all var(--tr-snappy) !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .woocommerce form.woocommerce-form-login p.form-row input.input-text,
[data-theme="light"] .woocommerce form.woocommerce-form-register p.form-row input.input-text,
[data-theme="light"] .woocommerce form .form-row input.input-text,
[data-theme="light"] .woocommerce form .form-row select,
[data-theme="light"] .woocommerce form .form-row textarea {
  background: #ffffff !important;
  color: #181818 !important;
  border-color: var(--c-hairline) !important;
}

.woocommerce form.woocommerce-form-login p.form-row input.input-text:focus,
.woocommerce form.woocommerce-form-register p.form-row input.input-text:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none !important;
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 2px var(--c-primary-dim) !important;
}

/* Action row: remember me on top, Acceder button full width below */
.woocommerce form.woocommerce-form-login p.form-row:has(.woocommerce-form-login__rememberme),
.woocommerce form.woocommerce-form-login p.form-row:last-of-type {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin-top: 6px !important;
  margin-bottom: 20px !important;
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  float: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: var(--c-body) !important;
  margin: 0 !important;
  user-select: none;
}

.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
  accent-color: var(--c-primary) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Submit Button: Full-width primary CTA */
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce .woocommerce-Button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 8px 0 0 0 !important;
  border-radius: var(--r-none) !important;
  background: var(--g-red) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--c-primary) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all var(--tr-luxury) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
}

.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .woocommerce-Button:hover {
  background: var(--c-primary-hover) !important;
  box-shadow: 0 8px 24px var(--c-primary-glow) !important;
  transform: translateY(-2px);
}

.woocommerce-LostPassword.lost_password {
  text-align: center !important;
  margin: 16px 0 0 0 !important;
  clear: both !important;
  float: none !important;
  width: 100% !important;
}

.woocommerce-LostPassword a {
  font-size: 12.5px !important;
  color: var(--c-muted) !important;
  transition: color var(--tr-snappy) !important;
  text-decoration: none !important;
  letter-spacing: 0.3px;
}

.woocommerce-LostPassword a:hover {
  color: var(--c-gold-light) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* ── 12.4.1 EDIT ACCOUNT FORM SPECIALIZATION (/my-account/edit-account/) ─── */
.woocommerce-EditAccountForm {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .woocommerce-EditAccountForm {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .woocommerce-EditAccountForm p.form-row-first,
  .woocommerce-EditAccountForm p.form-row-last {
    width: calc(50% - 10px) !important;
    clear: none !important;
  }
  .woocommerce-EditAccountForm p.form-row-wide,
  .woocommerce-EditAccountForm fieldset,
  .woocommerce-EditAccountForm .clear,
  .woocommerce-EditAccountForm > p:last-of-type {
    width: 100% !important;
    clear: both !important;
  }
}

.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--c-hairline) !important;
  border-radius: var(--r-none) !important;
  padding: clamp(20px, 3vw, 28px) !important;
  margin: 28px 0 24px 0 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .woocommerce-EditAccountForm fieldset {
  background: rgba(0, 0, 0, 0.015) !important;
  border-color: var(--c-hairline) !important;
}

.woocommerce-EditAccountForm fieldset legend {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--c-gold-light) !important;
  padding: 0 10px !important;
  margin-bottom: 12px !important;
  float: none !important;
}

[data-theme="light"] .woocommerce-EditAccountForm fieldset legend {
  color: var(--c-gold) !important;
}

.woocommerce-EditAccountForm p.form-row > span em,
.woocommerce-EditAccountForm .description {
  font-size: 12px !important;
  color: var(--c-muted) !important;
  font-style: normal !important;
  display: block !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* Password Input & Eye Toggle System */
.woocommerce .password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.woocommerce .password-input input.input-text {
  padding-right: 48px !important;
  width: 100% !important;
}

.woocommerce .password-input .show-password-input {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  color: var(--c-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
  z-index: 3 !important;
}

.woocommerce .password-input .show-password-input:hover {
  color: var(--c-ink) !important;
}

/* Edit Account Submit Button */
.woocommerce-EditAccountForm button.button,
.woocommerce-EditAccountForm .woocommerce-Button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 240px !important;
  padding: 0 32px !important;
  align-self: flex-start !important;
}

@media (max-width: 600px) {
  .woocommerce-EditAccountForm button.button,
  .woocommerce-EditAccountForm .woocommerce-Button {
    width: 100% !important;
  }
}

/* ── 12.5 WOOCOMMERCE ORDERS & TELEMETRY TABLE ───────────────────────────── */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-sm) 0;
  border: 1px solid var(--c-hairline);
  font-size: 13px;
}

.woocommerce-orders-table th {
  background: var(--c-canvas-deep);
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-hairline);
  text-align: left;
}

.woocommerce-orders-table td {
  padding: 16px;
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-body);
  vertical-align: middle;
}

.woocommerce-orders-table tr:last-child td {
  border-bottom: none;
}

.woocommerce-orders-table__cell-order-number a {
  font-family: var(--font-mono);
  color: var(--c-primary);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.woocommerce-orders-table__cell-order-number a:hover {
  text-decoration: underline;
}

.woocommerce-orders-table mark.order-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(212, 160, 23, 0.12);
  color: var(--c-gold-light);
  border: 1px solid var(--c-hairline-gold);
}

.woocommerce-orders-table .button.view {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 11px !important;
  background: transparent !important;
  border: 1px solid var(--c-hairline-bright) !important;
  color: var(--c-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

.woocommerce-orders-table .button.view:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #ffffff !important;
}

/* ── 12.6 WOOCOMMERCE NOTICES & ALERTS ───────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 var(--sp-md) 0 !important;
  padding: 16px 20px !important;
  background: var(--c-canvas-card) !important;
  border: 1px solid var(--c-hairline) !important;
  border-left: 4px solid var(--c-primary) !important;
  color: var(--c-ink) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

[data-theme="light"] .woocommerce-message,
[data-theme="light"] .woocommerce-info,
[data-theme="light"] .woocommerce-error {
  background: #ffffff !important;
}

.woocommerce-message {
  border-left-color: var(--c-success) !important;
}

.woocommerce-info {
  border-left-color: var(--c-gold-light) !important;
}

.woocommerce-error {
  border-left-color: var(--c-primary) !important;
  list-style: none !important;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  align-self: center !important;
}

/* ── 12.7 ADDRESS & ACCOUNT DETAILS GRIDS ────────────────────────────────── */
.woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-xs);
}

.woocommerce-Address-title h3 {
  margin: 0 !important;
}

.woocommerce-Address-title .edit {
  font-size: 12px;
  color: var(--c-gold-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.woocommerce-Address address {
  font-style: normal;
  color: var(--c-body);
  line-height: 1.7;
  padding: 16px;
  background: var(--c-canvas-deep);
  border: 1px solid var(--c-hairline);
}


@media print {
  .site-header,
  .hero,
  nav,
  .footer-col__links,
  .mobile-drawer,
  .mobile-drawer-overlay,
  .back-to-top,
  .theme-toggle-btn {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   RESPONSIVE PROFESIONAL MOBILE-FIRST v18.0 — Swingcar Detailing
   Metodología: Safe Area Insets · WCAG 2.1 Touch Targets · Fluid Layout
   Breakpoints: 1040 · 960 · 768 · 640 · 480 · 380px
   ========================================================================== */

/* ── Safe Area Insets: iOS Notch / Dynamic Island / Android gestures ──────── */
/* Garantiza que el contenido no quede oculto detrás de elementos del sistema */
.site-header {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.mobile-drawer {
  padding-bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom, 0px));
  padding-right: calc(var(--sp-md) + env(safe-area-inset-right, 0px));
}

.site-footer {
  padding-bottom: calc(var(--sp-xl) + env(safe-area-inset-bottom, 0px));
}

.floating-whatsapp {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
}
.back-to-top {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
}

/* ── Authority Bar: centrado simétrico y armónico en responsive ───────────── */
@media (max-width: 768px) {
  .authority__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-sm);
  }
  .authority__founder {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    width: 100%;
  }
  .authority__avatar {
    margin: 0 auto;
  }
  .authority__name {
    text-align: center;
  }
  .authority__quote {
    max-width: 520px;
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
    margin: 4px auto 0;
  }
  .authority__tech {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .tech-badge {
    font-size: 12px;
    padding: 8px 14px;
    min-height: 40px;
    justify-content: center;
    text-align: center;
  }
}

/* ── Comparativa Nativa Móvil (Zero Horizontal Scroll) ───────────────────── */
.mobile-comparativa {
  display: none;
}

@media (max-width: 768px) {
  /* Ocultar tabla desktop ancha: CERO scroll horizontal en smartphones */
  .data-table-wrap {
    display: none !important;
  }

  .mobile-comparativa {
    display: block !important;
    margin-top: var(--sp-sm);
  }

  /* Selector de tratamientos táctil */
  .mcomp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-xs);
  }

  .mcomp-tab {
    flex: 1 1 calc(33.33% - 6px);
    min-height: 44px;
    padding: 10px 4px;
    background: var(--c-canvas-deep);
    border: 1px solid var(--c-hairline-bright);
    color: var(--c-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    border-radius: var(--r-none);
    transition: all var(--tr-snappy);
    user-select: none;
  }
  .mcomp-tab:nth-child(4),
  .mcomp-tab:nth-child(5) {
    flex: 1 1 calc(50% - 6px);
  }

  .mcomp-tab:hover {
    color: var(--c-ink);
    border-color: var(--c-gold-light);
  }

  .mcomp-tab--active {
    background: var(--g-red) !important;
    color: #ffffff !important;
    border-color: var(--c-primary) !important;
    box-shadow: 0 4px 14px var(--c-primary-glow);
  }

  /* Tarjeta de tratamiento activa */
  .mcomp-panels {
    position: relative;
  }

  .mcomp-panel {
    display: none;
    background: var(--c-canvas-elevated);
    border: 1px solid var(--c-hairline-bright);
    border-top: 3px solid var(--c-gold-light);
    border-radius: var(--r-none);
    padding: var(--sp-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .mcomp-panel--active {
    display: flex !important;
    animation: mcompFadeIn 0.22s ease-out;
  }

  @keyframes mcompFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .mcomp-panel__header {
    border-bottom: 1px solid var(--c-hairline);
    padding-bottom: var(--sp-xs);
  }

  .mcomp-panel__badge-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }

  .mcomp-panel__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 4px 0 6px;
  }

  .mcomp-panel__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .mcomp-panel__price {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-gold-light);
    font-family: var(--font-mono);
  }

  .mcomp-panel__price-sub {
    font-size: 11.5px;
    color: var(--c-muted-soft);
  }

  .mcomp-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: var(--c-canvas-deep);
    border: 1px solid var(--c-hairline);
    padding: 8px;
  }

  .mcomp-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }

  .mcomp-meta-lbl {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-muted);
    letter-spacing: 0.5px;
  }

  .mcomp-meta-val {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-ink);
    font-family: var(--font-mono);
  }

  .mcomp-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mcomp-check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--c-canvas-card);
    border: 1px solid var(--c-hairline);
    gap: 8px;
    font-size: 12px;
  }

  .mcomp-check-icon {
    font-weight: 800;
    font-size: 13px;
    width: 16px;
    flex-shrink: 0;
  }
  .mcomp-check-icon--yes {
    color: var(--c-gold-light);
  }
  .mcomp-check-icon--no {
    color: var(--c-muted);
  }

  .mcomp-check-label {
    flex-grow: 1;
    color: var(--c-body-strong);
    line-height: 1.4;
  }

  .mcomp-check-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-gold-light);
    letter-spacing: 0.5px;
    white-space: nowrap;
  }

  .mcomp-check-tag--gold {
    color: var(--c-gold-light);
    font-weight: 800;
  }

  .mcomp-check-tag--muted {
    color: var(--c-muted);
  }

  .mcomp-panel__footer {
    margin-top: 4px;
  }

  /* Light Theme overrides for mobile comparativa */
  [data-theme="light"] .mcomp-tab {
    background: #f5f5f5;
    border-color: #d2d2d2;
    color: #484848;
  }
  [data-theme="light"] .mcomp-tab--active {
    background: var(--g-red) !important;
    color: #ffffff !important;
    border-color: var(--c-primary) !important;
  }
  [data-theme="light"] .mcomp-panel {
    background: #ffffff;
    border-color: #d2d2d2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }
  [data-theme="light"] .mcomp-panel__title {
    color: #181818;
  }
  [data-theme="light"] .mcomp-meta-grid {
    background: #f8f8f8;
    border-color: #e0e0e0;
  }
  [data-theme="light"] .mcomp-meta-val {
    color: #181818;
  }
  [data-theme="light"] .mcomp-check-row {
    background: #ffffff;
    border-color: #e8e8e8;
  }
  [data-theme="light"] .mcomp-check-label {
    color: #181818;
  }
}

/* ── Mobile Drawer: touch targets generosos (WCAG 2.1 §2.5.5) ────────────── */
@media (max-width: 1120px) {
  .mobile-drawer__link {
    min-height: 52px;
    padding: 14px 0;
    display: flex;
    align-items: center;
  }
  .mobile-drawer .btn--primary {
    min-height: 52px;
    margin-top: var(--sp-xxs);
  }
  .mobile-drawer .whatsapp-link {
    justify-content: center;
    min-height: 48px;
    width: 100%;
    margin-top: 4px;
  }
  /* Drawer close button: touch target amplio */
  .mobile-drawer__close {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Back to top: ajuste con barra de gestos de Android ─────────────────── */
@media (max-width: 640px) {
  .floating-whatsapp {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 54px;
    height: 54px;
  }
  .floating-whatsapp svg {
    width: 32px;
    height: 32px;
  }
  .back-to-top {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    right: calc(21px + env(safe-area-inset-right, 0px));
    width: 42px;
    height: 42px;
  }
  .back-to-top svg {
    width: 17px;
    height: 17px;
  }
}

/* ── Breakpoint 480px: smartphones compactos (360–480px) ─────────────────── */
@media (max-width: 480px) {
  /* Footer bottom: alineado al centro */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--sp-xs);
  }

  /* Galería: 1 columna en pantallas muy chicas */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  /* Tech badges en columna centrada y equilibrada */
  .authority__tech {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .tech-badge {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
  }

  /* Bandas: padding reducido */
  .band--dark,
  .band--elevated,
  .band--livery,
  .band--cta {
    padding: var(--sp-lg) 0;
  }

  /* Booking form: padding mínimo */
  .booking-form,
  .booking-aside {
    padding: var(--sp-xs);
  }

  /* Splitter: altura compacta */
  .splitter {
    height: 220px;
  }

  /* Process row: layout aún más compacto */
  .process-row {
    grid-template-columns: 44px 1fr;
    gap: var(--sp-xxs);
    padding: var(--sp-xs) 0;
  }
  .process-row__num {
    font-size: 24px;
    letter-spacing: -0.5px;
  }
  .process-row__title {
    font-size: 14px;
  }
  .process-row__desc {
    font-size: 12.5px;
  }

  /* Time slots: 4 columnas en compacto */
  .tslot-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .tslot {
    font-size: 10px;
    padding: 10px 0;
    min-height: 40px;
  }

  /* Badges: texto más chico */
  .badge {
    font-size: 9.5px;
    padding: 5px 10px;
    letter-spacing: 0.7px;
  }
  .hero__badges {
    gap: 6px;
  }

  /* Spec bar: números muy compactos */
  .spec-cell__num {
    font-size: clamp(26px, 8vw, 36px);
  }

  /* sec-header body: más legible en chico */
  .sec-header__body {
    font-size: 14px;
  }
}

/* ── Ultra-small screens (≤380px): tipografía mínima ─────────────────────── */
@media (max-width: 380px) {
  .typo-mega {
    font-size: 1.85rem;
    letter-spacing: -0.5px;
  }
  .spec-bar {
    grid-template-columns: 1fr;  /* columna única en ≤380px */
  }
  .spec-cell {
    width: 100%;
  }
  .spec-cell__num {
    font-size: 36px;
  }
  .hero__ctas .btn {
    font-size: 12px;
    padding: 0 var(--sp-xs);
    min-height: 48px;
  }
  /* Drawer más angosto en pantallas muy chicas */
  .mobile-drawer {
    width: 100%;
    max-width: 100%;
    border-left: none;
  }
}

/* ── Ergonomía Móvil y Salvaguarda iOS Safari (Evita zoom automático forzado) ─ */
@media (max-width: 768px) {
  input,
  select,
  textarea,
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 520px) {
  .mobile-action-btn--wa span {
    display: none;
  }
  .mobile-action-btn--wa {
    width: 36px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }
  .header-brand-title {
    font-size: 13.5px;
    letter-spacing: 0.7px;
  }
  .header-brand-sub {
    font-size: 8px;
    letter-spacing: 1px;
  }
}

@media (max-width: 420px) {
  .site-header {
    left: 8px !important;
    right: 8px !important;
    border-radius: 10px !important;
  }
  .site-header .header-logo img,
  .site-header.is-compact .header-logo img {
    height: 34px !important;
    max-width: 90px !important;
  }
  .header-logo {
    gap: 6px;
  }
  .header-brand-title {
    font-size: 12.5px;
    letter-spacing: 0.5px;
  }
  .header-brand-sub {
    font-size: 7.5px;
    letter-spacing: 0.8px;
  }
  .mobile-action-btn {
    height: 32px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
  }
  .mobile-action-btn--wa {
    width: 32px;
    height: 32px;
    padding: 0;
  }
  .mobile-action-btn--ig {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
  }
  .mobile-action-btn--ig svg {
    width: 15px;
    height: 15px;
  }
  .mobile-toggle {
    width: 34px;
    height: 32px;
    min-width: 34px;
    min-height: 32px;
  }
}

@media (max-width: 360px) {
  .header-brand-sub {
    display: none;
  }
  .header-brand-title {
    font-size: 11.5px;
    letter-spacing: 0.5px;
  }
  .site-header .header-logo img,
  .site-header.is-compact .header-logo img {
    height: 30px !important;
    max-width: 75px !important;
  }
}

/* ── Centrado visual armónico y blindaje de overflow en smartphones ──────── */
@media (max-width: 768px) {
  /* Cabeceras de sección perfectamente centradas y simétricas */
  .sec-header,
  #cotizador .sec-header,
  #seguimiento .sec-header,
  #proceso .sec-header,
  #tratamientos .sec-header,
  #servicios-complementarios .sec-header,
  #comparativa .sec-header,
  #antes-despues .sec-header {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sec-header .brand-line {
    margin: var(--sp-xs) auto !important;
  }
  .sec-header .badge {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Booking wrap y formulario perfectamente simétricos sin desborde */
  .booking-wrap {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .booking-form,
  .booking-aside {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: clamp(16px, 4.5vw, 24px) !important;
  }

  .form-input,
  .form-select,
  .form-textarea,
  .form-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Permitir que los botones envuelvan el texto sin forzar min-width horizontal */
  .btn,
  .booking-form .btn,
  .booking-aside .btn,
  .booking-aside .whatsapp-link,
  .whatsapp-link,
  .btn-maps-smart {
    white-space: normal !important;
    text-align: center !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   INTELLIGENT GPS MAPS BUTTON (SWINGCAR LOCATION SUITE)
   ========================================================================== */
.btn-maps-smart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-hairline-bright);
  border-radius: 4px;
  color: var(--c-ink);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-maps-smart svg {
  flex-shrink: 0;
  color: var(--c-gold-light);
  transition: transform 0.25s ease;
}

.btn-maps-smart:hover {
  background: rgba(212, 160, 23, 0.12);
  border-color: var(--c-gold-light);
  color: var(--c-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.btn-maps-smart:hover svg {
  transform: scale(1.12);
}

.btn-maps-smart--drawer {
  width: 100% !important;
  display: flex !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  border-color: var(--c-gold-dim) !important;
  background: rgba(212, 160, 23, 0.06) !important;
  margin-top: 4px;
}

[data-theme="light"] .btn-maps-smart {
  background: #f4f4f4;
  border-color: #dcdcdc;
  color: #1a1a1a;
}

[data-theme="light"] .btn-maps-smart:hover {
  background: rgba(184, 134, 11, 0.10);
  border-color: var(--c-gold);
  color: var(--c-gold-deep);
}

[data-theme="light"] .btn-maps-smart--drawer {
  background: rgba(184, 134, 11, 0.08) !important;
  border-color: rgba(184, 134, 11, 0.25) !important;
}

/* ── Swingcar mobile-first legibility baseline ──────────────────────────── */
:root {
  --text-reading: 16px;
  --text-secondary: 14px;
  --text-meta: 12px;
}

body {
  font-size: var(--text-reading);
}

.typo-body,
.sec-header__body,
.process-row__desc,
.pcard__list li,
.fcard__list li,
.footer-tagline {
  font-size: var(--text-reading);
}

.typo-body-sm {
  font-size: var(--text-secondary);
}

.typo-label,
.header-brand-sub,
.pcard__eyebrow,
.pcard__flag,
.pcard__group-label,
.fcard__eyebrow,
.process-row__status {
  font-size: var(--text-meta);
}

.authority__quote,
.pcard__price-unit,
.fcard__price-unit,
.gallery-tile__caption,
.tracking-step__desc {
  font-size: var(--text-secondary);
}

.spec-cell__label,
.splitter__label,
.pcard__flag,
.pcard__eyebrow,
.pcard__group-label,
.fcard__eyebrow,
.gallery-tile__tag,
.footer-col__title {
  font-size: var(--text-meta);
}

.footer-col__links a,
.whatsapp-link,
.vtab {
  font-size: var(--text-secondary);
}

.footer-copy {
  color: var(--c-muted);
}

.btn--text:hover,
.fcard__eyebrow,
.process-row--active .process-row__num,
.process-row--active .process-row__title,
.process-row--active .process-row__status,
.tracking-step--active .tracking-step__title,
.woocommerce-orders-table__cell-order-number a,
.woocommerce-MyAccount-content p a:hover,
.woocommerce form .form-row label .required,
.mobile-drawer__link.active {
  color: var(--c-primary-text) !important;
}

.process-row--done .process-row__num,
.process-row--done .process-row__status {
  color: var(--c-success-text);
}

.process-row__status {
  color: var(--c-muted);
}

.drawer-theme-box__label {
  font-size: var(--text-secondary);
}

.drawer-theme-box__hint,
.theme-toggle-btn--drawer .theme-state-dark,
.theme-toggle-btn--drawer .theme-state-light {
  font-size: var(--text-meta);
}

.woocommerce-MyAccount-navigation li a,
.woocommerce-MyAccount-content p,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-size: var(--text-reading) !important;
}

.woocommerce form.woocommerce-form-login p.form-row label,
.woocommerce form.woocommerce-form-register p.form-row label,
.woocommerce form .form-row label {
  font-size: var(--text-secondary) !important;
  letter-spacing: 0.04em !important;
}

.woocommerce-form-login .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: var(--sp-xs);
}

.woocommerce form.woocommerce-form-login p.form-row input.input-text,
.woocommerce form.woocommerce-form-register p.form-row input.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  font-size: var(--text-reading) !important;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  min-height: 48px !important;
  height: auto !important;
  font-size: var(--text-secondary) !important;
}

.form-label,
.process-row__title,
.summary-row__label,
.summary-row__value,
.btn,
.btn--text,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  font-size: var(--text-secondary);
}

.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  font-size: var(--text-secondary) !important;
}

.badge {
  font-size: var(--text-meta);
}

.mobile-action-btn,
.mobile-toggle,
.mobile-drawer__link,
.theme-toggle-btn,
.btn-maps-smart,
.vtab,
.whatsapp-link,
.tslot {
  min-height: 48px;
}

.btn-maps-smart,
.btn-maps-smart--drawer {
  font-size: var(--text-secondary) !important;
}

.tslot {
  font-size: var(--text-secondary);
}

@media (max-width: 520px) {
  .header-brand-title {
    font-size: 14px;
  }

  .header-brand-sub {
    display: block;
    font-size: 8px;
    letter-spacing: 0.9px;
  }

  .mobile-action-btn,
  .mobile-toggle {
    min-width: 48px;
    min-height: 48px;
    height: 48px;
    font-size: var(--text-secondary);
  }

  .mobile-action-btn--wa {
    width: 48px;
    padding: 0;
  }

  .typo-mega {
    font-size: clamp(32px, 9vw, 40px);
    letter-spacing: -0.5px;
  }
}

@media (max-width: 380px) {
  .hero__ctas .btn {
    font-size: var(--text-secondary);
  }
}

[data-theme="light"] .footer-copy,
[data-theme="light"] .process-row__status {
  color: var(--c-muted);
}

.service-details,
.process-disclosure {
  width: 100%;
}

.service-details > summary,
.process-disclosure > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  border-block: 1px solid var(--c-hairline);
  color: var(--c-primary-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.service-details > summary::-webkit-details-marker,
.process-disclosure > summary::-webkit-details-marker {
  display: none;
}

.service-details > summary::after,
.process-disclosure > summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--c-primary-text);
  font-size: 20px;
  line-height: 1;
}

.service-details[open] > summary::after,
.process-disclosure[open] > summary::after {
  content: '-';
}

.service-details > summary:focus-visible,
.process-disclosure > summary:focus-visible {
  outline: 2px solid var(--c-primary-text);
  outline-offset: 3px;
}

.service-details__content {
  padding-top: var(--sp-xs);
}

  @media (min-width: 641px) {
    .site-footer .footer-grid {
      grid-template-columns: 2fr 1.2fr 1fr 1.2fr;
    }

    .site-footer .footer-nav-disclosure > summary {
      display: none;
    }

    .site-footer .footer-nav-disclosure > .footer-col__links {
      display: flex;
    }
  }

  @media (max-width: 640px) {
    .hero {
      min-height: auto;
      align-items: flex-start;
    }

    .hero__content {
      padding-top: 96px;
      padding-bottom: var(--sp-lg);
    }

    .hero__badges .badge,
    .badge {
      font-size: 12px;
    }

    .spec-bar {
      display: none;
    }

    .authority__inner {
      gap: var(--sp-sm);
      padding: var(--sp-sm);
    }

    .authority__founder {
      flex-direction: row;
      justify-content: center;
      gap: var(--sp-xs);
    }

    .authority__quote {
      font-size: 14px;
    }

    .authority__tech {
      flex-direction: row;
      gap: var(--sp-xxs);
    }

    .tech-badge {
      width: auto;
      max-width: 100%;
      min-height: 48px;
      padding: 8px 10px;
      font-size: 12px;
    }

    .pcard__eyebrow {
      font-size: 12px;
    }

    .pcard__price-unit,
    .fcard__price-unit {
      font-size: 14px !important;
    }

    .pcard__list li,
    .fcard__list li,
    .process-row__desc {
      font-size: 14px;
    }

    .booking-form .form-label {
      font-size: 14px;
      letter-spacing: 0;
      text-transform: none;
    }

    .booking-form .form-input,
    .booking-form .form-select,
    .booking-form .form-textarea {
      font-size: 16px;
    }

    .booking-submit-btn,
    .booking-call-btn {
      font-size: 14px;
    }

    .booking-optional {
      margin: var(--sp-sm) 0;
    }

    .booking-optional > summary {
      display: flex;
      min-height: 48px;
      align-items: center;
      justify-content: space-between;
      border-block: 1px solid var(--c-hairline);
      color: var(--c-primary-text);
      cursor: pointer;
      font-size: 16px;
      list-style: none;
    }

    .booking-optional > summary::-webkit-details-marker {
      display: none;
    }

    .booking-optional > summary::after {
      content: '+';
      font-size: 20px;
    }

    .booking-optional[open] > summary::after {
      content: '−';
    }

    .booking-optional > summary:focus-visible {
      outline: 2px solid var(--c-primary-text);
      outline-offset: 3px;
    }

    .booking-optional__fields {
      padding-top: var(--sp-sm);
    }

    .booking-privacy {
      margin-top: var(--sp-xs);
      color: var(--c-muted);
      font-size: 14px;
      line-height: 1.5;
      text-align: center;
    }

    .site-footer .footer-nav-disclosure > summary {
      font-size: 14px;
    }
  }

  @media (max-width: 380px) {
    .hero__ctas .btn {
      font-size: 14px;
    }
  }

  @media (max-width: 640px) {
    .site-footer {
      padding-top: var(--sp-md);
      padding-bottom: calc(var(--sp-sm) + env(safe-area-inset-bottom, 0px));
    }

    .site-footer .footer-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-xxs);
      padding-bottom: var(--sp-xs);
    }

    .site-footer .footer-logo {
      height: 44px;
      margin-bottom: var(--sp-xxs);
    }

    .site-footer .footer-tagline {
      max-width: none;
      line-height: 1.5;
      font-size: 14px;
    }

    .site-footer .footer-socials {
      margin-top: var(--sp-xs);
    }

    .site-footer .footer-socials .btn,
    .site-footer .footer-socials .whatsapp-link {
      min-height: 48px;
      justify-content: center;
    }

    .site-footer .footer-nav-disclosure > summary {
      display: flex;
      min-height: 48px;
      align-items: center;
      justify-content: space-between;
      margin: 0;
      border-bottom: 1px solid var(--c-hairline);
      font-size: 12px;
      cursor: pointer;
      list-style: none;
    }

    .site-footer .footer-nav-disclosure > summary::-webkit-details-marker {
      display: none;
    }

    .site-footer .footer-nav-disclosure > summary:focus-visible {
      outline: 2px solid var(--c-primary-text);
      outline-offset: 3px;
    }

    .site-footer .footer-nav-disclosure > summary::after {
      display: inline;
      content: "+";
      font-size: 20px;
      line-height: 1;
    }

    .site-footer .footer-nav-disclosure[open] > summary::after {
      content: "−";
    }

    .site-footer .footer-nav-disclosure:not([open]) > .footer-col__links {
      display: none;
    }

    .site-footer .footer-nav-disclosure[open] > .footer-col__links {
      display: flex;
      gap: 2px;
      padding: var(--sp-xxs) 0;
    }

    .site-footer .footer-nav-disclosure > .footer-col__links a {
      display: flex;
      min-height: 44px;
      align-items: center;
      font-size: 14px;
    }

    .site-footer .footer-nav-disclosure > .footer-col__links li > span {
      display: block;
      padding: 8px 0;
      font-size: 14px !important;
    }

    .site-footer .footer-nav-disclosure .btn-maps-smart {
      min-height: 48px;
    }

    .site-footer .footer-bottom {
      justify-content: center;
      padding: var(--sp-sm) 0 0;
      text-align: center;
    }
  }

@media (max-width: 640px) {
    .site-footer .footer-nav-disclosure > summary {
      font-size: 14px;
    }
}

/* ── Mobile header brand priority (Original High-Res Logo from Screenshot) ── */
@media (max-width: 768px) {
  .site-header .header-logo {
    min-width: 0;
    gap: 0;
    display: flex;
    align-items: center;
  }

  .site-header .header-brand-info {
    display: none !important;
  }

  .site-header .header-logo img,
  .site-header.is-compact .header-logo img {
    width: auto !important;
    height: 48px !important;
    max-width: 140px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
}

@media (max-width: 420px) {
  .site-header .header-logo img,
  .site-header.is-compact .header-logo img {
    height: 44px !important;
    max-width: 125px !important;
  }
}

@media (max-width: 640px) {
  .hero .hero__hl {
    font-size: clamp(36px, 9.2vw, 40px);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.08;
  }

  .hero__eyebrow {
    margin-bottom: var(--sp-xs);
    font-size: 12px;
    letter-spacing: 1.1px;
  }
}

@media (max-width: 359px) {
  .site-header .mobile-action-btn--wa {
    display: none;
  }

  .hero__hl br {
    display: none;
  }
}