/* ==========================================================================
   MECÁNICO A DOMICILIO - CHILE
   Sistema de estilos profesional con SEO visual y UX optimizada
   ========================================================================== */

/* ── Reset & Variables ───────────────────────────────────────────────────── */
:root {
  --primary: #1B5E20;
  --primary-light: #2E7D32;
  --primary-dark: #0D3B13;
  --accent: #FF6F00;
  --accent-light: #FFA040;
  --accent-dark: #C43E00;
  --dark: #1a1a2e;
  --dark-light: #16213e;
  --text: #2d2d2d;
  --text-light: #5a5a5a;
  --text-white: #ffffff;
  --bg: #f8f9fa;
  --bg-alt: #eef2f7;
  --card-bg: #ffffff;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --shadow-hover: 0 8px 30px rgba(27,94,32,0.2);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1200px;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

ul {
  list-style: none;
}

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

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  transition: var(--transition);
}

.header-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.logo a {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.logo a::before {
  content: "🔧";
  font-size: 1.6rem;
}

/* Desktop Nav */
.nav-desktop {
  display: flex;
}

.nav-menu-desktop {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-menu-desktop li a {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text);
  position: relative;
  padding: 0.5rem 0;
}

.nav-menu-desktop li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: var(--transition);
}

.nav-menu-desktop li a:hover::after {
  width: 100%;
}

.nav-menu-desktop li a:hover {
  color: var(--primary);
}

.btn-agenda-desktop {
  background: var(--primary);
  color: var(--text-white);
  padding: 0.7rem 1.6rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(27,94,32,0.3);
}

.btn-agenda-desktop:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27,94,32,0.4);
}

/* Hamburger Icon */
.menu-icon {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.menu-icon-line {
  width: 28px;
  height: 3px;
  background: var(--text);
  border-radius: 3px;
  transition: var(--transition);
}

/* Mobile Nav */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  padding-top: 80px;
}

.nav-mobile.active {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.nav-menu-mobile {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.nav-menu-mobile li a {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  transition: var(--transition);
}

.nav-menu-mobile li a:hover {
  color: var(--primary);
}

/* ── HERO SECTION — APPLE STYLE ──────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000000;
  position: relative;
  overflow: hidden;
  padding: 120px 2rem 60px;
  gap: 0;
}

/* Subtle radial gradient behind everything */
.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 40%, rgba(27,94,32,0.12) 0%, rgba(255,111,0,0.04) 30%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Bottom fade into page bg */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
  z-index: 5;
}

/* ── Hero Text — Minimal, centered above video ── */
.hero-content {
  max-width: 800px;
  text-align: center;
  position: relative;
  z-index: 3;
  margin-bottom: 3rem;
}

/* Remove old floating gear pseudo element */
.hero-content::before {
  display: none;
}

.subheading {
  display: inline-block;
  background: rgba(255,111,0,0.1);
  color: var(--accent-light);
  padding: 0.4rem 1.4rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(255,111,0,0.15);
  box-shadow: none;
  transform: none;
  animation: none;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.08;
  margin-bottom: 1.2rem;
  letter-spacing: 0;
  text-shadow: none;
  transform: none;
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.55);
  max-width: 500px;
  margin: 0 auto 2rem;
  line-height: 1.7;
  font-weight: 400;
}

.buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Cinematic Video Showcase — The Star ── */
.hero-video-showcase {
  position: relative;
  width: 100%;
  max-width: 960px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Glowing ambient light behind the video */
.hero-video-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,111,0,0.10) 0%, rgba(27,94,32,0.06) 40%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

/* Video frame — rounded, elevated, premium */
.hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 20px 60px rgba(0,0,0,0.5),
    0 0 120px rgba(255,111,0,0.06);
  transform: perspective(1200px) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
}

.hero-video-frame:hover {
  transform: perspective(1200px) rotateX(0deg) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 160px rgba(255,111,0,0.08);
}

/* The video itself */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: brightness(0.95) contrast(1.05) saturate(1.15);
}

/* Subtle reflection/shine overlay */
.hero-video-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 30%),
    linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.3) 100%);
  border-radius: 20px;
}

.btn {
  padding: 1rem 2.2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
}

.btn.primary {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
  color: var(--text-white);
  box-shadow:
    0 4px 20px rgba(255,111,0,0.4),
    0 2px 0 var(--accent-dark),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateZ(10px);
}

