/* ═══════════════════════════════════════════════════════════════════════
   FRANCISMULTISERVICES — Elite override layer · 2026-05-07
   Refines existing styles to "premium restraint" without breaking brand.
   Brand colors LOCKED: cyan #1ea7d6 + lime #8dc63f (from logo).
   Extends with semantic accents: red/amber/forest/purple — neuralmente
   distribuidos (cada uno con propósito específico, no decoración).
   Loaded AFTER styles.min.css → sobrescribe controladamente.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand gradient signature (cyan → cyan-light → lime) ── */
  --grad-brand: linear-gradient(135deg, #1ea7d6 0%, #5fc8e6 45%, #8dc63f 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(30,167,214,.08), rgba(141,198,63,.08));

  /* ── Semantic palette extension — usar con propósito ── */
  --alert:          #ef4444;   /* urgencia: vencido, error, "AGOTADO" */
  --alert-bg:       #fef2f2;
  --alert-ring:     rgba(239,68,68,.22);

  --warm:           #f59e0b;   /* destacado cálido: ⭐ stars, "NUEVO", limited offer */
  --warm-bg:        #fef3c7;
  --warm-ring:      rgba(245,158,11,.25);

  --trust:          #059669;   /* confianza/insurance: ✓ verified, garantía 100% */
  --trust-bg:       #ecfdf5;
  --trust-ring:     rgba(5,150,105,.22);

  --premium:        #7c3aed;   /* tier exclusivo: VIP, anual, contract premium */
  --premium-bg:     #f5f3ff;
  --premium-ring:   rgba(124,58,237,.22);

  /* ── Refined neutrals & shadows (softer than current --shadow) ── */
  --ink-4:          #94a3b8;
  --shadow-soft:    0 6px 32px -14px rgba(15,23,42,.12);
  --shadow-ring:    0 0 0 1px rgba(15,23,42,.05);
  --shadow-card:    0 1px 0 rgba(15,23,42,.02), 0 6px 24px -10px rgba(15,23,42,.08);
}

[data-theme="dark"] {
  /* ── Warmer dark base than pure #0a0f1a — easier on eyes ── */
  --bg:             #0b1220;
  --bg-2:           #101830;
  --bg-3:           #14203a;
  --card:           #111a30;

  /* Dark variants of semantic accents (more luminous) */
  --alert:          #f87171;
  --alert-bg:       #2a1212;
  --alert-ring:     rgba(248,113,113,.30);

  --warm:           #fbbf24;
  --warm-bg:        #2a1f0a;
  --warm-ring:      rgba(251,191,36,.28);

  --trust:          #34d399;
  --trust-bg:       #0a1f17;
  --trust-ring:     rgba(52,211,153,.28);

  --premium:        #a78bfa;
  --premium-bg:     #1a1230;
  --premium-ring:   rgba(167,139,250,.28);

  --ink-4:          #64748b;

  --shadow-soft:    0 6px 32px -14px rgba(0,0,0,.6);
  --shadow-ring:    0 0 0 1px rgba(255,255,255,.06);
  --shadow-card:    0 0 0 1px rgba(255,255,255,.04), 0 6px 24px -10px rgba(0,0,0,.5);

  /* Refined brand soft gradient on dark */
  --grad-brand-soft: linear-gradient(135deg, rgba(95,200,230,.12), rgba(184,226,114,.10));
}

/* ─────────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA · Playfair Display serif para h1/h2 — premium feel
   ───────────────────────────────────────────────────────────────────────── */
.hero h1,
.section-head h2,
h1.serif,
h2.serif,
.serif {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 600;
  letter-spacing: -.018em;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.03;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.section-head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.08;
}

/* Eyebrow tag premium — uppercase tracking ancho */
.eyebrow,
.section-head .eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
[data-theme="dark"] .eyebrow { color: var(--brand-light); }

/* ─────────────────────────────────────────────────────────────────────────
   HERO · refinement: signature gradient, less sparkles, more space
   ───────────────────────────────────────────────────────────────────────── */
