/* =========================================================================
   YAZBEK · UNDERSTAND 2027 · SAMY — SISTEMA "FICHA TÉCNICA"
   El deck es la ficha técnica de un taller de estampado: papel, plano de la
   prenda con su zona de estampado, muestras de color del catálogo, etiquetas
   colgantes y marcas de registro. La tinta entra con racleta (máscara).
   Rojo = México · Azul rey = Chile · Amarillo = marcador de hallazgo.
   Lienzo 1920×1080. Se carga DESPUÉS de deck.css (motor SAMY).
   ========================================================================= */
:root{
  --papel:#F6F4EF; --papel-2:#ECE8DF; --tinta:#14161A; --gris:#6A6F78; --gris-cl:#B9BDC4;
  --rojo:#D4232B; --azul:#1D49A7; --ama:#FFD21F;
  --f-dis:'Big Shoulders Display','Arial Narrow',sans-serif;
  --f-txt:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
html,body,.viewport,.stage{background:var(--tinta)}
.slide{font-family:var(--f-txt);--acc:var(--tinta)}
.slide.mx{--acc:var(--rojo)} .slide.cl{--acc:var(--azul)}
.abs{position:absolute}

/* ---------- superficies ---------- */
.s-papel{--fg:var(--tinta);--fg2:#3B4048;--mut:var(--gris);--line:rgba(20,22,26,.14);--line2:var(--tinta);color:var(--fg);
  background:radial-gradient(#14161A14 1px,transparent 1.2px) 0 0/22px 22px,var(--papel)}
.s-rojo,.s-azul,.s-tinta{--fg:#fff;--fg2:rgba(255,255,255,.88);--mut:rgba(255,255,255,.72);--line:rgba(255,255,255,.24);--line2:#fff;color:#fff}
.s-rojo{background:var(--rojo)} .s-azul{background:var(--azul)} .s-tinta{background:var(--tinta)}
.s-ama{--fg:var(--tinta);--fg2:#2A2D33;--mut:#5a5330;--line:rgba(20,22,26,.2);--line2:var(--tinta);color:var(--tinta);background:var(--ama)}

/* ---------- mobiliario de página: lomo, marcas de registro, tira de color ---------- */
.band{position:absolute;inset:0;z-index:70;pointer-events:none;view-transition-name:band}
.band .lomo{position:absolute;left:0;top:0;bottom:0;width:60px;background:var(--tinta);color:#fff}
.band .lomo b{position:absolute;left:50%;top:56px;transform-origin:0 0;transform:rotate(90deg) translateY(-50%);white-space:nowrap;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.band .lomo .pg{position:absolute;left:0;right:0;bottom:0;height:60px;display:flex;align-items:center;justify-content:center;background:var(--acc);font-family:var(--f-dis);font-weight:900;font-size:26px;letter-spacing:.02em}
.s-rojo .band .lomo .pg,.s-azul .band .lomo .pg{background:var(--ama);color:var(--tinta)}
.band .pg small{display:none}
.band i{position:absolute;left:60px;bottom:0;height:5px;background:var(--acc);transition:width .4s}
.s-rojo .band i,.s-azul .band i{background:var(--ama)}
.band .reg{position:absolute;width:26px;height:26px;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23808080' stroke-width='1.4'%3E%3Ccircle cx='13' cy='13' r='7'/%3E%3Cpath d='M13 0v26M0 13h26'/%3E%3C/svg%3E")}
.band .reg.a{right:22px;top:20px} .band .reg.b{right:22px;bottom:22px}
.band .tira{position:absolute;right:66px;bottom:26px;display:flex}
.band .tira u{width:18px;height:18px}

/* ---------- bloque de ficha (arriba a la derecha) ---------- */
.ficha{position:absolute;right:96px;top:52px;z-index:30;display:grid;grid-auto-flow:column;border:1.5px solid var(--line2);view-transition-name:ficha}
.ficha div{padding:7px 16px 8px;border-left:1.5px solid var(--line2);display:flex;flex-direction:column;gap:2px}
.ficha div:first-child{border-left:0}
.ficha s{text-decoration:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ficha b{font-family:var(--f-mono);font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}

/* ---------- tipografía ---------- */
.dis{font-family:var(--f-dis);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em}
.mono{font-family:var(--f-mono)}
.kick{position:absolute;left:156px;top:62px;z-index:10;display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.kick::before{content:"";width:16px;height:16px;background:var(--acc)}
.s-rojo .kick::before,.s-azul .kick::before{background:var(--ama)}
.title{position:absolute;left:156px;top:112px;z-index:10;margin:0;font-family:var(--f-txt);font-weight:700;font-size:64px;line-height:1.03;letter-spacing:-.028em;text-wrap:balance;color:var(--fg)}
.mk{background:linear-gradient(transparent 12%,var(--ama) 12%,var(--ama) 92%,transparent 92%);padding:0 .12em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--tinta)}
.lede{font-size:28px;line-height:1.36;letter-spacing:-.01em;color:var(--fg2)}
.txt{font-size:22px;line-height:1.4;color:var(--fg2)}
.hdr{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.src{position:absolute;left:156px;bottom:30px;z-index:10;max-width:1280px;font-family:var(--f-mono);font-size:12.5px;line-height:1.45;color:var(--mut)}
.acc{color:var(--acc)}

/* ---------- plano de la prenda (dibujo técnico + zona de estampado · magic move) ---------- */
.plano{position:absolute;z-index:20;view-transition-name:plano}
.plano svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plano .zona{position:absolute;left:29%;right:29%;top:27%;height:44%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--acc)}
.plano .zona::before{content:"zona de estampado";position:absolute;left:0;top:-22px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.plano.mini .zona::before{display:none}
.cota{position:absolute;z-index:21;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.cota::before{content:"";position:absolute;left:0;right:0;top:-10px;height:1.5px;background:var(--fg)}
.cota::after{content:"";position:absolute;left:0;right:0;top:-15px;height:11px;border-left:1.5px solid var(--fg);border-right:1.5px solid var(--fg)}

/* ---------- máscara de prenda para fotografía ---------- */
.m-tee{position:absolute;overflow:hidden;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 380'%3E%3Cpath stroke='%23000' stroke-width='6' stroke-linejoin='round' d='M142 16C166 46 234 46 258 16L330 44 392 122 338 168 308 140V362H92V140L62 168 8 122 70 44Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 380'%3E%3Cpath stroke='%23000' stroke-width='6' stroke-linejoin='round' d='M142 16C166 46 234 46 258 16L330 44 392 122 338 168 308 140V362H92V140L62 168 8 122 70 44Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ---------- marco de medios (foto, captura o teléfono · magic move) ---------- */
.marco{position:absolute;z-index:6;overflow:hidden;background:var(--tinta);view-transition-name:marco}
.marco img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;max-width:none}
.marco.trama::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;background:radial-gradient(#000 1.1px,transparent 1.5px) 0 0/7px 7px}
.marco.nav{border:2px solid var(--tinta);border-radius:14px;background:#fff;box-shadow:14px 14px 0 var(--acc)}
.marco.nav::before{content:attr(data-url);position:absolute;left:0;right:0;top:0;height:40px;z-index:2;padding-left:86px;display:flex;align-items:center;background:var(--tinta) radial-gradient(circle,#fff 5px,transparent 5.5px) 12px 50%/22px 22px repeat-x;background-size:22px 22px;color:#fff;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;
  background-image:radial-gradient(circle at 24px 20px,#ff5f57 6px,transparent 6.5px),radial-gradient(circle at 46px 20px,#febc2e 6px,transparent 6.5px),radial-gradient(circle at 68px 20px,#28c840 6px,transparent 6.5px);background-repeat:no-repeat;background-size:100% 100%;background-position:0 0}
.marco.nav img{top:40px;height:calc(100% - 40px);object-position:left top}
.fono{position:absolute;z-index:8;width:340px;height:700px;border-radius:50px;padding:11px;background:var(--tinta);box-shadow:12px 12px 0 var(--acc)}
.fono .scr{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff}
.fono .scr::before{content:"";position:absolute;left:50%;top:10px;width:96px;height:26px;margin-left:-48px;border-radius:14px;background:#000;z-index:3}
.fono img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.fono.scroll img{animation:feed 16s 1.2s ease-in-out infinite alternate}
@keyframes feed{to{transform:translateY(calc(-100% + 678px))}}
.calm .fono.scroll img{animation:none}
.cap{position:absolute;z-index:22;font-family:var(--f-mono);font-size:12.5px;line-height:1.4;letter-spacing:.03em;color:var(--mut)}

/* ---------- consulta (la búsqueda cambia en su lugar · magic move) ---------- */
.consulta{position:absolute;z-index:30;height:62px;padding:0 26px 0 20px;display:flex;align-items:center;gap:14px;background:#fff;color:var(--tinta);border:2px solid var(--tinta);
  font-family:var(--f-mono);font-size:25px;white-space:nowrap;view-transition-name:consulta}
.consulta svg{flex:none;width:24px;height:24px}
.consulta i{width:12px;height:28px;background:var(--acc);animation:cur 1s steps(1) infinite}
@keyframes cur{50%{opacity:0}}
.calm .consulta i{animation:none}

/* ---------- muestra de color (KPI) y etiqueta colgante (precio) ---------- */
.sw{position:absolute;z-index:10;display:flex;flex-direction:column;background:#fff;color:var(--tinta);box-shadow:0 1px 0 rgba(20,22,26,.08),0 18px 36px rgba(20,22,26,.14)}
.sw .c{flex:1;min-height:0;padding:20px 24px;display:flex;align-items:flex-end;background:var(--acc);color:#fff;font-family:var(--f-dis);font-weight:900;font-size:136px;line-height:.8;letter-spacing:-.01em;white-space:nowrap}
.sw .c small{font-size:.42em;margin-left:.16em;letter-spacing:.01em}
.sw .c.t{background:var(--tinta)} .sw .c.a{background:var(--ama);color:var(--tinta)} .sw .c.r{background:var(--rojo)} .sw .c.z{background:var(--azul)} .sw .c.g{background:var(--papel-2);color:var(--tinta)}
.sw .l{padding:14px 24px 18px;display:flex;flex-direction:column;gap:6px}
.sw .l s{text-decoration:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.sw .l p{font-size:20px;line-height:1.3;color:#2A2D33}
.sw.tinta{view-transition-name:tinta}
.tag{position:absolute;z-index:12;padding:74px 30px 28px;background:#fff;color:var(--tinta);border:2px solid var(--tinta);display:flex;flex-direction:column;gap:10px;
  clip-path:polygon(50px 0,calc(100% - 50px) 0,100% 50px,100% 100%,0 100%,0 50px)}
.tag::before{content:"";position:absolute;left:50%;top:22px;width:22px;height:22px;margin-left:-11px;border-radius:50%;border:2px solid var(--tinta);background:var(--papel)}
.tag .p{font-family:var(--f-dis);font-weight:900;font-size:150px;line-height:.82;letter-spacing:-.01em;white-space:nowrap}
.tag s{text-decoration:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.tag p{font-size:20px;line-height:1.32;color:#2A2D33}
.tag.win{background:var(--acc);color:#fff;border-color:var(--acc)} .tag.win s,.tag.win p{color:#fff}
.care{border:2px dashed var(--line2);padding:20px 24px;display:flex;flex-direction:column;gap:10px}

/* ---------- datos ---------- */
.tbl{border-collapse:collapse;font-size:21px;line-height:1.3;color:var(--fg2);z-index:10;border-top:3px solid var(--line2)}
.tbl th{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--mut);padding:12px 14px;border-bottom:1.5px solid var(--line2)}
.tbl td{padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td.k{font-weight:700;font-size:25px;letter-spacing:-.015em;color:var(--fg);white-space:nowrap}
.tbl td.q{font-family:var(--f-mono);font-size:18.5px;color:var(--fg);white-space:nowrap}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--f-mono);white-space:nowrap;color:var(--fg)}
.tbl tr.me td{background:var(--ama);color:var(--tinta)} .tbl tr.me td.k,.tbl tr.me td.q,.tbl tr.me b{color:var(--tinta)}
.tbl b{color:var(--fg);font-weight:700}
.brow{display:grid;grid-template-columns:210px 1fr;align-items:center;column-gap:18px;height:50px;font-size:21px}
.brow .nm{font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.brow .tr{position:relative;height:34px}
.bar{position:absolute;left:0;top:0;bottom:0;background:var(--tinta);transform-origin:left center}
.brow .v{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:12px;font-family:var(--f-mono);font-size:19px;color:var(--fg);white-space:nowrap}
.brow.me .bar{background:var(--acc)} .brow.me .nm{color:var(--acc)}
.brow.off .bar{background:repeating-linear-gradient(135deg,var(--tinta) 0 3px,transparent 3px 8px)}
.li{display:grid;grid-template-columns:54px 1fr;column-gap:8px;padding:19px 0;border-top:1.5px solid var(--line2)}
.li .n{font-family:var(--f-dis);font-weight:900;font-size:30px;line-height:1;color:var(--acc)}
.s-rojo .li .n,.s-azul .li .n{color:var(--ama)}
.li b{display:block;font-weight:700;font-size:29px;line-height:1.1;letter-spacing:-.02em;color:var(--fg)}
.li span:not(.n){display:block;grid-column:2;margin-top:6px;font-size:20px;line-height:1.35;color:var(--fg2)}
.big .li{padding:24px 0} .big .li b{font-size:35px} .big .li span:not(.n){font-size:23px;margin-top:8px} .big .li .n{font-size:38px}
.pill{background:transparent;border-radius:0;display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1.5px solid var(--line2);font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--fg)}
.pill.on{background:var(--ama);border-color:var(--ama);color:var(--tinta)}

/* ---------- movimiento: la tinta entra con racleta (máscara) ---------- */
@keyframes racleta{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes racleta-b{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:racleta .7s cubic-bezier(.7,0,.2,1) both;mix-blend-mode:normal}
html[data-dir="back"]::view-transition-new(root){animation-name:racleta-b}
::view-transition-group(band),::view-transition-group(ficha){animation-duration:0s}
::view-transition-group(plano),::view-transition-group(marco),::view-transition-group(tinta){animation-duration:.9s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-group(consulta){animation-duration:.6s}
::view-transition-old(consulta),::view-transition-new(consulta){height:100%;width:auto}
::view-transition-old(marco),::view-transition-new(marco),::view-transition-old(tinta),::view-transition-new(tinta){height:100%;width:100%;object-fit:cover}
@keyframes a-ink{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.is-active.fresh [data-a="ink"]{animation-name:a-ink;animation-duration:.8s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
.hud button:hover{background:var(--rojo)}
.band .lomo .pg{font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:0}