/* ============================================
   construccionesvalen.cl — Estilos v2
   Paleta: Navy #1B3B6F | Charcoal #3A3F47 | Warm #C8933C | White | Light gray
   ============================================ */

:root {
    --navy: #1B3B6F;
    --navy-dark: #132B52;
    --navy-light: #2D6EB5;
    --charcoal: #3A3F47;
    --dark: #1A1D23;
    --warm: #C8933C;
    --warm-light: #D4A652;
    --warm-dark: #A87A2F;
    --gray-900: #2D2D2D;
    --gray-700: #4A4F57;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
    --white: #FFFFFF;
    --whatsapp: #25D366;
    --whatsapp-dk: #1EBE57;

    --ff-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --ff-body: 'Inter', system-ui, sans-serif;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 14px rgba(0,0,0,.07);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.09);
    --shadow-xl: 0 20px 50px rgba(0,0,0,.11);

    --radius: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --ease: cubic-bezier(.4,0,.2,1);
    --header-h: 76px;
}

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{font-family:var(--ff-body);font-size:16px;line-height:1.65;color:var(--gray-700);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:320px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:16px} /* 16px prevents iOS zoom */
/* Ensure nothing causes horizontal overflow */
main,section,header,footer{overflow-x:clip}

/* === LAYOUT === */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:100px 0}
.section--light{background:var(--gray-50)}

/* === SECTION HEADERS === */
.section__badge{
    display:inline-block;
    font-family:var(--ff-heading);font-size:12px;font-weight:700;
    letter-spacing:2.5px;text-transform:uppercase;
    color:var(--warm);
    margin-bottom:14px;
    padding:6px 16px;
    border:1px solid rgba(200,147,60,.25);
    border-radius:30px;
    background:rgba(200,147,60,.06);
}
.section__title{
    font-family:var(--ff-heading);
    font-size:clamp(26px,3.5vw,40px);font-weight:800;
    line-height:1.18;color:var(--dark);
    margin-bottom:14px;letter-spacing:-.4px;
}
.section__title--white{color:var(--white)}
.section__subtitle{
    font-size:16px;color:var(--gray-500);
    max-width:580px;line-height:1.7;margin-bottom:48px;
}
.section__header--center{text-align:center}
.section__header--center .section__subtitle{margin-left:auto;margin-right:auto}

/* brand text treatment */
.text-brand{color:var(--charcoal);font-weight:800}
.text-brand-accent{color:var(--navy);font-weight:800}
.text-warm{color:var(--warm)}

/* === BUTTONS === */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 32px;
    font-family:var(--ff-heading);font-size:14px;font-weight:700;
    letter-spacing:.3px;border-radius:var(--radius);
    transition:all .3s var(--ease);border:2px solid transparent;
    white-space:nowrap;cursor:pointer;
}
.btn--primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--primary:hover{background:var(--navy-dark);border-color:var(--navy-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,59,111,.28)}
.btn--outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.btn--outline-light:hover{background:var(--white);color:var(--navy);border-color:var(--white);transform:translateY(-2px)}
.btn--outline-dark{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline-dark:hover{background:var(--navy);color:var(--white);transform:translateY(-2px)}
.btn--whatsapp{background:var(--whatsapp);color:var(--white);border-color:var(--whatsapp)}
.btn--whatsapp:hover{background:var(--whatsapp-dk);border-color:var(--whatsapp-dk);transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.3)}
.btn--lg{padding:18px 40px;font-size:16px}
.btn--full{width:100%}
.btn--cta-header{
    padding:10px 22px;font-size:13px;
    background:var(--navy);color:var(--white);border-color:var(--navy);
    border-radius:var(--radius);
}
.btn--cta-header:hover{background:var(--navy-dark);border-color:var(--navy-dark)}

