/* Panitru Propiedades · demo de Leomak.Soft. Concepto "Un trazo, tres casas": la línea doble del isologo es el riel del que cuelgan la ciudad, la costa y la sierra. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("fonts/schibsted-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("fonts/schibsted-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/schibsted-grotesk-700.woff2") format("woff2"); }

:root {
  /* Primitivos (mismos nombres y valores que las Variables de Figma) */
  --tinta: #1c1f21;
  --pizarra: #52575b;
  --salvia: #95a985;
  --salvia-honda: #4a5d3e;
  --papel: #f1f2ef;
  --niebla: #e2e5e0;
  --blanco: #ffffff;
  --suave: #42474b;
  /* Tipografía: estilos Escritorio y Celular de Figma, fluidos entre los dos */
  --fuente: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --t-h1: clamp(2.125rem, 1.6rem + 1.3vw, 2.75rem);
  --t-h2: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  --t-h3: clamp(1.3125rem, 1.15rem + .5vw, 1.5rem);
  --t-base: clamp(1rem, .97rem + .1vw, 1.0625rem);
  --t-chico: .875rem;
  --m: clamp(20px, 5vw, 72px);
  --gap: clamp(16px, 1.7vw, 24px);
  --ease-salida: cubic-bezier(.16, 1, .3, 1);
  --ease-persiana: cubic-bezier(.77, 0, .18, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fuente); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; }
h1, h2, h3, h4, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--salvia); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--salvia-honda); outline-offset: 3px; }
.sr, .sr-svg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--m); top: -60px; z-index: 50; padding: .7rem 1rem; background: var(--tinta); color: var(--blanco); }
.saltar:focus { top: .5rem; }
.tab { font-variant-numeric: tabular-nums; }

.franja { padding: .55rem var(--m); background: var(--tinta); color: var(--blanco); font-size: var(--t-chico); line-height: 1.4; }

/* Cabecera: isologo y nombre, tres links, una acción. */
.cabecera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem var(--m); }
.marca { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; text-decoration: none; font-weight: 500; font-size: 1.25rem; letter-spacing: -.01em; }
.marca-iso { width: 44px; height: 31px; color: var(--tinta); }
.cabecera nav ul { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); }
.cabecera nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .9375rem; }
.cab-accion { justify-self: end; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; background: var(--tinta); color: var(--blanco); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background .2s; }

/* Botones: rectos, un solo relleno. */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border: 0; background: var(--tinta); color: var(--blanco); font-weight: 500; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s var(--ease-salida); }
.boton:active, .cab-accion:active { transform: scale(.97); }

/* HERO: tres fotos colgadas de un riel con techos, como las tres casas del isologo. */
.hero { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--m) clamp(48px, 6vw, 88px); grid-template-rows: clamp(96px, 9vw, 132px) auto auto 1fr; }
.riel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.riel path { fill: none; stroke-width: 5; stroke-linejoin: miter; stroke-miterlimit: 8; }
.riel-a, .riel-b { stroke: var(--pizarra); }
.riel-luz { stroke: var(--salvia); stroke-width: 9; opacity: 0; }
.print { position: relative; z-index: 1; }
.print-marco { overflow: hidden; background: var(--niebla); }
.print-marco img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease-salida); }
.print-sierra { grid-column: 1 / 3; grid-row: 2; }
.print-sierra .print-marco { aspect-ratio: 1; }
.print-ciudad { grid-column: 4 / 8; grid-row: 2 / 5; }
.print-ciudad .print-marco { aspect-ratio: 3 / 4; }
.print-costa { grid-column: 9 / 13; grid-row: 2; margin-right: calc(-1 * var(--m)); }
.print-costa .print-marco { aspect-ratio: 16 / 10; }
.print-ciudad .print-marco img { object-position: 30% 50%; }
.print-zona { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 0 .45rem; min-height: 44px; padding: .6rem 0 0; border: 0; background: none; font-weight: 500; font-size: var(--t-base); text-align: left; cursor: pointer; }
.print-zona span { grid-column: 1 / -1; grid-row: 2; color: var(--suave); font-weight: 400; font-size: var(--t-chico); }
.print-zona::after { content: ""; flex: none; width: .55em; height: .55em; margin-left: .15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -.2em; transition: translate .3s var(--ease-salida); }
.hero-texto { grid-column: 1 / 4; grid-row: 3; padding-top: clamp(24px, 2.6vw, 40px); }
.hero-t { font-weight: 500; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.03em; perspective: 600px; }
.hero-t .palabra { display: inline-block; white-space: nowrap; }
.hero-t .letra { display: inline-block; transform-origin: 50% 100%; }
.hero-bajada { max-width: 30ch; margin-top: 1rem; font-size: 1.125rem; line-height: 1.5; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.hero-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.hero-nota { padding-top: 1rem; padding-right: var(--m); max-width: calc(34ch + var(--m)); color: var(--suave); font-size: 1rem; }

/* Persianas: solo con JS y movimiento permitido (clase .anim que pone el núcleo). */
.anim .print-marco { clip-path: inset(0 0 100% 0); }
.anim .print-marco img { scale: 1.12; }
.anim .print.abierta .print-marco { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-persiana); }
.anim .print.abierta .print-marco img { scale: 1; transition: scale 1.6s var(--ease-salida); }
.riel.dibujando path { transition: stroke-dashoffset 1.4s var(--ease-salida); }
.riel-luz.viva { opacity: 1; transition: stroke-dashoffset .7s var(--ease-salida), opacity .2s; }

