/* ===========================================================================
   Sur Sur Bienes Raices - estilos del sitio publico
   Paleta y tipografia tomadas del diseno aprobado.
   =========================================================================== */

/* --------------------------------------------------------- tipografias ---
   Se sirven desde este mismo servidor (no desde Google Fonts): el sitio no
   depende de terceros, carga mas rapido y no manda datos de los visitantes
   a otro dominio. Son archivos variables: un archivo cubre todos los pesos.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fuentes/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fuentes/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Verdes */
  --verde-950: #0A1D16;
  --verde-900: #0D241C;
  --verde-800: #113026;
  --verde-700: #1C4536;
  --tinta:     #16221D;

  /* Neutros */
  --crema:        #F6F3EC;
  --crema-suave:  #F1EEE5;
  --blanco:       #FFFFFF;
  --borde:        #E6E2D6;
  --borde-fuerte: #D9D4C6;
  --linea:        #EFEBE0;

  /* Acentos */
  --dorado:       #C6A664;
  --dorado-claro: #D8BC85;
  --whatsapp:       #1FA855;
  --whatsapp-hover: #188A45;

  /* Texto */
  --gris-verde: #8A9A91;
  --gris-texto: #5F6F67;
  --gris-suave: #9AA79F;
  --texto-medio: #3D4E46;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1280px;
  --lateral: 40px;
  --alto-header: 74px;
}

/* --------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--verde-800); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--dorado); }

input, select, button, textarea { font-family: var(--sans); font-size: 100%; }
select { appearance: none; -webkit-appearance: none; }
::placeholder { color: #A6B1AA; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

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

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--lateral);
}

/* Titulos */
.antetitulo {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--dorado);
}
.titulo-seccion {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.05;
  color: var(--verde-800); font-size: clamp(30px, 5vw, 44px);
}

/* Botones */
.boton {
  border: 0; cursor: pointer; font-weight: 600; letter-spacing: .02em;
  border-radius: 10px; padding: 15px 26px; font-size: 14px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.boton-verde { background: var(--verde-800); color: var(--crema); }
.boton-verde:hover { background: var(--verde-700); color: var(--crema); }
.boton-dorado { background: var(--dorado); color: var(--tinta); border-radius: 999px; font-weight: 700; }
.boton-dorado:hover { background: var(--dorado-claro); }
.boton-whatsapp { background: var(--whatsapp); color: #fff; border-radius: 999px; }
.boton-whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }
.boton-linea {
  background: none; border: 1px solid var(--borde-fuerte); color: var(--verde-800);
  border-radius: 999px; font-size: 13px; padding: 12px 22px;
}
.boton-linea:hover { border-color: var(--verde-800); background: var(--blanco); }
.boton[disabled] { opacity: .55; cursor: default; }

/* ------------------------------------------------------------- header --- */

/* Sobre la foto del inicio la barra no tiene fondo propio: se funde con el
   degradado verde del hero, asi no queda ese corte duro entre la barra oscura
   y el cielo claro de la foto. Al bajar (o en las otras pantallas) se vuelve
   solida para que el texto siempre se lea. */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg,
    rgba(13, 36, 28, .88) 0%,
    rgba(13, 36, 28, .55) 60%,
    rgba(13, 36, 28, 0) 100%);
  /* La linea de abajo va como sombra interior, no como borde: un borde sumaria
     1px a la altura y dejaria asomar una raya del fondo sobre la foto. */
  border-bottom: 0;
}
/* El cambio de color solo se anima mientras se baja por la portada. Al pasar a
   otra pantalla se aplica de golpe: si no, la barra se quedaba medio
   transparente sobre el fondo claro durante la transicion. */
.cabecera.en-portada { transition: background .4s ease, box-shadow .4s ease; }
.cabecera.solida {
  background: rgba(13, 36, 28, .96);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(246, 243, 236, .1);
}
.cabecera-fila {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lateral);
  height: var(--alto-header); display: flex; align-items: center; gap: 28px;
}

