/* =====================================================================
   MUNINFOR · DARK TECH THEME
   Tema oscuro/neón compartido por el sitio (estático + Laravel/Blade).
   Sobrescribe la paleta clara hardcodeada (inline styles + utilidades
   Tailwind) y añade glassmorphism, glow, degradados y animaciones.
   Se aplica añadiendo <link> a este archivo + <script> a muninfor-theme.js
   ===================================================================== */

:root {
    /* Fondos (aclarados para mejor contraste/legibilidad) */
    --mun-bg:           #0c1228;
    --mun-bg-2:         #111a38;
    --mun-surface:      #18213f;
    --mun-surface-soft: rgba(255, 255, 255, 0.06);
    --mun-surface-hover:rgba(255, 255, 255, 0.10);
    --mun-border:       rgba(255, 255, 255, 0.12);
    --mun-border-glow:  rgba(56, 189, 248, 0.45);

    /* Texto (más brillante) */
    --mun-text:         #f3f6ff;
    --mun-text-muted:   #c4cdec;
    --mun-text-dim:     #8e99bf;

    /* Acentos neón */
    --mun-cyan:   #22d3ee;
    --mun-blue:   #3b82f6;
    --mun-violet: #a855f7;
    --mun-pink:   #ec4899;
    --mun-accent: var(--mun-cyan);

    /* Degradados */
    --mun-grad:        linear-gradient(135deg, #22d3ee 0%, #3b82f6 45%, #a855f7 100%);
    --mun-grad-soft:   linear-gradient(135deg, rgba(34,211,238,.18), rgba(168,85,247,.18));
    --mun-glow:        0 0 0 1px rgba(56,189,248,.25), 0 0 28px rgba(56,189,248,.25);
    --mun-glow-violet: 0 0 32px rgba(168,85,247,.35);
}

/* ───────────────────────── Base ───────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--mun-bg) !important;
    color: var(--mun-text) !important;
    /* Mesh de degradados estáticos + el JS añade blobs animados encima */
    background-image:
        radial-gradient(900px 600px at 12% -5%, rgba(59,130,246,.18), transparent 60%),
        radial-gradient(800px 600px at 100% 0%, rgba(168,85,247,.16), transparent 55%),
        radial-gradient(700px 700px at 50% 120%, rgba(34,211,238,.12), transparent 60%) !important;
    background-attachment: fixed !important;
}

::selection {
    background: rgba(34, 211, 238, .35);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #070a18; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--mun-blue), var(--mun-violet));
    border-radius: 99px;
    border: 2px solid #070a18;
}

/* ──────────── Overrides de la paleta clara inline ────────────
   Los estilos inline solo se vencen con !important + selectores de
   atributo que detectan los colores hardcodeados del sitio.        */

/* Fondos blancos -> superficie oscura */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background:white"],
[style*="background-color:white"] {
    background-color: var(--mun-surface) !important;
    background-image: none !important;
}

/* Fondos gris muy claro -> superficie suave */
[style*="background:#f9fafb"],
[style*="background: #f9fafb"],
[style*="background:#f3f4f6"],
[style*="background: #f3f4f6"],
[style*="background:#f8fafc"],
[style*="background:#f1f5f9"],
[style*="background:#e5e7eb"],
[style*="background-color:#f9fafb"],
[style*="background-color:#f3f4f6"] {
    background-color: var(--mun-surface-soft) !important;
    background-image: none !important;
}

/* Enlaces y botones de navegación: forzar color claro SIEMPRE y hover cian.
   Necesario porque los handlers onmouseover/onmouseout inline fijan el color
   por JS (#374151 / #0A0D31 / #EF4444), lo que re-serializa el style y rompe
   los selectores por color. Con !important ganamos a ese estilo inline. */
header nav a,
header nav button,
nav a,
nav button {
    color: var(--mun-text) !important;
}
header nav a:hover,
header nav button:hover,
nav a:hover,
nav button:hover {
    color: var(--mun-cyan) !important;
}
/* Las cabeceras de categoría del mega-menú en cian (no son enlaces) */
nav h4, header h4 { color: var(--mun-cyan) !important; }

