:root{
  --ink:#101010;
  --paper:#efede8;
  --muted:#777;
  --header:82px;
  --pad:clamp(24px,5vw,80px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:"Open Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}

/* HEADER */
.site-header{
  position:fixed;z-index:50;top:0;left:0;right:0;height:var(--header);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--pad);color:#fff;mix-blend-mode:difference;
  background:transparent;backdrop-filter:none;transition:.35s ease
}
.brand{width:64px;height:64px;display:grid;place-items:center;overflow:hidden;border:0;border-radius:0}
.brand img{width:100%;height:100%;object-fit:contain;border-radius:0}
.site-nav{display:flex;gap:clamp(12px,1.7vw,28px);align-items:center}
.site-nav a{
  font:500 11px/1 "Montserrat",sans-serif;text-transform:uppercase;
  letter-spacing:.1em;opacity:.76;transition:.2s;color:inherit;text-shadow:none
}
.site-nav a:hover,.site-nav a.active{opacity:1}
.menu-toggle{display:none;border:0;background:none;color:inherit;font-size:24px}

.site-header.on-hero{color:#eeeeea;mix-blend-mode:normal}
.site-header.on-hero .site-nav a{color:#eeeeea;opacity:.9}
.site-header.on-hero .site-nav a:hover,
.site-header.on-hero .site-nav a.active{opacity:1}
.site-header.on-hero .brand img{filter:none;opacity:1}

/* BASE PANELS */
.panel{
  position:relative;min-height:100svh;padding:calc(var(--header) + 44px) var(--pad) 120px;
  overflow:hidden
}
.section-inner{width:min(1180px,100%);margin:0 auto;position:relative;z-index:2}
.hero{display:flex;align-items:center}
.hero-bg,.process-bg{position:absolute;inset:0;background:center/cover no-repeat fixed}
.hero-bg{
  background-image:url('fondo-inicio.webp');
  filter:saturate(.86) contrast(.94) brightness(.94)
}
.hero:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 38%,rgba(255,255,255,.04) 72%,rgba(255,255,255,.015));
  mix-blend-mode:screen;pointer-events:none
}
.process-bg{
  background-image:url('fondo-forma.webp');
  filter:saturate(.78) contrast(.92) brightness(.86)
}
.shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.38) 58%,rgba(0,0,0,.22));
  z-index:1
}
.shade.soft{background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.52))}

