/* Girotti — concepto "Línea de horizonte": ciudad, campo, sierra y mar en una sola línea */

@font-face { font-family: "Gloock"; src: url("fonts/gloock-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --noche: #13211d;
  --noche-2: #1d302a;
  --capa-1: #33504a;
  --capa-2: #253c36;
  --paja: #f2ede1;
  --paja-2: #e6dfcd;
  --laton: #c9a24c;
  --laton-osc: #775a1b;
  --salitre: #a9bcbd;
  --tinta-suave: #4a5954;
  --display: "Gloock", "Times New Roman", serif;
  --texto: "Figtree", system-ui, sans-serif;
  --ease-decel: cubic-bezier(.16, 1, .3, 1);
  --ease-horizonte: cubic-bezier(.22, .9, .3, 1);
  --radio: 4px;
  --ancho: 1240px;
  --aviso-alto: 2.75rem;
  --pad-x: clamp(1.125rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 7rem; }
body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--texto);
  color: var(--noche);
  background: var(--paja);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font: 400 clamp(2.25rem, 6vw, 4.25rem)/1.02 var(--display); letter-spacing: -.01em; }
h3 { font: 700 1.1875rem/1.3 var(--texto); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--laton); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; background: var(--laton); color: var(--noche); font-weight: 700;
}
.saltar:focus { top: 3.5rem; }

/* Franja de aviso */
.aviso {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  min-height: var(--aviso-alto);
  display: flex; align-items: center; justify-content: center;
  padding: .45rem var(--pad-x);
  background: var(--laton); color: var(--noche);
  font-size: .8125rem; font-weight: 600; line-height: 1.3; text-align: center;
}

/* Cabecera */
.cabecera {
  position: sticky; top: var(--aviso-alto); z-index: 50;
  margin-top: var(--aviso-alto);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem var(--pad-x);
  background: rgb(19 33 29 / .92); color: var(--paja);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(201 162 76 / .25);
}
.marca { display: flex; flex-direction: column; text-decoration: none; line-height: 1; min-height: 44px; justify-content: center; }
.marca-nombre { font: 400 1.75rem/1 var(--display); }
.marca-sub { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--laton); margin-top: .2rem; }
.nav { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem;
  text-decoration: none; font-weight: 600; font-size: .9375rem; border-radius: var(--radio);
  transition: color .3s var(--ease-decel), background-color .3s var(--ease-decel);
}
.nav a:hover { color: var(--laton); }
.nav .nav-cta { border: 1px solid var(--laton); color: var(--laton); }
.nav .nav-cta:hover { background: var(--laton); color: var(--noche); }
@media (max-width: 760px) {
  .nav li:not(:last-child) { display: none; }
  .nav .nav-cta { padding: 0 .75rem; font-size: .875rem; }
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem; border-radius: var(--radio);
  font: 700 1rem/1 var(--texto); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color .35s var(--ease-decel), color .35s var(--ease-decel), border-color .35s;
}
.btn-laton { background: var(--laton); color: var(--noche); }
.btn-laton:hover { background: var(--paja); }
.btn-linea { border-color: rgb(242 237 225 / .5); color: var(--paja); }
.btn-linea:hover { border-color: var(--laton); color: var(--laton); }
.btn-noche { background: var(--noche); color: var(--paja); width: 100%; }
.btn-noche:hover { background: var(--noche-2); color: var(--laton); }

/* Hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--aviso-alto) - 4.25rem);
  display: flex; flex-direction: column;
  padding: clamp(3rem, 9vh, 6rem) var(--pad-x) 0;
  color: var(--paja);
  background:
    radial-gradient(120% 60% at 70% 100%, #2c4740 0%, transparent 60%),
    linear-gradient(180deg, #0e1916 0%, var(--noche) 55%, #1f362f 100%);
}
.hero-texto { position: relative; z-index: 2; width: 100%; max-width: var(--ancho); margin: 0 auto; }
.hero-kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--laton); }
.hero-titulo {
  margin: .5rem 0 0;
  font: 400 clamp(5rem, 21vw, 13.5rem)/.9 var(--display);
  letter-spacing: -.02em;
  perspective: 800px;
  clip-path: inset(-10% -5% -4% -5%); /* las letras salen desde la "línea" del título */
}
.hero-titulo .char { display: inline-block; transform-origin: 50% 100%; }
.hero-bajada { max-width: 34rem; margin-top: 1.25rem; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); color: #dcd6c8; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-lugares {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none;
  font-size: .875rem; color: var(--salitre);
}
.hero-lugares li { display: flex; align-items: center; gap: .5rem; }
.hero-lugares li::before { content: ""; width: .9rem; height: 1px; background: var(--laton); }

