:root{--bg:#070914;--bg2:#0d1020;--pink:#ef0b73;--orange:#ff6b1a;--text:#111421;--muted:#667085;--white:#fff;--line:#e8eaf0;--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}.site-header{position:sticky;top:0;z-index:100;background:rgba(7,9,20,.96);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}.nav-wrap{height:82px;display:flex;align-items:center;gap:26px}.brand img{width:175px;display:block}.main-nav{display:flex;gap:26px;margin-left:auto}.main-nav a{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase}.main-nav a:hover,.main-nav a.active{color:#ff2b84}.header-actions{display:flex;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:10px;font-weight:800;font-size:13px;text-transform:uppercase;border:1px solid transparent;transition:.25s}.btn:hover{transform:translateY(-2px)}.btn-gradient{background:linear-gradient(90deg,var(--pink),var(--orange));color:#fff}.btn-outline{border-color:#ed176f;color:#fff;background:transparent}.btn-outline-dark{border-color:#ed176f;color:#e20b69}.menu-toggle{display:none;background:none;border:0}.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 35%,#34142d 0,transparent 33%),linear-gradient(120deg,#080b18,#0a0c19 62%,#190c19);color:#fff;padding:74px 0 0}.hero-glow{position:absolute;width:420px;height:420px;background:#ed0b72;filter:blur(170px);opacity:.12;right:5%;top:12%}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.eyebrow,.section-head>span{display:inline-block;color:#e90b6e;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em}.eyebrow{padding:10px 14px;border-radius:30px;color:#fff;background:linear-gradient(90deg,var(--pink),var(--orange))}.hero h1{font-size:58px;line-height:1.02;margin:20px 0;text-transform:uppercase;letter-spacing:-.045em}.hero h1 span,.section-head em{font-style:normal;background:linear-gradient(90deg,#ed0b72,#ff6b1a);-webkit-background-clip:text;color:transparent}.hero-copy>p{font-size:17px;line-height:1.7;color:#d2d5df;max-width:650px}.hero-features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0}.hero-features div{display:flex;flex-direction:column;gap:5px}.hero-features b{font-size:28px;color:#f21773}.hero-features strong{font-size:12px}.hero-features small{font-size:10px;color:#b8bcc8;line-height:1.4}.hero-actions{display:flex;gap:12px}.hero-visual{height:470px;position:relative}.screen{border:1px solid #33384a;background:#0c0f1c;border-radius:14px;box-shadow:0 25px 80px rgba(0,0,0,.5)}.screen-main{position:absolute;inset:10px 15px 75px 0;transform:perspective(1000px) rotateY(-5deg);padding:18px}.screen-top{display:flex;gap:5px}.screen-top i{width:7px;height:7px;border-radius:50%;background:#ef176f}.screen-content{padding:55px 35px}.screen-content span{font-size:11px;color:#ff377f}.screen-content h3{font-size:30px;max-width:330px}.screen-content em{color:#ff2679;font-style:normal}.fake-layout{display:grid;grid-template-columns:2fr 1fr;gap:10px}.fake-layout div{height:65px;background:linear-gradient(135deg,#2a173b,#841356);border-radius:8px}.fake-layout div:first-child{grid-row:span 2;height:140px}.code-card,.metric-card{position:absolute;background:#0b0f1a;border:1px solid #33384a;border-radius:12px;box-shadow:0 18px 45px #0008}.code-card{right:-20px;bottom:20px;width:270px;padding:22px;color:#ef3b8b;font:11px monospace;display:flex;flex-direction:column;gap:8px}.metric-card{right:-25px;top:45px;width:160px;padding:18px}.metric-card small{color:#9ca2b2}.metric-card strong{display:block;font-size:19px;margin:7px 0}.chart,.line-chart{height:45px;background:linear-gradient(165deg,transparent 45%,#20cf8a 46%,#20cf8a 49%,transparent 50%)}.tech-row{margin-top:55px;padding:20px 0;border-top:1px solid #ffffff18;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;color:#d7dae4;font-weight:800}.section{padding:90px 0}.light{background:#fff}.dark{background:#080b18;color:#fff}.section-head{max-width:720px;margin-bottom:35px}.section-head h2{font-size:40px;line-height:1.1;margin:8px 0 12px;letter-spacing:-.035em}.section-head p{color:var(--muted);line-height:1.7}.inverse h2{color:#fff}.inverse p{color:#b8bdca}.cards.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.services article{border:1px solid var(--line);padding:28px;border-radius:var(--radius);box-shadow:0 12px 35px #1018280a;transition:.25s}.services article:hover{transform:translateY(-5px);box-shadow:0 20px 50px #10182812}.services i{font-style:normal;font-size:30px;color:#ee0b72}.services h3{font-size:17px}.services p{font-size:13px;line-height:1.7;color:#667085}.services a{font-size:11px;text-transform:uppercase;font-weight:900;color:#ed0b72}.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.portfolio-grid article{background:#111525;border-radius:14px;overflow:hidden}.portfolio-img{height:160px}.placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#20162a,#661446);font-size:11px;color:#ffffff90;font-weight:800}.portfolio-grid h3,.portfolio-grid p{padding:0 15px}.portfolio-grid h3{font-size:14px;margin:14px 0 4px}.portfolio-grid p{font-size:11px;color:#9298a8;margin:0 0 16px}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.check-list{list-style:none;padding:0;margin:25px 0}.check-list li{margin:12px 0;padding-left:25px;position:relative;line-height:1.5}.check-list li:before{content:'✓';position:absolute;left:0;color:#ee0b72;font-weight:900}.ad-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ad-card{border:1px solid var(--line);border-radius:16px;padding:25px;box-shadow:0 18px 45px #10182810}.ad-card small,.ad-card strong{display:block;margin-top:16px}.ad-card strong{font-size:34px}.line-chart{height:100px}.line-chart.alt{filter:hue-rotate(110deg)}.ai-section{background:radial-gradient(circle at 15% 50%,#2e1554,transparent 32%),linear-gradient(100deg,#080b18,#160925);color:#fff}.ai-art{display:grid;place-items:center;min-height:300px}.ai-orb{width:220px;height:220px;border-radius:50%;display:grid;place-items:center;font-size:72px;font-weight:900;background:radial-gradient(circle at 35% 30%,#e62bff,#531c9a 40%,#10142a 70%);box-shadow:0 0 80px #7b20c888,0 0 160px #e80b7250}.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.ai-grid div{padding:18px;border:1px solid #ffffff1c;border-radius:12px;background:#ffffff08}.ai-grid small{display:block;color:#b9bdca;margin-top:5px}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.degree-placeholder{aspect-ratio:3/4;border:8px solid #d6b78a;background:#f6f0e7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:#7b6547;box-shadow:0 15px 40px #0002}.degree-placeholder span{font-weight:900}.degree-placeholder small{margin-top:12px}.contact-section{background:#f7f8fb}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.contact-links{display:flex;flex-direction:column;gap:13px;font-weight:700}.contact-form{background:#fff;padding:25px;border-radius:18px;box-shadow:0 18px 55px #10182810}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #e2e5eb;border-radius:9px;padding:14px;margin-bottom:12px;font:inherit;outline:none}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#ed0b72}.full{width:100%;border:0;cursor:pointer}.contact-form small{display:block;margin-top:10px;color:#8b91a0}footer{background:#070914;color:#fff;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:45px}.footer-grid img{width:180px}.footer-grid p,.footer-grid span,.footer-grid a{color:#9ca2b2;font-size:12px;line-height:1.8}.footer-grid div{display:flex;flex-direction:column;align-items:flex-start}.footer-grid h4{font-size:12px;text-transform:uppercase}.copyright{border-top:1px solid #ffffff12;margin-top:35px;padding-top:20px;text-align:center;color:#7f8595;font-size:11px}.floating-wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#20c96b;color:#fff;display:grid;place-items:center;font-weight:900;z-index:90;box-shadow:0 10px 30px #0004}@media(max-width:980px){.header-actions{display:none}.menu-toggle{display:block;margin-left:auto}.main-nav{position:absolute;top:82px;left:0;right:0;margin:0;padding:25px 4%;background:#090b16;display:none;flex-direction:column}.main-nav.open{display:flex}.hero-grid,.split,.about-grid,.contact-grid{grid-template-columns:1fr}.hero h1{font-size:46px}.hero-visual{height:390px}.cards.services{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.nav-wrap{height:70px}.brand img{width:145px}.main-nav{top:70px}.hero{padding-top:45px}.hero h1{font-size:38px}.hero-features{grid-template-columns:1fr 1fr}.hero-actions{flex-direction:column;align-items:stretch}.hero-visual{height:320px}.screen-content{padding:35px 15px}.screen-content h3{font-size:23px}.metric-card{display:none}.code-card{width:220px}.section{padding:65px 0}.section-head h2{font-size:32px}.cards.services,.portfolio-grid,.ad-panels,.ai-grid,.form-row,.footer-grid{grid-template-columns:1fr}.tech-row{justify-content:flex-start}.contact-form{padding:18px}}
/* ==========================================================
   WEBSTUDIO1320.CL
   HEADER + HERO
========================================================== */

:root {
    --ws-dark: #050817;
    --ws-dark-2: #090d1c;
    --ws-panel: #0d1223;

    --ws-pink: #f50070;
    --ws-pink-2: #ff176f;
    --ws-orange: #ff681d;

    --ws-white: #ffffff;
    --ws-gray: #b9bdca;

    --ws-border: rgba(255,255,255,.10);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.ws-container {
    width: min(1500px, 92%);
    margin: 0 auto;
}


/* =========================
   HEADER
========================= */

.ws-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(5,8,23,.96);
    border-bottom: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(18px);
}

.ws-nav {
    min-height: 105px;

    display: flex;
    align-items: center;
    gap: 34px;
}

.ws-brand {
    display: flex;
    align-items: center;
    gap: 15px;

    text-decoration: none;
    flex-shrink: 0;
}

.ws-logo {
    width: 78px;
    height: 65px;
    object-fit: contain;
}

.ws-brand-text {
    display: flex;
    flex-direction: column;
}

.ws-brand-text strong {
    color: white;
    font-size: 25px;
    letter-spacing: -.5px;
}

.ws-brand-text span {
    color: #969aaa;
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 4px;
}


/* MENU */

.ws-menu {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 29px;
}

.ws-menu a {
    position: relative;

    color: #fff;
    text-decoration: none;

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

    transition: .25s ease;
}

.ws-menu a:hover,
.ws-menu a.active {
    color: var(--ws-pink);
}

.ws-menu a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -13px;

    height: 2px;

    background: linear-gradient(
        90deg,
        var(--ws-pink),
        var(--ws-orange)
    );

    transform: scaleX(0);
    transition: .25s ease;
}

