:root{
    --bg:#f3efe7;
    --paper:#fffaf1;
    --ink:#151515;
    --muted:#6d675e;
    --orange:#ff6b35;
    --blue:#2057ff;
    --green:#1d9a75;
    --purple:#6d3cff;
    --yellow:#ffc857;
    --border:rgba(20,20,20,.12);
    --shadow:0 24px 70px rgba(20,20,20,.14);
    --radius:28px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:
        linear-gradient(135deg, rgba(255,107,53,.12), transparent 28%),
        linear-gradient(225deg, rgba(32,87,255,.10), transparent 30%),
        var(--bg);
    color:var(--ink);
    overflow-x:hidden;
}

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

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

.app-loader{
    position:fixed;
    inset:0;
    background:var(--ink);
    color:var(--paper);
    z-index:9999;
    display:grid;
    place-items:center;
    transition:.7s ease;
}

.app-loader.hide{
    opacity:0;
    pointer-events:none;
}

.loader-card{
    border:1px solid rgba(255,255,255,.25);
    padding:34px;
    border-radius:30px;
    text-align:center;
    transform:rotate(-2deg);
}

.loader-card span{
    display:block;
    font-size:13px;
    letter-spacing:4px;
    margin-bottom:14px;
    color:var(--yellow);
}

.loader-card strong{
    font-size:26px;
}

.app-header{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 36px);
    max-width:1280px;
    z-index:1000;
    background:rgba(255,250,241,.82);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:26px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 18px 50px rgba(20,20,20,.08);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-mark{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    background:var(--ink);
    color:var(--paper);
    border-radius:18px;
    font-weight:900;
}

.brand-text{
    font-weight:900;
    line-height:.9;
    text-transform:uppercase;
    font-size:14px;
}

.app-nav{
    display:flex;
    align-items:center;
    gap:6px;
}

.app-nav a{
    padding:13px 16px;
    border-radius:16px;
    color:var(--muted);
    font-weight:700;
    transition:.25s ease;
}

.app-nav a:hover{
    background:var(--ink);
    color:var(--paper);
}

.menu-toggle{
    display:none;
    width:48px;
    height:48px;
    border:0;
    background:var(--ink);
    color:white;
    border-radius:16px;
}

.section-screen{
    min-height:100vh;
    padding:150px 7vw 80px;
}

.section-block{
    padding:110px 7vw;
}

.hero{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;
    align-items:center;
    overflow:hidden;
}

.hero-bg-shape{
    position:absolute;
    border-radius:42px;
    z-index:-1;
}

.shape-one{
    width:280px;
    height:280px;
    background:var(--yellow);
    top:18%;
    right:7%;
    transform:rotate(18deg);
}

.shape-two{
    width:220px;
    height:220px;
    background:var(--orange);
    bottom:10%;
    left:4%;
    transform:rotate(-10deg);
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:900;
    font-size:12px;
    color:var(--blue);
    margin-bottom:18px;
}

h1{
    font-size:clamp(50px, 8vw, 118px);
    line-height:.86;
    letter-spacing:-6px;
    max-width:900px;
}

h1 span{
    display:block;
    color:var(--orange);
}

.hero-copy{
    max-width:650px;
    color:var(--muted);
    font-size:21px;
    line-height:1.6;
    margin:30px 0;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    padding:16px 22px;
    border:1px solid var(--ink);
    font-weight:900;
    cursor:pointer;
    transition:.25s ease;
}

.btn.primary{
    background:var(--ink);
    color:var(--paper);
}

.btn.secondary{
    background:var(--paper);
    color:var(--ink);
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(20,20,20,.16);
}

.full{
    width:100%;
}

.hero-dashboard{
    background:rgba(255,250,241,.9);
    border:1px solid var(--border);
    border-radius:38px;
    padding:18px;
    box-shadow:var(--shadow);
    transform:rotate(2deg);
}

.dash-top{
    height:44px;
    background:var(--ink);
    border-radius:24px 24px 12px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 18px;
}

.dash-top span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--paper);
}

.creative-card{
    margin-top:18px;
    min-height:360px;
    border-radius:30px;
    padding:34px;
    color:white;
    background:
        linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.05)),
        repeating-linear-gradient(45deg, var(--blue) 0 26px, var(--purple) 26px 52px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.creative-card small{
    text-transform:uppercase;
    letter-spacing:2px;
    opacity:.8;
}

.creative-card h3{
    font-size:44px;
    line-height:.95;
    margin:12px 0;
}

.creative-card p{
    max-width:420px;
    line-height:1.6;
}

.mini-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:14px;
}

.mini-grid div{
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px 10px;
    text-align:center;
    font-weight:900;
}

.section-title{
    max-width:850px;
    margin-bottom:44px;
}

.section-title h2{
    font-size:clamp(36px,5vw,72px);
    line-height:.95;
    letter-spacing:-3px;
}

.about-grid,
.service-grid,
.tools-grid,
.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.panel,
.service-card,
.tool-panel,
.testimonial,
.step{
    background:rgba(255,250,241,.82);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    box-shadow:0 18px 45px rgba(20,20,20,.07);
}

.panel h3,
.service-card h3,
.tool-panel h3{
    font-size:28px;
    margin-bottom:14px;
}

.panel p,
.service-card p,
.testimonial p,
.step p{
    color:var(--muted);
    line-height:1.6;
}

.service-card{
    min-height:260px;
    transition:.25s ease;
}

.service-card:hover{
    transform:translateY(-8px) rotate(-1deg);
    background:var(--ink);
    color:var(--paper);
}

.service-card:hover p{
    color:rgba(255,250,241,.75);
}

