/* ========================================================================
   ESSENCIA AZUL · LIQUID GLASS TREATMENT
   ========================================================================
   iOS 26–inspired translucent glass material system.
   Overlays the base Essencia Azul styles.css — load AFTER it.
   Strictly uses Essencia Azul palette. WCAG AA contrast enforced.
   Primary buttons remain solid — never glass.
   ======================================================================== */

/* ── GLASS TOKENS ── */
:root {
  --gl-blur: 24px;
  --gl-saturate: 1.4;

  /* Light glass (Arena Suave / Blanco backgrounds) */
  --gl-l-bg: rgba(255,255,255,0.48);
  --gl-l-border: rgba(255,255,255,0.42);
  --gl-l-specular: rgba(255,255,255,0.68);
  --gl-l-depth: 0 2px 12px rgba(2,72,109,0.045);

  /* Dark glass (Zona Azul backgrounds) */
  --gl-d-bg: rgba(2,72,109,0.28);
  --gl-d-border: rgba(167,204,236,0.13);
  --gl-d-specular: rgba(167,204,236,0.26);
  --gl-d-depth: 0 2px 12px rgba(0,0,0,0.10);

  /* Ambient orbs — brand palette only */
  --gl-orb-calma: rgba(167,204,236,0.14);
  --gl-orb-brisa: rgba(206,204,161,0.09);
  --gl-orb-zona:  rgba(2,72,109,0.07);
}

/* ── SECTION POSITIONING (ambient pseudo-elements) ── */
.doctora, .servicios, .clinica,
.testimonios, .ubicacion, .cta-section {
  position: relative;
  overflow: hidden;
}

/* Content containers above ambient orbs */
.doctora > .container,
.servicios > .container,
.clinica > .container,
.testimonios > .container,
.ubicacion > .container,
.cta-section > .container {
  position: relative;
  z-index: 1;
}


/* ════════════════════════════════════════════════
   N A V
   ════════════════════════════════════════════════ */

/* Over dark hero — whisper of glass */
.nav.on-dark {
  background: rgba(1,51,78,0.12);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
}

/* Scrolled — refined frosted glass with specular edge */
.nav.scrolled {
  background: rgba(244,243,239,0.55);
  backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
  border-bottom-color: var(--gl-l-border);
  box-shadow:
    inset 0 -0.5px 0 var(--gl-l-border),
    var(--gl-l-depth);
}


/* ════════════════════════════════════════════════
   H E R O
   ════════════════════════════════════════════════ */

/* Stats bar — premium dark glass with specular crown */
.hero-stats-bar {
  background: rgba(2,72,109,0.22);
  backdrop-filter: blur(calc(var(--gl-blur) * 1.33)) saturate(1.5);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 1.33)) saturate(1.5);
  border: 0.5px solid var(--gl-d-border);
  box-shadow:
    inset 0 0.5px 0 var(--gl-d-specular),
    inset 0 0 24px rgba(167,204,236,0.025),
    0 6px 24px rgba(0,0,0,0.14);
}


/* ════════════════════════════════════════════════
   M A R Q U E E
   ════════════════════════════════════════════════ */
.marquee {
  background: rgba(244,243,239,0.42);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.67)) saturate(1.25);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.67)) saturate(1.25);
  border-top: 0.5px solid var(--gl-l-border);
  border-bottom: 0.5px solid var(--gl-l-border);
  box-shadow: inset 0 0.5px 0 var(--gl-l-specular);
}


/* ════════════════════════════════════════════════
   D O C T O R A
   ════════════════════════════════════════════════ */

/* Ambient orb — Calma Celeste glow */
.doctora::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gl-orb-calma), transparent 70%);
  top: 8%; right: -6%;
  pointer-events: none;
}

/* Photo tag — glass pill */
.doctora-photo-tag {
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  border: 0.5px solid var(--gl-l-border);
  box-shadow:
    inset 0 0.5px 0 var(--gl-l-specular),
    0 2px 8px rgba(2,72,109,0.06);
}

/* Quote accent — softened for glass harmony */
.doctora-quote {
  border-left-color: rgba(2,72,109,0.3);
}

/* Stats — glass panel cards */
.doctora-stats {
  border-top: none;
  gap: var(--sp-4);
}
.doctora-stats > div {
  background: var(--gl-l-bg);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(1.3);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(1.3);
  border: 0.5px solid var(--gl-l-border);
  border-radius: var(--r-calmo);
  padding: var(--sp-4) var(--sp-5);
  box-shadow:
    inset 0 0.5px 0 var(--gl-l-specular),
    var(--gl-l-depth);
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.doctora-stats > div:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0.5px 0 var(--gl-l-specular),
    0 4px 16px rgba(2,72,109,0.06);
}


