/* Pagina de cada coleccion. Solo se carga en /colecciones/{slug}/. */
.co{--pad:6vw}
.co .k{font:500 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--terra-deep)}
.co h1,.co h2,.co h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.sh-coleccion .site-ft{margin-top:0}

/* ---- portada: fotos que pasan solas ---- */
.co-hero{position:relative;height:calc(100vh - var(--sh-header,96px));min-height:560px;overflow:hidden;background:#0e0a07;color:#faf5ec;display:grid;place-items:center;text-align:center}
.co-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.6s ease,transform 7s linear}
.co-hero img.on{opacity:.62;transform:scale(1)}
.co-hero .in{position:relative;z-index:1;will-change:transform,opacity}
.co-hero .k{color:#e7a878;letter-spacing:.5em}
.co-hero h1{font:300 clamp(70px,12vw,200px)/.9 var(--serif);letter-spacing:var(--ls,.06em);text-transform:uppercase;color:#faf5ec;margin-top:10px}
.co-hero .dn{position:absolute;right:4vw;top:50%;transform:rotate(90deg) translateX(-50%);transform-origin:right;font:500 10px var(--mono);letter-spacing:.4em;color:#e6dac8;z-index:1}
.co-hero .dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:1}
.co-hero .dots i{width:26px;height:2px;background:rgba(250,245,236,.35);transition:background .6s}.co-hero .dots i.on{background:#faf5ec}
/* portada con video vertical: el mismo video desenfocado llena el fondo y el
   video nitido va centrado y entero, asi no queda recortado ni ampliado */
.co-hero.vid .bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(38px) saturate(.95) brightness(.55);transform:scale(1.04)}
.co-hero.vid .pr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:auto;max-width:100%;object-fit:contain;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.co-hero.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,10,7,.8) 0%,rgba(14,10,7,.15) 45%,rgba(14,10,7,.25) 100%)}
.co-hero.vid .in,.co-hero.vid .dn{z-index:2}
@media(prefers-reduced-motion:reduce){.co-hero.vid .pr{display:none}.co-hero.vid .bg{filter:none;object-fit:contain;inset:0;width:100%;height:100%;transform:none}}

/* ---- sinopsis y ficha ---- */
.co-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,120px);padding:clamp(70px,9vw,130px) var(--pad);background:var(--cream)}
.co-intro h2{font-size:clamp(34px,3.6vw,56px);line-height:1.08;margin:16px 0 22px}
.co-intro p{color:var(--muted);font-size:17px;line-height:1.7;max-width:52ch}
.specs{list-style:none;padding:0;margin:0}
.specs li{position:relative;display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 0;font-size:15px}
.specs li::before,.specs li:first-child::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left}
.specs li::before{bottom:0}
.specs li:first-child::after{top:0}
.specs li span{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding-top:3px}

