/* ==========================================================================
   Carpintek · sección «Proyectos» de la home (debajo del hero)
   Láminas verticales («listones») que se abren como el vidrio y la madera acanalados del hero.
   · Escritorio con puntero → acordeón: una lámina abierta, el resto cerradas con su rótulo vertical.
   · Táctil o pantalla estrecha → carrusel con anclaje: foto limpia y pie de foto debajo.
   Los colores (--pf-*) viven en hero.css y viajan con el modo: la sección es clara en Residencial y oscura en Business.
   ========================================================================== */

.pf{
  --gap:clamp(.25rem,.42vw,.45rem);
  --g:6.5;                                   /* peso de la lámina abierta frente a las cerradas (peso 1) */
  --ease-pf:var(--ease);
  position:relative;isolation:isolate;
  padding:clamp(4.25rem,10vh,8.5rem) 0 clamp(5rem,13vh,9.5rem);
  background:var(--pf-bg);color:var(--pf-fg);
}
/* Rayado vertical: continúa el del sub-nav del hero y se disuelve hacia abajo */
.pf::before{content:"";position:absolute;inset:0 0 auto 0;height:clamp(18rem,48vh,34rem);z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--pf-flute) 0 1px,transparent 1px 8px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,transparent 100%)}
.pf__inner{width:calc(100% - 2 * var(--gutter));max-width:140rem;margin-inline:auto}

