/* ══════════════════════════════════════════════
   Nuestras Soluciones
   Mobile-first:
     < 576px     esfera arriba + lista de 1 columna
     576–991px   esfera arriba + cuadrícula de 2 columnas
     ≥ 992px     esfera a la izquierda y las soluciones en órbita
                 a su alrededor (posición calculada con cos/sin)
   ══════════════════════════════════════════════ */
.soluciones {
    /* Enlace Home.aspx#soluciones (migas de las páginas de solución) bajo el navbar fijo */
    scroll-margin-top: var(--nav-height, 70px);
    --sol-ink: #365072;
    --sol-text: #1C2B3A;
    --sol-muted: #5B6B7D;
    --sol-line: #D5DFEB;
    --sol-chip: 48px;
    --sol-sphere: min(72vw, 280px);

    padding: 80px 20px 88px;
}

.sol-title {
    margin: 0 0 40px;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.2;
}

.sol-stage {
    max-width: 1040px;
    margin: 0 auto;
}

/* ── Esfera: todos los videos apilados en la misma celda ── */
.sol-sphere {
    position: relative;
    width: var(--sol-sphere);
    aspect-ratio: 1;
    margin: 0 auto 40px;
    display: grid;
    border-radius: 50%;
    overflow: hidden;
    background: #2F5E97;
    box-shadow: 0 24px 48px -16px rgb(54 80 114 / 45%), 0 4px 12px rgb(54 80 114 / 12%);
    isolation: isolate;
}

    .sol-sphere video {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .45s ease;
    }

        .sol-sphere video.is-on { opacity: 1; }

/* Anillo de órbita (solo en escritorio) */
.sol-orbit { display: none; }

/* ── Lista ── */
.sol-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.sol-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--sol-line);
    border-radius: 16px;
    background: #fff;
    color: var(--sol-text);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .sol-link:hover { color: var(--sol-text); }

    .sol-link:focus-visible {
        outline: 3px solid #2D64D9;
        outline-offset: 3px;
    }

/* Ícono: el PNG se usa como máscara, así el color lo da CSS */
.sol-item[data-video="estaciones"]       { --icon: url(../media/images/iconos/estaciones.png); }
.sol-item[data-video="autoconsumo"]      { --icon: url(../media/images/iconos/autoconsumo.png); }
.sol-item[data-video="comercializadora"] { --icon: url(../media/images/iconos/comercializadora.png); }
.sol-item[data-video="distribuidora"]    { --icon: url(../media/images/iconos/distribuidora.png); }
.sol-item[data-video="transportista"]    { --icon: url(../media/images/iconos/transportista.png); }
.sol-item[data-video="aviacion"]         { --icon: url(../media/images/iconos/aviacion.png); }
.sol-item[data-video="industria"]        { --icon: url(../media/images/iconos/industria.png); }

.sol-chip {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--sol-chip);
    height: var(--sol-chip);
    border-radius: 50%;
    background: #EEF3F9;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

    .sol-chip i {
        width: 82%;
        height: 82%;
        background: var(--sol-ink);
        -webkit-mask: var(--icon) center / contain no-repeat;
                mask: var(--icon) center / contain no-repeat;
        transition: background-color .25s ease;
    }

.sol-name {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.sol-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--sol-ink);
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease, background-color .25s ease, color .25s ease, opacity .25s ease;
}

/* Activo (hover o foco) */
.sol-item.is-active .sol-link {
    border-color: #B7CBE2;
    box-shadow: 0 10px 24px -12px rgb(54 80 114 / 40%);
}