/* Nav fija blanca translúcida -> glass oscuro */
[style*="rgba(255,255,255,0.97)"],
[style*="rgba(255, 255, 255, 0.97)"],
[style*="rgba(255,255,255,0.95)"],
[style*="rgba(255,255,255,0.9)"] {
    background-color: rgba(7, 10, 24, .82) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--mun-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.45) !important;
}

/* Texto: navy y grises oscuros -> claro */
[style*="color:#0A0D31"],
[style*="color:#0a0d31"],
[style*="color:#000"],
[style*="color: #000"],
[style*="color:#111827"],
[style*="color:#1f2937"],
[style*="color:#0f172a"],
[style*="color:#1e293b"] {
    color: var(--mun-text) !important;
}

[style*="color:#374151"],
[style*="color: #374151"],
[style*="color:#4b5563"],
[style*="color:#334155"],
[style*="color:#475569"] {
    color: var(--mun-text-muted) !important;
}

[style*="color:#6b7280"],
[style*="color: #6b7280"],
[style*="color:#9ca3af"],
[style*="color:#64748b"],
[style*="color:#94a3b8"] {
    color: var(--mun-text-dim) !important;
}

/* Bordes claros -> borde tenue */
[style*="border:1px solid #f3f4f6"],
[style*="border:1px solid #e5e7eb"],
[style*="border: 1px solid #e5e7eb"],
[style*="border:1px solid #e2e8f0"],
[style*="border-bottom:1px solid #f3f4f6"],
[style*="border-bottom: 1px solid #f3f4f6"] {
    border-color: var(--mun-border) !important;
}

/* Sombras claras -> sombras profundas */
[style*="box-shadow:0 20px 60px rgba(0,0,0,0.18)"],
[style*="box-shadow:0 10px 40px rgba(0,0,0,0.15)"],
[style*="box-shadow:0 4px 12px rgba(0,0,0,0.1)"],
[style*="box-shadow:0 1px 3px rgba(0,0,0,0.1)"] {
    box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
}

/* Acento rojo de marca -> cian neón */
[style*="color:#EF4444"],
[style*="color: #EF4444"],
[style*="color:#ef4444"],
[style*="color:#dc2626"],
[style*="color:#e11d48"] {
    color: var(--mun-cyan) !important;
}

[style*="background:#EF4444"],
[style*="background-color:#EF4444"],
[style*="background:#ef4444"],
[style*="background-color:#ef4444"],
[style*="background:#dc2626"] {
    background: var(--mun-grad) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(34,211,238,.35) !important;
}

/* ──────── Overrides de utilidades Tailwind (clases en markup) ──────── */

.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100,
.bg-neutral-50, .bg-neutral-100 {
    background-color: var(--mun-surface) !important;
    background-image: none !important;
}
.bg-gray-900, .bg-slate-900, .bg-black, .bg-neutral-900 {
    background-color: var(--mun-bg-2) !important;
}
.text-gray-900, .text-slate-900, .text-black, .text-gray-800, .text-slate-800 {
    color: var(--mun-text) !important;
}
.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600 {
    color: var(--mun-text-muted) !important;
}
.text-gray-500, .text-gray-400, .text-slate-500, .text-slate-400 {
    color: var(--mun-text-dim) !important;
}
.text-red-500, .text-red-600, .text-rose-500 { color: var(--mun-cyan) !important; }
.bg-red-500, .bg-red-600, .bg-rose-500 {
    background: var(--mun-grad) !important;
    box-shadow: 0 8px 24px rgba(34,211,238,.35) !important;
}
.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200 {
    border-color: var(--mun-border) !important;
}
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: 0 18px 50px rgba(0,0,0,.5) !important;
}

/* ── Clases Tailwind con valor arbitrario (text-[#hex] / bg-[#hex]) ──
   El sitio define títulos con text-[#0A0D31] y similares; hay que
   sobrescribirlos para que sean legibles sobre fondo oscuro.          */

