/* =========================================================
   01. VARIABLES KEYSCITI
   Amarillo usado SOLO como acento
========================================================= */

:root{
    --blue:#0E3A6B;
    --blue-dark:#122A50;
    --blue-deep:#112763;

    --yellow:#FFC900;

    --white:#FFFFFF;
    --offwhite:#FAFBFC;
    --light:#F4F6F8;

    --text:#122A50;
    --grey:#687482;
    --line:#E8EDF2;

    --shadow:
        0 18px 50px rgba(18,42,80,.10);

    --shadow-soft:
        0 10px 30px rgba(18,42,80,.07);

    --shadow-card:
        0 14px 35px rgba(18,42,80,.08);

    --max-width:1380px;
}


/* =========================================================
   02. RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Manrope",sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
}

body.modal-open{
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

img{
    display:block;
    width:100%;
}

.container{
    width:min(92%,var(--max-width));
    margin:auto;
}


/* =========================================================
   03. ELEMENTOS DECORATIVOS
========================================================= */

.dots{
    position:absolute;
    width:120px;
    height:120px;

    background-image:
        radial-gradient(
            rgba(14,58,107,.18) 1.25px,
            transparent 1.25px
        );

    background-size:11px 11px;

    pointer-events:none;
    z-index:1;
}

.dots-light{
    background-image:
        radial-gradient(
            rgba(255,255,255,.20) 1.2px,
            transparent 1.2px
        );
}

.dots-yellow{
    background-image:
        radial-gradient(
            rgba(255,201,0,.28) 1.1px,
            transparent 1.1px
        );
}


.soft-yellow-circle{
    position:absolute;

    width:84px;
    height:84px;

    border-radius:50%;

    background:
        rgba(255,201,0,.10);

    pointer-events:none;
}


.blue-organic{
    position:absolute;

    background:var(--blue-deep);

    border-radius:
        54% 46% 62% 38%
        /
        47% 58% 42% 53%;

    pointer-events:none;
}


/* =========================================================
   04. CIRCUITOS
========================================================= */

.circuit{
    position:absolute;
    pointer-events:none;
    z-index:2;
}

.circuit path{
    fill:none;
    stroke:rgba(255,201,0,.65);

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.circuit circle{
    fill:var(--yellow);
}


/* =========================================================
   05. BOTONES
========================================================= */

.btn{
    border:none;

    min-height:48px;

    padding:0 25px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    border-radius:100px;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.btn:hover{
    transform:translateY(-2px);
}


.btn-primary{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue-deep)
        );

    box-shadow:
        0 12px 25px
        rgba(17,39,99,.17);
}


.btn-outline{
    background:#fff;

    color:var(--blue-dark);

    border:
        1px solid rgba(18,42,80,.22);
}


.btn-light{
    background:#fff;
    color:var(--blue-dark);
}


.btn-accent{
    /*
    Amarillo intencionalmente muy limitado.
    Se usa sólo en CTA importantes.
    */

    background:var(--yellow);
    color:var(--blue-dark);

    box-shadow:
        0 10px 22px
        rgba(255,201,0,.15);
}


.btn-small{
    min-height:40px;
    padding:0 18px;
    font-size:12px;
}


/* =========================================================
   06. HEADER
========================================================= */

.header{
    position:sticky;

    top:0;

    z-index:100;

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid rgba(18,42,80,.05);
}


.nav{
    min-height:88px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:30px;
}


/* LOGO CSS */

.logo{
    display:flex;

    align-items:center;

    gap:10px;
}


.logo-symbol{
    position:relative;

    width:62px;
    height:47px;
}


.logo-symbol::before{

    content:"";

    position:absolute;

    width:38px;
    height:38px;

    left:9px;
    top:4px;

    border-left:
        8px solid var(--blue);

    border-top:
        8px solid var(--blue);

    transform:rotate(45deg);
}


.logo-name{
    font-size:15px;
    font-weight:800;

    color:var(--blue-dark);

    line-height:1;
}