.horizonte {
  position: relative; z-index: 1; flex: 1 0 auto;
  min-height: clamp(12rem, 38vh, 26rem);
  margin: 1rem calc(var(--pad-x) * -1) 0;
}
.capa { position: absolute; inset: 0; width: 100%; height: 100%; will-change: auto; }
.capa-sierra { fill: var(--capa-1); }
.capa-campo { fill: var(--capa-2); }
.capa-campo g { stroke: var(--capa-2); }
.capa-frente { fill: var(--paja); }
.capa-frente .olas { stroke: var(--laton-osc); opacity: .45; }
.linea-horizonte { stroke: var(--laton); }
.molino-rueda { transform-box: fill-box; transform-origin: center; animation: girar 14s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .capa-sierra { animation: alejar-1 linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .capa-campo  { animation: alejar-2 linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}
@keyframes alejar-1 { to { translate: 0 18%; } }
@keyframes alejar-2 { to { translate: 0 9%; } }

/* Secciones */
.seccion { padding: clamp(4.5rem, 11vw, 9rem) var(--pad-x); }
.seccion > * { max-width: var(--ancho); margin-inline: auto; }
.seccion-cabeza { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.rotulo {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--laton-osc);
}
.rotulo::before { content: ""; width: 2rem; height: 2px; background: currentColor; }
.seccion-intro { max-width: 38rem; margin-top: 1rem; font-size: 1.125rem; color: var(--tinta-suave); }

/* Buscador */
.buscador {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  padding: 1.25rem; border-radius: var(--radio);
  background: var(--noche); color: var(--paja);
}
@media (min-width: 640px) { .buscador { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .buscador { grid-template-columns: auto 1fr 1fr 1fr auto; align-items: end; padding: 1.5rem; } }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label, .segmentado legend { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.buscador .campo label, .buscador legend { color: var(--salitre); }
select, input {
  width: 100%; min-height: 48px; padding: 0 .9rem;
  font: 400 1rem var(--texto); color: inherit;
  background: transparent; border: 1.5px solid rgb(169 188 189 / .45); border-radius: var(--radio);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }
.buscador select option { color: var(--noche); }
select:hover, input:hover { border-color: var(--laton); }
.segmentado { margin: 0; padding: 0; border: 0; min-width: 0; }
.segmentado legend { margin-bottom: .35rem; padding: 0; }
.segmentado { display: flex; }
.segmentado label { display: flex; flex: 1 1 auto; }
.segmentado span { width: 100%; justify-content: center; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentado span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem;
  border: 1.5px solid rgb(169 188 189 / .45); margin-right: -1.5px; cursor: pointer;
  font-weight: 600; transition: background-color .25s, color .25s;
}
.segmentado label:first-of-type span { border-radius: var(--radio) 0 0 var(--radio); }
.segmentado label:last-of-type span { border-radius: 0 var(--radio) var(--radio) 0; }
.segmentado input:checked + span { background: var(--laton); color: var(--noche); border-color: var(--laton); }
.segmentado input:focus-visible + span { outline: 3px solid var(--laton); outline-offset: 2px; }

.contador { margin: 1.5rem auto 1.25rem; font-size: .9375rem; color: var(--tinta-suave); }
.contador strong { color: var(--noche); }

/* Fichas */
.fichas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); padding: 0; list-style: none; }
.ficha {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fbf8f1; border: 1px solid var(--paja-2); border-radius: var(--radio);
  transform-style: preserve-3d; transition: box-shadow .5s var(--ease-decel);
}
.ficha:hover { box-shadow: 0 24px 48px -28px rgb(19 33 29 / .45); }
.ficha[hidden] { display: none; }
.ficha-ilus { width: 100%; height: auto; aspect-ratio: 320 / 120; color: var(--capa-2); background: linear-gradient(180deg, #dfe6e2, #eef0ea); transform: translateZ(24px); }
.ficha-ilus .il-linea, .servicio-ilus .il-linea, .pie-ilus .il-linea { stroke: var(--laton); }
.ficha-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.ficha-op { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--laton-osc); }
.ficha h3 { margin-top: .3rem; font: 400 1.75rem/1.1 var(--display); }
.ficha-lugar { margin-top: .3rem; color: var(--tinta-suave); }
.ficha-datos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .875rem; }
.ficha-datos li { padding: .2rem .6rem; border: 1px solid var(--paja-2); border-radius: 99px; }
.ficha-precio { margin: 1.1rem 0 1rem; padding-top: .9rem; border-top: 1px solid var(--paja-2); font: 400 1.75rem/1 var(--display); margin-top: auto; }
.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; border-radius: var(--radio);
  background: var(--noche); color: var(--paja); font-weight: 700; text-decoration: none;
  transition: background-color .3s, color .3s;
}
.btn-wa::before {
  content: ""; width: 1.15rem; height: 1.15rem; border-radius: 50% 50% 50% 0; rotate: -90deg;
  border: 2px solid var(--laton);
}
.btn-wa:hover { background: var(--laton); color: var(--noche); }
.btn-wa:hover::before { border-color: var(--noche); }
.sin-resultados { margin-top: 1rem; padding: 1.25rem; border: 1px dashed var(--laton-osc); border-radius: var(--radio); }
.nota-demo { margin-top: 1.5rem; font-size: .875rem; color: var(--tinta-suave); }

/* Campos */
.campos { background: var(--noche); color: var(--paja); }
.campos .rotulo { color: var(--laton); }
.campos .seccion-intro { color: #cfd7d2; }
.campos-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .campos-grid { grid-template-columns: 1fr 1fr; align-items: end; } }
.campos-texto .btn { margin-top: 2rem; }
.campos-lista { margin: 0; }
.campos-lista div { padding: 1.25rem 0; border-top: 1px solid rgb(201 162 76 / .35); }
.campos-lista dt { font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--laton); }
.campos-lista dd { margin: .4rem 0 0; font: 400 clamp(1.25rem, 2.6vw, 1.625rem)/1.3 var(--display); }

