/* =====================================================================
   PATRIMONIO SEGURO — Sistema de diseño (TEMA CLARO Y ELEGANTE)
   Marfil / blanco · acentos dorado metálico + negro · serif refinado
   Tipografía: Fraunces (display) + Manrope (texto)
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Superficies claras */
  --paper:   #FCFAF5;   /* fondo principal, marfil cálido */
  --cream:   #F4EDDF;   /* sección alterna, arena suave */
  --white:   #FFFFFF;

  /* Tinta (texto y anclas oscuras puntuales) */
  --ink:     #1B1712;
  --ink-2:   #161310;   /* footer */
  --muted:   #6E6555;   /* texto secundario */
  --muted-2: #908572;

  /* Líneas */
  --line:        rgba(27,23,18,.12);
  --line-strong: rgba(27,23,18,.20);

  /* Dorado metálico (acento de marca) */
  --gold:        #B0832B;
  --gold-bright: #CDA24A;
  --gold-deep:   #8A6A22;
  --gold-grad:   linear-gradient(135deg,#7E5F1E 0%,#B6892E 42%,#E3C36A 58%,#9A742A 100%);
  --gold-text:   linear-gradient(135deg,#8A6A22 0%,#B6892E 50%,#7E5F1E 100%);

  /* Texto sobre fondos oscuros (hero / footer) */
  --on-dark:     #F1ECE1;
  --on-dark-mut: #B6AE9D;
  --on-dark-line: rgba(255,255,255,.14);

  /* Sistema */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow-sm: 0 10px 30px -18px rgba(40,32,16,.35);
  --shadow-card: 0 26px 60px -34px rgba(60,48,22,.40), 0 8px 20px -14px rgba(60,48,22,.18);
  --shadow-gold: 0 0 0 1px rgba(176,131,43,.40), 0 34px 70px -34px rgba(176,131,43,.42);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body {
  font-family: "Manrope", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: #fff; }

/* ---------- Tipografía ---------- */
.display, h1,h2,h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; line-height: 1.05; letter-spacing: -.012em; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.serif-italic { font-style: italic; font-optical-sizing: auto; }

.eyebrow {
  font-family: "Manrope", sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .85em;
  color: var(--gold-deep);
}
.eyebrow::before { content:""; width: 30px; height:1px; background: linear-gradient(90deg,var(--gold),transparent); display:inline-block; }
.eyebrow.center { justify-content:center; }
.eyebrow.center::after { content:""; width: 30px; height:1px; background: linear-gradient(90deg,transparent,var(--gold)); display:inline-block; }

.gold-text {
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lead { font-size: clamp(1.05rem,1.4vw,1.22rem); color: var(--muted); max-width: 56ch; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section { position: relative; }
.section-pad { padding-block: clamp(72px, 11vw, 150px); }

/* Utilidades de fondo — todas CLARAS, solo alternan tinte para dar ritmo */
.bg-ink   { background: var(--paper); color: var(--ink); }
.bg-soft  { background: var(--cream); color: var(--ink); }
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-cream { background: var(--cream); color: var(--ink); }

/* filete dorado como el "— SEGURO —" del logo */
.hr-gold { display:flex; align-items:center; justify-content:center; gap:14px; }
.hr-gold span { width:6px; height:6px; border:1px solid var(--gold); transform: rotate(45deg); }
.hr-gold::before,.hr-gold::after { content:""; height:1px; width:min(120px,18vw); background: linear-gradient(90deg,transparent,var(--gold)); }
.hr-gold::after { background: linear-gradient(90deg,var(--gold),transparent); }

/* atmósfera: glow dorado muy sutil */
.atmos { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.atmos::before {
  content:""; position:absolute; width:55vw; height:55vw; border-radius:50%;
  background: radial-gradient(circle, rgba(176,131,43,.10), transparent 62%);
  top:-20vw; right:-12vw;
}
.grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1.02em 1.7em; font-weight: 700; font-size: .9rem; letter-spacing:.01em;
  border-radius: 100px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s, color .4s, border-color .4s; will-change: transform; }
.btn svg { width: 1.1em; height: 1.1em; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn-gold { color:#fff; background: linear-gradient(135deg,#B6892E,#8A6A22 55%,#B6892E); background-size:200% 100%;
  box-shadow: 0 14px 30px -12px rgba(138,106,34,.5); background-position: 0 0; }
.btn-gold:hover { background-position: 100% 0; box-shadow: 0 20px 44px -14px rgba(138,106,34,.6); }

.btn-ghost { color: var(--ink); border:1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep); }
/* sobre el hero oscuro */
.hero .btn-ghost { color:#fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.hero .btn-ghost:hover { border-color:#fff; background: rgba(255,255,255,.12); color:#fff; }

.btn-wa { background:#1FA855; color:#fff; box-shadow:0 12px 30px -12px rgba(31,168,85,.6); }
.btn-wa:hover { background:#1c9a4e; }

.link-underline { position:relative; font-weight:700; color:var(--gold-deep); display:inline-flex; gap:.45em; align-items:center; }
.link-underline svg { transition: transform .35s var(--ease); width:1em; }
.link-underline:hover svg { transform: translateX(5px); }

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .5s var(--ease), backdrop-filter .5s, border-color .5s, box-shadow .5s; border-bottom: 1px solid transparent; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding-block: 16px; }
.site-header.scrolled { background: rgba(252,250,245,.82); backdrop-filter: blur(16px) saturate(1.15); border-color: var(--line); box-shadow: 0 8px 30px -22px rgba(40,32,16,.5); }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { height: 66px; width:auto; transition: height .4s var(--ease); }
.site-header.scrolled .brand img { height: 56px; }
@media (max-width:560px){ .brand img { height: 54px; } .site-header.scrolled .brand img { height: 50px; } }
/* swap de logo: blanco sobre el hero oscuro, oscuro al hacer scroll / páginas claras */
.logo-light { display:none; }
.site-header.scrolled .logo-dark { display:none; }
.site-header.scrolled .logo-light { display:block; }
/* con el menú móvil (claro) abierto, mostrar el logo de letras oscuras */
.site-header.menu-open .logo-dark { display:none; }
.site-header.menu-open .logo-light { display:block; }
/* páginas con header ya "scrolled" desde el inicio (propiedades) usan el oscuro */

.nav { display:flex; align-items:center; gap: 34px; }
.nav-links { display:flex; gap: 30px; }
.nav-links a { font-size:.86rem; font-weight:600; letter-spacing:.01em; color:#fff; position:relative; padding-block:4px; opacity:.9; transition:opacity .3s, color .4s; }
.site-header.scrolled .nav-links a { color: var(--ink); opacity:.78; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--gold); transition:width .35s var(--ease); }
.nav-links a:hover { opacity:1; } .nav-links a:hover::after { width:100%; }

/* menú desplegable "Propiedades" */
.nav-item { position:relative; display:flex; align-items:center; }
.nav-item > a { display:inline-flex; align-items:center; gap:5px; }
.nav-item .chev { width:13px; height:13px; transition:transform .3s var(--ease); }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform:rotate(180deg); }
.dropdown { position:absolute; top:100%; left:50%; margin-top:14px; transform:translateX(-50%) translateY(6px);
  min-width:256px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card);
  padding:8px; opacity:0; visibility:hidden; pointer-events:none; z-index:60; display:flex; flex-direction:column;
  transition:opacity .25s var(--ease), transform .25s var(--ease); }
.dropdown::before { content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dropdown a { color:var(--ink)!important; opacity:1!important; font-size:.88rem; font-weight:600; padding:11px 14px; border-radius:8px;
  white-space:nowrap; transition:background .2s, color .2s; }
.dropdown a::after { content:none!important; }
.dropdown a:hover { background:var(--cream); color:var(--gold-deep)!important; }
.dropdown .dd-all { border-top:1px solid var(--line); margin-top:4px; color:var(--gold-deep)!important; }
.nav-cta { display:flex; align-items:center; gap:14px; }
.burger { display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; }
.burger span { width:22px; height:2px; background:#fff; transition:.35s var(--ease); border-radius:2px; }
.site-header.scrolled .burger span { background: var(--ink); }
.burger.open span { background: var(--ink); }
.burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px){
  .nav-links, .nav-cta .btn { display:none; }
  .burger { display:flex; }
  .mobile-menu { position:fixed; inset:0; z-index:49; background: var(--paper);
    display:flex; flex-direction:column; justify-content:center; gap:6px; padding: var(--gut);
    transform: translateY(-100%); transition: transform .55s var(--ease); }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu a { font-family:"Fraunces",serif; font-size: clamp(1.8rem,8vw,2.6rem); padding-block:.25em; border-bottom:1px solid var(--line); color:var(--ink); }
  .mobile-menu .btn { margin-top: 24px; }
}
.mobile-menu { display:none; }
@media (max-width:920px){ .mobile-menu{ display:flex; } }

/* =====================================================================
   HERO (claro, alegre — texto + collage de imágenes)
   ===================================================================== */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; color:#fff;
  padding-top: 132px; padding-bottom: clamp(56px,9vh,110px); }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; transform: scale(1.08); animation: kenburns 16s var(--ease-out) forwards; }
@keyframes kenburns { to { transform: scale(1); } }
.hero-bg::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(8,6,4,.88) 0%, rgba(8,6,4,.62) 36%, rgba(8,6,4,.22) 66%, rgba(8,6,4,.05) 100%),
             linear-gradient(180deg, rgba(8,6,4,.45) 0%, transparent 26%, transparent 72%, rgba(8,6,4,.55) 100%); }
.hero-inner { position:relative; z-index:2; width:100%; max-width:820px; }
.hero .eyebrow { color:#F0DCA6; }
.hero .eyebrow::before { background: linear-gradient(90deg,#F0DCA6,transparent); }
.hero h1 { max-width: 17ch; color:#fff; text-shadow: 0 2px 26px rgba(0,0,0,.40); }
.hero .gold-text { background: linear-gradient(135deg,#FBE8BC,#E3C36A 55%,#F3E2B0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero .lead { margin-top: 1.3rem; color:#EAE4D6; max-width:54ch; }
.hero-cta { margin-top: 2.2rem; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-assure { display:flex; gap:13px; align-items:flex-start; margin-top:28px; padding:15px 18px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); border-radius:var(--r-md); max-width:52ch; }
.hero-assure svg { width:26px; height:26px; color:#F0DCA6; flex:none; margin-top:1px; }
.hero-assure p { font-size:.98rem; color:#EAE4D6; line-height:1.5; }
.hero-assure strong { color:#fff; font-weight:600; }
.scroll-hint { position:absolute; left:var(--gut); bottom:24px; z-index:3; display:flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#E6DECB; }
.scroll-hint .line { width:1px; height:40px; background:linear-gradient(#F0DCA6,transparent); position:relative; overflow:hidden; }
.scroll-hint .line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:#fff; animation: scrolldot 2.4s var(--ease) infinite; }
@keyframes scrolldot { 0%{ top:-50%; } 60%,100%{ top:100%; } }
@media (max-width:640px){ .scroll-hint{ display:none; } }

/* =====================================================================
   BUSCADOR / FILTRO (tarjeta blanca elevada)
   ===================================================================== */
.finder { position:relative; z-index:5; margin-top: -56px; }
.finder-card { background: var(--white); border:1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px,3vw,30px); box-shadow: var(--shadow-card); }
.finder-row { display:grid; grid-template-columns: repeat(4, 1fr) auto; gap:14px; align-items:end; }
.finder-field label { display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:600; }
.finder-field select, .finder-field input { width:100%; padding: .9em 1em; border-radius: var(--r-sm); background: var(--paper);
  border:1px solid var(--line-strong); color:var(--ink); font-size:.92rem; appearance:none; transition:border-color .3s, background .3s; }
.finder-field select:focus, .finder-field input:focus { border-color:var(--gold); background:#fff; outline:none; }
.finder-field.sel { position:relative; }
.finder-field.sel::after { content:"▾"; position:absolute; right:14px; bottom:12px; color:var(--gold); pointer-events:none; font-size:.8rem; }
.finder .btn { width:100%; }
@media (max-width: 880px){ .finder-row{ grid-template-columns: 1fr 1fr; } .finder-row .finder-submit{ grid-column:1/-1; } }
@media (max-width: 520px){ .finder-row{ grid-template-columns: 1fr; } }

/* =====================================================================
   CATÁLOGO
   ===================================================================== */
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom: clamp(34px,5vw,60px); }
.section-head .titles { max-width: 60ch; }
.section-head h2 { margin-top: 1rem; }

.filter-chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.chip { padding:.6em 1.2em; border-radius:100px; font-size:.8rem; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--line-strong); color:var(--muted); background:transparent; transition:.3s var(--ease); }
.chip:hover { border-color:var(--gold); color:var(--gold-deep); }
.chip.active { background: var(--gold-grad); color:#fff; border-color:transparent; box-shadow:0 10px 22px -12px rgba(138,106,34,.5); }

.cards { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media (max-width:1000px){ .cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:660px){ .cards{ grid-template-columns: 1fr; } }
.card { position:relative; border-radius: var(--r-lg); overflow:hidden; background:var(--white);
  border:1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s;
  display:flex; flex-direction:column; }
.card.hide { display:none; }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-gold); border-color: rgba(176,131,43,.5); }
.card-media { position:relative; aspect-ratio: 4/3.2; overflow:hidden; }
.card-media img { width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.08); }
.card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(15,12,8,.62)); }
.card-badges { position:absolute; top:16px; left:16px; z-index:2; display:flex; gap:8px; flex-wrap:wrap; }
.badge { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.5em .85em; border-radius:100px;
  background: rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.6); color:var(--ink); }
.badge.gold { background: var(--gold-grad); color:#fff; border-color:transparent; }
.card-loc { position:absolute; left:18px; bottom:16px; z-index:2; display:flex; align-items:center; gap:7px; font-size:.78rem; color:#fff; }
.card-loc svg{ width:14px; height:14px; color:#F0DCA6; }
.card-body { padding: 22px 22px 24px; display:flex; flex-direction:column; flex:1; color:var(--ink); }
.card-type { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.card h3 { margin-top:.45rem; }
.card-desc { margin-top:.6rem; font-size:.92rem; color:var(--muted); flex:1; }
.card-specs { display:flex; gap:18px; margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line); flex-wrap:wrap; }
.card-specs div { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); }
.card-specs svg { width:16px; height:16px; color:var(--gold); }
.card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:1.3rem; }
.card-price .from { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.card-price .amt { font-family:"Fraunces",serif; font-size:1.45rem; line-height:1; margin-top:3px; color:var(--ink); }
.card-price .amt small { font-size:.7rem; font-family:"Manrope"; color:var(--muted); }
.card-cta { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-deep); transition:.4s var(--ease); flex:none; }
.card:hover .card-cta { background:var(--gold-grad); color:#fff; border-color:transparent; transform: rotate(-45deg); }
.card-link { position:absolute; inset:0; z-index:3; }

.empty-state { text-align:center; padding: 60px 20px; color:var(--muted); display:none; }
.empty-state.show { display:block; }

/* navegador de categorías */
.cat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .cat-grid{ grid-template-columns:1fr; } }
.cat-card { text-align:left; padding:28px 24px 26px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--white);
  box-shadow:var(--shadow-sm); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; cursor:pointer;
  display:flex; flex-direction:column; position:relative; }
.cat-card:hover { transform:translateY(-6px); border-color:rgba(176,131,43,.5); box-shadow:var(--shadow-gold); }
.cat-card.active { border-color:var(--gold); box-shadow:var(--shadow-gold); }
.cat-ic { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-deep);
  margin-bottom:18px; transition:.4s var(--ease); }
.cat-card:hover .cat-ic, .cat-card.active .cat-ic { background:var(--gold-grad); color:#fff; border-color:transparent; }
.cat-ic svg{ width:26px; height:26px; }
.cat-card h3 { font-size:1.12rem; line-height:1.2; }
.cat-card p { margin-top:.55rem; font-size:.85rem; color:var(--muted); flex:1; }
.cat-count { margin-top:18px; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); display:flex; align-items:center; gap:8px; }
.cat-count::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
.cat-count.soon { color:var(--muted-2); }
.cat-count.soon::before { background:var(--muted-2); }
.cat-card .arrow { position:absolute; top:26px; right:24px; color:var(--gold); opacity:0; transform:translateX(-6px); transition:.4s var(--ease); }
.cat-card .arrow svg{ width:20px; height:20px; }
.cat-card:hover .arrow { opacity:1; transform:none; }

/* =====================================================================
   "POR QUÉ" — pilares
   ===================================================================== */
.pillars { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }
.pillar { background:var(--white); padding: 38px 30px 42px; transition: background .5s var(--ease); color:var(--ink); }
.pillar:hover { background:#FFFDF8; }
.pillar-ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-deep); margin-bottom:22px; transition:.5s var(--ease); }
.pillar:hover .pillar-ic { background:var(--gold-grad); color:#fff; border-color:transparent; }
.pillar-ic svg{ width:24px; height:24px; }
.pillar h3 { font-size:1.18rem; }
.pillar p { margin-top:.6rem; font-size:.9rem; color:var(--muted); }

/* split feature (imagen + texto) */
.split { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,70px); align-items:center; }
.split.rev { grid-template-columns:.95fr 1.05fr; }
@media (max-width:860px){ .split,.split.rev{ grid-template-columns:1fr; } }
.split-media { position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow: var(--shadow-card); }
.split-media img { width:100%; aspect-ratio: 4/3.4; object-fit:cover; }
.split-tag { position:absolute; bottom:18px; left:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:100px; padding:.6em 1.1em; font-size:.78rem; color:var(--ink); display:flex; gap:8px; align-items:center; }
.split-tag svg{ width:15px; color:var(--gold-deep); }

/* =====================================================================
   NÚMEROS / prueba social
   ===================================================================== */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,40px); }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; gap:36px 20px; } }
.stat { text-align:center; }
.stat .n { font-family:"Fraunces",serif; font-size: clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--ink); }
.stat .n .gold-text, .stat .n { background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.stat .l { margin-top:.7rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* testimonios */
.tcards { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .tcards{ grid-template-columns:1fr; max-width:620px; margin-inline:auto; } }
.tcard { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); position:relative; }
.tcard .quote-mark { font-family:"Fraunces",serif; font-size:3.4rem; line-height:.6; color:var(--gold); height:30px; display:block; }
.tcard p { color:var(--ink); font-size:1rem; margin:.4rem 0 1.4rem; }
.tcard .who { display:flex; align-items:center; gap:12px; }
.tcard .av { width:44px; height:44px; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; color:#fff; font-weight:800; font-family:"Fraunces",serif; }
.tcard .who b { display:block; font-size:.92rem; color:var(--ink); }
.tcard .who span { font-size:.78rem; color:var(--muted); }
.stars { color:var(--gold); letter-spacing:2px; font-size:.85rem; margin-bottom:.6rem; }

/* =====================================================================
   FAQ (acordeón nativo <details>)
   ===================================================================== */
.faq-list { max-width: 840px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.faq-item[open] { border-color:rgba(176,131,43,.45); box-shadow:var(--shadow-sm); }
.faq-item summary { list-style:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:"Fraunces",serif; font-size:1.08rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .ic { width:28px; height:28px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-deep);
  display:grid; place-items:center; flex:none; transition:.35s var(--ease); }
.faq-item summary .ic svg { width:15px; height:15px; }
.faq-item[open] summary .ic { background:var(--gold-grad); color:#fff; border-color:transparent; transform:rotate(135deg); }
.faq-item .faq-body { padding:0 22px 20px; color:var(--muted); font-size:.96rem; line-height:1.65; }
.faq-item .faq-body a { color:var(--gold-deep); font-weight:600; }

/* =====================================================================
   PÁGINAS LEGALES (aviso de privacidad) y GRACIAS
   ===================================================================== */
.legal { padding-top: 120px; }
.legal .prose { max-width: 760px; margin-inline:auto; }
.legal h1 { font-size: clamp(2rem,4.5vw,3rem); margin-bottom:.6rem; }
.legal .updated { color:var(--muted); font-size:.85rem; margin-bottom:2rem; }
.legal h2 { font-size:1.3rem; margin:2rem 0 .7rem; }
.legal p, .legal li { color:var(--muted); margin-bottom:.9rem; line-height:1.7; }
.legal ul { padding-left:1.1rem; list-style:disc; }
.legal a { color:var(--gold-deep); font-weight:600; }

.thanks { min-height: 86vh; display:grid; place-items:center; text-align:center; padding: 130px var(--gut) 80px; }
.thanks .check { width:84px; height:84px; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; color:#fff; margin:0 auto 26px; box-shadow:var(--shadow-gold); }
.thanks .check svg { width:42px; height:42px; }
.thanks h1 { font-size: clamp(2.2rem,5vw,3.4rem); }
.thanks p { color:var(--muted); max-width:46ch; margin:1rem auto 0; font-size:1.05rem; }
.thanks .thanks-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* =====================================================================
   VENDE CON NOSOTROS (dos perfiles + banner)
   ===================================================================== */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:780px){ .two-col{ grid-template-columns:1fr; } }
.info-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; display:flex; flex-direction:column; }
.info-card:hover { transform:translateY(-5px); border-color:rgba(176,131,43,.45); box-shadow:var(--shadow-gold); }
.info-card .pillar-ic { margin-bottom:20px; }
.info-card h3 { font-size:1.4rem; }
.info-card .sub { color:var(--gold-deep); font-weight:700; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; }
.info-card > p { color:var(--muted); margin-top:.5rem; }
.info-card .feature-list { grid-template-columns:1fr; margin:1.2rem 0 0; }

/* banner "vende" en la home */
.sell-band { display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(176,131,43,.10), rgba(176,131,43,.04));
  border:1px solid rgba(176,131,43,.30); border-radius:var(--r-xl); padding: clamp(28px,4vw,48px); }
.sell-band .sb-copy { max-width:60ch; }
.sell-band h2 { margin:.6rem 0 .8rem; }
.sell-band p { color:var(--muted); }
.sell-band .btn { flex:none; }
@media (max-width:760px){ .sell-band .btn{ width:100%; } }

/* pasos numerados (cómo trabajamos) */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .steps{ grid-template-columns:1fr; } }
.step { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--shadow-sm); }
.step .n { font-family:"Fraunces",serif; font-size:2rem; line-height:1; background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.step h3 { font-size:1.1rem; margin:.7rem 0 .4rem; }
.step p { color:var(--muted); font-size:.9rem; }

/* =====================================================================
   CTA FINAL + FORM
   ===================================================================== */
.cta-final { position:relative; overflow:hidden; }
.cta-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,70px); align-items:center; }
@media (max-width:880px){ .cta-grid{ grid-template-columns:1fr; } }
.cta-copy h2 { margin:1rem 0; }
.cta-copy .trust { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.cta-copy .trust li { display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:var(--muted); }
.cta-copy .trust svg{ width:20px; height:20px; color:var(--gold-deep); flex:none; margin-top:1px; }

.form-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  padding: clamp(26px,3.4vw,40px); box-shadow: var(--shadow-card); }
.form-card h3 { font-size:1.5rem; }
.form-card .sub { color:var(--muted); font-size:.9rem; margin-top:.4rem; margin-bottom:24px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:600; }
.field input, .field select, .field textarea { width:100%; padding:.95em 1.05em; border-radius:var(--r-sm); background:var(--paper);
  border:1px solid var(--line-strong); color:var(--ink); font-size:.95rem; font-family:inherit; transition:border-color .3s,background .3s; appearance:none; }