.service-card span{
    display:inline-grid;
    place-items:center;
    width:54px;
    height:54px;
    border-radius:18px;
    background:var(--yellow);
    color:var(--ink);
    font-weight:900;
    margin-bottom:44px;
}

.filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:26px;
}

.filter-btn{
    border:1px solid var(--border);
    background:var(--paper);
    padding:14px 18px;
    border-radius:999px;
    cursor:pointer;
    font-weight:900;
}

.filter-btn.active{
    background:var(--ink);
    color:var(--paper);
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.project-card{
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:34px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.project-card:hover{
    transform:translateY(-8px);
}

.project-art{
    min-height:310px;
}

.art-one{
    background:
        radial-gradient(circle at 20% 20%, var(--yellow), transparent 28%),
        linear-gradient(135deg, var(--orange), var(--blue));
}

.art-two{
    background:
        linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px),
        linear-gradient(135deg, var(--green), var(--yellow));
    background-size:32px 32px, auto;
}

.art-three{
    background:
        repeating-linear-gradient(90deg, var(--ink) 0 20px, var(--paper) 20px 40px);
}

.art-four{
    background:
        radial-gradient(circle at 60% 30%, var(--purple), transparent 30%),
        linear-gradient(135deg, var(--yellow), var(--orange));
}

.project-info{
    padding:28px;
}

.project-info small{
    color:var(--muted);
    font-weight:900;
}

.project-info h3{
    font-size:34px;
    margin:8px 0;
}

.project-info p{
    color:var(--muted);
    line-height:1.5;
}

.open-project{
    margin-top:20px;
    border:0;
    background:var(--ink);
    color:var(--paper);
    padding:14px 18px;
    border-radius:16px;
    font-weight:900;
    cursor:pointer;
}

.tool-panel{
    display:flex;
    flex-direction:column;
    gap:14px;
}

input,
select,
textarea{
    width:100%;
    border:1px solid var(--border);
    background:white;
    border-radius:18px;
    padding:16px;
    outline:none;
}

textarea{
    min-height:130px;
    resize:vertical;
}

.estimate{
    background:var(--yellow);
    color:var(--ink);
    padding:18px;
    border-radius:18px;
    font-weight:900;
    font-size:22px;
}

.check-item{
    display:flex;
    gap:12px;
    align-items:center;
    background:white;
    border:1px solid var(--border);
    border-radius:18px;
    padding:14px;
    cursor:pointer;
}

.check-item input{
    width:auto;
}

.timeline{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.step span{
    display:block;
    color:var(--orange);
    font-weight:900;
    margin-bottom:40px;
}

.step h3{
    margin-bottom:10px;
}

.testimonial p{
    font-size:22px;
    margin-bottom:20px;
}

.contact{
    display:grid;
    place-items:center;
    background:
        linear-gradient(135deg, rgba(32,87,255,.18), transparent),
        var(--ink);
    color:var(--paper);
}

.contact-card{
    width:min(760px,100%);
    background:rgba(255,250,241,.08);
    border:1px solid rgba(255,255,255,.18);
    border-radius:38px;
    padding:42px;
    backdrop-filter:blur(16px);
}

.contact-card h2{
    font-size:clamp(40px,6vw,78px);
    line-height:.95;
    letter-spacing:-3px;
    margin-bottom:20px;
}

.contact-card p{
    color:rgba(255,250,241,.75);
    line-height:1.6;
    margin-bottom:24px;
}

.contact-card form{
    display:grid;
    gap:14px;
}

.contact-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
}

.contact-actions a{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    padding:13px 16px;
    border-radius:16px;
    font-weight:900;
}

.project-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    place-items:center;
    z-index:2000;
    padding:20px;
}

.project-modal.show{
    display:grid;
}

.modal-box{
    width:min(620px,100%);
    background:var(--paper);
    border-radius:34px;
    padding:36px;
    position:relative;
    box-shadow:var(--shadow);
}

.modal-box small{
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:900;
}

.modal-box h3{
    font-size:44px;
    margin:10px 0;
}

.modal-box p{
    color:var(--muted);
    line-height:1.7;
}

.close-modal{
    position:absolute;
    right:18px;
    top:18px;
    width:44px;
    height:44px;
    border:0;
    border-radius:16px;
    background:var(--ink);
    color:var(--paper);
    font-size:26px;
    cursor:pointer;
}

.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:.75s ease;
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

.delay{
    transition-delay:.18s;
}

@media(max-width:980px){
    .hero,
    .about-grid,
    .service-grid,
    .tools-grid,
    .portfolio-grid,
    .testimonial-grid,
    .timeline{
        grid-template-columns:1fr;
    }

    .timeline{
        gap:14px;
    }

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

    h1{
        letter-spacing:-3px;
    }

    .section-screen{
        padding-top:130px;
    }

    .app-nav{
        display:none;
        position:absolute;
        left:12px;
        right:12px;
        top:82px;
        background:var(--paper);
        border:1px solid var(--border);
        border-radius:22px;
        padding:12px;
        flex-direction:column;
        align-items:stretch;
    }

    .app-nav.open{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }
}

@media(max-width:560px){
    .app-header{
        top:10px;
        width:calc(100% - 20px);
    }

    .section-screen,
    .section-block{
        padding-left:20px;
        padding-right:20px;
    }

    .section-title h2{
        letter-spacing:-2px;
    }

    .hero-dashboard{
        transform:none;
    }

    .creative-card{
        min-height:280px;
    }

    .creative-card h3{
        font-size:34px;
    }

    .contact-card{
        padding:26px;
    }
}

/* ===== HERO SAFE SLIDER - NO ROMPE ESTRUCTURA ===== */

.hero{
    transition:background .55s ease;
}

.hero.hero-theme-1{
    background:
        radial-gradient(circle at 14% 78%, rgba(255,107,53,.22), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(255,200,87,.30), transparent 28%);
}