.marca {
  display: flex; align-items: center; gap: 11px;
  flex: none; white-space: nowrap; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left;
}
.marca-isotipo {
  width: auto; height: 40px; flex: none;
  filter: drop-shadow(0 1px 3px rgba(10, 29, 22, .45));
}
.marca-texto { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.marca-nombre {
  font-family: var(--serif); font-size: 23px; font-weight: 700;
  color: var(--crema); letter-spacing: .02em;
}
.marca-bajada {
  font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dorado);
}

.menu { display: flex; align-items: center; gap: 2px; margin-left: 8px; min-width: 0; }
.menu-enlace {
  background: none; border: 0; cursor: pointer;
  padding: 26px 12px 24px; color: var(--crema);
  font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
  position: relative; white-space: nowrap;
}
.menu-enlace:hover { color: var(--dorado); }
.menu-enlace::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 20px;
  height: 1.5px; background: var(--dorado); opacity: 0; transition: opacity .2s ease;
}
.menu-enlace.activo::after { opacity: 1; }

.cabecera-acciones {
  margin-left: auto; display: flex; align-items: center; gap: 18px; flex: none;
}
.idioma {
  display: flex; align-items: center; flex: none;
  border: 1px solid rgba(246, 243, 236, .22); border-radius: 999px; overflow: hidden;
}
.idioma button {
  border: 0; cursor: pointer; padding: 7px 13px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  background: transparent; color: rgba(246, 243, 236, .6);
  transition: background .2s ease, color .2s ease;
}
.idioma button.activo { background: var(--dorado); color: var(--tinta); }
.telefono-cabecera {
  font-size: 13px; color: rgba(246, 243, 236, .7);
  letter-spacing: .02em; white-space: nowrap; flex: none;
}
.telefono-cabecera:hover { color: var(--dorado); }
.boton-menu {
  display: none; background: none; border: 1px solid rgba(246, 243, 236, .25);
  border-radius: 9px; padding: 9px 11px; cursor: pointer;
}
.boton-menu span {
  display: block; width: 18px; height: 1.6px; background: var(--crema); border-radius: 2px;
}
.boton-menu span + span { margin-top: 4px; }

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative; background: var(--verde-900);
  /* La portada ocupa la pantalla completa: es la primera impresion y de ahi se
     baja a ver las propiedades. */
  height: min(100vh, 900px); min-height: 560px;
  display: flex; align-items: center;
  /* La barra de arriba es sticky, o sea que ocupa su propio espacio. Para que
     la foto quede DETRAS de ella (y la barra transparente muestre la imagen y
     no el fondo de la pagina), el hero se sube esos mismos pixeles y recupera
     el espacio con relleno interno. */
  margin-top: calc(var(--alto-header) * -1);
  padding-top: var(--alto-header);
}
.hero-fondo { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
/* Varias fotos superpuestas: se muestra una y las demas esperan su turno.
   El cambio es lento y la que entra se pone encima, asi nunca se ve el fondo
   entre una y otra (eso era lo que producia el parpadeo). */
.hero-fondo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 2.2s cubic-bezier(.4, 0, .2, 1);
  filter: saturate(.92);
}
.hero-fondo img.activa { opacity: 1; }

/* Tinte verde sobre la foto: la lleva hacia el color de la marca para que la
   barra de arriba y la imagen se vean del mismo mundo. */
.hero-tinte {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--verde-800);
  mix-blend-mode: multiply;
  /* Suficiente para llevar la foto al verde de la marca, no tanto como para
     apagarla: el velo de abajo ya oscurece bastante. */
  opacity: .26;
}
/* Arriba arranca en el verde puro de la barra y se va abriendo hacia la foto:
   no hay linea de corte entre el encabezado y la imagen. */