.field textarea { resize:vertical; min-height:96px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--gold); background:#fff; outline:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:460px){ .form-row{ grid-template-columns:1fr; } }
.form-card .btn { width:100%; margin-top:8px; }
.form-note { font-size:.74rem; color:var(--muted); text-align:center; margin-top:14px; }
.form-success { display:none; text-align:center; padding:20px 0; }
.form-success.show { display:block; animation: fadeUp .6s var(--ease) both; }
.form-success .check { width:64px; height:64px; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; margin:0 auto 18px; color:#fff; }
.form-success .check svg{ width:32px; height:32px; }

/* =====================================================================
   FOOTER (única ancla oscura, deep charcoal cálido)
   ===================================================================== */
.site-footer { background:var(--ink-2); color:var(--on-dark); border-top:3px solid var(--gold); padding-top: clamp(56px,8vw,90px); }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(30px,4vw,56px); }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:40px 30px; } }
@media (max-width:480px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand img { height:60px; margin-bottom:18px; }
.foot-brand p { color:var(--on-dark-mut); font-size:.9rem; max-width:34ch; }
.foot-col h4 { font-family:"Manrope"; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:18px; font-weight:700; }
.foot-col a, .foot-col li, .foot-col span { color:var(--on-dark-mut); font-size:.92rem; padding-block:6px; display:block; transition:color .3s; }
.foot-col a:hover { color:var(--gold-bright); }
.foot-social { display:flex; gap:12px; margin-top:18px; }
.foot-social a { width:40px; height:40px; border-radius:50%; border:1px solid var(--on-dark-line); display:grid; place-items:center; color:var(--on-dark); transition:.35s var(--ease); }
.foot-social a:hover { border-color:var(--gold); color:var(--gold-bright); transform:translateY(-3px); }
.foot-social svg{ width:18px; height:18px; }
.foot-bottom { margin-top: clamp(40px,6vw,64px); padding-block:26px; border-top:1px solid var(--on-dark-line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--on-dark-mut); }
.foot-bottom a:hover{ color:var(--gold-bright); }

/* whatsapp flotante */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:40; width:60px; height:60px; border-radius:50%; background:#1FA855;
  display:grid; place-items:center; color:#fff; box-shadow:0 14px 34px -10px rgba(31,168,85,.7); transition:transform .4s var(--ease); }
.wa-float svg{ width:30px; height:30px; }
.wa-float::before { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #1FA855; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
.wa-float:hover { transform:scale(1.08); }

/* =====================================================================
   ANIMACIONES SCROLL-REVEAL (mejora progresiva, a prueba de fallos)
   El estado oculto solo aplica si <html>.reveal (lo añade el script inline).
   ===================================================================== */
html.reveal [data-reveal] { opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change:transform,opacity; }
html.reveal [data-reveal].in { opacity:1; transform:none; }
html.reveal [data-reveal][data-d="1"]{ transition-delay:.08s; }
html.reveal [data-reveal][data-d="2"]{ transition-delay:.16s; }
html.reveal [data-reveal][data-d="3"]{ transition-delay:.24s; }
html.reveal [data-reveal][data-d="4"]{ transition-delay:.32s; }
html.reveal [data-reveal][data-d="5"]{ transition-delay:.40s; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none; } }

/* hero load stagger */
.hero [data-load]{ opacity:0; transform:translateY(24px); animation: fadeUp 1s var(--ease-out) forwards; }
.hero [data-load="1"]{ animation-delay:.15s; }
.hero [data-load="2"]{ animation-delay:.35s; }
.hero [data-load="3"]{ animation-delay:.55s; }
.hero [data-load="4"]{ animation-delay:.75s; }
.hero [data-load="5"]{ animation-delay:.95s; }

/* =====================================================================
   PÁGINAS DE PROPIEDAD
   ===================================================================== */
.breadcrumb { padding-top: 96px; }
.breadcrumb .wrap { display:flex; gap:10px; align-items:center; font-size:.8rem; color:var(--muted); padding-block:18px; }
.breadcrumb a:hover { color:var(--gold-deep); }
.breadcrumb .sep { color:var(--gold); }

.prop-hero { padding-top: 8px; }
.prop-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:30px; }
.prop-head .badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.prop-head .badges .badge { background:#fff; border:1px solid var(--line-strong); }
.prop-head .badges .badge.gold { background:var(--gold-grad); border-color:transparent; color:#fff; }
.prop-head h1 { font-size: clamp(2.2rem,5vw,3.8rem); }
.prop-head .loc { display:flex; align-items:center; gap:8px; color:var(--muted); margin-top:14px; font-size:.95rem; }
.prop-head .loc svg{ width:16px; color:var(--gold-deep); }
.prop-price-box { text-align:right; flex:none; }
.prop-price-box .from { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.prop-price-box .amt { font-family:"Fraunces",serif; font-size: clamp(1.8rem,4vw,2.6rem); line-height:1.1; color:var(--ink); }
.prop-price-box .amt small { font-size:.55em; color:var(--muted); font-family:"Manrope"; }
@media (max-width:640px){ .prop-price-box{ text-align:left; } }

/* galería */
.gallery-main { position:relative; border-radius:var(--r-lg); overflow:hidden; cursor:zoom-in; box-shadow:var(--shadow-card); }
.gallery-main img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:opacity .25s, transform 1.2s var(--ease-out); }
.gallery-main:hover img { transform:scale(1.03); }
.gallery-main .zoom-hint { position:absolute; right:16px; bottom:16px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:100px; padding:.5em 1em; font-size:.74rem; display:flex; gap:7px; align-items:center; color:var(--ink); }
.gallery-main .zoom-hint svg{ width:14px; color:var(--gold-deep); }
.thumbs { display:grid; grid-template-columns: repeat(5,1fr); gap:12px; margin-top:14px; }
@media (max-width:560px){ .thumbs{ grid-template-columns: repeat(4,1fr); } }
[data-thumb] { border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1; cursor:pointer; border:1px solid var(--line); position:relative; transition:.3s var(--ease); }
[data-thumb] img { width:100%; height:100%; object-fit:cover; }
[data-thumb]::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,.35); transition:.3s; }
[data-thumb]:hover::after, [data-thumb].active::after { background:transparent; }
[data-thumb].active { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }

/* lightbox */
[data-lightbox] { position:fixed; inset:0; z-index:80; background:rgba(20,16,10,.92); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:5vw; opacity:0; visibility:hidden; transition:.4s var(--ease); }
[data-lightbox].open { opacity:1; visibility:visible; }
[data-lightbox] img { max-width:92vw; max-height:88vh; border-radius:var(--r-md); box-shadow:0 40px 100px -30px #000; }
[data-lb-close] { position:absolute; top:24px; right:28px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.3); transition:.3s; }
[data-lb-close]:hover { border-color:var(--gold); color:var(--gold-bright); }

/* layout 2 columnas con CTA pegajoso */
.prop-layout { display:grid; grid-template-columns: 1fr 380px; gap: clamp(30px,4vw,56px); align-items:start; margin-top: clamp(40px,6vw,70px); }
@media (max-width:980px){ .prop-layout{ grid-template-columns:1fr; } }
.prop-aside { position:sticky; top:96px; }
@media (max-width:980px){ .prop-aside{ position:static; } }

/* specs destacadas */
.spec-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media (max-width:620px){ .spec-grid{ grid-template-columns:1fr 1fr; } }
.spec { background:var(--white); padding:24px 22px; }
.spec svg { width:24px; height:24px; color:var(--gold-deep); margin-bottom:12px; }
.spec .v { font-family:"Fraunces",serif; font-size:1.4rem; line-height:1; color:var(--ink); }
.spec .k { font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:7px; }

