/* ==========================================================================
   Altaria Desarrollos — hoja de estilo
   Paleta y tipografía tomadas del manual de marca:
     Negro Azabache Mate  #0D0D0D   fondo dominante
     Gris Grafito         #1E1E1E   bloques y contraste secundario
     Dorado Champagne     #C19B62   acento, isotipo y titulares
     Blanco Marfil        #F9F9F6   cuerpo de lectura
   Tipografías: Cinzel para titulares (mayúsculas, tracking amplio),
   Inter para el cuerpo.
   ========================================================================== */

:root {
  --negro: #0d0d0d;
  --grafito: #1e1e1e;
  --oro: #c19b62;
  --oro-claro: #d9bb8a;
  --marfil: #f9f9f6;
  --gris-texto: #a8a5a0;
  --borde: rgba(193, 155, 98, 0.22);

  --titulo: "Cinzel", Georgia, "Times New Roman", serif;
  --cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho: 1180px;
  --radio: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--oro);
  text-decoration: none;
}

/* ------------------------------- tipografía ------------------------------ */

h1,
h2,
h3 {
  font-family: var(--titulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  letter-spacing: 0.1em;
}

h2 {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
}

h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}

.entrada {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--oro);
  margin: 0 0 1.1rem;
  font-weight: 500;
}

.entrada::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--oro);
  margin-top: 0.85rem;
  opacity: 0.65;
}

.entrada--centrada::after {
  margin-left: auto;
  margin-right: auto;
}

p {
  margin: 0 0 1.1em;
  color: var(--gris-texto);
}

/* Un titular de dos líneas reparte mejor el peso entre ambas. En un párrafo
   largo el balanceo perjudica, así que solo se aplica a los encabezados. */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* ------------------------------ foco visible ----------------------------- */
/*
 * Un solo anillo para toda la página.
 *
 * Antes, los enlaces de navegación, los botones y el logotipo no tenían
 * ninguna regla de foco: quien navega con teclado pulsaba Tab y no veía
 * dónde estaba. Los únicos campos con foco lo conseguían apagando el
 * contorno del navegador, que es justo lo contrario.
 *
 * Se usa `outline` y no `box-shadow` a propósito: el modo de alto contraste
 * del sistema conserva y recolorea el contorno, pero descarta las sombras.
 * El desplazamiento de 3px aleja el anillo de los botones dorados, donde un
 * anillo dorado no se distinguiría; fuera del botón, sobre el fondo oscuro,
 * sí se ve.
 */
:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.centrado {
  text-align: center;
}

/* -------------------------------- estructura ----------------------------- */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}

section {
  padding: clamp(48px, 8vw, 96px) 0;
}

.seccion--grafito {
  background: var(--grafito);
}

.borde-oro {
  border-top: 1px solid var(--borde);
}

/* -------------------------------- cabecera ------------------------------- */

.cabecera {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 20px 0;
}

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

.cabecera img {
  height: 46px;
  width: auto;
}

.cabecera nav {
  display: flex;
  gap: 26px;
  align-items: center;
}

.cabecera nav a {
  color: var(--marfil);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
}

.cabecera nav a:hover {
  color: var(--oro);
  opacity: 1;
}

@media (max-width: 760px) {
  .cabecera nav {
    display: none;
  }
  .cabecera img {
    height: 36px;
  }
}

/* --------------------------------- héroe --------------------------------- */

.heroe {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 130px 0 70px;
  overflow: hidden;
  background: var(--negro);
}

.heroe__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.heroe__media img,
.heroe__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo oscuro: garantiza que el texto se lea sobre cualquier fotografía. */
.heroe__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.82) 0%,
    rgba(13, 13, 13, 0.62) 45%,
    rgba(13, 13, 13, 0.94) 100%
  );
}

.heroe .envoltura {
  position: relative;
  z-index: 1;
}

.heroe__caja {
  max-width: 760px;
}

/* Hueco reservado para la fotografía o el vídeo de dron.
   Va como etiqueta discreta en la esquina inferior: si se centrara, quedaría
   por debajo del titular y el texto se solaparía. */
.media-pendiente {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 13, 13, 0.72);
  border: 1px dashed rgba(193, 155, 98, 0.4);
  border-radius: var(--radio);
  padding: 8px 14px;
  /* #6d6963 medía 3.56:1 sobre el fondo, por debajo del mínimo de 4.5:1, y a
     0.62rem el texto quedaba por debajo de cualquier suelo tipográfico. Este
     marcador desaparece cuando se sustituya por el vídeo real, pero mientras
     esté en la página tiene que poder leerse. */
  color: var(--gris-texto);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  max-width: calc(100% - 28px);
  z-index: 1;
}

.media-pendiente strong {
  color: var(--oro);
  font-weight: 500;
  white-space: nowrap;
}

.media-pendiente span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .media-pendiente span {
    display: none;
  }
}

