/* CSS de la tienda (public/index.html) -- se referencia desde
con por completo al montar (ver support.js: dc.replaceWith).
Mientras tanto -o si JS está desactivado- se oculta en vez de mostrar el
template crudo ({{ ... }}); el de abajo cubre ese caso. */
x-dc{display:none}
/* envuelve solo por semantica (Fase 8). Sin display:contents,
queda con la misma altura que (nada mas dentro la mayor
parte del tiempo) y position:sticky no tiene "espacio" dentro de su padre
para quedarse fijo -- se va con el scroll en vez de pegarse arriba. */
header{display:contents}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html{scroll-behavior:auto}
}
body{margin:0;background:var(--cream);color:var(--brown-dark);font-family:Poppins,sans-serif;-webkit-font-smoothing:antialiased}
/* Se agrega a y (ver componentDidUpdate) mientras cualquier
overlay está abierto -- carrito, modal de producto, wizard de torta,
formulario de pedido o el menú mobile -- para que no se pueda hacer
scroll en el fondo detrás del overlay. Se aplica a los dos elementos
porque ya trae `overflow-x:hidden` puesto arriba, y con eso el
navegador deja de "heredarle" el overflow a para decidir el
scroll de la ventana -- overflow:hidden solo en no alcanza a
bloquear nada; hay que ponerlo también en . */
html.no-scroll,body.no-scroll{overflow:hidden}
a{color:var(--pink);text-decoration:none}
a:hover{color:var(--pink-hover)}
::selection{background:var(--pink-light);color:var(--brown-dark)}
input,textarea,select,button{font-family:Poppins,sans-serif}
input:focus,textarea:focus,select:focus{outline:2px solid var(--pink);outline-offset:1px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--pink-light);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(6deg)}}
@keyframes floaty3{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(-4deg)}}
@keyframes fadeup{0%{transform:translateY(18px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}
@keyframes wapulse{0%,100%{box-shadow:0 8px 22px rgba(37,211,102,.45)}50%{box-shadow:0 8px 40px rgba(37,211,102,.7)}}
/* "Toque" llamativo del botón flotante del carrito: un vaivén corto cada
pocos segundos (no continuo, para no ser molesto) que invita a tocarlo.
Solo se aplica cuando hay algo en el carrito (ver cartBtnStyle) -- no
tiene sentido llamar la atención hacia un pedido vacío. */
@keyframes cartwiggle{
0%,55%,100%{transform:translateY(0) rotate(0)}
8%{transform:translateY(-9px) rotate(-9deg)}
16%{transform:translateY(0) rotate(9deg)}
24%{transform:translateY(-5px) rotate(-5deg)}
32%{transform:translateY(0) rotate(0)}
}
[data-ham]{display:none}
/* El parser DC ignora aspect-ratio inline; se aplica aquí (quirk documentado).
min-height:0 + img absoluta: sin ellos el tamaño intrínseco del PNG infla el contenedor flex. */
[data-featimg],[data-cataimg]{aspect-ratio:1/1!important;min-height:0!important}
[data-featimg]>img,[data-cataimg]>img{position:absolute!important;inset:0!important}
/* ===== DISEÑO RESPONSIVE (todo lo que cambia en pantallas angostas) =====
Cada regla usa un atributo [data-algo] puesto a mano en el HTML de abajo
(nav, hero, categorías, destacados, catálogo) en vez de clases CSS
normales -- es el patrón que usa todo este archivo. Para saber qué
parte de la página cambia una regla, busca ese mismo data-algo en el
HTML: por ejemplo [data-herotitle] es el del hero. */
@media(max-width:880px){
[data-dnav]{display:none!important}
[data-ham]{display:inline-flex!important}
[data-cartbtn]{display:none!important}
[data-cartlabel]{display:none!important}
[data-pad]{padding-left:18px!important;padding-right:18px!important}
[data-herotext]{text-align:center!important;align-items:center!important;gap:12px!important}
[data-herotext]>p{font-size:15px!important}
#inicio{padding-top:16px!important}
[data-heroinner]{padding:20px 18px!important;gap:10px!important}
[data-herotitle]{font-size:28px!important}
[data-heroctas]{justify-content:center!important;width:100%}
[data-heroalt]{background:none!important;border:none!important;padding:4px 0!important;font-size:14.5px!important;text-decoration:underline}
[data-herophoto]{width:58vw!important}
[data-sticker]{width:52px!important}
[data-comocard]{padding-bottom:100px!important}
[data-comorabbit]{width:82px!important;right:16px!important}
[data-featgrid]{grid-template-columns:1fr 1fr!important;gap:12px!important}
[data-featbody]{padding:11px 12px 13px!important;gap:6px!important}
[data-featcat]{font-size:10px!important;letter-spacing:.3px!important}
[data-featname]{font-size:14px!important}
[data-featprice]{font-size:13px!important}
[data-featcta]{font-size:12px!important;padding:9px 8px!important}
[data-featmore]{display:flex!important}
[data-featfav]{top:auto!important;bottom:10px!important;right:10px!important;font-size:10px!important}
[data-trustgrid]{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
[data-trustchip]{padding:9px 12px!important;gap:8px!important;justify-content:center}
[data-trustchip] span:last-child{font-size:12.5px!important}
[data-catasec]{padding-top:20px!important}
[data-catahead]{margin-bottom:14px!important}
[data-catahead] h1{font-size:24px!important}
[data-catahead] p{font-size:13.5px!important}
[data-catafilters]{padding:14px!important;margin-bottom:14px!important}
[data-catasearch]{min-width:0!important}
[data-catasearch] input{padding:11px 12px 11px 38px!important;font-size:14px!important}
[data-catasort]{padding:11px 12px!important;font-size:13px!important}
[data-catachips],[data-cataquick]{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
[data-catachips]::-webkit-scrollbar,[data-cataquick]::-webkit-scrollbar{display:none}
[data-catachips]>*,[data-cataquick]>*{flex-shrink:0;white-space:nowrap}
[data-catachips]{position:sticky;top:73px;z-index:30;background:var(--cream);margin:-4px -18px 12px!important;padding:10px 18px!important}
[data-quicklabel]{display:none!important}
[data-catacount]{margin-bottom:10px!important}
[data-catacount] span{font-size:13px!important}
[data-catagrid]{grid-template-columns:1fr 1fr!important;gap:12px!important}
[data-cataimg]{aspect-ratio:1/1!important}
[data-cataimg] img{position:absolute;inset:0}
[data-catatext]{padding:10px 12px 12px!important;gap:5px!important}
[data-cataeyebrow]{display:none!important}
[data-cataname]{font-size:14.5px!important}
[data-cataport]{font-size:11.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-catabadge]{display:none!important}
[data-cataprice]{font-size:14.5px!important}
[data-catacta]{font-size:12.5px!important;padding:10px 8px!important}
#categorias{padding-top:34px!important}
[data-cathead]{margin-bottom:18px!important}
[data-cathead]>div{font-size:22px!important}
[data-cathead] h2{font-size:26px!important}
[data-cathead] p{font-size:14px!important;padding:0 10px}
[data-catgrid]{grid-template-columns:1fr 1fr!important;gap:12px!important}
[data-catimg]{aspect-ratio:1/1!important}
[data-cattext]{padding:11px 13px 13px!important}
[data-catname]{font-size:15px!important;margin:0 0 2px!important}
[data-catdesc]{display:none!important}
[data-catlink]{font-size:12.5px!important}
[data-catcard]:last-child{grid-column:1/-1}
[data-catcard]:last-child [data-catimg]{aspect-ratio:21/9!important}
[data-catcard]:last-child [data-catdesc]{display:block!important;font-size:12.5px!important;margin:0 0 8px!important}
}