/* ════════════════════════════════════════════════════════════════════════
   index-evolved.css — ConsultorIA · Evolución visual del index (v1)
   Carga SOLO en index.html, después de style.css. No afecta otras páginas.
   Construido sobre los tokens del Brand Guideline v1 (vars de :root en style.css):
   --celeste #0051FF · --azul #002483 · --baby-blue #9FC5FF · --celeste-claro #EDF5FC
   Objetivo: más personalidad, impacto, retención y scroll — sin salir de la marca.
   ════════════════════════════════════════════════════════════════════════ */

/* ── BARRA DE PROGRESO DE SCROLL ─────────────────────────────────────── */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 1000;
    background: linear-gradient(90deg, var(--azul) 0%, var(--celeste) 45%, var(--baby-blue) 100%);
    box-shadow: 0 0 12px rgba(0, 81, 255, 0.5);
    transition: width 0.08s linear;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — capas de profundidad de marca + movimiento
   ════════════════════════════════════════════════════════════════════════ */
.hero { isolation: isolate; }

/* Suaviza el overlay base para que la aurora respire */
.hero::before {
    background: linear-gradient(135deg,
        rgba(0, 36, 131, 0.62) 0%,
        rgba(0, 81, 255, 0.40) 55%,
        rgba(0, 36, 131, 0.58) 100%) !important;
    z-index: 0 !important;
}

/* Hero más compacto en desktop (≈ una pantalla, sin huecos muertos) */
@media (min-width: 769px) {
    .hero { padding-top: 80px !important; padding-bottom: 72px !important; }
    .hero p { margin-bottom: 1.35rem !important; max-width: 620px; }
    .hero-seo-text { margin-top: 0.35rem !important; margin-bottom: 0 !important; }
    .hero .cta-group { margin-top: 1.4rem; }
    .hero-social-proof { margin-top: 0.6rem !important; }
    .hero-stack { margin-top: 1.1rem; }
}

/* Subtítulo emocional del hero (jul 2026, posicionamiento Coach de IA) — es el gancho:
   grande, blanco pleno, destacado. Distinto de .hero-seo-text (chica, keywords, tenue).
   Especificidad ".hero p.hero-emotional-hook" necesaria para ganarle a ".hero p"
   (style.css línea ~1058), que tiene la misma especificidad por elemento+clase. */
.hero p.hero-emotional-hook {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem) !important;
    font-weight: 700;
    color: #fff !important;
    line-height: 1.35;
    max-width: 560px;
    margin-bottom: 0 !important;
}
@media (max-width: 768px) {
    .hero p.hero-emotional-hook { font-size: 1.35rem !important; }
}

/* .hero-seo-text (style.css línea ~1010) definía font-size:0.85rem, pero ".hero p"
   (línea ~1058, misma especificidad elemento+clase, declarada después) lo pisaba a
   1.2rem — quedaba del mismo tamaño que el párrafo normal, sin diferenciarse como
   línea SEO chica. Refuerzo con especificidad ".hero p.hero-seo-text". */
.hero p.hero-seo-text {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1.5;
}

/* Contenedor de efectos: detrás del contenido, sobre el fondo */
.hero .hero-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.hero .container.hero-content { position: relative; z-index: 2; }

/* Aurora — manchas de luz de marca que derivan lentamente */
.hero-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    mix-blend-mode: screen;
    opacity: 0.55;
    will-change: transform;
}
.hero-aurora--1 {
    width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
    left: -8vw; top: -12vw;
    background: radial-gradient(circle at 50% 50%, #4d8bff 0%, rgba(77, 139, 255, 0) 68%);
    animation: auroraDrift1 22s ease-in-out infinite;
}
.hero-aurora--2 {
    width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
    right: -6vw; top: 6vw;
    background: radial-gradient(circle at 50% 50%, #9FC5FF 0%, rgba(159, 197, 255, 0) 70%);
    animation: auroraDrift2 26s ease-in-out infinite;
}
.hero-aurora--3 {
    width: 50vw; height: 50vw; max-width: 680px; max-height: 680px;
    left: 28vw; bottom: -26vw;
    background: radial-gradient(circle at 50% 50%, #1A6CFC 0%, rgba(26, 108, 252, 0) 72%);
    animation: auroraDrift3 30s ease-in-out infinite;
}
@keyframes auroraDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6vw, 4vw) scale(1.12); }
}
@keyframes auroraDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5vw, 5vw) scale(1.08); }
}
@keyframes auroraDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-4vw, -6vw) scale(1.15); }
}

