/*
Theme Name: DEARC Arquitectura
Theme URI: https://dearc.com.mx
Author: DEARC
Description: Tema premium de arquitectura minimalista. Sin dependencias externas — panel nativo de WordPress para gestionar proyectos, slider, galería y configuración.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: dearc
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#ebeae7;--text:#333;--text-sec:#5b5b5b;--accent:#beb7af;--green:#9ba89a;--sand:#d3c7ad;--cream:#e5dece;--blue-soft:#adbad3;--blue-light:#ced6e5;--green-light:#c4cbc3;--placeholder:#c4cbc3;--placeholder-text:#9ba89a;--font:'Geist',sans-serif}
html{overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* LOADER */
.site-loader{position:fixed;inset:0;background:var(--bg);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
.site-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-bar{width:120px;height:1px;background:var(--accent);position:relative;overflow:hidden}
.loader-bar::after{content:'';position:absolute;left:-100%;width:100%;height:100%;background:var(--text);animation:loaderSlide 1s ease-in-out infinite}
@keyframes loaderSlide{0%{left:-100%}100%{left:100%}}

/* CURSOR */
.cursor{width:8px;height:8px;background:var(--text);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;mix-blend-mode:difference;display:none}
@media(pointer:fine){.cursor{display:block}html,a,button{cursor:none}}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.revealed{opacity:1;transform:translateY(0)}
.stagger-1{transition-delay:0s}.stagger-2{transition-delay:.1s}.stagger-3{transition-delay:.2s}.stagger-4{transition-delay:.3s}.stagger-5{transition-delay:.4s}.stagger-6{transition-delay:.5s}

/* CONTAINER */
.container{max-width:1400px;margin:0 auto;padding:0 80px;position:relative}
.eyebrow{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec)}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:28px 80px;display:flex;align-items:center;justify-content:space-between;transition:background .4s,padding .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(235,234,231,.92);backdrop-filter:blur(20px);padding:18px 80px;border-bottom:.5px solid rgba(190,183,175,.3)}
.nav-logo{display:flex;align-items:center}
.nav-logo-svg{height:20px;width:auto;fill:var(--bg);transition:fill .4s,opacity .4s}
.nav-logo-img{height:22px;width:auto;transition:opacity .4s;filter:brightness(0) invert(1)}
.nav-logo:hover .nav-logo-svg,.nav-logo:hover .nav-logo-img{opacity:.7}
/* When nav is scrolled: logo turns dark */
.nav.scrolled .nav-logo-svg{fill:var(--text)}
.nav.scrolled .nav-logo-img{filter:none}
.nav-links{display:flex;gap:40px;align-items:center;list-style:none}
.nav-links a{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.14em;color:var(--bg);position:relative;transition:color .3s}
.nav.scrolled .nav-links a{color:var(--text)}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:.5px;background:currentColor;transition:width .4s}
.nav-links a:hover::after,.nav-links li.current-menu-item a::after,.nav-links li.current_page_item a::after{width:100%}
.nav-cta{font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;padding:10px 24px;border:.5px solid rgba(235,234,231,.6);border-radius:999px;transition:all .4s;color:var(--bg)}
.nav.scrolled .nav-cta{border-color:var(--text);color:var(--text)}
.nav-cta:hover{background:var(--bg);color:var(--text)}
.nav.scrolled .nav-cta:hover{background:var(--text);color:var(--bg)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;z-index:1002;cursor:pointer;position:relative}
.nav-hamburger span{width:24px;height:1px;background:#ebeae7;transition:all .4s;display:block}
/* When scrolled, hamburger turns dark */
.nav.scrolled .nav-hamburger span{background:var(--text)}
/* When mobile menu is open, hamburger always dark (menu bg is light) */
.nav-hamburger.open span{background:var(--text) !important}
.nav-hamburger.open span{background:var(--text)}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
.nav-mobile-menu{position:fixed;inset:0;background:var(--bg);z-index:1001;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;visibility:hidden;transition:all .4s}
.nav-mobile-menu.open{opacity:1;visibility:visible}
.nav-mobile-menu a{font-size:28px;font-weight:200;letter-spacing:.05em}

/* ═══ HERO SLIDER (Home) ═══ */
.hero-slider{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease,transform 8s ease-out;transform:scale(1.08);z-index:1}
.hero-slide.active{opacity:1;transform:scale(1);z-index:2}
.hero-slide.exiting{z-index:1}
.hero-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 100%)}
.hero-slide-content{position:absolute;bottom:0;left:0;right:0;padding:0 80px 100px;max-width:1400px;margin:0 auto}
.hero-slide-eyebrow{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.18em;color:rgba(235,234,231,.6);margin-bottom:16px}
.hero-slide-title{font-size:clamp(48px,7vw,110px);font-weight:200;line-height:.92;letter-spacing:-.03em;color:var(--bg);margin-bottom:32px;max-width:800px}
.hero-slide-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border:.5px solid rgba(235,234,231,.5);border-radius:999px;color:var(--bg);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;transition:all .4s;backdrop-filter:blur(8px);background:rgba(255,255,255,.06)}
.hero-slide-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(235,234,231,.8)}
.hero-slide-btn svg{width:16px;height:16px;transition:transform .4s}
.hero-slide-btn:hover svg{transform:translateX(4px)}
.slider-progress{position:absolute;bottom:44px;right:80px;z-index:10;display:flex;align-items:center;gap:16px}
.slider-counter{font-size:11px;font-weight:300;color:rgba(235,234,231,.7);letter-spacing:.08em}
.slider-dots{display:flex;gap:8px}
.slider-dot{width:32px;height:2px;background:rgba(235,234,231,.25);border:none;border-radius:1px;cursor:pointer;position:relative;overflow:hidden}
.slider-dot.active{background:rgba(235,234,231,.3)}
.slider-dot-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--bg);border-radius:1px}
.slider-dot.active .slider-dot-fill{animation:dotFill 6s linear forwards}
@keyframes dotFill{from{width:0}to{width:100%}}
.scroll-ind{position:absolute;left:80px;bottom:44px;z-index:10;display:flex;align-items:center;gap:12px}
.scroll-ind span{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:rgba(235,234,231,.5)}
.scroll-line-h{width:32px;height:1px;background:rgba(235,234,231,.3);position:relative;overflow:hidden}
.scroll-line-h::after{content:'';position:absolute;left:-100%;width:100%;height:100%;background:var(--bg);animation:scrollPulseH 2s ease-in-out infinite}
@keyframes scrollPulseH{0%{left:-100%}50%{left:100%}100%{left:100%}}

/* ═══ PROJECTS PAGE ═══ */
.projects-hero{padding:180px 0 80px}
.projects-hero h1{font-size:clamp(48px,7vw,96px);font-weight:200;line-height:.95;letter-spacing:-.03em;margin-bottom:24px}
.projects-hero p{font-size:17px;font-weight:300;color:var(--text-sec);max-width:560px;line-height:1.6}
.project-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:64px;padding-bottom:32px;border-bottom:.5px solid var(--accent)}
.filter-btn{padding:8px 20px;border:.5px solid var(--accent);border-radius:999px;background:transparent;font-family:var(--font);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:var(--text-sec);cursor:pointer;transition:all .4s}
.filter-btn:hover,.filter-btn.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px}
.project-card{display:block;transition:opacity .5s}
.project-card.hidden{display:none}
.project-card-img{width:100%;aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--placeholder)}
.project-card-img::after{content:'';position:absolute;inset:0;background:rgba(51,51,51,0);transition:background .5s}
.project-card:hover .project-card-img::after{background:rgba(51,51,51,.15)}
.project-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.project-card:hover .project-card-img img{transform:scale(1.04)}
.project-card-info{padding-top:20px}
.project-card-name{font-size:20px;font-weight:300;margin-bottom:6px}
.project-card-meta{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--text-sec)}

