/* ============================================================
   LIQUID AURORA — capa compartida para BLOG y páginas internas
   Reescribe las clases heredadas (.glass, .glass-card, .text-gradient,
   .article-body, .prose-dark, nav, footer) al nuevo lenguaje visual.
   Se carga DESPUÉS de los <style> en línea para ganar por orden.
   ============================================================ */
:root {
    --bg:#08090e; --bg-2:#0b0d14; --ink:#eef1f7; --muted:#9aa2b4; --faint:#5d6478;
    --a1:#7c8bff; --a2:#57e0c9; --a3:#b388ff; --a4:#ff8fb1; --ring:rgba(124,139,255,0.5);
    --display:'Bricolage Grotesque',system-ui,sans-serif;
    --body:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'Space Grotesk',ui-monospace,monospace;
}

/* ---- Base ---- */
html { scroll-behavior:smooth; }
body {
    background:var(--bg) !important;
    color:var(--ink);
    font-family:var(--body) !important;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
}
body > *:not(.aurora-field) { position:relative; z-index:1; }
::selection { background:var(--a1); color:#07080c; }

.font-display, h1, h2, h3, h4 { font-family:var(--display) !important; letter-spacing:-0.02em; }

/* ---- Fondo biomórfico ---- */
.aurora-field { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
    background:
        radial-gradient(1100px 760px at 82% -8%, rgba(124,139,255,0.12), transparent 60%),
        radial-gradient(960px 680px at -5% 22%, rgba(87,224,201,0.08), transparent 55%),
        radial-gradient(900px 700px at 50% 110%, rgba(179,136,255,0.08), transparent 60%),
        var(--bg); }
.aurora-field .blob { position:absolute; border-radius:45% 55% 52% 48% / 55% 45% 55% 45%;
    filter:blur(64px); opacity:0.5; mix-blend-mode:screen; will-change:transform,border-radius; }
.aurora-field .b1 { width:44vw; height:44vw; left:-8vw; top:2vh;
    background:radial-gradient(circle at 30% 30%,var(--a1),transparent 70%);
    animation:morphA 24s ease-in-out infinite, driftA 36s ease-in-out infinite; }
.aurora-field .b2 { width:38vw; height:38vw; right:-10vw; top:24vh;
    background:radial-gradient(circle at 60% 40%,var(--a2),transparent 70%);
    animation:morphA 28s ease-in-out infinite reverse, driftB 42s ease-in-out infinite; }
.aurora-field .b3 { width:34vw; height:34vw; left:28vw; top:120vh;
    background:radial-gradient(circle at 50% 50%,var(--a3),transparent 70%);
    animation:morphA 32s ease-in-out infinite, driftA 48s ease-in-out infinite; }
@keyframes morphA { 0%,100%{border-radius:45% 55% 52% 48% / 55% 45% 55% 45%}
    33%{border-radius:60% 40% 35% 65% / 40% 60% 45% 60%} 66%{border-radius:38% 62% 60% 40% / 62% 38% 50% 50%} }
@keyframes driftA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5vw,4vh) scale(1.1)} }
@keyframes driftB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,6vh) scale(0.92)} }
@media (prefers-reduced-motion:reduce){ .aurora-field .blob{animation:none !important} }

/* ---- Nav: barra de cristal líquido ---- */
nav.glass {
    background:linear-gradient(180deg, rgba(14,16,24,0.72), rgba(14,16,24,0.5)) !important;
    backdrop-filter:blur(22px) saturate(1.5) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.5) !important;
    border-bottom:1px solid rgba(255,255,255,0.07) !important;
    box-shadow:0 10px 40px -24px rgba(0,0,0,0.9);
}
nav .rounded-lg.bg-gradient-to-br, nav .w-10.h-10.rounded-lg {
    background:linear-gradient(135deg,var(--a1),var(--a3)) !important;
    border-radius:14px !important; color:#07080c !important;
    box-shadow:0 6px 18px -6px rgba(124,139,255,.7);
}
nav a span.text-blue-400, .text-blue-400 { color:var(--a1) !important; }
nav a.bg-white\/10, nav a[href*="contact"].rounded-full {
    background:linear-gradient(135deg,var(--a1),var(--a3) 60%,var(--a2)) !important;
    color:#07080c !important; border:none !important; font-weight:600;
    box-shadow:0 10px 26px -10px rgba(124,139,255,.6);
}