/* ---------- Cabecera de la sección ---------- */
.pf__head{display:grid;gap:1.35rem;margin-bottom:clamp(2.25rem,5.5vh,4.25rem)}
.pf__eyebrow{display:flex;align-items:center;gap:1rem;margin:0;font:500 .7rem/1.2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--pf-accent)}
.pf__eyebrow::before{content:"";flex:none;width:2.1rem;height:1px;background:currentColor}
.pf__title{margin:0;max-width:19ch;font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,.9rem + 3.9vw,3.5rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance;font-optical-sizing:auto}
.pf__side{display:grid;justify-items:start}
.pf__intro{margin:0;max-width:34rem;font:400 clamp(.94rem,.9rem + .22vw,1.08rem)/1.58 var(--sans);letter-spacing:.005em;color:var(--pf-soft);text-wrap:pretty}
.pf__all{display:inline-flex;align-items:center;gap:1rem;margin-top:1.25rem;min-height:2.75rem;color:var(--pf-fg);font:500 .7rem/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.pf__all-txt{padding-bottom:.35rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.pf__all:hover .pf__all-txt,.pf__all:focus-visible .pf__all-txt{background-size:100% 1px}
.pf__all-arrow{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--pf-line);border:1px solid color-mix(in srgb,currentColor 45%,transparent);border-radius:50%;transition:background-color .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.pf__all:hover .pf__all-arrow,.pf__all:focus-visible .pf__all-arrow{background:var(--pf-fg);border-color:var(--pf-fg);color:var(--pf-bg);transform:translate(2px,-2px)}

/* ---------- Láminas: base = carrusel (táctil y pantallas estrechas). Foto 4:5 limpia y pie de foto debajo, con los colores de la sección ---------- */
.slats{display:flex;align-items:flex-start;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slats::-webkit-scrollbar{display:none}
.slat{
  --cap-fg:var(--pf-fg);--cap-soft:var(--pf-soft);--cap-accent:var(--pf-accent);--cap-line:var(--pf-line);
  position:relative;flex:0 0 min(78vw,24rem);scroll-snap-align:start}
.slat__link{position:relative;display:block;color:var(--cap-fg);text-decoration:none;-webkit-tap-highlight-color:transparent}
.slat__link:focus-visible{outline:none}
.slat picture{position:relative;display:block;aspect-ratio:4 / 5;overflow:hidden;background:var(--c,#8b8378)}
.slat img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.slat__link::before,.slat__link::after{display:none}
/* Anillo de foco visible sobre cualquier foto (doble: claro + oscuro) */
.slat::before{content:"";position:absolute;inset:0 0 auto 0;aspect-ratio:4 / 5;z-index:4;pointer-events:none}
.slat:has(.slat__link:focus-visible)::before{box-shadow:inset 0 0 0 2px #fcfbf8,inset 0 0 0 4px rgb(12 9 6 / .75)}
/* Filete de champagne que se dibuja en la lámina abierta (como el de las líneas de negocio del hero); solo en el acordeón */
.slat::after{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:2px;background:var(--champagne);opacity:0;transform:scaleX(0);transform-origin:0 50%}

.slat__num,.slat__v{display:none}
.slat__cap{padding:1.15rem 0 0}
.slat__meta{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .6rem;font:500 .64rem/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cap-soft)}
.slat__idx{flex:none;color:var(--cap-accent);letter-spacing:.3em}
.slat__name{margin:0;font:500 clamp(1.4rem,1.05rem + 1vw,2.1rem)/1.06 var(--serif);letter-spacing:-.012em;text-wrap:balance;color:var(--cap-fg)}
.slat__desc{max-width:38ch;margin:.65rem 0 0;font:400 .86rem/1.5 var(--sans);letter-spacing:.005em;color:var(--cap-soft)}
.slat__go{display:inline-flex;align-items:center;gap:.8rem;margin-top:.9rem;font:500 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cap-accent)}
.slat__arrow{display:grid;place-items:center;width:1.9rem;height:1.9rem;border:1px solid var(--cap-line);border:1px solid color-mix(in srgb,var(--cap-fg) 45%,transparent);border-radius:50%;color:var(--cap-fg);transition:background-color .4s,color .4s,border-color .4s,transform .5s var(--ease-pf)}
.slat__link:hover .slat__arrow{background:var(--cap-fg);border-color:var(--cap-fg);color:var(--pf-bg);transform:translate(2px,-2px)}

/* Controles del carrusel (los muestra el script; el acordeón no los usa) */
.pf__controls{display:flex;align-items:center;gap:1.5rem;margin-top:1.75rem}
.pf__controls[hidden]{display:none}
.pf__progress{position:relative;flex:1;height:1px;background:var(--pf-line)}
.pf__progress span{position:absolute;inset:0;background:var(--pf-fg);transform-origin:0 50%;transform:scaleX(var(--p,.3))}
.pf__btns{display:flex;gap:.6rem}
.pf__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--pf-line);border:1px solid color-mix(in srgb,var(--pf-fg) 40%,transparent);border-radius:50%;background:transparent;color:var(--pf-fg);cursor:pointer;transition:background-color .4s,color .4s,opacity .3s}
.pf__btn:hover:not(:disabled){background:var(--pf-fg);color:var(--pf-bg)}
.pf__btn:disabled{opacity:.35;cursor:default}

/* ---------- Aparición al hacer scroll: solo si el script está activo (data-reveal) ----------
   La transición vive únicamente en el estado final («in»): pasar a «pending» es instantáneo (no se ve un parpadeo) y pasar a «in» anima. */
.pf[data-reveal="pending"] :is(.pf__eyebrow,.pf__title,.pf__side){opacity:0;transform:translateY(1.25rem)}
.pf[data-reveal="pending"] .slat{opacity:0;transform:translateY(2.25rem)}
.pf[data-reveal="in"] :is(.pf__eyebrow,.pf__title,.pf__side){transition:opacity 1.1s var(--ease-pf),transform 1.3s var(--ease-pf)}
.pf[data-reveal="in"] .pf__title{transition-delay:.12s}
.pf[data-reveal="in"] .pf__side{transition-delay:.26s}
.pf[data-reveal="in"] .slat{transition:opacity 1.2s var(--ease-pf) calc(var(--i) * 70ms),transform 1.4s var(--ease-pf) calc(var(--i) * 70ms)}

/* ---------- Escritorio con puntero: acordeón ---------- */
@media (min-width:1000px) and (hover:hover) and (pointer:fine){
  .pf__head{grid-template-columns:minmax(0,1fr) clamp(22rem,33vw,44rem);grid-template-areas:"eyebrow side" "title side";column-gap:clamp(2rem,5vw,6rem);row-gap:1.6rem;align-items:end}
  .pf__eyebrow{grid-area:eyebrow;align-self:start}
  .pf__title{grid-area:title;font-size:clamp(2.6rem,min(3.9vw,6.4vh),4.1rem)}
  .pf__side{grid-area:side;align-self:end}

  .pf__stage{container-type:inline-size}
  /* La foto de cada lámina mide lo que mide la lámina abierta y se asoma por una ventana: al abrir, no se reencuadra ni se deforma */
  .slats{
    --open-w:calc((100cqw - (var(--n) - 1) * var(--gap)) * var(--g) / (var(--n) - 1 + var(--g)));
    align-items:stretch;gap:var(--gap);height:clamp(28rem,calc(var(--open-w) * 1.25),84vh);margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}
  .slat{
    --cap-fg:#fcfbf8;--cap-soft:rgba(252,251,248,.92);--cap-accent:var(--champagne);--cap-line:rgba(252,251,248,.5);
    flex:1 1 0;min-width:0;overflow:hidden;background:var(--c,#8b8378);
    transition:flex-grow 1.15s var(--ease-pf)}
  .pf[data-reveal="in"] .slat{transition:flex-grow 1.15s var(--ease-pf),opacity 1.2s var(--ease-pf) calc(var(--i) * 70ms),transform 1.4s var(--ease-pf) calc(var(--i) * 70ms)}
  .slat.is-active{flex-grow:var(--g)}
  .slat__link{position:absolute;inset:0}
  .slat picture{position:absolute;inset:0;aspect-ratio:auto;overflow:visible;background:none}
  .slat img{inset:auto;left:50%;top:0;width:var(--open-w);height:100%;transform:translateX(-50%) scale(1.03);
    filter:saturate(.5) contrast(.96);
    transition:transform 1.8s var(--ease-pf),filter 1.15s var(--ease-pf)}
  .slat.is-active img{transform:translateX(-50%) scale(1);filter:none}
  .slat:not(.is-active):hover img{filter:saturate(.85) contrast(1)}
  .slat::before{inset:0;aspect-ratio:auto}
  .slat__arrow{border-color:var(--cap-line)}
  .slat__link:hover .slat__arrow{color:var(--ink)}

  /* Sombras al pie: miden lo que mide el texto (rótulo vertical en la cerrada, pie de foto en la abierta), no un porcentaje de la foto */
  .slat__link::before,.slat__link::after{display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 1s var(--ease-pf)}
  .slat__link::before{background:linear-gradient(0deg,rgb(12 9 6 / .84) 0,rgb(12 9 6 / .64) calc(var(--lab,16) * .62rem + 3.4rem),rgb(12 9 6 / 0) calc(var(--lab,16) * .62rem + 10rem))}
  .slat__link::after{opacity:0;background:linear-gradient(0deg,rgb(12 9 6 / .84) 0,rgb(12 9 6 / .62) 14.5rem,rgb(12 9 6 / 0) 24rem)}
  .slat.is-active .slat__link::before{opacity:0}
  .slat.is-active .slat__link::after{opacity:1}
  .slat::after{opacity:1;transition:transform 1s var(--ease-pf)}
  .slat.is-active::after{transform:scaleX(1)}

  /* Lámina cerrada: número abajo y nombre en vertical, de abajo arriba */
  .slat__num,.slat__v{display:block;position:absolute;z-index:2;left:50%;color:#fcfbf8;transition:opacity .45s var(--ease-pf)}
  .slat__num{bottom:1.3rem;transform:translateX(-50%);font:500 .66rem/1 var(--sans);letter-spacing:.3em;text-indent:.3em;color:var(--champagne)}
  .slat__v{bottom:3.7rem;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font:500 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 10px rgb(12 9 6 / .5)}
  .slat.is-active :is(.slat__num,.slat__v){opacity:0}

  /* Lámina abierta: el pie de foto tiene el ancho de la lámina abierta, así no se recoloca mientras se abre */
  .slat__cap{position:absolute;z-index:2;inset:auto auto 0 0;width:var(--open-w);padding:0 clamp(1.25rem,1.8vw,1.9rem) clamp(1.3rem,2vw,2rem);opacity:0;transform:translateY(.9rem);
    transition:opacity .4s var(--ease-pf),transform .8s var(--ease-pf)}
  .slat.is-active .slat__cap{opacity:1;transform:none;transition-delay:.4s}
  .slat__go{margin-top:1rem}
  .pf__controls{display:none}
}
/* Ventanas bajas: la descripción sigue en el HTML (lectores de pantalla y buscadores) pero no se dibuja, para que el pie de foto quepa */
@media (min-width:1000px) and (hover:hover) and (pointer:fine) and (max-height:700px){
  .slat__desc{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- Tabletas (táctiles o ventana intermedia): carrusel con láminas más anchas ---------- */
@media (min-width:700px) and (not ((min-width:1000px) and (hover:hover) and (pointer:fine))){
  .slat{flex-basis:min(42vw,26rem)}
  .pf__title{max-width:24ch}
}
@media (min-width:900px) and (not ((min-width:1000px) and (hover:hover) and (pointer:fine))){
  .pf__head{grid-template-columns:minmax(0,1fr) minmax(18rem,38%);grid-template-areas:"eyebrow side" "title side";column-gap:3rem;align-items:end}
  .pf__eyebrow{grid-area:eyebrow}.pf__title{grid-area:title;max-width:19ch}.pf__side{grid-area:side}
}

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