/* ==========================================
THAURONS — Sistema visual principal
Refactor conservador de producción
Compatible con el index actual
Identidad: navy + azul eléctrico + dorado
========================================== */

/* ==========================================
00. DESIGN TOKENS / SISTEMA VISUAL
Fuente única para identidad, layout y movimiento
========================================== */
:root{
    color-scheme:dark;
    --font-sans:Arial, Helvetica, sans-serif;
    --color-bg:#08131f;
    --color-bg-deep:#06111f;
    --color-bg-panel:#071522;
    --color-text:#f5f8fc;
    --color-text-soft:#d4dee7;
    --color-text-muted:#aebdca;
    --color-text-muted-2:#b7c6d3;
    --color-blue:#00a8ff;
    --color-blue-light:#39c6ff;
    --color-gold:#d9a441;
    --color-gold-light:#f4bd4f;
    --color-gold-bright:#ffd76a;
    --color-danger:#e25555;
    --color-success:#45c98a;
    --container-content:1280px;
    --container-wide:1500px;
    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:18px;
    --radius-xl:20px;
    --transition-fast:0.25s ease;
    --transition-normal:0.30s ease;
    --header-offset:90px;
}

/* ==========================================
RESET / CONFIGURACIÓN GLOBAL
========================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
body{
    font-family:var(--font-sans);
    background:var(--color-bg);
    color:#ffffff;
}
button,
input,
textarea,
select{
    font:inherit;
}
h1,
h2,
h3,
h4{
    font-family:inherit;
    font-weight:700;
}
p{
    font-family:inherit;
}
img{
    max-width:100%;
    height:auto;
}
section[id]{
    scroll-margin-top:var(--header-offset);
}

/* Accesibilidad: foco visible coherente en elementos interactivos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(57,198,255,0.45);
    outline-offset:3px;
}

/* ==========================================
02. HEADER
========================================== */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    background:
        linear-gradient(
            180deg,
            rgba(12,29,47,0.98) 0%,
            rgba(7,20,34,0.98) 100%
        );
    border-bottom:1px solid rgba(217,164,65,0.50);
    box-shadow:
        0 8px 28px rgba(0,0,0,0.28);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/* ==========================================
02.1 NAVEGACIÓN PRINCIPAL
========================================== */
.main-nav{
    width:100%;
    max-width:var(--container-wide);
    min-height:92px;
    margin:0 auto;
    padding:10px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

/* ==========================================
02.2 MARCA
========================================== */
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
    text-decoration:none;
}
.brand-logo{
    width:68px;
    max-width:68px;
    height:auto;
    display:block;
    object-fit:contain;
    filter:
        drop-shadow(0 5px 10px rgba(0,0,0,0.35))
        drop-shadow(0 0 8px rgba(0,168,255,0.15));
}
.brand-banner{
    width:285px;
    max-width:285px;
    height:auto;
    display:block;
    object-fit:contain;
}

/* ==========================================
02.3 MENÚ DESKTOP
========================================== */
.nav-menu{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:28px;
    list-style:none;
}
.nav-link{
    position:relative;
    min-height:44px;
    display:flex;
    align-items:center;
    color:#f4f7fb;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.4px;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}
.nav-link::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:2px;
    width:0;
    height:2px;
    transform:translateX(-50%);
    border-radius:2px;
    background:
        linear-gradient(
            90deg,
            #b98227,
            #f3c76a
        );
    box-shadow:
        0 0 9px rgba(217,164,65,0.45);
    transition:width 0.25s ease;
}
.nav-link:hover{
    color:#e2b452;
    transform:translateY(-1px);
}
.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}
.nav-link.active{
    color:#e2b452;
}

/* ==========================================
02.4 CTA DEL HEADER
========================================== */
.nav-cta{
    min-height:44px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e9b84e;
    background:
        linear-gradient(
            180deg,
            rgba(217,164,65,0.07),
            rgba(217,164,65,0.03)
        );
    border:1px solid rgba(217,164,65,0.90);
    border-radius:var(--radius-sm);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
    box-shadow:
        inset 0 0 10px rgba(217,164,65,0.03);
    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.nav-cta:hover{
    color:#07131f;
    background:#d9a441;
    box-shadow:
        0 0 20px rgba(217,164,65,0.30);
    transform:translateY(-2px);
}

/* ==========================================
02.5 BOTÓN HAMBURGUESA
========================================== */
.menu-toggle{
    display:none;
    width:46px;
    height:46px;
    padding:9px;
    border:1px solid rgba(25,186,255,0.38);
    border-radius:var(--radius-sm);
    background:rgba(8,24,42,0.90);
    cursor:pointer;
}
.menu-toggle span{
    display:block;
    width:100%;
    height:2px;
    margin:5px 0;
    border-radius:2px;
    background:#19baff;
    box-shadow:
        0 0 7px rgba(25,186,255,0.48);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}
.menu-toggle.active span:nth-child(1){
    transform:
        translateY(7px)
        rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
    opacity:0;
}
.menu-toggle.active span:nth-child(3){
    transform:
        translateY(-7px)
        rotate(-45deg);
}

/* ==========================================
03. HERO
========================================== */
.hero{
    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/hero-thaurons.webp");
    background-repeat:no-repeat;
    background-position:right -2px;
    background-size:95% auto;
}
.hero-content{
    position:relative;
    z-index:2;
    width:42%;
    max-width:620px;
    transform:translateY(-18%);
}
.hero h1{
    font-size:56px;
    line-height:1.2;
    margin-bottom:25px;
}
.hero-highlight{
    display:block;
    color:var(--color-gold-light);
    text-shadow:
        0 0 8px rgba(244,189,79,0.30),
        0 0 18px rgba(217,164,65,0.18);
}
.hero p{
    font-size:20px;
    color:#ffffff;
    line-height:1.7;
    margin-bottom:40px;
    font-weight:500;
    text-shadow:
        0 2px 8px rgba(0,0,0,0.65),
        0 0 8px rgba(0,0,0,0.45);
}
.hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:120px;
    background:
        linear-gradient(
            180deg,
            rgba(6,17,31,0) 0%,
            rgba(6,17,31,0.55) 45%,
            #06111f 100%
        );
    pointer-events:none;
}

