/* Estilos propios del sitio (no vienen de Webflow). Cargado despues del CSS de Webflow. */

/* Mapa de ubicacion (Leaflet + OSM). Reemplaza .w-widget-map: mismo tamano que el widget original (100% x 400px). */
.mapa-osm {
  width: 100%;
  height: 400px;
  position: relative;
  isolation: isolate;
  z-index: 0;
  background: #e9e7e2;
  font-family: Euclidsquare, sans-serif;
}
.mapa-osm .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.04) brightness(1.02);
} /* mosaicos sobrios, acordes a la paleta del sitio */
.mapa-osm .leaflet-control-zoom a {
  color: #111419;
  background: #fff;
  border-radius: 0;
}
.mapa-osm .leaflet-control-zoom a:hover {
  background: #f2efe9;
}
.mapa-osm .leaflet-bar {
  border: 1px solid #c3b59b;
  box-shadow: none;
  border-radius: 0;
}
.mapa-osm .leaflet-control-attribution {
  font-family: Euclidsquare, sans-serif;
  font-size: 10px;
  background: rgb(255 255 255 / 85%);
}
.mapa-osm .leaflet-control-attribution a {
  color: #414042;
}
.mapa-pin {
  background: none;
  border: 0;
}
.mapa-pin svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgb(17 20 25 / 35%));
}
.mapa-tip.leaflet-tooltip {
  background: #111419;
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 12px;
  font-family: Euclidsquare, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.mapa-tip.leaflet-tooltip-top:before {
  border-top-color: #111419;
}
.mapa-osm:focus-visible,
.mapa-osm .leaflet-marker-icon:focus-visible {
  outline: 2px solid #a78463;
  outline-offset: 2px;
}

/* Accesibilidad (minimo WCAG AA, 4.5:1): la descripcion de las estadisticas vive en dos contextos y Webflow le dio un gris unico (gray, #808080:
   3.95:1 sobre blanco y 2.61:1 sobre el fondo oscuro #414042). Sobre oscuro (primera etapa) pasa a #b8b8b8 (5.2:1); sobre blanco (.white, la
   portada) a #767676 (4.54:1). */
.stat-description {
  color: #b8b8b8;
}
.white .stat-description {
  color: #767676;
}

/* Control de pausa del video de fondo del hero (WCAG 2.2.2). Circulo translucido de 44 px (objetivo tactil minimo), a la izquierda del boton de WhatsApp. */
.video-control {
  position: absolute;
  right: 6.5rem;
  bottom: 1.5rem;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(65, 64, 66, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.video-control:hover {
  background: rgba(65, 64, 66, 0.9);
}
.video-control:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.video-control svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.video-control .icono-play,
.video-control.is-paused .icono-pausa {
  display: none;
}
.video-control.is-paused .icono-play {
  display: block;
}

/* ---- Color arena de la marca (#c3b59b): uso accesible (DJ-3) ----
   El arena no cambia: sigue siendo el color de marca. Sobre superficies oscuras (#414042) cumple (5,1:1) y no se toca. Sobre blanco solo llega
   a 2,0:1 y como fondo de botones con texto blanco tambien (2,0:1), asi que:
   - texto arena sobre blanco -> "arena profundo" #80735b: mismo matiz y croma que el arena (OKLCH), luminosidad .56; 4,66:1 sobre blanco.
   - botones con fondo arena -> texto en el gris oscuro de la marca (#414042): 5,1:1.
   Si el arena aparece como texto sobre otra superficie clara plana y no cumple, axe (compuerta de publicacion) lo detecta; sobre fotos o fondos translucidos axe no puede medir (queda como `incomplete`) y ahi se revisa a ojo. */
:root {
  --tan-profundo: #80735b;
}
.general-section.white .color,
.general-section.white .link-with-arrow:not(.black) {
  color: var(--tan-profundo);
}
.general-section.white .link-with-arrow:not(.black) {
  border-bottom-color: var(--tan-profundo);
}
.button_menu .text-button,
.button_menu .button-hide,
.button-primary.footer-form-button {
  color: var(--dim-grey);
}

/* ---- Etapas: saber en cual se esta y poder cambiar (movil y escritorio). Arreglo puntual hasta la landing unica del proyecto (ROADMAP T-31). ---- */
.etapa-actual {
  display: none;
}
@media screen and (max-width: 991px) {
  .etapa-actual {
    display: block;
    margin: 1.4rem 0 0;
    color: var(--tan);
    font-family: Euclidsquare, sans-serif;
    font-size: 14px;
    letter-spacing: 0.3em;
  }
}
.etapas-menu {
  display: flex;
  gap: 2em;
}
.etapa-link {
  padding: 12px 0;
  border-bottom: 1px solid transparent;
  color: inherit;
  text-decoration: none;
}
.etapa-link[aria-current="page"] {
  border-bottom-color: var(--tan);
  color: var(--tan);
}
.nav-menu-left .menu_link[aria-current="page"] .menu_p {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Hasta 991 px el cierre del menu es el boton de la barra (.close-menu-mob): Webflow oculta la X de .menu-close-real pero deja el enlace
   (11,5em x 11,5em, vacio) enfocable; asi no queda un control invisible dentro del dialogo. */
@media screen and (max-width: 991px) {
  .menu-close-real {
    display: none;
  }
}

/* Poster del video de fondo: se ve mientras el video no arranca (movimiento reducido, pausa inicial). */
#video-de-fondo {
  background-image: url("/assets/cdn.prod.website-files.com/630fec9c3028fa0a1993a347/63100e5cd3b76b9f61dc603c_Casas-poster-00001.jpg");
}

/* Texto del pie sobre el gris claro (#dfdfdf): su contenedor tiene opacity .83, asi que el gris de marca (#414042) se compone en #656466 y da 4,4:1,
   por debajo del minimo AA (4,5:1; los motores redondean distinto y WebKit lo midio en falta). Sin esa opacidad y con #59585a da 5,3:1 con margen. */
.div-block-19 {
  opacity: 1;
}
.paragraph-2.footer {
  color: #59585a;
}
/* 404: el titulo paso de <h2> a <h1> (la pagina no tenia ninguno). Tamano fijo: el h2 de Webflow medía 6em de un body de 1vw (86 px en
   escritorio y 23 px en movil); 32 px se lee igual en los dos. */
.titulo-404 {
  font-size: 32px;
  line-height: 36px;
}
/* El texto de la 404 heredaba #333 sobre el fondo #191d23 (1,34:1) y el 1vw del body (3,9 px a 390 px): ilegible (WCAG 1.4.3 y 1.4.4). */
.utility-page-content > div,
.enlace-404 {
  color: #f2f2f2;
  font-size: 1rem;
  line-height: 1.5;
}
.enlace-404 {
  margin-top: 1rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Solo para lectores de pantalla (p. ej. el «Enviando mensaje…» del formulario, js/contact-form.js): fuera de la vista, no oculto. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}