/* ============================================================
   CAPUCCI PROPIEDADES — SISTEMA VISUAL · TANDA A
   Maqueta de diseño. No es el sitio definitivo.
   Régimen cromático base: marfil + azul pizarra (D-101).
   ============================================================ */

:root{
  color-scheme: light;

  /* --- Color --------------------------------------------- */
  --papel:      #F2F0EB;   /* fondo base, marfil */
  --papel-alt:  #EAE7E0;   /* fondo de sección alterna */
  --papel-hi:   #FAF9F6;   /* superficie elevada */
  --tinta:      #1B2430;   /* texto principal */
  --pizarra:    #33465B;   /* marca y acentos */
  --pizarra-cl: #52687F;   /* hover / secundario */
  --gris:       #63686F;   /* texto terciario · AA: 4,93 sobre papel, 4,55 sobre alterna */
  --linea:      #D8D3C9;   /* filetes */
  --linea-sutil:#E2DED5;
  --negro:      #0E1216;   /* régimen secundario de identidad */

  /* --- Tipografía (Opción C) ------------------------------ */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-ui:      "Jost", ui-sans-serif, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texto:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Ritmo (base 8) ------------------------------------ */
  --c1: .5rem; --c2: 1rem;  --c3: 1.5rem; --c4: 2.5rem;
  --c5: 4rem;  --c6: 6rem;  --c7: 9rem;   --c8: 12.5rem;

  --seccion: clamp(5.5rem, 11vw, 12.5rem);
  --canal:   clamp(1.25rem, 4.5vw, 4.5rem);
  --ancho:   1560px;
  --medida:  62ch;

  /* --- Movimiento ---------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --lento: 900ms;
  --medio: 620ms;
  --rapido: 280ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-weight:400;
  font-size:clamp(1rem, .97rem + .14vw, 1.0625rem);
  line-height:1.72;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  /* `clip` y no `hidden`: hidden computa overflow-y:auto y convierte al body en
     contenedor de scroll, y entonces el `position:sticky` de la obertura se
     ancla a el en vez de al viewport. Recorta igual y no crea el contenedor. */
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* ============================================================
   TIPOGRAFÍA — tres familias, tres oficios (D-105)
   Cormorant Garamond · display, grandes titulares, entradilla editorial
   Jost              · navegación, etiquetas, datos, microinterfaz
   Inter             · párrafos largos y lectura sostenida
   ============================================================ */

.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.012em;
}
/* Compensación óptica: el texto claro sobre fondo oscuro engorda,
   así que sobre fotografía y sobre pizarra el display baja a 300. */
.ober__frase, .ober__verbo, .cierre .display{ font-weight:300; }
h1,h2,h3{ margin:0; font-weight:300; }

.t-hero{ font-size:clamp(2.6rem, 7.6vw, 7rem); line-height:1.02; }
.t-1   { font-size:clamp(2.05rem, 4.6vw, 3.9rem); line-height:1.08; }
.t-2   { font-size:clamp(1.6rem, 2.9vw, 2.55rem); line-height:1.14; }

/* Jost — etiquetas y microinterfaz */
.rotulo{
  font-family:var(--f-ui);
  font-size:.7rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gris);
  margin:0 0 var(--c3);
}
.rotulo--pizarra{ color:var(--pizarra); }

.nav a, .menu-btn, .boton, .enlace,
.pieza__estado, .pieza__meta, .migas,
.datos__k, .datos__v small, .tabla th,
.galeria figcaption, .pie h4, .pie__legal, .pie__enlaces,
.colofon, .contextual, .maqueta, .etiqueta{
  font-family:var(--f-ui);
  letter-spacing:.02em;
}

/* Inter — texto sostenido */
.parrafo{ font-family:var(--f-texto); max-width:var(--medida); margin:0 0 var(--c3); }
.parrafo:last-child{ margin-bottom:0; }
.tabla td, .pie ul{ font-family:var(--f-texto); }

/* Cormorant — entradilla editorial */
.parrafo--guia{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.3rem, .95rem + 1.05vw, 1.72rem);
  line-height:1.45;
  letter-spacing:-.006em;
  color:var(--tinta);
  max-width:44ch;
}

/* LOS BLOQUES DE MATERIA DE UNA SUPERFICIE LEGAL. Dos declaraciones y nada
   mas: sin caja, sin filete, sin fondo, sin numero. Lo unico que separa una
   materia de otra es AIRE, y el aire esta graduado —mucho entre bloques, poco
   entre el encabezado y su texto— para que la pagina se lea de corrido en vez
   de hojearse como un indice. La voz tipografica del encabezado no se define
   aca: la trae `.rotulo`, que ya existe. */