/* ==========================================
03.1 BOTONES HERO / CTA
========================================== */
.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:50px;
}
.btn-primary{
    background:
        linear-gradient(
            135deg,
            #ffd76a,
            #d9a441
        );
    color:#08131f;
    padding:15px 30px;
    text-decoration:none;
    border:1px solid #e5c681;
    border-radius:var(--radius-sm);
    font-weight:700;
    box-shadow:
        0 0 10px rgba(217,182,111,0.22),
        0 0 20px rgba(185,138,63,0.12);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.btn-secondary{
    background:rgba(5,18,32,0.88);
    color:var(--color-gold-bright);
    padding:15px 30px;
    text-decoration:none;
    border:1px solid #ffe28a;
    border-radius:var(--radius-sm);
    font-weight:700;
    box-shadow:
        0 0 10px rgba(242,185,63,0.30);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.btn-primary:hover,
.btn-secondary:hover{
    background:
        linear-gradient(
            135deg,
            #ffe694,
            #efb43e
        );
    color:#08131f;
    transform:translateY(-2px);
    box-shadow:
        0 0 18px rgba(255,205,75,0.65),
        0 0 34px rgba(217,164,65,0.30);
}

/* ==========================================
04. FRANJA DE PILARES
========================================== */
.trust-strip{
    position:relative;
    z-index:3;
    width:100%;
    background:
        linear-gradient(
            90deg,
            #071421,
            #0a1d2e 50%,
            #071421
        );
    border-top:1px solid rgba(0,168,255,0.18);
    border-bottom:1px solid rgba(0,168,255,0.18);
    box-shadow:
        0 0 25px rgba(0,168,255,0.05);
}
.trust-strip-inner{
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
    padding:18px 30px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    align-items:center;
}
.trust-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:5px 22px;
    color:#dbe8f2;
    font-size:17px;
    font-weight:650;
    white-space:nowrap;
}
.trust-item + .trust-item{
    border-left:1.5px solid rgba(255,255,255,0.10);
}
.trust-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:#00a8ff;
    box-shadow:
        0 0 6px #00a8ff,
        0 0 12px rgba(0,168,255,0.55);
}

/* ==========================================
05. SOLUCIONES
========================================== */
.solutions-section{
    position:relative;
    width:100%;
    padding:55px 24px 100px;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(0,168,255,0.14) 0%,
            rgba(0,168,255,0.05) 32%,
            transparent 62%
        ),
        linear-gradient(
            180deg,
            #06111f 0%,
            #071522 55%,
            #06111f 100%
        );
    overflow:hidden;
}
.solutions-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(720px, 80%);
    height:1px;
    transform:translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,168,255,0.75),
            rgba(244,189,79,0.55),
            rgba(0,168,255,0.75),
            transparent
        );
    box-shadow:
        0 0 16px rgba(0,168,255,0.25);
}
.solutions-container{
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
}

/* ==========================================
05.1 ENCABEZADO SOLUCIONES
========================================== */
.solutions-heading{
    width:100%;
    max-width:850px;
    margin:0 auto 42px;
    text-align:center;
}
.section-kicker{
    display:table;
    margin:0 auto 14px;
    padding:9px 22px;
    color:var(--color-blue-light);
    font-size:17px;
    font-weight:800;
    letter-spacing:3.5px;
    border:1px solid rgba(0,168,255,0.32);
    border-radius:999px;
    background:rgba(0,168,255,0.07);
    box-shadow:
        0 0 18px rgba(0,168,255,0.12),
        inset 0 0 12px rgba(0,168,255,0.04);
    text-shadow:
        0 0 10px rgba(0,168,255,0.40);
}
.solutions-heading h2{
    margin:0 auto 18px;
    color:var(--color-text);
    font-size:48px;
    line-height:1.12;
    text-align:center;
    text-shadow:
        0 3px 14px rgba(0,0,0,0.35);
}
.solutions-heading h2 span{
    color:var(--color-gold-light);
    text-shadow:
        0 0 12px rgba(244,189,79,0.20);
}
.solutions-heading p{
    max-width:680px;
    margin:0 auto;
    color:var(--color-text-muted);
    font-size:18px;
    line-height:1.7;
    text-align:center;
}

/* ==========================================
05.2 GRID DE SERVICIOS
AJUSTE CRÍTICO: Flexbox para 3 arriba + 2 centradas abajo
========================================== */
.solutions-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
}

/* Cada tarjeta ocupa exactamente 1/3 del espacio menos el gap */
.solution-card{
    flex:0 0 calc(33.333% - 20px);
    max-width:calc(33.333% - 20px);
    /* El resto de estilos de .solution-card (min-height, padding, etc.) 
       se mantienen intactos más abajo en tu CSS */
}

/* ==========================================
05.3 TARJETAS
========================================== */
.solution-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:420px;
    min-height:430px;
    padding:24px 22px 28px;
    overflow:hidden;
    text-align:center;
    text-decoration:none;
    background:
        linear-gradient(
            180deg,
            rgba(12,34,54,0.58),
            rgba(5,18,31,0.82)
        );
    border:
        1px solid rgba(0,168,255,0.16);
    border-radius:var(--radius-lg);
    box-shadow:
        0 15px 35px rgba(0,0,0,0.20);
    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        background 0.30s ease;
}
.solution-card::before{
    content:"";
    position:absolute;
    top:-80px;
    left:50%;
    width:230px;
    height:180px;
    transform:translateX(-50%);
    background:
        radial-gradient(
            circle,
            rgba(0,168,255,0.14),
            transparent 68%
        );
    pointer-events:none;
}

/* ==========================================
05.4 ICONO HEXAGONAL
========================================== */
.solution-icon{
    position:relative;
    z-index:2;
    width:100%;
    height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
}
.solution-icon img{
    display:block;
    width:auto;
    max-width:190px;
    height:auto;
    max-height:190px;
    object-fit:contain;
    transition:
        transform 0.30s ease,
        filter 0.30s ease;
}

/* ==========================================
05.5 TEXTO TARJETA
========================================== */
.solution-card h3{
    position:relative;
    z-index:2;
    margin:0 0 13px;
    color:#f4f8fc;
    font-size:23px;
    line-height:1.2;
}
.solution-card p{
    position:relative;
    z-index:2;
    margin:0 0 22px;
    color:var(--color-text-muted);
    font-size:15px;
    line-height:1.65;
}
.solution-more{
    position:relative;
    z-index:2;
    margin-top:auto;
    color:var(--color-gold-light);
    font-size:15px;
    font-weight:700;
    transition:
        color 0.30s ease,
        transform 0.30s ease;
}

/* ==========================================
05.6 HOVER
========================================== */
.solution-card:hover{
    transform:translateY(-7px);
    border-color:
        rgba(0,168,255,0.48);
    background:
        linear-gradient(
            180deg,
            rgba(13,42,67,0.72),
            rgba(5,18,31,0.90)
        );
    box-shadow:
        0 20px 45px rgba(0,0,0,0.30),
        0 0 25px rgba(0,168,255,0.10);
}
.solution-card:hover .solution-icon img{
    transform:scale(1.05);
    filter:
        drop-shadow(
            0 0 14px rgba(0,168,255,0.30)
        );
}
.solution-card:hover .solution-more{
    color:var(--color-gold-bright);
    transform:translateX(3px);
}

/* ==========================================
06. NOSOTROS
========================================== */
.about-section{
    position:relative;
    width:100%;
    padding:100px 24px 105px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 80% 45%,
            rgba(0,168,255,0.06),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #06111f 0%,
            #081725 50%,
            #06111f 100%
        );
}
.about-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(900px, 80%);
    height:1px;
    transform:translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,168,255,0.40),
            rgba(217,164,65,0.40),
            rgba(0,168,255,0.40),
            transparent
        );
}
.about-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
}