/* === HEADER === */
.header{
    position:fixed;top:0;left:0;width:100%;height:var(--header-h);
    z-index:1000;transition:all .35s var(--ease);
    background:var(--white);
    border-bottom:1px solid transparent;
}
.header--scrolled{
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 2px 20px rgba(0,0,0,.06);
    border-bottom-color:var(--gray-200);
    height:68px;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.header__logo-img{height:42px;width:auto;transition:height .3s var(--ease)}
.header--scrolled .header__logo-img{height:36px}
.header__nav{display:flex;align-items:center}
.header__menu{display:flex;align-items:center;gap:4px}
.header__link{
    padding:8px 14px;font-size:14px;font-weight:500;
    color:var(--gray-500);border-radius:var(--radius);
    transition:all .3s var(--ease);position:relative;
}
.header__link:hover,.header__link.active{color:var(--navy)}
.header__link::after{
    content:'';position:absolute;bottom:2px;left:14px;right:14px;
    height:2px;background:var(--navy);
    transform:scaleX(0);transition:transform .3s var(--ease);
    border-radius:1px;
}
.header__link:hover::after,.header__link.active::after{transform:scaleX(1)}

/* Hamburger */
.header__hamburger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:1001;min-width:44px;min-height:44px;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.header__hamburger span{display:block;width:22px;height:2px;background:var(--charcoal);border-radius:2px;transition:all .3s var(--ease)}
.header__hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.header__hamburger.active span:nth-child(2){opacity:0}
.header__hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile CTA inside nav - hidden on desktop */
.header__mobile-cta{display:none;width:100%;margin-top:20px;justify-content:center;min-height:52px}

/* === HERO === */
.hero{
    position:relative;min-height:100svh;display:flex;align-items:center;
    overflow:hidden;margin-top:var(--header-h);
}
/* Fallback for browsers without svh */
@supports not (min-height:100svh){
    .hero{min-height:calc(100vh - var(--header-h))}
}
.hero__bg{
    position:absolute;inset:0;
    background-size:cover;background-position:center bottom;
    transform:scale(1.03);animation:heroSlow 25s ease-in-out infinite alternate;
}
@keyframes heroSlow{0%{transform:scale(1.03)}100%{transform:scale(1.08)}}
.hero__overlay{
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(27,59,111,.88) 0%,rgba(26,29,35,.72) 60%,rgba(26,29,35,.55) 100%);
    z-index:1;
}
.hero__content{position:relative;z-index:2;max-width:660px;padding:60px 0}
.hero__badge{
    display:inline-block;
    font-size:13px;font-weight:600;letter-spacing:1px;
    color:rgba(255,255,255,.65);margin-bottom:20px;
    text-transform:uppercase;
}
.hero__title{
    font-family:var(--ff-heading);
    font-size:clamp(34px,5.5vw,58px);font-weight:800;
    line-height:1.1;color:var(--white);
    margin-bottom:22px;letter-spacing:-.8px;
    opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease) .3s forwards;
}
.hero__subtitle{
    font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.7);
    line-height:1.7;margin-bottom:36px;max-width:520px;
    opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease) .5s forwards;
}
.hero__buttons{
    display:flex;gap:14px;flex-wrap:wrap;
    opacity:0;transform:translateY(30px);animation:fadeUp .8s var(--ease) .7s forwards;
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* === ABOUT === */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about__lead{font-size:17px;color:var(--gray-900);line-height:1.7;margin-bottom:16px;font-weight:500}
.about__text{font-size:15px;color:var(--gray-500);line-height:1.75;margin-bottom:16px}
.about__features{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;
    margin-top:28px;padding-top:24px;border-top:1px solid var(--gray-200);
}
.about__feature{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--charcoal)}
.about__feature svg{color:var(--warm);flex-shrink:0}

/* About Gallery - 3 images */
.about__gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about__gallery-item{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.about__gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.about__gallery-item:hover img{transform:scale(1.05)}
.about__gallery-item--large{grid-column:1/-1;max-height:280px}
.about__gallery-item--large img{height:280px}
.about__gallery-item:not(.about__gallery-item--large) img{height:180px}

/* === SERVICES === */
.services__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}
.svc-card{
    background:var(--white);border-radius:var(--radius-lg);
    overflow:hidden;box-shadow:var(--shadow-sm);
    border:1px solid var(--gray-200);
    transition:all .35s var(--ease);
}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-card__img{height:200px;overflow:hidden}
.svc-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc-card:hover .svc-card__img img{transform:scale(1.06)}
.svc-card__body{padding:28px}
.svc-card__icon{
    width:48px;height:48px;border-radius:var(--radius);
    background:rgba(200,147,60,.1);color:var(--warm);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
}
.svc-card__title{
    font-family:var(--ff-heading);font-size:18px;font-weight:700;
    color:var(--dark);margin-bottom:10px;
}
.svc-card__text{font-size:14px;color:var(--gray-500);line-height:1.7;margin-bottom:18px}
.svc-card__link{
    display:inline-flex;align-items:center;gap:6px;
    font-size:14px;font-weight:600;color:var(--navy);
    transition:all .3s var(--ease);
}
.svc-card__link:hover{color:var(--warm);gap:10px}
.svc-card__link svg{transition:transform .3s var(--ease)}
.svc-card__link:hover svg{transform:translateX(3px)}

