/* Ocasella · Sobres */
.sb{--sb-script:'Pinyon Script', cursive;--sb-names:'Cormorant Garamond', Georgia, serif;--sb-display:'Cormorant Garamond', Georgia, serif;--sx:30%;
  position:relative;width:100%;aspect-ratio:1000/690;perspective:1800px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.sb:focus-visible{outline:3px solid #E8C99A;outline-offset:6px;border-radius:8px}
.sb::after{content:"";position:absolute;left:6%;right:6%;bottom:-7%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(43,35,32,.32),transparent);filter:blur(6px);z-index:-1;transition:opacity .6s}
.sb.is-open::after{opacity:.5}
.sb__flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.55,0,.2,1)}
.sb.is-back .sb__flipper{transform:rotateY(180deg)}
.sb__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sb__face--back{transform:rotateY(180deg);perspective:1600px}
:where(.sb) svg{display:block}

/* Anverso */
.sb__paper{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.06))}
.sb__address{position:absolute;left:12%;right:30%;top:46%;display:flex;flex-direction:column;color:var(--sb-ink-front)}
.sb__para{font-family:var(--sb-display);font-style:italic;font-size:clamp(11px,3.2cqw,20px);opacity:.75}
.sb__to{font-family:var(--sb-script);font-size:clamp(20px,7.6cqw,46px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:.08em;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 25%,transparent)}
.sb__from{font-family:var(--sb-display);font-size:clamp(10px,2.6cqw,16px);margin-top:.5em;opacity:.7}
.sb{container-type:inline-size}
.sb__stamp{position:absolute;right:6%;top:8%;width:13%;transform:rotate(3deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.sb__postmark{position:absolute;right:12.5%;top:13%;width:30%;color:rgba(35,38,58,.5);mix-blend-mode:multiply;transform:rotate(-8deg)}
.sb[data-material="terciopelo"] .sb__postmark,.sb__postmark:where(.dark){mix-blend-mode:normal}
.sb-stamp-txt,.sb-mono{font-family:var(--sb-names);font-style:italic;font-weight:600}
.sb__postmark text{font-family:'Jost', system-ui, sans-serif;font-weight:500}

/* Reverso */
.sb__inside,.sb__pocket{position:absolute;inset:0;width:100%;height:100%}
.sb__inside{z-index:0}
.sb__pocket{z-index:3;pointer-events:none}
.sb__card{position:absolute;z-index:2;left:5.5%;right:5.5%;top:5%;height:90%;background:#FFFDF9;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.06) inset,0 6px 18px -10px rgba(0,0,0,.4);
  transition:transform 1.05s cubic-bezier(.2,.8,.2,1) .65s;opacity:0}
.sb.is-back .sb__card{opacity:1}
.sb__card-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:9% 6% 0;opacity:0;transition:opacity .45s ease .85s}
.sb__card-in p{margin:0 0 .4em;font:500 clamp(7px,1.9cqw,11px)/1.2 'Jost', system-ui, sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#6B5F57}
.sb__card-in strong{font-family:var(--sb-names);font-weight:500;font-size:clamp(18px,6.4cqw,40px);line-height:1.1;color:#2B2320}
.sb__card-in span{font-family:var(--sb-display);font-size:clamp(10px,2.8cqw,17px);color:#9E3A2F;margin-top:.3em}
.sb.is-open .sb__card{transform:translateY(-56%)}
.sb.is-open .sb__card--rich{transform:translateY(var(--sb-rise,-56%))}
.sb__cardwrap{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:inset(-900% -900% 0 -900%)}
.sb__card--rich{background:none;box-shadow:none;border-radius:0}
.sb__cover{position:absolute!important;left:0;top:0;margin:0!important;transform-origin:0 0;opacity:1!important;transition:none!important;pointer-events:none}
.sb.is-flying .sb__cardwrap{clip-path:inset(-900%);transition:clip-path .5s ease .3s}
.sb.is-flying .sb__inside,.sb.is-flying .sb__pocket,.sb.is-flying .sb__flap,.sb.is-flying .sb__closure,.sb.is-flying::after{opacity:0;transition:opacity .45s ease .3s}
.sb.is-open .sb__card-in{opacity:1}

.sb__flap{position:absolute;left:0;right:0;top:0;height:63.77%;z-index:5;transform-origin:50% 0;
  transition:transform .85s cubic-bezier(.45,0,.2,1) .25s,z-index 0s linear .72s;filter:drop-shadow(0 3px 3px rgba(0,0,0,.12))}
.sb__flap svg{width:100%;height:100%;overflow:visible}
.sb__flap-in{opacity:0;transition:opacity 0s linear .66s}
.sb__flap-out{transition:opacity 0s linear .66s}
.sb.is-open .sb__flap{transform:rotateX(180deg);z-index:1;filter:none}
.sb.is-open .sb__flap-in{opacity:1}
.sb.is-open .sb__flap-out{opacity:0}

.sb__closure{position:absolute;inset:0;z-index:6;pointer-events:none}
.sb-seal,.sb-sticker,.sb-flower,.sb-bow,.sb-tag{position:absolute;left:50%;top:var(--sb-cy)}
.sb-seal{width:27%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 9px rgba(60,25,20,.42))}
.sb-seal__h{position:absolute;inset:0;transition:transform .7s cubic-bezier(.3,0,.2,1),opacity .5s ease .2s}
.sb-seal__h svg{width:100%;height:100%}
.sb-seal__h--l{clip-path:polygon(0 0,53% 0,48% 30%,55% 55%,47% 78%,52% 100%,0 100%)}
.sb-seal__h--r{clip-path:polygon(52% 0,100% 0,100% 100%,51% 100%,46% 78%,54% 55%,47% 30%)}
.sb:hover:not(.is-open) .sb-seal__h,.sb:hover:not(.is-open) .sb-sticker svg{transform:scale(1.04)}
.sb.is-open .sb-seal__h--l{transform:translate(-38%,24%) rotate(-24deg);opacity:0}
.sb.is-open .sb-seal__h--r{transform:translate(38%,24%) rotate(22deg);opacity:0}

.sb-sticker{width:21%;aspect-ratio:1;transform:translate(-50%,-50%);transform-origin:50% 0;filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));transition:transform .7s cubic-bezier(.3,0,.2,1),opacity .4s ease .3s}
.sb-sticker svg{transition:transform .3s}
.sb.is-open .sb-sticker{transform:translate(-50%,-50%) translate(30%,-45%) rotate(28deg) scale(.8);opacity:0}

.sb-ribbon i{position:absolute;top:calc(var(--sb-cy) - 3.6%);height:7.2%;width:50.4%;box-shadow:0 2px 3px rgba(0,0,0,.18);transition:transform .8s cubic-bezier(.4,0,.2,1) .1s,opacity .5s ease .35s}
.sb-ribbon__l{left:0}
.sb-ribbon__r{right:0}
.sb-bow{width:30%;transform:translate(-50%,-42%);filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .4s ease .1s}
.sb.is-open .sb-ribbon__l{transform:translateX(-70%);opacity:0}
.sb.is-open .sb-ribbon__r{transform:translateX(70%);opacity:0}
.sb.is-open .sb-bow{transform:translate(-50%,-42%) translateY(-30%) rotate(-25deg) scale(.4);opacity:0}

.sb-twine{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2));transition:opacity .5s ease .1s}
.sb-tag{width:13%;transform:translate(-50%,-6%) rotate(-8deg);transform-origin:50% 0;filter:drop-shadow(0 5px 5px rgba(0,0,0,.25));transition:transform .8s cubic-bezier(.5,0,.6,1),opacity .5s ease .3s;animation:sb-swing 3.4s ease-in-out infinite}
@keyframes sb-swing{50%{transform:translate(-50%,-6%) rotate(-3deg)}}
.sb.is-open .sb-twine{opacity:0}
.sb.is-open .sb-tag{animation:none;transform:translate(-50%,60%) rotate(30deg);opacity:0}