.ws-menu a:hover::after,
.ws-menu a.active::after {
    transform: scaleX(1);
}


/* HEADER BUTTONS */

.ws-header-actions {
    display: flex;
    gap: 12px;
}

.ws-btn-call,
.ws-btn-whatsapp {
    height: 58px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 18px;

    border-radius: 11px;

    text-decoration: none;
    color: white;

    transition: .25s ease;
}

.ws-btn-call {
    border: 1px solid var(--ws-pink);
}

.ws-btn-call > span {
    color: var(--ws-orange);
    font-size: 22px;
}

.ws-btn-whatsapp {
    background: linear-gradient(
        110deg,
        var(--ws-pink),
        var(--ws-orange)
    );
}

.ws-btn-call div,
.ws-btn-whatsapp div {
    display: flex;
    flex-direction: column;
}

.ws-btn-call strong,
.ws-btn-whatsapp strong {
    font-size: 13px;
}

.ws-btn-call small,
.ws-btn-whatsapp small {
    font-size: 10px;
    margin-top: 2px;
    opacity: .85;
}

.ws-btn-call:hover,
.ws-btn-whatsapp:hover {
    transform: translateY(-3px);
}


/* =========================
   HERO
========================= */

.ws-hero {
    position: relative;
    overflow: hidden;

    /* Ya no obligamos al hero a medir 850px */
    min-height: auto;

    /* Menos espacio arriba y abajo */
    padding: 42px 0 22px;

    color: white;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(181,0,108,.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 42% 90%,
            rgba(255,83,25,.08),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            #030716 0%,
            #050818 55%,
            #120717 100%
        );
}

.ws-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}

.ws-hero-grid {
    position: relative;
    z-index: 2;

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

    align-items: center;
    gap: 50px;
}


/* HERO TEXT */

.ws-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 12px 20px;

    border-radius: 100px;

    background: linear-gradient(
        90deg,
        var(--ws-pink),
        var(--ws-orange)
    );

    font-size: 13px;
    font-weight: 900;
}

.ws-hero-content h1 {
    margin: 22px 0 18px;
    max-width: 650px;

    font-size: clamp(44px, 3.7vw, 61px);
    line-height: 0.98;
    letter-spacing: -2px;
}

.ws-hero-content h1 span {
    display: block;
}

.ws-hero-content h1 > span:nth-child(2) {
    color: #ff2367;
}

.ws-gradient-text {
    background: linear-gradient(
        90deg,
        var(--ws-pink),
        var(--ws-orange)
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;
}

.ws-hero-description {
    max-width: 680px;

    margin: 0;

    color: #c7cad4;

    font-size: 18px;
    line-height: 1.7;
}

/* MINI SERVICES */

.ws-mini-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.ws-mini-service {
    min-width: 0;
}

/* =========================================
   ICONOS SERVICIOS HERO - TAMAÑO UNIFORME
========================================= */

.ws-service-icon {
    width: 52px;
    height: 52px;

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

    padding: 8px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.02)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06);

    flex-shrink: 0;
}


/* LOGOS GOOGLE Y META */

.ws-service-icon img {
    display: block;

    width: 34px;
    height: 34px;

    object-fit: contain;
}


/* </> DISEÑO WEB */

.ws-code-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #ff176f;

    font-size: 21px;
    font-weight: 900;
}


/* IA */

.ws-ai-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #f50070;

    font-size: 20px;
    font-weight: 900;

    text-shadow:
        0 0 14px rgba(245,0,112,.45);
}


/* TODOS LOS TEXTOS ALINEADOS */

.ws-mini-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ws-mini-service strong {
    margin-top: 10px;

    color: #fff;

    font-size: 14px;
    line-height: 1.2;
}

.ws-mini-service > span:not(.ws-code-symbol):not(.ws-ai-symbol) {
    margin-top: 5px;

    color: #aeb3c1;

    font-size: 11px;
    line-height: 1.45;
}