/* === WHY / POR QUE ELEGIRNOS === */
.why{position:relative;padding:80px 0;overflow:hidden}
.why__bg{
    position:absolute;inset:0;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);
}
.why .container{position:relative;z-index:1}
.why .section__title--white{margin-bottom:48px}
.why__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:32px}
.why__item{text-align:center;padding:24px 16px}
.why__icon{
    width:60px;height:60px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;color:var(--warm);
}
.why__title{font-family:var(--ff-heading);font-size:16px;font-weight:700;color:var(--white);margin-bottom:8px}
.why__text{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7}

/* === PROJECTS === */
.projects__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.proj-card{
    position:relative;border-radius:var(--radius-lg);overflow:hidden;
    cursor:pointer;min-height:240px;
}
.proj-card--wide{grid-column:span 2}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);min-height:240px}
.proj-card:hover img{transform:scale(1.06)}
.proj-card__overlay{
    position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(26,29,35,.75) 0%,transparent 60%);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:24px;opacity:.9;transition:opacity .3s var(--ease);
}
.proj-card:hover .proj-card__overlay{opacity:1}
.proj-card__tag{
    display:inline-block;width:fit-content;
    padding:4px 12px;background:var(--warm);color:var(--white);
    font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    border-radius:4px;margin-bottom:8px;
}
.proj-card__title{font-family:var(--ff-heading);font-size:18px;font-weight:700;color:var(--white);margin-bottom:2px}
.proj-card__location{font-size:13px;color:rgba(255,255,255,.6)}
.projects__cta{text-align:center;margin-top:40px}

/* === PROCESS === */
.process__steps{display:flex;gap:0;justify-content:center;counter-reset:step}
.step{
    flex:1;text-align:center;position:relative;padding:0 16px;
    max-width:220px;
}
.step__number{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    color:var(--white);font-family:var(--ff-heading);font-size:20px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;position:relative;z-index:2;
    box-shadow:0 4px 16px rgba(27,59,111,.22);
}
.step__connector{
    position:absolute;top:32px;left:calc(50% + 32px);
    width:calc(100% - 64px);height:2px;
    background:var(--gray-300);z-index:1;
}
.step:last-child .step__connector{display:none}
.step__title{font-family:var(--ff-heading);font-size:16px;font-weight:700;color:var(--dark);margin-bottom:8px}
.step__text{font-size:13px;color:var(--gray-500);line-height:1.65}

/* === CTA === */
.cta{position:relative;padding:110px 0;text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-attachment:fixed}
.cta__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(27,59,111,.92),rgba(26,29,35,.88))}
.cta__content{position:relative;z-index:1}
.cta__title{font-family:var(--ff-heading);font-size:clamp(28px,4.5vw,44px);font-weight:800;color:var(--white);margin-bottom:14px;letter-spacing:-.4px}
.cta__text{font-size:18px;color:rgba(255,255,255,.65);margin-bottom:36px;max-width:460px;margin-left:auto;margin-right:auto}