.logo-name span{
    color:var(--yellow);
}


.logo-name small{

    display:block;

    margin-top:4px;

    font-size:8px;
    font-weight:700;

    color:var(--blue-dark);
}


.menu{

    list-style:none;

    display:flex;

    align-items:center;

    gap:34px;
}


.menu-link{

    position:relative;

    font-size:12px;
    font-weight:600;

    color:var(--blue-dark);
}


.menu-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:0;
    height:2px;

    background:var(--yellow);

    transition:.25s ease;
}


.menu-link:hover::after,
.menu-link.active::after{
    width:100%;
}


/*
Header CTA azul para no sobrecargar
la navegación con amarillo.
*/

.header-cta{

    background:
        var(--blue-dark);

    color:#fff;

    box-shadow:none;
}


.menu-toggle{
    display:none;

    background:none;
    border:none;

    color:var(--blue-dark);

    font-size:27px;

    cursor:pointer;
}


/* =========================================================
   07. HERO
========================================================= */

.hero{

    position:relative;

    background:#fff;

    padding:
        35px 0 85px;

    overflow:hidden;
}


.hero-grid{

    min-height:590px;

    display:grid;

    grid-template-columns:
        40% 60%;

    align-items:center;

    position:relative;

    z-index:5;
}


.hero-content{

    position:relative;

    z-index:7;

    padding-left:22px;
}


.hero-title{

    max-width:570px;

    font-size:
        clamp(48px,5vw,78px);

    line-height:1.02;

    letter-spacing:-3.5px;

    font-weight:800;

    margin-bottom:24px;
}


.hero-title span{

    /*
    Amarillo sólo en una palabra.
    */

    color:var(--yellow);
}


.hero-text{

    max-width:450px;

    color:var(--grey);

    font-size:15px;

    line-height:1.8;

    margin-bottom:30px;
}


.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:13px;
}


/* IMAGEN PRINCIPAL */

.hero-image-area{

    position:relative;

    height:585px;
}


.hero-main-photo{

    position:absolute;

    inset:0 -60px 0 0;

    overflow:hidden;

    box-shadow:
        0 16px 45px
        rgba(18,42,80,.09);

    /*
    CURVA ASIMÉTRICA PRINCIPAL
    */

    border-radius:
        32% 8% 40% 25%
        /
        15% 10% 38% 25%;
}


.hero-main-photo img{

    width:100%;
    height:100%;

    object-fit:cover;
}


/*
Fusión visual foto / blanco
*/

.hero-main-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,

            rgba(255,255,255,.96) 0%,

            rgba(255,255,255,.72) 12%,

            rgba(255,255,255,.25) 27%,

            transparent 45%
        );
}


/* ONDA BLANCA BAJO HERO */

.hero-wave{

    position:absolute;

    left:-5%;
    bottom:-37px;

    width:110%;

    height:105px;

    background:#fff;

    border-radius:
        50% 50% 0 0
        /
        90% 90% 0 0;

    transform:
        rotate(-1deg);

    z-index:8;
}


/* GRAN FORMA AZUL DERECHA */

.hero-blue-shape{

    width:220px;
    height:260px;

    right:-150px;
    bottom:20px;

    opacity:1;
}


/* =========================================================
   08. DOMÓTICA POPUP HERO
========================================================= */

.domotica-card{

    position:absolute;

    right:8px;
    top:132px;

    z-index:10;

    width:385px;

    min-height:215px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #0E3A6B 0%,
            #122A50 52%,
            #112763 100%
        );

    border-radius:
        31px 31px 43px 30px;

    overflow:hidden;

    box-shadow:
        0 26px 62px
        rgba(17,39,99,.30);

    display:grid;

    grid-template-columns:
        58% 42%;
}


.domotica-copy{

    padding:
        23px 8px 22px 24px;

    position:relative;

    z-index:3;
}