/* LISTADO: título y filtro a la izquierda (quedan a la vista), filas a la derecha. */
.listado { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(88px, 11vw, 168px) var(--m) clamp(80px, 9vw, 140px); }
.listado-cab { grid-column: 1 / 7; align-self: start; display: grid; gap: 2rem; }
.listado-cab h2 { font-weight: 500; font-size: var(--t-h2); line-height: 1; letter-spacing: -.035em; max-width: 13ch; }
.buscador { display: grid; gap: 1.1rem; max-width: 440px; }
.mini-iso { width: 112px; height: auto; }
.mini-base { stroke: #c3c9c0; }
.mini-luz { stroke: var(--salvia-honda); stroke-linecap: butt; }
.zonas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.zonas legend { margin-bottom: .5rem; font-size: var(--t-chico); color: var(--suave); }
.zonas label { position: relative; }
.zonas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.zonas span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.05rem; background: var(--niebla); font-weight: 500; transition: background .2s, color .2s; }
.zonas input:checked + span { background: var(--tinta); color: var(--blanco); }
.zonas input:focus-visible + span { outline: 3px solid var(--salvia-honda); outline-offset: 2px; }
.operacion { display: grid; gap: .4rem; font-size: var(--t-chico); color: var(--suave); }
.operacion select { min-height: 48px; padding: 0 .9rem; border: 0; background: var(--blanco); color: var(--tinta); font-size: 1rem; }
.contador { font-size: var(--t-chico); color: var(--suave); }
.contador span { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.listado-foto { width: 78%; }
.para { overflow: hidden; }
.listado-foto img, .zonas-foto img, .servicio-foto img { width: 100%; height: 100%; object-fit: cover; }
.listado-foto img { aspect-ratio: 16 / 10; }
figcaption { padding-top: .5rem; font-size: var(--t-chico); color: var(--suave); }
.listado-filas { grid-column: 8 / 13; }
.grupo + .grupo { margin-top: 44px; }
.grupo-t { padding-bottom: .5rem; font-weight: 500; font-size: var(--t-h3); letter-spacing: -.015em; }
.grupo-t span { color: var(--suave); font-weight: 400; }
.fila { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tipo precio" "dir dir" "datos acciones"; column-gap: 1rem; padding: 1rem .9rem; margin-inline: -.9rem; transition: background .25s; }
.fila:nth-child(even) { background: rgb(226 229 224 / .55); }
.f-tipo { grid-area: tipo; font-size: .9375rem; color: var(--suave); }
.f-precio { grid-area: precio; font-weight: 700; }
.f-dir { grid-area: dir; padding-top: .15rem; font-weight: 500; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; transition: translate .35s var(--ease-salida); }
.f-datos { grid-area: datos; align-self: center; font-size: 1rem; color: var(--suave); }
.f-acciones { grid-area: acciones; display: flex; align-items: center; justify-content: end; gap: .9rem; }
.f-acciones a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: 1rem; color: var(--salvia-honda); }
.fila .fx-ver-360 { font-size: 1rem; color: var(--tinta); }
.fila:active { background: var(--niebla); }
.anim .fila { opacity: 0; translate: 0 18px; }
.anim .fila.vista { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease-salida), translate .6s var(--ease-salida), background .25s; }
.sin-fichas { padding: 1.5rem 0; color: var(--suave); max-width: 40ch; }