.hero-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    var(--verde-900) 0%,
    rgba(13, 36, 28, .78) 12%,
    rgba(13, 36, 28, .36) 40%,
    rgba(13, 36, 28, .58) 72%,
    rgba(13, 36, 28, .95) 100%);
}
.hero-contenido { position: relative; width: 100%; }
.hero-texto { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.hero-antetitulo {
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--dorado);
}
.hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 7.5vw, 82px); line-height: 1.02; letter-spacing: -.015em;
  color: var(--crema); text-wrap: balance;
}
.hero p {
  margin: 0; font-size: clamp(15px, 2vw, 17px); line-height: 1.6;
  color: rgba(246, 243, 236, .82); max-width: 520px;
}
.hero-acciones { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.hero-acciones .boton { padding: 16px 30px; font-size: 14.5px; }
.boton-claro {
  background: rgba(246, 243, 236, .12); color: var(--crema); border-radius: 999px;
  border: 1px solid rgba(246, 243, 236, .35); font-weight: 600;
  backdrop-filter: blur(4px);
}
.boton-claro:hover { background: rgba(246, 243, 236, .2); color: var(--crema); }

/* Boton que lleva al catalogo, que es donde se busca */
.boton-buscar {
  background: var(--verde-800); color: var(--crema); border-radius: 999px;
  font-size: 13.5px; padding: 13px 26px;
}
.boton-buscar:hover { background: var(--verde-700); color: var(--crema); }
.hero-baje {
  position: absolute; bottom: 96px; left: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: inherit; font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(246, 243, 236, .55); white-space: nowrap;
  background: none; border: 0; padding: 8px 14px; cursor: pointer;
  transform: translateX(-50%);
  transition: opacity .45s ease, transform .45s ease, color .25s ease;
}
.hero-baje:hover { color: var(--dorado); }
.hero-baje:hover::after { background: linear-gradient(180deg, rgba(198, 166, 100, 0), var(--dorado)); }
/* Linea que baja sola, para que se entienda que hay mas abajo */
.hero-baje::after {
  content: ''; width: 1px; height: 30px;
  background: linear-gradient(180deg, rgba(198, 166, 100, 0), var(--dorado));
  transform-origin: top;
  animation: bajar 2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes bajar {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  70%  { transform: scaleY(1) translateY(14px); opacity: 0; }
  100% { transform: scaleY(0) translateY(14px); opacity: 0; }
}
/* Se aparta en cuanto la persona empieza a bajar (y deja de recibir clics) */
.hero-baje.se-fue {
  opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
}

/* ------------------------------------------------------------ secciones --- */

.seccion { max-width: var(--ancho); margin: 0 auto; padding: 64px var(--lateral) 0; }
.seccion-encabezado {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.seccion-titulos { display: flex; flex-direction: column; gap: 10px; }

.rejilla-tarjetas {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* --------------------------------------------------------- tarjeta --- */

.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 36, 28, .04); text-align: left;
  padding: 0; font: inherit; color: inherit; width: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.tarjeta:hover { box-shadow: 0 18px 40px rgba(13, 36, 28, .14); transform: translateY(-3px); }
.tarjeta-foto { position: relative; aspect-ratio: 4 / 3; background: var(--verde-800); }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-etiquetas {
  position: absolute; top: 12px; left: 12px; display: flex; gap: 6px;
  pointer-events: none; flex-wrap: wrap;
}
.etiqueta {
  font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(13, 36, 28, .88); color: var(--crema); backdrop-filter: blur(4px);
}
.etiqueta-destacada { background: var(--dorado); color: var(--tinta); font-weight: 700; }

.tarjeta-cuerpo {
  padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.tarjeta-tipo {
  font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris-verde);
}
.tarjeta-titulo {
  margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600;
  line-height: 1.15; color: var(--tinta); text-wrap: pretty;
}
.tarjeta-ubicacion { font-size: 13px; color: var(--gris-texto); }
.tarjeta-detalles { font-size: 12px; color: var(--gris-texto); letter-spacing: .01em; }
.tarjeta-pie {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tarjeta-precio {
  font-size: 18px; font-weight: 700; color: var(--verde-800); letter-spacing: -.01em;
}
.tarjeta-codigo { font-size: 11px; color: var(--gris-suave); letter-spacing: .06em; }
.tarjeta .boton-whatsapp { font-size: 12px; padding: 10px 16px; }

/* Marcador cuando la propiedad todavia no tiene fotos */
.marcador-foto {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 16px;
  color: rgba(246, 243, 236, .5); text-align: center;
}
.marcador-foto svg { width: 30px; height: 30px; opacity: .55; }
.marcador-foto span { font-size: 12px; line-height: 1.4; }

/* ------------------------------------------------------- banda tipos --- */

.banda-tipos { margin-top: 72px; background: var(--verde-800); padding: 56px 0; }
.banda-encabezado {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.banda-tipos h2 {
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 4vw, 34px); color: var(--crema);
}
.banda-nota { font-size: 12px; color: rgba(246, 243, 236, .55); }
.rejilla-tipos {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tipo-boton {
  text-align: left; background: rgba(246, 243, 236, .05);
  border: 1px solid rgba(246, 243, 236, .12); border-radius: 12px;
  padding: 20px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  transition: background .2s ease, border-color .2s ease;
}
.tipo-boton:hover { background: rgba(246, 243, 236, .1); border-color: var(--dorado); }
.tipo-total {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  color: var(--dorado); line-height: 1;
}
.tipo-nombre { font-size: 13px; color: var(--crema); font-weight: 500; }

/* ---------------------------------------------------------- nosotros --- */

.nosotros { max-width: var(--ancho); margin: 80px auto 0; padding: 0 var(--lateral); }
.nosotros-caja {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center; background: var(--blanco);
  border: 1px solid var(--borde); border-radius: 18px; overflow: hidden;
}
.nosotros-foto {
  position: relative; aspect-ratio: 4 / 3; background: var(--verde-800); overflow: hidden;
}
.nosotros-foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotros-texto {
  padding: 48px 48px 48px 0; display: flex; flex-direction: column; gap: 18px;
}
.nosotros-texto h2 {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.08;
  font-size: clamp(28px, 4vw, 40px); color: var(--verde-800);
}
.nosotros-texto p {
  margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--gris-texto); text-wrap: pretty;
}
.nosotros-datos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--linea);
}
.dato { display: flex; flex-direction: column; gap: 4px; }
.dato-numero {
  font-family: var(--serif); font-size: 34px; font-weight: 600;
  color: var(--verde-800); line-height: 1;
}
.dato-etiqueta { font-size: 12px; color: var(--gris-verde); }

/* -------------------------------------------- mision, vision, valores --- */

.proposito { max-width: var(--ancho); margin: 80px auto 0; padding: 0 var(--lateral); }
.proposito-encabezado {
  display: flex; flex-direction: column; gap: 8px;
  text-align: center; align-items: center; margin-bottom: 34px;
}
.proposito-encabezado .titulo-seccion { max-width: 20ch; text-wrap: balance; }

.proposito-caja {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--borde); border: 1px solid var(--borde);
  border-radius: 18px; overflow: hidden;
}
.proposito-bloque {
  background: var(--blanco); padding: 40px 38px;
  display: flex; flex-direction: column; gap: 14px;
}
.proposito-bloque h3 {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 27px;
  color: var(--verde-800); letter-spacing: -.01em;
}
.proposito-bloque p {
  margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--gris-texto); text-wrap: pretty;
}
.proposito-icono {
  width: 52px; height: 52px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: rgba(198, 166, 100, .13); color: var(--dorado);
  border: 1px solid rgba(198, 166, 100, .35);
}
.proposito-icono svg { width: 25px; height: 25px; }

