/* ==========================================================================
   Martini Inmobiliaria — hoja única
   Sin build step. Custom properties + grid + flex.
   ========================================================================== */

:root{
  --crema:#FAF7F4;
  --blanco:#fff;
  --tinta:#0F2350;
  --noche:#0B1424;
  --rojo:#D8232A;
  --rojo-osc:#AB1A20;
  --rojo-btn:#B3121A;
  --rojo-btn-h:#8E0D14;
  --gris:#5C6784;
  --gris-2:#3C4A6B;
  --gris-3:#8A93A8;
  --gris-bg:#F2F4F9;
  --gris-bg-2:#EEF1F6;
  --placeholder:#DFE4EE;
  --verde:#25D366;
  --verde-h:#1FB855;
  --verde-punto:#7BE38B;

  --linea:rgba(15,35,80,.1);
  --linea-suave:rgba(15,35,80,.09);
  --linea-input:rgba(15,35,80,.14);

  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --max:1320px;
  --pad:clamp(20px,5vw,72px);
  --seccion:clamp(64px,7vw,112px);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:var(--rojo);text-decoration:none}
a:hover{color:var(--rojo-osc)}
img{max-width:100%}
select,input,textarea,button{font-family:inherit}

@keyframes mtFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mtPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

.contenedor{max-width:var(--max);margin:0 auto}
.solo-desktop{display:block}
.solo-mobile{display:none}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

.cabecera{
  position:sticky;top:0;z-index:60;
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
  box-shadow:0 2px 18px -10px rgba(15,35,80,.28);
}
.cabecera__fila{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.cabecera__logo{display:flex;align-items:center;gap:13px;flex:none}
.cabecera__logo img{height:54px;width:54px;object-fit:cover;border-radius:3px;display:block}

.nav{display:flex;align-items:center;gap:34px}
.nav__link{
  color:var(--gris-2);font-size:14px;font-weight:600;
  padding:6px 0;border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s;
}
.nav__link:hover{color:var(--tinta);border-bottom-color:var(--rojo)}
.nav__link.is-activo{color:var(--tinta);font-weight:700;border-bottom-color:var(--rojo)}

.btn-wa{
  display:flex;align-items:center;gap:9px;
  background:var(--rojo);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  padding:12px 20px;border-radius:2px;transition:background .18s;
}
.btn-wa:hover{background:var(--rojo-osc);color:#fff}
.btn-wa__punto{width:7px;height:7px;border-radius:50%;background:var(--verde-punto);display:block}

.hamburguesa{
  width:46px;height:46px;display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:1px solid rgba(15,35,80,.2);border-radius:2px;cursor:pointer;padding:0 12px;
}
.hamburguesa span{height:1.5px;background:var(--noche);display:block}
.hamburguesa span:nth-child(2){background:var(--rojo)}

/* ------------------------------------------------------------ menú móvil */

.menu-movil{
  position:fixed;inset:0;z-index:80;background:var(--noche);
  display:none;flex-direction:column;
  padding:22px clamp(20px,6vw,40px) 34px;
  animation:mtFadeUp .22s ease both;
}
.menu-movil.is-abierto{display:flex}
.menu-movil__top{display:flex;align-items:center;justify-content:space-between;height:56px}
.menu-movil__top img{height:52px;width:auto}
.menu-movil__cerrar{
  width:46px;height:46px;background:none;border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;border-radius:2px;
}
.menu-movil__nav{display:flex;flex-direction:column;gap:2px;margin-top:36px}
.menu-movil__nav a{
  color:#fff;font-family:var(--serif);font-size:34px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.menu-movil__pie{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.menu-movil__wa{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--rojo);color:#fff;font-size:15px;font-weight:700;padding:18px;border-radius:2px;
}
.menu-movil__datos{color:rgba(255,255,255,.5);font-size:13px;text-align:center}

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

.hero{position:relative;background:var(--noche);overflow:hidden}
.hero__fondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;filter:saturate(.82) contrast(1.02);
}
.hero__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,13,12,.66) 0%,rgba(14,13,12,.38) 42%,rgba(14,13,12,.84) 100%);
}
.hero__cuerpo{
  position:relative;max-width:var(--max);margin:0 auto;
  padding:clamp(40px,5vw,76px) var(--pad) clamp(24px,2.6vw,36px);
}
.hero__centro{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__logo{width:clamp(200px,24vw,320px);height:auto;display:block;margin:-8px 0 -6px}
.hero__titulo{
  margin:0;max-width:20ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(42px,6.6vw,86px);line-height:1.02;letter-spacing:-.015em;
  color:#fff;text-wrap:balance;
}
.hero__chip{
  margin-top:26px;display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:999px;padding:9px 20px;
}
.hero__chip span:first-child{width:7px;height:7px;border-radius:50%;background:var(--rojo);display:block}
.hero__chip span:last-child{color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hero__bajada{
  margin:24px 0 0;max-width:56ch;color:rgba(255,255,255,.82);
  font-size:clamp(15px,1.5vw,18px);line-height:1.65;text-wrap:pretty;
}
.hero__cta{margin:22px 0 0;color:#fff;font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:-.01em}

/* -------------------------------------------------------------- buscador */

.buscador-wrap{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(36px,4vw,54px)}
.buscador{
  background:var(--blanco);border-radius:16px;
  box-shadow:0 30px 70px -22px rgba(15,35,80,.5);
  padding:clamp(18px,2vw,26px);
}
.buscador__tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;justify-content:center}
.buscador__tab{
  background:none;color:var(--gris);border:1px solid rgba(15,35,80,.16);
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:11px 22px;border-radius:2px;cursor:pointer;transition:.18s;
}
.buscador__tab:hover{color:var(--tinta);border-color:rgba(15,35,80,.4)}
.buscador__tab.is-activo{background:var(--noche);color:#fff;border-color:var(--noche)}
.buscador__campos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:14px;align-items:end;
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo__label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.campo select,.campo input:not([type="range"]){
  appearance:none;width:100%;background:var(--blanco);
  border:1px solid var(--linea-input);border-radius:2px;
  padding:14px;font-size:14.5px;color:var(--tinta);
}
.campo select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C6784' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.campo input:not([type="range"]):focus,.campo select:focus{outline:2px solid var(--rojo);outline-offset:-1px}
.btn-buscar{
  background:var(--rojo);color:#fff;border:none;padding:15px 26px;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;height:52px;width:100%;transition:background .18s;
}
.btn-buscar:hover{background:var(--rojo-osc)}

/* ----------------------------------------------------------------- stats */

.stats{background:var(--noche);border-top:1px solid rgba(255,255,255,.08);padding:clamp(28px,3vw,40px) var(--pad)}
.stats__grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 20px;
}
.stats__n{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);color:#fff;line-height:1}
.stats__t{margin-top:6px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

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

.seccion{padding:var(--seccion) var(--pad)}
.seccion--oscura{background:var(--noche)}
.seccion--gris{background:var(--gris-bg-2);padding:clamp(58px,6.5vw,100px) var(--pad)}

.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.eyebrow span:first-child{width:26px;height:1px;background:var(--rojo);display:block}
.eyebrow span:last-child{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rojo)}
.seccion--oscura .eyebrow span:last-child{color:rgba(255,255,255,.55)}

.titulo-seccion{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.01em;max-width:22ch;
}
.seccion--oscura .titulo-seccion{color:#fff}

.encabezado{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:clamp(30px,3.4vw,46px);
}
.encabezado__nota{margin:0;max-width:38ch;color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.6}
.link-todo{
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta);border-bottom:1.5px solid var(--rojo);padding-bottom:5px;
}
.link-todo:hover{color:var(--rojo)}

/* ----------------------------------------------------------- grilla cards */

/* auto-fill y no auto-fit: con auto-fit las columnas vacías colapsan y una
   sola propiedad se estira a todo el ancho. Con auto-fill las columnas se
   mantienen, así la tarjeta mide siempre lo mismo haya una o cuarenta. */
.grilla-propiedades{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));
  gap:clamp(20px,2.2vw,30px);
}