/* ==========================================
06.1 ENCABEZADO NOSOTROS
========================================== */
.about-heading{
    width:100%;
    max-width:900px;
    margin:0 auto 75px;
    text-align:center;
}
.about-heading h2{
    margin:0 auto 22px;
    color:var(--color-text);
    font-size:46px;
    line-height:1.15;
}
.about-heading h2 span{
    display:block;
    color:var(--color-gold-light);
    text-shadow:
        0 0 12px rgba(244,189,79,0.18);
}
.about-heading > p{
    max-width:720px;
    margin:0 auto;
    color:var(--color-text-muted-2);
    font-size:18px;
    line-height:1.7;
}

/* ==========================================
06.2 CONTENIDO PRINCIPAL
========================================== */
.about-content{
    display:grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);
    gap:85px;
    align-items:start;
}

/* ==========================================
06.3 MENSAJE
========================================== */
.about-message{
    position:relative;
    padding-left:28px;
    border-left:
        2px solid rgba(0,168,255,0.32);
}
.about-message h3{
    max-width:580px;
    margin:0 0 28px;
    color:var(--color-text);
    font-size:31px;
    line-height:1.3;
}
.about-message p{
    max-width:620px;
    margin:0 0 22px;
    color:#b9c8d4;
    font-size:17px;
    line-height:1.8;
}
.about-message p:last-child{
    margin-bottom:0;
}

/* ==========================================
06.4 VALORES / PRINCIPIOS
========================================== */
.about-values{
    display:flex;
    flex-direction:column;
}
.about-value{
    position:relative;
    padding:5px 0 26px 60px;
    margin-bottom:26px;
    border-bottom:
        1px solid rgba(255,255,255,0.10);
}
.about-value:last-child{
    margin-bottom:0;
    padding-bottom:5px;
    border-bottom:none;
}
.about-value > span{
    position:absolute;
    top:4px;
    left:0;
    color:var(--color-blue);
    font-size:15px;
    font-weight:800;
    letter-spacing:1px;
    text-shadow:
        0 0 10px rgba(0,168,255,0.45);
}
.about-value h4{
    margin:0 0 9px;
    color:var(--color-text);
    font-size:21px;
    line-height:1.3;
}
.about-value p{
    margin:0;
    color:var(--color-text-muted);
    font-size:15px;
    line-height:1.65;
}

/* ==========================================
06.5 CTA NOSOTROS
========================================== */
.about-cta{
    margin-top:80px;
    padding-top:42px;
    text-align:center;
    border-top:
        1px solid rgba(0,168,255,0.15);
}
.about-cta p{
    max-width:800px;
    margin:0 auto 30px;
    color:var(--color-text-soft);
    font-size:21px;
    line-height:1.6;
}
.about-cta strong{
    color:var(--color-gold-light);
    font-weight:700;
}

/* ==========================================
08. BENEFICIOS / SOBERANÍA DIGITAL
========================================== */
.benefits-section{
    position:relative;
    width:100%;
    padding:95px 24px 105px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0,168,255,0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #06111f 0%,
            #071522 50%,
            #06111f 100%
        );
}
.benefits-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(900px, 80%);
    height:1px;
    transform:translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,168,255,0.35),
            rgba(217,164,65,0.45),
            rgba(0,168,255,0.35),
            transparent
        );
}
.benefits-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
}

/* ==========================================
ENCABEZADO BENEFICIOS
========================================== */
.benefits-heading{
    width:100%;
    max-width:900px;
    margin:0 auto 60px;
    text-align:center;
}
.benefits-heading h2{
    margin:0 auto 22px;
    color:var(--color-text);
    font-size:46px;
    line-height:1.15;
}
.benefits-heading h2 span{
    display:block;
    color:var(--color-gold-light);
    text-shadow:
        0 0 12px rgba(244,189,79,0.18);
}
.benefits-heading > p{
    max-width:780px;
    margin:0 auto;
    color:var(--color-text-muted-2);
    font-size:18px;
    line-height:1.75;
}

/* ==========================================
COMPARACIÓN
========================================== */
.benefits-comparison{
    display:grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    gap:28px;
    align-items:stretch;
    max-width:1050px;
    margin:0 auto 65px;
}
.comparison-side{
    padding:28px 30px;
    border-radius:var(--radius-md);
    background:
        linear-gradient(
            180deg,
            rgba(11,31,49,0.72),
            rgba(5,18,31,0.88)
        );
    border:
        1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.18);
}
.comparison-service{
    opacity:0.82;
}
.comparison-own{
    border-color:
        rgba(0,168,255,0.28);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.20),
        0 0 22px rgba(0,168,255,0.06);
}
.comparison-label{
    display:block;
    margin-bottom:12px;
    color:var(--color-text);
    font-size:16px;
    font-weight:800;
    letter-spacing:1.8px;
}
.comparison-own .comparison-label{
    color:var(--color-gold-light);
}
.comparison-side p{
    margin:0;
    color:var(--color-text-muted);
    font-size:17px;
    line-height:1.72;
}
.comparison-divider{
    display:flex;
    align-items:center;
    justify-content:center;
}
.comparison-divider span{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--color-blue-light);
    font-size:13px;
    font-weight:800;
    border:
        1px solid rgba(0,168,255,0.32);
    background:
        rgba(0,168,255,0.06);
    box-shadow:
        0 0 16px rgba(0,168,255,0.12);
}

/* ==========================================
GRID DE BENEFICIOS (PÁGINA PRINCIPAL)
3 columnas para la sección de beneficios
========================================== */
.benefits-grid{
    display:grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap:26px;
}
.benefit-card{
    position:relative;
    min-height:255px;
    padding:28px 26px 30px;
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            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,
        box-shadow 0.3s ease;
}
.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)
        );
}
.benefit-card:hover{
    transform:translateY(-5px);
    border-color:
        rgba(0,168,255,0.36);
    box-shadow:
        0 18px 36px rgba(0,0,0,0.24),
        0 0 20px rgba(0,168,255,0.07);
}
.benefit-number{
    display:block;
    margin-bottom:18px;
    color:var(--color-blue);
    text-align:center;
    font-size:16px;
    font-weight:800;
    letter-spacing:1px;
    text-shadow:
        0 0 9px rgba(0,168,255,0.35);
}
.benefit-card h3{
    margin:0 0 14px;
    color:var(--color-text);
    text-align:center;
    font-size:23px;
    line-height:1.3;
}
.benefit-card p{
    margin:0;
    color:var(--color-text-muted);
    font-size:17px;
    line-height:1.75;
    text-align:justify;
    text-justify:inter-word;
}

/* ==========================================
CIERRE BENEFICIOS
========================================== */
.benefits-statement{
    max-width:900px;
    margin:75px auto 0;
    padding-top:38px;
    text-align:center;
    border-top:
        1px solid rgba(0,168,255,0.14);
}
.benefits-statement > span{
    display:block;
    margin-bottom:14px;
    color:var(--color-blue-light);
    font-size:15px;
    font-weight:800;
    letter-spacing:2.5px;
}
.benefits-statement h3{
    margin:0;
    color:#d9e4ec;
    font-size:28px;
    line-height:1.45;
}
.benefits-statement strong{
    display:block;
    margin-top:6px;
    color:var(--color-gold-light);
    font-weight:700;
    text-shadow:
        0 0 12px rgba(244,189,79,0.15);
}