/* ZONAS: foto ancha, un recuadro salvia con el esquema y los datos. */
.zonas-sec { padding: clamp(80px, 9vw, 140px) var(--m); background: var(--niebla); }
.zonas-sec h2 { font-weight: 500; font-size: var(--t-h2); line-height: 1; letter-spacing: -.035em; }
.zonas-lead { max-width: 52ch; margin-top: 1.5rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.45; }
.zonas-mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 20px; margin-top: clamp(48px, 5vw, 72px); }
.zonas-foto { grid-column: 1 / 9; grid-row: 1 / 3; }
.zonas-foto img { aspect-ratio: 16 / 10; }
.zonas-cita { grid-column: 6 / 9; grid-row: 1; align-self: start; z-index: 1; padding: 20px; background: var(--papel); font-size: var(--t-base); }
.zonas-tile { grid-column: 9 / 13; grid-row: 1; background: var(--salvia); padding: 16px; }
.mapa { width: 100%; height: auto; }
.mapa-mar { fill: #7d9270; }
.mapa-ruta { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-dasharray: 8 7; }
.mapa-p { fill: var(--tinta); }
.mapa-of { fill: var(--blanco); stroke: var(--tinta); stroke-width: 4; }
.mapa text { font-family: var(--fuente); font-size: 14px; font-weight: 500; fill: var(--tinta); }
.zonas-datos { grid-column: 9 / 13; grid-row: 2; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.zonas-datos dt { font-size: var(--t-chico); color: var(--suave); }
.zonas-datos dd { font-weight: 500; }

/* Panel 360° del kit con la escala de la demo. */
.fx-360-panel-cab h2 { font-size: var(--t-h3); font-weight: 500; }

/* Cinta con los lugares y servicios. */
.cinta { padding: 1.1rem 0; background: var(--pizarra); color: var(--blanco); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.01em; }

/* QUÉ HACEMOS: todo cuelga de un eje en la columna 5; fotos de tamaños distintos al margen. */
.hacemos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(64px, 8vw, 112px); padding: clamp(88px, 11vw, 168px) var(--m); }
.hacemos h2 { grid-column: 5 / 13; font-weight: 500; font-size: var(--t-h2); line-height: 1; letter-spacing: -.035em; }
.servicio { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); align-items: start; }
.servicio.servicio-tasar h3, .servicio.servicio-tasar > p { grid-column: 1 / 5; }
.servicio.servicio-tasar > p { grid-row: 2; }
.servicio h3 { grid-column: 1 / 6; font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; }
.servicio > p { grid-column: 1 / 5; margin-top: 1rem; max-width: 36ch; font-size: 1.0625rem; }
.servicio-foto { grid-column: 6 / 9; grid-row: 1 / 3; }
.s-a { width: 100%; }
.s-a img { aspect-ratio: 4 / 5; }
.s-b { width: 74%; justify-self: end; }
.s-b img { aspect-ratio: 3 / 2; }
.servicio-tasar .tasar { grid-column: 5 / 9; grid-row: 1 / 3; display: grid; gap: .9rem; padding: clamp(20px, 2vw, 28px); background: var(--blanco); }
.tasar label { display: grid; gap: .35rem; font-size: var(--t-chico); color: var(--suave); }
.tasar input, .tasar select { min-height: 48px; padding: 0 .85rem; border: 2px solid var(--niebla); background: var(--papel); color: var(--tinta); font-size: 1rem; transition: border-color .2s; }
.tasar input:focus, .tasar select:focus { border-color: var(--salvia-honda); outline: none; }
.tasar-nota { font-size: 1rem; color: var(--suave); }
.tasar-aviso:empty { display: none; }
.tasar-aviso { font-size: var(--t-chico); color: var(--salvia-honda); font-weight: 500; }

/* CONTACTO: una frase, el sello de la marca y dos formas de escribir. */
.contacto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: clamp(96px, 11vw, 160px) var(--m) clamp(80px, 8vw, 120px); background: var(--papel); }
.contacto-frase { grid-column: 1 / 7; font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.12; letter-spacing: -.025em; max-width: 22ch; }
.contacto-sello { grid-column: 8 / 10; aspect-ratio: 1; max-width: 168px; display: grid; place-items: center; background: var(--pizarra); color: var(--blanco); }
.contacto-sello svg { width: 64%; height: auto; }
.contacto-datos { grid-column: 10 / 13; display: grid; gap: .25rem; }
.contacto-q { margin-bottom: .6rem; font-weight: 500; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.015em; }
.contacto-datos a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; overflow-wrap: anywhere; }
.contacto-lugar { margin-top: .5rem; font-size: var(--t-chico); color: var(--suave); }

