/* =====================================================================
   VILLAS · seccion de la coleccion inmobiliaria (ES / EN / FR)
   Sale del ensayo aprobado villas-fable.css: expediente de cada villa con
   fotografia a sangre, relato, cifras con su fuente y asiento registral.
   Va DESPUES de /assets/css/institucional.css: hereda fuentes y tokens y
   corrige lo que aquella hoja fija para paginas de texto (shell de 820,
   cuerpo de 17, margenes de seccion).
   Un elemento grafico por bloque. El precio nunca manda.
   ===================================================================== */

:root{
  --navy:#0c1d35;
  --gold:#c9a96e;
  --gold-deep:#876c3a;     /* enlaces y rotulos sobre crema */
  --cream:#faf7f2;
  --paper:#ffffff;
  --ink:#16202e;
  --soft:#46535f;
  --rule:#ddd4c6;
  --velo:rgba(26,26,24,.38); /* #1a1a18: SOLO como velo de fotografia */
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lado:18px;
  --ancho:1240px;
  --texto:62ch;
}

html{scroll-behavior:smooth}
body.vf{background:var(--cream);color:var(--ink);font-family:var(--body);
  font-weight:300;font-size:17px;line-height:1.7;overflow-x:hidden}
@media (min-width:900px){body.vf{font-size:19.5px;line-height:1.68}}
.vf main{padding:0}
.vf section{margin:0}
.vf p{margin:0;max-width:none}
.vf h1,.vf h2,.vf h3{font-family:var(--display);font-weight:300;color:var(--navy);
  margin:0;line-height:1.08;text-wrap:balance}
/* Con :where() la regla generica pesa (0,0,1) y no se come a .vf-cta ni a
   .vf-cta2, que declaran su propio color y van sin subrayado. */
:where(.vf) a{color:var(--gold-deep);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
:where(.vf) a:hover{color:var(--navy)}
.vf :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.vf img{display:block;max-width:100%}

.shell{width:min(100% - var(--lado)*2, var(--ancho));margin-inline:auto}
.eyebrow{font-family:var(--body);font-weight:300;font-size:.68rem;letter-spacing:4.5px;
  text-transform:uppercase;color:var(--gold-deep);margin:0}

/* ---------- CABECERA: la foto nace en el borde superior; la barra fija es
   transparente encima (body[data-oph="foto"]). ---------- */
.vf-hero{position:relative;background:var(--navy);min-height:min(92vh,860px);
  display:flex;align-items:flex-end;overflow:hidden}
.vf-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 58%}
/* En el movil el recorte vertical dejaba fuera la villa (ocupa el tercio
   izquierdo del fotograma): se encuadra hacia la izquierda. */
@media (max-width:700px){.vf-hero img{object-position:18% 58%}}
/* Dos velos: uno corto arriba, para que el logotipo blanco de la cabecera
   no caiga sobre el resplandor del sol; otro abajo, donde se lee. El cielo
   del atardecer queda intacto en medio. */
.vf-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(12,29,53,.45) 0,rgba(12,29,53,0) 140px),
             linear-gradient(to top,var(--velo) 0%,rgba(26,26,24,.34) 46%,rgba(26,26,24,0) 82%)}
.vf-hero .eyebrow{font-weight:400}
.vf-hero-t{position:relative;z-index:1;padding:0 0 clamp(44px,6vw,84px);
  display:grid;gap:30px}
@media (min-width:1000px){
  .vf-hero-t{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:60px}
}
/* El rotulo cae sobre la tarima clara de la piscina a 1440: sombra corta y
   densa, mas un halo breve, para que el dorado se lea sin oscurecer la foto. */
.vf-hero .eyebrow{color:var(--gold);text-shadow:0 1px 2px rgba(8,18,32,.9),0 0 10px rgba(8,18,32,.6)}
.vf-hero h1{color:var(--cream);font-size:clamp(2.8rem,6.2vw,5.2rem);line-height:1;
  letter-spacing:-.4px;margin-top:18px;text-shadow:0 1px 26px rgba(8,18,32,.5)}
.vf-hero-lead{color:rgba(250,247,242,.86);font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.6;max-width:36ch;text-shadow:0 1px 18px rgba(8,18,32,.5);
  padding-bottom:6px}
@media (min-width:1000px){.vf-hero-lead{border-left:1px solid rgba(201,169,110,.55);padding-left:22px}}

/* ---------- INTRO: banda casi vacia. Una frase y aire. ---------- */
.vf-intro{padding:clamp(72px,9vw,132px) 0 clamp(56px,7vw,110px)}
.vf-intro p{font-family:var(--display);font-weight:300;color:var(--navy);
  font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1.32;max-width:34ch;text-wrap:pretty}
.vf-intro-fin{margin-top:26px;width:56px;height:1px;background:var(--gold)}

/* ---------- EXPEDIENTE DE CADA VILLA ---------- */
.vf-villa{padding-bottom:clamp(72px,9vw,140px)}
.vf-villa + .vf-villa{border-top:1px solid var(--rule);padding-top:clamp(64px,8vw,120px)}
/* La foto, a sangre, con un rotulo pequeno en la esquina. */
.vf-foto{position:relative;background:var(--navy);line-height:0;
  aspect-ratio:1920/900;max-height:760px;overflow:hidden}