.prose { max-width:62ch; }
.prose h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin: 2.2rem 0 1rem; }
.prose h3 { margin: 1.8rem 0 .8rem; }
.prose p { color:var(--muted); margin-bottom:1.1rem; }
.prose p strong { color:var(--ink); }

/* lista de amenidades / incluye */
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; margin:1.4rem 0; }
@media (max-width:520px){ .feature-list{ grid-template-columns:1fr; } }
.feature-list li { display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:var(--ink); }
.feature-list svg { width:20px; height:20px; color:var(--gold-deep); flex:none; margin-top:2px; }
.pending { color:var(--muted)!important; }
.pending b { color:var(--gold-deep); font-weight:600; }

/* planes de financiamiento */
.plans { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:1.6rem 0; }
.plan { border:1px solid var(--line); border-radius:var(--r-md); padding:22px; background:var(--white); transition:.4s var(--ease); position:relative; box-shadow:var(--shadow-sm); }
.plan:hover { border-color:var(--gold); transform:translateY(-4px); }
.plan.featured { border-color:var(--gold); box-shadow:var(--shadow-gold); }
.plan .tag { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); }
.plan .price { font-family:"Fraunces",serif; font-size:1.9rem; margin:.3rem 0; color:var(--ink); }
.plan .price small { font-size:.5em; color:var(--muted); font-family:"Manrope"; }
.plan ul { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.plan li { display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); border-bottom:1px dashed var(--line); padding-bottom:7px; }
.plan li b { color:var(--ink); font-weight:600; }
.ribbon { position:absolute; top:-10px; right:14px; background:var(--gold-grad); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.35em .8em; border-radius:100px; }

