/* Urbana Propiedades — concepto "La dirección completa": la chapa esmaltada de calle */
@font-face { font-family: "Overpass"; src: url("fonts/overpass-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --asfalto: #16181d;          /* fondos oscuros y texto */
  --hormigon: #eceae4;         /* fondo */
  --hormigon-sombra: #e0ddd4;  /* secciones alternas */
  --cobalto: #1d3fb0;          /* acento: esmalte de la chapa de calle (7,3:1 sobre hormigón) */
  --cobalto-claro: #8fa8ff;    /* acento sobre asfalto (7,8:1) */
  --esmalte: #ffffff;          /* letras y borde de la chapa */
  --trigo: #d9a441;            /* decorativo: el trigo de la zona */
  --wa: #146c43;
  --texto-suave: #4a4d55;

  --f-display: "Overpass", "Arial Narrow", sans-serif;
  --f-texto: "Libre Franklin", system-ui, sans-serif;

  --ease-resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --radio-chapa: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.6;
  color: var(--asfalto); background: var(--hormigon); overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cobalto); outline-offset: 3px; border-radius: 4px; }
ul, ol { list-style: none; margin: 0; padding: 0; }

.saltar { position: absolute; left: -999px; top: 3rem; z-index: 100; background: var(--asfalto); color: var(--esmalte); padding: .75rem 1rem; }
.saltar:focus { left: 1rem; }

.franja {
  position: fixed; inset: 0 0 auto; z-index: 60; margin: 0; padding: .45rem 1rem;
  background: var(--asfalto); color: var(--esmalte); font-size: .8125rem; text-align: center; line-height: 1.35;
}

.cabecera {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 3.4rem clamp(1rem, 4vw, 3rem) .75rem;
  background: color-mix(in srgb, var(--hormigon) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(22, 24, 29, .08);
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; min-height: 44px; }
.marca small { font-family: var(--f-texto); font-weight: 400; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-left: .2rem; }
.marca-chapa {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 7px;
  background: var(--cobalto); color: var(--esmalte); box-shadow: inset 0 0 0 2px var(--cobalto), inset 0 0 0 4px var(--esmalte);
}
.cabecera nav ul { display: none; gap: .25rem; }
.cabecera nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 6px; }
.cabecera nav a:hover { background: var(--hormigon-sombra); }
@media (min-width: 760px) { .cabecera nav ul { display: flex; } }