.btn.primary:hover {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  transform: translateY(-3px) translateZ(15px);
  box-shadow:
    0 8px 30px rgba(255,111,0,0.5),
    0 4px 0 var(--accent-dark),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn.primary:active {
  transform: translateY(1px) translateZ(5px);
  box-shadow:
    0 2px 10px rgba(255,111,0,0.3),
    0 1px 0 var(--accent-dark);
}

.btn.secondary {
  background: rgba(255,255,255,0.1);
  color: var(--text-white);
  border: 2px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 0 rgba(255,255,255,0.1);
}

.btn.secondary:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-3px) translateZ(10px);
  box-shadow: 0 6px 20px rgba(255,255,255,0.1);
}

/* ── SERVICES SECTION — 3D ENGINE STYLE ──────────────────────────────────── */
.services {
  padding: 100px 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  perspective: 1200px;
  overflow: visible;
}

/* ── Floating 3D Engine Background ── */
.services::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 550px;
  height: 550px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231B5E20' stop-opacity='0.07'/%3E%3Cstop offset='100%25' stop-color='%23FF6F00' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Outer gear --%3E%3Cpath d='M200 40 L215 70 L240 55 L238 85 L268 80 L255 108 L282 115 L260 135 L280 155 L255 162 L268 188 L240 182 L242 212 L215 200 L210 230 L190 210 L180 238 L168 210 L150 228 L148 198 L122 208 L130 180 L102 182 L118 155 L92 148 L115 130 L95 112 L122 108 L112 82 L140 88 L142 58 L165 72 L172 42 L188 68 Z' fill='url(%23g1)' stroke='%231B5E20' stroke-width='1' stroke-opacity='0.06'/%3E%3C!-- Inner gear --%3E%3Ccircle cx='200' cy='140' r='55' fill='none' stroke='%231B5E20' stroke-width='2' stroke-opacity='0.06'/%3E%3Ccircle cx='200' cy='140' r='35' fill='none' stroke='%23FF6F00' stroke-width='1.5' stroke-opacity='0.06'/%3E%3Ccircle cx='200' cy='140' r='12' fill='%231B5E20' fill-opacity='0.04'/%3E%3C!-- Engine block --%3E%3Crect x='120' y='200' width='160' height='100' rx='12' fill='%231B5E20' fill-opacity='0.04' stroke='%231B5E20' stroke-width='1.5' stroke-opacity='0.06'/%3E%3C!-- Cylinders --%3E%3Crect x='140' y='175' width='28' height='35' rx='5' fill='%23FF6F00' fill-opacity='0.04' stroke='%23FF6F00' stroke-width='1' stroke-opacity='0.06'/%3E%3Crect x='186' y='175' width='28' height='35' rx='5' fill='%23FF6F00' fill-opacity='0.04' stroke='%23FF6F00' stroke-width='1' stroke-opacity='0.06'/%3E%3Crect x='232' y='175' width='28' height='35' rx='5' fill='%23FF6F00' fill-opacity='0.04' stroke='%23FF6F00' stroke-width='1' stroke-opacity='0.06'/%3E%3C!-- Piston rods --%3E%3Cline x1='154' y1='165' x2='154' y2='145' stroke='%231B5E20' stroke-width='2' stroke-opacity='0.05'/%3E%3Cline x1='200' y1='165' x2='200' y2='140' stroke='%231B5E20' stroke-width='2' stroke-opacity='0.05'/%3E%3Cline x1='246' y1='165' x2='246' y2='145' stroke='%231B5E20' stroke-width='2' stroke-opacity='0.05'/%3E%3C!-- Engine details --%3E%3Cline x1='130' y1='230' x2='270' y2='230' stroke='%231B5E20' stroke-width='1' stroke-opacity='0.05'/%3E%3Cline x1='130' y1='255' x2='270' y2='255' stroke='%231B5E20' stroke-width='1' stroke-opacity='0.05'/%3E%3Cline x1='130' y1='280' x2='270' y2='280' stroke='%231B5E20' stroke-width='1' stroke-opacity='0.05'/%3E%3C!-- Exhaust --%3E%3Cpath d='M280 240 Q310 235 330 248 Q350 260 340 275 Q330 265 310 262 Q290 258 280 260 Z' fill='%23FF6F00' fill-opacity='0.03' stroke='%23FF6F00' stroke-width='1' stroke-opacity='0.05'/%3E%3C!-- Bolts --%3E%3Ccircle cx='135' cy='215' r='4' fill='%231B5E20' fill-opacity='0.05'/%3E%3Ccircle cx='265' cy='215' r='4' fill='%231B5E20' fill-opacity='0.05'/%3E%3Ccircle cx='135' cy='290' r='4' fill='%231B5E20' fill-opacity='0.05'/%3E%3Ccircle cx='265' cy='290' r='4' fill='%231B5E20' fill-opacity='0.05'/%3E%3C!-- Fan belt --%3E%3Cellipse cx='90' cy='250' rx='35' ry='35' fill='none' stroke='%231B5E20' stroke-width='1.5' stroke-opacity='0.05' stroke-dasharray='8 4'/%3E%3Ccircle cx='90' cy='250' r='10' fill='%231B5E20' fill-opacity='0.03'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: floatEngine 8s ease-in-out infinite, rotateEngine 30s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  filter: blur(0.5px);
}