/* ==========================================
09. CONTACTO
========================================== */
.contact-section{
    position:relative;
    width:100%;
    padding:95px 24px 105px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0,168,255,0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #06111f 0%,
            #071522 50%,
            #06111f 100%
        );
}
.contact-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(900px, 80%);
    height:1px;
    transform:translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,168,255,0.35),
            rgba(217,164,65,0.45),
            rgba(0,168,255,0.35),
            transparent
        );
}
.contact-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
}

/* ==========================================
09.1 ENCABEZADO CONTACTO
========================================== */
.contact-heading{
    width:100%;
    max-width:900px;
    margin:0 auto 65px;
    text-align:center;
}
.contact-heading h2{
    margin:0 auto 18px;
    color:var(--color-text);
    font-size:46px;
    line-height:1.15;
}
.contact-heading h2 span{
    display:block;
    color:var(--color-gold-light);
    text-shadow:
        0 0 12px rgba(244,189,79,0.18);
}
.contact-heading > p{
    max-width:720px;
    margin:0 auto;
    color:var(--color-text-muted-2);
    font-size:18px;
    line-height:1.7;
}

/* ==========================================
09.2 CONTENIDO CONTACTO
========================================== */
.contact-content{
    display:grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);
    gap:70px;
    align-items:start;
}

/* ==========================================
09.3 INFORMACIÓN
========================================== */
.contact-info{
    position:relative;
    padding:8px 0 8px 26px;
    border-left:
        2px solid rgba(0,168,255,0.30);
}
.contact-eyebrow{
    display:block;
    margin-bottom:10px;
    color:var(--color-blue-light);
    font-size:15px;
    font-weight:800;
    letter-spacing:2px;
}
.contact-info h3{
    margin:0 0 22px;
    color:var(--color-text);
    font-size:30px;
    line-height:1.28;
}
.contact-intro{
    max-width:590px;
    margin:0 0 34px;
    color:#b9c8d4;
    font-size:17px;
    line-height:1.78;
}

/* ==========================================
09.4 BENEFICIOS CONTACTO
========================================== */
.contact-benefits{
    display:flex;
    flex-direction:column;
    gap:22px;
}
.contact-benefit{
    display:flex;
    align-items:flex-start;
    gap:15px;
}
.contact-benefit > span{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#06111f;
    background:
        linear-gradient(
            135deg,
            #ffd76a,
            #d9a441
        );
    font-size:14px;
    font-weight:800;
    box-shadow:
        0 0 12px rgba(217,164,65,0.20);
}
.contact-benefit strong{
    display:block;
    margin-bottom:5px;
    color:var(--color-text);
    font-size:17px;
}
.contact-benefit p{
    margin:0;
    color:var(--color-text-muted);
    font-size:15.5px;
    line-height:1.6;
}

/* ==========================================
09.5 CONTACTO DIRECTO / WHATSAPP
========================================== */
.contact-direct{
    margin-top:42px;
    padding-top:28px;
    border-top:
        1px solid rgba(0,168,255,0.14);
}
.contact-direct > p{
    margin:0 0 18px;
    color:var(--color-text-soft);
    font-size:16px;
    line-height:1.6;
}

/* ==========================================
09.6 FORMULARIO
========================================== */
.contact-form-wrapper{
    position:relative;
    padding:34px;
    background:
        linear-gradient(
            180deg,
            rgba(11,34,53,0.72),
            rgba(5,18,31,0.90)
        );
    border:
        1px solid rgba(0,168,255,0.18);
    border-radius:var(--radius-lg);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.24),
        0 0 24px rgba(0,168,255,0.05);
}
.contact-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:9px;
}
.form-group label{
    color:var(--color-text);
    font-size:15px;
    font-weight:700;
}
.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:14px 15px;
    color:var(--color-text);
    background:
        rgba(4,16,28,0.82);
    border:
        1px solid rgba(0,168,255,0.18);
    border-radius:9px;
    font-family:var(--font-sans);
    font-size:15.5px;
    outline:none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}
.form-group textarea{
    resize:vertical;
    min-height:145px;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#728392;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:
        rgba(0,168,255,0.55);
    background:
        rgba(5,20,34,0.96);
    box-shadow:
        0 0 0 3px rgba(0,168,255,0.08),
        0 0 14px rgba(0,168,255,0.08);
}
.form-group select{
    cursor:pointer;
}
.form-group select option{
    color:var(--color-text);
    background:var(--color-bg);
}

/* ==========================================
VALIDACIÓN DEL FORMULARIO
========================================== */
.form-feedback{
    display:block;
    min-height:20px;
    margin-top:2px;
    font-size:13px;
    font-weight:600;
    transition:color 0.25s ease;
}
.form-group input.input-invalid{
    border-color:#e25555;
    box-shadow:
        0 0 0 2px rgba(226,85,85,0.08),
        0 0 12px rgba(226,85,85,0.10);
}
.input-invalid + .form-feedback{
    color:#ef6b6b;
}
.form-group input.input-valid{
    border-color:#45c98a;
    box-shadow:
        0 0 0 2px rgba(69,201,138,0.07),
        0 0 12px rgba(69,201,138,0.08);
}
.input-valid + .form-feedback{
    color:#55d99a;
}
.form-group select.input-invalid{
    border-color:#e25555;
    box-shadow:
        0 0 0 2px rgba(226,85,85,0.08),
        0 0 12px rgba(226,85,85,0.10);
}
.form-group select.input-invalid + .form-feedback{
    color:#ef6b6b;
}
.form-group select.input-valid{
    border-color:#45c98a;
    box-shadow:
        0 0 0 2px rgba(69,201,138,0.07),
        0 0 12px rgba(69,201,138,0.08);
}
.form-group select.input-valid + .form-feedback{
    color:#55d99a;
}
.form-group textarea.input-invalid{
    border-color:#e25555;
    box-shadow:
        0 0 0 2px rgba(226,85,85,0.08),
        0 0 12px rgba(226,85,85,0.10);
}
.form-group textarea.input-invalid + .form-feedback{
    color:#ef6b6b;
}
.form-group textarea.input-valid{
    border-color:#45c98a;
    box-shadow:
        0 0 0 2px rgba(69,201,138,0.07),
        0 0 12px rgba(69,201,138,0.08);
}
.form-group textarea.input-valid + .form-feedback{
    color:#55d99a;
}

