/* BlockEstate · the buyer marketplace.
   Brand tokens from blockestate.ae (white, ink, green, deep green, teal, coin ambers; Lato 300-900, the typeface Bayut uses).
   Layout follows the references Mauricio sent: a loud hero with the promise, a grid of emirates
   overlapping its bottom edge, one tab bar for what we sell, a single row of controls on the search
   page and cards that read price first. Simplicity is subtraction: what is not needed is not here. */

:root{
  --white:#fff; --ink:#111; --ink-90:rgba(0,0,0,.9); --ink-72:rgba(0,0,0,.72);
  --ink-60:rgba(0,0,0,.6); --ink-45:rgba(0,0,0,.45); --ink-30:rgba(0,0,0,.3);
  --green:#22C55E; --green-deep:#16A34A; --green-dark:#15803D; --teal:#10222B; --teal-2:#16303C;
  --coin:#FBBF24; --coin-deep:#B45309; --coin-dark:#7C2D12;
  --line:rgba(0,0,0,.06); --line-2:rgba(0,0,0,.09); --card:rgba(0,0,0,.02);
  --radius:1rem; --radius-sm:.6rem; --wrap:1180px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
  --shadow-lg:0 2px 4px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.12);
  --shadow-green:0 8px 24px rgba(34,197,94,.28);
  --ring:0 0 0 3px rgba(34,197,94,.16);
  --bar:60px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Lato","Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:400; line-height:1.55; font-size:16px;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--green); color:#fff}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select{font:inherit; color:inherit}
h1,h2,h3,h4{font-weight:900; letter-spacing:-.035em; line-height:1.03; margin:0}
h1{font-size:clamp(2rem,5.4vw,3.5rem)}
h2{font-size:clamp(1.35rem,2.8vw,1.9rem); text-transform:uppercase}
h3{font-size:1.05rem; letter-spacing:-.02em}
h4{font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-45)}
p{margin:.6rem 0}
/* prices and figures line up when they share a column */
.money,.price,.count,td,dd{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-60)}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:18px}
.main{min-height:60vh; padding-bottom:64px}
.lab{display:flex; align-items:center; gap:.6rem; color:var(--green-deep);
  font-size:11px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; margin-bottom:.5rem}
.lab .dash{flex:1; height:1px; background:linear-gradient(90deg,var(--green),rgba(34,197,94,0))}
/* the two-tone headline of the site: the second half in a green gradient, clipped to the text */
.two-tone{background:linear-gradient(92deg,var(--green) 0%,#4ade80 55%,var(--green-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin:38px 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.sec-head h2{letter-spacing:-.03em}

/* ---------- bar: the mark, a search and three things ---------- */
.top{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:10px; height:var(--bar)}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:900; letter-spacing:-.03em;
  text-transform:uppercase; font-size:1rem; min-height:44px; flex:none}
.mark{width:28px; height:28px; flex:none}
.mark.sm{width:22px; height:22px}
/* El lockup de la marca, igual que en la portada: el icono a 32 y el nombre con su tracking. Así el
   logo se ve igual en las dos casas. */
.brand .mark{width:32px; height:32px}
.brand .brand-nombre{letter-spacing:2px}
.bar-search{flex:1; display:flex; min-width:0}
.bar-search input{height:40px; border-radius:999px; background:var(--card); border-color:transparent}
.bar-search input:focus{background:var(--white); border-color:var(--line-2)}
.bar-actions{margin-left:auto; display:flex; align-items:center; gap:2px}
.icon-btn{position:relative; width:44px; height:44px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:50%; border:1px solid transparent; background:transparent;
  cursor:pointer; font-size:1.05rem; color:var(--ink-72)}
.icon-btn:hover{background:var(--card); color:var(--ink)}
.icon-btn.on{color:var(--ink); font-weight:700}
.badge-count{position:absolute; top:6px; right:3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--green); color:#fff; font-size:10px; font-weight:700;
  line-height:17px; text-align:center}
.who{font-size:.85rem; color:var(--ink-45); padding-inline:.35rem; white-space:nowrap; max-width:12ch;
  overflow:hidden; text-overflow:ellipsis}
/* El menú de la cuenta cuelga de su botón: antes iba con un `right` fijo contra la barra, así que
   salía corrido hacia la izquierda y lejos del selector. */
.cuenta{position:relative; display:flex}
.menu{position:absolute; right:0; top:calc(100% + 10px); background:var(--white);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  padding:6px; min-width:230px; z-index:60}
.menu[hidden]{display:none}
.menu a,.menu button{display:block; width:100%; text-align:left; padding:.6rem .7rem; border-radius:.5rem;
  background:none; border:0; cursor:pointer; font-size:.92rem; min-height:44px}
.menu a:hover,.menu button:hover{background:var(--card)}
.menu hr{border:0; border-top:1px solid var(--line); margin:4px 0}

/* ---------- hero: the promise, the search, and the emirates ---------- */
/* The band of the front page: the photograph runs the whole width, edge to edge, behind everything,
   and the seven emirates sit on its lower edge, which is why the band is full-bleed instead of
   living inside the container like the rest of the page. Two scrims and not one: a wash from the
   left so the headline has something dark to sit on, and a soft darkening top and bottom so the
   skyline still reads under the type. */
.hero{background-image:
    radial-gradient(70% 78% at 25% 53%, rgba(6,16,24,.46) 0%, rgba(6,16,24,.30) 46%, rgba(6,16,24,0) 82%),
    linear-gradient(180deg, rgba(6,16,24,.39) 0%, rgba(6,16,24,.27) 38%, rgba(6,16,24,.21) 62%, rgba(6,16,24,.36) 100%),
    linear-gradient(90deg, rgba(6,16,24,.24) 0%, rgba(6,16,24,.07) 50%, rgba(6,16,24,.24) 100%),
    url(../img/hero-azotea-dubai.jpg);
  background-size:auto, auto, auto, cover; background-repeat:no-repeat;
  background-position:center, center, center, 50% 40%;
  color:#fff; padding:78px 0 104px; position:relative;
  margin-inline:calc(50% - 50vw); min-height:clamp(560px,68vh,760px);
  display:flex; align-items:center}
html,body{overflow-x:clip}
.hero{align-items:stretch}
.hero .inner{position:relative; max-width:1080px;
  /* Sin altura fija: la da el estirón del héroe, y así `space-between` reparte titular y buscador. */
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  text-align:left}
.hero-foot{width:100%}
.hero .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--green); font-weight:700; margin-bottom:.9rem}
.hero .eyebrow::before{content:""; width:26px; height:2px; background:var(--green); border-radius:2px}
/* La segunda línea del titular va en el verde de la casa. Un punto más claro que el verde de los
   botones: sobre la fotografía, el verde puro de interfaz se apaga y pierde fuerza. */
.hero h1 .verde{color:#34d76a}
.hero h1{max-width:26ch; text-shadow:0 2px 30px rgba(0,0,0,.3);
  font-size:clamp(1.9rem,4.1vw,3.1rem); letter-spacing:-.035em}
.hero .sub{color:rgba(255,255,255,.88); max-width:46ch; margin:.7rem 0 0;
  font-size:clamp(.95rem,1.4vw,1.1rem); text-shadow:0 1px 12px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.45)}
.hero .trust{display:flex; gap:.5rem; flex-wrap:wrap; margin:20px 0 0; padding:0; list-style:none}
.hero .trust li{display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem;
  color:rgba(255,255,255,.92); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:.4rem .7rem; border-radius:999px; backdrop-filter:blur(6px)}
.hero .trust li::before{content:"✓"; color:var(--green); font-weight:900}
.hero-search{display:grid; grid-template-columns:1fr auto; gap:8px; background:var(--white);
  border-radius:999px; padding:7px; margin:26px 0 0; max-width:640px; box-shadow:var(--shadow-lg)}
.hero-search input{border:0; background:none; min-height:48px; padding-left:16px; font-size:1rem}
.hero-search input:focus{outline:none}
.hero-search .btn{border-radius:999px; padding-inline:1.4rem; box-shadow:var(--shadow-green)}

/* The emirate grid used to ride up over the bottom edge of the hero. It does not any more: the
   search panel now sits on that edge, so lifting the cards pushed them under the panel. */
.emi{position:relative; z-index:2; margin-top:22px}
.emi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.emi-grid a{position:relative; background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--radius); min-height:86px; display:grid; grid-template-columns:1fr auto;
  align-content:center; align-items:center; column-gap:10px; row-gap:1px; font-weight:800;
  font-size:1rem; letter-spacing:-.02em; box-shadow:var(--shadow); padding:.9rem 1rem;
  text-align:left; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease}
.emi-grid a > span{grid-column:1}
.emi-grid a > small{grid-column:1}
.emi-grid a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--green-deep)); transform:scaleX(0);
  transform-origin:left; transition:transform .2s ease}
.emi-grid a:hover{transform:translateY(-2px); border-color:rgba(34,197,94,.5); box-shadow:var(--shadow-lg)}
.emi-grid a:hover::after{transform:scaleX(1)}
.emi-grid a small{font-weight:500; color:var(--ink-45); font-size:.72rem; letter-spacing:.04em}
/* La flecha: en reposo es una pastilla gris, y con el paso se enciende en verde y se corre. */
.emi-grid a .go{grid-column:2; grid-row:1 / span 2; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%; background:var(--card); color:var(--ink-60);
  font-style:normal; font-weight:700; font-size:1rem;
  transition:background .16s ease, color .16s ease, transform .16s ease}
.emi-grid a:hover .go{background:var(--green); color:#fff; transform:translateX(3px)}
/* «All emirates» no es un emirato más: es la puerta de todo el catálogo y va en tinta. */
.emi-grid a.todo{background:var(--teal); border-color:var(--teal); color:#fff}
.emi-grid a.todo small{color:rgba(255,255,255,.62)}
.emi-grid a.todo .go{background:rgba(255,255,255,.14); color:#fff}
.emi-grid a.todo:hover{border-color:var(--teal); background:var(--teal-2)}
.emi-grid a.todo:hover .go{background:var(--green); color:#fff}
@media (max-width:620px){
  .emi-grid a{min-height:76px; padding:.75rem .8rem; font-size:.94rem}
  .emi-grid a .go{width:30px; height:30px}
}

/* ---------- tab bar: what we sell, in one line ---------- */
.tabs{display:flex; gap:6px; overflow-x:auto; padding:6px 0 2px; margin-top:30px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none; padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line-2);
  font-size:.88rem; font-weight:600; color:var(--ink-72); min-height:44px; display:inline-flex;
  align-items:center; background:var(--white); transition:background .15s ease, color .15s ease}
.tabs a:hover{background:var(--card); color:var(--ink)}
.tabs a.on{background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* ---------- controls: one row, four plus filters ---------- */
/* The row wraps; it does NOT scroll sideways. `overflow-x:auto` here made the browser clip the
   vertical axis too (a non-visible overflow on one axis forces the other), and the panels of the
   controls came out cut off. A row of five short controls wraps before it needs a scrollbar. */
.controls{display:flex; gap:8px; align-items:flex-start; margin:16px 0 0; flex-wrap:wrap}
.control{flex:1 1 0; min-width:134px; position:relative}
.control label{display:block; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:2px}
.control select,.control input{min-height:46px; border-radius:var(--radius-sm); background:var(--white)}
.control.ancho{min-width:172px}
.control .sub{font-size:.7rem; color:var(--ink-45); font-weight:500; margin-top:3px; display:block}
.result-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:18px 0 4px}
.result-bar .count{font-weight:700}
.result-bar .tools{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px}
.chip{border:1px solid var(--line-2); border-radius:999px; padding:.35rem .75rem; font-size:.82rem;
  background:var(--white); cursor:pointer; min-height:44px; display:inline-flex; align-items:center;
  gap:.35rem; transition:background .15s ease, border-color .15s ease}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip.on:hover{background:#000}
/* the × of an active filter: it shows when the pointer is on it, and always on a touch screen */
.chip .x{font-style:normal; font-size:1rem; line-height:1; opacity:0; width:0; overflow:hidden;
  transition:opacity .15s ease, width .15s ease, margin-left .15s ease}
.chip:hover .x,.chip:focus-visible .x{opacity:1; width:auto; margin-left:.15rem}
@media (hover:none){.chip .x{opacity:.85; width:auto; margin-left:.15rem}}
.link-btn{background:none; border:0; padding:0; cursor:pointer; font-size:.88rem; color:var(--ink-72);
  text-decoration:underline; text-underline-offset:3px; min-height:44px}
.link-btn:hover{color:var(--ink)}

/* the panel of a control opens next to it, and on a phone it comes up from the bottom */
.popover{position:absolute; z-index:50; top:calc(100% + 8px); left:0; width:min(560px,92vw);
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px; max-height:70vh; overflow:auto}
.popover[hidden]{display:none}
.popover .pop-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
  padding:.2rem .4rem}
.popover .close{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--card); cursor:pointer; font-size:1.05rem; line-height:1; color:var(--ink);
  display:grid; place-items:center}
.popover .close:hover{background:var(--line); border-color:var(--ink-45)}
.veil{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:45}
.veil[hidden]{display:none}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fields .full{grid-column:1/-1}
.fields .pop-group{grid-column:1/-1; margin:.6rem .2rem .3rem}
.fields .pop-group:first-of-type{margin-top:.1rem}

/* ---------- the control and its panel ---------- */
.ctrl{width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.55rem .8rem; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--white); cursor:pointer; text-align:left; font-size:.92rem}
.ctrl:hover{border-color:var(--ink-30)}
.ctrl[aria-expanded="true"]{border-color:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.ctrl > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctrl i{font-style:normal; color:var(--ink-45); font-size:.72rem}
.control .popover{width:min(340px,92vw)}
.control.ancho .popover{width:min(560px,92vw)}
.pop-opt{width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.6rem .7rem; border:0; background:none; border-radius:.55rem; cursor:pointer; text-align:left;
  min-height:44px; font-size:.92rem; color:var(--ink)}
.pop-opt:hover{background:var(--card)}
.pop-opt.on{background:rgba(34,197,94,.1); color:var(--green-deep); font-weight:700}
.pop-opt small{display:block; color:var(--ink-45); font-size:.76rem; font-weight:500; font-style:normal}
.pop-opt.on small{color:var(--green-deep)}
.pop-opt b{color:var(--green-deep)}
.pop-group{margin:.75rem .7rem .25rem; color:var(--ink-45); font-size:.64rem; letter-spacing:.14em;
  font-weight:700; text-transform:uppercase}
.pop-group:first-of-type{margin-top:.25rem}
.pop-sep{border:0; border-top:1px solid var(--line); margin:.5rem .3rem}
/* several values: round chips, a figure is a circle, a word a pill, and the footer that counts */
.pop-chips{display:flex; flex-wrap:wrap; gap:8px; padding:.15rem .55rem .5rem}
.pop-chip{min-width:46px; min-height:46px; padding:.2rem .7rem; border-radius:999px;
  border:1px solid var(--line-2); background:var(--white); font-weight:700; font-size:.9rem;
  letter-spacing:-.01em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease}
.pop-chip:hover{border-color:var(--ink-30); transform:translateY(-1px)}
.pop-chip.on{background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff;
  border-color:var(--green); box-shadow:var(--shadow-green)}
.pop-more{display:block; margin:.15rem .7rem .4rem; background:none; border:0; cursor:pointer;
  color:var(--green-deep); font-weight:700; font-size:.85rem; padding:.45rem 0; min-height:44px}
.pop-more:hover{text-decoration:underline}
.pop-foot{display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  position:sticky; bottom:-10px; background:var(--white)}
.pop-foot .btn{flex:1}
/* the compact variant lives inside the results bar, with no label above it */
.control.compacto{flex:0 0 auto; min-width:0}
.control.compacto .ctrl{min-height:38px; padding:.3rem .6rem; font-size:.88rem; border-color:transparent;
  gap:.35rem}
.control.compacto .ctrl:hover{background:var(--card); border-color:var(--line-2)}

/* ---------- the map ---------- */
/* the segmented control (list/map, furnishing) and the switch */
.vista,.seg{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--card)}
.vista button,.seg button{border:0; background:none; cursor:pointer; padding:.35rem .8rem; border-radius:999px;
  font-size:.85rem; font-weight:600; color:var(--ink-72); min-height:36px}
.vista button.on,.seg button.on{background:var(--white); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.1)}
.switch{display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600;
  color:var(--ink-72); cursor:pointer; min-height:44px}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .track{width:44px; height:26px; border-radius:999px; background:var(--line-2); position:relative;
  transition:background .18s ease; flex:none}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .18s ease}
