/* Hoja compartida por todas las páginas (lo que no entra en la primera pantalla). El CSS crítico está en src/css/critico.css. */

/* las cuatro preguntas */
.cuatro .cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.cuatro .cols{grid-template-columns:1fr}}
.cuatro .intro{display:grid;gap:18px;position:sticky;top:110px}
.cuatro .intro p{color:var(--grafito)}
@media (max-width:860px){.cuatro .intro{position:static}}
.preguntas{display:grid;gap:clamp(28px,3.4vw,44px);margin:0}
.preguntas dt{font-variation-settings:"wdth" 112;font-weight:700;font-size:clamp(22px,2.3vw,29px);line-height:1.15;letter-spacing:-.015em}
.preguntas dd{margin:8px 0 0;color:var(--grafito);max-width:46ch}
.cierre{margin-top:clamp(36px,4vw,56px);max-width:56ch}

/* calidad: la única banda invertida */
.calidad{background:var(--tinta);color:var(--papel)}
.calidad .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.calidad p{font-size:clamp(17px,1.5vw,19px);opacity:.78;max-width:48ch}
.calidad a{color:inherit}
@media (max-width:860px){.calidad .wrap{grid-template-columns:1fr}}

/* proceso: sí es una secuencia */
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);counter-reset:paso;margin:0;padding:0;list-style:none}
@media (max-width:960px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pasos{grid-template-columns:1fr}}
.pasos li{display:grid;gap:8px;align-content:start}
.pasos li::before{counter-increment:paso;content:counter(paso);font-variation-settings:"wdth" var(--w-marca);font-weight:400;font-size:56px;line-height:1;color:var(--troquel);margin-bottom:8px}
.pasos h3{font-size:var(--t-h3);font-weight:700}
.pasos p{font-size:var(--t-chico);color:var(--grafito)}

