/* ═══════════════════════════════════════════
   ESTHETICDM — Premium Landing Page
   Design System & Styles
   ═══════════════════════════════════════════ */

/* ── CSS Custom Properties (Lujo Cálido y Moderno) ── */
:root {
/* Colors — Infinite Luxury Canvas (Absolute Black) */
  --clr-bg-primary: #000000;   /* Negro puro absoluto */
  --clr-bg-secondary: #000000; /* Igual al primario para eliminar divisiones artificiales */
  --clr-bg-tertiary: #040404;
  --clr-bg-card: #0d0d0d;      /* Cristal ahumado sutilmente más claro */
  --clr-bg-card-hover: #141414;
  --clr-bg-elevated: #0f0f0f;

  --clr-accent: #c9a96e;
  --clr-accent-light: #dfc499;
  --clr-accent-dark: #a88b4a;
  --clr-accent-glow: rgba(201, 169, 110, 0.02); 
  --clr-accent-glow-strong: rgba(201, 169, 110, 0.06);

  --clr-text-primary: #fdfbf9;
  --clr-text-secondary: #a1a1aa;
  --clr-text-muted: #6b6a7a;
  --clr-text-accent: #c9a96e;

  /* Bordes ultra sutiles */
  --clr-border: rgba(255, 255, 255, 0.06);
  --clr-border-hover: rgba(201, 169, 110, 0.2);
  --clr-border-accent: rgba(201, 169, 110, 0.3);

  /* Glassmorphism mate */
  --clr-glass: rgba(13, 13, 13, 0.5);
  --clr-glass-strong: rgba(20, 20, 20, 0.7);
  --clr-glass-nav: rgba(0, 0, 0, 0.85);

  --clr-success: #34d399;
  --clr-whatsapp: #25d366;
  --clr-whatsapp-dark: #128c7e;
  --clr-star: #f5c518;

  /* Typography - Alta Costura / Lujo Actual */
  --ff-heading: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Inter', Arial, sans-serif;

  /* Fluid Typography Scaling */
  --fs-display: clamp(2.8rem, 5vw + 1rem, 5rem);
  --fs-h1: clamp(2.2rem, 4vw + 0.5rem, 4rem);
  --fs-h2: clamp(1.8rem, 3vw + 0.5rem, 3rem);
  --fs-h3: clamp(1.3rem, 2vw + 0.25rem, 2rem);
  --fs-h4: clamp(1.1rem, 1.5vw + 0.25rem, 1.4rem);
  --fs-body: clamp(0.95rem, 1vw + 0.1rem, 1.05rem);
  --fs-body-sm: clamp(0.85rem, 0.9vw + 0.1rem, 0.95rem);
  --fs-caption: clamp(0.75rem, 0.8vw, 0.85rem);
  --fs-overline: clamp(0.7rem, 0.75vw, 0.8rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --space-section: clamp(5rem, 10vw, 8rem);

  /* Layout */
  --max-width: 1280px;
  --max-width-narrow: 900px;

  /* Borders */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 4px 30px rgba(201, 169, 110, 0.12);
  --shadow-accent-strong: 0 8px 40px rgba(201, 169, 110, 0.25);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 600ms;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 100;
  --z-modal-bg: 900;
  --z-modal: 1000;
  --z-nav: 1100;
  --z-progress: 1200;
  --z-whatsapp: 1300;
}

/* Oferta prioritaria para tráfico de validación */
.hero__offer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 640px);
  margin: 0 0 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(81, 56, 58, 0.2);
  border-radius: 12px;
  background: rgba(252, 250, 247, 0.76);
  box-shadow: 0 14px 34px rgba(41, 33, 29, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero__offer-item {
  display: grid;
  gap: 0.18rem;
  padding: 0.9rem 1rem 0.75rem;
}

.hero__offer-item + .hero__offer-item {
  border-left: 1px solid rgba(81, 56, 58, 0.16);
}

.hero__offer-item strong {
  color: #29211d;
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.2;
}

.hero__offer-item span {
  color: #62564f;
  font-size: 0.78rem;
  line-height: 1.35;
}

.hero__offer > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.68rem 1rem;
  border-top: 1px solid rgba(81, 56, 58, 0.13);
  color: #62564f;
  font-size: 0.72rem;
  line-height: 1.45;
}

.appointment-offer-summary {
  display: grid;
  gap: 0.2rem;
  margin: -0.55rem 0 1.3rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--clr-accent);
  background: rgba(81, 56, 58, 0.07);
  color: var(--clr-text-primary);
}

.appointment-offer-summary span,
.appointment__terms {
  color: var(--clr-text-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
}

.appointment__terms {
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .hero__offer {
    margin-bottom: 1rem;
    border-radius: 10px;
  }

  .hero__offer-item {
    padding: 0.7rem 0.72rem 0.6rem;
  }

  .hero__offer-item strong {
    font-size: 0.9rem;
  }

  .hero__offer-item span,
  .hero__offer > p {
    font-size: 0.66rem;
  }

  .hero__offer > p {
    padding: 0.55rem 0.72rem;
  }

  .metrics .metric:first-child .metric__number {
    font-size: clamp(1.25rem, 6vw, 1.65rem);
  }
}

/* Los modales deben quedar por encima de navegación, cookies y WhatsApp. */
.modal-overlay {
  z-index: 2000;
}

.modal {
  z-index: 2010;
}

body.modal-open .whatsapp-float,
body.modal-open .cookie-consent {
  opacity: 0;
  pointer-events: none;
}

body.cookie-consent-open .whatsapp-float {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .cookie-consent {
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: max(0.5rem, env(safe-area-inset-left));
    width: auto;
    transform: none;
  }
}

body.cookie-consent-open .whatsapp-float {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .cookie-consent {
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: max(0.5rem, env(safe-area-inset-left));
    width: auto;
    transform: none;
  }
}

/* ============================================================
   LIGHT-SURFACE CONTRAST FIX
   Removes dark legacy islands from testimonials, reviews and form.
   ============================================================ */

.spotlight-container {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  box-shadow: 0 18px 42px rgba(41, 33, 29, 0.1), inset 0 1px rgba(255, 255, 255, 0.72);
}

.spotlight-glow {
  background: radial-gradient(circle, rgba(81, 56, 58, 0.055) 0%, transparent 64%);
}

.spotlight-quote-mark { color: var(--clr-accent); opacity: 0.12; }
.spotlight-text { color: var(--clr-text-primary); }
.spotlight-name { color: var(--clr-accent); }
.spotlight-meta { color: var(--clr-text-secondary); letter-spacing: 0.02em; }

.spotlight-avatar {
  background: var(--clr-bg-primary);
  border-color: var(--clr-border);
  color: var(--clr-text-secondary);
  box-shadow: none;
}

.spotlight-avatar.active {
  color: #fcfaf7;
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  box-shadow: 0 8px 20px rgba(81, 56, 58, 0.18);
}

.reviews-seal {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  box-shadow: 0 12px 32px rgba(41, 33, 29, 0.09), inset 0 1px rgba(255, 255, 255, 0.72);
}

.reviews-seal__glow {
  background: radial-gradient(circle at 50% 50%, rgba(81, 56, 58, 0.07), transparent 70%);
}

.reviews-seal:hover {
  border-color: var(--clr-border-hover);
  box-shadow: 0 18px 38px rgba(41, 33, 29, 0.13), inset 0 1px rgba(255, 255, 255, 0.78);
}

.reviews-seal__logo { filter: none; }
.reviews-seal__score { color: var(--clr-text-primary); }
.reviews-seal__text { color: var(--clr-text-secondary); }
.reviews-seal__action { color: var(--clr-accent); }

.appointment { background: var(--clr-bg-primary); }

.appointment__shell {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  box-shadow: 0 18px 42px rgba(41, 33, 29, 0.1), inset 0 1px rgba(255, 255, 255, 0.72);
}

.appointment-form__tab span {
  background: var(--clr-bg-primary);
  border-color: var(--clr-border);
  color: var(--clr-text-secondary);
}

.appointment-form__tab input:checked + span {
  background: rgba(81, 56, 58, 0.09);
  border-color: rgba(81, 56, 58, 0.42);
  color: var(--clr-accent-dark);
  box-shadow: inset 0 0 0 1px rgba(81, 56, 58, 0.04);
}

.appointment-form__tab input:checked + span small { color: var(--clr-accent); }

.appointment-form input,
.appointment-form select {
  background: #fffdf9;
  border-color: var(--clr-border);
  color: var(--clr-text-primary);
}

.appointment-form input::placeholder {
  color: var(--clr-text-muted);
  opacity: 1;
}

.appointment-form input:focus,
.appointment-form select:focus {
  background: #fffdf9;
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(81, 56, 58, 0.1);
}

.appointment-form select option {
  color: var(--clr-text-primary);
  background: #fffdf9;
}

@media (max-width: 768px) {
  .spotlight-container,
  .reviews-seal,
  .appointment__shell {
    box-shadow: 0 12px 28px rgba(41, 33, 29, 0.09);
  }

  .spotlight-text { font-size: 1.08rem; line-height: 1.65; }

  .spotlight-meta,
  .reviews-seal__text,
  .appointment__intro > p,
  .appointment__trust {
    color: #62564f;
  }
}

/* ── Truco del Borde de Cristal (Volumen 3D para Móviles) ── */
.service-card, 
.testimonial-card, 
.credential, 
.faq__item, 
.location__detail,
.modal,
.timeline__content {
  /* La magia está aquí: una línea blanca al 6% de opacidad por dentro arriba, y sombra negra por fuera */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Truco del Borde de Cristal (Volumen 3D para Móviles) ── */
.service-card, 
.testimonial-card, 
.credential, 
.faq__item, 
.location__detail,
.modal,
.timeline__content {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background-color: var(--clr-bg-card) !important;
}

/* ── DETALLES EDITORIALES PREMIUM DE TESTIMONIOS ── */
.testimonial-card {
  position: relative; /* Necesario para contener la comilla absoluta */
  overflow: hidden;
}

/* La comilla gigante como marca de agua en el fondo */
.testimonial-card__quote {
  position: absolute;
  top: -15px;
  right: 15px;
  font-family: var(--ff-heading);
  font-size: 8rem;
  color: var(--clr-accent);
  opacity: 0.05; /* Hiper sutil para no estorbar la lectura */
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

/* Flexbox para alinear el avatar con los textos del autor */
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto; /* Empuja el autor siempre al fondo de la tarjeta */
  position: relative;
  z-index: 1;
}

/* El círculo del avatar estilo "Medalla de Oro" */
.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-bg-primary); /* Fondo negro absoluto */
  border: 1px solid var(--clr-border-accent); /* Borde dorado translúcido */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--clr-accent);
  box-shadow: var(--shadow-accent);
}