.switch input:checked + .track{background:linear-gradient(135deg,var(--green),var(--green-deep))}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch input:focus-visible + .track{outline:2px solid var(--green); outline-offset:2px}
.switch:hover{color:var(--ink)}
.lay.mapa{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.mapa{position:sticky; top:calc(var(--bar) + 14px); height:min(78vh,720px); border:1px solid var(--line-2);
  border-radius:1.1rem; overflow:hidden; background:var(--card); z-index:1}
.mapa-aviso{padding:22px; font-size:.9rem; color:var(--ink-60)}
/* the marker is a price, not a dot */
.marca{background:none; border:0}
.marca span{display:inline-block; transform:translate(-50%,-100%);
  background:var(--ink); color:#fff; font-weight:800; font-size:.72rem; letter-spacing:-.01em;
  padding:.28rem .55rem; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.3); white-space:nowrap;
  border:2px solid var(--white); transition:transform .15s ease, background .15s ease}
.marca span::after{content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px;
  transform:translateX(-50%) rotate(45deg); background:inherit; border-right:2px solid var(--white);
  border-bottom:2px solid var(--white)}
.marca.on span{background:linear-gradient(135deg,var(--green),var(--green-deep)); transform:translate(-50%,-100%) scale(1.08)}
.card.elegida{box-shadow:var(--shadow-lg); border-color:var(--green)}
.leaflet-container{font-family:inherit; background:#eaeef1}

/* ---------- the rail: who is behind the catalogue ---------- */
.lay{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start}
.rail{position:sticky; top:calc(var(--bar) + 14px); display:grid; gap:16px}
.rail-box{border:1px solid var(--line-2); border-radius:1.1rem; padding:14px 12px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.025),rgba(0,0,0,0))}
.dev-row.con-foto .proy-foto{width:64px; height:44px; border-radius:8px; object-fit:cover; flex:0 0 64px;
  border:1px solid var(--line-2); background:#eef2ee}
.rail-box > h3{display:flex; align-items:center; gap:.55rem; margin:0 0 .7rem .35rem;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); font-weight:800}
.rail-box > h3::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent)}
.dev-row{display:flex; align-items:center; gap:10px; padding:.5rem .45rem; border-radius:.7rem;
  min-height:48px; transition:background .15s ease, box-shadow .15s ease}
.dev-row:hover{background:var(--white); box-shadow:var(--shadow)}
.logo{width:38px; height:38px; border-radius:.7rem; display:inline-flex; align-items:center;
  justify-content:center; font-weight:900; font-size:.8rem; letter-spacing:-.02em; color:#fff;
  flex:none; overflow:hidden; background:var(--teal);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 12px rgba(16,34,43,.18)}
.logo img{width:100%; height:100%; object-fit:contain; background:#fff}
/* Una marca dibujada aquí (las inmobiliarias del sandbox) llena su caja. El SVG va POSICIONADO: si
   se deja en el flujo sin tamaño propio, toma su medida por defecto (300x300), la caja flexible
   crece para que quepa (min-width:auto) y la tarjeta entera se descuadra. Fuera del flujo, la
   medida la manda la caja, que ya viene fijada. */
.logo{position:relative; min-width:0}
.logo svg{position:absolute; inset:0; display:block; width:100%; height:100%}
.logo.marca{background:none; padding:0; border:0; box-shadow:0 4px 12px rgba(16,34,43,.18)}
.logo.sm{width:28px; height:28px; border-radius:.5rem; font-size:.68rem}
/* La marca no necesita el marquito blanco que sí necesita un logo ajeno: el color y la forma ya
   vienen dentro. Y en la tarjeta va más pequeña que la caja pensada para un logotipo. */
.card .foot .dev .logo.marca{width:30px; height:30px; flex:0 0 30px; padding:0; background:none;
  border:0; border-radius:9px}
.rail-box .dev-row .logo.marca{padding:0; background:none; border:0}
.dev-row .meta{min-width:0}
.dev-row b{display:block; font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; letter-spacing:-.01em}
.dev-row span{font-size:.76rem; color:var(--ink-45)}

/* ---------- cards: price first, photo on the left ---------- */
.list{display:grid; gap:16px; margin-top:8px}
.card{display:grid; grid-template-columns:40% 60%; border:1px solid var(--line-2);
  border-radius:1.1rem; overflow:hidden; background:var(--white); position:relative;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:rgba(34,197,94,.35)}
.card .photo{position:relative; background:linear-gradient(135deg,rgba(16,34,43,.92),rgba(34,197,94,.55));
  min-height:240px; overflow:hidden}
.card .photo > a{position:absolute; inset:0; z-index:1}
.card .photo > a img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  transition:transform .5s ease}
.card:hover .photo > a img{transform:scale(1.04)}
/* The thumbnails live inside .photo too, so the rule above used to catch them: absolutely
   positioned, their 100% was the strip, not the button, and every thumbnail showed a corner. */
.card .photo .micro-fotos .mini img{position:static; inset:auto; width:100%; height:100%;
  object-fit:cover; transition:none}
.card:hover .photo .micro-fotos .mini img{transform:none}
/* a soft veil so the badges always read over any photograph */
.card .photo .foto-flecha{position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(8,20,16,.55);
  color:#fff; font-size:1.6rem; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background .15s ease, border-color .15s ease}
.card .photo .foto-flecha:hover{background:rgba(8,20,16,.82); border-color:#fff}
.card .photo .foto-flecha.prev{left:10px}
.card .photo .foto-flecha.next{right:10px}
@media(max-width:560px){
  .card .photo .foto-flecha{width:41px; height:41px; font-size:1.45rem}
  .card .photo .foto-flecha.prev{left:8px}
  .card .photo .foto-flecha.next{right:8px}
}
.card .photo::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 42%)}
.card .photo .fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.92); font-weight:800; text-transform:uppercase; font-size:1.08rem;
  letter-spacing:-.01em; padding:1rem; text-align:center}
.card .body{padding:19px 22px; display:flex; flex-direction:column; gap:.5rem; min-width:0}
.card .price{font-weight:800; font-size:1.74rem; letter-spacing:-.025em; line-height:1.15}
/* The two lines of a price: the crypto first, what the buyer pays with, and the contract price in
   dirhams under it. The second is never hidden: it is the one that counts (BR-001). */
.price-cripto{display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap}
.price-cripto b{font-size:1.26rem; font-weight:700; letter-spacing:-.015em; color:var(--green-deep);
  font-variant-numeric:tabular-nums}
.price-cripto i{font-style:normal; font-size:.84rem; font-weight:500; color:var(--ink-45)}
/* One choice for the whole site, in the bar. */
.sel-activo{display:inline-flex; align-items:center; gap:4px; padding:2px 2px 2px 8px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--card)}
.sel-activo span{font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-45)}
.sel-activo button{min-height:28px; padding:0 .6rem; border:0; border-radius:999px; background:none;
  font:inherit; font-size:.75rem; font-weight:700; color:var(--ink-60); cursor:pointer}
.sel-activo button.on{background:var(--teal); color:#fff}
.sel-activo .sel-tasa{display:inline-flex; align-items:center; gap:4px; padding:0 6px 0 8px;
  border-left:1px solid var(--line-2); font-size:.72rem; font-weight:700; color:var(--ink-45)}
.sel-activo .sel-tasa.mal{border-left:0; color:#991b1b; background:#fdecec; border-radius:999px; padding:4px 10px}
.sel-activo .sel-tasa input{width:70px; min-height:26px; padding:0 4px; border:1px solid var(--line-2);
  border-radius:.3rem; font:inherit; font-size:.75rem}
.card .tipo{font-size:1.02rem; color:var(--ink-60); margin-top:-3px}
.card h3{font-size:1.22rem; font-weight:600; letter-spacing:-.01em}
.card h3 a:hover{color:var(--green-deep)}
.card .specs{display:flex; gap:1.2rem; flex-wrap:wrap; color:var(--ink-72); font-size:1.03rem; font-weight:400}
.card .specs span{display:inline-flex; align-items:center; gap:.35rem}
.card .specs svg{color:var(--green-deep); flex:none}
.card .zona{color:var(--ink-45); font-size:1.03rem; font-weight:400; display:flex; align-items:center; gap:.35rem}
.card .zona svg{color:var(--green); flex:none}
.card .verif{margin-top:.1rem}
.card .obra{margin-top:.2rem}
.card .foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:.7rem; border-top:1px solid var(--line)}
.card .dev{font-size:.96rem; color:var(--ink-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:.4rem}
.card .dev::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--ink-30)}
.tags{position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:2}
.tag{background:rgba(255,255,255,.96); color:var(--ink); font-size:.79rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; padding:.34rem .66rem; border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.18); backdrop-filter:blur(6px)}
.tag.green{background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff}
.tag.reservada{background:#F59E0B; color:#1A1A1A; font-weight:700; letter-spacing:.02em;}
.tag.coin{background:linear-gradient(135deg,var(--coin),var(--coin-deep)); color:#fff;
  display:inline-flex; align-items:center; gap:.25rem}
/* the mark of Verysset, over the photograph: a dark pill with the approved stamp and the name */
.sello-ico{width:18px; height:18px; border-radius:50%; flex:none; display:inline-flex;
  align-items:center; justify-content:center; background:var(--green); box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.tag.verysset{background:var(--teal); color:#fff; display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem .2rem .25rem; font-weight:800; letter-spacing:.06em}
.badge.verysset{background:var(--teal); border-color:var(--teal); color:#fff; gap:.4rem;
  padding:.28rem .7rem .28rem .3rem; font-weight:800; letter-spacing:.06em}
.verif .sello-ico{width:16px; height:16px; box-shadow:0 0 0 1.5px rgba(34,197,94,.25)}
.verif svg,.badge svg{vertical-align:0}
.heart{position:absolute; right:12px; top:12px; z-index:2; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.96); cursor:pointer; font-size:1.05rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, background .15s ease}
.heart:hover{transform:scale(1.06)}
.heart.on{background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff}
.badge{display:inline-flex; align-items:center; gap:.35rem; background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.38); color:var(--green-deep); border-radius:999px;
  padding:.3rem .7rem; font-size:.76rem; font-weight:700}
.empty{border:1px dashed var(--line-2); border-radius:var(--radius); padding:34px; text-align:center;
  color:var(--ink-60); background:var(--card); margin-top:14px}

/* the verification line and the new-build boxes are shared by the card and the unit page */
.verif{font-size:.82rem; color:var(--green-deep); font-weight:700; display:flex; align-items:center;
  gap:.35rem}
.obra{display:flex; gap:8px; margin-top:.15rem}
.obra > div{flex:1; border:1px solid rgba(34,197,94,.28); border-radius:.65rem; padding:.4rem .6rem;
  background:linear-gradient(180deg,rgba(34,197,94,.07),rgba(34,197,94,.02));
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem}
.obra svg{color:var(--green-deep); flex:none}
.obra span{font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-deep); font-weight:800}
.obra b{font-size:.9rem; letter-spacing:-.02em; flex-basis:100%}

/* ---------- unit page ---------- */
.detail{display:grid; grid-template-columns:1.4fr .92fr; gap:26px; margin-top:14px}
.gallery{border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; background:var(--card)}
.gallery .big{aspect-ratio:16/10; position:relative;
  background:linear-gradient(135deg,rgba(16,34,43,.92),rgba(34,197,94,.55))}
.gallery .big img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.thumbs{display:flex; gap:8px; padding:8px; overflow-x:auto}
.thumbs img{width:76px; height:56px; object-fit:cover; border-radius:.4rem; border:1px solid var(--line-2)}
.panel{border:1px solid var(--line-2); border-radius:var(--radius); padding:18px; background:var(--card);
  position:sticky; top:calc(var(--bar) + 14px)}
.panel .price{font-size:1.8rem; font-weight:900; letter-spacing:-.02em}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; margin:.9rem 0; font-size:.92rem}
.kv dt{color:var(--ink-45)} .kv dd{margin:0; text-align:right; font-weight:600}
.note{font-size:.82rem; color:var(--ink-45); margin-top:.6rem; display:block}
.note.ok{color:var(--green-deep); font-weight:600}
.note.err{color:#991b1b; font-weight:600}

/* ---------- the connect block: one door per channel ----------
   The reference's row of buttons, on our tokens. A code carries a door per channel, so a closed one
   has to read as closed: it is never drawn as a link that goes nowhere. */
.conectar{margin-top:1.15rem; padding-top:1rem; border-top:1px solid var(--line-2)}
.conectar h4{margin-bottom:.2rem}
.conectar .field{margin-top:.7rem}
.field label{display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink-45); margin-bottom:.35rem}
input:not([type]){width:100%; padding:.65rem .8rem; border:1px solid var(--line-2);
  border-radius:var(--radius-sm); background:var(--white); min-height:46px}
input:not([type]):hover{border-color:var(--ink-30)}
input:not([type]):focus{border-color:var(--green); box-shadow:var(--ring); outline:none}
input.pide{border-color:var(--green); box-shadow:var(--ring)}
.canales{display:flex; flex-wrap:wrap; gap:8px; margin:.6rem 0 .2rem}
.canal{display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem .9rem;
  border:1px solid var(--line-2); border-radius:.7rem; background:var(--white); color:var(--ink-72);
  font-size:.85rem; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease}
.canal:hover{background:var(--card); border-color:var(--ink-30); transform:translateY(-1px)}
.canal svg{flex:none}
.canal.wa{background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.32); color:var(--green-dark)}
.canal.wa:hover{background:rgba(34,197,94,.18)}
.canal.abierto{border-color:var(--green-deep); background:rgba(34,197,94,.10)}

/* Who answers for the code: the card of the reference, with the initials when there is no photo. */
.quien{display:flex; align-items:center; gap:.7rem; margin:.65rem 0 .1rem; padding:.6rem .7rem;
  border:1px solid var(--line-2); border-radius:.85rem; background:var(--white)}