.domotica-label{

    display:inline-block;

    padding:
        5px 10px;

    margin-bottom:12px;

    border-radius:30px;

    font-size:8px;
    font-weight:800;

    /*
    Amarillo pequeño,
    no protagonista.
    */

    background:
        rgba(255,201,0,.90);

    color:
        var(--blue-dark);
}


.domotica-card h3{

    font-size:29px;

    margin-bottom:9px;

    line-height:1;
}


.domotica-card p{

    font-size:11px;

    line-height:1.6;

    color:
        rgba(255,255,255,.83);

    margin-bottom:15px;
}


.domotica-image{

    position:relative;

    overflow:hidden;
}


.domotica-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}


.domotica-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            var(--blue-dark),
            transparent 45%
        );
}


.close-promo{

    position:absolute;

    right:12px;
    top:12px;

    z-index:20;

    width:25px;
    height:25px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid rgba(255,255,255,.24);

    color:#fff;

    cursor:pointer;
}


/* =========================================================
   09. QUIÉNES SOMOS
========================================================= */

.about{

    position:relative;

    background:#fff;

    padding:
        25px 0 65px;

    overflow:hidden;
}


.about-grid{

    display:grid;

    grid-template-columns:
        43% 57%;

    align-items:center;

    gap:60px;

    position:relative;

    z-index:5;
}


.about-image{

    height:390px;

    overflow:hidden;

    /*
    CURVA ORGÁNICA
    */

    border-radius:
        48% 18% 44% 15%
        /
        29% 20% 35% 24%;

    box-shadow:
        var(--shadow-soft);
}


.about-image img{

    height:100%;

    object-fit:cover;
}


.about-copy{

    max-width:650px;
}


.eyebrow{

    display:inline-block;

    margin-bottom:9px;

    color:
        var(--blue);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.title{

    font-size:
        clamp(34px,3.5vw,48px);

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:16px;
}


.title span{

    /*
    Amarillo sólo en palabras puntuales.
    */

    color:var(--yellow);
}


.copy{

    color:var(--grey);

    line-height:1.8;

    font-size:14px;
}


.values{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;

    margin-top:26px;
}


.value{

    display:flex;

    align-items:flex-start;

    gap:9px;

    color:
        var(--blue-dark);

    font-size:10px;

    font-weight:700;
}


.value-icon{

    width:36px;
    height:36px;

    flex:0 0 36px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:var(--blue);

    background:
        rgba(14,58,107,.06);

    border:
        1px solid rgba(14,58,107,.08);
}


.team{

    display:flex;

    align-items:center;

    margin-top:25px;
}


.person{

    width:42px;
    height:42px;

    margin-right:-7px;

    border-radius:50%;

    overflow:hidden;

    border:
        3px solid white;

    box-shadow:
        0 4px 12px
        rgba(18,42,80,.08);
}


.person img{
    height:100%;
    object-fit:cover;
}


.more-team{

    width:51px;
    height:51px;

    margin-left:12px;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    font-size:11px;
    font-weight:700;

    background:var(--blue-deep);
}


/* =========================================================
   10. SERVICIOS
========================================================= */

.services{

    position:relative;

    padding:
        60px 0 70px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #FAFBFD
        );

    overflow:hidden;
}


.section-center{
    text-align:center;
}


.services-grid{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:18px;

    margin-top:33px;

    position:relative;

    z-index:5;
}


.service-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:
        26px 26px 31px 21px;

    box-shadow:
        var(--shadow-card);

    transition:.3s ease;
}


.service-card:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 45px
        rgba(18,42,80,.12);
}


.service-image{

    height:170px;

    overflow:hidden;

    border-radius:
        26px 26px 36px 18px;
}


.service-image img{

    height:100%;

    object-fit:cover;

    transition:
        transform .4s ease;
}


.service-card:hover img{
    transform:scale(1.04);
}


.service-content{

    padding:
        19px 17px 20px;
}


.service-icon{

    position:relative;

    z-index:3;

    width:45px;
    height:45px;

    margin-top:-41px;
    margin-bottom:10px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        var(--blue-deep);

    color:#fff;

    border:
        4px solid #fff;

    box-shadow:
        0 8px 18px
        rgba(17,39,99,.16);
}