.valores { margin-top: 46px; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.valores-titulo {
  font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--verde-800);
}
.valores-rejilla {
  width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.valor {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 16px; padding: 30px 22px;
  transition: border-color .2s ease, transform .2s ease;
}
.valor:hover { border-color: rgba(198, 166, 100, .55); transform: translateY(-2px); }
.valor-icono {
  width: 54px; height: 54px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--verde-800); color: var(--dorado);
}
.valor-icono svg { width: 26px; height: 26px; }
.valor h3 {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--verde-800);
}
.valor p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--gris-texto); text-wrap: pretty; }

/* ---------------------------------------------------------- contacto --- */

.contacto { margin: 80px 0 0; background: var(--verde-900); padding: 72px 0; }
.contacto-rejilla {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lateral);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
}
.contacto-texto { display: flex; flex-direction: column; gap: 18px; }
.contacto-texto h2 {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.05;
  font-size: clamp(30px, 5vw, 46px); color: var(--crema); text-wrap: balance;
}
.contacto-texto p {
  margin: 0; font-size: 15.5px; line-height: 1.7;
  color: rgba(246, 243, 236, .72); max-width: 440px;
}
.contacto-botones { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.contacto-botones .boton-linea {
  border-color: rgba(246, 243, 236, .3); color: var(--crema); padding: 15px 26px; font-size: 14px;
}
.contacto-botones .boton-linea:hover { border-color: var(--dorado); background: transparent; color: var(--crema); }

.formulario-oscuro {
  background: rgba(246, 243, 236, .05); border: 1px solid rgba(246, 243, 236, .14);
  border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 14px;
}
.formulario-oscuro input,
.formulario-oscuro textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(246, 243, 236, .2);
  padding: 12px 2px; font-size: 15px; color: var(--crema); outline: none; resize: none;
  border-radius: 0;
}
.formulario-oscuro input:focus,
.formulario-oscuro textarea:focus { border-bottom-color: var(--dorado); }
.formulario-oscuro .boton { margin-top: 10px; padding: 15px; border-radius: 10px; }
.nota-formulario {
  font-size: 11.5px; color: rgba(246, 243, 236, .45); text-align: center; line-height: 1.5;
}
.aviso { font-size: 13px; line-height: 1.5; border-radius: 9px; padding: 11px 13px; }
.aviso-error { background: rgba(214, 69, 69, .14); color: #F1B0B0; }
.aviso-exito { background: rgba(31, 168, 85, .16); color: #A8E3C1; }
.aviso-claro.aviso-error { background: #FBEAEA; color: #A33131; }
.aviso-claro.aviso-exito { background: #E7F6ED; color: #1B7A45; }

/* ------------------------------------------------------------ footer --- */

.pie { background: var(--verde-950); padding: 56px 0 32px; margin-top: 0; }
.pie-rejilla {
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lateral);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px;
}
.pie-columna { display: flex; flex-direction: column; gap: 10px; }
.pie-titulo {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado);
}
.pie-columna a, .pie-columna span:not(.pie-titulo) {
  font-size: 13.5px; color: rgba(246, 243, 236, .72);
}
.pie-columna a:hover { color: var(--dorado); }
.pie-logo { width: 100%; max-width: 230px; height: auto; margin-bottom: 4px; }
.pie-descripcion {
  margin: 0; font-size: 13.5px; line-height: 1.7;
  color: rgba(246, 243, 236, .55); max-width: 280px;
}
.pie-legal {
  max-width: var(--ancho); margin: 36px auto 0; padding: 20px var(--lateral) 0;
  border-top: 1px solid rgba(246, 243, 236, .1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: rgba(246, 243, 236, .4);
}

/* --------------------------------------------------------- catalogo --- */

.catalogo { max-width: var(--ancho); margin: 0 auto; padding: 44px var(--lateral) 0; }
.catalogo-encabezado {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 26px; flex-wrap: wrap;
}
.catalogo h1 {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(30px, 5vw, 42px); color: var(--verde-800);
}
.catalogo-conteo { font-size: 13.5px; color: var(--gris-texto); }
.orden-campo { display: flex; align-items: center; gap: 10px; }
.orden-campo span { font-size: 12px; color: var(--gris-verde); }
.select-caja {
  border: 1px solid var(--borde-fuerte); background: var(--blanco); border-radius: 8px;
  padding: 10px 14px; font-size: 13.5px; color: var(--tinta); cursor: pointer;
}

.catalogo-cuerpo {
  display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 28px;
  align-items: start; padding-bottom: 80px;
}
.filtros {
  position: sticky; top: calc(var(--alto-header) + 24px);
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px;
  padding: 22px; display: flex; flex-direction: column; gap: 22px;
}
.filtros-grupo { display: flex; flex-direction: column; gap: 10px; }
.filtros-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris-verde);
}
.entrada {
  border: 1px solid var(--borde); border-radius: 9px; padding: 11px 13px;
  font-size: 13.5px; color: var(--tinta); outline: none; width: 100%; background: var(--blanco);
}
.entrada:focus { border-color: var(--dorado); }
.fila-chips { display: flex; gap: 6px; }
.chips-envoltura { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--borde); background: var(--blanco); color: var(--gris-texto);
  font-size: 12.5px; font-weight: 500; padding: 9px 4px; border-radius: 8px;
  cursor: pointer; transition: all .18s ease; flex: 1;
}
.chip:hover { border-color: var(--verde-800); }
.chip.activo { background: var(--verde-800); border-color: var(--verde-800); color: var(--crema); }
.chip-redondo { border-radius: 999px; padding: 7px 12px; font-size: 12px; flex: none; }
.boton-limpiar {
  border: 0; background: var(--crema-suave); color: var(--gris-texto);
  font-size: 12.5px; font-weight: 600; padding: 11px; border-radius: 9px;
  cursor: pointer; transition: background .2s ease;
}
.boton-limpiar:hover { background: #E7E3D8; }
.boton-filtros-movil { display: none; }

.resultados { display: flex; flex-direction: column; gap: 24px; }
.vacio {
  background: var(--blanco); border: 1px dashed var(--borde-fuerte); border-radius: 14px;
  padding: 56px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px;
}
.vacio-titulo { font-family: var(--serif); font-size: 26px; color: var(--verde-800); }
.vacio-texto { font-size: 14px; color: var(--gris-texto); }
.cargando { text-align: center; padding: 48px; color: var(--gris-verde); font-size: 14px; }

/* ------------------------------------------------------------- ficha --- */

.ficha { max-width: var(--ancho); margin: 0 auto; padding: 28px var(--lateral) 80px; }
.volver {
  background: none; border: 0; padding: 0 0 20px; color: var(--gris-texto);
  font-size: 13px; cursor: pointer;
}
.volver:hover { color: var(--verde-800); }

.galeria {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr);
  gap: 12px; height: 480px; margin-bottom: 36px;
}
.galeria-foto {
  position: relative; border-radius: 14px; overflow: hidden; background: var(--verde-800);
}
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria-foto.principal { grid-row: span 2; }
.galeria-mas {
  position: absolute; right: 12px; bottom: 12px; background: rgba(13, 36, 28, .88);
  color: var(--crema); font-size: 12px; padding: 8px 14px; border-radius: 999px;
  border: 0; cursor: pointer;
}

