:root {
  --verde: #0e2a1a;
  --musgo: #383d03;
  --oscuro: #2b2420;
  --oscuro2: #1e1916;
  --crema: #f3efe7;
  --papel: #fcfbf8;
  --oro: #b08a3e;
  --tierra: #a1503d;
  --tinta: #22211e;
  --suave: #66625a;
  --linea: #e2ddd2;
  --bg: var(--papel);
  --fg: var(--tinta);
  --fg2: var(--suave);
  --panel: var(--crema);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1714;
    --fg: #ede8de;
    --fg2: #b8b0a3;
    --panel: #24201c;
    --linea: #3a332c;
    --oro: #c9a458;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1714;
  --fg: #ede8de;
  --fg2: #b8b0a3;
  --panel: #24201c;
  --linea: #3a332c;
  --oro: #c9a458;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
}
h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  letter-spacing: -0.01em;
}
h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
p {
  margin: 0 0 1em;
  max-width: 62ch;
}
.lead {
  font-size: 1.2rem;
  color: var(--fg2);
  font-weight: 300;
}
section {
  padding: clamp(72px, 10vw, 128px) 0;
}

/* greca: the one decorative device, taken from the muro de identidad */
.greca {
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 13 L7 6 L14 13 L21 6 L28 13' fill='none' stroke='%23B08A3E' stroke-width='1.4'/%3E%3Cpath d='M5 13 L7 11 L9 13 Z M19 13 L21 11 L23 13Z' fill='%23B08A3E'/%3E%3Crect x='13' y='1' width='2' height='2' transform='rotate(45 14 2)' fill='%23B08A3E'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  opacity: 0.85;
}
.greca.short {
  width: 168px;
}

/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: relative;
}
header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}
header .brand img {
  width: 40px;
}
header .brand span {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.18em;
}
header nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
header nav a {
  text-decoration: none;
  color: #fff;
  font-size: 0.95rem;
  opacity: 0.9;
}
header nav a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--oro);
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.nav-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
.nav-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
header.solid {
  background: rgba(14, 42, 26, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 500 1rem var(--sans);
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.2s,
    color 0.2s;
}
.btn.oro {
  background: var(--oro);
  color: #14170f;
}
.btn.oro:hover {
  background: #c79d4b;
}
.btn.linea {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  background: transparent;
}
.btn.linea:hover {
  background: rgba(255, 255, 255, 0.1);
}
.btn.verde {
  background: var(--tierra);
  color: #fbf6ee;
}
.btn.verde:hover {
  background: #8a4332;
}
.btn.contorno {
  border-color: var(--fg);
  color: var(--fg);
  background: transparent;
}
.btn.contorno:hover {
  background: var(--fg);
  color: var(--bg);
}
header .btn {
  padding: 10px 18px;
  font-size: 0.92rem;
}
@media (max-width: 900px) {
  header .menu-toggle {
    display: inline-flex;
  }

  header nav {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 18px;
    right: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: rgba(14, 42, 26, 0.98);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
  }

  header.nav-open nav,
  header nav.is-open {
    display: flex;
  }

  header nav a.nl {
    display: block;
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  header nav .btn {
    margin-top: 8px;
    text-align: center;
  }

  /* El botón de salir del panel va dentro de un formulario; sin esto se quedaría
     con su ancho natural, alineado a la izquierda, mientras los enlaces ocupan
     toda la fila. */
  header nav form.sin-caja {
    display: flex;
    width: 100%;
  }

  header nav form.sin-caja .btn {
    width: 100%;
  }
}

/* hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  padding: 0 0 clamp(48px, 8vh, 96px);
  background: #1a1410;
}
.hero img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(22, 15, 10, 0.55) 0%,
      rgba(22, 15, 10, 0) 20%,
      rgba(22, 15, 10, 0.15) 45%,
      rgba(22, 15, 10, 0.85) 100%
    ),
    linear-gradient(
      90deg,
      rgba(22, 15, 10, 0.6) 0%,
      rgba(22, 15, 10, 0.15) 55%,
      rgba(22, 15, 10, 0) 75%
    );
}
.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero h1 {
  font-size: clamp(3.4rem, 10vw, 8.6rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.92;
}
.hero .lema {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  margin: 14px 0 22px;
  color: #f1e7cf;
}
.hero .sub {
  max-width: 46ch;
  font-weight: 300;
  font-size: 1.15rem;
  opacity: 0.92;
}
.hero .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.hero .facts {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 10px 36px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.98rem;
}
.hero .facts b {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  line-height: 1.1;
}
.hero .greca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  filter: brightness(1.2);
}

/* esencia */
.esencia .grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}

.logo3d {
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 900px;
}
.logo3d .tilt {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateX(14deg) rotateY(-10deg);
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.logo3d .tilt:hover {
  transform: rotateX(0) rotateY(0);
}
.logo3d img {
  width: min(300px, 70vw);
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.35))
    drop-shadow(-2px -2px 0 rgba(0, 0, 0, 0.25))
    drop-shadow(0 22px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
}
.logo3d .word {
  font: 500 clamp(2rem, 3.4vw, 2.6rem) var(--serif);
  letter-spacing: 0.32em;
  margin: 18px 0 0 0.32em;
  color: #f3efe4;
  text-shadow:
    0 1px 0 #cfc7b2,
    0 2px 0 #a99f88,
    0 3px 0 #8b826d,
    0 6px 12px rgba(0, 0, 0, 0.5);
}
.logo3d .sub {
  font: 400 0.8rem var(--sans);
  letter-spacing: 0.55em;
  margin: 6px 0 0 0.55em;
  color: #d9c38e;
}
.logo3d .shadow {
  width: 220px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent);
  margin-top: 14px;
}
@media (prefers-reduced-motion: no-preference) {
  .logo3d .tilt {
    animation: flota 6s ease-in-out infinite;
  }
  .logo3d .tilt:hover {
    animation: none;
  }
}
@keyframes flota {
  0%,
  100% {
    transform: rotateX(14deg) rotateY(-10deg) translateY(0);
  }
  50% {
    transform: rotateX(10deg) rotateY(8deg) translateY(-8px);
  }
}
.esencia blockquote {
  margin: 28px 0 32px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.3;
  max-width: 28ch;
}
.terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  border-top: 1px solid var(--linea);
  padding-top: 24px;
}
.terms h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.terms p {
  font-size: 0.97rem;
  color: var(--fg2);
  margin: 0;
}

/* ubicacion */

.ubic .grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.ubic figure {
  margin: 0;
}
.ubic figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.ubic figcaption {
  font-size: 0.85rem;
  color: var(--fg2);
  margin-top: 10px;
}

.dist {
  list-style: none;
  padding: 0;
  margin: 28px 0 32px;
}
.dist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea);
}
.dist b {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 500;
  color: #e3c47f;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dist b {
    color: #e09b7f;
  }
}
:root[data-theme="dark"] .dist b {
  color: #e09b7f;
}

