/* Caso 3Capital (inc/caso-3capital.php), 6/11/26; ampliado el 8/11/26. Prefijo tc-. Motor común: ma-caso.css.
   La marca: el símbolo se dibuja torre a torre (caso-3capital.js). La ventana: la portada de un dossier entra por el
   hueco del símbolo y se abre hasta enseñar la página entera. La web, en un navegador y en un iPhone que bajan solos.
   3K Homes: la casa se dibuja de un solo trazo al entrar. Los aniversarios: un save the date por año y la página toma
   su color (escena del motor). La presentación corporativa, en una tira que corre sola. */

.tc-hero-k{margin:0 0 10px;font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.tc-hero .cx-hero-f img{object-position:62% 50%}
/* El título se retira mientras la portada se abre: el logotipo de la portada queda limpio. */
html.cx-js .tc-hero .cx-hero-top{opacity:clamp(0,calc(1 - var(--q,0) * 2.2),1)}

/* Capítulos */
.tc-ch{padding:clamp(120px,18svh,210px) 0 clamp(60px,8vw,110px)}
.tc-h2{font-size:clamp(32px,3.6vw,58px)}

/* ---------- La marca: tres torres que suben una a una ---------- */
.tc-marca{height:260svh}
.tc-marca-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.tc-marca-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px;width:min(90%,var(--maxw))}
.tc-marca-x .cx-p{margin-top:clamp(18px,2vw,26px)}
.tc-marca-v{display:flex;justify-content:center;align-items:center}
.tc-logo{display:block;height:auto;color:var(--cx-fg);overflow:visible}
.tc-logo--xl{width:min(100%,calc(100svh - 250px),620px)}
.tc-wm{opacity:var(--wm,1);transform:translateY(calc((1 - var(--wm,1)) * 10px));transform-box:fill-box}
.tc-wm2{opacity:calc(var(--wm,1) * .9)}
html:not(.cx-js) .tc-marca{height:auto;padding:140px 0}
html:not(.cx-js) .tc-marca-st{position:static;height:auto}