/* EFECTO MUY SUAVE */

.ws-mini-service:hover .ws-service-icon {
    transform: translateY(-3px);

    border-color: rgba(245,0,112,.35);

    box-shadow:
        0 8px 25px rgba(245,0,112,.10);
}

.ws-service-icon {
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* HERO BUTTONS */

.ws-hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 25px;
}

.ws-primary-button,
.ws-outline-button {
    min-height: 57px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 25px;

    border-radius: 9px;

    color: white;
    text-decoration: none;

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

    transition: .25s ease;
}

.ws-primary-button {
    background: linear-gradient(
        110deg,
        var(--ws-pink),
        var(--ws-orange)
    );
}

.ws-outline-button {
    border: 1px solid var(--ws-pink);
    background: rgba(5,8,23,.35);
}

.ws-primary-button:hover,
.ws-outline-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(245,0,112,.25);
}


/* =========================
   HERO IMAGE
========================= */

.ws-hero-visual {
    position: relative;

    min-height: 470px;

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

.ws-image-glow {
    position: absolute;

    width: 75%;
    height: 65%;

    border-radius: 50%;

    background: rgba(239,0,116,.25);

    filter: blur(100px);
}

.ws-hero-image {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 820px;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    filter:
        drop-shadow(0 25px 45px rgba(0,0,0,.45));
}


/* FLOATING CARD */

/* =========================================
   FLOATING CARD - + CLIENTES
========================================= */

.ws-floating-card {
    position: absolute;
    z-index: 5;

    right: 2%;
    top: 12%;

    width: 155px;
    padding: 15px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 13px;

    background: rgba(10,15,30,.90);

    backdrop-filter: blur(14px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.40);
}


/* TEXTO PEQUEÑO: RESULTADOS DIGITALES */

.ws-floating-card > span {
    color: #9fa5b6;
    font-size: 9px;
}


/* + CLIENTES */

.ws-floating-card strong {
    display: block;

    margin: 6px 0 12px;

    font-size: 19px;
}


/* GRÁFICO */

.ws-chart {
    height: 34px;

    display: flex;
    align-items: flex-end;
    gap: 5px;
}


/* BARRAS */

.ws-chart i {
    flex: 1;
    display: block;

    background: linear-gradient(
        var(--ws-pink),
        var(--ws-orange)
    );

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


/* ALTURA DE CADA BARRA */

.ws-chart i:nth-child(1) { height: 30%; }
.ws-chart i:nth-child(2) { height: 48%; }
.ws-chart i:nth-child(3) { height: 58%; }
.ws-chart i:nth-child(4) { height: 76%; }
.ws-chart i:nth-child(5) { height: 100%; }

/* =========================
   HAMBURGER
========================= */

.ws-menu-toggle {
    display: none;

    width: 45px;
    height: 45px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;

    background: transparent;

    cursor: pointer;
}

.ws-menu-toggle span {
    width: 22px;
    height: 2px;

    display: block;

    margin: 5px auto;

    background: white;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1250px) {

    .ws-brand-text strong {
        font-size: 19px;
    }

    .ws-menu {
        gap: 17px;
    }

    .ws-menu a {
        font-size: 11px;
    }

    .ws-btn-call small,
    .ws-btn-whatsapp small {
        display: none;
    }

    .ws-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

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

}


/* =========================
   MOBILE
========================= */

@media (max-width: 950px) {

    .ws-nav {
        min-height: 78px;
    }

    .ws-logo {
        width: 55px;
        height: 50px;
    }

    .ws-brand-text strong {
        font-size: 17px;
    }

    .ws-brand-text span {
        font-size: 8px;
    }

    .ws-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .ws-menu {
        position: absolute;

        top: 78px;
        left: 0;

        width: 100%;

        display: none;
        flex-direction: column;

        padding: 30px;

        background: #070b18;

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

    .ws-menu.open {
        display: flex;
    }

    .ws-menu a {
        font-size: 14px;
    }

    .ws-header-actions {
        display: none;
    }

    .ws-hero {
        padding-top: 55px;
    }

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

    .ws-hero-content h1 {
        font-size: clamp(44px, 12vw, 68px);
    }

    .ws-hero-visual {
        min-height: auto;
        margin-top: 30px;
    }

    .ws-hero-image {
        width: 100%;
    }

    .ws-floating-card {
        right: 0;
        top: 5%;
    }

}


@media (max-width: 600px) {

    .ws-container {
        width: 90%;
    }

    .ws-brand-text strong {
        font-size: 15px;
    }

    .ws-badge {
        font-size: 9px;
        padding: 10px 13px;
    }

    .ws-hero-content h1 {
        letter-spacing: -2px;
    }

    .ws-hero-description {
        font-size: 16px;
    }

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

    .ws-hero-buttons {
        flex-direction: column;
    }

    .ws-primary-button,
    .ws-outline-button {
        width: 100%;
    }

    .ws-floating-card {
        width: 145px;
        padding: 13px;
    }

    .ws-floating-card strong {
        font-size: 17px;
    }

}

/* ==========================================================
   AJUSTE FINAL HERO - WEBSTUDIO1320.CL
   Pegar AL FINAL de style.css
========================================================== */

/* HERO MÁS COMPACTO */
.ws-hero {
    min-height: auto;
    padding-top: 55px;
    padding-bottom: 28px;
}

/* DOS COLUMNAS MEJOR PROPORCIONADAS */
.ws-hero-grid {
    grid-template-columns: 42% 58%;
    gap: 35px;
    align-items: center;
}

/* BADGE */
.ws-badge {
    padding: 10px 18px;
    font-size: 12px;
    margin-bottom: 0;
}

/* TITULAR */
.ws-hero-content h1 {
    margin: 25px 0 20px;
    max-width: 650px;

    font-size: clamp(46px, 4.1vw, 67px);
    line-height: 0.98;
    letter-spacing: -2.5px;
}

/* TEXTO DESCRIPTIVO */
.ws-hero-description {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.65;
}

/* SERVICIOS PEQUEÑOS */
.ws-mini-services {
    margin-top: 30px;
    gap: 15px;
}

.ws-service-icon {
    width: 42px;
    height: 42px;
}

.ws-mini-service strong {
    margin-top: 8px;
    font-size: 13px;
}

.ws-mini-service span {
    font-size: 11px;
    line-height: 1.45;
}

/* BOTONES */
.ws-hero-buttons {
    margin-top: 30px;
}

.ws-primary-button,
.ws-outline-button {
    min-height: 53px;
}

/* ========================================
   IMAGEN DERECHA
======================================== */

.ws-hero-visual {
    min-height: 525px;
    position: relative;
}

/* IMAGEN MÁS GRANDE PERO CONTROLADA */
.ws-hero-image {
    width: 108%;
    max-width: 850px;
    height: auto;

    border-radius: 4px;

    position: relative;
    z-index: 2;

    /* Integra visualmente la foto con el fondo */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 5%,
            black 94%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 5%,
            black 94%,
            transparent 100%
        );

    filter:
        drop-shadow(0 25px 45px rgba(0,0,0,.38));
}

/* RESPLANDOR DETRÁS DE LA FOTO */
.ws-image-glow {
    width: 80%;
    height: 70%;

    background:
        radial-gradient(
            circle,
            rgba(245,0,112,.30),
            rgba(255,104,29,.10) 45%,
            transparent 70%
        );

    filter: blur(75px);
}

/* TARJETA + CLIENTES */
.ws-floating-card {
    right: 3%;
    top: 18%;

    width: 175px;
    padding: 17px;

    background: rgba(8,13,29,.88);

    box-shadow:
        0 20px 45px rgba(0,0,0,.45),
        0 0 30px rgba(245,0,112,.08);
}

.ws-floating-card strong {
    font-size: 21px;
}

/* ==========================================================
   PANTALLAS GRANDES
========================================================== */

@media (min-width: 1400px) {

    .ws-container {
        width: min(1420px, 92%);
    }

    .ws-hero {
        padding-top: 58px;
    }

    .ws-hero-grid {
        grid-template-columns: 41% 59%;
    }

    .ws-hero-content h1 {
        font-size: 64px;
    }

    .ws-hero-visual {
        min-height: 520px;
    }

    .ws-hero-image {
        width: 105%;
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .ws-hero-grid {
        grid-template-columns: 48% 52%;
        gap: 20px;
    }

    .ws-hero-content h1 {
        font-size: 48px;
    }

    .ws-hero-visual {
        min-height: 470px;
    }

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


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 950px) {

    .ws-hero {
        padding-top: 42px;
    }

    .ws-hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .ws-hero-content h1 {
        font-size: clamp(42px, 11vw, 60px);
        line-height: 1;
    }

    .ws-hero-visual {
        min-height: auto;
        margin-top: 10px;
    }

    .ws-hero-image {
        width: 100%;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                black 0%,
                black 90%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                to bottom,
                black 0%,
                black 90%,
                transparent 100%
            );
    }

}


/* MÓVILES PEQUEÑOS */

@media (max-width: 600px) {

    .ws-hero {
        padding-top: 32px;
    }

    .ws-badge {
        font-size: 9px;
        padding: 9px 12px;
    }

    .ws-hero-content h1 {
        margin-top: 20px;
        font-size: clamp(39px, 12vw, 52px);
        letter-spacing: -2px;
    }

    .ws-hero-description {
        font-size: 15px;
    }

    .ws-mini-services {
        margin-top: 25px;
    }

    .ws-hero-buttons {
        margin-top: 25px;
    }

    .ws-floating-card {
        width: 135px;
        right: 0;
        top: 5%;
    }
}

.whatsapp-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;

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

    background: #25D366;
    border-radius: 8px;

    padding: 5px;
}

.whatsapp-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* =====================================================
   TECNOLOGÍAS Y PLATAFORMAS - BANDA BLANCA
===================================================== */
.ws-tech-section {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 14px 0;
    background: #ffffff;
    border-top: 1px solid #ececf1;
    border-bottom: 1px solid #e5e5eb;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.ws-technologies {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.ws-tech-heading {
    flex: 0 0 145px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 25px;
    border-right: 1px solid #dedee5;
}
.ws-tech-heading span {
    color: #f50070;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}
.ws-tech-heading strong {
    margin-top: 3px;
    color: #111526;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
}
.ws-tech-list {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
}
.ws-tech {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}
.ws-tech img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0 auto;
    transition: transform .25s ease, filter .25s ease;
}
.ws-tech strong {
    color: #292d3a;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.ws-tech img[alt="HTML5"],
.ws-tech img[alt="CSS3"],
.ws-tech img[alt="JavaScript"],
.ws-tech img[alt="Shopify"] { width:42px; height:48px; }

.ws-tech img[alt="WordPress"],
.ws-tech img[alt="Elementor"],
.ws-tech img[alt="Git"] { width:47px; height:47px; }

.ws-tech img[alt="PHP"],
.ws-tech img[alt="WooCommerce"] { width:58px; height:44px; }

.ws-tech img[alt="MySQL"] { width:55px; height:45px; }

.ws-tech:hover img {
    transform: translateY(-4px) scale(1.04);
    filter: drop-shadow(0 7px 8px rgba(0,0,0,.14));
}
@media (max-width:1100px) {
    .ws-technologies { align-items:flex-start; }
    .ws-tech-list { grid-template-columns:repeat(5,1fr); row-gap:22px; }
}
@media (max-width:650px) {
    .ws-tech-section { padding:25px 0; }
    .ws-technologies { display:block; }
    .ws-tech-heading {
        width:100%;
        display:block;
        padding:0 0 15px;
        margin-bottom:22px;
        border-right:0;
        border-bottom:1px solid #e5e5eb;
        text-align:center;
    }
    .ws-tech-heading span,
    .ws-tech-heading strong { display:inline; }
    .ws-tech-heading strong { margin-left:4px; }
    .ws-tech-list { grid-template-columns:repeat(2,1fr); gap:25px 15px; }
    .ws-tech strong { font-size:10px; }
}

/* =====================================================
   SERVICIOS WEBSTUDIO1320
===================================================== */

.cards.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* TARJETA */

.services .service-card {
    position: relative;
    overflow: hidden;

    min-height: 290px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e8eaf0;
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(16,24,40,.05);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* LÍNEA SUPERIOR DE IDENTIDAD */

.services .service-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        #ef0b73,
        #ff6b1a
    );

    opacity: 0;

    transition: opacity .25s ease;
}


/* HOVER */

.services .service-card:hover {
    transform: translateY(-6px);

    border-color: rgba(239,11,115,.22);

    box-shadow:
        0 22px 55px rgba(16,24,40,.11);
}

.services .service-card:hover::before {
    opacity: 1;
}


/* =============================
   ICONOS
============================= */

.service-icon {
    width: 56px;
    height: 56px;

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

    margin-bottom: 20px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #fff1f7,
            #fff7f1
        );

    color: #ef0b73;

    font-size: 24px;
    font-weight: 900;
}