.service-card h3{

    font-size:15px;

    line-height:1.3;

    margin-bottom:7px;
}


.service-card p{

    font-size:11px;

    line-height:1.6;

    color:var(--grey);
}


.new-service{

    position:absolute;

    right:12px;
    top:12px;

    z-index:4;

    /*
    Amarillo pequeño.
    */

    background:
        rgba(255,201,0,.90);

    color:
        var(--blue-dark);

    font-size:8px;
    font-weight:800;

    border-radius:30px;

    padding:
        5px 10px;
}


/* =========================================================
   11. PRODUCTOS
========================================================= */

.products{

    position:relative;

    padding:
        60px 0 78px;

    background:#fff;

    overflow:hidden;
}


.products-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

    margin-bottom:28px;
}


.products-header .copy{
    max-width:480px;
}


.products-grid{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:20px;

    position:relative;

    z-index:4;
}


.product{
    text-align:center;
}


.product-image{

    height:145px;

    margin-bottom:12px;

    overflow:hidden;

    /*
    ORGÁNICO,
    no tarjeta cuadrada.
    */

    border-radius:
        42px 17px 42px 17px;

    box-shadow:
        var(--shadow-soft);
}


.product-image img{

    height:100%;

    object-fit:cover;

    transition:.4s ease;
}


.product:hover img{
    transform:scale(1.05);
}


.product span{

    font-size:11px;

    font-weight:700;
}


/* =========================================================
   12. TESTIMONIOS + FOOTER
   UN SOLO BLOQUE
========================================================= */

.end-zone{

    position:relative;

    margin-top:10px;

    /*
    UNA SOLA PIEZA VISUAL
    */

    background:
        linear-gradient(
            135deg,
            var(--blue) 0%,
            var(--blue-dark) 45%,
            var(--blue-deep) 100%
        );

    color:#fff;

    overflow:hidden;

    /*
    Curvas superiores muy marcadas
    */

    border-radius:
        9% 18% 0 0
        /
        7% 12% 0 0;
}


/*
Gran onda blanca que entra desde arriba.
*/

.end-zone::before{

    content:"";

    position:absolute;

    z-index:1;

    top:-96px;
    left:-4%;

    width:108%;
    height:155px;

    background:#fff;

    border-radius:
        0 0 58% 42%
        /
        0 0 100% 100%;

    transform:
        rotate(-1.2deg);
}


/*
Forma orgánica de profundidad.
*/

.end-zone::after{

    content:"";

    position:absolute;

    width:580px;
    height:350px;

    right:-220px;
    top:30px;

    background:
        rgba(255,255,255,.035);

    border-radius:
        58% 42% 55% 45%
        /
        44% 60% 40% 56%;
}


/* TESTIMONIOS */

.testimonials{

    position:relative;

    z-index:4;

    padding:
        95px 0 60px;
}


.testimonial-layout{

    display:grid;

    grid-template-columns:
        68% 32%;

    gap:22px;

    align-items:stretch;
}


.testimonials .title{
    color:#fff;
}


.testimonial-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:17px;

    margin-top:27px;
}


.testimonial-card{

    padding:
        23px 21px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:
        26px 18px 27px 18px;

    backdrop-filter:
        blur(7px);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.08);
}


.testimonial-card .quote{

    color:
        rgba(255,201,0,.88);

    font-size:31px;

    line-height:1;
}


.testimonial-card p{

    margin:
        4px 0 13px;

    color:
        rgba(255,255,255,.82);

    font-size:11px;

    line-height:1.7;
}


.testimonial-card strong{

    display:block;

    font-size:11px;
}


.stars{

    margin-top:6px;

    color:
        rgba(255,201,0,.82);

    font-size:10px;

    letter-spacing:2px;
}


.testimonial-photo{

    min-height:280px;

    overflow:hidden;

    border-radius:
        55% 0 0 20%
        /
        38% 0 0 25%;

    position:relative;
}