.legal{ margin-top:var(--c6); max-width:var(--medida); }
.legal .rotulo{ margin-bottom:var(--c2); }

/* EL COLOFON INLINE · la identidad profesional publica de D-164 al pie de una
   superficie. Estaba escrito como estilo suelto en tres plantillas; es un
   componente y vive una sola vez. */
.colofon{
  font-size:.82rem; letter-spacing:.06em; color:var(--gris);
  margin:var(--c4) 0 0;
}

.cifra{
  font-family:var(--f-display);
  font-weight:400; font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:.005em;
}

/* ============================================================
   ESTRUCTURA
   ============================================================ */

.env{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--canal); }
.env--angosto{ max-width:1080px; }
.seccion{ padding-block:var(--seccion); }
.seccion--alt{ background:var(--papel-alt); }
.filete{ height:1px; background:var(--linea); border:0; margin:0; }
.enc-seccion{ margin-bottom:var(--c6); }

/* ============================================================
   MARCA
   ============================================================ */

.marca{ display:inline-flex; align-items:center; gap:.7rem; }
.marca__iso{ width:auto; height:2.35rem; flex:none; }
.marca__iso path{ fill:currentColor; }
.marca__txt{ display:flex; flex-direction:column; line-height:1; }
.marca__nom{
  font-family:var(--f-display);
  font-weight:500; font-size:1.42rem;
  letter-spacing:.13em; text-indent:.13em;
}
.marca__desc{
  font-family:var(--f-ui); font-weight:300;
  font-size:.53rem; letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; margin-top:.34rem; color:var(--gris);
}
.marca--grande .marca__iso{ height:4.6rem; }
.marca--grande .marca__nom{ font-size:2.8rem; letter-spacing:.15em; text-indent:.15em; }
.marca--grande .marca__desc{ font-size:.78rem; letter-spacing:.46em; text-indent:.46em; margin-top:.6rem; }
.marca--claro{ color:#F4F2ED; }
.marca--claro .marca__desc{ color:rgba(244,242,237,.72); }

/* ============================================================
   CABECERA
   ============================================================ */

.cab{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--c3);
  padding:clamp(1rem,2vw,1.6rem) var(--canal);
  color:#F4F2ED;
  transition:background var(--rapido) ease, color var(--rapido) ease,
             box-shadow var(--rapido) ease, padding var(--rapido) ease;
}
.cab::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:var(--linea); opacity:0; transition:opacity var(--rapido) ease;
}
.cab.is-fijo{
  background:rgba(242,240,235,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  color:var(--pizarra);
  padding-block:clamp(.7rem,1.4vw,1rem);
}
.cab.is-fijo::after{ opacity:1; }
/* `marca--claro` declara su propio color y por eso no le alcanza con heredar
   el de la cabecera: al fijarse, la marca quedaba marfil sobre marfil. El
   descriptor ya estaba resuelto; el nombre y el isotipo no. */
.cab.is-fijo .marca--claro{ color:var(--pizarra); }
.cab.is-fijo .marca__desc,
.cab.is-fijo .marca--claro .marca__desc{ color:var(--gris); }
.cab--solido{ position:sticky; background:rgba(242,240,235,.94); color:var(--pizarra); }
.cab--solido::after{ opacity:1; }
.cab--solido .marca__desc{ color:var(--gris); }

.nav{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,2.75rem); }
.nav a{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:400; position:relative; padding-block:.35rem;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--medio) var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); }
/* D-317 · LOS CUATRO CON EL MISMO TRATAMIENTO GRAFICO. `nav__cta` se elimino:
   marcar solo a `Vender` rompia el igual rango de D-285, y marcar a las dos
   habria convertido la barra en dos CTA permanentes. La superficie activa se
   senala con el mismo filete de 1 px del sistema, no con una pildora. */
.nav a[aria-current]::after{ transform:scaleX(1); }

.menu-btn{
  display:none; background:none; border:0; cursor:pointer; padding:.4rem;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
}
@media (max-width:820px){
  .nav{ display:none; }
  .menu-btn{ display:block; }
  .nav.is-abierto{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:var(--c3);
    position:fixed; inset:0; z-index:70;
    background:var(--papel); color:var(--pizarra);
    padding:6rem var(--canal) var(--canal);
  }
  .nav.is-abierto a{ font-size:1.15rem; letter-spacing:.14em; }
  /* El panel es hijo de la cabecera y se pinta encima de sus hermanos: dejaba
     al boton "Cerrar" visible en el codigo pero inalcanzable con el dedo. Se
     levantan marca y boton por sobre el panel, dentro del mismo contexto de
     apilado, y toman la tinta del panel para leerse sobre marfil. */
  .cab--menu .marca,
  .cab--menu .menu-btn{ position:relative; z-index:80; }
  .cab--menu .marca,
  .cab--menu .menu-btn,
  .cab--menu .marca__desc{ color:var(--pizarra); }
}