.card{
  display:flex;flex-direction:column;background:var(--blanco);
  border:1px solid var(--linea-suave);overflow:hidden;
  box-shadow:0 2px 4px rgba(15,35,80,.04),0 18px 40px -28px rgba(15,35,80,.35);
  transition:transform .28s ease,box-shadow .28s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 8px rgba(15,35,80,.05),0 30px 56px -26px rgba(15,35,80,.42);
}
.card__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--placeholder)}
.card__foto img{width:100%;height:100%;object-fit:cover;display:block}
.card__badges{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.badge{
  background:var(--rojo);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;padding:7px 14px;
  box-shadow:0 6px 14px -6px rgba(216,35,42,.55);
}
.badge--claro{
  background:rgba(255,255,255,.94);color:var(--tinta);
  font-size:10.5px;letter-spacing:.09em;padding:6px 12px;box-shadow:none;
}
.card__fotos{
  position:absolute;bottom:14px;right:14px;display:flex;align-items:center;gap:6px;
  background:rgba(14,13,12,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  color:#fff;font-size:12px;font-weight:700;padding:6px 11px;
}
.card__cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card__precio-fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.precio{font-family:var(--serif);font-size:29px;font-weight:400;letter-spacing:0;color:var(--rojo);line-height:1.05}
.precio__periodo{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--gris-3);letter-spacing:0}
.chip-tipo{
  flex:none;background:var(--gris-bg);color:var(--gris-2);
  font-size:11.5px;font-weight:700;white-space:nowrap;padding:6px 12px;
}
.card__titulo{
  margin:12px 0 0;font-size:17.5px;font-weight:700;line-height:1.32;
  color:var(--tinta);letter-spacing:-.01em;text-wrap:pretty;
}
.card__titulo a{color:inherit}
.card__titulo a:hover{color:var(--rojo)}
.card__ubicacion{margin-top:9px;display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--gris)}
.card__nota{margin:10px 0 0;font-size:12.5px;color:var(--gris-3);line-height:1.4}

.card__acciones{margin-top:18px;display:flex;gap:10px;align-items:stretch}
.btn-ver{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--rojo-btn);color:#fff;font-size:13.5px;font-weight:700;
  letter-spacing:.03em;padding:15px;transition:background .18s;
}
.btn-ver:hover{background:var(--rojo-btn-h);color:#fff}
.btn-wa-icono{
  flex:none;width:52px;display:flex;align-items:center;justify-content:center;
  background:var(--verde);transition:background .18s;
}
.btn-wa-icono:hover{background:var(--verde-h)}

/* compartir: mismo bloque que el de WhatsApp, pero en versión secundaria */
.btn-compartir-icono{
  flex:none;width:52px;display:flex;align-items:center;justify-content:center;
  background:var(--gris-bg);border:none;color:var(--gris-2);
  cursor:pointer;transition:.18s;
}
.btn-compartir-icono:hover{background:var(--tinta);color:#fff}
.btn-compartir-icono.is-ok{background:var(--tinta);color:#fff}

.sin-resultados{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  background:var(--blanco);border:1px solid var(--linea-suave);
}
.sin-resultados p{margin:0 0 8px;font-family:var(--serif);font-size:24px}
.sin-resultados span{color:var(--gris);font-size:14.5px}

/* ----------------------------------------------------------------- zonas */

.grilla-zonas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(148px,20vw,230px),1fr));
  gap:clamp(12px,1.6vw,22px);
}
.zona{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:12px;color:#fff}
.zona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.zona:hover img{transform:scale(1.05)}
.zona__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,12,.05) 40%,rgba(14,13,12,.86) 100%)}
.zona__texto{position:absolute;left:20px;right:20px;bottom:20px;display:block}
.zona__nombre{display:block;font-family:var(--serif);font-size:clamp(24px,2.4vw,30px);line-height:1.05;color:#fff}
.zona__total{display:block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* --------------------------------------------------------------- empresa */

.empresa{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(34px,5vw,72px);align-items:start;
}
.empresa__texto{margin:22px 0 0;font-size:16px;line-height:1.68;color:var(--gris);max-width:46ch;text-wrap:pretty}
.empresa__botones{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.btn-solido{
  background:var(--noche);color:#fff;font-size:13.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:16px 26px;border-radius:2px;transition:background .18s;
}
.btn-solido:hover{background:var(--rojo);color:#fff}
.btn-linea{
  border:1px solid rgba(15,35,80,.2);color:var(--tinta);font-size:13.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:16px 26px;border-radius:2px;transition:border-color .18s;
}
.btn-linea:hover{border-color:var(--tinta);color:var(--tinta)}

.servicios{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--linea);
}
.servicio{background:var(--crema);padding:30px 26px 34px}
.servicio__n{font-family:var(--serif);font-size:22px;color:var(--rojo)}
.servicio h3{margin:14px 0 10px;font-size:17px;font-weight:700}
.servicio p{margin:0;font-size:14.5px;line-height:1.6;color:var(--gris)}

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

.contacto{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(30px,4vw,60px);align-items:start;
}
.datos{margin-top:32px;display:flex;flex-direction:column;gap:1px;background:var(--linea);border-top:1px solid var(--linea)}
.dato{background:var(--crema);padding:16px 0;display:flex;flex-direction:column;gap:7px}
.dato__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.dato__valor,.dato a{font-size:15px;color:var(--tinta)}
.dato a:hover{color:var(--rojo)}
.mapa{margin-top:26px;border:1px solid var(--linea);border-radius:3px;overflow:hidden;height:clamp(220px,26vw,300px)}
.mapa iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.02)}

.form{background:var(--noche);padding:clamp(26px,3vw,44px);border-radius:3px}
.form h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:28px;color:#fff}
.form__nota{margin:0 0 26px;font-size:14px;color:rgba(255,255,255,.55)}
.form__fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.form input,.form select,.form textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:2px;padding:15px;color:#fff;font-size:14.5px;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.45)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--rojo);outline-offset:-1px}
.form select{appearance:none;cursor:pointer}
.form select option{color:var(--tinta)}
.form textarea{resize:vertical}
.form>input,.form>select,.form>textarea{margin-top:14px}
.form__enviar{
  width:100%;margin-top:20px;background:var(--rojo);color:#fff;border:none;padding:17px;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;transition:background .18s;
}
.form__enviar:hover{background:#E63B42}
.form__ok{margin:16px 0 0;font-size:13.5px;color:var(--verde-punto)}
.form__error{margin:16px 0 0;font-size:13.5px;color:#FF9A9E}
.form__honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

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

.pie{background:var(--noche);padding:clamp(48px,6vw,84px) var(--pad) 96px;color:rgba(255,255,255,.6)}
.pie__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:38px 30px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);
}
.pie__logo{height:72px;width:auto;display:block;margin-left:-6px}
.pie__sobre{margin:16px 0 0;font-size:14px;line-height:1.6;max-width:30ch}
.pie h4{margin:0 0 16px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.pie__links{display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.pie__links a,.pie__links span{color:rgba(255,255,255,.6)}
.pie__links a:hover{color:#fff}
.pie__legal{
  padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:12.5px;color:rgba(255,255,255,.4);
}

/* -------------------------------------------------------------- fab wa */

.fab-wa{
  position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:70;
  width:60px;height:60px;border-radius:50%;background:var(--verde);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.45);
  animation:mtPulse 3.4s ease-in-out infinite;
}
.fab-wa:hover{background:var(--verde-h)}

/* ---------------------------------------------------------- responsive */

@media (max-width:899px){
  .solo-desktop{display:none}
  .solo-mobile{display:block}
  .hamburguesa{display:flex}
  .encabezado{align-items:flex-start}
  .encabezado__nota{color:rgba(255,255,255,.6)}
}

@media (max-width:560px){
  .cabecera__fila{height:66px}
  .cabecera__logo img{height:44px;width:44px}
  .buscador__campos{grid-template-columns:1fr}
  .pie__legal{justify-content:flex-start}
}

/* ==========================================================================
   Ficha de propiedad
   ========================================================================== */

.miga{background:var(--blanco);border-bottom:1px solid rgba(15,35,80,.08);padding:14px var(--pad)}
.miga__fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--gris-3)}
.miga__fila a{color:var(--gris-2)}
.miga__fila a:hover{color:var(--rojo)}
.miga__actual{color:var(--tinta);font-weight:600}

/* ------------------------------------------------------------------ galería */

.galeria{padding:clamp(18px,2.4vw,30px) var(--pad) 0}
.galeria__principal{position:relative;aspect-ratio:16/9;background:var(--placeholder);overflow:hidden}
.galeria__principal img{width:100%;height:100%;object-fit:cover;display:block}
.galeria__badges{position:absolute;top:16px;left:16px;display:flex;gap:8px}
.galeria__badges .badge{padding:8px 15px}
.galeria__badges .badge--claro{padding:8px 13px}

.galeria__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;background:rgba(255,255,255,.92);border:none;
  cursor:pointer;font-size:24px;color:var(--tinta);line-height:1;transition:background .18s;
}
.galeria__nav:hover{background:#fff}
.galeria__nav--prev{left:16px}
.galeria__nav--next{right:16px}
.galeria__contador{
  position:absolute;bottom:16px;right:16px;background:rgba(14,13,12,.66);
  color:#fff;font-size:12.5px;font-weight:700;padding:7px 12px;
}

/* auto-fill y no auto-fit: con auto-fit las columnas sobrantes colapsan y
   con dos o tres fotos las miniaturas quedaban casi tan grandes como la
   principal. Con auto-fill mantienen siempre el mismo tamaño. */
.galeria__tiras{
  margin-top:10px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(120px,30%),1fr));
}
.galeria__tira{
  position:relative;padding:0;border:none;cursor:pointer;aspect-ratio:4/3;
  background:var(--placeholder);overflow:hidden;display:block;
}
.galeria__tira img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .18s;display:block}
.galeria__tira:hover img{opacity:.85}
.galeria__tira::after{content:"";position:absolute;inset:0;border:2px solid transparent;transition:border-color .18s}
.galeria__tira.is-activa img{opacity:1}
.galeria__tira.is-activa::after{border-color:var(--rojo)}

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