.testimonial-photo img{

    width:100%;
    height:100%;

    object-fit:cover;
}


.testimonial-photo::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            var(--blue-deep),
            rgba(17,39,99,.15) 60%,
            transparent
        );
}


/* =========================================================
   13. FOOTER DENTRO DEL MISMO BLOQUE
========================================================= */

.footer{

    position:relative;

    z-index:5;

    padding:
        25px 0 24px;
}


.footer::before{

    content:"";

    position:absolute;

    top:0;
    left:5%;

    width:90%;
    height:1px;

    background:
        rgba(255,255,255,.12);
}


.footer-grid{

    display:grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap:36px;

    padding-top:36px;
}


.footer-logo .logo-name{
    color:#fff;
}


.footer-brand-text{

    margin-top:12px;

    max-width:280px;

    color:
        rgba(255,255,255,.63);

    font-size:10px;

    line-height:1.7;
}


.footer h4{

    margin-bottom:14px;

    /*
    Encabezados en blanco,
    ya no amarillo.
    */

    color:#fff;

    font-size:11px;

    font-weight:700;
}


.footer a,
.footer p{

    margin-bottom:8px;

    color:
        rgba(255,255,255,.63);

    font-size:10px;
}


.footer a:hover{

    color:#fff;
}


.footer-bottom{

    margin-top:27px;

    padding-top:18px;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:
        rgba(255,255,255,.38);

    font-size:9px;

    text-align:center;
}


/* =========================================================
   14. WHATSAPP
========================================================= */

.whatsapp{

    position:fixed;

    right:24px;
    bottom:23px;

    z-index:150;

    width:61px;
    height:61px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:#25D366;

    color:#fff;

    font-size:27px;

    border:
        4px solid #fff;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.20);

    transition:.25s ease;
}


.whatsapp:hover{

    transform:
        translateY(-3px)
        scale(1.04);
}


/* =========================================================
   15. MODAL COTIZACIÓN
========================================================= */

.modal-overlay{

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:24px;

    background:
        rgba(4,20,39,.58);

    backdrop-filter:
        blur(8px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}


.modal-overlay.show{

    opacity:1;

    visibility:visible;
}


.quote-modal{

    width:min(970px,96vw);

    max-height:92vh;

    overflow:auto;

    display:grid;

    grid-template-columns:
        37% 63%;

    background:#fff;

    border-radius:
        46px 24px 46px 24px;

    box-shadow:
        0 18px 60px
        rgba(0,0,0,.10);

    position:relative;

    transform:
        translateY(30px)
        scale(.97);

    transition:
        transform .3s ease;
}


.modal-overlay.show .quote-modal{

    transform:
        translateY(0)
        scale(1);
}


/* LADO VISUAL MODAL */

.modal-brand{

    position:relative;

    overflow:hidden;

    padding:
        48px 35px;

    color:#fff;

    background:
        linear-gradient(
            150deg,
            var(--blue),
            var(--blue-dark) 48%,
            var(--blue-deep)
        );
}


.modal-brand::before{

    content:"";

    position:absolute;

    width:230px;
    height:230px;

    right:-115px;
    bottom:-95px;

    border-radius:
        56% 44% 52% 48%
        /
        47% 58% 42% 53%;

    background:
        rgba(255,255,255,.055);
}


.modal-brand::after{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    left:-40px;
    top:38%;

    border-radius:50%;

    background:
        rgba(255,201,0,.08);
}


.modal-brand small{

    display:block;

    margin-bottom:13px;

    color:
        rgba(255,255,255,.60);

    font-size:10px;

    letter-spacing:1px;

    text-transform:uppercase;
}


.modal-brand h2{

    max-width:270px;

    font-size:35px;

    line-height:1.08;

    margin-bottom:17px;
}


.modal-brand p{

    max-width:280px;

    color:
        rgba(255,255,255,.70);

    font-size:12px;

    line-height:1.75;
}


.modal-contact{

    display:grid;

    gap:13px;

    margin-top:30px;
}


.modal-contact-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:11px;

    color:
        rgba(255,255,255,.76);
}