/* ═══ SINGLE PROJECT ═══ */
.project-hero{position:relative;width:100%;height:75vh;min-height:450px;overflow:hidden}
.project-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.project-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.55) 100%)}
.project-hero-content{position:absolute;bottom:0;left:0;right:0;padding:0 80px 72px;max-width:1400px;margin:0 auto}
.project-hero-type{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:rgba(235,234,231,.6);margin-bottom:16px}
.project-hero-title{font-size:clamp(42px,6vw,88px);font-weight:200;line-height:.95;letter-spacing:-.03em;color:var(--bg);margin-bottom:28px}
.project-hero-back{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:rgba(235,234,231,.7);transition:color .3s}
.project-hero-back:hover{color:var(--bg)}
.project-hero-back svg{width:16px;height:16px}
.project-meta{padding:56px 0;border-bottom:.5px solid var(--accent)}
.project-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.project-meta-label{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec);margin-bottom:8px}
.project-meta-value{font-size:16px;font-weight:300}
.project-content{padding:80px 0 0}
.project-text{font-size:17px;font-weight:300;line-height:1.75;max-width:780px;margin-bottom:64px}
.project-img{width:100%;margin-bottom:64px;overflow:hidden}
.project-img img{width:100%;height:auto;object-fit:cover;transition:transform .8s}
.project-img:hover img{transform:scale(1.02)}
.project-img-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:64px}
.project-img-duo .project-img{margin-bottom:0}
.project-gallery{margin:64px 0}
.project-gallery-title{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec);margin-bottom:32px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-item{aspect-ratio:4/3;overflow:hidden;cursor:pointer}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.04)}
.project-team{padding:64px 0;margin-top:32px;border-top:.5px solid var(--accent)}
.project-team-title{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec);margin-bottom:40px}
.project-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.project-team-role{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}
.project-team-name{font-size:14px;font-weight:300;line-height:1.5}

/* ═══ SERVICES ═══ */
.services-hero{padding:180px 0 80px}
.services-hero h1{font-size:clamp(48px,7vw,96px);font-weight:200;line-height:.95;letter-spacing:-.03em}
.service-block{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:96px 0;border-top:.5px solid var(--accent);align-items:center}
.service-block.reversed{direction:rtl}
.service-block.reversed>*{direction:ltr}
.service-title{font-size:clamp(28px,3vw,42px);font-weight:200;margin-bottom:24px;line-height:1.1}
.service-desc{font-size:15px;font-weight:300;line-height:1.7;color:var(--text-sec)}
.service-list{margin-top:20px;font-size:14px;font-weight:300;color:var(--text-sec);line-height:2}
.service-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--placeholder)}
.service-img img{width:100%;height:100%;object-fit:cover}

/* ═══ CONTACT ═══ */
.contact-hero{padding:180px 0 40px}
.contact-hero h1{font-size:clamp(36px,5vw,72px);font-weight:200;line-height:1.05;letter-spacing:-.02em;max-width:800px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;padding:64px 0 120px}
.form-group{margin-bottom:32px}
.form-group label{display:block;font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--text-sec);margin-bottom:10px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 0;border:none;border-bottom:.5px solid var(--accent);background:transparent;font-family:var(--font);font-size:15px;font-weight:300;color:var(--text);outline:none;transition:border-color .4s;-webkit-appearance:none;border-radius:0}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-bottom-color:var(--text)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{cursor:pointer}
.contact-submit{display:inline-flex;align-items:center;gap:14px;padding:16px 32px;background:var(--text);color:var(--bg);border:none;border-radius:999px;font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:.06em;cursor:pointer;transition:all .4s;text-transform:uppercase}
.contact-submit:hover{background:#1a1a1a;transform:translateY(-2px)}
.contact-submit svg{width:16px;height:16px}
.contact-info-block{margin-bottom:48px}
.contact-info-label{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec);margin-bottom:12px}
.contact-info-value{font-size:15px;font-weight:300;line-height:1.6}
.contact-info-value a{border-bottom:.5px solid transparent;transition:border-color .4s}
.contact-info-value a:hover{border-bottom-color:var(--text)}
.contact-socials{display:flex;gap:12px;margin-top:8px}
.contact-socials a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:.5px solid var(--accent);border-radius:50%;transition:all .4s}
.contact-socials a svg{width:17px;height:17px}
.contact-socials a:hover{background:var(--text);color:var(--bg);border-color:var(--text);transform:translateY(-2px)}
.whatsapp-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;background:#c4cbc3;color:var(--text);border-radius:999px;font-size:13px;font-weight:400;letter-spacing:.04em;transition:all .4s;margin-top:16px;text-decoration:none}
.whatsapp-btn:hover{background:#b0b8ae;transform:translateY(-2px)}
.whatsapp-btn svg{width:20px;height:20px;flex-shrink:0}

/* ═══ CTA SIMPLE (non-studio) ═══ */
.cta-simple{padding:96px 0;border-top:.5px solid var(--accent)}
.cta-simple-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.cta-simple-eyebrow{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.18em;color:var(--text-sec);margin-bottom:20px}
.cta-simple-title{font-size:clamp(32px,4vw,52px);font-weight:200;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px}
.cta-simple-sub{font-size:15px;font-weight:300;color:var(--text-sec);line-height:1.6;margin-bottom:32px;max-width:420px}
.cta-simple-contact{display:flex;flex-direction:column;gap:16px}
.cta-simple-contact-item{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:300;color:var(--text-sec)}
.cta-simple-contact-item svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.cta-simple-contact-item a{border-bottom:.5px solid transparent;transition:border-color .3s;color:var(--text)}
.cta-simple-contact-item a:hover{border-bottom-color:var(--text)}
.cta-simple-form .form-group{margin-bottom:24px}
.cta-simple-form .form-group label{display:block;font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--text-sec);margin-bottom:8px}
.cta-simple-form .form-group input,.cta-simple-form .form-group textarea{width:100%;padding:12px 0;border:none;border-bottom:.5px solid var(--accent);background:transparent;font-family:var(--font);font-size:14px;font-weight:300;color:var(--text);outline:none;transition:border-color .4s;-webkit-appearance:none;border-radius:0}
.cta-simple-form .form-group input:focus,.cta-simple-form .form-group textarea:focus{border-bottom-color:var(--text)}
.cta-simple-form .form-group textarea{resize:vertical;min-height:80px}

/* ═══ FOOTER ═══ */
.site-footer{background:var(--text);color:var(--bg);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.footer-col{display:flex;flex-direction:column;gap:16px}
.footer-col-label{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.18em;color:rgba(235,234,231,.5)}
.footer-col-body{display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:300;line-height:1.5}
.footer-col-body a{border-bottom:.5px solid transparent;transition:border-color .4s}
.footer-col-body a:hover{border-bottom-color:rgba(235,234,231,.6)}
.footer-icon{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:rgba(235,234,231,.6)}
.footer-socials{display:flex;gap:14px}
.footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:.5px solid rgba(235,234,231,.3);border-radius:50%;transition:all .4s}
.footer-socials a svg{width:17px;height:17px}
.footer-socials a:hover{background:rgba(235,234,231,.1);border-color:rgba(235,234,231,.7);transform:translateY(-2px)}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:.5px solid rgba(235,234,231,.15);display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer-logo{width:100px;height:auto;filter:brightness(0) invert(1);opacity:.8}
.footer-copy{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:rgba(235,234,231,.45);text-align:right}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10000;display:none;align-items:center;justify-content:center;cursor:pointer}
.lightbox.open{display:flex}
.lightbox img{max-width:90%;max-height:90vh;object-fit:contain}
.lightbox-close{position:absolute;top:24px;right:32px;font-size:28px;color:#ebeae7;background:none;border:none;cursor:pointer}

/* ═══ RESPONSIVE TABLET ═══ */
@media(max-width:1199px){
.container{padding:0 48px}
.nav{padding:24px 48px}.nav.scrolled{padding:16px 48px}
.hero-slide-content{padding:0 48px 80px}
.slider-progress{right:48px}.scroll-ind{left:48px}
.projects-grid{grid-template-columns:repeat(2,1fr);gap:40px 24px}
.project-meta-grid{grid-template-columns:repeat(2,1fr)}
.project-team-grid{grid-template-columns:repeat(2,1fr)}
.service-block{gap:48px}
.contact-grid{gap:64px}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.project-hero-content{padding:0 48px 60px}
.cta-simple-inner{gap:48px}
}

/* ═══ RESPONSIVE MOBILE ═══ */
@media(max-width:767px){
.container{padding:0 20px}
.nav{padding:20px}.nav.scrolled{padding:16px 20px}
.nav-links,.nav-cta{display:none}
.nav-hamburger{display:flex}
.hero-slider{height:85vh;min-height:500px}
.hero-slide-content{padding:0 20px 80px}
.hero-slide-title{font-size:clamp(36px,10vw,52px)}
.slider-progress{right:20px;bottom:28px}
.scroll-ind{display:none}
.projects-hero{padding:140px 0 48px}
.projects-grid{grid-template-columns:1fr;gap:48px}
.project-filters{gap:8px;margin-bottom:40px}
/* MOBILE IMAGE FIX — prevent extreme cropping */
.project-hero{height:50vh;min-height:360px}
.project-hero-content{padding:0 20px 40px}
.project-hero-title{font-size:clamp(32px,9vw,48px)}
.project-meta-grid{grid-template-columns:1fr 1fr}
.project-img-duo{grid-template-columns:1fr}
.project-img img{aspect-ratio:16/10;object-fit:cover}
.gallery-grid{grid-template-columns:repeat(2,1fr)}
.project-team-grid{grid-template-columns:1fr 1fr}
.services-hero{padding:140px 0 48px}
.service-block{grid-template-columns:1fr;gap:32px}
.service-block.reversed{direction:ltr}
/* MOBILE IMAGE FIX — services images show more content */
.service-img{aspect-ratio:16/10}
.contact-hero{padding:140px 0 32px}
.contact-grid{grid-template-columns:1fr;gap:48px}
.cta-simple{padding:64px 0}
.cta-simple-inner{grid-template-columns:1fr;gap:48px}
.footer-grid{grid-template-columns:1fr;gap:28px}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:20px}
.footer-copy{text-align:left}
/* MOBILE IMAGE FIX — card images */
.project-card-img{aspect-ratio:16/10}
/* MOBILE IMAGE FIX — hero slider */
.hero-slide-bg{background-position:center center}
}

