/* =========================================================================
   Services Vallarta Real Estate
   Hoja de estilo base, construida sobre WCAG 2.2.

   Reglas que nos autoimpusimos y el porque de cada una:
   - Todo se mide en "rem", nunca en pixeles fijos. Asi, si alguien agranda la
     letra en su navegador, TODO crece con ella (WCAG 1.4.4 Cambio de tamano).
   - Contraste apuntando a nivel AAA (7 a 1) en el texto normal, no solo AA.
   - El foco del teclado se ve con un recuadro doble, claro sobre oscuro y
     oscuro sobre claro, para que se note sobre cualquier fondo (WCAG 2.4.11).
   - Todo lo que se puede pulsar mide al menos 44 por 44 pixeles (WCAG 2.5.5).
   - Si la persona pidio en su sistema "menos animaciones", no hay ninguna
     animacion (WCAG 2.3.3).
   - Modo claro y modo oscuro, siguiendo la preferencia del sistema.
   ========================================================================= */

/* ---------- 0. Fuentes propias (autoalojadas, sin terceros) ---------- */
/* Titulos: Fraunces (serif con caracter, aire editorial de lujo). Cuerpo:
   Inter (sans de alta legibilidad en pantalla). Ambas con licencia libre
   (SIL OFL) y servidas desde NUESTRO dominio (no terceros: respeta la CSP
   default-src 'self'). Solo el subconjunto latino; el chino y demas caen a la
   fuente del sistema por respaldo. font-display:swap: el texto se ve de
   inmediato con la fuente del sistema y luego cambia, sin quedar invisible
   (clave para accesibilidad). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/fraunces-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-700.woff2") format("woff2"); }

/* ---------- 1. Variables de color ---------- */

/* Orden de capas de estilo. "base" es la paleta de fondo; "marca" es la
   plantilla que eligen los duenos (solo cambia el color de marca). TODO lo que
   va sin capa (contraste alto, tamano de texto, modo forzado por el visitante)
   gana sobre las dos capas: asi la accesibilidad SIEMPRE pesa mas que la
   imagen de marca. Es la regla que protege al visitante. */
@layer base, marca;