.hero {
  padding: clamp(80px, 10vh, 140px) 0 clamp(64px, 8vh, 100px);
}

.hero-grad-text {
  background: var(--grad-brand);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shineMove 8s ease-in-out infinite;
}
@keyframes shineMove {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Sparkles más sutiles — restraint */
.hero-sparkles { opacity: .28; }
.hero-spark { animation-duration: 7s; }

.hero-pill {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .76rem;
  letter-spacing: .04em;
  box-shadow: var(--shadow-ring);
}
[data-theme="dark"] .hero-pill {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

.hero-stats {
  gap: clamp(32px, 5vw, 64px);
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTIONS · spacing más generoso, jerarquía más clara
   ───────────────────────────────────────────────────────────────────────── */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); text-align: center; }
.section-head p { color: var(--ink-3); max-width: 680px; margin: 12px auto 0; }

/* ─────────────────────────────────────────────────────────────────────────
   TRUST PILLS / DIFERENCIADORES · cleaner, brand on hover
   ───────────────────────────────────────────────────────────────────────── */
.trust-pill {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-ring) !important;
  transition: border-color .25s var(--easing), transform .25s var(--easing), box-shadow .25s var(--easing);
}
.trust-pill:hover {
  border-color: var(--brand) !important;
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   CARDS · ring + soft shadow en lugar de border + heavy shadow
   ───────────────────────────────────────────────────────────────────────── */
.card,
.ba-card,
.review-card,
.rate-card,
.process-step,
.guarantee-card,
.area-card,
.faq-item {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  transition: border-color .25s var(--easing), transform .25s var(--easing), box-shadow .25s var(--easing);
}
.card:hover,
.review-card:hover,
.rate-card:hover,
.area-card:hover {
  border-color: var(--brand-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .review-card:hover,
[data-theme="dark"] .rate-card:hover,
[data-theme="dark"] .area-card:hover {
  border-color: var(--brand);
}

/* ─────────────────────────────────────────────────────────────────────────
   BUTTONS · jerarquía clara: primary cyan, outline cyan, ghost text-only
   ───────────────────────────────────────────────────────────────────────── */
.btn-pri {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 4px 14px -4px rgba(30,167,214,.45) !important;
}
.btn-pri:hover {
  background: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
  box-shadow: 0 6px 22px -4px rgba(30,167,214,.55) !important;
  transform: translateY(-2px);
}

.btn-out {
  background: transparent !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-out:hover {
  background: var(--brand) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
[data-theme="dark"] .btn-out {
  color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
}
[data-theme="dark"] .btn-out:hover {
  background: var(--brand-light) !important;
  color: var(--bg) !important;
}

/* Ghost button: solo texto + chevron, sin fondo */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: .92rem;
  color: var(--ink-2);
  transition: color .2s, background .2s;
}
.btn-ghost:hover {
  color: var(--brand);
  background: var(--bg-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   HEADER · refined glass + brand-aware
   ───────────────────────────────────────────────────────────────────────── */
.hd {
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}
[data-theme="dark"] .hd {
  background: rgba(11,18,32,.92) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

.hd-brand {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  font-size: 1.05rem;
}

.hd-nav a {
  font-size: .78rem !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.hd-nav a:hover { color: var(--brand); background: var(--bg-2); }
[data-theme="dark"] .hd-nav a:hover { color: var(--brand-light); }

/* ─────────────────────────────────────────────────────────────────────────
   SEMANTIC CHIPS · usar con propósito, no decoración
   .chip-alert    → vencido / error / urgencia
   .chip-warm     → ⭐ rating / NEW / limited
   .chip-trust    → ✓ insured / verified / 100% guarantee
   .chip-premium  → VIP / contract anual / tier exclusivo
   ───────────────────────────────────────────────────────────────────────── */
.chip-alert,
.chip-warm,
.chip-trust,
.chip-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-width: 1px;
  border-style: solid;
  font-family: 'Inter', sans-serif;
}
.chip-alert    { color: var(--alert);    background: var(--alert-bg);    border-color: var(--alert-ring); }
.chip-warm     { color: var(--warm);     background: var(--warm-bg);     border-color: var(--warm-ring); }
.chip-trust    { color: var(--trust);    background: var(--trust-bg);    border-color: var(--trust-ring); }
.chip-premium  { color: var(--premium);  background: var(--premium-bg);  border-color: var(--premium-ring); }

/* ─────────────────────────────────────────────────────────────────────────
   BADGES inline (más pequeños, más compactos que chips)
   ───────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-cyan    { color: var(--brand);    background: rgba(30,167,214,.10);  }
.badge-lime    { color: var(--lime-2);   background: rgba(141,198,63,.14);  }
.badge-warm    { color: var(--warm);     background: var(--warm-bg);        }
.badge-alert   { color: var(--alert);    background: var(--alert-bg);       }
.badge-trust   { color: var(--trust);    background: var(--trust-bg);       }
.badge-premium { color: var(--premium);  background: var(--premium-bg);     }

/* ─────────────────────────────────────────────────────────────────────────
   FORMS / INPUTS · sólo focus polish, sin override de layouts existentes
   (Removidos !important sobre padding/border que rompían calculadoras y
   formularios pre-existentes con clases propias.)
   ───────────────────────────────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(30,167,214,.15) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SELECTION · brand cyan
   ───────────────────────────────────────────────────────────────────────── */
::selection {
  background: rgba(30,167,214,.22);
  color: var(--ink);
}
[data-theme="dark"] ::selection {
  background: rgba(95,200,230,.32);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLLBAR refined
   ───────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,23,42,.12); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.22); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ─────────────────────────────────────────────────────────────────────────
   THEME TOGGLE button · refined
   ───────────────────────────────────────────────────────────────────────── */
.hd-tog,
#themeToggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 16px;
  transition: border-color .2s, transform .2s;
}
.hd-tog:hover,
#themeToggle:hover {
  border-color: var(--brand);
  transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER refinement
   ───────────────────────────────────────────────────────────────────────── */
.ft, footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
}
.ft a, footer a {
  color: var(--ink-3);
  transition: color .2s;
}
.ft a:hover, footer a:hover { color: var(--brand); }

/* ─────────────────────────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────────────────────────── */
.bg-brand-soft   { background: var(--grad-brand-soft); }
.text-brand      { color: var(--brand); }
.text-brand-grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .hero-grad-text { animation: none !important; }
  .hero-sparkles { display: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   3D DYNAMIC LAYER · driven by /elite-3d.js
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero: perspective container for depth layers + headline 3D */
.hero {
  perspective: 1400px;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}
.hero-bg, .hero-inner, .hero-sparkles {
  will-change: transform;
}

/* Headline 3D — set up for mouse parallax (no transform unless JS) */
.hero h1.e3d-headline {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(.22,.61,.36,1);
  text-shadow:
    0 1px 0 rgba(15,23,42,.04),
    0 8px 32px rgba(15,23,42,.10);
  will-change: transform;
}
[data-theme="dark"] .hero h1.e3d-headline {
  text-shadow:
    0 1px 0 rgba(0,0,0,.4),
    0 12px 40px rgba(95,200,230,.15),
    0 24px 60px rgba(141,198,63,.10);
}

/* Mouse glow on hero — radial brand gradient following cursor */
.e3d-glow {
  position: absolute;
  pointer-events: none;
  width: 540px; height: 540px;
  margin-left: -270px; margin-top: -270px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(95,200,230,.22) 0%,
    rgba(141,198,63,.14) 40%,
    transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
  z-index: 1;
  filter: blur(8px);
}
[data-theme="dark"] .e3d-glow {
  background: radial-gradient(circle,
    rgba(95,200,230,.32) 0%,
    rgba(141,198,63,.20) 40%,
    transparent 70%);
}

/* ── Tilt 3D cards (mouse-tracked rotateX/Y via CSS vars from JS) ── */
.e3d-tilt {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-mx: 50%;
  --tilt-my: 50%;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry)) translateZ(0);
  transition: transform 0.18s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.e3d-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--tilt-mx) var(--tilt-my),
    rgba(255,255,255,.10) 0%,
    transparent 50%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  border-radius: inherit;
}
.e3d-tilt:hover::after { opacity: 1; }
[data-theme="dark"] .e3d-tilt::after {
  background: radial-gradient(
    circle at var(--tilt-mx) var(--tilt-my),
    rgba(95,200,230,.16) 0%,
    transparent 50%);
}

/* ── Magnetic primary buttons — JS sets transform on hover ── */
.e3d-magnetic {
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, background .25s !important;
  will-change: transform;
}

/* ── Scroll reveal — FAIL-SAFE: no esconde por default. Se aplica solo
   cuando el JS confirma que el IntersectionObserver está activo. La clase
   .e3d-armed (en <html>) se añade desde JS. Sin JS → todo visible. ── */
html.e3d-armed .e3d-pre {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.e3d-armed .e3d-pre.e3d-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Headline gradient line keeps its own animation */
.hero-grad-text {
  display: inline-block;
}

/* ── Hero-stats counter visual: tabular nums + monospaced feel ── */
.hero-stats strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  display: inline-block;
}

/* ── Marquee for trust strip (CSS only, no JS) ── */
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 64px;
  animation: marqueeMove 40s linear infinite;
  width: max-content;
}
@keyframes marqueeMove {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ── Floating animation for hero key elements ── */
@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}
.hero-pill,
.hero-live {
  animation: floatY 6s ease-in-out infinite;
}
.hero-live { animation-delay: 1s; }

/* ── Reduce motion respect ── */
@media (prefers-reduced-motion: reduce) {
  .e3d-pre, .e3d-pre.e3d-in,
  .e3d-tilt,
  .e3d-magnetic,
  .e3d-glow,
  .hero h1.e3d-headline,
  .hero-pill, .hero-live {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Better depth on cards in dark ── */
[data-theme="dark"] .card,
[data-theme="dark"] .ba-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .rate-card,
[data-theme="dark"] .area-card,
[data-theme="dark"] .guarantee-card {
  background: linear-gradient(135deg, rgba(255,255,255,.018), rgba(255,255,255,.005));
  border-color: rgba(255,255,255,.06);
}

/* ── Floating help: scroll cue indicator if hero exists ── */
.hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  opacity: .25;
  pointer-events: none;
  display: none; /* enable manually with .hero.has-scroll-cue if desired */
}
.hero.has-scroll-cue::after { display: block; }
.hero.has-scroll-cue::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 38px;
  transform: translateX(-50%);
  width: 3px; height: 6px;
  background: currentColor;
  border-radius: 2px;
  opacity: .4;
  animation: scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue {
  0%   { transform: translate(-50%, 0); opacity: .4; }
  60%  { transform: translate(-50%, 8px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ICONS · SVG inline · 2026-05-07
   ═══════════════════════════════════════════════════════════════════════ */
.icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
.icon-sm { width: .92em; height: .92em; }
.icon-md { width: 1.4em; height: 1.4em; vertical-align: -0.28em; }
.icon-lg { width: 1.8em; height: 1.8em; vertical-align: -0.34em; }

/* Hero pill star — gold accent */
.hero-pill .icon { color: var(--warm); margin-right: 4px; }

/* ── Contact strip · pills coherentes con SVG ── */
.contact-strip {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  align-items: center;
}
.contact-strip a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 14px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  transition: border-color .25s var(--easing), color .25s var(--easing), transform .25s var(--easing), background .25s var(--easing);
  box-shadow: var(--shadow-ring);
}
.contact-strip a:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  transform: translateY(-2px);
}
.contact-strip a .icon { width: 16px; height: 16px; }
[data-theme="dark"] .contact-strip a {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--ink-2) !important;
}
[data-theme="dark"] .contact-strip a:hover {
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}

/* ── Footer channels · same pill style ── */
.ft-channels {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ft-channels a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-2) !important;
  text-decoration: none;
  transition: border-color .25s var(--easing), color .25s var(--easing), transform .25s var(--easing);
}
.ft-channels a:hover {
  border-color: var(--brand);
  color: var(--brand) !important;
  transform: translateY(-1px);
}
.ft-channels a .icon { width: 15px; height: 15px; }
[data-theme="dark"] .ft-channels a {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

/* ── Trust icons · SVG circular badge ── */
.trust-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}
.trust-icon svg {
  width: 22px;
  height: 22px;
}
.trust-icon-cyan {
  background: rgba(30,167,214,.10) !important;
  color: var(--brand) !important;
  border: 1px solid rgba(30,167,214,.20) !important;
}
.trust-icon-lime {
  background: rgba(141,198,63,.10) !important;
  color: var(--lime-2) !important;
  border: 1px solid rgba(141,198,63,.22) !important;
}
[data-theme="dark"] .trust-icon-cyan {
  background: rgba(95,200,230,.12) !important;
  color: var(--brand-light) !important;
  border-color: rgba(95,200,230,.25) !important;
}
[data-theme="dark"] .trust-icon-lime {
  background: rgba(184,226,114,.12) !important;
  color: var(--lime-light) !important;
  border-color: rgba(184,226,114,.25) !important;
}

/* ── Trust pill layout refinement ── */
.trust-pill {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 18px !important;
  border-radius: var(--radius) !important;
}
.trust-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-body strong {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.2;
}
.trust-body em {
  font-style: normal;
  font-size: .76rem;
  color: var(--ink-3);
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS POLISH · 2026-05-07d · Process · Promises · Reviews · Areas · FAQ
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Process steps · refined cards with cyan/lime numbered badges ── */
.process-step {
  position: relative;
  padding: 28px 24px !important;
  text-align: left;
}
.process-step h3 {
  font-size: 1.05rem !important;
  margin-bottom: 8px;
  color: var(--ink);
}
.process-step p {
  font-size: .9rem;
  color: var(--ink-3);
  line-height: 1.6;
}
.process-num,
.process-step-num,
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand);
  background: rgba(30,167,214,.08);
  border: 1px solid rgba(30,167,214,.18);
  margin-bottom: 14px;
}
.process-step:nth-child(even) .process-num,
.process-step:nth-child(even) .process-step-num,
.process-step:nth-child(even) .step-num {
  color: var(--lime-2);
  background: rgba(141,198,63,.10);
  border-color: rgba(141,198,63,.22);
}