/* ==========================================
09.7 PRIVACIDAD Y ENVÍO
========================================== */
.contact-privacy{
    margin:-2px 0 0;
    color:#8294a3;
    font-size:13.5px;
    line-height:1.55;
}
.contact-submit{
    width:100%;
    padding:15px 24px;
    border:1px solid #e5c681;
    border-radius:var(--radius-sm);
    background:
        linear-gradient(
            135deg,
            #d9b66f,
            #b98a3f
        );
    color:#08131f;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    box-shadow:
        0 0 10px rgba(217,182,111,0.22),
        0 0 20px rgba(185,138,63,0.12);
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.contact-submit:hover{
    background:
        linear-gradient(
            135deg,
            #e6c783,
            #c99b4d
        );
    transform:translateY(-2px);
    box-shadow:
        0 0 14px rgba(230,199,131,0.35),
        0 0 26px rgba(185,138,63,0.18);
}

/* ==========================================
09.8 CONFIRMACIÓN DE SOLICITUD
========================================== */
.contact-success-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    isolation:isolate;
}
.contact-success-backdrop{
    position:absolute;
    inset:0;
    z-index:-1;
    background:rgba(2,10,18,0.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.contact-success-card{
    position:relative;
    width:min(100%, 500px);
    padding:42px 38px 36px;
    overflow:hidden;
    text-align:center;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0,168,255,0.14),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #0c2236 0%,
            #071522 100%
        );
    border:1px solid rgba(0,168,255,0.35);
    border-radius:var(--radius-xl);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.55),
        0 0 35px rgba(0,168,255,0.10);
    animation:
        contactSuccessEnter 0.32s ease-out both;
}
.contact-success-card::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:72%;
    height:2px;
    transform:translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            #00a8ff,
            #f4bd4f,
            #00a8ff,
            transparent
        );
    box-shadow:
        0 0 16px rgba(0,168,255,0.38);
}
.contact-success-icon{
    width:66px;
    height:66px;
    margin:0 auto 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#08131f;
    background:
        linear-gradient(
            135deg,
            #ffd76a,
            #d9a441
        );
    font-size:31px;
    font-weight:800;
    box-shadow:
        0 0 0 7px rgba(217,164,65,0.07),
        0 0 24px rgba(217,164,65,0.22);
}
.contact-success-card h3{
    margin:0 0 16px;
    color:var(--color-text);
    font-size:29px;
    line-height:1.25;
}
.contact-success-card p{
    max-width:410px;
    margin:0 auto 30px;
    color:var(--color-text-muted-2);
    font-size:16px;
    line-height:1.7;
}
.contact-success-button{
    min-width:170px;
    min-height:48px;
    padding:13px 28px;
    border:1px solid #e5c681;
    border-radius:var(--radius-sm);
    background:
        linear-gradient(
            135deg,
            #ffd76a,
            #d9a441
        );
    color:#08131f;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    box-shadow:
        0 0 12px rgba(217,164,65,0.20);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}