/* ---------- La ventana: la portada entra por el símbolo y se abre ---------- */
.tc-ven{height:240svh}
.tc-ven-st{position:sticky;top:0;height:100svh;overflow:hidden}
.tc-ven-f{position:absolute;inset:0;margin:0;overflow:hidden}
.tc-ven-f picture{display:block;width:100%;height:100%}
.tc-ven-f img{display:block;width:100%;height:100%;object-fit:cover;object-position:64.2% 46%;transform-origin:64.2% 46%;transform:scale(calc(2.05 - 1.05 * var(--z,1)))}
.tc-ven-st::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(27,32,48,.88),rgba(27,32,48,0));opacity:var(--t,1)}
.tc-ven-x{position:absolute;left:0;right:0;bottom:clamp(40px,9svh,100px);z-index:2;opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 24px))}
.tc-ven-x .cx-h{color:#F6F5F3;max-width:13em}
.tc-ven-x .cx-p{margin-top:clamp(14px,1.6vw,22px);color:rgba(246,245,243,.82)}
html:not(.cx-js) .tc-ven{height:auto}
html:not(.cx-js) .tc-ven-st{position:relative;height:auto;aspect-ratio:1.414}

/* ---------- La web: navegador e iPhone que bajan solos ---------- */
.tc-web-g{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);column-gap:clamp(24px,4vw,70px);align-items:center;margin-top:clamp(60px,8vw,110px)}
.tc-scr-d .cx-scr-w{aspect-ratio:16/10}
.tc-url{margin-left:12px;font-family:var(--f-label);font-size:11px;letter-spacing:.06em;color:rgba(31,35,34,.48)}
.tc-ph{position:relative;aspect-ratio:9/19.5;border-radius:clamp(30px,3.1vw,46px);padding:clamp(6px,.62vw,10px);background:#15171c;box-shadow:0 34px 90px rgba(31,35,34,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
.tc-ph-w{position:relative;height:100%;border-radius:clamp(24px,2.5vw,37px);overflow:hidden;background:#5d6577}
.tc-ph-i{display:block;width:100%;height:auto;transform:translate3d(0,calc(var(--vp,0) * var(--sh,0px) * -1),0);will-change:transform}

/* ---------- Los dossiers ---------- */
.tc-flow{background:#222A3C}
.tc-mesa{margin-top:clamp(40px,5vw,70px)}
.tc-caja{margin-bottom:0}
.tc-caja img{object-position:52% 50%}

/* ---------- El aniversario ---------- */
.tc-ani-g{margin-top:clamp(60px,8vw,110px);align-items:end}
.tc-jardin{margin-bottom:0}

/* ---------- 3K Homes: la casa de un solo trazo ---------- */
.tc-3k-l{display:flex;justify-content:center;margin:clamp(70px,9vw,130px) 0 0}
.tc-3k-s{display:block;width:min(78%,560px);height:auto;overflow:visible;color:#9F192C}
.tc-3k-h{fill:none;stroke:currentColor;stroke-width:7;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:1;stroke-dashoffset:0}
.tc-3k-w{fill:currentColor;transform-box:fill-box}
html.cx-js .tc-3k-l[data-cx-rv]{transform:none}
html.cx-js .tc-3k-l .tc-3k-h{stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1) .2s}
html.cx-js .tc-3k-l.in .tc-3k-h{stroke-dashoffset:0}
html.cx-js .tc-3k-l .tc-3k-w{opacity:0;transform:translateY(12px);transition:opacity .9s ease 2.1s,transform .9s cubic-bezier(.2,.7,.2,1) 2.1s}
html.cx-js .tc-3k-l.in .tc-3k-w{opacity:1;transform:none}

/* ---------- Los dossiers: tres portadas a la misma altura ---------- */
.tc-cov-w{margin-top:clamp(90px,12vw,160px)}
.tc-cov{display:flex;align-items:flex-end;gap:clamp(14px,2vw,32px);margin-top:clamp(50px,6vw,90px)}
.tc-cov-f{flex-grow:calc(var(--ar));flex-shrink:1;flex-basis:0;min-width:0;margin:0}
.tc-cov-i{aspect-ratio:var(--ar);overflow:hidden;border-radius:4px;background:#222A3C;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.tc-cov-i img{display:block;width:100%;height:100%;object-fit:cover}
.tc-cov figcaption{margin-top:16px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--cx-fg3)}
.tc-cov figcaption b{margin-right:10px;font-weight:inherit;color:var(--cx-fg)}
.tc-cov-w+.wrap{margin-top:clamp(70px,9vw,120px)}

/* ---------- La presentación corporativa, en una tira ---------- */
.tc-band{--tc-bh:clamp(220px,40svh,460px);margin-top:clamp(56px,7vw,100px)}
.tc-band .cx-band-f{height:var(--tc-bh);width:calc(var(--tc-bh) * 16 / 9);aspect-ratio:auto;border-radius:10px;background:#2B3142;box-shadow:0 22px 50px rgba(31,35,34,.16)}
.tc-band .cx-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.tc-band-h{margin:22px 0 0;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}

/* ---------- Los aniversarios: un save the date por año ---------- */
.tc-is{height:calc(var(--n,4) * 80svh + 100svh)}
.tc-is-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.tc-is-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}
.tc-is-k{margin:0 0 clamp(8px,1.4svh,16px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.tc-is-w{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(72px,12vw,200px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--cx-fg)}
.tc-is-w .cx-dom-a{padding-bottom:.1em}
.tc-is-w em{display:block;margin-top:clamp(12px,1.6vw,22px);font-style:normal;font-family:var(--f-label);font-size:12px;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;color:var(--cx-fg2)}
.tc-is-v{position:relative;justify-self:end;aspect-ratio:1127/2008;height:min(calc(100svh - 170px),820px)}
.tc-is .cx-sm-f{border-radius:14px;box-shadow:0 34px 80px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.14);background:#111}
.tc-is .cx-sm-f img{display:block;width:100%;height:100%;object-fit:cover}
html:not(.cx-js) .tc-is{height:auto;padding:100px 0}
html:not(.cx-js) .tc-is-st{position:static;height:auto}
html:not(.cx-js) .tc-is-w .cx-dom-a span{transform:none;position:static}
html:not(.cx-js) .tc-is-w .cx-dom-a span:not(:first-child){display:none}
html:not(.cx-js) .tc-is-v{height:auto;aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html:not(.cx-js) .tc-is .cx-sm-f{position:relative;opacity:1;transform:none;aspect-ratio:1127/2008}

/* ---------- Y además ---------- */
.tc-mas-g{margin-top:clamp(60px,8vw,110px);align-items:end}
.tc-mas-l{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;border-top:1px solid var(--cx-line)}
.tc-mas-l li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--cx-line);font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.25vw,19px);line-height:1.4;color:var(--cx-fg)}
.tc-mas-l li span+span{flex:0 0 auto;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}

/* ---------- Cierre ---------- */
.tc-fin-l{width:clamp(96px,10vw,150px);margin:0 0 clamp(30px,4vw,56px)}
.tc-fin-l .tc-logo{width:100%}

@media (max-width:900px){
  .tc-marca-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,4svh,40px);padding-top:71px}
  .tc-marca-x .cx-h{font-size:clamp(34px,9vw,52px)}
  .tc-marca-x .cx-p{margin-top:12px;font-size:15px;line-height:1.55}
  .tc-marca-x .cx-p+.cx-p{display:none}
  .tc-logo--xl{width:min(62vw,calc(100svh - 470px),420px)}
  .tc-web-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,8vw,60px)}
  .tc-scr-m{justify-self:center;width:min(62vw,300px)}
  .tc-is-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(14px,2.6svh,26px);align-content:center;padding-top:71px}
  .tc-is-v{justify-self:center;height:min(calc(100svh - 300px),600px)}
  .tc-is-w{font-size:clamp(56px,17vw,96px)}
  .tc-is-w em{margin-top:8px}
}
@media (max-width:760px){
  .tc-d{display:none}
  .tc-m{height:auto;aspect-ratio:4/5}
  .tc-ven-f{inset:auto;left:50%;top:44%;width:min(92vw,calc((100svh - 280px) * .8));aspect-ratio:4/5;transform:translate(-50%,-50%);border-radius:18px}
  .tc-ven-f img{object-position:50% 46%;transform-origin:50% 46%;transform:scale(calc(1.75 - .75 * var(--z,1)))}
  .tc-ven-st::after{display:none}
  .tc-ven-x{bottom:clamp(22px,4svh,40px)}
  .tc-ven-x .cx-h{font-size:clamp(28px,7.6vw,40px);color:var(--cx-fg)}
  .tc-ven-x .cx-p{font-size:15px;color:var(--cx-fg2)}
  html:not(.cx-js) .tc-ven-st{aspect-ratio:auto;padding:40px 0 140px}
  html:not(.cx-js) .tc-ven-f{position:relative;left:auto;top:auto;transform:none;margin:0 auto}
  .tc-cov{flex-wrap:wrap;row-gap:34px}
  .tc-cov-f{flex:1 1 100%}
  .tc-cov-f:last-child{flex:0 1 72%;margin:0 auto}
  .tc-band{--tc-bh:clamp(150px,28svh,230px)}
  .tc-3k-s{width:min(92%,440px)}
  .tc-mas-l li{flex-direction:column;gap:4px}
}
@media (min-width:761px){.tc-m{display:none}}
@media (prefers-reduced-motion:reduce){
  .tc-ven-f img{transform:none}
  .tc-ph-i{transform:none}
  .tc-is .cx-sm-f{transition:none}
  html.cx-js .tc-3k-l .tc-3k-h,html.cx-js .tc-3k-l .tc-3k-w{transition:none}
}