.ficha{padding:clamp(30px,4vw,52px) var(--pad) clamp(50px,6vw,90px)}
.ficha__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(28px,3.4vw,54px);align-items:start;
}
.ficha__principal{min-width:0}

/* El separador es el punto del propio texto, no una rayita dibujada aparte:
   así se ve igual en computadora y en celular. */
.ficha__eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo);
}
.ficha__titulo{
  margin:14px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance;
}
.ficha__meta{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14.5px;color:var(--gris)}
.ficha__meta-item{display:flex;align-items:center;gap:7px}
.ficha__punto{opacity:.4}

.ficha__specs{
  margin-top:30px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:24px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:22px 12px;
}
.ficha__spec{display:flex;flex-direction:column;gap:6px}
.ficha__spec-n{font-size:18px;font-weight:800;line-height:1}
.ficha__spec-t{font-size:11.5px;font-weight:600;color:var(--gris-3);letter-spacing:.04em;text-transform:uppercase}

.ficha__h2{margin:38px 0 0;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.ficha__descripcion{margin-top:16px;font-size:16px;line-height:1.75;color:var(--gris-2)}
.ficha__descripcion p{margin:0 0 16px;text-wrap:pretty}
.ficha__descripcion p:last-child{margin-bottom:0}
.ficha__descripcion ul,.ficha__descripcion ol{margin:0 0 16px;padding-left:20px}
.ficha__nota{margin:12px 0 0;font-size:14.5px;color:var(--gris)}

.ficha__caracteristicas{
  margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);
}
.caracteristica{background:var(--crema);padding:14px 16px;font-size:14.5px;display:flex;align-items:center;gap:10px}
.caracteristica span{width:6px;height:6px;background:var(--rojo);display:block;flex:none}

.ficha__video{margin-top:16px;background:#000;aspect-ratio:16/9}
.ficha__video video{width:100%;height:100%;display:block}

.ficha__mapa{margin-top:16px;border:1px solid var(--linea);height:clamp(230px,26vw,320px)}
.ficha__mapa iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.02)}

/* ------------------------------------------------------------------ lateral */

.ficha__aside{min-width:0;position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}

.panel{
  background:var(--blanco);border:1px solid var(--linea);
  box-shadow:0 2px 4px rgba(15,35,80,.04),0 20px 44px -30px rgba(15,35,80,.4);
  padding:clamp(22px,2.4vw,30px);
}
.panel__label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-3)}
.panel__precio{
  margin-top:8px;font-family:var(--serif);font-size:clamp(36px,4vw,48px);font-weight:400;
  letter-spacing:0;color:var(--rojo);line-height:1;
}
.panel__precio .precio__periodo{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--gris-3);letter-spacing:0}
.panel__nota{margin-top:8px;font-size:13.5px;color:var(--gris);line-height:1.5}

.panel__agencia{margin-top:22px;padding-top:20px;border-top:1px solid var(--linea);display:flex;align-items:center;gap:13px}
.panel__agencia img{width:46px;height:46px;object-fit:cover;flex:none;border-radius:2px}
.panel__agencia-n{font-size:14.5px;font-weight:700}
.panel__agencia-t{font-size:12.5px;color:var(--gris-3)}