.contact-success-button:hover{
    transform:translateY(-2px);
    background:
        linear-gradient(
            135deg,
            #ffe694,
            #efb43e
        );
    box-shadow:
        0 0 20px rgba(217,164,65,0.30);
}
.contact-success-button:focus-visible{
    outline:3px solid rgba(57,198,255,0.40);
    outline-offset:4px;
}
@keyframes contactSuccessEnter{
    from{
        opacity:0;
        transform:translateY(18px) scale(0.97);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* ==========================================
10. FOOTER
Sistema global de diseño (no se separa)
========================================== */
.site-footer{
    position:relative;
    width:100%;
    padding:80px 0 0;
    background:
        linear-gradient(
            180deg,
            #0a0a0a 0%,
            #050505 100%
        );
    border-top:1px solid #1a1a1a;
    margin-top:80px;
}
.footer-container{
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
    padding:0 24px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:60px;
}
.footer-column{
    display:flex;
    flex-direction:column;
}
.footer-logo{
    margin-bottom:20px;
}
.footer-logo img{
    max-width:150px;
    height:auto;
    filter:
        drop-shadow(0 0 8px rgba(217,164,65,0.15));
}
.footer-description{
    font-size:0.95rem;
    line-height:1.7;
    color:#a0a0a0;
    margin:0;
    max-width:320px;
}
.footer-heading{
    font-size:0.95rem;
    font-weight:700;
    color:#ffffff;
    margin-bottom:24px;
    text-transform:uppercase;
    letter-spacing:1.2px;
}
.footer-links{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.footer-links a{
    color:#a0a0a0;
    text-decoration:none;
    font-size:0.95rem;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
    display:inline-block;
}
.footer-links a:hover{
    color:#d9a441;
    transform:translateX(3px);
}
.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.footer-contact a{
    color:#a0a0a0;
    text-decoration:none;
    font-size:0.95rem;
    transition:color 0.25s ease;
}
.footer-contact a:hover{
    color:#d9a441;
}
.btn-footer{
    display:inline-block;
    padding:12px 24px;
    background:
        linear-gradient(
            135deg,
            #ffd76a,
            #d9a441
        );
    color:#08131f;
    border-radius:var(--radius-sm);
    font-weight:700;
    font-size:0.9rem;
    text-align:center;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.btn-footer:hover{
    transform:translateY(-2px);
    box-shadow:
        0 0 18px rgba(217,164,65,0.30);
}
.footer-bottom{
    margin-top:60px;
    padding:24px 0;
    border-top:1px solid #1a1a1a;
    background-color:#050505;
}
.footer-bottom-content{
    width:100%;
    max-width:var(--container-content);
    margin:0 auto;
    padding:0 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
}
.footer-copyright{
    font-size:0.85rem;
    color:#707070;
    margin:0;
}
.footer-tagline{
    font-size:0.85rem;
    color:#707070;
    margin:0;
    font-style:italic;
}

/* ==========================================
11. RESPONSIVE - TABLET
901px a 1100px
========================================== */
@media (min-width:901px) and (max-width:1100px){
    .main-nav{
        min-height:82px;
        padding:8px 20px;
    }
    .brand-logo{
        width:58px;
        max-width:58px;
    }
    .brand-banner{
        width:235px;
        max-width:235px;
    }
    .menu-toggle{
        display:block;
        flex-shrink:0;
    }
    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:18px 22px 24px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:
            linear-gradient(
                180deg,
                rgba(7,20,34,0.99),
                rgba(5,15,27,0.99)
            );
        border-top:1px solid rgba(25,186,255,0.12);
        border-bottom:1px solid rgba(217,164,65,0.42);
        box-shadow:
            0 18px 35px rgba(0,0,0,0.38);
    }
    .nav-menu.open{
        display:flex;
    }
    .nav-menu li{
        width:100%;
    }
    .nav-link{
        width:100%;
        min-height:48px;
        padding:0 10px;
    }
    .nav-link::after{
        left:10px;
        transform:none;
    }
    .nav-link:hover::after,
    .nav-link.active::after{
        width:42px;
    }
    .nav-cta{
        width:100%;
        margin-top:8px;
    }
    .hero{
        min-height:610px;
        padding:100px 5%;
        background-size:105% auto;
        background-position:right center;
    }
    .hero-content{
        width:48%;
        transform:translateY(-12%);
    }
    .hero h1{
        font-size:48px;
    }
    .hero p{
        font-size:18px;
    }
    .trust-strip-inner{
        padding:16px 20px;
    }
    .trust-item{
        padding:5px 12px;
        font-size:15px;
    }

    /* SOLUCIONES: 2 columnas en tablet */
    .solutions-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:26px;
    }
    .solution-card{
        flex:0 0 calc(50% - 15px);
        max-width:calc(50% - 15px);
    }

    .about-content{
        gap:55px;
    }
    .about-heading h2{
        font-size:42px;
    }
    .benefits-section{
        padding:82px 22px 92px;
    }
    .benefits-heading{
        margin-bottom:52px;
    }
    .benefits-heading h2{
        font-size:40px;
    }
    .benefits-comparison{
        gap:20px;
        margin-bottom:54px;
    }
    .comparison-side{
        padding:25px 24px;
    }
    .comparison-side p{
        font-size:16.5px;
    }
    .benefits-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:22px;
    }
    .benefit-card{
        min-height:245px;
    }
    .contact-section{
        padding:82px 22px 92px;
    }
    .contact-heading h2{
        font-size:40px;
    }
    .contact-content{
        gap:48px;
    }
    .contact-info h3{
        font-size:27px;
    }
    .contact-form-wrapper{
        padding:30px;
    }
    .contact-success-card{
        width:min(100%, 480px);
        padding:38px 34px 34px;
    }
    .contact-success-card h3{
        font-size:27px;
    }

    /* FOOTER: 2 columnas en tablet */
    .footer-container{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }
}

/* ==========================================
12. RESPONSIVE - TABLET PEQUEÑA
601px a 900px
========================================== */
@media (min-width:601px) and (max-width:900px){
    .main-nav{
        min-height:78px;
        padding:8px 18px;
    }
    .brand-logo{
        width:54px;
        max-width:54px;
    }
    .brand-banner{
        width:215px;
        max-width:215px;
    }
    .menu-toggle{
        display:block;
        flex-shrink:0;
    }
    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:18px 20px 22px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:
            linear-gradient(
                180deg,
                rgba(7,20,34,0.99),
                rgba(5,15,27,0.99)
            );
        border-top:1px solid rgba(25,186,255,0.12);
        border-bottom:1px solid rgba(217,164,65,0.42);
        box-shadow:
            0 18px 35px rgba(0,0,0,0.38);
    }
    .nav-menu.open{
        display:flex;
    }
    .nav-menu li{
        width:100%;
    }
    .nav-link{
        width:100%;
        min-height:48px;
        padding:0 10px;
    }
    .nav-link::after{
        left:10px;
        transform:none;
    }
    .nav-link:hover::after,
    .nav-link.active::after{
        width:42px;
    }
    .nav-cta{
        width:100%;
        margin-top:8px;
    }
    .hero{
        min-height:560px;
        padding:78px 5% 90px;
        background-size:125% auto;
        background-position:72% center;
    }
    .hero-content{
        width:58%;
        max-width:520px;
        transform:translateY(-6%);
    }
    .hero h1{
        font-size:43px;
    }
    .hero p{
        font-size:17px;
        line-height:1.6;
    }
    .hero-buttons{
        margin-top:34px;
        gap:14px;
    }
    .btn-primary,
    .btn-secondary{
        padding:14px 22px;
    }
    .trust-strip-inner{
        grid-template-columns:repeat(2, 1fr);
        gap:10px 8px;
        padding:15px 20px;
    }
    .trust-item{
        justify-content:flex-start;
        padding:7px 10px;
        font-size:14px;
        white-space:normal;
    }
    .trust-item + .trust-item{
        border-left:none;
    }

    /* SOLUCIONES: 2 columnas */
    .solutions-section{
        padding:52px 22px 85px;
    }
    .solutions-heading h2{
        font-size:40px;
    }
    .solutions-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:22px;
    }
    .solution-card{
        flex:0 0 100%;
        max-width:100%;
    }
    .solution-icon{
        height:185px;
    }
    .solution-icon img{
        max-width:170px;
        max-height:170px;
    }

    .about-section{
        padding:82px 22px 88px;
    }
    .about-heading{
        margin-bottom:55px;
    }
    .about-heading h2{
        font-size:38px;
    }
    .about-content{
        grid-template-columns:1fr;
        gap:48px;
    }
    .about-message{
        max-width:680px;
    }
    .about-values{
        max-width:720px;
        width:100%;
    }
    .about-cta{
        margin-top:60px;
    }
    .benefits-section{
        padding:76px 22px 82px;
    }
    .benefits-heading{
        margin-bottom:46px;
    }
    .benefits-heading h2{
        font-size:36px;
        line-height:1.18;
    }
    .benefits-heading > p{
        font-size:17px;
        line-height:1.68;
    }
    .benefits-comparison{
        grid-template-columns:1fr;
        gap:14px;
        margin-bottom:46px;
    }
    .comparison-side{
        padding:23px 22px;
    }
    .comparison-side p{
        font-size:16.5px;
        line-height:1.68;
    }
    .comparison-divider{
        min-height:38px;
    }
    .comparison-divider span{
        width:42px;
        height:42px;
    }
    .benefits-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:20px;
    }
    .benefit-card{
        min-height:auto;
        padding:24px 22px 27px;
    }
    .benefit-card h3{
        font-size:21px;
    }
    .benefit-card p{
        font-size:16px;
        line-height:1.68;
        text-align:left;
    }
    .benefits-statement{
        margin-top:54px;
    }
    .benefits-statement h3{
        font-size:24px;
    }
    .contact-section{
        padding:76px 22px 84px;
    }
    .contact-heading{
        margin-bottom:50px;
    }
    .contact-heading h2{
        font-size:36px;
    }
    .contact-content{
        grid-template-columns:1fr;
        gap:48px;
    }
    .contact-info{
        max-width:720px;
    }
    .contact-form-wrapper{
        max-width:720px;
        width:100%;
    }
    .contact-intro{
        max-width:680px;
    }
    .contact-success-card{
        width:min(100%, 480px);
        padding:38px 34px 34px;
    }
    .contact-success-card h3{
        font-size:27px;
    }

    /* FOOTER: 2 columnas */
    .footer-container{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }
}

