/* ==========================================
THAURONS — Páginas de Soluciones
Estilos profesionales para /soluciones/<slug>/
Depende de: style.css (tokens y componentes globales)
Identidad: navy + azul eléctrico + dorado
========================================== */

/* ==========================================
01. HERO DE SOLUCIÓN
Alineación izquierda (como hero principal)
========================================== */
.solution-hero{
    position:relative;
    width:100%;
    max-width:1536px;
    min-height:650px;
    margin:0 auto;
    padding:120px 6%;
    display:flex;
    align-items:center;
    background:
        linear-gradient(180deg, #06111f 0%, #071522 100%);
    overflow:hidden;
}

/* Imagen de fondo con máscara profesional */
.solution-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-position:right center;
    background-size:55% auto;
    -webkit-mask-image:linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.65) 7%,
        #000 15%,
        #000 85%,
        rgba(0,0,0,0.65) 93%,
        transparent 100%
    );
    mask-image:linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.65) 7%,
        #000 15%,
        #000 85%,
        rgba(0,0,0,0.65) 93%,
        transparent 100%
    );
    pointer-events:none;
    z-index:0;
}

/* Grid decorativo (como hero principal) */
.solution-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );
    background-size:72px 72px;
    mask-image:linear-gradient(
        to bottom,
        rgba(0,0,0,0.65),
        transparent 90%
    );
    z-index:1;
}

/* Contenido alineado a la izquierda */
.solution-hero-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:620px;
    margin:0;
    text-align:left;
}

.solution-hero .section-kicker{
    display:inline-block;
    margin-bottom:24px;
}

.solution-hero h1{
    font-size:clamp(2.8rem, 5vw, 4.5rem);
    line-height:1.1;
    margin:0 0 24px;
    color:var(--color-text);
    text-wrap:balance;
}

.solution-hero h1 span{
    display:block;
    color:var(--color-gold-light);
    text-shadow:
        0 0 12px rgba(244,189,79,0.20);
}

.solution-hero-description{
    max-width:560px;
    margin:0 0 40px;
    font-size:clamp(1.1rem, 1.4vw, 1.25rem);
    line-height:1.75;
    color:var(--color-text-soft);
}

.solution-hero .hero-buttons{
    display:flex;
    gap:20px;
    justify-content:flex-start;
    flex-wrap:wrap;
    margin-top:0;
}

/* ==========================================
IMÁGENES DE FONDO POR SOLUCIÓN
(Combinar gradiente + imagen)
========================================== */
.solution-hero--nube-privada{
    position:relative;
    width:100%;
    max-width:1536px;
    min-height:650px;
    margin:0 auto;
    padding:2%;
    display:flex;
    align-items:center;
    background-image:
    url("/static/assets/images/soluciones/nube-privada-hero.webp");
    background-repeat:no-repeat;
    background-position:right -2px;
    background-size:95% auto;
}


.solution-hero--navegacion-limpia{
    position:relative;
    width:100%;
    max-width:1536px;
    min-height:650px;
    margin:0 auto;
    padding:120px 6%;
    display:flex;
    align-items:center;
    background-image:
    url("/static/assets/images/soluciones/navegacion-limpia-hero.webp");
    background-repeat:no-repeat;
    background-position:right -2px;
    background-size:95% auto;
    }

.solution-hero--videovigilancia{
    position:relative;
    width:100%;
    max-width:1536px;
    min-height:650px;
    margin:0 auto;
    padding:120px 6%;
    display:flex;
    align-items:center;
    background-image:
    url("/static/assets/images/soluciones/videovigilancia-hero.webp");
    background-repeat:no-repeat;
    background-position:right -2px;
    background-size:95% auto;
}

.solution-hero--hogar-inteligente{
    position:relative;
    width:100%;
    max-width:1536px;
    min-height:650px;
    margin:0 auto;
    padding:120px 6%;
    display:flex;
    align-items:center;
    background-image:
        url("/static/assets/images/soluciones/hogar-inteligente-hero.webp");
    background-repeat:no-repeat;
    background-position:right -2px;
    background-size:95% auto;
}

.solution-hero--red-protegida{
    position:relative;
    width:100%;
    max-width:1536px;
    min-height:650px;
    margin:0 auto;
    padding:120px 6%;
    display:flex;
    align-items:center;
    background-image:
    url("/static/assets/images/soluciones/red-protegida-hero.webp");
    background-repeat:no-repeat;
    background-position:right -2px;
    background-size:95% auto;
}

/* ==========================================
02. DETALLES DE SOLUCIÓN
========================================== */
.solution-details{
    position:relative;
    width:100%;
    padding:100px 24px;
    background:
        linear-gradient(
            180deg,
            #06111f 0%,
            #071522 50%,
            #06111f 100%
        );
}

.solution-container{
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
}

