/* =========================================================
   Ursula Castro · Abogada y agente inmobiliario
   Colores: verde y beige. Letra de lectura: Atkinson
   Hyperlegible (diseñada para personas con baja visión).
   ========================================================= */

:root {
  /* Verdes */
  --verde-900: #142A1F;
  --verde-800: #1A3327;
  --verde-700: #2B5240;
  --verde-600: #386650;
  --verde-100: #DDE6DA;
  /* Beiges */
  --beige-50:  #FBF8F2;
  --beige-100: #F5EEE2;
  --beige-200: #EADFCB;
  --beige-300: #D9C7A6;
  /* Texto */
  --tinta: #1C2A22;
  --tinta-suave: #4A5A50;
  --borde-campo: #7A7262;
  --error: #A3361F;
  /* WhatsApp (solo en el botón flotante) */
  --wa: #1DAA53;
  --wa-hover: #17914A;

  --foco: var(--verde-700);
  --radio: 16px;
  --sombra: 0 12px 32px rgba(20, 42, 31, 0.16);

  --letra-titulo: "Brygada 1918", Georgia, "Times New Roman", serif;
  --letra-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html {
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--letra-texto);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--beige-100);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--letra-titulo);
  color: var(--verde-800);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem); font-weight: 700; margin-bottom: 1rem; }
h3 { font-weight: 600; }
p { margin: 0 0 1rem; }

a { color: var(--verde-700); text-underline-offset: 0.18em; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--verde-800);
  color: var(--beige-50);
  font-weight: 700;
  border-radius: 10px;
}
.saltar:focus { top: 1rem; }

.contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.etiqueta {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.etiqueta--clara { color: var(--beige-300); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--letra-texto);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.boton:active { transform: translateY(1px); }
.boton--grande { min-height: 4rem; padding: 1rem 2rem; font-size: 1.25rem; }
.boton--ancho { width: 100%; }

.boton--crema { background: var(--beige-100); color: var(--verde-800); }
.boton--crema:hover { background: #fff; }
.boton--crema .icono-wa { color: #1FA552; }

.boton--verde { background: var(--verde-700); color: #fff; }
.boton--verde:hover { background: var(--verde-600); }

.boton--borde-claro { border-color: var(--beige-300); color: var(--beige-100); }
.boton--borde-claro:hover { background: rgba(245, 238, 226, 0.1); }

.icono-wa { width: 1.5em; height: 1.5em; flex: none; }

/* ---------- Cabecera y menú ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--beige-100);
  border-bottom: 1px solid var(--beige-200);
}
.cabecera__in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--tinta);
}
.marca__sello {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--verde-800);
  color: var(--beige-100);
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: inset 0 0 0 3px var(--verde-800), inset 0 0 0 4.5px var(--beige-300);
}
.marca__texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca__nombre { font-family: var(--letra-titulo); font-weight: 700; font-size: 1.3rem; color: var(--verde-800); }
.marca__rol { font-size: 0.9rem; color: var(--tinta-suave); }

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--verde-700);
  border-radius: 12px;
  background: transparent;
  color: var(--verde-800);
  font: 700 1.1rem var(--letra-texto);
  cursor: pointer;
}
.menu-boton__icono,
.menu-boton__icono::before,
.menu-boton__icono::after {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s, opacity 0.2s;
}
.menu-boton__icono { position: relative; }
.menu-boton__icono::before,
.menu-boton__icono::after { content: ""; position: absolute; left: 0; }
.menu-boton__icono::before { top: -7px; }
.menu-boton__icono::after { top: 7px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after { transform: translateY(-7px) rotate(-45deg); }

.menu { display: none; }
.menu.abierto {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--beige-50);
  border-bottom: 1px solid var(--beige-200);
  box-shadow: var(--sombra);
}
.menu__lista { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1.25rem; }
.menu__lista a {
  display: block;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--beige-200);
  color: var(--tinta);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.menu__lista a:hover { color: var(--verde-700); }
.menu__lista .menu__contacto {
  margin-top: 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--verde-700);
  color: #fff;
  text-align: center;
}

@media (min-width: 1360px) {
  .menu-boton { display: none; }
  .menu, .menu.abierto {
    display: block;
    position: static;
    max-height: none;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .menu__lista { display: flex; align-items: center; gap: 1.15rem; padding: 0; }
  .menu__lista a { padding: 0.5rem 0; border: 0; font-size: 0.98rem; white-space: nowrap; }
  .menu__lista a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
  .menu__lista .menu__contacto { margin: 0; padding: 0.7rem 1.25rem; }
  .menu__lista .menu__contacto:hover { background: var(--verde-600); color: #fff; text-decoration: none; }
}

/* ---------- 1. Portada ---------- */
.portada {
  --foco: var(--beige-300);
  color: var(--beige-100);
  /* El verde termina a mitad de las tarjetas de servicios */
  background: linear-gradient(to bottom, var(--verde-800) calc(100% - 4.5rem), var(--beige-50) calc(100% - 4.5rem));
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.portada__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2rem;
}
.portada__mini {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 0 3px var(--verde-800), 0 0 0 5px var(--beige-300);
}
.portada__titulo {
  color: var(--beige-50);
  font-weight: 700;
  font-size: clamp(2.9rem, 1.9rem + 4.2vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.portada__subtitulo {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--letra-texto);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--beige-300);
}
.portada__frase {
  margin: 1.5rem 0 0;
  max-width: 36ch;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  color: var(--beige-100);
}
.portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.portada__registro {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  color: var(--beige-300);
}
.portada__foto { display: none; margin: 0; }

@media (max-width: 599px) {
  .portada__botones .boton { width: 100%; }
  .portada__botones .boton--grande { padding: 1rem 1rem; font-size: 1.15rem; }
}

@media (min-width: 900px) {
  .portada__in {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: 3rem;
  }
  .portada__texto { padding-bottom: 3.5rem; }
  .portada__mini { display: none; }
  .portada__foto {
    display: block;
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 420px;
  }
  .portada__foto img {
    width: 100%;
    border-radius: 20px 20px 0 0;
    background: #fff;
  }
}

/* Sello: la firma visual de la página */
.sello {
  position: absolute;
  left: -70px;
  bottom: 48px;
  width: 160px;
  height: 160px;
  transform: rotate(-12deg);
  filter: drop-shadow(0 8px 18px rgba(20, 42, 31, 0.28));
}
/* Pantallas medianas: foto más angosta y sello más pequeño para no tapar los botones */
@media (min-width: 900px) and (max-width: 1179px) {
  .portada__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .sello { left: -24px; width: 136px; height: 136px; }
}
.sello__fondo { fill: var(--beige-100); }
.sello__aro { fill: none; stroke: var(--verde-700); stroke-width: 2.5; }
.sello__aro--fino { stroke-width: 1.25; stroke-dasharray: 2 3; }
.sello__curva { fill: var(--verde-800); font: 700 12.5px var(--letra-texto); letter-spacing: 0.06em; }
.sello__chico { fill: var(--verde-700); font: 700 9.5px var(--letra-texto); letter-spacing: 0.14em; }
.sello__numero { fill: var(--verde-800); font: 700 30px var(--letra-titulo); }

@media (prefers-reduced-motion: no-preference) {
  .sello { animation: sellar 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.4s both; }
  @keyframes sellar {
    from { opacity: 0; transform: rotate(-2deg) scale(1.4); }
    60%  { opacity: 1; transform: rotate(-13deg) scale(0.96); }
    to   { opacity: 1; transform: rotate(-12deg) scale(1); }
  }
}

/* Atajos a los tres servicios */
.atajos {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
}
.atajos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .atajos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.atajo {
  --foco: var(--verde-700);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--beige-50);
  color: var(--tinta);
  border: 1px solid var(--beige-200);
  border-top: 5px solid var(--verde-700);
  border-radius: 14px;
  box-shadow: var(--sombra);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.atajo:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 42, 31, 0.22); }
.atajo__titulo { font-family: var(--letra-titulo); font-weight: 700; font-size: 1.4rem; line-height: 1.15; color: var(--verde-800); }
.atajo__texto { font-size: 1.05rem; color: var(--tinta-suave); }
.atajo__ir { margin-top: auto; padding-top: 0.5rem; font-weight: 700; color: var(--verde-700); }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(4rem, 3rem + 4vw, 7rem) 0; background: var(--beige-100); }
.seccion--clara { background: var(--beige-50); }
.seccion--verde { --foco: var(--beige-300); background: var(--verde-800); color: var(--beige-100); }
.seccion--verde h2 { color: var(--beige-50); }

.encabezado { max-width: 48rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.encabezado__entrada { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); color: var(--tinta-suave); margin: 0; }

/* ---------- 2. Quién soy ---------- */
.quien { display: grid; gap: 2.5rem; align-items: center; }
.quien__foto { margin: 0; justify-self: center; width: min(100%, 360px); }
.quien__foto img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  /* Doble aro, como el sello */
  outline: 2px solid var(--verde-700);
  outline-offset: 10px;
}
.quien__historia { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem); line-height: 1.6; max-width: 46ch; }