/* LOGOS GOOGLE / META */

.service-icon-image img {
    display: block;

    width: 35px;
    height: 35px;

    object-fit: contain;
}


/* CÓDIGO */

.service-icon-code {
    font-family: monospace;
    font-size: 20px;
}


/* IA */

.service-icon-ai {
    background:
        linear-gradient(
            135deg,
            #f00072,
            #ff681c
        );

    color: white;

    box-shadow:
        0 8px 22px rgba(239,11,115,.18);
}


/* =============================
   TEXTO
============================= */

.services .service-card h3 {
    margin: 0 0 11px;

    color: #111421;

    font-size: 18px;
    line-height: 1.25;
}


.services .service-card p {
    margin: 0 0 22px;

    color: #667085;

    font-size: 13px;
    line-height: 1.7;
}


/* =============================
   VER SERVICIO
============================= */

.services .service-link {
    margin-top: auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #e90b6e;

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

    text-transform: uppercase;
    letter-spacing: .3px;
}


.services .service-link span {
    font-size: 17px;

    transition: transform .25s ease;
}


.services .service-card:hover .service-link span {
    transform: translateX(5px);
}


/* =============================
   RESPONSIVE
============================= */

@media (max-width: 900px) {

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

}


@media (max-width: 620px) {

    .cards.services {
        grid-template-columns: 1fr;
    }

    .services .service-card {
        min-height: auto;
        padding: 25px;
    }

}

/* =====================================================
   PORTAFOLIO WEBSTUDIO1320
===================================================== */

