/* departamentos.html */

.dp{background:var(--bg)}
.dp-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.dp-text h2{color:var(--brand-dark);font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:1.4rem}
:root[data-theme="dark"] .dp-text h2{color:var(--brand-light)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dp-text h2{color:var(--brand-light)}}
.dp-text .btn{margin-top:.5rem}

/* Lista de teléfonos y datos */
.dp-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.25rem}
.dp-list li{position:relative;padding-left:1.6rem;max-width:60ch}
.dp-list li::before{content:"";position:absolute;left:0;top:.35em;width:9px;height:9px;
  border-right:2px solid var(--brand-red-ink);border-bottom:2px solid var(--brand-red-ink);transform:rotate(-45deg)}

/* Foto: la ruta está en el atributo style del HTML */
.dp-image{
  aspect-ratio:1/1;
  border-radius:16px;
  border:1px solid var(--line);
  background-color:var(--surface);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

@media (max-width:900px){
  .dp-layout{grid-template-columns:1fr}
  .dp-image{order:-1;aspect-ratio:1/1}
}