.hero.hero-theme-2{
    background:
        radial-gradient(circle at 15% 26%, rgba(32,87,255,.20), transparent 30%),
        radial-gradient(circle at 84% 74%, rgba(109,60,255,.16), transparent 28%);
}

.hero.hero-theme-3{
    background:
        radial-gradient(circle at 16% 75%, rgba(29,154,117,.22), transparent 30%),
        radial-gradient(circle at 86% 22%, rgba(255,200,87,.22), transparent 28%);
}

.hero.hero-theme-4{
    background:
        radial-gradient(circle at 16% 22%, rgba(109,60,255,.20), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(255,107,53,.18), transparent 30%);
}

.hero.is-changing .hero-content,
.hero.is-changing .hero-dashboard{
    opacity:0;
    transform:translateY(18px) scale(.985);
}

.hero .hero-content,
.hero .hero-dashboard{
    transition:opacity .35s ease, transform .35s ease;
}

.hero-safe-controls{
    position:absolute;
    left:7vw;
    right:7vw;
    bottom:28px;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.hero-safe-controls button{
    border:1px solid var(--border);
    background:rgba(255,250,241,.88);
    color:var(--ink);
    backdrop-filter:blur(14px);
    border-radius:18px;
    font-weight:900;
    cursor:pointer;
    transition:.25s ease;
}

#heroSafePrev,
#heroSafeNext{
    width:56px;
    height:56px;
    font-size:24px;
}

.hero-safe-dots{
    display:flex;
    gap:8px;
    padding:8px;
    border-radius:22px;
    border:1px solid var(--border);
    background:rgba(255,250,241,.88);
    backdrop-filter:blur(14px);
}

.hero-safe-dots button{
    padding:12px 15px;
}

.hero-safe-dots button.active,
.hero-safe-controls button:hover{
    background:var(--ink);
    color:var(--paper);
}

.hero-dashboard::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-28px;
    top:-28px;
    border-radius:34px;
    background:var(--yellow);
    z-index:-1;
    opacity:.7;
    transform:rotate(14deg);
    animation:heroArtFloat 6s ease-in-out infinite;
}

.hero-dashboard{
    position:relative;
}

.hero-dashboard::before{
    content:"";
    position:absolute;
    width:180px;
    height:18px;
    left:-36px;
    bottom:42px;
    border-radius:999px;
    background:var(--ink);
    opacity:.12;
    transform:rotate(-10deg);
    animation:heroArtFloat 7s ease-in-out infinite reverse;
}

@keyframes heroArtFloat{
    0%,100%{translate:0 0;}
    50%{translate:0 -18px;}
}

@media(max-width:980px){
    .hero{
        padding-bottom:130px;
    }

    .hero-safe-controls{
        bottom:24px;
    }
}

@media(max-width:560px){
    .hero-safe-controls{
        left:20px;
        right:20px;
    }

    .hero-safe-dots button{
        padding:10px 11px;
        font-size:12px;
    }

    #heroSafePrev,
    #heroSafeNext{
        width:48px;
        height:48px;
    }
}

/* ===== HERO MISMA ALTURA + FOTOS REALES ===== */

.hero{
    min-height:100vh;
    align-items:center;
    padding-top:150px;
    padding-bottom:120px;
}

.hero-content{
    min-height:520px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hero-dashboard{
    min-height:520px;
    display:flex;
    flex-direction:column;
}

.hero-dashboard .creative-card{
    height:390px;
    min-height:390px;
    overflow:hidden;
    position:relative;
    isolation:isolate;
    background-size:cover !important;
    background-position:center !important;
}

.hero-dashboard .creative-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(135deg, rgba(0,0,0,.68), rgba(0,0,0,.18)),
        linear-gradient(0deg, rgba(0,0,0,.42), transparent 55%);
}

.hero-dashboard .creative-card::after{
    content:"";
    position:absolute;
    inset:18px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    pointer-events:none;
}

.hero-dashboard .creative-card small,
.hero-dashboard .creative-card h3,
.hero-dashboard .creative-card p{
    position:relative;
    z-index:2;
    text-shadow:0 12px 30px rgba(0,0,0,.38);
}

.hero-dashboard .creative-card small{
    color:rgba(255,255,255,.76);
}

.hero-photo-branding{
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.08)),
        url("https://images.unsplash.com/photo-1542744094-24638eff58bb?auto=format&fit=crop&w=1400&q=80") !important;
}

.hero-photo-campaign{
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.08)),
        url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1400&q=80") !important;
}

.hero-photo-editorial{
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.08)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1400&q=80") !important;
}

.hero-photo-product{
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.08)),
        url("https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=1400&q=80") !important;
}

.hero .mini-grid{
    margin-top:14px;
    flex:1;
    align-content:start;
}

.hero .mini-grid div{
    min-height:58px;
    display:grid;
    place-items:center;
}

@media(max-width:980px){
    .hero-content{
        min-height:auto;
    }

    .hero-dashboard{
        min-height:auto;
    }

    .hero-dashboard .creative-card{
        height:330px;
        min-height:330px;
    }
}

@media(max-width:560px){
    .hero{
        padding-bottom:125px;
    }

    .hero-dashboard .creative-card{
        height:300px;
        min-height:300px;
    }
}

/* =========================================================
   MEGA MENU PROFESIONAL
========================================================= */

.nav-mega-item{
    position:relative;
}

.nav-mega-item > a{
    display:block;
}

.mega-menu{
    position:absolute;
    top:58px;
    left:50%;
    transform:translateX(-50%) translateY(12px);
    width:min(820px, calc(100vw - 60px));
    background:rgba(255,250,241,.96);
    border:1px solid var(--border);
    border-radius:28px;
    padding:22px;
    box-shadow:var(--shadow);
    display:grid;
    grid-template-columns:1fr 1.15fr .9fr;
    gap:18px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
}