.panel__acciones{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.btn-panel{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:14.5px;font-weight:700;padding:16px;border:none;cursor:pointer;
  text-align:center;transition:background .18s,border-color .18s;
}
.btn-panel--wa{background:var(--verde);color:#fff}
.btn-panel--wa:hover{background:var(--verde-h);color:#fff}
.btn-panel--tel{background:var(--rojo-btn);color:#fff;font-size:14px}
.btn-panel--tel:hover{background:var(--rojo-btn-h);color:#fff}
.btn-panel--linea{background:none;border:1px solid rgba(15,35,80,.2);color:var(--tinta);font-size:14px}
.btn-panel--linea:hover{border-color:var(--tinta)}

.panel__form{
  display:none;margin-top:16px;padding-top:18px;border-top:1px solid var(--linea);
  flex-direction:column;gap:10px;animation:mtFadeUp .2s ease both;
}
.panel__form.is-abierto{display:flex}
.panel__form input,.panel__form textarea{
  background:#F7F8FB;border:1px solid var(--linea-input);
  padding:14px;font-size:14.5px;color:var(--tinta);width:100%;border-radius:2px;
}
.panel__form textarea{resize:vertical}
.panel__form input:focus,.panel__form textarea:focus{outline:2px solid var(--rojo);outline-offset:-1px}
.panel__enviar{
  background:var(--noche);color:#fff;border:none;padding:15px;
  font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:background .18s;
}
.panel__enviar:hover{background:var(--tinta)}
.panel__ok{margin:2px 0 0;font-size:13.5px;color:#1F9D4D}
.panel__error{margin:2px 0 0;font-size:13.5px;color:var(--rojo-btn)}

.panel-tasacion{background:var(--noche);padding:22px 24px;color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.6}
.panel-tasacion__t{color:#fff;font-size:14.5px;font-weight:700;margin-bottom:8px}
.panel-tasacion a{color:#fff;border-bottom:1px solid var(--rojo)}
.panel-tasacion a:hover{color:#fff;border-bottom-color:#fff}

.panel-tecnica{
  border:1px solid var(--linea);padding:20px 22px;
  display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--gris);
}
.panel-tecnica>div{display:flex;justify-content:space-between;gap:14px}
.panel-tecnica>div>span:last-child{color:var(--tinta);font-weight:700;text-align:right}

/* --------------------------------------------------------------- similares */

.similares{background:var(--gris-bg-2);padding:clamp(52px,6vw,88px) var(--pad)}

@media (max-width:899px){
  .ficha__aside{position:static}
  .similares .encabezado{align-items:flex-start}
  .galeria__tiras{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
}

/* ==========================================================================
   Listado / buscador
   ========================================================================== */

.listado-cab{padding:clamp(34px,4vw,60px) var(--pad) clamp(20px,2.4vw,30px)}
.listado-cab .eyebrow{margin-bottom:14px}
.listado-cab__nota{margin:14px 0 0;font-size:15px;color:var(--gris)}

/* ------------------------------------------------------------------ filtros */

.filtros{
  position:sticky;top:78px;z-index:50;
  background:var(--blanco);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:18px var(--pad);
}
.filtros__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filtros__tab{
  background:none;color:var(--gris);border:1px solid rgba(15,35,80,.16);
  font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:10px 20px;border-radius:2px;cursor:pointer;transition:.18s;user-select:none;
}
.filtros__tab input{position:absolute;opacity:0;width:0;height:0}
.filtros__tab:hover{color:var(--tinta);border-color:rgba(15,35,80,.4)}
.filtros__tab.is-activo{background:var(--noche);color:#fff;border-color:var(--noche)}
.filtros__tab:focus-within{outline:2px solid var(--rojo);outline-offset:2px}

.filtros__campos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:12px;align-items:end;
}
.filtros .btn-buscar{height:48px}
.filtros .campo select,.filtros .campo input:not([type="range"]){padding:12px 14px;font-size:14px}
.filtros .campo select{padding-right:32px}

.filtros__chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.chip-filtro{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gris-bg);color:var(--gris-2);
  font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:2px;
  transition:background .18s,color .18s;
}
.chip-filtro:hover{background:var(--rojo);color:#fff}
.chip-filtro span{font-size:15px;line-height:1;opacity:.6}
.chip-filtro--limpiar{background:none;border:1px solid var(--linea);color:var(--gris)}
.chip-filtro--limpiar:hover{background:none;border-color:var(--tinta);color:var(--tinta)}

/* ------------------------------------------------------------------ listado */

.listado{padding:clamp(28px,3.4vw,46px) var(--pad) var(--seccion)}
.listado__barra{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:clamp(20px,2.4vw,30px);
}
.listado__conteo{font-size:14px;color:var(--gris)}
.listado__orden{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gris)}
.listado__orden select{
  appearance:none;background:var(--blanco);border:1px solid var(--linea-input);
  border-radius:2px;padding:10px 32px 10px 12px;font-size:14px;color:var(--tinta);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C6784' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}

/* --------------------------------------------------------------- paginación */

.paginacion{
  margin-top:clamp(34px,4vw,54px);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:8px;
}
.paginacion a,.paginacion span{
  min-width:44px;height:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;border:1px solid var(--linea);
  color:var(--gris-2);background:var(--blanco);transition:.18s;
}
.paginacion a:hover{border-color:var(--tinta);color:var(--tinta)}
.paginacion .is-actual{background:var(--noche);border-color:var(--noche);color:#fff;font-weight:700}
.paginacion__gap{border:none;background:none;min-width:20px;padding:0;color:var(--gris-3)}

@media (max-width:899px){
  .filtros{position:static}
  .listado__barra{justify-content:flex-start}
}

/* ==========================================================================
   Ajustes de pulido
   ========================================================================== */

/* --------------------------------- cabecera que se transparenta al bajar */

.cabecera{
  transition:background-color .3s ease, box-shadow .3s ease,
             backdrop-filter .3s ease, border-color .3s ease;
}
.cabecera.is-scrolled{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:rgba(15,35,80,.06);
  box-shadow:0 4px 26px -14px rgba(15,35,80,.4);
}
.cabecera.is-scrolled .cabecera__fila{height:66px}
.cabecera__fila{transition:height .3s ease}
.cabecera__logo img{transition:height .3s ease,width .3s ease}
.cabecera.is-scrolled .cabecera__logo img{height:46px;width:46px}

/* el logo nuevo es un cuadrado con fondo propio: sin recorte ni bordes */
.cabecera__logo img{object-fit:contain;border-radius:2px}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cabecera.is-scrolled{background:rgba(255,255,255,.94)}
}

/* -------------------------------------- specs sobre la foto de la tarjeta */

.card__pie{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:26px 14px 12px;
  background:linear-gradient(180deg,rgba(11,20,36,0) 0%,rgba(11,20,36,.72) 100%);
  pointer-events:none;
}
.card__specs{display:flex;flex-wrap:wrap;gap:6px 12px;min-width:0}
.card__spec{
  display:inline-flex;align-items:center;gap:5px;
  color:#fff;font-size:12.5px;font-weight:700;line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  white-space:nowrap;
}
.card__spec svg{opacity:.9;flex:none}

.card__fotos{
  position:static;flex:none;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:5px 9px;font-size:11.5px;
}

.card__cuerpo{padding-top:18px}
.card__acciones{margin-top:18px;padding-top:18px}

/* ----------------------------------------- zonas: puntas rectas y carrusel */

.zona{border-radius:0}

@media (max-width:899px){
  .grilla-zonas{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* se sale del padding de la sección para que el carrusel llegue al borde */
    margin:0 calc(var(--pad) * -1);
    padding:0 var(--pad) 6px;
  }
  .grilla-zonas::-webkit-scrollbar{display:none}
  .grilla-zonas .zona{
    flex:0 0 66%;max-width:280px;scroll-snap-align:start;aspect-ratio:3/4;
  }
}

@media (max-width:480px){
  .grilla-zonas .zona{flex-basis:78%}
}

/* ==========================================================================
   Ajustes: hero, menú móvil, footer
   ========================================================================== */

/* El logo blanco venía con 26% de aire arriba y 35% abajo dentro de un lienzo
   cuadrado. Ya recortado a 2:1, el espaciado se controla desde acá. */

.hero__cuerpo{padding-top:clamp(26px,3.2vw,48px)}
.hero__logo{
  width:clamp(210px,26vw,340px);
  height:auto;
  margin:0 0 clamp(14px,1.8vw,22px);
}

/* menú móvil: sin logo, solo el botón de cerrar a la derecha */
.menu-movil__top{justify-content:flex-end}

/* footer: el logo tiene que pesar visualmente como el de la cabecera */
.pie__logo{
  height:auto;
  width:clamp(190px,17vw,240px);
  margin-left:0;
}
.pie__sobre{margin-top:18px}

/* ==========================================================================
   Deslizante de precio (reescrito con manijas propias)
   ========================================================================== */

/* rótulo arriba, valor debajo y la barra al final */
.campo--rango{gap:0;min-width:210px}
.campo--rango .campo__label{display:block;margin-bottom:8px}
.rango__salida{
  display:block;
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--tinta);font-variant-numeric:tabular-nums;line-height:1.2;
}

@media (min-width:900px){
  .buscador .campo--rango,
  .filtros  .campo--rango{grid-column:span 2}
}

.rango{position:relative;height:44px;display:flex;align-items:center;touch-action:none}

.rango__riel{
  position:absolute;left:0;right:0;height:5px;border-radius:3px;
  background:rgba(15,35,80,.14);
}
.rango__activo{position:absolute;height:100%;border-radius:3px;background:var(--rojo)}

.rango__manija{
  position:absolute;top:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;background:#fff;border:3px solid var(--rojo);
  box-shadow:0 2px 8px rgba(15,35,80,.28);
  cursor:grab;touch-action:none;z-index:2;
}
.rango__manija:hover{transform:scale(1.06)}
.rango__manija.is-arrastrando{cursor:grabbing;transform:scale(1.12);z-index:3}
.rango__manija:focus-visible{outline:none;box-shadow:0 0 0 5px rgba(216,35,42,.28)}

/* Sin JS los dos range nativos quedan visibles y usables. En cuanto el script
   toma el control se ocultan y mandan solo el valor al formulario. */
.rango__nativo{
  position:absolute;left:0;width:100%;margin:0;
  accent-color:var(--rojo);
}
.rango__nativo[name="precio_max"]{top:28px}

/* mientras el script no tomó el control, la barra crece para que los dos
   deslizadores nativos entren uno debajo del otro */
.campo--rango:not(.rango--listo) .rango{height:auto;min-height:72px;padding-top:8px}
.campo--rango:not(.rango--listo) .rango__manija,
.campo--rango:not(.rango--listo) .rango__riel{display:none}

.rango--listo .rango__nativo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Tarjetas parejas
   ========================================================================== */

/* stretch para que todas las de una fila midan lo mismo... */
.grilla-propiedades,

/* ...y el bloque de botones se empuja al piso, así quedan alineados entre sí
   aunque un título ocupe una línea y otro dos. */
.card__acciones{margin-top:auto}

/* el título reserva dos líneas: evita el escalón cuando uno es corto */
.card__titulo{min-height:calc(1.32em * 2)}

/* la nota de precio no debe empujar los botones */
.card__nota{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* sin topbar, la cabecera queda pegada arriba */
.filtros{top:78px}
.cabecera.is-scrolled ~ * .filtros{top:66px}

/* el <picture> del hero no debe interferir con el fondo absoluto */
.hero picture{position:absolute;inset:0;display:block}

/* ==========================================================================
   Tarjeta: tipo sobre la foto, estado en la esquina, precio compacto
   ========================================================================== */

.badge--tipo{
  background:rgba(255,255,255,.94);color:var(--tinta);
  font-size:10.5px;font-weight:800;letter-spacing:.09em;padding:6px 12px;box-shadow:none;
}

/* estado comercial: esquina derecha, azul, para que se note */
.card__marcas{
  position:absolute;top:14px;right:14px;z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
}
.badge--estado{
  background:var(--tinta);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:7px 14px;
  box-shadow:0 6px 14px -6px rgba(15,35,80,.6);
}

/* la nota de precio va pegada al precio, no en una línea suelta */
.card__precio-fila{align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.card__nota{
  margin:0;font-size:12.5px;font-weight:600;color:var(--gris-3);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* la ubicación se acerca al precio */
.card__titulo{margin-top:8px}
.card__ubicacion{margin-top:6px}

/* ==========================================================================
   Galería: ampliar con un toque y una sola fila de miniaturas en celular
   ========================================================================== */

.galeria__zoom{
  display:block;width:100%;height:100%;padding:0;border:none;
  background:none;cursor:zoom-in;
}
.galeria__zoom img{width:100%;height:100%;object-fit:cover;display:block}

.galeria__lupa{
  position:absolute;top:16px;right:16px;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(14,13,12,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  color:#fff;font-size:12px;font-weight:700;padding:8px 12px;
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.galeria__principal:hover .galeria__lupa,
.galeria__zoom:focus-visible .galeria__lupa{opacity:1}

/* ------------------------------------------------------------------ visor */

body.con-visor{overflow:hidden}

.visor{
  position:fixed;inset:0;z-index:120;
  background:rgba(8,12,20,.94);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,4vw,48px);
  animation:mtFadeUp .18s ease both;
}
.visor[hidden]{display:none}
.visor__img{
  max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9);
}
.visor__cerrar{
  position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:48px;height:48px;font-size:30px;line-height:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;z-index:2;
}
.visor__cerrar:hover{background:rgba(255,255,255,.22)}
.visor__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;font-size:30px;line-height:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;
}
.visor__nav:hover{background:rgba(255,255,255,.22)}
.visor__nav--prev{left:clamp(8px,2vw,24px)}
.visor__nav--next{right:clamp(8px,2vw,24px)}
.visor__contador{
  position:absolute;bottom:clamp(12px,3vw,28px);left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700;padding:7px 14px;
}

/* ------------------------------------------------- celular: una sola fila */

@media (max-width:899px){
  .galeria__tiras{
    display:flex;gap:8px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:10px calc(var(--pad) * -1) 0;
    padding:0 var(--pad) 4px;
  }
  .galeria__tiras::-webkit-scrollbar{display:none}
  .galeria__tira{flex:0 0 92px;scroll-snap-align:start}

  /* en celular la lupa se muestra siempre: no hay hover que la revele */
  .galeria__lupa{opacity:1;font-size:11.5px;padding:7px 10px}

  .visor__nav{width:44px;height:44px;font-size:26px}
}

/* ==========================================================================

/* --------------------------------------------------------- ver más */

.ver-mas{margin-top:clamp(30px,3.4vw,44px);display:flex;justify-content:center}
.btn-ver-mas{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--noche);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:18px 34px;border-radius:2px;
  transition:background .18s ease,gap .18s ease;
}
.btn-ver-mas:hover{background:var(--rojo);color:#fff;gap:15px}

/* ------------------------------------------------ filtros plegables */

.filtros__toggle{display:none}
.filtros__cuenta{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--rojo);color:#fff;font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}

@media (max-width:899px){
  .filtros{padding:14px var(--pad)}

  .filtros__tabs{gap:6px;margin-bottom:12px}
  .filtros__tab{flex:1;text-align:center;padding:11px 8px;font-size:12px;letter-spacing:.02em}

  .filtros__toggle{
    display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
    background:none;border:1px solid var(--linea-input);
    color:var(--tinta);font-size:13.5px;font-weight:700;
    padding:13px;border-radius:2px;cursor:pointer;
  }
  .filtros__toggle.is-abierto{border-color:var(--tinta)}

  /* plegado por defecto; el JS lo abre */
  .filtros__campos{display:none;grid-template-columns:1fr;gap:14px;margin-top:14px}
  .filtros__campos.is-abierto{display:grid}

  .filtros .btn-buscar{height:52px}
  .filtros__chips{margin-top:12px}

  /* sin JS los campos quedan siempre a la vista, que es lo usable */
  .no-js .filtros__toggle{display:none}
  .no-js .filtros__campos{display:grid}
}

/* --------------------------------- hero: la portada vertical en celular */

@media (max-width:760px){
  .hero__fondo{object-position:center 42%}
}

/* el sello de Google se sacó: la sección no lo necesita */

/* ==========================================================================

@media (min-width:900px){
  /* la sección se acota: si no, tres columnas sobre 1320px dan tarjetas
     de 430px de ancho por 150 de alto, o sea tiras horizontales */

  /* cuadrado: el alto acompaña al ancho de la columna */
}

/* ==========================================================================
   Testimonios
   Tarjetas claras de alto natural, encabezado centrado, cita en itálica
   y el autor con su inicial en un círculo.
   ========================================================================== */

.seccion--gris{background:var(--blanco);padding:clamp(58px,6.5vw,100px) var(--pad)}

.testimonios__cab{text-align:center;margin-bottom:clamp(30px,3.6vw,50px)}
.testimonios__cab .eyebrow{justify-content:center;margin-bottom:14px}
.testimonios__cab .titulo-seccion{max-width:none;margin:0 auto}

.grilla-testimonios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:clamp(16px,1.8vw,24px);
  align-items:start;              /* alto natural: cada una lo que necesita */
}

.resena{
  margin:0;
  background:#FAFAFA;
  border:1px solid rgba(15,35,80,.08);
  border-radius:14px;
  padding:26px 24px;
  display:flex;flex-direction:column;gap:16px;
  transition:box-shadow .25s ease,transform .25s ease;
}
.resena:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(15,35,80,.4);
}

.resena__estrellas{display:flex;gap:3px}

.resena__texto{
  margin:0;
  font-family:var(--sans);
  font-style:italic;
  font-size:15.5px;line-height:1.62;
  color:var(--gris-2);
  text-wrap:pretty;
}
.resena__texto::before{content:'"'}
.resena__texto::after{content:'"'}

.resena__pie{display:flex;align-items:center;gap:12px;margin-top:auto}
.resena__inicial{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:rgba(216,35,42,.1);color:var(--rojo);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;text-transform:uppercase;
}
.resena__autor{display:block;font-size:14.5px;font-weight:700;color:var(--tinta);line-height:1.3}
.resena__cuando{display:block;font-size:13px;color:var(--gris-3);margin-top:1px}

/* seis reseñas: tres arriba y tres abajo */
@media (min-width:900px){
  .grilla-testimonios{grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================================
   Nosotros
   ========================================================================== */

.seccion--blanca{background:var(--blanco)}
.seccion--celeste{background:var(--gris-bg-2)}

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

.hero-nos{position:relative;background:var(--noche)}
.hero-nos__fondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 72%;
}
.hero-nos__velo{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(11,20,36,.96) 0%, rgba(11,20,36,.93) 42%,
    rgba(11,20,36,.74) 68%, rgba(11,20,36,.42) 100%);
}
.hero-nos__cuerpo{
  position:relative;width:100%;
  padding:clamp(56px,8vw,110px) var(--pad) clamp(40px,5vw,74px);
  min-height:clamp(430px,64vh,700px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-nos__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero-nos__eyebrow span:first-child{width:44px;height:3px;background:var(--rojo);display:block}
.hero-nos__eyebrow span:last-child{
  font-size:11.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero-nos__titulo{
  margin:0;max-width:15ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,7.6vw,104px);line-height:.98;letter-spacing:-.025em;
  color:#fff;text-wrap:balance;
}
.hero-nos__bajada{
  margin:20px 0 0;max-width:46ch;
  font-size:clamp(16px,1.7vw,21px);line-height:1.55;
  color:rgba(255,255,255,.82);text-wrap:pretty;
}
.hero-nos__botones{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:11px}

.btn-hero{
  font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:17px 28px;border-radius:2px;transition:.18s;
}
.btn-hero--rojo{background:var(--rojo);color:#fff}
.btn-hero--rojo:hover{background:var(--rojo-osc);color:#fff}
.btn-hero--linea{
  border:1px solid rgba(255,255,255,.4);color:#fff;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.btn-hero--linea:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

/* ---------------------------------------------------------- quiénes somos */

.nos-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  gap:clamp(32px,4.5vw,72px);align-items:start;
}
.nos-texto{
  margin-top:22px;font-size:16px;line-height:1.75;color:var(--gris-2);
  display:flex;flex-direction:column;gap:16px;max-width:56ch;
}
.nos-texto p{margin:0;text-wrap:pretty}

/* -------------------------------------------------------------- servicios */

.servicios__cab{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:clamp(20px,2.4vw,34px);border-bottom:2px solid var(--tinta);
}
.servicios__nota{margin:0;max-width:40ch;font-size:15px;line-height:1.65;color:var(--gris)}

.servicio-fila{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 30px;
  padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid rgba(15,35,80,.12);
}
.servicio-fila:last-of-type{border-bottom-color:transparent}
.servicio-fila__n{flex:none;width:56px;font-family:var(--serif);font-size:26px;color:var(--rojo);line-height:1}
.servicio-fila__titulo{flex:1 1 220px;min-width:0}
.servicio-fila__titulo h3{
  margin:0;font-size:clamp(21px,2.4vw,28px);font-weight:700;
  letter-spacing:-.015em;color:var(--tinta);line-height:1.2;
}
.servicio-fila__texto{flex:1.4 1 300px;min-width:0}
.servicio-fila__texto p{margin:0;font-size:15.5px;line-height:1.7;color:var(--gris-2);text-wrap:pretty}
.servicio-fila__cta{flex:none;width:186px;margin-left:auto;display:flex;justify-content:flex-end}
.servicio-fila__cta a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta);border-bottom:1.5px solid var(--rojo);padding-bottom:6px;white-space:nowrap;
  transition:color .18s,gap .18s;
}
.servicio-fila__cta a:hover{color:var(--rojo);gap:14px}
.servicio-fila__cta span{font-size:15px;line-height:1}

/* --------------------------------------------------------- cómo trabajamos */

.pasos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(20px,2.4vw,32px);
}
.paso{border-top:2px solid rgba(15,35,80,.15);padding-top:20px}
.paso--primero{border-top-color:var(--rojo)}
.paso__n{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.paso h3{margin:12px 0 0;font-size:19px;font-weight:700}
.paso p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--gris)}

/* -------------------------------------------------------------------- faq */

.faq{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(15,35,80,.12);border:1px solid rgba(15,35,80,.12);
}
.faq__item{background:var(--blanco);padding:20px 22px}
.faq__item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  font-size:16.5px;font-weight:700;color:var(--tinta);line-height:1.4;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--rojo)}
.faq__ico{flex:none;color:var(--rojo);font-size:24px;line-height:1;font-weight:400}
.faq__ico::before{content:"+"}
.faq__item[open] .faq__ico::before{content:"\2212"}
.faq__item p{margin:12px 0 0;font-size:15px;line-height:1.7;color:var(--gris-2);animation:mtFadeUp .2s ease both}

/* --------------------------------------------------- contacto de Nosotros */

.seccion--celeste .dato{background:var(--gris-bg-2)}
.form__wa{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}

@media (max-width:899px){
  .servicio-fila__cta{width:auto;margin-left:0}
  .servicios__cab{align-items:flex-start}
}

/* ==========================================================================
   Ajustes finales
   ========================================================================== */

/* -------------------------------- azul del logo (#0244A6) como color de marca

   Se re-tiñen los dos azules oscuros al mismo tono del logo en vez de
   reemplazarlos de plano: usar #0244A6 puro para texto largo o para el fondo
   del pie cansa la vista. Si no convence, se vuelve con estos tres valores:
     --tinta:#0F2350  --noche:#0B1424  --azul:#0F2350
   -------------------------------------------------------------------------- */

:root{
  --azul:#0244A6;        /* el del logo, tal cual */
  --azul-osc:#013A8C;
  --tinta:#0A2A63;       /* texto y títulos, mismo tono más profundo */
  --noche:#06214C;       /* superficies oscuras: pie, paneles, franjas */
}

/* el estado de la tarjeta usa el azul del logo, que es el que más se ve */
.badge--estado{background:var(--azul)}
.resena__inicial{background:rgba(2,68,166,.1);color:var(--azul)}

/* crédito del pie */
.pie__credito{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.28)}
.pie__credito:hover{color:#fff;border-bottom-color:#fff}

/* --------------------------------------------- testimonios: retoque propio */

/* Se aparta del modelo de referencia: barra de acento a la izquierda, comilla
   de fondo y el autor sin círculo relleno. */
.resena{
  position:relative;
  background:var(--blanco);
  border:1px solid rgba(15,35,80,.09);
  border-left:3px solid var(--rojo);
  border-radius:0 12px 12px 0;
  padding:26px 26px 22px 28px;
  overflow:hidden;
}
.resena::before{
  content:"”";
  position:absolute;top:-26px;right:6px;
  font-family:var(--serif);font-size:130px;line-height:1;
  color:rgba(2,68,166,.06);pointer-events:none;
}
.resena__texto{position:relative;font-style:normal;color:var(--tinta);font-size:16px}
.resena__texto::before,
.resena__texto::after{content:none}
.resena__pie{border-top:1px dashed rgba(15,35,80,.16)}
.resena__inicial{
  background:none;border:1.5px solid var(--azul);color:var(--azul);
  font-size:14px;
}
.resena__cuando{color:var(--gris-3)}

/* --------------------------- celular: la franja de números no aporta ahí */

@media (max-width:899px){
  .stats{display:none}
}

/* la foto de la oficina es vertical: se encuadra sobre el cartel */
.hero-nos__fondo{object-position:center 38%}
@media (max-width:760px){
  .hero-nos__fondo{object-position:center 30%}
}

/* ==========================================================================
   Zonas en claro, testimonios a la izquierda y pasos animados
   ========================================================================== */

/* --------------------------------- las zonas ahora van sobre fondo blanco */

.encabezado__nota{color:var(--gris)}
.seccion--oscura .encabezado__nota{color:rgba(255,255,255,.6)}

/* ------------------------------------------- testimonios: título a la izq */

.testimonios__cab{text-align:left;margin-bottom:0}
.testimonios__cab .eyebrow{justify-content:flex-start}

/* fuera la línea punteada arriba del nombre */
.resena__pie{border-top:none;padding-top:4px}

/* ------------------------------------ servicios de Nosotros en la serif */

.servicio-fila__titulo h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.8vw,34px);
  letter-spacing:-.01em;
}

/* ==========================================================================
   Pasos de "cómo trabajamos"
   ========================================================================== */

.pasos{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--total,4),1fr);
  gap:clamp(20px,2.4vw,32px);
}

/* el riel va de centro a centro del primer y último marcador */
.pasos__riel{
  position:absolute;top:17px;height:2px;
  left:calc((100% / var(--total,4)) / 2);
  right:calc((100% / var(--total,4)) / 2);
  background:rgba(15,35,80,.14);
  overflow:hidden;
}
.pasos__avance{
  display:block;width:100%;height:100%;
  background:var(--rojo);
  transform:scaleX(var(--p,0));transform-origin:left center;
}

.paso{position:relative;padding-top:0;border-top:none}

.paso__marca{
  position:relative;z-index:1;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blanco);
  border:2px solid rgba(15,35,80,.16);
  color:var(--gris);
  font-size:14px;font-weight:800;
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s ease;
}
.paso__num{transition:opacity .2s ease}
.paso__tilde{position:absolute;opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .25s ease}

