/* ══════════════════════════════════════════════════════════════════
   TU PATRIMONIO — tupatrimonio.mx
   Identidad: papel marfil, tinta cálida, UN acento oliva, serif
   editorial para titulares + sans en versalitas para etiquetas.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#FCFBF7; --superficie:#FFFFFF; --panel:#F5F3EB;
  --ink:#23221D; --soft:#716D60; --line:#E7E3D6; --line-strong:#D8D3C2;
  --acc:#5E6B2F; --acc-press:#4A5525; --acc-soft:#EEEFE0;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--ink)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.versal{font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--soft)}

/* ── Botones ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:16px; border-radius:10px;
  padding:14px 26px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease}
.btn:active{transform:scale(.985)}
.btn-oliva{background:var(--acc); color:#fff}
.btn-oliva:hover{background:var(--acc-press)}
.btn-borde{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-borde:hover{border-color:var(--ink)}
.link-sub{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-strong)}
.link-sub:hover{text-decoration-color:var(--acc)}

/* ── Navegación (pastilla flotante) ── */
.nav{position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:4px; padding:6px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 6px 24px rgba(35,34,29,.06); transition:box-shadow .25s ease}
.nav.scrolled{box-shadow:0 10px 30px rgba(35,34,29,.12)}
.nav a{font-family:var(--sans); font-size:14.5px; font-weight:600; text-decoration:none;
  color:var(--ink); padding:9px 18px; border-radius:999px; white-space:nowrap; transition:background .15s}
.nav a:hover{background:var(--panel)}
.nav a.nav-cta{background:var(--acc); color:#fff}
.nav a.nav-cta:hover{background:var(--acc-press)}
.nav-burger{display:none}

/* ── HERO: bloque marfil izquierda + foto a sangre derecha ── */
.hero{position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(420px,42%) 1fr}
.hero-izq{background:var(--paper); display:flex; flex-direction:column; justify-content:center;
  padding:120px 56px 56px 56px; position:relative; z-index:2}
.hero-brand{position:absolute; top:34px; left:56px}
.hero-brand img{height:78px; width:auto}
.hero h1{font-size:clamp(44px,4.6vw,68px); line-height:1.04; letter-spacing:-.015em;
  font-weight:600; margin-bottom:26px; text-wrap:balance}
.hero-sub{font-size:19px; color:var(--soft); max-width:44ch; margin-bottom:34px}
.hero-form{display:flex; gap:0; max-width:460px; border:1px solid var(--line-strong);
  border-radius:12px; overflow:hidden; background:var(--superficie);
  transition:border-color .2s, box-shadow .2s}
.hero-form:focus-within{border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}
.hero-form input{flex:1; min-width:0; border:0; outline:none; padding:16px 18px;
  font-family:var(--sans); font-size:15.5px; color:var(--ink); background:transparent}
.hero-form input::placeholder{color:var(--soft)}
.hero-form button{border:0; border-radius:0; padding:16px 24px}
.hero-mini{font-family:var(--sans); font-size:13.5px; color:var(--soft); margin-top:14px}
.hero-ver{margin-top:26px}
/* La línea de certeza acompaña al contenido (grupo centrado) en vez de anclarse al
   fondo: en pantallas altas (MacBook) ya no se abre un vacío entre el CTA y la línea. */
.hero-certeza{margin-top:clamp(44px,7vh,84px)}
.hero-certeza .versal{display:block; border-top:1px solid var(--line); padding-top:20px}

.hero-der{position:relative; overflow:hidden; min-height:60vh}
.hero-foto{position:absolute; inset:-6% 0; width:100%; height:112%; object-fit:cover; will-change:transform}
/* Sugerencia de imagen (visible solo si falta el archivo) */
.img-sugerencia{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; background:var(--panel); text-align:center; padding:40px; z-index:1}
.img-sugerencia .versal{color:var(--acc)}
.img-sugerencia p{font-size:15px; color:var(--soft); max-width:46ch}
.img-sugerencia code{font-family:ui-monospace,Consolas,monospace; font-size:13px; background:var(--superficie);
  border:1px solid var(--line); border-radius:6px; padding:2px 10px}

/* Tarjeta flotante del reporte sobre la foto del hero */
.hero-tarjeta{position:absolute; right:6%; bottom:8%; z-index:3; width:250px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:16px; padding:18px 20px; box-shadow:0 18px 50px rgba(35,34,29,.18)}
.hero-tarjeta .ht-titulo{font-family:var(--sans); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--acc); margin-bottom:10px}
.ht-fila{display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-top:1px solid var(--line)}
.ht-fila span{font-family:var(--sans); font-size:12.5px; color:var(--soft)}
.ht-fila b{font-family:var(--sans); font-variant-numeric:tabular-nums; font-size:17px; font-weight:700}
.ht-nota{font-family:var(--sans); font-size:10px; color:var(--soft); margin-top:10px; font-style:italic}