.ws-portfolio {
    position: relative;
    overflow: hidden;

    padding: 95px 0 105px;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(239, 11, 115, .10),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #070914 0%,
            #090c19 58%,
            #100816 100%
        );

    color: #fff;
}


/* SUTIL CUADRÍCULA DE FONDO */

.ws-portfolio::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    pointer-events: none;
}


.ws-portfolio .container {
    position: relative;
    z-index: 2;
}


/* =====================================================
   ENCABEZADO
===================================================== */

.ws-portfolio-head {
    max-width: 760px;

    margin-bottom: 45px;
}


.ws-portfolio-head > span {
    display: inline-block;

    margin-bottom: 12px;

    color: #f21773;

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

    letter-spacing: .09em;

    text-transform: uppercase;
}


.ws-portfolio-head h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 42px;
    line-height: 1.1;

    letter-spacing: -.035em;
}


.ws-portfolio-head h2 em {
    display: block;

    font-style: normal;

    background:
        linear-gradient(
            90deg,
            #f21773,
            #ff6b1a
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.ws-portfolio-head p {
    max-width: 690px;

    margin: 0;

    color: #aeb3c1;

    font-size: 15px;
    line-height: 1.7;
}


/* =====================================================
   GRID
===================================================== */

.ws-portfolio-grid {
    display: grid;

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

    gap: 25px;
}


/* =====================================================
   TARJETA
===================================================== */

.ws-project {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;

    background: #101423;

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.ws-project:hover {
    transform: translateY(-7px);

    border-color: rgba(242,23,115,.35);

    box-shadow:
        0 28px 70px rgba(0,0,0,.35);
}


/* =====================================================
   IMAGEN
===================================================== */

.ws-project-image {
    position: relative;

    display: block;

    width: 100%;

    height: 300px;

    overflow: hidden;

    background: #080b16;
}


.ws-project-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: top center;

    transition:
        transform .55s ease,
        filter .4s ease;
}


.ws-project:hover .ws-project-image img {
    transform: scale(1.045);

    filter: brightness(.72);
}


/* =====================================================
   OVERLAY
===================================================== */

.ws-project-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background:
        linear-gradient(
            rgba(7,9,20,.08),
            rgba(7,9,20,.72)
        );

    opacity: 0;

    transition: opacity .3s ease;
}


.ws-project:hover .ws-project-overlay {
    opacity: 1;
}


.ws-project-overlay span {
    color: #fff;

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

    letter-spacing: .06em;
}


.ws-project-overlay b {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ef0b73,
            #ff6b1a
        );

    color: #fff;

    font-size: 17px;
}


/* =====================================================
   INFORMACIÓN
===================================================== */

.ws-project-info {
    position: relative;

    padding: 26px 27px 28px;
}


.ws-project-category {
    display: block;

    margin-bottom: 8px;

    color: #f21773;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .09em;
}


.ws-project-info h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 21px;
    line-height: 1.2;
}


.ws-project-info p {
    max-width: 500px;

    min-height: 48px;

    margin: 0 0 18px;

    color: #9da4b5;

    font-size: 13px;
    line-height: 1.65;
}


/* =====================================================
   ETIQUETAS
===================================================== */

.ws-project-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 22px;
}


.ws-project-tags span {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding: 0 11px;

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

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

    color: #b8bdc9;

    font-size: 10px;
    font-weight: 700;
}


/* =====================================================
   ENLACE
===================================================== */

.ws-project-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #fff;

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

    letter-spacing: .04em;

    text-transform: uppercase;
}


.ws-project-link > span {
    color: #f21773;

    font-size: 17px;

    transition: transform .25s ease;
}


.ws-project-link:hover > span {
    transform: translateX(5px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .ws-portfolio {
        padding: 75px 0;
    }

    .ws-portfolio-head h2 {
        font-size: 36px;
    }

    .ws-project-image {
        height: 250px;
    }

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 650px) {

    .ws-portfolio {
        padding: 65px 0;
    }

    .ws-portfolio-head {
        margin-bottom: 32px;
    }

    .ws-portfolio-head h2 {
        font-size: 31px;
    }

    .ws-portfolio-head h2 em {
        display: inline;
    }

    .ws-portfolio-head p {
        font-size: 14px;
    }

    .ws-portfolio-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .ws-project-image {
        height: 220px;
    }

    .ws-project-info {
        padding: 22px;
    }

    .ws-project-info p {
        min-height: auto;
    }

}

/* =====================================================
   MARKETING DIGITAL - GOOGLE ADS / META ADS
===================================================== */

.ad-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* TARJETA */

.marketing-card {
    position: relative;
    overflow: hidden;

    min-height: 390px;

    padding: 28px;

    border: 1px solid #e4e7ed;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfbfd 100%
        );

    box-shadow:
        0 18px 45px rgba(16,24,40,.07);
}


/* CABECERA */

.marketing-card-head {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;
}


.marketing-logo {
    flex: 0 0 55px;

    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: #f7f8fb;
    border: 1px solid #eceef3;
}


.marketing-logo img {
    display: block;

    width: 34px;
    height: 34px;

    object-fit: contain;
}


.marketing-card-head span {
    display: block;

    margin-bottom: 4px;

    color: #8a91a1;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}


.marketing-card-head h3 {
    margin: 0;

    color: #111421;

    font-size: 19px;
}


/* DESCRIPCIÓN */

.marketing-card > p {
    min-height: 62px;

    margin: 0 0 22px;

    color: #667085;

    font-size: 12px;
    line-height: 1.65;
}


/* MÉTRICAS */

.marketing-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 18px;
}


.marketing-metrics > div {
    min-width: 0;

    padding: 13px;

    border: 1px solid #eceef3;
    border-radius: 10px;

    background: #fff;
}


.marketing-metrics small {
    display: block;

    margin-bottom: 6px;

    color: #9aa0ad;

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

    letter-spacing: .07em;
}


.marketing-metrics strong {
    display: block;

    margin: 0;

    color: #151827;

    font-size: 12px;
    line-height: 1.3;
}


/* RESULTADOS */

.marketing-results {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px 12px;

    margin-bottom: 25px;
}


.marketing-results span {
    color: #525969;

    font-size: 10px;
    font-weight: 700;
}


.marketing-results span::first-letter {
    color: #ef0b73;
}


/* GRÁFICO DECORATIVO */

.marketing-chart {
    height: 55px;

    display: flex;
    align-items: flex-end;
    gap: 7px;

    padding: 0 4px;

    border-bottom: 1px solid #eceef3;
}


.marketing-chart i {
    flex: 1;

    display: block;

    border-radius: 5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #ef0b73,
            #ff6b1a
        );
}


.marketing-chart i:nth-child(1) { height: 22%; }
.marketing-chart i:nth-child(2) { height: 35%; }
.marketing-chart i:nth-child(3) { height: 31%; }
.marketing-chart i:nth-child(4) { height: 53%; }
.marketing-chart i:nth-child(5) { height: 70%; }
.marketing-chart i:nth-child(6) { height: 92%; }


/* META - VARIACIÓN VISUAL */

.meta-chart i {
    background:
        linear-gradient(
            180deg,
            #7b5cff,
            #ef0b73
        );
}


/* HOVER */