.paso.is-hecho .paso__marca{
  background:var(--rojo);border-color:var(--rojo);color:#fff;
  transform:scale(1.06);
}
.paso.is-hecho .paso__num{opacity:0}
.paso.is-hecho .paso__tilde{opacity:1;transform:scale(1)}

.paso__n{
  margin-top:18px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
  transition:color .35s ease;
}
.paso.is-hecho .paso__n{color:var(--rojo)}
.paso h3{margin:10px 0 0;font-size:19px;font-weight:700}
.paso p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--gris)}

/* --------------------------------------------- en celular, línea vertical */

@media (max-width:760px){
  .pasos{grid-template-columns:1fr;gap:0}
  .pasos__riel{
    top:18px;bottom:18px;left:17px;right:auto;
    width:2px;height:auto;
  }
  .pasos__avance{transform:scaleY(var(--p,0));transform-origin:top center}
  .paso{display:grid;grid-template-columns:36px 1fr;column-gap:18px;padding-bottom:28px}
  .paso__marca{grid-row:1/span 3}
  .paso__n{margin-top:8px}
  .paso h3,.paso p{grid-column:2}
}

/* ==========================================================================
   Correcciones: riel de los pasos y fondo de las filas de datos
   ========================================================================== */

/* El riel iba de 12,5% a 87,5% suponiendo que los marcadores estaban centrados
   en su columna. No lo están: son cajas de 36px alineadas a la izquierda, así
   que su centro cae en (inicio de columna + 18px). Se calcula con el ancho real
   de columna, descontando los gaps. */