/* Alineación de la información del autor */
.testimonial-card__info {
  display: flex;
  flex-direction: column;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--clr-text-primary);
  background-color: var(--clr-bg-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--clr-text-primary);
}

p {
  text-wrap: pretty;
}

/* ── Utility Classes ── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

.section-padding {
  padding-block: var(--space-section);
}

.text-accent {
  color: var(--clr-accent);
}

.text-gradient {
/* Oro Cepillado Moderno sin cursivas para máxima elegancia y legibilidad */
  background: linear-gradient(135deg, #fcebce 0%, var(--clr-accent) 50%, var(--clr-accent-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
  font-style: normal; /* Aseguramos que sea recta, no cursiva */
}

/* Suave resplandor base para toda la página para quitar la sensación de vacío negro */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201, 169, 110, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.overline {
  font-family: var(--ff-body);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.overline::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--clr-accent);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section-header h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-sm);
}

.section-header p {
  font-size: var(--fs-body);
  color: var(--clr-text-secondary);
  max-width: 600px;
  margin-inline: auto;
}

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-accent-dark), var(--clr-accent), var(--clr-accent-light));
  z-index: var(--z-progress);
  transition: width 50ms linear;
  box-shadow: 0 0 10px var(--clr-accent-glow-strong);
}

/* ═══════════════════════════════════════════
   01. NAVBAR
   ═══════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  padding: 1rem 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), background var(--duration-normal) var(--ease-out), padding var(--duration-normal) var(--ease-out), border var(--duration-normal) var(--ease-out);
}

.navbar.scrolled {
  padding: 0.6rem 0;
  background: var(--clr-glass-nav);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--clr-border);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clr-text-primary);
  z-index: 10;
}

.navbar__logo-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--clr-bg-primary);
}

.navbar__logo span {
  color: var(--clr-accent);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar__link {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--clr-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--clr-accent);
  transition: width var(--duration-normal) var(--ease-out);
}

.navbar__link:hover,
.navbar__link.active {
  color: var(--clr-text-primary);
}

.navbar__link:hover::after,
.navbar__link.active::after {
  width: 100%;
}

.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
  color: var(--clr-bg-primary);
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-accent);
}

.navbar__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-strong);
}

/* Mobile Menu Toggle */
.navbar__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* Optimización táctil: Área mínima de 48px */
  width: 48px;
  height: 48px;
  z-index: 10;
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.navbar__toggle:active {
  background: var(--clr-glass);
}

.navbar__toggle span {
  /* El ícono se mantiene elegante (28px) dentro del área táctil de 48px */
  width: 28px;
  height: 2px;
  background: var(--clr-text-primary);
  border-radius: 2px;
  transition: all var(--duration-normal) var(--ease-out);
  transform-origin: center;
}

.navbar__toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar__toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.navbar__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: calc(var(--z-nav) + 1);

  /* Dropdown panel */
  background: rgba(10, 10, 16, 0.88);
  border-top: 1px solid var(--clr-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);

  /* Container alignment */
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.25rem;

  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);

  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.25rem;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.99);
  transform-origin: top center;

  transition:
    opacity 350ms var(--ease-out),
    transform 350ms var(--ease-out),
    visibility 350ms var(--ease-out);
  visibility: hidden;
}

.navbar__mobile-menu.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
  visibility: visible;
}

/* state handled above */

.navbar__mobile-menu .navbar__link {
  min-height: 48px;
  display: flex;
  align-items: center;

  padding: 0.85rem 0.75rem;
  border-radius: var(--radius-md);

  font-size: 1.15rem;
  font-family: var(--ff-heading);
  font-weight: 600;
  color: var(--clr-text-primary);

  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.navbar__mobile-menu .navbar__link:hover {
  background: rgba(201, 169, 110, 0.08);
  border-color: var(--clr-border-accent);
  transform: translateY(-1px);
}

.navbar__mobile-menu .navbar__link:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.55);
  outline-offset: 2px;
}

.navbar__mobile-menu .navbar__cta {
  margin-top: 0.75rem;
  font-size: 1.1rem;
  padding: 0.95rem 1.25rem;
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-accent);
  min-height: 48px;
}

/* Premium overlay behind dropdown when open */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-out);
  z-index: -1;
}

.navbar.open-mobile-menu::before {
  opacity: 1;
  pointer-events: all;
}

/* ═══════════════════════════════════════════
   02. HERO SECTION
   ═══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(180deg, 
      rgba(6, 6, 11, 0.4) 0%,
      rgba(6, 6, 11, 0.55) 40%,
      rgba(6, 6, 11, 0.85) 80%,
      rgba(6, 6, 11, 1) 100%
    );
  z-index: 1;
}

.hero__video {
  object-position: 76% 30%;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  padding: 0 1.5rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.2rem;
  background: var(--clr-glass-strong);
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--clr-accent);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.hero__title-highlight {
  background: linear-gradient(135deg, var(--clr-accent-light), var(--clr-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--clr-text-secondary);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2rem;
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
  color: var(--clr-bg-primary);
  box-shadow: var(--shadow-accent);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-accent-strong);
}

.btn--secondary {
  background: var(--clr-glass-strong);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-hover);
  backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background: var(--clr-glass);
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  transform: translateY(-3px);
}

.btn--whatsapp {
  background: linear-gradient(135deg, var(--clr-whatsapp), var(--clr-whatsapp-dark));
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.25);
}

.btn--whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.35);
}

.btn--large {
  padding: 1rem 2.5rem;
  font-size: var(--fs-body);
}

.btn__icon {
  font-size: 1.1em;
}

/* Hero floating elements */
.hero__floating {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clr-accent-glow), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.hero__floating--1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: -5%;
  animation: float-1 8s ease-in-out infinite;
}

.hero__floating--2 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  left: -3%;
  animation: float-2 10s ease-in-out infinite;
}

.hero__floating--3 {
  width: 150px;
  height: 150px;
  top: 30%;
  left: 15%;
  animation: float-3 12s ease-in-out infinite;
}

@keyframes float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(-20px, 30px) scale(1.1); opacity: 0.5; }
}

@keyframes float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
  50% { transform: translate(25px, -20px) scale(1.15); opacity: 0.4; }
}

@keyframes float-3 {
  0%, 100% { transform: translate(0, 0) scale(0.8); opacity: 0.15; }
  50% { transform: translate(-15px, 25px) scale(1); opacity: 0.3; }
}

.hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-text-muted);
  font-size: var(--fs-caption);
  animation: bounce-scroll 2s ease-in-out infinite;
}

.hero__scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid var(--clr-text-muted);
  border-radius: 12px;
  position: relative;
}

.hero__scroll-mouse::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: var(--clr-accent);
  border-radius: 2px;
  animation: scroll-wheel 2s ease-in-out infinite;
}

@keyframes scroll-wheel {
  0% { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(12px); opacity: 0; }
}

@keyframes bounce-scroll {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════
   03. TRUST METRICS
   ═══════════════════════════════════════════ */
.metrics {
  position: relative;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-bg-secondary);
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.metric {
  text-align: center;
  padding: var(--space-md);
  position: relative;
}

@media (min-width: 601px) {
  .metric:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--clr-border);
  }
}

@media (max-width: 600px) {
  .metrics__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .metric:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: var(--clr-border);
  }
}

/* ── ACCESIBILIDAD Y CONSENTIMIENTO ── */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 9999;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--clr-accent);
  color: #080808;
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform var(--duration-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, select, [role="slider"]):focus-visible {
  outline: 2px solid var(--clr-accent-light);
  outline-offset: 3px;
}