/* ── Promises (6 garantías) · refined cards ── */
.guarantee-card,
.promise-card {
  padding: 28px 22px !important;
  text-align: left;
}
.promise-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 16px !important;
  font-size: 22px;
}
.promise-icon-cyan {
  background: rgba(30,167,214,.10) !important;
  color: var(--brand) !important;
  border: 1px solid rgba(30,167,214,.20) !important;
}
.promise-icon-lime {
  background: rgba(141,198,63,.10) !important;
  color: var(--lime-2) !important;
  border: 1px solid rgba(141,198,63,.22) !important;
}

/* ── Review cards · profesional layout ── */
.review-card {
  padding: 24px !important;
  position: relative;
}
.review-card::before {
  content: '"';
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: rgba(30,167,214,.10);
  font-weight: 700;
  pointer-events: none;
}
.rev-stars {
  color: var(--warm) !important;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.rev-quote {
  font-size: .95rem !important;
  line-height: 1.65 !important;
  color: var(--ink-2) !important;
}
.rev-loc,
.rev-author {
  font-size: .82rem !important;
  color: var(--ink-3) !important;
  margin-top: 10px;
}
.rev-author strong {
  color: var(--ink);
  font-weight: 600;
}

/* Reviews chips (filter tabs) */
.rev-chip {
  background: var(--bg-2) !important;
  color: var(--ink-3) !important;
  border: 1px solid var(--line) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: .8rem !important;
  font-weight: 500;
  transition: border-color .25s, color .25s, background .25s;
}
.rev-chip:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}
.rev-chip[aria-selected="true"] {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}
.rev-chip em {
  font-style: normal;
  margin-left: 4px;
  opacity: .65;
  font-size: .75em;
}