/* Isotipo C› (asset transparente real del brandbook, Recurso 631) como marca de agua */
.hero-iso-watermark {
    position: absolute;
    right: 2%;
    bottom: -6%;
    width: clamp(220px, 26vw, 360px);
    height: auto;
    opacity: 0.12;
    animation: isoFloat 12s ease-in-out infinite;
}
@keyframes isoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(-1.5deg); }
}

/* Grano sutil (≤0.05) sobre el azul profundo */
.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eyebrow con chevron de marca */
.hero-eyebrow--chev::before { display: none; } /* anula la línea base */
.hero-eyebrow--chev {
    gap: 0.5rem;
}
.eyebrow-chev {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--baby-blue);
    font-size: 1.05em;
    line-height: 1;
    transform: translateY(1px);
}

/* H1 más confiado (Manrope bold, como pide el brandbook para titulares) */
.hero h1.hero-gradient-text {
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

/* Stack de herramientas bajo el CTA */
.hero-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.hero-stack-label {
    font-family: var(--font-heading);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 0.2rem;
}
.hero-stack-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.85rem;
    border-radius: 9999px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(159, 197, 255, 0.35);
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hero-stack-pill:hover {
    transform: translateY(-2px);
    background: rgba(159, 197, 255, 0.18);
    border-color: rgba(159, 197, 255, 0.6);
}

/* Indicador de scroll */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}
.hero-scroll-cue:hover { color: #fff; }
.hero-scroll-cue-text {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.hero-scroll-cue-chev {
    font-size: 1.4rem;
    line-height: 0.6;
    animation: scrollNudge 1.8s ease-in-out infinite;
}
@keyframes scrollNudge {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* Entrada escalonada del hero */
.hero-animate > * {
    opacity: 0;
    transform: translateY(18px);
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.hero-animate > *:nth-child(1) { animation-delay: 0.05s; }
.hero-animate > *:nth-child(2) { animation-delay: 0.16s; }
.hero-animate > *:nth-child(3) { animation-delay: 0.27s; }
.hero-animate > *:nth-child(4) { animation-delay: 0.36s; }
.hero-animate > *:nth-child(5) { animation-delay: 0.45s; }
.hero-animate > *:nth-child(6) { animation-delay: 0.54s; }
.hero-animate > *:nth-child(7) { animation-delay: 0.62s; }
@keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Botón con destello al hover */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-shine:hover::after { left: 130%; }

/* ════════════════════════════════════════════════════════════════════════
   BANDA DE IMPACTO — proof con contadores animados
   ════════════════════════════════════════════════════════════════════════ */
.impact-band {
    background: var(--grad-surface);
    border-bottom: 1px solid var(--border);
    padding: 2.6rem 0;
}
.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.impact-stat { position: relative; }
.impact-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.75rem; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 46px;
    background: linear-gradient(180deg, transparent, rgba(0, 36, 131, 0.16), transparent);
}
.impact-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.3rem, 4.6vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--celeste);
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.impact-unit {
    font-size: 0.5em;
    font-weight: 700;
    color: var(--azul-40);
}
.impact-label {
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* ════════════════════════════════════════════════════════════════════════
   EYEBROWS DE SECCIÓN — firma de marca (chevron ›)
   ════════════════════════════════════════════════════════════════════════ */
.sec-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--celeste);
    margin-bottom: 0.85rem;
}
.sec-eyebrow-chev {
    font-weight: 800;
    color: var(--baby-blue);
    font-size: 1.1em;
    transform: translateY(1px);
}
.sec-subtitle {
    text-align: center;
    max-width: 560px;
    margin: 0.75rem auto 0;
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Refuerza el peso de los h2 centrados para más impacto */
.section-center {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* ════════════════════════════════════════════════════════════════════════
   PROGRAMA — pasos como tarjetas con número grande
   ════════════════════════════════════════════════════════════════════════ */
.program-evolved .program-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem 1.6rem 1.7rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.program-evolved .program-step::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-horizontal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.program-evolved .program-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 81, 255, 0.25);
}
.program-evolved .program-step:hover::before { transform: scaleX(1); }
.program-evolved .program-step .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 81, 255, 0.1), rgba(159, 197, 255, 0.18));
    color: var(--celeste);
    font-size: 28px;
    margin-bottom: 1rem;
}
.program-evolved .program-step h3 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════
   SECTORES — tarjetas con ícono outline + ganancia
   ════════════════════════════════════════════════════════════════════════ */
