/* ==========================================================================
   OLPA — Hero-Base extras
   Clases del hero v2 que viven en las maquetas (olpa-workspace) pero no
   estaban en olpa.css del theme. Se encolan ANTES de olpa-clusters.css
   para que los selectores más específicos (.pillar-hero-home .hero-cta)
   puedan extenderlos.

   Incluye: pillar-hero-home, hero-eyebrow, hero-glow, hero-cta, hero-stats,
   hero-viz, quick-answer, section-head, breadcrumb (extras).
   ========================================================================== */

/* ---- Grid aliases ------------------------------------------------------
   Los mockups usan `.grid grid-3` (Tailwind-like) pero el theme solo tiene
   `.grid-cols-*`. Sin estos aliases, contenedores como pillar-signals,
   pillar-services, pillar-industries y clusters con grid-3 quedan en 1 col
   (porque `.grid` aplica display:grid pero sin grid-template-columns). */
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
    display: grid;
    gap: 20px;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6 { grid-template-columns: 1fr; }
}

/* ---- Border-radius aliases ---------------------------------------------
   El theme usa --radius-sm/md/lg/full, pero las maquetas en /site/ usan
   --r-sm/md/lg/xl. Sin estos aliases muchos contenedores (vs-col, ability-card,
   build-body, tech-col, price-card) pierden el border-radius y quedan con
   bordes rectos. Los alineamos al sistema del theme para homogeneidad visual. */
:root {
    --r-sm:   var(--radius-sm,   14px);
    --r-md:   var(--radius-md,   18px);
    --r-lg:   var(--radius-lg,   24px);
    --r-xl:   28px;
    --r-full: var(--radius-full, 999px);
    /* Alias extras usados por olpa-clusters */
    --olpa-deep:   #F0C000;
    --text-2:      var(--muted, #8A8A99);
    --border-strong: rgba(255, 255, 255, 0.14);
}


/* --- PILLAR HERO BASE (2-col layout) ------------------------------------ */
.pillar-hero-home {
    padding-top: 150px;
    padding-bottom: 80px;
    padding-inline: 1rem;
    min-height: auto;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(20,20,42,.9) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 85%, rgba(12,12,30,.7) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 85%, rgba(10,10,24,.6) 0%, transparent 50%),
        linear-gradient(180deg, #050510 0%, var(--bg) 100%);
}
@media (min-width: 640px) { .pillar-hero-home { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .pillar-hero-home { padding-inline: 3rem; padding-top: 160px; } }
@media (max-width: 640px) {
    .pillar-hero-home { padding-top: 120px; padding-bottom: 60px; }
    .pillar-hero-home h1 { font-size: clamp(1.9rem, 8vw, 2.6rem) !important; }
}
/* Grilla animada sutil en el fondo del hero */
.pillar-hero-home::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,214,10,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 15%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 15%, transparent 70%);
    animation: heroGridDrift 55s linear infinite;
}
.pillar-hero-home::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 180px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, var(--bg), transparent);
}
.pillar-hero-home .container { position: relative; z-index: 5; }

/* --- Layout 2-col del hero (renombrado para no pisar .hero-grid del theme) - */
.cluster-hero-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 5;
}
@media (max-width: 1024px) {
    .cluster-hero-layout { grid-template-columns: 1fr; gap: 44px; }
}

/* --- Hero eyebrow pill (con LIVE pulse) --------------------------------- */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,214,10,.12), rgba(0,229,255,.08));
    border: 1px solid rgba(255,214,10,.3);
    backdrop-filter: blur(10px);
    margin-bottom: 28px;
}
.hero-eyebrow .num-badge { color: var(--olpa); }
.hero-eyebrow .pulse-dot {
    width: 6px; height: 6px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 10px #22c55e;
    animation: heroPulse 2s infinite;
}
@keyframes heroPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .55; transform: scale(1.4); }
}

/* --- Hero glow (gradiente en palabras highlighted del h1) --------------- */
/*   Nota: Splitting.js envuelve cada char y word en spans nuevos que por
     default NO heredan background-clip:text del padre, quedando invisibles.
     Por eso aplicamos la misma propiedad a word/char/whitespace. */
