/* ==========================================================================
   NeuralV v6 — SECCIONES NARRATIVAS
   El recorrido de "Cómo funciona" y el bloque "Nuestra diferencia".
   Separado de home.css para no pasar de 450 líneas por archivo.
   ========================================================================== */

/* --- Cómo funciona: recorrido de 4 pasos con línea de conexión ---------- */
.recorrido {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    position: relative;
}

/* La línea que une los pasos: pasa por detrás de los iconos */
.recorrido::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,107,240,.18), var(--brand), rgba(0,107,240,.18));
    z-index: 0;
}

.hito { position: relative; z-index: 1; text-align: center; }

.hito-ico {
    width: 88px;
    height: 88px;
    margin: 0 auto var(--s-2);
    display: grid;
    place-items: center;
    background: var(--surface);
    border-radius: 26px;
    box-shadow: var(--shadow);
    color: var(--brand);
    transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

.hito-ico .icon { width: 34px; height: 34px; stroke-width: 1.6; }

/* El paso sobre el que se pasa el ratón se enciende */
.hito:hover .hito-ico { transform: translateY(-6px); background: var(--brand); color: #fff; }

.hito-num {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: var(--s-2);
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.hito:hover .hito-num { background: var(--brand); }
.hito h3 { font-size: var(--t-body-lg); margin-bottom: 0.4rem; }
.hito p { font-size: var(--t-small); color: var(--ink-soft); max-width: 240px; margin-inline: auto; }

@media (max-width: 900px) {
    .recorrido { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
    .recorrido::before { display: none; }
}

@media (max-width: 560px) {
    .recorrido { grid-template-columns: 1fr; }
}

/* --- Antes / Ahora: el cambio de paradigma ------------------------------ */
.antes-despues {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-3);
    align-items: stretch;
}

.ad-col {
    padding: var(--s-4);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.ad-antes { background: var(--surface-alt); }

.ad-ahora {
    background: linear-gradient(160deg, rgba(0, 107, 240, 0.06), rgba(0, 107, 240, 0.02));
    border-color: rgba(0, 107, 240, 0.28);
}

.ad-tag {
    align-self: flex-start;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    margin-bottom: var(--s-2);
}

.ad-antes .ad-tag { background: rgba(0, 0, 0, 0.07); color: var(--ink-faint); }
.ad-ahora .ad-tag { background: var(--brand); color: #fff; }

.ad-col h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.ad-antes h3 { color: var(--ink-soft); }
.ad-col p { color: var(--ink-soft); font-size: var(--t-small); flex-grow: 1; }

.ad-flecha {
    display: grid;
    place-items: center;
    color: var(--brand);
    padding: 0 var(--s-1);
}

.ad-flecha .icon { width: 34px; height: 34px; stroke-width: 1.8; }

/* Cuatro piezas: encajadas a la fuerza (antes) o alineadas solas (ahora) */
.ad-vis {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 72px;
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
}

.ad-vis span {
    flex: 1;
    border-radius: 6px;
    transition: all 0.5s var(--ease);
}

.ad-vis-mal span { background: rgba(0, 0, 0, 0.14); }
.ad-vis-mal span:nth-child(1) { height: 60%; transform: rotate(-6deg); }
.ad-vis-mal span:nth-child(2) { height: 100%; transform: rotate(4deg); }
.ad-vis-mal span:nth-child(3) { height: 45%; transform: rotate(-3deg); }
.ad-vis-mal span:nth-child(4) { height: 80%; transform: rotate(7deg); }

.ad-vis-bien span { background: var(--brand); height: 100%; opacity: 0.85; }
.ad-vis-bien span:nth-child(2) { opacity: 0.7; }
.ad-vis-bien span:nth-child(3) { opacity: 0.55; }
.ad-vis-bien span:nth-child(4) { opacity: 0.4; }

/* --- Nueve problemas ----------------------------------------------------- */
.problemas-grid { gap: var(--s-3) var(--s-4); }

@media (max-width: 900px) {
    .antes-despues { grid-template-columns: 1fr; }
    .ad-flecha { transform: rotate(90deg); padding: var(--s-1) 0; }
}


/* ==========================================================================
   NUESTRA DIFERENCIA — la sección que tiene que quedarse en la cabeza
   Fondo oscuro para separarla del resto, titular a tamaño de portada y una
   comparación cara a cara, que es donde el argumento se ve de un vistazo.
   ========================================================================== */
.dif { position: relative; overflow: hidden; }

/* Halo azul muy tenue detrás del titular: da profundidad sin ruido */
.dif::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(0, 107, 240, 0.16), transparent 62%);
    pointer-events: none;
}

.dif > .wrap { position: relative; z-index: 1; }

.dif-cabecera { text-align: center; max-width: 980px; margin: 0 auto var(--s-6); }

/* La primera línea ahora es más larga ("Implementar soluciones de IA hoy es
   algo que muchos pueden hacer"): se baja el tope de la escala respecto al
   titular anterior para que quepa en dos líneas sin desbordar en pantallas
   intermedias. */
.dif-titular {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    letter-spacing: -0.028em;
    line-height: 1.12;
}

/* La segunda parte es la larga: en azul y a menor cuerpo, para que haya
   jerarquía. Al mismo tamaño que la primera ocupaba siete líneas. */
.dif-titular em {
    display: block;
    margin-top: var(--s-2);
    font-style: normal;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.015em;
    color: #4da3ff;
    max-width: 820px;
    margin-inline: auto;
}

.dif-cuerpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: center;
    margin-bottom: var(--s-7);
}

/* Los hijos de un grid no se encogen bajo su contenido por defecto
   (min-width:auto): sin esto, textos largos empujan la página entera. */
.dif-cuerpo > * { min-width: 0; }
.dif-cifras > * { min-width: 0; }

/* --- La foto, con el dato encima ---------------------------------------- */
.dif-foto {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.dif-foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    animation: respira 26s ease-in-out infinite alternate;
}

/* Velo azul: integra la foto en la sección oscura en lugar de pegarla */
.dif-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(10, 26, 47, 0.15) 30%, rgba(10, 26, 47, 0.88));
    pointer-events: none;
}