/* PIE: fondo pizarra, columnas arriba y la marca abajo, a tamaño medido. */
.pie { display: grid; grid-template-rows: auto 1fr auto auto; padding: 56px var(--m) 28px; background: var(--pizarra); color: var(--blanco); }
.pie-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pie-cols p { color: #e3e5e6; font-size: .9375rem; }
.pie-cols .pie-t { color: var(--blanco); font-weight: 500; margin-bottom: .35rem; }
.pie-cols a { display: inline-flex; min-height: 32px; align-items: center; }
.pie-marca { grid-row: 3; display: flex; align-items: center; gap: .3em; margin-top: 3rem; font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -.03em; }
.pie-marca svg { width: 1.25em; height: .88em; flex: none; }
.pie-legal { grid-row: 4; margin-top: 1.25rem; max-width: 72ch; font-size: 1rem; color: #e3e5e6; }

@media (hover: hover) {
  .cabecera nav a:hover, .hero-link:hover, .contacto-datos a:hover, .pie-cols a:hover { text-decoration-thickness: 2px; }
  .cab-accion:hover, .boton:hover { background: var(--salvia-honda); }
  .print:hover .print-marco img { scale: 1.04; }
  .print-zona:hover::after { translate: .25rem -.2em; }
  .fila:hover { background: var(--niebla); }
  .fila:hover .f-dir { translate: .35rem 0; }
  .zonas span:hover { background: #d3d8d0; }
  .zonas input:checked + span:hover { background: var(--tinta); }
}

@media (min-width: 1024px) and (min-height: 820px) { .listado-cab { position: sticky; top: 24px; } }

/* Tablet */
@media (max-width: 1023px) {
  .hero { grid-template-rows: clamp(80px, 11vw, 120px) auto auto; }
  .print-sierra { grid-column: 1 / 4; }
  .print-ciudad { grid-column: 5 / 9; grid-row: 2 / 4; }
  .hero-texto { grid-column: 1 / 5; }
  .hero-t { font-size: 2rem; }
  .listado-cab { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: end; }
  .listado-cab h2 { grid-column: 1 / -1; }
  .listado-foto { width: 100%; }
  .listado-filas { grid-column: 1 / -1; margin-top: 3rem; }
  .hacemos h2, .servicio { grid-column: 1 / -1; }
  .contacto-frase { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .contacto-sello { grid-column: 1 / 4; }
  .contacto-datos { grid-column: 5 / 13; }
}

/* Celular: el riel se corta en tramos y cada foto lleva su techo. */
@media (max-width: 719px) {
  .cabecera { grid-template-columns: 1fr auto; }
  .cabecera nav { display: none; }
  .hero { grid-template-rows: 72px auto auto auto auto; padding-bottom: 56px; }
  .print-ciudad { grid-column: 1 / 9; grid-row: 2; }
  .print-ciudad .print-marco { aspect-ratio: 4 / 5; }
  .print-sierra { grid-column: 8 / 13; grid-row: 3; margin-top: 64px; }
  .hero-texto { grid-column: 1 / 8; grid-row: 3; padding-top: 40px; }
  .hero-t { font-size: clamp(1.75rem, 8.4vw, 2.125rem); }
  .print-costa { grid-column: 1 / -1; grid-row: 4; margin: 96px calc(-1 * var(--m)) 0; }
  .print-costa .print-zona { padding-left: var(--m); }
  .hero-nota { padding-left: var(--m); padding-right: var(--m); }
  .hero-acciones { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .listado-cab { grid-template-columns: 1fr; }
  .listado-foto { width: 64%; justify-self: end; }
  .fila { grid-template-areas: "tipo precio" "dir dir" "datos datos" "acciones acciones"; }
  .f-acciones { justify-content: start; gap: 1.25rem; }
  .zonas-foto { grid-column: 1 / -1; grid-row: auto; }
  .zonas-foto img { aspect-ratio: 4 / 3; }
  .zonas-cita { grid-column: 1 / -1; grid-row: auto; padding: 0; background: none; }
  .zonas-tile { grid-column: 1 / -1; grid-row: auto; }
  .zonas-datos { grid-column: 1 / -1; grid-row: auto; }
  .servicio h3, .servicio > p { grid-column: 1 / -1; }
  .servicio-foto { grid-column: 1 / -1; grid-row: auto; margin-top: 1.5rem; }
  .servicio-foto figcaption { display: none; }
  .s-a { width: 100%; }
  .s-b { width: 70%; }
  .servicio-tasar .tasar { grid-column: 1 / -1; grid-row: auto; margin-top: 1.5rem; }
  .contacto-sello { grid-column: 1 / 4; max-width: 96px; }
  .contacto-frase { font-size: 1.5rem; }
  .contacto-datos { grid-column: 5 / 13; }
  .pie-cols { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .pie { min-height: auto; }
  .pie-marca { margin-top: 4rem; }
}

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

/* fx: colores para la capa de efectos */
:root { --fx-acento: #4a5d3e; --fx-oscuro: #1c1f21; --fx-claro: #f1f2ef; }