.ficha-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start;
}
.ficha-principal { display: flex; flex-direction: column; gap: 32px; }
.ficha-encabezado { display: flex; flex-direction: column; gap: 12px; }
.ficha-etiquetas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etiqueta-estado {
  background: var(--verde-800); color: var(--crema); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
}
.ficha-tipo {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-verde);
}
.ficha h1 {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.05;
  font-size: clamp(30px, 5vw, 48px); color: var(--verde-800); text-wrap: balance;
}
.ficha-ubicacion { font-size: 15px; color: var(--gris-texto); }

.especificaciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; padding: 24px;
}
.especificacion { display: flex; flex-direction: column; gap: 5px; }
.especificacion-valor {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  color: var(--verde-800); line-height: 1; white-space: nowrap;
}
.especificacion-etiqueta { font-size: 11.5px; color: var(--gris-verde); letter-spacing: .04em; }

.bloque { display: flex; flex-direction: column; gap: 14px; }
.bloque h2 {
  margin: 0; font-family: var(--serif); font-size: clamp(24px, 3vw, 28px);
  font-weight: 600; color: var(--verde-800);
}
.bloque p {
  margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--gris-texto);
  max-width: 680px; text-wrap: pretty; white-space: pre-line;
}
.lista-amenidades {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px;
}
.amenidad {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--linea); font-size: 14px; color: var(--texto-medio);
}
.amenidad::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--dorado); flex: none;
}
.mapa {
  position: relative; height: 280px; border-radius: 14px; overflow: hidden;
  background: var(--verde-800); border: 0;
}
.mapa iframe { width: 100%; height: 100%; border: 0; }

