/* J.C. Marini Inmobiliaria · demo Leomak.Soft · concepto "Firma y sello" */
@font-face { font-family: "Yesteryear"; src: url("fonts/yesteryear-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Domine: la serif con remates curvos más cercana al "inmobiliaria" de su logo (comparada contra 16 serif y slab). */
@font-face { font-family: "Domine"; src: url("fonts/domine-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Domine"; src: url("fonts/domine-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Domine"; src: url("fonts/domine-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --rojo: #b5051a;          /* el rojo de su web y de la firma del logo (#b80828 medido) */
  --rojo-hondo: #8c0414;
  --tinta: #1c1617;         /* el negro de "inmobiliaria", teñido de rojo */
  --papel: #ffffff;
  --papel-2: #f6f2f2;
  --papel-3: #ede6e6;
  --gris: #574e50;
  --claro-sobre-oscuro: #f4eeee;
  --firma: "Yesteryear", "Brush Script MT", cursive;
  --texto: "Domine", Georgia, "Times New Roman", serif;
  --margen: clamp(1rem, 3.2vw, 2.5rem);
  --t-firma: clamp(2.4rem, 4.4vw, 3.4rem);
  --t-h1: clamp(2rem, 3.6vw, 3.1rem);
  --t-h2: clamp(1.75rem, 3vw, 2.5rem);
  --t-h3: clamp(1.25rem, 1.9vw, 1.6rem);
  --t-cuerpo: 1.0625rem;
  --t-chico: .875rem;
  --ease-salida: cubic-bezier(.16, 1, .3, 1);
  --ease-pluma: cubic-bezier(.55, .08, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-cuerpo)/1.55 var(--texto); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--tinta); color: var(--papel); }
.saltar:focus { top: 1rem; }

.franja { margin: 0; padding: .55rem max(var(--margen), calc(50% - 38ch)); background: var(--tinta); color: var(--claro-sobre-oscuro); font-size: var(--t-chico); text-align: center; }

/* Cabecera: la firma a la izquierda, tres links, una acción. */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--margen); }
.marca { font: 400 2rem/1 var(--firma); color: var(--rojo); text-decoration: none; padding: .2rem 0; }
.cabecera nav ul { display: flex; gap: clamp(1rem, 3vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.cabecera nav a { display: inline-block; padding: .6rem 0; font-weight: 500; text-decoration: none; }
.cabecera nav a:hover { color: var(--rojo); text-decoration: underline; }
@media (max-width: 699px) { .cabecera nav { display: none; } }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.4rem; border: 0; background: var(--rojo); color: var(--papel); font: 600 1rem/1.1 var(--texto); text-decoration: none; cursor: pointer; transition: background-color .2s, scale .15s; }
.boton:hover { background: var(--rojo-hondo); }
.boton:active { scale: .97; }
.boton-chico { min-height: 44px; padding: .6rem 1rem; }
.boton-claro { background: var(--papel); color: var(--rojo); }
.boton-claro:hover { background: var(--papel-3); }

/* Hero: la firma del logo a tamaño de firma, el título en su serif y, al lado, el escritorio con tres fojas reales. */
.hero { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4.5rem) var(--margen) clamp(3rem, 6vw, 5rem); }
.hero-texto { display: grid; gap: 1.25rem; justify-items: start; }
.hero-marca { display: grid; justify-items: start; margin: 0; line-height: 1; }
.firma { position: relative; display: inline-block; padding: 0 .12em .06em 0; font: 400 var(--t-firma)/1 var(--firma); color: var(--rojo); }
.hero-inmo { margin: -.15rem 0 0 .2rem; font: 700 1.0625rem/1 var(--texto); color: var(--tinta); }
.hero-t { max-width: 19ch; font-size: var(--t-h1); }
.hero-bajada { margin: 0; max-width: 36rem; font-size: 1.125rem; color: var(--gris); }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .35rem; }
.hero-tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; border-bottom: 2px solid var(--rojo); }
.hero-tel:hover { color: var(--rojo); }