/* ═══ WP Admin bar fix ═══ */
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}

/* ═══ PROJECT PLAN (constrained, not fullscreen) ═══ */
.project-plan{
  max-width:680px;
  margin:0 auto 64px;
}
.project-plan img{
  width:100%;
  height:auto;
  display:block;
}

/* ═══ PROJECT CARD OVERLAY (referencia foto adjunta) ═══ */
.project-card-img{position:relative}
.project-card-overlay{
  position:absolute;
  inset:0;
  background:rgba(51,51,51,0);
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:16px;
  gap:8px;
  flex-direction:column;
  transition:background .4s;
}
.project-card:hover .project-card-overlay{background:rgba(51,51,51,.18)}
.project-card-hover-text{
  background:rgba(235,234,231,.92);
  color:var(--text);
  font-size:10px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .3s,transform .3s;
}
.project-card:hover .project-card-hover-text{opacity:1;transform:translateY(0)}

/* ═══ PROJECTS GRID — force 3 cols ═══ */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px 32px;
}

/* ═══ HAMBURGER STAYS VISIBLE WHEN MENU OPEN ═══ */
.nav-hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
  z-index:1002;
  position:relative; /* keep above mobile menu */
  cursor:pointer;
}

/* Mobile menu: hamburger must be z-index above the overlay */
.nav-mobile-menu{z-index:1001}
.nav-hamburger{z-index:1002}

/* ═══ STUDIO NAV — inject nav into studio page ═══ */
.studio-nav-wrapper .nav{position:fixed;top:0;left:0;right:0;z-index:1000}

/* ═══ RESPONSIVE UPDATES ═══ */
@media(max-width:1199px){
  .projects-grid{grid-template-columns:repeat(3,1fr);gap:32px 20px}
}
@media(max-width:900px){
  .projects-grid{grid-template-columns:repeat(2,1fr);gap:32px 16px}
}
@media(max-width:767px){
  /* Projects: 1 col on mobile */
  .projects-grid{grid-template-columns:1fr;gap:40px}
  
  /* Plan constrained on mobile */
  .project-plan{max-width:100%}
  
  /* Nav hamburger fix — always show on mobile */
  .nav-hamburger{display:flex !important}
  .nav-links,.nav-cta{display:none}
  
  /* Prevent hero images from being cropped vertically */
  .hero-slider{height:100svh;min-height:500px}
  .project-hero{height:55vh;min-height:320px}
  
  /* Project card — taller ratio on mobile for better photo */
  .project-card-img{aspect-ratio:4/3}
}
@media(max-width:480px){
  .projects-grid{grid-template-columns:1fr}
}

/* ═══ NAV PARALLAX STATE — always white on hero ═══ */
.nav:not(.scrolled) .nav-links a::after{background:var(--bg)}

/* ═══ HERO SLIDER — parallax + 4s + nav buttons ═══ */
.hero-slide-bg{
  position:absolute;
  inset:-10%;           /* extra space for parallax movement */
  background-size:cover;
  background-position:center;
  will-change:transform;
  transition:transform .1s linear;
}
/* Slider nav arrows */
.slider-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  display:flex;
  gap:0;
}
.slider-nav-btn{
  width:52px;
  height:52px;
  background:rgba(235,234,231,.12);
  border:.5px solid rgba(235,234,231,.35);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .3s,border-color .3s,transform .3s;
  backdrop-filter:blur(8px);
  color:var(--bg);
}
.slider-nav-btn:hover{background:rgba(235,234,231,.25);border-color:rgba(235,234,231,.7);transform:scale(1.05)}
.slider-nav-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.slider-nav-prev{left:40px}
.slider-nav-next{right:40px}

@media(max-width:767px){
  .slider-nav-prev{left:16px}
  .slider-nav-next{right:16px}
  .slider-nav-btn{width:40px;height:40px}
  .slider-nav-btn svg{width:16px;height:16px}
}

/* ═══ STUDIO IMAGES — full width, no crop in mobile ═══ */
/* process-image: full panoramic photo */
.process-image{
  margin-top:80px;
  width:100%;               /* no more calc(100%+80px) overflow */
  height:auto;
  aspect-ratio:16/6;         /* panoramic ratio like the original photo */
  min-height:200px;
  background-size:cover;
  background-position:center;
  display:block;
}
@media(max-width:767px){
  .process-image{
    aspect-ratio:4/3;         /* taller on mobile to show content */
    width:calc(100% + 40px); /* bleed past padding */
    margin-left:-20px;
    min-height:unset;
    height:auto;
  }
}
/* founder photos — fixed aspect ratio, never crop weird */
.founder-photo{
  width:100%;
  aspect-ratio:3/4;
  background-size:cover;
  background-position:center top;
  margin-bottom:32px;
}
@media(max-width:767px){
  .founder-photo{
    aspect-ratio:4/5;
    background-position:center top;
  }
}
/* Team card photos */
.team-card-photo{
  width:100%;
  aspect-ratio:2/3;
  background-size:cover;
  background-position:center top;
  margin-bottom:16px;
}

/* ═══ NAV ADAPTIVE COLORS ═══
   Pages with dark hero (home, studio, project single): nav starts white
   Pages with light bg (projects, services, contact): nav starts dark
*/

/* Pages starting with dark hero → white nav */
body.home .nav:not(.scrolled) .nav-logo-svg,
body.page-studio-body .nav:not(.scrolled) .nav-logo-svg,
body.single-dearc_project .nav:not(.scrolled) .nav-logo-svg{fill:var(--bg)}

body.home .nav:not(.scrolled) .nav-links a,
body.page-studio-body .nav:not(.scrolled) .nav-links a,
body.single-dearc_project .nav:not(.scrolled) .nav-links a{color:var(--bg)}
body.home .nav:not(.scrolled) .nav-links a::after,
body.page-studio-body .nav:not(.scrolled) .nav-links a::after,
body.single-dearc_project .nav:not(.scrolled) .nav-links a::after{background:var(--bg)}

body.home .nav:not(.scrolled) .nav-cta,
body.page-studio-body .nav:not(.scrolled) .nav-cta,
body.single-dearc_project .nav:not(.scrolled) .nav-cta{color:var(--bg);border-color:rgba(235,234,231,.5)}
body.home .nav:not(.scrolled) .nav-cta:hover,
body.page-studio-body .nav:not(.scrolled) .nav-cta:hover,
body.single-dearc_project .nav:not(.scrolled) .nav-cta:hover{background:rgba(235,234,231,.15)}

body.home .nav:not(.scrolled) .nav-hamburger span,
body.page-studio-body .nav:not(.scrolled) .nav-hamburger span,
body.single-dearc_project .nav:not(.scrolled) .nav-hamburger span{background:var(--bg)}

/* Pages starting with light bg → dark nav from the start */
body.page-template-page-proyectos .nav-logo-svg,
body.page-template-page-proyectos-php .nav-logo-svg,
body.page-template-page-servicios .nav-logo-svg,
body.page-template-page-servicios-php .nav-logo-svg,
body.page-template-page-contacto .nav-logo-svg,
body.page-template-page-contacto-php .nav-logo-svg{fill:var(--text)}
body.page-template-page-proyectos .nav-links a,
body.page-template-page-proyectos-php .nav-links a,
body.page-template-page-servicios .nav-links a,
body.page-template-page-servicios-php .nav-links a,
body.page-template-page-contacto .nav-links a,
body.page-template-page-contacto-php .nav-links a{color:var(--text)}
body.page-template-page-proyectos .nav-cta,
body.page-template-page-proyectos-php .nav-cta,
body.page-template-page-servicios .nav-cta,
body.page-template-page-servicios-php .nav-cta,
body.page-template-page-contacto .nav-cta,
body.page-template-page-contacto-php .nav-cta{color:var(--text);border-color:var(--text)}
body.page-template-page-proyectos .nav-hamburger span,
body.page-template-page-proyectos-php .nav-hamburger span,
body.page-template-page-servicios .nav-hamburger span,
body.page-template-page-servicios-php .nav-hamburger span,
body.page-template-page-contacto .nav-hamburger span,
body.page-template-page-contacto-php .nav-hamburger span{background:var(--text)}

