/* =========================================================
   PÁGINA SOLUCIONES — 8 celdas horizontales
   Cada celda: 30% video (izq) + 70% nombre y resumen (der).
   Las primeras 4 se ven de entrada; las últimas 4 aparecen con
   animación al bajar (reutiliza el mismo scroll-reveal del sitio).
   ========================================================= */

/* ---------- Video de fondo de toda la página ---------- */
/* El video va fijo detrás de todo; las celdas van tipo "cristal" encima. */
.pagina-video-fondo {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;                 /* detrás de todo */
    background: var(--navy-900); /* respaldo si el video no carga */
}
/* velo oscuro encima del video, para que el texto se lea bien */
.pagina-video-velo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,16,33,.82), rgba(6,16,33,.9));
}
/* cuando hay fondo de video, la sección se vuelve transparente
   para dejarlo ver (si no, la sección blanca lo taparía) */
.section.con-video-fondo { background: transparent; }
.section.con-video-fondo .eyebrow { color: var(--sky-400); }
.section.con-video-fondo .section-head h2 { color: #fff; }
.section.con-video-fondo .section-head p { color: #d5e0f0; }

/* Intro más ancha y justificada (el texto es largo y en el ancho
   estándar de .section-head hacía muchos saltos de línea). */
.section-head.intro-ancha { max-width: 900px; }
.section-head.intro-ancha p { text-align: justify; hyphens: auto; }

.sol-lista {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- Celdas tipo cristal (glassmorphism) ---------- */
.sol-celda {
    display: grid;
    grid-template-columns: 30% 1fr;
    align-items: stretch;
    /* cristal: fondo semitransparente + desenfoque de lo que pasa por detrás */
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.sol-celda:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

/* lado del video (30%) */
.sol-video {
    position: relative;
    min-height: 180px;
    background: linear-gradient(135deg, rgba(20,57,95,.6), rgba(11,36,71,.6));
    overflow: hidden;
}
.sol-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* lado del texto (70%) — texto claro sobre el cristal */
.sol-texto {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sol-texto h3 {
    font-size: 1.35rem;
    color: #fff;
    margin: 0 0 10px;
}
.sol-texto h3::after {
    content: '';
    display: block;
    width: 46px; height: 3px;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--gold-500), var(--sky-400));
}
.sol-texto p {
    color: #e6eef8;
    font-size: .98rem;
    line-height: 1.65;
    margin: 0;
}

/* en móvil se apila: video arriba, texto abajo */
@media (max-width: 700px) {
    .sol-celda { grid-template-columns: 1fr; }
    .sol-video { min-height: 200px; }
    .sol-texto { padding: 22px 24px; }
}

/* ---------- Animación de entrada (para las celdas que la lleven) ---------- */
.sol-celda.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}
.sol-celda.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .sol-celda.reveal { opacity: 1; transform: none; transition: none; }
}