.quien .avatar{width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--teal); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; letter-spacing:.02em}
.quien .avatar img{width:100%; height:100%; object-fit:cover; display:block}
.quien-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.quien-txt b{font-size:.95rem}
.quien-txt span{font-size:.8rem}

/* The building's own numbers, on the project page: filled in only where the developer declared them. */
.edificio{margin:1rem 0; padding:.95rem 1.05rem; border:1px solid var(--line-2);
  border-radius:.85rem; background:var(--white)}
.edificio .kv{margin:.5rem 0 0}
.amen{display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:.6rem 0}
.amen li{border:1px solid var(--line-2); border-radius:999px; padding:.25rem .65rem; font-size:.82rem;
  background:var(--white)}
.section{margin-top:30px; padding-top:20px; border-top:1px solid var(--line)}
.steps-list{list-style:none; counter-reset:p; padding:0; margin:.6rem 0; display:grid; gap:6px}
.steps-list li{counter-increment:p; display:flex; align-items:center; gap:.6rem; font-size:.9rem;
  color:var(--ink-45)}
.steps-list li::before{content:counter(p); flex:none; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; background:var(--white)}
.steps-list li.hecho{color:var(--ink-72)}
.steps-list li.hecho::before{content:'✓'; background:var(--green); border-color:var(--green); color:#fff}
.steps-list li.aqui{color:var(--ink); font-weight:700}
.steps-list li.aqui::before{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- buttons and forms ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px;
  padding:.65rem 1.15rem; border-radius:999px; border:1px solid transparent;
  background:linear-gradient(180deg,#1c1c1c,#000); color:#fff; font-weight:700; cursor:pointer;
  text-align:center; letter-spacing:-.01em;
  box-shadow:0 6px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.2)}
.btn.green{background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);
  box-shadow:var(--shadow-green), inset 0 1px 0 rgba(255,255,255,.28)}
.btn.green:hover{background:linear-gradient(135deg,#26d366,var(--green-deep))}
.btn.ghost{background:var(--white); border-color:var(--line-2); color:var(--ink); box-shadow:none}
.btn.ghost:hover{background:var(--card); border-color:var(--ink-30)}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.btn.sm{min-height:38px; padding:.4rem .85rem; font-size:.86rem}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],select{
  width:100%; padding:.65rem .8rem; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--white); min-height:46px; transition:border-color .15s ease, box-shadow .15s ease}
input:hover,select:hover{border-color:var(--ink-30)}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--green); outline-offset:2px}
input:focus,select:focus{border-color:var(--green); box-shadow:var(--ring)}
.narrow{max-width:440px; margin:26px auto}
.form-card{border:1px solid var(--line-2); border-radius:var(--radius); padding:20px; background:var(--card)}
.form-card .field{margin-bottom:.85rem}
.form-card label{display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-45); margin-bottom:.3rem}
.msg{border-radius:var(--radius-sm); padding:.7rem .85rem; font-size:.9rem; margin:.7rem 0}
.msg.err{background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.3); color:#991b1b}
.msg.ok{background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35); color:var(--green-deep)}
.msg.warn{background:rgba(251,191,36,.14); border:1px solid rgba(180,83,9,.3); color:var(--coin-dark)}

/* ---------- lists ---------- */
.item{border:1px solid var(--line-2); border-radius:var(--radius); padding:14px 16px; background:var(--card);
  display:grid; gap:.3rem}
