/* ==========================================================================
   Carpintek · «Tres divisiones» y «Un proyecto» (home, después de Proyectos)
   Mismo lenguaje que Proyectos: superficie y colores --pf-* (claro en Residencial, oscuro en Business), cabecera pf__* de portfolio.css,
   rayado y filetes de champagne.
   · .dv → tres filas (foto 3:2 + texto) que alternan de lado; la foto de dos de ellas cambia con el modo.
   · .tx → banda a sangre con la foto y un panel de cristal (el del sub-nav del hero) con los tres casos.
   ========================================================================== */

/* Capas de foto por modo (.dv y .tx): la entrante se funde por encima mientras la saliente espera; luego se oculta sin salto (como en el hero) */
.dv__media picture[data-mode],.tx__media picture[data-mode]{z-index:1;opacity:0;transition:opacity 0s linear 1.5s}
html[data-mode="residencial"] :is(.dv__media,.tx__media) picture[data-mode="residencial"],
html[data-mode="business"] :is(.dv__media,.tx__media) picture[data-mode="business"]{z-index:2;opacity:1;transition:opacity 1.4s var(--ease-io)}

/* ---------- Tres divisiones ---------- */
.dv{position:relative;padding:0 0 clamp(5.5rem,13vh,10rem);background:var(--pf-bg);color:var(--pf-fg)}
.dv__inner{width:calc(100% - 2 * var(--gutter));max-width:140rem;margin-inline:auto}
/* Filete que abre el capítulo: comparte superficie con Proyectos */
.dv__inner::before{content:"";display:block;height:1px;margin-bottom:clamp(3.5rem,9vh,6.5rem);background:var(--pf-line)}
.dv .pf__title span,.tx__title span{display:block}

.dv__list{display:grid;gap:clamp(4.5rem,11vh,8.5rem)}
.dv__row{display:grid;gap:1.75rem}
.dv__media{position:relative;aspect-ratio:3 / 2;overflow:hidden;background:var(--pf-line)}
.dv__media picture{position:absolute;inset:0;display:block;background:var(--c,#8b8378)}
.dv__media img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1)}

.dv__txt{display:grid;align-content:center;justify-items:start}
.dv__num{display:flex;align-items:center;gap:1.1rem;width:100%;margin:0 0 1.15rem;font:400 clamp(2.6rem,1.4rem + 3vw,4.4rem)/1 var(--serif);letter-spacing:-.02em;color:var(--pf-accent)}
.dv__num::after{content:"";flex:1;height:1px;background:var(--pf-line)}
.dv__name{margin:0 0 .75rem;font:400 clamp(1.9rem,1.1rem + 2.2vw,3rem)/1.06 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.dv__tag{max-width:36ch;margin:0 0 .8rem;font:400 clamp(1.02rem,.96rem + .34vw,1.2rem)/1.42 var(--sans);letter-spacing:.005em;text-wrap:balance}
.dv__lead{max-width:42ch;margin:0 0 1.5rem;font:400 .92rem/1.55 var(--sans);letter-spacing:.005em;color:var(--pf-soft);text-wrap:pretty}
.dv__spec{width:100%;margin:0;border-top:1px solid var(--pf-line)}
.dv__spec>div{display:grid;gap:.4rem;padding:.9rem 0;border-bottom:1px solid var(--pf-line)}
.dv__spec dt{font:500 .62rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pf-accent)}
.dv__spec dd{margin:0;font:400 .88rem/1.5 var(--sans);letter-spacing:.005em;color:var(--pf-soft)}

@media (min-width:900px){
  /* La columna de texto mide lo mismo que la del hero y la de Proyectos (33 vw): el texto cae siempre sobre el mismo eje */
  .dv__row{grid-template-columns:minmax(0,1fr) clamp(21rem,33vw,44rem);column-gap:clamp(2.5rem,6vw,7rem);align-items:center}
  .dv__row:nth-child(even){grid-template-columns:clamp(21rem,33vw,44rem) minmax(0,1fr)}
  .dv__row:nth-child(even) .dv__media{order:2}
}
@media (hover:hover){
  .dv__media img{transition:transform 1.8s var(--ease)}
  .dv__row:hover .dv__media img{transform:scale(1.03)}
}