.nav-mega-item:hover .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.mega-intro,
.mega-card{
    background:white;
    border:1px solid var(--border);
    border-radius:22px;
    padding:20px;
}

.mega-intro small,
.mega-card small{
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:900;
    font-size:11px;
}

.mega-intro strong,
.mega-card strong{
    display:block;
    font-size:24px;
    line-height:1;
    margin:10px 0;
}

.mega-intro p{
    color:var(--muted);
    line-height:1.5;
}

.mega-links{
    display:grid;
    gap:10px;
}

.mega-links a{
    background:white;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:12px;
}

.mega-links a span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    background:var(--ink);
    color:var(--paper);
    border-radius:12px;
    font-size:12px;
}

.mega-card{
    background:
        linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.05)),
        linear-gradient(135deg, var(--orange), var(--purple));
    color:white;
}

.mega-card small{
    color:rgba(255,255,255,.72);
}

.mega-card a{
    display:inline-flex;
    margin-top:14px;
    background:white;
    color:var(--ink);
    border-radius:16px;
    padding:12px 14px;
    font-weight:900;
}

.portfolio-mega{
    grid-template-columns:1fr 1.4fr;
}

.mega-gallery-mini{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.mega-gallery-mini a{
    min-height:110px;
    border-radius:22px;
    padding:16px;
    display:flex;
    align-items:flex-end;
    font-weight:900;
    color:white;
    background:
        linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.05)),
        url("https://images.unsplash.com/photo-1542744094-24638eff58bb?auto=format&fit=crop&w=900&q=80");
    background-size:cover;
    background-position:center;
}

.mega-gallery-mini a:nth-child(2){
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.05)),
        url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=900&q=80");
}

.mega-gallery-mini a:nth-child(3){
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.05)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80");
}

.mega-gallery-mini a:nth-child(4){
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.05)),
        url("https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=900&q=80");
}

/* =========================================================
   SHOWCASE / GALERIAS
========================================================= */

.showcase-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    grid-auto-rows:310px;
    gap:22px;
}

.showcase-card{
    position:relative;
    border-radius:34px;
    overflow:hidden;
    padding:28px;
    display:flex;
    align-items:flex-end;
    color:white;
    box-shadow:var(--shadow);
    background-size:cover;
    background-position:center;
    isolation:isolate;
    transition:.3s ease;
}

.showcase-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.08));
}

.showcase-card:hover{
    transform:translateY(-8px) rotate(-1deg);
}

.showcase-card.large{
    grid-row:span 2;
}

.showcase-card.wide{
    grid-column:span 2;
}

.showcase-card small{
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:900;
    color:rgba(255,255,255,.72);
}

.showcase-card h3{
    font-size:38px;
    line-height:.95;
    margin:10px 0;
}

.showcase-card p{
    max-width:430px;
    line-height:1.5;
    color:rgba(255,255,255,.8);
}

.showcase-brand{
    background-image:url("https://images.unsplash.com/photo-1542744094-24638eff58bb?auto=format&fit=crop&w=1400&q=80");
}

.showcase-campaign{
    background-image:url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1200&q=80");
}

.showcase-editorial{
    background-image:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=80");
}

.showcase-product{
    background-image:url("https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=1400&q=80");
}

/* =========================================================
   CLIENT TAB
========================================================= */

.client-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.client-tab-btn{
    border:1px solid var(--border);
    background:var(--paper);
    color:var(--ink);
    border-radius:999px;
    padding:14px 18px;
    font-weight:900;
    cursor:pointer;
}

.client-tab-btn.active{
    background:var(--ink);
    color:var(--paper);
}

.client-tab-panels{
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:34px;
    padding:24px;
    box-shadow:var(--shadow);
}

.client-tab-panel{
    display:none;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:center;
    min-height:290px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,200,87,.22), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(32,87,255,.12), transparent 32%);
    border-radius:26px;
    padding:34px;
}

.client-tab-panel.active{
    display:grid;
}

.client-tab-panel small{
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--blue);
    font-weight:900;
}

.client-tab-panel h3{
    font-size:48px;
    line-height:.95;
    margin:12px 0;
}

.client-tab-panel p{
    color:var(--muted);
    line-height:1.6;
    max-width:520px;
}

.client-tab-panel ul{
    list-style:none;
    display:grid;
    gap:12px;
}

.client-tab-panel li{
    background:white;
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
    font-weight:900;
}

.client-tab-panel li::before{
    content:"✓";
    margin-right:10px;
    color:var(--green);
}

/* =========================================================
   BRAND WALL
========================================================= */

.brand-wall-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.brand-wall-grid div{
    min-height:130px;
    border-radius:26px;
    background:var(--paper);
    border:1px solid var(--border);
    display:grid;
    place-items:center;
    text-align:center;
    padding:18px;
    font-size:22px;
    font-weight:900;
    box-shadow:0 16px 35px rgba(20,20,20,.06);
    transition:.25s ease;
}