.hero-glow {
    background: linear-gradient(135deg, #FFD60A 0%, #FFE85C 40%, #00E5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 25px rgba(255,214,10,.4));
    /* Mejora anti-aliasing en bordes del gradient */
    -webkit-font-smoothing: antialiased;
}
/* Cuando Splitting.js divide el texto, heredar gradient en los wrappers */
.hero-glow .word,
.hero-glow .char,
.hero-glow .whitespace {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* El filter drop-shadow NO se hereda para no acumular — solo el padre lo tiene */
}
.hero-glow .whitespace {
    /* Espacios se mantienen naturales; no necesitan gradient */
    background: none;
    color: transparent;
}

/* --- Hero CTAs --------------------------------------------------------- */
.hero-cta {
    display: flex;
    gap: 16px;
    margin-top: 38px;
    flex-wrap: wrap;
}
@media (max-width: 1024px) { .hero-cta { justify-content: center; } }

/* --- Hero stats (4 números con label mono) ------------------------------ */
.hero-stats {
    display: flex;
    gap: 36px;
    margin-top: 50px;
    padding-top: 36px;
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
    flex-wrap: wrap;
}
.hero-stats .stat { min-width: 120px; }
.hero-stats .stat .n {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--olpa), var(--olpa-soft, #FFE85C));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.hero-stats .stat .l {
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 6px;
}
@media (max-width: 1024px) { .hero-stats { justify-content: center; gap: 24px; } }
@media (max-width: 600px) {
    .hero-stats { gap: 18px 28px; padding-top: 28px; margin-top: 34px; }
    .hero-stats .stat { min-width: calc(50% - 14px); }
    .hero-stats .stat .n { font-size: 1.7rem; }
    .hero-stats .stat .l { font-size: 10px; }
}

/* --- Hero viz (right-side custom illustration) -------------------------- */
.hero-viz {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
.hero-viz > * { position: relative; z-index: 2; }

/* Override aspect-ratio en mobile (el mockup original usa aspect-ratio:1 que
   hace el viz muy alto en pantallas angostas). */
@media (max-width: 1024px) {
    .pillar-hero-home .hero-viz {
        aspect-ratio: auto;
        max-width: 460px;
    }
}

/* --- Quick Answer block (GEO-friendly answer box) ----------------------- */
.quick-answer {
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(0,229,255,.06), rgba(255,214,10,.04));
    border: 1px solid rgba(0,229,255,.2);
    border-radius: 18px;
    border-left: 3px solid var(--accent);
    margin-top: 30px;
    max-width: 640px;
}
.quick-answer .qa-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.quick-answer p {
    font-size: .98rem;
    color: var(--text);
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 600px) {
    .quick-answer { padding: 22px 24px; margin-top: 22px; }
}

/* --- Section head genérico (usado por secciones de clusters) ------------ */
.section-head {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px;
}
.section-head .section-tag {
    margin: 0 auto 18px;
}
.section-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 18px;
}
.section-head p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 660px;
    margin: 0 auto;
}

/* --- Breadcrumb extras (alinear con mockup) ----------------------------- */
.breadcrumb {
    font-family: var(--font-mono);
    letter-spacing: .02em;
}
.breadcrumb > span:not(.current):not(.sep) { opacity: .5; }

/* --- Ability-icon con Lucide (reemplaza emojis del mockup) -------------- */
.ability-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(255,214,10,.15), rgba(0,229,255,.08));
    border: 1px solid rgba(255,214,10,.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--olpa);
    margin-bottom: 6px;
    flex-shrink: 0;
}
.ability-icon svg,
.ability-icon i[data-lucide] {
    width: 26px;
    height: 26px;
    stroke-width: 1.8;
}

/* --- CTA Final (glass cta-box con gradient animado + layout centrado) --- */
.cta-final { position: relative; }
.cta-final .cta-box {
    padding: 72px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,214,10,.08), rgba(0,229,255,.05));
    border: 1px solid rgba(255,214,10,.2);
    border-radius: var(--r-lg);
    max-width: 980px;
    margin: 0 auto;
}
.cta-final .cta-box::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(255,214,10,.1), transparent 40%);
    animation: ctaSpin 20s linear infinite;
    pointer-events: none;
}
@keyframes ctaSpin { to { transform: rotate(360deg); } }
.cta-final .cta-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.cta-final .cta-tag-wrap { display: inline-flex; margin-bottom: 6px; }
.cta-final .cta-title {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0;
    color: var(--text);
}
.cta-final .cta-body {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 560px;
    margin: 0;
}
.cta-final .cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}
@media (max-width: 640px) {
    .cta-final .cta-box { padding: 48px 22px; border-radius: var(--r-md); }
    .cta-final .cta-inner { gap: 14px; }
    .cta-final .cta-actions .btn-primary,
    .cta-final .cta-actions .btn-ghost {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* --- FAQ (envoltorio glass-like + faq-plus Lucide) ---------------------- */
.cl-faq .faq-list {
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
@media (max-width: 600px) { .cl-faq .faq-list { padding: 4px 20px; } }

.cl-faq .faq-item summary .faq-plus svg,
.cl-faq .faq-item summary .faq-plus i[data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}
.cl-faq .faq-item .faq-body {
    padding: 0 0 22px 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
    max-width: 92%;
}
.cl-faq .faq-item .faq-body p { margin: 0 0 10px; }
.cl-faq .faq-item .faq-body p:last-child { margin-bottom: 0; }

/* --- Task-inbox (hero-viz) con Lucide ---------------------------------- */
.ti-avatar svg,
.ti-avatar i[data-lucide] {
    width: 22px;
    height: 22px;
    stroke: #1d2327;
    stroke-width: 1.8;
}
.ti-icon svg,
.ti-icon i[data-lucide] {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}
.ti-icon.ti-spin svg,
.ti-icon.ti-spin i[data-lucide] {
    animation: tiSpin 1.2s linear infinite;
}
@keyframes tiSpin {
    to { transform: rotate(360deg); }
}