.pasos{
  --gap:clamp(20px,2.4vw,32px);
  --colw:calc((100% - (var(--total,4) - 1) * var(--gap)) / var(--total,4));
  gap:var(--gap);
}
.pasos__riel{
  left:18px;
  right:calc(var(--colw) - 18px);
}

@media (max-width:760px){
  .pasos{--gap:0}
  .pasos__riel{left:17px;right:auto}
}

/* Las filas de datos traían fondo crema de la home. En una sección blanca
   quedaban como un bloque beige flotando. */
.seccion--blanca .dato{background:var(--blanco)}
.seccion--blanca .datos{background:var(--linea)}

/* ==========================================================================
   Pasos con conector por tramo · servicios en celular · valores rediseñados
   ========================================================================== */

/* --------------------------------------------------------------- pasos ---
   Antes había un riel único que abarcaba todo el contenedor: en celular seguía
   bajando después del último paso. Ahora cada paso dibuja su tramo hacia el
   siguiente, y el último no dibuja ninguno. */

.pasos{
  --gap:clamp(20px,2.4vw,32px);
  gap:var(--gap);
}
.pasos__riel{display:none}          /* queda del enfoque anterior */

.paso{position:relative}

/* pista y relleno del tramo */
.paso::after,
.paso::before{
  content:"";position:absolute;
  top:17px;left:18px;
  right:calc((var(--gap) + 18px) * -1);
  height:2px;
}
.paso::after{background:rgba(15,35,80,.14)}
.paso::before{
  background:var(--rojo);z-index:1;
  transform:scaleX(var(--seg,0));transform-origin:left center;
}
.paso:last-child::after,
.paso:last-child::before{content:none}