.compare-slider__handle[role="slider"] {
  cursor: ew-resize;
}

.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: calc(var(--z-whatsapp) + 10);
  width: min(94vw, 920px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--radius-lg);
  background: rgba(10, 10, 10, 0.97);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__copy strong {
  color: var(--clr-text-primary);
}

.cookie-consent__copy p {
  margin: 0.25rem 0 0.35rem;
  color: var(--clr-text-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
}

.cookie-consent__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--clr-accent-light);
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-consent__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.65rem;
}

.cookie-consent__actions .btn {
  min-height: 42px;
  padding: 0.7rem 1.1rem;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .cookie-consent {
    bottom: 0.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-consent__actions .btn {
    justify-content: center;
  }
}

.metric__number {
  font-family: var(--ff-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--clr-accent);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.metric__label {
  font-size: var(--fs-body-sm);
  color: var(--clr-text-secondary);
  font-weight: 500;
}

.metric__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════
   04. MEDICAL AUTHORITY
   ═══════════════════════════════════════════ */
.authority {
  position: relative;
  overflow: hidden;
}

.authority__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}

.authority__image-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
}

.authority__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.authority__image-wrapper:hover .authority__image {
  transform: scale(1.03);
}

.authority__image-border {
  position: absolute;
  inset: 0;
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.authority__image-glow {
  position: absolute;
  bottom: -20%;
  left: -20%;
  width: 140%;
  height: 50%;
  background: radial-gradient(ellipse, var(--clr-accent-glow) 0%, transparent 70%);
  pointer-events: none;
}

/* ── PERFIL EDITORIAL ULTRA MINIMALISTA (Respiro Visual) ── */
.authority__content {
  position: relative;
  /* Eliminamos fondos pesados y cajas para dejar respirar el contenido */
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Espaciado matemático perfecto entre elementos */
}

/* Ajuste del nombre para máxima elegancia */
.authority__name {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.1;
  color: var(--clr-text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

/* La especialidad: Transformada de una 'etiqueta' pesada a un detalle tipográfico refinado */
.authority__specialty {
  font-size: var(--fs-body);
  color: var(--clr-accent); /* Tono dorado/turquesa de tu marca */
  font-weight: 500;
  line-height: 1.6;
  padding-left: 1.25rem;
  border-left: 2px solid var(--clr-accent-dark);
  margin-bottom: 1rem;
}

/* Bio limpia y legible */
.authority__bio {
  font-size: var(--fs-body);
  color: var(--clr-text-secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* ── OPTIMIZACIÓN MÓVIL EXTREMA (Cero amontonamiento) ── */
@media (max-width: 768px) {
  .authority__content {
    /* Quitamos el solapamiento que causaba ruido visual */
    margin-top: 0; 
    padding: 2.5rem 0 1rem 0; /* Damos aire entre la foto y el texto */
    background: transparent;
    backdrop-filter: none;
  }
  
  .authority__specialty {
    font-size: var(--fs-body-sm); /* Un toque más pequeño en celular para que fluya mejor */
    padding-left: 1rem;
  }
}
/* ── SELLOS DE AUTORIDAD MÉDICA (Premium UI) ── */
.credential {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.8), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--clr-accent); /* Detalle de documento certificado */
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.5);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Brillo sutil de fondo para darle volumen al recuadro */
.credential::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 0% 50%, rgba(201, 169, 110, 0.08), transparent 60%);
  pointer-events: none;
}

.credential:hover {
  background: rgba(20, 20, 20, 0.95);
  border-color: rgba(201, 169, 110, 0.3);
  transform: translateX(4px);
}

.credential__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%; /* Circular para dar aspecto de sello o medalla */
  background: var(--clr-bg-primary);
  border: 1px solid var(--clr-accent);
  box-shadow: 0 4px 15px rgba(201, 169, 110, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent);
  flex-shrink: 0;
  z-index: 1;
}

.credential__info {
  z-index: 1;
}

.credential__info h4 {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.2rem;
}

/* Estilo tipo número de serie / folio grabado */
.credential__info p {
  font-size: var(--fs-caption);
  color: var(--clr-accent-light); 
  font-family: var(--ff-body);
  letter-spacing: 0.12em; 
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   05. SERVICES
   ═══════════════════════════════════════════ */
.services {
  position: relative;
  overflow: hidden;
  background: var(--clr-bg-secondary);
}

.services__carousel-wrapper {
  position: relative;
  margin-top: var(--space-lg);
}

.services__carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-sm) clamp(1.25rem, 4vw, 2.5rem);
  cursor: grab;
}

.services__carousel:active {
  cursor: grabbing;
}

.services__carousel::-webkit-scrollbar {
  display: none;
}

.service-card {
  min-width: 320px;
  max-width: 380px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.service-card:hover {
  border-color: var(--clr-border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent);
}

.service-card__image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.service-card:hover .service-card__image {
  transform: scale(1.05);
}

.service-card__image-wrapper {
  overflow: hidden;
  position: relative;
}

.service-card__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--clr-bg-card) 100%);
}

.service-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.service-card__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-card__desc {
  font-size: var(--fs-body-sm);
  color: var(--clr-text-secondary);
  margin-bottom: 1.25rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--clr-accent);
  transition: all var(--duration-fast) var(--ease-out);
}

.service-card__btn:hover {
  gap: 0.75rem;
}

.service-card__btn svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.service-card__btn:hover svg {
  transform: translateX(3px);
}

/* Carousel navigation arrows */
.services__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.services__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clr-glass-strong);
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-out);
  color: var(--clr-text-secondary);
}

.services__nav-btn:hover {
  background: var(--clr-accent-glow);
  border-color: var(--clr-border-accent);
  color: var(--clr-accent);
}


/* ═══════════════════════════════════════════
   06. SERVICE MODAL
   ═══════════════════════════════════════════ */

   /* Estados obligatorios de Accesibilidad (A11y) */
.modal__close:focus-visible,
.services__nav-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

/* Efecto de microinteracción al presionar */
.modal__close:active,
.services__nav-btn:active,
.btn:active {
  transform: scale(0.94);
  transition: transform 50ms var(--ease-out);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-modal-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: var(--z-modal);
  width: min(90vw, 600px);
  max-height: 85vh;
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: all var(--duration-normal) var(--ease-out);
  scrollbar-width: thin;
  scrollbar-color: var(--clr-border) transparent;
}

.modal.active {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.modal__close {
  position: sticky;
  top: 1rem;
  float: right;
  margin: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-glass-strong);
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 2;
  transition: all var(--duration-fast) var(--ease-out);
}

.modal__close:hover {
  background: var(--clr-accent-glow);
  border-color: var(--clr-border-accent);
  color: var(--clr-accent);
}

.modal__image {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.modal__body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.modal__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
}

.modal__desc {
  color: var(--clr-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.8;
}

.modal__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.modal__detail {
  padding: 1rem;
  background: var(--clr-glass);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}

.modal__detail-label {
  font-size: var(--fs-caption);
  color: var(--clr-text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.modal__detail-value {
  font-size: var(--fs-body-sm);
  font-weight: 500;
}

.modal__benefits {
  margin-bottom: var(--space-lg);
}

.modal__benefits h4 {
  font-size: var(--fs-body);
  margin-bottom: var(--space-sm);
  color: var(--clr-accent);
}

.modal__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: var(--fs-body-sm);
  color: var(--clr-text-secondary);
}

.modal__benefits li::before {
  content: '✓';
  color: var(--clr-accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   07. PATIENT EXPERIENCE / TIMELINE
   ═══════════════════════════════════════════ */
.experience {
  position: relative;
  overflow: hidden;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  padding: var(--space-lg) 0;
}

.timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--clr-accent), transparent);
  transform: translateX(-50%);
}

.timeline__item {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-xl);
  position: relative;
}

.timeline__item:nth-child(odd) {
  flex-direction: row;
}

.timeline__item:nth-child(even) {
  flex-direction: row-reverse;
}

.timeline__content {
  width: calc(50% - 40px);
  padding: var(--space-md);
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

.timeline__content:hover {
  border-color: var(--clr-border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.timeline__marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clr-bg-card);
  border: 2px solid var(--clr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--clr-accent);
  z-index: 2;
  box-shadow: 0 0 20px var(--clr-accent-glow);
}

.timeline__step-label {
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-accent);
  margin-bottom: 0.25rem;
}

.timeline__title {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.timeline__desc {
  font-size: var(--fs-body-sm);
  color: var(--clr-text-secondary);
  line-height: 1.7;
}



/* ═══════════════════════════════════════════
   09. BEFORE / AFTER
   ═══════════════════════════════════════════ */
.results {
  position: relative;
  overflow: hidden;
}

.compare-slider {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  aspect-ratio: 16/10;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.compare-slider__before,
.compare-slider__after {
  position: absolute;
  inset: 0;
}

.compare-slider__before img,
.compare-slider__after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-slider__before {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
}

.compare-slider__label {
  position: absolute;
  bottom: 1rem;
  padding: 0.35rem 1rem;
  background: rgba(6, 6, 11, 0.75);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 5;
}

.compare-slider__before .compare-slider__label {
  left: 1rem;
  color: var(--clr-text-secondary);
}

.compare-slider__after .compare-slider__label {
  right: 1rem;
  color: var(--clr-accent);
}

.compare-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--clr-accent);
  z-index: 4;
  transform: translateX(-50%);
  cursor: ew-resize;
  box-shadow: 0 0 12px var(--clr-accent-glow-strong);
}