.credenciales { display: grid; gap: 0.85rem; margin: 2rem 0 0; }
.credencial {
  padding: 0.9rem 1.25rem;
  border-left: 4px solid var(--beige-300);
  background: var(--beige-100);
  border-radius: 0 12px 12px 0;
}
.credencial dt { font-size: 0.95rem; font-weight: 700; color: var(--tinta-suave); }
.credencial dd { margin: 0.15rem 0 0; font-family: var(--letra-titulo); font-weight: 600; font-size: 1.35rem; color: var(--verde-800); }
.credencial--destacada { border-left-color: var(--verde-700); background: var(--verde-100); }
.credencial--destacada dd { font-size: 1.8rem; font-weight: 700; }

@media (min-width: 900px) {
  .quien { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 5rem; }
}

/* ---------- Servicios ---------- */
.ventaja {
  margin-bottom: 2rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--verde-700);
  color: var(--beige-100);
  border-radius: 20px;
}
.ventaja__titulo {
  color: var(--beige-50);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 700;
  margin-bottom: 1rem;
  max-width: 30ch;
}
.ventaja p { font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.7; max-width: 72ch; margin: 0; }

.servicios { display: grid; gap: 1.5rem; }
.servicio {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--beige-50);
  border: 1px solid var(--beige-200);
  border-radius: 20px;
}
.servicio__titulo { font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.3rem); font-weight: 700; }
.servicio__entrada { font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); color: var(--tinta-suave); margin: 1rem 0 0; }

.servicio__puntos { list-style: none; margin: 0; padding: 0; }
.servicio__puntos li {
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-top: 1px solid var(--beige-200);
  font-size: 1.1rem;
  line-height: 1.6;
}
.servicio__puntos li:first-child { border-top: 0; padding-top: 0.25rem; }
.servicio__puntos li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.55rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--verde-700);
  transform: rotate(45deg);
}
.servicio__puntos li:first-child::before { top: 0.8rem; }
.servicio__puntos strong { color: var(--verde-800); }

@media (max-width: 599px) {
  .servicio__pie .boton { width: 100%; }
}
@media (min-width: 900px) {
  .servicio {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas: "cabeza puntos" "cabeza pie";
    column-gap: 3.5rem;
    row-gap: 1.75rem;
  }
  .servicio__cabeza { grid-area: cabeza; }
  .servicio__puntos { grid-area: puntos; }
  .servicio__pie { grid-area: pie; }
}

/* ---------- 3. Cómo trabajo ---------- */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  counter-reset: paso;
  position: relative;
}
.paso { position: relative; padding-left: 4.75rem; }
.paso::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -0.2rem;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--verde-700);
  color: var(--beige-50);
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 0 0 6px var(--beige-50);
}
/* Línea que une los pasos */
.pasos::before {
  content: "";
  position: absolute;
  left: 1.7rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--beige-300);
}
.paso__titulo { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.paso p { margin: 0; font-size: 1.1rem; color: var(--tinta-suave); }

@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .paso { padding-left: 0; padding-top: 5rem; }
  /* La línea va del centro del primer círculo al centro del último */
  .pasos::before { left: 1.7rem; right: calc((100% - 6rem) / 4 - 1.7rem); top: 1.5rem; bottom: auto; width: auto; height: 2px; }
}