/* ════════════════════════════════════════════════
   S E R V I C I O S
   ════════════════════════════════════════════════ */

/* Ambient orb 1 — Calma Celeste, top right */
.servicios::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gl-orb-calma), transparent 65%);
  top: 2%; right: -8%;
  pointer-events: none;
}
/* Ambient orb 2 — Brisa Verde, bottom left */
.servicios::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gl-orb-brisa), transparent 65%);
  bottom: 8%; left: -6%;
  pointer-events: none;
}

/* Card base — frosted glass material (estado "hover" permanente) */
.service-card,
.service-card:hover {
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
  border: 0.5px solid rgba(167,204,236,0.35);
  box-shadow:
    inset 0 0.5px 0 var(--gl-l-specular),
    0 6px 24px rgba(2,72,109,0.07);
}

/* Icon container — azul sólido permanente (antes solo en hover) */
.service-icon,
.service-card:hover .service-icon {
  background: var(--zona-azul);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}

/* Text legibility on glass — bump to Mar Sereno Dark */
.service-card p {
  color: var(--mar-sereno-dark);
}


/* ════════════════════════════════════════════════
   C L Í N I C A   (Zona Azul dark bg)
   ════════════════════════════════════════════════ */

/* Ambient orb 1 — soft Celeste on dark */
.clinica::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,204,236,0.07), transparent 60%);
  top: 18%; left: -8%;
  pointer-events: none;
}
/* Ambient orb 2 — warm Brisa Verde whisper */
.clinica::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206,204,161,0.04), transparent 60%);
  bottom: 5%; right: -4%;
  pointer-events: none;
}

/* Pilares — dark glass cards */
.clinica-pilares {
  border-top: none;
}
.clinica-pilares > div {
  background: var(--gl-d-bg);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(1.3);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(1.3);
  border: 0.5px solid var(--gl-d-border);
  border-radius: var(--r-calmo);
  padding: var(--sp-5);
  box-shadow:
    inset 0 0.5px 0 var(--gl-d-specular),
    var(--gl-d-depth);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.clinica-pilares > div:hover {
  background: rgba(2,72,109,0.38);
  border-color: rgba(167,204,236,0.2);
  transform: translateY(-2px);
}

/* Photo captions — enhanced dark glass pills */
.photo-caption {
  background: rgba(2,72,109,0.18);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  border: 0.5px solid rgba(167,204,236,0.12);
  box-shadow: inset 0 0.5px 0 var(--gl-d-specular);
}

/* Photos — glass frame */
.clinica-photo {
  border: 0.5px solid rgba(167,204,236,0.08);
  box-shadow: inset 0 0.5px 0 rgba(167,204,236,0.1);
}

/* Legibility safeguard — pilar desc */
.pilar-desc {
  color: rgba(244,243,239,0.72);
}


/* ════════════════════════════════════════════════
   T E S T I M O N I O S
   ════════════════════════════════════════════════ */

/* Ambient orb 1 — Zona Azul glow */
.testimonios::before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gl-orb-zona), transparent 65%);
  bottom: 10%; right: -4%;
  pointer-events: none;
}
/* Ambient orb 2 — Brisa Verde warmth */
.testimonios::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gl-orb-brisa), transparent 65%);
  top: 8%; left: -2%;
  pointer-events: none;
}

/* Cards — frosted glass */
.testimonial-card {
  background: rgba(255,255,255,0.42);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  border: 0.5px solid var(--gl-l-border);
  box-shadow:
    inset 0 0.5px 0 var(--gl-l-specular),
    var(--gl-l-depth);
}
.testimonial-card:hover {
  background: rgba(255,255,255,0.55);
  border-color: rgba(167,204,236,0.3);
}

/* Author divider — glass separator */
.testimonial-author {
  border-top-color: rgba(167,204,236,0.18);
}

/* Avatar — glass disc */
.testimonial-avatar {
  background: rgba(197,213,221,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.4);
}


/* ════════════════════════════════════════════════
   U B I C A C I Ó N
   ════════════════════════════════════════════════ */

/* Map frame — glass inset */
.ubicacion-map {
  border: 0.5px solid var(--gl-l-border);
  box-shadow:
    inset 0 0.5px 0 var(--gl-l-specular),
    0 4px 16px rgba(2,72,109,0.05);
}

/* Info row — glass strip */
.ubicacion-info {
  border-top: none;
  background: var(--gl-l-bg);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.67)) saturate(1.2);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.67)) saturate(1.2);
  border: 0.5px solid var(--gl-l-border);
  border-radius: var(--r-calmo);
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-6);
  box-shadow:
    inset 0 0.5px 0 var(--gl-l-specular),
    var(--gl-l-depth);
}