.compare-slider__handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-accent);
  border: 3px solid var(--clr-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-bg-primary);
  font-weight: 700;
  box-shadow: var(--shadow-accent-strong);
  cursor: ew-resize;
}

.compare-slider__handle-btn svg {
  width: 20px;
  height: 20px;
}

/* ═══════════════════════════════════════════
   10. CINEMATIC SPOTLIGHT TESTIMONIALS
   ═══════════════════════════════════════════ */
.testimonials-premium {
  background: var(--clr-bg-primary); /* Fondo oscuro limpio */
  position: relative;
  overflow: hidden;
}

.spotlight-container {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: 4rem 2rem;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.4), rgba(5, 5, 5, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  text-align: center;
  z-index: 2;
}

.spotlight-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Track Contenedor para evitar saltos en el celular */
.spotlight-track {
  position: relative;
  min-height: 320px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animación de entrada de los slides */
.spotlight-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-slide.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: all;
}

.spotlight-quote-mark {
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--clr-accent);
  opacity: 0.15;
  line-height: 0;
  margin-bottom: 2rem;
}

.spotlight-stars {
  color: var(--clr-star);
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 1.5rem;
}

.spotlight-text {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--clr-text-primary);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.spotlight-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--clr-accent);
}

.spotlight-meta {
  font-size: var(--fs-caption);
  color: var(--clr-text-secondary);
  letter-spacing: 0.05em;
}

/* Barra de Avatares / Navegación */
.spotlight-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.spotlight-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clr-bg-primary);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-secondary);
  font-family: var(--ff-heading);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.spotlight-avatar:hover {
  border-color: var(--clr-accent);
  color: var(--clr-text-primary);
  transform: translateY(-3px);
}

.spotlight-avatar.active {
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
  border-color: var(--clr-accent-light);
  color: var(--clr-bg-primary);
  transform: scale(1.15);
  box-shadow: 0 8px 20px rgba(201, 169, 110, 0.25);
}

/* ── OPTIMIZACIÓN MÓVIL ── */
@media (max-width: 768px) {
  .spotlight-container {
    padding: 2.5rem 1rem;
  }
  .spotlight-track {
    min-height: 380px; /* Previene que la caja brinque cuando hay textos largos */
  }
  .spotlight-text {
    font-size: 1.1rem;
  }
  .spotlight-avatar {
    width: 44px; /* Área táctil segura */
    height: 44px;
  }
}

/* ═══════════════════════════════════════════
   11. GOOGLE REVIEWS (SELLO DE AUTORIDAD)
   ═══════════════════════════════════════════ */
.google-reviews {
  position: relative;
  padding-bottom: 4rem; /* Menos espacio vertical para que sea una transición natural desde testimonios */
}

.reviews-seal {
  display: block;
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-decoration: none;
  border-radius: 100px; /* Forma de píldora horizontal estilo Apple */
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.8), rgba(5, 5, 5, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: all 0.4s var(--ease-out);
  cursor: pointer;
}

.reviews-seal__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201, 169, 110, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.reviews-seal:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.4);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(201, 169, 110, 0.15);
}

.reviews-seal:hover .reviews-seal__glow {
  opacity: 1;
}

.reviews-seal__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
}

.reviews-seal__left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.reviews-seal__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.reviews-seal__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.reviews-seal__rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.1rem;
}

.reviews-seal__score {
  font-family: var(--ff-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  line-height: 1;
}

.reviews-seal__stars {
  color: var(--clr-star);
  font-size: 1.2rem;
  letter-spacing: 2px;
  line-height: 1;
}

.reviews-seal__text {
  font-size: var(--fs-body-sm);
  color: var(--clr-text-secondary);
  font-weight: 500;
  margin: 0;
}

.reviews-seal__action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-heading);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--clr-accent);
  transition: gap 0.3s ease;
  white-space: nowrap;
}

.reviews-seal:hover .reviews-seal__action {
  gap: 0.85rem;
}

/* ── OPTIMIZACIÓN MÓVIL ── */
@media (max-width: 768px) {
  .google-reviews {
    padding-bottom: 3rem;
  }
  .reviews-seal {
    border-radius: var(--radius-xl); /* Regresamos a tarjeta redondeada en móvil para que encaje mejor */
  }
  .reviews-seal__content {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  .reviews-seal__left {
    flex-direction: column;
    gap: 1rem;
  }
  .reviews-seal__info {
    align-items: center;
  }
}

/* ═══════════════════════════════════════════
   12. FAQ
   ═══════════════════════════════════════════ */
.faq {
  background: var(--clr-bg-secondary);
  position: relative;
}

.faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq__item {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out);
}

.faq__item.active {
  border-color: var(--clr-border-accent);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--ff-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--clr-text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.faq__item.active .faq__question {
  color: var(--clr-accent);
}

.faq__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--clr-glass-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-normal) var(--ease-out);
  font-size: 0.9rem;
}

.faq__item.active .faq__icon {
  background: var(--clr-accent-glow);
  transform: rotate(180deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out),
              padding var(--duration-slow) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
  opacity: 0;
}

.faq__item.active .faq__answer {
  opacity: 1;
}

.faq__answer-inner {
  padding: 0 1.5rem 1.5rem;
  color: var(--clr-text-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════
   13. LOCATION / MAP
   ═══════════════════════════════════════════ */
.location {
  position: relative;
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--clr-border-accent);
  aspect-ratio: 4/3;
  box-shadow: 0 8px 32px rgba(201, 169, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.03) 0%, rgba(201, 169, 110, 0.01) 100%);
  transition: all var(--duration-normal) var(--ease-out);
}

.location__map:hover {
  box-shadow: 0 12px 48px rgba(201, 169, 110, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: var(--clr-accent);
}

.location__map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: hue-rotate(-15deg) saturate(0.8);
}

.location__map::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 30%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
  pointer-events: none;
  border-radius: var(--radius-lg);
  z-index: 1;
}

.location__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.location__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 1rem 1.25rem;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-out);
}

.location__detail:hover {
  border-color: var(--clr-border-accent);
  transform: translateX(4px);
}

.location__detail-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--clr-accent-glow);
  border: 1px solid var(--clr-border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.location__detail-content h4 {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.location__detail-content p {
  font-size: var(--fs-body-sm);
  color: var(--clr-text-secondary);
}

.location__detail-content a {
  color: var(--clr-accent);
  transition: opacity var(--duration-fast);
}

.location__detail-content a:hover {
  opacity: 0.8;
}

/* ═══════════════════════════════════════════
   14. FINAL CTA
   ═══════════════════════════════════════════ */
.final-cta {
  position: relative;
  padding-block: var(--space-3xl);
  text-align: center;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,
      rgba(201, 169, 110, 0.55) 0%,
      rgba(201, 169, 110, 0.25) 35%,
      rgba(201, 169, 110, 0.08) 60%,
      transparent 75%);
}
.final-cta__content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin-inline: auto;
}

.final-cta h2 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-sm);
}