/* master plan */
.mp .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.mp .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.mp .mapa {
  margin: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.mp .mapa img {
  width: 100%;
}
.mp .planbox {
  background: var(--panel);
  padding: clamp(16px, 3vw, 36px);
}
.mp .planbox img {
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .mp .planbox {
  background: #efede3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mp .planbox {
    background: #efede3;
  }
}
:root[data-theme="dark"] .mp .planbox img {
  filter: brightness(0.92);
}
.etapas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 28px;
}
.etapas li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
}
.etapas .st {
  grid-column: 2;
}
.etapas .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linea);
  transform: translateY(-1px);
}
.etapas li.on .dot {
  box-shadow: 0 0 0 4px rgba(201, 164, 88, 0.25);
  /* background: var(--oro); */
}
.etapas li.on .dot.red {
  background: #ee032c;
}
.etapas li.on .dot.blue {
  background: #004087;
}
.etapas li.on .st {
  justify-self: start;
  margin-top: 10px;
  background: var(--oro);
  color: #14170f;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 2px;
}
.etapas li.on {
  background: rgba(255, 255, 255, 0.07);
  border-top: 2px solid var(--oro);
  padding: 18px 16px 20px;
  border-radius: 0 0 4px 4px;
}
.etapas li.on .dot {
  background: var(--oro);
}
.etapas .n {
  font-family: var(--serif);
  font-size: 1.45rem;
}
.etapas .n small {
  display: block;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--fg2);
}
.etapas .st {
  font-size: 0.88rem;
  color: var(--fg2);
}
.etapas li.on .st {
  color: var(--fg);
  font-weight: 500;
}
.stat {
  display: flex;
  gap: 40px;
  margin: 0 0 8px;
}
.stat div b {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 500;
  display: block;
  line-height: 1;
}
.stat div span {
  font-size: 0.92rem;
  color: var(--fg2);
}

/* etapas en venta */
.venta .card {
  background: #f3efe7;
}
.venta .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 48px;
}
.card {
  display: flex;
  flex-direction: column;
  --fg: #22211e;
  --fg2: #66625a;
  --linea: #e2ddd2;
  color: var(--fg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.card .img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #fff;
}
.card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card .body {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card .tag {
  font-size: 0.9rem;
  color: #a1503d;
  margin-bottom: 8px;
}
:root[data-theme="dark"] .card .tag {
  color: #e09b7f;
}
.card h3 {
  margin-bottom: 14px;
}
.card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  margin: 18px 0 26px;
  font-size: 0.98rem;
}
.card dt {
  color: var(--fg2);
}
.card dd {
  margin: 0;
}
.card .precio {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.card .precio b {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
}
.card .precio span {
  display: block;
  font-size: 0.9rem;
  color: var(--fg2);
}

/* amenidades */
.amen .mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 18vw, 230px);
  gap: 12px;
  margin: 48px 0;
}
.amen figure {
  margin: 0;
  position: relative;
  overflow: hidden;
}
.amen figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amen figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.9rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);
}
.m1 {
  grid-column: span 4;
  grid-row: span 2;
}
.m2 {
  grid-column: span 2;
  grid-row: span 1;
}
.m3 {
  grid-column: span 2;
}
.m4 {
  grid-column: span 3;
}
.m5 {
  grid-column: span 3;
}
.amlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}
.amlist h3 {
  font-size: 1.45rem;
  margin-bottom: 12px;
}
.amlist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.amlist li {
  padding: 7px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 0.98rem;
}
.wrap .lema-sec {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--fg);
  margin: 4px 0 0;
}

/* precios */
.precios .grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.toggle {
  display: inline-flex;
  border: 1px solid var(--linea);
  margin: 4px 0 22px;
}
.toggle button {
  font: 500 0.95rem var(--sans);
  padding: 10px 20px;
  background: transparent;
  color: var(--fg);
  border: 0;
  cursor: pointer;
}
.toggle button[aria-pressed="true"] {
  background: var(--tierra);
  color: #fbf6ee;
}
.tw {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  min-width: 420px;
}
th {
  font-weight: 500;
  text-align: left;
  font-size: 0.9rem;
  color: var(--fg2);
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--fg);
}
td {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
}
td.m {
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--fg);
}
.benef {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 10px;
}
.benef li {
  padding-left: 22px;
  position: relative;
}
.benef li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--oro);
}
.nota {
  font-size: 0.88rem;
  color: var(--fg2);
  margin-top: 18px;
}
.big {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  margin: 18px 0 4px;
}

/* contacto */
.contacto {
  position: relative;
  color: #fff;
  background: #2a2a28;
  overflow: hidden;
}
.contacto > img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(20, 18, 15, 0.85) 0%,
    rgba(20, 18, 15, 0.7) 45%,
    rgba(20, 18, 15, 0.35) 100%
  );
}
.contacto .wrap {
  position: relative;
  z-index: 2;
}
.contacto .grid {
  align-items: center;
}
.contacto .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
}
.contacto .lead {
  color: #eae4da;
}
form {
  display: grid;
  gap: 16px;
  background: var(--papel);
  color: var(--tinta);
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: 3px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--suave);
}
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  font: 400 1rem var(--sans);
  padding: 13px 14px;
  background: #fff;
  border: 1px solid #d6d0c4;
  color: var(--tinta);
  border-radius: 2px;
}
select option {
  color: #111;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--oro);
  outline-offset: 0;
  border-color: transparent;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.direct {
  margin-top: 34px;
  display: grid;
  gap: 12px;
  font-size: 1.05rem;
}
.direct a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 2px;
  justify-self: start;
  color: #fff;
}
.direct a:hover {
  border-color: #e3c47f;
}
.msg {
  font-size: 0.92rem;
  color: var(--tierra);
  min-height: 1.3em;
  margin: 0;
}