@layer base {
:root {
  color-scheme: light dark;

  /* Familias tipograficas. El respaldo del sistema va siempre detras, por si la
     fuente propia no carga y para los idiomas que el subconjunto latino no
     cubre (chino). */
  --fuente-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fondo: #ffffff;
  --fondo-suave: #f2f5f4;
  --fondo-realce: #e4ebe9;
  --texto: #16191d;
  --texto-suave: #454c55;
  --enlace: #0d5c55;
  --enlace-visitado: #5a3d78;
  --borde: #6b7480;
  --acento: #0d5c55;
  --acento-texto: #ffffff;
  --foco-interior: #16191d;
  --foco-exterior: #ffffff;

  --ancho-lectura: 68ch;
  --radio: 0.375rem;
}

/* Modo oscuro. Se aplica cuando el SISTEMA lo pide (salvo que el visitante haya
   forzado el modo claro con el panel de preferencias) O cuando el visitante lo
   fuerza a oscuro con el panel. Los dos bloques comparten la misma paleta. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #10151a;
    --fondo-suave: #1a2128;
    --fondo-realce: #232c35;
    --texto: #eef2f5;
    --texto-suave: #b9c3cd;
    --enlace: #7fd3c8;
    --enlace-visitado: #cbb2e8;
    --borde: #8d98a4;
    --acento: #7fd3c8;
    --acento-texto: #10151a;
    --foco-interior: #ffffff;
    --foco-exterior: #10151a;
  }
}

:root[data-tema="oscuro"] {
  --fondo: #10151a;
  --fondo-suave: #1a2128;
  --fondo-realce: #232c35;
  --texto: #eef2f5;
  --texto-suave: #b9c3cd;
  --enlace: #7fd3c8;
  --enlace-visitado: #cbb2e8;
  --borde: #8d98a4;
  --acento: #7fd3c8;
  --acento-texto: #10151a;
  --foco-interior: #ffffff;
  --foco-exterior: #10151a;
}
} /* fin @layer base */

/* Plantillas de marca que eligen los duenos desde el panel (data-plantilla en
   el <html>). Cada una SOLO cambia el color de marca (enlaces y acento), con
   una variante clara y una oscura, ambas con contraste suficiente sobre su
   fondo. La estructura, los tamanos y el resto de la accesibilidad no se tocan.
   "esmeralda" es la paleta base (el verde de siempre): por eso no aparece aqui,
   no necesita cambiar nada. */
@layer marca {
  /* Oceano: azul profundo. */
  :root[data-plantilla="oceano"] { --enlace:#0b5299; --acento:#0b5299; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="oceano"] { --enlace:#82b8f2; --acento:#82b8f2; }
  }
  :root[data-tema="oscuro"][data-plantilla="oceano"] { --enlace:#82b8f2; --acento:#82b8f2; }

  /* Terracota: teja calida. */
  :root[data-plantilla="terracota"] { --enlace:#a8331d; --acento:#a8331d; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="terracota"] { --enlace:#f0a08c; --acento:#f0a08c; }
  }
  :root[data-tema="oscuro"][data-plantilla="terracota"] { --enlace:#f0a08c; --acento:#f0a08c; }

  /* Ciruela: morado sobrio. */
  :root[data-plantilla="ciruela"] { --enlace:#6a2c86; --acento:#6a2c86; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="ciruela"] { --enlace:#d3a9ec; --acento:#d3a9ec; }
  }
  :root[data-tema="oscuro"][data-plantilla="ciruela"] { --enlace:#d3a9ec; --acento:#d3a9ec; }

  /* Mostaza: ocre calido. */
  :root[data-plantilla="mostaza"] { --enlace:#7a5200; --acento:#7a5200; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="mostaza"] { --enlace:#e6b64d; --acento:#e6b64d; }
  }
  :root[data-tema="oscuro"][data-plantilla="mostaza"] { --enlace:#e6b64d; --acento:#e6b64d; }

  /* Grafito: gris pizarra, neutro y serio. */
  :root[data-plantilla="grafito"] { --enlace:#37424f; --acento:#37424f; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="grafito"] { --enlace:#a9b7c6; --acento:#a9b7c6; }
  }
  :root[data-tema="oscuro"][data-plantilla="grafito"] { --enlace:#a9b7c6; --acento:#a9b7c6; }

  /* Vino: borgona elegante. */
  :root[data-plantilla="vino"] { --enlace:#8a1c3b; --acento:#8a1c3b; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="vino"] { --enlace:#ec9fb2; --acento:#ec9fb2; }
  }
  :root[data-tema="oscuro"][data-plantilla="vino"] { --enlace:#ec9fb2; --acento:#ec9fb2; }

  /* Bosque: verde olivo profundo. */
  :root[data-plantilla="bosque"] { --enlace:#3f6212; --acento:#3f6212; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="bosque"] { --enlace:#a7c957; --acento:#a7c957; }
  }
  :root[data-tema="oscuro"][data-plantilla="bosque"] { --enlace:#a7c957; --acento:#a7c957; }

  /* Indigo: azul violaceo profundo. */
  :root[data-plantilla="indigo"] { --enlace:#3730a3; --acento:#3730a3; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="indigo"] { --enlace:#a5b4fc; --acento:#a5b4fc; }
  }
  :root[data-tema="oscuro"][data-plantilla="indigo"] { --enlace:#a5b4fc; --acento:#a5b4fc; }

  /* Turquesa: cian marino, fresco. */
  :root[data-plantilla="turquesa"] { --enlace:#0e7490; --acento:#0e7490; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="turquesa"] { --enlace:#5eead4; --acento:#5eead4; }
  }
  :root[data-tema="oscuro"][data-plantilla="turquesa"] { --enlace:#5eead4; --acento:#5eead4; }

  /* Cobre: naranja terroso metalico. */
  :root[data-plantilla="cobre"] { --enlace:#9a4a1b; --acento:#9a4a1b; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="cobre"] { --enlace:#e8a06a; --acento:#e8a06a; }
  }
  :root[data-tema="oscuro"][data-plantilla="cobre"] { --enlace:#e8a06a; --acento:#e8a06a; }

  /* Fucsia: magenta vivo. */
  :root[data-plantilla="fucsia"] { --enlace:#a21caf; --acento:#a21caf; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"])[data-plantilla="fucsia"] { --enlace:#e879f9; --acento:#e879f9; }
  }
  :root[data-tema="oscuro"][data-plantilla="fucsia"] { --enlace:#e879f9; --acento:#e879f9; }
}

/* Alto contraste elegido por el visitante en el panel. Va DESPUES de los temas
   para que gane si alguien tiene los dos puestos. Negro sobre blanco, enlaces
   en azul fuerte, bordes marcados: la combinacion que mas gente espera. */
:root[data-contraste="alto"] {
  --fondo: #ffffff;
  --fondo-suave: #ffffff;
  --fondo-realce: #ffffff;
  --texto: #000000;
  --texto-suave: #000000;
  --enlace: #0000ee;
  --enlace-visitado: #551a8b;
  --borde: #000000;
  --acento: #00006a;
  --acento-texto: #ffffff;
  --foco-interior: #000000;
  --foco-exterior: #ffffff;
}

/* Tamano del texto elegido por el visitante. Como TODO el sitio se mide en rem,
   cambiar el tamano base de <html> agranda o achica la pagina entera. Sin
   ninguno de estos, se respeta el tamano que tenga el navegador. */
:root[data-texto="sm"]  { font-size: 90%; }
:root[data-texto="lg"]  { font-size: 112.5%; }
:root[data-texto="xl"]  { font-size: 131.25%; }
:root[data-texto="xxl"] { font-size: 150%; }

/* Mas espacio entre lineas, letras y palabras. Ayuda a quien tiene dislexia o
   baja vision. Los valores cumplen o superan WCAG 1.4.12 (Espaciado de texto). */
:root[data-espaciado="amplio"] body {
  line-height: 1.9;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}
:root[data-espaciado="amplio"] p { margin-block: 1.5em; }

/* ---------- 2. Base ---------- */

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

/* Red de seguridad: ninguna imagen, video o elemento incrustado puede ser mas
   ancho que su espacio. Evita que una foto grande desborde la pagina y obligue
   a hacer scroll horizontal en un celular (WCAG 1.4.10 Reajuste). */
img,
picture,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

html {
  /* Sin font-size fijo: respetamos el tamano que la persona eligio en su navegador. */
  -webkit-text-size-adjust: 100%;
}

/* Recorta un desborde horizontal de pocos pixeles: las secciones "de orilla a
   orilla" (portada) miden con vw, que incluye el ancho de la barra de
   desplazamiento; clip lo contiene sin crear scroll ni romper posiciones. Va en
   la raiz (html), que es donde se produce el scroll horizontal del documento. */
html {
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1.125rem;
  line-height: 1.6;
  /* Ni justificado ni partido en silabas: dificulta la lectura a personas con
     dislexia y a quien usa ampliacion de pantalla (WCAG 1.4.8). */
  text-align: start;
  hyphens: none;
}

/* Titulos con la serif de marca (Fraunces); el cuerpo se queda en la sans
   (Inter). Es el emparejamiento clasico serif+sans: el titulo con voz, el
   texto legible. Los tamanos y pesos ya vienen de las reglas de cada titulo. */
h1, h2, h3 {
  font-family: var(--fuente-titulo);
}

.contenedor {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* El texto largo nunca supera unos 68 caracteres por linea. Lineas mas largas
   hacen perder el renglon, sobre todo con baja vision. */
main p,
main li {
  max-width: var(--ancho-lectura);
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin-block: 1.5em 0.5em;
  text-wrap: balance;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p { margin-block: 0 1em; }

/* ---------- 3. Enlaces ---------- */

a {
  color: var(--enlace);
  /* Subrayado siempre: el color por si solo no puede ser la unica pista
     de que algo es un enlace (WCAG 1.4.1 Uso del color). */
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
}

a:visited { color: var(--enlace-visitado); }

a:hover { text-decoration-thickness: 0.16em; }

/* ---------- 4. Foco del teclado ---------- */

:focus-visible {
  outline: 3px solid var(--foco-interior);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--foco-exterior);
  border-radius: 2px;
}

/* ---------- 5. Utilidades de accesibilidad ---------- */

/* Texto que solo leen los lectores de pantalla. No usar para esconder cosas
   importantes que tambien deberian verse. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace para saltarse el menu. Invisible hasta que recibe el foco. */
.salto-contenido {
  position: absolute;
  left: 0.5rem;
  top: -100vh;
  z-index: 100;
  background: var(--acento);
  color: var(--acento-texto);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radio);
  font-weight: 600;
  text-decoration: underline;
}

.salto-contenido:focus {
  top: 0.5rem;
}

/* Cuando el enlace de salto lleva el foco a main, no queremos un recuadro
   alrededor de media pagina, pero si conservamos el destino del foco. */
main:focus {
  outline: none;
}

/* ---------- 6. Cabecera y navegacion ---------- */

.cabecera {
  background: var(--fondo-suave);
  border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}

.marca {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.marca a {
  color: var(--texto);
  text-decoration: none;
}

.marca a:hover,
.marca a:focus-visible {
  text-decoration: underline;
}

.nav-idiomas__lista,
.nav-principal__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Zona de toque de al menos 44 por 44: quien tiene temblor o usa el sitio en
   el telefono no deberia fallar el objetivo (WCAG 2.5.5). */
.nav-idiomas a,
.nav-idiomas__actual,
.nav-principal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;
}

.nav-idiomas__actual {
  font-weight: 700;
  color: var(--texto);
}

.nav-principal {
  background: var(--fondo-realce);
  border-bottom: 1px solid var(--borde);
}

.nav-principal a {
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}

.nav-principal a:hover,
.nav-principal a:focus-visible {
  text-decoration: underline;
}

/* La pagina en la que estamos se marca de dos formas a la vez: con negrita y
   con una barra, no solo con color. */
.nav-principal a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em;
}

/* ---------- 7. Contenido principal ---------- */

main {
  display: block;
  padding-block: 2rem 3rem;
  min-height: 50vh;
}

.intro {
  font-size: 1.25rem;
  color: var(--texto-suave);
}

/* Acento de marca bajo el titulo de cada pagina INTERIOR. Se aplica a los h1
   que son hijos directos de main; la portada NO lo recibe porque alli el h1
   vive dentro del hero (.inicio-hero), no suelto en main. Hermana todas las
   paginas con el resto del sitio sin estorbar la lectura de las serias. */
main > h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-block-start: 0.65rem;
  background: var(--acento);
  border-radius: 2px;
}

@media (forced-colors: active) {
  main > h1::after { background: CanvasText; }
}

/* Banda de foto en la cabecera de algunas paginas de cara al cliente. Es
   DECORATIVA (va como ::before de main): el h1 de abajo dice de que trata la
   pagina, asi que la foto no necesita texto alternativo ni la anuncia NVDA.
   Usa fotos propias del negocio (o la de la portada) ya alojadas. Las paginas
   serias o legales NO llevan banda: solo el acento del titulo, para no estorbar
   la lectura. "Descubre Vallarta" tampoco, porque ya es una galeria de fotos. */
[data-clave="servicios"] main::before,
[data-clave="nosotros"] main::before,
[data-clave="avaluo"] main::before {
  content: "";
  display: block;
  height: clamp(8rem, 22vw, 13rem);
  margin-block: 0 1.75rem;
  border-radius: var(--radio);
  background-color: var(--fondo-realce);
  background-size: cover;
  background-position: center;
}

[data-clave="servicios"] main::before {
  background-image: url("/assets/img/vallarta/vallarta24.webp");
  background-position: left center;
}

[data-clave="nosotros"] main::before {
  background-image: url("/assets/img/vallarta/vallarta25.webp");
}

[data-clave="avaluo"] main::before {
  background-image: url("/assets/img/vallarta/portada-vallarta.webp");
}

/* En alto contraste del sistema no hay imagenes de fondo: se retira la banda
   para no dejar un hueco vacio. */
@media (forced-colors: active) {
  [data-clave="servicios"] main::before,
  [data-clave="nosotros"] main::before,
  [data-clave="avaluo"] main::before {
    display: none;
  }
}

/* ---------- 7b. Portada: bienvenida con foto (hero) ---------- */
/* Una foto de Puerto Vallarta a la hora dorada da la bienvenida en la portada.
   La imagen es DECORATIVA: el <h1> ya nombra el lugar, asi que va como fondo de
   CSS (no como <img>) y los lectores de pantalla no la anuncian ni estorba a
   quien no ve. Un velo oscuro en degradado garantiza el contraste AAA del texto
   blanco pase lo que pase, y hay un color de respaldo por si la foto no carga. */
.inicio-hero {
  /* De orilla a orilla: cancela el relleno superior de main y rompe el ancho
     del contenedor hasta las dos orillas de la ventana, sin barra horizontal
     (el margen negativo equivale justo al relleno lateral del contenedor). */
  margin-block-start: -2rem;
  margin-inline: calc(-50vw + 50%);
  padding: clamp(3rem, 9vw, 6.5rem) max(1.25rem, calc(50vw - 36rem));
  background-color: #10151a;
  background-image:
    linear-gradient(90deg, rgba(8, 12, 16, 0.78) 0%, rgba(8, 12, 16, 0.45) 55%, rgba(8, 12, 16, 0.20) 100%),
    linear-gradient(0deg, rgba(8, 12, 16, 0.55) 0%, rgba(8, 12, 16, 0) 45%),
    url("/assets/img/vallarta/portada-vallarta.webp");
  background-size: cover;
  background-position: center 58%;
  color: #ffffff;
}

.inicio-hero__inner {
  max-width: 42rem;
}

.inicio-hero h1 {
  margin-top: 0;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.inicio-hero__intro {
  margin-bottom: 0;
  font-size: 1.3rem;
  color: #f2f5f4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Alto contraste del sistema (Windows): se retira la foto y el velo y se usan
   los colores del sistema, para no perder legibilidad en ese modo. */
@media (forced-colors: active) {
  .inicio-hero {
    background: Canvas;
    color: CanvasText;
    border-block-end: 1px solid CanvasText;
  }
  .inicio-hero h1,
  .inicio-hero__intro {
    color: CanvasText;
    text-shadow: none;
  }
}

/* ---------- 7b-bis. Buscador de la portada ---------- */
/* Tarjeta elevada que se solapa con el hero: es la convencion del sector (buscar
   desde la portada). Es un formulario que manda a /propiedades por GET; funciona
   sin JavaScript. */
.inicio-buscar {
  display: block;
  position: relative;
  z-index: 1;
  margin-block: -2.75rem 2.5rem;
}

.inicio-buscar__form {
  padding: 1.25rem 1.25rem 1rem;
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.inicio-buscar__titulo {
  margin-block: 0 1rem;
  font-size: 1.25rem;
}

.inicio-buscar__campos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
}

.inicio-buscar .campo {
  flex: 1 1 11rem;
  margin: 0;
}

.inicio-buscar .campo--ancho {
  flex: 2 1 16rem;
}

.inicio-buscar__enviar {
  flex: 0 0 auto;
  margin: 0;
}

.inicio-buscar label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.35rem;
}

.inicio-buscar select,
.inicio-buscar input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.inicio-buscar__enviar .accion {
  min-height: 44px;
}

/* La vitrina de destacadas reusa la rejilla .listado; solo un respiro. */
.inicio-destacadas {
  margin-block: 2.5rem;
}

/* Banda de confianza: franja de orilla a orilla con fondo suave y cuatro
   razones. El breakout es el mismo del hero (sin barra horizontal por el
   overflow-x: clip de la raiz). */
.inicio-confianza {
  margin-inline: calc(-50vw + 50%);
  margin-block: 2.5rem;
  padding: 2rem max(1.25rem, calc(50vw - 36rem));
  background: var(--fondo-suave);
  border-block: 1px solid var(--borde);
}

.inicio-confianza > h2 {
  margin-block: 0 1.25rem;
}

.confianza {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.confianza__titulo {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

/* Un pequeno acento de marca sobre cada titulo, para unir con el resto. */
.confianza__titulo::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin-block-end: 0.6rem;
  background: var(--acento);
  border-radius: 2px;
}

.confianza__texto {
  margin: 0;
  color: var(--texto-suave);
}

@media (forced-colors: active) {
  .confianza__titulo::before { background: CanvasText; }
}

/* ---------- 7c. Portada de eleccion de idioma (pantalla de entrada) ---------- */
/* La primera pantalla del sitio (dominio raiz) es una portada a pantalla
   completa: la foto de la bahia de fondo con un velo oscuro, y al centro una
   tarjeta con el nombre y los botones de idioma. Misma foto que la bienvenida
   de la portada, para dar coherencia. */
.idiomas {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: #10151a;
  background-image:
    linear-gradient(rgba(8, 12, 16, 0.55), rgba(8, 12, 16, 0.68)),
    url("/assets/img/vallarta/portada-vallarta.webp");
  background-size: cover;
  background-position: center;
}

.idiomas__caja {
  width: 100%;
  max-width: 30rem;
  padding: 2rem 1.5rem 2.25rem;
  background: var(--fondo);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.idiomas__logo {
  width: 6rem;
  height: auto;
  border-radius: 0.5rem;
}

.idiomas__caja h1 {
  margin-block: 0.5rem 1rem;
}

.idiomas__caja .intro {
  margin-block: 0.25rem;
}

/* Los saludos son la antesala; los botones son la accion. Un respiro entre
   ellos y los botones alineados a la izquierda como en el resto del sitio. */
.idiomas__caja .acciones {
  margin-block: 1.5rem 0;
  text-align: start;
}

/* ---------- 7d. Ahorro de datos (conexion modesta) ---------- */
/* Cuando preferencias-inicio.js detecta que el visitante pidio ahorro de datos
   o tiene una conexion modesta (2G/3G), marca data-datos="ahorro" ANTES de
   pintar. Entonces: el hero usa una version PEQUENA (101 KB en vez de 360), y
   las fotos de fondo DECORATIVAS de zonas y de las paginas de cliente NO se
   cargan (se ve el degradado de marca). Las fotos de las PROPIEDADES no se
   tocan (son informativas). En conexion buena, todo sale en su mejor version. */
:root[data-datos="ahorro"] .inicio-hero {
  background-image:
    linear-gradient(90deg, rgba(8, 12, 16, 0.78) 0%, rgba(8, 12, 16, 0.45) 55%, rgba(8, 12, 16, 0.20) 100%),
    linear-gradient(0deg, rgba(8, 12, 16, 0.55) 0%, rgba(8, 12, 16, 0) 45%),
    url("/assets/img/vallarta/portada-vallarta-sm.webp");
}

:root[data-datos="ahorro"] .idiomas {
  background-image:
    linear-gradient(rgba(8, 12, 16, 0.55), rgba(8, 12, 16, 0.68)),
    url("/assets/img/vallarta/portada-vallarta-sm.webp");
}

:root[data-datos="ahorro"] .zona__hero {
  opacity: 0.9;
  background-image: linear-gradient(120deg, var(--acento) 0%, var(--fondo-realce) 70%);
}

:root[data-datos="ahorro"] [data-clave="servicios"] main::before,
:root[data-datos="ahorro"] [data-clave="nosotros"] main::before,
:root[data-datos="ahorro"] [data-clave="avaluo"] main::before {
  display: none;
}

/* Precio en la segunda moneda (conversión aproximada de referencia). */
.ficha__precio-alt { color: var(--texto-suave); font-weight: 400; }
.tarjeta__precio-alt { margin: 0.15rem 0 0; color: var(--texto-suave); font-size: 0.95rem; }
/* Nota del tipo de cambio: discreta, es una aclaración. */
.ficha__precio-nota,
.precio-nota { color: var(--texto-suave); font-size: 0.9rem; margin-top: 0.35rem; }

/* ---------- 8. Listas de acciones grandes ---------- */

.lista-simple {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-simple > li { margin-block-end: 0.5rem; }

.acciones {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* Botones grandes de accion. El enlace entero es pulsable, no solo el texto. */
.accion {
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding: 1rem 1.25rem;
  background: var(--fondo-suave);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: underline;
}

.accion:hover,
.accion:focus-visible {
  background: var(--fondo-realce);
}

.accion--principal {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}

/* ---------- 8 bis. Catalogo de propiedades ---------- */

.aviso {
  border: 3px solid var(--acento);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
}

.aviso h2 {
  margin-block-start: 0;
  font-size: 1.125rem;
}

.aviso p:last-child { margin-block-end: 0; }

.resumen-resultados {
  font-weight: 700;
  margin-block: 1.5rem 0.5rem;
}

.listado {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

/* Cada tarjeta tiene UN SOLO enlace. Para que la tarjeta entera se pueda pulsar
   con el raton sin anadir mas elementos enfocables, se estira el area del enlace
   por encima de toda la tarjeta con un pseudoelemento. Asi el objetivo de
   pulsacion es enorme y el recorrido con teclado sigue siendo de un solo paso
   por propiedad. */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tarjeta__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--fondo-realce);
}

.tarjeta__titulo {
  font-size: 1.125rem;
  margin: 1rem 1rem 0.4rem;
  line-height: 1.3;
}

/* Precio grande, primero en la jerarquia visual de la tarjeta (para el ojo que
   ve; el lector de pantalla ya lo oye dentro del enlace). */
.tarjeta__precio {
  margin: 0.35rem 1rem 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.2;
}

/* Datos clave como pastillas: se leen de un vistazo. Puramente visuales
   (aria-hidden en el HTML): la version accesible va en el enlace. */
.tarjeta__datos {
  list-style: none;
  margin: 0 1rem 0.85rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tarjeta__datos li {
  font-size: 0.85rem;
  color: var(--texto-suave);
  background: var(--fondo-realce);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  white-space: nowrap;
}

.tarjeta__titulo a {
  color: var(--texto);
}

.tarjeta__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Al pasar el raton, la tarjeta se eleva un poco (no cambia el fondo, para no
   tapar las pastillas). Se apaga solo si la persona pidio menos animacion. */
.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Como el enlace ocupa toda la tarjeta, el recuadro de foco tiene que dibujarse
   sobre la tarjeta entera y no sobre el texto, o quedaria descolocado. */
.tarjeta:has(a:focus-visible) {
  outline: 3px solid var(--foco-interior);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--foco-exterior);
}

.tarjeta__titulo a:focus-visible {
  outline: none;
  box-shadow: none;
}

.tarjeta__zona,
.tarjeta__referencia {
  margin: 0 1rem 0.75rem;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

.tarjeta__referencia { margin-block-start: auto; }

/* ---------- 8 ter. Ficha de propiedad ---------- */

.ficha__precio {
  font-size: 1.375rem;
  margin-block: 0 1.5rem;
}

/* Linea de confianza bajo los botones de contacto de la ficha: discreta. */
.ficha__confianza {
  margin-block: 0.5rem 0;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

/* Foto principal de bienvenida en la ficha: grande, proporcion de revista. */
.ficha__portada {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--fondo-realce);
  margin-block: 0 1.5rem;
}

.datos {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.datos > li {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
  max-width: none;
}

/* Amenidades de la ficha: lista que fluye en fichas compactas. Es una lista de
   verdad (la lee el lector de pantalla como tal); el estilo solo la ordena. */
.amenidades {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.amenidades > li {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.4rem 0.85rem;
  max-width: none;
}

.galeria {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.galeria figure {
  margin: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-suave);
}

.galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.galeria figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--texto);
}

/* Boton que envuelve cada foto para poder ampliarla. Se ve como la foto sola
   (sin borde ni fondo de boton); solo cambia el cursor a "ampliar". Lo agrega
   el JavaScript (galeria.js); sin JavaScript no existe. */
.galeria__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.galeria__zoom:focus-visible {
  outline: 3px solid var(--enlace);
  outline-offset: -3px;
}

/* La ventana con la foto ampliada (elemento <dialog> nativo). */
.lightbox {
  max-width: min(92vw, 70rem);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  overflow: auto;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  background: #000;
}

.lightbox__cerrar {
  display: block;
  margin-left: auto;
  padding: 0.6rem 1rem;
  min-height: 44px;
  border: 0;
  background: var(--fondo-suave);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

.lightbox__cerrar:focus-visible {
  outline: 3px solid var(--enlace);
  outline-offset: -3px;
}

.lightbox__pie {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  font-size: 0.9375rem;
}

/* Barra superior del lightbox: contador (izquierda) y cerrar (derecha). */
.lightbox__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lightbox__contador {
  padding-inline-start: 1rem;
  color: var(--texto-suave);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Anterior / siguiente: botones grandes y cómodos de tocar. */
.lightbox__nav {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  padding: 0 1rem 1rem;
}

.lightbox__prev,
.lightbox__next {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  color: var(--texto);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__prev:hover,
.lightbox__next:hover {
  background: var(--fondo-realce);
}

.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  outline: 3px solid var(--enlace);
  outline-offset: 2px;
}

/* Aparición suave (se apaga sola con "menos animación", por la regla global). */
.lightbox[open] {
  animation: lightbox-aparece 0.15s ease;
}

@keyframes lightbox-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (forced-colors: active) {
  .lightbox__prev,
  .lightbox__next,
  .lightbox__cerrar { border: 2px solid CanvasText; }
}

/* ---------- 8 quater. Equipo y direccion ---------- */

.equipo {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.equipo > li {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  padding: 1rem 1.25rem;
}

.equipo h3 { margin-block-start: 0; }

address {
  font-style: normal;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin-block-end: 1.5rem;
  max-width: var(--ancho-lectura);
}

/* ---------- 9. Pie de pagina ---------- */

.pie {
  background: var(--fondo-suave);
  border-top: 1px solid var(--borde);
  padding-block: 2rem 1rem;
}

.pie__columnas {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.pie h2 {
  font-size: 1.125rem;
  margin-block: 0 0.5rem;
}

.pie a,
.pie li {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.pie__legal {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
}

/* ---------- 10. Respeto a las preferencias de la persona ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modo de alto contraste de Windows: forzamos que los bordes se sigan viendo. */
@media (forced-colors: active) {
  .accion,
  .cabecera,
  .nav-principal,
  .pie {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 3px solid CanvasText;
  }
}

/* Impresion: sin fondos oscuros, con las direcciones de los enlaces visibles. */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .cabecera, .nav-principal, .salto-contenido { display: none; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
}

/* ---------- 8 quinquies. Formulario de contacto ---------- */

.formulario {
  max-width: 34rem;
}

.formulario .campo {
  margin-block: 0 1rem;
}

.formulario label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.35rem;
}

.formulario .req {
  font-weight: 400;
  color: var(--texto-suave);
}

/* Los campos miden lo mismo y son comodos de tocar. */
.formulario input,
.formulario textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.formulario textarea {
  min-height: 6rem;
  resize: vertical;
}

.formulario input:focus-visible,
.formulario textarea:focus-visible {
  border-color: var(--acento);
}

.formulario .ayuda,
.ayuda {
  color: var(--texto-suave);
  font-size: 0.9375rem;
  margin-block: 0 1rem;
}

/* La trampa para robots se saca de la pantalla, pero sigue existiendo para
   ellos. No se usa display:none porque algunos robots lo detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El aviso de error esta oculto salvo cuando el servidor manda a #error-formulario. */
.aviso-error {
  display: none;
}

.aviso-error:target {
  display: block;
  border: 3px solid #a4262c;
  background: #fff0f0;
  color: #5a0b0f;
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  font-weight: 600;
}

/* En modo oscuro, el aviso de error se adapta. */
@media (prefers-color-scheme: dark) {
  .aviso-error:target {
    background: #2a1214;
    color: #ffd7d7;
    border-color: #e06c75;
  }
}

/* Credenciales de cada persona del equipo. */
.equipo__cargo {
  font-weight: 600;
  color: var(--acento);
  margin-block: 0 0.5rem;
}

.equipo__credenciales {
  margin: 0;
  padding-left: 1.1rem;
}

.equipo__credenciales li {
  margin-block-end: 0.35rem;
  font-size: 0.9375rem;
}

/* ---------- Buscador y filtros de propiedades ---------- */

.buscador {
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  padding: 1.25rem 1.25rem 1rem;
  margin-block: 1.5rem 2rem;
}

.buscador__titulo {
  margin-top: 0;
  font-size: 1.25rem;
}

/* Filas que ponen varios controles lado a lado y se apilan solos en pantalla chica. */
.buscador__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
}
.buscador__fila > * { flex: 1 1 14rem; margin: 0; }

.buscador .campo { margin-block: 0 1rem; }
.buscador .campo > label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.buscador .campo--ancho { width: 100%; }

/* Precio: etiqueta y campo en una linea, compactos. */
.buscador .campo--enlinea {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 0.5rem 0;
}
.buscador .campo--enlinea > label { margin: 0; font-weight: 600; }
.buscador .campo--enlinea input { width: 9rem; }

.buscador input[type="search"],
.buscador input[type="number"],
.buscador select {
  min-height: 44px;               /* zona tactil comoda */
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  max-width: 100%;
}
.buscador input[type="search"] { width: 100%; }
.buscador select { width: auto; }

/* Grupos con fieldset: borde suave, opciones que fluyen y bajan de renglon. */
.buscador__grupo {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem 0.5rem;
  margin-block: 0 1rem;
}
.buscador__grupo legend { font-weight: 700; padding-inline: 0.35rem; }
.buscador__grupo label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-right: 1.25rem;
}
.buscador__grupo input[type="radio"],
.buscador__grupo input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }

/* Filtro de amenidades: subgrupos con su propio titulo dentro del grupo grande,
   para no marear con 22 casillas seguidas. */
.buscador__amenidades-grupo {
  border: 0;
  border-top: 1px solid var(--borde);
  padding: 0.6rem 0 0.2rem;
  margin: 0.6rem 0 0;
}
.buscador__amenidades-grupo:first-of-type { border-top: 0; }
.buscador__amenidades-grupo legend {
  font-weight: 600;
  font-size: 0.95em;
  padding: 0;
}
.buscador__amenidades-grupo label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-right: 1.25rem;
}
.buscador__amenidades-grupo input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }

/* "Mas filtros": desplegable nativo, accesible y sin JavaScript. */
.buscador__mas { margin-bottom: 0.5rem; }
.buscador__mas > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.6rem 0.4rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.buscador__mas[open] > summary { margin-bottom: 0.75rem; }

.buscador__acciones { margin: 0.5rem 0 0; }
.accion--suave {
  min-height: 44px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  width: auto;
}

.sin-resultados {
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-realce);
  padding: 1rem 1.25rem;
  font-weight: 600;
}

/* ---------- Galeria "Descubre Puerto Vallarta" ---------- */

.galeria {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.postal {
  margin: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-suave);
  display: flex;
  flex-direction: column;
}

.postal__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--fondo-realce);
}

.postal__pie {
  padding: 0.85rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto);
}

/* ---------- Fotos del equipo en "Quienes somos" ---------- */

.equipo-foto {
  margin: 0 0 2rem;
}
.equipo-foto img {
  width: 100%;
  max-width: 34rem;
  height: auto;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
}
.equipo__foto {
  width: 100%;
  max-width: 12rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  margin-bottom: 0.85rem;
  background: var(--fondo-realce);
}

/* Mapa de ubicacion (componente reutilizable: oficina y, mas adelante, cada
   propiedad). El <iframe> ocupa todo el ancho disponible y guarda una
   proporcion comoda; nunca desborda la pantalla en un celular. Debajo van los
   enlaces de "como llegar" / "ver mas grande", que envuelven si no caben. */
.mapa {
  margin: 0 0 1.5rem;
}
.mapa__lienzo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
}
.mapa__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* Aviso obligatorio del MLS. Es legal, no decorativo: se marca con un borde
   lateral para que resalte, pero sin colores que distraigan. */
.aviso-mls {
  border-left: 4px solid var(--borde);
  background: var(--fondo-suave);
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

/* Atribucion por-listado (cortesia + copyright del MLS). Letra chica y tenue,
   pero legible: cumple el contrato sin robarle protagonismo a la propiedad. */
.tarjeta__mls {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--texto);
  opacity: 0.75;
}
.tarjeta__accion {
  margin-top: 0.6rem;
}

/* ---------- Boton y filtro de favoritos ----------
   Los favoritos viven solo en el navegador (localStorage) y necesitan
   JavaScript, por eso el boton y la casilla "solo favoritos" se ocultan hasta
   que el sitio marca data-js=1: sin JS no habria nada que guardar ni filtrar. */
.favorito,
.favorito-filtro { display: none; }
:root[data-js="1"] .favorito-filtro { display: block; }

:root[data-js="1"] .favorito {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  margin: 0 1rem 1rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  /* La tarjeta tiene un enlace que la cubre entera (::after con inset:0). El
     boton se eleva por encima para que se pueda pulsar sin abrir la ficha. */
  position: relative;
  z-index: 1;
}
.favorito:focus-visible {
  outline: 3px solid var(--foco-interior);
  outline-offset: 2px;
}
/* Guardada: el interruptor se ve "hundido" con el color de acento, igual que los
   botones encendidos del panel de preferencias. */
.favorito[aria-pressed="true"] {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
}
/* En la ficha el boton va en su propio parrafo, sin los margenes de la tarjeta. */
.ficha__favorito { margin: 0.5rem 0 1rem; }
.ficha__favorito .favorito { margin: 0; }

/* ---------- Calculadora de credito hipotecario ----------
   Reusa el mismo aspecto de campos que el buscador. La cuenta la hace
   calculadora.js en el navegador; sin JS, el aviso <noscript> lo explica. */
.calculadora { margin-block: 1rem 2rem; }
.calculadora__grupo {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem 0.5rem;
  margin-block: 0 1rem;
}
.calculadora__grupo legend { font-weight: 700; padding-inline: 0.35rem; }
.calculadora__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
}
.calculadora__fila > * { flex: 1 1 14rem; }
.calculadora .campo { margin-block: 0 1rem; }
.calculadora .campo > label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
/* Casillas de "extras": la etiqueta envuelve la casilla, en una fila. */
.calculadora .campo--check { margin-block: 0 0.55rem; }
.calculadora .campo--check > label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}
.calculadora .campo--check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
}
.calculadora__subgrupo { margin-top: 0.75rem; }
.calculadora__subtitulo { font-weight: 600; margin-block: 0.5rem 0.5rem; }
/* Captación opcional del avalúo: caja suave que la separa del resultado. */
.captura-avaluo {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background: var(--fondo-suave, transparent);
}
.captura-avaluo h2 { margin-top: 0; }
.campo__unidad { font-weight: 400; color: var(--texto-suave); }
.calculadora input[type="number"],
.calculadora select {
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  max-width: 100%;
  width: 100%;
}
.calculadora select { width: auto; }
.calculadora .ayuda { display: block; margin-top: 0.25rem; }

.calc-resultado { margin-block: 1.5rem; }
.calc-resultado__lista { margin: 0.5rem 0 0; }
.calc-resultado__lista > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borde);
}
.calc-resultado__lista dt { font-weight: 600; margin: 0; }
.calc-resultado__lista dd { margin: 0; }
/* El pago mensual es el dato principal: se resalta. */
.calc-resultado__pago { font-size: 1.15rem; }
.calc-resultado__pago dd { font-weight: 700; color: var(--acento); }

/* ---------- Comparador de propiedades ----------
   La casilla "Comparar" de cada tarjeta y la barra/panel del comparador
   necesitan JavaScript, por eso se ocultan hasta que el sitio marca data-js=1. */
.tarjeta__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 1rem 1rem;
}
.tarjeta__controles .favorito { margin: 0; }

.comparar { display: none; }
:root[data-js="1"] .comparar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  /* Sobre el enlace que cubre toda la tarjeta, para poder marcarla. */
  position: relative;
  z-index: 1;
}
:root[data-js="1"] .comparar input { width: 1.15rem; height: 1.15rem; }

/* La barra aparece cuando hay algo seleccionado; el panel, al pulsar "Comparar". */
.comparador__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-block: 1rem;
}
.comparador__conteo { font-weight: 600; }
.comparador__panel { margin-block: 1.5rem; }
.comparador__panel:focus-visible {
  outline: 3px solid var(--foco-interior);
  outline-offset: 4px;
}

/* La tabla puede ser mas ancha que la pantalla: se desplaza dentro de su caja,
   nunca empuja el ancho de la pagina. */
.tabla-scroll { overflow-x: auto; }
.tabla-comparar {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
}
.tabla-comparar th,
.tabla-comparar td {
  border: 1px solid var(--borde);
  padding: 0.6rem 0.8rem;
  text-align: start;
  vertical-align: top;
}
.tabla-comparar thead th { background: var(--fondo-suave); }
.tabla-comparar tbody th[scope="row"] { background: var(--fondo-suave); font-weight: 700; }
.comparador__quitar {
  display: inline-block;
  margin-top: 0.4rem;
  min-height: 44px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.comparador__quitar:focus-visible {
  outline: 3px solid var(--foco-interior);
  outline-offset: 2px;
}

/* ---------- Panel de preferencias de lectura del visitante ----------
   Es un control PROPIO, no un widget de terceros: solo ajusta tamano, colores
   y espaciado, y guarda la eleccion. Se oculta por completo si no hay
   JavaScript (data-js lo pone el propio sitio al cargar), para no mostrar
   botones que no harian nada. */
.preferencias { display: none; }
:root[data-js="1"] .preferencias { display: block; position: relative; }

.preferencias > summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  background: var(--fondo-suave);
}
.preferencias > summary:focus-visible {
  outline: 3px solid var(--foco-interior);
  outline-offset: 2px;
}

.preferencias__panel {
  margin-top: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  display: grid;
  gap: 0.9rem;
  /* En pantallas anchas flota sobre el contenido; en el celular queda en flujo. */
}
@media (min-width: 48rem) {
  .preferencias__panel {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 20rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  }
}

.preferencias__grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.preferencias__grupo > span { flex-basis: 100%; font-weight: 600; }

.preferencias__panel button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.preferencias__panel button:focus-visible {
  outline: 3px solid var(--foco-interior);
  outline-offset: 2px;
}
/* Un boton "encendido" (aria-pressed=true) se ve hundido y con el color de acento. */
.preferencias__panel button[aria-pressed="true"] {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
}

/* Sello de membresia (AMPI) en el pie. El logo va sobre un recuadro blanco fijo
   para que se lea igual en modo claro y oscuro (el archivo es JPG, no
   transparente, por eso no se deja el fondo del tema detras). */
.pie__membresias { margin-top: 1.5rem; text-align: center; }
.pie__membresias-titulo { font-size: 1rem; margin-block: 0 0.5rem; }
.sello { display: inline-block; background: #ffffff; padding: 0.5rem 0.75rem; border-radius: var(--radio); }
.sello img { display: block; width: 150px; height: auto; max-width: 100%; }

/* Logo de la empresa en la cabecera. El archivo es JPG con fondo claro; por eso
   va sobre un recuadro blanco, para verse bien en modo claro y en oscuro. El
   texto alternativo lleva el nombre, asi el lector de pantalla lo anuncia. */
.marca__enlace { display: inline-block; }
.marca__logo {
  display: block;
  height: 48px;
  width: auto;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: var(--radio);
}
@media (min-width: 48rem) { .marca__logo { height: 58px; } }

/* Dos sellos de membresia (AMPI y NAR) uno al lado del otro. */
.pie__membresias .sello { margin: 0.4rem; vertical-align: middle; }
.sello--nar img { width: 130px; }

/* Perfil, certificaciones y trayectoria de cada persona en "Quiénes somos". */
.equipo__perfil { margin-top: 0.5rem; }
.equipo__subtitulo { font-size: 1rem; margin-block: 1rem 0.35rem; }
.equipo__trayectoria { color: var(--texto-suave); }

/* ---------- Sección educativa "Guías" ---------- */

/* Aviso de que es orientación general, no asesoría. Recuadro destacado con una
   barra de acento a la izquierda; usa los mismos tokens, así que respeta el modo
   claro/oscuro y el alto contraste del visitante. */
.aviso {
  max-width: var(--ancho-lectura);
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--fondo-suave);
  border: 2px solid var(--borde);
  border-inline-start-width: 6px;
  border-radius: var(--radio);
}
.aviso > p { margin: 0; }

/* Índice de la guía (enlaces de salto a cada tema). */
.indice {
  max-width: var(--ancho-lectura);
  margin: 1.5rem 0 2.5rem;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--fondo-suave);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}
