/* Jorge Savisky Propiedades — demo "Carta de la comarca" (Leomak.Soft) */

@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url("fonts/commissioner-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url("fonts/commissioner-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 56deg; }

:root {
  --cordon: #1c2230;        /* azul de cordón serrano al atardecer: fondos y texto */
  --cordon-2: #262e40;
  --niebla: #eef1f2;        /* niebla de la mañana en la sierra: fondo */
  --niebla-2: #e2e6e8;      /* secciones alternas */
  --oxido: #9a4221;         /* óxido de cuarcita: acento sobre niebla (5,8:1) */
  --oxido-claro: #f0a57a;   /* acento sobre cordón (7,9:1) */
  --liquen: #8fa38a;        /* liquen sobre la roca: solo decorativo */
  --texto-suave: #4a5262;   /* 6,9:1 sobre niebla */
  --wa: #136c46;            /* WhatsApp con texto blanco (6,4:1) */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --texto: "Commissioner", system-ui, sans-serif;
  --ease-decel: cubic-bezier(.16, 1, .3, 1);
  --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--texto); color: var(--cordon); background: var(--niebla); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--oxido); outline-offset: 3px; }

.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--cordon); color: var(--niebla); }
.saltar:focus { left: 1rem; top: 3.5rem; }

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

.contenedor { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
.eyebrow { font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oxido); margin-bottom: .75rem; }
.titulo-seccion { font-size: clamp(2.4rem, 8vw, 4.75rem); margin-bottom: 1.5rem; }
section { padding-block: clamp(4.5rem, 12vw, 9rem); }