/* verde que se atenúa al bajar */
.dk {
  --fg: #eeece2;
  --fg2: #c3cdbf;
  --linea: rgba(255, 255, 255, 0.18);
  color: var(--fg);
}
.esencia {
  background: linear-gradient(180deg, #0e2a1a, #123222);
}
.ubic {
  background: linear-gradient(180deg, #123222, #1a3d2b);
}
.mp {
  background: linear-gradient(180deg, #1a3d2b, #2a5039);
}
.venta {
  background: linear-gradient(180deg, #2a5039 0%, #4e7259 35%, #a3b8a0 100%);
}
.amen {
  background: linear-gradient(180deg, #a3b8a0, #d6e0d1 45%, #e8ece1);
}
.amen {
  --fg: #1e2a21;
  --fg2: #3f4b40;
  --linea: rgba(30, 42, 33, 0.18);
  color: var(--fg);
}
.precios {
  background: linear-gradient(180deg, #e8ece1, #f5f4ee);
}
.precios {
  --fg: #1e2a21;
  --fg2: #4a564b;
  --linea: rgba(30, 42, 33, 0.18);
  --oro: #a9802f;
  color: var(--fg);
}
footer {
  background: #0e2a1a;
  color: #b9c4b4;
  padding: 48px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  font-size: 0.92rem;
}
footer .f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
footer img {
  width: 150px;
  filter: brightness(1.05);
}
footer p {
  margin: 0;
}

/* El logo del pie es el enlace al acceso: sin texto que lo delate, así que el
   único aviso de que se puede pulsar es el realce al pasar el ratón. */
footer .flogo {
  display: flex;
  border-radius: 2px;
  transition: filter 0.2s ease;
}

footer .flogo:hover,
footer .flogo:focus-visible {
  filter: brightness(1.4);
}

footer .flogo:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 5px;
}

@media (max-width: 860px) {
  .esencia .grid,
  .ubic .grid,
  .mp .grid,
  .venta .cols,
  .precios .grid,
  .contacto .grid {
    grid-template-columns: 1fr;
  }
  .amlist {
    grid-template-columns: 1fr;
  }
  .etapas {
    grid-template-columns: 1fr 1fr;
  }
  .mosaic {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .m1,
  .m2,
  .m3,
  .m4,
  .m5 {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }
  .m2,
  .m3 {
    grid-column: span 1 !important;
  }
  .terms,
  .row2 {
    grid-template-columns: 1fr;
  }
}

/* tablet */
@media (max-width: 1024px) {
  .wrap {
    padding-left: 28px;
    padding-right: 28px;
  }

  section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  header nav {
    gap: 16px;
  }

  header .btn {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero {
    padding-bottom: 64px;
  }

  .hero img.bg {
    object-position: 58% 50%;
  }

  .hero .sub {
    max-width: 42ch;
  }

  .card .body {
    padding: 28px;
  }

  .amen .mosaic {
    margin-top: 36px;
    margin-bottom: 36px;
  }
}

/* teléfonos */
@media (max-width: 600px) {
  html {
    scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px));
  }

  body {
    font-size: 1rem;
  }

  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  h2 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .lead {
    font-size: 1.08rem;
  }

  header .bar {
    height: 64px;
  }

  header .brand {
    gap: 8px;
  }

  header .brand img {
    width: 34px;
  }

  header .brand span {
    font-size: 1.15rem;
    letter-spacing: 0.12em;
  }

  /* Sobre el hero la marca no aporta información y puede competir con el contenido. */
  header:not(.solid) .brand {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  header.solid .brand {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  header nav a.nl {
    display: block;
  }

  header .btn {
    padding: 9px 11px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .hero {
    min-height: 100svh;
    padding-bottom: 46px;
  }

  .hero img.bg {
    object-position: 64% 50%;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 16vw, 5rem);
  }

  .hero .lema {
    font-size: 1.45rem;
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .hero .sub {
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero .acts {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }

  .btn {
    min-height: 48px;
    padding: 12px 18px;
  }

  .hero .acts .btn {
    width: 100%;
  }

  .hero .facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
    padding-top: 16px;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .hero .facts b {
    font-size: 1.22rem;
    margin-bottom: 3px;
  }

  .logo3d img {
    width: min(250px, 72vw);
  }

  .logo3d .word {
    font-size: 2rem;
  }

  .esencia blockquote {
    margin-top: 22px;
    margin-bottom: 24px;
    font-size: 1.45rem;
  }

  .terms {
    gap: 20px;
    padding-top: 20px;
  }

  .dist {
    margin-top: 20px;
    margin-bottom: 26px;
  }

  .dist li {
    gap: 10px;
    padding: 12px 0;
    font-size: 0.92rem;
  }

  .dist b {
    font-size: 1.45rem;
  }

  .mp .head {
    gap: 20px;
    margin-bottom: 28px;
  }

  .stat {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
  }

  .stat div b {
    font-size: 2.1rem;
  }

  .etapas {
    grid-template-columns: 1fr;
  }

  .etapas .n {
    font-size: 1.3rem;
  }

  .venta .cols {
    gap: 28px;
    margin-top: 32px;
  }

  .card .body {
    padding: 22px 18px;
  }

  .card dl {
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 16px;
    margin-bottom: 22px;
  }

  .card dd {
    margin-bottom: 8px;
  }

  .card .precio {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .card .precio .btn {
    width: 100%;
  }

  .amen .mosaic {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 190px;
    gap: 10px;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .amen .mosaic figure,
  .amen .mosaic .m1,
  .amen .mosaic .m2,
  .amen .mosaic .m3,
  .amen .mosaic .m4,
  .amen .mosaic .m5 {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
  }

  .amen figcaption {
    font-size: 0.82rem;
  }

  .amlist {
    gap: 24px;
  }

  .precios .grid {
    gap: 36px;
  }

  .big {
    font-size: 3.4rem;
  }

  .toggle button {
    padding: 10px 16px;
  }

  .tw {
    margin-right: -18px;
  }

  table {
    min-width: 390px;
    font-size: 0.92rem;
  }

  th,
  td {
    padding-right: 10px;
  }

  .contacto .grid {
    gap: 34px;
  }

  form {
    padding: 22px 18px;
  }

  .row2 {
    gap: 14px;
  }

  footer {
    padding-top: 36px;
  }

  footer .f {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  footer p {
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------------------------
   Acceso (login) y panel de prospectos.
   Reutiliza las variables y componentes de la landing: .wrap, form, label,
   input, .btn y .msg.
   --------------------------------------------------------------------------- */

.auth {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 128px 0 72px;
  background: linear-gradient(180deg, #0e2a1a, #1a3d2b);
}

.auth form {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.auth h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  font-weight: 500;
  margin: 0;
}

.auth .lead {
  color: var(--suave);
  margin: 0;
  font-size: 0.95rem;
}

.auth .msg.err {
  color: var(--tierra);
  font-weight: 500;
}

.auth .alt {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
}

.auth .alt a {
  color: var(--suave);
}

.panel {
  min-height: 100vh;
  padding: 128px 0 72px;
  background: var(--bg);
}

.panel h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  font-weight: 500;
  margin: 0;
}

.panel .who {
  color: var(--fg2);
  margin: 4px 0 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.panel .barra {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.panel .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--fg2);
  background: var(--panel);
}

.panel .caja {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: clamp(16px, 2.5vw, 28px);
  overflow-x: auto;
  /* El texto sólo para lectores de pantalla (`span.sr`) va en posición absoluta: sin
     un contenedor posicionado su caja de referencia es la página y una tabla ancha
     estiraba el documento hasta 946 px. */
  position: relative;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tabla th {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg2);
  white-space: nowrap;
}

.tabla tr:last-child td {
  border-bottom: 0;
}

.tabla .vacio {
  text-align: center;
  color: var(--fg2);
  padding: 40px 12px;
}

.tabla .msj {
  max-width: 46ch;
  overflow-wrap: anywhere;
}

/* Forms that only hold a button must not inherit the card look of the
   contact form, which the global `form` rule would otherwise apply. */
form.sin-caja {
  display: inline-flex;
  gap: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
}

/* --- panel: tarjetas de resumen --- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.tarjeta {
  display: grid;
  gap: 4px;
  align-content: start;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: clamp(20px, 3vw, 30px);
  text-decoration: none;
  color: inherit;
}

.tarjeta .t-num {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--verde);
}

.tarjeta .t-lbl {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2);
}

.tarjeta .t-acc {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--tierra);
}

.tarjeta.principal {
  border-color: var(--oro);
  box-shadow: 0 10px 30px rgba(176, 138, 62, 0.16);
}

.tarjeta.principal:hover .t-acc {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- panel: buscador, avisos y conteo --- */

.buscar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.buscar input[type="search"] {
  width: min(340px, 60vw);
}

.buscar select {
  width: auto;
  min-width: 170px;
}

.aviso {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--oro);
  background: var(--panel);
  color: var(--fg);
  font-size: 0.95rem;
}

.conteo {
  margin: 0 0 14px;
  color: var(--fg2);
  font-size: 0.92rem;
}

.migas {
  margin: 0 0 18px;
  font-size: 0.92rem;
}

.migas a {
  color: var(--fg2);
  text-decoration: none;
}

.migas a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nota {
  margin: 0;
  font-size: 0.86rem;
  color: var(--fg2);
}

.nota code,
.compositor code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--crema);
  padding: 1px 5px;
  border-radius: 2px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tabla .ahora {
  white-space: nowrap;
}

.tabla .acciones {
  text-align: right;
}

.btn-mini {
  display: inline-block;
  font-size: 0.82rem;
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: 2px;
  text-decoration: none;
  color: var(--fg);
  background: var(--papel);
  white-space: nowrap;
}

.btn-mini:hover {
  border-color: var(--oro);
  color: var(--tierra);
}

/* --- panel: paginación --- */

.paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 22px;
}

.pag {
  display: inline-block;
  min-width: 38px;
  padding: 8px 12px;
  text-align: center;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--linea);
  border-radius: 2px;
  background: var(--papel);
}

a.pag:hover {
  border-color: var(--oro);
  color: var(--tierra);
}

.pag.activo {
  background: var(--verde);
  border-color: var(--verde);
  color: #f3efe7;
}

.pag.off {
  color: var(--fg2);
  opacity: 0.5;
}

/* --- panel: detalle y compositor --- */

.detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.detalle h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 14px;
}

.datos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
  font-size: 0.95rem;
}

.datos dt {
  color: var(--fg2);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 3px;
}

.datos dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.compositor-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compositor .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- panel: usuarios --- */

.sub {
  font-size: 0.85rem;
}

/* En el panel el fondo es claro: el gris suave se lee y el blanco desaparece. */
.panel .sub {
  color: var(--fg2);
}

.pill {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  white-space: nowrap;
}

.pill.ok {
  color: #1f4a32;
  border-color: #8fbf9f;
  background: #e8f3ec;
}

.pill.off {
  color: #7d3a2b;
  border-color: #d9b1a7;
  background: #fbeeea;
}

/* --- pipeline de prospectos: nuevo, en negociación, captado, cancelado --- */

.pill.estado.nuevo {
  color: #2f4a63;
  border-color: #a8c0d6;
  background: #eaf1f7;
}

.pill.estado.negociacion {
  color: #7a5a12;
  border-color: #dcbf76;
  background: #fbf3dd;
}

.pill.estado.captado {
  color: #1f4a32;
  border-color: #8fbf9f;
  background: #e8f3ec;
}

.pill.estado.cancelado {
  color: #7d3a2b;
  border-color: #d9b1a7;
  background: #fbeeea;
}

/* --- terrenos: estados de la venta --- */

.pill.estado.disponible {
  color: #1f4a32;
  border-color: #8fbf9f;
  background: #e8f3ec;
}

.pill.estado.apartado {
  color: #7a5a12;
  border-color: #dcbf76;
  background: #fbf3dd;
}

.pill.estado.vendido {
  color: #2f4a63;
  border-color: #a8c0d6;
  background: #eaf1f7;
}

.pill.estado.liquidado {
  color: #4a3a63;
  border-color: #bcaed6;
  background: #f1ecf8;
}

/* El recuento por estado dentro de la tarjeta de terrenos. */
.t-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* --- panel: secciones y terrenos --- */

/* Barra de avance de una sección. */
.avance {
  display: inline-block;
  width: 110px;
  height: 8px;
  vertical-align: middle;
  border-radius: 999px;
  background: var(--crema);
  border: 1px solid var(--linea);
  overflow: hidden;
}

.avance-barra {
  display: block;
  height: 100%;
  background: var(--verde);
}

/* Muestra del color con el que se pinta el terreno en el plano. */
.muestra-color {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -1px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

/* Aviso de error de un formulario, más fuerte que el aviso normal. */
.aviso.error {
  border-left-color: #a1503d;
  color: #7d3a2b;
  font-weight: 500;
}

/* Zona de borrado, separada del resto del formulario. */
.zona-peligro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid #d9b1a7;
  border-radius: 3px;
  background: #fbeeea;
}

.zona-peligro .nota {
  margin: 4px 0 0;
}

.btn.peligro {
  border-color: #a1503d;
  background: #a1503d;
  color: #fdf8f6;
}

.btn.peligro:hover {
  background: #8d4434;
}

/* El master plan abre el panel: el plano sobre el que se colocan los terrenos. */
.plano {
  margin: 24px 0 0;
  padding: clamp(12px, 2vw, 18px);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.plano img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.plano figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-top: 12px;
}

.plano figcaption .t-lbl {
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--fg2);
}

.estado-form {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

.estado-form .btn {
  width: auto;
}

.estado-form .nota {
  max-width: 46ch;
}

.usuario {
  max-width: 660px;
}

.roles {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.roles legend {
  padding: 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* Overrides the global label rule, which stacks every field as a grid. */
label.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--fg);
  cursor: pointer;
}

label.check input {
  width: auto;
  margin: 3px 0 0;
  flex: none;
}

label.check .sub {
  display: block;
}

@media (max-width: 900px) {
  .detalle {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .panel .barra {
    align-items: stretch;
    flex-direction: column;
  }

  .panel .barra .btn {
    width: 100%;
  }

  .buscar input[type="search"] {
    width: 100%;
  }

  .compositor-acciones .btn {
    width: 100%;
  }
}

/* --- panel: clientes, ventas y documentos --- */

/* Las tarjetas de resumen llevan a veces una segunda línea explicativa. */
.tarjeta .sub {
  display: block;
}

/* Dos columnas que se apilan cuando no caben: el contrato y los documentos. */
.columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

/* Ficha de datos: etiqueta a la izquierda, valor a la derecha. */
.datos {
  display: grid;
  grid-template-columns: minmax(120px, 36%) 1fr;
  gap: 7px 14px;
  margin: 0 0 14px;
}

.datos dt {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg2);
  align-self: baseline;
}

.datos dd {
  margin: 0;
}

.datos dd .sub {
  display: block;
}

/* Lista de PDFs guardados con la venta. */
.documentos {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.documentos li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 6px;
}

.documentos .sub {
  display: block;
}

/* Formularios que van dentro de una línea: cobrar un pago, generar un documento. */
.en-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.en-linea input[type="date"],
.en-linea input[type="number"] {
  width: auto;
  min-width: 0;
  padding: 5px 8px;
  font-size: 0.85rem;
}

.en-linea select {
  width: auto;
}

/* Los dos testigos del contrato, cada uno en su bloque. */
.grupo-testigos {
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 16px 4px;
  margin: 2px 0 14px;
  display: grid;
  gap: 12px;
}

.grupo-testigos legend {
  padding: 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
}

.grupo-testigos .nota {
  margin: 0;
}

.testigo {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
}

.testigo h3 {
  margin: 0;
  font-size: 0.95rem;
}

/* La mora se lee como una advertencia, no como un importe más. */
.mora {
  color: #a1503d;
  font-weight: 500;
}

.aviso.info {
  border-left-color: #a8c0d6;
  color: #2f4a63;
}

.barra .acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Estados de una venta y de un pago. */
.pill.estado.activa,
.pill.estado.activo,
.pill.pendiente {
  color: #2f4a63;
  border-color: #a8c0d6;
  background: #eaf1f7;
}

.pill.estado.liquidada,
.pill.pagado {
  color: #1f4a32;
  border-color: #8fbf9f;
  background: #e8f3ec;
}

.pill.estado.cancelada,
.pill.estado.inactivo {
  color: #5c574f;
  border-color: #d6d0c4;
  background: #f1eee7;
}

.pill.parcial {
  color: #6b4a12;
  border-color: #d9c08a;
  background: #f7efdc;
}

.pill.vencido {
  color: #7d3a2b;
  border-color: #d9b1a7;
  background: #fbeeea;
}

.pill.estado.vendido + .pill,
.pill.vencido {
  margin-left: 4px;
}

/* Las tarjetas de dinero: los importes son largos, así que el número baja de
   tamaño y nunca se sale de su tarjeta. */
.tarjeta.dato {
  padding: clamp(14px, 2vw, 20px);
}

.tarjeta.dato .t-num {
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tarjeta.dato .sub {
  font-size: 0.78rem;
}

/* --- móvil: lo que se salía de la pantalla --- */

/*
 * Un `1fr` en una rejilla no baja del ancho mínimo de su contenido. La tabla de
 * financiamiento mide 372 px, así que la columna se estiraba hasta ese ancho y la
 * sección de precios se salía 48 px de la pantalla: el navegador la recortaba y los
 * números aparecían cortados. `minmax(0, 1fr)` deja que la columna se encoja y que
 * la tabla se desplace dentro de su caja.
 */
@media (max-width: 860px) {
  .esencia .grid,
  .ubic .grid,
  .mp .grid,
  .venta .cols,
  .precios .grid,
  .contacto .grid,
  .amlist,
  .terms,
  .row2,
  .etapas {
    grid-template-columns: minmax(0, 1fr);
  }

  .tw {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tw table {
    min-width: 20rem;
  }
}

@media (max-width: 600px) {
  /*
   * Los cuatro datos del hero iban en tres columnas, así que el cuarto caía solo en
   * un hilo de un tercio de pantalla y su texto se partía en seis renglones. Con
   * auto-fit caben dos y dos, y en un teléfono muy estrecho pasan a uno.
   */
  .hero .facts {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }

  /*
   * La tabla de financiamiento tiene un ancho mínimo de 390 px por la regla global
   * de las tablas, y en un teléfono caben 339: las tres columnas se salían y los
   * importes aparecían cortados. Aquí se deja encoger y se aprieta el relleno para
   * que entre sin desplazamiento lateral.
   */
  .tw table {
    min-width: 0;
    font-size: 0.82rem;
    table-layout: fixed;
  }

  .tw th,
  .tw td {
    padding: 8px 4px;
  }

  /* La mensualidad va en grande a propósito, pero 1.6rem no cabe en una columna de
     114 px: en el teléfono se queda en un tamaño que se lee y no se sale. */
  .tw td.m {
    font-size: 1.15rem;
  }

  .tw td:nth-child(2),
  .tw td:nth-child(3) {
    text-align: right;
  }

  .tw th:nth-child(2),
  .tw th:nth-child(3) {
    text-align: right;
  }
}

/* Sólo en teléfonos muy estrechos (320-340 px) los datos van en una columna: a 360
   caben dos de 152 px. */
@media (max-width: 340px) {
  .hero .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Red de seguridad: una palabra larga (un correo, una dirección) no debe empujar la
   página de lado. */
body {
  overflow-wrap: break-word;
}

/* Antetítulo de una página interior: pequeño, en versalitas y en oro. */
.sobre {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 6px;
}

/* La página de "Nosotros" reutiliza la rejilla de la esencia, que ya se apila en
   el teléfono; sólo necesita aire arriba porque no lleva el hero de la portada. */
.esencia.dk .wrap.grid {
  padding-top: clamp(96px, 14vw, 140px);
  padding-bottom: clamp(40px, 8vw, 80px);
}

/* --- menú del panel: grupos con submenú --- */

/* El disparador del grupo es un botón, no un enlace: se limpia lo que el navegador
   le pone por su cuenta para que se vea igual que los demás enlaces. */
header nav .grupo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: #fff;
  opacity: 0.9;
  cursor: pointer;
}

header nav .grupo-toggle:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--oro);
}

/* El botón de salir vive dentro de un formulario y dentro del submenú: se limpia
   para que se vea como un enlace más, no como un botón del navegador. */
header nav button.nl {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: #fff;
  text-align: left;
  cursor: pointer;
  opacity: 0.9;
}

header nav button.nl:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--oro);
}

header nav .submenu form.sin-caja {
  width: 100%;
  margin: 0;
}

header nav .flecha {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

header nav .grupo.abierto .flecha {
  transform: rotate(180deg);
}

/* El submenú: en el escritorio cuelga de su grupo; en el teléfono se despliega dentro
   del menú, que ya está en columna. */
header nav .submenu {
  display: none;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 901px) {
  header nav .grupo {
    position: relative;
  }

  header nav .submenu {
    position: absolute;
    top: calc(100% + 14px);
    left: -14px;
    min-width: 200px;
    padding: 6px;
    background: rgba(14, 42, 26, 0.99);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
    z-index: 60;
  }

  /* El hueco entre el grupo y el submenú también cuenta como submenú: si no, al bajar
     el ratón hacia las opciones se sale de la zona y el menú se cierra solo, que es
     justo lo que pasaba. El puente es invisible y sólo sirve para no perder el ratón. */
  header nav .submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
  }

  /* Se abre al pasar el ratón, al llegar con el teclado y al pulsarlo. */
  header nav .grupo:hover .submenu,
  header nav .grupo:focus-within .submenu,
  header nav .grupo.abierto .submenu {
    display: flex;
  }

  header nav .submenu .nl {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  header nav .submenu .nl:last-child,
  header nav .submenu form.sin-caja .nl {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  header nav .grupo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  header nav .grupo-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 13px 12px;
    font-size: 0.95rem;
  }

  header nav .grupo.abierto .submenu {
    display: flex;
  }

  /* Sangría para que se vea que los enlaces cuelgan del grupo. */
  header nav .submenu {
    padding-left: 14px;
    background: rgba(0, 0, 0, 0.18);
  }

  header nav .submenu .nl {
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.92rem;
  }

  header nav .submenu form.sin-caja {
    width: 100%;
  }
}

/* --- formulario de usuario: rol y permisos --- */

/* Los permisos son varios y con descripción: dos columnas cuando caben. */
.rejilla-permisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 22px;
  margin-top: 6px;
}

.rejilla-permisos .check {
  align-items: flex-start;
}

.rejilla-permisos code {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--fg);
}

fieldset.permisos {
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 16px 14px;
  margin: 2px 0 14px;
  display: grid;
  gap: 8px;
}

fieldset.permisos legend {
  padding: 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* Lo que sólo tiene sentido en la ficha del teléfono: en el escritorio esa misma
   información ya está en su columna. */
.solo-movil {
  display: none;
}

/* --- los listados del panel en el teléfono: una ficha de dos líneas --- */

/*
 * Las tablas del panel tienen seis, ocho o nueve columnas: no caben en un teléfono.
 * Por debajo de 700px cada fila se convierte en una ficha de dos líneas, con la
 * entidad y su estado arriba y los datos con el botón de acción abajo. Cada listado
 * declara sus propias áreas y esconde las columnas que no aportan en esa ficha (siguen
 * en el detalle y en la tabla del escritorio).
 *
 * El mismo HTML sirve para las dos vistas; las etiquetas de la segunda línea salen de
 * data-etiqueta.
 */
@media (max-width: 700px) {
  .tabla-ficha thead {
    display: none;
  }

  /* Hay una regla general de móvil que fuerza 390px de ancho mínimo en todas las
     tablas para que se puedan desplazar; en las fichas sobra y rompe la maquetación. */
  .tabla-ficha,
  .tabla-ficha tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .tabla-ficha tr {
    display: grid;
    align-items: center;
    gap: 5px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
  }

  .tabla-ficha tr:last-child {
    border-bottom: 0;
  }

  .tabla-ficha td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .tabla-ficha .solo-escritorio {
    display: none;
  }

  .tabla-ficha .solo-movil {
    display: inline;
  }

  /* La etiqueta de la segunda línea, en pequeño delante del valor. */
  .tabla-ficha td[data-etiqueta]::before {
    content: attr(data-etiqueta) " ";
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg2);
  }

  /* La ficha no necesita la caja que desplaza: cabe sin scroll. */
  .panel .caja:has(.tabla-ficha) {
    overflow-x: visible;
    padding: 4px 14px;
  }

  .tabla-ficha .celda-nombre,
  .tabla-ficha .celda-folio,
  .tabla-ficha .celda-usuario {
    overflow-wrap: anywhere;
  }

  .tabla-ficha .celda-estado {
    text-align: right;
  }

  /* Los botones de una ficha se reparten en su hueco: en un teléfono estrecho dos
     botones seguidos no pueden quedarse con toda la línea. */
  .tabla-ficha .celda-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
  }

  /* El porcentaje va debajo del importe, no al lado: así la celda de pagado no se
     come el hueco del saldo. */
  .tabla-ventas .celda-pagado .sub {
    display: block;
  }

  .tabla-ficha .celda-fecha,
  .tabla-ficha .celda-telefono,
  .tabla-ficha .celda-wa,
  .tabla-ficha .celda-altas,
  .tabla-ficha .celda-vendidos,
  .tabla-ficha .celda-area,
  .tabla-ficha .celda-precio,
  .tabla-ficha .celda-pagado,
  .tabla-ficha .celda-saldo,
  .tabla-ficha .celda-mora,
  .tabla-ficha .celda-canales,
  .tabla-ficha .celda-repes,
  .tabla-ficha .celda-acceso,
  .tabla-ficha .celda-creado,
  .tabla-ficha .celda-ventas {
    font-size: 0.76rem;
  }

  /* --- prospectos: nombre y estado / fecha, teléfono y Abrir --- */
  .tabla-prospectos tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "nombre nombre estado"
      "fecha  wa     acciones";
  }
  .tabla-prospectos .celda-nombre {
    grid-area: nombre;
  }
  .tabla-prospectos .celda-estado {
    grid-area: estado;
  }
  .tabla-prospectos .celda-fecha {
    grid-area: fecha;
  }
  .tabla-prospectos .celda-wa {
    grid-area: wa;
  }
  .tabla-prospectos .celda-acciones {
    grid-area: acciones;
  }

  /* --- clientes: nombre y estado / teléfono, ventas y botones --- */
  .tabla-clientes tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "nombre   nombre estado"
      "telefono ventas acciones";
  }
  .tabla-clientes .celda-nombre {
    grid-area: nombre;
  }
  .tabla-clientes .celda-estado {
    grid-area: estado;
  }
  .tabla-clientes .celda-telefono {
    grid-area: telefono;
  }
  .tabla-clientes .celda-ventas {
    grid-area: ventas;
  }
  .tabla-clientes .celda-acciones {
    grid-area: acciones;
  }

  /* --- secciones: nombre y avance / altas, vendidos y botones --- */
  .tabla-secciones tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nombre etapas"
      "altas  acciones";
  }
  .tabla-secciones .celda-nombre {
    grid-area: nombre;
  }
  /* La columna de etapas: en la ficha va al lado del nombre. */
  .tabla-secciones .celda-etapas {
    grid-area: etapas;
    font-size: 0.76rem;
    text-align: right;
  }
  .tabla-secciones .celda-altas {
    grid-area: altas;
  }
  .tabla-secciones .celda-vendidos {
    grid-area: vendidos;
  }
  .tabla-secciones .celda-acciones {
    grid-area: acciones;
  }

  /* --- terrenos: nombre y estado / área, precio y Editar --- */
  .tabla-terrenos tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "nombre nombre estado"
      "area   precio acciones";
  }
  .tabla-terrenos .celda-nombre {
    grid-area: nombre;
  }
  .tabla-terrenos .celda-estado {
    grid-area: estado;
  }
  .tabla-terrenos .celda-area {
    grid-area: area;
  }
  .tabla-terrenos .celda-precio {
    grid-area: precio;
  }
  .tabla-terrenos .celda-acciones {
    grid-area: acciones;
  }

  /* --- ventas: folio y cliente / pagado, saldo y Ver --- */
  .tabla-ventas tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "folio  folio estado"
      "pagado saldo acciones";
  }
  .tabla-ventas .celda-folio {
    grid-area: folio;
  }
  .tabla-ventas .celda-estado {
    grid-area: estado;
  }
  .tabla-ventas .celda-pagado {
    grid-area: pagado;
  }
  .tabla-ventas .celda-saldo {
    grid-area: saldo;
  }
  .tabla-ventas .celda-mora {
    grid-area: mora;
  }
  .tabla-ventas .celda-acciones {
    grid-area: acciones;
  }

  /* --- trabajos: nombre y estado / envío, veces y Ver --- */
  .tabla-trabajos tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "nombre  nombre estado"
      "canales repes  acciones";
  }
  .tabla-trabajos .celda-nombre {
    grid-area: nombre;
  }
  .tabla-trabajos .celda-estado {
    grid-area: estado;
  }
  .tabla-trabajos .celda-canales {
    grid-area: canales;
  }
  .tabla-trabajos .celda-repes {
    grid-area: repes;
  }
  .tabla-trabajos .celda-acciones {
    grid-area: acciones;
  }

  /* --- bitácora: cuándo y quién / acción y qué / el detalle --- */
  .tabla-bitacora tr {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "cuando  quien"
      "accion  que"
      "detalle detalle";
    row-gap: 7px;
  }
  .tabla-bitacora .celda-cuando {
    grid-area: cuando;
    font-size: 0.72rem;
    color: var(--fg2);
    white-space: nowrap;
  }
  .tabla-bitacora .celda-quien {
    grid-area: quien;
    overflow-wrap: anywhere;
  }
  .tabla-bitacora .celda-accion {
    grid-area: accion;
  }
  .tabla-bitacora .celda-que {
    grid-area: que;
    display: block;
    font-size: 0.8rem;
    color: var(--fg2);
    text-align: right;
  }
  /* La frase va en su propio renglón, separada por una línea fina. */
  .tabla-bitacora .celda-detalle {
    grid-area: detalle;
    font-size: 0.84rem;
    line-height: 1.45;
    padding-top: 7px;
    border-top: 1px solid var(--linea);
  }

  /* --- regiones del mapa: nombre y forma / coordenadas y Editar --- */
  .tabla-regiones tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nombre  forma"
      "coords  acciones";
  }
  .tabla-regiones .celda-nombre {
    grid-area: nombre;
  }
  .tabla-regiones .celda-forma {
    grid-area: forma;
    font-size: 0.76rem;
  }
  .tabla-regiones .celda-coords {
    grid-area: coords;
    display: block;
    min-width: 0;
    font-size: 0.7rem;
    overflow-wrap: anywhere;
  }
  .tabla-regiones .celda-acciones {
    grid-area: acciones;
  }

  /* --- etapas: nombre y secciones / orden y Editar --- */
  .tabla-etapas tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nombre  nombre"
      "secciones acciones";
  }
  .tabla-etapas .celda-nombre {
    grid-area: nombre;
  }
  .tabla-etapas .celda-secciones {
    grid-area: secciones;
    font-size: 0.76rem;
  }
  .tabla-etapas .celda-acciones {
    grid-area: acciones;
  }

  /* --- usuarios: usuario y rol / acceso, alta y Editar --- */
  .tabla-usuarios tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "usuario rol    estado"
      "acceso  creado acciones";
  }
  .tabla-usuarios .celda-usuario {
    grid-area: usuario;
  }
  .tabla-usuarios .celda-rol {
    grid-area: rol;
    text-align: right;
  }
  .tabla-usuarios .celda-estado {
    grid-area: estado;
  }
  .tabla-usuarios .celda-acceso {
    grid-area: acceso;
  }
  .tabla-usuarios .celda-creado {
    grid-area: creado;
  }
  .tabla-usuarios .celda-acciones {
    grid-area: acciones;
  }

  /* En el teléfono la primera línea es usuario, rol y estado; el recuento de
     permisos sólo estorba ahí (sigue en la ficha del usuario). */
  .tabla-usuarios .celda-rol .sub {
    display: none;
  }
}