/* === CONTACT === */
.contact__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.contact__form{display:flex;flex-direction:column;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__group{display:flex;flex-direction:column;gap:5px}
.form__label{font-size:13px;font-weight:600;color:var(--gray-700)}
.form__input{
    padding:13px 16px;border:1px solid var(--gray-300);border-radius:var(--radius);
    font-size:15px;color:var(--dark);background:var(--white);
    transition:all .3s var(--ease);appearance:none;-webkit-appearance:none;
}
.form__input:focus{outline:none;border-color:var(--navy-light);box-shadow:0 0 0 3px rgba(45,110,181,.1)}
.form__input::placeholder{color:var(--gray-400)}
.form__select{
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;
}
.form__textarea{resize:vertical;min-height:110px}

.contact__card{
    background:var(--gray-50);border-radius:var(--radius-lg);
    padding:32px;margin-bottom:18px;border:1px solid var(--gray-200);
}
.contact__card-title{font-family:var(--ff-heading);font-size:18px;font-weight:700;color:var(--dark);margin-bottom:24px}
.contact__item{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;color:var(--gray-500);font-size:14px}
.contact__item:last-child{margin-bottom:0}
.contact__item-icon{
    width:40px;height:40px;border-radius:var(--radius);
    background:rgba(27,59,111,.06);color:var(--navy);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact__item strong{display:block;font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:2px}
.contact__item a{color:var(--gray-500);transition:color .3s var(--ease)}
.contact__item a:hover{color:var(--navy)}

/* === FOOTER === */
.footer{background:var(--dark);padding:72px 0 0;color:rgba(255,255,255,.45)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer__logo{height:38px;width:auto;margin-bottom:16px;filter:brightness(1.3)}
.footer__desc{font-size:14px;line-height:1.7;max-width:280px;margin-bottom:20px}
.footer__social{display:flex;gap:10px}
.footer__social-link{
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.5);transition:all .3s var(--ease);
}
.footer__social-link:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.footer__heading{font-family:var(--ff-heading);font-size:14px;font-weight:700;color:var(--white);margin-bottom:20px;letter-spacing:.3px}
.footer__links li{margin-bottom:10px}
.footer__links a,.footer__links span{font-size:14px;color:rgba(255,255,255,.45);transition:color .3s var(--ease)}
.footer__links a:hover{color:var(--white)}
.footer__links--contact li{display:flex;align-items:center;gap:10px}
.footer__links--contact svg{flex-shrink:0;color:rgba(255,255,255,.25)}
.footer__bottom{padding:24px 0;text-align:center;font-size:13px}
.footer__bottom strong{color:rgba(255,255,255,.6)}

/* === WHATSAPP FLOAT === */
.wa-float{
    position:fixed;bottom:28px;right:28px;
    width:58px;height:58px;border-radius:50%;
    background:var(--whatsapp);color:var(--white);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(37,211,102,.35);
    z-index:999;transition:all .3s var(--ease);
    animation:waPulse 2s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}
@keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.35)}50%{box-shadow:0 4px 30px rgba(37,211,102,.55)}}

