/* ============================================================
   TAO MÉXICO — PÁGINAS INTERIORES
   Componentes que comparten nosotros, propiedades, terrenos,
   avances, brokers, faqs, blog y contacto.
   El sistema base está en main.css.
   ============================================================ */

/* ============================================================
   HERO DE PÁGINA
   Media pantalla, foto al fondo con velo, y el título montado
   sobre la línea de base como en la portada.
   ============================================================ */
.phero{
  position:relative;min-height:clamp(440px,64svh,680px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink-2);
  padding:calc(clamp(90px,12vh,150px) + 40px) var(--pad) clamp(46px,7vh,86px) calc(var(--rail) + var(--pad));
}
.phero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.06);will-change:transform;
  filter:grayscale(.15) contrast(1.03) brightness(.82);
}
.phero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(27,25,22,.88) 0%,rgba(27,25,22,.34) 34%,rgba(27,25,22,.86) 82%,var(--ink) 100%),
    radial-gradient(90% 70% at 8% 82%,rgba(27,25,22,.78),transparent 64%);
}
.phero-in{position:relative;z-index:2;width:100%;max-width:1180px}
.phero .eyebrow{margin-bottom:20px}
.phero .d1{max-width:15ch}
.phero .lede{margin:26px 0 0;color:var(--shell);opacity:.9;max-width:52ch}
.phero-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,4vh,40px)}
/* variante sin fotografía: solo tipografía sobre tinta */
.phero.plain{min-height:clamp(360px,48svh,520px);background:var(--ink)}
.phero.plain::after{background:radial-gradient(80% 90% at 12% 70%,rgba(188,171,124,.10),transparent 62%)}
.phero.plain .phero-bg{display:none}
/* enso muy tenue como marca de agua del hero tipográfico */
.phero.plain .phero-enso{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(520px,46vw);opacity:.06;z-index:1;pointer-events:none
}
@media(max-width:900px){.phero.plain .phero-enso{opacity:.045;right:-22%}}

/* ============================================================
   BANDA DE CIFRAS — 19+ / 23+ / 2,500+
   ============================================================ */
.band{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-ink);border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
}
.band>div{background:var(--ink);padding:clamp(28px,4vw,52px) clamp(18px,3vw,40px);display:grid;gap:6px;align-content:start}
.band b{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,5.4vw,74px);line-height:1;color:var(--gold)}
.band small{font-size:12.5px;line-height:1.55;color:var(--text-on-ink-dim);max-width:30ch}
.paper .band,.band.on-paper{background:var(--line-paper);border-color:var(--line-paper)}
.band.on-paper>div{background:var(--paper)}
.band.on-paper b{color:var(--text-on-paper)}
.band.on-paper small{color:var(--text-on-paper-dim)}
@media(max-width:760px){.band{grid-template-columns:1fr}}

/* ============================================================
   FILTROS EN CÁPSULA
   ============================================================ */
.filters{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;align-items:flex-end;
  margin-bottom:clamp(26px,3.4vw,42px);padding-bottom:22px;border-bottom:1px solid var(--line-ink)}
.filter-group{display:grid;gap:10px}
.filter-group>span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.filters .count{margin-left:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-on-ink-dim);padding-bottom:2px}
@media(max-width:700px){.filters .count{margin-left:0;width:100%}}

/* ============================================================
   REJILLA DE PROPIEDADES
   ============================================================ */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.pcard{
  position:relative;background:var(--ink-2);border:0;padding:0;text-align:left;cursor:pointer;
  overflow:hidden;display:block;width:100%;
  transition:transform .6s var(--e-out),opacity .45s var(--e-out)
}
.pcard.hide{display:none}
.pcard figure{margin:0;overflow:hidden;position:relative;background:var(--ink-3)}
.pcard img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:brightness(.9);
  transition:transform 1.2s var(--e-out),filter .6s}