/* ============================================================
   OBERTURA — los planos 01-04 de A, en el sistema del sitio.

   Documento antes que montaje. Estas reglas describen el DOCUMENTO;
   el montaje son las que llevan `.ober-montaje`, y esa clase la pone
   capucci.js sólo si hay JS y nadie pidió menos movimiento.

   No se trasladan los parámetros del laboratorio como contrato: A es
   una gramática visual y experiencial, no una maqueta que deba copiarse
   mecánicamente (D-307). Lo que se conserva es el mecanismo —el corte
   como unidad, la disolvencia, el revelado por máscara, la inversión de
   polaridad del plano de silencio— dentro del régimen cromático del
   sitio: marfil + azul pizarra, con la tinta como fondo del montaje,
   que es el mismo estado tipográfico válido de producción de D-172.
   ============================================================ */

.ober{ --ober-corte:420ms; position:relative; }
.ober__plano{
  position:relative;
  display:grid; align-content:end;
  background:var(--tinta); color:#F4F2ED;
  padding-block:var(--seccion);
  isolation:isolate;
}
/* 01 es el plano de entrada: ocupa la pantalla, como la ocupaba el hero. */
.ober__plano--entrada{ min-height:100svh; padding-bottom:clamp(2.5rem,7vh,5.5rem); }
.ober__plano--centro{ align-content:center; }
/* 04 · el plano de silencio invierte la polaridad y devuelve el marfil
   del documento que sigue. Es el único claro de los cuatro. */
.ober__plano--claro{ background:var(--papel); color:var(--tinta); }
.ober__cont{ position:relative; width:100%; }

.ober__plano .rotulo{ color:rgba(244,242,237,.66); margin-bottom:var(--c3); }
.ober__plano--claro .rotulo{ color:var(--gris); }

.ober__frase{ max-width:15ch; text-wrap:balance; }
.ober__verbo{
  font-size:clamp(3rem, 8.4vw, 8rem); line-height:.96;
  letter-spacing:-.018em; max-width:12ch; text-wrap:balance;
}
.ober__linea{
  font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:clamp(1.35rem, 2.6vw, 2.2rem); line-height:1.32;
  max-width:30ch; margin:var(--c4) 0 0;
}
.ober__filete{ width:100%; max-width:9rem; height:1px; background:var(--linea); }

/* La fotografía del plano de entrada. Hoy no hay ninguna declarada y el
   plano es tipográfico sobre tinta: es un estado válido de producción
   (D-172), no un hueco. Cuando exista, entra por acá y sin cambiar nada. */
.ober__lienzo{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.ober__lienzo img{ width:100%; height:100%; object-fit:cover; }
.ober__lienzo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(9,13,18,.56) 0%, rgba(9,13,18,.30) 32%, rgba(9,13,18,0) 64%),
    linear-gradient(to top, rgba(9,13,18,.72) 0%, rgba(9,13,18,.30) 30%, rgba(9,13,18,.06) 58%, rgba(9,13,18,.22) 82%, rgba(9,13,18,.50) 100%);
}

/* La invitación a mover: un filete que baja una vez y se queda. */
.ober__pie{ margin-top:clamp(2rem,5vh,3.5rem); }
.ober__hilo{
  width:1px; height:56px; background:rgba(244,242,237,.34);
  position:relative; overflow:hidden;
}
.ober__hilo::after{
  content:""; position:absolute; inset:0; background:#F4F2ED;
  transform:translateY(-100%); animation:hilo 2.8s var(--ease) infinite;
}
@keyframes hilo{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }

/* --- EL MONTAJE ------------------------------------------------------
   El teatro mide una altura fija por plano y la vista se queda pegada al
   viewport mientras se lo recorre. El alto del contenido de un plano no
   afecta el largo del recorrido: el corte es la unidad, no el texto. */
.ober-montaje .ober{ height:calc(var(--ober-planos, 4) * 112svh); }
.ober-montaje .ober__vista{
  position:sticky; top:0; height:100svh; overflow:hidden;
}
/* CONTENIDO Y ESCENA SON DOS COSAS DISTINTAS. Los cuatro planos existen
   siempre —es opacidad, no display—, así que un lector de pantalla
   encuentra el documento entero. Los lejanos se estacionan fuera del
   cuadro, que es la condición normal de cualquier página larga. */
