/* =========================================================
   VIVACE — Privada Firenze | Landing Page
   ========================================================= */

@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial DemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/tt-hoves-pro-trial-extraBold.woff") format("woff");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}

:root{
  --vv-pink: #D1B164;
  --vv-pink-dark: #B8944F;
  --vv-navy: #2E483F;
  --vv-navy-2: #3E5C50;
  --vv-tan: #979392;
  --vv-tan-dark: #7D7A79;
  --vv-orange: #B8944F;
  --vv-ink: #2E483F;
  --vv-body: #6B6866;
  --vv-white: #FFFFFF;
  --vv-off: #F2F2F2;
  --vv-line: #E2E0DE;
  --ff: 'TT Hoves Pro Trial', 'Segoe UI', Arial, sans-serif;
  --container: 1200px;
  --radius: 14px;
  --shadow: 0 20px 45px -20px rgba(46,72,63,.35);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
#lead-form, #contacto, #modelos, #galeria, #ubicacion{ scroll-margin-top: 90px; }
body{
  margin:0;
  font-family: var(--ff);
  color: var(--vv-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--vv-white);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--ff); color: var(--vv-navy); font-weight: 700; margin: 0 0 .6em; line-height:1.2; }
p{ margin: 0 0 1em; }
.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section{ padding: 80px 0; }
.section-tight{ padding: 56px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight:700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vv-pink); margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--vv-pink); display:inline-block; }
.benefits .eyebrow{ font-size: 16px; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(26px, 3.4vw, 38px); }
.section-head h2.h2-lg{ font-size: clamp(30px, 4.4vw, 48px); }
.section-head p{ font-size: 17px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:15px; padding: 15px 30px; border-radius: 999px;
  border: none; cursor:pointer; transition: all .25s ease; white-space:nowrap;
}
.btn-pink{ background: var(--vv-pink); color: var(--vv-navy); box-shadow: 0 14px 28px -10px rgba(209,177,100,.55); }
.btn-pink:hover{ background: var(--vv-pink-dark); color: var(--vv-navy); transform: translateY(-2px); }
.btn-navy{ background: var(--vv-navy); color:#fff; }
.btn-navy:hover{ background: var(--vv-navy-2); transform: translateY(-2px); }
.btn-outline{ background: transparent; color: var(--vv-navy); border: 1.5px solid var(--vv-line); }
.btn-outline:hover{ border-color: var(--vv-navy); }
.btn-block{ width:100%; }
.btn-sm{ padding: 11px 22px; font-size: 14px; }

/* =========== HEADER =========== */
.site-header{
  position: sticky; top:0; z-index:500;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--vv-line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand .brand-tag{ font-size:11px; letter-spacing:.04em; text-transform:none; color: var(--vv-navy); margin-top:2px; white-space:nowrap; }
.brand-logo{ height:36px; width:auto; display:block; object-fit:contain; }
.footer-logo{ height:34px; }
.header-actions{ display:flex; align-items:center; gap:18px; }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:700; color: var(--vv-navy); font-size:15px; }
.header-phone svg{ flex:none; color: var(--vv-pink); }
.header-phone span{ display:block; }
.header-phone small{ display:block; font-weight:500; color: var(--vv-body); font-size:11px; }
@media (max-width:640px){
  .header-phone .header-phone-text{ display:none; }
}

/* =========== HERO =========== */
.hero{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--vv-off) 100%);
  padding: 48px 0 70px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:center;
}
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 20px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--vv-line);
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color: var(--vv-navy);
}
.hero-badge svg{ color: var(--vv-pink); }
.hero h1{ font-size: clamp(32px, 4.4vw, 50px); }
.hero h1 em{ font-style:normal; color: var(--vv-pink); }
.h1-logo{ display:inline-block; height:0.72em; width:auto; vertical-align:-0.1em; margin-left:6px; }
.section-logo{ height:46px; width:auto; margin:0 auto; }
.hero-lead{ font-size: 18px; max-width:520px; }
.hero-points{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 22px 0 28px; }
.hero-points li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color: var(--vv-ink); font-weight:500; }
.hero-points li svg{ flex:none; color: var(--vv-pink); margin-top:2px; }
.hero-price-row{ display:flex; gap: 26px; margin-bottom: 8px; flex-wrap:wrap; }
.hero-price{ }
.hero-price .label{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--vv-body); font-weight:600; }
.hero-price .amount{ font-size: 26px; font-weight:800; color: var(--vv-orange); }
.hero-media{ position:relative; margin-bottom: 36px; }
.hero-photo{
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  aspect-ratio: 2/1;
}
.hero-media .float-card{
  position:absolute; left:30px; bottom:-22px; background:#fff; border-radius:12px;
  box-shadow: var(--shadow); padding:16px 20px; display:flex; gap:12px; align-items:center;
  max-width:230px;
}
@media (max-width: 560px){ .hero-media .float-card{ left:8px; bottom:-16px; padding:12px 14px; } .hero-photo{ aspect-ratio: 2/1; } }
.float-card .fc-icon{ width:40px; height:40px; border-radius:10px; background: rgba(209,177,100,.15); display:flex; align-items:center; justify-content:center; color: var(--vv-pink-dark); flex:none; }
.float-card strong{ display:block; color: var(--vv-navy); font-size:14px; }
.float-card span{ font-size:12px; color: var(--vv-body); }