.final-cta p {
  font-size: var(--fs-body);
  color: var(--clr-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════
   15. FOOTER
   ═══════════════════════════════════════════ */
.footer {
  padding: var(--space-lg) 0 var(--space-md);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-bg-secondary);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__logo {
  font-family: var(--ff-heading);
  font-size: 1.2rem;
  font-weight: 600;
}

.footer__logo span {
  color: var(--clr-accent);
}

.footer__copy {
  font-size: var(--fs-caption);
  color: var(--clr-text-muted);
}

.footer__medical-notice {
  flex: 0 0 100%;
  margin: 0.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text-secondary);
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: center;
}

.footer__links {
  display: flex;
  gap: 1.5rem;
}

.footer__link {
  font-size: var(--fs-caption);
  color: var(--clr-text-muted);
  transition: color var(--duration-fast);
}

.footer__link:hover {
  color: var(--clr-accent);
}

/* ═══════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ═══════════════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: var(--z-whatsapp);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.whatsapp-float__tooltip {
  padding: 0.5rem 1rem;
  background: #fff;
  color: #111;
  font-size: var(--fs-caption);
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.whatsapp-float:hover .whatsapp-float__tooltip {
  opacity: 1;
  transform: translateX(0);
}

.whatsapp-float__btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--clr-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}

.whatsapp-float__btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

.whatsapp-float__btn svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.whatsapp-float__btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--clr-whatsapp);
  animation: wa-pulse 2s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0; }
}

/* ═══════════════════════════════════════════
   ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════════ */

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s var(--ease-out);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s var(--ease-out);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s var(--ease-out);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Hero entry animations */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.loaded .hero__badge { animation: hero-fade-up 0.8s var(--ease-out) 0.3s both; }
body.loaded .hero__title { animation: hero-fade-up 0.8s var(--ease-out) 0.5s both; }
body.loaded .hero__subtitle { animation: hero-fade-up 0.8s var(--ease-out) 0.7s both; }
body.loaded .hero__actions { animation: hero-fade-up 0.8s var(--ease-out) 0.9s both; }
body.loaded .hero__scroll-hint { animation: hero-fade-up 0.8s var(--ease-out) 1.2s both; }

/* Shimmer effect for accents */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Gradient flow */
.gradient-flow {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* ═══════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  /* Ocultamos los enlaces y el botón principal en móviles para que no se amontonen */
  .navbar__links,
  .navbar__inner .navbar__cta {
    display: none;
  }
  
  .navbar__toggle {
    display: flex;
  }
  
  .navbar__mobile-menu {
    display: flex;
  }

  .authority__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .authority__image-wrapper {
    max-width: 400px;
    margin-inline: auto;
    aspect-ratio: 3/4;
  }
  
  .timeline__line {
    left: 24px;
  }
  
  .timeline__item,
  .timeline__item:nth-child(even) {
    flex-direction: row;
    padding-left: 60px;
  }
  
  .timeline__content {
    width: 100%;
  }
  
  .timeline__marker {
    left: 24px;
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
  
  .location__grid {
    grid-template-columns: 1fr;
  }

  .location__map {
    aspect-ratio: 16/12;
    box-shadow: 0 6px 24px rgba(201, 169, 110, 0.1);
  }

  .location__detail {
    padding: 0.875rem 1rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .navbar::before { z-index: 0; }

  .navbar__mobile-menu { display: flex; }

  /* Metrics responsive overrides removed - handled by max-width: 600px rule */
  
/* Mobile (dentro de @media max-width: 768px) */
  
  .services__carousel,
  .testimonials__carousel {
    scroll-padding-left: 6vw; 
    padding-left: 6vw !important;
    padding-right: 12vw !important; /* Espacio extra para permitir el flujo del scroll */
    
    /* Máscara premium: difumina el contenido al 82% de la pantalla hacia transparente */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 97%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 97%);
    
    /* Habilitamos rebote nativo de iOS */
    -webkit-overflow-scrolling: touch; 
  }

  .service-card,
  .testimonial-card {
    /* Al usar 78vw, forzamos un "Peek Effect" del 12% de la siguiente tarjeta */
    min-width: 78vw !important;
    max-width: 78vw !important;
    
    /* Encaje perfecto al deslizar */
    scroll-snap-align: start !important;
    margin-right: 1.25rem !important;
    transition: transform 0.4s var(--ease-out);
  }
  
  /* Indicador visual táctil: un levísimo relieve al presionar la tarjeta en celular */
  .service-card:active,
  .testimonial-card:active {
    transform: scale(0.98);
  }

  .modal__details {
    grid-template-columns: 1fr;
  }
  
  .hero__floating {
    display: none;
  }
  
  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
  
  .compare-slider {
    aspect-ratio: 4/3;
  }
  
  .whatsapp-float {
    bottom: 1.25rem;
    right: 1.25rem;
  }
  
  .whatsapp-float__tooltip {
    display: none;
  }
  
  .whatsapp-float__btn {
    width: 52px;
    height: 52px;
  }
  
  .whatsapp-float__btn svg {
    width: 26px;
    height: 26px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  /* Handled by max-width: 600px rule */
  
  .hero__actions {
    flex-direction: column;
    width: 100%;
  }
  
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .btn--large {
    padding: 0.85rem 2rem;
    font-size: var(--fs-body-sm);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
  
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* ── INDICADOR DE DESLIZAMIENTO MÓVIL ── */
  .swipe-indicator {
    display: flex; /* Se activa solo en móviles */
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 6vw; /* Se alinea con el borde del carrusel */
    margin-bottom: 0.8rem;
    color: var(--clr-accent); /* Color dorado */
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
  }

  .swipe-indicator svg {
    width: 16px;
    height: 16px;
    animation: swipe-bounce 1.5s infinite var(--ease-in-out);
  }

  @keyframes swipe-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
  }

/* ═══════════════════════════════════════════
   DECORATIVE ELEMENTS (CLEAN MINIMALISM)
   ═══════════════════════════════════════════ */
.section-divider {
  width: 40px;
  height: 1px;
  background: var(--clr-accent);
  margin: 0 auto var(--space-md);
  opacity: 0.4;
}

/* Decorative glow orbs remain disabled to keep the visual system restrained. */

/* Loading animation for images */
.img-loading {
  background: linear-gradient(90deg, var(--clr-bg-card) 25%, var(--clr-bg-card-hover) 50%, var(--clr-bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Limpieza de gradientes artificiales en Mapa y CTA */
.location__map {
  background: var(--clr-bg-card) !important;
  box-shadow: none !important;
  border: 1px solid var(--clr-border) !important;
}

.location__map::before {
  display: none !important; /* Mata el brillo sobre el mapa */
}

.final-cta__bg {
  display: none !important; /* Mata el gradiente espacial de la sección final */
}
/* ═══════════════════════════════════════════
   PREMIUM PRELOADER & INTRO (ANIMACIÓN FLUIDA)
   ═══════════════════════════════════════════ */
body.loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  background-color: var(--clr-bg-primary);
  background-image: radial-gradient(circle at center, rgba(163, 107, 83, 0.08) 0%, var(--clr-bg-primary) 80%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.8s var(--ease-out),
              visibility 0.8s var(--ease-out),
              transform 0.8s var(--ease-out),
              filter 0.8s var(--ease-out);
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  filter: blur(4px);
}

.preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  width: 100%;
  max-width: 320px;
}

.preloader__glow {
  position: absolute;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(163, 107, 83, 0.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(20px);
  opacity: 0;
  animation: preloader-glow-fade 2s ease-in-out forwards 0.2s;
  pointer-events: none;
}

@keyframes preloader-glow-fade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
}

/* Animación orgánica para el SVG de la luna */
.preloader__logo-svg {
  width: 90px;
  height: 90px;
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: preloader-organic-reveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

.preloader__brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--clr-text-primary);
  margin-bottom: 0.25rem;
  text-indent: 0.25em;
  opacity: 0;
  transform: translateY(15px);
  animation: preloader-organic-reveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

.preloader__sig {
  font-family: 'Alex Brush', cursive;
  font-size: 1.8rem;
  background: linear-gradient(135deg, #e0b094 0%, #c58e72 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  animation: preloader-organic-reveal 1s cubic-bezier(0.25, 1, 0.5, 1) 0.7s forwards;
}

/* El secreto de la fluidez: un ligero desvanecimiento con movimiento vertical */
@keyframes preloader-organic-reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

body.loaded .navbar {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* ── ALTERNATIVA PREMIUM: TARJETAS EDITORIALES SIN LÍNEA (MÓVIL) ── */
@media (max-width: 768px) {
  .timeline {
    padding: 1rem 0; 
  }

  /* 1. Eliminamos la línea por completo, ya no la necesitamos */
  .timeline__line {
    display: none !important;
  }

  /* 2. Reseteamos la posición para que las tarjetas ocupen todo el ancho */
  .timeline__item,
  .timeline__item:nth-child(even) {
    flex-direction: column !important;
    padding-left: 0 !important;
    margin-bottom: 3.5rem !important; /* Más aire visual entre cada paso */
    position: relative;
  }

  /* 3. Estilizamos la tarjeta de cristal */
  .timeline__content {
    width: 100%;
    position: relative;
    padding: 2.5rem 1.5rem 1.5rem; /* Espacio extra arriba para que el número no tape el texto */
    background: var(--clr-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.6);
  }

  /* 4. Convertimos el número en una medalla/sello flotante */
  .timeline__marker {
    position: absolute !important;
    top: -22px !important;
    left: 20px !important;
    transform: none !important; /* Quitamos el centrado automático anterior */
    width: 48px !important;
    height: 48px !important;
    background: var(--clr-bg-primary) !important;
    border: 1px solid var(--clr-accent) !important;
    box-shadow: 0 8px 20px rgba(201, 169, 110, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    font-size: 1.2rem !important;
    z-index: 5;
  }
}

/* ── OPTIMIZACIÓN PREMIUM: METRICS COMPACTAS (CELULAR) ── */
@media (max-width: 600px) {
  .metrics {
    padding-block: 1.5rem; /* Reducimos el padding vertical */
  }

  .metrics__grid {
    grid-template-columns: repeat(3, 1fr); /* Mantenemos las 3 columnas */
    gap: 0.5rem; /* Reducimos el espacio entre ellas */
  }

  .metric {
    padding: 0.5rem; /* Padding mínimo */
  }

  .metric__number {
    font-size: 1.1rem; /* Reducimos tamaño de número */
    margin-bottom: 0;
  }

  .metric__label {
    font-size: 0.6rem; /* Reducimos tamaño de etiqueta */
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .metric__icon {
    font-size: 1rem; /* Iconos más pequeños */
    margin-bottom: 0.25rem;
  }

  /* Eliminamos la línea divisoria vertical en móvil para no saturar */
  .metric:not(:last-child)::after {
    display: none;
  }
}

/* ── FINAL CTA: MAGNETIC SPOTLIGHT PREMIUM ── */
.final-cta {
  padding-block: 6rem;
  background: var(--clr-bg-primary);
}

.cta-card {
  position: relative;
  text-align: center;
  padding: 4rem 2rem;
  background: radial-gradient(circle at center, rgba(201, 169, 110, 0.05), transparent 70%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cta-card__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
  color: var(--clr-text-primary);
  line-height: 1.1;
}

.cta-card__subtitle {
  font-size: 1.1rem;
  color: var(--clr-text-secondary);
  margin-bottom: 2.5rem;
  max-width: 500px;
  margin-inline: auto;
}

/* El botón premium: Animación y brillo */
.btn-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
  color: var(--clr-bg-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(201, 169, 110, 0.2);
}

.btn-premium:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(201, 169, 110, 0.3);
  filter: brightness(1.1);
}

.cta-card__disclaimer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── OPTIMIZACIÓN MÓVIL ── */
@media (max-width: 768px) {
  .cta-card { padding: 3rem 1rem; }
  .btn-premium { width: 100%; justify-content: center; }
}

/* ── FORMULARIO INTELIGENTE: LOCAL + TURISMO MÉDICO ── */
.appointment {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 169, 110, 0.08), transparent 35%),
    var(--clr-bg-primary);
}

.appointment__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(15, 15, 15, 0.95), rgba(5, 5, 5, 0.98));
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.05);
}

.appointment__intro {
  position: sticky;
  top: 7rem;
}

.appointment__intro h2,
.appointment-modal__body h2 {
  margin: 0.65rem 0 1rem;
}

.appointment__intro > p,
.appointment-modal__body > p {
  color: var(--clr-text-secondary);
  line-height: 1.8;
}

.appointment__trust {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
  color: var(--clr-text-secondary);
  font-size: var(--fs-body-sm);
}

.appointment__trust span::first-letter {
  color: var(--clr-accent);
}

.appointment-form {
  display: grid;
  gap: 1.35rem;
}

.appointment-form__fieldset {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.appointment-form__fieldset legend {
  margin-bottom: 0.85rem;
  color: var(--clr-text-primary);
  font-weight: 600;
  line-height: 1.4;
}

.appointment-form__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.appointment-form__tab {
  position: relative;
  cursor: pointer;
}

.appointment-form__tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.appointment-form__tab span {
  display: flex;
  min-height: 66px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
  color: var(--clr-text-secondary);
  text-align: center;
  font-size: 0.88rem;
  font-weight: 500;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}

.appointment-form__tab small {
  margin-top: 0.2rem;
  color: var(--clr-text-muted);
  font-size: 0.7rem;
}

.appointment-form__tab input:checked + span {
  border-color: var(--clr-border-accent);
  background: rgba(201, 169, 110, 0.1);
  color: var(--clr-accent-light);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.08);
}

.appointment-form__tab input:focus-visible + span {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.appointment-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.appointment-form__tourism {
  display: contents;
}

.appointment-form__tourism[hidden],
.appointment-form__local[hidden] {
  display: none;
}

.appointment-form__field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.appointment-form__field--wide {
  grid-column: 1 / -1;
}

.appointment-form__field > span {
  color: var(--clr-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.appointment-form input,
.appointment-form select {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  outline: none;
  background: #111;
  color: var(--clr-text-primary);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}

.appointment-form input::placeholder {
  color: #696970;
}

.appointment-form input:focus,
.appointment-form select:focus {
  border-color: var(--clr-accent);
  background: #141414;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);
}

.appointment-form input:user-invalid,
.appointment-form select:user-invalid {
  border-color: #d98282;
}

.appointment-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.15rem;
}

.appointment-form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--clr-text-muted);
  font-size: 0.72rem;
  line-height: 1.55;
  cursor: pointer;
}

.appointment-form__consent input {
  width: 18px;
  min-height: 18px;
  margin-top: 0.1rem;
  accent-color: var(--clr-accent);
}

.appointment-form__consent button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--clr-accent-light);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.appointment-form__note {
  margin: -0.65rem 0 0;
  color: var(--clr-text-muted);
  text-align: center;
  font-size: 0.72rem;
}

.appointment-modal {
  width: min(94vw, 760px);
  max-height: 92vh;
}

.appointment-modal__body {
  padding: clamp(1.35rem, 4vw, 2.5rem);
}

.appointment-modal__body > p {
  margin-bottom: 1.5rem;
}

.privacy-modal {
  width: min(94vw, 780px);
  max-height: 90vh;
}

.privacy-modal__body {
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.privacy-modal__body h2 {
  margin: 0.65rem 0 1.5rem;
}

.privacy-modal__body p {
  margin-bottom: 1rem;
  color: var(--clr-text-secondary);
  font-size: 0.88rem;
  line-height: 1.75;
}

.privacy-modal__body strong {
  color: var(--clr-text-primary);
}

.privacy-modal__body a {
  color: var(--clr-accent-light);
  text-decoration: underline;
}

.privacy-modal__legal-note {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--clr-border-accent);
  border-radius: var(--radius-md);
  background: rgba(201, 169, 110, 0.07);
}

@media (max-width: 900px) {
  .appointment__shell {
    grid-template-columns: 1fr;
  }

  .appointment__intro {
    position: static;
  }
}

@media (max-width: 600px) {
  .appointment__shell {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
  }

  .appointment-form__tabs,
  .appointment-form__grid {
    grid-template-columns: 1fr;
  }

  .appointment-form__field--wide {
    grid-column: auto;
  }

  .appointment-form__tab span {
    min-height: 58px;
  }

  .appointment-modal {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
  }

  .appointment-modal__body {
    padding: 1.25rem;
  }
}

/* ============================================================
   ESTHETIC DM — CHAMPAGNE MINERAL
   Palette derived from the hero film: porcelain, cacao and plum.
   ============================================================ */

:root {
  --clr-bg-primary: #f7f2eb;
  --clr-bg-secondary: #eae0d5;
  --clr-bg-tertiary: #e2d6ca;
  --clr-bg-card: #fcfaf7;
  --clr-bg-card-hover: #fffdf9;
  --clr-bg-elevated: #fffdf9;
  --clr-accent: #51383a;
  --clr-accent-light: #6b4b4e;
  --clr-accent-dark: #402b2d;
  --clr-accent-glow: rgba(81, 56, 58, 0.025);
  --clr-accent-glow-strong: rgba(81, 56, 58, 0.07);
  --clr-text-primary: #29211d;
  --clr-text-secondary: #71645c;
  --clr-text-muted: #91847b;
  --clr-text-accent: #51383a;
  --clr-border: rgba(41, 33, 29, 0.12);
  --clr-border-hover: rgba(81, 56, 58, 0.4);
  --clr-border-accent: rgba(81, 56, 58, 0.26);
  --clr-glass: rgba(252, 250, 247, 0.78);
  --clr-glass-strong: rgba(252, 250, 247, 0.95);
  --clr-glass-nav: rgba(247, 242, 235, 0.93);
  --shadow-sm: 0 2px 8px rgba(41, 33, 29, 0.06);
  --shadow-md: 0 8px 24px rgba(41, 33, 29, 0.08);
  --shadow-lg: 0 18px 44px rgba(41, 33, 29, 0.1);
  --shadow-accent: 0 8px 26px rgba(81, 56, 58, 0.13);
  --shadow-accent-strong: 0 12px 34px rgba(81, 56, 58, 0.17);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --duration-normal: 240ms;
  --duration-slow: 360ms;
}

body {
  line-height: 1.65;
  letter-spacing: -0.005em;
}

html {
  color-scheme: light;
}

body::before,
.authority__image-glow,
.hero__scroll-hint,
#scroll-progress,
.swipe-indicator {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.025em;
}

.text-gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--clr-accent) !important;
  font-weight: inherit;
}

.overline {
  color: var(--clr-text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

.overline::before {
  width: 14px;
  background: var(--clr-accent);
}

.section-header {
  max-width: 720px;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.section-header p {
  max-width: 620px;
  margin-left: 0;
  color: var(--clr-text-secondary);
}

.navbar.scrolled {
  background: rgba(247, 242, 235, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar:not(.scrolled) .navbar__logo,
.navbar:not(.scrolled) .navbar__links .navbar__link {
  color: #29211d;
}

.navbar:not(.scrolled) .navbar__logo span {
  color: #51383a;
}

.navbar:not(.scrolled) .navbar__toggle span {
  background: #29211d;
}

.navbar__cta {
  color: #fcfaf7;
  background: var(--clr-accent);
  border-radius: 7px;
  box-shadow: none;
}

.navbar__mobile-menu {
  background: rgba(247, 242, 235, 0.98);
}

.navbar__mobile-menu .navbar__link:hover {
  background: rgba(81, 56, 58, 0.07);
}

.navbar__logo {
  font-family: var(--ff-body);
  font-size: 1.25rem;
  font-weight: 600;
}

.hero__video-overlay {
  background:
    linear-gradient(90deg, rgba(247, 242, 235, 0.82) 0%, rgba(247, 242, 235, 0.56) 38%, rgba(247, 242, 235, 0.1) 64%, transparent 79%),
    linear-gradient(0deg, rgba(234, 224, 213, 0.16) 0%, transparent 34%);
}

.hero__video {
  object-position: center;
  filter: saturate(0.96) contrast(1.01) brightness(1.01);
}

.hero__content {
  align-items: flex-start;
  max-width: 760px;
  margin-left: clamp(1.25rem, 7vw, 7rem);
  margin-right: auto;
  text-align: left;
}

.hero__badge {
  padding: 0;
  border: 0;
  background: transparent;
  color: #71645c;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.hero__title {
  max-width: 720px;
  font-size: clamp(3.1rem, 6.4vw, 6.2rem);
  font-weight: 600;
  line-height: 0.96;
  color: #29211d;
}

.hero__title-highlight {
  color: #51383a;
  font-style: italic;
  font-weight: 500;
}

.hero__subtitle {
  max-width: 610px;
  margin-right: 0;
  margin-left: 0;
  color: #62564f;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
}

.hero__actions {
  justify-content: flex-start;
}

.btn {
  border-radius: 7px;
  font-weight: 600;
  transition: color 140ms ease-out, background-color 140ms ease-out,
              border-color 140ms ease-out, transform 140ms ease-out;
}

.btn--primary {
  color: #fcfaf7;
  background: var(--clr-accent);
  box-shadow: none;
}

.btn--primary:hover {
  background: var(--clr-accent-dark);
  box-shadow: none;
  transform: translateY(-1px);
}

.btn--secondary {
  color: #29211d;
  background: rgba(252, 250, 247, 0.58);
  border-color: rgba(41, 33, 29, 0.3);
}

.metrics {
  background: var(--clr-bg-primary);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.metrics__grid {
  gap: 0;
}

.metric {
  align-items: flex-start;
  min-width: 0;
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
  text-align: left;
  border-right: 1px solid var(--clr-border);
}

.metric:first-child {
  padding-left: 0;
}

.metric:last-child {
  border-right: 0;
}

.metric__icon {
  display: none;
}

.metric__number {
  font-family: var(--ff-heading);
  color: var(--clr-text-primary);
  font-size: clamp(2.25rem, 4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.metric__label {
  max-width: 220px;
  color: var(--clr-text-secondary);
  line-height: 1.45;
}

.authority__image {
  border-radius: 4px;
}

.authority__image-border {
  inset: 14px -14px -14px 14px;
  border-color: rgba(154, 118, 91, 0.52);
  border-radius: 4px;
}

.service-card,
.testimonial-card,
.credential,
.faq__item,
.location__detail,
.modal,
.timeline__content {
  background: var(--clr-bg-card) !important;
  border: 1px solid var(--clr-border) !important;
  box-shadow: 0 12px 34px rgba(41, 33, 29, 0.08) !important;
}

.service-card {
  border-radius: 10px;
}

.service-card:hover {
  border-color: var(--clr-border-hover) !important;
  box-shadow: 0 18px 42px rgba(41, 33, 29, 0.13) !important;
  transform: translateY(-3px);
}

.service-card__image-overlay {
  background: linear-gradient(0deg, rgba(41, 33, 29, 0.34), transparent 55%);
}

.service-card__title {
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 600;
}

.service-card__desc {
  color: var(--clr-text-secondary);
  line-height: 1.6;
}

.service-card__btn {
  color: var(--clr-text-primary);
  font-weight: 600;
  text-transform: none;
}

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  transition-duration: 340ms !important;
  transition-timing-function: ease-out !important;
}

.stagger-1,
.stagger-2,
.stagger-3,
.stagger-4,
.stagger-5,
.stagger-6 {
  transition-delay: 0ms !important;
}

@media (max-width: 768px) {
  .hero__video {
    object-position: center;
  }

  .hero__video-overlay {
    background:
      linear-gradient(90deg, rgba(247, 242, 235, 0.86) 0%, rgba(247, 242, 235, 0.68) 62%, rgba(247, 242, 235, 0.34) 100%),
      linear-gradient(0deg, rgba(234, 224, 213, 0.22) 0%, transparent 48%);
  }

  .hero__content {
    align-items: flex-start;
    margin-inline: 0;
    padding-inline: 1.25rem;
    text-align: left;
  }

  .hero__title {
    max-width: 12ch;
    font-size: clamp(2.6rem, 10.5vw, 3.7rem);
    line-height: 1;
  }

  .cookie-consent {
    gap: 0.75rem;
    padding: 1rem;
  }

  .cookie-consent__copy p,
  .cookie-consent__link {
    font-size: 0.78rem;
  }

  .hero__actions {
    align-items: stretch;
    width: 100%;
  }

  .hero__actions .btn {
    justify-content: center;
    width: 100%;
  }

  .metrics__grid {
    grid-template-columns: 1fr;
  }

  .metric,
  .metric:first-child {
    padding: 1.4rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--clr-border);
  }

  .metric:last-child {
    border-bottom: 0;
  }

  .section-header {
    margin-bottom: 2.5rem;
  }
}

/* ============================================================
   RESPONSIVE HARDENING
   Content-driven adaptations for phone, tablet and wide screens.
   ============================================================ */

.hero { min-height: 100vh; min-height: 100dvh; }

.btn, .navbar__toggle, .services__nav-btn, .faq__question,
.appointment-form__tab, .modal__close, .cookie-consent__actions .btn {
  min-height: 44px;
  touch-action: manipulation;
}

.appointment-form input, .appointment-form select, .appointment-form textarea { min-height: 48px; }
.whatsapp-float { right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.cookie-consent { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

@media (min-width: 1600px) {
  :root { --max-width: 1380px; }
  .hero__content { margin-left: max(7rem, calc((100vw - 1380px) / 2)); }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .section-padding { padding-block: clamp(4.5rem, 8vw, 6rem); }
  .authority__grid { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
  .authority__image-wrapper { max-width: 360px; }
  .location__grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); align-items: start; }
  .hero__content { max-width: 700px; margin-left: clamp(2.5rem, 7vw, 5.5rem); }
  .hero__title { font-size: clamp(3.8rem, 7.2vw, 5.2rem); }
}

@media (min-width: 601px) and (max-width: 899px) {
  .container { padding-inline: clamp(1.75rem, 5vw, 3rem); }
  .section-padding { padding-block: clamp(4.5rem, 9vw, 6rem); }
  .hero__content { max-width: 650px; margin-left: clamp(2.5rem, 9vw, 5rem); padding-inline: 0; }
  .hero__title { max-width: 13ch; font-size: clamp(3.8rem, 8.5vw, 5rem); }
  .service-card, .testimonial-card { min-width: min(44vw, 420px) !important; max-width: min(44vw, 420px) !important; }
  .appointment-modal { width: min(92vw, 720px); max-height: calc(100dvh - 2rem); }
}

@media (max-width: 600px) {
  :root { --space-section: clamp(3.75rem, 16vw, 5rem); }
  .container { padding-inline: clamp(1rem, 5.2vw, 1.35rem); }
  .navbar { padding-top: max(.8rem, env(safe-area-inset-top)); }
  .navbar__inner { padding-inline: clamp(1rem, 5.2vw, 1.35rem); }
  .navbar__logo { font-size: 1.15rem; }
  .navbar__toggle { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .navbar__mobile-menu { max-height: calc(100dvh - 72px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .hero { min-height: max(100dvh, 660px); }
  .hero__content { width: 100%; padding-top: clamp(5.5rem, 13dvh, 7rem); padding-bottom: clamp(2rem, 7dvh, 4rem); }
  .hero__badge { margin-bottom: 1rem; font-size: .78rem; }
  .hero__title { max-width: 12ch; margin-bottom: 1rem; font-size: clamp(2.55rem, 11vw, 3.25rem); line-height: .98; }
  .hero__subtitle { max-width: 34ch; margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.55; }
  .hero__actions { gap: .75rem; }
  .hero__actions .btn { min-height: 48px; padding-inline: 1rem; }
  .metrics { padding-block: .5rem; }
  .metric__number { font-size: clamp(2rem, 11vw, 2.8rem); }
  .metric__label { max-width: none; font-size: .82rem; letter-spacing: 0; text-transform: none; }
  .authority__image-wrapper { width: min(88vw, 380px); }
  .services__carousel, .testimonials__carousel { padding-left: 5.2vw !important; padding-right: 10vw !important; scroll-padding-left: 5.2vw; }
  .service-card, .testimonial-card { min-width: min(84vw, 360px) !important; max-width: min(84vw, 360px) !important; margin-right: .85rem !important; }
  .service-card__body { padding: 1.15rem; }
  .service-card__desc { font-size: .94rem; }
  .compare-slider { min-height: 260px; aspect-ratio: 4 / 5; }
  .appointment__shell { padding: 1rem; border-radius: 12px; }
  .appointment-form input, .appointment-form select, .appointment-form textarea { width: 100%; font-size: 16px; }
  .appointment-modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); margin-top: env(safe-area-inset-top); margin-bottom: env(safe-area-inset-bottom); }
  .appointment-modal__body, .modal__content { padding: 1rem; }
  .cookie-consent { right: max(.5rem, env(safe-area-inset-right)); bottom: max(.5rem, env(safe-area-inset-bottom)); left: max(.5rem, env(safe-area-inset-left)); width: auto; }
  .cookie-consent__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cookie-consent__actions .btn { justify-content: center; padding-inline: .75rem; }
}

@media (max-height: 540px) and (min-width: 600px) {
  .hero { min-height: max(100dvh, 500px); align-items: flex-start; }
  .hero__content { max-width: 720px; margin-left: clamp(2rem, 7vw, 4rem); padding-top: 5.5rem; }
  .hero__badge { margin-bottom: .65rem; }
  .hero__title { max-width: 17ch; margin-bottom: .75rem; font-size: clamp(2.85rem, 6vw, 3.5rem); line-height: .95; }
  .hero__subtitle { max-width: 42ch; margin-bottom: 1rem; font-size: .95rem; line-height: 1.45; }
  .hero__actions { gap: .75rem; }
  .hero__actions .btn { min-height: 44px; padding-block: .65rem; }
}

@media print {
  .navbar, .hero__video-wrapper, .whatsapp-float, .cookie-consent, .services__nav, .btn { display: none !important; }
  body { color: #111; background: #fff; }
  .hero { min-height: auto; padding-block: 2rem; }
}

/* Compact trust metrics on phones */
@media (max-width: 600px) {
  .metrics {
    padding-block: 1rem;
    background: var(--clr-bg-primary);
  }

  .metrics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .metric,
  .metric:first-child,
  .metric:last-child {
    min-height: 108px;
    padding: 1rem 1rem 1.15rem;
    justify-content: center;
    background: transparent;
    border: 0;
  }

  .metric:first-child {
    padding-left: 0;
    padding-right: 1.25rem;
    border-right: 1px solid var(--clr-border);
  }

  .metric:nth-child(2) {
    padding-left: 1.25rem;
    padding-right: 0;
  }

  .metric:nth-child(3) {
    grid-column: 1 / -1;
    min-height: 78px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: start;
    column-gap: 1rem;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--clr-border);
  }

  .metric:nth-child(3) .metric__label {
    margin-top: 0;
  }

  .metric__number {
    font-size: clamp(2.25rem, 12vw, 3rem);
    line-height: .9;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
  }

  .metric__label {
    margin-top: .55rem;
    color: var(--clr-text-secondary);
    font-size: .78rem;
    line-height: 1.35;
  }

}

/* Final light-surface contrast overrides */
.spotlight-container {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  box-shadow: 0 18px 42px rgba(41, 33, 29, 0.1), inset 0 1px rgba(255, 255, 255, 0.72);
}
.spotlight-glow { background: radial-gradient(circle, rgba(81, 56, 58, 0.055) 0%, transparent 64%); }
.spotlight-quote-mark { color: var(--clr-accent); opacity: 0.12; }
.spotlight-text { color: var(--clr-text-primary); }
.spotlight-name { color: var(--clr-accent); }
.spotlight-meta { color: var(--clr-text-secondary); letter-spacing: 0.02em; }
.spotlight-avatar { background: var(--clr-bg-primary); border-color: var(--clr-border); color: var(--clr-text-secondary); box-shadow: none; }
.spotlight-avatar.active { color: #fcfaf7; background: var(--clr-accent); border-color: var(--clr-accent); box-shadow: 0 8px 20px rgba(81, 56, 58, 0.18); }

.reviews-seal {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  box-shadow: 0 12px 32px rgba(41, 33, 29, 0.09), inset 0 1px rgba(255, 255, 255, 0.72);
}
.reviews-seal__glow { background: radial-gradient(circle at 50% 50%, rgba(81, 56, 58, 0.07), transparent 70%); }
.reviews-seal:hover { border-color: var(--clr-border-hover); box-shadow: 0 18px 38px rgba(41, 33, 29, 0.13), inset 0 1px rgba(255, 255, 255, 0.78); }
.reviews-seal__logo { filter: none; }
.reviews-seal__score { color: var(--clr-text-primary); }
.reviews-seal__text { color: var(--clr-text-secondary); }
.reviews-seal__action { color: var(--clr-accent); }

.appointment { background: var(--clr-bg-primary); }
.appointment__shell {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  box-shadow: 0 18px 42px rgba(41, 33, 29, 0.1), inset 0 1px rgba(255, 255, 255, 0.72);
}
.appointment-form__tab span { background: var(--clr-bg-primary); border-color: var(--clr-border); color: var(--clr-text-secondary); }
.appointment-form__tab input:checked + span { background: rgba(81, 56, 58, 0.09); border-color: rgba(81, 56, 58, 0.42); color: var(--clr-accent-dark); box-shadow: inset 0 0 0 1px rgba(81, 56, 58, 0.04); }
.appointment-form__tab input:checked + span small { color: var(--clr-accent); }
.appointment-form input,
.appointment-form select { background: #fffdf9; border-color: var(--clr-border); color: var(--clr-text-primary); }
.appointment-form input::placeholder { color: var(--clr-text-muted); opacity: 1; }
.appointment-form input:focus,
.appointment-form select:focus { background: #fffdf9; border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(81, 56, 58, 0.1); }
.appointment-form select option { color: var(--clr-text-primary); background: #fffdf9; }

@media (max-width: 768px) {
  .spotlight-container,
  .reviews-seal,
  .appointment__shell { box-shadow: 0 12px 28px rgba(41, 33, 29, 0.09); }
  .spotlight-text { font-size: 1.08rem; line-height: 1.65; }
  .spotlight-meta,
  .reviews-seal__text,
  .appointment__intro > p,
  .appointment__trust { color: #62564f; }
}

/* Reference-led trust metrics: centered horizontal band */
.metrics {
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  background: var(--clr-bg-secondary);
  border-color: rgba(41, 33, 29, 0.1);
}

.metrics__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.metrics .metric,
.metrics .metric:first-child,
.metrics .metric:last-child {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem clamp(1rem, 4vw, 3rem);
  border: 0;
  border-right: 1px solid rgba(41, 33, 29, 0.12);
  text-align: center;
}

.metrics .metric:last-child {
  border-right: 0;
}

.metrics .metric__icon {
  display: grid;
  width: 32px;
  height: 32px;
  margin-bottom: 0.75rem;
  place-items: center;
  color: var(--clr-text-primary);
}

.metrics .metric__icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.6;
}

.metrics .metric__number {
  margin: 0;
  color: var(--clr-accent);
  font-family: var(--ff-body);
  font-size: clamp(2.35rem, 4.2vw, 3.35rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
}

.metrics .metric__label {
  max-width: 230px;
  margin-top: 0.45rem;
  color: var(--clr-text-secondary);
  font-size: clamp(0.86rem, 1.3vw, 1rem);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .metrics {
    padding-block: 1.75rem;
    background: var(--clr-bg-secondary);
  }

  .metrics .metrics__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metrics .metric,
  .metrics .metric:first-child,
  .metrics .metric:nth-child(2),
  .metrics .metric:nth-child(3),
  .metrics .metric:last-child {
    grid-column: auto;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.7rem clamp(0.45rem, 2.8vw, 0.8rem);
    border: 0;
    border-right: 1px solid rgba(41, 33, 29, 0.12);
    border-top: 0;
    text-align: center;
  }

  .metrics .metric:last-child {
    border-right: 0;
  }

  .metrics .metric__icon {
    width: 27px;
    height: 27px;
    margin-bottom: 0.55rem;
  }

  .metrics .metric__icon svg {
    width: 21px;
    height: 21px;
  }

  .metrics .metric__number {
    font-size: clamp(1.65rem, 8.5vw, 2.15rem);
    line-height: 1;
  }

  .metrics .metric__label,
  .metrics .metric:nth-child(3) .metric__label {
    max-width: 12ch;
    margin-top: 0.4rem;
    font-size: clamp(0.66rem, 3vw, 0.78rem);
    line-height: 1.3;
  }
}

/* Ajuste final del hero para mostrar oferta y CTA dentro del primer recorrido visual */
@media (min-width: 900px) {
  .hero {
    min-height: max(100dvh, 720px);
  }

  .hero__content {
    max-width: 760px;
    padding-top: 6.5rem;
    padding-bottom: 2.25rem;
  }

  .hero__title {
    max-width: 15ch;
    font-size: clamp(3rem, 5vw, 4.2rem);
    line-height: 0.96;
    margin-bottom: 1rem;
  }

  .hero__subtitle {
    margin-bottom: 1rem;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: max(100dvh, 780px);
    align-items: flex-start;
  }

  .hero__content {
    padding-top: 5.75rem;
    padding-bottom: 1.75rem;
  }

  .hero__title {
    max-width: 13ch;
    font-size: clamp(2.25rem, 10.2vw, 3rem);
  }

  .hero__subtitle {
    margin-bottom: 1rem;
    font-size: 0.94rem;
  }
}

/* Capa final: navegación y accesos flotantes no deben cubrir un modal abierto. */
.modal-overlay {
  z-index: 2000;
}

.modal {
  z-index: 2010;
}

body.modal-open .whatsapp-float,
body.modal-open .cookie-consent,
body.cookie-consent-open .whatsapp-float {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .cookie-consent {
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: max(0.5rem, env(safe-area-inset-left));
    width: auto;
    transform: none;
  }
}