.marketing-card {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.marketing-card:hover {
    transform: translateY(-5px);

    border-color: rgba(239,11,115,.22);

    box-shadow:
        0 25px 60px rgba(16,24,40,.11);
}


/* TABLET / MÓVIL */

@media (max-width: 760px) {

    .ad-panels {
        grid-template-columns: 1fr;
    }

    .marketing-card {
        min-height: auto;
    }

}


@media (max-width: 480px) {

    .marketing-card {
        padding: 22px;
    }

    .marketing-metrics {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   INTELIGENCIA ARTIFICIAL - WEBSTUDIO1320
===================================================== */

.ai-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 24% 50%,
            rgba(132, 26, 211, .24),
            transparent 34%
        ),
        radial-gradient(
            circle at 78% 45%,
            rgba(239, 11, 115, .08),
            transparent 32%
        ),
        linear-gradient(
            105deg,
            #080b18 0%,
            #120a25 48%,
            #17091e 100%
        );

    color: #fff;
}


/* =========================
   IMAGEN HUMANOIDE
========================= */

.ai-human-art {
    position: relative;

    min-height: 500px;

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

    overflow: hidden;
}


/* RESPLANDOR DETRÁS */

.ai-image-glow {
    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: rgba(181, 26, 255, .28);

    filter: blur(100px);

    pointer-events: none;
}


/* IMAGEN */

.ws-ai-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    max-width: 570px;

    border-radius: 26px;

    object-fit: cover;

    box-shadow:
        0 35px 80px rgba(0, 0, 0, .35);

    /* FUSIÓN VISUAL CON EL FONDO */
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 8%,
            black 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 8%,
            black 88%,
            transparent 100%
        );
}


/* =========================
   CONTENIDO
========================= */

.ai-content {
    position: relative;
    z-index: 3;
}


.ai-content > p {
    max-width: 620px;

    color: #d0d2dc;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================
   TARJETAS
========================= */

.ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 27px;
}


.ai-grid > div {
    padding: 19px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;

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

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


.ai-grid > div:hover {
    transform: translateY(-3px);

    border-color: rgba(239,11,115,.45);

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


.ai-grid b {
    display: block;

    margin-bottom: 6px;

    color: #fff;

    font-size: 15px;
}


.ai-grid small {
    display: block;

    color: #aeb3c1;

    font-size: 12px;
}


/* =========================
   BOTÓN
========================= */

.ai-button {
    margin-top: 27px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px) {

    .ai-human-art {
        min-height: auto;
    }

    .ws-ai-image {
        width: min(100%, 600px);
    }

}


@media (max-width: 620px) {

    .ai-human-art {
        margin-bottom: 20px;
    }

    .ws-ai-image {
        max-width: 100%;

        border-radius: 18px;
    }

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

    .ai-button {
        width: 100%;
    }

}

/* =========================================
   SOBRE MÍ - TÍTULO PROFESIONAL
========================================= */

.degree-card{
    width:100%;
    max-width:470px;
    margin:auto;
}

.degree-link{
    display:block;
    background:#fff;
    padding:10px;
    border-radius:14px;
    border:1px solid #e4e7ec;
    box-shadow:0 20px 55px rgba(16,24,40,.14);
    transition:transform .3s ease, box-shadow .3s ease;
    overflow:hidden;
}

.degree-link:hover{
    transform:translateY(-5px);
    box-shadow:0 28px 70px rgba(16,24,40,.20);
}

.degree-image{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius:8px;
}

.degree-caption{
    text-align:center;
    padding:18px 10px 5px;
}

.degree-caption strong{
    display:block;
    font-size:18px;
    color:#111421;
    margin-bottom:5px;
}

.degree-caption span{
    display:block;
    font-size:13px;
    color:#ed0b72;
    font-weight:800;
}

.degree-caption small{
    display:block;
    margin-top:6px;
    font-size:11px;
    color:#8b91a0;
}

.about-content > p{
    color:#475467;
    line-height:1.75;
    font-size:15px;
}

/* RESPONSIVE */

@media(max-width:980px){

    .degree-card{
        max-width:420px;
        margin:0 auto 30px;
    }

}

@media(max-width:620px){

    .degree-card{
        max-width:340px;
    }

    .degree-link{
        padding:7px;
    }

    .degree-caption strong{
        font-size:16px;
    }

}

/* Ajuste final sección Sobre mí */

#sobre-mi{
    padding-top:70px;
}

.degree-caption{
    padding-top:14px;
}

.degree-card{
    align-self:center;
}

/* =====================================
   BOTONES FLOTANTES WEBSTUDIO1320
===================================== */

.floating-contact {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.floating-btn {
    width: 62px;
    height: 62px;
    border-radius: 50%;

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

    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,.25);

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

.floating-btn svg {
    width: 29px;
    height: 29px;
    fill: #fff;
}


/* LLAMADA */

.floating-call {
    background: linear-gradient(135deg, #ff006e, #ff641e);
}

.floating-call:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 12px 30px rgba(255, 0, 110, .35);
}


/* WHATSAPP */

.floating-whatsapp {
    background: #25D366;
}

.floating-whatsapp:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 12px 30px rgba(37, 211, 102, .40);
}


/* LOGO FOOTER */

.footer-logo {
    width: 190px;
    height: auto;
    display: block;
    margin-bottom: 25px;
}


/* MÓVILES */

@media (max-width: 768px) {

    .floating-contact {
        right: 16px;
        bottom: 18px;
        gap: 10px;
    }

    .floating-btn {
        width: 54px;
        height: 54px;
    }

    .floating-btn svg {
        width: 25px;
        height: 25px;
    }

    .footer-logo {
        width: 165px;
    }
}

/* ==============================
   ICONOS CONTACTO DEL FOOTER
============================== */

.footer-contact a,
.footer-contact .footer-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-contact-icon {
    width: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
}

/* Teléfono */
.phone-icon {
    color: #ff1678;
}

/* WhatsApp */
.whatsapp-icon svg {
    width: 21px;
    height: 21px;
    fill: #25D366;
    display: block;
}

/* Ubicación */
.location-icon {
    color: #ff641e;
    font-size: 14px;
}

.footer-contact a:hover {
    color: #ffffff;
}

/* ARREGLO ICONOS FOOTER */

.footer-wa-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    border-radius: 50% !important;
    background: #25D366;
    color: #fff;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

.footer-pin {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff0a78, #ff641e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.footer-contact a,
.footer-contact .footer-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* =========================================
   ICONOS CONTACTO - FOOTER
========================================= */

.footer-contact {
    display: flex;
    flex-direction: column;
}

.footer-contact h4 {
    margin-bottom: 22px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    color: #aeb3c2;
    text-decoration: none;
    transition: 0.25s ease;
}

a.footer-contact-item:hover {
    color: #ffffff;
    transform: translateX(3px);
}


/* Círculo general */

.footer-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;

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

    color: #ffffff;
    font-size: 15px;

    box-shadow: 0 5px 15px rgba(0,0,0,.25);
}


/* TELÉFONO */

.phone-icon {
    background: linear-gradient(135deg, #ff006e, #ff5a36);
}


/* WHATSAPP */

.whatsapp-icon {
    background: #25D366;
}

.whatsapp-icon i {
    font-size: 18px;
}


/* UBICACIÓN */

.location-icon {
    background: linear-gradient(135deg, #ff006e, #ff6a21);
}


/* Efecto al pasar el mouse */

.footer-contact-item:hover .footer-icon {
    transform: scale(1.08);
}

.footer-icon {
    transition: transform .25s ease;
}

/* CORRECCIÓN CONTACTO FOOTER */
.footer-contact .footer-contact-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100%;
    margin-bottom: 14px;
}

.footer-contact .footer-contact-item span:last-child {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-contact .footer-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

.footer-contact .location-icon + span {
    white-space: nowrap;
}

/* ==================================================
   RESPONSIVE REAL PARA SMARTPHONE
   No modifica escritorio
================================================== */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* CONTENEDORES */
    .container,
    .ws-container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px !important;
        padding-right: 18px !important;
        margin-left: auto;
        margin-right: auto;
    }


    /* =========================
       HEADER
    ========================= */

    header {
        width: 100%;
    }

    header .container {
        min-height: 72px;
    }

    header .logo img,
    .logo img {
        max-width: 185px;
        height: auto;
    }


    /* =========================
       HERO
    ========================= */

    .ws-hero {
        padding-top: 25px;
        padding-bottom: 35px;
    }

    .ws-hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        width: 100%;
    }

    .ws-hero-grid > * {
        min-width: 0;
        width: 100%;
    }


    /* TEXTOS HERO */

    .ws-hero h1 {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.05 !important;
        letter-spacing: -1px;
    }

    .ws-hero p {
        font-size: 15px;
        line-height: 1.6;
    }


    /* =========================
       TARJETAS SERVICIOS HERO
    ========================= */

    .ws-services-grid,
    .ws-hero-services {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .ws-service-card {
        min-width: 0;
        padding: 14px !important;
    }

    .ws-service-card h3 {
        font-size: 14px !important;
    }

    .ws-service-card p {
        font-size: 11px !important;
        line-height: 1.4;
    }


    /* =========================
       BOTONES
    ========================= */

    .ws-hero .btn,
    .ws-hero a.btn {
        width: 100%;
        min-height: 48px;
        padding: 13px 15px;
        font-size: 13px;
        text-align: center;
        justify-content: center;
    }


    /* =========================
       IMAGEN HERO
    ========================= */

    .ws-hero img {
        max-width: 100%;
        height: auto;
    }

    .ws-hero-image,
    .ws-hero-visual {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .ws-hero-image img,
    .ws-hero-visual img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }


    /* =========================
       SECCIONES GENERALES
    ========================= */

    .section {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .section-head h2 {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.1;
    }


    /* =========================
       COLUMNAS A UNA SOLA
    ========================= */

    .split,
    .about-grid,
    .contact-grid,
    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }


    /* =========================
       IMÁGENES
    ========================= */

    img {
        max-width: 100%;
    }


    /* =========================
       BOTONES FLOTANTES
    ========================= */

    .floating-call,
    .floating-wa {
        width: 50px !important;
        height: 50px !important;
        right: 15px !important;
    }

    .floating-call {
        bottom: 78px !important;
    }

    .floating-wa {
        bottom: 18px !important;
    }
/* ==================================================
   FOOTER WEBSTUDIO1320
================================================== */

.site-footer {
    background: #050713;
    color: #aeb2c1;
    padding: 70px 0 0;
}


/* ==================================================
   5 COLUMNAS
================================================== */

.footer-grid {
    display: grid;
    grid-template-columns:
        1.35fr
        0.85fr
        0.85fr
        1fr
        1.25fr;

    gap: 50px;
    align-items: start;
}


/* ==================================================
   COLUMNAS
================================================== */

.footer-column {
    min-width: 0;
}

.footer-column h4 {
    position: relative;

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;

    margin: 0 0 35px;
    padding-bottom: 14px;
}


/* RAYITA ROSADA DEBAJO DEL TITULO */

.footer-column h4::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 42px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #ff006e,
        #ff5a36
    );
}