/* ── Area cards · cyan/lime accents ── */
.area-card {
  padding: 22px !important;
}
.area-card h3 {
  font-size: 1rem !important;
  margin-bottom: 6px;
  color: var(--ink);
}
.area-card .area-tier {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.area-card .area-tier-1 { color: var(--brand); background: rgba(30,167,214,.10); }
.area-card .area-tier-2 { color: var(--lime-2); background: rgba(141,198,63,.12); }
.area-card .area-tier-3 { color: var(--warm); background: rgba(245,158,11,.12); }

/* ── FAQ items · refined accordion ── */
.faq-item {
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 8px;
}
.faq-item summary {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .95rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--brand);
  font-size: 18px;
  font-weight: 400;
  transition: transform .2s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  padding: 0 20px 18px;
  color: var(--ink-3);
  font-size: .9rem;
  line-height: 1.65;
}

/* ── Service cards (3 servicios) · brand accents ── */
.service-card,
.svc-card {
  padding: 32px 28px !important;
  position: relative;
  overflow: hidden;
}
.service-card h3,
.svc-card h3 {
  font-size: 1.15rem !important;
  margin-bottom: 10px;
}
.service-card .price,
.svc-card .price,
.service-card .from-price,
.svc-card .from-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  color: var(--brand);
  font-weight: 600;
  display: block;
  margin: 12px 0;
}
[data-theme="dark"] .service-card .price,
[data-theme="dark"] .svc-card .price {
  color: var(--brand-light);
}