/* ═══ SLIDER NAV ARROWS — additional positioning fix ═══ */
.slider-nav-prev,.slider-nav-next{position:absolute;top:50%;transform:translateY(-50%);z-index:10}

/* ══════════════════════════════════════════════════════════
   STUDIO PAGE — integrated as proper WP template
   All classes prefixed "studio-" to avoid conflicts
   ══════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────── */
.studio-hero{position:relative;width:100%;height:90vh;min-height:500px;overflow:hidden}
.studio-hero-bg{position:absolute;inset:0;background:#3a3a38 url('https://darksalmon-dragonfly-484912.hostingersite.com/fotostemp/Foto-Hero.jpg') center/cover no-repeat}
.studio-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.58) 100%)}
.studio-hero-content{position:absolute;bottom:0;left:0;right:0;padding:0 80px 80px;max-width:1400px;margin:0 auto}
.studio-hero-eyebrow{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:rgba(235,234,231,.5);margin-bottom:24px}
.studio-hero-title{font-size:clamp(52px,8.5vw,136px);font-weight:200;line-height:.9;letter-spacing:-.03em;color:var(--bg);max-width:920px}
.studio-scroll-ind{position:absolute;right:80px;bottom:80px;display:flex;flex-direction:column;align-items:center;gap:12px}
.studio-scroll-ind span{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:rgba(235,234,231,.45);writing-mode:vertical-rl}
.studio-scroll-line{width:1px;height:40px;background:rgba(235,234,231,.3);position:relative;overflow:hidden}
.studio-scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--bg);animation:scrollPulse 2s ease-in-out infinite}

/* ── SECTION LABEL (vertical) ─────────────────────────────── */
.studio-section-label{position:absolute;left:-48px;top:0;font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);writing-mode:vertical-rl;transform:rotate(180deg)}

/* ── MANIFIESTO ───────────────────────────────────────────── */
.studio-manifiesto{padding:160px 0 120px}
.studio-manif-grid{display:grid;grid-template-columns:1fr 5fr 2fr;gap:0;align-items:start}
.studio-manif-logo img{width:100%;max-width:120px;height:auto;opacity:.9;display:block}
.studio-manif-body{font-size:clamp(17px,1.8vw,23px);font-weight:300;line-height:1.65;color:var(--text);max-width:700px}
.studio-stats{grid-column:2/4;display:flex;gap:56px;margin-top:80px;justify-content:flex-end}
.studio-stat-n{font-size:clamp(44px,5.5vw,72px);font-weight:200;line-height:1;letter-spacing:-.02em;color:var(--text)}
.studio-stat-l{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec);margin-top:8px}

/* ── FOUNDERS ─────────────────────────────────────────────── */
.studio-founders{padding:120px 0 160px;border-top:.5px solid var(--accent)}
.studio-founders-header{margin-bottom:80px}
.studio-founders-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.studio-founder-photo{width:100%;aspect-ratio:3/4;margin-bottom:28px;background-size:cover;background-position:center top}
.studio-founder-name{font-size:26px;font-weight:300;line-height:1.2;margin-bottom:6px}
.studio-founder-role{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec);margin-bottom:24px}
.studio-founder-bio{font-size:14px;font-weight:300;line-height:1.75;color:var(--text-sec);max-width:480px}

/* ── PROCESS ──────────────────────────────────────────────── */
.studio-process{padding:120px 0 80px;border-top:.5px solid var(--accent)}
.studio-process-header{margin-bottom:80px}
.studio-process-title{font-size:clamp(34px,4vw,54px);font-weight:200;line-height:1.05;letter-spacing:-.02em;margin-top:16px}
.studio-process-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.studio-process-step{padding:40px 32px;border-left:.5px solid var(--accent)}
.studio-process-step:first-child{border-left:none;padding-left:0}
.studio-step-n{font-size:52px;font-weight:200;color:var(--accent);line-height:1;margin-bottom:24px;letter-spacing:-.02em}
.studio-step-name{font-size:17px;font-weight:300;margin-bottom:14px}
.studio-step-desc{font-size:13px;font-weight:300;line-height:1.75;color:var(--text-sec)}
.studio-process-img{width:100%;margin-top:80px;aspect-ratio:16/5;background-size:cover;background-position:center;display:block}

/* ── TEAM ─────────────────────────────────────────────────── */
.studio-team{padding:120px 0 160px;border-top:.5px solid var(--accent)}
.studio-team-header{margin-bottom:16px}
.studio-team-title{font-size:clamp(34px,4vw,54px);font-weight:200;line-height:1.05;letter-spacing:-.02em;margin-top:16px;margin-bottom:64px}
.studio-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}
.studio-team-photo{width:100%;aspect-ratio:2/3;background-size:cover;background-position:center top;margin-bottom:16px}
.studio-team-name{font-size:15px;font-weight:300;line-height:1.3}
.studio-team-role{font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:var(--text-sec);margin-top:4px}