/* El dato flota sobre la foto, en cristal */
.dif-sello {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.9rem 1.4rem;
    border-radius: var(--radius);
    background: rgba(10, 26, 47, 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.dif-sello-mas {
    font-size: 2rem;
    font-weight: 600;
    color: #4da3ff;
    line-height: 1;
    align-self: flex-start;
    margin-top: 0.55rem;
}

.dif-sello b {
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #4da3ff;
}

.dif-sello span { font-size: var(--t-small); color: #c7d4e3; line-height: 1.3; }

.dif-cifras { margin-top: var(--s-4); }

.dif-texto .lead { color: #c7d4e3; }
.dif-texto .lead strong { color: #fff; font-weight: 600; }
.dif-texto p:not(.lead) { color: #8fa3ba; margin-top: var(--s-2); }

.dif-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }

.dif-cifra {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dif-cifra:last-child { border-bottom: 0; padding-bottom: 0; }

.dif-cifra b {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #4da3ff;
    min-width: 52px;
}

.dif-cifra span { font-size: var(--t-small); color: #8fa3ba; line-height: 1.35; }

.dif-cifra em {
    font-style: normal;
    font-size: 1.4rem;
    font-weight: 600;
    color: #4da3ff;
    margin-left: -0.35rem;
    margin-right: 0.35rem;
    align-self: flex-start;
}

/* --- Cara a cara --------------------------------------------------------- */
.versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-3);
    align-items: stretch;
    margin-bottom: var(--s-6);
}

.vs-col {
    padding: var(--s-4);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.vs-col h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.vs-col li { display: flex; gap: 0.7rem; padding: 0.6rem 0; font-size: var(--t-small); line-height: 1.45; }
.vs-col li::before { flex-shrink: 0; width: 20px; text-align: center; font-weight: 700; }

/* Ellos: apagado, con cruces */
.vs-ellos { background: rgba(255, 255, 255, 0.03); }
.vs-ellos h3 { color: #7e93aa; }
.vs-ellos li { color: #7e93aa; }
.vs-ellos li::before { content: "✕"; color: #5a6d82; }

/* Nosotros: encendido, con marcas */
.vs-nosotros {
    background: linear-gradient(165deg, rgba(0, 107, 240, 0.18), rgba(0, 107, 240, 0.05));
    border-color: rgba(77, 163, 255, 0.4);
    box-shadow: 0 20px 60px rgba(0, 60, 140, 0.35);
}

.vs-nosotros h3 { color: #fff; }
.vs-nosotros li { color: #e3ecf6; }
.vs-nosotros li::before { content: "✓"; color: #4da3ff; }

.vs-sello {
    align-self: center;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6d8299;
    white-space: nowrap;
    padding: 0.6rem 0.3rem;
    writing-mode: vertical-rl;
}

.dif-cierre { text-align: center; max-width: 720px; margin: 0 auto; }
.dif-cierre p { font-size: var(--t-body-lg); color: #c7d4e3; margin-bottom: var(--s-3); line-height: 1.45; }
.dif-cierre strong { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
    .dif-cuerpo { grid-template-columns: 1fr; gap: var(--s-4); }
    .dif-sello b { font-size: 2.5rem; }
    .versus { grid-template-columns: 1fr; }
    .vs-sello { writing-mode: horizontal-tb; text-align: center; padding: var(--s-1) 0; }
    .dif-cifra b { font-size: 2.5rem; min-width: 72px; }
}