/* ==========================================================================
   Patitas · piel "Pup" (2026-09-26)
   Naranja cálido y juguetón, contornos gruesos con sombra plana tipo sticker,
   títulos en Baloo 2, huellitas animadas y formas redondas.
   ========================================================================== */
:root{--p-orange:#F26B1D;--p-sun:#FFC43D;--p-mint:#2BB9A2;--p-ink:#2A1A0F;--p-cream:#FFFBF5}
.tt-pup h1,.tt-pup h2,.tt-pup h3{font-family:'Baloo 2',sans-serif;letter-spacing:-.01em;color:var(--p-ink)}
.tt-pup .r-btn,.tt-pup .woocommerce a.button,.tt-pup .woocommerce button.button{border-radius:999px;border:2.5px solid var(--p-ink);box-shadow:4px 4px 0 var(--p-ink);font-weight:800;transition:transform .15s,box-shadow .15s}
.tt-pup .r-btn:hover,.tt-pup .woocommerce a.button:hover,.tt-pup .woocommerce button.button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--p-ink)}
.tt-pup .r-announce{background:var(--p-ink)}
.tt-pup .r-logo{font-family:'Baloo 2',sans-serif;font-size:1.7rem;color:var(--p-orange);font-weight:800}
.tt-pup .r-logo::before{content:"🐾";margin-right:.3rem;font-size:.85em}
.tt-pup .r-search{border-radius:999px;border-width:2px}
.tt-pup .r-cats a:hover,.tt-pup .r-cats a.is-on{color:var(--p-orange);border-bottom-color:var(--p-orange)}

/* Héroe */
.p-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#FF8A3D,#F26B1D 55%,#E85A10);color:#fff;isolation:isolate}
.p-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center;padding:3.6rem 0 6rem}
.p-tag{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--p-orange);font-weight:800;font-size:.88rem;padding:.45rem .95rem;border-radius:999px;border:2.5px solid var(--p-ink);box-shadow:3px 3px 0 var(--p-ink);margin-bottom:1.2rem}
.p-tag svg{width:16px;height:16px}
.p-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98;font-weight:800;margin:0 0 .4em;max-width:12ch;text-shadow:3px 3px 0 rgba(42,26,15,.25)}
.p-hero h1 span{color:var(--p-sun);display:inline-block;transform:rotate(-3deg)}
.p-hero p{font-size:1.15rem;max-width:42ch;margin-bottom:1.8rem;color:#FFF3E8;font-weight:600}
.p-pets{display:flex;flex-wrap:wrap;gap:.9rem}
.p-pet{display:inline-flex;align-items:center;gap:.55rem;background:#fff;color:var(--p-ink);font:800 1.05rem 'Baloo 2',sans-serif;text-decoration:none;padding:.6rem 1.3rem .6rem .7rem;border-radius:999px;border:2.5px solid var(--p-ink);box-shadow:4px 4px 0 var(--p-ink);transition:transform .15s,box-shadow .15s}
.p-pet span{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--p-sun);font-size:1.25rem}
.p-pet:hover{transform:translate(2px,2px) rotate(-1deg);box-shadow:2px 2px 0 var(--p-ink)}
.p-art{position:relative;max-width:480px;width:100%;margin-inline:auto;aspect-ratio:1}
.p-circle{position:absolute;inset:6%;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 0 0 5px var(--p-ink),14px 14px 0 5px rgba(42,26,15,.35);animation:p-float 5s ease-in-out infinite}
.p-circle img{width:100%;height:100%;object-fit:cover}
@keyframes p-float{50%{transform:translateY(-8px) rotate(1deg)}}
.p-seal{position:absolute;right:-2%;bottom:6%;width:120px;height:120px;border-radius:50%;background:var(--p-sun);border:2.5px solid var(--p-ink);box-shadow:4px 4px 0 var(--p-ink);display:grid;place-items:center}
.p-seal svg{position:absolute;inset:0;width:100%;height:100%;animation:p-spin 14s linear infinite}
.p-seal text{font:800 11.5px 'Nunito',sans-serif;letter-spacing:.12em;fill:var(--p-ink)}
.p-seal span{width:40px;height:40px;color:var(--p-orange)}
@keyframes p-spin{to{transform:rotate(360deg)}}
.p-paw{position:absolute;z-index:-1;width:42px;height:42px;color:rgba(255,255,255,.18);animation:p-drift 9s ease-in-out infinite}
.p-paw svg{width:100%;height:100%}
.pw1{top:8%;left:4%;transform:rotate(-20deg)}.pw2{top:60%;left:40%;width:30px;animation-delay:1s}.pw3{top:14%;left:52%;width:26px;animation-delay:2s}
.pw4{bottom:18%;left:8%;width:34px;animation-delay:3s}.pw5{top:30%;right:3%;width:30px;animation-delay:4s}.pw6{bottom:28%;right:44%;width:22px;animation-delay:5s}
@keyframes p-drift{50%{transform:translateY(-14px) rotate(12deg)}}
.p-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px}