.pcard:hover img{transform:scale(1.05);filter:brightness(1.02)}
.pcard::after{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color .5s}
.pcard:hover::after{border-color:rgba(188,171,124,.45)}
.pcard .veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,25,22,.12) 0%,rgba(27,25,22,0) 38%,rgba(27,25,22,.9) 100%)
}
.pcard .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,24px);display:grid;gap:6px;z-index:2}
.pcard .loc{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pcard .nm{font-family:var(--f-display);font-size:clamp(19px,1.9vw,25px);line-height:1.15;color:var(--paper)}
.pcard .pr{font-size:12.5px;color:var(--shell);opacity:.78;font-variant-numeric:tabular-nums}
.pcard .flag{
  position:absolute;top:14px;left:14px;z-index:2;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 10px;background:rgba(27,25,22,.74);border:1px solid var(--line-ink);color:var(--shell);
  backdrop-filter:blur(6px)
}
.pcard .go{
  position:absolute;right:14px;bottom:14px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-ink);display:grid;place-items:center;color:var(--gold);
  background:rgba(27,25,22,.5);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--e-out),transform .45s var(--e-out),background .35s
}
.pcard:hover .go{opacity:1;transform:none}
.pcard.sold img{filter:brightness(.7) saturate(.55)}
.pcard.sold:hover img{filter:brightness(.86) saturate(.75)}
.empty-note{padding:clamp(40px,6vw,80px) 0;color:var(--text-on-ink-dim);font-weight:300;text-align:center;border:1px dashed var(--line-ink)}
@media(max-width:1000px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr}}

/* ============================================================
   BLOQUE PARTIDO — texto y media a dos columnas
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.split.wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split figure{margin:0;overflow:hidden;background:var(--ink-2)}
.split figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split .txt>*+*{margin-top:18px}
@media(max-width:880px){.split,.split.wide-left{grid-template-columns:1fr}}

/* ============================================================
   CITA
   ============================================================ */
.pull{
  position:relative;max-width:22ch;margin:0 auto;text-align:center;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(28px,4.4vw,58px);line-height:1.14;letter-spacing:-.01em;
}
.pull::before{
  content:"";display:block;width:34px;height:1px;background:var(--gold);
  margin:0 auto clamp(26px,4vw,44px)
}
.pull-wrap{
  position:relative;overflow:hidden;
  /* el enso volumétrico necesita sitio: sin esto se sale de la sección */
  min-height:clamp(480px,68svh,720px);
  display:grid;align-content:center;
}
.pull-enso{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,72vw);opacity:.07;pointer-events:none
}

/* ============================================================
   PRINCIPIOS / RAZONES — tarjetas numeradas
   ============================================================ */
.vcards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-ink);border:1px solid var(--line-ink)}
.vcard{background:var(--ink);padding:clamp(24px,2.8vw,38px);display:grid;gap:12px;align-content:start;position:relative;transition:background .5s}
.vcard:hover{background:var(--ink-2)}
.vcard .k{font-size:10px;letter-spacing:.22em;color:var(--gold);font-variant-numeric:tabular-nums}
.vcard .n{font-family:var(--f-display);font-size:clamp(20px,2vw,26px);line-height:1.2;color:var(--paper)}
.vcard p{margin:0;font-size:14px;font-weight:300;line-height:1.62;color:var(--text-on-ink-dim)}
.vcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out)}
.vcard:hover::after{transform:scaleX(1)}
.paper .vcards{background:var(--line-paper);border-color:var(--line-paper)}
.paper .vcard{background:var(--paper)}
.paper .vcard:hover{background:var(--paper-2)}
.paper .vcard .k{color:var(--sage)}
.paper .vcard .n{color:var(--text-on-paper)}
.paper .vcard p{color:var(--text-on-paper-dim)}
.paper .vcard::after{background:var(--sage)}
@media(max-width:1040px){.vcards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vcards{grid-template-columns:1fr}}