/* ── Trust strip below contact form ── */
.trust-strip,
.contact-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 16px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-3);
}

/* ── Section dividers más elegantes ── */
.section + .section {
  position: relative;
}
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ── Calculator polish ── */
.calc {
  padding: 32px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
}
.calc h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}
.seg-btn {
  background: var(--bg-2) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  font-size: .85rem !important;
  font-weight: 500;
}
.seg-btn.is-on,
.seg-btn.is-active,
.seg-btn[aria-selected="true"] {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

/* ── Rate card tier highlight ── */
.rate-card {
  padding: 24px !important;
}
.rate-card.tier-pro,
.rate-card.is-popular {
  border-color: var(--brand) !important;
  position: relative;
}
.rate-card.tier-pro::before,
.rate-card.is-popular::before {
  content: 'POPULAR';
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--brand);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   AREAS & BLOG · brand gradient en <em>, Playfair en h1, polish unificado
   ═══════════════════════════════════════════════════════════════════════ */

/* Areas: el <em> dentro del h1 lleva el brand gradient cyan→lime */
section.hero h1 em,
.hero h1 em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: normal;
  font-weight: 600;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-2);
  margin-bottom: 20px;
}
[data-theme="dark"] .hero-badge {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--ink-3);
  max-width: 580px;
  margin-top: 16px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Section title (areas pages) */