.modal-contact-icon{

    width:33px;
    height:33px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.08);
}


/* FORM MODAL */

.modal-form{

    padding:
        46px 42px;
}


.modal-form h3{

    font-size:27px;

    margin-bottom:7px;
}


.modal-form-intro{

    margin-bottom:25px;

    color:var(--grey);

    font-size:12px;

    line-height:1.7;
}


.form-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:13px;
}


.field.full{
    grid-column:1/-1;
}


.field label{

    display:block;

    margin-bottom:6px;

    font-size:10px;

    font-weight:700;

    color:
        var(--blue-dark);
}


.field input,
.field select,
.field textarea{

    width:100%;

    border:
        1px solid #E1E7ED;

    outline:none;

    border-radius:13px;

    background:#FAFBFC;

    color:
        var(--blue-dark);

    padding:
        14px 14px;

    font-size:12px;

    transition:.22s ease;
}


.field textarea{

    min-height:115px;

    resize:vertical;
}


.field input:focus,
.field select:focus,
.field textarea:focus{

    border-color:
        rgba(14,58,107,.45);

    box-shadow:
        0 0 0 4px
        rgba(14,58,107,.06);

    background:#fff;
}


.modal-submit{

    width:100%;

    margin-top:16px;

    /*
    CTA principal del modal en azul.
    No amarillo.
    */

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--blue-deep)
        );

    color:#fff;
}


.modal-close{

    position:absolute;

    top:16px;
    right:16px;

    z-index:30;

    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    border-radius:50%;

    border:
        1px solid #E5EAF0;

    background:
        rgba(255,255,255,.94);

    color:
        var(--blue-dark);

    font-size:19px;

    cursor:pointer;

    box-shadow:
        0 7px 15px
        rgba(18,42,80,.08);
}


/* =========================================================
   16. RESPONSIVE
========================================================= */

@media(max-width:1150px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-content{
        padding:
            40px 0 35px;
    }

    .hero-image-area{
        height:530px;
    }

    .hero-main-photo{
        right:0;
    }

    .about-grid{
        grid-template-columns:1fr 1fr;
        gap:35px;
    }

    .services-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

    .products-grid{
        grid-template-columns:
            repeat(3,1fr);
    }
}


@media(max-width:850px){

    .menu-toggle{
        display:block;
    }

    .menu{

        position:absolute;

        top:88px;
        left:0;

        width:100%;

        display:none;

        flex-direction:column;

        align-items:flex-start;

        padding:28px;

        background:#fff;

        box-shadow:
            0 20px 45px
            rgba(18,42,80,.09);
    }

    .menu.show{
        display:flex;
    }


    .about-grid{

        grid-template-columns:1fr;
    }


    .values{

        grid-template-columns:
            repeat(2,1fr);
    }


    .services-grid{

        grid-template-columns:
            repeat(2,1fr);
    }


    .products-grid{

        grid-template-columns:
            repeat(2,1fr);
    }


    .testimonial-layout{

        grid-template-columns:1fr;
    }


    .testimonial-grid{

        grid-template-columns:1fr;
    }


    .testimonial-photo{

        min-height:300px;

        border-radius:
            55px 18px 55px 18px;
    }


    .footer-grid{

        grid-template-columns:
            repeat(2,1fr);
    }


    .quote-modal{

        grid-template-columns:1fr;
    }


    .modal-brand{
        display:none;
    }


    .modal-form{

        padding:
            45px 28px 30px;
    }
}


@media(max-width:570px){

    .hero-title{

        font-size:45px;

        letter-spacing:-2px;
    }


    .hero-image-area{

        height:460px;
    }


    .hero-main-photo{

        border-radius:
            55px 18px 85px 30px;
    }


    .domotica-card{

        left:15px;
        right:15px;

        top:auto;
        bottom:25px;

        width:auto;
    }


    .hero-actions{

        flex-direction:column;
    }


    .services-grid,
    .products-grid,
    .footer-grid,
    .form-grid{

        grid-template-columns:1fr;
    }


    .field.full{
        grid-column:auto;
    }


    .products-header{

        flex-direction:column;

        align-items:flex-start;
    }


    .values{

        grid-template-columns:1fr;
    }


    .about-image{

        height:320px;
    }


    .end-zone{

        border-radius:
            50px 0 0 0;
    }
}