/* Aparición al hacer scroll: solo si el script está activo (data-reveal). La transición vive en el estado final («in»):
   pasar a «pending» es instantáneo (sin parpadeo) y pasar a «in» anima. */
.dv__txt>:nth-child(1){--k:0}.dv__txt>:nth-child(2){--k:1}.dv__txt>:nth-child(3){--k:2}
.dv__txt>:nth-child(4){--k:3}.dv__txt>:nth-child(5){--k:4}.dv__txt>:nth-child(6){--k:5}
.dv__row[data-reveal="pending"] .dv__media{clip-path:inset(0 0 100% 0)}
.dv__row[data-reveal="pending"] .dv__media img{transform:scale(1.14)}
.dv__row[data-reveal="pending"] .dv__txt>*{opacity:0;transform:translateY(1.25rem)}
.dv__row[data-reveal="in"] .dv__media{clip-path:inset(0);transition:clip-path 1.6s var(--ease-io)}
.dv__row[data-reveal="in"] .dv__media img{transition:transform 2.4s var(--ease)}
.dv__row[data-reveal="in"] .dv__txt>*{transition:opacity 1.1s var(--ease) calc(var(--k,0) * 90ms + .3s),transform 1.3s var(--ease) calc(var(--k,0) * 90ms + .3s)}
.dv .pf__head[data-reveal="pending"]>*{opacity:0;transform:translateY(1.25rem)}
.dv .pf__head[data-reveal="in"]>*{transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.dv .pf__head[data-reveal="in"] .pf__title{transition-delay:.12s}
.dv .pf__head[data-reveal="in"] .pf__side{transition-delay:.26s}

/* ---------- Un proyecto. Toda la capacidad Carpintek. ---------- */
.tx{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(100vh,64rem);min-height:min(100svh,64rem);padding:clamp(10rem,32vh,18rem) 0 clamp(1.5rem,4.5vh,3.25rem);background:var(--pf-bg);color:var(--cell-fg);overflow:hidden;overflow:clip}
.tx__media{position:absolute;inset:0;z-index:-2}
.tx__media picture{position:absolute;inset:0;display:block;background:var(--c,#2a2520)}
.tx__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 45%);transform:scale(1)}
/* La foto emerge del fondo de la página por arriba y vuelve a él por abajo: la misma técnica del pie del hero */
.tx::before,.tx::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
.tx::before{top:0;height:clamp(7rem,24vh,15rem);background:linear-gradient(180deg,var(--pf-bg),transparent)}
.tx::after{bottom:0;height:calc(clamp(1.5rem,4.5vh,3.25rem) + 1.5rem);background:linear-gradient(0deg,var(--pf-bg),transparent)}
.tx__inner{width:calc(100% - 2 * var(--gutter));max-width:140rem;margin-inline:auto}

/* Panel de cristal: el material del sub-nav del hero (--g-bd, --g-hi, --bf-*). --tx-g1 y --tx-g2 son sus --g1 y --g2, con Business más cerrado (cae sobre lo más claro de la foto) */
.tx__panel{position:relative;border:1px solid var(--g-bd);border-radius:6px;overflow:hidden;color:var(--cell-fg);background:linear-gradient(180deg,var(--tx-g1) 0%,var(--tx-g2) 100%);-webkit-backdrop-filter:blur(24px) saturate(var(--bf-s)) brightness(var(--bf-b));backdrop-filter:blur(24px) saturate(var(--bf-s)) brightness(var(--bf-b));box-shadow:inset 0 1px 0 var(--g-hi),0 30px 70px -28px rgba(15,9,3,.7)}
.tx__panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 8px);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);mask-image:linear-gradient(180deg,#000 0%,transparent 88%)}
.tx__panel>*{position:relative;z-index:1}
.tx__head{display:grid;gap:1rem 3rem;padding:clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,2.6vw,2.4rem);border-bottom:1px solid rgba(255,255,255,.18)}
.tx__title{margin:0;font:400 clamp(1.9rem,1rem + 2.8vw,3.2rem)/1.05 var(--serif);letter-spacing:-.02em}
.tx__intro{max-width:36rem;margin:0;font:400 .95rem/1.55 var(--sans);letter-spacing:.005em;color:rgba(252,251,248,.92);text-wrap:pretty}
.tx__cases{display:grid}
.tx__case{display:grid;gap:.9rem;align-content:start;padding:1.25rem clamp(1.2rem,2.6vw,2.4rem) 1.45rem}
.tx__case+.tx__case{border-top:1px solid rgba(255,255,255,.18)}
.tx__case-name{margin:0;font:500 clamp(1.3rem,1rem + .9vw,1.8rem)/1.1 var(--serif);letter-spacing:-.005em}
.tx__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.tx__chips li{padding:.45rem .8rem;border:1px solid rgba(252,251,248,.5);border-radius:999px;font:500 .6rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cell-fg)}
.tx__chips li:not(.is-main)::before{content:"+ ";opacity:.75}
.tx__chips li.is-main{background:var(--champagne);border-color:var(--champagne);color:var(--ink)}
.tx__case-txt{max-width:38ch;margin:0;font:400 .86rem/1.5 var(--sans);letter-spacing:.005em;color:rgba(252,251,248,.9)}