.brand-wall-grid div:hover{
    background:var(--ink);
    color:var(--paper);
    transform:translateY(-6px);
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer{
    background:var(--ink);
    color:var(--paper);
    padding:80px 7vw 30px;
    overflow:hidden;
}

.footer-top{
    display:grid;
    grid-template-columns:1.4fr .7fr .7fr .8fr;
    gap:34px;
    margin-bottom:50px;
}

.footer-brand .brand-mark{
    margin-bottom:18px;
}

.footer-brand h2{
    font-size:44px;
    line-height:.9;
    margin-bottom:18px;
}

.footer-brand p{
    color:rgba(255,250,241,.68);
    line-height:1.7;
    max-width:460px;
}

.footer-col{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-col h3{
    color:var(--yellow);
    margin-bottom:10px;
}

.footer-col a{
    color:rgba(255,250,241,.72);
    transition:.2s ease;
}

.footer-col a:hover{
    color:white;
    transform:translateX(4px);
}

.footer-marquee{
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:22px 0;
    display:flex;
    gap:34px;
    white-space:nowrap;
    overflow:hidden;
}

.footer-marquee span{
    font-size:clamp(28px,4vw,58px);
    font-weight:900;
    color:rgba(255,255,255,.12);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:26px;
    color:rgba(255,250,241,.58);
}

.footer-bottom a{
    color:var(--yellow);
    font-weight:900;
}

@media(max-width:980px){
    .mega-menu{
        position:static;
        transform:none;
        width:100%;
        display:none;
        grid-template-columns:1fr;
        margin-top:8px;
        box-shadow:none;
    }

    .nav-mega-item:hover .mega-menu{
        display:grid;
        transform:none;
    }

    .showcase-grid,
    .client-tab-panel,
    .footer-top{
        grid-template-columns:1fr;
    }

    .showcase-card.large,
    .showcase-card.wide{
        grid-column:auto;
        grid-row:auto;
    }

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

@media(max-width:560px){
    .showcase-grid{
        grid-auto-rows:260px;
    }

    .client-tab-panel{
        padding:24px;
    }

    .client-tab-panel h3{
        font-size:36px;
    }

    .brand-wall-grid{
        grid-template-columns:1fr;
    }

    .footer-bottom{
        flex-direction:column;
    }
}

/* ===== FIX MEGAMENU: NO SE CIERRA RÁPIDO ===== */

.nav-mega-item{
    padding-bottom:22px;
    margin-bottom:-22px;
}

.nav-mega-item::after{
    content:"";
    position:absolute;
    left:-30px;
    right:-30px;
    top:42px;
    height:42px;
    background:transparent;
    z-index:8;
}

.mega-menu{
    top:54px;
    z-index:50;
    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}

.nav-mega-item:hover .mega-menu,
.nav-mega-item:focus-within .mega-menu,
.nav-mega-item.mega-open .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.mega-menu:hover{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.mega-menu a,
.mega-card a,
.mega-gallery-mini a{
    position:relative;
    z-index:60;
}

@media(max-width:980px){
    .nav-mega-item{
        padding-bottom:0;
        margin-bottom:0;
    }

    .nav-mega-item::after{
        display:none;
    }

    .mega-menu{
        top:auto;
    }

    .nav-mega-item.mega-open .mega-menu{
        display:grid;
    }
}

/* =========================================================
   ANDREA ROMERO CV / PERFIL
========================================================= */

.header-cv-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 17px;
    border-radius:16px;
    background:var(--ink);
    color:var(--paper);
    font-weight:900;
    border:1px solid var(--ink);
    transition:.25s ease;
    white-space:nowrap;
}

.header-cv-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(20,20,20,.18);
}

.andrea-cv{
    position:relative;
    overflow:hidden;
}

.andrea-cv::before{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    right:4%;
    top:18%;
    background:var(--yellow);
    border-radius:48px;
    transform:rotate(14deg);
    opacity:.25;
    z-index:-1;
}

.andrea-profile-card{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:28px;
    background:rgba(255,250,241,.9);
    border:1px solid var(--border);
    border-radius:42px;
    padding:24px;
    box-shadow:var(--shadow);
}

.andrea-photo{
    min-height:560px;
    border-radius:34px;
    overflow:hidden;
    background:
        linear-gradient(135deg, rgba(0,0,0,.22), rgba(0,0,0,.02)),
        url("https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=1200&q=80");
    background-size:cover;
    background-position:center;
    position:relative;
}

.andrea-photo::after{
    content:"Diseño · Marca · Comunicación visual";
    position:absolute;
    left:24px;
    right:24px;
    bottom:24px;
    background:rgba(255,250,241,.88);
    color:var(--ink);
    border:1px solid rgba(255,255,255,.55);
    backdrop-filter:blur(14px);
    border-radius:22px;
    padding:18px;
    font-weight:900;
    text-align:center;
}

.andrea-photo-inner{
    position:absolute;
    top:24px;
    left:24px;
    width:76px;
    height:76px;
    border-radius:24px;
    background:var(--ink);
    color:var(--paper);
    display:grid;
    place-items:center;
    font-size:26px;
    font-weight:900;
    box-shadow:0 18px 40px rgba(20,20,20,.20);
}

.andrea-profile-content{
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.andrea-profile-content small{
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--blue);
    font-weight:900;
    margin-bottom:14px;
}

.andrea-profile-content h3{
    font-size:clamp(44px,6vw,86px);
    line-height:.88;
    letter-spacing:-4px;
    margin-bottom:22px;
}

.andrea-profile-content p{
    color:var(--muted);
    font-size:20px;
    line-height:1.7;
    max-width:760px;
}

.andrea-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin:28px 0;
}

.andrea-stats div{
    background:white;
    border:1px solid var(--border);
    border-radius:22px;
    padding:18px;
}

.andrea-stats strong{
    display:block;
    font-size:18px;
    margin-bottom:6px;
}

.andrea-stats span{
    color:var(--muted);
    font-size:14px;
}

.andrea-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:28px;
}

.andrea-tags span{
    background:var(--ink);
    color:var(--paper);
    border-radius:999px;
    padding:11px 14px;
    font-weight:900;
    font-size:13px;
}

.andrea-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:1120px){
    .header-cv-btn{
        display:none;
    }
}