[class*="text-[#0A0D31]"], [class*="text-[#0a0d31]"],
[class*="text-[#030041]"], [class*="text-[#000000]"],
[class*="text-[#000]"], [class*="text-[#111827]"],
[class*="text-[#1f2937]"], [class*="text-[#0f172a]"],
.text-black {
    color: var(--mun-text) !important;
}

[class*="text-[#374151]"], [class*="text-[#4b5563]"],
[class*="text-[#6b7280]"], [class*="text-[#64748b]"] {
    color: var(--mun-text-muted) !important;
}

/* Fondos arbitrarios claros -> superficie oscura (los oscuros se dejan) */
[class*="bg-[#F5F5F5]"], [class*="bg-[#f5f5f5]"],
[class*="bg-[#fff]"], [class*="bg-[#ffffff]"],
[class*="bg-[#FFFFFF]"], [class*="bg-[#fafafa]"] {
    background-color: var(--mun-surface) !important;
}

/* ───────────────────── Componentes / realces ───────────────────── */

/* Tarjetas: cualquier bloque blanco redondeado se vuelve "glass" */
[style*="border-radius:16px"][style*="background:#fff"],
[style*="border-radius:12px"][style*="background:#fff"],
[style*="border-radius:20px"][style*="background:#fff"],
[style*="border-radius:24px"][style*="background:#fff"] {
    background: var(--mun-surface-soft) !important;
    border: 1px solid var(--mun-border) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
[style*="border-radius:16px"][style*="background:#fff"]:hover,
[style*="border-radius:12px"][style*="background:#fff"]:hover,
[style*="border-radius:20px"][style*="background:#fff"]:hover,
[style*="border-radius:24px"][style*="background:#fff"]:hover {
    transform: translateY(-6px);
    border-color: var(--mun-border-glow) !important;
    box-shadow: var(--mun-glow), 0 26px 60px rgba(0,0,0,.6) !important;
}

/* Los desplegables de la cabecera (mega-menú Servicios / Productos y menú
   móvil) deben tener fondo SÓLIDO, no el glass translúcido de las tarjetas.
   Se seleccionan estructuralmente por [x-show] / clase, porque Alpine
   re-serializa el atributo style (background:#fff -> rgb(...)) al alternar
   display, lo que rompe los selectores [style*="background:#fff"]. */
header [x-show],
nav [x-show],
header [x-data] > div[style*="position:absolute"],
nav [x-data] > div[style*="position:absolute"] {
    background: rgba(11, 16, 34, 0.98) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--mun-border) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.7) !important;
}

/* Puente invisible: cubre el hueco entre el botón y el panel del mega-menú
   para que no se cierre al mover el cursor hacia abajo para entrar en él. */
header [x-data] > [x-show]::before,
nav [x-data] > [x-show]::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -20px; height: 22px;
}

/* Imágenes: integrarlas mejor en oscuro */
img { border-radius: inherit; }

/* Logo negro de las páginas estáticas -> blanco sobre la nav oscura y más grande */
nav img[src*="logo-muninfor-black"],
nav img[src*="logo-black"] {
    filter: brightness(0) invert(1) !important;
    height: 40px !important;
    width: auto !important;
}

/* ── Iconos y logos sobre tarjetas oscuras ────────────────────────────
   Muchos iconos/logos están pensados para fondo claro y se pierden en
   oscuro. Recoloreamos los SVG y ponemos un "chip" blanco tras los logos
   raster (productos y partners) para que se vean correctamente.        */

/* Iconos SVG: el navy de relleno/trazo pasa a cian (resaltan en oscuro) */
svg [fill="#0A0D31"], svg[fill="#0A0D31"],
svg [fill="#0a0d31"], svg [fill="#000000"], svg [fill="#000"] {
    fill: var(--mun-cyan) !important;
}
svg [stroke="#0A0D31"], svg [stroke="#0a0d31"] {
    stroke: var(--mun-cyan) !important;
}