/* ------------------------------- mensualidad ----------------------------- */

.mensualidad {
  margin: 26px 0 30px;
  padding: 22px 26px;
  border-left: 2px solid var(--oro);
  background: rgba(255, 255, 255, 0.035);
}

.mensualidad__etiqueta {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--oro);
  margin-bottom: 6px;
}

.mensualidad__cifra {
  font-family: var(--titulo);
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  color: var(--marfil);
  line-height: 1;
  letter-spacing: 0.02em;
}

.mensualidad__cifra small {
  font-size: 0.42em;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
}

.mensualidad__nota {
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin: 10px 0 0;
}

/* --------------------------------- botones ------------------------------- */

.boton {
  display: inline-block;
  padding: 15px 38px;
  border: 1px solid var(--oro);
  background: var(--oro);
  color: var(--negro);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  border-radius: var(--radio);
}

.boton:hover {
  background: transparent;
  color: var(--oro);
}

.boton--fantasma {
  background: transparent;
  color: var(--oro);
}

.boton--fantasma:hover {
  background: var(--oro);
  color: var(--negro);
}

.boton--ancho {
  width: 100%;
  text-align: center;
}

/* --------------------------------- rejillas ------------------------------ */

.rejilla {
  display: grid;
  gap: 26px;
}

.rejilla--2 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.rejilla--3 {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.tarjeta {
  padding: 30px 26px;
  background: var(--grafito);
  border: 1px solid transparent;
  border-top: 2px solid var(--oro);
}

.tarjeta h3 {
  margin-bottom: 0.5em;
}

.tarjeta p:last-child {
  margin-bottom: 0;
}

/* ------------------------------- confianza ------------------------------- */

.confianza {
  border: 1px solid var(--borde);
  padding: 34px 30px;
  background: rgba(193, 155, 98, 0.04);
}

.lista-marcas {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.lista-marcas li {
  padding-left: 30px;
  position: relative;
  color: var(--marfil);
}

.lista-marcas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--oro);
}

/* ------------------------------- calculador ------------------------------ */

.calculador {
  border: 1px solid var(--borde);
  background: var(--grafito);
  padding: clamp(24px, 4vw, 40px);
}

/* Los tres datos del hero: superficie, contado y plazo.
   Son pares de etiqueta y valor, no secciones del documento. Antes iban
   marcados como <h3>, lo que rompía el índice de encabezados: la página
   saltaba de <h1> a <h3> sin ningún <h2> entre medias, y quien navega por
   encabezados con un lector de pantalla recibía un esquema roto. */
.datos-clave {
  margin: 0;
}

.datos-clave dt {
  margin: 0 0 0.5rem;
}

.datos-clave dd {
  margin: 0;
  color: var(--oro);
  font-family: var(--titulo);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: 0.04em;
}

.calculador__campos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 26px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 170px;
  flex: 1 1 170px;
}

.campo label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gris-texto);
}

.campo input,
.campo select {
  padding: 13px 14px;
  background: var(--negro);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--marfil);
  font-family: var(--cuerpo);
  font-size: 1rem;
  border-radius: var(--radio);
}

/* El borde dorado es un refuerzo del anillo, no su sustituto: el anillo lo
   aporta la regla :focus-visible general. Antes esto era `outline: none` con
   un cambio de borde de 1px, por debajo del perímetro de 2px que hace falta. */
.campo input:focus-visible,
.campo select:focus-visible {
  border-color: var(--oro);
}

.tabla-envoltura {
  overflow-x: auto;
  margin-top: 8px;
}

table.planes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 480px;
}

table.planes th {
  text-align: left;
  padding: 12px 14px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--oro);
  border-bottom: 1px solid var(--borde);
  font-weight: 500;
  white-space: nowrap;
}

table.planes td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--marfil);
  white-space: nowrap;
}

table.planes tr.destacada {
  background: rgba(193, 155, 98, 0.09);
}

table.planes tr.destacada td:first-child {
  border-left: 2px solid var(--oro);
}

/* Las filas de la tabla son seleccionables con el ratón. Un atajo que solo
   existe para el ratón es un atajo a medias, así que `calculador.js` las hace
   además alcanzables con Tab (tabindex móvil, el patrón de widget compuesto)
   y activables con Enter o Espacio. El cursor las anuncia; el anillo las
   sitúa. */
table.planes tbody tr {
  cursor: pointer;
}

table.planes tbody tr:focus-visible {
  /* Hacia dentro: un anillo por fuera se montaría sobre la fila vecina. */
  outline: 2px solid var(--oro-claro);
  outline-offset: -2px;
}

@media (hover: hover) {
  table.planes tbody tr:hover {
    background: rgba(193, 155, 98, 0.06);
  }
}

table.planes td.mensual {
  font-family: var(--titulo);
  font-size: 1.12rem;
  color: var(--oro);
}