/* En pantallas muy estrechas, un poco más pequeño y etiquetas cortas para que la
   segunda línea no parta los datos en trozos. */
@media (max-width: 380px) {
  .tabla-ficha tr {
    column-gap: 7px;
  }

  .tabla-ficha .celda-fecha,
  .tabla-ficha .celda-telefono,
  .tabla-ficha .celda-wa,
  .tabla-ficha .celda-altas,
  .tabla-ficha .celda-vendidos,
  .tabla-ficha .celda-area,
  .tabla-ficha .celda-precio,
  .tabla-ficha .celda-pagado,
  .tabla-ficha .celda-saldo,
  .tabla-ficha .celda-mora,
  .tabla-ficha .celda-canales,
  .tabla-ficha .celda-repes,
  .tabla-ficha .celda-acceso,
  .tabla-ficha .celda-creado,
  .tabla-ficha .celda-ventas {
    font-size: 0.7rem;
  }

  .tabla-ficha td[data-corto]::before {
    content: attr(data-corto) " ";
  }

  .tabla-ficha td[data-etiqueta]::before {
    font-size: 0.62rem;
  }

  .tabla-ficha .btn-mini {
    padding: 3px 7px;
    font-size: 0.76rem;
  }
}

/* --- las tarjetas del panel, de dos en dos en el teléfono --- */