.ober-montaje .ober__plano{
  position:absolute; inset:0; min-height:0;
  align-content:center; padding-block:calc(var(--c8) * .5);
  opacity:0; pointer-events:none;
  transition:opacity var(--ober-corte) linear;
}
.ober-montaje .ober__plano--entrada{ align-content:end; }
.ober-montaje .ober__plano.on{ opacity:1; pointer-events:auto; }
.ober-montaje .ober__plano:not(.cerca){ transform:translateY(-300vh); }

/* Revelado del texto: máscara desde abajo, una vez, sólo en montaje.
   Entra en 760 ms; sale en 220 para alcanzar a irse dentro del corte. */
.ober__rev{ display:block; }
.ober-montaje .ober__rev{ overflow:hidden; }
.ober-montaje .ober__rev > *{
  display:block; transform:translateY(102%);
  transition:transform 220ms var(--ease);
}
.ober-montaje .ober__plano.on .ober__rev > *{
  transform:translateY(0); transition-duration:760ms;
}
.ober-montaje .ober__plano.on .ober__rev:nth-of-type(2) > *{ transition-delay:90ms; }

/* EL CORTE DE POLARIDAD. La cabecera y el plano corren el mismo reloj pero
   no la misma curva: el plano se cruza por opacidad y la barra interpola
   color. Arrancando las dos en t=0, durante el corte la barra quedaba clara
   sobre un plano todavía oscuro. Con la espera llega cuando el fondo ya
   viajó la mitad, y llegan juntas. */
.ober-montaje .cab:not(.is-fijo),
.ober-montaje .cab:not(.is-fijo) *{
  transition:color 240ms linear 190ms, fill 240ms linear 190ms;
}
/* La marca declara su propio color con `marca--claro` y por eso no le alcanza
   con heredar el de la cabecera: sobre el plano de silencio quedaba marfil
   sobre marfil, invisible. Se le da la tinta igual que a los enlaces. */
.ober-claro .cab:not(.is-fijo),
.ober-claro .cab:not(.is-fijo) .marca--claro{ color:var(--pizarra); }
.ober-claro .cab:not(.is-fijo) .marca__desc,
.ober-claro .cab:not(.is-fijo) .marca--claro .marca__desc{ color:var(--gris); }

/* ============================================================
   PROPIEDADES SELECCIONADAS
   ============================================================ */

.lista{ display:flex; flex-direction:column; gap:clamp(4.5rem,10vw,10rem); }
.pieza{ display:grid; grid-template-columns:1fr; gap:var(--c4); align-items:center; }
@media (min-width:900px){
  .pieza{ grid-template-columns:1.55fr 1fr; gap:clamp(2.5rem,5vw,5rem); }
  .pieza--invertida .pieza__foto{ order:2; }
}
.pieza__foto{ position:relative; overflow:hidden; background:var(--papel-alt); }
.pieza__foto img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform 1200ms var(--ease);
}
.pieza:hover .pieza__foto img{ transform:scale(1.035); }
.pieza__estado{
  position:absolute; top:var(--c2); left:var(--c2);
  background:rgba(242,240,235,.93); color:var(--pizarra);
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.42rem .8rem;
}
.pieza__info .rotulo{ margin-bottom:var(--c2); }
.pieza__precio{
  display:flex; align-items:baseline; gap:.5rem;
  margin-top:var(--c3); padding-top:var(--c3); border-top:1px solid var(--linea);
}
.pieza__precio .cifra{ font-size:clamp(1.5rem,2.2vw,2rem); }
.pieza__moneda{ font-size:.72rem; letter-spacing:.18em; color:var(--gris); text-transform:uppercase; }
.pieza__meta{
  display:flex; flex-wrap:wrap; gap:.5rem var(--c3); margin-top:var(--c2);
  font-size:.76rem; letter-spacing:.1em; color:var(--gris);
}

.enlace{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:var(--c4);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pizarra); padding-bottom:.45rem;
  border-bottom:1px solid var(--pizarra);
  transition:gap var(--medio) var(--ease), color var(--rapido) ease;
}
.enlace:hover{ gap:1.15rem; color:var(--pizarra-cl); }
.enlace svg{ flex:none; }

/* ============================================================
   HERNÁN
   ============================================================ */

.persona{ display:grid; gap:var(--c4); align-items:end; }
@media (min-width:900px){ .persona{ grid-template-columns:.85fr 1fr; gap:clamp(3rem,6vw,6rem); } }
.persona__foto{ background:var(--papel-alt); overflow:hidden; }
.persona__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }

/* SIN RETRATO. No es un hueco mas discreto: es una columna menos. La reja se
   deshace y el bloque queda con la misma medida que /vender/ y /comprar/, que
   es la composicion que el sistema ya tiene para una pagina de texto. Cuando
   exista la fotografia real, la columna vuelve sola: esta regla deja de
   aplicarse porque el modificador deja de emitirse. */
.persona--sin-retrato{ max-width:1080px; }
@media (min-width:900px){ .persona--sin-retrato{ grid-template-columns:none; } }

/* ============================================================
   EL DESENLACE — D-332 y D-334.
   Reemplaza al antiguo bloque de captación del Home, que no se
   actualizó: desapareció. Acá los dos motivos tienen igual rango.
   ============================================================ */

/* Sobre el marfil base y no sobre el alterno: la sección de propiedades que
   viene arriba ya es alterna, y dos fondos iguales seguidos se leen como un
   solo bloque. La alternancia es lo que separa al desenlace de lo anterior
   y del pie, que vuelve al alterno. */
.desenlace{ background:var(--papel); text-align:center; }
.desenlace__frase{ margin-inline:auto; text-wrap:balance; max-width:16ch; }

/* LOS DOS MOTIVOS van APILADOS, no enfrentados: lado a lado serían una
   bifurcación, que es la gramática del portal; apilados son una lista
   que se lee. Su operabilidad se descubre por comportamiento, no por
   ruido: el mismo filete de 1 px que usa todo el sistema. */
.motivos{
  list-style:none; margin:var(--c5) auto 0; padding:0;
  max-width:34ch; border-top:1px solid var(--linea);
}
.motivos a{
  display:block; padding:1.15rem .25rem;
  border-bottom:1px solid var(--linea);
  font-family:var(--f-display); font-size:clamp(1.3rem,2.3vw,1.72rem);
  line-height:1.3; color:var(--tinta);
  transition:color var(--rapido) ease, border-color var(--rapido) ease;
}
.motivos a:hover,
.motivos a:focus-visible{ color:var(--pizarra); border-bottom-color:var(--pizarra); }
.desenlace__colofon{ margin-top:var(--c5); }

/* ============================================================
   ESTADO CERO — D-331. El hecho y su razón. Sin CTA propio.
   ============================================================ */

.vacio__frase{ max-width:18ch; margin-bottom:var(--c4); }
.vacio .parrafo{ max-width:52ch; }

/* ============================================================
   MOVIMIENTOS — /comprar/. No son párrafos sueltos: son bloques
   con orden interno, y el aire entre ellos es lo que los separa.
   ============================================================ */

.movimiento{ margin-top:var(--c6); max-width:var(--medida); }
.movimiento .parrafo:first-child{ font-size:1.06em; }

/* ============================================================
   ACCIONES Y NAVEGACIÓN CONTEXTUAL
   Dos cosas distintas, y la diferencia importa: las acciones son
   comerciales y cuentan contra el máximo de D-163; la navegación
   contextual es seguir explorando y no cuenta (D-325).
   ============================================================ */

.acciones-sup{
  display:flex; flex-wrap:wrap; gap:var(--c2) var(--c4);
  margin-top:var(--c5);
}
.boton{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1.05rem 2.1rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--pizarra); color:var(--pizarra);
  background:transparent;
  transition:background var(--rapido) ease, color var(--rapido) ease;
}
.boton:hover{ background:var(--pizarra); color:var(--papel); }
.boton--lleno{ background:var(--pizarra); color:var(--papel); }
.boton--lleno:hover{ background:var(--tinta); border-color:var(--tinta); }

/* La sigue usando la página de una propiedad retirada. */
.vender__acciones{
  display:flex; flex-wrap:wrap; gap:var(--c2) var(--c4);
  justify-content:center; margin-top:var(--c5);
}

.contextual{
  display:flex; flex-wrap:wrap; gap:var(--c3) var(--c4);
  margin-top:var(--c6); padding-top:var(--c3);
  border-top:1px solid var(--linea);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris);
}
.contextual a{ display:inline-flex; align-items:center; gap:.5rem; }
.contextual a::before{ content:"→"; color:var(--linea); }
.contextual a:hover{ color:var(--pizarra); }

/* ============================================================
   PIE
   ============================================================ */

