/* ═══════════════════════════════════════════════════
   FONTANERO ÁVILA — Design System + Estilos Completos
   ═══════════════════════════════════════════════════ */

:root {
  --color-primary:        #1d4ed8;
  --color-primary-dark:   #1e3a8a;
  --color-primary-light:  #3b82f6;
  --color-accent:         #ef4444;
  --color-success:        #16a34a;
  --color-wa:             #25d366;
  --color-wa-dark:        #128c7e;
  --orange-400:           #fb923c;
  --orange-500:           #f97316;
  --orange-600:           #ea580c;
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-border:         #e2e8f0;
  --color-text:           #0f172a;
  --color-text-muted:     #475569;
  --color-text-light:     #94a3b8;
  --font-display:  'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --space-xs:   0.5rem;  --space-sm:   0.75rem; --space-md:   1rem;
  --space-lg:   1.5rem;  --space-xl:   2rem;    --space-2xl:  3rem;
  --space-3xl:  4rem;    --space-4xl:  6rem;
  --radius-sm: 6px;  --radius-md: 12px;  --radius-lg: 20px;
  --radius-xl: 32px; --radius-full: 9999px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.12);
  --shadow-blue: 0 8px 24px rgba(29,78,216,.25);
  --container: 1200px;  --nav-h: 70px;  --topbar-h: 38px;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --dur-fast: 150ms;  --dur-med: 250ms;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { font-family:var(--font-body); font-size:1rem; line-height:1.65; color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; overflow-x:hidden }
img,svg { display:block }
a { color:inherit; text-decoration:none }
ul,ol { list-style:none }
button { font:inherit; cursor:pointer; border:none; background:none }
input,select,textarea { font:inherit }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-lg) }
.section { padding-block:var(--space-4xl) }
.text-muted { color:var(--color-text-muted) }
.text-accent { color:var(--color-accent) }
.w-full { width:100% }

