:root{
  --cream:#fdfcfa; --graphite:#2e2e2e; --mustard:#9e9e9e; --terracotta:#6b6b6b;
  --whatsapp:#25d366; --whatsapp-dark:#1ebe5b;
  --border:#e5e5e5; --secondary:#f2f2f2;
  --font-head:"Onest",sans-serif; --font-body:"Public Sans",sans-serif;
  --base-size:16px; --title-scale:1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:var(--base-size)}
body{background:var(--cream);color:var(--graphite);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
h1,h2,h3,.font-display{font-family:var(--font-head)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
.container{max-width:80rem;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.container{padding:0 3rem}}
.eyebrow{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.3em;color:var(--terracotta);margin-bottom:1rem}
.icon-btn{padding:.5rem;margin-right:-.5rem}

/* Nav */
.nav{position:fixed;top:0;z-index:50;width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:rgba(46,46,46,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(253,252,250,.1);color:var(--cream)}
@media(min-width:768px){.nav{padding:1.25rem 3rem}}
.nav img{height:2.25rem;width:auto;display:block}
@media(min-width:768px){.nav img{height:2.75rem}}
.nav-links{display:none;gap:2rem}
@media(min-width:768px){.nav-links{display:flex;align-items:center}}
.nav-links a{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;transition:opacity .2s}
.nav-links a:hover{opacity:.6}
.burger{padding:.5rem;margin-right:-.5rem}
@media(min-width:768px){.burger{display:none}}
.burger svg{width:1.25rem;height:1.25rem}

/* Drawer */
.drawer{position:fixed;inset:0;z-index:60;background:var(--graphite);color:var(--cream);display:none}
.drawer.open{display:block}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem}
.drawer-head img{height:2.25rem}
.drawer-links{display:flex;flex-direction:column;gap:1.5rem;padding:4rem 1.5rem 0}
.drawer-links a{font-family:var(--font-head);font-size:calc(2.25rem * var(--title-scale));line-height:1}
.drawer-links .site{margin-top:3rem;font-family:var(--font-body);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(253,252,250,.6)}

/* Hero */
.hero{position:relative;display:flex;min-height:100svh;width:100%;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:rgba(46,46,46,.35)}
.hero-content{position:relative;z-index:10;padding:0 1.5rem;text-align:center}
.hero .kicker{margin-bottom:1rem;font-size:10px;text-transform:uppercase;letter-spacing:.3em;color:rgba(253,252,250,.8)}
@media(min-width:768px){.hero .kicker{margin-bottom:1.5rem;font-size:.75rem}}
.hero h1{font-size:calc(3rem * var(--title-scale));font-weight:500;line-height:.95;letter-spacing:-.02em;color:var(--cream)}
@media(min-width:640px){.hero h1{font-size:calc(3.75rem * var(--title-scale))}}
@media(min-width:768px){.hero h1{font-size:calc(6rem * var(--title-scale))}}
@media(min-width:1024px){.hero h1{font-size:calc(8rem * var(--title-scale))}}
.hero .sub{margin:1.5rem auto 0;max-width:28rem;font-size:.875rem;color:rgba(253,252,250,.85)}
@media(min-width:768px){.hero .sub{margin-top:2rem;font-size:1rem}}
.hero .cta{margin-top:2rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(253,252,250,.6);padding:1rem 2.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.25em;color:var(--cream);transition:.3s}
@media(min-width:768px){.hero .cta{margin-top:2.5rem}}
.hero .cta:hover{background:var(--cream);color:var(--graphite)}
.hero .line{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);width:1px;height:3rem;background:rgba(253,252,250,.4)}
@media(min-width:768px){.hero .line{bottom:3rem;height:4rem}}

/* Intro */
.intro{padding:5rem 1.5rem 0}
@media(min-width:768px){.intro{padding:10rem 3rem 0}}
.intro-inner{max-width:48rem;margin:0 auto;display:flex;flex-direction:column;gap:2rem;font-size:1.125rem;line-height:1.7;color:rgba(46,46,46,.8)}
@media(min-width:768px){.intro-inner{font-size:1.25rem}}
.intro ul{list-style:none;display:flex;flex-direction:column;gap:1.5rem;border-left:1px solid rgba(107,107,107,.4);padding-left:1.5rem}
@media(min-width:768px){.intro ul{padding-left:2rem}}
.intro ul span{display:block;margin-bottom:.25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.25em;color:var(--terracotta)}
.intro ul p{font-size:1rem}
@media(min-width:768px){.intro ul p{font-size:1.125rem}}
.intro .close{max-width:52ch;font-size:1rem;line-height:1.7;color:rgba(46,46,46,.6)}
@media(min-width:768px){.intro .close{font-size:1.125rem}}

/* Bloques de imagenes editables */
.block-gallery{display:grid;gap:1rem;margin-top:3rem}
@media(min-width:640px){.block-gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.block-gallery{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.block-gallery figure{overflow:hidden;border-radius:.375rem}
.block-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s}
.block-gallery figure:hover img{transform:scale(1.04)}

/* Premisa */
.premisa{padding:5rem 1.5rem;scroll-margin-top:6rem}
@media(min-width:768px){.premisa{padding:10rem 3rem}}
.premisa-grid{max-width:80rem;margin:0 auto;display:grid;gap:2.5rem}
@media(min-width:1024px){.premisa-grid{grid-template-columns:5fr 7fr;gap:6rem}}
.premisa h2{font-size:calc(1.875rem * var(--title-scale));font-weight:500;line-height:1.25}
@media(min-width:768px){.premisa h2{font-size:calc(3rem * var(--title-scale))}}
.premisa .cols{display:flex;flex-direction:column;gap:2.5rem;font-size:1rem;line-height:1.7;color:rgba(46,46,46,.8)}
@media(min-width:768px){.premisa .cols{gap:3.5rem;font-size:1.125rem}}
.premisa .col{max-width:52ch;display:flex;flex-direction:column;gap:1.25rem}
@media(min-width:768px){.premisa .col{gap:1.5rem}}

/* Puntos sobre la imagen */
.hotspots{padding:4rem 0;scroll-margin-top:6rem}
@media(min-width:768px){.hotspots{padding:6rem 0}}
.hotspots .head{margin-bottom:2.5rem;max-width:40rem}
.hotspots h2{font-size:calc(2.25rem * var(--title-scale));font-weight:500}
@media(min-width:768px){.hotspots h2{font-size:calc(3rem * var(--title-scale))}}
.hotspots .hs-lead{margin-top:1rem;font-size:1rem;line-height:1.7;color:rgba(46,46,46,.7)}
.hs-stage{position:relative;display:block;width:100%;max-width:64rem;margin:0 auto;border-radius:.375rem;overflow:hidden}
.hs-stage>img{display:block;width:100%;height:auto}
.hs-point{position:absolute;transform:translate(-50%,-50%);width:auto;padding:0;z-index:2}
.hs-dot{display:block;width:1.25rem;height:1.25rem;border-radius:9999px;background:var(--cream);border:2px solid var(--graphite);box-shadow:0 2px 10px rgba(0,0,0,.3);position:relative}
.hs-dot::after{content:"";position:absolute;inset:-6px;border-radius:9999px;border:1px solid rgba(253,252,250,.7);animation:hs-ping 2s ease-out infinite}
@keyframes hs-ping{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.hs-tip{position:absolute;left:50%;top:calc(100% + .75rem);transform:translateX(-50%);min-width:12rem;max-width:16rem;background:var(--graphite);color:var(--cream);padding:.75rem .9rem;border-radius:.25rem;text-align:left;opacity:0;visibility:hidden;transition:.2s;font-size:.8125rem;line-height:1.5;z-index:3}
.hs-tip strong{display:block;font-family:var(--font-head);font-size:.9375rem;margin-bottom:.25rem}
.hs-point:hover .hs-tip,.hs-point.active .hs-tip,.hs-point:focus-visible .hs-tip{opacity:1;visibility:visible}

/* Proceso */
.proceso{background:var(--secondary);padding:5rem 0;scroll-margin-top:6rem}
@media(min-width:768px){.proceso{padding:8rem 0}}
.proceso h2{font-size:calc(2.25rem * var(--title-scale));font-weight:500}
@media(min-width:768px){.proceso h2{font-size:calc(3rem * var(--title-scale))}}
.proceso .head{margin-bottom:3rem}
@media(min-width:768px){.proceso .head{margin-bottom:5rem}}
.steps{display:grid;gap:1px;background:var(--border);box-shadow:0 0 0 1px var(--border)}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:640px) and (max-width:1023px){.steps .step:last-child:nth-child(odd){grid-column:span 2}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(var(--cols,4),1fr)}.steps[style*="--cols:3"] .step:last-child:nth-child(3n+2){grid-column:span 2}}
.step{background:var(--cream);padding:2rem}
@media(min-width:768px){.step{padding:2.5rem}}
.step .n{display:block;margin-bottom:1.5rem;font-family:var(--font-head);font-size:calc(2.25rem * var(--title-scale));color:var(--mustard)}
@media(min-width:768px){.step .n{margin-bottom:2rem;font-size:calc(3rem * var(--title-scale))}}
.step h3{margin-bottom:.75rem;font-size:.875rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em}
@media(min-width:768px){.step h3{margin-bottom:1rem}}
.step p{font-size:.875rem;line-height:1.7;color:rgba(46,46,46,.6)}

/* Proyectos */
.proyectos{padding:5rem 0;scroll-margin-top:6rem}
@media(min-width:768px){.proyectos{padding:10rem 0}}
.proyectos .head{margin-bottom:2.5rem}
@media(min-width:768px){.proyectos .head{margin-bottom:4rem}}
.proyectos h2{font-size:calc(2.25rem * var(--title-scale));font-weight:500}
@media(min-width:768px){.proyectos h2{font-size:calc(3rem * var(--title-scale))}}
.grid-projects{display:grid;gap:1.5rem}
@media(min-width:640px){.grid-projects{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-projects{grid-template-columns:repeat(3,1fr);gap:2rem}}
.proj{text-align:left}
.proj .frame{overflow:hidden;border-radius:.375rem}
.proj img{aspect-ratio:4/5;width:100%;object-fit:cover;transition:transform .7s;display:block}
.proj:hover img{transform:scale(1.04)}
.proj .meta{margin-top:.75rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.proj h3{font-family:var(--font-head);font-size:calc(1.25rem * var(--title-scale));font-weight:500}
@media(min-width:768px){.proj h3{font-size:calc(1.5rem * var(--title-scale))}}
.proj .ver{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:rgba(46,46,46,.5);transition:color .2s}
.proj:hover .ver{color:var(--mustard)}

/* Modal */
.modal{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;background:rgba(46,46,46,.95);backdrop-filter:blur(4px)}
.modal.open{display:flex}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;color:var(--cream)}
@media(min-width:768px){.modal-head{padding:1.25rem 2.5rem}}
.modal-head p{font-family:var(--font-head);font-size:1.125rem}
@media(min-width:768px){.modal-head p{font-size:1.5rem}}
.modal-head .right{display:flex;align-items:center;gap:1.25rem}
.modal-head .count{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:rgba(253,252,250,.6)}
.modal-close{padding:.5rem;margin-right:-.5rem}
.modal-body{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 1rem 1.5rem}
@media(min-width:768px){.modal-body{padding:0 4rem 1.5rem}}
.modal-body img{max-height:100%;max-width:100%;border-radius:.375rem;object-fit:contain}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);border-radius:9999px;background:rgba(253,252,250,.1);padding:.75rem;color:var(--cream);transition:background .2s}
.navbtn:hover{background:rgba(253,252,250,.25)}
.navbtn.prev{left:.5rem}
.navbtn.next{right:.5rem}
@media(min-width:768px){.navbtn.prev{left:1.5rem}.navbtn.next{right:1.5rem}}
.icon{width:1.25rem;height:1.25rem;display:block}