.indice > h2 { margin-top: 0.25rem; font-size: 1.25rem; }
.indice__lista { margin: 0; padding-inline-start: 1.5rem; }
.indice__lista > li { margin-block-end: 0.4rem; }

/* Cada guía es una sección; se separan con un poco de aire y una línea sutil
   arriba para que se distingan al recorrerlas. */
.guia {
  max-width: var(--ancho-lectura);
  margin-block: 2.5rem;
  padding-block-start: 1.5rem;
  border-top: 1px solid var(--borde);
}
.guia > h2 { margin-top: 0; }

/* Pasos numerados y puntos: cómodos de leer, con separación entre renglones. */
.guia__pasos,
.guia__puntos {
  padding-inline-start: 1.5rem;
}
.guia__pasos > li,
.guia__puntos > li {
  margin-block-end: 0.6rem;
}

/* Preguntas frecuentes: la pregunta destaca y la respuesta va debajo, cómoda. */
.faq__pregunta { font-size: 1.125rem; margin-block: 1.5rem 0.4rem; }
.faq__respuesta { margin-top: 0; }

/* Fuentes legales: texto un poco más discreto, es material de respaldo. */
.guia--fuentes { color: var(--texto-suave); }

/* Índice de la guía cuando cada tema es su propia página: solo el enlace al tema. */
.indice-guias { list-style: none; margin: 0; padding: 0; }
.indice-guias__item { margin-block-end: 0.7rem; }
.indice-guias__enlace { font-size: 1.2rem; font-weight: 600; }