/* ── Second floating gear (smaller, offset) ── */
.services::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -5%;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 15 L110 40 L130 28 L125 55 L150 52 L138 75 L162 80 L142 95 L158 112 L135 115 L145 138 L122 132 L120 158 L105 142 L98 165 L88 142 L75 160 L72 135 L48 142 L58 118 L35 115 L55 98 L35 82 L58 78 L48 55 L72 60 L70 35 L88 50 L92 25 L105 48 Z' fill='%23FF6F00' fill-opacity='0.04' stroke='%23FF6F00' stroke-width='1' stroke-opacity='0.06'/%3E%3Ccircle cx='100' cy='95' r='28' fill='none' stroke='%23FF6F00' stroke-width='1.5' stroke-opacity='0.06'/%3E%3Ccircle cx='100' cy='95' r='10' fill='%23FF6F00' fill-opacity='0.03'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: floatGearSmall 6s ease-in-out infinite reverse, rotateEngine 20s linear infinite reverse;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

@keyframes floatEngine {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotateX(2deg) rotateY(-2deg); }
  25% { transform: translate(-50%, -50%) translateY(-20px) rotateX(-1deg) rotateY(3deg); }
  50% { transform: translate(-50%, -50%) translateY(-8px) rotateX(3deg) rotateY(-1deg); }
  75% { transform: translate(-50%, -50%) translateY(-25px) rotateX(-2deg) rotateY(2deg); }
}

@keyframes floatGearSmall {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(5deg); }
  66% { transform: translateY(-30px) rotate(-3deg); }
}

@keyframes rotateEngine {
  from { filter: blur(0.5px) hue-rotate(0deg); }
  to { filter: blur(0.5px) hue-rotate(360deg); }
}

.section-title {
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4rem;
  position: relative;
  letter-spacing: 0;
  z-index: 2;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--accent);
  margin: 1rem auto 0;
  border-radius: 2px;
}

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 2;
  perspective: 1000px;
}

/* ── 3D Service Cards ── */
.service-box {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.06),
    0 1px 3px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.6);
  transform-style: preserve-3d;
  transform: translateZ(0) rotateX(0) rotateY(0);
  will-change: transform, box-shadow;
}

/* 3D shine/glare overlay */
.service-box .service-content {
  position: relative;
  z-index: 2;
}

.service-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.3) 0%,
    rgba(255,255,255,0) 40%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.02) 100%
  );
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease;
  opacity: 0;
}

.service-box:hover::before {
  opacity: 1;
}

.service-box:hover {
  transform: translateZ(30px) rotateX(-3deg) rotateY(3deg) translateY(-12px);
  box-shadow:
    0 25px 60px rgba(27,94,32,0.15),
    0 10px 25px rgba(0,0,0,0.08),
    0 0 0 1px rgba(27,94,32,0.05),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(27,94,32,0.1);
}

/* Alternate card 3D tilt directions */
.service-box:nth-child(even):hover {
  transform: translateZ(30px) rotateX(-2deg) rotateY(-3deg) translateY(-12px);
}

.service-box:nth-child(3n):hover {
  transform: translateZ(35px) rotateX(2deg) rotateY(2deg) translateY(-14px);
}

/* 3D depth shadow under cards */
.service-box::after {
  position: absolute;
  bottom: -8px;
  left: 10%;
  right: 10%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(27,94,32,0.08) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.4s ease;
  opacity: 0;
}