@media(max-width:980px){
    .andrea-profile-card{
        grid-template-columns:1fr;
    }

    .andrea-photo{
        min-height:430px;
    }

    .andrea-stats{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .andrea-profile-card{
        padding:14px;
        border-radius:30px;
    }

    .andrea-profile-content{
        padding:20px;
    }

    .andrea-profile-content h3{
        letter-spacing:-2px;
    }

    .andrea-photo{
        min-height:360px;
    }
}

/* ===== FIX MENU ANDREA / HEADER ESTABLE ===== */

.app-header{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
}

.app-nav{
    justify-content:center;
    flex-wrap:nowrap;
    min-width:0;
}

.app-nav > a,
.nav-mega-item > a{
    white-space:nowrap;
}

.header-cv-btn{
    white-space:nowrap;
    min-width:max-content;
}

.brand{
    min-width:max-content;
}

@media(max-width:1120px){
    .app-header{
        display:flex;
    }

    .header-cv-btn{
        display:inline-flex;
        padding:12px 14px;
        font-size:13px;
    }

    .app-nav a{
        padding:12px 12px;
        font-size:13px;
    }
}

@media(max-width:980px){
    .app-header{
        display:flex;
    }

    .header-cv-btn{
        display:none;
    }

    .app-nav{
        flex-wrap:nowrap;
    }
}

/* ===== LIMPIEZA TEXTOS DECORATIVOS ===== */

.footer-marquee,
.mega-gallery-mini{
    display:none !important;
}

.portfolio-mega{
    grid-template-columns:1fr .9fr;
}

@media(max-width:980px){
    .portfolio-mega{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   FOOTER PREMIUM COLOR + ICONOS + MINI FORM
========================================================= */

.colorful-footer{
    position:relative;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,107,53,.28), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(32,87,255,.26), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(255,200,87,.22), transparent 28%),
        #111;
    color:var(--paper);
    padding:80px 7vw 30px;
    overflow:hidden;
}

.footer-art{
    position:absolute;
    pointer-events:none;
    opacity:.8;
}

.footer-art-one{
    width:260px;
    height:260px;
    background:var(--orange);
    border-radius:46px;
    left:-80px;
    top:90px;
    transform:rotate(18deg);
    opacity:.28;
}

.footer-art-two{
    width:320px;
    height:320px;
    background:var(--blue);
    border-radius:50%;
    right:-110px;
    top:40px;
    opacity:.20;
}

.footer-art-three{
    width:420px;
    height:26px;
    background:var(--yellow);
    border-radius:999px;
    left:36%;
    bottom:130px;
    transform:rotate(-7deg);
    opacity:.22;
}

.footer-cta{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:center;
    background:rgba(255,250,241,.09);
    border:1px solid rgba(255,255,255,.16);
    border-radius:38px;
    padding:34px;
    margin-bottom:28px;
    backdrop-filter:blur(16px);
}

.footer-cta h2{
    font-size:clamp(38px,5vw,72px);
    line-height:.92;
    letter-spacing:-3px;
    margin-bottom:16px;
}

.footer-cta p{
    max-width:740px;
    color:rgba(255,250,241,.72);
    line-height:1.7;
}

.footer-cta-btn{
    min-width:210px;
    min-height:74px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:var(--yellow);
    color:var(--ink);
    border-radius:24px;
    font-weight:900;
    box-shadow:0 20px 60px rgba(0,0,0,.24);
    transition:.25s ease;
}

.footer-cta-btn span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    background:var(--ink);
    color:var(--paper);
    border-radius:14px;
}

.footer-cta-btn:hover{
    transform:translateY(-5px) rotate(-1deg);
}

.footer-main-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.15fr .65fr .65fr 1.1fr;
    gap:18px;
    margin-bottom:24px;
}

.footer-panel{
    background:rgba(255,250,241,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:30px;
    padding:26px;
    backdrop-filter:blur(14px);
    box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.footer-brand .brand-mark{
    margin-bottom:18px;
    background:var(--paper);
    color:var(--ink);
}

.footer-brand h2{
    font-size:46px;
    line-height:.9;
    letter-spacing:-2px;
    margin-bottom:16px;
}

.footer-brand p,
.footer-contact-card p{
    color:rgba(255,250,241,.70);
    line-height:1.7;
}

.footer-socials{
    display:flex;
    gap:10px;
    margin-top:22px;
    flex-wrap:wrap;
}

.footer-socials a{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    color:var(--paper);
    font-weight:900;
    transition:.25s ease;
}

.footer-socials a:hover{
    background:var(--yellow);
    color:var(--ink);
    transform:translateY(-4px);
}

.footer-col h3,
.footer-contact-card h3{
    color:var(--yellow);
    margin-bottom:16px;
    font-size:22px;
}

.footer-col{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-col a{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,250,241,.76);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    padding:12px;
    transition:.22s ease;
}

.footer-col a span{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(255,255,255,.12);
    color:var(--yellow);
    font-weight:900;
}

.footer-col a:hover{
    background:rgba(255,255,255,.14);
    color:white;
    transform:translateX(5px);
}

.footer-mini-form{
    display:grid;
    gap:10px;
    margin-top:16px;
}

.footer-mini-form input,
.footer-mini-form select,
.footer-mini-form textarea{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    color:var(--paper);
    border-radius:16px;
    padding:13px 14px;
}

.footer-mini-form input::placeholder,
.footer-mini-form textarea::placeholder{
    color:rgba(255,250,241,.58);
}

.footer-mini-form select{
    color:rgba(255,250,241,.78);
}

.footer-mini-form select option{
    color:#111;
}

.footer-mini-form textarea{
    min-height:92px;
}

.footer-mini-form button{
    border:0;
    background:linear-gradient(135deg, var(--yellow), var(--orange));
    color:var(--ink);
    border-radius:18px;
    padding:15px;
    font-weight:900;
    cursor:pointer;
    transition:.25s ease;
}

.footer-mini-form button:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.footer-quick-contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.footer-quick-contact a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.15);
    color:var(--paper);
    border-radius:16px;
    padding:12px;
    font-weight:900;
}