/* ============================================================
   PASOS NUMERADOS GRANDES
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:clamp(20px,3vw,44px);margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;padding-top:26px;border-top:1px solid var(--line-ink)}
.steps li::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;top:-.62em;left:0;background:var(--ink);padding-right:12px;
  font-family:var(--f-display);font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--gold);opacity:.9
}
.steps .n{display:block;font-family:var(--f-display);font-size:clamp(19px,1.8vw,24px);line-height:1.2;margin:22px 0 8px;color:var(--paper)}
.steps p{margin:0;font-size:14px;font-weight:300;line-height:1.62;color:var(--text-on-ink-dim)}
.paper .steps li{border-top-color:var(--line-paper)}
.paper .steps li::before{background:var(--paper);color:var(--sage)}
.paper .steps .n{color:var(--text-on-paper)}
.paper .steps p{color:var(--text-on-paper-dim)}
.ink-2 .steps li::before{background:var(--ink-2)}

/* ============================================================
   LÍNEA DE TIEMPO
   ============================================================ */
.tl{margin:0;padding:0;list-style:none;position:relative}
.tl::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line-ink)}
.tl li{position:relative;padding:0 0 clamp(30px,4vw,48px) clamp(28px,4vw,56px)}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:"";position:absolute;left:-4px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:1px solid var(--gold);transition:background .5s
}
.tl li.in::before{background:var(--gold)}
.tl .y{font-size:11px;letter-spacing:.22em;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:600}
.tl .n{display:block;font-family:var(--f-display);font-size:clamp(21px,2.2vw,30px);line-height:1.2;margin:8px 0 8px;color:var(--paper)}
.tl p{margin:0;font-size:14.5px;font-weight:300;line-height:1.65;color:var(--text-on-ink-dim);max-width:52ch}

/* ============================================================
   ACORDEÓN — preguntas frecuentes
   ============================================================ */
.acc{border-top:1px solid var(--line-ink)}
.acc details{border-bottom:1px solid var(--line-ink)}
.acc summary{
  list-style:none;cursor:pointer;display:flex;gap:20px;align-items:flex-start;
  padding:clamp(18px,2.2vw,26px) 0;transition:color .35s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary .q{
  font-family:var(--f-display);font-size:clamp(18px,1.9vw,25px);line-height:1.3;
  color:var(--text-on-ink);flex:1 1 auto;transition:color .35s;text-wrap:pretty
}
.acc summary:hover .q,.acc details[open] summary .q{color:var(--gold)}
.acc summary .k{font-size:10px;letter-spacing:.2em;color:var(--gold);font-variant-numeric:tabular-nums;padding-top:.55em;flex:0 0 auto}
.acc .sign{flex:0 0 auto;width:16px;height:16px;position:relative;margin-top:.5em}
.acc .sign::before,.acc .sign::after{
  content:"";position:absolute;left:0;top:50%;width:16px;height:1px;background:var(--gold);
  transition:transform .45s var(--e-out)
}
.acc .sign::after{transform:rotate(90deg)}
.acc details[open] .sign::after{transform:rotate(0)}
.acc .a{
  overflow:hidden;font-size:15px;font-weight:300;line-height:1.75;color:var(--text-on-ink-dim);
  max-width:74ch;padding:0 0 clamp(20px,2.4vw,30px) 0;margin:0
}
.acc details[open] .a{animation:accIn .55s var(--e-out) both}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}}
.paper .acc,.paper .acc details{border-color:var(--line-paper)}
.paper .acc summary .q{color:var(--text-on-paper)}
.paper .acc summary:hover .q,.paper .acc details[open] summary .q{color:var(--sage)}
.paper .acc .k,.paper .acc .sign::before,.paper .acc .sign::after{color:var(--sage);background:var(--sage)}
.paper .acc .a{color:var(--text-on-paper-dim)}
@media(max-width:620px){.acc summary{gap:14px}.acc summary .k{display:none}}

/* ============================================================
   COMISIONES — cifra grande
   ============================================================ */