/* ---------------------------------------------- celular: tramo vertical */

@media (max-width:760px){
  .pasos{--gap:0}

  .paso::after,
  .paso::before{
    top:18px;bottom:-18px;height:auto;
    left:17px;right:auto;width:2px;
  }
  .paso::before{
    transform:scaleY(var(--seg,0));transform-origin:top center;
  }
}

/* ------------------------------------- servicios: número pegado al título */

@media (max-width:760px){
  .servicio-fila{gap:8px 14px}
  .servicio-fila__n{width:auto;font-size:24px}
  .servicio-fila__titulo{flex:1 1 auto}
  .servicio-fila__titulo h3{font-size:27px}
  .servicio-fila__texto{flex:1 1 100%}
  .servicio-fila__cta{width:auto;margin-left:0;justify-content:flex-start}
}

/* ==========================================================================


/* ==========================================================================
   Portada en celular · tarjetas de zona · servicios con respuesta al toque
   ========================================================================== */

/* ---------------------------------------- celular: velo negro más parejo */

@media (max-width:760px){
  .hero__velo{
    background:linear-gradient(180deg,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.28) 42%,
      rgba(0,0,0,.62) 100%);
  }
}

/* ------------------------------------------------- tarjetas de zona ------
   El nombre pasa al centro, con un botón que aparece al pasar el mouse. En
   táctil no hay hover, así que ahí se muestra siempre. */

.zona__texto{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:20px;text-align:center;
  left:0;right:0;bottom:0;
}
.zona__nombre{
  font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);line-height:1.05;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  transition:transform .35s ease;
}
.zona__total{
  margin-top:2px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  transition:transform .35s ease;
}

.zona__btn{
  margin-top:14px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease,background .2s ease;
}
.zona__btn svg{transition:transform .25s ease}

.zona__velo{
  background:linear-gradient(180deg,rgba(11,20,36,.28) 0%,rgba(11,20,36,.62) 100%);
  transition:background .35s ease;
}

.zona:hover .zona__velo{background:linear-gradient(180deg,rgba(11,20,36,.42) 0%,rgba(11,20,36,.74) 100%)}
.zona:hover .zona__btn,
.zona:focus-visible .zona__btn{opacity:1;transform:translateY(0)}
.zona:hover .zona__btn{background:var(--rojo);border-color:var(--rojo)}
.zona:hover .zona__btn svg{transform:translateX(3px)}
.zona:hover .zona__nombre{transform:translateY(-4px)}
.zona:hover .zona__total{transform:translateY(-4px)}

/* táctil: sin hover, el botón va siempre visible */
@media (hover:none){
  .zona__btn{opacity:1;transform:none;background:rgba(216,35,42,.9);border-color:transparent}
}

/* ------------------------------------ servicios: responden al toque ------ */

.servicio-fila{
  position:relative;
  padding-left:16px;padding-right:16px;
  border-radius:4px;
  transition:background .25s ease;
}
/* barra roja que crece desde la izquierda */
.servicio-fila::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:var(--rojo);
  transform:scaleY(0);transform-origin:top center;
  transition:transform .3s ease;
}

.servicio-fila:hover,
.servicio-fila:focus-within,
.servicio-fila:active{background:rgba(216,35,42,.045)}

.servicio-fila:hover::before,
.servicio-fila:focus-within::before,
.servicio-fila:active::before{transform:scaleY(1)}

.servicio-fila__n,
.servicio-fila__titulo h3{transition:color .25s ease,transform .25s ease}

.servicio-fila:hover .servicio-fila__titulo h3,
.servicio-fila:focus-within .servicio-fila__titulo h3,
.servicio-fila:active .servicio-fila__titulo h3{color:var(--rojo)}

.servicio-fila:hover .servicio-fila__n,
.servicio-fila:active .servicio-fila__n{transform:translateX(3px)}

.servicio-fila:hover .servicio-fila__cta a{color:var(--rojo);gap:14px}

/* el toque en el celular deja el efecto un instante */
@media (hover:none){
  .servicio-fila:active{background:rgba(216,35,42,.08)}
}

/* ==========================================================================
   Botón de zona en punta · fotos de Nosotros
   ========================================================================== */

/* el resto del sitio usa esquinas rectas: la píldora desentonaba */
.zona__btn{border-radius:0}

/* ------------------------------------------------- fotos de Quiénes somos */

.nos-fotos{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.4vw,18px);
  align-items:start;
}
.nos-foto{
  margin:0;overflow:hidden;
  background:var(--placeholder);
  border:1px solid rgba(15,35,80,.08);
  box-shadow:0 2px 4px rgba(15,35,80,.04),0 22px 46px -32px rgba(15,35,80,.45);
  transition:transform .3s ease,box-shadow .3s ease;
}
.nos-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.nos-foto:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(15,35,80,.05),0 30px 56px -30px rgba(15,35,80,.5)}
.nos-foto:hover img{transform:scale(1.04)}