@media (min-width:900px){
  .tx__head{grid-template-columns:minmax(0,1fr) minmax(0,clamp(21rem,38vw,34rem));align-items:end}
  .tx__cases{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tx__case+.tx__case{border-top:0;border-left:1px solid rgba(255,255,255,.18)}
}
/* Portátiles bajos: titular algo menor para que quepa en dos líneas y la foto siga viéndose sobre el panel */
@media (min-width:900px) and (max-height:800px){
  .tx__title{font-size:clamp(1.7rem,.8rem + 2vw,2.5rem)}
  .tx__case{padding-block:1rem 1.15rem}
}
/* Pantallas estrechas: la foto va arriba (recorte vertical) y el panel de cristal la cubre por abajo */
@media (max-width:899.98px){
  .tx{display:block;min-height:0;padding:0 0 clamp(2rem,6vh,3rem)}
  .tx__media{position:relative;inset:auto;z-index:0;aspect-ratio:4 / 5;max-height:72vh;max-height:72svh;width:100%}
  .tx::after{display:none}
  .tx__inner{position:relative;z-index:1;margin-top:-4.5rem}
  /* Aquí el cristal queda sobre el fondo de la página (claro en Residencial), no sobre la foto: un velo oscuro asegura el contraste del texto */
  .tx__panel{background:linear-gradient(rgb(20 15 10 / .42),rgb(20 15 10 / .42)),linear-gradient(180deg,var(--tx-g1) 0%,var(--tx-g2) 100%)}
}

/* Aparición al hacer scroll (solo con el script activo): la foto se asienta y el panel sube */
.tx[data-reveal="pending"] .tx__panel{opacity:0;transform:translateY(2.2rem)}
.tx[data-reveal="pending"] .tx__media img{transform:scale(1.08)}
.tx[data-reveal="in"] .tx__panel{transition:opacity 1.2s var(--ease) .15s,transform 1.4s var(--ease) .15s}
.tx[data-reveal="in"] .tx__media img{transition:transform 2.6s var(--ease)}

/* Movimiento reducido: sin aparición ni fundidos animados */
@media (prefers-reduced-motion:reduce){
  .dv *,.dv *::before,.dv *::after,.tx *,.tx *::before,.tx *::after{transition-duration:.01ms!important;transition-delay:0s!important}
}