/* ---------- 4. Propiedades (desde Inmosan) ---------- */
.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ficha__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--beige-50);
  border: 1px solid var(--beige-200);
  border-radius: var(--radio);
  overflow: hidden;
  color: var(--tinta);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ficha__enlace:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.ficha__marco { position: relative; background: var(--beige-200); }
.ficha__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ficha__operacion {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--verde-800);
  color: var(--beige-50);
  font-size: 0.95rem;
  font-weight: 700;
}
.ficha__datos { display: flex; flex-direction: column; flex: 1; gap: 0.25rem; padding: 1.25rem 1.4rem 1.4rem; }
.ficha__precio { margin: 0; font-family: var(--letra-titulo); font-weight: 700; font-size: 1.75rem; line-height: 1.15; color: var(--verde-800); }
.ficha__tipo { margin: 0; font-size: 1.1rem; font-weight: 600; }
.ficha__lugar { margin: 0; font-size: 1.05rem; color: var(--tinta-suave); }
.ficha__ver { margin-top: auto; padding-top: 0.75rem; font-weight: 700; color: var(--verde-700); }

.aviso { margin: 0; padding: 1.5rem; background: var(--beige-50); border: 1px solid var(--beige-200); border-radius: var(--radio); font-size: 1.15rem; }
.aviso a { font-weight: 700; }

.vendidas { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.vendidas__titulo { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); margin-bottom: 1.5rem; }
.vendidas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.vendida { background: var(--beige-50); border: 1px solid var(--beige-200); border-radius: var(--radio); overflow: hidden; }
.vendida__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(0.35); }
.vendida__datos { padding: 0.9rem 1.1rem 1.1rem; }
.vendida__estado { margin: 0; font-weight: 700; color: var(--verde-700); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
.vendida__distrito { margin: 0.2rem 0 0; font-size: 1.1rem; }

/* ---------- 5. Zonas ---------- */
.zonas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.zona {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 1.5rem;
  background: var(--beige-100);
  border: 1px solid var(--beige-200);
  border-radius: var(--radio);
}
.zona::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50% 50% 50% 0;
  border: 3px solid var(--verde-700);
  transform: rotate(-45deg);
}
.zona__nombre { font-family: var(--letra-titulo); font-weight: 700; font-size: 1.6rem; line-height: 1.15; color: var(--verde-800); }
.zonas__nota { margin: 2rem 0 0; font-size: 1.15rem; }
.zonas__nota a { font-weight: 700; }

/* ---------- 6. Preguntas frecuentes ---------- */
.preguntas { display: grid; gap: 2rem 3.5rem; }
@media (min-width: 900px) {
  .preguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pregunta { padding-top: 1.5rem; border-top: 2px solid var(--beige-300); }
.pregunta h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem; }
.pregunta p { margin: 0; font-size: 1.1rem; line-height: 1.7; }

/* ---------- 7. Contacto ---------- */
.contacto { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
}
.contacto__entrada { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); margin-bottom: 2rem; }