/* Cabecera */
.cabecera { position: absolute; z-index: 20; top: 3.25rem; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; padding: .5rem 1.25rem; color: var(--niebla); }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-height: 44px; }
.marca-cota { width: 22px; fill: var(--oxido-claro); }
.marca span { font: 800 1.6rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.marca small { display: block; font: 600 .6875rem/1.2 var(--texto); letter-spacing: .22em; color: var(--oxido-claro); }
.cabecera ul { display: flex; gap: .25rem 1.25rem; flex-wrap: wrap; }
.cabecera nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.cabecera nav a:hover { color: var(--oxido-claro); }
.cabecera :focus-visible { outline-color: var(--oxido-claro); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.4rem; border-radius: var(--radio); font: 600 1rem/1.2 var(--texto); text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.btn-principal { background: var(--oxido); color: #fff; }
.btn-principal:hover { background: #7f3519; }
.hero .btn-principal { background: var(--oxido-claro); color: var(--cordon); }
.hero .btn-principal:hover { background: #f7c3a3; }
.btn-linea { border-color: currentColor; color: var(--niebla); }
.btn-linea:hover { background: rgba(238, 241, 242, .1); }
.btn-wa { width: 100%; background: var(--wa); color: #fff; }
.btn-wa::before { content: ""; width: .7rem; height: .7rem; margin-right: .6rem; border-radius: 50% 50% 50% 0; background: currentColor; }
.btn-wa:hover { background: #0e5537; }

/* Hero */
.hero { position: relative; min-height: 100svh; padding: 9.5rem 1.25rem 3rem; display: grid; gap: 2.5rem; align-content: center; background: radial-gradient(120% 80% at 70% 40%, var(--cordon-2), var(--cordon) 70%); color: var(--niebla); overflow: hidden; }
.hero-texto { position: relative; z-index: 2; max-width: 44rem; }
.hero-kicker { font-weight: 600; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oxido-claro); margin-bottom: 1rem; }
.hero-titulo { font-size: clamp(3.4rem, 14vw, 8.5rem); line-height: .86; perspective: 600px; }
.hero-titulo .palabra { display: inline-block; white-space: nowrap; }
.hero-titulo .char { display: inline-block; transform-origin: 50% 100%; }
.hero-bajada { max-width: 34rem; margin-top: 1.5rem; font-size: clamp(1.0625rem, 2.4vw, 1.25rem); color: #d3d9de; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-acciones .btn { flex: 1 1 14rem; }

/* Relieve de la comarca en CSS 3D */
.relieve { position: relative; width: min(100%, 620px); justify-self: center; }
.relieve-escena { position: relative; aspect-ratio: 400 / 240; transform-style: preserve-3d; transform: perspective(1100px) rotateX(calc(var(--tilt) + var(--py, 0) * 1deg)) rotateZ(calc(-20deg + var(--px, 0) * 1deg)); }
.relieve-base, .nivel { position: absolute; inset: 0; transform-style: preserve-3d; }
.relieve-base { border: 1px solid rgba(143, 163, 138, .35); border-radius: 4px; }
.grilla path { fill: none; stroke: rgba(143, 163, 138, .22); stroke-width: 1; }
.nivel { transform: translateZ(calc(var(--i) * 13px)); }
.nivel svg { width: 100%; height: 100%; overflow: visible; transform-origin: 52% 52%; transform: translateX(calc(var(--i) * 1.2%)) scale(calc(1 - var(--i) * .1), calc(1 - var(--i) * .115)); }
.nivel path { fill: color-mix(in oklab, var(--oxido-claro) calc(var(--i) * 11%), #2a3346); stroke: var(--oxido-claro); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.nivel-cima path { fill: var(--oxido-claro); }
.n0 { --i: 0; } .n1 { --i: 1; } .n2 { --i: 2; } .n3 { --i: 3; } .n4 { --i: 4; } .n5 { --i: 5; } .n6 { --i: 6; } .n7 { --i: 7; }
.pin { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border-radius: 50%; background: var(--niebla); color: var(--cordon); font: 800 .9rem/1 var(--display); transform: translateZ(8px); }
.pin-1 { --x: 10%; --y: 30%; } .pin-2 { --x: 47%; --y: 10%; } .pin-3 { --x: 90%; --y: 72%; }
.relieve-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin-top: 2rem; font-size: .875rem; color: #d3d9de; }
.relieve-leyenda li { display: flex; align-items: center; gap: .45rem; }
.relieve-leyenda span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--niebla); color: var(--cordon); font: 800 .8rem/1 var(--display); }

/* Cifras */
.cifras { padding-block: 3.5rem; background: var(--cordon); color: var(--niebla); border-top: 1px solid rgba(143, 163, 138, .3); }
.cifras .eyebrow { color: var(--oxido-claro); }
.cifras-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
.cifras-lista li { display: grid; gap: .25rem; padding-top: .75rem; border-top: 2px solid var(--liquen); font-size: .9375rem; color: #d3d9de; }
.stat { font: 800 clamp(2.6rem, 9vw, 4rem)/1 var(--display); color: var(--niebla); font-variant-numeric: tabular-nums; }
.cifras-nota { margin-top: 1.75rem; font-size: .875rem; color: #b9c1c8; }

/* Buscador y fichas */
.buscador { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: 1rem; background: #fff; border: 1px solid #cfd5d9; border-radius: var(--radio); box-shadow: 0 20px 40px -30px rgba(28, 34, 48, .5); }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; font-size: .875rem; }
select, input, textarea { width: 100%; min-height: 48px; padding: .65rem .75rem; font: 400 1rem/1.3 var(--texto); color: var(--cordon); background: var(--niebla); border: 1.5px solid #8a93a0; border-radius: var(--radio); }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--oxido); outline-offset: 1px; border-color: var(--cordon); }
.buscador-estado { margin: 1rem 0 1.5rem; font-size: .9375rem; color: var(--texto-suave); }
.fichas { display: grid; gap: 1.25rem; }
.ficha { display: grid; background: #fff; border: 1px solid #cfd5d9; border-radius: var(--radio); transform-style: preserve-3d; transition: transform .5s var(--ease-decel); }
.ficha[hidden] { display: none; }
.ficha-ilus { padding: 1.25rem 1.25rem 0; background: var(--niebla-2); border-radius: var(--radio) var(--radio) 0 0; transform: translateZ(36px); }
.ficha-ilus svg { width: 100%; }
.trazo { fill: none; stroke: var(--cordon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ficha-cuerpo { display: grid; gap: .75rem; padding: 1.25rem; transform: translateZ(18px); }
.ficha h3 { font-size: 1.9rem; }
.ficha-etiqueta { font-weight: 600; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--oxido); }
.ficha-etiqueta.ejemplo { justify-self: start; padding: .15rem .5rem; border: 1.5px dashed var(--oxido); border-radius: 3px; }
.ficha-mapa { width: 120px; }
.ficha-mapa path { fill: none; stroke: var(--liquen); stroke-width: 2; }
.ficha-mapa circle { fill: #8a93a0; }
.ficha-mapa .activo { fill: var(--oxido); }
.ficha-destacada { border-color: var(--oxido); }
.fichas-vacio { padding: 1.5rem; border: 1.5px dashed #8a93a0; border-radius: var(--radio); color: var(--texto-suave); }

/* Nosotros */
.nosotros { background: var(--niebla-2); }
.nosotros-grilla { display: grid; gap: 1rem; }
.nosotros-grilla p { font-size: clamp(1.125rem, 2.4vw, 1.375rem); max-width: 40rem; }

/* Servicios */
.servicios-grilla { display: grid; gap: 1rem; }
.servicio { padding: 1.5rem; background: var(--cordon); color: var(--niebla); border-radius: var(--radio); transform-style: preserve-3d; transition: transform .5s var(--ease-decel); }
.servicio-ilus { width: 72px; margin-bottom: 1.25rem; transform: translateZ(40px); }
.servicio-ilus path { fill: none; stroke: var(--oxido-claro); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.servicio h3 { font-size: 2rem; margin-bottom: .5rem; transform: translateZ(20px); }
.servicio p { color: #d3d9de; }
.servicio:nth-child(even) { background: var(--niebla-2); color: var(--cordon); }
.servicio:nth-child(even) p { color: var(--texto-suave); }
.servicio:nth-child(even) .servicio-ilus path { stroke: var(--oxido); }

/* Diferenciales */
.diferenciales { background: var(--niebla-2); }
.dif-lista { display: grid; gap: 2.5rem; }
.dif-lista li { display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 2px solid var(--cordon); }
.dif-lista h3 { font-size: 1.9rem; }
.dif-lista p { color: var(--texto-suave); }
.icono-dibujo { width: 56px; }
.icono-dibujo path { fill: none; stroke: var(--oxido); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
html.js .icono-dibujo path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-decel); }
html.js .icono-dibujo.dibujado path { stroke-dashoffset: 0; }
html.js .icono-dibujo.dibujado path + path { transition-delay: .5s; }

/* Tasación */
.tasacion { background: var(--cordon); color: var(--niebla); }
.tasacion .eyebrow { color: var(--oxido-claro); }
.tasacion-grilla { display: grid; gap: 2rem; }
.tasacion-grilla > div p:last-child { color: #d3d9de; font-size: 1.125rem; }
.form-tasacion { display: grid; gap: 1rem; padding: 1.25rem; background: var(--niebla); color: var(--cordon); border-radius: var(--radio); }
.aviso-demo { justify-self: start; padding: .2rem .6rem; font-weight: 600; font-size: .8125rem; background: var(--niebla-2); border: 1.5px dashed var(--oxido); border-radius: 3px; color: var(--oxido); }
textarea { resize: vertical; }
.form-estado { font-weight: 600; color: var(--wa); }

/* Oficinas */
.ofi-lista { display: grid; gap: 1rem; }
.oficina { display: grid; gap: .9rem; align-content: start; padding: 1.5rem; background: #fff; border: 1px solid #cfd5d9; border-top: 4px solid var(--oxido); border-radius: var(--radio); }
.oficina h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.9rem; }
.ofi-num { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--cordon); color: var(--niebla); font-size: 1rem; }
.oficina address { font-style: normal; }
.oficina p a { display: inline-block; padding-block: .6rem; overflow-wrap: anywhere; color: var(--oxido); font-weight: 600; }

/* Pie */
.pie { padding-block: 3rem; background: var(--cordon); color: #d3d9de; font-size: .9375rem; }
.pie-grilla { display: grid; gap: .75rem; }
.pie-marca { font: 800 1.75rem/1 var(--display); text-transform: uppercase; color: var(--niebla); }

/* Cursor: la cota de un cerro que se planta 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-dot, .cursor-ring { position: fixed; top: 0; left: 0; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--oxido); scale: var(--escala-dot, 1); transition: scale .15s var(--ease-decel); }
.cursor-ring { width: 36px; height: 36px; margin: -20px 0 0 -18px; scale: var(--escala, 1); rotate: var(--giro, 0deg); transition: scale .3s var(--ease-decel), rotate .4s var(--ease-decel); }
.cursor-ring path { fill: transparent; stroke: var(--oxido); stroke-width: 2; mix-blend-mode: difference; transition: fill .3s; }
.cursor.hover .cursor-ring { --escala: 1.45; }
.cursor.hover .cursor-ring path { fill: rgba(154, 66, 33, .25); }
.cursor.hover .cursor-dot { --escala-dot: 0; }

/* Tablet y escritorio */
@media (min-width: 640px) {
  .cifras-lista { grid-template-columns: repeat(3, 1fr); }
  .fichas, .ofi-lista, .servicios-grilla { grid-template-columns: repeat(2, 1fr); }
  .form-tasacion { grid-template-columns: 1fr 1fr; padding: 2rem; }
  .form-tasacion .aviso-demo, .campo-ancho, .form-tasacion .btn, .form-estado { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .cabecera { padding-inline: 2.5rem; }
  .hero { grid-template-columns: 1.05fr 1fr; padding: 10rem 2.5rem 4rem; align-items: center; }
  .hero-acciones .btn { flex: 0 0 auto; }
  .buscador { grid-template-columns: repeat(4, 1fr); padding: 1.25rem; }
  .cifras-lista { grid-template-columns: repeat(6, 1fr); }
  .fichas { grid-template-columns: repeat(3, 1fr); }
  .ficha-destacada { grid-column: span 3; grid-template-columns: 1fr 1.2fr; }
  .ficha-destacada .ficha-ilus { border-radius: var(--radio) 0 0 var(--radio); padding: 2rem; display: grid; align-items: end; }
  .ficha-destacada .btn-wa { width: auto; justify-self: start; }
  .nosotros-grilla { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
  .servicios-grilla { grid-template-columns: repeat(3, 1fr); }
  .servicio-ancho { grid-column: span 2; }
  .dif-lista { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .tasacion-grilla { grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: start; }
  .ofi-lista { grid-template-columns: repeat(3, 1fr); }
  .pie-grilla { grid-template-columns: 1fr 2fr 1.5fr; align-items: end; }
}

/* Movimiento por CSS: scroll reveal y relieve que se acuesta al bajar */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: subir linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
    .relieve-escena { animation: acostar linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
  }
}
@keyframes subir { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
@keyframes acostar { from { --tilt: 56deg; } to { --tilt: 18deg; } }

/* Movimiento reducido: el relieve queda plano, como un mapa visto desde arriba */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .relieve-escena { transform: none; animation: none; }
  .nivel, .pin, .ficha-ilus, .ficha-cuerpo, .servicio-ilus, .servicio h3 { transform: none; }
}