/* HIS FRACTIONAL RESIDENCES — estilos específicos de las páginas anexas
   Reutiliza los tokens de css/main.css (majestic). Cárgalo DESPUÉS de main.css. */
:root{
  --frac-radius:2px;
  --frac-ink-2:#161f3d;
}

/* ---------- hero de proyecto ---------- */
.frac-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0B1533}
.frac-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frac-hero .bg--video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frac-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,34,.5) 0%,rgba(8,14,34,.28) 42%,rgba(8,14,34,.82) 100%)}
.frac-hero .inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:170px 32px 64px}
.frac-hero .tagline{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);color:#fff;max-width:34ch;margin:0 0 8px}
.frac-hero h1{color:#fff;font-size:clamp(48px,8vw,104px);line-height:1;letter-spacing:.01em;margin:6px 0 14px}
.frac-hero .lead{color:rgba(255,255,255,.86);font-size:19px;max-width:600px;margin:0 0 30px}
.frac-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.frac-hero .hero-actions .btn{gap:8px}

/* ---------- quick facts ---------- */
.quickfacts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0;background:#fff}
.quickfacts div{flex:1;min-width:150px;padding:22px 26px;border-right:1px solid var(--line)}
.quickfacts div:last-child{border-right:0}
.quickfacts b{display:block;font-family:var(--serif);font-size:26px;color:var(--ink)}
.quickfacts span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.quickfacts.on-dark{background:transparent;border-color:rgba(255,255,255,.18)}
.quickfacts.on-dark div{border-color:rgba(255,255,255,.18)}
.quickfacts.on-dark b{color:#fff}
.quickfacts.on-dark span{color:rgba(255,255,255,.6)}

/* ---------- intro 2 columnas ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split img{width:100%;height:100%;min-height:440px;object-fit:cover}
.split .lead{font-size:19px;color:var(--ink-soft)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold);color:var(--gold-dark);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 14px;border-radius:999px}

/* ---------- beneficios ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.benefit{border:1px solid var(--line);background:#fff;padding:32px 28px;display:flex;gap:18px;transition:border-color .3s,transform .3s}
.benefit:hover{border-color:var(--gold);transform:translateY(-3px)}
.benefit .ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-dark);font-family:var(--serif);font-size:20px}
.benefit h4{font-family:var(--serif);font-size:21px;margin-bottom:4px}
.benefit p{color:var(--muted);font-size:15px;line-height:1.6}

/* ---------- amenidades ---------- */
.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.amenity{background:#fff;padding:30px 28px}
.amenity .n{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:.14em}
.amenity h4{font-family:var(--serif);font-size:20px;margin:6px 0 6px}
.amenity p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* ---------- residencias / specs ---------- */
.unit-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 0}
.unit-tabs button{border:1px solid var(--line);background:#fff;padding:12px 24px;font:500 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink);transition:.25s}
.unit-tabs button:hover{border-color:var(--gold)}
.unit-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.unit-panel{display:none}
.unit-panel.on{display:block}
.feature-list{list-style:none;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:2px 34px}
.feature-list li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px}
.feature-list li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}

/* ---------- temporadas ---------- */
.seasons{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px}
.season{border:1px solid var(--line);background:#fff;padding:26px 20px;text-align:center;cursor:pointer;position:relative;transition:.3s}
.season:hover{border-color:var(--gold);transform:translateY(-3px)}
.season.on{border-color:var(--gold);box-shadow:0 14px 40px rgba(11,21,51,.08)}
.season.on::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gold)}
.season .nm{font-family:var(--serif);font-size:22px;color:var(--ink)}
.season .tm{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:4px 0 14px}
.season .pr{font-family:var(--serif);font-size:27px;color:var(--gold-dark)}
.season .pr small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.season .wk{font-size:12px;color:var(--muted);margin-top:8px}
.season .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;white-space:nowrap}

.price-note{color:var(--muted);font-size:13.5px;margin-top:16px}
.price-table-title{font-family:var(--serif);font-size:24px;margin:30px 0 6px}

/* ---------- pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:12px}
.step{border-top:2px solid var(--gold);padding-top:18px}
.step .n{font-family:var(--serif);font-size:44px;color:var(--gold);line-height:1}
.step h4{font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:10px 0 8px}
.step p{color:var(--muted);font-size:14.5px}

/* ---------- galería ---------- */
.frac-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.frac-gal a{overflow:hidden;display:block}
.frac-gal img{width:100%;height:230px;object-fit:cover;cursor:zoom-in;transition:transform .7s}
.frac-gal a:hover img{transform:scale(1.05)}
.frac-gal .wide{grid-column:span 2}
.frac-gal .wide img{height:230px}

/* ---------- banner grupo / padre ---------- */
.parent-band{background:#0B1533;color:#fff;padding:64px 0}
.parent-band .row{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.parent-band h2{color:#fff;font-size:clamp(26px,3vw,38px)}
.parent-band p{color:rgba(255,255,255,.72);max-width:560px;margin-top:10px}

/* ---------- utilidades ---------- */
.mt-0{margin-top:0}
.center{text-align:center}
.eyebrow.frac{color:var(--gold)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .benefits{grid-template-columns:repeat(2,1fr)}
  .amenities{grid-template-columns:repeat(2,1fr)}
  .seasons{grid-template-columns:repeat(3,1fr)}
  .frac-gal{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .split,.split.rev{grid-template-columns:1fr;gap:30px}
  .split img{min-height:320px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .feature-list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .benefits,.amenities{grid-template-columns:1fr}
  .seasons{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .quickfacts div{min-width:50%;border-right:0;border-bottom:1px solid var(--line)}
  .frac-gal{grid-template-columns:1fr 1fr}
  .frac-gal .wide{grid-column:span 2}
  .frac-gal img,.frac-gal .wide img{height:150px}
}