/* ==================================================
   LOGO / SOBRE NOSOTROS
================================================== */

.footer-logo {
    display: block;

    width: 190px;
    max-width: 100%;
    height: auto;

    margin-bottom: 25px;
}


.footer-about p {
    max-width: 270px;

    margin: 0;

    color: #aeb2c1;

    font-size: 14px;
    line-height: 1.8;
}


/* ==================================================
   REDES SOCIALES
================================================== */

.footer-social-column {
    display: flex;
    flex-direction: column;
}


.footer-social-link {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    color: #b9bdca;
    text-decoration: none;

    font-size: 15px;

    transition: 0.25s ease;
}


.footer-social-link:hover {
    color: #ffffff;
    transform: translateX(3px);
}


/* CIRCULOS */

.social-circle {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 50%;

    color: #ffffff;
    font-size: 20px;
}


/* FACEBOOK */

.social-circle.facebook {
    background: #1877f2;
}


/* INSTAGRAM */

.social-circle.instagram {
    background: linear-gradient(
        45deg,
        #feda75 0%,
        #fa7e1e 25%,
        #d62976 50%,
        #962fbf 75%,
        #4f5bd5 100%
    );
}


/* ==================================================
   ENLACES Y SERVICIOS
================================================== */

.footer-link {
    display: flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-bottom: 15px;

    color: #aeb2c1;
    text-decoration: none;

    font-size: 14px;

    transition: 0.25s ease;
}


.footer-link i {
    color: #ff176b;

    font-size: 10px;

    transition: 0.25s ease;
}


.footer-link:hover {
    color: #ffffff;
    transform: translateX(4px);
}


/* ==================================================
   CONTACTO
================================================== */

.footer-contact-item {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 18px;

    color: #aeb2c1;
    text-decoration: none;

    font-size: 14px;

    line-height: 1.4;
}


a.footer-contact-item {
    transition: 0.25s ease;
}


a.footer-contact-item:hover {
    color: #ffffff;
    transform: translateX(3px);
}


/* ICONOS CONTACTO */

.footer-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 50%;

    color: #ffffff;
    font-size: 17px;
}


/* TELEFONO */

.phone-icon {
    background: linear-gradient(
        135deg,
        #ff006e,
        #ff5733
    );
}


/* WHATSAPP */

.whatsapp-icon {
    background: #16d66b;
}


/* UBICACION */

.location-icon {
    background: linear-gradient(
        135deg,
        #ff006e,
        #ff6238
    );
}


/* EMAIL */

.email-icon {
    background: linear-gradient(
        135deg,
        #3578ff,
        #712cff
    );
}


/* ==================================================
   COPYRIGHT
================================================== */

.copyright {
    width: 100%;

    margin-top: 60px;
    padding: 24px 15px;

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

    text-align: center;

    color: #969baa;

    font-size: 14px;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 45px 35px;
    }

}


/* ==================================================
   MOVIL
================================================== */

@media (max-width: 768px) {

    .site-footer {
        padding-top: 50px;
    }


    .footer-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }


    .footer-column h4 {
        margin-bottom: 25px;
    }


    .footer-logo {
        width: 170px;
    }


    .footer-about p {
        max-width: 100%;
    }


    .footer-social-link {
        margin-bottom: 15px;
    }


    .social-circle {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .footer-contact-item {
        margin-bottom: 15px;
    }


    .copyright {
        margin-top: 45px;
        padding: 22px 10px;

        font-size: 13px;
    }

}

/* ==========================================================
   CORRECCION FINAL FOOTER - 5 COLUMNAS
   PEGAR AL FINAL DEL CSS
========================================================== */