.item.unread{border-left:4px solid var(--green)}
.item .when{font-size:.78rem; color:var(--ink-45)}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* ---------- footer: the dark one, in the deep green of the house ---------- */
.foot{background:#0c211a; color:#cfe0d8; border-top:0; margin-top:44px; padding:40px 0 26px}
.foot-alto{display:grid; grid-template-columns:1.6fr .8fr .8fr .8fr 1.1fr; gap:26px}
.foot-col h4{margin:0 0 .6rem; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#8fb3a5; font-weight:800}
.foot .plain a{color:#cfe0d8} .foot .plain a:hover{color:#fff}
.foot-quien p{margin:.5rem 0 0; font-size:.86rem; color:#a9c3b8; max-width:44ch}
.foot-brand{display:flex; align-items:center; gap:.5rem; font-weight:900; text-transform:uppercase;
  letter-spacing:-.03em; color:#fff}
/* El pie lleva el mismo lockup que la barra: el nombre y, debajo, quién opera la plataforma. */
.foot-brand .foot-txt{display:flex; flex-direction:column; line-height:1.15}
.foot-brand .brand-nombre, .foot-brand .foot-txt > span{letter-spacing:1px}
.foot-brand .foot-por{font-style:normal; font-size:8px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green); margin-top:2px}
.foot-redes{display:flex; gap:8px; margin-top:14px}
.foot-redes .red{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:rgba(255,255,255,.07); color:#dfeee7}
.foot-redes .red:hover{background:var(--teal); color:#fff}
.foot-redes svg{width:18px; height:18px; fill:currentColor}
.foot-tiendas{display:grid; gap:8px}
.foot-tiendas .insignia{display:block; height:42px; width:auto; border-radius:7px}
.foot-nota{margin:.55rem 0 0; font-size:.68rem; color:#8fb3a5; max-width:24ch}
.tienda{display:block; border:1px solid rgba(255,255,255,.16); border-radius:.6rem; padding:7px 12px;
  color:#dfeee7; line-height:1.15}
.tienda:hover{border-color:var(--teal); color:#fff}
.tienda b{display:block; font-size:.86rem} .tienda span{font-size:.7rem; color:#8fb3a5}
.foot-abajo{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:30px;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.1)}
.foot-pais{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600;
  padding:7px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#dfeee7}
.foot-pais svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4}
.foot .legal{flex:1 1 320px; margin:0; color:#8fb3a5; font-size:.74rem}
.foot-copy{font-size:.78rem; color:#8fb3a5}
.foot-top{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; background:none; color:#dfeee7;
  font:inherit; font-size:.8rem; font-weight:700}
.foot-top:hover{border-color:var(--teal); color:#fff}
.foot-top svg{width:15px; height:15px; fill:currentColor}
@media (max-width:980px){.foot-alto{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot-alto{grid-template-columns:1fr}}

/* ---------- footer: two blocks, not six ---------- */
.foot{color:#cfe0d8}
.foot-grid{display:grid; grid-template-columns:1.8fr 1fr; gap:24px}
.plain{list-style:none; padding:0; margin:.4rem 0; display:grid; gap:.3rem; font-size:.9rem}
.plain a{color:var(--ink-72)} .plain a:hover{color:var(--ink)}
.legal{font-size:.76rem; color:var(--ink-45); margin-top:20px; max-width:88ch}

/* ---------- the two cards that speak to the other side ---------- */
.promos{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 6px}
.promo{position:relative; overflow:hidden; border-radius:1.1rem; padding:26px 24px; display:grid;
  grid-template-columns:1fr 190px; gap:14px; align-items:center; color:#fff;
  background:linear-gradient(135deg,#0c211a 0%,#123a2c 62%,#16553d 100%)}
.promo-cre{background:linear-gradient(135deg,#101a24 0%,#12303a 60%,#0f4a44 100%)}
.promo-txt{position:relative; z-index:1}
.promo-lab{display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:800; color:#8fe0c0; margin-bottom:8px}
.promo h2{margin:0 0 8px; font-size:1.28rem; line-height:1.2; letter-spacing:-.02em; color:#fff}
.promo p{margin:0 0 14px; font-size:.88rem; color:#bcd6cb; max-width:38ch}
.promo p b{color:#fff}
.promo-btn{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px;
  border-radius:999px; background:var(--teal); color:#fff; font-weight:700; font-size:.88rem}
.promo-btn:hover{background:#0d5f4f}
.promo-btn svg{width:17px; height:17px}
.promo-nota{display:block; margin-top:10px; font-size:.7rem; color:#8fb3a5; max-width:34ch}
.promo-art svg{width:100%; height:auto; display:block}
.promo-art .torre{fill:rgba(255,255,255,.09); stroke:rgba(255,255,255,.22)}
.promo-art .luces rect{fill:rgba(143,224,192,.5)}
.promo-art .luna{fill:rgba(255,255,255,.16)}
.promo-art .movil{fill:rgba(255,255,255,.1); stroke:rgba(255,255,255,.24)}
.promo-art .pantalla{fill:rgba(143,224,192,.16); stroke:rgba(143,224,192,.5)}
.promo-art .codigo{fill:#8fe0c0; font:700 17px/1 -apple-system,Segoe UI,Roboto,sans-serif; letter-spacing:.1em}
.promo-art .boca{fill:rgba(255,255,255,.4)}
.promo-art .onda{fill:none; stroke:rgba(143,224,192,.55); stroke-width:2.4; stroke-linecap:round}
@media (max-width:980px){.promos{grid-template-columns:1fr} .promo{grid-template-columns:1fr 150px}}
@media (max-width:560px){.promo{grid-template-columns:1fr; padding:22px 18px} .promo-art{order:-1}}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:70;
  background:var(--teal); color:#fff; padding:.75rem 1.1rem; border-radius:999px; font-size:.9rem;
  box-shadow:var(--shadow); max-width:min(92vw,520px)}
.toast.err{background:#991b1b} .toast.ok{background:var(--green-deep)}
.load{display:grid; gap:14px; margin-top:6px}
.sk{height:196px; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(100deg,var(--card) 30%,rgba(0,0,0,.055) 50%,var(--card) 70%);
  background-size:220% 100%; animation:sk 1.2s linear infinite}
@keyframes sk{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .detail{grid-template-columns:1fr}
  .panel{position:static}
  .emi-grid{grid-template-columns:repeat(3,1fr)}
  .lay{grid-template-columns:1fr}
  .rail{position:static}
}
@media (max-width:760px){
  /* On a phone the panel of a control cannot hang next to it: it comes up from the bottom. */
  .popover{position:fixed; inset:auto 0 0 0; width:auto; max-height:86vh; border-radius:1.25rem 1.25rem 0 0;
    box-shadow:0 -14px 50px rgba(0,0,0,.28); z-index:70; padding:20px 12px 14px}
  /* La hoja se anuncia: el asa dice «esto se cierra», y la cabecera se queda fija al hacer scroll. */
  .popover::before{content:""; position:absolute; top:9px; left:50%; width:46px; height:4px;
    border-radius:99px; background:var(--ink-45); opacity:.55; transform:translateX(-50%)}
  .popover .pop-head{position:sticky; top:-20px; z-index:2; background:var(--white);
    margin:0 0 6px; padding:6px 0 10px; border-bottom:1px solid var(--line)}
  .pop-opt{min-height:48px; border-radius:0; border-bottom:1px solid var(--line)}
  .pop-opt:last-of-type{border-bottom:0}
  .pop-opt.on{border-radius:.55rem}
  .veil{z-index:65}
  .card{grid-template-columns:1fr}
  .card .photo{min-height:0; aspect-ratio:16/10}
  .foot-grid{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .who{display:none}
  /* El titular no puede quedar debajo de la barra (el héroe empieza en el borde de la página) y la
     banda sube de alto para que la foto enseñe a la gente por encima y por debajo del panel. */
  .hero{padding-top:calc(var(--bar) + 16px); padding-bottom:28px; min-height:clamp(640px,92vh,820px);
    /* En vertical manda el recorte horizontal: se lleva a las dos mujeres a la vista, no el centro. */
    background-position:center, center, 76% 30%}
  .hero h1{font-size:1.6rem}
  .emi-grid{grid-template-columns:repeat(2,1fr)}
  .emi{margin-top:16px}
  /* On a phone the controls wrap into two columns instead of scrolling sideways: everything is
     visible without dragging, which is the point of having few of them. */
  .controls{flex-wrap:wrap; overflow:visible}
  .control{flex:1 1 46%; min-width:0}
  .control.ancho{flex:1 1 100%}
}
@media (max-width:430px){
  .brand span{display:none}
  .bar-search{display:none}
  .card .price{font-size:1.2rem}
}
/* Medido a 620px: con el lockup entero (180px) el buscador de la barra se quedaba en 55. Por debajo de
   620 se retiran el nombre y el microdato y queda el icono —la marca se reconoce igual— y el buscador
   respira. El pie de página conserva el lockup completo. */
@media (max-width:620px){ .brand .brand-txt{display:none} }
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---------- the figures of a sheet: each row with its icon ---------- */
.kv.con-ico dt{display:flex; align-items:center; gap:.5rem}
.kv.con-ico dt svg{flex:none; color:var(--ink-45); opacity:.9}
.kv.con-ico dd{margin:0}

/* ---------- the sheet's gallery strip ---------- */
.gallery .big{cursor:zoom-in}
.abrir-gal{position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex;
  align-items:center; gap:.4rem; padding:.5rem .85rem; border-radius:999px;
  background:rgba(8,16,20,.62); border:1px solid rgba(255,255,255,.18); color:#fff;
  backdrop-filter:blur(8px) saturate(130%); font-size:.8rem; font-weight:600; letter-spacing:.01em}
.abrir-gal b{font-weight:800; letter-spacing:-.01em}
.abrir-gal svg{opacity:.9}
.thumbs .tb{flex:none; padding:0; border:1px solid var(--line-2); background:none; cursor:pointer;
  border-radius:.5rem; overflow:hidden; transition:transform .15s ease, border-color .15s ease}
.thumbs .tb:hover{transform:translateY(-1px); border-color:var(--ink-30)}
.thumbs .tb img{width:76px; height:56px; object-fit:cover; display:block}

/* ---------- the gallery, full screen ----------
   The reference opens the media full screen and keeps the property's figures within reach. The stage
   in the middle, the thumbnails and the data underneath, over a dark glass panel. */
body.sin-scroll{overflow:hidden}
.gal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,2vw,26px); background:rgba(5,11,14,.88); backdrop-filter:blur(12px) saturate(120%);
  animation:galEntra .18s ease}
@keyframes galEntra{from{opacity:0} to{opacity:1}}
.gal-caja{width:min(1340px,100%); height:min(94vh,100%); display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0e1c22 0%,#091317 100%); color:#e9f2ee;
  border:1px solid rgba(255,255,255,.09); border-radius:1.15rem; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
.gal-bar{display:flex; align-items:center; gap:.9rem; padding:.8rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.gal-id{min-width:0; display:flex; flex-direction:column; line-height:1.25}
.gal-id b{font-size:.97rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gal-id span{font-size:.78rem; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums}
.gal-tabs{display:flex; gap:.25rem; margin-left:auto; padding:.25rem; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06)}
.gtab{display:inline-flex; align-items:center; gap:.4rem; min-height:38px; padding:.35rem .8rem;
  border:0; border-radius:999px; background:none; color:rgba(255,255,255,.72); font-size:.8rem;
  font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease}
.gtab i{font-style:normal; font-size:.68rem; opacity:.55}
.gtab:hover{background:rgba(255,255,255,.08); color:#fff}
.gtab.on{background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%); color:#04140c}
.gtab.on i{opacity:.75}
.thumbs .tb.on{border-color:var(--teal); box-shadow:0 0 0 2px rgba(16,110,90,.28); opacity:1}
.medios-sel{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0}
.medios-sel .ms{display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 14px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--card); font:inherit;
  font-size:.85rem; font-weight:600; color:var(--ink-70); cursor:pointer}
.medios-sel .ms:hover{border-color:var(--teal); color:var(--teal)}
.medios-sel .ms.on{background:var(--teal); border-color:var(--teal); color:#fff}
.medios-sel .ms b{font-weight:800}
.gal-x{min-width:44px; min-height:44px; z-index:5; cursor:pointer}
.gal-x{flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#fff; cursor:pointer}
.gal-x:hover{background:rgba(255,255,255,.12)}
.gal-cuerpo{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 330px}
.gal-escena{position:relative; display:flex; align-items:center; justify-content:center;
  padding:18px; min-height:0}
.gal-medio{display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%}
.gal-medio img{max-width:100%; max-height:min(66vh,640px); height:auto; border-radius:.75rem;
  object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,.55)}
.gal-medio video{max-width:100%; max-height:min(66vh,640px); border-radius:.75rem; background:#000}
.gal-medio iframe{width:min(1100px,90%); height:min(66vh,640px); border:0; border-radius:.75rem; background:#000}
.gal-pano{width:min(1100px,90vw); height:min(56vh,520px); overflow-x:auto; overflow-y:hidden;
  border-radius:.75rem; cursor:grab; scrollbar-width:none; box-shadow:0 24px 70px rgba(0,0,0,.55)}
.gal-pano::-webkit-scrollbar{display:none}
.gal-pano.agarrando{cursor:grabbing}
.gal-pano img{height:100%; width:auto; max-width:none; user-select:none}
.gal-pista{position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:999px;
  background:rgba(0,0,0,.5); color:rgba(255,255,255,.62); font-size:.74rem}
.gal-flecha{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
  display:grid; place-items:center; border-radius:50%; color:#fff; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.42)}
.gal-flecha.izq{left:8px} .gal-flecha.der{right:8px}
.gal-flecha:hover{background:rgba(0,0,0,.72)}
.gal-pie-escena{position:absolute; left:18px; bottom:14px; display:flex; align-items:center; gap:.6rem;
  font-size:.76rem; color:rgba(255,255,255,.6)}
.gal-cuenta{font-variant-numeric:tabular-nums; background:rgba(0,0,0,.5); padding:.2rem .55rem;
  border-radius:999px}
.gal-lado{padding:1rem 1.05rem; overflow-y:auto; border-left:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.022)}
.gal-lado h4{color:rgba(255,255,255,.5)}
.gal-lado .note{color:rgba(255,255,255,.38)}
.gal-datos{margin:.5rem 0 0}
.gal-datos dt{display:flex; align-items:center; gap:.5rem; margin-top:.5rem;
  font-size:.77rem; color:rgba(255,255,255,.55)}
.gal-datos dt svg{flex:none; opacity:.85}
.gal-datos dd{margin:.05rem 0 0 1.6rem; font-size:.88rem; font-weight:600; color:#f2f8f5}
.gal-tiras{display:flex; gap:8px; padding:.7rem .9rem; overflow-x:auto;
  border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.18)}
.gtira{position:relative; flex:none; width:96px; height:64px; padding:0; cursor:pointer;
  display:grid; place-items:center; overflow:hidden; border-radius:.55rem;
  border:2px solid transparent; background:rgba(255,255,255,.06)}
.gtira img{width:100%; height:100%; object-fit:cover}
.gtira.on{border-color:var(--green)}
.gtira-ico{color:rgba(255,255,255,.85)}
.gtira em{position:absolute; left:0; right:0; bottom:0; padding:.15rem .3rem; font-style:normal;
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:#dff3e8;
  background:rgba(0,0,0,.55)}
@media (max-width:900px){
  .gal{padding:0}
  .gal-caja{height:100%; border-radius:0; border:0}
  .gal-bar{flex-wrap:wrap; gap:.5rem; padding:.7rem .8rem}
  .gal-tabs{order:3; width:100%; margin-left:0; overflow-x:auto}
  .gal-cuerpo{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto}
  .gal-lado{order:2; max-height:40vh; border-left:0; border-top:1px solid rgba(255,255,255,.08)}
  .gal-medio img,.gal-medio video{max-height:34vh}
  .gal-pano{height:32vh; width:94vw}
  .gal-flecha{display:none}
}

/* ---------- the sheet, in modules ----------
   The reference reads in blocks: the figures that decide a first look in large type, and then one
   block per subject, the unit, what is legal, what is around it, each with its heading and icon. */
.modulos{display:grid; gap:12px; margin-top:1rem}
.mod{border:1px solid var(--line-2); border-radius:1rem; background:var(--white); padding:.85rem 1rem}
.mod > header{display:flex; align-items:center; gap:.5rem; margin-bottom:.1rem}
.mod > header svg{color:var(--green-dark); flex:none}
.mod > header h4{margin:0}
.modulos-dos{display:grid; gap:12px}
@media (min-width:760px){ .modulos-dos{grid-template-columns:1fr 1fr} }

/* The figures of a first look: the icon big, the figure in bold, the word underneath. */
.destacados{display:flex; flex-wrap:wrap; gap:10px; padding:.85rem; background:var(--card)}
.dest{flex:1 1 118px; min-width:112px; display:flex; flex-direction:column; gap:.1rem;
  padding:.6rem .75rem; border-radius:.85rem; background:var(--white); border:1px solid var(--line-2)}
.dest-ico{display:block; color:var(--green-dark); margin-bottom:.15rem}
.dest b{font-size:1.12rem; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.dest-lab{font-size:.64rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-45)}

/* The rows of a module: the label with its icon, the value right-aligned and lined up. */
.filas{display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; margin:.45rem 0 0; font-size:.9rem}
.filas dt{display:flex; align-items:center; gap:.5rem; color:var(--ink-60)}
.filas dt svg{flex:none; color:var(--ink-45)}
.filas dd{margin:0; text-align:right; font-weight:600}

/* How far the works are, drawn: a bar and the figure the developer declares. */
.progreso{margin:.7rem 0 .1rem}
.barra{height:7px; border-radius:999px; background:var(--line-2); overflow:hidden}
.barra i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-deep) 100%)}
.progreso .note{margin-top:.35rem}

/* ---------- the Verysset report ----------
   The badge is a door: pressing it opens what the verifier reported, where the evidence is anchored
   and what the asset's twin reads. Same glass and same green as the gallery: one product, one voice. */
.badge.verysset.accionable{cursor:pointer}
.badge.verysset.accionable:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(34,197,94,.22)}
.vs{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,2vw,26px); background:rgba(5,11,14,.88);
  backdrop-filter:blur(12px) saturate(120%); animation:galEntra .18s ease}
.vs-caja{width:min(880px,100%); max-height:min(92vh,100%); display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0e1c22 0%,#091317 100%); color:#e9f2ee;
  border:1px solid rgba(255,255,255,.09); border-radius:1.15rem; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
.vs-bar{display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.vs-marca{width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#04140c}
.vs-id{min-width:0; display:flex; flex-direction:column; line-height:1.25}
.vs-id b{font-size:.98rem; font-weight:800}
.vs-id span{font-size:.78rem; color:rgba(255,255,255,.5)}
.vs-x{margin-left:auto; flex:none; width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:#fff; cursor:pointer}
.vs-x:hover{background:rgba(255,255,255,.12)}
.vs-cuerpo{padding:1rem; display:grid; gap:12px; overflow-y:auto}
.vs-mod{border:1px solid rgba(255,255,255,.08); border-radius:.9rem; padding:.85rem .95rem;
  background:rgba(255,255,255,.025)}
.vs-mod h4{display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.62); margin:0}
.vs-mod h4 svg{color:var(--green); flex:none}
.vs-filas{display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; margin:.55rem 0 0; font-size:.88rem}
.vs-filas dt{display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.55)}
.vs-filas dt svg{flex:none; opacity:.85}
.vs-filas dd{margin:0; text-align:right; font-weight:600; color:#f2f8f5; word-break:break-word}
.vs-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; font-weight:500}
.vs-tag{margin-left:.4rem; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#0b1a10; background:var(--coin); padding:.15rem .45rem;
  border-radius:999px}
.vs-live{display:inline-flex; align-items:center; gap:.35rem; margin-left:.4rem; font-size:.62rem;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#8ff0bb}
.vs-live i{width:7px; height:7px; border-radius:50%; background:var(--green); display:block;
  box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:vsPulso 1.8s infinite}
@keyframes vsPulso{to{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
.vs-lecturas{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:.7rem 0 0}
.vs-lecturas > div{display:flex; flex-direction:column; gap:.1rem; padding:.55rem .7rem;
  border-radius:.7rem; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.22)}
.vs-lecturas span{font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.vs-lecturas b{font-size:1.05rem; font-weight:900; font-variant-numeric:tabular-nums}
.vs-acciones{display:flex; flex-wrap:wrap; gap:8px; margin-top:.75rem}
.vs-btn{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.5rem .85rem;
  border-radius:.7rem; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:#eaf5ef; font-size:.82rem; font-weight:600; cursor:pointer; text-decoration:none}
.vs-btn:hover{background:rgba(255,255,255,.12)}
.vs-mod .note{color:rgba(255,255,255,.42)}
.vs-pie{padding:.8rem 1rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.76rem; color:rgba(255,255,255,.45)}
@media (max-width:700px){
  .vs{padding:0}
  .vs-caja{max-height:100%; height:100%; border-radius:0; border:0}
  .vs-filas{grid-template-columns:1fr; gap:.15rem}
  .vs-filas dd{text-align:left; margin-bottom:.45rem}
}

/* ---------- the developer's portal ----------
   The same product as the buyer's side, so it borrows its pieces: the blocks of the unit sheet, the
   list of the portfolio. What this screen adds is small and lives here. */
.dev-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem}
.dev-paso{display:flex; align-items:center; gap:.6rem; margin:.22rem 0}
.dev-paso .punto{width:10px; height:10px; border-radius:50%; background:var(--line-2); flex:none}
.dev-paso.hecho .punto{background:var(--green)}
.dev-paso.aqui .punto{background:var(--green); box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.dev-paso span:last-child{font-size:.9rem; color:var(--ink-60)}
.dev-paso.aqui span:last-child{font-weight:800; color:var(--ink)}

/* ---------- the search of the front page ----------
   The reference puts one white panel over the photograph and lets it be the loudest thing on the
   page: a short line above, the panel below, and no paragraph competing with the form. The panel
   carries the tabs of the build state, the text field with the button, and four controls that are
   the same pickers the catalogue uses, one system, two places. */
.buscador{width:min(100%,940px); margin:1.15rem 0 0; padding:11px; background:var(--white);
  border-radius:1.15rem; box-shadow:0 30px 70px rgba(4,12,18,.38); text-align:left}
.hero-tabs{display:flex; gap:2px; margin:-4px -4px 12px; padding:0 4px; border-bottom:1px solid var(--line)}
.hero-tabs a, .hero-tabs button{background:none; border:0; cursor:pointer; font:inherit;
  padding:.45rem .8rem; font-size:.86rem; font-weight:700; color:var(--ink-60);
  border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease}
.hero-tabs a:hover, .hero-tabs button:hover{color:var(--ink)}
.hero-tabs a.on, .hero-tabs button.on{color:var(--green-deep); border-color:var(--green)}
.hero-campos{display:grid; grid-template-columns:1fr auto; gap:8px}
.hero-q{display:flex; align-items:center; gap:.6rem; padding:0 .95rem; background:var(--card);
  border:1px solid var(--line-2); border-radius:.85rem}
.hero-q svg{color:var(--ink-45); flex:none}
.hero-q input{width:100%; min-height:46px; font-size:.95rem; border:0; outline:0; background:none; font-size:1rem}
.hero-campos .btn{min-height:46px; padding-inline:1.7rem; border-radius:.85rem}
.hero-filtros{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px}
.hero-filtros .control{flex:none; min-width:0}
.hero-filtros .ctrl{background:var(--card); min-height:40px; font-size:.88rem}
.hero-filtros .control label{font-size:.6rem; letter-spacing:.1em; margin-bottom:1px}
.hero-filtros .ctrl span{color:var(--ink)}
.hero-filtros .ctrl i{color:var(--ink-45)}
.hero-pie{margin:.6rem 0 0; font-size:.72rem; color:var(--ink-45); text-align:center}
@media (max-width:900px){
  .hero-filtros{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .buscador{padding:8px; border-radius:.9rem; margin-top:.9rem}
  .hero-tabs a{padding:.36rem .66rem; font-size:.8rem}
  .hero-q input{min-height:42px; font-size:.9rem}
  .hero-campos .btn{min-height:44px; padding-inline:1.1rem}
  .hero-filtros{gap:6px; margin-top:6px}
  .hero-filtros .ctrl{min-height:36px; font-size:.82rem}
  .hero-filtros .control label{font-size:.56rem}
  .hero-pie{font-size:.66rem; margin-top:.5rem}
  /* En el móvil la línea de apoyo se cae: el espacio es para la foto y para el buscador. */
  .hero .sub{display:none}
  /* La foto ancha no sirve en vertical: hay un recorte propio del grupo, con las caras en la mitad
     de arriba, y el contenido (titular y buscador) se ancla abajo. Así las caras caen enteras en la
     franja libre que queda entre la barra y el panel, que es lo que el panel no tapa. */
  /* En vertical la foto no se recorta para "que quepa": se recorta para que la cara quede despejada
     arriba y el titular caiga sobre la parte baja, que es la que oscurece el degradado. */
  .hero{display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
    min-height:clamp(660px,86vh,760px); padding-top:calc(var(--bar) + 40px); padding-bottom:10px;
    background-image:
      linear-gradient(180deg, rgba(4,10,16,.58) 0%, rgba(4,10,16,.30) 24%, rgba(4,10,16,.12) 48%,
                                rgba(4,10,16,.42) 74%, rgba(4,10,16,.72) 100%),
      radial-gradient(120% 60% at 50% 100%, rgba(4,10,16,.55) 0%, rgba(4,10,16,.18) 60%, rgba(4,10,16,0) 85%),
      linear-gradient(90deg, rgba(4,10,16,.28) 0%, rgba(4,10,16,.04) 45%, rgba(4,10,16,.28) 100%),
      url(../img/hero-azotea-dubai.jpg);
    background-size:auto, auto, auto, cover;
    background-position:center, center, center, 50% 30%}
  /* El titular pesa: es lo único que se lee en dos segundos, y sobre una foto clara necesita tamaño y
     una sombra de verdad, no la que apenas se nota. */
  .hero h1{font-size:clamp(2rem,8.8vw,2.55rem); line-height:1.05; letter-spacing:-.045em;
    max-width:11ch; text-shadow:0 3px 24px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.55)}
  .hero h1 .verde{color:#3be27a; text-shadow:0 3px 22px rgba(0,0,0,.62)}
  .hero .inner{justify-content:flex-start; align-items:center; text-align:center; gap:10px}
  .hero-campos{grid-template-columns:1fr}
  .hero-tabs{overflow-x:auto; scrollbar-width:none}
  .hero-tabs::-webkit-scrollbar{display:none}
  .hero-tabs a{white-space:nowrap}
  .hero-pie{font-size:.7rem; line-height:1.4; max-width:32ch; margin-inline:auto;
    text-wrap:balance; color:rgba(8,20,28,.72)}
}

/* ---------- the developer's portal: five desks, and the tools of each one ----------
   The portal is a place of work, not a page: a menu on the left with the five desks and what each
   one holds, the desk of the day on the right. Every desk that holds a list carries the same four
   tools, find, filter by state, sort, export, because the developer should learn them once. */
/* The bar of the portal: who you are working as, and the one action that matters. It stays while
   the desk scrolls, because a place of work tells you where you are. */
.dev-bar{position:sticky; top:var(--bar); z-index:20; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; padding:10px 12px; margin:10px 0 16px;
  background:var(--white); border:1px solid var(--line-2); border-radius:.6rem}
.dev-bar-org{display:flex; align-items:center; gap:.6rem; min-width:0}
.dev-marca{display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:.5rem;
  background:var(--teal); color:#fff}
.dev-bar-txt{min-width:0}
.dev-bar-txt b{display:block; font-size:.98rem; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:46ch}
.dev-bar-txt small{display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--ink-45)}
.dev-bar-txt small i{font-style:normal; font-variant-numeric:tabular-nums}
.dev-bar-acciones{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* The menu: five groups, each with its label, and the count of what it holds. A radius of half a
   step and a hairline border read as engineering; big rounded corners and heavy shadows read as a
   mock-up, which is exactly what this had to stop looking like. */
.dev-shell{display:grid; grid-template-columns:236px 1fr; gap:20px; align-items:start}
.dev-nav{position:sticky; top:calc(var(--bar) + 74px); display:grid; gap:12px; padding:10px 8px;
  background:var(--white); border:1px solid var(--line-2); border-radius:.6rem}
.dev-nav-grupo{display:grid; gap:1px}
.dev-nav-lab{display:block; padding:.35rem .7rem .3rem; font-size:.64rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45)}
.dev-nav a{display:flex; align-items:center; gap:.6rem; min-height:38px; padding:.45rem .7rem;
  border-radius:.45rem; font-weight:600; font-size:.9rem; color:var(--ink-72)}
.dev-nav a:hover{background:var(--card); color:var(--ink)}
.dev-nav a.on{background:rgba(34,197,94,.1); color:var(--green-deep)}
.dev-nav a .n{margin-left:auto; font-size:.74rem; font-weight:700; color:var(--ink-45);
  font-variant-numeric:tabular-nums}
.dev-nav a.on .n{color:var(--green-deep)}
.dev-main{min-width:0; display:grid; gap:14px}

/* Two desks side by side when there is room: the eye reads two panels faster than one column. */
.dev-dos{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.dev-dos .mod{margin-top:0}
.dev-main .mod{margin-top:0}

.dev-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 12px}
.dev-find{display:flex; align-items:center; gap:.5rem; flex:1 1 240px; min-width:0; padding:0 .7rem;
  border:1px solid var(--line-2); border-radius:.7rem; background:var(--card); color:var(--ink-45)}
.dev-find input{width:100%; min-height:42px; border:0; outline:0; background:none; font-size:.92rem}
.dev-find:focus-within{border-color:var(--green); box-shadow:var(--ring)}
.dev-chips{display:flex; gap:6px; flex-wrap:wrap}
.chip-f{min-height:38px; padding:.4rem .8rem; border:1px solid var(--line-2); border-radius:99px;
  background:var(--white); font-size:.82rem; font-weight:600; color:var(--ink-72); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease}
.chip-f:hover{border-color:var(--ink-30)}
.chip-f.on{background:var(--green); border-color:var(--green); color:#fff}
.dev-orden select{min-height:40px; padding:0 .6rem; border:1px solid var(--line-2); border-radius:.7rem;
  background:var(--white); font-size:.85rem; font-weight:600; cursor:pointer}
.dev-cuenta{margin-left:auto; font-size:.78rem; color:var(--ink-45); font-variant-numeric:tabular-nums}

/* The table: figures in columns, aligned to the right, so two rows can be compared at a glance. */
.dev-tabla-caja{overflow-x:auto; background:var(--white); border:1px solid var(--line-2); border-radius:var(--radius)}
.dev-tabla{width:100%; min-width:620px; border-collapse:collapse; font-size:.9rem}
.dev-tabla th{padding:.7rem .9rem; border-bottom:1px solid var(--line-2); text-align:left;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-45);
  white-space:nowrap}
.dev-tabla td{padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:middle}
.dev-tabla tbody tr:last-child td{border-bottom:0}
.dev-tabla tbody tr[data-ir]{cursor:pointer}
.dev-tabla tbody tr[data-ir]:hover{background:var(--card)}
.dev-tabla td b{display:block; font-weight:700; font-size:.92rem}
.dev-tabla td small{display:block; margin-top:1px; font-size:.78rem; color:var(--ink-45)}
.dev-tabla .num{text-align:right; white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums}
/* Tags inside a table are read, not shouted: smaller, tighter, and never as big as the row's text. */
.dev-tabla .tag{padding:.15rem .45rem; font-size:.64rem; letter-spacing:.06em; border-radius:.3rem; vertical-align:middle}
/* Each row is a door, and it says so: the arrow is the door handle. */
.dev-tabla td.abrir{width:1%; padding-left:0; padding-right:.7rem; text-align:right; color:var(--ink-30)}
.dev-tabla tbody tr[data-ir]:hover td.abrir{color:var(--green-deep)}

/* Where the book is: one bar per project against the biggest one. No axis: the number is the axis. */
.dev-barras{display:grid; gap:8px; margin-top:.7rem}
.dev-barra{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px;
  padding:.6rem .7rem; border-radius:.7rem; color:inherit}
.dev-barra:hover{background:var(--card)}
.dev-barra b{font-size:.95rem}
.dev-barra .n{font-size:.85rem; font-weight:700; color:var(--ink-45); font-variant-numeric:tabular-nums}
.dev-barra .pista{grid-column:1 / -1; height:4px; border-radius:99px; background:var(--card); overflow:hidden}
.dev-barra .relleno{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--green),var(--green-deep))}
.dev-barra small{grid-column:1 / -1; font-size:.78rem; color:var(--ink-45)}
/* The bars are relative to the biggest project, and the desk says so: a bar without its rule is a
   decoration, and a decoration in a place of work is a lie waiting to happen. */
.dev-barras-nota{margin:.1rem 0 .5rem; font-size:.74rem; color:var(--ink-45)}

/* The figures of a desk: the label first, then the number. A dashboard is read by scanning the
   labels; the number only has to be big. */
.dev-main .destacados{border:1px solid var(--line-2); border-radius:.6rem; background:var(--white);
  padding:4px; display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:0}
.dev-main .destacados .dest{padding:.7rem .8rem; border-right:1px solid var(--line); text-align:left}
.dev-main .destacados .dest:last-child{border-right:0}
/* The counts and the money are two kinds of figure: the money is tinted so the eye separates them
   without a heading between. */
.dev-main .destacados .dest:nth-last-child(-n+2){background:var(--card)}
.dev-main .destacados .dest-lab{order:-1; display:block; margin-bottom:2px}
.dev-main .destacados .dest b{font-size:1.28rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.dev-main .mod{border-radius:.6rem}

/* The form of a desk: fields in two columns, a legend per block, and the action at the foot. */
.dev-form{display:grid; gap:14px; margin-top:12px}
.dev-form fieldset{border:1px solid var(--line-2); border-radius:.6rem; padding:12px 14px 14px; margin:0}
.dev-form legend{padding:0 .35rem; font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-45)}
.dev-form label{display:grid; gap:4px; font-size:.78rem; font-weight:600; color:var(--ink-60)}
.dev-form input,.dev-form select,.dev-form textarea{width:100%; min-height:40px; padding:.4rem .6rem;
  border:1px solid var(--line-2); border-radius:.45rem; background:var(--white); font:inherit;
  font-size:.92rem; color:var(--ink)}
.dev-form input:focus,.dev-form select:focus,.dev-form textarea:focus{outline:none;
  border-color:var(--green); box-shadow:var(--ring)}
.dev-form-2{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.dev-form .dev-ancho{grid-column:1 / -1}
.dev-form-2 label:only-child{grid-column:1 / -1}
/* A file field is a door with a label: the browser's own control, sized like the rest. */
.dev-form input[type=file]{padding:.5rem .6rem; font-size:.85rem; background:var(--card); cursor:pointer}
.dev-form label .note{margin-top:2px; font-size:.74rem; font-weight:500; color:var(--ink-45); line-height:1.45}
/* What the desk is doing while it works: five lines, one per call, so a slow upload is not a mystery. */
/* The face before it is sent: small, round and with its weight, like the contact card will show it. */
.dev-vista{display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--ink-60)}
.dev-vista img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--line-2)}
.dev-progreso{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:3px;
  font-size:.82rem; color:var(--ink-60)}
.dev-progreso li{padding-left:16px; position:relative}
.dev-progreso li::before{content:""; position:absolute; left:0; top:.45em; width:7px; height:7px;
  border-radius:50%; background:var(--green)}
.dev-progreso li.hecho{color:var(--green-deep); font-weight:600}
.dev-progreso li.ojo{color:var(--coin-deep)}
.dev-progreso li.ojo::before{background:var(--coin)}
.dev-progreso li.error{color:#b42318; font-weight:600}
.dev-progreso li.error::before{background:#b42318}
.dev-form-pie{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dev-form-pie .note{margin:0; flex:1 1 260px}

/* The calculator of the price: rates on top, what they mean below, and the way back. */
.dev-calc{margin-top:14px; padding:12px 14px; border:1px solid var(--line-2); border-radius:.6rem;
  background:var(--card)}
.dev-calc-tasas{display:flex; gap:16px; flex-wrap:wrap; margin:6px 0 2px}
.dev-calc-tasas label{display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem;
  font-weight:600; color:var(--ink-60)}
.dev-calc-tasas input{max-width:120px}
.dev-calc-tasas span{font-weight:500; color:var(--ink-45)}
.dev-calc-salida{display:grid; gap:4px; margin-top:10px; font-size:.9rem}
.dev-calc-salida b{font-variant-numeric:tabular-nums}
.dev-calc-salida i{font-style:normal; color:var(--ink-45); font-size:.78rem; margin-left:6px}
.dev-archivo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px}
.dev-archivo .solo-lector{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.btn-archivo{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:.5rem; background:var(--card); font-weight:600;
  font-size:.86rem; color:var(--teal)}
.btn-archivo:hover, .btn-archivo:focus-visible{border-color:var(--teal); outline:none}
.archivo-dicho{font-size:.8rem; color:var(--ink-45)}
.dev-calc-aviso{color:var(--coin-deep); font-size:.78rem; font-weight:600; margin-top:2px}
.dev-calc-vuelta{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line-2)}
.dev-calc-vuelta label{display:grid; gap:4px; font-size:.78rem; font-weight:600; color:var(--ink-60)}
.dev-calc-vuelta input{max-width:160px}
.dev-calc-activo select{max-width:200px}

/* The menu of the property: one section at a time. A ten-section form read from top to bottom is a
   wall, and a wall is what makes a seller leave half the information out. */
.dev-sec{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 0; padding:0 0 12px;
  border-bottom:1px solid var(--line-2)}
.dev-sec button{display:inline-flex; align-items:center; gap:.45rem; min-height:36px; padding:.4rem .75rem;
  border:1px solid var(--line-2); border-radius:.45rem; background:var(--white); cursor:pointer;
  font:inherit; font-size:.84rem; font-weight:600; color:var(--ink-60);
  transition:background .15s ease, border-color .15s ease, color .15s ease}
.dev-sec button:hover{border-color:var(--ink-30); color:var(--ink)}
.dev-sec button.on{background:var(--teal); border-color:var(--teal); color:#fff}
.dev-form-sec fieldset[data-sec][hidden]{display:none}
.dev-etiqueta{display:block; margin-bottom:6px; font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-45)}
.dev-marcas{display:flex; flex-wrap:wrap; gap:6px}
.dev-marca-caja{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; min-height:36px;
  border:1px solid var(--line-2); border-radius:99px; font-size:.82rem; font-weight:600; color:var(--ink-60);
  cursor:pointer}
.dev-marca-caja:has(input:checked){background:rgba(34,197,94,.1); border-color:var(--green);
  color:var(--green-deep)}
.dev-marca-caja input{width:auto; min-height:0; margin:0}
.dev-repaso{display:grid; gap:4px; margin-top:8px; font-size:.86rem}
.dev-repaso .si{color:var(--green-deep)}
.dev-repaso .no{color:var(--ink-45)}

/* The steps of putting a property up: where you are, and what comes next. */
.dev-pasos{display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:14px 0 4px; padding:0}
.dev-pasos li{display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:.45rem;
  border:1px solid var(--line-2); font-size:.82rem; color:var(--ink-45)}
.dev-pasos li b{display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--card); color:var(--ink-60); font-size:.7rem}
.dev-pasos li.on{border-color:var(--green); color:var(--green-deep); background:rgba(34,197,94,.06)}
.dev-pasos li.on b{background:var(--green); color:#fff}

.dev-mini{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:.6rem;
  font-size:.85rem; color:var(--ink-60)}
.dev-mini b{color:var(--ink)}
.dev-mini a{font-weight:600}
.dev-mini span{display:inline-flex; align-items:center; gap:.3rem}

@media (max-width:980px){
  /* Below a table has no room for two columns: the desks fall into one. */
  .dev-dos{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* On a phone the menu lies down: a strip you drag, with its group labels kept as separators. */
  .dev-shell{grid-template-columns:1fr; gap:12px}
  .dev-nav{position:static; display:flex; overflow-x:auto; gap:14px; padding:8px; scrollbar-width:none}
  .dev-nav::-webkit-scrollbar{display:none}
  .dev-nav-grupo{display:flex; gap:4px; align-items:center}
  .dev-nav-lab{display:none}
  .dev-nav a{min-height:36px; white-space:nowrap}
  .dev-nav a .n{margin-left:6px}
  .dev-bar{position:static}
  .dev-bar-acciones{margin-left:0; width:100%}
  .dev-form-2{grid-template-columns:1fr}
  .dev-cuenta{margin-left:0}
}


/* ---------- the developers rail: a row that looks like it belongs to the house ----------
   These rules go at the END of the sheet on purpose: the first version of .dev-row is defined
   further up, and in CSS the later rule wins. Putting the redesign here means it cannot lose. */
.rail-box{border:1px solid var(--line-2); border-radius:1.25rem; padding:16px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,249,246,.75));
  box-shadow:0 1px 2px rgba(16,40,30,.05)}
.rail-box > h3{margin-left:2px}
.dev-row{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:.85rem;
  transition:background .15s ease, transform .15s ease}
.dev-row + .dev-row{margin-top:2px}
.dev-row:hover{background:rgba(16,110,90,.07)}
.dev-row:hover .dev-go{opacity:1; transform:translateX(2px)}
.dev-row .logo, .dev-row .mono, .dev-row span.avatar, .dev-row > span:first-child{flex:0 0 44px}
.dev-row .logo img, .dev-row .mono, .dev-row img:not(.proy-foto){width:44px; height:44px; border-radius:13px;
  background:#fff; border:1px solid var(--line-2); box-shadow:0 1px 2px rgba(16,40,30,.06);
  object-fit:contain; padding:5px; display:grid; place-items:center;
  font-weight:800; font-size:.95rem; color:var(--teal); letter-spacing:-.02em}
.dev-row .meta{min-width:0; flex:1 1 auto}
.dev-row .meta b{display:block; font-size:.95rem; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dev-row .meta span{display:block; margin-top:1px; font-size:.76rem; color:var(--ink-45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* The arrow that says «there is more here» without a boxed button shouting it. */
.dev-row::after{content:'›'; margin-left:auto; font-size:1.35rem; line-height:1; color:var(--ink-45);
  opacity:.3; transition:opacity .15s ease, transform .15s ease}
.dev-row .btn.ghost.sm{display:none}   /* the boxed «View» is replaced by the arrow above */
.dev-row.con-foto .proy-foto{width:52px; height:40px; border-radius:10px; object-fit:cover;
  border:1px solid var(--line-2)}
@media (max-width:760px){
  .dev-row{padding:10px 8px}
  .dev-row .logo img, .dev-row .mono, .dev-row img:not(.proy-foto){width:42px; height:42px; border-radius:12px}
}


/* ---------- the developer row, second pass: a bigger mark and its doors ----------
   Drawn from the screenshot: the mark was the size of a coin and the row had a boxed «View». Now the
   mark leads the row, and the three channels the platform opens (WhatsApp, Telegram, email) are the
   row's own controls, which is what a buyer actually wants from a developer: a way in. */
.rail-box .dev-fila{display:flex; align-items:center; gap:6px}
.rail-box .dev-fila + .dev-fila{margin-top:4px}
.rail-box .dev-fila .dev-row{flex:1 1 auto; padding:10px 8px; gap:14px}
.rail-box .dev-row.con-logo > span:first-child,
.rail-box .dev-row .logo,
.rail-box .dev-row .mono,
/* La caja del logotipo: cuadrada, del mismo tamaño para todos y con box-sizing. Sin él la altura no
   se aplicaba y el logotipo alto de Aldar crecía hasta 80 px mientras la palabra de DAMAC se quedaba
   en 9: dos casas que no se pueden mirar juntas. */
.rail-box .dev-row img:not(.proy-foto){width:62px; height:62px; border-radius:17px; flex:0 0 62px;
  padding:9px; background:#fff; border:1px solid var(--line-2); box-shadow:0 2px 6px rgba(16,40,30,.07);
  box-sizing:border-box; object-fit:contain; object-position:center}
.rail-box .dev-row .meta b{font-size:1.02rem; font-weight:800}
.rail-box .dev-row .meta span{font-size:.79rem}
.rail-box .dev-row::after{font-size:1.2rem; opacity:.22}
.dev-puertas{display:flex; flex-direction:column; gap:4px; flex:0 0 auto; padding-right:2px}
.dev-puertas .puerta{display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-45); transition:all .15s ease}
.dev-puertas .puerta:hover{background:var(--teal); border-color:var(--teal); color:#fff}
.dev-puertas .puerta svg{width:15px; height:15px; fill:currentColor}
@media (max-width:760px){
  .rail-box .dev-row.con-logo > span:first-child, .rail-box .dev-row .logo, .rail-box .dev-row .mono,
  .rail-box .dev-row img:not(.proy-foto){width:54px; height:54px; border-radius:15px; flex:0 0 54px; padding:7px}
  .dev-puertas .puerta{width:34px; height:34px}
}


/* ---------- the pop-up behind a channel: two ways in, never more ---------- */
.puerta-modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px;
  background:rgba(6,20,16,.55)}
.pm-panel{width:min(560px,100%); max-height:88vh; overflow:auto; background:var(--white);
  border-radius:1.15rem; box-shadow:0 24px 70px rgba(0,0,0,.35); padding:20px 20px 22px}
.pm-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.pm-head b{font-size:1.1rem; letter-spacing:-.01em}
.pm-x{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:var(--card);
  cursor:pointer; font-size:1.05rem; display:grid; place-items:center}
.pm-sub{margin:.5rem 0 1rem; font-size:.88rem; color:var(--ink-60)}
.pm-via{border:1px solid var(--line-2); border-radius:.9rem; padding:12px 14px 14px; margin:0 0 12px}
.pm-via legend{padding:0 6px; font-size:.74rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45)}
.pm-linea{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.pm-linea input{flex:1 1 150px; min-height:44px; padding:0 12px; border:1px solid var(--line-2);
  border-radius:.6rem; font:inherit; font-size:.92rem}
.pm-via .note.ok{color:var(--green-deep)} .pm-via .note.err{color:#991b1b}
@media (max-width:560px){.puerta-modal{align-items:end; padding:0} .pm-panel{border-radius:1.15rem 1.15rem 0 0}}


/* ---------- the developer strip of a card: same treatment as the rail ---------- */
.card .foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card .foot .dev{display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto;
  font-weight:700; font-size:.86rem}
.card .foot .dev .logo, .card .foot .dev img, .card .foot .dev .mono{width:40px; height:40px;
  border-radius:12px; flex:0 0 40px; padding:5px; background:#fff; border:1px solid var(--line-2);
  object-fit:contain; display:grid; place-items:center; font-weight:800; font-size:.8rem; color:var(--teal)}
.dev-puertas.en-fila{flex-direction:row; gap:6px}
.dev-puertas.en-fila .puerta{width:34px; height:34px}
@media (max-width:560px){.dev-puertas.en-fila .puerta{width:38px; height:38px}}


/* ---------- the block that answers «who is selling this, and can I trust it» ----------
   Taken from the reference the user sent: the validation banner first, then the ways in as labelled
   buttons, and the mark of whoever is selling beside them. */
.sello-verif{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:.9rem;
  background:linear-gradient(135deg,rgba(16,110,90,.10),rgba(16,110,90,.04));
  border:1px solid rgba(16,110,90,.22); margin-bottom:14px}
.sello-verif .badge{margin:0; flex:0 0 auto}
.sello-txt{font-size:.78rem; color:var(--ink-60); line-height:1.45}
.quien-vende{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:12px;
  border:1px solid var(--line-2); border-radius:.9rem; background:var(--card)}
.quien-vende img{width:56px; height:56px; border-radius:15px; object-fit:contain; padding:7px;
  background:#fff; border:1px solid var(--line-2); flex:0 0 56px}
.quien-vende span{font-weight:800; font-size:.95rem; letter-spacing:-.01em}
.canales{display:flex; gap:10px; flex-wrap:wrap}
.canales .canal{display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1 1 120px;
  min-height:50px; padding:0 14px; border-radius:.75rem; border:1px solid var(--line-2);
  background:var(--card); font:inherit; font-size:.9rem; font-weight:700; color:var(--ink);
  cursor:pointer; transition:all .15s ease}
.canales .canal:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-1px)}
.canales .canal.wa{border-color:rgba(16,110,90,.45); color:var(--teal);
  background:linear-gradient(135deg,rgba(16,110,90,.10),rgba(16,110,90,.03))}
.canales .canal svg{width:18px; height:18px; fill:currentColor; flex:0 0 18px}
@media (max-width:560px){.canales .canal{flex:1 1 100%; min-height:52px}}


/* The footer of a card, last word: the mark, the name, and the ways in. No «View», the whole card
   is already the way in, and a boxed button next to four round ones only competes with them. */
.card .foot .btn.ghost.sm{display:none}
.card .foot{justify-content:space-between}


/* ---------- the strip of the agency and its channels ----------
   Only this strip changes. The shape, the size and the grid of the cards are left exactly as they
   were: the logo of whoever sells now leads the strip, and the channels are labelled buttons with
   their name beside the icon, the way the reference shows them. */
.card .foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between}
.card .foot .dev{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto;
  font-weight:800; font-size:.88rem; letter-spacing:-.01em}
.card .foot .dev .logo, .card .foot .dev img, .card .foot .dev .mono{width:44px; height:44px;
  border-radius:13px; flex:0 0 44px; padding:6px; background:#fff; border:1px solid var(--line-2);
  object-fit:contain; display:grid; place-items:center; font-weight:800; font-size:.82rem; color:var(--teal)}
.card .foot .btn.ghost.sm{display:none}
.dev-puertas.en-fila{display:flex; gap:8px; flex:0 0 auto}
.dev-puertas.en-fila .puerta{display:inline-flex; align-items:center; gap:7px; width:auto; height:auto;
  min-height:40px; padding:0 12px; border-radius:.65rem; border:1px solid var(--line-2);
  background:var(--card); color:var(--ink-70); font-size:.82rem; font-weight:700}
.dev-puertas.en-fila .puerta:hover{border-color:var(--teal); color:var(--teal)}
.dev-puertas.en-fila .puerta.wa{border-color:rgba(16,110,90,.45); color:var(--teal);
  background:linear-gradient(135deg,rgba(16,110,90,.10),rgba(16,110,90,.03))}
.dev-puertas.en-fila .puerta svg{width:16px; height:16px}
@media (max-width:640px){
  .dev-puertas.en-fila{flex:1 1 100%; justify-content:flex-start}
  .dev-puertas.en-fila .puerta{flex:1 1 0; justify-content:center; min-height:44px}
}


/* ---------- the strip, final ----------
   Two things only, and neither changes the shape of a card: the two halves of a card are allowed to
   shrink (a grid of 40% / 60% does not go below its own content unless it is told it may, which is why
   the card measured 545 px on a 390 px phone), and the mark of the agency is given its size, it lives
   inside `.logo.sm`, so the earlier rule never reached it. */
.card > *{min-width:0}
.card img{max-width:100%}
.list > *, .lay > *{min-width:0}
.card .foot .dev .logo.sm img{width:44px; height:44px; padding:6px; border-radius:13px;
  background:#fff; border:1px solid var(--line-2); object-fit:contain; display:block}
.card .foot .dev .logo.sm{width:auto; height:auto; background:none; border:0; padding:0; flex:0 0 auto}
.dev-puertas.en-fila{flex-wrap:wrap}
@media (max-width:640px){
  .card .foot{gap:8px}
  .card .foot .dev{flex:1 1 auto}
  .dev-puertas.en-fila{gap:6px}
  .dev-puertas.en-fila .puerta{padding:0 10px; font-size:.78rem}
}


/* ---------- the strip at the foot of a card, like the reference the user sent ----------
   Big marks, an outline around everything, and the name beside the icon. The card itself is not
   touched: same shape, same grid, same photo. Only this strip. */
.card .foot{padding-top:12px; gap:12px}
.card .foot .dev .logo.sm img{width:58px; height:58px; padding:8px; border-radius:16px;
  border:1.5px solid var(--line-2); background:#fff; object-fit:contain; display:block}
.card .foot .dev .logo.sm{width:auto; height:auto; border:0; padding:0; background:none; flex:0 0 auto}
.card .foot .dev{gap:12px; font-size:.95rem}
.dev-puertas.en-fila{gap:10px}
.dev-puertas.en-fila .puerta{min-height:52px; padding:0 16px; border-radius:14px;
  border:1.5px solid var(--line-2); background:var(--card); font-size:.86rem; font-weight:700;
  gap:9px; color:var(--ink)}
.dev-puertas.en-fila .puerta svg{width:22px; height:22px; flex:0 0 22px}
.dev-puertas.en-fila .puerta:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-1px)}
.dev-puertas.en-fila .puerta.wa{border:1.5px solid rgba(16,110,90,.55); color:var(--teal);
  background:linear-gradient(135deg,rgba(16,110,90,.10),rgba(16,110,90,.03))}
@media (max-width:640px){
  .card .foot .dev .logo.sm img{width:52px; height:52px}
  .dev-puertas.en-fila{gap:8px}
  .dev-puertas.en-fila .puerta{flex:1 1 46%; min-height:50px; justify-content:center; padding:0 10px}
}


/* ---------- the strip at the foot of a card: fixed colours, big marks ----------
   What went wrong here, written down so it does not happen again: the strip borrowed the theme
   variables (--card for the background, --ink for the text). In a browser set to dark mode those two
   flip and the strip became black letters on a black field. A strip that carries the contact details
   of the seller cannot depend on the reader's theme: the colours are fixed here.
   And the marks are big, like the reference: a 26 px icon inside a 56 px outlined button. */
.card .foot{background:#ffffff !important; color:#12211c !important; padding:14px 12px 12px; gap:12px}
.card .foot .dev, .card .foot .dev b, .card .foot .dev span{color:#12211c}
.card .foot .dev .logo.sm img{width:58px; height:58px; padding:9px; border-radius:16px;
  background:#ffffff; border:1.5px solid #e2e8e3; object-fit:contain; display:block}
.card .foot .dev .logo.sm{width:auto; height:auto; border:0; padding:0; background:none; flex:0 0 auto}
.dev-puertas.en-fila{gap:10px}
.dev-puertas.en-fila .puerta{min-height:56px; padding:0 18px; border-radius:14px;
  background:#ffffff !important; color:#12211c !important; border:2px solid #dbe3de;
  font-size:.92rem; font-weight:700; gap:10px}
.dev-puertas.en-fila .puerta svg{width:26px; height:26px; flex:0 0 26px; fill:currentColor}
.dev-puertas.en-fila .puerta:hover{border-color:#0d6b57; color:#0d6b57 !important; transform:translateY(-1px)}
.dev-puertas.en-fila .puerta.wa{color:#0d6b57 !important; border-color:#0d6b57; background:#f1faf6 !important}
@media (max-width:640px){
  .dev-puertas.en-fila .puerta{flex:1 1 46%; justify-content:center; min-height:54px; padding:0 10px}
  .card .foot .dev .logo.sm img{width:54px; height:54px}
}


/* ---------- the channels, with the marks of their owners and their own colours ----------
   WhatsApp in its green (#25D366) and Telegram in its blue (#229ED9): those are the colours of the
   services the button opens, and next to them the small marks that make them recognisable at a
   glance. The pictures come from Wikimedia Commons, and both are recorded in the library. */
.dev-puertas.en-fila .puerta .marca{width:24px; height:24px; flex:0 0 24px; object-fit:contain; display:block}
.dev-puertas .puerta .marca{width:20px; height:20px; flex:0 0 20px; object-fit:contain}
.dev-puertas.en-fila .puerta[data-canal="whatsapp"]{border-color:#25D366; color:#128C7E !important; background:#f2fdf7 !important}
.dev-puertas.en-fila .puerta[data-canal="whatsapp"]:hover{background:#25D366 !important; color:#ffffff !important}
.dev-puertas.en-fila .puerta[data-canal="telegram"]{border-color:#229ED9; color:#1c7fb0 !important; background:#f3faff !important}
.dev-puertas.en-fila .puerta[data-canal="telegram"]:hover{background:#229ED9 !important; color:#ffffff !important}
.dev-puertas.en-fila .puerta[data-canal="correo"]{border-color:#dbe3de; color:#12211c !important}
@media (max-width:640px){ .dev-puertas.en-fila .puerta .marca{width:22px; height:22px} }


/* ---------- the strip, smaller and tidier ----------
   The buttons were too big for the width of a card, so they piled up. Smaller marks, tighter buttons,
   and the row wraps with room to breathe. The mark of each service is drawn through a CSS mask over
   the brand colour, so it appears even if an <img> is slow, cached or blocked: the shape is the
   colour's own stencil, and nothing depends on a file arriving. */
.card .foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 12px 10px}
.card .foot .dev .logo.sm img{width:44px; height:44px; padding:6px; border-radius:13px}
.dev-puertas.en-fila{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.dev-puertas.en-fila .puerta{min-height:38px; padding:0 11px; border-radius:11px; border-width:1.5px;
  font-size:.76rem; font-weight:700; gap:6px}
.dev-puertas.en-fila .puerta svg, .dev-puertas.en-fila .puerta .marca{width:18px; height:18px; flex:0 0 18px}
.dev-puertas.en-fila .puerta .marca{display:block; object-fit:contain}
@media (max-width:640px){
  .card .foot .dev .logo.sm img{width:40px; height:40px}
  .dev-puertas.en-fila .puerta{min-height:40px; padding:0 9px; font-size:.74rem}
}


/* ---------- the channels live in the rail, not inside a card ----------
   Two things: the card no longer carries the buttons (a card is for looking at a property, and the
   rail is where a buyer looks up who is selling), and the class that made them a row now really does
   set the direction, it only said `display:flex`, so the column declared for the rail was winning and
   the buttons in a card stacked one under another. */
.card .dev-puertas{display:none !important}
.dev-puertas.en-fila{flex-direction:row; flex-wrap:wrap; align-items:center}


/* ---------- where the channels belong ----------
   In a card, in one row, small. Not in the rail: there the rows are lists of names, and three icons
   per row turn the directory into a wall of buttons. */
.card .dev-puertas{display:flex !important}
.card .dev-puertas.en-fila{flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px}


/* ---------- the two desks ---------- */
.desk-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:6px 0 18px}
.desk-head h1{margin:.2rem 0 .1rem; font-size:1.6rem; letter-spacing:-.02em}
.desk-nota{font-size:.76rem; color:var(--ink-45); border:1px dashed var(--line-2); border-radius:.8rem;
  padding:10px 12px; max-width:34ch; background:rgba(0,0,0,.015)}
.desk-aviso{border:1px solid rgba(16,110,90,.3); background:rgba(16,110,90,.07); border-radius:.9rem;
  padding:12px 14px; font-size:.86rem; color:var(--ink-72); margin-bottom:16px}
.desk-aviso b{color:var(--ink)}
.desk-datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-bottom:22px}
.desk-datos .dato{border:1px solid var(--line-2); border-radius:1rem; padding:14px 16px; background:var(--card)}
.desk-datos .dato span{display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45); font-weight:800; margin-bottom:6px}
.desk-datos .dato b{font-size:1.15rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.desk-limites{margin:.4rem 0 0; padding-left:1.1rem; font-size:.88rem; color:var(--ink-72)}
.desk-limites li{margin-bottom:5px}
.desk-codigo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line-2);
  border-radius:.9rem; padding:12px 14px; margin:.5rem 0 14px; background:var(--card)}
.desk-codigo b{font-size:1.15rem; letter-spacing:.04em; color:var(--teal)}
.desk-codigo span{font-size:.8rem; color:var(--ink-45)}
.desk-volver{margin:26px 0 10px; display:flex; gap:10px}
.tabla{width:100%; border-collapse:collapse; font-size:.88rem; margin-top:8px}
.tabla th{text-align:left; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45);
  padding:6px 8px; border-bottom:1px solid var(--line-2)}
.tabla td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.tabla td.num, .tabla th.num{text-align:right; font-variant-numeric:tabular-nums}
.tabla code{font-size:.8rem; color:var(--ink-60)}
@media (max-width:640px){ .tabla{font-size:.82rem} .tabla td, .tabla th{padding:7px 5px} }


/* ---------- the seal of a card is a button ---------- */
.badge-sello{display:inline-flex; padding:0; border:0; background:none; cursor:pointer; font:inherit;
  border-radius:999px}
.badge-sello:hover{outline:2px solid rgba(16,110,90,.35); outline-offset:2px}

/* ---------- la marca de una inmobiliaria del sandbox en la tarjeta ---------------------------
   La caja de `.logo.sm` está pensada para un logotipo ajeno: trae `width:auto` porque el logotipo
   ya se mide solo. Nuestra marca es un SVG que se mide por su caja, así que con `auto` queda en
   cero y la marca desaparece. Aquí se le da su medida, más pequeña que la de un logotipo. */
.card .foot .dev .logo.marca,
.card .foot .dev .logo.marca.sm{width:30px; height:30px; flex:0 0 30px; padding:0; background:none;
  border:0; border-radius:9px}

/* (la caja igual para todos de mas abajo manda: estas reglas por forma de dibujo ya sobran) */
/* La marca dibujada del sandbox, en el rail, a la MISMA altura que un logotipo ajeno (44 px): las
   dos cosas se leen como el logotipo de una casa y no pueden medir distinto en la misma lista. */
.rail-box .dev-row .logo.marca{width:44px; height:44px; min-width:44px; max-width:44px; flex:0 0 44px;
  padding:0; box-sizing:border-box}

/* ---------- una caja igual para todos los logotipos ------------------------------------------
   Medido: las proporciones reales van de 0,9 (un escudo casi cuadrado) a 7,97 (una firma larga).
   Con la misma altura, los anchos salían de 44 a 115 px y la lista parecía descuadrada. Se les da
   una caja IGUAL a todos —logotipos y marcas de casa— y el dibujo se encaja dentro sin deformarse:
   así todo mide lo mismo y los nombres empiezan en la misma línea. */
.rail-box .dev-row .logo,
.rail-box .dev-row .logo.marca{width:92px; height:44px; min-width:92px; max-width:92px; flex:0 0 92px;
  padding:6px 8px; background:#fff; border:1px solid var(--line-2); border-radius:12px;
  box-sizing:border-box; display:grid; place-items:center}
.rail-box .dev-row .logo.marca{background:none; border:0; padding:0}
.rail-box .dev-row .logo > img{width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:contain; background:transparent}
/* La marca de casa es cuadrada: se centra en la caja con su medida, sin estirarse. */
.rail-box .dev-row .logo.marca svg{position:absolute; left:50%; top:50%; inset:auto;
  width:44px; height:44px; margin:-22px 0 0 -22px}
.card .foot .dev .logo,
.card .foot .dev .logo.marca{width:72px; height:30px; min-width:72px; max-width:72px; flex:0 0 72px;
  padding:3px 6px; background:#fff; border:1px solid var(--line-2); border-radius:9px;
  box-sizing:border-box; display:grid; place-items:center}
.card .foot .dev .logo.marca{background:none; border:0; padding:0}
.card .foot .dev .logo > img{width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:contain; background:transparent}
.card .foot .dev .logo.marca svg{position:absolute; left:50%; top:50%; inset:auto;
  width:30px; height:30px; margin:-15px 0 0 -15px}

/* ---------- la caja igual, como pieza: la usan el rail, la tarjeta y los escritorios ------------
   `logoHtml(nombre, logo, chico, caja)` mete el dibujo aquí dentro. Un logotipo ancho se encaja (sin
   deformarse), y una marca cuadrada se centra a su medida: todo mide igual y los nombres alinean. */
.logo.caja{width:92px; height:44px; min-width:92px; max-width:92px; flex:0 0 92px; padding:6px 8px;
  box-sizing:border-box; display:grid; place-items:center; background:#fff;
  border:1px solid var(--line-2); border-radius:12px}
.logo.caja.sm{width:72px; height:30px; min-width:72px; max-width:72px; flex:0 0 72px; padding:3px 6px;
  border-radius:9px}
.logo.caja > img{width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain;
  background:transparent}
.logo.caja.marca{background:none; border:0; padding:0}
.logo.caja.marca svg{position:absolute; left:50%; top:50%; inset:auto; width:44px; height:44px;
  margin:-22px 0 0 -22px}
.logo.caja.sm.marca svg{width:30px; height:30px; margin:-15px 0 0 -15px}

/* La cabecera de un escritorio: la marca de la casa y, al lado, de quién es el libro. */
.desk-quien{display:flex; align-items:center; gap:14px; min-width:0}
.desk-quien > div{min-width:0}

/* Las iniciales de una persona, dentro de la caja de casa: el mismo cuadro que una marca. */
.logo.caja > .logo-in{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  color:#fff; font-weight:900; font-size:.8rem; letter-spacing:-.02em}
.logo.caja.sm > .logo-in{width:30px; height:30px; border-radius:9px; font-size:.68rem}

/* La marca con quién está detrás: el nombre como estaba y, debajo, en microdato legible, quién
   opera la plataforma. En el teléfono se esconden las dos, que allí solo queda el icono. */
.brand-txt{display:flex; flex-direction:column; justify-content:center; line-height:1.05; min-width:0}
.brand-por{font-style:normal; font-size:8px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green); margin-top:2px; white-space:nowrap}

/* ---------- la vista de mapa aprovecha la pantalla ---------------------------------------------
   Medido: usaba 1108 px de 1440 (173 vacíos a cada lado), el mapa se salía 117 px por debajo de la
   ventana y las tarjetas quedaban en 526 px de ancho frente a los 760 de la lista. Ahora la página se
   ensancha en esta vista, la lista se queda cerca de su ancho de siempre y el mapa se lleva el resto;
   el alto lo ajusta el propio mapa a la ventana (js/views/map.js). */
body:has(.lay.mapa) .wrap{max-width:min(1640px, calc(100vw - 40px))}
.lay.mapa{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:16px}
.mapa{height:calc(100dvh - 200px); min-height:420px; max-height:none}
@media (max-width:900px){
  body:has(.lay.mapa) .wrap{max-width:calc(100vw - 24px)}
  .lay.mapa{grid-template-columns:minmax(0,1fr)}
  .mapa{height:64dvh}
}

/* ---------- el escritorio del bróker, con las piezas de la casa --------------------------------
   Cuadros de cifras, paneles con filete de 1 px, gráficos y el sello de la identificación. Los
   tokens son los mismos que usa el resto (líneas, grises, verde), no una paleta nueva. */
.desk-ficha{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#fff;
  border:1px solid var(--line-2); border-radius:.5rem; padding:14px 16px; margin:14px 0}
.desk-ficha-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 260px}
.desk-ficha-txt b{font-size:1.02rem}
.desk-ficha-txt span{font-size:.82rem; color:var(--ink-60)}
.sello-kyc{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; cursor:pointer;
  border-radius:999px; border:1px solid var(--line-2); background:#fff; color:var(--ink);
  font-size:.82rem; font-weight:700}
.sello-kyc.ok{border-color:#a7e5bb; background:#e8f8ec; color:#15803D}
.sello-kyc i{font-style:normal; font-weight:600; opacity:.8}
.sello-kyc:hover{border-color:var(--green); transform:translateY(-1px)}
.desk-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 14px}
.desk-cuadro{display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--line-2);
  border-radius:.5rem; padding:12px 14px}
.desk-cuadro span{font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-60)}
.desk-cuadro b{font-size:1.7rem; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.desk-cuadro b.chico{font-size:1.15rem}
.desk-dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 14px;
  align-items:start}
.desk-panel{background:#fff; border:1px solid var(--line-2); border-radius:.5rem; overflow:hidden}
.desk-panel > header{display:flex; align-items:center; gap:8px; padding:11px 16px;
  border-bottom:1px solid var(--line-2)}
.desk-panel > header h2{margin:0; font-size:1rem; font-weight:700}
.desk-panel > header svg{color:var(--green-deep)}
.desk-aviso-lista{list-style:none; margin:0; padding:6px 16px 12px}
.desk-aviso-lista li{padding:9px 0; border-bottom:1px solid var(--line)}
.desk-aviso-lista li:last-child{border-bottom:0}
.desk-aviso-lista b{display:block; font-size:.9rem}
.desk-aviso-lista span{display:block; font-size:.82rem; color:var(--ink-60); margin-top:2px}
.desk-grafica{padding:12px 16px 14px}
.desk-grafica canvas{display:block; width:100%; height:150px}
.desk-grafica-nota{margin:8px 0 0; font-size:.78rem; color:var(--ink-60)}
.desk-leyenda{display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0 0; padding:0; list-style:none;
  font-size:.78rem}
.desk-leyenda li{display:inline-flex; align-items:center; gap:6px}
.desk-leyenda i{width:9px; height:9px; border-radius:2px}
.desk-pie-nota{margin:0; padding:10px 16px 14px; font-size:.78rem; color:var(--ink-60)}
/* la ficha de identificación, en su ventana */
.kyc-modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px;
  background:rgba(6,14,18,.6)}
.kyc-panel{width:min(620px,94vw); max-height:90vh; overflow:auto; background:#fff; border-radius:1rem;
  box-shadow:var(--shadow-lg)}
.kyc-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--line-2)}
.kyc-x{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:#fff;
  cursor:pointer; font-size:1rem}
.kyc-cuerpo{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:16px}
.kyc-foto{display:flex; flex-direction:column; align-items:center; gap:8px}
.kyc-iniciales{width:120px; height:150px; border-radius:.5rem; display:grid; place-items:center;
  background:#10222B; color:#fff; font-size:2rem; font-weight:800}
.kyc-foto-pie{font-size:.7rem; color:var(--ink-60); text-align:center}
.kyc-nombre{font-size:1.05rem}
.kyc-sub{display:block; font-size:.82rem; color:var(--ink-60); margin:2px 0 10px}
.kyc-lista{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; margin:0; font-size:.85rem}
.kyc-lista dt{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-60)}
.kyc-lista dd{margin:0}
.kyc-lista dd.ok{color:#15803D; font-weight:700}
.kyc-nota,.kyc-aviso{margin:12px 0 0; font-size:.8rem; color:var(--ink-60)}
.kyc-aviso{border-left:3px solid var(--green); padding-left:10px}
@media (max-width:900px){
  .desk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desk-dos{grid-template-columns:minmax(0,1fr)}
  .kyc-cuerpo{grid-template-columns:minmax(0,1fr)}
  .kyc-iniciales{width:100px; height:120px}
}

/* ---------- las tablas de un escritorio, con la misma rejilla ----------------------------------
   Medido: cada tabla repartía sus columnas a su aire, así que «State» caía a distinta altura en
   «My clients», «Holds» y «Sales», y en la primera el nombre se quedaba con todo el ancho mientras el
   estado salía apretado. Con la rejilla fija y un reparto declarado, las tres se leen en columna. */
.desk-tablas .tabla{table-layout:fixed; width:100%}
.desk-tablas .tabla th, .desk-tablas .tabla td{padding:10px 12px; vertical-align:top}
.desk-tablas .tabla td{overflow-wrap:anywhere}
/* clientes: nombre, qué mira, estado */
.desk-tablas .tabla.t3 th:nth-child(1), .desk-tablas .tabla.t3 td:nth-child(1){width:32%}
.desk-tablas .tabla.t3 th:nth-child(2), .desk-tablas .tabla.t3 td:nth-child(2){width:40%}
/* reservas y ventas: la unidad manda, y las cifras a la derecha */
.desk-tablas .tabla.t4 th:nth-child(1), .desk-tablas .tabla.t4 td:nth-child(1){width:38%}
.desk-tablas .tabla.t4 th:nth-child(2), .desk-tablas .tabla.t4 td:nth-child(2){width:22%}
.desk-tablas .tabla.t4 th:nth-child(3), .desk-tablas .tabla.t4 td:nth-child(3){width:20%}
.desk-tablas .tabla.t4 th:nth-child(4), .desk-tablas .tabla.t4 td:nth-child(4){width:20%}
.desk-tablas .tabla thead th{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase}
/* la nota de la vista previa, con sitio para leerse */
.desk-nota{max-width:420px; padding:12px 14px; font-size:.78rem; line-height:1.5}

/* Las tablas de un escritorio, dentro de su bloque: la tarjeta pone el filete y la cabecera, y la
   tabla va a sangre por dentro con el primer y el último dato alineados con el título. */
.desk-panel > .tabla{width:100%; border-collapse:collapse}
.desk-panel > .tabla thead th{background:#f7f9fa; border-bottom:1px solid var(--line-2)}
.desk-panel > .tabla th:first-child, .desk-panel > .tabla td:first-child{padding-left:16px}
.desk-panel > .tabla th:last-child, .desk-panel > .tabla td:last-child{padding-right:16px}
.desk-panel > .tabla tbody tr:last-child td{border-bottom:0}
.desk-panel-nota{margin:0; padding:11px 16px; font-size:.82rem; color:var(--ink-60);
  border-bottom:1px solid var(--line-2)}
.desk-panel > .desk-limites{padding:6px 16px 14px; margin:0}
.desk-panel + .desk-panel, .desk-tablas + .desk-tablas{margin-top:0}
.desk-tablas{margin:0 0 14px}

/* La misma caja deja a un cuadrado pesando el doble que una palabra alargada. Cada casa lleva su
   relleno, sacado de medir el área de tinta de su fichero (no a ojo), para que todos pesen igual. */
body:not([data-ruta="inicio"]) .rail-box .dev-row .mono{padding:17px}
@media (max-width:760px){
  body:not([data-ruta="inicio"]) .rail-box .dev-row img:not(.proy-foto), body:not([data-ruta="inicio"]) .rail-box .dev-row .logo img{box-sizing:border-box}
}

/* Sin cuadro: el logotipo y nada más. Con el marco, un escudo cuadrado que no lo llenaba parecía
   diminuto al lado de una palabra que ocupaba todo el ancho. Sin marco el criterio es la ALTURA, con
   tope de ancho: todos a 34 px de alto y ninguno pasa de 88 px de ancho, que es lo que hace que un
   escudo y una palabra se lean del mismo porte. */
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo{width:88px !important; height:auto !important;
  min-width:88px !important; max-width:88px !important; flex:0 0 88px !important; background:none !important;
  border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo img,
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo > img{height:auto; width:auto !important;
  min-width:0 !important; max-width:88px; max-height:40px !important; object-fit:contain !important;
  background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  padding:0 !important; position:static !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo.marca{width:34px !important; min-width:34px !important;
  max-width:34px !important; flex:0 0 34px !important; display:flex !important; align-items:center !important;
  justify-content:center !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo.marca svg{height:32px !important; width:auto !important;
  max-width:34px !important; position:static !important; transform:none !important; left:auto !important;
  top:auto !important; inset:auto !important}

/* El peso no es el área: el logo de Emaar es un bloque negro y con 34 px se come la fila, y la marca de
   Marina, que es un trazo fino, se queda corta. Medido a ojo, ajustado a mano, uno por uno. */
body:not([data-ruta="inicio"]) .rail-box .dev-row [data-dev="marina"] svg{height:36px !important;
  width:36px !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo{justify-content:flex-start !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo img{flex:0 0 auto !important}

/* El porte visual no es la altura: un bloque negro pesa mucho más que un trazo fino de la misma altura.
   Medido el área de tinta y su oscuridad en cada logo, cada uno lleva la altura que le toca para pesar
   lo mismo que los demás. Antes la relación entre el más pesado y el más ligero era de 19 a 1; con esto
   queda en 1,4. Calculado, no a ojo. */

/* El porte visual no es la altura: un bloque negro pesa mucho más que un trazo fino de la misma altura.
   Medidos el área de tinta y su oscuridad en cada logo, cada uno lleva la altura que le toca para pesar
   lo mismo. La relación entre el más pesado y el más ligero pasó de 19 a 1 a menos de 2 a 1. El atributo
   va en el mismo elemento que la clase .logo, así que el selector lo lleva pegado. */
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo[data-dev="aldar"] img{height:40px !important; max-height:40px !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo[data-dev="damac"] img{height:35px !important; max-height:35px !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo[data-dev="emaar"] img{height:32px !important; max-height:32px !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo[data-dev="meraas"] img{height:26px !important; max-height:26px !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo[data-dev="nakheel"] img{height:33px !important; max-height:33px !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo[data-dev="ndc"] img{height:21px !important; max-height:21px !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo.marca[data-dev="marina"]
  {height:28px !important; font-size:1.6rem !important; line-height:1 !important}
body:not([data-ruta="inicio"]) .rail-box .dev-row .logo.marca[data-dev="marina"] svg
  {height:28px !important; width:auto !important; max-width:88px !important}

/* El botón de compra de la tarjeta: la puerta al pago, al pie y del ancho de la tarjeta. */
.card .comprar{margin-top:.7rem; width:100%; text-align:center; justify-content:center;
  font-size:1.02rem; font-weight:700; padding:.8rem 1rem; border-radius:.7rem}
.card .comprar:hover{filter:brightness(.96)}

/* El paso de PayTheFly dentro de una compra: la capa on-chain, con su nombre y sus límites escritos. */
.ptf{border:1px solid var(--line-2); border-left:3px solid #16a34a; border-radius:.8rem;
  padding:14px 16px 12px; margin:.9rem 0 1.1rem; background:rgba(34,197,94,.05)}
.ptf-head{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem}
.ptf-marca{font-weight:900; letter-spacing:-.01em; font-size:1.05rem; color:#166534}
.ptf-que{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45)}
.ptf .kv{margin:0}
.ptf .note{margin:.4rem 0 0}

/* ---------- hero en el móvil, versión final ----------
   La foto manda, pero el titular tiene que leerse en un segundo. En vertical: la banda crece para que
   la foto enseñe a la gente por encima del panel, el titular se ancla arriba sobre la zona que oscurece
   el degradado, y el recorte baja el punto de interés para que la cara no quede detrás de la tipografía.
   Se declara al final y con doble clase para no depender del orden de los bloques anteriores. */
@media (max-width:760px){
  .hero.hero{
    min-height:clamp(600px,84vh,720px);
    padding-top:calc(var(--bar) + 12px);
    padding-bottom:12px;
    background-image:
      linear-gradient(180deg, rgba(4,10,16,.66) 0%, rgba(4,10,16,.44) 22%, rgba(4,10,16,.16) 46%,
                                rgba(4,10,16,.34) 70%, rgba(4,10,16,.74) 100%),
      radial-gradient(130% 58% at 50% 100%, rgba(4,10,16,.52) 0%, rgba(4,10,16,.16) 62%, rgba(4,10,16,0) 88%),
      linear-gradient(90deg, rgba(4,10,16,.74) 0%, rgba(4,10,16,.48) 34%, rgba(4,10,16,.06) 66%, rgba(4,10,16,.22) 100%),
      url(../img/hero-azotea-dubai.jpg);
    background-size:auto, auto, auto, cover;
    /* La persona a la derecha y el titular a la izquierda: el texto no se pelea con la cara. */
    background-position:center, center, center, 68% 32%;
  }
  /* Titular arriba, buscador abajo: el aire de la foto queda en medio, que es donde está la gente. */
  .hero.hero{align-items:stretch; justify-content:flex-start}
  .hero.hero .inner{height:100%; align-items:flex-start; text-align:left; gap:10px;
    padding-inline:18px; justify-content:flex-start}
  .hero.hero{position:relative}
  .hero.hero .inner{position:static}
  /* El buscador se ancla al borde inferior del héroe, pase lo que pase con el alto del contenido. */
  .hero.hero .buscador{position:absolute; left:16px; right:16px; bottom:14px; width:auto; margin:0}
  .hero.hero h1{
    font-size:clamp(2.05rem,8.7vw,2.5rem); line-height:1.05; letter-spacing:-.045em; max-width:9ch;
    text-shadow:0 3px 26px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55);
  }
  .hero.hero h1 .verde{color:#3ee37a; text-shadow:0 3px 22px rgba(0,0,0,.66)}
  .hero.hero .buscador{padding:8px; margin-top:.85rem}
  .hero.hero .hero-pie{font-size:.7rem; line-height:1.4; max-width:32ch; margin-inline:auto;
    text-wrap:balance; color:rgba(8,20,28,.72)}
}

/* ---------- la banda de saldo del creador ------------------------------------------------------
   Cuatro cifras que importan en ese orden: lo que puede cobrar, lo que viene, lo pagado y el total.
   La última va en oscuro porque es la que resume; las otras tres se leen como estados del mismo
   dinero, no como cuatro cosas distintas. */
.desk-sellos{display:flex; gap:8px; flex-wrap:wrap}
.pastilla{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:.72rem; font-weight:750; letter-spacing:.01em; white-space:nowrap;
  border:1px solid var(--line-2); background:#fff; color:var(--ink-60)}
.pastilla.ok{background:#e8f8ec; border-color:#a7e5bb; color:#15803D}
.pastilla.amb{background:#FFF6E5; border-color:#F3D9A4; color:#8A5A08}
.pastilla.bad{background:#FDECEC; border-color:#F3C0C0; color:#A32626}
.pastilla.neu{background:#EEF2F7; border-color:#DCE3EC; color:#475569}
.desk-saldo{background:#fff; border:1px solid var(--line-2); border-radius:.6rem; margin:0 0 14px;
  overflow:hidden}
.desk-saldo-fila{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.desk-bloque{display:flex; flex-direction:column; gap:3px; padding:16px 18px;
  border-right:1px solid var(--line-2)}
.desk-bloque:last-child{border-right:0}
.desk-bloque span{font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-60)}
.desk-bloque b{font-size:1.55rem; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.desk-bloque i{font-style:normal; font-size:.75rem; color:var(--ink-60); line-height:1.35}
.desk-bloque.total{background:#10222B; color:#fff}
.desk-bloque.total span,.desk-bloque.total i{color:rgba(255,255,255,.7)}
.desk-pie{margin:0; padding:10px 18px 13px; border-top:1px solid var(--line-2);
  font-size:.78rem; color:var(--ink-60); line-height:1.45}
.desk-red{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px 16px}
.desk-red > div{display:flex; flex-direction:column; gap:2px; background:#F7F9F8; border-radius:.45rem;
  padding:10px 12px}
.desk-red span{font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-60)}
.desk-red b{font-size:1.35rem; font-weight:650; font-variant-numeric:tabular-nums}
.desk-red i{font-style:normal; font-size:.72rem; color:var(--ink-60)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem}
.desk-panel > header .muted{margin-left:auto; font-size:.74rem; font-weight:500}
@media (max-width:900px){
  .desk-saldo-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desk-bloque{border-bottom:1px solid var(--line-2)}
  .desk-bloque:nth-child(2n){border-right:0}
  .desk-bloque.total{border-bottom:0}
  .desk-red{grid-template-columns:minmax(0,1fr)}
}


/* ---------- seis meses en barras, sin lienzo -----------------------------------------------
   Una barra por mes, la altura en proporción al mejor mes. La cifra solo se escribe encima de la
   barra que tiene dinero: llenar de números los meses vacíos es ruido, no información. */
.desk-barras{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; align-items:end;
  padding:18px 18px 12px; min-height:150px}
.desk-barra{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px;
  height:120px}
.desk-barra i{display:block; width:100%; max-width:44px; border-radius:4px 4px 2px 2px; background:#E7ECEA}
.desk-barra i.on{background:#15803D}
.desk-barra .mes{font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-60)}
.desk-barra .val{font-size:.68rem; color:var(--ink-60); white-space:nowrap}
.desk-reglas{margin:6px 0 0; font-size:.76rem; color:var(--ink-60); line-height:1.5}
@media (max-width:900px){
  .desk-barras{padding:14px 12px 10px; gap:6px}
  .desk-barra .val{display:none}
}


/* ---------- pestañas y botones del escritorio -----------------------------------------------
   Un programa de referidos se lee por pestañas: el resumen primero, y luego las ventas, el equipo
   y los pagos. Las pestañas son botones de verdad, no un adorno: cambian el contenido sin recargar. */
.desk-tabs{display:flex; gap:4px; margin:4px 0 14px; border-bottom:1px solid var(--line-2); flex-wrap:wrap}
.desk-tab{appearance:none; border:0; background:none; cursor:pointer; padding:10px 14px; font:inherit;
  font-size:.86rem; font-weight:700; color:var(--ink-60); border-bottom:2px solid transparent;
  margin-bottom:-1px; min-height:44px}
.desk-tab:hover{color:var(--ink)}
.desk-tab.on{color:var(--ink); border-bottom-color:var(--green)}
.desk-filtros{display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px 4px}
.chip{appearance:none; cursor:pointer; border:1px solid var(--line-2); background:#fff; color:var(--ink-60);
  border-radius:999px; padding:6px 12px; font:inherit; font-size:.78rem; font-weight:700; min-height:36px}
.chip:hover{border-color:var(--ink-60); color:var(--ink)}
.chip.on{background:#10222B; border-color:#10222B; color:#fff}
.btn-primario, .btn-ghost{appearance:none; cursor:pointer; border-radius:999px; padding:9px 16px; font:inherit;
  font-size:.8rem; font-weight:750; min-height:40px; display:inline-flex; align-items:center; gap:6px}
.btn-primario{background:#15803D; color:#fff; border:1px solid #15803D}
.btn-primario:hover{background:#116B33}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line-2); text-decoration:none}
.btn-ghost:hover{border-color:var(--ink-60)}
.desk-acciones{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 14px}


/* Reventa: la etiqueta del producto y el sello sin verificación. */
.tag.resale{background:var(--teal);color:#fff}
/* Una pestaña oculta de verdad: `.tabs a` fija display:flex y el atributo hidden se quedaba sin efecto. */
.tabs a[hidden]{display:none}
.sello-cuerpo.sin{opacity:.55}
.card .photo{position:relative}


/* Sala de noticias: el lector que llega por ese enlace no ve la tienda. */
.solo-sala .top, .solo-sala .foot {display:none !important}
.sala-barra{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:var(--teal);color:#fff;font-size:12.5px}
.sala-barra b{font-weight:900;letter-spacing:.14em;font-size:11px}
.sala-barra span{color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;font-weight:800}
.sala-barra a{margin-left:auto;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);
  padding:6px 12px;border-radius:999px;font-weight:800;font-size:11.5px}
.sala-barra a:hover{background:rgba(255,255,255,.12)}

/* Quién paga el DLD: es una oferta del promotor y se dice al lado del precio, no en la letra pequeña. */
.dld-nota{display:flex;flex-direction:column;gap:.15rem;margin:.55rem 0 .2rem;padding:.55rem .7rem;
  border-radius:10px;background:#ECFDF5;border:1px solid #A7F3D0}
.dld-nota b{font-size:.9rem;color:#065F46}
.dld-nota span{font-size:.8rem;color:#047857}