/* ==========================================
13. RESPONSIVE - CELULAR GRANDE
481px a 600px
========================================== */
@media (min-width:481px) and (max-width:600px){
    .main-nav{
        min-height:72px;
        padding:8px 12px;
        gap:10px;
    }
    .brand{
        gap:8px;
    }
    .brand-logo{
        width:48px;
        max-width:48px;
    }
    .brand-banner{
        width:180px;
        max-width:180px;
    }
    .menu-toggle{
        display:block;
        flex-shrink:0;
        width:42px;
        height:42px;
    }
    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:16px 18px 20px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:
            linear-gradient(
                180deg,
                rgba(7,20,34,0.99),
                rgba(5,15,27,0.99)
            );
        border-top:1px solid rgba(25,186,255,0.12);
        border-bottom:1px solid rgba(217,164,65,0.42);
    }
    .nav-menu.open{
        display:flex;
    }
    .nav-menu li,
    .nav-link,
    .nav-cta{
        width:100%;
    }
    .nav-link{
        min-height:48px;
        padding:0 10px;
    }
    .nav-cta{
        margin-top:8px;
    }
    .hero{
        min-height:auto;
        padding:34px 24px 58px;
        align-items:flex-start;
        background-image:none;
        background-color:#06111f;
    }
    .hero-content{
        width:100%;
        max-width:100%;
        transform:none;
    }
    .hero h1{
        font-size:38px;
        line-height:1.08;
        margin-bottom:18px;
    }
    .hero-highlight{
        display:block;
        margin-top:4px;
    }
    .hero p{
        font-size:18px;
        line-height:1.65;
        margin-bottom:26px;
    }
    .hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:30px;
    }
    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }
    .hero::after{
        height:60px;
    }
    .trust-strip-inner{
        grid-template-columns:repeat(2, 1fr);
        gap:10px 8px;
        padding:14px 18px;
    }
    .trust-item{
        justify-content:flex-start;
        padding:6px 8px;
        font-size:12px;
        white-space:normal;
    }
    .trust-item + .trust-item{
        border-left:none;
    }
    .trust-dot{
        width:6px;
        height:6px;
        flex-basis:6px;
    }

    /* SOLUCIONES: 1 columna en móvil */
    .solutions-section{
        padding:44px 18px 72px;
    }
    .solutions-heading{
        margin-bottom:38px;
    }
    .section-kicker{
        font-size:13px;
        letter-spacing:2.4px;
        padding:7px 14px;
    }
    .solutions-heading h2{
        font-size:34px;
    }
    .solutions-heading p{
        font-size:16px;
        line-height:1.65;
    }
    .solutions-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    .solution-card{
        flex:0 0 100%;
        max-width:100%;
    }
    .solution-icon{
        height:185px;
        margin-bottom:4px;
    }
    .solution-icon img{
        max-width:170px;
        max-height:170px;
    }
    .solution-card h3{
        font-size:22px;
    }

    .about-section{
        padding:68px 18px 75px;
    }
    .about-heading{
        margin-bottom:42px;
    }
    .about-heading h2{
        font-size:32px;
        line-height:1.2;
    }
    .about-content{
        grid-template-columns:1fr;
        gap:38px;
    }
    .about-message{
        padding-left:18px;
    }
    .about-message h3{
        font-size:25px;
        margin-bottom:22px;
    }
    .about-message p{
        font-size:16px;
        line-height:1.72;
    }
    .about-value{
        padding-left:52px;
    }
    .about-cta{
        margin-top:52px;
        padding-top:34px;
    }
    .about-cta p{
        font-size:18px;
    }
    .benefits-section{
        padding:62px 18px 72px;
    }
    .benefits-heading{
        margin-bottom:40px;
    }
    .benefits-heading h2{
        font-size:32px;
        line-height:1.18;
    }
    .benefits-comparison{
        grid-template-columns:1fr;
        gap:14px;
        margin-bottom:42px;
    }
    .benefits-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .benefit-card{
        min-height:auto;
        padding:24px 21px 26px;
    }
    .benefit-card p{
        text-align:justify;
    }
    .benefits-statement{
        margin-top:48px;
        padding-top:30px;
    }
    .benefits-statement h3{
        font-size:22px;
    }
    .contact-section{
        padding:62px 18px 72px;
    }
    .contact-heading{
        margin-bottom:40px;
    }
    .contact-heading h2{
        font-size:32px;
        line-height:1.18;
    }
    .contact-content{
        grid-template-columns:1fr;
        gap:38px;
    }
    .contact-info{
        padding-left:18px;
    }
    .contact-form-wrapper{
        padding:24px 20px;
    }
    .contact-form{
        gap:19px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea{
        font-size:16px;
    }

    /* FOOTER: 1 columna en móvil */
    .site-footer{
        padding:60px 0 0;
        margin-top:60px;
    }
    .footer-container{
        grid-template-columns:1fr;
        gap:32px;
    }
    .footer-bottom-content{
        flex-direction:column;
        text-align:center;
    }
}

/* ==========================================
14. RESPONSIVE - CELULAR MEDIANO
401px a 480px
========================================== */
@media (min-width:401px) and (max-width:480px){
    .main-nav{
        min-height:70px;
        padding:7px 11px;
        gap:8px;
    }
    .brand-logo{
        width:45px;
        max-width:45px;
    }
    .brand-banner{
        width:165px;
        max-width:165px;
    }
    .menu-toggle{
        display:block;
        flex-shrink:0;
        width:40px;
        height:40px;
    }
    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:15px 16px 19px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:
            linear-gradient(
                180deg,
                rgba(7,20,34,0.99),
                rgba(5,15,27,0.99)
            );
        border-top:1px solid rgba(25,186,255,0.12);
        border-bottom:1px solid rgba(217,164,65,0.42);
    }
    .nav-menu.open{
        display:flex;
    }
    .nav-menu li,
    .nav-link,
    .nav-cta{
        width:100%;
    }
    .nav-link{
        min-height:46px;
        padding:0 10px;
    }
    .nav-cta{
        margin-top:8px;
    }
    .hero{
        min-height:auto;
        padding:30px 20px 54px;
        align-items:flex-start;
        background-image:none;
        background-color:#06111f;
    }
    .hero-content{
        width:100%;
        max-width:100%;
        transform:none;
    }
    .hero h1{
        font-size:34px;
        line-height:1.08;
        margin-bottom:16px;
    }
    .hero p{
        font-size:17px;
        line-height:1.62;
        margin-bottom:24px;
    }
    .hero-buttons{
        flex-direction:column;
        gap:13px;
        margin-top:27px;
    }
    .btn-primary,
    .btn-secondary{
        width:100%;
        padding:14px 18px;
        text-align:center;
    }
    .hero::after{
        height:55px;
    }
    .trust-strip-inner{
        grid-template-columns:1fr 1fr;
        gap:8px 6px;
        padding:13px 15px;
    }
    .trust-item{
        justify-content:flex-start;
        padding:5px 5px;
        font-size:11.5px;
        white-space:normal;
    }
    .trust-item + .trust-item{
        border-left:none;
    }
    .trust-dot{
        width:5px;
        height:5px;
        flex-basis:5px;
    }
    .solutions-section{
        padding:40px 15px 66px;
    }
    .solutions-heading{
        margin-bottom:34px;
    }
    .solutions-heading h2{
        font-size:31px;
        line-height:1.16;
    }
    .solutions-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
    .solution-card{
        flex:0 0 100%;
        max-width:100%;
    }
    .solution-icon{
        height:170px;
    }
    .solution-icon img{
        max-width:155px;
        max-height:155px;
    }
    .solution-card h3{
        font-size:21px;
    }
    .solution-card p{
        font-size:14.5px;
    }
    .about-section{
        padding:62px 16px 70px;
    }
    .about-heading{
        margin-bottom:38px;
    }
    .about-heading h2{
        font-size:29px;
    }
    .about-content{
        grid-template-columns:1fr;
        gap:34px;
    }
    .about-message{
        padding-left:16px;
    }
    .about-message h3{
        font-size:23px;
    }
    .about-value{
        padding-left:48px;
    }
    .about-value h4{
        font-size:19px;
    }
    .about-value p{
        font-size:14.5px;
    }
    .benefits-section{
        padding:58px 16px 68px;
    }
    .benefits-heading{
        margin-bottom:36px;
    }
    .benefits-heading h2{
        font-size:29px;
    }
    .benefits-comparison{
        grid-template-columns:1fr;
        gap:13px;
        margin-bottom:38px;
    }
    .comparison-side{
        padding:20px 18px;
    }
    .comparison-divider span{
        width:40px;
        height:40px;
        font-size:12px;
    }
    .benefits-grid{
        grid-template-columns:1fr;
        gap:17px;
    }
    .benefit-card{
        min-height:auto;
        padding:22px 19px 24px;
    }
    .benefit-card h3{
        font-size:20px;
    }
    .benefit-card p{
        font-size:15.5px;
    }
    .contact-section{
        padding:58px 16px 68px;
    }
    .contact-heading{
        margin-bottom:36px;
    }
    .contact-heading h2{
        font-size:29px;
    }
    .contact-content{
        grid-template-columns:1fr;
        gap:34px;
    }
    .contact-info{
        padding-left:16px;
    }
    .contact-info h3{
        font-size:23px;
    }
    .contact-form-wrapper{
        padding:22px 18px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea{
        padding:13px 13px;
        font-size:15.5px;
    }
    .contact-submit{
        padding:14px 20px;
    }

    /* FOOTER: 1 columna */
    .site-footer{
        padding:50px 0 0;
        margin-top:50px;
    }
    .footer-container{
        grid-template-columns:1fr;
        gap:28px;
    }
    .footer-bottom-content{
        flex-direction:column;
        text-align:center;
    }
}