.sectors-evolved .sector-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.8rem 1.5rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.sectors-evolved .sector-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 81, 255, 0.28);
}
.sector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 81, 255, 0.09), rgba(159, 197, 255, 0.2));
    color: var(--celeste);
    transition: transform 0.28s ease;
}
.sector-icon svg { width: 24px; height: 24px; }
.sectors-evolved .sector-card:hover .sector-icon { transform: scale(1.08) rotate(-3deg); }
.sectors-evolved .sector-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--primary);
}
.sectors-evolved .sector-desc {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.sector-gain {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--celeste);
    background: rgba(0, 81, 255, 0.08);
    border: 1px solid rgba(0, 81, 255, 0.2);
}
.sector-gain::before { content: "↑"; font-weight: 800; }

/* ════════════════════════════════════════════════════════════════════════
   MICRO-INTERACCIONES — tarjetas de precio
   ════════════════════════════════════════════════════════════════════════ */
.price-card {
    transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 81, 255, 0.25);
}
.price-card.featured:hover { transform: scale(1.05) translateY(-6px); }
@media (max-width: 768px) {
    .price-card.featured:hover { transform: translateY(-6px); }
}

/* ════════════════════════════════════════════════════════════════════════
   LEAD MAGNET (Guía) — legibilidad del formulario sobre azul
   ════════════════════════════════════════════════════════════════════════ */
.inline-lm .terminal-form {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(159, 197, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 18, 46, 0.28);
}
/* Prompt "consultoria >" — baby blue para que resalte sobre el azul */
.inline-lm .terminal-form > span { color: var(--baby-blue); }
/* Beacon (punto pulsante) — también baby blue, anula el inline celeste */
.inline-lm .terminal-form > span > span { background-color: var(--baby-blue) !important; }
/* Input + placeholder legibles */
.inline-lm .terminal-form input { color: #fff; }
.inline-lm .terminal-form input::placeholder { color: rgba(255, 255, 255, 0.72); }
.inline-lm .terminal-form input:focus::placeholder { color: rgba(255, 255, 255, 0.45); }
/* Subtítulo un poco más claro */
.inline-lm .section-subtitle { color: rgba(255, 255, 255, 0.82) !important; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem 1rem;
    }
    .impact-stat:nth-child(2)::after { display: none; }
    .impact-stat::after { display: none; }
    .hero-iso-watermark { width: 240px; opacity: 0.06; bottom: -4%; right: -8%; }
    .hero-scroll-cue { display: none; }
    /* El hero base asigna order a los hijos en mobile (eyebrow1/h1·2/cta·3/social·4).
       El stack debe ir al final, no arriba. */
    .hero-stack { order: 5; margin-top: 1.1rem; }
    .hero-stack-label { width: 100%; text-align: center; margin: 0 0 0.1rem; }
    .sectors-evolved { grid-template-columns: 1fr 1fr !important; gap: 0.9rem !important; }
    .sectors-evolved .sector-card { padding: 1.3rem 1.1rem; }
    .sectors-evolved .sector-desc { font-size: 0.86rem; }
}

@media (max-width: 480px) {
    .sectors-evolved { grid-template-columns: 1fr !important; }
    .impact-num { font-size: 2.4rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hero-aurora,
    .hero-iso-watermark,
    .hero-scroll-cue-chev { animation: none; }
    .hero-animate > * { opacity: 1; transform: none; animation: none; }
    .scroll-progress { transition: none; }
    .btn-shine::after { display: none; }
}