.formulario {
  --foco: var(--verde-700);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--beige-50);
  color: var(--tinta);
  border-radius: 20px;
}
.campo { margin-bottom: 1.25rem; }
.campo label { display: block; margin-bottom: 0.4rem; font-size: 1.15rem; font-weight: 700; }
.campo input {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--borde-campo);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font: 1.15rem var(--letra-texto);
}
.campo input::placeholder { color: #8A8274; }
.campo input:focus { border-color: var(--verde-700); }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo__error { margin: 0.35rem 0 0; min-height: 0; font-size: 1rem; font-weight: 700; color: var(--error); }
.campo__error:empty { display: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__estado { margin: 1rem 0 0; font-size: 1.1rem; font-weight: 700; }
.formulario__estado:empty { display: none; }
.formulario__estado.ok { color: var(--verde-700); }
.formulario__estado.error { color: var(--error); }
.formulario button[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- 8. Pie ---------- */
.pie {
  --foco: var(--beige-300);
  background: var(--verde-900);
  color: var(--beige-200);
  padding: 4rem 0 7rem;
  font-size: 1.05rem;
}
.pie p { margin: 0 0 0.4rem; }
.pie a { color: var(--beige-50); overflow-wrap: anywhere; }
.pie__in { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
  .pie__in { grid-template-columns: 1fr 1fr; }
}
.pie__nombre { font-family: var(--letra-titulo); font-weight: 700; font-size: 1.8rem; color: var(--beige-50); }
.pie__titulo { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beige-300); }
.pie__redes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pendiente { opacity: 0.7; font-style: italic; }
.pie__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(217, 199, 166, 0.25); font-size: 0.95rem; }

/* ---------- 9. Botón flotante de WhatsApp ---------- */
.flotante {
  --foco: var(--verde-800);
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: background-color 0.2s, transform 0.2s;
}
.flotante svg { width: 2.1rem; height: 2.1rem; }
.flotante:hover { background: var(--wa-hover); transform: translateY(-2px); }
.flotante__texto { display: none; }
@media (min-width: 768px) {
  .flotante {
    right: 1.5rem;
    bottom: 1.5rem;
    width: auto;
    height: 3.75rem;
    padding: 0 1.4rem 0 1.1rem;
    border-radius: 999px;
  }
  .flotante__texto { display: inline; font-size: 1.2rem; font-weight: 700; }
}

/* ---------- Perfil de Inmosan en "Quién soy" ---------- */
.quien__nombre { margin: -0.25rem 0 0.35rem; font-family: var(--letra-titulo); font-weight: 600; font-size: 1.45rem; color: var(--verde-700); }
.quien__presentacion { margin: 0 0 1.25rem; font-size: 1.15rem; font-weight: 600; color: var(--tinta-suave); }
.redes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.redes__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--verde-700);
  border-radius: 12px;
  color: var(--verde-800);
  font-weight: 700;
  text-decoration: none;
}
.redes__enlace:hover { background: var(--verde-100); }

/* ---------- Sello "Agente verificado por Inmosan" ---------- */
.sello-inmosan {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.85rem 1.25rem 0.85rem 1rem;
  border: 2px solid var(--verde-700);
  border-radius: 14px;
  background: var(--beige-50);
  color: var(--verde-800);
  text-decoration: none;
  transition: background-color 0.2s;
}
.sello-inmosan:hover { background: var(--verde-100); }
.sello-inmosan__icono { grid-row: span 2; width: 2.25rem; height: 2.25rem; color: var(--verde-700); }
.sello-inmosan__texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; font-size: 1.05rem; line-height: 1.3; }
.sello-inmosan__sep { color: var(--beige-300); font-weight: 700; }
.sello-inmosan__accion { font-weight: 700; color: var(--verde-700); text-decoration: underline; text-underline-offset: 0.18em; }
.sello-inmosan__codigo { font-size: 0.92rem; color: var(--tinta-suave); }
.pie .sello-inmosan { background: transparent; border-color: var(--beige-300); color: var(--beige-50); }
.pie .sello-inmosan:hover { background: rgba(245, 238, 226, 0.08); }
.pie .sello-inmosan__icono, .pie .sello-inmosan__accion { color: var(--beige-300); }
.pie .sello-inmosan__codigo { color: var(--beige-200); }
.pie__escribeme { font-weight: 700; }

/* ---------- Ventana del formulario ---------- */
.dialogo {
  width: min(100% - 2rem, 34rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--beige-50);
  color: var(--tinta);
  box-shadow: 0 24px 60px rgba(20, 42, 31, 0.35);
}
.dialogo::backdrop { background: rgba(20, 42, 31, 0.6); }
.dialogo__caja { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.dialogo__cerrar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--beige-300);
  border-radius: 10px;
  background: transparent;
  color: var(--tinta);
  font: 700 1rem var(--letra-texto);
  cursor: pointer;
}
.dialogo__cerrar:hover { border-color: var(--verde-700); }
.dialogo__titulo { margin: 0 6rem 0.5rem 0; font-size: clamp(1.6rem, 1.4rem + 1vw, 2rem); font-weight: 700; }
.dialogo__contexto { margin: 0 0 0.5rem; padding: 0.5rem 0.85rem; border-left: 4px solid var(--verde-700); background: var(--verde-100); border-radius: 0 10px 10px 0; font-weight: 700; color: var(--verde-800); }
.dialogo__entrada { margin: 0 0 1.25rem; color: var(--tinta-suave); }
.dialogo .formulario { padding: 0; background: none; border-radius: 0; }