.vf-foto img{width:100%;height:100%;object-fit:cover}
.vf-foto-rot{position:absolute;left:0;right:0;bottom:0;padding:0 0 22px;
  line-height:1.4;font-size:.66rem;letter-spacing:3.5px;text-transform:uppercase;
  color:rgba(250,247,242,.85);text-shadow:0 1px 10px rgba(8,18,32,.6)}
.vf-foto-rot span{display:block;width:min(100% - var(--lado)*2,var(--ancho));margin-inline:auto}
@media (max-width:700px){.vf-foto{aspect-ratio:4/3;max-height:none}}

/* Dos columnas desiguales: el relato a un lado, el asiento al otro. */
.vf-exp{display:grid;gap:52px;padding-top:clamp(40px,5vw,72px)}
@media (min-width:980px){
  .vf-exp{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(56px,7vw,120px);
    align-items:start}
  /* La segunda villa invierte la rejilla: el asiento a la izquierda. */
  .vf-villa.vf-invierte .vf-exp{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .vf-villa.vf-invierte .vf-exp > .vf-relato{order:2}
}
.vf-relato h2{font-size:clamp(2.5rem,4.4vw,3.7rem);margin-top:14px;letter-spacing:-.3px}
/* Los margenes de estos parrafos van con .vf p.<clase> para ganar a la regla
   generica .vf p{margin:0}, que si no los dejaba a cero. */
.vf p.vf-lugar{margin-top:14px;font-size:.92rem;color:var(--soft);letter-spacing:.2px}
.vf-relato > p.vf-sum{margin-top:30px;max-width:var(--texto);text-wrap:pretty}
.vf-relato > p.vf-mas{margin-top:18px;max-width:var(--texto);text-wrap:pretty;
  font-size:.94em;color:var(--soft)}

/* Las cifras: numero grande y ligero, rotulo pequeno. Sin cajas.
   La cifra y su unidad van en un solo texto para que el frances pueda
   escribirlas a su manera (2 956,34 m2). */
.vf-cifras{list-style:none;margin:40px 0 0;padding:28px 0 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;max-width:30rem}
.vf-cifras b{display:block;font-family:var(--body);font-weight:200;font-size:clamp(1.4rem,1.8vw,1.75rem);
  line-height:1.05;color:var(--navy);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.vf-cifras span{display:block;margin-top:9px;font-size:.78rem;line-height:1.45;color:var(--soft)}
@media (max-width:480px){.vf-cifras{gap:24px 20px}.vf-cifras b{font-size:1.3rem}}
/* De donde sale cada cifra: una linea pequena bajo la lista. */
.vf p.vf-fuente{margin-top:22px;font-size:.78rem;line-height:1.5;color:var(--soft);max-width:30rem}

/* El asiento registral: un filete dorado arriba, rotulo, y filas rotuladas.
   Es un registro, no una tabla: sin fondo, sin bordes laterales. */
.vf-reg{border-top:1px solid var(--gold);padding-top:18px}
.vf-reg-cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.vf-reg-cab .eyebrow{color:var(--gold-deep)}
.vf-reg-cab small{font-size:.72rem;color:var(--soft);letter-spacing:.3px}
/* Lo que no consta en el Registro (impuesto, cuota) va en su propio bloque,
   bajo el primero, con la fuente en el rotulo. */
.vf-reg-cab2{margin-top:34px}
.vf-reg dl{margin:22px 0 0;display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);
  column-gap:20px;row-gap:0}
.vf-reg dt,.vf-reg dd{margin:0;padding:12px 0;border-top:1px solid var(--rule)}
.vf-reg dt{font-size:.66rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--soft);
  padding-top:15px;line-height:1.4}
.vf-reg dd{font-size:.98rem;line-height:1.5;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
/* El documento que se entrega al pedirlo: en tinta suave, sin hueco ni relleno. */
.vf-reg dd .vf-pide{color:var(--soft)}
.vf-reg dd small{display:block;font-size:.76rem;color:var(--soft);margin-top:3px;letter-spacing:.2px}
@media (max-width:420px){
  .vf-reg dl{grid-template-columns:1fr}
  .vf-reg dt{border-top:1px solid var(--rule);padding-bottom:0}
  .vf-reg dd{border-top:0;padding-top:4px}
}

/* El precio: al pie del asiento, bajo un filete, en peso ligero. Legible
   y claro, pero nunca el elemento mayor del expediente. */
.vf p.vf-precio{margin-top:22px;padding-top:18px;border-top:1px solid var(--gold);
  display:flex;flex-direction:column;gap:4px}
.vf-precio .eyebrow{font-size:.62rem;letter-spacing:3px}
.vf-precio b{font-family:var(--body);font-weight:300;font-size:1.38rem;line-height:1.2;
  color:var(--navy);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.2px}
.vf-precio b small{font-size:.66em;font-weight:300;color:var(--soft);margin-right:6px}

/* Acciones: un boton sosegado, un enlace de WhatsApp en texto y una nota
   apagada sin enlace para lo que aun no tiene pagina. */
.vf-acc{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.vf-cta{display:inline-block;font-family:var(--body);font-weight:400;font-size:.72rem;
  letter-spacing:3px;text-transform:uppercase;padding:15px 28px;text-decoration:none;
  color:var(--cream);background:var(--navy);border:1px solid var(--navy);text-align:center;
  transition:background-color .3s ease,border-color .3s ease}
.vf-cta:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream)}
.vf-cta:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.vf-cta2{font-size:.8rem;letter-spacing:.6px;color:var(--gold-deep);text-decoration:none;
  border-bottom:1px solid rgba(135,108,58,.45);padding-bottom:2px;
  font-variant-numeric:lining-nums tabular-nums}