.service-box:hover::after {
  opacity: 1;
  bottom: -14px;
}

.service-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 0.8rem;
}

.service-content p {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.8;
}

/* ── 3D Service icons with depth ── */
.service-1 .service-content::before,
.service-2 .service-content::before,
.service-3 .service-content::before,
.service-4 .service-content::before,
.service-5 .service-content::before,
.service-6 .service-content::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  position: relative;
  transform: translateZ(20px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.04),
    inset 0 -2px 4px rgba(0,0,0,0.05),
    inset 0 2px 4px rgba(255,255,255,0.8);
  transition: all 0.4s ease;
}

.service-box:hover .service-content::before {
  transform: translateZ(40px) scale(1.1);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.06),
    inset 0 -2px 4px rgba(0,0,0,0.05),
    inset 0 2px 4px rgba(255,255,255,0.8);
}

.service-1 .service-content::before {
  content: "🔍";
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.service-2 .service-content::before {
  content: "🚗";
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
}
.service-3 .service-content::before {
  content: "🔧";
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}
.service-4 .service-content::before {
  content: "🛡️";
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
}
.service-5 .service-content::before {
  content: "🚨";
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
}
.service-6 .service-content::before {
  content: "💻";
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
}

/* Remove old ::after emoji icons */
.service-1::after,
.service-2::after,
.service-3::after,
.service-4::after,
.service-5::after,
.service-6::after {
  content: none;
}

/* ── Floating mechanical particles ── */
.services-container::before,
.services-container::after {
  content: '⚙';
  position: absolute;
  font-size: 2rem;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.services-container::before {
  top: -20px;
  left: -30px;
  animation: floatGearSmall 7s ease-in-out infinite;
  font-size: 3rem;
}

.services-container::after {
  bottom: -30px;
  right: -20px;
  animation: floatGearSmall 5s ease-in-out infinite reverse;
  font-size: 2.2rem;
}

/* ── EXPERTS / WHY CHOOSE US SECTION ─────────────────────────────────────── */
.experts {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
  padding: 100px 2rem;
  color: var(--text-white);
}

.experts-content {
  max-width: var(--max-width);
  margin: 0 auto 4rem;
  text-align: center;
}

.experts-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.experts-title strong {
  color: var(--accent-light);
}

.experts-description {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.experts-description li,
.experts-content li {
  font-size: 1rem;
  line-height: 1.8;
  padding: 0.8rem 0;
  padding-left: 2rem;
  position: relative;
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.experts-description li::before,
.experts-content li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
}

.experts-description li strong,
.experts-content li strong {
  color: var(--accent-light);
}

/* Stats */
.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.stat-box {
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
  transform: translateZ(0);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.stat-box:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-8px) translateZ(20px) rotateX(-3deg);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  border-color: rgba(255,111,0,0.2);
}

.stat-number {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.stat-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ── CTA SECTION ─────────────────────────────────────────────────────────── */
.cta-section {
  padding: 80px 2rem;
  background: var(--bg-alt);
}

.cta-container {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  background: var(--card-bg);
  padding: 4rem 3rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.cta-text {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2rem;
}

.cta-button {
  display: inline-block;
  background: var(--accent);
  color: var(--text-white);
  padding: 1rem 3rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  box-shadow: 0 4px 20px rgba(255,111,0,0.35);
  transition: var(--transition);
}

.cta-button:hover {
  background: var(--accent-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(255,111,0,0.4);
}

/* ── TABS SECTION ────────────────────────────────────────────────────────── */
.tabs-section {
  padding: 100px 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-us {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.tabs-menu {
  display: flex;
  background: var(--bg-alt);
  border-bottom: 2px solid rgba(0,0,0,0.04);
  overflow-x: auto;
}

.tab-button {
  flex: 1;
  padding: 1.2rem 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
  min-width: max-content;
}

.tab-button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--primary);
  transition: var(--transition);
  border-radius: 3px 3px 0 0;
}

.tab-button.active {
  color: var(--primary);
  background: rgba(27,94,32,0.04);
}

.tab-button.active::after {
  width: 60%;
}

.tab-button:hover {
  color: var(--primary);
  background: rgba(27,94,32,0.03);
}

.tabs-content {
  padding: 2.5rem;
}

.tab-content {
  display: none;
  animation: fadeIn 0.4s ease;
}

.tab-content.active {
  display: block;
}

.tab-content ul {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.tab-content ul li {
  padding: 1.2rem 1.5rem;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  border-left: 4px solid var(--primary);
  transition: var(--transition);
}

.tab-content ul li:hover {
  background: var(--bg-alt);
  transform: translateX(4px);
}

.tab-content ul li strong {
  color: var(--primary-dark);
  display: block;
  margin-bottom: 0.3rem;
}

/* ── LOCAL SEO CONTENT ───────────────────────────────────────────────────── */
.local-proof {
  padding: 80px 2rem 40px;
  background: var(--bg);
}

.local-proof-container,
.local-context-container,
.nearby-links-container,
.testimonials-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.local-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 3rem;
  align-items: center;
}

.local-kicker {
  display: inline-block;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.local-proof h2,
.local-context h2,
.nearby-links h2,
.testimonials-section h2 {
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.18;
  color: var(--text);
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.local-proof p,
.local-context p,
.nearby-links p,
.testimonials-section p {
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.75;
}

.local-proof-list,
.local-context-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.4rem;
}

.local-proof-list li,
.local-context-list li {
  background: var(--card-bg);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 1rem 1.15rem;
}

.local-proof-list strong,
.local-context-list strong {
  color: var(--primary-dark);
}

.local-proof-media {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.local-proof-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.local-context,
.nearby-links,
.testimonials-section {
  padding: 80px 2rem;
}

.local-context {
  background: var(--bg-alt);
}

.local-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}

.local-context-card,
.nearby-links-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.local-context-card h3,
.nearby-links-card h3 {
  color: var(--primary-dark);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0;
}

.nearby-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}

.nearby-links-card a {
  display: block;
  color: var(--primary);
  font-weight: 700;
  line-height: 1.45;
  padding: 0.35rem 0;
}

.nearby-links-card a:hover {
  color: var(--accent-dark);
  padding-left: 4px;
}

/* ── TESTIMONIALS CAROUSEL ──────────────────────────────────────────────── */
.testimonials-section {
  background: var(--bg);
  overflow: hidden;
}

.testimonials-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 2rem;
}

.testimonials-shell {
  position: relative;
  overflow: hidden;
}

.testimonials-track {
  display: block;
  transform: none !important;
}

.testimonial-card {
  display: none;
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  border: 1px solid rgba(27,94,32,0.08);
}

.testimonial-card.is-active {
  display: block;
  animation: fadeIn 0.25s ease;
}

.testimonial-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.testimonial-initials {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--text-white);
  font-weight: 800;
  letter-spacing: 0;
  flex: 0 0 auto;
}

.testimonial-card h3 {
  color: var(--text);
  font-size: 1rem;
  margin: 0;
}

.testimonial-card-head p {
  color: var(--text-light);
  font-size: 0.88rem;
  margin: 0;
}

.testimonial-rating {
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.testimonial-text {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
}

.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.4rem;
}

.testimonial-control {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: var(--text-white);
  font-size: 1.3rem;
  cursor: pointer;
  transition: var(--transition);
}

.testimonial-control:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
}

.testimonials-status {
  color: var(--text-light);
  font-size: 0.85rem;
  min-width: 48px;
  text-align: center;
}

/* ── CONTACT SECTION ─────────────────────────────────────────────────────── */
.contact {
  padding: 100px 2rem 60px;
  background: var(--bg-alt);
}

.contact-section {
  max-width: var(--max-width);
  margin: 0 auto;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.contact-info {
  padding: 3rem;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: var(--text-white);
  min-width: 0;
}

.contact-info h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 2rem;
}

.contact-info ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info ul li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-info ul li i {
  color: var(--accent-light) !important;
  font-size: 1.5rem !important;
  margin-top: 2px;
}

.contact-info ul li div strong {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  margin-bottom: 0.2rem;
}

.contact-info ul li div p {
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-map {
  min-height: 400px;
  min-width: 0;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── FLOATING BUTTONS ────────────────────────────────────────────────────── */
.contact-button {
  position: fixed;
  bottom: 120px;
  left: 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  text-decoration: none;
  z-index: 1000;
  transition: var(--transition);
}

.contact-button:hover {
  transform: scale(1.1);
}

#whatsapp-button {
  background: #25D366;
  animation: pulse-wsp 2s infinite;
}

#phone-button {
  background: var(--primary);
  bottom: 48px;
}

@keyframes pulse-wsp {
  0%, 100% { box-shadow: 0 4px 15px rgba(37,211,102,0.4); }
  50% { box-shadow: 0 4px 30px rgba(37,211,102,0.7); }
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff3b30;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid white;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.7);
  padding: 60px 2rem 0;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-column h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-white);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.8rem;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--accent);
}