/* === REVEAL === */
.reveal{opacity:0;transform:translateY(28px);transition:all .65s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ============================================
   RESPONSIVE — 5 breakpoints: 1024 / 768 / 600 / 480 / 360
   ============================================ */

/* --- Tablet landscape / small desktop (<=1024px) --- */
@media(max-width:1024px){
    .about__grid{grid-template-columns:1fr;gap:40px}
    .about__gallery{order:-1;max-width:600px}
    .services__grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
    .projects__grid{grid-template-columns:1fr 1fr}
    .proj-card--wide{grid-column:span 1}
    .proj-card{min-height:200px}
    .proj-card img{min-height:200px}
    .contact__grid{grid-template-columns:1fr}
    .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
    .process__steps{flex-wrap:wrap;gap:24px;justify-content:center}
    .step{min-width:160px;flex:0 1 auto}
    .step__connector{display:none}
    .cta{padding:90px 0}
}

/* --- Tablet portrait (<=768px) --- */
@media(max-width:768px){
    :root{--header-h:64px}
    .section{padding:64px 0}

    /* Header mobile */
    .header__hamburger{display:flex}
    .header__nav{
        position:fixed;top:0;right:-100%;width:80%;max-width:320px;
        height:100vh;height:100dvh;
        background:var(--white);flex-direction:column;justify-content:center;
        padding:40px 32px;transition:right .35s var(--ease);
        box-shadow:-10px 0 40px rgba(0,0,0,.15);z-index:1000;
    }
    .header__nav.open{right:0}
    .header__menu{flex-direction:column;gap:2px;width:100%}
    .header__link{
        padding:14px 16px;width:100%;font-size:16px;
        color:var(--gray-700);min-height:48px;
        display:flex;align-items:center;
    }
    .header__link:hover,.header__link.active{
        color:var(--navy);background:var(--gray-50);border-radius:var(--radius);
    }
    .header__link::after{display:none}
    .btn--cta-header{display:none}
    .header__mobile-cta{display:inline-flex}

    /* Hero */
    .hero{min-height:80svh}
    .hero__content{padding:40px 0}
    .hero__badge{font-size:11px;letter-spacing:.8px}
    .hero__buttons{flex-direction:column;gap:12px}
    .hero__buttons .btn{width:100%;text-align:center;justify-content:center;min-height:52px}

    /* About */
    .about__lead{font-size:16px}
    .about__features{grid-template-columns:1fr 1fr;gap:8px 16px}

    /* Services & Projects */
    .services__grid{grid-template-columns:1fr}
    .svc-card__img{height:180px}
    .projects__grid{grid-template-columns:1fr}
    .proj-card{min-height:220px}
    .proj-card img{min-height:220px}

    /* Process */
    .process__steps{flex-direction:column;align-items:center;gap:0}
    .step{
        max-width:100%;padding:0 0 36px;
        display:flex;flex-direction:column;align-items:center;
    }
    .step__number{width:56px;height:56px;font-size:18px;margin-bottom:16px}

    /* Why */
    .why{padding:64px 0}
    .why__grid{grid-template-columns:1fr 1fr;gap:20px}
    .why__item{padding:20px 12px}

    /* Contact */
    .form__row{grid-template-columns:1fr}
    .form__input{min-height:48px}
    .contact__card{padding:24px}

    /* Footer */
    .footer{padding:56px 0 0}
    .footer__grid{grid-template-columns:1fr;gap:28px}
    .footer__links li{margin-bottom:12px}
    .footer__links a,.footer__links span{min-height:44px;display:inline-flex;align-items:center}
    .footer__links--contact li{min-height:44px}
    .footer__social{gap:12px}
    .footer__social-link{width:44px;height:44px}

    /* CTA */
    .cta{padding:80px 0}
    .cta__bg{background-attachment:scroll}
    .cta__text{font-size:16px}

    /* WhatsApp float */
    .wa-float{bottom:20px;right:20px;width:54px;height:54px}
}

/* --- Small tablet / large phone (<=600px) --- */
@media(max-width:600px){
    .section{padding:56px 0}
    .section__title{font-size:clamp(24px,6vw,32px);margin-bottom:12px}
    .section__subtitle{font-size:15px;margin-bottom:36px}

    /* About */
    .about__features{grid-template-columns:1fr}
    .about__gallery{grid-template-columns:1fr}
    .about__gallery-item--large{max-height:220px}
    .about__gallery-item--large img{height:220px}
    .about__gallery-item:not(.about__gallery-item--large) img{height:180px}

    /* Services */
    .svc-card__body{padding:22px}
    .svc-card__title{font-size:17px}
    .svc-card__text{font-size:13px;margin-bottom:14px}
    .svc-card__icon{width:42px;height:42px;margin-bottom:12px}
    .svc-card__icon svg{width:22px;height:22px}

    /* Why */
    .why__grid{grid-template-columns:1fr}
    .why .section__title--white{font-size:clamp(22px,5vw,30px)}
    .why__icon{width:52px;height:52px}
    .why__icon svg{width:26px;height:26px}

    /* Projects */
    .proj-card{min-height:200px}
    .proj-card img{min-height:200px}
    .proj-card__overlay{padding:18px}
    .proj-card__title{font-size:16px}

    /* Process */
    .step__title{font-size:15px}
    .step__text{font-size:12px}

    /* CTA */
    .cta{padding:64px 0}
    .cta__title{margin-bottom:10px}
    .cta__text{font-size:15px;margin-bottom:28px}
    .btn--lg{padding:16px 32px;font-size:15px}

    /* Contact */
    .contact__card{padding:20px}
    .contact__card-title{font-size:16px;margin-bottom:18px}
    .contact__item{gap:12px}
    .contact__item-icon{width:36px;height:36px}
    .contact__item-icon svg{width:18px;height:18px}

    /* Footer */
    .footer__brand{text-align:center}
    .footer__brand .footer__logo{margin:0 auto 16px}
    .footer__desc{margin:0 auto 20px;text-align:center;max-width:100%}
    .footer__social{justify-content:center}
}

/* --- Phone (<=480px) --- */
@media(max-width:480px){
    .container{padding:0 16px}
    .section{padding:48px 0}
    .section__badge{font-size:11px;padding:5px 12px;letter-spacing:2px}

    /* Header */
    .header__logo-img{height:34px}
    .header--scrolled .header__logo-img{height:30px}

    /* Hero */
    .hero{min-height:75svh}
    .hero__content{padding:32px 0}
    .hero__title{font-size:clamp(28px,8vw,38px);letter-spacing:-.5px;margin-bottom:16px}
    .hero__subtitle{font-size:15px;margin-bottom:28px;line-height:1.6}
    .hero__badge{font-size:10px;margin-bottom:14px}
    .hero__buttons .btn{padding:14px 24px;font-size:14px}

    /* About */
    .about__lead{font-size:15px}
    .about__text{font-size:14px}
    .about__feature{font-size:13px;gap:8px}
    .about__feature svg{width:18px;height:18px}

    /* Services */
    .svc-card__img{height:160px}
    .svc-card__body{padding:20px}

    /* Projects */
    .proj-card{min-height:180px}
    .proj-card img{min-height:180px}

    /* Process */
    .step{padding-bottom:28px}
    .step__number{width:48px;height:48px;font-size:16px;margin-bottom:14px}

    /* CTA */
    .cta{padding:56px 0}
    .btn--lg{padding:14px 28px;font-size:14px}

    /* Contact */
    .contact__card{padding:18px}
    .btn--full{padding:14px 20px;font-size:14px;min-height:50px}

    /* Footer */
    .footer{padding:44px 0 0}
    .footer__logo{height:32px}
    .footer__heading{font-size:13px;margin-bottom:14px}
    .footer__links a,.footer__links span{font-size:13px}
    .footer__bottom{font-size:12px;padding:20px 0}

    /* WA Float */
    .wa-float{bottom:16px;right:16px;width:50px;height:50px}
    .wa-float svg{width:24px;height:24px}
}

/* --- Micro phone (<=360px) --- */
@media(max-width:360px){
    .container{padding:0 12px}
    .hero__title{font-size:26px}
    .hero__subtitle{font-size:14px}
    .section__title{font-size:22px}
    .btn{padding:12px 20px;font-size:13px;gap:8px}
    .hero__buttons .btn{padding:13px 20px;font-size:13px}
    .svc-card__img{height:140px}
    .about__gallery-item--large img{height:180px}
    .about__gallery-item:not(.about__gallery-item--large) img{height:150px}
    .proj-card{min-height:160px}
    .proj-card img{min-height:160px}
    .proj-card__title{font-size:15px}
    .proj-card__tag{font-size:10px;padding:3px 10px}
    .why__icon{width:46px;height:46px}
    .why__title{font-size:14px}
    .why__text{font-size:12px}
    .step__number{width:44px;height:44px;font-size:15px}
    .footer__social-link{width:40px;height:40px}
}

/* --- Phone landscape orientation --- */
@media(max-height:500px) and (orientation:landscape){
    .hero{min-height:auto;padding:60px 0}
    .hero__content{padding:20px 0}
    .hero__title{font-size:clamp(24px,4vw,36px)}
    .hero__subtitle{font-size:14px;margin-bottom:20px}
    .hero__badge{margin-bottom:10px}
    .cta{padding:60px 0}
    .why{padding:60px 0}
}

/* --- Tablet landscape --- */
@media(min-width:769px) and (max-width:1024px) and (orientation:landscape){
    .hero{min-height:90vh}
    .hero__content{max-width:55%}
    .about__grid{grid-template-columns:1fr 1fr}
    .about__gallery{order:0}
}

/* --- Ensure all interactive elements have adequate tap targets --- */
@media(pointer:coarse){
    .header__link{min-height:44px;display:flex;align-items:center}
    .footer__links a{min-height:44px;display:inline-flex;align-items:center}
    .svc-card__link{min-height:44px;display:inline-flex;align-items:center}
    .btn{min-height:48px}
    .form__input{min-height:48px}
    .form__select{min-height:48px}
}

/* === Nav overlay === */
.nav-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.4);
    z-index:998;opacity:0;visibility:hidden;
    transition:all .3s var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.nav-overlay.active{opacity:1;visibility:visible}