/*
 * En el escritorio caben las que quepan (auto-fit); en un teléfono, de una en una se
 * desaprovecha media pantalla. Por debajo de 700px van dos por fila, con el número y
 * los textos un poco más pequeños para que quepan de verdad, también los importes
 * largos de las tarjetas de dinero.
 */
@media (max-width: 700px) {
  .tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .tarjeta {
    padding: 14px;
  }

  .tarjeta .t-num {
    font-size: 2rem;
  }

  .tarjeta .t-lbl {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }

  .tarjeta .t-acc {
    margin-top: 6px;
    font-size: 0.85rem;
  }

  .tarjeta .t-estados {
    gap: 4px;
  }

  .tarjeta .t-estados .pill {
    padding: 2px 6px;
    font-size: 0.6rem;
  }

  /* Los importes son más largos que un recuento: bajan de cuerpo para no partirse. */
  .tarjeta.dato {
    padding: 12px;
  }

  .tarjeta.dato .t-num {
    font-size: 1.05rem;
  }

  .tarjeta.dato .sub {
    font-size: 0.7rem;
  }
}

/* --- regiones del mapa: la lista de coordenadas es muy larga --- */

/* Sin esto, una lista de coordenadas sin espacios ensancha la tabla entera y empuja
   los botones fuera de la pantalla. */