.site-footer .footer-grid {
    display: grid !important;

    /* 5 COLUMNAS REALES */
    grid-template-columns:
        1.45fr
        0.75fr
        0.80fr
        1fr
        1.20fr !important;

    gap: 45px !important;

    align-items: start !important;

    width: 100% !important;
}


/* TODAS LAS COLUMNAS EN SU SITIO */

.site-footer .footer-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* CONTACTO NO PUEDE SALTAR ABAJO */

.site-footer .footer-contact {
    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   TITULOS
========================================================== */

.site-footer .footer-column h4 {
    margin: 0 0 28px !important;

    color: #fff !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    text-transform: uppercase;
}


/* ==========================================================
   REDES SOCIALES
========================================================== */

.site-footer .footer-social-column {
    display: block !important;
}


.site-footer .footer-social-link {
    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    width: 100% !important;

    margin: 0 0 20px !important;

    color: #b9bdca !important;

    text-decoration: none !important;

    font-size: 14px !important;
}


/* CIRCULO FACEBOOK / INSTAGRAM */

.site-footer .footer-social-link .social-circle {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    max-width: 42px !important;

    flex: 0 0 42px !important;

    display: flex !important;

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

    border-radius: 50% !important;

    color: white !important;

    font-size: 19px !important;
}


/* FACEBOOK */

.site-footer .footer-social-link .facebook {
    background: #1877f2 !important;
}


/* INSTAGRAM */

.site-footer .footer-social-link .instagram {
    background: linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    ) !important;
}


/* ==========================================================
   LOGO
========================================================== */

.site-footer .footer-logo {
    display: block !important;

    width: 190px !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 0 28px !important;
}


.site-footer .footer-about p {
    max-width: 300px !important;

    margin: 0 !important;

    line-height: 1.7 !important;
}


/* ==========================================================
   ENLACES
========================================================== */

.site-footer .footer-link {
    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin: 0 0 13px !important;

    width: fit-content !important;
}


/* ==========================================================
   CONTACTO
========================================================== */

.site-footer .footer-contact-item {
    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    width: 100% !important;

    margin: 0 0 18px !important;
}


.site-footer .footer-icon {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;

    flex: 0 0 42px !important;

    display: flex !important;

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

    border-radius: 50% !important;
}


/* ==========================================================
   COPYRIGHT
========================================================== */

.site-footer .copyright {
    width: 100% !important;

    margin-top: 55px !important;

    padding: 24px 15px !important;

    text-align: center !important;

    border-top: 1px solid rgba(255,255,255,0.12) !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .site-footer .footer-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 768px) {

    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;

        gap: 40px !important;
    }


    .site-footer .footer-contact {
        grid-column: auto !important;
        grid-row: auto !important;
    }


    .site-footer .footer-logo {
        width: 170px !important;
    }

}


/* ==========================================================
   WEBSTUDIO1320.CL — FOOTER DEFINITIVO
   Este bloque debe permanecer al FINAL del archivo.
   Neutraliza las reglas antiguas del footer sin afectar
   header, hero, servicios, portfolio, sobre mí ni formularios.
========================================================== */

.site-footer {
    background: #050713 !important;
    color: #aeb2c1 !important;
    padding: 70px 0 0 !important;
}

.site-footer > .container,
.site-footer > .ws-container,
.site-footer .footer-grid.container {
    width: min(1500px, 92%) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(220px,1.45fr) minmax(125px,.75fr) minmax(150px,.85fr) minmax(155px,1fr) minmax(245px,1.3fr) !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
}

.site-footer .footer-grid > .footer-column,
.site-footer .footer-grid > div {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.site-footer .footer-column h4 {
    position: relative !important;
    display: block !important;
    margin: 0 0 28px !important;
    padding: 0 0 14px !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.site-footer .footer-column h4::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 42px !important;
    height: 2px !important;
    background: linear-gradient(90deg,#ff006e,#ff5a36) !important;
}

.site-footer .footer-logo {
    display: block !important;
    width: 190px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 25px !important;
}

.site-footer .footer-about p {
    display: block !important;
    max-width: 285px !important;
    margin: 0 !important;
    color: #aeb2c1 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

.site-footer .footer-social-column {
    display: block !important;
}

.site-footer .footer-social-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: fit-content !important;
    margin: 0 0 18px !important;
    color: #b9bdca !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.site-footer .footer-social-link .social-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1 !important;
    overflow: hidden !important;
}

.site-footer .footer-social-link .social-circle.facebook,
.site-footer .footer-social-link .facebook.social-circle {
    background: #1877f2 !important;
}

.site-footer .footer-social-link .social-circle.instagram,
.site-footer .footer-social-link .instagram.social-circle {
    background: linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 100%) !important;
}

.site-footer .footer-social-link .social-circle i,
.site-footer .footer-social-link .social-circle svg {
    display: block !important;
    color: #fff !important;
    fill: currentColor !important;
    width: 19px !important;
    height: 19px !important;
    font-size: 19px !important;
    line-height: 1 !important;
}

.site-footer .footer-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: fit-content !important;
    margin: 0 0 14px !important;
    color: #aeb2c1 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.site-footer .footer-link i {
    flex: 0 0 auto !important;
    color: #ff176b !important;
    font-size: 10px !important;
}

.site-footer .footer-contact {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer .footer-contact .footer-contact-item,
.site-footer a.footer-contact-item,
.site-footer .footer-contact-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #aeb2c1 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.site-footer .footer-contact .footer-icon,
.site-footer .footer-contact-item .footer-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.site-footer .footer-contact .phone-icon,
.site-footer .footer-contact-item .phone-icon {
    background: linear-gradient(135deg,#ff006e,#ff5733) !important;
}

.site-footer .footer-contact .whatsapp-icon,
.site-footer .footer-contact-item .whatsapp-icon {
    background: #25d366 !important;
}

.site-footer .footer-contact .location-icon,
.site-footer .footer-contact-item .location-icon {
    background: linear-gradient(135deg,#ff006e,#ff6238) !important;
}

.site-footer .footer-contact .email-icon,
.site-footer .footer-contact-item .email-icon {
    background: linear-gradient(135deg,#3578ff,#712cff) !important;
}

.site-footer .footer-contact .footer-icon i,
.site-footer .footer-contact .footer-icon svg,
.site-footer .footer-contact-item .footer-icon i,
.site-footer .footer-contact-item .footer-icon svg {
    display: block !important;
    color: #fff !important;
    fill: currentColor !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.site-footer .footer-contact-item span:last-child {
    display: inline-block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
}

.site-footer .copyright {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 55px 0 0 !important;
    padding: 24px 15px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    color: #969baa !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* Portátiles y tablets grandes: 3 columnas, sin deformar */
@media (max-width: 1180px) {
    .site-footer .footer-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 42px 34px !important;
    }
}

/* Tablet */
@media (max-width: 850px) {
    .site-footer .footer-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 40px 32px !important;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .site-footer {
        padding-top: 50px !important;
    }

    .site-footer > .container,
    .site-footer > .ws-container,
    .site-footer .footer-grid.container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    .site-footer .footer-logo {
        width: 170px !important;
    }

    .site-footer .footer-about p {
        max-width: 100% !important;
    }

    .site-footer .copyright {
        margin-top: 42px !important;
        padding: 22px 18px !important;
        font-size: 13px !important;
    }
}