.vf-cta2:hover{color:var(--navy);border-color:var(--navy)}
.vf-pend{font-size:.72rem;letter-spacing:2.4px;text-transform:uppercase;
  color:rgba(22,32,46,.6);cursor:default}
@media (max-width:420px){.vf-cta{width:100%;white-space:normal;padding:14px 18px;letter-spacing:2.4px}}

/* Tira de fotografias: a distinta altura, sin tarjetas. Tres columnas
   desiguales; .t4 es la panoramica a todo el ancho y .t5 una pieza pequena. */
.vf-tira{margin-top:clamp(48px,6vw,88px);display:grid;gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.vf-tira{grid-template-columns:5fr 4fr 3fr;gap:18px;align-items:end}}
.vf-tira figure{margin:0;background:var(--navy);overflow:hidden}
.vf-tira img{width:100%;height:100%;object-fit:cover}
.vf-tira .t1{aspect-ratio:16/10}
.vf-tira .t2{aspect-ratio:4/3}
.vf-tira .t3{aspect-ratio:3/4;grid-column:1 / -1}
.vf-tira .t4{aspect-ratio:21/9;grid-column:1 / -1}
.vf-tira .t5{aspect-ratio:4/3;grid-column:1 / -1}
@media (min-width:760px){
  .vf-tira .t3{grid-column:auto}
  .vf-tira .t4{grid-column:1 / 3;aspect-ratio:2.33/1;align-self:end}
  .vf-tira .t5{grid-column:3;aspect-ratio:3/4}
}
.vf-tira figcaption{padding:10px 0 0;font-size:.74rem;color:var(--soft);line-height:1.5}
/* La nota de la terraza: una sola vez, bajo la tira, discreta. */
.vf p.vf-nota{margin-top:16px;font-size:.78rem;line-height:1.5;color:var(--soft);max-width:var(--texto)}

/* ---------- COMO SE COMPRA: sobre navy. Tres pasos reales, numerados. ---------- */
.vf-navy{background:var(--navy);color:rgba(250,247,242,.88);padding:clamp(72px,9vw,128px) 0}
.vf-navy .eyebrow{color:var(--gold)}
.vf-navy h2{color:var(--cream);font-size:clamp(2rem,3.6vw,2.9rem);margin-top:14px}
.vf-pasos-cab{display:grid;gap:22px;max-width:var(--texto)}
.vf-pasos{list-style:none;counter-reset:paso;margin:clamp(44px,5vw,72px) 0 0;padding:0;
  display:grid;gap:0}
@media (min-width:900px){.vf-pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}}
.vf-pasos li{counter-increment:paso;padding:30px 0 0;border-top:1px solid rgba(201,169,110,.32);
  display:grid;gap:14px}
.vf-pasos li + li{margin-top:30px}
@media (min-width:900px){.vf-pasos li + li{margin-top:0}}
.vf-pasos li::before{content:"0" counter(paso);font-family:var(--body);font-weight:200;
  font-size:2.6rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.vf-pasos h3{font-family:var(--display);font-weight:300;font-size:1.65rem;line-height:1.18;
  color:var(--cream);text-transform:none;letter-spacing:0;margin:0}
.vf-pasos p{color:rgba(250,247,242,.72);font-size:.98rem;line-height:1.6;max-width:36ch}

/* ---------- QUIEN VENDE: banda clara, corta, con una sola frase larga. ---------- */
.vf-vende{padding:clamp(72px,9vw,128px) 0;display:grid;gap:26px}
@media (min-width:900px){.vf-vende{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:60px;align-items:start}}
.vf-vende p:not(.eyebrow){font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.7rem);
  line-height:1.4;color:var(--navy);max-width:40ch;text-wrap:pretty}
.vf-vende p + p{margin-top:16px}
.vf-vende .vf-firma{font-family:var(--body);font-size:.95rem;line-height:1.6;color:var(--soft);
  margin-top:22px;max-width:none}

/* ---------- CIERRE ---------- */
.vf-cierre{border-top:1px solid var(--rule);padding:clamp(60px,7vw,100px) 0 clamp(72px,9vw,120px)}
.vf-cierre h2{font-size:clamp(2rem,3.6vw,2.9rem)}
.vf-cierre p{margin-top:22px;max-width:var(--texto);text-wrap:pretty}
.vf-cierre a{overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .vf *{transition:none!important}
}