.tabla .coords {
  display: block;
  max-width: 32ch;
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --- el plano como tablero de terrenos --- */

/*
 * Cada terreno es un rectángulo con su nombre, su ubicación, su estado y el color de
 * su sección. El estado manda sobre el color: amarillo apartado, rosa mexicano
 * vendido, rojo liquidado; disponible es el color de la sección.
 */
.terrenos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.terreno {
  --color-seccion: var(--linea);
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px 16px 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-left: 6px solid var(--color-seccion);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-seccion) 18%, #fff);
  color: var(--fg);
}

.terreno-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.terreno h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.terreno .ubicacion {
  margin: 0;
  font-size: 0.84rem;
  color: var(--fg2);
}

.terreno .ubicacion .sub {
  display: block;
}

.terreno .reserva {
  margin: 0;
}

.terreno .datos {
  display: flex;
  gap: 18px;
  margin: 0;
}

.terreno .datos dt {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
}

.terreno .datos dd {
  margin: 0;
  font-size: 0.92rem;
}

.terreno-pie {
  display: flex;
  justify-content: flex-end;
}

/* El estado manda: apartado amarillo, vendido rosa mexicano, liquidado rojo. */
.terreno-apartado {
  background: #fdf0b4;
  border-left-color: #e0b700;
}