/* BOTONES */
.btn { display:inline-flex; align-items:center; gap:var(--space-xs); padding:.65rem 1.35rem; border-radius:var(--radius-full); font-family:var(--font-body); font-size:.9rem; font-weight:600; line-height:1; cursor:pointer; transition:all var(--dur-med) var(--ease); white-space:nowrap; text-decoration:none; border:2px solid transparent }
.btn-primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); box-shadow:var(--shadow-blue) }
.btn-primary:hover { background:var(--color-primary-dark); border-color:var(--color-primary-dark); transform:translateY(-1px); box-shadow:0 12px 30px rgba(29,78,216,.35) }
.btn-whatsapp { background:var(--color-wa); color:#fff; border-color:var(--color-wa) }
.btn-whatsapp:hover { background:var(--color-wa-dark); border-color:var(--color-wa-dark); transform:translateY(-1px) }
.btn-outline { background:transparent; color:var(--color-primary); border-color:var(--color-primary) }
.btn-outline:hover { background:var(--color-primary); color:#fff }
.btn-hero-primary { background:var(--color-accent); color:#fff; border-color:var(--color-accent); font-size:1rem; padding:.85rem 1.75rem; box-shadow:0 8px 24px rgba(239,68,68,.35) }
.btn-hero-primary:hover { background:#dc2626; transform:translateY(-2px); box-shadow:0 12px 32px rgba(239,68,68,.45) }
.btn-hero-secondary { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); font-size:1rem; padding:.85rem 1.75rem; backdrop-filter:blur(8px) }
.btn-hero-secondary:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6) }
.btn-card-call { width:100%; justify-content:center; background:var(--color-primary); color:#fff; border-color:var(--color-primary); padding:.75rem; border-radius:var(--radius-md); box-shadow:var(--shadow-blue) }
.btn-card-call:hover { background:var(--color-primary-dark); transform:translateY(-1px) }
.btn-card-wa { width:100%; justify-content:center; background:var(--color-wa); color:#fff; border-color:var(--color-wa); padding:.75rem; border-radius:var(--radius-md) }
.btn-card-wa:hover { background:var(--color-wa-dark) }
.btn-submit { width:100%; justify-content:center; padding:1rem; font-size:1rem; border-radius:var(--radius-md) }

/* SECTION HEADER */
.section-header { text-align:center; margin-bottom:var(--space-3xl) }
.section-tag { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-primary); background:#eff6ff; padding:.3rem .85rem; border-radius:var(--radius-full); margin-bottom:var(--space-md) }
.section-title { font-family:var(--font-body); font-size:clamp(2rem,4vw,3.5rem); font-weight:900; line-height:1.2; color:var(--color-text); margin-bottom:var(--space-md) }
.section-desc { font-size:1.05rem; color:var(--color-text-muted); max-width:580px; margin-inline:auto }

/* TOPBAR */
.topbar { background:var(--color-primary-dark); color:rgba(255,255,255,.9); height:var(--topbar-h); display:flex; align-items:center; font-size:.82rem }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md) }
.topbar-text { display:flex; align-items:center; gap:var(--space-xs) }
.topbar-tel { display:flex; align-items:center; gap:6px; font-weight:700; color:#fff; transition:opacity var(--dur-fast) }
.topbar-tel:hover { opacity:.8 }

/* HEADER NAV */
.header { position:sticky; top:0; z-index:100; height:var(--nav-h); display:flex; align-items:center; box-shadow:var(--shadow-sm) }
.header::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border); z-index:1 }
.nav { position:relative; z-index:2; display:flex; align-items:center; gap:var(--space-lg); height:100%; width:100% }
.nav-logo { display:flex; align-items:center; gap:var(--space-xs); font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--color-text); flex-shrink:0 }
.nav-logo img { height:44px; width:auto }
.logo-icon { color:var(--color-primary); display:flex }
.nav-logo strong { color:var(--color-primary) }
.nav-links { display:flex; align-items:center; gap:2px; margin-left:auto }
.nav-link { display:flex; align-items:center; gap:4px; padding:.5rem .75rem; border-radius:var(--radius-sm); font-size:.88rem; font-weight:500; color:var(--color-text-muted); transition:all var(--dur-fast) var(--ease); white-space:nowrap }
.nav-link:hover, .nav-link.active { color:var(--color-primary); background:#eff6ff }
.nav-dropdown { position:relative }
.nav-dropdown-btn { background:none; border:none }
.dropdown-menu { position:absolute; top:100%; left:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--space-xs); min-width:220px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all var(--dur-med) var(--ease); pointer-events:none }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown.is-open .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto }
.dropdown-menu li a { display:block; padding:.55rem .85rem; font-size:.88rem; border-radius:var(--radius-sm); color:var(--color-text-muted); transition:all var(--dur-fast) }
.dropdown-menu li a:hover, .dropdown-menu li a.active { background:#eff6ff; color:var(--color-primary) }
.nav-cta { display:flex; align-items:center; gap:var(--space-xs); flex-shrink:0 }
.nav-burger { display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; border-radius:var(--radius-sm) }
.nav-burger span { width:22px; height:2px; background:var(--color-text); border-radius:2px; transition:all var(--dur-med) var(--ease); display:block }
.nav-burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav-burger.is-open span:nth-child(2) { opacity:0 }
.nav-burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }
/* Mobile Menu */
.mobile-menu { 
  position: absolute; 
  top: 100%; 
  left: 0; 
  right: 0; 
  height: calc(100vh - var(--nav-h)); 
  z-index: 100; 
  background: rgba(15, 23, 42, 0.6); 
  backdrop-filter: blur(4px); 
  opacity: 0; 
  visibility: hidden; 
  transition: all var(--dur-med) var(--ease);
  overflow-y: auto; /* Enable scrolling on the wrapper */
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu ul { 
  position: relative; /* Change from absolute to relative for natural flow */
  width: 100%; 
  background: var(--color-surface); 
  padding: var(--space-md); 
  transform: translateY(-20px); /* Subtle slide down instead of full screen slide */
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med); 
  box-shadow: 0 8px 24px rgba(0,0,0,0.1); 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-xs); 
  border-bottom: 1px solid var(--color-border);
  opacity: 0;
}
.mobile-menu.is-open ul { transform: translateY(0); opacity: 1; }
.mobile-menu li a { display:block; padding:.6rem 1rem; font-size:1rem; font-weight:500; border-radius:var(--radius-sm); color:var(--color-text); transition:background var(--dur-fast) }
.mobile-menu li a:hover { background:#eff6ff; color:var(--color-primary) }

/* Mobile Dropdown */
.mobile-dropdown-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem; font-size:1rem; font-weight:500; border-radius:var(--radius-sm); color:var(--color-text); background:none; border:none; cursor:pointer; transition:background var(--dur-fast) }
.mobile-dropdown-btn:hover, .mobile-dropdown-btn[aria-expanded="true"] { background:#eff6ff; color:var(--color-primary) }
.mobile-dropdown-list { 
  display: block; 
  overflow: hidden; 
  transition: all var(--dur-med) var(--ease); 
  margin-top: 0; 
  padding: 0; 
  max-height: 0; 
  opacity: 0; 
  visibility: hidden;
  border-left: 2px solid #eff6ff; /* Visual cue for nesting */
  margin-left: 1rem;
}
.mobile-dropdown-list.is-open { 
  margin-top: 0.5rem; 
  margin-bottom: 0.5rem;
  max-height: 1000px; 
  opacity: 1; 
  visibility: visible; 
}
.mobile-dropdown-list[hidden] { display: none }
.mobile-dropdown-list li a { 
  font-size: .95rem; 
  padding: .6rem 1rem; 
  color: var(--color-text-muted); 
  display: block; 
  text-align: left; 
  border-radius: var(--radius-sm); 
  background: none; 
  border: none; 
  line-height: 1.4; 
}
.mobile-dropdown-list li a:hover { color:var(--color-primary); background:#eff6ff }
.dropdown-arrow { transition:transform var(--dur-med) }
.mobile-dropdown-btn[aria-expanded="true"] .dropdown-arrow { transform:rotate(180deg) }

.mobile-ctas { display:flex; flex-direction:column; gap:var(--space-xs); margin-top:var(--space-lg); padding-top:var(--space-lg); border-top:1px solid var(--color-border) }

/* HERO */
.hero { position:relative; background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#1d4ed8 100%); padding-block:var(--space-4xl); overflow:hidden; min-height:88vh; display:flex; align-items:center }
.hero-bg { position:absolute; inset:0; pointer-events:none }
.hero-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.35 }
.hero-blob-1 { width:600px; height:600px; background:radial-gradient(circle,#3b82f6,transparent 70%); top:-200px; right:-100px; animation:blobFloat 8s ease-in-out infinite }
.hero-blob-2 { width:400px; height:400px; background:radial-gradient(circle,#ef4444,transparent 70%); bottom:-100px; left:20%; animation:blobFloat 10s ease-in-out infinite reverse }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:60px 60px }
@keyframes blobFloat { 0%,100% { transform:translateY(0) scale(1) } 50% { transform:translateY(-30px) scale(1.05) } }
.hero-inner { position:relative; display:grid; grid-template-columns:1fr 380px; gap:var(--space-3xl); align-items:center }
.hero-badge { display:inline-flex; align-items:center; gap:var(--space-xs); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9); font-size:.82rem; font-weight:600; padding:.4rem .9rem; border-radius:var(--radius-full); margin-bottom:var(--space-lg); backdrop-filter:blur(8px) }
.badge-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulse 2s infinite }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.7; transform:scale(1.3) } }
.hero-title { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4.5rem); font-weight:800; line-height:1.05; color:#fff; margin-bottom:var(--space-lg); letter-spacing:-.02em }
.hero-subtitle-inline { font-size:.6em; font-weight:700; color:rgba(255,255,255,.65); letter-spacing:.05em }
.hero-desc { font-size:1.1rem; color:rgba(255,255,255,.75); max-width:520px; margin-bottom:var(--space-xl); line-height:1.7 }
.hero-desc strong { color:#fff }
.hero-trust { display:flex; flex-direction:column; gap:var(--space-xs); margin-bottom:var(--space-xl) }
.hero-trust li { display:flex; align-items:center; gap:var(--space-xs); font-size:.92rem; color:rgba(255,255,255,.8); font-weight:500 }
.hero-trust svg { color:#22c55e; flex-shrink:0 }
.hero-ctas { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-bottom:var(--space-xl) }
.hero-rating { display:flex; align-items:center; gap:var(--space-sm); font-size:.88rem; color:rgba(255,255,255,.7) }
.hero-rating strong { color:#fff }
.stars { display:flex; gap:2px }
.hero-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-xl); padding:var(--space-lg); backdrop-filter:blur(20px); box-shadow:0 24px 60px rgba(0,0,0,.4) }
.hero-card-header { display:flex; align-items:center; gap:var(--space-xs); font-size:.8rem; font-weight:600; color:#22c55e; margin-bottom:var(--space-md) }
.card-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulse 2s infinite }
.card-title { font-family:var(--font-body); font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:.35rem }
.card-desc { font-size:.88rem; color:rgba(255,255,255,.65); margin-bottom:var(--space-md) }
.hero-card-body { display:flex; flex-direction:column; gap:var(--space-sm) }
.card-features { display:flex; flex-wrap:wrap; gap:var(--space-xs); font-size:.78rem; margin-top:var(--space-xs) }
.card-features span { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); padding:.3rem .65rem; border-radius:var(--radius-full); color:rgba(255,255,255,.8) }

/* STATS BAR */
.stats-bar { background:var(--color-surface); border-bottom:1px solid var(--color-border); padding-block:var(--space-xl); box-shadow:var(--shadow-sm) }
.stats-grid { display:flex; align-items:center; justify-content:center; gap:var(--space-2xl); flex-wrap:wrap }
.stat-item { text-align:center }
.stat-number { display:inline; font-family:var(--font-body); font-size:2.25rem; font-weight:800; color:var(--color-primary); line-height:1 }
.stat-label { display:block; font-size:.82rem; color:var(--color-text-muted); font-weight:500; margin-top:4px }
.stat-divider { width:1px; height:48px; background:var(--color-border) }

/* SERVICIOS */
.services-section { background:var(--color-bg) }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg) }
.service-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-xl); transition:all var(--dur-med) var(--ease); position:relative; overflow:hidden }
.service-card:hover { border-color:var(--color-primary); transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.service-card--featured { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:var(--space-lg); align-items:center; background:linear-gradient(135deg,#fef2f2 0%,#fff1f1 100%); border-color:#fecaca }
.service-card--featured:hover { border-color:var(--color-accent); box-shadow:0 12px 40px rgba(239,68,68,.12) }
.service-badge { position:absolute; top:var(--space-md); right:var(--space-md); background:var(--color-accent); color:#fff; font-size:.72rem; font-weight:700; padding:.25rem .65rem; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.05em }
.service-icon { width:60px; height:60px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:var(--space-md) }
.service-card--featured .service-icon { margin-bottom:0 }
.service-icon--red    { background:#fef2f2; color:#ef4444 }
.service-icon--blue   { background:#eff6ff; color:#3b82f6 }
.service-icon--cyan   { background:#ecfeff; color:#06b6d4 }
.service-icon--orange { background:#fff7ed; color:#f97316 }
.service-icon--purple { background:#faf5ff; color:#a855f7 }
.service-icon--green  { background:#f0fdf4; color:#22c55e }
.service-title { font-family:var(--font-body); font-size:1.15rem; font-weight:800; color:var(--color-text); margin-bottom:var(--space-xs) }
.service-desc { font-size:.88rem; color:var(--color-text-muted); line-height:1.6; margin-bottom:var(--space-md) }
.service-link { display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--color-primary); transition:gap var(--dur-fast) }
.service-link:hover { gap:10px }

/* POR QUÉ */
.why-section { background:linear-gradient(180deg,var(--color-bg) 0%,#f0f4ff 100%) }
.why-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4xl); align-items:center }
.why-list { display:flex; flex-direction:column; gap:var(--space-lg); margin-top:var(--space-xl) }
.why-item { display:flex; gap:var(--space-md) }
.why-icon { width:44px; height:44px; background:#eff6ff; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-primary); flex-shrink:0 }
.why-item h3 { font-family:var(--font-body); font-size:1rem; font-weight:700; margin-bottom:4px }
.why-item p { font-size:.88rem; color:var(--color-text-muted) }
.why-visual { position:relative }
.why-card-stack { display:flex; flex-direction:column; gap:var(--space-md) }
.why-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:var(--shadow-md); transition:transform var(--dur-med) var(--ease) }
.why-card:hover { transform:translateY(-3px) }
.why-card-main { background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%); border:none; color:#fff; display:flex; align-items:center; gap:var(--space-md) }
.why-card-main .why-card-icon { width:44px; height:44px; background:rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.why-card-main p { font-weight:700 }
.why-card-main span { font-size:.8rem; opacity:.75 }
.why-card-review p { font-size:.9rem; color:var(--color-text-muted); font-style:italic; margin-block:var(--space-xs) }
.why-card-review span { font-size:.8rem; font-weight:600; color:var(--color-text) }
.why-card-stars { color:#f59e0b; font-size:1.1rem; letter-spacing:2px }
.why-card-stat { text-align:center }
.big-number { font-family:var(--font-body); font-size:3.5rem; font-weight:800; color:var(--color-primary); line-height:1 }
.big-number small { font-size:1.5rem; font-weight:700 }
.why-card-stat p { font-size:.85rem; color:var(--color-text-muted); margin-top:var(--space-xs) }

/* RESEÑAS */
.reviews-section { background:var(--color-surface) }
.reviews-overall { display:flex; align-items:center; gap:var(--space-sm); justify-content:center; margin-top:var(--space-md); font-size:.9rem; color:var(--color-text-muted) }
.reviews-overall strong { color:var(--color-text) }
.stars-large { display:flex; gap:3px }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); margin-bottom:var(--space-2xl) }
.review-card { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-xl); display:flex; flex-direction:column; gap:var(--space-md); transition:all var(--dur-med) var(--ease) }
.review-card:hover { border-color:var(--color-primary-light); box-shadow:var(--shadow-md); transform:translateY(-2px) }
.review-stars { color:#f59e0b; font-size:1rem; letter-spacing:2px }
.review-text { font-size:.9rem; color:var(--color-text-muted); line-height:1.7; font-style:italic; flex:1 }
.review-author { display:flex; align-items:center; gap:var(--space-sm); border-top:1px solid var(--color-border); padding-top:var(--space-md) }
.review-avatar { width:38px; height:38px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0 }
.review-name { display:block; font-weight:600; font-size:.9rem }
.review-location { font-size:.78rem; color:var(--color-text-light) }
.reviews-cta { text-align:center }

/* COBERTURA */
.coverage-section { background:var(--color-bg) }
.coverage-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:start }
.coverage-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-xs) }
.coverage-item { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:.9rem; font-weight:500; color:var(--color-text); gap:var(--space-xs); transition:all var(--dur-fast); text-decoration:none }
.coverage-item:hover { border-color:var(--color-primary); background:#eff6ff; color:var(--color-primary) }
.coverage-item--main { grid-column:1 / -1; background:#eff6ff; border-color:#bfdbfe; color:var(--color-primary); font-weight:700 }
.coverage-time { font-size:.75rem; font-weight:400; color:var(--color-text-light); white-space:nowrap }
.coverage-item:hover .coverage-time { color:var(--color-primary-light) }
.coverage-item-more { grid-column:1 / -1; text-align:center }
.coverage-item-more a { font-size:.88rem; font-weight:600; color:var(--color-primary) }

/* CONTACT HIGHLIGHT (NUEVO) */
.contact-highlight { background:linear-gradient(to bottom,#f8fafc,#eff6ff); padding-block:var(--space-3xl); text-align:center; border-bottom:1px solid var(--color-border) }
.highlight-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-lg); margin-top:var(--space-xl) }
.highlight-item { background:var(--color-surface); padding:var(--space-xl) var(--space-lg); border-radius:var(--radius-lg); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); transition:all var(--dur-med) var(--ease); display:flex; flex-direction:column; align-items:center; gap:var(--space-md) }
.highlight-item:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--color-primary-light) }
.highlight-icon { width:64px; height:64px; background:#eff6ff; color:var(--color-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-xs) }
.highlight-label { font-size:1.1rem; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em }
.highlight-value { font-family:var(--font-body); font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:var(--color-text); line-height:1.2; overflow-wrap:anywhere }
.highlight-value--big { font-size:clamp(1.8rem,4vw,2.5rem); color:var(--color-primary) }
.highlight-sub { font-size:.9rem; color:var(--color-text-light) }

.coverage-map { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); box-shadow:var(--shadow-md) }

/* FAQ */
.faq-section { background:var(--color-surface) }
.faq-inner { display:grid; grid-template-columns:1fr 1.5fr; gap:var(--space-4xl); align-items:start }
.faq-text .section-desc a { color:var(--color-primary); font-weight:600 }
.faq-list { display:flex; flex-direction:column; gap:2px }
.faq-item { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface) }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding:var(--space-lg); font-size:.95rem; font-weight:600; color:var(--color-text); text-align:left; transition:color var(--dur-fast) }
.faq-question:hover { color:var(--color-primary) }
.faq-question[aria-expanded="true"] { color:var(--color-primary) }
.faq-icon { flex-shrink:0; transition:transform var(--dur-med) var(--ease) }
.faq-question[aria-expanded="true"] .faq-icon { transform:rotate(180deg) }
.faq-answer { padding:0 var(--space-lg) var(--space-lg); font-size:.9rem; color:var(--color-text-muted); line-height:1.7 }
.faq-answer p { margin:0 }
.faq-answer strong { color:var(--color-text) }
.faq-answer a { color:var(--color-primary); font-weight:600 }
.faq-answer[hidden] { display:none }
.faq-answer:not([hidden]) { animation:fadeDown .25s ease }
@keyframes fadeDown { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }

/* CONTACTO */
.contact-section { background:linear-gradient(135deg,#f0f4ff 0%,#eff6ff 100%) }
.contact-inner { display:grid; grid-template-columns:1fr 1.4fr; gap:var(--space-4xl); align-items:start }
.contact-info { display:flex; flex-direction:column; gap:var(--space-md); margin-top:var(--space-xl) }
.contact-info li { display:flex; align-items:center; gap:var(--space-md) }
.contact-info svg { color:var(--color-primary); flex-shrink:0 }
.contact-info strong { display:block; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted) }
.contact-info a,.contact-info span { font-size:1rem; font-weight:600; color:var(--color-text) }
.contact-info a:hover { color:var(--color-primary) }
.contact-form { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-2xl); box-shadow:var(--shadow-lg) }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); margin-bottom:var(--space-md) }
.form-group { display:flex; flex-direction:column; gap:var(--space-xs); margin-bottom:var(--space-md) }
.form-label { font-size:.85rem; font-weight:600; color:var(--color-text) }
.form-input { width:100%; padding:.75rem 1rem; border:1.5px solid var(--color-border); border-radius:var(--radius-md); font-size:.9rem; color:var(--color-text); background:var(--color-surface); transition:border-color var(--dur-fast),box-shadow var(--dur-fast); outline:none; -webkit-appearance:none; appearance:none }
.form-input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(29,78,216,.12) }
.form-input::placeholder { color:var(--color-text-light) }
.form-input.is-error { border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(239,68,68,.1) }
.form-select { cursor:pointer }
.form-textarea { resize:vertical; min-height:110px }
.form-honeypot { position:absolute; left:-9999px; opacity:0; pointer-events:none }
.form-footer { margin-top:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-sm) }
.form-privacy { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--color-text-muted) }
.form-privacy a { color:var(--color-primary); font-weight:500 }
.form-privacy svg { flex-shrink:0 }