/* ════════════════════════════════════════════════
   C T A  /  C O N T A C T O
   ════════════════════════════════════════════════ */

/* Ambient orb */
.cta-section::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gl-orb-calma), transparent 65%);
  top: -10%; left: 10%;
  pointer-events: none;
}

/* Card — deep glass panel with vivid Zona Azul */
.cta-card {
  background: rgba(2,72,109,0.96);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(1.3);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(1.3);
  border: 0.5px solid rgba(167,204,236,0.10);
  box-shadow:
    inset 0 0.5px 0 rgba(167,204,236,0.14),
    0 8px 40px rgba(2,72,109,0.22);
}

/* Form panel — glass inset within dark card */
.cta-right {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.5));
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.5));
  border: 0.5px solid rgba(167,204,236,0.08);
  border-radius: var(--r-calmo);
  padding: var(--sp-6);
  box-shadow: inset 0 0.5px 0 rgba(167,204,236,0.12);
}

/* Form inputs — glass fields */
.cta-form .form-input,
.cta-form .form-select {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(167,204,236,0.1);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cta-form .form-input:focus,
.cta-form .form-select:focus {
  border-color: rgba(167,204,236,0.3);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.05),
    0 0 0 3px rgba(167,204,236,0.1);
}

/* Submit — SOLID. Never glass (per rules) */
.btn-submit {
  box-shadow: 0 2px 8px rgba(2,72,109,0.1);
}


/* ════════════════════════════════════════════════
   F O O T E R
   ════════════════════════════════════════════════ */
.footer {
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.5)) saturate(1.2);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.5)) saturate(1.2);
  border-top: 0.5px solid var(--gl-l-border);
  box-shadow: inset 0 0.5px 0 var(--gl-l-specular);
}


/* ════════════════════════════════════════════════
   W H A T S A P P   F L O A T
   ════════════════════════════════════════════════ */
.wa-float {
  background: rgba(2,72,109,0.72);
  backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * 0.83)) saturate(var(--gl-saturate));
  border: 0.5px solid rgba(167,204,236,0.12);
  box-shadow:
    inset 0 0.5px 0 var(--gl-d-specular),
    0 4px 20px rgba(2,72,109,0.2);
}
.wa-float:hover {
  background: rgba(1,51,78,0.78);
  box-shadow:
    inset 0 0.5px 0 var(--gl-d-specular),
    0 6px 24px rgba(2,72,109,0.25);
}


/* ════════════════════════════════════════════════
   L E G I B I L I T Y

   Contrast ratios verified per surface:
   ─────────────────────────────────────
   Light glass (~rgba 255,255,255,0.48)
   on white/arena bg:
     Zona Azul #02486D  → eff bg ≈ #f7f7f5 → ~9.3:1  ✓ AAA
     Mar Sereno #5B8AA8 → eff bg ≈ #f7f7f5 → ~3.3:1  ✓ AA-large
     Mar Sereno Dark #44748F → ~4.7:1 ✓ AA (body text)

   Dark glass (~rgba 2,72,109,0.28)
   on Zona Azul bg:
     Arena Suave #F4F3EF → eff bg ≈ #024060 → ~10.8:1 ✓ AAA
     rgba(244,243,239,0.72) → ~7.5:1 ✓ AAA

   Primary buttons: solid Zona Azul, never glass.
   ════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   R E S P O N S I V E
   ════════════════════════════════════════════════ */
@media (max-width: 800px) {
  /* Scale down ambient orbs on tablet */
  .servicios::before, .servicios::after,
  .testimonios::before, .testimonios::after,
  .doctora::before,
  .clinica::before, .clinica::after,
  .cta-section::before {
    transform: scale(0.55);
    opacity: 0.7;
  }

  .cta-right {
    padding: var(--sp-5);
  }

  .ubicacion-info {
    padding: var(--sp-4) var(--sp-5);
  }
}

@media (max-width: 600px) {
  /* Remove ambient orbs on mobile for GPU performance */
  .servicios::before, .servicios::after,
  .testimonios::before, .testimonios::after,
  .doctora::before,
  .clinica::before, .clinica::after,
  .cta-section::before {
    display: none;
  }

  /* Reduce blur for mobile GPUs */
  :root {
    --gl-blur: 16px;
  }

  .ubicacion-info {
    padding: var(--sp-4);
    border-radius: var(--r-sereno);
  }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .clinica-pilares > div,
  .doctora-stats > div,
  .service-card,
  .testimonial-card,
  .wa-float {
    transition-duration: 0.01ms !important;
  }
}