.contenedor { width: min(1200px, 100% - 2rem); margin-inline: auto; }
@media (min-width: 700px) { .contenedor { width: min(1200px, 100% - 6rem); } }
.seccion { padding-block: clamp(4.5rem, 11vw, 9rem); }
.seccion-cabeza { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sobretitulo { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalto); margin-bottom: .9rem; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .8rem 1.4rem;
  font: 600 1rem/1.2 var(--f-texto); text-decoration: none; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
  transition: background-color .25s var(--ease-decel), color .25s, border-color .25s, box-shadow .25s;
}
.btn-primario { background: var(--cobalto); color: var(--esmalte); box-shadow: inset 0 0 0 3px var(--cobalto), inset 0 0 0 5px rgba(255,255,255,.85); }
.btn-primario:hover { background: #16318c; box-shadow: inset 0 0 0 3px #16318c, inset 0 0 0 5px var(--esmalte); }
.btn-linea { border-color: currentColor; color: var(--asfalto); }
.btn-linea:hover { background: var(--asfalto); color: var(--esmalte); }
.btn-wa { background: var(--wa); color: var(--esmalte); width: 100%; }
.btn-wa::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #7ee2a8; }
.btn-wa:hover { background: #0f5434; }
.enlace { font-weight: 600; color: var(--cobalto); text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }

/* ===== Hero ===== */
.hero {
  display: grid; gap: 2rem; align-items: center; min-height: calc(100svh - 7rem);
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 0; overflow: hidden;
}
@media (min-width: 960px) { .hero { grid-template-columns: 1fr 1.05fr; padding-bottom: 2rem; } }
.hero-titulo {
  font-size: clamp(4.2rem, 17vw, 10.5rem); line-height: .86; margin-bottom: .25em; color: var(--asfalto);
  perspective: 600px;
}
.hero-titulo .char { display: inline-block; transform-origin: 50% 100%; }
.hero-bajada { font-size: clamp(1.1rem, 2.2vw, 1.3rem); max-width: 34rem; color: var(--texto-suave); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero-acciones .btn { flex: 1 1 14rem; }
@media (min-width: 600px) { .hero-acciones .btn { flex: 0 0 auto; } }

/* Escena: la esquina en capas (CSS 3D) */
.escena { perspective: 1100px; perspective-origin: var(--fuga-x, 50%) 40%; width: 100%; max-width: 680px; justify-self: center; }
.escena-mundo {
  position: relative; aspect-ratio: 600 / 470; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 4deg)) rotateY(var(--ry, -8deg));
}
.capa { position: absolute; left: 0; width: 100%; transform-style: preserve-3d; }
.capa-fondo { top: 0; height: 89.4%; transform: translateZ(-140px) scale(1.2); }
.capa-esquina { top: 0; height: 89.4%; transform: translateZ(0); }
.capa-poste { top: 0; height: 89.4%; transform: translateZ(110px); pointer-events: none; }
.capa-arroyos { bottom: 0; height: 22%; transform: translateZ(60px) rotateX(58deg); transform-origin: 50% 100%; }

.trazo { fill: none; stroke: var(--asfalto); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.capa-fondo .trazo { stroke: #9a9890; }
.trazo-fuerte { stroke-width: 3; }
.relleno-esquina { fill: var(--hormigon-sombra); }
.ventanas rect { fill: var(--hormigon); stroke: var(--asfalto); stroke-width: 2; }
.ventanas rect:nth-child(3) { fill: var(--cobalto); }
.arroyo { fill: none; stroke: var(--cobalto); stroke-width: 3; stroke-linecap: round; opacity: .85; }
.arroyo:nth-child(2) { opacity: .6; } .arroyo:nth-child(3) { opacity: .4; }

.poste { position: absolute; left: 76%; bottom: 0; width: 8px; height: 82%; border-radius: 4px; background: var(--asfalto); transform-origin: 50% 100%; }
.chapa {
  position: absolute; left: calc(76% + 8px); top: 18%; display: flex; flex-direction: column; align-items: center;
  padding: .55rem 1.1rem .5rem; border-radius: var(--radio-chapa);
  background: var(--cobalto); color: var(--esmalte); font-family: var(--f-display); font-weight: 800; line-height: 1;
  box-shadow: inset 0 0 0 3px var(--cobalto), inset 0 0 0 5px var(--esmalte), 0 14px 24px rgba(22, 24, 29, .28);
  transform-origin: 0 50%;
}
.chapa-calle { font-size: clamp(.95rem, 2.6vw, 1.5rem); letter-spacing: .04em; text-transform: uppercase; }
.chapa-num { font-size: clamp(1.4rem, 4vw, 2.3rem); color: var(--trigo); }
.chapa::before, .chapa::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--esmalte); translate: 0 -50%; }
.chapa::before { left: 7px; } .chapa::after { right: 7px; }

/* Con scroll, la esquina se abre en profundidad (CSS scroll-driven) */
@supports (animation-timeline: view()) {
  .hero .escena-mundo { animation: abrirEsquina linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  @keyframes abrirEsquina { to { scale: .88; translate: 0 8%; } }
  .hero .capa-fondo { animation: alejar linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  @keyframes alejar { to { translate: 0 0 -160px; opacity: .35; } }
  .hero .capa-poste { animation: acercar linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  @keyframes acercar { to { translate: 0 0 120px; } }
}

/* ===== Buscador y fichas ===== */
.propiedades { background: var(--hormigon-sombra); }
.buscador {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end;
  padding: 1rem; margin-bottom: 2rem; border-radius: 14px; background: var(--asfalto); color: var(--esmalte);
  position: sticky; top: 7.4rem; z-index: 5;
}
@media (max-width: 759px) { .buscador { position: static; } }
@media (min-width: 900px) { .buscador { grid-template-columns: repeat(4, 1fr) auto; padding: 1.2rem 1.4rem; } }
.buscador label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #c9cbd2; }
select, input {
  width: 100%; min-height: 48px; padding: .6rem .8rem; font: 400 1rem var(--f-texto); color: var(--asfalto);
  background: var(--esmalte); border: 2px solid transparent; border-radius: 8px;
}
select:focus-visible, input:focus-visible { border-color: var(--cobalto); outline-color: var(--cobalto-claro); }
.resultados { grid-column: 1 / -1; margin: 0; font-size: .95rem; color: #c9cbd2; }
.resultados-num { display: inline-block; font-family: var(--f-display); font-size: 1.6rem; color: var(--cobalto-claro); min-width: 1.2ch; }
@media (min-width: 900px) { .resultados { grid-column: auto; text-align: right; padding-bottom: .5rem; } }

.fichas { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .fichas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .fichas { grid-template-columns: repeat(3, 1fr); } }
.ficha[hidden] { display: none; }
.ficha-cuerpo {
  height: 100%; display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem;
  background: var(--hormigon); border-radius: 14px; border: 1px solid rgba(22, 24, 29, .1);
  transform-style: preserve-3d; transition: transform .5s var(--ease-decel), box-shadow .3s;
}
.ficha-cuerpo:hover { box-shadow: 0 22px 40px -18px rgba(22, 24, 29, .35); }
.ficha-chapa {
  align-self: flex-start; display: flex; flex-direction: column; padding: .45rem .9rem; border-radius: 8px;
  background: var(--cobalto); color: var(--esmalte); font-family: var(--f-display); font-weight: 800; line-height: 1.05;
  box-shadow: inset 0 0 0 2px var(--cobalto), inset 0 0 0 4px var(--esmalte); transform: translateZ(40px);
}
.ficha-chapa span:first-child { text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
.ficha-chapa span:last-child { font-size: 1.25rem; color: var(--trigo); }
.ficha-estado { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalto); }
.ficha-estado-neutro { color: var(--texto-suave); }
.ficha h3 { margin: 0; transform: translateZ(20px); }
.ficha-datos { display: flex; flex-wrap: wrap; gap: .4rem; }
.ficha-datos li { padding: .2rem .65rem; border-radius: 999px; background: var(--hormigon-sombra); font-size: .9rem; }
.ficha-precio { margin: auto 0 .2rem; padding-top: .5rem; font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; }
.sin-resultados { margin-top: 1rem; font-weight: 600; }

/* ===== Nosotros ===== */
.nosotros { background: var(--asfalto); color: var(--esmalte); }
.nosotros .sobretitulo { color: var(--cobalto-claro); }
.nosotros-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .nosotros-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.texto-grande { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.45; }
.nosotros p:not(.sobretitulo):not(.texto-grande) { color: #c9cbd2; }

/* ===== Servicios ===== */
.servicios-lista { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .servicios-lista { grid-template-columns: 1fr 1fr 1.3fr; align-items: stretch; } }
.servicio {
  position: relative; padding: 1.8rem 1.6rem; border-radius: 14px; border-top: 6px solid var(--asfalto);
  background: var(--hormigon-sombra); transform-style: preserve-3d; transition: transform .5s var(--ease-decel);
}
.servicio-num { display: block; font-family: var(--f-display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--cobalto); transform: translateZ(36px); margin-bottom: .6rem; }
.servicio-destacado { background: var(--cobalto); color: var(--esmalte); border-top-color: var(--trigo); }
.servicio-destacado .servicio-num { color: var(--trigo); }
.servicio-destacado .enlace { color: var(--esmalte); }

/* ===== Diferenciales ===== */
.diferenciales { background: var(--hormigon-sombra); }
.dif-lista { display: grid; gap: 2.5rem; counter-reset: dif; }
@media (min-width: 860px) { .dif-lista { grid-template-columns: repeat(3, 1fr); } }
.dif { padding-top: 1.5rem; border-top: 3px solid var(--asfalto); }
.dif:nth-child(2) { border-top-color: var(--cobalto); }
.dif-icono { width: 56px; height: 56px; margin-bottom: 1rem; }
.dibujo { fill: none; stroke: var(--cobalto); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dif p { color: var(--texto-suave); }

/* ===== Tasación ===== */
.tasacion-grid, .contacto-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .tasacion-grid, .contacto-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.form-tasacion { display: grid; gap: 1rem; padding: clamp(1.25rem, 4vw, 2rem); border-radius: 14px; background: var(--asfalto); color: var(--esmalte); }
.form-tasacion label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.demo-aviso { margin: 0; padding: .5rem .75rem; border-radius: 6px; background: rgba(143, 168, 255, .14); color: var(--cobalto-claro); font-size: .9rem; font-weight: 600; }
.form-tasacion .btn-primario { background: var(--cobalto-claro); color: var(--asfalto); box-shadow: inset 0 0 0 3px var(--cobalto-claro), inset 0 0 0 5px var(--asfalto); }
.form-estado { margin: 0; min-height: 1.6em; color: var(--cobalto-claro); }

/* ===== Contacto ===== */
.contacto { background: var(--hormigon-sombra); }
.contacto-datos { font-style: normal; display: grid; gap: .25rem; justify-items: start; }
.contacto-datos a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.15rem; text-underline-offset: 4px; }
.chapa-grande { position: relative; left: auto; top: auto; margin-bottom: 1rem; padding: .8rem 1.6rem .7rem; transform-origin: 50% 0; }
.chapa-grande .chapa-calle { font-size: 1.6rem; } .chapa-grande .chapa-num { font-size: 2.6rem; }
.btn-wa-grande { width: auto; margin-top: 1rem; min-height: 56px; padding-inline: 1.8rem; }

/* ===== Pie ===== */
.pie { background: var(--asfalto); color: #c9cbd2; padding: 3rem 0 4rem; font-size: .95rem; }
.pie strong { color: var(--esmalte); }
.pie-grid { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .pie-grid { grid-template-columns: 2fr 1fr 1fr; align-items: start; } }
.pie-redes { display: flex; gap: .5rem; flex-wrap: wrap; }
.pie-redes a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .4rem; color: var(--esmalte); }
.pie-firma { color: var(--cobalto-claro); }

/* ===== Scroll reveal (CSS scroll-driven; sin soporte, todo visible) ===== */
@supports (animation-timeline: view()) {
  .revelar { animation: subir linear both; animation-timeline: view(); animation-range: entry 0% entry 28%; }
  @keyframes subir { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
}

/* ===== Cursor: una chapa que se redondea en círculo sobre lo clickeable ===== */
.cursor { display: none; }
html.cursor-activo, html.cursor-activo a, html.cursor-activo button, html.cursor-activo select { cursor: none; }
html.cursor-activo input, html.cursor-activo textarea { cursor: auto; }
html.cursor-activo .cursor { display: block; position: fixed; inset: 0 auto auto 0; pointer-events: none; z-index: 9999; }
.cursor-placa {
  position: fixed; top: 0; left: 0; width: 30px; height: 18px; margin: -9px 0 0 -15px; border-radius: 4px;
  border: 2px solid var(--cobalto); background: rgba(29, 63, 176, .12); will-change: transform;
  transition: width .3s var(--ease-resorte), height .3s var(--ease-resorte), margin .3s var(--ease-resorte), border-radius .3s var(--ease-resorte), background-color .3s;
}
.cursor.hover .cursor-placa { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(29, 63, 176, .2); }

/* ===== Movimiento reducido: todo plano y quieto ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .escena-mundo { transform: none; }
  .capa { transform: none !important; }
  .capa-arroyos { display: none; }
  .ficha-chapa, .ficha h3, .servicio-num { transform: none; }
}