.pie{ background:var(--papel-alt); padding-block:var(--c6) var(--c4); border-top:1px solid var(--linea); }
.pie__grid{ display:grid; gap:var(--c4); }
@media (min-width:760px){ .pie__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--c5); } }
.pie h4{
  margin:0 0 var(--c2);
  font-size:.68rem; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gris);
}
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.94rem; }
.pie a:hover{ color:var(--pizarra); }
.pie__enlaces{ display:flex; flex-wrap:wrap; gap:var(--c3); }
.pie__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--c2);
  margin-top:var(--c6); padding-top:var(--c3); border-top:1px solid var(--linea);
  font-size:.72rem; letter-spacing:.06em; color:var(--gris);
}
/* EL CREDITO DEL ESTUDIO, DEBAJO DEL COPYRIGHT Y EN SU MISMA VOZ. Agrupados
   en un solo hijo para que la barra conserve sus dos extremos: un tercer hijo
   suelto mandaria la navegacion al centro. Sin color, sin tamano y sin peso
   propios —los hereda de `.pie__legal`— porque un credito no compite con
   nada.

   EL SUBRAYADO ES `currentColor` Y NO `--linea`. Este es el unico enlace del
   sitio que vive DENTRO de una oracion: los demas son filas, items de lista o
   botones, que se descubren por su forma. Aca la unica sena de que «OwnSite
   Studio» es operable es el subrayado, de modo que tiene que VERSE: `--linea`
   sobre la banda alterna da 1,21:1 —un pelo invisible— y `currentColor` toma
   la misma tinta del texto, 4,55:1, que es la de la palabra que subraya. Es
   ademas el recurso que el sistema ya usa para el anillo de foco. */
.pie__firma{ display:grid; gap:.5rem; }
.pie__credito a{
  border-bottom:1px solid currentColor; padding-bottom:.1rem;
  transition:color var(--rapido) ease;
}
.pie__credito a:hover,
.pie__credito a:focus-visible{ color:var(--pizarra); }

/* ============================================================
   PÁGINA DE INMUEBLE
   ============================================================ */

.ficha-hero{ padding-top:clamp(6rem,12vh,9rem); }
.ficha-hero__enc{ display:grid; gap:var(--c3); padding-bottom:var(--c4); }
@media (min-width:900px){
  .ficha-hero__enc{ grid-template-columns:1.5fr auto; align-items:end; gap:var(--c5); }
}
.ficha-hero__precio{ text-align:left; }
@media (min-width:900px){ .ficha-hero__precio{ text-align:right; } }
.ficha-hero__precio .cifra{ font-size:clamp(2rem,3.4vw,3rem); display:block; }
.ficha-hero__foto{ overflow:hidden; background:var(--papel-alt); }
.ficha-hero__foto img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
@media (max-width:700px){ .ficha-hero__foto img{ aspect-ratio:4/3; } }

.migas{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); margin-bottom:var(--c3); }
.migas a:hover{ color:var(--pizarra); }

.datos{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--linea);
}
@media (min-width:760px){ .datos{ grid-template-columns:repeat(4,1fr); } }
.datos__item{
  padding:var(--c3) var(--c3) var(--c3) 0;
  border-bottom:1px solid var(--linea-sutil);
}
@media (min-width:760px){ .datos__item{ border-bottom:0; } }
.datos__k{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); display:block; margin-bottom:.5rem; }
.datos__v{ font-family:var(--f-display); font-size:1.55rem; font-weight:400; }
.datos__v small{ font-family:var(--f-ui); font-size:.8rem; color:var(--gris); font-weight:300; }

.relato{ display:grid; gap:var(--c4); }
@media (min-width:900px){ .relato{ grid-template-columns:1fr 1.4fr; gap:clamp(3rem,6vw,6rem); } }

/* Galería editorial: filas compuestas, alturas que cierran.
   Cada fila define proporciones tales que las piezas terminan a la misma altura:
   una vertical 2:3 junto a una horizontal 4:3 en columnas 1fr/2fr coinciden exactamente. */
.galeria{ display:flex; flex-direction:column; gap:clamp(1rem,2.2vw,2rem); }
.g-fila{ display:grid; gap:clamp(1rem,2.2vw,2rem); }
.g-fila--2   { grid-template-columns:1fr 1fr; }
.g-fila--1a2 { grid-template-columns:1fr 2fr; }
.g-fila--2a1 { grid-template-columns:2fr 1fr; }
.g-fila--3   { grid-template-columns:repeat(3,1fr); }
.g-fila--1   { grid-template-columns:1fr; }