/* mapa */
.map-wrap { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); }
.map-wrap iframe { width:100%; height:380px; border:0; display:block; filter:grayscale(.2) contrast(1.02); }
/* tarjeta de ubicación (sin iframe externo: abre Google Maps en pestaña nueva) */
.map-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow-sm); padding:24px 26px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.map-card:hover { border-color:rgba(176,131,43,.5); box-shadow:var(--shadow-gold); transform:translateY(-3px); }
.map-card .loc { display:flex; gap:14px; align-items:flex-start; }
.map-card .loc svg { width:30px; height:30px; color:var(--gold-deep); flex:none; }
.map-card .loc > span { font-size:.9rem; color:var(--muted); max-width:48ch; }
.map-card .loc b { display:block; font-family:"Fraunces",serif; font-size:1.12rem; color:var(--ink); margin-bottom:3px; }
.map-card .btn { flex:none; pointer-events:none; }

/* aside CTA card */
.aside-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; box-shadow:var(--shadow-card); }
.aside-card h3 { font-size:1.4rem; }
.aside-card p { color:var(--muted); font-size:.88rem; margin:.5rem 0 18px; }
.aside-card .btn { width:100%; margin-bottom:10px; }
.aside-card .agent { display:flex; gap:12px; align-items:center; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.aside-card .agent .av { width:46px; height:46px; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; color:#fff; font-weight:800; font-family:"Fraunces",serif; }
.aside-card .agent b { display:block; font-size:.9rem; color:var(--ink); }
.aside-card .agent span { font-size:.78rem; color:var(--muted); }

/* alerta legal */
.note-legal { display:flex; gap:14px; align-items:flex-start; background:rgba(176,131,43,.08); border:1px solid rgba(176,131,43,.3);
  border-radius:var(--r-md); padding:18px 20px; margin:1.4rem 0; }
.note-legal svg { width:22px; color:var(--gold-deep); flex:none; margin-top:2px; }
.note-legal p { font-size:.9rem; color:var(--ink); margin:0; }

/* otras propiedades */
.related { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:660px){ .related{ grid-template-columns:1fr; } }

/* gancho de planes (oculta precios tras un botón) */
.plans-gate { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(176,131,43,.10), rgba(176,131,43,.04));
  border:1px solid rgba(176,131,43,.30); border-radius:var(--r-lg); padding:24px 26px; }
.plans-gate .pg-copy { display:flex; gap:16px; align-items:center; }
.plans-gate .pg-ic { width:48px; height:48px; border-radius:12px; border:1px solid var(--gold); color:var(--gold-deep); display:grid; place-items:center; flex:none; }
.plans-gate .pg-ic svg { width:24px; height:24px; }
.plans-gate .pg-copy b { display:block; font-family:"Fraunces",serif; font-size:1.15rem; color:var(--ink); }
.plans-gate .pg-copy span { font-size:.9rem; color:var(--muted); max-width:46ch; display:block; margin-top:3px; }
@media (max-width:640px){ .plans-gate .btn { width:100%; } }
.price-link { margin-top:8px; color:var(--gold-deep); font-weight:700; font-size:.82rem; letter-spacing:.02em; transition:color .2s var(--ease); }
.price-link:hover { color:var(--gold); }

/* ventana modal (planes y precios) */
.modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:5vw;
  background:rgba(20,16,10,.6); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease); }
.modal.open { opacity:1; visibility:visible; }
.modal-card { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  max-width:920px; width:100%; max-height:88vh; overflow-y:auto; padding: clamp(26px,4vw,46px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.5); transform:translateY(18px) scale(.985); transition:transform .35s var(--ease); }
.modal.open .modal-card { transform:none; }
.modal-close { position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); background:var(--white); transition:.3s var(--ease); z-index:2; }
.modal-close:hover { border-color:var(--gold); color:var(--gold-deep); }
.modal-close svg { width:18px; height:18px; }