.ficha-lateral {
  position: sticky; top: calc(var(--alto-header) + 24px);
  display: flex; flex-direction: column; gap: 16px;
}
.tarjeta-precio-caja {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 12px 32px rgba(13, 36, 28, .07);
}
.precio-etiqueta {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-verde);
}
.precio-monto {
  font-size: clamp(26px, 4vw, 34px); font-weight: 700;
  color: var(--verde-800); letter-spacing: -.02em;
}
.precio-codigo { font-size: 12px; color: var(--gris-suave); }
.separador { height: 1px; background: var(--linea); }
.formulario-claro { display: flex; flex-direction: column; gap: 12px; }
.formulario-claro input, .formulario-claro textarea {
  border: 1px solid var(--borde); border-radius: 9px; padding: 12px 13px;
  font-size: 14px; outline: none; resize: none; color: var(--tinta); background: var(--blanco);
}
.formulario-claro input:focus, .formulario-claro textarea:focus { border-color: var(--dorado); }
.formulario-claro .boton { padding: 14px; border-radius: 9px; }
.tarjeta-contacto-oficina {
  background: var(--verde-800); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.tarjeta-contacto-oficina .antetitulo { color: var(--dorado); }
.oficina-nombre { font-family: var(--serif); font-size: 24px; color: var(--crema); }
.oficina-datos { font-size: 13px; color: rgba(246, 243, 236, .62); line-height: 1.6; }
.enlace-telefono { text-align: center; display: block; }

/* ------------------------------------------------------ animaciones --- */

/* Las secciones aparecen conforme se baja. El movimiento es corto y lento a
   proposito: mucho recorrido o mucha velocidad se sienten como parpadeos.
   Tampoco arrancan desde transparente del todo, que es lo que mas se nota. */
.revelar {
  opacity: .001;
  transform: translateY(10px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; will-change: auto; }
/* Escalonado apenas perceptible entre tarjetas de una misma fila */
.revelar[data-retraso="1"] { transition-delay: .05s; }
.revelar[data-retraso="2"] { transition-delay: .1s; }
.revelar[data-retraso="3"] { transition-delay: .15s; }

/* Cambio de vista (inicio -> catalogo -> ficha).
   La que sale se desvanece, se sube la pagina mientras no se ve nada, y la que
   entra aparece con el contenido ya puesto: sin saltos ni parpadeos. */
.vista-sale {
  opacity: .001;
  transition: opacity .2s ease;
  pointer-events: none;
}
/* Solo aparece; sin desplazamiento vertical, que era lo que daba el tiron */
@keyframes entrarVista {
  from { opacity: .001; }
  to   { opacity: 1; }
}
.vista-entra { animation: entrarVista .4s ease both; }

/* La tarjeta en la que se hizo clic se hunde apenas, mientras la pagina se va */
.tarjeta.abriendo {
  transform: scale(.985);
  box-shadow: 0 3px 12px rgba(13, 36, 28, .1);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* -------------------------------------------------- boton flotante --- */

.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: var(--whatsapp); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 30px rgba(13, 36, 28, .28);
  display: flex; align-items: center; gap: 9px;
}
.whatsapp-flotante:hover { background: var(--whatsapp-hover); color: #fff; }
.whatsapp-flotante svg { width: 19px; height: 19px; fill: currentColor; }

/* ========================================================== responsive === */

@media (max-width: 1080px) {
  .telefono-cabecera { display: none; }
  .ficha-cuerpo { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
}

@media (max-width: 960px) {
  :root { --lateral: 24px; }

  /* El menu pasa a desplegable */
  .boton-menu { display: block; order: 3; }
  .menu {
    display: none; position: absolute; top: var(--alto-header); left: 0; right: 0;
    background: var(--verde-900); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 0 16px; margin: 0;
    border-bottom: 1px solid rgba(246, 243, 236, .12);
  }
  .menu.abierto { display: flex; }
  .menu-enlace { padding: 14px var(--lateral); text-align: left; font-size: 15px; }
  .menu-enlace::after { display: none; }
  .menu-enlace.activo { color: var(--dorado); }
  .cabecera { position: sticky; }
  .cabecera-fila { position: relative; gap: 14px; }
  .cabecera-acciones { gap: 10px; }

  .nosotros-caja { grid-template-columns: 1fr; gap: 0; }
  .nosotros-texto { padding: 32px 28px 36px; }
  .proposito-caja { grid-template-columns: 1fr; }
  .proposito-bloque { padding: 32px 28px; }
  .valores-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto-rejilla { grid-template-columns: 1fr; gap: 36px; }

  .catalogo-cuerpo { grid-template-columns: 1fr; }
  .filtros { position: static; display: none; }
  .filtros.abiertos { display: flex; }
  .boton-filtros-movil {
    display: block; width: 100%; border: 1px solid var(--borde-fuerte);
    background: var(--blanco); color: var(--verde-800); font-size: 13.5px;
    font-weight: 600; padding: 13px; border-radius: 10px; cursor: pointer;
    margin-bottom: 14px;
  }

  .ficha-cuerpo { grid-template-columns: 1fr; gap: 32px; }
  .ficha-lateral { position: static; }
  .galeria {
    grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px; height: auto;
  }
  .galeria-foto.principal { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 640px) {
  :root { --lateral: 18px; }

  /* En un telefono no caben logo + idioma + boton + menu en la misma fila.
     "Escribanos" se quita del encabezado: su funcion la cumplen el enlace
     Contacto del menu y el boton flotante de WhatsApp. */
  #boton-escribanos { display: none; }
  .cabecera-fila { gap: 12px; }
  .marca { gap: 8px; }
  .marca-isotipo { height: 33px; }
  .idioma button { padding: 10px 12px; }
  .boton-menu { padding: 11px 12px; }

  /* Objetivos tactiles mas comodos */
  .pie-columna a, .pie-columna span:not(.pie-titulo) { padding: 5px 0; }
  .menu-enlace { padding: 15px var(--lateral); }

  /* En el telefono la portada tambien manda, pero sin pasarse: deja ver que
     abajo sigue contenido. */
  .hero {
    height: auto; min-height: 76vh;
    padding: calc(var(--alto-header) + 30px) 0 88px;
  }
  .hero-texto { gap: 16px; }
  .hero-acciones { gap: 10px; margin-top: 6px; }
  .hero-acciones .boton { flex: 1; padding: 14px 18px; font-size: 13.5px; text-align: center; }
  .hero-baje { bottom: 26px; font-size: 9px; }
  .hero-baje::after { height: 22px; }

  .seccion { padding-top: 44px; }
  .seccion-encabezado { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .seccion-titulos { gap: 6px; }
  .seccion-encabezado .boton-buscar { width: 100%; padding: 13px; }
  .rejilla-tarjetas { grid-template-columns: 1fr; gap: 18px; }
  .banda-tipos { margin-top: 52px; padding: 44px 0; }
  .rejilla-tipos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .nosotros { margin-top: 56px; }
  .nosotros-datos { grid-template-columns: 1fr; gap: 14px; }
  .proposito { margin-top: 56px; }
  .valores-rejilla { grid-template-columns: 1fr; gap: 14px; }
  .valor { padding: 24px 20px; }
  .contacto { margin-top: 56px; padding: 52px 0; }
  .formulario-oscuro { padding: 22px; }

  .tarjeta-pie { flex-direction: column; align-items: stretch; gap: 12px; }
  .tarjeta .boton-whatsapp { width: 100%; text-align: center; }

  .catalogo { padding-top: 28px; }
  .catalogo-encabezado { gap: 16px; }
  .orden-campo { width: 100%; }
  .orden-campo .select-caja { flex: 1; }

  .galeria { grid-template-rows: 200px 110px; gap: 8px; }
  .especificaciones { padding: 18px; gap: 14px; }
  .tarjeta-precio-caja { padding: 22px; }
  .lista-amenidades { grid-template-columns: 1fr; }

  .pie-legal { justify-content: flex-start; }
  .whatsapp-flotante { right: 14px; bottom: 14px; padding: 13px 17px; font-size: 13px; }
}

/* Si el sistema pide menos movimiento, se muestra todo quieto y ya. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .tarjeta:hover { transform: none; }
  .revelar { opacity: 1; transform: none; }
  .hero-fondo img { opacity: 0; }
  .hero-fondo img.activa { opacity: 1; }
}