/* MOFT components v1.1. Requires tokens/moft-tokens.css. Paths are relative to the package root. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../fonts/nunito-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.moft{font-family:var(--moft-font);color:var(--moft-text-on-light);background:var(--moft-crema)}

/* Buttons: WhatsApp CTAs. Labels are fixed: "Encargar tarta" / "Reservar tarta". */
.moft-btn{font-family:var(--moft-font);font-weight:900;font-size:16px;line-height:1;padding:14px 24px;border-radius:var(--moft-radius-pill);border:0;display:inline-flex;gap:8px;align-items:center;cursor:pointer;text-decoration:none}
.moft-btn--primary{--btn-shadow:var(--moft-chocolate-deep);background:var(--moft-chocolate);color:var(--moft-crema)}
.moft-btn--secondary{--btn-shadow:var(--moft-salty-caramel-deep);background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
.moft-btn--outline-light{background:transparent;color:var(--moft-crema);box-shadow:inset 0 0 0 3px var(--moft-crema)}
/* Press animation on every .moft-btn (label pills and other non-clickable elements are not animated).
   Rest: hard offset shadow, no blur. Hover (hover-capable devices): lifts 1px up-left, shadow grows. Keyboard focus:
   same lift plus a Caramelo-deep outline. Press: moves 2px right / 3px down into a nearly flat shadow, so it looks
   pushed into the page. Only transform and box-shadow animate; none of it runs under prefers-reduced-motion. */
.moft-btn{--btn-shadow:var(--moft-chocolate-deep);box-shadow:2px 4px 0 var(--btn-shadow);transition:transform .12s ease,box-shadow .12s ease}
@media (hover:hover){.moft-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 5px 0 var(--btn-shadow)}}
.moft-btn:focus-visible{transform:translate(-1px,-1px);box-shadow:3px 5px 0 var(--btn-shadow);outline:3px solid var(--moft-caramelo-deep);outline-offset:2px}
.moft-btn:active{transform:translate(2px,3px);box-shadow:0 1px 0 var(--btn-shadow)}
@media (prefers-reduced-motion:reduce){.moft-btn{transition:none}}

/* Label pills: icon + word, always straight. Marker icon colors never change. */
.moft-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--moft-font);font-weight:900;font-size:16px;line-height:1;padding:6px 15px 6px 8px;border-radius:var(--moft-radius-pill)}
.moft-pill img{width:28px;height:28px;display:block}
.moft-pill--novedad{background:var(--moft-caramelo-light);color:var(--moft-caramelo-deep);box-shadow:2px 4px 0 var(--moft-caramelo-deep)}
.moft-pill--sin-gluten{background:var(--moft-pistacho-light);color:var(--moft-pistacho-deep);box-shadow:2px 4px 0 var(--moft-pistacho-deep)}
.moft-pill--vegano{background:var(--moft-pistacho);color:var(--moft-tiramisu);box-shadow:2px 4px 0 var(--moft-pistacho-deep);padding-left:15px}
.moft-pill--encargos{background:var(--moft-galleta);color:var(--moft-chocolate);box-shadow:2px 4px 0 var(--moft-chocolate)}
.moft-pill--oferta{background:var(--moft-strawberry-light);color:var(--moft-strawberry-deep);box-shadow:2px 4px 0 var(--moft-strawberry-deep)}

/* Price sticker and formula number */
.moft-price{display:inline-flex;font-family:var(--moft-font);font-weight:900;font-size:18px;padding:10px 20px;border-radius:var(--moft-radius-pill);background:var(--moft-salty-caramel);color:var(--moft-tiramisu);box-shadow:2px 4px 0 var(--moft-salty-caramel-deep);font-variant-numeric:tabular-nums}
.moft-formula{display:inline-block;font-family:var(--moft-font);font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border:2px solid currentColor;border-radius:var(--moft-radius-pill);color:var(--moft-chocolate)}

/* Cards */
.moft-card{background:var(--moft-whipped-cream);border-radius:var(--moft-radius-card);padding:24px}
.moft-card--dark{background:var(--moft-cacao);color:var(--moft-crema)}