.footer-menu li,
.footer-contact li,
.footer-payment li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}

.footer-menu li a:hover {
  color: var(--accent-light);
  padding-left: 4px;
}

.footer-menu li .dashicons,
.footer-contact li .dashicons,
.footer-payment li .dashicons {
  color: var(--accent);
  font-size: 0.9rem;
}

.footer-credits {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

/* ── HERRAMIENTAS SECTION (Internal Tools) ────────────────────────────────── */
#herramientas {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: 800px;
  padding: 20px;
}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Scroll animations */
.service-box,
.stat-box,
.tab-content ul li {
  animation: slideUp 0.6s ease forwards;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .services-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-desktop,
  .btn-agenda-desktop {
    display: none;
  }

  .menu-icon {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding: 100px 1.2rem 30px;
    gap: 0;
  }

  .hero-content {
    margin-bottom: 2rem;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    letter-spacing: 0;
  }

  .hero p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .hero-video-showcase {
    max-width: 100%;
  }

  .hero-video-frame {
    border-radius: 14px;
    transform: none;
  }

  .hero-video-frame:hover {
    transform: none;
  }

  .hero-video-reflection {
    border-radius: 14px;
  }

  .hero-video-glow {
    filter: blur(40px);
  }

  .services {
    padding: 60px 1.5rem;
    perspective: none;
  }

  .services::before {
    width: 300px;
    height: 300px;
    opacity: 0.5;
  }

  .services::after {
    width: 120px;
    height: 120px;
  }

  .services-container {
    grid-template-columns: 1fr;
    perspective: none;
  }

  .service-box {
    transform: none !important;
  }

  .service-box:hover {
    transform: translateY(-6px) !important;
  }

  .section-title {
    margin-bottom: 2.5rem;
    font-size: 1.5rem;
  }

  .service-box {
    padding: 2rem;
  }

  .experts {
    padding: 60px 1.5rem;
  }

  .stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stat-box {
    padding: 1.5rem 0.5rem;
  }

  .contact-container {
    grid-template-columns: 1fr;
  }

  .contact-info {
    padding: 2rem 1.5rem;
  }

  .contact-map {
    min-height: 300px;
  }

  .tabs-section {
    padding: 60px 1rem;
  }

  .tabs-menu {
    flex-direction: column;
  }

  .tab-button {
    text-align: left;
    padding: 1rem 1.5rem;
  }

  .tab-button::after {
    left: 0;
    transform: none;
    bottom: auto;
    top: 0;
    width: 3px !important;
    height: 100%;
    border-radius: 0 3px 3px 0;
  }

  .tabs-content {
    padding: 1.5rem;
  }

  .local-proof-grid,
  .local-context-grid,
  .nearby-links-grid {
    grid-template-columns: 1fr;
  }

  .local-proof,
  .local-context,
  .nearby-links,
  .testimonials-section {
    padding: 60px 1rem;
  }

  .testimonials-header {
    display: block;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cta-container {
    padding: 3rem 2rem;
  }

  .contact-button {
    position: fixed;
    display: flex;
    width: 52px;
    height: 52px;
    margin: 0;
    left: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .notification-badge {
    right: 0;
  }

  #phone-button {
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  #whatsapp-button {
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0.8rem 1.2rem;
  }

  .logo a {
    font-size: 1rem;
    gap: 6px;
  }

  .logo a::before {
    font-size: 1.25rem;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .hero p {
    font-size: 0.95rem;
  }

  .buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .stat-number {
    font-size: 1.8rem;
  }

  .hero-video-frame {
    border-radius: 12px;
  }

  .hero-video-reflection {
    border-radius: 12px;
  }
}

/* ── UTILITY CLASSES ─────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Selection Style */
::selection {
  background: var(--primary);
  color: var(--text-white);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .header, .contact-button, .cta-section, .footer {
    display: none;
  }

  .hero {
    min-height: auto;
    background: none;
    color: black;
    padding: 20px;
  }

  .hero h1, .hero p {
    color: black;
  }
}