.commish{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-ink);border:1px solid var(--line-ink)}
.commish>div{background:var(--ink-2);padding:clamp(30px,4.5vw,64px);display:grid;gap:10px;align-content:center;justify-items:start;position:relative;overflow:hidden}
.commish b{font-family:var(--f-display);font-weight:400;font-size:clamp(64px,11vw,150px);line-height:.9;color:var(--gold)}
.commish span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-on-ink-dim)}
.commish>div::after{
  content:"";position:absolute;right:-12%;bottom:-40%;width:60%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line-ink);pointer-events:none
}
@media(max-width:700px){.commish{grid-template-columns:1fr}}

/* ============================================================
   TERRENOS — ubicaciones por estado
   ============================================================ */
.lands{display:grid;gap:1px;background:var(--line-ink);border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink)}
.lstate{background:var(--ink);display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,3fr);gap:clamp(18px,3vw,48px);
  padding:clamp(24px,3vw,42px) 0;align-items:start}
.lstate>.hd{display:grid;gap:6px;align-content:start}
.lstate .code{font-size:10px;letter-spacing:.24em;color:var(--gold);font-weight:600}
.lstate .st{font-family:var(--f-display);font-size:clamp(22px,2.4vw,32px);line-height:1.12;color:var(--paper)}
/* Sin gap: las líneas las dibuja cada celda. Con gap y fondo de línea en el
   contenedor, un estado con menos de tres ubicaciones dejaba huecos pintados. */
.lots{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--ink)}
.lot{background:var(--ink);padding:clamp(16px,1.8vw,24px);display:grid;gap:6px;align-content:start;
  border:0;border-right:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
  text-align:left;cursor:pointer;transition:background .45s;position:relative}
.lot:hover{background:var(--ink-2)}
.lot .n{font-family:var(--f-display);font-size:clamp(17px,1.6vw,21px);color:var(--paper);line-height:1.2}
.lot p{margin:0;font-size:13px;font-weight:300;line-height:1.55;color:var(--text-on-ink-dim)}
.lot .ask{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--e-out),transform .4s var(--e-out);margin-top:4px}
.lot:hover .ask,.lot:focus-visible .ask{opacity:1;transform:none}
@media(max-width:900px){.lstate{grid-template-columns:1fr;gap:18px}.lots{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lots{grid-template-columns:1fr}}

/* ============================================================
   BLOG
   ============================================================ */
.feat{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);
  align-items:end;padding-bottom:clamp(34px,4.5vw,58px);border-bottom:1px solid var(--line-ink)
}
.feat .tagrow{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.feat .badge{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:5px 11px}
.feat time,.post time{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-ink-dim);font-variant-numeric:tabular-nums}
.feat h2{margin:0}
.feat p{margin:20px 0 0}
@media(max-width:880px){.feat{grid-template-columns:1fr;align-items:start}}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--ink);
  border-top:1px solid var(--line-ink)}
.post{
  background:var(--ink);padding:clamp(26px,3vw,40px);display:grid;gap:12px;align-content:start;
  border-right:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);
  position:relative;transition:background .5s;min-height:260px
}
.post:hover{background:var(--ink-2)}
.post .cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.post .h{font-family:var(--f-display);font-size:clamp(19px,1.8vw,24px);line-height:1.22;color:var(--paper);text-wrap:pretty}
.post p{margin:0;font-size:13.5px;font-weight:300;line-height:1.6;color:var(--text-on-ink-dim)}
.post .arw{margin-top:auto;padding-top:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.post:hover .arw,.post:focus-visible .arw{opacity:1;transform:none}
@media(max-width:1000px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.posts{grid-template-columns:1fr}}

/* ============================================================
   BLOQUE DE NOTA / AVISO
   ============================================================ */
.note{
  border-left:2px solid var(--gold);padding:4px 0 4px 22px;
  font-size:14px;font-weight:300;line-height:1.7;color:var(--text-on-ink-dim);max-width:64ch
}
.paper .note{border-left-color:var(--sage);color:var(--text-on-paper-dim)}

/* la cita necesita quedar por encima del enso */
.pull{position:relative;z-index:2}