.galeria figure{ margin:0; }
.g-img{ display:block; overflow:hidden; background:var(--papel-alt); }
.galeria img{ width:100%; height:auto; object-fit:cover; transition:transform 1200ms var(--ease); }
.galeria figure:hover img{ transform:scale(1.03); }
.ar-32  img{ aspect-ratio:3/2; }
.ar-43  img{ aspect-ratio:4/3; }
.ar-23  img{ aspect-ratio:2/3; }
.ar-11  img{ aspect-ratio:1/1; }
.ar-219 img{ aspect-ratio:21/9; }

@media (max-width:760px){
  .g-fila--2, .g-fila--1a2, .g-fila--2a1, .g-fila--3{ grid-template-columns:1fr; }
  .ar-23 img{ aspect-ratio:3/4; }
  .ar-219 img{ aspect-ratio:4/3; }
}

.galeria figcaption{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); padding-top:.7rem;
}

.plano{ display:grid; gap:var(--c4); align-items:center; }
@media (min-width:900px){ .plano{ grid-template-columns:1.3fr 1fr; gap:clamp(3rem,6vw,6rem); } }
.plano__lienzo{ background:var(--papel-hi); border:1px solid var(--linea); padding:clamp(1.5rem,4vw,3rem); }
.plano__lienzo svg{ width:100%; height:auto; }

.tabla{ width:100%; border-collapse:collapse; }
.tabla th,.tabla td{ text-align:left; padding:1rem 0; border-bottom:1px solid var(--linea-sutil); vertical-align:top; }
.tabla th{
  font-weight:400; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); width:42%; padding-right:var(--c3);
}
.tabla td{ font-size:1rem; }
.tabla-doble{ display:grid; gap:0 clamp(2rem,5vw,5rem); }
@media (min-width:860px){ .tabla-doble{ grid-template-columns:1fr 1fr; } }

.entorno{ display:grid; gap:var(--c4); align-items:center; }
@media (min-width:900px){ .entorno{ grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); } }
.entorno__foto img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

