/* ==================== BASE ==================== */
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background-color:#F9F6F0;color:#2C302E;font-family:'Plus Jakarta Sans',sans-serif;overflow-x:hidden}
.hero-bg-gradient{background:radial-gradient(circle at 10% 20%,rgba(200,90,50,.08) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(244,223,208,.6) 0%,transparent 50%)}
.terracotta-gradient-btn{background:linear-gradient(135deg,#D96B43 0%,#C85A32 100%);box-shadow:0 10px 25px -5px rgba(200,90,50,.35);transition:all .3s ease}
.terracotta-gradient-btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px -5px rgba(200,90,50,.5)}
.glass-card{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border:1px solid rgba(244,223,208,.6)}

/* ==================== HEADER ==================== */
.site-header{position:sticky;top:0;z-index:50;width:100%;background:transparent;transition:padding .3s ease}
.site-header-inner{position:relative;background:rgba(249,246,240,.94);backdrop-filter:blur(12px);border:1px solid rgba(244,223,208,.5);border-top:0;border-radius:0 0 4px 4px;transition:all .3s ease}
.site-header.is-scrolled{padding:8px 12px 0}
.site-header.is-scrolled .site-header-inner{width:100%;max-width:1240px;margin:0 auto;border:1px solid rgba(200,90,50,.18);border-radius:22px;background:rgba(249,246,240,.97);box-shadow:0 12px 35px rgba(30,30,30,.12)}
.site-header nav{white-space:nowrap}
.nav-link{position:relative;text-decoration:none;transition:color .25s ease,background .25s ease}
.site-header nav .nav-link{display:inline-flex;align-items:center;padding:10px 0}
.site-header nav .nav-link::after{position:absolute;content:"";left:0;right:0;bottom:3px;height:2px;border-radius:2px;background:#C85A32;transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.site-header nav .nav-link:hover,.site-header nav .nav-link.is-active{color:#C85A32}
.site-header nav .nav-link.is-active::after{transform:scaleX(1)}
.mobile-menu-panel{background:#F9F6F0;border-top:1px solid rgba(244,223,208,.7);border-bottom:1px solid rgba(244,223,208,.7)}
.mobile-menu-panel .nav-link.is-active{color:#C85A32;background:rgba(244,223,208,.4);border-radius:10px;font-weight:800}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 13px;border:1px solid rgba(200,90,50,.25);border-radius:999px;background:#FAF0E6;color:#2C302E;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.theme-toggle>i{font-size:15px;color:#C85A32}
.theme-toggle:hover{transform:translateY(-2px);border-color:#C85A32}
.theme-toggle:focus-visible{outline:3px solid rgba(200,90,50,.4);outline-offset:3px}

/* ==================== SERVICE CARDS ==================== */
.service-card{min-width:0;width:100%;padding:0;text-align:left;background:rgba(255,255,255,.95);border:1px solid rgba(244,223,208,.8);overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 30px -10px rgba(200,90,50,.2);border-color:#C85A32}
.service-card:focus-visible{outline:3px solid rgba(200,90,50,.45);outline-offset:4px}
.service-card-image{position:relative;height:175px;width:100%;background-color:#F4DFD0;background-size:cover;background-position:center;overflow:hidden;isolation:isolate}
.service-card-image::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(30,30,30,.04),rgba(30,30,30,.34));transition:background .3s ease}
.service-card:hover .service-card-image{background-position:center 45%}
.service-card-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,30,.02) 20%,rgba(30,30,30,.42) 100%);pointer-events:none}
.service-card-icon{position:absolute;z-index:2;left:20px;bottom:18px;display:flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:14px;color:#C85A32;background:rgba(250,240,230,.96);border:1px solid rgba(244,223,208,.9);font-size:20px;box-shadow:0 6px 18px rgba(30,30,30,.14)}
.service-card-content{display:flex;min-height:180px;flex-direction:column;padding:24px}
.service-card-title{font-size:18px;font-weight:800;line-height:1.45;color:#1E1E1E}
.service-card-description{margin-top:9px;font-size:12px;line-height:1.8;color:#6E6B68}
.service-card-action{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:22px;font-size:12px;font-weight:800;color:#C85A32}
.service-card-action i{transition:transform .25s ease}
.service-card:hover .service-card-action i{transform:translateX(5px)}

/* ==================== SERVICE TABS ==================== */
.service-tabs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:36px auto 40px}
.service-tab{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border:1px solid rgba(244,223,208,.9);border-radius:999px;background:#FAF0E6;color:#2C302E;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;line-height:1.5;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.service-tab>i{color:#C85A32;font-size:15px;transition:color .25s ease}
.service-tab:hover{border-color:#C85A32;transform:translateY(-2px)}
.service-tab.is-active{background:linear-gradient(135deg,#D96B43 0%,#C85A32 100%);color:#FFF;border-color:#C85A32;box-shadow:0 8px 20px rgba(200,90,50,.2)}
.service-tab.is-active>i{color:#FFF}
.service-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:50px;background:rgba(200,90,50,.12);color:#A84522;font-size:11px;font-weight:800}
.service-tab.is-active .service-tab-count{background:rgba(255,255,255,.2);color:#FFF}
.service-tab:focus-visible{outline:3px solid rgba(200,90,50,.4);outline-offset:4px}

/* ==================== PORTFOLIO IMAGE PREVIEWS ==================== */
.portfolio-project-image{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:180px;overflow:hidden;border-radius:12px;border:1px solid rgba(244,223,208,.8);background-color:#F4DFD0;background-position:center;background-size:cover;transition:background-position .3s ease}
.portfolio-project-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:rgba(250,240,230,.94);border:1px solid rgba(255,255,255,.8);color:#C85A32;font-size:23px;box-shadow:0 6px 20px rgba(30,30,30,.2);backdrop-filter:blur(8px);transition:transform .3s ease}
#portfolio-grid>a:hover .portfolio-project-icon{transform:scale(1.1)}
#portfolio-grid>a:focus-visible{outline:3px solid rgba(200,90,50,.45);outline-offset:4px}

/* ==================== SERVICE MODAL ==================== */
.modal-fade{transition:opacity .3s ease,visibility .3s ease}
.modal-fade.hidden-modal{opacity:0;pointer-events:none;visibility:hidden}
body.modal-open{overflow:hidden}

/* ==================== FLOATING WHATSAPP ==================== */
.whatsapp-float{position:fixed;z-index:100;right:24px;bottom:24px;display:inline-flex;align-items:center;justify-content:flex-start;gap:12px;width:62px;height:62px;padding:0 16px;overflow:hidden;border-radius:999px;color:#FFF;background:linear-gradient(135deg,#D96B43 0%,#C85A32 100%);border:1px solid rgba(255,255,255,.35);box-shadow:0 12px 30px rgba(200,90,50,.35);text-decoration:none;transition:width .3s ease,transform .3s ease,box-shadow .3s ease}
.whatsapp-float>i{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:30px;font-size:30px}
.whatsapp-float-label{width:0;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-size:13px;font-weight:800;transition:max-width .3s ease,opacity .2s ease}
.whatsapp-float:hover,.whatsapp-float:focus-visible{width:218px;transform:translateY(-4px);box-shadow:0 16px 36px rgba(200,90,50,.45)}
.whatsapp-float:hover .whatsapp-float-label,.whatsapp-float:focus-visible .whatsapp-float-label{width:auto;max-width:160px;opacity:1}
.whatsapp-float:focus-visible{outline:3px solid rgba(200,90,50,.45);outline-offset:4px}

/* ==================== DARK THEME ==================== */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background-color:#171513;color:#EAE0D7}
html[data-theme="dark"] .hero-bg-gradient{background:radial-gradient(circle at 10% 20%,rgba(200,90,50,.14) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(115,65,42,.16) 0%,transparent 50%);background-color:#171513}
html[data-theme="dark"] .site-header-inner{background:rgba(30,27,24,.96);border-color:#40332B}
html[data-theme="dark"] .site-header.is-scrolled .site-header-inner{background:rgba(30,27,24,.98);border-color:rgba(200,90,50,.4);box-shadow:0 12px 35px rgba(0,0,0,.35)}
html[data-theme="dark"] .site-header nav .nav-link:hover,html[data-theme="dark"] .site-header nav .nav-link.is-active{color:#F08A60}
html[data-theme="dark"] .site-header nav .nav-link::after{background:#F08A60}
html[data-theme="dark"] .mobile-menu-panel{background:#211D1A;border-color:#40332B}
html[data-theme="dark"] .mobile-menu-panel .nav-link.is-active{background:#382820;color:#F08A60}
html[data-theme="dark"] .theme-toggle{background:#302720;color:#F4E9DF;border-color:#63412F}
html[data-theme="dark"] .theme-toggle>i{color:#F08A60}
html[data-theme="dark"] .glass-card{background:rgba(35,31,27,.94);border-color:#45362C}
html[data-theme="dark"] .service-card{background:#211E1B;border-color:#45362C}
html[data-theme="dark"] .service-card-title{color:#F6EEE6}
html[data-theme="dark"] .service-card-description{color:#C4B5A9}
html[data-theme="dark"] .service-tab{background:#2C2520;color:#E8DCD1;border-color:#49382D}
html[data-theme="dark"] .service-tab>i{color:#F08A60}
html[data-theme="dark"] .service-tab.is-active{background:linear-gradient(135deg,#D96B43 0%,#A84522 100%);color:#FFF;border-color:#D96B43}
html[data-theme="dark"] .service-tab.is-active>i{color:#FFF}
html[data-theme="dark"] .service-tab-count{background:#443027;color:#F4A17D}
html[data-theme="dark"] .service-tab.is-active .service-tab-count{background:rgba(255,255,255,.2);color:#FFF}
html[data-theme="dark"] #services,html[data-theme="dark"] #portfolio,html[data-theme="dark"] #contact{background-color:#1C1917!important;border-color:#40332B!important}
html[data-theme="dark"] #about .glass-card{background:#211E1B}
html[data-theme="dark"] #about .bg-white\/80{background-color:#29231F!important}
html[data-theme="dark"] [class~="bg-white"],html[data-theme="dark"] [class~="bg-white/80"],html[data-theme="dark"] [class~="bg-white/85"]{background-color:#26211D!important}
html[data-theme="dark"] [class~="bg-[#F9F6F0]"],html[data-theme="dark"] [class~="bg-[#F9F6F0]/90"]{background-color:#211D1A!important}
html[data-theme="dark"] [class~="bg-brand-peachLight"],html[data-theme="dark"] [class~="bg-brand-peach/60"],html[data-theme="dark"] [class~="bg-brand-peach/40"]{background-color:#302720!important}
html[data-theme="dark"] [class~="text-brand-black"]{color:#F5EDE5!important}
html[data-theme="dark"] [class~="text-brand-slate"],html[data-theme="dark"] [class~="text-brand-slate/80"],html[data-theme="dark"] [class~="text-brand-slate/70"]{color:#D9CCC1!important}
html[data-theme="dark"] [class~="text-brand-muted"]{color:#B9A99C!important}
html[data-theme="dark"] [class*="border-brand-peach"]{border-color:#49382D!important}
html[data-theme="dark"] #contact input,html[data-theme="dark"] #contact textarea,html[data-theme="dark"] #contact select{background:#26211D!important;color:#F5EDE5!important;border-color:#49382D!important}
html[data-theme="dark"] #contact input::placeholder,html[data-theme="dark"] #contact textarea::placeholder{color:#A99A8E}
html[data-theme="dark"] #service-modal>div[role="dialog"]{background:#211E1B!important;border-color:#49382D!important}
html[data-theme="dark"] #service-modal .bg-brand-peachLight{background:#302720!important}
html[data-theme="dark"] #service-modal #modal-deliverables{color:#D9CCC1}
html[data-theme="dark"] .service-card-icon{background:rgba(40,32,27,.96);border-color:#5B4031;color:#F08A60}
html[data-theme="dark"] .service-card-action{color:#F08A60}
html[data-theme="dark"] .border-brand-peach,html[data-theme="dark"] .border-brand-peach\/50{border-color:#49382D!important}
html[data-theme="dark"] .text-brand-terracotta{color:#F08A60}
html[data-theme="dark"] .service-tab.is-active .text-brand-terracotta{color:#FFF}
html[data-theme="dark"] .portfolio-project-image{border-color:#49382D;background-color:#302720}
html[data-theme="dark"] .portfolio-project-icon{background:rgba(40,32,27,.96);border-color:#5B4031;color:#F08A60}

/* ==================== TABLET ==================== */
@media(max-width:1100px){
.site-header nav{gap:12px}
.site-header nav .nav-link{font-size:12px}
.theme-toggle{width:42px;height:42px;padding:0;flex-shrink:0}
.theme-toggle-label{display:none}
}

/* ==================== MOBILE: HEADER ==================== */
@media(max-width:767px){
#theme-toggle-label{display:none}
.site-header{padding:0}
.site-header.is-scrolled{padding:6px 8px 0}
.site-header-inner{gap:6px;padding-left:12px;padding-right:12px}
.site-header.is-scrolled .site-header-inner{border-radius:18px}
.site-header-inner>a:first-child{gap:8px;min-width:0;flex-shrink:1}
.site-header-inner>a:first-child .font-black{font-size:28px}
.site-header-inner>a:first-child .h-8{height:28px}
.site-header-inner>a:first-child .leading-tight{min-width:0}
.site-header-inner>a:first-child .leading-tight span:first-child{font-size:11px}
.site-header-inner>a:first-child .leading-tight span:last-child{font-size:9px}
.theme-toggle{display:inline-flex;width:40px;min-width:40px;height:40px;min-height:40px;margin-left:auto;margin-right:2px;padding:0;gap:0;flex-shrink:0}
.theme-toggle>i{font-size:16px}
.theme-toggle-label{display:none}
#menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;flex-shrink:0}
#menu-icon{font-size:23px}
.mobile-menu-panel{margin-top:6px;padding:16px 20px 20px;border:1px solid rgba(244,223,208,.8);border-radius:18px;box-shadow:0 14px 30px rgba(30,30,30,.08)}
.site-header.is-scrolled .mobile-menu-panel{border-radius:16px;margin-top:8px}
.mobile-menu-panel .nav-link{display:block;padding:12px 14px;text-align:left}
.mobile-menu-panel .js-whatsapp{text-align:center}

/* ==================== MOBILE: SERVICES ==================== */
.service-tabs{width:100%;gap:10px;margin:26px auto 30px}
.service-tab{width:100%;min-height:48px;justify-content:flex-start;padding:12px 16px;border-radius:14px;font-size:12px;text-align:left}
.service-tab>i{width:20px;text-align:center}
.service-tab-count{margin-left:auto;flex-shrink:0}
.service-card{border-radius:16px}
.service-card:hover{transform:none}
.service-card-image{height:165px}
.service-card-content{min-height:0;padding:20px}
.service-card-title{font-size:17px}
.service-card-description{font-size:12px;line-height:1.75}
.service-card-action{padding-top:18px}
.service-card:active{transform:scale(.99)}

/* ==================== MOBILE: PORTFOLIO ==================== */
.portfolio-project-image{height:180px}
#portfolio-grid>a{min-width:0}
#portfolio-grid>a:hover{transform:none}
#portfolio-grid>a:active{transform:scale(.99)}

/* ==================== MOBILE: MODAL ==================== */
#service-modal{padding:12px}
#service-modal>div[role="dialog"]{max-height:88dvh;padding:24px 20px;border-radius:22px}
#service-modal #modal-title{padding-right:30px;font-size:22px;line-height:1.3}
#service-modal #modal-description{font-size:13px;line-height:1.8}
#service-modal #modal-deliverables{font-size:12px;line-height:1.8}
#modal-close{top:14px;right:14px}

/* ==================== MOBILE: WHATSAPP ==================== */
.whatsapp-float{right:16px;bottom:16px;width:56px;height:56px;padding:0 12px;gap:10px}
.whatsapp-float>i{width:30px;font-size:27px}
.whatsapp-float:hover,.whatsapp-float:focus-visible{width:196px}
.whatsapp-float-label{font-size:12px}
}

/* ==================== SMALL PHONES ==================== */
@media(max-width:380px){
.site-header-inner{padding-left:8px;padding-right:8px;gap:4px}
.site-header-inner>a:first-child{gap:6px}
.site-header-inner>a:first-child .font-black{font-size:25px}
.site-header-inner>a:first-child .h-8{margin-left:0;margin-right:0}
.site-header-inner>a:first-child .leading-tight span:first-child{font-size:10px;letter-spacing:.1em}
.site-header-inner>a:first-child .leading-tight span:last-child{font-size:8px}
.theme-toggle{width:36px;min-width:36px;height:36px;min-height:36px}
#menu-btn{width:36px;min-width:36px;height:36px}
#menu-icon{font-size:21px}
.service-tabs{margin:22px auto 26px}
.service-tab{padding:12px;font-size:11px}
.service-card-image{height:150px}
.service-card-content{padding:17px}
.portfolio-project-image{height:155px}
.whatsapp-float{right:12px;bottom:12px;width:54px;height:54px}
}

/* ==================== REDUCED MOTION ==================== */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.service-card,.service-card-action i,.terracotta-gradient-btn,.whatsapp-float,.whatsapp-float-label,.modal-fade,.service-tab,.service-tab>i,.site-header-inner,.theme-toggle,.nav-link,.portfolio-project-icon{transition:none}
.service-tab:hover,.theme-toggle:hover,.service-card:hover,.terracotta-gradient-btn:hover{transform:none}
}
/* MOBILE HORIZONTAL OVERFLOW FIX */
html,body{width:100%;max-width:100%;overflow-x:clip}
#home,#services,#about,#portfolio,#contact{max-width:100%;overflow-x:clip}
.site-header,.site-header-inner{max-width:100%}
#services-grid,#portfolio-grid{width:100%;min-width:0}
#services-grid>*,#portfolio-grid>*{min-width:0;max-width:100%}
img,video,iframe{max-width:100%}
@media(max-width:767px){
.site-header.is-scrolled{width:100%;max-width:100%;box-sizing:border-box}
.site-header.is-scrolled .site-header-inner{width:100%;min-width:0;box-sizing:border-box}
#home .grid,#about .grid{min-width:0}
#home .relative,#about .relative{min-width:0}
}