/* === Safe area insets (notch phones) === */
@supports(padding:env(safe-area-inset-bottom)){
    .header__inner{
        padding-left:max(24px,env(safe-area-inset-left));
        padding-right:max(24px,env(safe-area-inset-right));
    }
    .footer__bottom{
        padding-bottom:max(24px,env(safe-area-inset-bottom));
    }
    .wa-float{
        right:max(20px,env(safe-area-inset-right));
        bottom:max(20px,env(safe-area-inset-bottom));
    }
}

/* === Reduced motion === */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
    html{scroll-behavior:auto}
    .hero__bg{animation:none;transform:scale(1)}
    .reveal{opacity:1;transform:none}
}

/* === High contrast mode support === */
@media(forced-colors:active){
    .btn{border:2px solid ButtonText}
    .svc-card,.proj-card,.contact__card,.feature{border:1px solid CanvasText}
    .why__icon{border:2px solid CanvasText}
}

/* === Print styles === */
@media print{
    .header,.wa-float,.nav-overlay,.hero__overlay,.cta__overlay{display:none}
    .hero{min-height:auto;page-break-after:always}
    .hero__bg{position:static;height:200px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
    body{font-size:12pt;color:#000}
    .section{padding:24px 0;page-break-inside:avoid}
    .footer{background:#f5f5f5;color:#333}
}