/* ============================================================
   Oxygen Hiperbárica — profundidad, glass y transiciones
   ============================================================ */

/* 1. Fondo ambiental con resplandor (le da vida al glass y a la profundidad) */
body {
  background-image:
    radial-gradient(55% 45% at 12% 8%,  rgba(0,86,215,0.20), transparent 60%),
    radial-gradient(48% 42% at 88% 12%, rgba(0,218,243,0.16), transparent 58%),
    radial-gradient(52% 46% at 50% 100%, rgba(0,200,83,0.14), transparent 60%),
    radial-gradient(42% 42% at 85% 90%, rgba(107,56,212,0.14), transparent 58%);
  background-attachment: fixed;
}
.dark body {
  background-image:
    radial-gradient(55% 45% at 12% 8%,  rgba(8,102,255,0.28), transparent 60%),
    radial-gradient(48% 42% at 88% 12%, rgba(0,218,243,0.20), transparent 58%),
    radial-gradient(52% 46% at 50% 100%, rgba(0,200,83,0.18), transparent 60%),
    radial-gradient(42% 42% at 85% 90%, rgba(132,85,239,0.20), transparent 58%);
}

/* 2. Secciones translúcidas → el resplandor del fondo se ve a través */
section,
footer {
  background-color: transparent !important;
}

/* 3. Tarjetas glass (transparencia + blur + borde luminoso) */
:is(.bg-clinical-white, .bg-surface-light):is(.rounded-2xl, .rounded-xl) {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.40)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.80),
    0 1px 2px rgba(13,33,63,0.05),
    0 8px 24px rgba(13,33,63,0.10),
    0 22px 48px rgba(13,33,63,0.08);
  transition:
    transform .5s cubic-bezier(.2,.7,.2,1),
    box-shadow .5s cubic-bezier(.2,.7,.2,1),
    border-color .4s ease,
    background .4s ease;
}
.dark :is(.bg-clinical-white, .bg-surface-light):is(.rounded-2xl, .rounded-xl) {
  background:
    linear-gradient(160deg, rgba(40,44,48,0.55), rgba(17,19,22,0.38)) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 1px 2px rgba(0,0,0,0.40),
    0 8px 24px rgba(0,0,0,0.45),
    0 24px 56px rgba(0,0,0,0.35);
}

/* 4. Elevación + glow al pasar el cursor */
:is(.bg-clinical-white, .bg-surface-light):is(.rounded-2xl, .rounded-xl):hover {
  transform: translateY(-6px);
  border-color: rgba(0,86,215,0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 10px rgba(13,33,63,0.08),
    0 16px 40px rgba(13,33,63,0.16),
    0 28px 72px rgba(0,86,215,0.14);
}
.dark :is(.bg-clinical-white, .bg-surface-light):is(.rounded-2xl, .rounded-xl):hover {
  border-color: rgba(179,197,255,0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(0,0,0,0.40),
    0 16px 40px rgba(0,0,0,0.50),
    0 28px 72px rgba(8,102,255,0.22);
}

/* 5. Botones CTA (rounded-full) con elevación suave */
a.rounded-full,
button.rounded-full {
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, filter .3s ease;
  will-change: transform;
}
a.rounded-full:hover,
button.rounded-full:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,86,215,0.28);
}
.dark a.rounded-full:hover,
.dark button.rounded-full:hover {
  box-shadow: 0 10px 28px rgba(8,102,255,0.35);
}
a.rounded-full:active,
button.rounded-full:active {
  transform: translateY(0) scale(0.98);
}

/* 6. Aparición suave al hacer scroll (activada por JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(70px) scale(0.97);
  filter: blur(6px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,.84,.3,1), filter .9s ease;
  will-change: opacity, transform, filter;
}
.js .reveal.in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 7. Transición suave al cambiar tema claro/oscuro */
body,
nav,
section,
footer {
  transition: background-color .5s ease, background-image .5s ease, color .5s ease;
}

/* 8. Accesibilidad: respetar movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* 9. Icono decorativo "air": al fondo, casi transparente (no compite con la lista) */
span.text-\[200px\] {
  opacity: 0.07;
  filter: saturate(0.3);
  z-index: 0;
}

/* 10. Esfera de oxígeno (burbuja de cristal, se difumina en el fondo claro/oscuro) */
.oxygen-sphere {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 500px;
  height: 500px;
  max-width: 62vw;
  max-height: 62vw;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.55), transparent 33%),
    radial-gradient(circle at 50% 50%, rgba(0,218,243,.14), rgba(0,86,215,.05) 50%, transparent 72%),
    radial-gradient(circle at 72% 82%, rgba(0,200,83,.12), transparent 46%);
  box-shadow:
    inset 0 0 80px rgba(255,255,255,.18),
    inset -30px -45px 100px rgba(0,86,215,.14),
    0 0 160px rgba(0,218,243,.12);
  animation: oxygen-float 16s ease-in-out infinite;
}
.dark .oxygen-sphere {
  border-color: rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.16), transparent 33%),
    radial-gradient(circle at 50% 50%, rgba(0,218,243,.20), rgba(8,102,255,.12) 50%, transparent 72%),
    radial-gradient(circle at 72% 82%, rgba(0,200,83,.16), transparent 46%);
  box-shadow:
    inset 0 0 80px rgba(255,255,255,.06),
    inset -30px -45px 100px rgba(8,102,255,.18),
    0 0 160px rgba(0,218,243,.14);
}
@keyframes oxygen-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-26px, -32px); }
}

/* Burbujitas dentro de la esfera (ebullición lenta) */
.oxygen-sphere .bubble {
  position: absolute;
  bottom: -24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(0,218,243,.22) 55%, transparent 74%);
  box-shadow: 0 0 12px rgba(0,218,243,.30), inset 0 0 8px rgba(255,255,255,.55);
  animation: bubble-rise linear infinite;
}
.dark .oxygen-sphere .bubble {
  border-color: rgba(255,255,255,.22);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(0,218,243,.30) 55%, transparent 74%);
  box-shadow: 0 0 12px rgba(0,218,243,.40), inset 0 0 8px rgba(255,255,255,.30);
}
.oxygen-sphere .bubble:nth-child(1){left:16%;width:40px;height:40px;animation-duration:8s}
.oxygen-sphere .bubble:nth-child(2){left:40%;width:20px;height:20px;animation-duration:10s;animation-delay:1.4s}
.oxygen-sphere .bubble:nth-child(3){left:66%;width:28px;height:28px;animation-duration:9s;animation-delay:3s}
.oxygen-sphere .bubble:nth-child(4){left:30%;width:14px;height:14px;animation-duration:12s;animation-delay:.7s}
.oxygen-sphere .bubble:nth-child(5){left:54%;width:34px;height:34px;animation-duration:11s;animation-delay:2.2s}
.oxygen-sphere .bubble:nth-child(6){left:78%;width:18px;height:18px;animation-duration:13s;animation-delay:4s}
.oxygen-sphere .bubble:nth-child(7){left:46%;width:12px;height:12px;animation-duration:14s;animation-delay:1.8s}
.oxygen-sphere .bubble:nth-child(8){left:22%;width:24px;height:24px;animation-duration:10.5s;animation-delay:5s}
@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .95; }
  85%  { opacity: .55; }
  100% { transform: translateY(-520px) translateX(22px); opacity: 0; }
}