/* =========================================================
   17. VALIDACIÓN DEL FORMULARIO (seguridad + UX)
   Reglas aditivas: solo aplican sobre elementos dinámicos
   que no existen en el estado inicial del diseño.
========================================================= */

.field-error{
    display:block;
    margin-top:6px;
    font-size:10px;
    font-weight:700;
    color:#D0342C;
}

.field input.field-invalid,
.field select.field-invalid,
.field textarea.field-invalid{
    border-color:#D0342C;
    box-shadow:0 0 0 4px rgba(208,52,44,.08);
}

.form-success{
    display:none;
    margin-top:14px;
    padding:12px 16px;
    border-radius:12px;
    background:rgba(46,160,67,.10);
    border:1px solid rgba(46,160,67,.35);
    color:#1E7E34;
    font-size:12px;
    font-weight:700;
}

.form-success.show{
    display:block;
}

/* Honeypot anti-spam (invisible para humanos) */
.hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

/* =========================================================
   LOGO OFICIAL (imagen con fondo transparente)
========================================================= */

.logo-img{
    display:block;
    height:72px;
    width:auto;
    max-width:100%;
    object-fit:contain;
}

/*
Versión blanca del logo para el bloque oscuro del footer.
El archivo trae más padding transparente (contenido 248px de 331px),
por eso se usa una altura mayor para que las letras se vean igual
de grandes que en el logo del banner (contenido 1480px de 1500px).
*/
.footer-logo-img{
    height:96px;
}

@media(max-width:570px){
    .logo-img{
        height:60px;
    }
    .footer-logo-img{
        height:80px;
    }
}


/*
Logo blanco dentro del lateral oscuro del modal de cotizaci�n.
Misma l�gica que el footer: el archivo trae padding transparente,
se usa altura mayor para que las letras se vean legibles.
*/
.modal-logo{
    height:96px;
    width:auto;
    display:block;
    margin-bottom:18px;
}

@media(max-width:570px){
    .modal-logo{
        height:80px;
    }
}

/* =========================================================
    18. ACCESIBILIDAD Y MOVIMIENTO
========================================================= */

:focus-visible{
    outline:3px solid var(--yellow);
    outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}


/* =========================================================
    19. BOTÓN FLOTANTE CHATBOT
========================================================= */

.chatbot-float{
    transform-origin:center bottom;
    animation:
        chatbot-swing 2.2s ease-in-out infinite;
}

.chatbot-float-label{
    position:absolute;
    bottom:105px;
    left:0;
    display:flex;
    align-items:center;
    gap:6px;
    padding:
        7px 10px 7px 14px;
    border-radius:
        10px 10px 10px 2px;
    background:var(--blue);
    color:#fff;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:
        0 4px 12px
        rgba(0,0,0,.18);
}

.chatbot-float-close{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:14px;
    line-height:1;
    cursor:pointer;
}

.chatbot-float-close:hover{
    background:rgba(255,255,255,.32);
}

@keyframes chatbot-swing{
    0%,
    100%{
        transform:
            rotate(-7deg);
    }
    50%{
        transform:
            rotate(7deg);
    }
}


/* =========================================================
    20. DOMÓTICA: EFECTO DE ZOOM SOBRE LA IMAGEN
    Mismo efecto que la imagen de servicios (scale al hover).
========================================================= */

.domotica-image img{
    transition:
        transform .4s ease;
}

.domotica-card:hover .domotica-image img{
    transform:scale(1.04);
}

/* Fix oval squishing */
.modal-contact-icon { flex-shrink: 0; }


