/* The property image and the regional atlas are research interfaces, not passive hero art. */
body[data-page="inmobiliaria"] .property-lens,
body[data-page="regional"] .regional-atlas{
  height:490px;
  display:grid;
  grid-template-rows:40px minmax(0,1fr) 60px;
  isolation:isolate;
  overflow:hidden;
  box-shadow:12px 12px 0 rgba(4,14,17,.22);
}
body[data-page="inmobiliaria"] .property-lens:before,
body[data-page="regional"] .regional-atlas:before{display:none}

.property-lens{background:#223239;border-color:#a48876}
.property-lens__mast,.regional-atlas__mast{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 17px;
  font:700 10px/1.2 var(--mono,monospace);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.property-lens__mast{color:#f5e8dc;border-bottom:1px solid #83908b}
.property-lens__mast span:last-child{color:#d2beb1;font-weight:500;text-align:right}
.property-lens__scene{position:relative;overflow:hidden;min-height:0;background:#333b3a}
body[data-page="inmobiliaria"] .property-lens .property-lens__scene>img{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;object-position:center 57%;
  max-width:none;opacity:1;box-shadow:none;
  filter:saturate(.86) contrast(1.06);
  transition:filter .5s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
body[data-page="inmobiliaria"] .property-lens .property-lens__scene[data-property-view="entorno"]>img{filter:saturate(.74) contrast(1.09)}
body[data-page="inmobiliaria"] .property-lens .property-lens__scene[data-property-view="producto"]>img{filter:saturate(.95) contrast(1.05)}
.property-lens__scene:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,23,28,.27),transparent 34%,rgba(10,23,28,.1));
}
.property-lens__point{
  position:absolute;z-index:3;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;background:rgba(10,27,33,.8);
  border:1px solid rgba(255,255,255,.85);
  font:700 11px var(--mono,monospace);
  box-shadow:0 3px 15px rgba(0,0,0,.38),0 0 0 7px rgba(255,255,255,.14);
  transform:translate(-50%,-50%);
  transition:background .25s,box-shadow .25s,transform .25s;
}
.property-lens__point:hover,.property-lens__point.is-active{
  background:#c43226;box-shadow:0 3px 18px rgba(0,0,0,.35),0 0 0 9px rgba(196,50,38,.27);
}
.property-lens__point:hover{transform:translate(-50%,-50%) scale(1.1)}
.property-lens__point--terrain{left:59%;top:72%}
.property-lens__point--context{left:29%;top:51%}
.property-lens__point--product{left:78%;top:44%}
.property-lens__readout{
  position:absolute;z-index:2;top:15px;left:15px;
  width:min(63%,330px);min-height:145px;padding:17px 18px 16px;
  background:rgba(9,28,35,.94);border:1px solid rgba(241,232,217,.52);
  backdrop-filter:blur(7px);color:#fff;
}
.property-lens__readout small,.regional-atlas__reading small{
  display:block;color:#f7a08e;
  font:700 10px var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:10px;
}
.property-lens__readout strong,.regional-atlas__reading strong{
  display:block;font:400 clamp(23px,2vw,28px)/1.04 var(--editorial,Georgia,serif);
  letter-spacing:-.04em;
}
body[data-page="inmobiliaria"] .property-lens__readout p{
  color:#c9d1ce;font-size:12px;line-height:1.45;margin:10px 0 0;
}
.property-lens__tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #aeb5aa;background:#f2eee6}
.property-lens__tabs button{
  position:relative;border:0;border-right:1px solid #c6c8bf;
  background:transparent;color:#3a5258;
  font:700 11px var(--mono,monospace);padding:10px 4px;
}
.property-lens__tabs button:last-child{border-right:0}
.property-lens__tabs button:hover,.property-lens__tabs button[aria-selected="true"]{background:#fffefa;color:#0c1a21}
.property-lens__tabs button[aria-selected="true"]:after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#c43226;
}

/* The atlas describes a method. The drawing carries no case measurements. */
.regional-atlas{background:#e6e2d8;border-color:#8eaaa3}
.regional-atlas__mast{background:#122d34;color:#ebeadf;border-bottom:1px solid #6f8583}
.regional-atlas__mast span:last-child{color:#aabcb5;font-weight:500}
.regional-atlas__map{position:relative;overflow:hidden;min-height:0;background:#e7e4d8}
body[data-page="regional"] .regional-atlas .regional-atlas__map>img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;opacity:1;box-shadow:none;
  filter:saturate(.72);
  transition:filter .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
}
body[data-page="regional"] .regional-atlas .regional-atlas__map[data-regional-lens="entorno"]>img{filter:saturate(.53) hue-rotate(-10deg)}
body[data-page="regional"] .regional-atlas .regional-atlas__map[data-regional-lens="entrada"]>img{filter:saturate(.93)}
.regional-atlas__focus{
  position:absolute;z-index:2;left:34%;top:58%;
  width:82px;height:82px;border:1px solid #c43226;border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 10px rgba(196,50,38,.17),inset 0 0 0 1px #fff;
  pointer-events:none;
  transition:left .6s cubic-bezier(.2,.7,.2,1),top .6s cubic-bezier(.2,.7,.2,1);
}
.regional-atlas__focus:after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:#c43226;box-shadow:0 0 0 4px rgba(255,255,255,.85);
}
.regional-atlas__map[data-regional-lens="entorno"] .regional-atlas__focus{left:60%;top:47%}
.regional-atlas__map[data-regional-lens="entrada"] .regional-atlas__focus{left:80%;top:32%}
.regional-atlas__reading{
  position:absolute;z-index:3;top:16px;left:16px;
  width:min(61%,275px);min-height:151px;
  padding:18px 20px 16px;background:#10262d;color:#fff;
  border-top:4px solid #c43226;box-shadow:8px 8px 0 rgba(16,38,45,.13);
}
body[data-page="regional"] .regional-atlas__reading p{
  margin:10px 0 0;color:#c0d1cf;font-size:12px;line-height:1.45;
}
.regional-atlas__control{
  display:grid;grid-template-columns:106px minmax(0,1fr);
  grid-template-rows:21px 18px;gap:0 15px;
  align-content:center;padding:8px 19px 6px;
  background:#e9e8df;border-top:1px solid #8da49e;color:#122a30;
}
.regional-atlas__control label{
  grid-row:1/3;align-self:center;
  font:700 10px/1.3 var(--mono,monospace);
  letter-spacing:.06em;text-transform:uppercase;
}
.regional-atlas__control input[type="range"]{
  width:100%;height:18px;margin:0;accent-color:#c43226;cursor:pointer;
}
.regional-atlas__labels{
  display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
}
.regional-atlas__labels button{
  color:#50666a;text-align:center;border:0;background:transparent;
  padding:1px 2px;font:700 10px var(--mono,monospace);
}
.regional-atlas__labels button:first-child{text-align:left}
.regional-atlas__labels button:last-child{text-align:right}
.regional-atlas__labels button:hover,.regional-atlas__labels button[aria-pressed="true"]{color:#b92d23;text-decoration:underline;text-underline-offset:3px}

@media(max-width:600px){
  body[data-page="inmobiliaria"] .property-lens,
  body[data-page="regional"] .regional-atlas{height:400px;grid-template-rows:35px minmax(0,1fr) 55px}
  .property-lens__mast,.regional-atlas__mast{font-size:9px;padding:0 12px}
  .property-lens__mast span:last-child,.regional-atlas__mast span:last-child{display:none}
  .property-lens__readout{top:11px;left:11px;width:min(66%,255px);min-height:134px;padding:13px 14px}
  .property-lens__readout strong,.regional-atlas__reading strong{font-size:22px}
  body[data-page="inmobiliaria"] .property-lens__readout p,
  body[data-page="regional"] .regional-atlas__reading p{font-size:11px;line-height:1.4}
  .property-lens__point{width:36px;height:36px;font-size:10px}
  .property-lens__point--terrain{left:59%;top:71%}
  .property-lens__point--context{left:35%;top:61%}
  .property-lens__point--product{left:79%;top:47%}
  .regional-atlas__reading{top:11px;left:11px;width:min(67%,245px);min-height:137px;padding:14px}
  .regional-atlas__focus{width:58px;height:58px}
  .regional-atlas__control{grid-template-columns:1fr;grid-template-rows:17px 18px 16px;padding:5px 13px 4px;gap:0}
  .regional-atlas__control label{grid-row:auto;font-size:9px}
  .regional-atlas__labels button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="inmobiliaria"] .property-lens .property-lens__scene>img,
  .property-lens__point,
  body[data-page="regional"] .regional-atlas .regional-atlas__map>img,
  .regional-atlas__focus{transition:none}
}
