/* CASITA PRÁCTICA — bento amable: bloques de colores, píldora flotante, adhesivo giratorio */
.tt-home{--sage:#48684A;--sage-l:#DCE8D2;--clay:#B9793F;--clay-l:#F2DCC3;--sun:#F1C24B;--cream:#F7F3EA}
.tt-home .tt-announce{background:var(--sage)}
.tt-home .tt-header{position:sticky;top:12px;margin:12px auto 0;width:min(1120px,100% - 24px);border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(43,55,44,.1)}
.tt-home .tt-header-row{min-height:60px;padding-inline:1.1rem}
.tt-home .tt-logo-mark{border-radius:50%}
.tt-home .tt-nav a{border:0;padding:.45rem .9rem;border-radius:999px}
.tt-home .tt-nav a:hover,.tt-home .tt-nav .current-menu-item a{background:var(--sage-l);color:var(--sage)}
.tt-home .tt-btn,.tt-home .woocommerce a.button{border-radius:999px}
.tt-home .tt-cart-count{background:var(--clay)}
@media (max-width:820px){.tt-home .tt-header{border-radius:22px}.tt-home .tt-nav{border-radius:0 0 22px 22px}}

.cz-hero{padding:clamp(1.4rem,3vw,2.4rem) 0 0}
.cz-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-template-areas:"m m m m m m m a a a a a" "m m m m m m m a a a a a" "q1 q1 q1 q1 s s q2 q2 q2 q2 q2 q2";gap:16px}
.cz-b{border-radius:32px;position:relative;overflow:hidden}
.cz-main{grid-area:m;background:var(--sage);color:#F6F3E6;padding:clamp(1.6rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
.cz-eyebrow{font:700 .78rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#CFE3C2;margin-bottom:.8rem}
.cz-main h1{font:700 clamp(2.4rem,6vw,5rem)/.98 var(--font-head);color:#fff;letter-spacing:-.025em;margin:0 0 1rem}
.cz-main h1 em{font-style:italic;color:var(--sun)}
.cz-lead{color:#E6EED9;font-size:1.1rem;max-width:30em}
.cz-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.cz-main .tt-btn-primary{background:var(--sun);color:#2B372C}
.cz-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.cz-ghost:hover{background:rgba(255,255,255,.14)}
.cz-art{grid-area:a;background:var(--clay-l);display:grid;place-items:center;padding:1rem}
.cz-art svg{width:100%;height:auto;overflow:visible}
.cz-stamp{grid-area:s;background:var(--sun);display:grid;place-items:center;aspect-ratio:1;min-height:0;color:#2B372C}
.cz-stamp svg{position:absolute;inset:6%;width:88%;height:88%;animation:tt-spin 18s linear infinite}
.cz-ring{font:800 15.5px var(--font-body);letter-spacing:.12em;fill:#2B372C}
.cz-stamp span{position:relative;font:700 2.2rem/1 var(--font-head);text-align:center}
.cz-stamp small{display:block;font:700 .7rem var(--font-body);letter-spacing:.14em;text-transform:uppercase}
@keyframes tt-spin{to{transform:rotate(360deg)}}
.cz-quick{display:flex;align-items:center;padding:1.2rem 1.6rem;text-decoration:none;color:var(--ink);font-size:1.05rem;transition:transform .35s var(--ease)}
.cz-quick b{font:700 1.5rem var(--font-head);margin-right:.5rem}
.cz-quick:hover{transform:translateY(-4px) rotate(-.6deg)}
.cz-q1{grid-area:q1;background:var(--clay-l)}.cz-q2{grid-area:q2;background:var(--sage-l)}
@media (max-width:820px){.cz-bento{grid-template-columns:1fr 1fr;grid-template-areas:"m m" "a a" "s q1" "q2 q2"}.cz-b{border-radius:26px}.cz-stamp{min-height:150px}}

.cz-wave{display:block;width:100%;height:70px;fill:var(--soft);margin-top:clamp(1.2rem,3vw,2.4rem)}
.cz-cats{background:var(--soft);padding:0 0 clamp(3rem,7vw,6rem)}
.cz-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.cz-head h2{font-size:clamp(1.8rem,4.4vw,3.2rem);margin:0;letter-spacing:-.02em}
.cz-head a{font-weight:700;color:var(--sage)}
.cz-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cz-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:190px;padding:1.4rem;border-radius:28px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.cz-tile::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-40px;bottom:-50px;background:rgba(255,255,255,.35);transition:transform .5s var(--ease)}
.cz-tile:hover{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 22px 40px -18px rgba(43,55,44,.4)}
.cz-tile:hover::after{transform:scale(1.5)}
.cz-t1{grid-column:span 3;background:var(--sage);color:#fff}
.cz-t2{grid-column:span 3;background:var(--sun)}
.cz-t3{grid-column:span 2;background:var(--clay-l)}.cz-t4{grid-column:span 2;background:var(--sage-l)}.cz-t5{grid-column:span 2;background:#fff}
.cz-tn{font:700 .8rem var(--font-body);letter-spacing:.14em;opacity:.7}
.cz-tt{font:700 clamp(1.5rem,3vw,2.4rem)/1.05 var(--font-head);position:relative}
.cz-tg{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;color:var(--ink)}
@media (max-width:820px){.cz-tiles{grid-template-columns:1fr 1fr}.cz-t1,.cz-t2,.cz-t3,.cz-t4,.cz-t5{grid-column:span 1}.cz-t1{grid-column:span 2}}

.cz-how{padding:clamp(3rem,7vw,6rem) 0}
.cz-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cz-card{background:#fff;border:2px solid var(--ink);border-radius:26px;padding:1.6rem;box-shadow:6px 6px 0 var(--clay);transition:transform .3s var(--ease),box-shadow .3s}
.cz-card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--sage)}
.cz-card b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);font:700 1.2rem var(--font-head);margin-bottom:.8rem}
.cz-card h3{font-size:1.4rem}.cz-card p{margin:0;color:var(--muted)}
@media (max-width:820px){.cz-strip{grid-template-columns:1fr}}

.cz-band{background:var(--clay);color:#fff}
.cz-band-in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:clamp(2.4rem,6vw,4.4rem) 0}
.cz-band h2{color:#fff;margin:0 0 .3rem;font-size:clamp(1.8rem,4.4vw,3rem)}.cz-band p{margin:0;opacity:.95}
.cz-btn-cream{background:var(--cream);color:var(--ink)}

.tt-home .woocommerce ul.products li.product{border-radius:26px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--sage-l)}
.tt-home .woocommerce ul.products li.product:hover{box-shadow:8px 8px 0 var(--clay);transform:translate(-3px,-3px)}
.tt-home .woocommerce ul.products li.product a img{border-radius:18px}