.footer-quick-contact a:hover{
    background:var(--blue);
}

.footer-color-strip{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    gap:8px;
    margin:22px 0;
}

.footer-color-strip span{
    height:12px;
    border-radius:999px;
}

.footer-color-strip span:nth-child(1){background:var(--orange);}
.footer-color-strip span:nth-child(2){background:var(--blue);}
.footer-color-strip span:nth-child(3){background:var(--yellow);}
.footer-color-strip span:nth-child(4){background:var(--green);}
.footer-color-strip span:nth-child(5){background:var(--purple);}

.colorful-footer .footer-bottom{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:18px;
    color:rgba(255,250,241,.60);
}

.colorful-footer .footer-bottom a{
    color:var(--yellow);
    font-weight:900;
}

@media(max-width:1100px){
    .footer-main-grid{
        grid-template-columns:1fr 1fr;
    }

    .footer-cta{
        grid-template-columns:1fr;
    }

    .footer-cta-btn{
        width:max-content;
    }
}

@media(max-width:680px){
    .colorful-footer{
        padding:60px 20px 26px;
    }

    .footer-main-grid{
        grid-template-columns:1fr;
    }

    .footer-cta{
        padding:24px;
    }

    .footer-cta h2{
        letter-spacing:-2px;
    }

    .footer-quick-contact{
        grid-template-columns:1fr;
    }

    .colorful-footer .footer-bottom{
        flex-direction:column;
    }
}

/* =========================================================
   FOOTER LIMPIO / MENOS CARGADO
========================================================= */

.clean-footer{
    background:
        radial-gradient(circle at 12% 12%, rgba(255,107,53,.22), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(32,87,255,.18), transparent 30%),
        #151515;
    color:var(--paper);
    padding:80px 7vw 32px;
}

.clean-footer-top{
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;
    align-items:end;
    padding-bottom:38px;
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:36px;
}

.clean-footer-top h2{
    font-size:clamp(38px,5vw,72px);
    line-height:.92;
    letter-spacing:-3px;
    max-width:850px;
    margin-bottom:18px;
}

.clean-footer-top p{
    max-width:720px;
    color:rgba(255,250,241,.68);
    line-height:1.7;
}

.clean-footer-btn{
    background:var(--yellow);
    color:var(--ink);
    border-radius:20px;
    padding:17px 22px;
    font-weight:900;
    white-space:nowrap;
    transition:.25s ease;
}

.clean-footer-btn:hover{
    transform:translateY(-4px);
}

.clean-footer-grid{
    display:grid;
    grid-template-columns:1.1fr .55fr .9fr;
    gap:28px;
    align-items:start;
}

.clean-footer-brand,
.clean-footer-links,
.clean-footer-form{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:28px;
    padding:26px;
}

.clean-footer-brand .brand-mark{
    background:var(--paper);
    color:var(--ink);
    margin-bottom:18px;
}

.clean-footer-brand h3,
.clean-footer-links h3,
.clean-footer-form h3{
    color:var(--yellow);
    font-size:22px;
    margin-bottom:14px;
}

.clean-footer-brand p{
    color:rgba(255,250,241,.68);
    line-height:1.7;
}

.clean-footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.clean-footer-links a{
    color:rgba(255,250,241,.72);
    padding:7px 0;
}

.clean-footer-links a:hover{
    color:white;
}

.clean-footer-form form{
    display:grid;
    gap:10px;
}

.clean-footer-form input,
.clean-footer-form textarea{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:var(--paper);
    border-radius:16px;
    padding:13px 14px;
}

.clean-footer-form input::placeholder,
.clean-footer-form textarea::placeholder{
    color:rgba(255,250,241,.54);
}

.clean-footer-form textarea{
    min-height:96px;
}

.clean-footer-form button{
    border:0;
    background:linear-gradient(135deg, var(--yellow), var(--orange));
    color:var(--ink);
    border-radius:16px;
    padding:14px;
    font-weight:900;
    cursor:pointer;
}

.clean-footer-contact{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}

.clean-footer-contact a{
    color:var(--paper);
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.07);
    border-radius:14px;
    padding:10px 13px;
    font-weight:900;
}

.clean-footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:18px;
    color:rgba(255,250,241,.55);
    border-top:1px solid rgba(255,255,255,.10);
    margin-top:34px;
    padding-top:22px;
}

.clean-footer-bottom a{
    color:var(--yellow);
    font-weight:900;
}

.colorful-footer,
.footer-main-grid,
.footer-panel,
.footer-cta,
.footer-color-strip,
.footer-art{
    display:none !important;
}

@media(max-width:900px){
    .clean-footer-top,
    .clean-footer-grid{
        grid-template-columns:1fr;
    }

    .clean-footer-btn{
        width:max-content;
    }
}

@media(max-width:560px){
    .clean-footer{
        padding:60px 20px 28px;
    }

    .clean-footer-top h2{
        letter-spacing:-2px;
    }

    .clean-footer-bottom{
        flex-direction:column;
    }
}

/* =========================================================
   FOOTER LIMPIO / MENOS CARGADO
========================================================= */

.clean-footer{
    background:
        radial-gradient(circle at 12% 12%, rgba(255,107,53,.22), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(32,87,255,.18), transparent 30%),
        #151515;
    color:var(--paper);
    padding:80px 7vw 32px;
}

.clean-footer-top{
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;
    align-items:end;
    padding-bottom:38px;
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:36px;
}