.terreno-vendido {
  background: #f7c0d8;
  border-left-color: #e4007c;
}

.terreno-liquidado {
  background: #f3bcbc;
  border-left-color: #b3001b;
}

/* --- panel: ventana modal para cobrar un pago --- */

dialog.modal {
  width: min(470px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--panel);
  color: var(--fg);
  box-shadow: 0 30px 80px rgba(20, 18, 15, 0.35);
  overflow: hidden;
}

dialog.modal[open] {
  animation: modal-aparece 0.18s ease-out;
}

@keyframes modal-aparece {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

dialog.modal::backdrop {
  background: rgba(20, 18, 15, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal-form {
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 34px);
  max-height: calc(100dvh - 34px);
  padding: clamp(20px, 4vw, 28px);
  overflow-y: auto;
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
}

.modal-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modal-eyebrow {
  margin: 0 0 2px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2);
}

.modal-cabecera h2 {
  font-size: clamp(1.6rem, 5vw, 2rem);
  line-height: 1.1;
}

.modal-cerrar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  color: var(--fg2);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.modal-cerrar:hover {
  border-color: var(--oro);
  color: var(--tierra);
}

.modal-resumen {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.modal-resumen dd {
  font-variant-numeric: tabular-nums;
}

.modal-resumen dd[data-pago-total] {
  font-weight: 500;
  color: var(--verde);
}

.modal-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.modal-campos label {
  font-size: 0.82rem;
}

.modal-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.modal-acciones .btn {
  padding: 11px 20px;
  font-size: 0.95rem;
}

/* El enlace que abre la ventana: un botón pequeño con el acento del dinero. */
.btn-mini.cobrar {
  border-color: var(--oro);
  color: var(--tierra);
}

.btn-mini.cobrar:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: #14170f;
}

.btn-mini.deshabilitado {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--fg2);
  background: var(--panel);
}