/* clientes */
.clientes{background:linear-gradient(180deg,var(--gris-logos-a),var(--gris-logos-b));color:#111110}
.clientes .cabeza p{color:#55574F}
.clientes .cabeza h2{color:#111110}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.logos>div{--pl:12px;position:relative;flex:0 0 calc((100% - 5 * 6px) / 6);aspect-ratio:3/2}
.logos img{position:absolute;left:var(--pl);top:var(--pl);width:calc(100% - 2 * var(--pl));height:calc(100% - 2 * var(--pl));object-fit:contain}
@media (max-width:960px){.logos>div{flex-basis:calc((100% - 3 * 6px) / 4)}}
@media (max-width:560px){.logos>div{flex-basis:calc((100% - 2 * 6px) / 3);--pl:8px}}
.clientes h3{font-variation-settings:"wdth" var(--w-texto);font-size:var(--t-h3);font-weight:700;margin:clamp(48px,6vw,80px) 0 20px}
.logos.prov>div{flex-basis:calc((100% - 5 * 6px) / 6);aspect-ratio:2/1;opacity:.8}
@media (max-width:960px){.logos.prov>div{flex-basis:calc((100% - 3 * 6px) / 4)}}
@media (max-width:560px){.logos.prov>div{flex-basis:calc((100% - 2 * 6px) / 3)}}

/* instagram */
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:960px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ig-grid a{position:relative;display:block;border-radius:6px;overflow:hidden;aspect-ratio:1}
.ig-grid img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.ig-grid a:hover img{opacity:.85}

/* el contacto es una etiqueta que se pega al llegar */
.pega{transform-origin:left center;filter:drop-shadow(0 1px 0 rgba(0,0,0,.06))}
.solapa-c{position:absolute;top:0;right:0;width:var(--dc);height:var(--dc);border-bottom-left-radius:10px;background:linear-gradient(225deg,transparent 50%,#AEB0A8 50%,#F2F2EE 60%,#DFE0D9 100%);box-shadow:-10px 10px 22px rgba(0,0,0,.26)}
.pega.espera{transform:translateY(46px) rotate(-2.4deg);filter:drop-shadow(0 44px 38px rgba(0,0,0,.32));--dc:128px}
.pega.pegando{animation:pegar 3s cubic-bezier(.3,.6,.25,1) .25s both}
@keyframes pegar{
  0%{transform:translateY(46px) rotate(-2.4deg);filter:drop-shadow(0 44px 38px rgba(0,0,0,.32));--dc:128px}
  45%{transform:translateY(8px) rotate(-.5deg);filter:drop-shadow(0 16px 18px rgba(0,0,0,.22));--dc:104px}
  70%{transform:translateY(0) rotate(0deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.16));--dc:70px}
  100%{transform:translateY(0) rotate(0deg);filter:drop-shadow(0 1px 0 rgba(0,0,0,.06));--dc:0px}
}


/* bloque de la cotización a mitad de página */
.cta-banda{padding-block:clamp(40px,6vw,72px)}
.cta-et{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:20px 48px;align-items:center;border:1.5px dashed var(--troquel);border-radius:var(--r-et);padding:clamp(22px,3.4vw,40px)}
@media (max-width:760px){.cta-et{grid-template-columns:1fr}}
.cta-tit{font-variation-settings:"wdth" var(--w-marca);font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1.08;letter-spacing:-.02em;margin-bottom:8px}
.cta-et p:not(.cta-tit){color:var(--grafito);max-width:56ch}
.liner+.cta-banda,.cta-banda+.liner{margin-top:0}

/* preguntas frecuentes */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,64px)}
@media (max-width:860px){.faq{grid-template-columns:1fr}}
.faq-item{padding-block:22px;border-top:1px solid var(--troquel)}
.faq-item h3{font-size:var(--t-h3);font-weight:700;line-height:1.25;margin-bottom:8px}
.faq-item p{color:var(--grafito)}
.faq-item a{text-underline-offset:4px}

/* ---------- efectos (src/js/efectos.js + assets/fx) ---------- */
/* tarjetas de producto: al pasar el mouse se dibuja la línea de troquel, la foto se levanta y le pasa un brillo */
.prod .et-p{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.prod .et-p::after{content:"";position:absolute;inset:7px;border:1.5px dashed #9A9C94;border-radius:9px;pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.6,0,.2,1)}
.prod:hover .et-p::after,.prod:focus-within .et-p::after{clip-path:inset(0 0 0 0)}
.prod .foto img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s}
.prod .foto::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:130% 0}
@media (hover:hover){.prod:hover .et-p{transform:translateY(-4px)}.prod:hover .foto img{transform:translateY(-8px) rotate(-1.5deg);filter:drop-shadow(0 22px 20px rgba(0,0,0,.22))}.prod:hover .foto::after{background-position:-30% 0;transition:background-position 1.1s cubic-bezier(.3,.6,.2,1)}}

/* ficha de etiqueta que se imprime en térmica */
.ficha-boca{position:relative;padding-bottom:14px;margin-top:clamp(20px,3vw,34px);max-width:340px}
.ficha-boca::after{content:"";position:absolute;left:-10px;right:-10px;bottom:0;height:14px;border-radius:7px;background:var(--grafito);box-shadow:inset 0 3px 0 rgba(0,0,0,.35)}
.ficha-termica{--papel:#FFF;--tinta:#000;position:relative;background:#fff;color:#000;border-radius:10px 10px 0 0;padding:16px 18px 14px;font-variation-settings:"wdth" var(--w-dato);box-shadow:0 0 0 1px var(--troquel)}
.ft-cab{display:flex;justify-content:space-between;font-weight:800;font-size:13px;letter-spacing:.06em;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:8px}
.ft-cab span+span{color:#6B6D66;font-weight:600}
.ficha-termica dl{margin:0;display:grid;gap:3px}
.ficha-termica dl div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.ficha-termica dt{font-weight:500}
.ficha-termica dd{margin:0;font-weight:800;text-align:right}
.ft-res{margin-top:10px;padding-top:8px;border-top:1px dashed #C2C4BC}
.ft-res small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;color:#6B6D66}
.ft-res b{font-size:18px;line-height:1.15;display:block}
.ficha-termica .bars{margin-top:12px;height:34px;width:70%}

/* banda negra: logo estampado en foil plateado */
.estampado{position:relative;width:min(280px,70%);aspect-ratio:2492/922;margin:0 0 clamp(18px,2.4vw,28px) -1%}
.estampado .logo-tinta{position:absolute;inset:7.592% 2.809%;background:currentColor;-webkit-mask:url(/assets/fx/logo-papelplex.svg) center/contain no-repeat;mask:url(/assets/fx/logo-papelplex.svg) center/contain no-repeat;transition:opacity .4s}
.fx-foil .logo-tinta{opacity:0}
.fx-foil.fx-sin-webgl .logo-tinta{opacity:1}
.fx-permiso-luz{font-family:inherit!important}

/* contacto: la esquina se despega */
.fx-despegue .fx-despegue-zona:focus-visible{outline:2px solid #000;outline-offset:-4px}
@media (hover:hover){.fx-despegue .fx-despegue-zona::after{content:"↖";position:absolute;right:10px;bottom:8px;font-size:14px;line-height:1;color:#6B6D66;opacity:0;transition:opacity .3s;pointer-events:none;z-index:3}.fx-despegue .fx-despegue-zona:hover::after{opacity:.8}}

/* entradas al hacer scroll: solo para lo que todavía está debajo de la pantalla */
.revelar{opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--retardo,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--retardo,0s)}
.revelar.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revelar{opacity:1;transform:none;transition:none}.prod .et-p::after{transition:none}.prod .foto::after{display:none}}

/* ---------- láminas e ilustraciones de producto ---------- */
.ilu{--liner2:color-mix(in srgb,var(--soporte) 82%,var(--tinta) 10%);display:block;width:100%;height:auto}
.ilu .s{stroke:var(--tinta);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ilu .fino{stroke:var(--tinta);stroke-width:1.3;fill:none}
.ilu .et{fill:var(--etiqueta)}
.ilu .ln{fill:var(--liner2)}
.ilu .tn{fill:var(--tinta)}
.ilu .tk{fill:#000}
.ilu .gk{fill:#6B6D66}
.ilu text{font-family:var(--f);fill:var(--tinta)}
.lamina{margin:clamp(20px,3vw,32px) 0 clamp(8px,2vw,16px);background:var(--soporte);border-radius:var(--r-et);padding:clamp(14px,3vw,32px);display:grid;gap:14px}
.liner .lamina{background:var(--papel)}
.lamina figcaption{font-size:var(--t-chico);color:var(--grafito);max-width:70ch}
.lamina.ancha .ilu{max-width:900px;margin:0 auto}
.capa{animation:pp-capas 7s cubic-bezier(.45,0,.25,1) infinite}
@keyframes pp-capas{0%,12%{transform:translateY(var(--d))}45%,62%{transform:translateY(calc(var(--d)*.72))}95%,100%{transform:translateY(var(--d))}}
.gota{animation:pp-cae 2.4s linear infinite}
.gota:nth-of-type(2){animation-delay:.8s}.gota:nth-of-type(3){animation-delay:1.6s}
@keyframes pp-cae{0%{transform:translateY(-14px);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(34px);opacity:0}}
.levanta{transform-box:fill-box;transform-origin:100% 100%;animation:pp-levanta 4.8s ease-in-out infinite}
@keyframes pp-levanta{0%,20%{transform:rotate(0)}55%,85%{transform:rotate(-13deg)}100%{transform:rotate(0)}}
.arruga{animation:pp-arruga 4.8s ease-in-out infinite}
@keyframes pp-arruga{0%,20%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.capa,.gota,.levanta,.arruga{animation:none}.capa{transform:translateY(var(--d))}.levanta{transform:rotate(-13deg)}.arruga{opacity:1}}

/* línea de producción (etiquetas impresas) */
.linea{display:grid;gap:16px;margin-top:clamp(18px,3vw,28px)}
.linea-vid{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r-et);background:#E6E7E2;display:block}
@media (max-width:640px){.linea-vid{aspect-ratio:4/3}}
.pasos4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){.pasos4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pasos4 li{display:grid;gap:4px;align-content:start;padding:12px 14px;border-radius:10px;background:var(--papel);border:1.5px solid transparent;transition:border-color .4s,opacity .4s;opacity:.6;min-width:0}
.pasos4 li.on{border-color:var(--tinta);opacity:1}
.pasos4 .n{font-variation-settings:"wdth" var(--w-dato);font-weight:700;font-size:13px;color:var(--grafito)}
.pasos4 b{font-size:16px}
.pasos4 span:last-child{font-size:14px;color:var(--grafito);line-height:1.45}

/* ribbons: color por familia */
.ficha.rib-cera{border-top:6px solid #E9A800}
.ficha.rib-mixto{border-top:6px solid #1D5FC9}
.ficha.rib-resina{border-top:6px solid #0F8A54}

/* simulador de impresión térmica */
.sim{margin-top:clamp(18px,3vw,28px);background:var(--papel);border-radius:var(--r-et);padding:clamp(14px,3vw,28px);overflow-x:auto}
.sim .ilu{min-width:320px}
.sim-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}
.sim .tabs{display:inline-flex;background:var(--soporte);border-radius:10px;padding:4px;gap:4px}
.sim .tabs button,.sim .pausa{font:inherit;font-size:15px;font-weight:600;border:0;border-radius:7px;padding:9px 14px;cursor:pointer;background:transparent;color:var(--tinta)}
.sim .tabs button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.sim .pausa{border:1.5px solid var(--tinta)}
.sim button:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.sim-cap{margin-top:16px;display:grid;gap:6px;min-height:84px}
.sim-cap h3{font-size:var(--t-h3)}
.sim-cap p{font-size:var(--t-chico);color:var(--grafito);max-width:70ch}
#ribbon,#ribbonUsado,#rollos{transition:opacity .5s}
.sim .off{opacity:0}
.calor rect{fill:var(--troquel);transition:fill .15s}
.calor rect.on{fill:var(--tinta)}
.estacion-vid{width:100%;height:auto;aspect-ratio:1280/780;display:block;border-radius:10px;background:#F1F1F3}