/* ---------- Página de cada propiedad ---------- */
.inmueble { padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 clamp(4rem, 3rem + 4vw, 6rem); }
.migas { margin-bottom: 1.5rem; font-size: 1rem; color: var(--tinta-suave); }
.migas a { color: var(--verde-700); font-weight: 600; }
.etiqueta--verde { color: var(--verde-700); }
.inmueble__cabeza { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
.inmueble__titulo { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem); font-weight: 700; }
.inmueble__nombre { margin: 0.75rem 0 0; font-size: 1.1rem; font-weight: 600; color: var(--tinta-suave); }
.inmueble__lugar { margin: 0.5rem 0 0; font-size: 1.2rem; }
.inmueble__precio-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.inmueble__precio { margin: 0; font-family: var(--letra-titulo); font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.8rem); line-height: 1; color: var(--verde-800); }
@media (min-width: 900px) {
  .inmueble__cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
  .inmueble__precio-caja { align-items: flex-end; text-align: right; }
}

.galeria { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.galeria__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 20px;
  background: var(--verde-900);
  scrollbar-width: none;
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; display: grid; place-items: center; height: clamp(260px, 60vw, 620px); }
.galeria__foto img { width: 100%; height: 100%; object-fit: contain; }
.galeria__controles { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.85rem; }
.galeria__boton {
  min-height: 3.25rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--verde-700);
  border-radius: 12px;
  background: var(--beige-50);
  color: var(--verde-800);
  font: 700 1.1rem var(--letra-texto);
  cursor: pointer;
}
.galeria__boton:hover { background: var(--verde-100); }
.galeria__contador { font-weight: 700; color: var(--tinta-suave); }

.inmueble__cuerpo { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .inmueble__cuerpo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .inmueble__lateral { position: sticky; top: 100px; }
}
.inmueble__subtitulo { margin: 2rem 0 0.85rem; font-size: 1.6rem; font-weight: 700; }
.inmueble__texto > .inmueble__subtitulo:first-child, .inmueble__lateral > .inmueble__subtitulo:first-child { margin-top: 0; }
.inmueble__descripcion { white-space: pre-line; font-size: 1.12rem; line-height: 1.7; }
.inmueble__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.inmueble__lista li { padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--verde-100); color: var(--verde-800); font-weight: 600; }
.boton--borde { border-color: var(--verde-700); color: var(--verde-800); }
.boton--borde:hover { background: var(--verde-100); }

.inmueble__lateral { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--beige-50); border: 1px solid var(--beige-200); border-radius: 20px; }
.medidas { margin: 0 0 1.5rem; }
.medidas__fila { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--beige-200); }
.medidas__fila dt { color: var(--tinta-suave); }
.medidas__fila dd { margin: 0; font-weight: 700; text-align: right; }
.agente { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--beige-200); }
.agente__foto { width: 4.5rem; height: 4.5rem; flex: none; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px var(--beige-50), 0 0 0 4px var(--verde-700); }
.agente__nombre { margin: 0; font-family: var(--letra-titulo); font-weight: 700; font-size: 1.3rem; color: var(--verde-800); }
.agente__presentacion { margin: 0.2rem 0 0; font-size: 0.98rem; color: var(--tinta-suave); }
.inmueble__lateral .sello-inmosan { display: grid; margin-top: 1.25rem; }

.aviso-pagina { max-width: 46rem; }
.aviso-pagina h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: 1rem; }
.sin-corte { white-space: nowrap; }
/* En pantallas pequeñas, "Compruébalo aquí" va en su propia línea, sin la rayita */
@media (max-width: 599px) {
  .sello-inmosan__sep { display: none; }
  .sello-inmosan__accion { flex-basis: 100%; }
}