.nos-foto--a{aspect-ratio:3/4}
.nos-foto--b{aspect-ratio:3/4;margin-top:clamp(24px,4vw,52px)}

@media (max-width:560px){
  .nos-fotos{gap:10px}
  .nos-foto--b{margin-top:20px}
}

/* ------------------- portada en celular: velo un poco más firme al medio

   La bajada cae justo donde el degradado era más claro (.28) y no se terminaba
   de leer. Se sube el centro sin oscurecer de más la foto. */

@media (max-width:760px){
  .hero__velo{
    background:linear-gradient(180deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.46) 45%,
      rgba(0,0,0,.70) 100%);
  }
}

/* el nav suma dos ítems: se achica la separación para que entre cómodo */
@media (min-width:900px){
  .nav{gap:26px}
}
@media (min-width:1100px){
  .nav{gap:30px}
}

.ficha__video iframe{width:100%;height:100%;border:0;display:block}

/* Vista previa: solo la ve quien está logueado en el panel */
.vista-previa{background:var(--tinta);color:#fff;font-size:14px}
.vista-previa__fila{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 0;
}
.vista-previa a{color:#fff;text-decoration:underline;font-weight:700;white-space:nowrap}

/* Compartir: copia el enlace en la computadora, abre el menú del sistema en el celular */
.compartir{
  display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linea);
}
.compartir__b{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:none;border:1px solid var(--linea-input);border-radius:0;
  padding:11px 10px;font-family:var(--sans);font-size:12.5px;font-weight:700;
  color:var(--gris);cursor:pointer;transition:.16s;text-decoration:none;
}
.compartir__b:hover{border-color:var(--tinta);color:var(--tinta)}
.compartir__b.is-ok{border-color:var(--tinta);color:var(--tinta);background:rgba(10,42,99,.05)}
.compartir__b svg{flex:none}

/* Aviso de precios estimados. En computadora los filtros van en una fila
   y este renglón desalineaba el resto, así que sólo se muestra en celular,
   donde cada filtro ocupa su propia línea. */
.rango__aviso{display:none}
@media (max-width:899px){
  .rango__aviso{display:block;margin-top:8px;font-size:11.5px;line-height:1.4;color:var(--gris-3)}
  .rango__aviso[hidden]{display:none}
}

/* Globito de «enlace copiado»: aparece sobre el botón que se tocó */
.aviso-copia{
  position:absolute;z-index:120;transform:translate(-50%,-100%) scale(.94);
  background:var(--tinta);color:#fff;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:8px 13px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .16s,transform .16s;
  box-shadow:0 10px 24px -12px rgba(15,35,80,.7);
}
.aviso-copia::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--tinta);
}
.aviso-copia.is-visible{opacity:1;transform:translate(-50%,-100%) scale(1)}

/* ==========================================================================
   Mapa del listado
   ========================================================================== */

.mapa-listado{padding:0 0 var(--seccion);background:var(--blanco)}
.mapa-listado__cab{margin-bottom:20px}
.mapa-listado__t{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3vw,36px);line-height:1.05;color:var(--tinta);
}
.mapa-listado__n{margin:8px 0 0;font-size:14px;color:var(--gris);max-width:62ch;line-height:1.55}

.mapa-listado__caja{border:1px solid var(--linea);overflow:hidden}
/* Leaflet numera sus capas de 400 a 700. Sin un contexto de apilado propio
   esos números compiten con el encabezado (60) y la barra de filtros (50),
   y los pines terminaban dibujándose encima al bajar la página. */
#mapa-propiedades{
  height:clamp(320px,52vh,520px);width:100%;background:var(--gris-bg);
  position:relative;z-index:0;isolation:isolate;
}

/* el pin es una etiqueta con el precio: es lo primero que se mira */
.pin-prop{background:none;border:none}
.pin-prop__v{
  display:block;transform:translate(-50%,-100%);
  background:var(--tinta);color:#fff;
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.01em;
  padding:5px 9px;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(15,35,80,.85);
}
.pin-prop__pico{
  display:block;position:absolute;left:0;top:0;transform:translate(-50%,0);
  border:4px solid transparent;border-top-color:var(--tinta);
}
.leaflet-marker-icon.pin-prop:hover .pin-prop__v,
.pin-prop.is-activo .pin-prop__v{background:var(--rojo)}
.leaflet-marker-icon.pin-prop:hover .pin-prop__pico{border-top-color:var(--rojo)}

/* Globo con la miniatura. El ancho lo fija .pop: antes estaba en
   .leaflet-popup-content con width:auto y el globo se encogía hasta
   partir el precio en dos renglones. */
.leaflet-popup-content-wrapper{border-radius:0;padding:0;box-shadow:0 18px 40px -20px rgba(15,35,80,.7)}
.leaflet-popup-content{margin:0}
.leaflet-popup-tip{box-shadow:none}

.pop{display:block;width:236px;max-width:100%;color:inherit;text-decoration:none}
.pop__f{display:block;width:100%;height:130px;object-fit:cover}
.pop__c{display:block;padding:12px 14px 14px}
.pop__op{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-3);
}
.pop__p{
  display:block;margin-top:2px;white-space:nowrap;
  font-family:var(--serif);font-size:20px;font-weight:400;color:var(--rojo);line-height:1.1;
}
.pop__t{
  display:block;margin-top:5px;font-size:13px;font-weight:700;color:var(--tinta);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pop__z,.pop__d{display:block;margin-top:4px;font-size:11.5px;color:var(--gris-3)}
.pop:hover .pop__t{color:var(--rojo)}

/* la cruz de cerrar, sobre la foto */
.leaflet-container a.leaflet-popup-close-button{
  top:8px;right:8px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--tinta);
  font-size:17px;font-weight:700;padding:0;
}
.leaflet-container a.leaflet-popup-close-button:hover{background:#fff;color:var(--rojo)}

/* la atribución obligatoria, lo más discreta posible */
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.78)}
.leaflet-control-attribution a{color:var(--gris-3)}

@media (max-width:640px){
  #mapa-propiedades{height:360px}
  .pin-prop__v{font-size:10.5px;padding:4px 7px}
  /* el globo no puede ser más ancho que el mapa */
  .pop{width:min(236px,72vw)}
  .pop__f{height:104px}
  .pop__p{font-size:18px}
  .pop__c{padding:10px 12px 12px}
}

/* Grupo de pines: reemplaza el montón de etiquetas superpuestas al alejar */
.pin-grupo{background:none;border:none}
.pin-grupo span{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--tinta);color:#fff;border:3px solid rgba(255,255,255,.9);
  font-family:var(--sans);font-size:14px;font-weight:800;
  box-shadow:0 8px 20px -8px rgba(15,35,80,.9);
  transition:background .16s;
}
.pin-grupo:hover span{background:var(--rojo)}

/* Globo de Google Maps: la API le pone su propio relleno y bordes redondeados */
.gm-style .gm-style-iw-c{padding:0 !important;border-radius:0 !important;box-shadow:0 18px 40px -20px rgba(15,35,80,.7)}
.gm-style .gm-style-iw-d{overflow:hidden !important;max-height:none !important}
.gm-style .gm-style-iw-c .pop{width:236px}
.gm-style .gm-style-iw-tc::after{background:#fff}
/* la cruz de cerrar, sobre la foto */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect{
  top:4px !important;right:4px !important;opacity:1 !important;
  background:rgba(255,255,255,.92) !important;width:28px !important;height:28px !important;
}
.gm-style .gm-style-iw-c button.gm-ui-hover-effect>span{margin:6px !important;background-color:var(--tinta)}

@media (max-width:640px){
  .gm-style .gm-style-iw-c .pop{width:min(236px,72vw)}
}

/* con una sola foto el visor no muestra flechas ni contador */
.visor__nav[hidden],
.visor__contador[hidden]{display:none}

/* La zona es el único enlace al mapa: se marca al pasar por encima, sin
   subrayado permanente que la haga competir con el título */
.card__ubicacion{text-decoration:none;color:inherit;transition:color .16s}
.card__ubicacion:hover{color:var(--tinta)}
.ficha__mapa-link{text-decoration:none;color:inherit;transition:color .16s}
.ficha__mapa-link:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}