.solution-heading{
    width:100%;
    max-width:900px;
    margin:0 auto 75px;
    text-align:center;
}

.solution-heading h2{
    margin:0 0 18px;
    color:var(--color-text);
    font-size:clamp(2.5rem, 4vw, 3.5rem);
    line-height:1.15;
}

.solution-heading p{
    max-width:720px;
    margin:0 auto;
    color:var(--color-text-muted-2);
    font-size:1.1rem;
    line-height:1.7;
}

/* ==========================================
03. GRID DE PROBLEMAS
4 columnas desktop, 2 tablet, 1 móvil
========================================== */
.problem-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:26px;
    margin-bottom:80px;
}

.problem-card{
    position:relative;
    min-height:280px;
    padding:32px 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-lg);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

/* Línea superior roja (problema) */
.problem-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:
        linear-gradient(
            90deg,
            rgba(226,85,85,0.75),
            transparent 70%
        );
}

.problem-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,0.14);
}

.problem-number{
    display:block;
    margin-bottom:24px;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.16em;
    color:rgba(226,85,85,0.82);
}

.problem-card h3{
    margin:0 0 16px;
    font-size:1.25rem;
    line-height:1.3;
    color:var(--color-text);
}

.problem-card p{
    margin:0;
    font-size:0.96rem;
    line-height:1.65;
    color:var(--color-text-muted);
}

/* ==========================================
04. PROPUESTA DE SOLUCIÓN
========================================== */
.solution-proposal{
    position:relative;
    padding:70px 0;
    border-top:1px solid rgba(255,255,255,0.07);
    border-bottom:1px solid rgba(255,255,255,0.07);
}

.solution-proposal h2{
    max-width:900px;
    margin:0 auto 32px;
    text-align:center;
    font-size:clamp(2rem, 3.5vw, 3rem);
    line-height:1.2;
    color:var(--color-text);
    text-wrap:balance;
}

.proposal-subtitle{
    display:block;
    text-align:center;
    font-size:0.9rem;
    font-weight:700;
    letter-spacing:2px;
    color:var(--color-blue-light);
    margin-bottom:8px;
    text-transform:uppercase;
}

.solution-proposal > p:nth-of-type(1){
    text-align:center;
    font-size:1.15rem;
    color:var(--color-gold-light);
    margin-bottom:24px;
    font-weight:600;
}

.solution-proposal > p:nth-of-type(2){
    max-width:800px;
    margin:0 auto 50px;
    text-align:center;
    font-size:1.05rem;
    line-height:1.75;
    color:var(--color-text-soft);
}

.solution-proposal > p:nth-of-type(3){
    max-width:920px;
    margin:38px auto 78px;
    text-align:center;
    font-size:clamp(1.12rem, 1.5vw, 1.28rem);
    line-height:1.75;
    font-weight:600;
    color:var(--color-blue-light);
    text-wrap:balance;
    text-shadow:
        0 0 16px rgba(57,198,255,0.16);
}

/* ==========================================
05. GRID DE BENEFICIOS (DETALLE)
Modificador --4 para diferenciar del grid
de 3 columnas de la página principal
========================================== */
.benefits-grid--4{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:26px;
}

.benefits-grid--4 .benefit-card{
    position:relative;
    min-height:260px;
    padding:34px 30px;
    background:
        linear-gradient(
            145deg,
            rgba(11,34,53,0.66),
            rgba(5,18,31,0.86)
        );
    border:1px solid rgba(0,168,255,0.14);
    border-radius:16px;
    box-shadow:0 14px 30px rgba(0,0,0,0.18);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

/* Línea superior azul/dorado (beneficio) */
.benefits-grid--4 .benefit-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:
        linear-gradient(
            90deg,
            rgba(0,168,255,0),
            rgba(0,168,255,0.55),
            rgba(217,164,65,0.35),
            rgba(0,168,255,0)
        );
}

.benefits-grid--4 .benefit-card:hover{
    transform:translateY(-5px);
    border-color:rgba(0,168,255,0.36);
}

.benefits-grid--4 .benefit-number{
    display:block;
    margin-bottom:18px;
    color:var(--color-blue);
    text-align:center;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.16em;
}

.benefits-grid--4 .benefit-card h3{
    margin:0 0 14px;
    color:var(--color-text);
    text-align:center;
    font-size:1.3rem;
    line-height:1.3;
}

.benefits-grid--4 .benefit-card p{
    margin:0;
    color:var(--color-text-muted);
    font-size:0.98rem;
    line-height:1.7;
    text-align:center;
}

/* ==========================================
06. CTA FINAL
========================================== */
.solution-cta{
    max-width:800px;
    margin:80px auto 0;
    padding-top:50px;
    text-align:center;
    border-top:1px solid rgba(0,168,255,0.14);
}