/* Encabezados */
.p-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.3rem}
.p-head h2{margin:0;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800}
.p-head h2::after{content:"";display:block;width:64px;height:8px;margin-top:.2rem;border-radius:999px;background:var(--p-sun)}
.p-head a{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;color:var(--p-orange);text-decoration:none}

/* Burbujas de categorías */
.p-bubbles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.1rem}
.p-bubble{text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem;padding:1rem .6rem;border-radius:26px;border:2.5px solid var(--p-ink);box-shadow:4px 4px 0 var(--p-ink);background:#fff;transition:transform .2s,box-shadow .2s}
.p-bubble:hover{transform:translate(2px,2px) rotate(-1.5deg);box-shadow:2px 2px 0 var(--p-ink)}
.p-bubble.b0{background:#FFE7D3}.p-bubble.b1{background:#E3F6F1}.p-bubble.b2{background:#FFF3C8}.p-bubble.b3{background:#F1E7FF}
.p-bimg{width:92px;height:92px;border-radius:50%;background:#fff;border:2.5px solid var(--p-ink);overflow:hidden;margin-bottom:.4rem}
.p-bimg img{width:100%;height:100%;object-fit:contain;padding:10%}
.p-bubble b{font:800 1.1rem 'Baloo 2',sans-serif;color:var(--p-ink)}
.p-bubble small{color:var(--muted);font-weight:700}

/* Tarjetas de producto tipo sticker */
.tt-pup ul.products li.product{background:#fff;border:2.5px solid var(--p-ink)!important;border-radius:22px;padding:.7rem!important;box-shadow:5px 5px 0 var(--p-ink);transition:transform .2s,box-shadow .2s}
.tt-pup ul.products li.product:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--p-ink)}
.tt-pup ul.products li.product a img{border-radius:16px!important;background:#FFF1E0!important}
.tt-pup .tt-card-cat{color:var(--p-orange)}
.tt-pup ul.products li.product .woocommerce-loop-product__title{font-weight:700}
.tt-pup ul.products li.product .price{font-family:'Baloo 2',sans-serif;font-size:1.3rem}
.tt-pup ul.products li.product .button{border-radius:999px!important;background:var(--p-sun)!important;color:var(--p-ink)!important;border:2px solid var(--p-ink)!important;box-shadow:none!important}
.tt-pup ul.products li.product:hover .button{background:var(--p-orange)!important;color:#fff!important}

/* Banda de stickers */
.p-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding:.6rem}
.p-sticker{display:flex;flex-direction:column;gap:.3rem;padding:1.4rem;border-radius:24px;border:2.5px solid var(--p-ink);box-shadow:5px 5px 0 var(--p-ink)}
.p-sticker.s1{background:#FFE7D3;rotate:-1.5deg}.p-sticker.s2{background:#E3F6F1;rotate:1deg}.p-sticker.s3{background:#FFF3C8;rotate:-.8deg}
.p-sticker .tt-i{color:var(--p-orange)}
.p-sticker b{font:800 1.25rem 'Baloo 2',sans-serif}
.p-sticker span{color:var(--muted);font-weight:600}

/* Pasos, preguntas, pie */
.tt-pup .r-steps li{border:2.5px solid var(--p-ink);border-radius:22px;padding:1.2rem;background:#fff;box-shadow:4px 4px 0 var(--p-ink)}
.tt-pup .r-steps li::before{color:var(--p-orange)}
.tt-pup .r-faq summary{font-family:'Baloo 2',sans-serif;font-size:1.1rem}
.tt-pup .r-faq summary::after{color:var(--p-orange)}
.tt-pup .r-footer{background:var(--p-ink)}
.tt-pup .tt-chip.is-on{background:var(--p-orange);border-color:var(--p-orange)}
.tt-pup .tt-eta{background:#FFF1E0}

@media (max-width:820px){
  .p-hero-grid{grid-template-columns:1fr;gap:1.5rem;padding:2rem 0 5rem}
  .p-art{order:-1;max-width:320px}
  .p-seal{width:92px;height:92px}
  .p-band{grid-template-columns:1fr}
}
@media (max-width:640px){.p-bubbles{grid-template-columns:repeat(2,1fr)}.p-bimg{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){.p-circle,.p-seal svg,.p-paw{animation:none!important}}