/* MAST Marine — despiece del cojín en la portada de tapicería.
   A la izquierda el texto de la portada y, debajo, las piezas; a la derecha un visor con el dibujo,
   pegado mientras se baja: barra con contador, etiquetas sobre cada capa y un selector de pieza.
   En móvil el visor se pega arriba, a todo el ancho, y las piezas pasan por debajo. */
.hero.dz{overflow:hidden;overflow:clip}
.dz .scroll{display:none}
.dz .wrap{grid-template-columns:minmax(0,6.2fr) minmax(0,5.8fr);grid-template-areas:"intro art" "piezas art";align-items:start;min-height:0;padding-bottom:0}
.dz .intro{grid-area:intro;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 8rem);padding-bottom:4rem}
.dz .intro h1{font-size:clamp(2.1rem,3.9vw,3.4rem)!important}
.dz .specs.four{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.2rem}
.dz .specs.four>div{padding:.85rem 1.05rem 1rem}
.dz .art{grid-area:art;position:sticky;top:5.6rem;align-self:start;max-width:none;display:flex;flex-direction:column;gap:.5rem;padding:clamp(.9rem,1.6vw,1.3rem)}
.dz .barra{display:flex;align-items:center;gap:1rem}
.dz .barra .k{flex:1;display:flex;align-items:center;gap:.8rem;color:var(--on-navy-faint);font-size:.66rem}
.dz .barra .k::after{content:"";flex:1;border-top:1px dashed var(--seam)}
.dz .cuenta{flex:none;padding:.32rem .75rem;border-radius:999px;border:1px solid var(--c-filo);background:rgba(242,242,242,.06);box-shadow:var(--c-luz);font-size:.68rem;font-weight:500;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--on-navy-faint)}
.dz .cuenta b{font-weight:600;color:var(--paper)}
/* el alto deja libre la franja de abajo, donde flota la barra de marcas */
.cojin{display:block;width:100%;height:auto;max-height:calc(100svh - 18.5rem)}
.cojin text{font-family:var(--sans);font-size:10.6px;font-weight:500;letter-spacing:.02em;text-transform:none;fill:var(--paper);opacity:1;animation:none}
.cojin text.num{font-size:8.6px;font-weight:600;letter-spacing:.06em;fill-opacity:.55}
.cojin text.eti{font-size:6.2px;font-weight:700;letter-spacing:.22em}
/* la pieza de la que se habla, entera; las demás, oscurecidas con un velo (no transparentes: se verían unas a través de otras) */
.cojin .capa,.cojin .velo,.cojin .tag{transition:opacity .35s}
.cojin .chip,.cojin .tag text{transition:fill .3s,fill-opacity .3s}
.cojin[data-on] .velo{opacity:.7}
.cojin[data-on] .c2,.cojin[data-on] .c5,.cojin[data-on] .c6{opacity:.34}
.cojin[data-on] .tag{opacity:.42}
.cojin[data-on="1"] .c1 .velo,.cojin[data-on="3"] .c3 .velo,.cojin[data-on="4"] .c4 .velo{opacity:0}
.cojin[data-on="2"] .c2,.cojin[data-on="5"] .c5,.cojin[data-on="6"] .c6,.cojin[data-on="1"] .c1 .tag,.cojin[data-on="2"] .c2 .tag,.cojin[data-on="3"] .c3 .tag,.cojin[data-on="4"] .c4 .tag,.cojin[data-on="5"] .c5 .tag,.cojin[data-on="6"] .c6 .tag{opacity:1}
.cojin[data-on="1"] .c1 .chip,.cojin[data-on="2"] .c2 .chip,.cojin[data-on="3"] .c3 .chip,.cojin[data-on="4"] .c4 .chip,.cojin[data-on="5"] .c5 .chip,.cojin[data-on="6"] .c6 .chip{fill:var(--paper);fill-opacity:1}
.cojin[data-on="1"] .c1 .tag text,.cojin[data-on="2"] .c2 .tag text,.cojin[data-on="3"] .c3 .tag text,.cojin[data-on="4"] .c4 .tag text,.cojin[data-on="5"] .c5 .tag text,.cojin[data-on="6"] .c6 .tag text{fill:var(--navy)}
.cojin .eco{opacity:0;transform-box:fill-box;transform-origin:center}
.cojin[data-on="1"] .c1 .eco,.cojin[data-on="2"] .c2 .eco,.cojin[data-on="3"] .c3 .eco,.cojin[data-on="4"] .c4 .eco,.cojin[data-on="5"] .c5 .eco,.cojin[data-on="6"] .c6 .eco{animation:eco 1.8s ease-out infinite}
@keyframes eco{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.6)}}
/* la cremallera se abre cuando le toca */
.cojin .abre{transform-box:fill-box;transform-origin:right center;transform:scaleX(0);transition:transform .9s cubic-bezier(.3,.6,.2,1)}
.cojin .tirador{transition:transform .9s cubic-bezier(.3,.6,.2,1)}
.cojin[data-on="5"] .abre{transform:scaleX(1)}
.cojin[data-on="5"] .tirador{transform:translateX(-116px)}
/* selector de pieza */
.dz .pasos{display:flex;gap:.25rem;padding:.28rem;border-radius:999px;border:1px solid var(--c-filo);background:rgba(242,242,242,.06);box-shadow:var(--c-luz)}
.dz .pasos button{flex:1;min-height:2.05rem;padding:0 .5rem;border-radius:999px;font-size:.68rem;font-weight:500;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--on-navy);white-space:nowrap;transition:background .25s,color .25s}
.dz .pasos button:first-child{flex:2.4;text-transform:uppercase}
.dz .pasos button.on{background:var(--paper);color:var(--navy)}
.dz .pasos button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
@media (hover:hover){.dz .pasos button:not(.on):hover{background:rgba(242,242,242,.12);color:var(--paper)}}
.dz:not(.vivo) .pasos,.dz:not(.vivo) .cuenta{display:none}
.piezas{grid-area:piezas;padding-bottom:22vh}
.piezas li{display:flex;flex-direction:column;justify-content:center;min-height:54vh;max-width:31rem;opacity:.3;transition:opacity .35s}
.piezas li.on,.dz:not(.vivo) .piezas li{opacity:1}
.piezas .n{font-size:.72rem;font-weight:500;letter-spacing:.24em;color:var(--on-navy-faint)}
.piezas .n::after{content:"";display:inline-block;vertical-align:middle;width:3rem;margin-left:1rem;border-top:1px dashed var(--seam)}
.piezas h3{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:.9rem 0 .9rem}
.piezas p{color:var(--on-navy);font-size:1.1rem;max-width:28rem}
@media (max-width:60rem){
  .dz .wrap{grid-template-areas:none;display:block;padding-bottom:0}
  .dz .intro{min-height:0;padding-bottom:2.5rem}
  .dz .intro h1{font-size:clamp(2.1rem,8vw,3rem)!important}
  .dz .specs.four{grid-template-columns:1fr}
  .dz .art{top:0;z-index:5;max-width:none;margin:0 calc(-1*var(--gut));padding:4.9rem var(--gut) .7rem;border:0;border-radius:0;background:var(--navy);box-shadow:0 20px 30px -20px rgba(0,0,0,.7)}
  .cojin{max-height:40svh}
  .cojin .tag{display:none}
  .dz .pasos button{min-height:2.2rem;padding:0 .2rem;letter-spacing:.06em}
  .piezas{padding-top:30svh;padding-bottom:10vh}
  .piezas li{min-height:44svh;justify-content:flex-start;padding-top:3.2rem}
  .piezas p{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){.cojin .eco{animation:none!important}.cojin .abre,.cojin .tirador{transition:none}}