.solution-cta p{
    margin:0 0 8px;
    font-size:1.15rem;
    color:var(--color-text-soft);
}

.solution-cta strong{
    display:block;
    margin-bottom:28px;
    font-size:1.35rem;
    color:var(--color-gold-light);
    font-weight:700;
    text-shadow:
        0 0 12px rgba(244,189,79,0.15);
}

.solution-cta .btn-primary{
    display:inline-block;
    margin-top:8px;
}

/* ==========================================
RESPONSIVE - TABLET (hasta 1100px)
========================================== */
@media (max-width:1100px){
    .solution-hero{
        padding:100px 28px 80px;
    }
    
    .solution-hero-content{
        max-width:520px;
    }
    
    .solution-hero h1{
        font-size:clamp(2.4rem, 8vw, 3.5rem);
    }
    
    .solution-hero::after{
        background-size:50% auto;
    }
    
    .solution-details{
        padding:80px 24px;
    }
    
    .solution-heading{
        margin-bottom:55px;
    }
    
    .problem-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    
    .benefits-grid--4{
        grid-template-columns:repeat(2, 1fr);
    }
    
    .benefits-grid--4 .benefit-card{
        min-height:240px;
    }
}

/* ==========================================
RESPONSIVE - TABLET PEQUEÑA (hasta 900px)
========================================== */
@media (max-width:900px){
    .solution-hero{
        min-height:auto;
        padding:90px 28px 70px;
    }
    
    .solution-hero-content{
        max-width:100%;
    }
    
    .solution-hero h1{
        font-size:clamp(2.2rem, 8vw, 3rem);
    }
    
    .solution-hero-description{
        max-width:100%;
    }
    
    .solution-hero::after{
        background-size:60% auto;
        opacity:0.4;
    }
    
    .solution-details{
        padding:70px 22px;
    }
    
    .solution-heading{
        margin-bottom:45px;
    }
    
    .solution-heading h2{
        font-size:clamp(2rem, 8vw, 2.8rem);
    }
}

/* ==========================================
RESPONSIVE - MÓVIL (hasta 600px)
========================================== */
@media (max-width:600px){
    .solution-hero{
        min-height:auto;
        padding:90px 20px 60px;
    }
    
    .solution-hero-content{
        max-width:100%;
    }
    
    .solution-hero h1{
        font-size:2.2rem;
    }
    
    .solution-hero-description{
        font-size:1rem;
        max-width:100%;
        margin-bottom:30px;
    }
    
    .solution-hero .hero-buttons{
        flex-direction:column;
        gap:14px;
    }
    
    .solution-hero .hero-buttons .btn-primary,
    .solution-hero .hero-buttons .btn-secondary{
        width:100%;
        text-align:center;
    }
    
    /* En móvil, la imagen se reduce con opacidad */
    .solution-hero::after{
        background-size:80% auto;
        opacity:0.25;
    }
    
    .solution-details{
        padding:60px 18px;
    }
    
    .solution-heading{
        margin-bottom:45px;
    }
    
    .solution-heading h2{
        font-size:clamp(2rem, 8vw, 2.8rem);
    }
    
    .problem-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:60px;
    }
    
    .problem-card{
        min-height:auto;
        padding:28px 24px;
    }
    
    .solution-proposal{
        padding:50px 0;
    }
    
    .solution-proposal h2{
        font-size:clamp(1.6rem, 7vw, 2.2rem);
        margin-bottom:24px;
    }
    
    .benefits-grid--4{
        grid-template-columns:1fr;
        gap:20px;
    }
    
    .benefits-grid--4 .benefit-card{
        min-height:auto;
        padding:30px 26px;
    }
    
    .benefits-grid--4 .benefit-card h3{
        font-size:1.2rem;
    }
    
    .benefits-grid--4 .benefit-card p{
        font-size:0.95rem;
    }
    
    .solution-cta{
        margin-top:60px;
        padding-top:40px;
    }
    
    .solution-cta p{
        font-size:1.05rem;
    }
    
    .solution-cta strong{
        font-size:1.2rem;
    }
}

/* ==========================================
RESPONSIVE - MÓVIL PEQUEÑO (hasta 400px)
========================================== */
@media (max-width:400px){
    .solution-hero{
        padding:80px 18px 50px;
    }
    
    .solution-hero h1{
        font-size:2rem;
    }
    
    .solution-details{
        padding:50px 16px;
    }
    
    .problem-card{
        padding:24px 20px;
    }
    
    .benefits-grid--4 .benefit-card{
        padding:26px 22px;
    }
}

/* ==========================================
ACCESIBILIDAD - MOVIMIENTO REDUCIDO
========================================== */
@media (prefers-reduced-motion: reduce){
    .problem-card,
    .benefits-grid--4 .benefit-card{
        transition:none;
    }
}