/* ══════════════════════════════════════════════
   Páginas de solución (Soluciones_Autoconsumo, _Comercializadora,
   _Distribuidora, _Transportista, _Aviacion, _Industria)
   Encabezado: migas + H1 + ícono de la solución.
   El contenido usa el bloque "Muy pronto" (css/proximamente.css).
   ══════════════════════════════════════════════ */

/* Navbar fija con fondo sólido, igual que en Soluciones_Estacion */
#navFloat {
    background-color: rgb(18 42 73) !important;
    box-shadow: 0px 0px 15px 3px rgb(0 0 0 / 50%);
}

.sol-page-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--nav-height, 70px) + 36px) 0 40px;
    background: linear-gradient(135deg, rgb(18 42 73) 0%, #1a3a6b 100%);
    color: #fff;
    isolation: isolate;
}

/* Anillos: mismo motivo que el bloque "Muy pronto" */
.sol-page-hero::before,
.sol-page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.sol-page-hero::before { width: 520px; height: 520px; right: -200px; bottom: -260px; border: 1.5px dashed rgb(255 255 255 / 16%); }
.sol-page-hero::after  { width: 320px; height: 320px; right: -100px; bottom: -160px; border: 1.5px solid rgb(255 255 255 / 8%); }

.sol-page-hero__inner {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.sol-page-hero__icon {
    --size: 72px;
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    border: 1.5px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: rgb(255 255 255 / 8%);
}
.sol-page-hero__icon i {
    width: 62%;
    height: 62%;
    background: #fff;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}

.sol-page-hero .sol-breadcrumb {
    margin: 0 0 6px;
    font-size: .9em;
    color: rgb(255 255 255 / 78%);
}
.sol-page-hero .sol-breadcrumb a { color: #fff; text-decoration: none; }
.sol-page-hero .sol-breadcrumb a:hover { text-decoration: underline; }
.sol-page-hero .sol-breadcrumb__sep { margin: 0 6px; }

.sol-page-hero__title {
    margin: 0;
    font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
}

.sol-page-main {
    max-width: 90%;
    margin: 0 auto;
    padding-bottom: 60px;
}

@media (max-width: 379.98px) {
    .sol-page-hero__inner { max-width: 100%; gap: 14px; }
    .sol-page-hero__icon { --size: 58px; }
    .sol-page-main { max-width: 100%; }
}

@media (min-width: 768px) {
    .sol-page-hero { padding: calc(var(--nav-height, 70px) + 56px) 0 56px; }
    .sol-page-hero__inner { gap: 26px; }
    .sol-page-hero__icon { --size: 104px; }
}

@media (min-width: 1200px) {
    .sol-page-hero { padding: calc(var(--nav-height, 70px) + 72px) 0 72px; }
    .sol-page-hero__icon { --size: 128px; }
}

/* Íconos por solución */
.sol-page-hero[data-sol="autoconsumo"]      { --icon: url(../media/images/iconos/autoconsumo.png); }
.sol-page-hero[data-sol="comercializadora"] { --icon: url(../media/images/iconos/comercializadora.png); }
.sol-page-hero[data-sol="distribuidora"]    { --icon: url(../media/images/iconos/distribuidora.png); }
.sol-page-hero[data-sol="transportista"]    { --icon: url(../media/images/iconos/transportista.png); }
.sol-page-hero[data-sol="aviacion"]         { --icon: url(../media/images/iconos/aviacion.png); }
.sol-page-hero[data-sol="industria"]        { --icon: url(../media/images/iconos/industria.png); }