/* ── PRESENCE ─────────────────────────────────────────────── */
.studio-presence{background:var(--green);padding:160px 0;position:relative;overflow:hidden}
.studio-presence .container{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.studio-presence-text{color:var(--bg)}
.studio-presence-title{font-size:clamp(34px,4vw,54px);font-weight:200;line-height:1.05;letter-spacing:-.02em;margin-bottom:32px}
.studio-presence-body{font-size:14px;font-weight:300;line-height:1.75;opacity:.85}
.studio-presence-map{width:100%;aspect-ratio:1262/792;min-height:280px;display:block;position:relative}
.studio-presence-map .presence-svg{width:100%;height:100%;display:block;overflow:visible}
.studio-presence-footer{position:absolute;bottom:32px;right:80px;font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.15em;color:rgba(235,234,231,.35)}

/* ── CLIENTS / MARQUEE ────────────────────────────────────── */
.studio-clients{padding:120px 0 160px;overflow:hidden}
.studio-clients-header{margin-bottom:64px}
.studio-marquee-wrap{display:flex;flex-direction:column;gap:28px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.studio-marquee-row{display:flex;width:max-content;gap:60px;align-items:center}
.studio-marquee-track{display:flex;gap:60px;align-items:center;flex-shrink:0;padding-right:60px}
.studio-marquee-row.row-rtl .studio-marquee-track{animation:studio-rtl 35s linear infinite}
.studio-marquee-row.row-ltr .studio-marquee-track{animation:studio-ltr 35s linear infinite}
@keyframes studio-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes studio-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.studio-marquee-logo{flex-shrink:0;height:52px;width:auto;max-width:150px;object-fit:contain;opacity:.5;filter:grayscale(100%);transition:opacity .4s,filter .4s}
.studio-marquee-logo:hover{opacity:1;filter:grayscale(0%)}

/* ── STUDIO NAV (dark hero at top → white nav) ────────────── */
body.page-template-page-studio .nav:not(.scrolled) .nav-logo-svg{fill:var(--bg)}
body.page-template-page-studio .nav:not(.scrolled) .nav-links a{color:var(--bg)}
body.page-template-page-studio .nav:not(.scrolled) .nav-links a::after{background:var(--bg)}
body.page-template-page-studio .nav:not(.scrolled) .nav-cta{color:var(--bg);border-color:rgba(235,234,231,.5)}
body.page-template-page-studio .nav:not(.scrolled) .nav-cta:hover{background:rgba(235,234,231,.15)}
body.page-template-page-studio .nav:not(.scrolled) .nav-hamburger span{background:var(--bg)}

/* ── MAP SVG ANIMATIONS ────────────────────────────────────── */
.cls-1,.cls-2,.cls-3,.cls-4{fill:#ebeae7;fill-opacity:.88;stroke:#beb7af;stroke-width:.6px;stroke-miterlimit:10;transition:fill-opacity .6s}
.dearc-country-pulse{animation:dearc-cp 4.5s ease-in-out infinite}
@keyframes dearc-cp{0%,100%{fill-opacity:.88}50%{fill-opacity:1}}
.dearc-arc{fill:none;stroke:#ebeae7;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;filter:drop-shadow(0 0 3px rgba(235,234,231,.55));animation:dearc-arc-draw 6s ease-in-out infinite}
@keyframes dearc-arc-draw{0%{stroke-dashoffset:1200;opacity:0}15%{opacity:1}55%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.dearc-dot{fill:#ebeae7;animation:dearc-dp 4.5s ease-in-out infinite}
@keyframes dearc-dp{0%,100%{r:4;opacity:.95}50%{r:7;opacity:1}}
.dearc-dot-ring{fill:none;stroke:#ebeae7;stroke-width:1;opacity:0;animation:dearc-dr 4.5s ease-out infinite}
@keyframes dearc-dr{0%{r:4;opacity:.8}100%{r:22;opacity:0}}
.dearc-particle{fill:#ebeae7;filter:drop-shadow(0 0 4px rgba(235,234,231,.9));offset-path:path("M 570,540 Q 840,-60 1105,100");offset-rotate:0deg;animation:dearc-pm 6s ease-in-out infinite}
@keyframes dearc-pm{0%{offset-distance:0%;opacity:0}15%{opacity:1}55%{offset-distance:100%;opacity:1}65%{opacity:0}100%{offset-distance:100%;opacity:0}}

/* ── PROJECTS PAGE — fixes ────────────────────────────────── */
/* Eyebrow letter-spacing misalignment fix */
.projects-hero .eyebrow{margin-left:-.075em}
.projects-hero h1{margin-left:0}

/* Single project — center content */
.project-content{padding:80px 0 0}
.project-text{font-size:17px;font-weight:300;line-height:1.75;max-width:780px;margin:0 auto 64px;text-align:left}
.project-img{width:100%;margin-bottom:64px;overflow:hidden}
.project-img img{width:100%;height:auto;object-fit:cover;transition:transform .8s;display:block}
.project-img:hover img{transform:scale(1.02)}
.project-img-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:64px}
.project-img-duo .project-img{margin-bottom:0}
.project-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}

/* ══════════════════════════════════════════════════════════
   STUDIO RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media(max-width:1199px){
  .studio-hero-content{padding:0 48px 60px}
  .studio-scroll-ind{right:48px;bottom:60px}
  .studio-section-label{display:none}
  .studio-manif-grid{grid-template-columns:1fr}
  .studio-manif-logo{margin-bottom:32px}
  .studio-stats{grid-column:1;justify-content:flex-start;flex-wrap:wrap;gap:40px;margin-top:48px}
  .studio-founders-grid{gap:48px}
  .studio-founder-bio{max-width:100%}
  .studio-process-grid{grid-template-columns:repeat(2,1fr)}
  .studio-process-step{border-left:none!important;padding-left:0!important;border-top:.5px solid var(--accent);padding:32px 0}
  .studio-process-step:nth-child(2n){padding-left:32px!important;border-left:.5px solid var(--accent)!important}
  .studio-process-step:nth-child(1),.studio-process-step:nth-child(2){border-top:none}
  .studio-presence .container{grid-template-columns:1fr 1fr;gap:48px}
  .studio-presence-footer{right:48px}
}
@media(max-width:767px){
  .studio-hero{height:100svh;min-height:500px}
  .studio-hero-content{padding:0 20px 56px}
  .studio-hero-title{font-size:clamp(38px,10vw,52px);line-height:1;max-width:100%}
  .studio-scroll-ind{right:20px;bottom:40px}
  .studio-manifiesto{padding:80px 0 64px}
  .studio-stats{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
  .studio-stat-n{font-size:40px}
  .studio-founders{padding:64px 0 80px}
  .studio-founders-grid{grid-template-columns:1fr;gap:60px}
  .studio-founder-name{font-size:22px}
  .studio-process{padding:64px 0 48px}
  .studio-process-grid{grid-template-columns:1fr}
  .studio-process-step{border-top:.5px solid var(--accent)!important;border-left:none!important;padding:28px 0!important}
  .studio-process-step:first-child{border-top:none!important}
  .studio-step-n{font-size:36px}
  .studio-process-img{aspect-ratio:4/3;width:calc(100% + 40px);margin-left:-20px;margin-top:48px}
  .studio-team{padding:64px 0 80px}
  .studio-team-grid{grid-template-columns:1fr 1fr;gap:24px 16px}
  .studio-presence{padding:80px 0 64px}
  .studio-presence .container{grid-template-columns:1fr;gap:40px}
  .studio-presence-title{font-size:30px}
  .studio-presence-footer{position:static;margin-top:24px;text-align:right}
  .studio-presence-map{width:100%;min-height:unset;aspect-ratio:1262/792}
  .studio-clients{padding:64px 0 80px}
  .studio-marquee-logo{height:40px;max-width:110px}
  .studio-marquee-row,.studio-marquee-track{gap:40px}
  .studio-marquee-track{padding-right:40px}
  .project-meta-grid{grid-template-columns:1fr 1fr;text-align:left}
}

/* ══════════════════════════════════════════════════════════════════
   STUDIO v2 — AWWWARDS EDITORIAL REDESIGN
   Concept: Luxury architecture editorial — oversized type, asymmetric
   grid, clip-path reveals, spatial composition, refined motion.
   All classes prefixed "st-" (studio redesign).
   ══════════════════════════════════════════════════════════════════ */

/* ── NAV: white on dark hero ──────────────────────────────────────── */
body.page-template-page-studio .nav:not(.scrolled) .nav-logo-svg{fill:var(--bg)}
body.page-template-page-studio .nav:not(.scrolled) .nav-links a{color:var(--bg)}
body.page-template-page-studio .nav:not(.scrolled) .nav-links a::after{background:var(--bg)}
body.page-template-page-studio .nav:not(.scrolled) .nav-cta{color:var(--bg);border-color:rgba(235,234,231,.5)}
body.page-template-page-studio .nav:not(.scrolled) .nav-cta:hover{background:rgba(235,234,231,.15)}
body.page-template-page-studio .nav:not(.scrolled) .nav-hamburger span{background:var(--bg)}

/* Remove old studio-* nav rule so it doesn't conflict */
body.page-template-page-studio .nav:not(.scrolled) .nav-logo-img{filter:brightness(0) invert(1)}


/* ──────────────────────────────────────────────────────────────────
   01 · HERO — full-bleed cinematic
   ────────────────────────────────────────────────────────────────── */
.st-hero{
  position:relative; width:100%; height:100vh; min-height:600px;
  overflow:hidden; background:#1a1a18;
}

.st-hero-img{
  position:absolute; inset:-6%; /* extra for parallax */
  background-size:cover; background-position:center;
  will-change:transform; transition:transform .1s linear;
}

.st-hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(
    115deg,
    rgba(15,14,12,.72) 0%,
    rgba(15,14,12,.35) 55%,
    rgba(15,14,12,.6) 100%
  );
}

/* Index label */
.st-hero-index{
  position:absolute; top:calc(50% - 60px); left:80px;
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.2em; color:rgba(235,234,231,.35);
  writing-mode:vertical-rl; transform:rotate(180deg);
}

/* Main copy — anchored to bottom-left */
.st-hero-copy{
  position:absolute; bottom:0; left:0; right:0;
  padding:0 80px 72px; max-width:1400px; margin:0 auto;
}

.st-hero-tag{
  font-size:10px; font-weight:400; text-transform:uppercase;
  letter-spacing:.22em; color:rgba(235,234,231,.45);
  margin-bottom:28px; display:block;
}

.st-hero-title{
  display:flex; flex-direction:column;
  font-size:clamp(56px,9.5vw,152px);
  font-weight:200; line-height:.88;
  letter-spacing:-.04em; color:var(--bg);
  overflow:hidden;
}

/* Each line reveals with a clip from bottom */
.st-ht-line{
  display:block;
  clip-path:inset(0 0 100% 0);
  animation:stLineReveal .9s cubic-bezier(.16,1,.3,1) forwards;
  opacity:0;
}
.st-ht-1{animation-delay:.1s}
.st-ht-2{animation-delay:.25s; padding-left:clamp(32px,4vw,96px)}
.st-ht-3{animation-delay:.4s; padding-left:clamp(64px,8vw,192px)}

@keyframes stLineReveal{
  0%{clip-path:inset(0 0 100% 0);opacity:0;transform:translateY(20px)}
  100%{clip-path:inset(0 0 0% 0);opacity:1;transform:translateY(0)}
}

/* Scroll cue */
.st-hero-scroll{
  position:absolute; right:80px; bottom:72px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.st-hero-scroll span{
  font-size:8px; font-weight:400; text-transform:uppercase;
  letter-spacing:.2em; color:rgba(235,234,231,.4);
  writing-mode:vertical-rl;
}
.st-hero-scroll-line{
  width:1px; height:56px; background:rgba(235,234,231,.2);
  position:relative; overflow:hidden;
}
.st-hero-scroll-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:rgba(235,234,231,.7);
  animation:stScrollPulse 2.2s ease-in-out infinite;
}
@keyframes stScrollPulse{
  0%{top:-100%} 50%{top:100%} 100%{top:100%}
}

/* Year stamp */
.st-hero-year{
  position:absolute; bottom:80px; left:50%;
  transform:translateX(-50%);
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.2em; color:rgba(235,234,231,.25);
}


/* ──────────────────────────────────────────────────────────────────
   SHARED: section header strip
   ────────────────────────────────────────────────────────────────── */
.st-section-head{
  display:flex; align-items:baseline; gap:24px;
  padding:48px 80px;
  border-bottom:.5px solid var(--accent);
  max-width:1400px; margin:0 auto;
}
.st-sh-num{
  font-size:11px; font-weight:400; text-transform:uppercase;
  letter-spacing:.18em; color:var(--accent); flex-shrink:0;
  margin-right:8px;
}
.st-sh-label{
  font-size:clamp(28px,3.5vw,48px); font-weight:200;
  letter-spacing:-.02em; color:var(--text); flex:1;
}
.st-sh-sub{
  font-size:12px; font-weight:300; color:var(--text-sec);
  text-align:right; max-width:260px; line-height:1.5;
}


/* ──────────────────────────────────────────────────────────────────
   02 · MANIFIESTO — editorial split
   ────────────────────────────────────────────────────────────────── */
.st-manif{
  padding:0;
  background:var(--bg);
}

.st-manif-track{
  display:grid; grid-template-columns:280px 1fr;
  max-width:1400px; margin:0 auto;
  min-height:600px;
}

/* Left column: giant decorative number + label */
.st-manif-left{
  border-right:.5px solid var(--accent);
  padding:80px 48px 80px 80px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}

.st-num-deco{
  font-size:clamp(140px,14vw,240px);
  font-weight:200; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(190,183,175,.35);
  letter-spacing:-.05em;
  pointer-events:none; user-select:none;
  position:absolute; bottom:-24px; left:24px;
}

.st-manif-tag{
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.18em; color:var(--text-sec);
  align-self:flex-start;
  position:relative; z-index:1;
}

/* Right column */
.st-manif-right{
  padding:80px 80px 80px 80px;
  display:flex; flex-direction:column; justify-content:center; gap:72px;
}

.st-manif-lead{
  font-size:clamp(18px,2vw,26px); font-weight:300; line-height:1.65;
  color:var(--text); max-width:720px;
}

/* Stats */
.st-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border-top:.5px solid var(--accent); padding-top:48px;
}

.st-stat{
  padding-right:32px;
  border-right:.5px solid var(--accent);
}
.st-stat:last-child{border-right:none}
.st-stat:first-child{padding-left:0}
.st-stat+.st-stat{padding-left:32px}

.st-stat-n{
  font-size:clamp(52px,5.5vw,80px); font-weight:200;
  letter-spacing:-.03em; line-height:1; color:var(--text);
  margin-bottom:12px;
}
.st-stat-n sup{font-size:.45em; vertical-align:super}

.st-stat-label{
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.18em; color:var(--text-sec);
}


/* ──────────────────────────────────────────────────────────────────
   03 · FUNDADORES — oversized, asymmetric
   ────────────────────────────────────────────────────────────────── */
.st-founders{
  background:var(--bg); padding-bottom:160px;
}

.st-founders-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; max-width:1400px; margin:0 auto;
  padding:80px 80px 0;
}

.st-founder{
  display:grid; grid-template-rows:auto 1fr;
  padding-right:64px;
}
.st-founder:last-child{
  padding-right:0; padding-left:64px;
  border-left:.5px solid var(--accent);
  margin-top:120px; /* offset for asymmetry */
}

/* Photo */
.st-founder-media{
  position:relative; margin-bottom:40px;
}
.st-founder-img{
  width:100%; aspect-ratio:4/5;
  background-size:cover; background-position:center top;
  /* clip reveals on scroll */
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s cubic-bezier(.16,1,.3,1);
}
.st-founder:hover .st-founder-img{
  clip-path:inset(0 0 4% 0);
}

.st-founder-idx{
  position:absolute; bottom:-28px; right:-20px;
  font-size:clamp(72px,8vw,120px); font-weight:200;
  line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(190,183,175,.4);
  pointer-events:none; user-select:none;
  letter-spacing:-.04em;
}

/* Text */
.st-founder-body{}

.st-founder-name{
  font-size:clamp(28px,3vw,42px); font-weight:200;
  line-height:1.05; letter-spacing:-.025em;
  color:var(--text); margin-bottom:10px;
}
.st-founder-role{
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.15em; color:var(--text-sec);
}
.st-founder-divider{
  width:32px; height:.5px; background:var(--accent);
  margin:24px 0;
}
.st-founder-bio{
  font-size:14px; font-weight:300; line-height:1.8;
  color:var(--text-sec); max-width:460px;
}


/* ──────────────────────────────────────────────────────────────────
   04 · PROCESO — horizontal timeline
   ────────────────────────────────────────────────────────────────── */
.st-process{
  background:#1a1a18; color:var(--bg);
  padding-bottom:0; overflow:hidden;
}

/* Section head on dark bg */
.st-process .st-section-head{
  border-bottom-color:rgba(235,234,231,.12);
  padding-left:80px; padding-right:80px;
}
.st-process .st-sh-num{color:rgba(235,234,231,.3)}
.st-process .st-sh-label{color:var(--bg)}
.st-process .st-sh-sub{color:rgba(235,234,231,.4)}

/* Large italic headline */
.st-process-headline{
  max-width:1400px; margin:0 auto;
  padding:80px 80px 72px;
  text-align:center;
}
.st-process-h{
  font-size:clamp(40px,6vw,88px); font-weight:200;
  line-height:1.0; letter-spacing:-.03em; color:var(--bg);
  text-align:center;
}
.st-process-h em{
  font-style:italic;
  color:var(--green);
}

/* Steps — 4 columns with connecting dots+lines */
.st-steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:1400px; margin:0 auto;
  padding:0 80px 96px;
  border-top:.5px solid rgba(235,234,231,.1);
  padding-top:56px;
}

.st-step{}

.st-step-track{
  display:flex; align-items:center; margin-bottom:32px;
  height:20px; position:relative;
}
.st-step-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green); flex-shrink:0; position:relative; z-index:1;
}
.st-step-line{
  flex:1; height:.5px; background:rgba(235,234,231,.15);
}

