:root{--navy:#071b38;--navy2:#092b60;--gold:#f6c34d;--blue:#126af4;--ink:#10213d;--muted:#65738b;--soft:#f3f7fc;--line:#e5ebf4;--radius:16px;--container:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);line-height:1.6;background:white}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}button{font:inherit}svg{width:22px;height:22px;flex-shrink:0}.container{width:min(calc(100% - 40px),var(--container));margin:auto}.skip-link{position:absolute;top:-100px;left:12px;background:white;color:black;padding:10px;z-index:99}.skip-link:focus{top:8px}.brand-text{font-weight:800;color:var(--navy)}.nav>a:not(.client-link):hover{color:var(--blue)}.client-link{padding:11px 17px;border-radius:10px;background:var(--gold);color:var(--navy);white-space:nowrap}.hero{color:white;position:relative;overflow:hidden;background:radial-gradient(circle at 82% 15%,#19559a80,transparent 40%),linear-gradient(120deg,#03132c 2%,#082753 67%,#061833 100%)}.hero:before{content:"";width:340px;height:125%;position:absolute;right:31%;top:-60px;transform:skewX(-38deg);border-left:35px solid #1c68bc33;pointer-events:none}.hero-layout{min-height:525px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding-block:65px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:#235895;margin:0 0 10px}.eyebrow.gold{color:var(--gold)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(41px,4.5vw,65px);line-height:1.07;letter-spacing:-.04em;margin-bottom:20px}h1 span{color:var(--gold)}.hero-lead{font-size:17px;color:#d4e1f5;max-width:610px}.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:13px 22px;border-radius:10px;font-size:14px;font-weight:800;min-height:48px;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn svg{width:18px}.btn-gold{background:var(--gold);color:#071b38}.btn-gold:hover{background:#ffda7a}.btn-outline{border:1px solid #98b4da;color:white}.btn-outline:hover{background:#ffffff16}.hero-highlights{display:flex;gap:19px;flex-wrap:wrap;margin-top:34px;color:#e1eafa;font-size:12px}.hero-art{min-height:390px;position:relative;display:grid;place-items:center;transform:perspective(1000px) rotateY(-7deg)}.hero-art-image{transform:none;isolation:isolate}.hero-art-image::before{content:"";position:absolute;inset:8% 8% 12% 8%;background:radial-gradient(circle at 50% 45%,rgba(18,106,244,.24),rgba(10,43,96,.10) 48%,transparent 72%);filter:blur(26px);z-index:0;pointer-events:none}.hero-device-image{position:relative;z-index:1;display:block;width:min(100%,560px);height:auto;border-radius:28px;box-shadow:0 22px 44px rgba(3,14,34,.22),0 8px 18px rgba(3,14,34,.10);overflow:hidden}.hero-device-image{background:transparent}.screen{width:93%;max-width:530px;aspect-ratio:1.48;background:#f6f9ff;color:#122342;border:10px solid #0d172a;border-bottom-width:16px;box-shadow:10px 24px 35px #0008;border-radius:15px;overflow:hidden}.screen-header{height:46px;background:#071d41;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12px}.screen-header i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4b6d99;margin-left:4px}.screen-brand{font-weight:900;font-style:italic;font-size:20px}.screen-brand span,.phone-mock strong span{color:var(--gold)}.mock-grid{display:grid;grid-template-columns:66px 1fr;height:calc(100% - 46px)}.mock-nav{background:#0b2a57;padding:26px 18px;display:flex;flex-direction:column;gap:24px}.mock-nav b{height:6px;width:31px;border-radius:9px;background:#3565a2}.mock-nav b:first-child{background:#f6c34d}.mock-main{padding:22px}.mock-title{height:14px;width:48%;background:#cad8ea;border-radius:8px;margin-bottom:23px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.metric-grid>div{padding:12px;background:white;border:1px solid #e5eaf3;border-radius:9px}.metric-grid strong{display:block;font-size:19px;color:#1967c9}.metric-grid small{display:block;color:#607088;font-size:10px}.chart{height:135px;margin-top:20px;border-radius:10px;background:repeating-linear-gradient(0deg,#fff,#fff 28px,#eaf0f7 29px);overflow:hidden}.chart svg{width:100%;height:100%}.phone-mock{position:absolute;right:-4%;bottom:-21px;width:130px;height:252px;background:linear-gradient(150deg,#092553,#07499e);border:7px solid #0e1627;border-radius:23px;box-shadow:10px 15px 25px #0008;color:white;padding:32px 12px 15px}.phone-notch{position:absolute;width:50px;height:10px;border-radius:0 0 9px 9px;background:#0e1627;left:calc(50% - 25px);top:0}.phone-mock strong{font-size:20px}.phone-mock p{font-size:15px;font-weight:800;line-height:1.3;margin-top:22px}.app-tile{display:inline-flex;align-items:center;justify-content:center;width:39px;height:38px;margin:4px 2px 0 0;border-radius:9px;background:#178cff;font-size:22px}.section{padding:82px 0}.section h2{font-size:clamp(27px,3vw,38px);line-height:1.2;letter-spacing:-.03em;margin-bottom:12px}.section p{color:var(--muted)}.section-top{display:flex;justify-content:space-between}.section-top p{max-width:650px}.service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-top:30px}.service-card{padding:26px 17px;border:1px solid var(--line);box-shadow:0 9px 25px #1225440a;border-radius:var(--radius);text-align:center;display:flex;flex-direction:column;align-items:center;background:white}.service-icon{width:56px;height:56px;border-radius:50%;background:#eef5ff;color:#1978f4;display:grid;place-items:center;margin-bottom:16px}.service-icon svg{width:28px;height:28px}.service-card h3{font-size:15px;line-height:1.3;min-height:40px;margin-bottom:10px}.service-card p{font-size:13px;line-height:1.5;flex:1}.service-card a{font-size:13px;font-weight:750;color:#1069de;display:flex;align-items:center;gap:6px}.service-card a svg{width:16px}.soft{background:var(--soft)}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:35px}.benefit{display:flex;gap:13px;align-items:flex-start}.benefit-icon{width:53px;height:53px;border-radius:50%;background:var(--navy);display:grid;place-items:center;color:var(--gold);flex-shrink:0}.benefit h3{font-size:15px;margin:0 0 5px}.benefit p{font-size:13px;line-height:1.5;margin:0}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;margin-top:30px}.project-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 26px #12254409}.project-art{height:190px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#142a4f,#2385d8)}.project-software{background:linear-gradient(135deg,#03162f,#256eb0)}.project-app{background:linear-gradient(135deg,#0b2864,#875bbf)}.project-window{width:72%;height:76%;background:white;border:7px solid #101d31;border-radius:10px;box-shadow:15px 18px 25px #0005;padding:15px}.project-window i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f1c65f;margin-right:3px}.project-lines{margin-top:20px;display:flex;flex-direction:column;gap:10px}.project-lines b{height:9px;background:#e9eff8;border-radius:5px}.project-lines b:first-child{width:70%;background:#468df2}.project-lines b:nth-child(3){width:57%}.project-body{padding:19px 21px}.project-label{color:#0e65d6;font-size:12px;font-weight:750}.project-body h3{font-size:17px;margin:8px 0}.project-body p{font-size:13px;margin:0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:34px}.steps>div{border-left:3px solid var(--gold);padding-left:20px}.steps span{font-size:27px;color:#1964c0;font-weight:850}.steps h3{font-size:17px;margin:2px 0}.steps p{font-size:13px;margin:0}.contact-band{background:linear-gradient(110deg,#04152f,#0a326c);color:white;padding:65px 0}.contact-inner{display:flex;justify-content:space-between;gap:35px;align-items:center}.contact-band h2{font-size:clamp(30px,3.1vw,42px);line-height:1.2;margin:0 0 8px}.contact-band p:not(.eyebrow){color:#d1e0f5;margin:0}.contact-band .actions{margin-top:0;flex-shrink:0}.footer{background:#06162e;color:#c8d4e8;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:1.7fr .85fr 1.25fr 1.2fr;gap:35px}.footer h3{font-size:15px;color:white;margin:0 0 15px}.footer-brand{font-size:20px;color:white}.footer p{font-size:13px;line-height:1.6}.footer a{display:block;font-size:13px;margin:7px 0}.footer a:hover{color:var(--gold)}.footer-bottom{border-top:1px solid #ffffff20;margin-top:36px;padding-top:17px;font-size:12px}a:focus-visible,button:focus-visible{outline:3px solid #438cff;outline-offset:4px}
@media(max-width:1080px){.service-grid{grid-template-columns:repeat(3,1fr)}.benefit-grid{grid-template-columns:repeat(2,1fr)}.hero-layout{grid-template-columns:1.08fr .92fr}.phone-mock{right:-10%}.contact-inner{align-items:flex-start;flex-direction:column}.contact-band .actions{margin-top:4px}}
@media(max-width:780px){.hero-layout{grid-template-columns:1fr;padding:55px 0 70px;gap:10px}.hero-copy{text-align:left}.hero-art{max-width:520px;width:90%;margin:10px auto 0;min-height:340px;transform:none}.hero-art-image::before{inset:10% 6% 12% 6%;filter:blur(22px)}.hero-device-image{width:100%;max-width:520px;border-radius:24px;box-shadow:0 18px 32px rgba(3,14,34,.18),0 6px 14px rgba(3,14,34,.08)}.phone-mock{right:-7%}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}.section{padding:65px 0}}
@media(max-width:520px){.container{width:min(calc(100% - 30px),var(--container))}h1{font-size:43px}.hero-lead{font-size:15px}.hero-layout{padding-top:45px}.hero-highlights{font-size:11px;gap:10px}.hero-art{width:94%;min-height:290px}.hero-art-image::before{inset:12% 4% 10% 4%;filter:blur(18px)}.hero-device-image{border-radius:20px}.screen{border-width:7px;border-bottom-width:11px}.mock-grid{grid-template-columns:43px 1fr}.mock-nav{padding:20px 9px}.mock-nav b{width:22px}.mock-main{padding:11px}.metric-grid{gap:4px}.metric-grid>div{padding:6px}.metric-grid strong{font-size:13px}.metric-grid small{font-size:8px}.chart{height:90px}.phone-mock{transform:scale(.75);transform-origin:bottom right;right:-8%;bottom:0}.service-grid{grid-template-columns:1fr 1fr;gap:11px}.service-card{padding:21px 12px}.service-card h3{font-size:14px;min-height:0}.benefit-grid,.portfolio-grid,.steps,.footer-grid{grid-template-columns:1fr}.benefit{gap:15px}.section{padding:50px 0}.section h2{font-size:29px}.contact-band{padding:50px 0}.contact-band .actions{width:100%}.contact-band .btn{width:100%}.footer-grid{gap:24px}.footer-bottom{margin-top:24px}}
@media(max-width:360px){.service-grid{grid-template-columns:1fr}.hero-art{display:none}.hero-highlights{display:grid}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

.project-photo{width:100%;height:190px;object-fit:cover;display:block}.project-body a{display:inline-block;margin-top:12px;font-weight:700;color:#076ac7}

/* Contacto V2.4 */
.whatsapp-float{position:fixed;right:22px;bottom:22px;width:60px;height:60px;z-index:55;display:grid;place-items:center;border-radius:50%;background:#1fae59;color:white;box-shadow:0 9px 27px #001d2250;transition:transform .2s}.whatsapp-float:hover{transform:translateY(-3px);background:#168e49}.whatsapp-float svg{width:34px;height:34px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.contact-page-hero{background:linear-gradient(120deg,#03132c,#0b346d);padding:80px 0 70px;color:white}.contact-page-hero h1{font-size:clamp(35px,4.5vw,57px)}.contact-page-hero p:not(.eyebrow){max-width:740px;color:#d9e6f9;font-size:17px}.contact-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr);gap:50px;align-items:start}.contact-layout h2{margin-bottom:14px}.contact-form{display:grid;gap:20px;margin-top:25px}.contact-form label{display:grid;gap:6px;font-weight:700;font-size:14px}.contact-form input,.contact-form textarea{width:100%;border:1px solid #cbd6e4;border-radius:10px;padding:13px 14px;font:inherit;font-weight:400;color:var(--ink);background:white}.contact-form :is(input,textarea):focus{outline:2px solid #126af4;outline-offset:1px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form button{justify-self:start;border:0;cursor:pointer}.hidden-honey{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.form-note{font-size:12px;color:var(--muted);margin:0}.contact-sidebar{display:grid;gap:18px}.contact-info-card,.support-card{border:1px solid var(--line);padding:28px;border-radius:18px;box-shadow:0 6px 20px #0920460c}.contact-info-card h2,.support-card h2{font-size:23px}.contact-info-card p{margin:0 0 18px;overflow-wrap:anywhere;color:var(--muted)}.contact-info-card p strong{display:block;color:var(--ink);font-size:14px}.contact-info-card p a{display:block;color:#1261bd}.support-card{background:#082347;color:white}.support-card p{color:#d8e6f5}.support-card .btn{display:inline-flex;margin:12px 0}.support-icon{color:var(--gold);margin-bottom:15px}.form-message{padding:15px 18px;border-radius:10px;margin:18px 0}.form-success{background:#e5f7e9;color:#125b31}.form-error{background:#ffedf0;color:#9b1b2b}.form-error ul{margin:6px 0 0;padding-left:18px}
@media(max-width:780px){.contact-layout{grid-template-columns:1fr;gap:28px}.contact-page-hero{padding:55px 0}}
@media(max-width:520px){.form-row{grid-template-columns:1fr;gap:20px}.whatsapp-float{width:54px;height:54px;right:15px;bottom:16px}.whatsapp-float svg{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}

/* Cotizaciones V2.5 */
.contact-form select{width:100%;border:1px solid #cbd6e4;border-radius:10px;padding:13px 14px;font:inherit;font-weight:400;color:var(--ink);background:white}.contact-form :is(select):focus{outline:2px solid #126af4;outline-offset:1px}.quote-note{padding:18px;border-radius:12px;background:#f2f7fd;border:1px solid #dbe7f8;font-size:14px}.quote-note p{margin:0}.contact-form .consent-line{display:flex;align-items:flex-start;gap:10px;font-weight:500}.contact-form .consent-line input{width:18px;height:18px;flex-shrink:0;margin:3px 0}.contact-form .consent-line a{color:#1261bd;text-decoration:underline}

/* V2.5.3: resumen de seis proyectos en Home y vista de portafolio completa */
.portfolio-more{display:flex;justify-content:center;margin-top:32px}.portfolio-page-title{font-size:clamp(32px,4.5vw,54px);line-height:1.14;letter-spacing:-.035em;margin-bottom:14px}.portfolio-intro{color:var(--muted);max-width:720px}.portfolio-grid .project-photo{width:100%;height:190px;display:block;object-fit:cover}.portfolio-grid .project-body h2{font-size:17px;margin:8px 0}.project-body>a{display:inline-block;margin:12px 12px 0 0;font-size:13px;font-weight:700;color:#1367cc}.project-body>a:hover{text-decoration:underline}

/* ================================================================
   SERVICIOS WEB VILA | CONTROL CENTRAL DEL LOGO Y ENCABEZADO
   ================================================================
   CAMBIA SOLO LOS VALORES DE ESTA SECCION.

   --swv-logo-pc: ancho deseado del logo en PC.
   --swv-logo-tablet: ancho deseado en pantallas medianas.
   --swv-logo-movil: ancho deseado en celulares (PRUEBA 330, 350...).

   IMPORTANTE: no hay un max-height que reduzca la imagen.
   La altura del encabezado crece si el logo lo necesita.
   La UNICA restriccion de ancho es el espacio fisico disponible
   para no tapar el boton del menu ni los enlaces.
   ================================================================ */
:root {
    --swv-logo-pc: 510px;          /* CAMBIAR: LOGO EN PC */
    --swv-logo-tablet: 360px;      /* CAMBIAR: LOGO EN TABLET */
    --swv-logo-movil: 400px;       /* CAMBIAR: LOGO EN CELULAR */

    --swv-header-pc: 110px;        /* ALTURA MINIMA PC; puede crecer */
    --swv-header-tablet: 90px;     /* ALTURA MINIMA TABLET */
    --swv-header-movil: 78px;      /* ALTURA MINIMA CELULAR */
    --swv-menu-reserva: 52px;      /* Espacio del boton hamburguesa */
}

/* Estructura: altura flexible, centrado, sin deformacion. */
.header {
    height: auto;
    min-height: var(--swv-header-pc);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 3px 20px #091c360c;
}
.header-inner {
    height: auto;
    min-height: var(--swv-header-pc);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block: 8px;
}

/* LOGO PC: mantiene la proporcion natural (sin altura maxima). */
.header .brand {
    display: flex;
    align-items: center;
    flex: 0 1 var(--swv-logo-pc);
    width: var(--swv-logo-pc);
    min-width: 0;
    max-width: 100%;
}
.header .brand img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
}

/* MENU EN PC: no se superpone con el logo. */
.header .nav {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    flex: 0 0 auto;
}
.header .menu-toggle {
    display: none;
    color: var(--navy);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 10px;
}

/* TABLET Y PORTATILES: se activa el menu hamburguesa antes
   de que los enlaces queden apretados por el logo. */
@media (max-width: 1240px) {
    .header,
    .header-inner { min-height: var(--swv-header-tablet); }

    .header .brand {
        flex: 0 1 var(--swv-logo-tablet);
        width: var(--swv-logo-tablet);
        max-width: calc(100% - var(--swv-menu-reserva));
    }
    .header .menu-toggle {
        display: block;
        flex: 0 0 auto;
    }
    .header .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 19px 22px 25px;
        box-shadow: 0 15px 25px #0002;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        font-size: 14px;
        white-space: normal;
    }
    .header .nav.open { display: flex; }
    .header .nav a { padding: 9px 10px; }
    .header .nav .client-link { text-align: center; }
}

/* CELULARES: puedes aumentar --swv-logo-movil tanto como quieras.
   La imagen crece sin un max-height artificial; si llega al borde
   disponible, el espacio restante se reserva al boton del menu. */
@media (max-width: 767px) {
    .header,
    .header-inner { min-height: var(--swv-header-movil); }

    .header .brand {
        flex: 0 1 var(--swv-logo-movil);
        width: var(--swv-logo-movil);
        max-width: calc(100% - var(--swv-menu-reserva));
    }
    .header .brand img {
        max-height: none;
        height: auto;
    }
}


/* ==========================================
   SERVICIOS WEB VILA
   ENCABEZADO DE ANCHO COMPLETO
   ========================================== */

/* CONTENEDOR DEL HEADER */
.header .header-inner {
    width: calc(100% - 48px);
    max-width: none;
    margin: 0 auto;
    gap: 24px;
}

/* LOGO EN COMPUTADORAS */
@media (min-width: 1101px) {
    .header .brand {
        width: 480px;
        flex-shrink: 0;
    }
}

/* MENÚ EN COMPUTADORAS */
@media (min-width: 1101px) {
    .header .nav {
        margin-left: auto;
        gap: 20px;
        white-space: nowrap;
    }
}

/* ESPACIO LATERAL EN CELULARES */
@media (max-width: 780px) {
    .header .header-inner {
        width: calc(100% - 24px);
        gap: 8px;
    }
}

/* ==========================================
   SERVICIOS WEB VILA
   TAMAÑO Y SEPARACIÓN DEL MENÚ
   ========================================== */

/* MENÚ EN COMPUTADORAS */
@media (min-width: 1101px) {

    .header .nav {
        font-size: 18px;       /* TAMAÑO DE LAS LETRAS */
        gap: 28px;             /* ESPACIO ENTRE ENLACES */
        font-weight: 650;      /* GROSOR DEL TEXTO */
        white-space: nowrap;
    }

    /* BOTÓN ÁREA DE CLIENTES */
    .header .client-link {
        padding: 13px 20px;    /* ESPACIO INTERIOR DEL BOTÓN */
        font-size: 15px;
    }
}

/* MENÚ EN TABLETS Y PANTALLAS MEDIANAS */
@media (min-width: 781px) and (max-width: 1100px) {

    .header .nav {
        font-size: 14px;
        gap: 14px;
    }
}

/* MENÚ DESPLEGABLE EN CELULARES */
@media (max-width: 780px) {

    .header .nav {
        font-size: 16px;
        gap: 10px;
    }

    .header .nav a {
        padding: 12px 14px;
    }
}