/* Migas de pan (ruta de navegación) en las páginas por tema. */
.migas { margin: 0 0 1.25rem; font-size: 0.95rem; }
.migas__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem;
}
/* Separador entre migas, dibujado con CSS (no se lee ni se selecciona). */
.migas__lista > li + li::before { content: "/"; margin-inline-end: 0.5rem; color: var(--texto-suave); }
.migas__lista [aria-current="page"] { color: var(--texto-suave); }

/* "Otras guías": enlazado interno entre las páginas de la sección. */
.guia-otras { max-width: var(--ancho-lectura); margin-block: 2.5rem; padding-block-start: 1.5rem; border-top: 1px solid var(--borde); }
.lista-enlaces { margin: 0 0 1rem; padding-inline-start: 1.5rem; }
.lista-enlaces > li { margin-block-end: 0.5rem; }

/* ---------- Páginas por zona (colonia/área) ---------- */

/* Bloque "Explora por zona" en Propiedades y lista de "otras zonas". */
.zonas-explora { margin-block: 2.5rem; }
.zonas-lista {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: 0.6rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.zonas-lista > li { line-height: 1.35; }
.zonas-lista__region { display: block; font-size: 0.9rem; color: var(--texto-suave); }

/* Región (estado/ciudad) bajo el título de la página de zona. */
.zona__region { margin-top: -0.25rem; color: var(--texto-suave); font-size: 1.1rem; }

/* Banda de cabecera de la página de zona. Por defecto (colonias comunes sin
   foto propia) es un degradado suave de marca: da presencia sin fingir una foto
   del lugar. Las zonas fotogénicas y verificadas la sustituyen por su foto real
   más abajo (data-zona). Es decorativa (el <div> va aria-hidden). */
.zona__hero {
  height: clamp(6.5rem, 18vw, 10rem);
  margin-block: 1rem 1.5rem;
  border-radius: var(--radio);
  background-color: var(--fondo-realce);
  background-image: linear-gradient(120deg, var(--acento) 0%, var(--fondo-realce) 70%);
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

/* Zonas con FOTO REAL del lugar (con licencia, autoalojada). Un velo tenue para
   que combine y no compita con el texto. Se añaden a mano al conseguir cada
   foto verificada del sitio; las demás se quedan con el degradado de arriba. */
.zona__hero[data-zona="sayulita"],
.zona__hero[data-zona="bucerias"],
.zona__hero[data-zona="punta-de-mita"],
.zona__hero[data-zona="san-pancho"],
.zona__hero[data-zona="la-cruz-de-huanacaxtle"],
.zona__hero[data-zona="nuevo-vallarta"],
.zona__hero[data-zona="marina-vallarta"],
.zona__hero[data-zona="conchas-chinas"],
.zona__hero[data-zona="mismaloya"],
.zona__hero[data-zona="boca-de-tomatlan"],
.zona__hero[data-zona="centro"],
.zona__hero[data-zona="zona-romantica"],
.zona__hero[data-zona="zona-hotelera"],
.zona__hero[data-zona="flamingos"],
.zona__hero[data-zona="higuera-blanca"],
.zona__hero[data-zona="amapas"],
.zona__hero[data-zona="cinco-de-diciembre"],
.zona__hero[data-zona="lo-de-marcos"],
.zona__hero[data-zona="litibu"],
.zona__hero[data-zona="el-pitillal"],
.zona__hero[data-zona="valle-de-banderas"],
.zona__hero[data-zona="san-vicente"],
.zona__hero[data-zona="mezcales"],
.zona__hero[data-zona="ixtapa"],
.zona__hero[data-zona="nuevo-ixtapa"],
.zona__hero[data-zona="coapinole"],
.zona__hero[data-zona="las-juntas"],
.zona__hero[data-zona="jarretaderas"],
.zona__hero[data-zona="vista-vallarta"],
.zona__hero[data-zona="fluvial-vallarta"],
.zona__hero[data-zona="versalles"],
.zona__hero[data-zona="los-sauces"] {
  opacity: 1;
  background-image:
    linear-gradient(0deg, rgba(8, 12, 16, 0.12), rgba(8, 12, 16, 0.12)),
    var(--zona-foto);
}
.zona__hero[data-zona="sayulita"] { --zona-foto: url("/assets/img/zonas/sayulita.webp"); }
.zona__hero[data-zona="bucerias"] { --zona-foto: url("/assets/img/zonas/bucerias.webp"); }
.zona__hero[data-zona="punta-de-mita"] { --zona-foto: url("/assets/img/zonas/punta-de-mita.webp"); }
.zona__hero[data-zona="san-pancho"] { --zona-foto: url("/assets/img/zonas/san-pancho.webp"); }
.zona__hero[data-zona="la-cruz-de-huanacaxtle"] { --zona-foto: url("/assets/img/zonas/la-cruz-de-huanacaxtle.webp"); }
.zona__hero[data-zona="nuevo-vallarta"] { --zona-foto: url("/assets/img/zonas/nuevo-vallarta.webp"); }
.zona__hero[data-zona="marina-vallarta"] { --zona-foto: url("/assets/img/zonas/marina-vallarta.webp"); }
.zona__hero[data-zona="conchas-chinas"] { --zona-foto: url("/assets/img/zonas/conchas-chinas.webp"); }
.zona__hero[data-zona="mismaloya"] { --zona-foto: url("/assets/img/zonas/mismaloya.webp"); }
.zona__hero[data-zona="boca-de-tomatlan"] { --zona-foto: url("/assets/img/zonas/boca-de-tomatlan.webp"); }
.zona__hero[data-zona="centro"] { --zona-foto: url("/assets/img/zonas/centro.webp"); }
.zona__hero[data-zona="zona-romantica"] { --zona-foto: url("/assets/img/zonas/zona-romantica.webp"); }
.zona__hero[data-zona="zona-hotelera"] { --zona-foto: url("/assets/img/zonas/zona-hotelera.webp"); }
.zona__hero[data-zona="flamingos"] { --zona-foto: url("/assets/img/zonas/flamingos.webp"); }
.zona__hero[data-zona="higuera-blanca"] { --zona-foto: url("/assets/img/zonas/higuera-blanca.webp"); }
.zona__hero[data-zona="amapas"] { --zona-foto: url("/assets/img/zonas/amapas.webp"); }
.zona__hero[data-zona="cinco-de-diciembre"] { --zona-foto: url("/assets/img/zonas/cinco-de-diciembre.webp"); }
.zona__hero[data-zona="lo-de-marcos"] { --zona-foto: url("/assets/img/zonas/lo-de-marcos.webp"); }
.zona__hero[data-zona="litibu"] { --zona-foto: url("/assets/img/zonas/litibu.webp"); }
.zona__hero[data-zona="el-pitillal"] { --zona-foto: url("/assets/img/zonas/el-pitillal.webp"); }
/* Fotos PROPIAS de los duenos (no piden credito). */
.zona__hero[data-zona="valle-de-banderas"] { --zona-foto: url("/assets/img/zonas/valle-de-banderas.webp"); }
.zona__hero[data-zona="san-vicente"] { --zona-foto: url("/assets/img/zonas/san-vicente.webp"); }
.zona__hero[data-zona="mezcales"] { --zona-foto: url("/assets/img/zonas/mezcales.webp"); }
.zona__hero[data-zona="ixtapa"] { --zona-foto: url("/assets/img/zonas/ixtapa.webp"); }
.zona__hero[data-zona="nuevo-ixtapa"] { --zona-foto: url("/assets/img/zonas/nuevo-ixtapa.webp"); }
.zona__hero[data-zona="coapinole"] { --zona-foto: url("/assets/img/zonas/coapinole.webp"); }
.zona__hero[data-zona="las-juntas"] { --zona-foto: url("/assets/img/zonas/las-juntas.webp"); }
.zona__hero[data-zona="jarretaderas"] { --zona-foto: url("/assets/img/zonas/jarretaderas.webp"); }
.zona__hero[data-zona="vista-vallarta"] { --zona-foto: url("/assets/img/zonas/vista-vallarta.webp"); }
.zona__hero[data-zona="fluvial-vallarta"] { --zona-foto: url("/assets/img/zonas/fluvial-vallarta.webp"); }
.zona__hero[data-zona="versalles"] { --zona-foto: url("/assets/img/zonas/versalles.webp"); }
/* Los Sauces es vertical: se sube el encuadre para que salgan los árboles y el
   kiosco, no el piso de tierra del frente. */
.zona__hero[data-zona="los-sauces"] { --zona-foto: url("/assets/img/zonas/los-sauces.webp"); background-position: center 38%; }

/* Crédito de la foto de zona (solo fotos con licencia que lo exige). Discreto,
   justo bajo la banda. */
.zona__credito {
  margin: -1rem 0 1.5rem;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* En alto contraste del sistema no hay imágenes ni degradados de fondo: se
   retira la banda para no dejar un bloque vacío. */
@media (forced-colors: active) {
  .zona__hero { display: none; }
}

/* Índice completo de colonias: columnas compactas de nombres (enlace o texto). */
.colonias-grupo { margin-block: 1.5rem; }
.colonias-lista {
  list-style: none; margin: 0.5rem 0 0; padding: 0;
  display: grid; gap: 0.35rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.colonias-lista > li { line-height: 1.35; }

/* --- "Buscamos por ti": pasos y grupos del formulario ---------------------- */

/* Pasos numerados de "como funciona". */
.pasos {
  max-width: 40rem;
  padding-inline-start: 1.5rem;
}
.pasos > li { margin-block: 0 0.6rem; line-height: 1.5; }

/* Grupos de opciones (operacion, tipo, zonas) con su leyenda. */
.formulario .grupo {
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.75rem 1rem 0.25rem;
  margin-block: 0 1.25rem;
}
.formulario .grupo > legend {
  font-weight: 700;
  padding-inline: 0.35rem;
}
/* Sub-grupo por region, dentro del grupo de zonas: un poco mas tenue. */
.formulario .grupo--zona {
  margin-block: 0.5rem 0.75rem;
  border-color: var(--borde);
  background: var(--fondo-suave, transparent);
}
.formulario .grupo--zona > legend { font-weight: 600; }

/* Una opcion = una casilla o un radio con su texto. La casilla NO se estira
   (hereda width:100% de los input del formulario, hay que devolverla a su tamano). */
.formulario .opcion {
  margin-block: 0 0.4rem;
}
.formulario .opcion > label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}
.formulario .opcion input[type="checkbox"],
.formulario .opcion input[type="radio"] {
  width: auto;
  min-height: 0;
  min-width: 1.1rem;
  flex: 0 0 auto;
  margin: 0;
}

/* El select del formulario se ve igual que los demas campos. */
.formulario select {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}
.formulario select:focus-visible { border-color: var(--acento); }

/* Llamada destacada (p. ej. "Vende o renta con nosotros" en portada y servicios).
   Recuadro con franja de acento; sin fondo propio para no chocar con el alto
   contraste ni con los temas del visitante. */
.destacado {
  border: 1px solid var(--borde);
  border-left: 0.375rem solid var(--acento);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
}
.destacado > :first-child { margin-top: 0; }
.destacado > :last-child { margin-bottom: 0; }

/* Promesa de accesibilidad: sello propio junto al titulo. El SVG usa
   currentColor, asi que hereda el color del texto y se ve bien en claro,
   oscuro y alto contraste; aqui solo se le da color de acento y el diseno. */
.promesa__encabezado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.promesa__encabezado h1 { margin: 0; }
.promesa__sello { color: var(--acento); flex: 0 0 auto; line-height: 0; }
.sello-a11y { display: block; height: auto; }
/* Sello del pie: enlace a la promesa. Hereda el color del texto del pie. */
.pie__sello { display: inline-block; line-height: 0; margin-bottom: 0.75rem; }

/* Video propio de la propiedad (alojado en el mismo sitio, sin terceros). */
.video-propiedad { margin: 0 0 1.5rem; }
.video-propiedad video {
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: 8px;
  background: #000;
}
.video-propiedad figcaption {
  margin-top: 0.4rem;
  max-width: 720px;
  font-size: 0.95rem;
}