/* Glaze: drip edge on top of a section. Element files are never recolored. */
.moft-drip-top{position:relative;padding-top:calc(13.3vw + 24px)}
.moft-drip-top > .moft-glaze{position:absolute;top:0;left:0;width:100%;height:auto;pointer-events:none}
/* Glaze: drip edge hanging under a container of the same exact color */
.moft-drip-container{display:block}
.moft-drip-container > .moft-drip-container__body{padding:24px 24px 8px;border-radius:var(--moft-radius-card) var(--moft-radius-card) 0 0}
.moft-drip-container > .moft-glaze{display:block;width:100%;height:auto;margin-top:-1px}
.moft-drip-container--chocolate > .moft-drip-container__body{background:var(--moft-element-chocolate);color:var(--moft-crema)}
.moft-drip-container--caramelo > .moft-drip-container__body{background:var(--moft-element-caramelo);color:var(--moft-tiramisu)}
.moft-drip-container--galleta > .moft-drip-container__body{background:var(--moft-element-galleta);color:var(--moft-tiramisu)}
/* Glaze: single corners */
.moft-corner-left{position:absolute;top:0;left:0;width:51%;height:auto}
.moft-corner-right{position:absolute;top:0;right:0;width:44%;height:auto}
/* Glaze: wave at the bottom (footer) */
.moft-wave-bottom{display:block;width:100%;height:auto;margin-bottom:-4px;position:relative;z-index:1}
.moft-footer{background:var(--moft-element-chocolate);color:var(--moft-crema);padding:28px 24px 48px}
/* Textures */
.moft-texture--crema{background:url("../elements/moft_texture_crema.png") center/cover}
.moft-texture--cacao{background:url("../elements/moft_texture_cacao.png") center/cover;color:var(--moft-crema)}

/* Instagram canvas (1080 px units via container queries: 1u = 1/1080 of the post width) */
.sticker{display:inline-flex;align-items:center;justify-content:center;font-weight:900;border-radius:999px}
.ig .fx{align-self:flex-start;font-size:calc(28*var(--u));font-weight:900;letter-spacing:.12em;text-transform:uppercase;border:calc(3*var(--u)) solid currentColor;border-radius:999px;padding:calc(6*var(--u)) calc(18*var(--u))}
.ig .sticker .ico{width:calc(56*var(--u));height:calc(56*var(--u))}
.ig .sticker span .ico{width:100%;height:100%}
.cover .c .ico{display:block}
.ig{aspect-ratio:4/5;position:relative;overflow:hidden;container-type:inline-size;border-radius:10px;box-shadow:0 1px 0 rgba(112,45,0,.18)}
.ig.story{aspect-ratio:9/16}
.ig *{--u:calc(100cqw/1080)}
.ig .pad{position:absolute;inset:calc(72*var(--u));display:flex;flex-direction:column;justify-content:flex-end;gap:calc(18*var(--u))}
.ig .lbl{font-size:calc(30*var(--u));font-weight:900;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:calc(12*var(--u));align-items:center}
.ig .lbl .egg{width:calc(30*var(--u));height:calc(30*var(--u))}
.ig .lbl .ico{width:calc(52*var(--u));height:calc(52*var(--u));flex:none}
.ig .hl{font-size:calc(100*var(--u));font-weight:900;line-height:1;letter-spacing:-.015em}
.ig .sb{font-size:calc(40*var(--u));font-weight:700;line-height:1.3}
.ig .wm{position:absolute;width:calc(210*var(--u))}
.ig .photo{position:absolute;left:0;right:0;top:0;display:grid;place-items:center}
.ig .photo .cake{width:56%;aspect-ratio:1/1;border-radius:50%}
.ig .photo .tagp{position:absolute;bottom:calc(24*var(--u));left:calc(24*var(--u));font-size:calc(24*var(--u));background:rgba(38,13,0,.75);color:#FFF4D9;font-weight:800;padding:calc(8*var(--u)) calc(16*var(--u));border-radius:99px}
.ig .drip{position:absolute;top:0;left:0;width:100%;height:calc(170*var(--u))}
.ig .blob{position:absolute}
.ig .pill{font-size:calc(36*var(--u));font-weight:900;padding:calc(22*var(--u)) calc(40*var(--u));border-radius:999px;display:inline-block}
.ig .safe{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,rgba(160,72,72,.16) 0 calc(12*var(--u)),transparent calc(12*var(--u)) calc(24*var(--u)));border:calc(3*var(--u)) dashed rgba(160,72,72,.7);font-size:calc(26*var(--u));font-weight:800;color:#A04848;display:grid;place-items:center}
.ig ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(26*var(--u))}
.ig li{display:flex;gap:calc(20*var(--u));align-items:center;font-size:calc(46*var(--u));font-weight:800}
.ig li .drop{width:calc(34*var(--u));height:calc(46*var(--u))}
.covers{display:flex;gap:18px;flex-wrap:wrap}
.cover{display:grid;justify-items:center;gap:6px;font-size:13px;font-weight:800}
.cover .c{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(112,45,0,.18)}
.cover .c svg{width:30px;height:30px}