.cierre{ background:var(--pizarra); color:#F1EFEA; }
.cierre .rotulo{ color:rgba(241,239,234,.66); }
.cierre .parrafo--guia{ font-weight:300; }
.cierre .boton{ border-color:rgba(241,239,234,.5); color:#F1EFEA; }
.cierre .boton:hover{ background:#F1EFEA; color:var(--pizarra); }
.cierre .boton--lleno{ background:#F1EFEA; color:var(--pizarra); border-color:#F1EFEA; }
.cierre .boton--lleno:hover{ background:transparent; color:#F1EFEA; }
.cierre__grid{ display:grid; gap:var(--c4); align-items:center; }
@media (min-width:900px){ .cierre__grid{ grid-template-columns:1fr auto; gap:var(--c6); } }

/* ============================================================
   EDICIÓN MOBILE
   No es el desktop reducido: es el mismo sistema, reeditado.
   ============================================================ */

@media (max-width:760px){
  :root{
    --seccion: 3.75rem;
    --canal: 1.375rem;
  }

  /* — Obertura: el titular y nada más. El teléfono no es el escritorio
       reducido: la frase gana ancho y los verbos bajan de cuerpo para no
       partirse en cuatro líneas. — */
  .ober__plano{ padding-block:3.25rem; }
  .ober__plano--entrada{ padding-bottom:2.25rem; }
  .ober__frase{ max-width:none; font-size:clamp(2.5rem, 11.5vw, 3.6rem); }
  .ober__verbo{ max-width:none; font-size:clamp(2.6rem, 12vw, 4rem); }
  .ober__linea{ font-size:1.2rem; max-width:26ch; margin-top:2rem; }
  .ober__pie{ margin-top:1.6rem; }
  .ober__hilo{ height:44px; }
  .ober__lienzo::after{
    background:linear-gradient(to top,
      rgba(9,13,18,.86) 0%, rgba(9,13,18,.62) 26%, rgba(9,13,18,.34) 50%,
      rgba(9,13,18,.18) 72%, rgba(9,13,18,.50) 100%);
  }
  .ober-montaje .ober__plano{ padding-block:calc(var(--c8) * .3); }

  /* — Propiedades: la fotografía toma todo el ancho de la pantalla — */
  .lista{ gap:3.5rem; }
  .pieza{ gap:1.4rem; }
  .pieza__foto{ margin-inline:calc(var(--canal) * -1); }
  .pieza__foto img{ aspect-ratio:4/5; }
  .pieza__estado{ top:.9rem; left:.9rem; font-size:.58rem; padding:.38rem .7rem; }
  .pieza__info .parrafo{ font-size:.97rem; }
  .pieza__precio{ margin-top:1.15rem; padding-top:1.15rem; }
  .pieza__precio .cifra{ font-size:1.65rem; }
  .pieza__meta{
    display:grid; grid-template-columns:1fr 1fr;
    gap:.28rem 1rem; margin-top:.9rem; font-size:.72rem;
  }
  .enlace{ margin-top:1.75rem; }

  .enc-seccion{ margin-bottom:2.5rem; }

  /* — Persona — */
  .persona{ gap:1.75rem; }
  .persona__foto img{ aspect-ratio:4/5; }

  /* — Acciones a ancho completo: en el teléfono un botón que no ocupa la
       fila entera se lee como un botón secundario, y no lo es. — */
  .acciones-sup, .vender__acciones{
    flex-direction:column; gap:.7rem; margin-top:2.25rem;
  }
  .acciones-sup .boton, .vender__acciones .boton{ width:100%; justify-content:center; }

  /* — Desenlace y estado cero — */
  .motivos{ margin-top:2.25rem; max-width:none; }
  .motivos a{ padding:1rem .1rem; }
  .desenlace__colofon{ margin-top:2.25rem; }
  .vacio__frase{ max-width:none; margin-bottom:1.75rem; }
  .movimiento{ margin-top:2.75rem; }
  .contextual{ gap:.9rem 1.75rem; margin-top:2.75rem; }

  /* — Pie compacto — */
  .pie{ padding-block:3.25rem 1.75rem; }
  .pie__grid{ gap:2rem; }
  .pie__legal{ flex-direction:column; gap:.5rem; margin-top:2.5rem; }

  /* — Página de inmueble — */
  .ficha-hero{ padding-top:5.5rem; }
  .ficha-hero__enc{ gap:1.25rem; padding-bottom:1.75rem; }
  .ficha-hero__foto{ margin-inline:calc(var(--canal) * -1); }
  .datos__item{ padding-block:1.1rem; }
  .datos__v{ font-size:1.35rem; }
  .relato{ gap:1rem; }
  .plano, .entorno{ gap:1.75rem; }
  .cierre__grid{ gap:2rem; }
}

/* Ficha técnica en pantalla angosta: etiqueta arriba, dato debajo */
@media (max-width:640px){
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td{ display:block; width:auto; }
  .tabla tr{ border-bottom:1px solid var(--linea-sutil); padding-block:.85rem; }
  .tabla th{ padding:0 0 .3rem; border:0; font-size:.64rem; }
  .tabla td{ padding:0; border:0; }
  .tabla-doble{ gap:0; }
}

/* ============================================================
   MOVIMIENTO — revelado al scroll
   ============================================================ */

/* ENDURECIMIENTO DE PRODUCCION. El contenido es visible por defecto.
   El revelado solo existe si capucci.js llego a marcar <html class="js-rev">.
   Sin JavaScript, o si el script no carga o falla, nada queda oculto.
   Con JavaScript el comportamiento es identico al aprobado en la Tanda B:
   mismos tiempos, misma curva, mismo retraso. */
.js-rev .rev{ opacity:0; transform:translateY(18px); }
.js-rev .rev.is-visible{
  opacity:1; transform:none;
  transition:opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rev, .js-rev .rev{ opacity:1; transform:none; }
  /* Sin montaje no hay planos que reemplazar: la obertura es lo que siempre
     fue por debajo, cuatro secciones normales, visibles y en orden. */
  .ober__rev, .ober__rev > *{ transform:none !important; }
}

/* ============================================================
   FOCO VISIBLE
   El navegador dibujaba su anillo azul. Este es el nuestro, y es del
   sistema: `currentColor` toma la tinta que ya tiene cada control, asi
   que se aclara sobre fondo oscuro y se oscurece sobre marfil sin una
   regla por caso. Solo `:focus-visible`, para que el mouse no lo dispare.
   Nada se le quita al foco sin darle un reemplazo mejor.
   ============================================================ */

:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}
/* El relleno oscuro es la excepcion: su `currentColor` es marfil y el
   anillo cae fuera del boton, sobre marfil. Se le da la tinta del hover. */
.boton--lleno:focus-visible{ outline-color:var(--tinta); }
/* Y en la banda pizarra del cierre se invierte otra vez. */
.cierre .boton--lleno:focus-visible{ outline-color:var(--papel); }

/* ============================================================
   MARCA DE MAQUETA — se retira en producción
   ============================================================ */

.maqueta{
  position:fixed; left:.9rem; bottom:.9rem; z-index:90;
  background:rgba(27,36,48,.82); color:#F2F0EB;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .7rem; border-radius:2px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  pointer-events:none;
}