table.planes .sobreprecio {
  color: var(--gris-texto);
  font-size: 0.86rem;
}

/* --------------------------------- mapa ---------------------------------- */

.mapa {
  width: 100%;
  height: clamp(320px, 46vw, 460px);
  margin-top: 30px;
  border: 1px solid var(--borde);
  background: var(--negro);
}

/* Sin clave de API, el hueco del mapa se convierte en un enlace útil. */
.mapa__enlace {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 30px;
  color: var(--marfil);
  background: repeating-linear-gradient(
    45deg,
    #131313,
    #131313 16px,
    #171717 16px,
    #171717 32px
  );
  border-left: 2px solid var(--oro);
}

.mapa__enlace:hover {
  background: #191919;
}

.mapa__enlace strong {
  display: block;
  color: var(--oro);
  font-weight: 500;
  margin-bottom: 4px;
}

.mapa__enlace small {
  color: var(--gris-texto);
  font-size: 0.82rem;
}

.mapa__pin {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--oro);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* ------------------------------ plano de lotes --------------------------- */

/*
 * El plano se dibuja con la geometría real del desarrollo: mismas filas y
 * columnas que el plano de lotificación. Las celdas mantienen su forma
 * independientemente del ancho de la pantalla, porque la rejilla se define en
 * columnas fijas y no con auto-ajuste.
 */

.plano {
  margin: 26px 0 0;
}

.plano__calle {
  padding: 9px 16px;
  border: 1px dashed rgba(193, 155, 98, 0.35);
  border-bottom: none;
  color: var(--oro);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(193, 155, 98, 0.05);
}

.plano__rejilla {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.02);
  overflow-x: auto;
  /* El plano se centra: un desarrollo de dos columnas es alto y estrecho, y
     estirado a todo el ancho quedaría con celdas absurdamente grandes. */
  justify-content: center;
}

.plano__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--gris-texto);
}

.plano__pie span::before {
  content: "— ";
  color: var(--oro);
}

.lote {
  /*
   * Alto fijo y ancho acotado. Sin esto, la proporción del lote multiplicada
   * por 15 filas produce celdas de más de 500 px y un plano imposible de ver
   * de un vistazo, que es justo lo contrario de para lo que sirve.
   */
  height: 40px;
  min-width: 0;
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--marfil);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radio);
}

@media (max-width: 640px) {
  .plano__rejilla {
    gap: 3px;
    padding: 8px;
  }
  .lote {
    height: 30px;
    font-size: 0.6rem;
  }
}

/* ------------------------------ plano de lotes --------------------------- */

/* --------------------------------- mapa ---------------------------------- */

.lote--disponible {
  border-color: rgba(193, 155, 98, 0.55);
}

.lote--apartado {
  background: rgba(193, 155, 98, 0.22);
  border-color: var(--oro);
  color: var(--oro);
}

.lote--vendido {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
  color: #5c5955;
  text-decoration: line-through;
}

.leyenda {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--gris-texto);
  margin-bottom: 4px;
}

.leyenda span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leyenda i {
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.leyenda i.d {
  border-color: var(--oro);
}
.leyenda i.a {
  background: rgba(193, 155, 98, 0.35);
  border-color: var(--oro);
}
.leyenda i.v {
  background: rgba(255, 255, 255, 0.06);
}

.contador-disponibles {
  font-family: var(--titulo);
  font-size: 1.05rem;
  color: var(--oro);
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}

/* -------------------------------- formulario ----------------------------- */

.formulario {
  display: grid;
  gap: 14px;
}

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

.aviso {
  font-size: 0.8rem;
  color: var(--gris-texto);
  margin: 4px 0 0;
}

.respuesta {
  padding: 16px 18px;
  border-left: 2px solid var(--oro);
  background: rgba(193, 155, 98, 0.08);
  font-size: 0.92rem;
  margin-top: 16px;
  display: none;
}

.respuesta.visible {
  display: block;
}

.respuesta.error {
  border-left-color: #b4543f;
  background: rgba(180, 84, 63, 0.1);
}

/* --------------------------------- pie ----------------------------------- */

.pie {
  padding: 46px 0 34px;
  border-top: 1px solid var(--borde);
  font-size: 0.84rem;
  color: var(--gris-texto);
}

.pie img {
  height: 44px;
  width: auto;
  margin-bottom: 18px;
}

.pie__enlaces {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.pie__legal {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  line-height: 1.7;
  /* #6f6c67 medía 3.72:1 sobre el fondo, por debajo del 4.5:1 que exige el
     texto de cuerpo: los avisos legales eran lo menos legible de la página.
     El token del proyecto sube a 7.53:1. */
  color: var(--gris-texto);
}

.pie__legal p {
  color: inherit;
  font-size: inherit;
}

/* --------------------------------- utilidad ------------------------------ */

.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}