/* El escritorio: tres fojas apiladas en perspectiva, la de arriba firmada y sellada. */
.escritorio { position: relative; display: block; width: min(100%, 30rem); aspect-ratio: 5 / 4; justify-self: center; perspective: 1400px; text-decoration: none; color: var(--tinta); }
.hoja { position: absolute; inset: 6% 0 8% 10%; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: .4rem; padding: clamp(1.1rem, 3vw, 1.75rem); background: var(--papel); border: 1px solid #ddd3d4; /* taste-skill-ignore: el borde es el canto del papel sobre el fondo blanco */ transform-origin: 50% 100%; transition: transform .6s var(--ease-salida); }
.hoja::before { content: ""; position: absolute; left: clamp(1.1rem, 3vw, 1.75rem); right: clamp(1.1rem, 3vw, 1.75rem); top: 58%; height: 38%; /* taste-skill-ignore: renglones de la foja, no un degradé decorativo */ background: repeating-linear-gradient(to bottom, transparent 0 1.35rem, var(--papel-3) 1.35rem calc(1.35rem + 1px)); }
.hoja-3 { transform: rotate(-7deg) translate(-4%, 3%); background: var(--papel-2); }
.hoja-2 { transform: rotate(4deg) translate(-3%, -2%); background: #fbf8f8; }
.hoja-1 { transform: rotate(-1.5deg); }
.hoja-tipo { font-size: var(--t-chico); color: var(--gris); }
.hoja-dir { font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; }
.hoja-precio { font-weight: 700; font-size: 1.125rem; color: var(--rojo); font-variant-numeric: tabular-nums; }
.hoja-datos { max-width: 26ch; font-size: var(--t-chico); color: var(--gris); }
.hoja { grid-template-rows: auto auto auto 1fr; }
.hoja-firma { z-index: 1; align-self: end; justify-self: start; font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.hoja .sello-hoja { position: absolute; z-index: 1; top: 12%; right: 8%; width: max-content; font-size: 1.0625rem; --giro: 8deg; }
@media (hover: hover) {
  .escritorio:hover .hoja-3 { transform: rotate(-11deg) translate(-12%, 4%); }
  .escritorio:hover .hoja-2 { transform: rotate(8deg) translate(12%, -4%); }
  .escritorio:hover .hoja-1 { transform: rotate(0deg) translateY(-2%); }
}
.escritorio:active .hoja-1 { transform: rotate(0deg) scale(.985); }

/* El sello: lo que la inmobiliaria estampa en sus fotos ("Reservada"), hecho tinta. */
.sello { position: relative; display: inline-grid; justify-items: center; align-content: center; padding: .45em .8em; border: 3px solid currentColor; color: var(--rojo); font: 700 1rem/1.15 var(--texto); text-transform: uppercase; letter-spacing: .04em; rotate: var(--giro, -7deg); }
.sello::before { content: ""; position: absolute; inset: 3px; border: 2px solid currentColor; pointer-events: none; }

/* Cinta. */
.fx-cinta { padding: 1rem 0; background: var(--rojo); color: var(--papel); font-weight: 600; font-size: 1.0625rem; }

/* Propiedades: cada una es una foja con su sello. */
.propiedades { padding: clamp(4.5rem, 10vw, 8rem) var(--margen) clamp(3rem, 7vw, 5rem); max-width: 1280px; margin: 0 auto; }
.prop-cab { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
.prop-bajada { margin: 0; max-width: 40rem; font-size: 1.125rem; }
.prop-bajada strong { color: var(--rojo); font-variant-numeric: tabular-nums; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtro { min-height: 44px; padding: .55rem 1rem; border: 0; background: var(--papel-2); color: var(--tinta); font: 500 1rem/1.1 var(--texto); cursor: pointer; transition: background-color .2s, color .2s, scale .15s; }
.filtro:hover { background: var(--papel-3); }
.filtro:active { scale: .96; }
.filtro[aria-pressed="true"] { background: var(--rojo); color: var(--papel); }

.fojas { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.foja { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dir precio" "acc sello"; align-items: center; gap: .6rem 1rem; padding: 1.25rem clamp(1rem, 2.5vw, 2rem); background: var(--papel-2); transition: background-color .25s; }
.foja[hidden] { display: none; }
.foja-dir { grid-area: dir; }
.foja-dir h3 { font-size: var(--t-h3); transition: translate .35s var(--ease-salida), color .25s; }
.foja-dir p { margin: .35rem 0 0; color: var(--gris); }
.foja-precio { grid-area: precio; margin: 0; align-self: start; font-weight: 600; font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sello-foja { grid-area: sello; justify-self: end; font-size: 1rem; transition: rotate .35s var(--ease-salida); }
.foja-reservada .sello-foja { background: var(--rojo); color: var(--papel); --giro: -4deg; }
.foja-acciones { grid-area: acc; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.25rem; }
.foja-acciones a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--rojo); text-underline-offset: .25em; }
.fx-ver-360 { color: var(--tinta); }
.foja:active { scale: .995; }
@media (min-width: 600px) { .dato { white-space: nowrap; } }
.dato:not(:last-child)::after { content: " ·"; }
@media (max-width: 599px) {
  .foja { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dir dir" "precio sello" "acc acc"; }
  .sello-foja { align-self: center; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .legajo-fotos { grid-template-columns: 1fr 1fr; }
  .lg-a { grid-row: span 2; }
  .lg-a .marco { aspect-ratio: auto; height: 100%; }
}
@media (hover: hover) {
  .foja:hover { background: var(--papel-3); }
  .foja:hover .foja-dir h3 { translate: 6px 0; color: var(--rojo); }
  .foja:hover .sello-foja { rotate: -1deg; }
}
.sin-fichas { margin: 1rem 0 0; padding: 1.25rem; background: var(--papel-2); }
.nota { margin: 1.5rem 0 0; max-width: 65ch; color: var(--gris); }

/* Tasaciones: panel oscuro con la foto recortada en óvalo, como un sello de escribanía. */
.tasaciones { padding: 0 clamp(.6rem, 1.4vw, 1.25rem); }
.panel { display: grid; gap: 2.5rem; overflow: hidden; padding: clamp(2rem, 4vw, 3.5rem); padding-bottom: 0; background: var(--tinta); color: var(--claro-sobre-oscuro); }
.panel h2 { max-width: 15ch; color: var(--claro-sobre-oscuro); }
.panel-foto { margin: 2rem auto 0; width: min(86vw, 560px); aspect-ratio: 4 / 3; overflow: hidden; clip-path: ellipse(50% 50% at 50% 50%); }
.panel-foto img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.panel-der { display: grid; gap: 2rem; align-content: start; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.bloque h3 { font-size: 1.5rem; margin-bottom: .5rem; letter-spacing: -.01em; }
.bloque p { margin: 0; max-width: 34rem; }
.form-tas { display: grid; gap: 1rem; max-width: 30rem; }
.form-tas label { display: grid; gap: .35rem; font-weight: 600; }
.form-tas select, .form-tas input { min-height: 48px; padding: .6rem .75rem; border: 0; border-bottom: 2px solid var(--claro-sobre-oscuro); background: #2a2223; color: var(--claro-sobre-oscuro); font: 400 1rem/1.3 var(--texto); }
.form-tas input::placeholder { color: #c9bdbe; }
.form-tas .boton { justify-self: start; }
.aviso { margin: 0; font-size: var(--t-chico); color: #d9cfd0; }

/* Ciudad: un legajo de fotos de Bahía Blanca, de distintos tamaños. */
.legajo { max-width: 1280px; margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) var(--margen) 0; }
.legajo h2 { margin-bottom: 2rem; }
.legajo-fotos { display: grid; gap: 1rem; }
.legajo figure { margin: 0; }
.para { overflow: hidden; }
.legajo figure { position: relative; display: grid; }
.marco { aspect-ratio: 4 / 3; }
.marco img { width: 100%; height: 100%; object-fit: cover; scale: 1.12; filter: grayscale(1) contrast(1.05); }
.legajo figcaption { position: absolute; left: 0; top: 0; max-width: calc(100% - 1rem); padding: .45rem .75rem; background: var(--tinta); color: var(--claro-sobre-oscuro); font-size: var(--t-chico); }
.lg-a .marco img { object-position: 62% 58%; }

/* Contacto: la dirección en filas grandes. */
.contacto { padding: clamp(4.5rem, 10vw, 8rem) 0 0; }
.filas { margin: 0; padding: 0; list-style: none; }
.fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: clamp(84px, 10vw, 150px); padding: .6rem var(--margen) 1.1rem; font: 700 clamp(1.4rem, 3.4vw, 2.6rem)/1.1 var(--texto); letter-spacing: -.01em; }
.fila:nth-child(odd) { background: var(--papel-2); }
.fila a { text-decoration: none; transition: color .2s; }
.fila a:hover { color: var(--rojo); }
.fila-mail { font-size: clamp(1.1rem, 3vw, 2.2rem); }
.fila-mail a { overflow-wrap: anywhere; }

/* Pie: invitación y la firma cortada. */
.pie { position: relative; overflow: hidden; background: var(--rojo); color: var(--papel); padding: clamp(3.5rem, 8vw, 6rem) var(--margen) 0; }
.pie-arriba { display: grid; gap: 2rem; }
.pie-inv { display: grid; gap: 1.5rem; justify-items: start; }
.pie-inv h2 { max-width: 14ch; }
.pie-links { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.pie-links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 500; overflow-wrap: anywhere; }
.pie-legal { display: grid; gap: .6rem; margin-top: 3rem; font-size: var(--t-chico); }
.pie-legal p { margin: 0; max-width: 75ch; }

/* Escritorio. */
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: min(34rem, calc(100svh - 7.5rem)); padding-top: clamp(1.5rem, 3vw, 3rem); }
  .escritorio { justify-self: end; }
  .foja { grid-template-columns: minmax(0, 1fr) auto 11rem; grid-template-areas: "dir sello precio" "acc sello precio"; padding-block: 1.5rem; }
  .foja-precio { align-self: center; text-align: right; }
  .sello-foja { justify-self: center; }
  .panel { grid-template-columns: 1.05fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
  .panel-foto { margin: 3rem 0 -16%; width: 100%; }
  .panel-der { padding-top: .5rem; }
  .legajo-fotos { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 1.25rem; }
  .lg-a { grid-column: 1 / 6; grid-row: 1 / 3; }
  .lg-a .marco { aspect-ratio: auto; height: 100%; }
  .lg-b { grid-column: 6 / 13; }
  .lg-b .marco { aspect-ratio: 16 / 9; }
  .lg-c { grid-column: 6 / 9; }
  .lg-d { grid-column: 9 / 13; }
  .pie-arriba { grid-template-columns: 7fr 5fr; align-items: start; }
  .pie-links { justify-self: end; }
}
@media (min-width: 1100px) {
  .fojas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
  .foja { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dir dir" "precio sello" "acc acc"; padding-block: 1.75rem; }
  .foja-precio { align-self: center; text-align: left; }
  .sello-foja { justify-self: end; align-self: center; }
}

/* Movimiento (solo con JS y sin movimiento reducido: el núcleo agrega la clase .anim). */
.pluma { display: none; }
.anim .firma { clip-path: inset(-20% 100% -40% -5%); }
.anim .firma.escrita { clip-path: inset(-20% -6% -40% -5%); transition: clip-path 1.6s var(--ease-pluma); }
.anim .pluma { display: block; position: absolute; left: .1em; bottom: .22em; width: .1em; height: .1em; border-radius: 50%; background: var(--rojo); opacity: 0; }
.anim .firma.escrita .pluma { animation: pluma 1.6s var(--ease-pluma) forwards; }
@keyframes pluma { 0% { opacity: 1; translate: 0 0; } 25% { translate: calc(var(--w, 300px) * .25) -.35em; } 50% { translate: calc(var(--w, 300px) * .5) .05em; } 75% { translate: calc(var(--w, 300px) * .75) -.3em; } 92% { opacity: 1; } 100% { opacity: 0; translate: var(--w, 300px) 0; } }
.h-pal { display: inline-block; }
.anim .h-pal, .anim .hero-bajada, .anim .hero-acciones { opacity: 0; }
.anim .hoja { opacity: 0; translate: 0 -40px; rotate: x 18deg; }
.anim .hoja.cae { opacity: 1; translate: 0 0; rotate: x 0deg; transition: opacity .35s ease-out var(--d), translate .9s var(--ease-salida) var(--d), rotate .9s var(--ease-salida) var(--d), transform .6s var(--ease-salida); }
.anim .sello-hoja, .anim .sello-foja { opacity: 0; }
.anim .sellada { animation: estampar .6s cubic-bezier(.2, .9, .25, 1) both; }
.sellada::after { content: ""; position: absolute; inset: -7px; border: 2px solid var(--rojo); opacity: 0; animation: tinta .7s .32s ease-out; pointer-events: none; }
@keyframes estampar {
  0% { opacity: 0; transform: perspective(600px) translateZ(160px) rotateX(22deg); }
  58% { opacity: 1; transform: perspective(600px) translateZ(-14px) rotateX(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes tinta { 0% { opacity: .55; scale: .92; } 100% { opacity: 0; scale: 1.28; } }
.anim .foja { opacity: 0; translate: 0 26px; }
.anim .foja.vista { opacity: 1; translate: 0 0; transition: opacity .6s ease-out var(--d, 0ms), translate .8s var(--ease-salida) var(--d, 0ms), background-color .25s; }
.anim .fila > * { opacity: 0; translate: 0 .5em; }
.anim .fila.vista > * { opacity: 1; translate: 0 0; transition: opacity .6s ease-out, translate .8s var(--ease-salida); }

@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: #b5051a; --fx-oscuro: #1c1617; --fx-claro: #f6f2f2; }