.section-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600;
  letter-spacing: -.018em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  margin-bottom: 16px;
}

/* Area card grid · refinement (tier visual highlight via cyan/lime) */
.zip-grid,
.neighborhood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.zip-card,
.neighborhood-card {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--easing), transform .25s var(--easing);
}
.zip-card:hover,
.neighborhood-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

/* Blog post · refined typography */
.blog-post,
article.post {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 32px);
}
.blog-post h1,
article.post h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.018em;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  margin-bottom: 12px;
}
.blog-post .meta,
article.post .meta {
  font-size: .82rem;
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.blog-post p,
article.post p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.blog-post h2,
article.post h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.blog-post h3,
article.post h3 {
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: var(--ink);
}

/* Blog list grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.blog-card {
  display: block;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s var(--easing), transform .25s var(--easing), box-shadow .25s var(--easing);
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.blog-card .blog-card-cat {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.blog-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 8px;
}
.blog-card p {
  font-size: .9rem;
  color: var(--ink-3);
  line-height: 1.6;
}

/* Breadcrumbs en area/service pages */
.breadcrumb,
.crumbs {
  font-size: .78rem;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.breadcrumb a,
.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb a:hover,
.crumbs a:hover {
  color: var(--brand);
}
.breadcrumb [aria-current="page"],
.crumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}