/**
 * Oniros SPA — tema claro (contraste accesible)
 * Se carga DESPUÉS de oniros-app.css para sobreescribir el tema oscuro del bundle.
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body,
#root {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  background: linear-gradient(155deg, #eef6fc 0%, #e8f5f0 42%, #f6fafc 100%) !important;
  background-attachment: fixed;
  color: #143a5c !important;
}

/* ——— Fondos oscuros → claros ——— */
.bg-\[\#0a0a0c\],
.bg-\[\#0a0a0c\]\/80,
.bg-\[\#070b14\],
.bg-\[\#0a0f1d\],
.bg-\[\#050507\],
.bg-\[\#111116\],
.h-screen.bg-\[\#0a0a0c\],
.min-h-screen.bg-\[\#0a0a0c\] {
  background-color: transparent !important;
}

.bg-\[\#0a0a0c\]\/80,
nav.bg-\[\#0a0a0c\]\/80 {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px);
}

.bg-\[\#0a0a0c\]:not(nav),
.bg-\[\#111116\],
.bg-\[\#050507\],
.relative.p-8.rounded-3xl.bg-\[\#0a0a0c\] {
  background-color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(20, 58, 80, 0.09) !important;
}

.bg-\[\#050507\] {
  background: linear-gradient(180deg, #eef6fc 0%, #e8f5f0 100%) !important;
  border-color: rgba(43, 110, 168, 0.14) !important;
}

.from-\[\#0a0a0c\],
.from-\[\#1a237e\] {
  --tw-gradient-from: rgba(255, 255, 255, 0.92) !important;
}

.to-\[\#311b92\] {
  --tw-gradient-to: rgba(232, 245, 240, 0.4) !important;
}

.bg-slate-900,
.bg-slate-950,
.bg-gray-900,
.bg-\[\#0f172a\] {
  background-color: #ffffff !important;
}

.bg-slate-900\/80,
.bg-slate-900\/50,
.bg-black\/80,
.bg-black\/90 {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
}

.bg-white\/5,
.bg-white\/\[0\.02\] {
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(20, 58, 80, 0.08) !important;
}

.bg-white\/\[0\.02\] {
  background-color: rgba(238, 246, 252, 0.65) !important;
  box-shadow: none !important;
}

.bg-indigo-600\/5,
.bg-indigo-600\/10,
.bg-indigo-500\/10 {
  background-color: #eef6fc !important;
}

.bg-blue-500\/5,
.bg-purple-500\/5,
.bg-purple-600\/5,
.bg-orange-500\/5 {
  background-color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(20, 58, 80, 0.07) !important;
}

.bg-indigo-600\/10.rounded-2xl {
  background-color: #eef6fc !important;
}

/* ——— Bordes ——— */
.border-slate-800,
.border-slate-700 {
  border-color: rgba(43, 110, 168, 0.22) !important;
}

.border-white\/5,
.border-white\/10 {
  border-color: rgba(43, 110, 168, 0.28) !important;
  border-width: 1px !important;
}

.border-blue-500\/20,
.border-purple-500\/20,
.border-orange-500\/20,
.border-indigo-500\/20,
.border-indigo-500\/30 {
  border-color: rgba(43, 110, 168, 0.32) !important;
  border-width: 1px !important;
}

.border-\[\#0a0a0c\],
.border-4.border-\[\#0a0a0c\] {
  border-color: #ffffff !important;
}

.hover\:border-white\/30:hover,
.hover\:border-indigo-500\/30:hover {
  border-color: rgba(43, 110, 168, 0.5) !important;
}

.hover\:bg-indigo-500\/5:hover {
  background-color: #eef6fc !important;
}

.hover\:bg-white\/10:hover {
  background-color: #eef6fc !important;
}

/* ——— Texto ——— */
.text-white {
  color: #143a5c !important;
}

.text-slate-300 {
  color: #2a4a62 !important;
}

.text-slate-400,
.text-slate-500,
.text-gray-400 {
  color: #3d5a72 !important;
}

.text-indigo-200,
.text-indigo-200\/50,
.text-indigo-300,
.text-violet-200 {
  color: #1f5a8f !important;
}

.text-indigo-400,
.text-indigo-500 {
  color: #2b6ea8 !important;
}

.bg-clip-text,
.text-transparent.bg-clip-text,
.bg-clip-text.text-transparent,
span.text-transparent {
  background-image: linear-gradient(120deg, #164a72 0%, #1d6554 50%, #1f5a8f 100%) !important;
  background-size: 100% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #164a72 !important;
}

.from-indigo-400 {
  --tw-gradient-from: #164a72 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-purple-400 {
  --tw-gradient-to: #247a66 !important;
}

/* Texto blanco en botones/fondos de color */
.bg-indigo-600,
.bg-indigo-600.text-white,
.bg-indigo-600 .text-white,
.bg-violet-600,
.bg-violet-600 .text-white,
.bg-blue-600,
.bg-blue-600 .text-white,
button.bg-indigo-600,
a.bg-indigo-600,
a[class*='bg-indigo-600'],
button[class*='bg-indigo-600'],
.rounded-full.bg-indigo-600,
.rounded-full.bg-indigo-600 .text-white,
.w-10.h-10.bg-indigo-600,
.w-10.h-10.bg-indigo-600 .text-white,
.w-8.h-8.bg-indigo-600 .text-white,
.w-12.h-12.bg-indigo-600 .text-white,
.absolute.top-4.left-4.bg-indigo-600 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.bg-indigo-600,
.bg-violet-600,
.bg-blue-600 {
  background-color: #2b6ea8 !important;
  border-color: #1f5a8f !important;
}

.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-violet-700:hover {
  background-color: #1f5a8f !important;
}

[class*='bg-gradient-to-r'].bg-indigo-600,
button[class*='bg-indigo-600'],
a[class*='bg-indigo-600'] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Botones outline del nav */
a.border-white\/10,
button.border-white\/10,
[class*='border-white/10'][class*='text-slate-400'],
[class*='border-white/10'].text-slate-400 {
  border-color: rgba(43, 110, 168, 0.38) !important;
  color: #164a72 !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(20, 58, 80, 0.06) !important;
}

a.border-white\/10:hover,
button.border-white\/10:hover {
  color: #1f5a8f !important;
  border-color: rgba(43, 110, 168, 0.55) !important;
  background-color: #eef6fc !important;
}

a.text-slate-400.hover\:text-white:hover,
.hover\:text-white:hover {
  color: #1f5a8f !important;
}

/* Nav y header */
header,
nav,
nav.fixed {
  background-color: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(43, 110, 168, 0.14) !important;
  box-shadow: 0 2px 16px rgba(20, 58, 80, 0.07) !important;
}

nav.bg-transparent {
  background-color: transparent !important;
  box-shadow: none !important;
}

span.text-2xl.font-serif.text-white,
.text-xl.font-serif.font-bold.text-white {
  color: #143a5c !important;
}

.group:hover span.text-white,
.group-hover\:text-indigo-400:hover {
  color: #2b6ea8 !important;
}

.h-6.w-px.bg-white\/10,
.h-px.bg-white\/5 {
  background-color: rgba(43, 110, 168, 0.18) !important;
}

/* Tarjetas */
.group.p-8.rounded-3xl,
.relative.p-8.rounded-3xl,
.p-10.rounded-3xl.border,
.border-white\/10.rounded-3xl,
.group.bg-white\/5.border.rounded-3xl,
.backdrop-blur-xl {
  background: #ffffff !important;
  border: 1px solid rgba(43, 110, 168, 0.22) !important;
  box-shadow: 0 8px 28px rgba(20, 58, 80, 0.08) !important;
}

.bg-indigo-600\/5 .text-slate-400,
section .text-slate-400.font-light,
section .text-slate-400.italic {
  color: #2a4a62 !important;
}

h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white,
.font-serif.text-white,
.text-2xl.font-serif.text-white {
  color: #143a5c !important;
}

.group-hover\:text-indigo-400:hover,
.group:hover .group-hover\:text-indigo-400 {
  color: #2b6ea8 !important;
}

nav a.bg-indigo-600,
header a.bg-indigo-600,
a.bg-indigo-600.border-indigo-500,
a.bg-indigo-600.rounded-full {
  background-color: #2b6ea8 !important;
  border-color: #1f5a8f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(43, 110, 168, 0.28) !important;
}

nav a.bg-indigo-600:hover,
header a.bg-indigo-600:hover,
a.bg-indigo-600.border-indigo-500:hover {
  background-color: #1f5a8f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.border-indigo-500\/20.rounded-full,
.border-indigo-500\/30.rounded-full,
span.border-indigo-500\/20,
span.border-indigo-500\/30,
span.inline-block.border-indigo-500\/20 {
  border-color: rgba(43, 110, 168, 0.35) !important;
  color: #1f5a8f !important;
  background-color: #eef6fc !important;
  -webkit-text-fill-color: #1f5a8f !important;
}

/* Formularios de contacto */
input.bg-white\/5,
textarea.bg-white\/5 {
  background-color: #ffffff !important;
  color: #143a5c !important;
  border-color: rgba(43, 110, 168, 0.28) !important;
}

input.bg-white\/5::placeholder,
textarea.bg-white\/5::placeholder {
  color: #3d5a72 !important;
  opacity: 1;
}

button.bg-white\/5.border-white\/10 {
  background-color: #ffffff !important;
  color: #164a72 !important;
}

/* Cita sobre imagen */
.absolute.bottom-10 .bg-white\/5.backdrop-blur-md {
  background-color: rgba(255, 255, 255, 0.94) !important;
}

.absolute.bottom-10 .text-white.font-serif.italic {
  color: #143a5c !important;
}

/* Menú móvil */
.fixed.inset-0.z-\[60\].bg-\[\#0a0a0c\] {
  background-color: #ffffff !important;
}

.lg\:hidden.text-white {
  color: #164a72 !important;
}

/* Orbes decorativos */
.blur-\[120px\],
.blur-\[100px\],
.blur-3xl.opacity-30,
.bg-indigo-600\/10.blur-\[120px\],
.bg-purple-600\/5.blur-\[120px\] {
  opacity: 0.12 !important;
}

.border-white\/20.rounded-full {
  border-color: rgba(43, 110, 168, 0.35) !important;
}

/* Footer — iconos sociales */
a.bg-white\/5.rounded-full,
.w-10.h-10.bg-white\/5 {
  background-color: #eef6fc !important;
  color: #2b6ea8 !important;
  border: 1px solid rgba(43, 110, 168, 0.2);
}

a.bg-white\/5.rounded-full:hover,
.hover\:bg-indigo-600:hover {
  background-color: #2b6ea8 !important;
  color: #ffffff !important;
}

/* Cerrar sesión — solo visible con sesión activa */
button.border-red-500\/30.text-red-400,
[class*='border-red-500/30'][class*='text-red-400'] {
  border-color: rgba(220, 38, 38, 0.35) !important;
  color: #b91c1c !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.08) !important;
}

button.border-red-500\/30.text-red-400:hover,
[class*='border-red-500/30'][class*='text-red-400']:hover {
  border-color: rgba(220, 38, 38, 0.55) !important;
  color: #991b1b !important;
  background-color: #fef2f2 !important;
}

button.text-lg.text-red-400.font-medium {
  color: #b91c1c !important;
}