/* Logos raster dentro de las tarjetas de servicio -> chip blanco */
article .h-20 img {
    background: #fff !important;
    border-radius: 14px;
    padding: 8px;
    box-sizing: border-box;
}

/* Logos de partners/fabricantes -> chip blanco para que siempre se vean */
img[src*="/socios/"] {
    background: #fff !important;
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
}

/* Banners/sellos con logos oscuros (LeopardSync, INCIBE...) -> fondo claro
   para que las partes negras del logo no se pierdan en oscuro. */
img[src*="banner-leopard-incibe"],
img[src*="incibe"],
img[src*="leopard-incibe"] {
    background: #fff !important;
    border-radius: 18px;
    padding: 20px 28px;
    box-sizing: border-box;
}

/* La sección de servicios usa bg-red.jpg (imagen clara) que choca con el
   tema oscuro y oculta el título claro. La sustituimos por un degradado
   oscuro acorde al tema. */
[style*="bg-red.jpg"],
[style*="bg-red"] {
    background-image:
        radial-gradient(900px 500px at 0% 0%, rgba(59,130,246,.20), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(168,85,247,.20), transparent 60%) !important;
    background-color: var(--mun-bg-2) !important;
}

/* Enlaces neón con subrayado animado SOLO en contenido largo (blog/prosa) */
.mun-prose a {
    color: var(--mun-cyan);
    text-decoration: none;
    background-image: linear-gradient(var(--mun-cyan), var(--mun-cyan));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .3s;
}
.mun-prose a:hover { background-size: 100% 1.5px; }

/* Tarjetas enlazadas por completo: el texto hereda el color claro uniforme
   (antes el contenido envuelto en <a> salía en cian de forma incoherente). */
article a { color: inherit; text-decoration: none; }
/* Acento sutil: viñetas en cian, texto claro */
article li::marker { color: var(--mun-cyan); }

/* Botón neón reutilizable */
.mun-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.6rem; border-radius: 999px;
    font-weight: 600; color: #fff !important; text-decoration: none;
    background: var(--mun-grad);
    background-size: 200% 100%;
    box-shadow: 0 10px 30px rgba(59,130,246,.4);
    border: none; cursor: pointer;
    transition: background-position .5s, transform .25s, box-shadow .25s;
}
.mun-btn:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(168,85,247,.5);
}

/* Texto con degradado */
.mun-gradient-text {
    background: var(--mun-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ───────────────────────── Animaciones ───────────────────────── */

/* Blobs de fondo animados (los inyecta el JS) */
.mun-bg-fx {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.mun-blob {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
    animation: mun-float 18s ease-in-out infinite;
}
.mun-blob.b1 { width: 480px; height: 480px; top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(59,130,246,.55), transparent 70%); }
.mun-blob.b2 { width: 520px; height: 520px; top: 30%; right: -160px;
    background: radial-gradient(circle, rgba(168,85,247,.5), transparent 70%); animation-delay: -6s; }
.mun-blob.b3 { width: 420px; height: 420px; bottom: -120px; left: 35%;
    background: radial-gradient(circle, rgba(34,211,238,.45), transparent 70%); animation-delay: -12s; }

@keyframes mun-float {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-50px) scale(1.1); }
    66%     { transform: translate(-30px,40px) scale(.95); }
}

/* Barra de progreso de scroll (la inyecta el JS) */
.mun-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--mun-grad); z-index: 9999;
    box-shadow: 0 0 12px rgba(34,211,238,.7);
}

/* Scroll-reveal: el JS añade .mun-reveal (+ data-anim) y luego .mun-in */
/* Reveal basado en @keyframes: la animación se reproduce SIEMPRE al añadir
   .mun-in (aunque el estado inicial no se haya pintado), por eso es fiable
   también para elementos que entran al cargar la página. */