.clean-footer-top h2{
    font-size:clamp(38px,5vw,72px);
    line-height:.92;
    letter-spacing:-3px;
    max-width:850px;
    margin-bottom:18px;
}

.clean-footer-top p{
    max-width:720px;
    color:rgba(255,250,241,.68);
    line-height:1.7;
}

.clean-footer-btn{
    background:var(--yellow);
    color:var(--ink);
    border-radius:20px;
    padding:17px 22px;
    font-weight:900;
    white-space:nowrap;
    transition:.25s ease;
}

.clean-footer-btn:hover{
    transform:translateY(-4px);
}

.clean-footer-grid{
    display:grid;
    grid-template-columns:1.1fr .55fr .9fr;
    gap:28px;
    align-items:start;
}

.clean-footer-brand,
.clean-footer-links,
.clean-footer-form{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:28px;
    padding:26px;
}

.clean-footer-brand .brand-mark{
    background:var(--paper);
    color:var(--ink);
    margin-bottom:18px;
}

.clean-footer-brand h3,
.clean-footer-links h3,
.clean-footer-form h3{
    color:var(--yellow);
    font-size:22px;
    margin-bottom:14px;
}

.clean-footer-brand p{
    color:rgba(255,250,241,.68);
    line-height:1.7;
}

.clean-footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.clean-footer-links a{
    color:rgba(255,250,241,.72);
    padding:7px 0;
}

.clean-footer-links a:hover{
    color:white;
}

.clean-footer-form form{
    display:grid;
    gap:10px;
}

.clean-footer-form input,
.clean-footer-form textarea{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:var(--paper);
    border-radius:16px;
    padding:13px 14px;
}

.clean-footer-form input::placeholder,
.clean-footer-form textarea::placeholder{
    color:rgba(255,250,241,.54);
}

.clean-footer-form textarea{
    min-height:96px;
}

.clean-footer-form button{
    border:0;
    background:linear-gradient(135deg, var(--yellow), var(--orange));
    color:var(--ink);
    border-radius:16px;
    padding:14px;
    font-weight:900;
    cursor:pointer;
}

.clean-footer-contact{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}

.clean-footer-contact a{
    color:var(--paper);
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.07);
    border-radius:14px;
    padding:10px 13px;
    font-weight:900;
}

.clean-footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:18px;
    color:rgba(255,250,241,.55);
    border-top:1px solid rgba(255,255,255,.10);
    margin-top:34px;
    padding-top:22px;
}

.clean-footer-bottom a{
    color:var(--yellow);
    font-weight:900;
}

.colorful-footer,
.footer-main-grid,
.footer-panel,
.footer-cta,
.footer-color-strip,
.footer-art{
    display:none !important;
}

@media(max-width:900px){
    .clean-footer-top,
    .clean-footer-grid{
        grid-template-columns:1fr;
    }

    .clean-footer-btn{
        width:max-content;
    }
}

@media(max-width:560px){
    .clean-footer{
        padding:60px 20px 28px;
    }

    .clean-footer-top h2{
        letter-spacing:-2px;
    }

    .clean-footer-bottom{
        flex-direction:column;
    }
}

/* =========================================================
   FOOTER SIMPLE FINAL
========================================================= */

.site-footer,
.colorful-footer,
.clean-footer,
.footer-main-grid,
.footer-panel,
.footer-cta,
.footer-color-strip,
.footer-art,
.clean-footer-top,
.clean-footer-grid,
.clean-footer-bottom{
    display:none !important;
}

.simple-footer{
    background:var(--paper);
    color:var(--ink);
    border-top:1px solid var(--border);
    padding:70px 7vw 26px;
}

.simple-footer-wrap{
    max-width:1280px;
    margin:0 auto;
}

.simple-footer-main{
    display:grid;
    grid-template-columns:1.2fr .55fr .9fr;
    gap:34px;
    align-items:start;
}

.simple-footer-brand,
.simple-footer-links,
.simple-footer-contact{
    min-width:0;
}

.simple-footer-brand .brand-mark{
    background:var(--ink);
    color:var(--paper);
    margin-bottom:18px;
}

.simple-footer-brand h2{
    font-size:42px;
    line-height:.95;
    letter-spacing:-2px;
    margin-bottom:14px;
}

.simple-footer-brand p{
    color:var(--muted);
    line-height:1.7;
    max-width:520px;
}

.simple-footer-links h3,
.simple-footer-contact h3{
    font-size:18px;
    margin-bottom:16px;
}

.simple-footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.simple-footer-links a{
    color:var(--muted);
    font-weight:700;
    transition:.2s ease;
}

.simple-footer-links a:hover{
    color:var(--ink);
    transform:translateX(4px);
}

.simple-footer-form{
    display:grid;
    gap:10px;
}

.simple-footer-form input,
.simple-footer-form textarea{
    background:white;
    border:1px solid var(--border);
    color:var(--ink);
    border-radius:14px;
    padding:13px 14px;
}

.simple-footer-form textarea{
    min-height:92px;
}

.simple-footer-form button{
    border:0;
    background:var(--ink);
    color:var(--paper);
    border-radius:14px;
    padding:14px;
    font-weight:900;
    cursor:pointer;
}

.simple-contact-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}

.simple-contact-buttons a{
    border:1px solid var(--border);
    background:white;
    color:var(--ink);
    border-radius:14px;
    padding:11px 14px;
    font-weight:900;
}

.simple-footer-bottom{
    border-top:1px solid var(--border);
    margin-top:44px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--muted);
    font-size:14px;
}

.simple-footer-bottom a{
    color:var(--ink);
    font-weight:900;
}

@media(max-width:900px){
    .simple-footer-main{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .simple-footer{
        padding:55px 20px 24px;
    }

    .simple-footer-bottom{
        flex-direction:column;
    }
}