/* ---- Superficies líquidas (sobrescribe glass / glass-card) ---- */
.glass {
    background:linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018) 45%, rgba(255,255,255,0.04)) !important;
    backdrop-filter:blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.4) !important;
    border:1px solid rgba(255,255,255,0.07) !important;
}
.glass-card {
    position:relative;
    background:linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)) !important;
    backdrop-filter:blur(16px) saturate(1.35) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.35) !important;
    border:1px solid rgba(255,255,255,0.07) !important;
    border-radius:26px !important;
    box-shadow:inset 1.2px 1.2px 0 rgba(255,255,255,0.09), inset -1px -1px 1px rgba(0,0,0,0.5),
        0 24px 56px -26px rgba(0,0,0,0.85) !important;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease !important;
}
.glass-card:hover {
    transform:translateY(-6px) !important;
    border-color:var(--ring) !important;
    box-shadow:inset 1.2px 1.2px 0 rgba(255,255,255,0.1), 0 30px 70px -28px rgba(124,139,255,0.4),
        0 0 0 1px rgba(124,139,255,0.18) !important;
}

/* texto aurora */
.text-gradient {
    background:linear-gradient(110deg,var(--a1),var(--a3) 42%,var(--a2) 82%) !important;
    background-size:200% auto !important;
    -webkit-background-clip:text !important; background-clip:text !important;
    -webkit-text-fill-color:transparent !important; color:transparent !important;
    animation:hueA 9s ease infinite;
}
@keyframes hueA { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ---- Prosa de artículo ---- */
.article-body h2 { font-size:1.65rem !important; font-weight:700 !important; color:var(--ink) !important; margin:2.4rem 0 1rem !important; letter-spacing:-0.02em; }
.article-body h3 { font-size:1.2rem !important; font-weight:600 !important; color:var(--a2) !important; margin:1.6rem 0 .7rem !important; font-family:var(--display) !important; }
.article-body p { color:#c7cdda !important; line-height:1.85 !important; margin-bottom:1.3rem !important; font-size:1.04rem; }
.article-body li { color:#c7cdda !important; line-height:1.75 !important; }
.article-body strong { color:var(--ink) !important; }
.highlight-box {
    background:linear-gradient(155deg, rgba(124,139,255,0.1), rgba(124,139,255,0.03)) !important;
    border-left:3px solid var(--a1) !important;
    border-radius:0 16px 16px 0 !important; padding:1.1rem 1.35rem !important; margin:1.6rem 0 !important;
    backdrop-filter:blur(8px);
}
.highlight-box .text-blue-300 { color:#c3cbff !important; }
.highlight-box .text-purple-300 { color:#d6c3ff !important; }

/* ---- prose-dark (privacidad) ---- */
.prose-dark h2 { color:var(--ink) !important; font-family:var(--display) !important; letter-spacing:-0.02em; }
.prose-dark h3 { color:var(--a2) !important; font-family:var(--display) !important; }
.prose-dark p, .prose-dark li { color:#bcc3d2 !important; line-height:1.8 !important; }
.prose-dark a { color:var(--a1) !important; }
.prose-dark strong { color:var(--ink) !important; }

/* ---- Detalles ---- */
.text-primary { color:var(--a1) !important; }
.hover\:text-blue-400:hover, .hover\:text-blue-300:hover { color:var(--a2) !important; }
a[href*="whatsapp"] .text-green-400, .text-green-400 { color:var(--a2) !important; }

/* botones CTA redondeados → look líquido */
a.rounded-2xl.bg-blue-600\/20, a.rounded-2xl.bg-blue-600\/40 {
    background:linear-gradient(135deg,var(--a1),var(--a3)) !important; color:#07080c !important; border:none !important; font-weight:600;
}

/* Entrada suave de tarjetas (sin JS) */
@keyframes fadeUpA { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:no-preference) {
    main article.glass-card, section article.glass-card { animation:fadeUpA .7s cubic-bezier(.2,.8,.2,1) both; }
}

/* ============================================================
   PORTADAS EDITORIALES DE ARTÍCULO
   ============================================================ */
.article-cover {
    position:relative; height:270px; border-radius:28px; overflow:hidden;
    margin-bottom:2.5rem; display:flex; align-items:flex-end; padding:1.9rem 2rem;
    border:1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(8,9,14,0.30), rgba(8,9,14,0.62)),
        radial-gradient(135% 135% at 0% 0%, var(--c1), transparent 60%),
        radial-gradient(135% 135% at 100% 100%, var(--c2), transparent 60%),
        linear-gradient(135deg, var(--c1) -15%, transparent 48%, var(--c2) 120%),
        var(--bg-2);
    box-shadow:inset 1.2px 1.2px 0 rgba(255,255,255,0.12), 0 26px 60px -28px rgba(0,0,0,0.85);
    isolation:isolate;
}
.article-cover::before { /* sheen blanco animado */
    content:''; position:absolute; inset:0; z-index:0;
    background:radial-gradient(70% 90% at 75% 12%, rgba(255,255,255,0.18), transparent 55%);
    animation:coverDrift 16s ease-in-out infinite;
}
.article-cover > * { position:relative; }
.article-cover::after { /* malla de puntos */
    content:''; position:absolute; inset:0; z-index:1;
    background-image:radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.4px);
    background-size:24px 24px; opacity:.35;
    -webkit-mask-image:linear-gradient(115deg, #000, transparent 75%);
    mask-image:linear-gradient(115deg, #000, transparent 75%);
}
@keyframes coverDrift { 0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.08) translate(-1.5%,1%)} }
.cover-ghost { position:absolute; z-index:1; right:0.5rem; top:50%; transform:translateY(-58%) rotate(-8deg);
    font-size:13rem; line-height:1; color:rgba(255,255,255,0.2); pointer-events:none;
    text-shadow:0 8px 40px rgba(0,0,0,0.25); }
.cover-icon { position:relative; z-index:2; width:64px; height:64px; border-radius:18px;
    display:grid; place-items:center; font-size:1.7rem; color:#fff; margin-right:1rem;
    background:linear-gradient(155deg, rgba(12,14,22,0.55), rgba(12,14,22,0.32));
    border:1px solid rgba(255,255,255,0.28); backdrop-filter:blur(10px);
    box-shadow:0 10px 30px -8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow:0 2px 12px rgba(0,0,0,0.4); flex-shrink:0; }
.cover-row { position:relative; z-index:2; display:flex; align-items:center; gap:0; }
.cover-tag { display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .95rem;
    border-radius:999px; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:#fff; background:rgba(10,12,20,0.45); border:1px solid rgba(255,255,255,0.22); backdrop-filter:blur(10px); white-space:nowrap; }
@media (max-width:640px){ .article-cover{height:210px; padding:1.4rem} .cover-ghost{font-size:11rem} .cover-icon{width:54px;height:54px;font-size:1.4rem} }
@media (prefers-reduced-motion:reduce){ .article-cover::before{animation:none} }

/* temas de color (c1 → esquina sup-izq, c2 → inf-der) */
.cv-indigo { --c1:#7c8bff; --c2:#b388ff; }
.cv-teal   { --c1:#57e0c9; --c2:#4aa8ff; }
.cv-violet { --c1:#b388ff; --c2:#ff8fb1; }
.cv-pink   { --c1:#ff8fb1; --c2:#ffb86b; }
.cv-amber  { --c1:#ffcf6b; --c2:#ff8fb1; }
.cv-cyan   { --c1:#5ad1ff; --c2:#57e0c9; }
.cv-red    { --c1:#ff9a7a; --c2:#ffce6b; }

/* Realce de las cabeceras de tarjeta del índice (malla + glow) */
section article.glass-card > div:first-child { position:relative; overflow:hidden; }
section article.glass-card > div:first-child::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.3px);
    background-size:20px 20px; opacity:.3;
    -webkit-mask-image:linear-gradient(120deg,#000,transparent 70%); mask-image:linear-gradient(120deg,#000,transparent 70%);
    pointer-events:none;
}
section article.glass-card .w-12.h-12 { box-shadow:0 8px 22px -6px rgba(124,139,255,.5); }

/* Scrollbar */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#232838; border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:#313850; }