/* ==========================================
15. RESPONSIVE - CELULAR PEQUEÑO
Hasta 400px
========================================== */
@media (max-width:400px){
    .main-nav{
        min-height:68px;
        padding:7px 10px;
        gap:7px;
    }
    .brand-logo{
        width:42px;
        max-width:42px;
    }
    .brand-banner{
        width:145px;
        max-width:145px;
    }
    .menu-toggle{
        display:block;
        flex-shrink:0;
        width:39px;
        height:39px;
    }
    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:14px 14px 18px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:
            linear-gradient(
                180deg,
                rgba(7,20,34,0.99),
                rgba(5,15,27,0.99)
            );
        border-top:1px solid rgba(25,186,255,0.12);
        border-bottom:1px solid rgba(217,164,65,0.42);
    }
    .nav-menu.open{
        display:flex;
    }
    .nav-menu li,
    .nav-link,
    .nav-cta{
        width:100%;
    }
    .nav-link{
        min-height:45px;
        padding:0 9px;
    }
    .nav-cta{
        margin-top:8px;
    }
    .hero{
        min-height:auto;
        padding:28px 18px 50px;
        align-items:flex-start;
        background-image:none;
        background-color:#06111f;
    }
    .hero-content{
        width:100%;
        max-width:100%;
        transform:none;
    }
    .hero h1{
        font-size:31px;
        line-height:1.08;
        margin-bottom:15px;
    }
    .hero p{
        font-size:16px;
        line-height:1.6;
        margin-bottom:22px;
    }
    .hero-buttons{
        flex-direction:column;
        gap:12px;
        margin-top:24px;
    }
    .btn-primary,
    .btn-secondary{
        width:100%;
        padding:13px 16px;
        text-align:center;
    }
    .hero::after{
        height:50px;
    }
    .trust-strip-inner{
        grid-template-columns:1fr;
        gap:5px;
        padding:11px 14px;
    }
    .trust-item{
        justify-content:flex-start;
        padding:5px 4px;
        font-size:11px;
        white-space:normal;
    }
    .trust-item + .trust-item{
        border-left:none;
    }
    .trust-dot{
        width:5px;
        height:5px;
        flex-basis:5px;
    }
    .solutions-section{
        padding:38px 13px 62px;
    }
    .solutions-heading{
        margin-bottom:32px;
    }
    .solutions-heading h2{
        font-size:28px;
        line-height:1.16;
    }
    .solutions-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .solution-card{
    flex:0 0 100%;
    max-width:100%;
    }

    .solution-icon{
        height:158px;
    }
    .solution-icon img{
        max-width:145px;
        max-height:145px;
    }
    .solution-card h3{
        font-size:20px;
    }
    .solution-card p{
        font-size:14px;
    }
    .about-section{
        padding:58px 14px 66px;
    }
    .about-heading{
        margin-bottom:34px;
    }
    .about-heading h2{
        font-size:27px;
    }
    .about-content{
        grid-template-columns:1fr;
        gap:30px;
    }
    .about-message{
        padding-left:14px;
    }
    .about-message h3{
        font-size:22px;
    }
    .about-value{
        padding:4px 0 22px 44px;
        margin-bottom:22px;
    }
    .about-value h4{
        font-size:18px;
    }
    .about-value p{
        font-size:14px;
    }
    .benefits-section{
        padding:54px 14px 64px;
    }
    .benefits-heading{
        margin-bottom:34px;
    }
    .benefits-heading h2{
        font-size:27px;
    }
    .benefits-comparison{
        grid-template-columns:1fr;
        gap:12px;
        margin-bottom:36px;
    }
    .comparison-side{
        padding:19px 16px;
    }
    .comparison-divider span{
        width:38px;
        height:38px;
        font-size:11px;
    }
    .benefits-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .benefit-card{
        min-height:auto;
        padding:21px 17px 23px;
    }
    .benefit-card h3{
        font-size:19px;
    }
    .benefit-card p{
        font-size:15px;
    }
    .contact-section{
        padding:54px 14px 64px;
    }
    .contact-heading{
        margin-bottom:34px;
    }
    .contact-heading h2{
        font-size:27px;
    }
    .contact-content{
        grid-template-columns:1fr;
        gap:32px;
    }
    .contact-info{
        padding-left:14px;
    }
    .contact-info h3{
        font-size:22px;
    }
    .contact-form-wrapper{
        padding:20px 16px;
        border-radius:var(--radius-md);
    }
    .contact-form{
        gap:18px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea{
        padding:12px 12px;
        font-size:15px;
    }
    .contact-submit{
        padding:14px 18px;
        font-size:15.5px;
    }

    /* FOOTER: 1 columna */
    .site-footer{
        padding:45px 0 0;
        margin-top:45px;
    }
    .footer-container{
        grid-template-columns:1fr;
        gap:24px;
    }
    .footer-bottom-content{
        flex-direction:column;
        text-align:center;
    }
}

/* ==========================================
CONFIRMACIÓN - MÓVIL
========================================== */
@media (max-width:600px){
    .contact-success-modal{
        padding:18px;
    }
    .contact-success-card{
        width:100%;
        padding:
            34px
            22px
            28px;
        border-radius:17px;
    }
    .contact-success-icon{
        width:58px;
        height:58px;
        margin-bottom:20px;
        font-size:27px;
    }
    .contact-success-card h3{
        margin-bottom:13px;
        font-size:24px;
    }
    .contact-success-card p{
        margin-bottom:25px;
        font-size:15px;
    }
    .contact-success-button{
        width:100%;
        min-height:48px;
    }
}

/* ==========================================
ACCESIBILIDAD - MOVIMIENTO REDUCIDO
========================================== */
@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }
    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
    .contact-success-card{
        animation:none;
    }
}