/* OkCamisetas · pulido visual: sombras en capas, transiciones suaves, microinteracciones */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 1px rgba(20,37,30,.04),0 2px 6px rgba(20,37,30,.05);
  --sh-2:0 1px 2px rgba(20,37,30,.05),0 6px 14px rgba(20,37,30,.06),0 16px 34px rgba(20,37,30,.07);
  --sh-3:0 2px 4px rgba(20,37,30,.06),0 12px 24px rgba(20,37,30,.09),0 30px 60px rgba(20,37,30,.14);
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:var(--ease)}
html{scroll-padding-top:90px}
::selection{background:var(--mustard-2);color:var(--green)}

/* base: todo lo interactivo responde con suavidad */
a,button,.btn,.pcard,.post-card,.tpl-item,.sw,.zone-chip,.font-opt,.size-box,.layer,.pay-opt,summary,input,select,textarea,.icon-btn{transition:color .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease),opacity .22s var(--ease)}
.btn{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--sh-1);will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 22px rgba(29,62,51,.22)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1);transition-duration:.08s}
.btn-primary:hover{box-shadow:0 10px 24px rgba(219,160,52,.45)}
.btn-ghost:hover{box-shadow:0 8px 18px rgba(20,37,30,.1)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(219,160,52,.28);border-color:var(--green-2)}

/* cabecera */
.site-header{transition:box-shadow .3s var(--ease),background-color .3s var(--ease),backdrop-filter .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(20,37,30,.1);background-color:rgba(250,244,230,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--mustard);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.main-nav a:hover::after,.main-nav a[aria-current]::after{transform:scaleX(1)}
.cart-n{animation:pop .4s var(--ease-out)}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.25)}100%{transform:scale(1)}}

/* tarjetas */
.pcard,.post-card,.box,.step,.tpl-item{box-shadow:var(--sh-1)}
.pcard:hover,.post-card:hover,.tpl-item:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.pcard-img img,.pcard-img svg{transition:transform .6s var(--ease-out)}
.pcard:hover .pcard-img img{transform:scale(1.06) rotate(-.6deg)}
.post-card:hover h2{color:var(--green-2)}
.step:hover{box-shadow:var(--sh-2)}

/* selectores de color y opciones */
.sw{transition:transform .25s var(--ease-out),box-shadow .25s}
.sw:hover{transform:scale(1.14)}
.sw.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--green),var(--sh-1)}
.size-box.has{box-shadow:0 6px 16px rgba(29,62,51,.12);transform:translateY(-2px)}
.layer:hover{transform:translateX(3px);box-shadow:var(--sh-1)}
.font-opt:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.pay-opt:hover{box-shadow:var(--sh-2)}

/* escenario del personalizador */
.stage-box{box-shadow:var(--sh-2);transition:box-shadow .4s var(--ease)}
.stage-box:hover{box-shadow:var(--sh-3)}
.dpi-badge{transition:color .3s,background .3s,transform .3s var(--ease-out)}
#btn-add{box-shadow:0 8px 22px rgba(219,160,52,.35)}
#btn-add:hover{box-shadow:0 14px 30px rgba(219,160,52,.5)}
.sum-total strong{transition:transform .25s var(--ease-out)}

/* avisos y cookies con entrada suave */
.flash,.notice,.warn{animation:slideIn .45s var(--ease-out) both}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cookie{animation:riseIn .6s var(--ease-out) .5s both;box-shadow:var(--sh-3)}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.wa-float{animation:riseIn .6s var(--ease-out) 1s both;box-shadow:0 8px 24px rgba(37,211,102,.4)}
.wa-float:hover{transform:scale(1.08) rotate(-4deg)}

/* aparición al hacer scroll (solo si hay JS; el contenido siempre acaba visible) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* esqueleto mientras carga una miniatura */
canvas[data-tpl],canvas[data-tplc]{background:linear-gradient(100deg,#f1ead6 30%,#faf4e6 50%,#f1ead6 70%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
canvas.ready{animation:none;background:none}
@keyframes shimmer{to{background-position:-120% 0}}

/* acordeones */
details{transition:background-color .25s}
details[open]{background:#fff}
details summary{cursor:pointer}
details[open] p{animation:slideIn .35s var(--ease-out) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  @view-transition{navigation:none}
}

.main-nav a{white-space:nowrap}
@media (min-width:941px){.main-nav{gap:clamp(10px,1.4vw,22px)}}
.brand{flex:none}.search{flex:0 1 190px;min-width:150px}
@media (min-width:941px) and (max-width:1320px){.main-nav a{font-size:.92rem}.main-nav{gap:clamp(8px,1vw,14px)}}
.pdp-grid>*{min-width:0}.tpl-strip{max-width:100%}
@media (min-width:941px) and (max-width:1500px){.main-nav a{font-size:.9rem}.main-nav{gap:clamp(8px,.9vw,14px)}.search{flex-basis:150px;min-width:120px}.site-header .bar{gap:14px}}

.delivery{display:flex;align-items:center;gap:8px;margin:12px 0 4px;padding:10px 14px;border-radius:12px;background:#e9f3ec;color:var(--green,#1d3e33);font-weight:600;font-size:.95rem}

/* Menú: desplegable «Más prendas» */
.nav-more{position:relative}.nav-more summary{list-style:none;cursor:pointer;font-weight:700;white-space:nowrap;padding:0;display:flex;align-items:center;gap:4px}
.nav-more summary::-webkit-details-marker{display:none}.nav-more summary::after{content:"▾";font-size:.8em}
.nav-more-panel{position:absolute;top:calc(100% + 10px);left:-12px;z-index:50;min-width:190px;background:var(--cream,#fbf8ef);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #0002;padding:8px;display:flex;flex-direction:column}
.nav-more-panel a{padding:10px 12px;border-radius:8px}.nav-more-panel a:hover{background:#f1e9d3}
@media (max-width:1180px){.nav-more summary{padding:12px 8px;border-radius:8px}.nav-more-panel{position:static;box-shadow:none;border:0;background:none;padding:0 0 0 14px;min-width:0}}
@media (min-width:1181px){.main-nav{flex:1 1 auto;min-width:0;gap:clamp(8px,1vw,18px);font-size:.95rem}.search{flex:0 1 150px;min-width:100px}.site-header .bar{gap:12px}.main-nav a{font-size:.95rem}}