/* =========================================================
    21. BOTÓN DE TEMA + MODO OSCURO
    Aditivo. El claro sigue siendo el diseño por defecto.
    Clase .dark-mode se aplica a <html> vía js/main.js.
========================================================= */

.theme-toggle{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    background:
        rgba(14,58,107,.07);

    border:
        1px solid rgba(14,58,107,.12);

    border-radius:50%;

    color:var(--blue-dark);

    font-size:16px;
    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.theme-toggle:hover{
    background:
        rgba(14,58,107,.14);
}

.theme-icon-sun{
    display:none;
}

.theme-icon-moon{
    display:block;
}

/* --- MODO OSCURO --- */

html.dark-mode{
    color-scheme:dark;
}

html.dark-mode body{
    background:#0B1523;
    color:#E8EEF7;
}

html.dark-mode .theme-toggle{
    background:
        rgba(255,255,255,.07);

    border-color:
        rgba(255,255,255,.14);

    color:#E8EEF7;
}

html.dark-mode .theme-toggle:hover{
    background:
        rgba(255,255,255,.13);
}

html.dark-mode .theme-icon-sun{
    display:block;
}

html.dark-mode .theme-icon-moon{
    display:none;
}

/* HEADER */

html.dark-mode .header{
    background:
        rgba(11,21,35,.92);

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

html.dark-mode .logo-name,
html.dark-mode .logo-name small,
html.dark-mode .menu-link,
html.dark-mode .menu-toggle{
    color:#E8EEF7;
}

/* HERO */

html.dark-mode .hero{
    background:#0B1523;
}

html.dark-mode .hero-text{
    color:#A8B4C4;
}

html.dark-mode .dots{
    background-image:
        radial-gradient(
            rgba(255,255,255,.16) 1.25px,
            transparent 1.25px
        );
}

/* ABOUT */

html.dark-mode .about{
    background:#0B1523;
}

html.dark-mode .value{
    color:#DCE4EF;
}

html.dark-mode .value-icon{
    color:#7FB1E2;

    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.09);
}

/* SERVICIOS */

html.dark-mode .services{
    background:
        linear-gradient(
            180deg,
            #0B1523,
            #0E1D33
        );
}

html.dark-mode .service-card{
    background:#13243B;
}

html.dark-mode .service-card:hover{
    box-shadow:
        0 18px 45px rgba(0,0,0,.4);
}

/* PRODUCTOS */

html.dark-mode .products{
    background:#0B1523;
}

html.dark-mode .product-image{
    box-shadow:
        0 10px 30px rgba(0,0,0,.4);
}

/* TEXTOS COMUNES */

html.dark-mode .title{
    color:#FFFFFF;
}

html.dark-mode .eyebrow{
    color:#7FB1E2;
}

html.dark-mode .copy,
html.dark-mode .product span{
    color:#A8B4C4;
}

html.dark-mode .btn-outline{
    background:
        rgba(255,255,255,.05);

    color:#E8EEF7;

    border-color:
        rgba(255,255,255,.22);
}

html.dark-mode .btn-light{
    background:#13243B;
    color:#E8EEF7;
}

/* MODAL */

html.dark-mode .quote-modal{
    background:#13243B;
}

html.dark-mode .modal-form-intro{
    color:#A8B4C4;
}

html.dark-mode .field label{
    color:#DCE4EF;
}

html.dark-mode .field input,
html.dark-mode .field select,
html.dark-mode .field textarea{
    background:#0D1A2E;

    border-color:
        rgba(255,255,255,.12);

    color:#E8EEF7;
}

html.dark-mode .field input:focus,
html.dark-mode .field select:focus,
html.dark-mode .field textarea:focus{
    border-color:
        rgba(127,177,226,.55);

    box-shadow:
        0 0 0 4px rgba(127,177,226,.10);

    background:#13243B;
}

/* MENÚ MÓVIL */

html.dark-mode .menu{
    background:#0D1A2E;

    box-shadow:
        0 20px 45px rgba(0,0,0,.45);
}