.sol-item.is-active .sol-chip { background: var(--sol-ink); }
.sol-item.is-active .sol-chip i { background: #fff; }
.sol-item.is-active .sol-go { background: var(--sol-ink); color: #fff; transform: translateX(2px); }

/* ── Tablet: 2 columnas ── */
@media (min-width: 576px) {
    .soluciones { --sol-sphere: 300px; }
    .sol-list { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* La 7.ª solución queda sola: se centra en la última fila */
    .sol-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 6px);
    }
}

@media (min-width: 768px) {
    .soluciones { padding: 104px 48px 112px; }
    .sol-title { margin-bottom: 48px; }
}

/* ── Escritorio: órbita alrededor de la esfera ── */
@media (min-width: 992px) {
    .soluciones {
        --sol-sphere: 380px;
        --sol-chip: 52px;
        --sol-gap: 44px;      /* distancia del borde de la esfera a la órbita */
        --sol-spread: 52deg;  /* ángulo del primer y último elemento */
        --sol-label: 300px;   /* ancho reservado para los nombres */

        --sol-r: calc(var(--sol-sphere) / 2 + var(--sol-gap));
        --sol-step: calc(var(--sol-spread) * 2 / 6);
    }

    .sol-stage {
        position: relative;
        width: calc(var(--sol-sphere) / 2 + var(--sol-r) + var(--sol-chip) / 2 + var(--sol-label));
        max-width: 100%;
        height: calc(var(--sol-r) * 2 + 16px);
    }

    .sol-sphere {
        position: absolute;
        left: 0;
        top: 50%;
        margin: 0;
        translate: 0 -50%;
        z-index: 1;
    }

    .sol-orbit {
        display: block;
        position: absolute;
        left: calc(var(--sol-sphere) / 2 - var(--sol-r));
        top: calc(50% - var(--sol-r));
        width: calc(var(--sol-r) * 2);
        height: calc(var(--sol-r) * 2);
        border: 1.5px dashed #BFD0E4;
        border-radius: 50%;
        pointer-events: none;
    }

        .sol-orbit::before {
            content: "";
            position: absolute;
            inset: calc(var(--sol-gap) / -2 - 6px);
            border: 1px solid #E6EDF5;
            border-radius: 50%;
        }

    .sol-list { display: block; }

    .sol-item {
        --a: calc(var(--sol-spread) * -1 + var(--i) * var(--sol-step));
        position: absolute;
        z-index: 2;
        left: calc(var(--sol-sphere) / 2 + var(--sol-r) * cos(var(--a)) - var(--sol-chip) / 2);
        top: calc(50% + var(--sol-r) * sin(var(--a)) - var(--sol-chip) / 2);
    }

    .sol-link {
        /* Todos con el ancho del más largo (lo calcula el script de Home.aspx) */
        width: var(--sol-link-w, auto);
        min-height: 0;
        padding: 0 14px 0 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        white-space: nowrap;
    }

    .sol-chip {
        background: #fff;
        box-shadow: 0 0 0 1.5px #D5DFEB, 0 6px 14px -6px rgb(54 80 114 / 35%);
    }

    .sol-name {
        font-size: 1.0625rem;
        font-weight: 500;
        transition: color .2s ease;
    }

    .sol-go { opacity: 0; transform: translateX(-8px); }

    .sol-item.is-active .sol-link {
        background: #fff;
        box-shadow: 0 12px 28px -14px rgb(54 80 114 / 45%);
    }

    .sol-item.is-active .sol-chip {
        transform: scale(1.08);
        box-shadow: 0 0 0 6px rgb(54 80 114 / 12%), 0 8px 18px -6px rgb(54 80 114 / 55%);
    }

    .sol-item.is-active .sol-name { color: var(--sol-ink); font-weight: 600; }
    .sol-item.is-active .sol-go { opacity: 1; transform: translateX(0); }

    /* Mientras hay uno activo, los demás pasan a segundo plano */
    .sol-list.has-active .sol-item:not(.is-active) .sol-name { color: var(--sol-muted); }
}

@media (min-width: 1200px) {
    .soluciones {
        --sol-sphere: 440px;
        --sol-gap: 48px;
        --sol-spread: 48deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .soluciones * { transition: none !important; }
}

.atia-descrip {
    width: 95%;
    margin: 0 auto;
}

/* ── Botón animado Enviar Solicitud ── */
.send-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #365173;
    border: none;
    border-radius: 25px;
    padding: 10px 24px;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s, box-shadow .25s;
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
    margin: 12px auto;
}
    .send-btn:hover {
        background: #082650;
        box-shadow: 0 6px 20px rgba(0,0,0,.35);
    }

.send-svg {
    width: 30px;
    height: 25px;
    overflow: visible;
}

/* sobre */
.send-body {
    fill: #96b8de;
    transition: fill .25s, transform .35s cubic-bezier(.4,1.4,.6,1);
    transform-origin: 15px 18px;
}
.send-flap {
    fill: #2d64d9;
    transition: fill .25s, transform .35s cubic-bezier(.4,1.4,.6,1);
    transform-origin: 15px 5px;
}

/* flecha de envío */
.send-arrow-shaft,
.send-arrow-head {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .35s cubic-bezier(.4,1.4,.6,1);
}

/* estela */
.send-trail {
    stroke: rgba(255,255,255,.5);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity .2s ease .1s, transform .3s ease .1s;
}
.send-trail.t2 { transition-delay: .15s; }

/* hover: sobre se eleva, flecha y estela aparecen */
.send-btn:hover .send-body  { transform: translateY(-4px); fill: #7eb3e0; }
.send-btn:hover .send-flap {
    transform: translateY(-4px) rotateX(-20deg);
    fill: #4d73ad;
}
.send-btn:hover .send-arrow-shaft,
.send-btn:hover .send-arrow-head { opacity: 1; transform: translateY(0); }
.send-btn:hover .send-trail { opacity: 1; }
/*scroll*/
.l-cards {
    width: 100%;
    /*max-width: 1200px;*/
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.l-cards.l-cards--visible {
    opacity: 1;
}

.c-card {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 24px;
    margin-top: -20px;
    width: 100%;
    height: 90vh;
    min-height: 690px;
    background-color: white;
    border: 1px solid var(--color-dark);
}

    .c-card .c-card__description {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
    }

        .c-card .c-card__description .c-card__tagline {
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .c-card .c-card__description .c-card__title {
            font-size: 36px;
        }

        .c-card .c-card__description .c-card__excerpt {
            font-size: 16px;
            line-height: 1.6;
        }

        .c-card .c-card__description .c-card__cta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 32px;
        }

            .c-card .c-card__description .c-card__cta a {
                width: max-content;
                padding: 12px 24px;
                border: 1px solid black;
                color: black;
                font-size: 16px;
                text-decoration: none;
            }

    .c-card .c-card__figure {
        position: relative;
        overflow: hidden;
    }

        .c-card .c-card__figure img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.spacer {
    width: 100%;
    height: 50vh;
}
.spacer2 {
    width: 100%;
    height: 30vh;
}
.spacer3 {
    width: 100%;
    height: 25vh;
}