.crumb{ background:var(--paper); border-bottom:1px solid var(--rule-soft); padding:14px 0 }
.crumb .wrap{ display:flex; justify-content:space-between; gap:24px; align-items:center }
.crumb a:hover .tag{ color:var(--ink) }

.esc-hero{ padding:80px 0 60px; border-bottom:1px solid var(--rule) }
.esc-hero-wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:start }
.esc-hero-roman{ font-size:clamp(140px, 16vw, 220px); line-height:.9; font-style:italic; letter-spacing:-.05em; color:var(--accent); margin:24px 0 0 }
.esc-hero h1{ font-size:clamp(40px, 5vw, 64px); font-weight:400; margin:18px 0 24px; letter-spacing:-.01em }
.esc-hero-desc{ font-size:18px; line-height:1.55; color:var(--ink-2); max-width:520px; margin:0 0 32px }
.esc-hero-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); padding-top:24px; gap:0 }
.esc-hero-stats > div{ padding:8px 14px 8px 0; border-right:1px solid var(--rule-soft) }
.esc-hero-stats > div:last-child{ border-right:0 }
.esc-hero-stats .n{ font-family:var(--serif); font-size:36px; line-height:1; font-weight:400; display:block }
.esc-hero-stats .l{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:6px; display:block }

.bldg-map{ padding:32px; border:1px solid var(--rule); background:var(--paper) }
.bldg-map > .tag{ display:block; text-align:center; margin-bottom:18px }
.bldg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.bldg-cell{
  aspect-ratio:1/1.2; background:var(--bone-2); border:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:background .2s, color .2s; text-align:center;
}
.bldg-cell .roman{ font-family:var(--serif); font-size:54px; font-style:italic; line-height:1 }
.bldg-cell .meta{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.bldg-cell:hover{ background:var(--ink); color:var(--bone) }
.bldg-cell:hover .meta{ color:#9c958a }
.bldg-cell.active{ background:var(--ink); color:var(--bone) }
.bldg-cell.active .meta{ color:#9c958a }

.floor-selector{ padding:100px 0; border-bottom:1px solid var(--rule) }

/* Building elevation — sección vertical del edificio
   Cada planta es una banda horizontal; las puertas son tarjetas grandes
   dentro de la banda. De arriba a abajo: ático → 2ª → 1ª y 2ª → 1ª → baja. */
.bldg-elevation{
  display:flex; flex-direction:column;
  border:1px solid var(--rule); background:var(--paper);
  position:relative;
  /* perspective hint: subtle inner shadow at the top to suggest cubierta */
}
.bldg-elevation::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-2px;
  height:3px; background:var(--accent);
}

.be-floor{
  display:grid; grid-template-columns:36px 220px 1fr; gap:0;
  border-top:1px solid var(--rule-soft);
  min-height:128px; align-items:stretch;
  background:var(--paper);
  transition:background .25s;
}
.be-floor:first-child{ border-top:0 }
.be-floor:hover{ background:var(--bone) }
.be-floor.atico{ background:#f6f1e5 }
.be-floor.atico:hover{ background:#efe7d4 }
.be-floor.pb{
  border-bottom:6px solid var(--ink);   /* línea de tierra arquitectónica */
}

/* Axis (eje vertical estilo plano arquitectónico) */
.be-axis{
  background:var(--bone-2);
  border-right:1px solid var(--rule-soft);
  position:relative;
}
.be-axis-tick{
  position:absolute; left:50%; top:50%;
  width:14px; height:14px; transform:translate(-50%,-50%);
  border:1px solid var(--ink); background:var(--paper);
  border-radius:50%;
}
.be-floor.atico .be-axis-tick{ border-color:var(--accent); background:var(--accent) }

/* Etiqueta de planta */
.be-label{
  padding:22px 28px;
  display:flex; flex-direction:column; gap:6px;
  justify-content:center;
  border-right:1px solid var(--rule-soft);
}
.be-name{
  font-family:var(--serif); font-size:30px; font-weight:400;
  line-height:1; letter-spacing:-.005em;
}
.be-sub{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.be-count{
  margin-top:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
}

/* Banda de puertas */
.be-doors{
  display:grid; gap:1px; background:var(--rule-soft);
  grid-template-columns:repeat(var(--cols, 4), minmax(0, 1fr));
}
.be-doors[data-count="1"]{ --cols:1 }
.be-doors[data-count="2"]{ --cols:2 }
.be-doors[data-count="3"]{ --cols:3 }
.be-doors[data-count="4"]{ --cols:4 }
.be-doors[data-count="5"]{ --cols:5 }

.be-door{
  background:var(--paper);
  padding:22px 20px;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:16px;
  text-align:left;
  transition:background .2s, color .2s;
  position:relative;
  min-height:128px;
}
.be-doors[data-count="4"] .be-door,
.be-doors[data-count="5"] .be-door{
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  padding:20px 18px;
  gap:6px 14px;
}
.be-doors[data-count="4"] .be-door-l,
.be-doors[data-count="5"] .be-door-l{
  grid-column:1; grid-row:1 / 3; align-self:start;
  font-size:38px;
}
.be-doors[data-count="4"] .be-door-body,
.be-doors[data-count="5"] .be-door-body{
  grid-column:1 / 3; grid-row:2;
}
.be-doors[data-count="4"] .be-door-arrow,
.be-doors[data-count="5"] .be-door-arrow{
  grid-column:2; grid-row:1; align-self:start;
}
.be-door:hover{ background:var(--ink); color:var(--bone) }
.be-door:hover .be-door-meta{ color:#bdb6a8 }
.be-door:hover .be-door-arrow{ transform:translateX(4px) }

.be-door-l{
  font-family:var(--serif); font-style:italic;
  font-size:44px; line-height:.9;
  color:var(--ink); letter-spacing:-.04em;
}
.be-door.atico .be-door-l{ color:var(--accent) }
.be-door:hover .be-door-l{ color:var(--bone) }
.be-door.atico:hover .be-door-l{ color:var(--bone) }

.be-door-body{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.be-door-big{
  font-size:15px; line-height:1.2; color:var(--ink); letter-spacing:.01em;
}
.be-door-big b{ font-weight:500 }
.be-door:hover .be-door-big{ color:var(--bone) }
.be-door-meta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.be-door-arrow{
  font-family:var(--mono); font-size:16px;
  color:var(--ink-2);
  transition:transform .2s, color .2s;
}
.be-door:hover .be-door-arrow{ color:var(--bone) }

@media (max-width:900px){
  .be-floor{ grid-template-columns:24px 1fr; min-height:auto }
  .be-label{ grid-column:2; padding:18px 20px; border-right:0; border-bottom:1px solid var(--rule-soft) }
  .be-doors{ grid-column:1 / -1; grid-template-columns:1fr !important }
  .be-door{ padding:18px 20px; min-height:auto; gap:16px }
  .be-door-l{ font-size:48px }
}

/* Cuadro tabla */
.cuadro{ padding:100px 0 80px; border-bottom:1px solid var(--rule) }
.table-wrap{ border:1px solid var(--rule) }
.cuadro-tbl{ width:100%; border-collapse:collapse; background:var(--paper) }
.cuadro-tbl thead th{
  text-align:left; padding:18px 20px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
  border-bottom:1px solid var(--rule);
  background:var(--bone-2);
}
.cuadro-tbl tbody td{
  padding:16px 20px; border-bottom:1px solid var(--rule-soft);
  font-size:14px;
}
.cuadro-tbl tbody tr:last-child td{ border-bottom:0 }
.cuadro-tbl tbody tr:hover{ background:var(--bone-2); cursor:pointer }
.cuadro-tbl .planta-cell{ font-family:var(--serif); font-size:16px; min-width:140px }
.cuadro-tbl .puerta-cell b{ font-family:var(--serif); font-size:20px; font-weight:400; margin-right:6px }
.cuadro-tbl .puerta-cell.atico b{ color:var(--accent) }
.cuadro-tbl td.t-right{ text-align:right }
.cuadro-tbl .ficha-link{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase }
.cuadro-tbl .ficha-link .arrow{ margin-left:6px }

/* CTA strip */
.cta-strip{ padding:80px 0; background:var(--ink); color:var(--bone) }
.cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:32px }
.cta-inner h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px, 3.4vw, 44px); margin:8px 0 0 }
.cta-inner .eyebrow{ color:#9c958a }
.cta-inner .btn{ background:var(--bone); color:var(--ink); border-color:var(--bone) }
.cta-inner .btn:hover{ background:transparent; color:var(--bone) }

@media (max-width:980px){
  .esc-hero-wrap{ grid-template-columns:1fr; gap:40px }
  .nav ul{ display:none }
  .cta-inner{ flex-direction:column; align-items:flex-start }
  footer.site .wrap{ grid-template-columns:1fr 1fr }
  footer.site .legal{ grid-column:span 2; flex-direction:column; gap:8px; text-align:center }
}