/* Contacto */
.contacto{background:var(--graphite);color:var(--cream);padding:5rem 0;scroll-margin-top:6rem}
@media(min-width:768px){.contacto{padding:8rem 0}}
.contacto .eyebrow{color:var(--mustard)}
.contacto-grid{max-width:72rem;margin:0 auto;display:grid;gap:3rem;padding:0 1.5rem}
@media(min-width:768px){.contacto-grid{padding:0 3rem}}
@media(min-width:1024px){.contacto-grid{grid-template-columns:5fr 7fr;gap:5rem}}
.contacto h2{font-size:calc(2.25rem * var(--title-scale));line-height:1.2}
@media(min-width:768px){.contacto h2{font-size:calc(3rem * var(--title-scale))}}
.contacto .lead{margin-top:1.5rem;font-size:1rem;line-height:1.7;color:rgba(253,252,250,.7);max-width:28rem}
form{display:flex;flex-direction:column;gap:1.5rem}
.field label,.field>span{display:block;margin-bottom:.5rem;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:rgba(253,252,250,.6)}
.field input,.field textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid rgba(253,252,250,.25);padding:.75rem 0;font-size:1rem;color:var(--cream);outline:none;font-family:inherit;transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:var(--mustard)}
.field.error input,.field.error textarea{border-color:var(--terracotta)}
.field .err{display:block;margin-top:.25rem;font-size:.75rem;color:#b0b0b0}
.field textarea{resize:none}
.row2{display:grid;gap:1.5rem}
@media(min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.counter{margin-top:.25rem;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:rgba(253,252,250,.4)}
.submit{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.75rem;border:1px solid rgba(253,252,250,.3);background:transparent;padding:1rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.25em;color:var(--cream);transition:.3s}
.submit:hover{background:var(--cream);color:var(--graphite)}
@media(min-width:640px){.submit{width:auto;padding:1rem 3rem}}
.submit svg{width:1rem;height:1rem}
.note{font-size:11px;color:rgba(253,252,250,.5)}
.form-ok{display:none;padding:1rem;border:1px solid rgba(253,252,250,.25);font-size:.875rem;color:var(--cream)}

/* Footer */
footer{border-top:1px solid var(--border);padding:3rem 0}
@media(min-width:768px){footer{padding:4rem 0}}
.foot-grid{max-width:80rem;margin:0 auto;display:grid;gap:2.5rem;padding:0 1.5rem;text-align:center}
@media(min-width:768px){.foot-grid{grid-template-columns:repeat(3,1fr);gap:3rem;padding:0 3rem;text-align:left}}
.foot-grid .col1{display:flex;flex-direction:column;align-items:center;gap:.75rem}
@media(min-width:768px){.foot-grid .col1{align-items:flex-start}}
.foot-grid img{height:2.25rem;width:auto}
@media(min-width:768px){.foot-grid img{height:2.75rem}}
.foot-grid a.ig{display:inline-flex;align-items:center;gap:.5rem;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:rgba(46,46,46,.6);transition:color .2s}
.foot-grid a:hover{color:var(--mustard)}
.foot-grid .eyebrow{font-size:10px;letter-spacing:.25em;margin-bottom:1rem}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:1rem}
.foot-grid ul a{display:inline-flex;align-items:flex-start;gap:.5rem;font-size:.875rem;line-height:1.6;color:rgba(46,46,46,.7)}
.foot-grid ul svg{margin-top:.25rem;width:.875rem;height:.875rem;flex-shrink:0;color:rgba(46,46,46,.4)}
.foot-grid .col3{display:flex;flex-direction:column;align-items:center;gap:1rem}
@media(min-width:768px){.foot-grid .col3{align-items:flex-end;text-align:right}}
.foot-grid .col3 a{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:rgba(46,46,46,.6)}
.foot-grid .copy{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:rgba(46,46,46,.4)}

/* WhatsApp */
.wsp-float{position:fixed;bottom:1.25rem;right:1.25rem;z-index:50;display:flex;align-items:center;border-radius:9999px;background:var(--whatsapp);padding:1rem;color:#fff;box-shadow:0 10px 25px rgba(46,46,46,.25);transition:background .3s}
@media(min-width:768px){.wsp-float{bottom:2rem;right:2rem}}
.wsp-float:hover{background:var(--whatsapp-dark)}
.wsp-float svg{width:1.5rem;height:1.5rem}
.wsp-float .label{max-width:0;overflow:hidden;white-space:nowrap;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;opacity:0;transition:.3s;display:none}
@media(min-width:768px){.wsp-float .label{display:inline}}
.wsp-float:hover .label{max-width:180px;margin-left:.75rem;opacity:1}
.wsp-float .dot{position:absolute;top:-2px;right:-2px;width:.75rem;height:.75rem}
.wsp-float .dot::before{content:"";position:absolute;inset:0;border-radius:9999px;background:var(--whatsapp);opacity:.75;animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite}
.wsp-float .dot::after{content:"";position:absolute;inset:0;border-radius:9999px;background:var(--whatsapp-dark)}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}

/* Barra de admin */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* v1.1: espacio bajo el menu fijo cuando la portada esta oculta */
.nav-spacer{height:4.5rem}
@media(min-width:768px){.nav-spacer{height:5rem}}