.hero-copy{max-width:900px;margin-left:0}
.eyebrow,.section-number{
  font:600 11px/1 "Montserrat",sans-serif;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 24px;opacity:.9
}
.hero h1,.panel h2{
  font-family:"Montserrat",sans-serif;text-transform:uppercase;
  letter-spacing:-.045em;margin:0
}
.hero h1{
  font-size:clamp(44px,7.3vw,112px);line-height:.94;max-width:1000px;
  color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7)
}
.lead{
  font-size:clamp(16px,1.55vw,22px);line-height:1.55;max-width:670px;
  margin:30px 0 0;font-weight:400;color:#f3f3f3;
  text-shadow:0 2px 12px rgba(0,0,0,.8)
}
.section-cta{
  position:absolute;z-index:5;left:var(--pad);bottom:38px;
  display:flex;gap:20px;align-items:center;
  font:600 12px/1 "Montserrat",sans-serif;letter-spacing:.16em;
  padding:13px 0;border-bottom:1px solid currentColor
}
.section-cta span:last-child{font-size:20px;transition:transform .25s}
.section-cta:hover span:last-child{transform:translateX(8px)}
.dark-cta{color:#111}
.scroll-cue{
  position:absolute;z-index:5;right:var(--pad);bottom:43px;
  font-size:22px;animation:bob 1.8s infinite
}
@keyframes bob{50%{transform:translateY(8px)}}

.light{background:var(--paper);color:var(--ink)}
.dark{background:#0e0e0e;color:#fff}

/* SERVICIOS */
.split{
  display:grid;grid-template-columns:.8fr 1.35fr;
  gap:9vw;align-items:start
}
.panel h2{font-size:clamp(44px,6.2vw,92px);line-height:.95}
.service-groups{display:grid;gap:50px}
.service-group{border-top:1px solid rgba(0,0,0,.34);padding-top:20px}
.service-kicker{
  font:600 10px/1 "Montserrat",sans-serif;letter-spacing:.17em;
  color:#777;margin:0 0 15px
}
.service-big-list{display:grid}
.service-big-list span{
  font:500 clamp(24px,3vw,44px)/1.12 "Montserrat",sans-serif;
  letter-spacing:-.035em;padding:17px 0;
  border-bottom:1px solid rgba(0,0,0,.16)
}

/* FORMA DE TRABAJO */
.process{display:flex;align-items:center}
.process .section-inner{max-width:1180px}
.process-cards{
  display:grid;grid-template-columns:repeat(2,1fr);
  margin-top:64px;border-top:1px solid rgba(255,255,255,.52);
  border-left:1px solid rgba(255,255,255,.26)
}
.process-cards article{
  display:grid;grid-template-columns:58px 1fr;gap:20px;
  padding:30px;border-right:1px solid rgba(255,255,255,.26);
  border-bottom:1px solid rgba(255,255,255,.26);
  min-height:230px;background:rgba(0,0,0,.22);
  backdrop-filter:blur(3px)
}
.process-cards article>span{
  font:600 11px "Montserrat";letter-spacing:.14em;opacity:.82
}
.process-cards h3{
  font:600 clamp(20px,2.25vw,30px) "Montserrat",sans-serif;
  margin:0 0 10px;color:#fff
}
.process-cards p{
  margin:0;color:#ececec;line-height:1.62;font-size:15px
}

/* OBRAS GENERAL */
.works,.works-residential,.works-reference{
  background:#ebe9e4;color:#111;padding-bottom:170px
}
.works-heading,.works-projects{
  width:min(1180px,100%);margin:0 auto;
  position:relative;z-index:2
}
.works-intro{margin-top:25px}
.works-intro p{
  margin:0 0 4px;line-height:1.55;color:#666;font-size:15px
}
.works-intro p:first-child{font-weight:600;color:#333}
.works-projects{margin-top:72px}

.project-block{
  display:grid;grid-template-columns:220px 1fr;gap:42px;
  padding:45px 0 55px;border-top:1px solid rgba(17,17,17,.22)
}
.project-block:last-child{border-bottom:1px solid rgba(17,17,17,.22)}
.project-meta{display:flex;gap:18px;align-items:flex-start}
.project-meta>span{
  font:600 10px/1 "Montserrat",sans-serif;letter-spacing:.14em;
  color:#8b8984;padding-top:5px
}
.project-meta h3{
  margin:0;font:600 18px/1.3 "Montserrat",sans-serif;
  letter-spacing:-.015em
}
.project-meta p{
  margin:8px 0 0;color:#85827b;font-size:12px;line-height:1.45
}
.project-media{display:grid;gap:14px}
.project-media figure{
  margin:0;position:relative;overflow:hidden;
  background:#d8d4ce;min-height:260px
}
.project-media img,.project-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.68) sepia(.16) saturate(.58) contrast(.94) brightness(.98);
  transition:filter .35s ease,transform .45s ease
}
.project-media figure:hover img,.project-media figure:hover video{
  filter:grayscale(.42) sepia(.11) saturate(.72) contrast(.97);
  transform:scale(1.008)
}
.project-media figcaption{
  position:absolute;left:13px;bottom:11px;background:rgba(18,18,18,.66);
  color:#fff;padding:7px 9px;font:600 9px/1 "Montserrat",sans-serif;
  letter-spacing:.12em;text-transform:uppercase
}
.pair{grid-template-columns:1fr 1fr}
.pair figure{aspect-ratio:1.45/1}
.triptych{grid-template-columns:repeat(3,1fr)}
.triptych figure{aspect-ratio:1/1.1}
.feature-grid{grid-template-columns:1.35fr .8fr .8fr}
.feature-grid figure{aspect-ratio:1/1}
.feature-grid .feature{aspect-ratio:auto}
.asymmetric{grid-template-columns:.9fr 1.1fr}
.compact-project .pair figure{aspect-ratio:1.6/1}

/* POR QUÉ ELEGIRNOS */
.strength-copy{
  max-width:930px;margin:45px 0 0;
  font-size:clamp(16px,1.55vw,22px);line-height:1.58;
  font-weight:300;color:#d4d4d4
}
.reasons{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin-top:58px;border-top:1px solid rgba(255,255,255,.25)
}
.reasons article{
  padding:32px 8vw 45px 0;
  border-bottom:1px solid rgba(255,255,255,.18)
}
.reasons h3{
  font:600 clamp(20px,2.2vw,30px) "Montserrat",sans-serif;
  margin:0 0 8px
}
.reasons p,.coverage-copy{
  margin:0;color:#aaa;line-height:1.6;font-size:15px
}

/* COBERTURA */
.coverage{overflow:visible}
.coverage-grid{
  display:grid;grid-template-columns:.82fr 1.18fr;
  gap:6vw;align-items:center
}
.coverage-text{position:relative;z-index:5}
.locations{display:grid;margin-top:36px;position:relative}
.location-item{
  position:relative;width:100%;display:grid;
  grid-template-columns:1fr auto;gap:16px;align-items:center;
  text-align:left;border-bottom:1px solid #c9c6bf;color:#111;
  padding:15px 0;font:500 13px "Montserrat",sans-serif;
  text-transform:uppercase;letter-spacing:.08em
}
.location-item:first-child{border-top:1px solid #c9c6bf}
.location-arrow{font-size:18px;font-weight:400;transition:transform .2s}
.location-item:hover .location-arrow{transform:rotate(45deg)}
.location-tooltip{
  position:absolute;z-index:20;left:calc(100% + 22px);top:50%;
  width:min(430px,38vw);max-height:310px;overflow:auto;
  transform:translate(12px,-50%);padding:20px 22px;
  background:#111;color:#fff;box-shadow:0 18px 45px rgba(0,0,0,.16);
  font:400 13px/1.7 "Open Sans",sans-serif;
  text-transform:none;letter-spacing:0;opacity:0;visibility:hidden;
  pointer-events:none;transition:.2s ease
}
.location-item:hover .location-tooltip{
  opacity:1;visibility:visible;transform:translate(0,-50%)
}
.map-wrap{
  position:relative;min-height:620px;display:grid;place-items:center
}
.map-wrap img{
  width:100%;max-height:690px;object-fit:contain;
  filter:contrast(1.08)
}

/* CONTACTO */
.contact{padding-bottom:150px}
.contact-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw
}
.contact-direct{gap:0;margin-top:38px;border-top:1px solid #3e3e3e}
.contact-direct>div{
  display:grid;grid-template-columns:180px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid #3e3e3e;align-items:baseline
}
.contact-direct span{
  font:600 10px/1 "Montserrat",sans-serif;
  letter-spacing:.14em;color:#777
}
.contact-direct>div a{
  font:400 15px/1.4 "Open Sans",sans-serif
}
.contact-form{
  display:grid;grid-template-columns:1fr 1fr;gap:24px 20px
}
.contact-form label{
  font:500 11px "Montserrat";letter-spacing:.1em;
  text-transform:uppercase;color:#aaa
}
.contact-form input,.contact-form textarea{
  width:100%;border:0;border-bottom:1px solid #555;
  background:transparent;color:#fff;padding:12px 0;
  font:400 15px "Open Sans";outline:none
}
.contact-form input:focus,.contact-form textarea:focus{border-color:#fff}
.contact-form .wide,.form-status{grid-column:1/-1}
.contact-form button{
  grid-column:1/-1;justify-self:start;border:0;
  border-bottom:1px solid #fff;background:none;color:#fff;
  padding:13px 0;font:600 12px "Montserrat";
  letter-spacing:.14em;cursor:pointer
}
.contact-form button[disabled]{opacity:.5;cursor:wait}
.honeypot{
  position:absolute!important;left:-9999px!important;opacity:0!important
}
.form-status{margin:0;color:#bbb;font-size:13px}
.form-success{
  min-height:310px;display:flex;align-items:flex-start;
  justify-content:center;flex-direction:column;
  border-top:1px solid #555;border-bottom:1px solid #555
}
.form-success strong{
  font:600 clamp(25px,3vw,42px)/1.15 "Montserrat",sans-serif;
  text-transform:uppercase
}
.form-success p{color:#aaa;max-width:460px;line-height:1.6}
.final-cta{bottom:62px}
footer{position:absolute;right:var(--pad);bottom:42px;color:#777;font-size:11px}

/* ANIMACIONES */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s ease,transform .8s ease
}
.reveal.visible{opacity:1;transform:none}

/* OBRAS — PROYECTOS EDITORIALES */
.portfolio-project{
  width:min(1460px,calc(100% - 70px));
  margin:68px auto 0;color:#252422
}
.portfolio-hero-grid{
  display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:72px;align-items:stretch
}
.portfolio-copy{
  padding:22px 0 20px 8px;display:flex;
  flex-direction:column;align-items:flex-start
}
.portfolio-overline{display:none!important}
.portfolio-copy h3{
  margin:0;font:500 clamp(28px,2.45vw,40px)/1.05 "Montserrat",sans-serif;
  letter-spacing:.06em;color:#242321;white-space:nowrap
}
.portfolio-title-block{
  display:inline-grid;width:max-content;max-width:100%
}
.portfolio-title-block h3{
  width:max-content;max-width:100%;margin-bottom:0
}
.portfolio-rule{
  width:56px;border-top:1px solid #87827a;
  margin:22px 0 32px
}
.portfolio-title-block .portfolio-rule{width:100%}
.portfolio-type{
  margin:0 0 48px;font:500 14px/1.2 "Montserrat",sans-serif;
  letter-spacing:.14em;color:#292724
}
.portfolio-description{
  max-width:315px;margin:0;
  font:400 15px/1.78 "Open Sans",sans-serif;color:#413e39
}
.portfolio-claim{
  margin:30px 0 0;font:600 15px/1.4 "Montserrat",sans-serif;
  color:#2f2d29
}

/* COMPARADOR */
.portfolio-compare{min-width:0}
.compare{
  position:relative;overflow:hidden;width:100%;
  background:#ccc8c0;cursor:ew-resize;user-select:none;
  touch-action:pan-y;outline:none
}
.compare-reference{
  height:clamp(410px,41vw,650px);
  border:0!important;outline:0;line-height:0;
  padding:0!important;background:#d2cec6
}
.compare img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block
}
.compare-base{z-index:1}
.compare-before{
  position:absolute;left:0;top:0;bottom:0;
  overflow:hidden;z-index:2
}
.compare-before img{
  width:calc(100vw - 0px);max-width:none
}
.compare-reference>img,
.compare-reference .compare-before>img{
  top:-4px!important;height:calc(100% + 8px)!important
}
.compare-reference .compare-before{top:-2px;bottom:-2px}

.compare-line{
  position:absolute;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.92);z-index:4;
  transform:translateX(-.5px);pointer-events:none
}
.compare-line span{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:50px;height:50px;border-radius:50%;
  display:block;background:#f5f2ec;color:#292724;
  box-shadow:0 3px 18px rgba(0,0,0,.18);
  font-size:0;letter-spacing:0;text-indent:0
}
.compare-line span:before,.compare-line span:after{
  position:absolute;top:50%;transform:translateY(-52%);
  font:500 25px/1 "Montserrat",sans-serif;color:#25231f
}
.compare-line span:before{content:'‹';left:11px}
.compare-line span:after{content:'›';right:11px}

.compare-label{
  position:absolute;bottom:17px;z-index:5;color:#fff;
  font:600 11px/1 "Montserrat",sans-serif;
  letter-spacing:.17em;text-shadow:0 1px 8px rgba(0,0,0,.5);
  pointer-events:none
}
.before-label{left:18px}
.after-label{right:18px}
.compare-reference>.after-label{z-index:1;right:18px;left:auto}
.compare-reference .compare-before .before-label{
  z-index:3;left:18px;right:auto;white-space:nowrap
}
.compare-note{
  margin:11px 0 0;color:#88847d;
  font-size:11px;letter-spacing:.02em
}

/* TRATAMIENTO DE IMÁGENES */
.photo-treatment{
  filter:grayscale(.62) sepia(.12) saturate(.52) contrast(.93) brightness(.99);
  transition:filter .35s ease
}
.works-reference .photo-treatment{
  filter:grayscale(.58) sepia(.10) saturate(.48) contrast(.92) brightness(.98)
}
.compare:hover .photo-treatment,
.process-card:hover .photo-treatment,
.works-reference .portfolio-step:hover .photo-treatment{
  filter:grayscale(.50) sepia(.08) saturate(.54) contrast(.94) brightness(.99)
}

/* PROCESO */
.process-heading{
  display:flex;align-items:center;gap:22px;
  margin:76px 0 28px
}
.process-heading span{
  font:600 10px/1 "Montserrat",sans-serif;
  letter-spacing:.17em;color:#4f4c47
}
.process-heading i{
  height:1px;background:rgba(17,17,17,.22);flex:1
}
.process-editorial{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:105px;gap:12px
}
.process-card{
  margin:0;position:relative;overflow:hidden;background:#d7d3cc
}
.process-card img,.process-card video{
  width:100%;height:100%;object-fit:cover;display:block
}
.process-card figcaption{
  position:absolute;left:14px;right:14px;bottom:12px;
  display:flex;align-items:center;gap:10px;color:#fff;
  text-shadow:0 1px 7px rgba(0,0,0,.7);
  font:600 9px/1 "Montserrat",sans-serif;
  letter-spacing:.1em;text-transform:uppercase
}
.process-card figcaption b{font-weight:600;color:#e4e0d8}
.process-wide{grid-column:span 5;grid-row:span 3}
.process-tall{grid-column:span 3;grid-row:span 4}
.process-video{grid-column:span 4;grid-row:span 4}
.process-square{grid-column:span 4;grid-row:span 3}
.process-editorial .process-tall:nth-of-type(5){
  grid-column:span 3;grid-row:span 4
}
.process-editorial .process-wide:nth-of-type(6){
  grid-column:span 5;grid-row:span 3
}

/* PROCESO PORTFOLIO */
.portfolio-process-title{
  display:flex;align-items:center;gap:20px;
  margin:44px 0 28px
}
.portfolio-process-title span{
  font:500 12px/1 "Montserrat",sans-serif;
  letter-spacing:.17em;color:#302e2a;white-space:nowrap
}
.portfolio-process-title i{
  height:1px;background:#99948b;flex:1;opacity:.75
}
.portfolio-process-row{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:12px;align-items:start
}
.portfolio-process-row.process-10{
  grid-template-columns:repeat(10,minmax(0,1fr))
}
.portfolio-step{
  margin:0;min-width:0;cursor:zoom-in;
  position:relative;z-index:1;
  transition:transform .22s ease,filter .22s ease
}
.portfolio-step:hover{z-index:3}
.portfolio-step img{
  width:100%;aspect-ratio:4/3;height:auto;
  display:block;object-fit:cover;background:#d7d3cc
}
.portfolio-step:nth-child(4) img,
.portfolio-step:nth-child(5) img{object-position:center center}
.portfolio-step:nth-child(5) img[src*="instalaciones-3"]{
  object-fit:contain;background:#ddd8d0
}
.portfolio-step figcaption,
.portfolio-pair figcaption{
  display:flex;gap:7px;align-items:flex-start;
  margin-top:12px;min-height:31px;
  font:500 9.5px/1.3 "Montserrat",sans-serif;
  color:#34312d;letter-spacing:.015em
}
.portfolio-step figcaption b,
.portfolio-pair figcaption b{
  font-weight:600;white-space:nowrap
}
.portfolio-step figcaption span,
.portfolio-pair figcaption span{display:block}

/* ESTADÍSTICAS */
.portfolio-stats{
  margin-top:34px;border:1px solid rgba(59,56,51,.20);
  display:grid;grid-template-columns:1.55fr .56fr .56fr .68fr;
  min-height:120px;align-items:center;
  background:rgba(240,237,231,.18)
}
.portfolio-stats-copy{
  display:grid;grid-template-columns:70px 1fr;
  gap:24px;align-items:center;padding:25px 38px
}
.portfolio-icon{
  width:48px;height:48px;border:1px solid #3d3a35;
  display:grid;place-items:center;font:400 31px/1 "Montserrat",sans-serif;
  transform:rotate(45deg);color:#2d2b28
}
.portfolio-icon::first-letter{transform:rotate(-45deg)}
.portfolio-stats-copy p{
  margin:0;font:400 13px/1.62 "Open Sans",sans-serif;color:#413e39
}
.portfolio-stat{
  align-self:stretch;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  border-left:1px solid rgba(59,56,51,.18);padding:16px
}
.portfolio-stat strong{
  font:500 38px/1 "Montserrat",sans-serif;color:#2a2825
}
.portfolio-stat strong small{font-size:18px;font-weight:400}
.portfolio-stat span{
  margin-top:10px;font:500 9px/1.25 "Montserrat",sans-serif;
  color:#46433e;letter-spacing:.02em
}

/* PROYECTOS SECUNDARIOS */
.portfolio-project-secondary{
  margin-top:110px;padding-top:84px;
  border-top:1px solid rgba(59,56,51,.18)
}
.portfolio-project-secondary + .portfolio-project-secondary{
  margin-top:110px;padding-top:84px;
  border-top:1px solid rgba(59,56,51,.18)
}

/* PARES ANTES/DESPUÉS */
.portfolio-process-pairs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;align-items:start
}
.portfolio-pair{margin:0;min-width:0}
.process-pair-compare{
  height:auto;aspect-ratio:4/3;
  background:#d7d3cc;line-height:0
}
.process-pair-compare>img,
.process-pair-compare .compare-before>img{
  top:0!important;height:100%!important;object-fit:cover
}
.process-pair-compare .compare-line span{
  width:34px;height:34px;background:rgba(245,242,236,.96);
  box-shadow:0 2px 12px rgba(0,0,0,.18);font-size:0
}
.process-pair-compare .compare-line span:before,
.process-pair-compare .compare-line span:after{
  position:absolute;top:50%;transform:translateY(-52%);
  font:500 18px/1 "Montserrat",sans-serif;color:#25231f
}
.process-pair-compare .compare-line span:before{content:'‹';left:7px}
.process-pair-compare .compare-line span:after{content:'›';right:7px}
.process-pair-compare .compare-label{
  bottom:9px;font-size:8px;letter-spacing:.13em
}
.process-pair-compare .after-label-mask{
  position:absolute;top:0;bottom:0;overflow:hidden;
  z-index:3;pointer-events:none
}
.process-pair-compare .after-label-mask .after-label{
  right:9px;left:auto;white-space:nowrap
}
.process-pair-compare .compare-before .before-label{white-space:nowrap}

/* NOTA FINAL */
.res-footer-note{
  margin:58px 0 0 98px;padding:28px 0;
  border-top:1px solid rgba(17,17,17,.18);
  border-bottom:1px solid rgba(17,17,17,.18);
  display:grid;grid-template-columns:.75fr 1.25fr;gap:42px
}
.res-footer-note p{
  margin:0;color:#69655f;font-size:14px;line-height:1.6
}
.res-footer-note p:first-child{
  font:600 13px/1.4 "Montserrat",sans-serif;color:#272727
}

/* PREVISUALIZACIÓN DE IMAGEN */
.process-image-preview{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:8vh 9vw;background:rgba(20,19,17,.58);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease
}
.process-image-preview.open{opacity:1;visibility:visible}
.process-image-preview img{
  display:block;max-width:63vw!important;max-height:60vh!important;
  width:auto!important;height:auto!important;
  object-fit:contain!important;background:#d8d4ce;
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  filter:grayscale(.58) sepia(.10) saturate(.48) contrast(.92) brightness(.98)
}
.process-image-preview .preview-caption{
  position:absolute;left:50%;bottom:3.2vh;
  transform:translateX(-50%);color:#f3f1ed;
  font:500 11px/1.2 "Montserrat",sans-serif;
  letter-spacing:.11em;text-transform:uppercase;
  text-align:center;text-shadow:0 1px 5px rgba(0,0,0,.6)
}

/* RESPONSIVE */
@media(min-width:901px){
  .works-intro p{white-space:nowrap}
}

@media(max-width:1180px){
  .location-tooltip{
    left:0;top:calc(100% + 8px);width:100%;
    max-height:240px;transform:translateY(-8px)
  }
  .portfolio-project{width:min(calc(100% - 46px),1180px)}
  .portfolio-hero-grid{grid-template-columns:270px 1fr;gap:36px}
  .portfolio-process-row{grid-template-columns:repeat(4,1fr)}
  .portfolio-process-row.process-10{grid-template-columns:repeat(5,1fr)}
  .portfolio-process-pairs{grid-template-columns:repeat(3,1fr)}
  .portfolio-stats{grid-template-columns:1.3fr repeat(3,.6fr)}
  .portfolio-project-secondary,
  .portfolio-project-secondary + .portfolio-project-secondary{
    margin-top:80px;padding-top:64px
  }
}

@media(max-width:1000px){
  .location-tooltip{
    left:0;top:calc(100% + 8px);width:100%;
    max-height:240px;transform:translateY(-8px)
  }
  .location-item:hover .location-tooltip{transform:none}
}

@media(max-width:900px){
  :root{--header:70px;--pad:24px}

  .menu-toggle{display:block}
  .site-nav{
    position:absolute;top:70px;left:0;right:0;display:none;
    flex-direction:column;align-items:flex-start;
    padding:24px;background:#111;color:#fff;mix-blend-mode:normal
  }
  .site-nav.open{display:flex}
  .site-header{
    mix-blend-mode:normal;background:transparent;
    backdrop-filter:none
  }
  .brand{width:50px;height:50px}
  .panel{
    padding-top:calc(var(--header) + 48px);
    padding-bottom:110px
  }
  .hero-bg,.process-bg{background-attachment:fixed}

  .split,.coverage-grid,.contact-grid{
    grid-template-columns:1fr;gap:50px
  }
  .process-cards{grid-template-columns:1fr}

  .project-block{
    grid-template-columns:1fr;gap:20px;
    padding:34px 0 42px
  }
  .project-media.pair,
  .project-media.triptych,
  .project-media.feature-grid,
  .project-media.asymmetric{
    grid-template-columns:1fr
  }
  .project-media figure,
  .project-media .feature{aspect-ratio:4/3}

  .works-intro p{white-space:normal}
  .reasons{grid-template-columns:1fr}
  .map-wrap{min-height:420px}
  .location-tooltip{display:none}

  .contact-form{grid-template-columns:1fr}
  .contact-form .wide,.contact-form button{grid-column:auto}
  .contact-direct>div{
    grid-template-columns:1fr;gap:7px
  }
  .section-cta{bottom:28px}
  footer{display:none}

  .res-project{margin-top:45px;padding-top:30px}
  .res-project-head{
    grid-template-columns:38px 1fr;gap:12px;margin-bottom:25px
  }
  .compare-wrap{margin-left:0}
  .compare{height:min(72vh,520px)}
  .process-heading{margin-top:50px}

  .process-editorial{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:170px;gap:9px
  }
  .process-card,.process-wide,.process-tall,.process-video,.process-square,
  .process-editorial .process-tall:nth-of-type(5),
  .process-editorial .process-wide:nth-of-type(6){
    grid-column:span 1;grid-row:span 1
  }
  .process-video{grid-column:1/-1;grid-row:span 2}

  .res-footer-note{
    margin-left:0;margin-top:40px;
    grid-template-columns:1fr;gap:10px
  }

  .compare-line span{width:38px;height:38px}
  .compare-note{font-size:10px}

  .portfolio-project{
    width:calc(100% - 30px);margin-top:44px
  }
  .portfolio-hero-grid{
    grid-template-columns:1fr;gap:28px
  }
  .portfolio-copy{padding:0}
  .portfolio-copy h3{font-size:32px;white-space:nowrap}
  .portfolio-rule{margin:16px 0 24px}
  .portfolio-type{margin-bottom:24px}
  .portfolio-description{max-width:560px}
  .compare-reference{
    height:58vw;min-height:300px
  }
  .portfolio-process-title{margin-top:36px}

  .portfolio-process-row,
  .portfolio-process-row.process-10{
    display:flex;overflow-x:auto;gap:10px;
    padding-bottom:10px;scroll-snap-type:x mandatory
  }
  .portfolio-step{flex:0 0 48%;scroll-snap-align:start}
  .portfolio-step img{aspect-ratio:4/3}

  .portfolio-stats{
    grid-template-columns:1fr 1fr;margin-top:26px
  }
  .portfolio-stats-copy{
    grid-column:1/-1;padding:24px 22px
  }
  .portfolio-stat{
    min-height:105px;
    border-top:1px solid rgba(59,56,51,.18)
  }
  .portfolio-stat:nth-child(2){border-left:0}
  .portfolio-stat:last-child{grid-column:1/-1}
  .portfolio-stat strong{font-size:34px}

  .portfolio-project-secondary,
  .portfolio-project-secondary + .portfolio-project-secondary{
    margin-top:58px;padding-top:46px
  }

  .portfolio-process-pairs{
    display:flex;overflow-x:auto;gap:10px;
    padding-bottom:10px;scroll-snap-type:x mandatory
  }
  .portfolio-pair{flex:0 0 48%;scroll-snap-align:start}

  .process-image-preview{
    padding:8vh 7vw
  }
  .process-image-preview img{
    max-width:75vw!important;max-height:61vh!important
  }

  .works-reference .portfolio-process-row{display:flex}
  .works-reference .portfolio-step{flex:0 0 48%}
}

@media(max-width:820px){
  .works-reference .portfolio-copy h3{font-size:32px;white-space:nowrap}
  .compare-reference .compare-line span{width:44px;height:44px}
  .compare-reference .compare-line span:before,
  .compare-reference .compare-line span:after{font-size:23px}
  .compare-reference .compare-line span:before{left:9px}
  .compare-reference .compare-line span:after{right:9px}

  .process-image-preview{
    padding:8vh 7vw
  }
  .process-image-preview img{
    max-width:75vw!important;max-height:61vh!important
  }
}

@media(max-width:520px){
  .works-reference .portfolio-copy h3{font-size:28px}
  .portfolio-step{flex-basis:100%;}
  .portfolio-pair{flex-basis:100%;}

  .portfolio-copy h3{font-size:28px}
  .compare-reference{height:72vw}

  .portfolio-stats{grid-template-columns:1fr}
  .portfolio-stats-copy,
  .portfolio-stat,
  .portfolio-stat:last-child{grid-column:1}
  .portfolio-stat{border-left:0}
  .portfolio-stats-copy{
    grid-template-columns:52px 1fr;gap:16px
  }
  .portfolio-icon{width:40px;height:40px}

  .process-image-preview img{
    max-width:77vw!important;max-height:58vh!important
  }
}


/* Indicador de recorrido horizontal - solo móvil */
@media(max-width:900px){
  .portfolio-process-row,
  .portfolio-process-pairs{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .portfolio-process-row::-webkit-scrollbar,
  .portfolio-process-pairs::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }

  .portfolio-scroll-hint{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:7px;
    gap:3px;
  }

  .portfolio-scroll-hint .hint-line{
    width:180px;
    height:4px;
    background:#77736d;
    position:relative;
    overflow:hidden;
    border-radius:4px;
  }

  .portfolio-scroll-hint .hint-line span{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    background:#ffffff;
    border-radius:4px;
    will-change:transform,width;
  }

  .portfolio-scroll-hint p{
    margin:0;
    font-size:10px;
    line-height:1.2;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#77736d;
  }
}

@media(hover:hover) and (pointer:fine){
  .process-image-preview.open{pointer-events:none}
}

@media(hover:none),(pointer:coarse){
  .process-image-preview.open{pointer-events:auto}
  .portfolio-step{cursor:pointer}
}

@media(max-width:900px){
  .hero-bg,
  .process-bg{
    background-attachment:fixed;
    background-size:cover;
    background-position:center center;
  }

  .compare-line span:before,
  .compare-line span:after{
    top:50%;
    transform:translateY(-50%);
    line-height:1;
  }

  .compare-line span:before{left:13px}
  .compare-line span:after{right:13px}
}

/* Fondos verticales exclusivos para móvil */
@media(max-width:900px){
  .hero-bg{
    background-image:url('fondo-inicio-mobile.webp');
    background-position:center center;
    background-size:cover;
  }

  .process-bg{
    background-image:url('fondo-forma-mobile.webp');
    background-position:center center;
    background-size:cover;
  }
}

/* FIX móvil 2026-09-04: fondos verticales e indicadores del comparador */
@media (max-width:900px){
  /* iOS/Safari escala de forma incorrecta los fondos con background-attachment:fixed. */
  .hero-bg,
  .process-bg{
    background-attachment:scroll !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
  }

  .hero-bg{
    background-image:url('fondo-inicio-mobile.webp') !important;
    background-position:50% 50% !important;
  }

  .process-bg{
    background-image:url('fondo-forma-mobile.webp') !important;
    background-position:50% 50% !important;
  }

  /* Chevron dibujado con CSS para que quede geométricamente centrado. */
  .compare-line span:before,
  .compare-line span:after,
  .process-pair-compare .compare-line span:before,
  .process-pair-compare .compare-line span:after,
  .compare-reference .compare-line span:before,
  .compare-reference .compare-line span:after{
    content:"" !important;
    position:absolute !important;
    top:50% !important;
    width:9px !important;
    height:9px !important;
    font-size:0 !important;
    line-height:0 !important;
    margin:0 !important;
  }

  .compare-line span:before,
  .process-pair-compare .compare-line span:before,
  .compare-reference .compare-line span:before{
    left:31% !important;
    right:auto !important;
    border-left:3px solid currentColor !important;
    border-bottom:3px solid currentColor !important;
    transform:translate(-50%,-50%) rotate(45deg) !important;
  }

  .compare-line span:after,
  .process-pair-compare .compare-line span:after,
  .compare-reference .compare-line span:after{
    left:69% !important;
    right:auto !important;
    border-right:3px solid currentColor !important;
    border-top:3px solid currentColor !important;
    transform:translate(-50%,-50%) rotate(45deg) !important;
  }
}