.mun-reveal { opacity: 0; will-change: opacity, transform, filter; }
.mun-reveal.mun-in {
    opacity: 1;
    animation: mun-enter .7s cubic-bezier(.2,.7,.2,1) both;
}
.mun-reveal[data-anim="left"].mun-in  { animation-name: mun-enter-left; }
.mun-reveal[data-anim="right"].mun-in { animation-name: mun-enter-right; }
.mun-reveal[data-anim="down"].mun-in  { animation-name: mun-enter-down; }
.mun-reveal[data-anim="zoom"].mun-in  { animation-name: mun-enter-zoom; animation-duration: .95s; }
.mun-reveal[data-anim="pop"].mun-in   {
    animation-name: mun-enter-pop; animation-duration: .8s;
    animation-timing-function: cubic-bezier(.34,1.4,.5,1);
}

@keyframes mun-enter       { from { opacity:0; transform: translateY(34px); }            to { opacity:1; transform:none; } }
@keyframes mun-enter-left  { from { opacity:0; transform: translateX(-46px); }           to { opacity:1; transform:none; } }
@keyframes mun-enter-right { from { opacity:0; transform: translateX(46px); }            to { opacity:1; transform:none; } }
@keyframes mun-enter-down  { from { opacity:0; transform: translateY(-34px); }           to { opacity:1; transform:none; } }
@keyframes mun-enter-pop   { from { opacity:0; transform: translateY(42px) scale(.93); } to { opacity:1; transform:none; } }
@keyframes mun-enter-zoom  {
    from { opacity:0; transform: scale(.86) translateY(24px); }
    to   { opacity:1; transform:none; }
}


/* ── Movimiento continuo / micro-interacciones ───────────────────── */

/* Elevación + glow al pasar el cursor por tarjetas */
article,
[style*="border-radius:16px"][style*="background:#fff"],
[style*="border-radius:20px"][style*="background:#fff"],
[style*="border-radius:24px"][style*="background:#fff"] {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
article:hover {
    transform: translateY(-8px);
    box-shadow: var(--mun-glow), 0 28px 60px rgba(0,0,0,.6) !important;
    border-color: var(--mun-border-glow) !important;
}

/* Flotación suave y continua de iconos/logos dentro de tarjetas */
article .h-20 img,
article .h-20 svg,
article .h-20 picture {
    animation: mun-bob 5.5s ease-in-out infinite;
}
article:nth-child(2n) .h-20 img,
article:nth-child(2n) .h-20 svg { animation-delay: -2.5s; }
article:nth-child(3n) .h-20 img,
article:nth-child(3n) .h-20 svg { animation-delay: -1.2s; }
article:hover .h-20 img,
article:hover .h-20 svg { transform: scale(1.08); }

@keyframes mun-bob {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}

/* Pulso luminoso del botón flotante de WhatsApp */
a[href*="wa.me"], a[href*="api.whatsapp"], a[href*="whatsapp"],
[class*="whatsapp"] a, .whatsapp-float, #whatsapp-widget a {
    animation: mun-pulse 2.6s ease-in-out infinite;
}
@keyframes mun-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
    50%     { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}

/* Brillo que recorre los botones con degradado */
.mun-btn { position: relative; overflow: hidden; }
.mun-btn::after {
    content: ""; position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: mun-shine 3.2s ease-in-out infinite;
}
@keyframes mun-shine {
    0%, 60% { left: -120%; }
    100%    { left: 140%; }
}

/* Aparición suave de imágenes destacadas (zoom lento) */
@keyframes mun-kenburns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.06); }
}

/* Respeto a usuarios con reduced-motion: sin movimiento, solo aparición */
@media (prefers-reduced-motion: reduce) {
    .mun-blob,
    article .h-20 img,
    article .h-20 svg,
    article .h-20 picture,
    a[href*="wa.me"], a[href*="whatsapp"], [class*="whatsapp"] a,
    .mun-btn::after {
        animation: none !important;
    }
    .mun-reveal, .mun-reveal.mun-in {
        opacity: 1 !important; transform: none !important;
        filter: none !important; animation: none !important; transition: none;
    }
    article:hover { transform: none; }
    html { scroll-behavior: auto; }
}