.st-step-body{
  padding-right:40px;
}

.st-step-n{
  font-size:clamp(56px,5vw,80px); font-weight:200;
  color:rgba(235,234,231,.08); line-height:1;
  letter-spacing:-.04em; margin-bottom:20px;
  transition:color .5s ease;
}
.st-step:hover .st-step-n{color:rgba(235,234,231,.18)}

.st-step-name{
  font-size:20px; font-weight:300; color:var(--bg);
  margin-bottom:16px; letter-spacing:-.01em;
}
.st-step-desc{
  font-size:13px; font-weight:300; line-height:1.8;
  color:rgba(235,234,231,.55);
}

/* Full-bleed process photo */
.st-process-photo{
  width:100%; height:60vh; min-height:360px;
  background-size:cover; background-position:center;
  position:relative; display:flex; align-items:flex-end;
}
.st-process-photo::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(15,14,12,.7) 100%);
}
.st-process-photo-label{
  position:relative; z-index:1;
  padding:0 80px 40px;
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.18em; color:rgba(235,234,231,.35);
}


/* ──────────────────────────────────────────────────────────────────
   05 · EQUIPO — 3-col masonry grid with hover reveal
   ────────────────────────────────────────────────────────────────── */
.st-team{
  background:var(--bg); padding-bottom:160px;
}

.st-team-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:40px; /* was 2px — generous spacing between cards */
  max-width:1400px; margin:0 auto;
  padding:48px 80px 0;
}

.st-card{
  position:relative; overflow:hidden; cursor:default;
}

.st-card-photo{
  width:100%; aspect-ratio:3/4;
  background-size:cover; background-position:center top;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.st-card:hover .st-card-photo{transform:scale(1.04)}

.st-card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(26,26,24,.75) 100%);
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:20px;
  opacity:0; transition:opacity .5s ease;
}
.st-card:hover .st-card-overlay{opacity:1}

.st-card-num{
  font-size:clamp(40px,4vw,64px); font-weight:200;
  color:rgba(235,234,231,.2); letter-spacing:-.04em; line-height:1;
  -webkit-text-stroke:.5px rgba(235,234,231,.3);
}