.sb-flower{width:26%;transform:translate(-50%,-62%) rotate(-8deg);filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .5s ease .2s}
.sb.is-open .sb-flower{transform:translate(-50%,-62%) translate(-30%,-40%) rotate(-30deg);opacity:0}

/* Brillo metalizado: sigue al dedo o al ratón */
.sb__sheen{position:absolute;inset:0;border-radius:8px;pointer-events:none;opacity:0;z-index:7;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 45%,rgba(255,240,210,.16) 52%,transparent 64%) var(--sx) 0/260% 100% no-repeat;mix-blend-mode:soft-light;transition:opacity .5s}
.sb[data-material="metal"] .sb__sheen{opacity:1}
.sb[data-material="metal"].is-open .sb__sheen{opacity:0}

.sb--instant,.sb--instant *{transition:none!important}

/* Tarjeta en vuelo hacia la portada */
.sb-morph{position:fixed;overflow:hidden;pointer-events:none;box-shadow:0 30px 60px -30px rgba(43,35,32,.45),0 0 0 1px rgba(0,0,0,.05) inset;will-change:left,top,width,height}
.sb-morph__a{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.sb-morph__b{position:absolute!important;left:50%;top:0;margin:0!important;transform-origin:50% 0;background:transparent!important;box-shadow:none!important;border-radius:0!important;opacity:0}
.sb-morph__b::before{display:none!important}
.sb-morph__frame{position:absolute;inset:12px;border:1px solid rgba(43,35,32,.1);border-radius:14px;opacity:0}

@media (prefers-reduced-motion:reduce){
  .sb *{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}
.sb--mini{cursor:inherit}.sb--mini::after{filter:blur(3px)}