/* ---- modelos: minimalismo estructural ---- */
.co-mods{background:var(--cream);padding:clamp(90px,11vw,170px) 0 clamp(40px,5vw,80px);border-top:1px solid var(--line)}
.co-mods-h{padding:0 var(--pad);max-width:760px}
.co-mods-h h2{font-size:clamp(34px,3.6vw,56px);margin-top:14px}
.co-mods-h p{color:var(--muted);margin:14px 0 0;max-width:46ch;line-height:1.65}
.mod{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);align-items:center;padding:clamp(110px,16vh,190px) var(--pad);margin-top:clamp(20px,4vh,50px);isolation:isolate}
/* fondo: la misma foto desenfocada, desvanecida al crema arriba y abajo */
.mod .bg{position:absolute;inset:0;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.mod .bg i{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(70px) saturate(1.05);opacity:.9}
.mod .bg::after{content:"";position:absolute;inset:0;background:rgba(250,245,236,.5)}
.mod.osc .bg::after{background:rgba(22,16,11,.5)}
/* foto nitida con los 4 bordes esfumados (rampas multiplicadas: sin esquinas cuadradas) */
.mod .ph{grid-column:1 / span 7;position:relative}
.mod .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect}
.mod.alto .ph{grid-column:2 / span 5}
.mod.alto .ph img{aspect-ratio:3/4}   /* las verticales van enteras: nunca se corta el rack */
.mod .tx{grid-column:9 / span 4}
.mod.inv .ph{grid-column:6 / span 7;grid-row:1}
.mod.inv.alto .ph{grid-column:7 / span 5}
.mod.inv .tx{grid-column:1 / span 4;grid-row:1}
.mod .tx h3{font-size:clamp(24px,2.1vw,32px);line-height:1.15;margin:12px 0 10px}
.mod .tx p{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 24px;max-width:34ch}
.mod .tx a{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}
.mod .tx a:hover{color:var(--terra-deep);border-color:var(--terra-deep)}
.mod.osc .tx h3{color:#faf5ec}.mod.osc .tx p{color:#d8ccba}.mod.osc .k{color:#e7a878}
.mod.osc .tx a{color:#faf5ec;border-color:#faf5ec}

/* ---- armado: filas "Cambiar", como la ficha de los racks ---- */
.co-arm{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);background:var(--cream);border-top:1px solid var(--line);scroll-margin-top:var(--sh-header,96px)}
.arm-ph{position:sticky;top:var(--sh-header,96px);height:calc(100vh - var(--sh-header,96px));overflow:hidden;background:var(--greige)}
.arm-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s}
.arm-ph .cap{position:absolute;left:24px;bottom:22px;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#faf5ec;background:rgba(20,14,9,.55);padding:8px 12px;border-radius:999px}
.arm-pn{padding:clamp(40px,4.5vw,70px) clamp(24px,3.2vw,52px) 50px}
.arm-pn h2{font-size:clamp(32px,3vw,46px);line-height:1.05;margin:14px 0 10px}
.arm-pn .sub{color:var(--muted);margin:0 0 28px;font-size:15px;line-height:1.6}
.rows{border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line)}
.row > button{width:100%;display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:baseline;background:none;border:0;padding:18px 0;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.row .l{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.row .val{font:400 18px var(--serif)}
.row .val.no{color:var(--faint)}
.row .c{font:500 12px var(--sans);color:var(--terra-deep);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.row .c.add{text-decoration:none;font:500 12px var(--mono);letter-spacing:.02em}
.row .body{display:none;padding:0 0 20px}
.row.open .body{display:block}
.row.open .c{visibility:hidden}
.meds,.seg,.sw{display:flex;flex-wrap:wrap;gap:8px}
.meds button,.seg button,.sw button{cursor:pointer;font-family:inherit;color:var(--ink)}
.meds button{font:500 14px var(--mono);padding:11px 14px;border:1px solid var(--line);background:var(--surface);border-radius:8px}
.meds button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.seg button{padding:11px 16px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font:500 14px var(--sans)}
.seg button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.seg button em{font-style:normal;font:500 11.5px var(--mono);color:var(--terra-deep);margin-left:6px}
.sw{gap:12px}
.sw button{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;padding:0;font:500 12px var(--sans);color:var(--muted)}
.sw i{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 1px var(--line)}
.sw button.on i{box-shadow:0 0 0 2px var(--cream),0 0 0 3.5px var(--ink)}
.sw button.on{color:var(--ink)}
/* el total va quieto al final del armador: no se desplaza ni desaparece */
.tot{background:var(--cream);padding:24px 0 6px;margin-top:26px;border-top:1px solid var(--ink)}
.tot .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.tot .r b{font:400 36px var(--serif)}
.tot small{color:var(--muted);font-size:13px}
.tot .mini{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-top:8px}
.tot .btn{width:100%;margin-top:14px}
.tot .nota-i{font-size:12.5px;color:var(--faint);margin:9px 0 0;text-align:center;line-height:1.7}
.tot .nota-i b{font:inherit;color:inherit}   /* mismo tamaño y peso que el resto de la nota */
.nota-tv{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.6}
.nota-tv b{color:var(--ink);font-weight:600}
.meds.tvs button.grande{opacity:.45}

/* ============================================================================
   EFECTO AL SCROLLEAR (distinto del home, que sube y aparece):
   - el titulo de la portada se "abre" (se separan las letras) y se desvanece
     a medida que bajas;
   - las lineas de la ficha se dibujan de izquierda a derecha, una tras otra;
   - los textos pasan de desenfocados a nitidos;
   - cada foto de los modelos se descubre de abajo hacia arriba como un telon
     mientras se aleja el zoom, y su fondo de color aparece despues.
   Solo corre si hay JS (clase sh-fx en <html>); sin JS se ve todo normal.
   ============================================================================ */
.sh-fx .co .fx,.sh-fx .co .mod .tx{opacity:0;filter:blur(8px);transform:translateY(10px);transition:opacity 1.2s ease,filter 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sh-fx .co .fx.vis,.sh-fx .co .mod.vis .tx{opacity:1;filter:none;transform:none}
.sh-fx .co .mod .tx{transition-delay:.45s}
.sh-fx .specs li::before,.sh-fx .specs li:first-child::after{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.7,0,.2,1) calc(var(--i,0) * 110ms)}
.sh-fx .specs li > *,.sh-fx .specs li{color:transparent;transition:color .9s ease calc(var(--i,0) * 110ms + 250ms)}
.sh-fx .specs li span{color:transparent}
.sh-fx .specs.vis li::before,.sh-fx .specs.vis li:first-child::after{transform:scaleX(1)}
.sh-fx .specs.vis li{color:var(--ink)}
.sh-fx .specs.vis li span{color:var(--faint)}
.sh-fx .co .mod .ph{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.sh-fx .co .mod .ph img{transform:scale(1.12);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.sh-fx .co .mod .bg{opacity:0;transition:opacity 1.8s ease .3s}
.sh-fx .co .mod.vis .ph{clip-path:inset(0 0 0 0)}
.sh-fx .co .mod.vis .ph img{transform:none}
.sh-fx .co .mod.vis .bg{opacity:1}
@media(prefers-reduced-motion:reduce){
  .sh-fx .co .fx,.sh-fx .co .mod .tx,.sh-fx .co .mod .ph,.sh-fx .co .mod .ph img,.sh-fx .co .mod .bg,.sh-fx .specs li,.sh-fx .specs li::before,.sh-fx .specs li:first-child::after{transition:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
  .sh-fx .specs li{color:var(--ink)}.sh-fx .specs li span{color:var(--faint)}
}

@media(max-width:900px){
  .co-intro,.co-arm{grid-template-columns:minmax(0,1fr)}
  .row > button{grid-template-columns:78px minmax(0,1fr) auto;gap:10px}
  .row .val{font-size:16px}
  .arm-ph{position:relative;top:0;height:55vh}
  /* en el celular el precio no se parte en dos lineas */
  .tot .r b{font-size:30px;white-space:nowrap}
  .tot small{max-width:52%}
  .tot .nota-i{font-size:11.5px;line-height:1.6}
  .mod,.mod.inv{display:block}.mod .tx{padding-top:22px}
}