.lead-photo-card{
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border: 1px solid var(--vv-line);
  aspect-ratio: 4/5;
}
.lead-photo-card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Hero form */
.lead-form-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 26px 22px; border: 1px solid var(--vv-line);
}
.lead-form-card h3{ font-size:19px; margin-bottom:4px; }
.lead-form-card .form-sub{ font-size:13.5px; color: var(--vv-body); margin-bottom:16px; }
.form-row{ margin-bottom:12px; }
.form-row label{ display:block; font-size:12.5px; font-weight:700; color: var(--vv-navy); margin-bottom:6px; }
.form-control{
  width:100%; padding: 12px 14px; border-radius:9px; border:1.5px solid var(--vv-line);
  font-family: var(--ff); font-size:14.5px; color: var(--vv-ink); background:#fbfbfa; transition: border-color .2s;
}
.form-control:focus{ outline:none; border-color: var(--vv-pink); background:#fff; }
textarea.form-control{ resize: vertical; min-height:80px; }
.form-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-radio-group{ display:flex; flex-wrap:wrap; gap:8px; }
.form-radio{
  border:1.5px solid var(--vv-line); border-radius:8px; padding:9px 12px; font-size:13px; font-weight:600;
  color: var(--vv-navy); cursor:pointer; position:relative;
}
.form-radio input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.form-radio:has(input:checked){ border-color: var(--vv-pink); background: rgba(209,177,100,.12); color: var(--vv-pink-dark); }
.form-note{ font-size:11.5px; color:#8a8f9c; margin-top:12px; text-align:center; }
.form-status{ font-size:13.5px; font-weight:600; margin-top:10px; text-align:center; display:none; }
.form-status.ok{ color:#1a8f52; display:block; }
.form-status.err{ color:#d3312f; display:block; }
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }

/* =========== BENEFICIOS =========== */
.benefits{ background: var(--vv-navy); }
.benefits .section-head h2, .benefits .section-head p{ color:#fff; }
.benefits .section-head p{ color: #C9D0CB; }
.benefit-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.benefit-card{
  background: var(--vv-navy-2); border-radius: var(--radius); padding: 30px 24px;
  border:1px solid rgba(255,255,255,.08);
}
.benefit-icon{
  width:54px; height:54px; border-radius:14px; background: var(--vv-pink);
  display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:18px;
}
.benefit-card h3{ color:#fff; font-size:18px; margin-bottom:8px; }
.benefit-card p{ color:#C3CAC5; font-size:14px; margin:0; }

/* =========== TIPOS DE VIVIENDA =========== */
.homes-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.home-card{
  border: 1px solid var(--vv-line); border-radius: var(--radius); overflow:hidden; background:#fff;
  transition: transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column;
}
.home-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.home-photo{ aspect-ratio: 4/2.9; position:relative; }
.home-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-tag{
  position:absolute; top:14px; left:14px; background: var(--vv-navy); color:#fff; font-size:12px;
  font-weight:700; padding:6px 12px; border-radius:999px;
}
.home-body{ padding: 22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.home-body h3{ font-size:21px; margin-bottom:2px; }
.home-body .home-sub{ font-size:13px; color: var(--vv-body); margin-bottom:14px; }
.home-specs{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 14px; margin-bottom:16px; }
.home-specs li{ display:flex; align-items:center; gap:7px; font-size:13px; color: var(--vv-ink); font-weight:500; }
.home-specs li svg{ color: var(--vv-pink); flex:none; }
.home-price-row{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px dashed var(--vv-line); padding-top:14px; margin-top:auto; margin-bottom:16px; }
.home-price-row .from{ font-size:11.5px; text-transform:uppercase; color:var(--vv-body); font-weight:700; letter-spacing:.04em; }
.home-price-row .amount{ font-size:22px; font-weight:800; color: var(--vv-orange); }
.home-price-row .mtto{ font-size:11.5px; color:var(--vv-body); }

/* =========== GALERIA =========== */
.gallery-wrap{ background: var(--vv-off); }
.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 14px;
}
.gallery-grid .g-item{ border-radius: 12px; overflow:hidden; cursor:pointer; box-shadow: 0 10px 24px -14px rgba(46,72,63,.35); }
.gallery-grid .g-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.gallery-grid .g-item:hover img{ transform: scale(1.07); }

/* Posiciones explícitas (sin auto-placement) para que las 9 fotos llenen
   la cuadrícula 3x4 exacto, sin huecos: 1 foto grande + 8 en fila. */
.gallery-grid .g-item:nth-child(1){ grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery-grid .g-item:nth-child(2){ grid-column: 3 / 4; grid-row: 1 / 2; }
.gallery-grid .g-item:nth-child(3){ grid-column: 3 / 4; grid-row: 2 / 3; }
.gallery-grid .g-item:nth-child(4){ grid-column: 1 / 2; grid-row: 3 / 4; }
.gallery-grid .g-item:nth-child(5){ grid-column: 2 / 3; grid-row: 3 / 4; }
.gallery-grid .g-item:nth-child(6){ grid-column: 3 / 4; grid-row: 3 / 4; }
.gallery-grid .g-item:nth-child(7){ grid-column: 1 / 2; grid-row: 4 / 5; }
.gallery-grid .g-item:nth-child(8){ grid-column: 2 / 3; grid-row: 4 / 5; }
.gallery-grid .g-item:nth-child(9){ grid-column: 3 / 4; grid-row: 4 / 5; }

@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 10px; }
  .gallery-grid .g-item{ aspect-ratio: 4/3; }
  .gallery-grid .g-item:nth-child(1){ grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16/9; }
  .gallery-grid .g-item:nth-child(2),
  .gallery-grid .g-item:nth-child(3),
  .gallery-grid .g-item:nth-child(4),
  .gallery-grid .g-item:nth-child(5),
  .gallery-grid .g-item:nth-child(6),
  .gallery-grid .g-item:nth-child(7),
  .gallery-grid .g-item:nth-child(8),
  .gallery-grid .g-item:nth-child(9){ grid-column: auto; grid-row: auto; }
}

.hero-photo img, .hero-photo video{ width:100%; height:100%; object-fit:cover; display:block; background:#0F1830; }

/* =========== UBICACION =========== */
.location-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center; }
.location-list{ margin: 22px 0 26px; }
.location-list li{ display:flex; gap:12px; padding: 12px 0; border-bottom:1px solid var(--vv-line); font-size:14.5px; color: var(--vv-ink); }
.location-list li:last-child{ border-bottom:none; }
.location-list svg{ color: var(--vv-pink); flex:none; margin-top:2px; }
.map-frame{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--vv-line); }
.map-frame iframe{ width:100%; height:420px; border:0; display:block; }

/* =========== FORM FINAL =========== */
.final-cta{ background: var(--vv-navy); position:relative; overflow:hidden; }
.final-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; }
.final-copy .eyebrow{ color:#E8CD8F; }
.final-copy .eyebrow::before{ background:#E8CD8F; }
.final-copy h2{ color:#fff; }
.final-copy p{ color:#D2D6D3; font-size:17px; }
.final-copy ul{ margin-top:20px; }
.final-copy ul li{ display:flex; gap:10px; color:#E4E6E4; font-size:14.5px; padding:6px 0; }
.final-copy ul li svg{ color:#E8CD8F; flex:none; margin-top:2px; }
.final-cta .lead-form-card{ border:none; }

/* =========== FOOTER =========== */
.site-footer{ background:#1F332B; color:#B7BDB8; padding: 50px 0 20px; }
.footer-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-bottom: 30px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:22px; }
.footer-brand .brand-tag{ color:#A9B0AA; }
.footer-brand p{ max-width:320px; font-size:13.5px; margin-top:14px; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.footer-col li{ font-size:13.5px; padding: 5px 0; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; }

/* =========== WHATSAPP FLOAT =========== */
.wa-float{
  position: fixed; right:22px; bottom:22px; z-index:600;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 28px -8px rgba(37,211,102,.65);
  animation: wa-pulse 2.4s infinite;
}
.wa-float:hover{ transform: scale(1.06); }
@keyframes wa-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.5), 0 12px 28px -8px rgba(37,211,102,.65); }
  70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 12px 28px -8px rgba(37,211,102,.65); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 12px 28px -8px rgba(37,211,102,.65); }
}
.availability-strip{
  background: var(--vv-pink); color: var(--vv-navy); text-align:center; font-size:13.5px; font-weight:700;
  padding:10px 16px;
}
.availability-strip strong{ font-weight:800; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(15,20,36,.92); z-index:900; display:none;
  align-items:center; justify-content:center; padding: 30px;
}
.lightbox.open{ display:flex; }
.lightbox .lb-inner{ max-width: 800px; width:100%; aspect-ratio: 4/3; border-radius:12px; overflow:hidden; }
.lightbox .lb-inner img{ width:100%; height:100%; object-fit:contain; background:#0F1830; display:block; }
.lightbox .lb-close{
  position:absolute; top:22px; right:26px; color:#fff; background:none; border:none; font-size:34px; cursor:pointer; line-height:1;
}

/* Skip link / accessibility */
.skip-link{ position:absolute; left:-999px; top:auto; background:#fff; padding:10px 16px; z-index:1000; }
.skip-link:focus{ left:12px; top:12px; }

/* =========== RESPONSIVE =========== */
@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; }
  .benefit-grid{ grid-template-columns: repeat(2,1fr); }
  .homes-grid{ grid-template-columns: repeat(2,1fr); }
  .location-grid{ grid-template-columns: 1fr; }
  .final-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .section{ padding: 56px 0; }
  .homes-grid{ grid-template-columns: 1fr; }
  .benefit-grid{ grid-template-columns: 1fr; }
  .form-two{ grid-template-columns: 1fr; }
  .hero-points{ grid-template-columns: 1fr; }
  .hero-media .float-card{ display:none; }
  .footer-cols{ gap:30px; }
}