/* ── Secciones ── */
section{padding:96px 0}
.sec-head{max-width:720px; margin-bottom:52px}
.sec-head .versal{display:block; color:var(--acc); margin-bottom:14px}
.sec-head h2{font-size:clamp(30px,3.4vw,44px); line-height:1.12; letter-spacing:-.012em; font-weight:600; text-wrap:balance}
.sec-head p{margin-top:16px; color:var(--soft); font-size:18px; max-width:56ch}

/* Franja de certeza */
.certeza{padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper)}
.certeza .wrap{display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center}
.certeza .versal{color:var(--ink)}
.certeza .versal em{color:var(--acc); font-style:normal}

/* ── La plataforma por dentro: collage editorial (lienzo blanco sobre piedra) ── */
.edit-sec{background:#ABA79A; padding:90px 0}
.edit-sec .sec-head h2{color:#FFFFFF}
.edit-sec .sec-head .versal{color:#F0EEE6}
.edit-sec .sec-head p{color:#E8E5DB}
.edit-card{background:#FFFFFF; border-radius:26px; padding:clamp(28px,4vw,56px);
  box-shadow:0 40px 100px rgba(35,34,29,.22)}
.edit-grid{display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:clamp(24px,3vw,48px)}
.edit-col{display:flex; flex-direction:column}
.edit-img{border-radius:18px; overflow:hidden; background:var(--panel); position:relative}
.edit-img img{width:100%; height:100%; object-fit:cover}
.edit-img .img-sugerencia{position:absolute; padding:20px}
.edit-img .img-sugerencia p{font-size:12.5px}
.edit-alta{aspect-ratio:3/4}
.edit-gigante{height:100%; min-height:560px}
.edit-chica{aspect-ratio:4/3; margin-top:34px}
.edit-col h3{font-family:"Playfair Display",var(--serif); font-size:clamp(27px,2.5vw,36px); line-height:1.04;
  letter-spacing:-.005em; font-weight:700; margin:24px 0 12px; text-wrap:balance; color:#141310}
.edit-col p{font-family:var(--sans); font-size:13px; line-height:1.5; color:#2A2924; margin-bottom:18px; max-width:40ch}
.edit-sec .sec-head h2{font-family:"Playfair Display",var(--serif); font-weight:700}
.pill-ink{display:inline-flex; align-items:center; align-self:flex-start; font-family:var(--sans);
  font-size:14px; font-weight:600; background:var(--ink); color:#fff; text-decoration:none;
  border-radius:12px; padding:11px 22px; transition:background .18s ease, transform .12s ease}
.pill-ink:hover{background:#3a382f}
.pill-ink:active{transform:scale(.985)}

/* ── El reporte que se arma solo (momento 3D) ── */
.reporte-sec{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.reporte-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.reporte-escena{perspective:1200px; display:flex; justify-content:center}
.reporte-card{width:min(400px,100%); background:var(--superficie); border:1px solid var(--line);
  border-radius:20px; padding:30px 32px; box-shadow:0 30px 80px rgba(35,34,29,.14);
  transform-style:preserve-3d; transition:transform .25s ease-out; will-change:transform}
.rc-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.rc-head .versal{color:var(--acc)}
.rc-semana{font-family:var(--sans); font-size:12px; color:var(--soft)}
.rc-kpis{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin:22px 0}
.rc-kpi{border-top:2px solid var(--acc); padding-top:10px}
.rc-kpi b{display:block; font-family:var(--sans); font-variant-numeric:tabular-nums; font-size:30px; font-weight:700; line-height:1.1}
.rc-kpi span{font-family:var(--sans); font-size:11.5px; color:var(--soft); letter-spacing:.04em; text-transform:uppercase}
.rc-spark{margin:8px 0 18px}
.rc-spark path{fill:none; stroke:var(--acc); stroke-width:2.5; stroke-linecap:round}
.rc-spark .spark-area{fill:var(--acc-soft); stroke:none; opacity:0}
.rc-opiniones{border-top:1px solid var(--line); padding-top:16px}
.rc-opiniones .versal{display:block; margin-bottom:10px}
.rc-chip{display:inline-block; font-family:var(--sans); font-size:12.5px; font-weight:600;
  background:var(--acc-soft); color:var(--acc); border-radius:999px; padding:5px 14px; margin:0 6px 8px 0;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
.reporte-card.armado .rc-chip{opacity:1; transform:none}
.rc-nota{font-family:var(--sans); font-size:10.5px; color:var(--soft); font-style:italic; margin-top:14px}

/* Cómo funciona */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.paso{background:var(--superficie); padding:34px 28px}
.paso-num{display:grid; place-items:center; width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--acc); font-weight:600; font-size:17px; margin-bottom:18px}
.paso h3{font-size:19px; font-weight:600; margin-bottom:8px}
.paso p{font-family:var(--sans); font-size:14.5px; color:var(--soft); line-height:1.6}

/* Planes */
.planes{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.plan{background:var(--superficie); border:1px solid var(--line); border-radius:16px; padding:28px 26px;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.plan:hover{transform:translateY(-4px); box-shadow:0 20px 50px rgba(35,34,29,.09)}
.plan.destacado{border-color:var(--acc); position:relative}
.plan.destacado::before{content:"Recomendado"; position:absolute; top:-12px; left:24px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  background:var(--acc); color:#fff; border-radius:999px; padding:4px 14px}
.plan h3{font-size:21px; font-weight:600}
.plan-precio{font-family:var(--sans); font-variant-numeric:tabular-nums; margin:12px 0 4px}
.plan-precio b{font-size:30px; font-weight:700}
.plan-precio span{font-size:13.5px; color:var(--soft)}
.plan-desc{font-family:var(--sans); font-size:13.5px; color:var(--soft); margin-bottom:18px}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:24px}
.plan li{font-family:var(--sans); font-size:13.5px; color:var(--ink); padding-left:22px; position:relative}
.plan li::before{content:""; position:absolute; left:0; top:7px; width:11px; height:5px;
  border-left:1.5px solid var(--acc); border-bottom:1.5px solid var(--acc); transform:rotate(-45deg)}
.plan .btn{margin-top:auto; width:100%}

/* ¿Vendes tu casa? (banda propietario) */
.propietario{position:relative; overflow:hidden}
.prop-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.prop-media{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--panel)}
.prop-media img{width:100%; height:100%; object-fit:cover}
.prop-media .img-sugerencia{position:absolute}

/* FAQ */
.faq{max-width:820px; margin:0 auto}
.faq details{border-top:1px solid var(--line); padding:6px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:18px 4px; font-size:18px; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--sans); font-size:22px; color:var(--acc); font-weight:400;
  transition:transform .2s ease; flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-r{padding:0 4px 20px; color:var(--soft); font-size:16px; max-width:64ch}

/* Cierre */
.cierre{position:relative; overflow:hidden; text-align:center; padding:130px 0}
.cierre-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.cierre-velo{position:absolute; inset:0; background:rgba(252,251,247,.88); z-index:1}
.cierre .wrap{position:relative; z-index:2}
.cierre h2{font-size:clamp(32px,3.8vw,50px); font-weight:600; letter-spacing:-.012em; margin-bottom:30px; text-wrap:balance}
.cierre .btn{margin-top:6px}
.cierre .img-sugerencia{z-index:0}

/* Footer */
footer{border-top:1px solid var(--line-strong); padding:64px 0 44px; background:var(--paper)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px}
.foot-logo img{height:104px; width:auto; margin-bottom:16px}
.foot-frase{font-style:italic; color:var(--soft); font-size:15.5px; max-width:30ch}
.foot-col .versal{display:block; margin-bottom:16px}
.foot-col a{display:block; font-family:var(--sans); font-size:14.5px; color:var(--ink);
  text-decoration:none; padding:5px 0}
.foot-col a:hover{color:var(--acc)}
.foot-base{border-top:1px solid var(--line); padding-top:22px; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:12px; font-family:var(--sans); font-size:12.5px; color:var(--soft)}

/* WhatsApp flotante (se muestra solo si hay número configurado en site.js) */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px;
  border-radius:999px; background:var(--acc); display:none; place-items:center;
  box-shadow:0 12px 32px rgba(35,34,29,.25); transition:transform .15s ease}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:28px; height:28px; fill:#fff}
.wa-float.visible{display:grid}

/* ── Animaciones de aparición ── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.visto{opacity:1; transform:none}
.reveal-d1{transition-delay:.12s} .reveal-d2{transition-delay:.24s} .reveal-d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .rc-chip{opacity:1; transform:none; transition:none}
  .hero-foto{position:absolute; inset:0; height:100%}
}

/* ── Responsivo ── */
@media (max-width:1060px){
  .pasos{grid-template-columns:1fr 1fr}
  .planes{grid-template-columns:1fr 1fr}
  .edit-grid{grid-template-columns:1fr 1fr}
  .edit-centro{grid-column:1 / -1; order:-1}
  .edit-gigante{min-height:380px}
}
@media (max-width:680px){
  .edit-grid{grid-template-columns:1fr}
  .edit-sec{padding:64px 0}
}
@media (max-width:920px){
  .nav{top:0; left:0; right:0; transform:none; border-radius:0; justify-content:space-between; padding:10px 16px}
  .nav .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--superficie); border-bottom:1px solid var(--line); padding:10px 16px 16px}
  .nav.abierta .nav-links{display:flex}
  .nav-links{display:flex; gap:4px}
  .nav-burger{display:grid; place-items:center; width:42px; height:42px; background:none;
    border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:18px; color:var(--ink)}
  .hero{grid-template-columns:1fr; min-height:0}
  .hero-izq{padding:120px 24px 48px; order:2}
  .hero-brand{position:static; margin-bottom:30px}
  .hero-brand img{height:52px}
  .hero-der{order:1; min-height:44vh}
  .hero-tarjeta{right:16px; bottom:16px; width:210px}
  .hero-certeza{margin-top:38px}
  .modulo{grid-template-columns:1fr; gap:28px; padding:40px 0}
  .modulo:nth-child(even) .mod-media{order:0}
  .reporte-grid,.prop-grid{grid-template-columns:1fr; gap:36px}
  section{padding:64px 0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .pasos{grid-template-columns:1fr}
  .planes{grid-template-columns:1fr}
  .hero-form{flex-direction:column; border:0; background:none; box-shadow:none; gap:12px}
  .hero-form:focus-within{box-shadow:none}
  .hero-form input{border:1px solid var(--line-strong); border-radius:12px; background:var(--superficie); padding:15px 18px}
  .hero-form button{border-radius:10px; width:100%}
  .foot-grid{grid-template-columns:1fr}
}