/* Una mensualidad que espera a que se cubra la anterior. */
.bloqueado {
  color: var(--fg2);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .modal-campos {
    grid-template-columns: 1fr;
  }

  .modal-acciones .btn {
    flex: 1 1 auto;
  }
}

/* --- pagos: cliente y estado / venta, pagado y acciones --- */

/* El botón que sustituye al calendario dentro de la ficha de la venta. */
.accion-pagos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.accion-pagos h3 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
}

.accion-pagos .nota {
  margin: 4px 0 0;
}

/* La etiqueta del filtro por lote que llega desde la ficha de la venta. */
.filtro-pagos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--oro);
  background: var(--panel);
  font-size: 0.92rem;
}

.tabla-pagos {
  font-size: 0.9rem;
}

.tabla-pagos th,
.tabla-pagos td {
  padding-left: 6px;
  padding-right: 6px;
}

.tabla-pagos .btn-mini {
  padding: 4px 9px;
  font-size: 0.8rem;
}

.tabla-pagos .celda-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.tabla-pagos .celda-concepto {
  white-space: nowrap;
}

.tabla-pagos .celda-folio {
  min-width: 140px;
}

.tabla-pagos .celda-nombre {
  min-width: 190px;
}

.tabla-pagos .celda-nombre .sub {
  overflow-wrap: anywhere;
}

.tabla-pagos .celda-nombre .sub:not(.solo-movil) {
  display: block;
}

/* Entre el teléfono y el escritorio ancho la tabla no cabe: cada pago se lee
   como una ficha y las acciones quedan siempre a la vista. */
@media (min-width: 701px) and (max-width: 1199px) {
  .tabla-pagos thead {
    display: none;
  }

  .tabla-pagos,
  .tabla-pagos tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .tabla-pagos tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nombre estado"
      "folio  acciones"
      "pagado pagado"
      "mora   mora";
    align-items: center;
    gap: 5px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
  }

  .tabla-pagos tr:last-child {
    border-bottom: 0;
  }

  .tabla-pagos td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .tabla-pagos .solo-escritorio {
    display: none;
  }

  .tabla-pagos .solo-movil {
    display: inline;
  }

  .tabla-pagos .celda-nombre {
    grid-area: nombre;
    min-width: 0;
  }

  .tabla-pagos .celda-estado {
    grid-area: estado;
    text-align: right;
  }

  .tabla-pagos .celda-folio {
    grid-area: folio;
    min-width: 0;
    overflow-wrap: normal;
  }

  .tabla-pagos .celda-pagado {
    grid-area: pagado;
    font-size: 0.8rem;
  }

  .tabla-pagos .celda-mora {
    grid-area: mora;
    font-size: 0.8rem;
  }

  .tabla-pagos .celda-acciones {
    grid-area: acciones;
  }

  .tabla-pagos td[data-etiqueta]::before {
    content: attr(data-etiqueta) " ";
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg2);
  }
}
.tabla-pagos .celda-pagado .sub {
  display: block;
}


@media (max-width: 700px) {
  .buscar-pagos .btn {
    width: 100%;
  }

  .accion-pagos {
    display: grid;
  }

  .accion-pagos .btn {
    width: 100%;
  }

  .tabla-pagos tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nombre estado"
      "folio  acciones"
      "pagado pagado"
      "mora   mora";
  }

  .tabla-pagos .celda-nombre {
    min-width: 0;
    grid-area: nombre;
  }

  .tabla-pagos .celda-estado {
    grid-area: estado;
  }

  .tabla-pagos .celda-folio {
    min-width: 0;
    overflow-wrap: normal;
    grid-area: folio;
  }

  .tabla-pagos .celda-folio .sub {
    display: block;
  }

  .tabla-pagos .celda-pagado {
    grid-area: pagado;
  }

  .tabla-pagos .celda-mora {
    grid-area: mora;
  }

  .tabla-pagos .celda-acciones {
    grid-area: acciones;
  }
}

/* --- importar terrenos --- */

.import-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.import-hoja {
  margin-top: 22px;
}

.import-hoja-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.import-hoja-cabecera h2 {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
}

.import-on {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.import-on select {
  width: auto;
  min-width: 80px;
}

.import-destino {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 640px;
  margin: 14px 0;
}

.import-destino label {
  font-size: 0.82rem;
}

.caja-tabla {
  overflow-x: auto;
}

.tabla-import {
  min-width: 760px;
  font-size: 0.9rem;
}

.tabla-import .celda-error {
  max-width: 320px;
  color: #7d3a2b;
}

.tabla-import tr.fila-error td {
  background: #fbeeea;
}

.tabla-import-campos td {
  vertical-align: top;
}

.tabla-import-campos code {
  display: block;
  font-size: 0.82rem;
}

@media (max-width: 700px) {
  .import-destino {
    grid-template-columns: 1fr;
  }

  .import-acciones .btn {
    width: 100%;
  }
}

.import-modo {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.import-modo legend {
  padding: 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
}

.import-modo label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--fg);
}

.import-modo input[type="radio"] {
  width: auto;
  margin: 0;
}

.import-modo .nota {
  margin: 4px 0 0;
}

.import-reset {
  margin: 0 0 18px;
}

.import-reset h2 {
  font-size: clamp(1.3rem, 3vw, 1.60rem);
}

.import-reset label {
  display: grid;
  gap: 6px;
  max-width: 320px;
  margin-top: 10px;
  color: var(--fg);
}

.import-reset input[type="password"] {
  width: 100%;
}

.tabla-import {
  min-width: 880px;
}