.st-card-info{
  padding:20px 0;
  border-top:.5px solid var(--accent);
  margin-top:0;
}
.st-card-name{
  font-size:15px; font-weight:300; color:var(--text); line-height:1.3;
  margin-bottom:4px;
}
.st-card-role{
  font-size:8px; font-weight:400; text-transform:uppercase;
  letter-spacing:.15em; color:var(--text-sec);
}


/* ──────────────────────────────────────────────────────────────────
   06 · PRESENCIA + MAPA — same as original, kept
   ────────────────────────────────────────────────────────────────── */
.st-presence{
  background:var(--green); padding:160px 0; position:relative; overflow:hidden;
}
.st-presence .container{
  display:grid; grid-template-columns:5fr 7fr; gap:80px; align-items:center;
}
.st-pres-text{color:var(--bg)}
.st-pres-tag{
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.15em; color:rgba(235,234,231,.6); margin-bottom:24px;
}
.st-pres-title{
  font-size:clamp(34px,4vw,56px); font-weight:200;
  line-height:1.05; letter-spacing:-.02em; margin-bottom:32px;
}
.st-pres-body{
  font-size:14px; font-weight:300; line-height:1.75; opacity:.85;
  overflow-wrap:break-word;
}
.st-pres-map{
  width:100%; aspect-ratio:1262/792; min-height:280px;
  display:block; position:relative;
}
.st-pres-map svg,.st-pres-map .presence-svg{
  width:100%; height:100%; display:block; overflow:visible;
}
.st-pres-footer{
  position:absolute; bottom:32px; right:80px;
  font-size:9px; font-weight:400; text-transform:uppercase;
  letter-spacing:.15em; color:rgba(235,234,231,.3);
}