/* Servicios */
.servicios-lista { display: grid; gap: 1.25rem; padding: 0; list-style: none; }
@media (min-width: 860px) {
  .servicios-lista { grid-template-columns: 1.3fr 1fr 1fr; }
  .servicio:first-child { grid-row: span 2; }
}
.servicio {
  padding: 1.5rem; border-radius: var(--radio); background: var(--paja-2);
  transform-style: preserve-3d; transition: transform .5s var(--ease-decel);
}
.servicio:first-child { background: var(--capa-2); color: var(--paja); }
.servicio:first-child p { color: #d6ddd8; }
.servicio-ilus { width: 100%; height: auto; aspect-ratio: 320 / 120; margin-bottom: 1.25rem; color: var(--capa-1); transform: translateZ(30px); }
.servicio:first-child .servicio-ilus { color: var(--paja); opacity: .9; }
.servicio h3 { font: 400 2rem/1.1 var(--display); }
.servicio p { margin-top: .6rem; color: var(--tinta-suave); }

.porque { margin-top: clamp(4rem, 9vw, 7rem); }
.porque-titulo { margin-bottom: 2rem; }
.porque-lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: p; }
@media (min-width: 860px) { .porque-lista { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.porque-lista li { padding: 1.75rem 0; border-top: 2px solid var(--noche); counter-increment: p; }
.porque-lista li::before { content: "0" counter(p); display: block; font: 400 1rem var(--display); color: var(--laton-osc); margin-bottom: 1rem; }
.icono { width: 3rem; height: 3rem; margin-bottom: 1rem; fill: none; stroke: var(--noche); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.porque-lista p { margin-top: .5rem; color: var(--tinta-suave); }

/* Tasación */
.tasacion { background: var(--paja-2); }
.tasacion-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .tasacion-grid { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.form-tasacion { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: #fbf8f1; border-radius: var(--radio); border: 1px solid #d9d0ba; }
.etiqueta-demo { justify-self: start; padding: .3rem .7rem; border-radius: 99px; background: var(--noche); color: var(--laton); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.segmentado-claro span { border-color: #b9ae94; }
.form-tasacion input, .form-tasacion select { border-color: #b9ae94; }
.form-tasacion .campo label { color: var(--tinta-suave); }
.grupo { display: grid; gap: 1rem; }
@media (min-width: 560px) { .grupo { grid-template-columns: 1fr 1fr; } }
.grupo-campo { display: none; }
.form-tasacion:has(#t-campo:checked) .grupo-campo { display: grid; }
.form-tasacion:has(#t-campo:checked) .grupo-urbana { display: none; }
.form-estado { min-height: 1.5rem; font-size: .9375rem; color: var(--laton-osc); font-weight: 600; }

/* Contacto */
.contacto h2 { margin-bottom: 2rem; }
.contacto-grid { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 2px solid var(--noche); }
@media (min-width: 720px) { .contacto-grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
@media (min-width: 1100px) { .contacto-grid { grid-template-columns: repeat(3, 1fr); } }
.contacto-item { display: flex; flex-direction: column; gap: .2rem; min-height: 44px; padding: 1.25rem 0; border-bottom: 1px solid #d9d0ba; text-decoration: none; }
.contacto-rotulo { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--laton-osc); }
.contacto-dato { font: 400 clamp(1.25rem, 2.4vw, 1.5rem)/1.25 var(--display); overflow-wrap: anywhere; }
a.contacto-item .contacto-dato { background: linear-gradient(var(--laton), var(--laton)) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease-decel); justify-self: start; width: fit-content; }
a.contacto-item:hover .contacto-dato { background-size: 100% 2px; }

/* Pie */
.pie { background: var(--noche); color: #cfd7d2; }
.pie-ilus { width: 100%; height: auto; aspect-ratio: 320 / 60; color: var(--capa-2); background: var(--paja); }
.pie-grid { max-width: var(--ancho); margin: 0 auto; padding: 2.5rem var(--pad-x) 3rem; display: grid; gap: .6rem; font-size: .9375rem; }
.pie-marca { font: 400 1.75rem/1 var(--display); color: var(--paja); }
.pie-marca span { font: 600 .75rem var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--laton); margin-left: .5rem; }
.pie-leomak { color: var(--laton); }

/* Scroll reveal: suben como si asomaran sobre el horizonte */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fade-on-scroll { animation: asomar linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
@keyframes asomar {
  from { opacity: 0; translate: 0 48px; clip-path: inset(0 0 30% 0); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); }
}

/* Cursor (lo activa el JS solo con mouse) */
.cursor { display: none; }
html.cursor-activo, html.cursor-activo a, html.cursor-activo button, html.cursor-activo label { cursor: none; }
html.cursor-activo input, html.cursor-activo textarea, html.cursor-activo select { cursor: auto; }
html.cursor-activo .cursor { display: block; position: fixed; inset: 0 auto auto 0; pointer-events: none; z-index: 9999; }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; will-change: transform; }
.cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--laton); scale: var(--escala-dot, 1); transition: scale .15s var(--ease-decel); }
/* El anillo es una línea de horizonte: se abre en círculo sobre lo clickeable */
.cursor-ring { width: 40px; height: 2px; margin: -1px 0 0 -20px; background: var(--laton); border-radius: 2px; opacity: .8; transition: height .35s var(--ease-decel), margin .35s var(--ease-decel), border-radius .35s, background-color .35s, opacity .35s; }
.cursor.hover .cursor-ring { height: 40px; margin-top: -20px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--laton); opacity: .6; }
.cursor.hover .cursor-dot { --escala-dot: 1.5; }

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