/* FOOTER */
.footer { background:var(--color-text); color:rgba(255,255,255,.75) }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-2xl); padding-block:var(--space-4xl) }
.footer-logo { display:flex; align-items:center; gap:var(--space-xs); font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:var(--space-md) }
.footer-logo .logo-icon { color:var(--color-primary-light) }
.footer-logo strong { color:var(--color-primary-light) }
.footer-brand p { font-size:.88rem; line-height:1.65; margin-bottom:var(--space-md) }
.footer-address { font-style:normal; font-size:.82rem; color:rgba(255,255,255,.5) }
.footer-nav-title { font-family:var(--font-body); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:var(--space-md) }
.footer-nav ul { display:flex; flex-direction:column; gap:var(--space-xs) }
.footer-nav a { font-size:.88rem; color:rgba(255,255,255,.6); transition:color var(--dur-fast) }
.footer-nav a:hover { color:#fff }
.footer-tel,.footer-email { display:block; font-size:1rem; font-weight:700; color:#fff; margin-bottom:var(--space-xs); transition:color var(--dur-fast) }
.footer-tel:hover,.footer-email:hover { color:var(--color-primary-light) }
.footer-email { font-size:.85rem; font-weight:400; margin-bottom:var(--space-md) }
.footer-wa { margin-top:var(--space-sm) }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:var(--space-lg) }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); font-size:.82rem; color:rgba(255,255,255,.4) }
.footer-bottom nav { display:flex; gap:var(--space-md) }
.footer-bottom a { color:rgba(255,255,255,.4); transition:color var(--dur-fast) }
.footer-bottom a:hover { color:#fff }

/* FAB WHATSAPP */
.fab-whatsapp { position:fixed; bottom:var(--space-xl); right:var(--space-xl); z-index:200; width:60px; height:60px; border-radius:50%; background:var(--color-wa); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(37,211,102,.4); transition:all var(--dur-med) var(--ease) }
.fab-whatsapp:hover { transform:scale(1.08); box-shadow:0 12px 36px rgba(37,211,102,.55) }
.fab-tooltip { position:absolute; right:calc(100% + 10px); background:var(--color-text); color:#fff; font-size:.78rem; font-weight:600; padding:.35rem .75rem; border-radius:var(--radius-full); white-space:nowrap; opacity:0; pointer-events:none; transform:translateX(8px); transition:all var(--dur-med) var(--ease) }
.fab-whatsapp:hover .fab-tooltip { opacity:1; transform:translateX(0) }

/* RESPONSIVE */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr }
  .hero-card { max-width:440px }
  .services-grid { grid-template-columns:repeat(2,1fr) }
  .service-card--featured { grid-column:1 / -1 }
  .why-inner { grid-template-columns:1fr }
  .why-visual { display:none }
  .reviews-grid { grid-template-columns:1fr 1fr }
  .reviews-grid li:last-child { grid-column:1 / -1 }
  .coverage-inner { grid-template-columns:1fr }
  .faq-inner { grid-template-columns:1fr }
  .contact-inner { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr 1fr }
}
@media (max-width:768px) {
  :root { --space-4xl:3rem; --space-3xl:2rem }
  .topbar-text { display:none }
  .nav-links,.nav-cta { display:none }
  .nav-burger { display:flex }
  .hero { min-height:auto; padding-block:var(--space-3xl) }
  .hero-title { font-size:2.2rem }
  .hero-ctas { flex-direction:column }
  .hero-ctas .btn { width:100%; justify-content:center }
  .hero-card { display:none }
  .stats-grid { gap:var(--space-lg) }
  .stat-divider { display:none }
  .services-grid { grid-template-columns:1fr }
  .service-card--featured { display:flex; flex-direction:column }
  .reviews-grid { grid-template-columns:1fr }
  .reviews-grid li:last-child { grid-column:auto }
  .coverage-grid { grid-template-columns:1fr }
  .coverage-item--main { grid-column:auto }
  .form-row { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr; gap:var(--space-xl) }
  .footer-bottom-inner { flex-direction:column; text-align:center }
  .fab-whatsapp { bottom:var(--space-md); right:var(--space-md); width:54px; height:54px }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ═══════════════════════════════════════════════════
   FONTANERO ARÉVALO / LANDING STYLES
   ═══════════════════════════════════════════════════ */

/* Breadcrumbs */
.bread { background:var(--color-surface); border-bottom:1px solid var(--color-border); padding-block:var(--space-sm); font-size:.85rem }
.bread-in { display:flex; align-items:center; gap:var(--space-xs); color:var(--color-text-muted) }
.bread-sep { color:var(--color-text-light); font-size:.8rem }
.bread a:hover { color:var(--color-primary); text-decoration:underline }

/* Hero Variants */
.hero-txt { display:flex; flex-direction:column; align-items:flex-start; max-width:650px; position:relative; z-index:2 }
.hero-in { position:relative; display:grid; grid-template-columns:1fr 380px; gap:var(--space-2xl); align-items:center }
.hero-sub { display:block; font-size:.4em; font-weight:700; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.1em; margin-top:5px }
.bdot { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulse 2s infinite }
.btn-hero-p { background:var(--color-accent); color:#fff; font-weight:700; padding:1rem 1.5rem; border-radius:var(--radius-full); box-shadow:0 10px 30px rgba(239,68,68,.4); transition:all var(--dur-med) }
.btn-hero-p:hover { transform:translateY(-2px); box-shadow:0 15px 40px rgba(239,68,68,.5) }
.btn-hero-s { background:rgba(255,255,255,.1); color:#fff; font-weight:600; padding:1rem 1.5rem; border-radius:var(--radius-full); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); transition:all var(--dur-med) }
.btn-hero-s:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5) }

/* Hero Card (Floating) */
.hcard { background:rgba(255,255,255,.1); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-xl); padding:var(--space-lg); color:#fff; box-shadow:0 25px 50px -12px rgba(0,0,0,.5) }
.hcard-hd { display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; color:#22c55e; margin-bottom:var(--space-md); text-transform:uppercase; letter-spacing:.05em }
.hcard-title { font-family:var(--font-body); font-size:1.5rem; font-weight:800; line-height:1.1; margin-bottom:8px }
.hcard-desc { font-size:.9rem; color:rgba(255,255,255,.7); margin-bottom:var(--space-lg); line-height:1.5 }
.hcard-call { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--color-primary); color:#fff; font-weight:700; padding:.8rem; border-radius:var(--radius-md); margin-bottom:10px; transition:all var(--dur-fast) }
.hcard-call:hover { background:var(--color-primary-dark); transform:translateY(-1px) }
.hcard-wa { display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.1); color:#fff; font-size:.9rem; font-weight:600; padding:.8rem; border-radius:var(--radius-md); transition:all var(--dur-fast) }
.hcard-wa:hover { background:rgba(255,255,255,.2) }
.hcard-feats { margin-top:var(--space-lg); padding-top:var(--space-md); border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:rgba(255,255,255,.6) }

/* Stats Bar */
.stats-bar { background:var(--color-surface); padding-block:var(--space-xl); border-bottom:1px solid var(--color-border) }
.stat-it { text-align:center }
.stat-n { display:block; font-family:var(--font-body); font-size:2.5rem; font-weight:800; color:var(--color-primary); line-height:1 }
.stat-l { font-size:.85rem; color:var(--color-text-muted); font-weight:600 }
.stat-div { width:1px; height:50px; background:var(--color-border) }

/* Local Section */
.local-in { display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-4xl); align-items:start }
.local-body { margin-top:var(--space-lg); font-size:1.05rem; color:var(--color-text-muted); line-height:1.8 }
.local-body p { margin-bottom:1rem }
.local-aside { position:sticky; top:100px; display:flex; flex-direction:column; gap:var(--space-lg) }
.aside-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:var(--shadow-md) }
.aside-card.blue { background:#eff6ff; border-color:#bfdbfe }
.aside-card h3 { display:flex; align-items:center; gap:10px; font-size:1rem; font-weight:700; margin-bottom:var(--space-md); color:var(--color-text) }
.travel-row { display:flex; justify-content:space-between; font-size:.9rem; padding-block:6px; border-bottom:1px solid rgba(0,0,0,.05) }
.travel-row:last-child { border:none }
.travel-row span:last-child { font-weight:700; color:var(--color-primary) }
.aside-list li { display:flex; gap:10px; font-size:.9rem; margin-bottom:10px; color:var(--color-text-muted) }
.aside-list svg { color:var(--color-accent); flex-shrink:0; margin-top:3px }

/* Services Grid (Alt) */
.srv-sec { background:var(--color-bg) }
.sec-header { text-align:center; max-width:700px; margin-inline:auto; margin-bottom:var(--space-3xl) }
.sec-title { font-family:var(--font-body); font-size:3.5rem; font-weight:900; margin-bottom:1rem; line-height:1.1 }
.tag { display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--color-primary); background:rgba(59,130,246,.1); padding:.3rem .8rem; border-radius:var(--radius-full); margin-bottom:1rem }
.srv-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--space-lg) }
.srv-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-xl); transition:all var(--dur-med) }
.srv-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--color-primary-light) }
.srv-card.feat { grid-column:1 / -1; display:flex; gap:var(--space-xl); align-items:center; background:linear-gradient(135deg, #fff 0%, #fff1f2 100%); border-color:#fda4af }
.srv-ic { width:56px; height:56px; background:#eff6ff; border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--color-primary); margin-bottom:var(--space-lg) }
.srv-ic.ic-red { background:#fef2f2; color:#ef4444 }
.srv-ic.ic-cyan { background:#ecfeff; color:#06b6d4 }
.srv-ic.ic-ora { background:#fff7ed; color:#f97316 }
.srv-ic.ic-blue { background:#eff6ff; color:#3b82f6 }
.srv-ic.ic-pur { background:#faf5ff; color:#a855f7 }
.srv-cnt { flex:1 }
.srv-badge { display:inline-block; background:#ef4444; color:#fff; font-size:.7rem; font-weight:700; text-transform:uppercase; padding:.2rem .6rem; border-radius:4px; margin-bottom:10px }
.srv-title { font-family:var(--font-body); font-size:1.25rem; font-weight:700; margin-bottom:10px }
.srv-desc { font-size:.9rem; color:var(--color-text-muted); line-height:1.6; margin-bottom:var(--space-md) }
.srv-lnk { font-size:.9rem; font-weight:700; color:var(--color-primary); text-decoration:none }

/* Why Section (Alt) */
.why-list { display:flex; flex-direction:column; gap:var(--space-lg) }
.why-it { display:flex; gap:var(--space-md) }
.why-ic { width:48px; height:48px; background:#eff6ff; color:var(--color-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.why-it h3 { font-family:var(--font-body); font-size:1.1rem; font-weight:700; margin-bottom:5px }
.why-it p { font-size:.9rem; color:var(--color-text-muted) }

/* CTA Band (Landing) */
.cta-band { position:relative; padding-block:var(--space-4xl); background:var(--color-primary); color:#fff; overflow:hidden; text-align:center }
.cta-band-bg { position:absolute; inset:0; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1h2v2H1V1zm4 0h2v2H5V1zm4 0h2v2H9V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm-16 4h2v2H1V5zm4 0h2v2H5V5zm4 0h2v2H9V5zm4 0h2v2h-2V5zm4 0h2v2h-2V5zM1 9h2v2H1V9zm4 0h2v2H5V9zm4 0h2v2H9V9zm4 0h2v2h-2V9zm4 0h2v2h-2V9zm-16 4h2v2H1v-2zm4 0h2v2H5v-2zm4 0h2v2H9v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM1 17h2v2H1v-2zm4 0h2v2H5v-2zm4 0h2v2H9v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z' fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E") }
.cta-band-in { position:relative; z-index:2; max-width:800px; margin-inline:auto }
.cta-band h2 { font-family:var(--font-body); font-size:3.5rem; font-weight:900; margin-bottom:var(--space-md); color:#fff }
.cta-band p { font-size:1.1rem; opacity:.9; margin-bottom:var(--space-xl); max-width:600px; margin-inline:auto }
.cta-band-btns { display:flex; align-items:center; justify-content:center; gap:var(--space-md); flex-wrap:wrap }
.cta-band-note { font-size:.85rem; margin-top:var(--space-lg); opacity:.7 }

/* Responsive adjustments for Landing */
@media (max-width: 1024px) {
  .hero-in { grid-template-columns:1fr; text-align:center }
  .hero-txt { align-items:center; margin-inline:auto }
  .hcard { max-width:400px; margin-inline:auto }
  .local-in { grid-template-columns:1fr }
  .local-aside { position:static; margin-top:var(--space-xl) }
  .srv-card.feat { flex-direction:column; text-align:center }
  .srv-ic { margin-inline:auto }
}
@media (max-width: 768px) {
  .stats-grid { flex-direction:column; gap:var(--space-lg) }
  .stat-div { display:none }
}

/* BLOG GRID & CARDS */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--space-xl) }

.blog-card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all var(--dur-med) var(--ease);
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
}

.blog-card:hover {
  border-color:var(--color-primary-light);
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}

.blog-card-content {
  padding:var(--space-xl);
  display:flex;
  flex-direction:column;
  flex:1;
}

.blog-tag {
  display:inline-flex;
  align-items:center;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-primary);
  background:rgba(59, 130, 246, 0.1);
  padding:0.35rem 0.85rem;
  border-radius:var(--radius-full);
  margin-bottom:var(--space-md);
  width:fit-content;
}

.blog-title {
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:800;
  color:var(--color-text);
  margin-bottom:var(--space-md);
  line-height:1.25;
  letter-spacing:-0.01em;
}

.blog-title a {
  text-decoration:none;
  background-image:linear-gradient(var(--color-text), var(--color-text));
  background-position:0% 100%;
  background-repeat:no-repeat;
  background-size:0% 2px;
  transition:background-size var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}

.blog-card:hover .blog-title a {
  color:var(--color-primary);
  background-size:100% 2px;
  background-image:linear-gradient(var(--color-primary), var(--color-primary));
}

.blog-excerpt {
  font-size:1rem;
  color:var(--color-text-muted);
  line-height:1.65;
  margin-bottom:var(--space-lg);
  flex-grow:1;
}

.blog-link {
  font-weight:700;
  color:var(--color-primary);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.95rem;
  margin-top:auto;
  transition:gap var(--dur-fast) var(--ease);
}

.blog-link:hover {
  gap:10px;
}


/* ═══════════════════════════════════════════════════
   BLOG / ARTÍCULOS — Estilos específicos
   ═══════════════════════════════════════════════════ */

    /* ── BREADCRUMB ────────────────────────────────────────────── */
    .breadcrumb {
      background: var(--color-bg); border-bottom: 1px solid var(--color-border);
      padding: 12px 0; font-size: 0.82rem; color: var(--color-text-muted);
    }
    .breadcrumb a { color: var(--color-primary); }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb-sep { margin-inline: 6px; opacity: 0.4; }
    .breadcrumb .container { overflow-x: auto; white-space: nowrap; }
    .breadcrumb .container::-webkit-scrollbar { display: none; }
    .breadcrumb .container { -ms-overflow-style: none; scrollbar-width: none; }

    /* ── ARTICLE WRAP ──────────────────────────────────────────── */
    .article-wrap {
      max-width: 1080px; margin: var(--space-2xl) auto;
      display: grid; grid-template-columns: 1fr 300px; gap: 40px;
      padding: 0 var(--space-lg);
    }
    @media (max-width: 900px) {
      .article-wrap { grid-template-columns: 1fr; gap: 30px; }
    }
    @media (max-width: 600px) {
      .article-wrap { padding: 0 var(--space-md); margin: var(--space-xl) auto; gap: 24px; }
    }
    @media (max-width: 400px) {
      .article-wrap { padding: 0 var(--space-sm); }
    }

    /* ── ARTICLE HEADER ────────────────────────────────────────── */
    .article-header { margin-bottom: 36px; }
    .article-cat {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
      text-transform: uppercase; color: var(--color-primary);
      background: #eff6ff; padding: 0.3rem 0.9rem;
      border-radius: var(--radius-full); margin-bottom: 16px;
    }
    .article-title {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      font-weight: 800; line-height: 1.18;
      color: var(--color-text); margin-bottom: 16px;
    }
    .article-title em { color: var(--color-primary); font-style: normal; }
    .article-meta {
      display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
      font-size: 0.84rem; color: var(--color-text-muted);
      padding-bottom: 24px; border-bottom: 2px solid var(--color-border);
    }
    .article-meta-item { display: flex; align-items: center; gap: 6px; }
    .reading-time {
      display: inline-flex; align-items: center; gap: 6px;
      background: #fef3c7; color: #92400e;
      font-size: 0.78rem; font-weight: 600;
      padding: 0.25rem 0.75rem; border-radius: var(--radius-full);
    }

    @media (max-width: 600px) {
      .article-header { margin-bottom: 28px; }
      .article-cat { margin-bottom: 12px; font-size: 0.7rem; }
      .article-meta { gap: 12px; padding-bottom: 18px; }
      .article-meta-item { font-size: 0.8rem; }
      .reading-time { font-size: 0.74rem; padding: 0.2rem 0.65rem; }
    }

    /* ── ARTICLE BODY ────────────────────────────────────────────── */
    .article-body {
      font-size: 1.02rem; line-height: 1.78; color: #1e293b;
    }
    .article-body h2 {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2.2vw, 1.65rem);
      font-weight: 700; color: var(--color-text);
      margin: 2.4em 0 0.7em; padding-bottom: 0.4em;
      border-bottom: 2px solid #e0e7ff;
    }
    .article-body h3 {
      font-family: var(--font-display);
      font-size: 1.12rem; font-weight: 700;
      color: var(--color-text); margin: 1.8em 0 0.5em;
    }
    .article-body p { margin-bottom: 1.2em; }
    .article-body strong { color: var(--color-text); font-weight: 600; }
    .article-body ul, .article-body ol {
      margin: 0.8em 0 1.4em 1.2em;
    }
    .article-body li { margin-bottom: 0.45em; }
    .article-body a {
      color: var(--color-primary); text-decoration: underline;
      text-underline-offset: 3px;
    }

    @media (max-width: 600px) {
      .article-body { font-size: 0.98rem; line-height: 1.7; }
      .article-body h2 { margin: 2em 0 0.6em; }
      .article-body h3 { font-size: 1.05rem; margin: 1.6em 0 0.45em; }
      .article-body ul, .article-body ol { margin-left: 1em; }
    }

    /* ── CALLOUT BOX ────────────────────────────────────────────── */
    .callout {
      border-radius: var(--radius-lg);
      padding: 20px 24px;
      margin: 2em 0;
      display: flex; gap: 16px; align-items: flex-start;
    }
    .callout-info { background: #eff6ff; border-left: 4px solid var(--color-primary); }
    .callout-warn { background: #fffbeb; border-left: 4px solid #f59e0b; }
    .callout-tip  { background: #f0fdf4; border-left: 4px solid #16a34a; }
    .callout-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
    .callout-body { font-size: 0.93rem; color: var(--color-text); line-height: 1.6; }
    .callout-body strong { display: block; margin-bottom: 4px; }

    @media (max-width: 600px) {
      .callout { padding: 16px; gap: 12px; }
      .callout-icon { font-size: 1.2rem; }
    }

    /* ── HIGHLIGHT STAT ──────────────────────────────────────────── */
    .stat-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px; margin: 2em 0;
    }
    .stat-card {
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); padding: 16px;
      text-align: center; box-shadow: var(--shadow-sm);
    }
    .stat-num {
      font-family: var(--font-display); font-size: 1.7rem;
      font-weight: 800; color: var(--color-accent); line-height: 1;
      margin-bottom: 4px;
    }
    .stat-lbl { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.3; }

    @media (max-width: 500px) {
      .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .stat-card { padding: 12px; }
      .stat-num { font-size: 1.4rem; }
      .stat-lbl { font-size: 0.72rem; }
    }
    @media (max-width: 380px) {
      .stat-grid { grid-template-columns: 1fr; }
    }

    /* ── FAQ SECTION ──────────────────────────────────────────────── */
    .faq-list { margin: 1em 0; }
    .faq-item {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      margin-bottom: 8px; overflow: hidden;
    }
    .faq-q {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; cursor: pointer;
      font-weight: 600; font-size: 0.95rem; color: var(--color-text);
      gap: 12px; width: 100%; text-align: left;
    }
    .faq-q:hover { background: var(--color-bg); }
    .faq-q svg { flex-shrink: 0; transition: transform 0.2s; opacity: 0.5; }
    .faq-item.open .faq-q svg { transform: rotate(180deg); opacity: 1; }
    .faq-a {
      display: none; padding: 0 20px 16px;
      font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.7;
    }
    .faq-item.open .faq-a { display: block; }

    @media (max-width: 600px) {
      .faq-q { padding: 14px 16px; font-size: 0.9rem; min-height: 48px; }
      .faq-a { padding: 0 16px 14px; font-size: 0.88rem; }
    }

    /* ── CTA FINAL ──────────────────────────────────────────────── */
    .article-cta-final {
      background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
      color: #fff; border-radius: var(--radius-xl);
      padding: 32px; margin: 3em 0; text-align: center;
    }
    .article-cta-final h2 {
      font-family: var(--font-display); font-size: 1.5rem;
      font-weight: 700; margin-bottom: 12px; color: #fff;
      border: none; padding: 0;
    }
    .article-cta-final p {
      font-size: 1rem; opacity: 0.9; margin-bottom: 24px;
    }
    .cta-final-btns {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    }
    .cta-final-btns .btn {
      padding: 12px 24px; font-size: 1rem;
    }

    @media (max-width: 600px) {
      .article-cta-final { padding: 24px 16px; }
      .article-cta-final h2 { font-size: 1.25rem; }
      .article-cta-final p { font-size: 0.9rem; margin-bottom: 20px; }
      .cta-final-btns { flex-direction: column; width: 100%; }
      .cta-final-btns .btn { width: 100%; justify-content: center; }
    }

    /* ── AUTHOR BOX ──────────────────────────────────────────────── */
    .author-box {
      display: flex; gap: 16px; align-items: flex-start;
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-md); padding: 20px;
      margin-top: 2em;
    }
    .author-avatar {
      width: 50px; height: 50px; font-size: 1.8rem;
      display: flex; align-items: center; justify-content: center;
      background: #eff6ff; border-radius: var(--radius-full);
      flex-shrink: 0;
    }
    .author-name {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1rem; color: var(--color-text);
      margin-bottom: 4px;
    }
    .author-bio {
      font-size: 0.86rem; color: var(--color-text-muted);
      line-height: 1.6;
    }

    @media (max-width: 480px) {
      .author-box { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
      .author-avatar { margin-bottom: 12px; }
    }

    /* ── SIDEBAR ────────────────────────────────────────────────── */
    .article-sidebar {
      position: sticky; top: 90px;
      display: flex; flex-direction: column; gap: 20px;
    }

    .sidebar-cta {
      background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
      color: #fff; border-radius: var(--radius-xl); padding: 28px 24px;
      text-align: center;
    }
    .sidebar-cta-tag {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 10px;
    }
    .sidebar-cta h3 {
      font-family: var(--font-display); font-size: 1.2rem;
      font-weight: 700; margin-bottom: 8px; line-height: 1.25; color: #fff;
    }
    .sidebar-cta p {
      font-size: 0.85rem; opacity: 0.85; margin-bottom: 20px;
      line-height: 1.5;
    }
    .sidebar-cta .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
    .btn-wa-sidebar {
      background: var(--color-wa); color: #fff; border-color: var(--color-wa);
      border-radius: var(--radius-full); padding: 0.65rem 1rem; font-weight: 600;
      font-size: 0.88rem; display: flex; align-items: center;
      justify-content: center; gap: 8px; width: 100%;
      text-decoration: none; transition: background 0.2s;
    }
    .btn-wa-sidebar:hover { background: var(--color-wa-dark); }
    .sidebar-divider { font-size: 0.75rem; opacity: 0.5; margin: 2px 0; }

    .sidebar-toc {
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-xl); padding: 24px;
    }
    .sidebar-toc h4 {
      font-family: var(--font-display); font-size: 0.9rem;
      font-weight: 700; margin-bottom: 14px; color: var(--color-text);
    }
    .toc-list { display: flex; flex-direction: column; gap: 4px; }
    .toc-list a {
      font-size: 0.83rem; color: var(--color-text-muted);
      padding: 6px 10px; border-radius: var(--radius-sm);
      display: block; transition: all 0.15s;
      border-left: 2px solid transparent;
    }
    .toc-list a:hover {
      color: var(--color-primary); background: #eff6ff;
      border-left-color: var(--color-primary); text-decoration: none;
    }

    .sidebar-related {
      background: #fff; border: 1px solid var(--color-border);
      border-radius: var(--radius-xl); padding: 24px;
    }
    .sidebar-related h4 {
      font-family: var(--font-display); font-size: 0.9rem;
      font-weight: 700; margin-bottom: 14px; color: var(--color-text);
    }
    .related-link {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 0; border-bottom: 1px solid #f1f5f9;
      text-decoration: none;
    }
    .related-link:last-child { border-bottom: none; }
    .related-dot {
      width: 6px; height: 6px; background: var(--color-primary);
      border-radius: 50%; flex-shrink: 0; margin-top: 6px;
    }
    .related-title {
      font-size: 0.84rem; color: var(--color-text-muted);
      line-height: 1.5;
    }
    .related-link:hover .related-title { color: var(--color-primary); }

    @media (max-width: 900px) {
      .article-sidebar { position: static; }
      .sidebar-cta { padding: 20px 16px; }
      .sidebar-cta h3 { font-size: 1.1rem; }
      .sidebar-toc, .sidebar-related { padding: 20px 16px; }
    }
    @media (max-width: 500px) {
      .sidebar-cta { padding: 18px 14px; }
      .sidebar-cta h3 { font-size: 1rem; }
      .sidebar-cta p { font-size: 0.82rem; }
      .sidebar-toc, .sidebar-related { padding: 18px 14px; }
      .toc-list a { font-size: 0.8rem; padding: 8px 10px; }
      .related-title { font-size: 0.82rem; }
    }