/* MAP SVG animations */
.cls-1,.cls-2,.cls-3,.cls-4{fill:#ebeae7;fill-opacity:.88;stroke:#beb7af;stroke-width:.6px;stroke-miterlimit:10;transition:fill-opacity .6s}
.dearc-country-pulse{animation:dearc-cp 4.5s ease-in-out infinite}
@keyframes dearc-cp{0%,100%{fill-opacity:.88}50%{fill-opacity:1}}
.dearc-arc{fill:none;stroke:#ebeae7;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;filter:drop-shadow(0 0 3px rgba(235,234,231,.55));animation:dearc-arc-draw 6s ease-in-out infinite}
@keyframes dearc-arc-draw{0%{stroke-dashoffset:1200;opacity:0}15%{opacity:1}55%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.dearc-dot{fill:#ebeae7;animation:dearc-dp 4.5s ease-in-out infinite}
@keyframes dearc-dp{0%,100%{r:4;opacity:.95}50%{r:7;opacity:1}}
.dearc-dot-ring{fill:none;stroke:#ebeae7;stroke-width:1;opacity:0;animation:dearc-dr 4.5s ease-out infinite}
@keyframes dearc-dr{0%{r:4;opacity:.8}100%{r:22;opacity:0}}
.dearc-particle{fill:#ebeae7;filter:drop-shadow(0 0 4px rgba(235,234,231,.9));offset-path:path("M 570,540 Q 840,-60 1105,100");offset-rotate:0deg;animation:dearc-pm 6s ease-in-out infinite}
@keyframes dearc-pm{0%{offset-distance:0%;opacity:0}15%{opacity:1}55%{offset-distance:100%;opacity:1}65%{opacity:0}100%{offset-distance:100%;opacity:0}}


/* ──────────────────────────────────────────────────────────────────
   07 · CLIENTES — marquee kept, faster
   ────────────────────────────────────────────────────────────────── */
.st-clients{
  padding:120px 0 160px; overflow:hidden; background:var(--bg);
}
.st-clients .st-section-head{margin-bottom:64px}

.st-marquee-wrap{
  display:flex; flex-direction:column; gap:28px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.st-marquee-row{display:flex;width:max-content;gap:60px;align-items:center}
.st-marquee-track{display:flex;gap:60px;align-items:center;flex-shrink:0;padding-right:60px}
.st-marquee-row.row-rtl .st-marquee-track{animation:st-rtl 30s linear infinite}
.st-marquee-row.row-ltr .st-marquee-track{animation:st-ltr 30s linear infinite}
@keyframes st-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes st-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.st-marquee-logo{flex-shrink:0;height:52px;width:auto;max-width:150px;object-fit:contain;opacity:.45;filter:grayscale(100%);transition:opacity .4s,filter .4s}
.st-marquee-logo:hover{opacity:1;filter:grayscale(0%)}


/* ──────────────────────────────────────────────────────────────────
   PROJECTS — alignment fixes
   ────────────────────────────────────────────────────────────────── */
.projects-hero .eyebrow{margin-left:-.075em}
.project-text{font-size:17px;font-weight:300;line-height:1.75;max-width:780px;margin:0 auto 64px;text-align:left}
.project-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}


/* ──────────────────────────────────────────────────────────────────
   RESPONSIVE — STUDIO v2
   ────────────────────────────────────────────────────────────────── */
@media(max-width:1199px){
  .st-hero-copy,.st-hero-scroll{padding-left:48px;padding-right:48px}
  .st-hero-index{left:48px}
  .st-section-head{padding-left:48px;padding-right:48px}
  .st-manif-track{grid-template-columns:200px 1fr}
  .st-manif-left{padding-left:48px;padding-right:32px}
  .st-manif-right{padding:80px 48px}
  .st-process-headline,.st-steps{padding-left:48px;padding-right:48px}
  .st-process-photo-label{padding-left:48px}
  .st-founders-grid{padding:80px 48px 0}
  .st-team-grid{padding:48px 48px 0}
  .st-presence .container{grid-template-columns:1fr 1fr;gap:48px}
  .st-pres-footer{right:48px}
}

@media(max-width:900px){
  .st-manif-track{grid-template-columns:1fr}
  .st-manif-left{border-right:none;border-bottom:.5px solid var(--accent);padding:48px 48px 32px}
  .st-manif-right{padding:48px}
  .st-num-deco{font-size:120px;bottom:-12px;left:16px}
  .st-steps{grid-template-columns:repeat(2,1fr);gap:0;row-gap:56px}
  .st-step:nth-child(2) .st-step-line,.st-step:nth-child(4) .st-step-line{display:none}
  .st-founders-grid{grid-template-columns:1fr}
  .st-founder:last-child{padding-left:0;border-left:none;margin-top:80px;padding-top:64px;border-top:.5px solid var(--accent)}
  .st-team-grid{grid-template-columns:repeat(2,1fr)}
  .st-presence .container{grid-template-columns:1fr}
}

@media(max-width:767px){
  /* ── HERO MÓVIL: foto completa horizontal + bloque negro debajo ─ */
  /* Layout cambia de overlay a stacked: foto arriba, texto abajo   */
  .st-hero{
    height:auto; min-height:unset;
    display:flex; flex-direction:column;
    background:#000;
  }
  /* Hero bg: relative so it flows in the column, not absolute */
  .st-hero-bg{
    position:relative;
    width:100%; height:auto; flex-shrink:0;
  }
  /* Photo: full width, 4:3 ratio — shows complete without vertical crop */
  .st-hero-img{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:4/3;
    background-size:cover;
    background-position:center center;
  }
  /* Keep a soft veil on the photo itself */
  .st-hero-veil{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.18);
  }
  /* Text block: stacked below photo, solid black fill */
  .st-hero-copy{
    position:relative;
    inset:auto;
    background:#000;
    padding:36px 24px 48px;
    margin:0; max-width:100%; width:100%;
  }
  .st-hero-tag{
    color:rgba(235,234,231,.45);
    text-align:left;
  }
  .st-hero-title{
    font-size:clamp(34px,9vw,52px);
    text-align:left;
    color:#ebeae7;
  }
  /* Remove staggered indent — no room on mobile */
  .st-ht-2{padding-left:0}
  .st-ht-3{padding-left:0}
  /* Hide overlay elements that no longer make sense */
  .st-hero-scroll{display:none}
  .st-hero-index{display:none}
  .st-hero-year{display:none}

  /* ── SECTION HEADS ──────────────────────────────────────────── */
  .st-section-head{padding:32px 20px;gap:14px;flex-wrap:wrap}
  .st-sh-label{font-size:clamp(22px,6vw,32px)}
  .st-sh-sub{text-align:left;max-width:100%}

  /* ── MANIFIESTO ─────────────────────────────────────────────── */
  .st-manif-left{padding:32px 20px}
  .st-manif-right{padding:32px 20px}
  .st-manif-lead{font-size:17px}

  /* Stats 2×2 grid — centered text, clean border cross */
  .st-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding-top:32px;
    gap:0;
  }
  .st-stat{
    padding:28px 20px;
    text-align:center;
    border-right:none;
    border-bottom:.5px solid var(--accent);
  }
  .st-stat-n{text-align:center}
  .st-stat-label{text-align:center}
  /* right border only for left column cells */
  .st-stat:nth-child(odd){
    border-right:.5px solid var(--accent);
  }
  /* remove bottom border from last row */
  .st-stat:nth-child(3),
  .st-stat:nth-child(4){border-bottom:none}
  /* override desktop padding-left/right overrides */
  .st-stat+.st-stat{padding-left:20px}

  /* ── FOUNDERS ───────────────────────────────────────────────── */
  .st-founders-grid{padding:40px 20px 0;grid-template-columns:1fr}
  .st-founder,.st-founder:last-child{padding:0;border:none;margin-top:0}
  .st-founder+.st-founder{margin-top:64px;padding-top:48px;border-top:.5px solid var(--accent)}
  .st-founder-idx{font-size:60px;bottom:-16px;right:-8px}

  /* ── PROCESO ────────────────────────────────────────────────── */
  .st-process-headline{padding:40px 20px 48px;text-align:center}
  .st-process-h{
    font-size:clamp(28px,8vw,44px);
    text-align:center;
  }
  .st-process .st-section-head{padding-left:20px;padding-right:20px}
  .st-steps{grid-template-columns:1fr;padding:0 20px 64px;gap:0}
  .st-step{border-bottom:.5px solid rgba(235,234,231,.1);padding-bottom:40px;margin-bottom:40px}
  .st-step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
  .st-step-track{margin-bottom:24px}
  .st-step-line{display:none}
  .st-step-n{font-size:48px}
  .st-process-photo{height:56vw;min-height:260px}
  .st-process-photo-label{padding:0 20px 28px}

  /* ── EQUIPO: más espacio entre tarjetas ──────────────────────── */
  .st-team-grid{
    grid-template-columns:1fr 1fr;
    gap:24px; /* was 2px — much more breathing room */
    padding:32px 20px 0;
  }
  .st-card-info{padding:16px 0 8px}

  /* ── PRESENCIA: texto y mapa sin cortes ──────────────────────── */
  .st-presence{padding:72px 0 56px}
  .st-presence .container{
    grid-template-columns:1fr;
    gap:40px;
    padding:0 20px; /* keep padding so text doesn't bleed */
  }
  .st-pres-title{font-size:26px}
  /* Map: full width, no overflow clipping */
  .st-pres-map{
    width:100%;
    min-height:unset;
    aspect-ratio:1262/792;
    overflow:visible; /* ensure SVG is not clipped */
  }
  .st-pres-map svg,.st-pres-map .presence-svg{
    width:100%; height:auto; display:block; overflow:visible;
  }
  /* Presence body text: constrain width so it doesn't overflow */
  .st-pres-body{
    overflow-wrap:break-word; word-break:break-word;
  }
  .st-pres-footer{position:static;margin-top:24px;text-align:right;padding:0 20px}

  /* ── CLIENTES ───────────────────────────────────────────────── */
  .st-clients{padding:64px 0 80px}
  .st-clients .st-section-head{margin-bottom:40px}
  .st-marquee-logo{height:38px;max-width:100px}
  .st-marquee-row,.st-marquee-track{gap:36px}
  .st-marquee-track{padding-right:36px}

  .project-meta-grid{grid-template-columns:1fr 1fr;text-align:left}
}

@media(max-width:400px){
  .st-team-grid{grid-template-columns:1fr;gap:20px}
}

/* Studio page: hero parallax JS hook */
.st-hero-img[data-parallax]{will-change:transform}

/* ═══ PROJECT WHITE BODY ═══ */
.project-white-body{background:#ffffff}
.project-white-body .project-meta,.project-white-body .project-content{background:#fff}
.project-white-body .project-meta{border-bottom:.5px solid #e5e5e5}
.project-white-body .project-meta-label{color:#888}
.project-white-body .project-team{border-top:.5px solid #e5e5e5}

/* ═══ PHOTO + TEXT BLOCK ═══ */
.project-photo-text{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:64px}
.project-photo-text-img{width:100%;aspect-ratio:1/1;overflow:hidden}
.project-photo-text-img img{width:100%;height:100%;object-fit:cover;display:block}
.project-photo-text-body{padding:24px 0}
.project-photo-text-body p{font-size:16px;font-weight:300;line-height:1.8;color:var(--text-sec);text-align:justify}
@media(max-width:767px){.project-photo-text{grid-template-columns:1fr;gap:24px}.project-photo-text-img{aspect-ratio:4/3}}

/* ═══ CONTACT BANNER ═══ */
.contact-banner{width:100%;height:320px;overflow:hidden;margin-bottom:0}
.contact-banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(max-width:767px){.contact-banner{height:200px}}

/* ═══ SERVICES TABS ═══ */
.services-tabs-section{padding:80px 0 120px}
.services-tabs-layout{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:560px}
.services-tab-list{border-right:.5px solid var(--accent);display:flex;flex-direction:column}
.service-tab-btn{display:flex;align-items:center;gap:12px;padding:20px 24px 20px 0;border:none;background:transparent;font-family:var(--font);font-size:14px;font-weight:300;color:var(--text-sec);cursor:pointer;text-align:left;border-bottom:.5px solid var(--accent);transition:color .3s,padding .3s;position:relative}
.service-tab-btn:first-child{border-top:.5px solid var(--accent)}
.service-tab-arrow{font-size:18px;color:var(--accent);transition:color .3s,transform .3s;flex-shrink:0}
.service-tab-btn.active{color:var(--text);font-weight:400}
.service-tab-btn.active .service-tab-arrow{color:var(--text);transform:translateX(4px)}
.service-tab-btn.active::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--text)}
.service-tab-btn:hover:not(.active){color:var(--text);padding-left:4px}
.services-tab-panels{position:relative}
.service-panel{display:none;opacity:0;transition:opacity .4s}
.service-panel.active{display:block;opacity:1}
.service-panel-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding:0 0 0 64px}
.service-panel-title{font-size:clamp(28px,3vw,44px);font-weight:200;margin-bottom:24px;line-height:1.1;letter-spacing:-.02em}
.service-panel-desc{font-size:15px;font-weight:300;line-height:1.7;color:var(--text-sec);margin-bottom:24px}
.service-panel-list{list-style:none;margin-bottom:32px}
.service-panel-list li{font-size:14px;font-weight:300;color:var(--text-sec);padding:8px 0 8px 16px;border-bottom:.5px solid rgba(190,183,175,.3);position:relative}
.service-panel-list li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;background:var(--accent);border-radius:50%}
.service-panel-cta{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--text);border-bottom:.5px solid var(--text);padding-bottom:2px;text-decoration:none;transition:opacity .3s}
.service-panel-cta:hover{opacity:.6}
.service-panel-cta svg{width:14px;height:14px;transition:transform .3s}
.service-panel-cta:hover svg{transform:translateX(4px)}
.service-panel-img{width:100%;aspect-ratio:4/3;overflow:hidden}
.service-panel-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.service-panel.active .service-panel-img img{transform:scale(1.02)}
@media(max-width:900px){
  .services-tabs-layout{grid-template-columns:1fr}
  .services-tab-list{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:.5px solid var(--accent);margin-bottom:40px}
  .service-tab-btn{border-bottom:none;padding:14px 20px;font-size:13px}
  .service-tab-btn:first-child{border-top:none}
  .service-tab-btn.active::after{bottom:0;top:auto;left:0;right:0;width:auto;height:2px}
  .service-panel-inner{grid-template-columns:1fr;gap:32px;padding:0}
}
@media(max-width:767px){
  .service-tab-btn{padding:12px 16px;font-size:12px}
  .service-tab-arrow{display:none}
}

/* ═══ HERO SLIDER — zoom-on-exit ═══ */
.hero-slide.exiting{
  opacity:0;
  transition:opacity 0.8s ease !important;
}
.hero-slide.exiting .hero-slide-bg{
  transform:none !important;
}

/* ═══ PROJECTS PAGE CARD OVERLAY ═══ */
.project-card-img{position:relative}
.project-card-overlay{position:absolute;inset:0;background:rgba(51,51,51,0);display:flex;align-items:flex-start;justify-content:flex-start;padding:16px;transition:background .4s}
.project-card:hover .project-card-overlay{background:rgba(51,51,51,.18)}
.project-card-hover-text{background:rgba(235,234,231,.92);color:var(--text);font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.project-card:hover .project-card-hover-text{opacity:1;transform:translateY(0)}

/* ═══ GUIA INSTALACION ═══ */