/*
Theme Name: FullPets
Theme URI: https://fullpets-tienda.com
Author: FullPets
Description: Tema de ecommerce para FullPets, con soporte para WooCommerce. Tienda de alimento, accesorios y servicios para perros y gatos, con domicilios en el Valle de Aburra.
Version: 1.9.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fullpets
Tags: e-commerce, woocommerce, custom-colors, custom-menu, responsive-layout
WC requires at least: 8.0
WC tested up to: 9.4
*/

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/poppins-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/luckiest-guy-latin-400-normal.woff2) format('woff2')}

:root{
  --sky-50:#f4faff; --sky-100:#e7f4ff; --sky-200:#cdeaff; --sky-300:#a6dbff;
  --sky-400:#74c3ff; --sky-500:#47a8f6; --sky-600:#2f8bdd; --sky-700:#256fb2;
  --navy-900:#0f2a43; --navy-700:#1c3f63;
  --yellow-300:#ffe27a; --yellow-400:#ffd54a;
  --cream:#fbfdff;
  --ink:#0f2a43;
  --muted:rgba(28,63,99,.62);
  --faint:rgba(28,63,99,.42);
  --ring:#e7f4ff;
  --shadow-card:0 22px 45px -20px rgba(31,90,140,.35);
  --shadow-btn:0 12px 24px -8px rgba(47,139,221,.7);
  color-scheme:light;
}
*{box-sizing:border-box}
*,*::before,*::after{margin:0;padding:0}
/* FullPets is a deliberately single-theme brand: white-dominant with sky blue.
   Every surface paints explicitly so the page holds on any host background. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#fff;color-scheme:light}
body{
  background:#fff;color:var(--ink);
  font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
@media(min-width:1024px){body{padding-bottom:0}}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select{font:inherit;color:inherit}
ul{list-style:none}
svg{display:block}
:focus-visible{outline:2px solid var(--sky-500);outline-offset:2px}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:16px;height:16px}
.ico-lg{width:24px;height:24px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 24px}}
@media(min-width:1024px){.wrap{padding:0 32px}}
/* Hero container. Widened to match .wrap so the banner lines up with the
   product grid below it instead of sitting in a narrower column. */
.wrap-narrow{max-width:1280px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap-narrow{padding:0 24px}}
@media(min-width:1024px){.wrap-narrow{padding:0 32px}}
.display{font-family:'Luckiest Guy',cursive;font-weight:400;letter-spacing:.01em;line-height:1.1}
.kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--sky-600)}
.h2{font-size:28px;margin-top:6px}
@media(min-width:640px){.h2{font-size:36px}}
.lede{margin-top:8px;color:var(--muted)}
.sec{padding:56px 0}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* ---------- marquee ---------- */
.marquee{background:var(--navy-900);color:#fff;padding:8px 0;overflow:hidden}
.marquee-track{display:flex;width:max-content;gap:40px;white-space:nowrap;animation:mq 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-size:12px;font-weight:500;letter-spacing:.01em}
@media(min-width:640px){.marquee span{font-size:13px}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Second marquee, under the hero. Light sky band running the other way, so the
   page doesn't carry two heavy navy bars (the brief asks to avoid big blocks
   of dark blue). */
.marquee.light{background:var(--sky-100);color:var(--navy-900);border-block:1px solid var(--sky-200);padding:10px 0}
.marquee.light .marquee-track{animation-direction:reverse;animation-duration:32s}
.marquee.light span{font-weight:600;color:var(--navy-700)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);transition:background .3s,box-shadow .3s}
.header.scrolled{background:rgba(255,255,255,.92);box-shadow:0 8px 24px -16px rgba(15,42,67,.35);backdrop-filter:blur(12px)}
.header-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:8px}
.logo-mark{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--sky-500);color:#fff;box-shadow:0 8px 16px -6px rgba(47,139,221,.6);transition:transform .25s}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05)}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-name{font-size:20px;font-weight:800;letter-spacing:-.02em}
.logo-name i{font-style:normal;color:var(--sky-500)}
.logo-sub{font-size:10px;font-style:italic;color:rgba(28,63,99,.5);margin-top:2px}
.nav{display:none;align-items:center;gap:4px}
@media(min-width:1024px){.nav{display:flex}}
.nav a{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;transition:background .2s,color .2s}
.nav a:hover{background:var(--sky-50);color:var(--sky-700)}
div.actions{display:flex;align-items:center;gap:2px}
@media(min-width:640px){div.actions{gap:6px}}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;position:relative;transition:background .2s,color .2s,transform .2s}
.iconbtn:hover{background:var(--sky-50);color:var(--sky-700)}
.iconbtn:active{transform:scale(.94)}
.only-sm{display:none}
@media(min-width:640px){.only-sm{display:grid}}
.hide-lg{display:grid}
@media(min-width:1024px){.hide-lg{display:none}}
.badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--sky-600);color:#fff;font-size:11px;font-weight:700;box-shadow:0 0 0 2px #fff}
.badge.yellow{background:var(--yellow-400);color:var(--navy-900);top:4px;right:4px;min-width:16px;height:16px;font-size:10px;box-shadow:none}
.mobile-menu{display:none;border-top:1px solid var(--ring);background:#fff;padding:8px 16px 16px}
.mobile-menu.open{display:block}
@media(min-width:1024px){.mobile-menu.open{display:none}}
.mobile-menu a{display:block;padding:12px;border-radius:12px;font-size:16px;font-weight:600}
.mobile-menu a:hover{background:var(--sky-50)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s}
.btn:active{transform:translateY(0) scale(.97)}
.btn-primary{background:var(--sky-600);color:#fff;padding:14px 24px;font-size:14px;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--sky-700);transform:translateY(-2px);box-shadow:0 16px 28px -8px rgba(47,139,221,.8)}
.btn-ghost{background:#fff;color:var(--navy-900);padding:14px 24px;font-size:14px;box-shadow:inset 0 0 0 1px var(--sky-200)}
.btn-ghost:hover{background:var(--sky-50);transform:translateY(-2px)}
.btn-dark{background:var(--navy-900);color:#fff;padding:14px 28px;font-size:14px}
.btn-dark:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn-yellow{background:var(--yellow-400);color:var(--navy-900);padding:16px 32px;font-size:14px;font-weight:800;box-shadow:0 16px 30px -10px rgba(0,0,0,.35)}
.btn-yellow:hover{background:var(--yellow-300);transform:translateY(-2px)}
.btn .ico{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{background:rgba(244,250,255,.6);padding:24px 0 40px}
@media(min-width:640px){.hero{padding:32px 0 40px}}
.hero-card{position:relative;overflow:hidden;border-radius:32px;background:#fff;box-shadow:0 30px 60px -30px rgba(15,42,67,.35),inset 0 0 0 1px var(--sky-100)}
.hero-stage{position:relative;width:100%;aspect-ratio:16/8;overflow:hidden}
@media(min-width:640px){.hero-stage{aspect-ratio:21/9}}
.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:none;place-items:center;border-radius:999px;background:rgba(255,255,255,.85);color:var(--navy-900);box-shadow:0 6px 16px -6px rgba(15,42,67,.4);transition:transform .2s}
@media(min-width:640px){.hero-arrow{display:grid}}
.hero-arrow:hover{transform:translateY(-50%) scale(1.12)}
.hero-arrow.prev{left:12px}
.hero-arrow.next{right:12px}
.hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.hero-dots button{height:6px;width:6px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .3s,background .3s}
.hero-dots button.active{width:24px;background:#fff}
.hero-foot{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;text-align:center}
@media(min-width:640px){.hero-foot{flex-direction:row;justify-content:space-between;text-align:left}}
.hero-foot p{margin-top:4px;color:var(--muted);font-size:14px}
.hero-ctas{display:flex;gap:12px;flex:none}

/* ---------- categories ---------- */
.cat-grid{display:grid;gap:24px}
@media(min-width:640px){.cat-grid{grid-template-columns:1fr 1fr}}
.cat{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:224px;padding:32px;border-radius:36px;color:#fff;overflow:hidden;box-shadow:0 25px 50px -20px rgba(47,139,221,.55);transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media(min-width:640px){.cat{height:256px}}
.cat:hover{transform:translateY(-8px)}
.cat-dog{background:linear-gradient(135deg,var(--sky-400),var(--sky-600))}
.cat-cat{background:linear-gradient(135deg,var(--sky-300),var(--sky-500))}
.cat-paw{position:absolute;right:-24px;bottom:-32px;width:160px;height:160px;color:rgba(255,255,255,.12);transform:rotate(12deg);transition:transform .5s}
.cat:hover .cat-paw{transform:rotate(3deg) scale(1.1)}
.cat-body{position:relative;z-index:1}
.cat-body h3{font-size:30px;margin-top:4px}
@media(min-width:640px){.cat-body h3{font-size:36px}}
.cat-body .kicker{color:rgba(255,255,255,.82)}
.cat-body p{margin-top:8px;max-width:220px;font-size:14px;color:rgba(255,255,255,.88)}
.cat-pill{display:inline-block;margin-top:16px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:700;backdrop-filter:blur(4px);transition:background .2s}
.cat:hover .cat-pill{background:rgba(255,255,255,.28)}
.cat-emoji{position:relative;z-index:1;flex:none;width:96px;height:96px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.16);font-size:44px;backdrop-filter:blur(4px);transition:transform .5s}
@media(min-width:640px){.cat-emoji{width:128px;height:128px;font-size:58px}}
.cat:hover .cat-emoji{transform:scale(1.1) rotate(6deg)}

/* ---------- products ---------- */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:32px}
@media(min-width:640px){.sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;text-align:left}}
.tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--sky-50);box-shadow:inset 0 0 0 1px var(--sky-100)}
.tabs button{padding:8px 16px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);transition:background .2s,color .2s}
@media(min-width:640px){.tabs button{font-size:14px}}
.tabs button.active{background:#fff;color:var(--sky-700);box-shadow:0 1px 3px rgba(15,42,67,.12)}
.grid-p{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:640px){.grid-p{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(min-width:1024px){.grid-p{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--sky-100);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--sky-100),var(--shadow-card)}
.card-off{position:absolute;left:12px;top:12px;z-index:2;padding:4px 10px;border-radius:999px;background:var(--yellow-400);color:var(--navy-900);font-size:12px;font-weight:800}
.card-fav{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(15,42,67,.14);transition:transform .2s}
.card-fav:hover{transform:scale(1.12)}
.card-fav .ico{width:17px;height:17px;color:rgba(28,63,99,.55)}
.card-fav.on .ico{color:#ef4444;fill:#ef4444}
.card-media{position:relative;aspect-ratio:1;background:var(--sky-50);padding:12px;overflow:hidden}
.card-media .inner{width:100%;height:100%;transition:transform .5s}
.card:hover .card-media .inner{transform:scale(1.04)}
.bag{position:relative;width:100%;height:100%;display:grid;place-items:center;border-radius:28px;overflow:hidden}
.bag-paw{position:absolute;color:var(--sky-200);opacity:.6}
.bag-paw.a{right:-12px;top:-12px;width:64px;height:64px;transform:rotate(12deg)}
.bag-paw.b{left:-16px;bottom:-16px;width:80px;height:80px;transform:rotate(-12deg);opacity:.42}
.bag-body{position:relative;width:58%;height:72%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;border-radius:18px 18px 10px 10px;box-shadow:0 10px 30px -12px rgba(15,42,67,.25),inset 0 0 0 1px rgba(0,0,0,.05)}
.bag-cap{position:absolute;top:0;left:12px;right:12px;height:8px;border-radius:0 0 999px 999px}
.bag-logo{width:70%;height:40px;display:grid;place-items:center}
.bag-logo img{max-height:100%;width:auto;object-fit:contain}
.bag-pres{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:rgba(28,63,99,.7);text-align:center;padding:0 8px}
.card-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:12px 16px 16px}
.card-brand{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--sky-600)}
.card-name{font-size:14px;font-weight:600;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:12px;color:var(--muted)}
.card-price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.card-price b{font-size:18px;font-weight:800}
.card-price s{font-size:12px;color:var(--faint)}
.card-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.card-add{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:999px;background:var(--sky-50);color:var(--sky-700);box-shadow:inset 0 0 0 1px var(--sky-200);transition:background .2s,transform .15s}
.card-add:hover{background:var(--sky-100)}
.card-add:active{transform:scale(.92)}
.card-buy{flex:1;height:40px;display:grid;place-items:center;border-radius:999px;background:var(--sky-600);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 10px 20px -8px rgba(47,139,221,.7);transition:background .2s,transform .15s}
@media(min-width:640px){.card-buy{font-size:12px}}
.card-buy:hover{background:var(--sky-700)}
.card-buy:active{transform:scale(.96)}
.sec-cta{display:flex;justify-content:center;margin-top:40px}

/* ---------- promos ---------- */
.promos{background:rgba(244,250,255,.75);padding:56px 0}
.promo-nav{display:flex;gap:8px}
.promo-nav button{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:#fff;box-shadow:0 1px 4px rgba(15,42,67,.1),inset 0 0 0 1px var(--sky-200);transition:transform .2s}
.promo-nav button:hover{transform:scale(1.08)}
.promo-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 16px;scrollbar-width:none}
.promo-rail::-webkit-scrollbar{display:none}
@media(min-width:640px){.promo-rail{padding-left:24px;padding-right:24px}}
@media(min-width:1440px){.promo-rail{padding-left:calc((100vw - 1280px)/2 + 32px);padding-right:calc((100vw - 1280px)/2 + 32px)}}
.promo{flex:none;width:280px;scroll-snap-align:start;display:flex;flex-direction:column;padding:24px;border-radius:30px;color:#fff;box-shadow:0 25px 50px -24px rgba(15,42,67,.5)}
@media(min-width:640px){.promo{width:340px}}
.promo-logo{height:48px;width:112px;display:grid;place-items:center;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.96)}
.promo-logo img{max-height:100%;width:auto;object-fit:contain}
.promo-tag{align-self:flex-start;margin-top:20px;padding:4px 12px;border-radius:999px;background:var(--yellow-400);color:var(--navy-900);font-size:12px;font-weight:800}
.promo h3{margin-top:12px;font-size:18px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo .pres{margin-top:4px;font-size:14px;color:rgba(255,255,255,.78)}
.promo .price{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.promo .price b{font-size:24px;font-weight:800}
.promo .price s{font-size:14px;color:rgba(255,255,255,.62)}
.promo button.buy{margin-top:20px;width:100%;padding:12px;border-radius:999px;background:#fff;color:var(--navy-900);font-size:14px;font-weight:700;transition:transform .2s}
.promo button.buy:hover{transform:scale(1.03)}

/* ---------- subscription ---------- */
.sub{position:relative;overflow:hidden;border-radius:36px;background:linear-gradient(135deg,var(--sky-500),var(--sky-700));color:#fff;padding:48px 24px}
@media(min-width:640px){.sub{padding:48px}}
.sub-icon{position:absolute;right:-40px;top:-40px;width:224px;height:224px;color:rgba(255,255,255,.1)}
.sub-head{max-width:640px;margin:0 auto;text-align:center;position:relative}
.sub-head .kicker{color:rgba(255,255,255,.82)}
.sub-head p{margin-top:12px;color:rgba(255,255,255,.86)}
.steps{display:grid;gap:16px;max-width:896px;margin:40px auto 0;position:relative}
@media(min-width:640px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{height:100%;padding:20px;border-radius:24px;background:rgba(255,255,255,.12);backdrop-filter:blur(4px)}
.step .n{font-family:'Luckiest Guy',cursive;font-size:24px;color:var(--yellow-400)}
.step b{display:block;margin-top:4px;font-size:14px}
.step p{margin-top:4px;font-size:13px;color:rgba(255,255,255,.78)}
.sub-cta{display:flex;justify-content:center;margin-top:40px;position:relative}

/* ---------- plans ---------- */
.plans{display:grid;gap:24px}
@media(min-width:1024px){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{position:relative;display:flex;flex-direction:column;height:100%;padding:28px;border-radius:32px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.plan:hover{transform:translateY(-8px)}
.plan.feat{background:var(--navy-900);color:#fff;box-shadow:0 30px 60px -25px rgba(15,42,67,.6)}
@media(min-width:1024px){.plan.feat{transform:translateY(-16px)}.plan.feat:hover{transform:translateY(-24px)}}
.plan-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;background:var(--yellow-400);color:var(--navy-900);font-size:12px;font-weight:800;white-space:nowrap}
.plan h3{font-size:24px}
.plan .desc{margin-top:4px;font-size:14px;color:var(--muted)}
.plan.feat .desc{color:rgba(255,255,255,.72)}
.plan .amount{display:flex;align-items:baseline;gap:4px;margin-top:20px}
.plan .amount b{font-size:30px;font-weight:800}
.plan .amount span{font-size:14px;color:var(--faint)}
.plan.feat .amount span{color:rgba(255,255,255,.6)}
.plan ul{flex:1;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;gap:8px;font-size:14px;align-items:flex-start}
.plan li .ico{width:16px;height:16px;flex:none;margin-top:3px;color:var(--sky-500)}
.plan.feat li .ico{color:var(--yellow-400)}
.plan.feat li span{color:rgba(255,255,255,.88)}
.plan-cta{margin-top:28px;width:100%;padding:14px;border-radius:999px;font-size:14px;font-weight:700;background:var(--sky-50);color:var(--sky-700);box-shadow:inset 0 0 0 1px var(--sky-200);transition:transform .2s,background .2s}
.plan-cta:hover{transform:translateY(-2px);background:var(--sky-100)}
.plan.feat .plan-cta{background:var(--yellow-400);color:var(--navy-900);box-shadow:none}
.plan.feat .plan-cta:hover{background:var(--yellow-300)}

/* ---------- vet ---------- */
.vet{display:grid;gap:40px;align-items:center;padding:24px;border-radius:36px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100)}
@media(min-width:640px){.vet{padding:40px}}
@media(min-width:1024px){.vet{grid-template-columns:1fr 1fr}}
.vet p.lead{margin-top:12px;max-width:440px;color:var(--muted)}
.vet-list{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.vet-list div{display:flex;align-items:center;gap:12px}
.vet-list i{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:var(--sky-50);color:var(--sky-600)}
.vet-list span{font-size:14px;font-weight:500}
.vet-art{position:relative;aspect-ratio:1;max-width:384px;margin:0 auto;width:100%;display:grid;place-items:center}
.vet-blob{position:absolute;inset:0;border-radius:42% 58% 65% 35%/45% 40% 60% 55%;background:linear-gradient(135deg,var(--sky-100),var(--sky-300));animation:blob 14s ease-in-out infinite}
@keyframes blob{0%,100%{border-radius:42% 58% 65% 35%/45% 40% 60% 55%}50%{border-radius:58% 42% 38% 62%/55% 60% 40% 45%}}
.vet-disc{position:relative;width:70%;height:70%;display:grid;place-items:center;border-radius:999px;background:#fff;box-shadow:0 25px 60px -25px rgba(15,42,67,.4);font-size:64px}
.vet-chip{position:absolute;padding:8px 16px;border-radius:16px;background:#fff;font-size:12px;font-weight:700;box-shadow:0 8px 20px -8px rgba(15,42,67,.3)}
.vet-chip.a{right:8px;top:24px}
.vet-chip.b{left:0;bottom:32px}

/* ---------- benefits ---------- */
.bens{display:grid;gap:24px}
@media(min-width:640px){.bens{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.bens{grid-template-columns:repeat(4,1fr)}}
.ben{height:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;border-radius:24px;background:rgba(244,250,255,.75);text-align:center;transition:background .25s}
.ben:hover{background:rgba(231,244,255,.85)}
.ben i{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:#fff;color:var(--sky-600);box-shadow:0 4px 12px -6px rgba(15,42,67,.2)}
.ben b{font-size:15px}
.ben p{font-size:13px;color:var(--muted)}

/* ---------- newsletter ---------- */
.news{position:relative;overflow:hidden;padding:48px 24px;border-radius:36px;background:var(--sky-50);text-align:center}
@media(min-width:640px){.news{padding:48px}}
.news-paw{position:absolute;color:var(--sky-200);opacity:.7}
.news-paw.a{left:-24px;top:-24px;width:112px;height:112px;transform:rotate(12deg)}
.news-paw.b{right:-16px;bottom:-32px;width:128px;height:128px;transform:rotate(-12deg)}
.news-in{position:relative;max-width:512px;margin:0 auto}
.news-form{margin-top:24px;display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){.news-form{flex-direction:row}}
.news-field{position:relative;flex:1}
.news-field .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint);pointer-events:none}
.news-field input{width:100%;height:52px;padding:0 16px 0 44px;border:0;border-radius:999px;background:#fff;font-size:14px;box-shadow:inset 0 0 0 1px var(--sky-200)}
.news-field input::placeholder{color:var(--faint)}
.news-field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--sky-400)}
.news-ok{margin-top:24px;font-weight:700;color:var(--sky-700)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--ring);background:var(--cream);padding:56px 0 0}
.foot-grid{display:grid;gap:40px}
@media(min-width:1024px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-about p{margin-top:16px;max-width:320px;font-size:14px;color:var(--muted)}
.socials{margin-top:20px;display:flex;gap:8px}
.socials a{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:#fff;color:var(--sky-600);box-shadow:inset 0 0 0 1px var(--sky-100);transition:background .2s}
.socials a:hover{background:var(--sky-50)}
.foot-col h4{font-size:14px;font-weight:700}
.foot-col ul{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:14px;color:var(--muted);transition:color .2s}
.foot-col a:hover{color:var(--sky-600)}
.foot-bottom{margin-top:48px;padding:24px 0 32px;border-top:1px solid var(--ring);display:flex;flex-direction:column;align-items:center;gap:16px}
@media(min-width:640px){.foot-bottom{flex-direction:row;justify-content:space-between}}
.foot-bottom small{font-size:12px;color:var(--faint)}
.pays{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pays span{padding:6px 12px;border-radius:8px;background:#fff;font-size:11px;font-weight:700;color:var(--muted);box-shadow:inset 0 0 0 1px var(--sky-100)}

/* ---------- bottom nav ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-around;padding:8px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--ring)}
@media(min-width:1024px){.bottom-nav{display:none}}
.bottom-nav a,.bottom-nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border-radius:12px;color:var(--muted)}
.bottom-nav span{font-size:10px;font-weight:600}
.bottom-nav .badge{top:0;right:6px;min-width:16px;height:16px;font-size:9px;box-shadow:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:96px;z-index:90;max-width:calc(100vw - 32px);padding:12px 20px;border-radius:999px;background:var(--navy-900);color:#fff;font-size:13px;font-weight:600;text-align:center;box-shadow:0 16px 36px -12px rgba(15,42,67,.6);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(12px);transition:opacity .25s,transform .25s,visibility .25s}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%)}
@media(min-width:1024px){.toast{bottom:32px}}

/* ---------- floating social ---------- */
.floats{position:fixed;right:14px;bottom:78px;z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media(min-width:1024px){.floats{right:24px;bottom:24px;gap:12px}}
.float{position:relative;display:grid;place-items:center;border-radius:999px;background:#fff;box-shadow:0 8px 22px -6px rgba(15,42,67,.28),inset 0 0 0 1px rgba(15,42,67,.06);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;opacity:0;transform:translateY(14px) scale(.85);animation:floatIn .5s cubic-bezier(.22,1,.36,1) forwards}
.float:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 14px 28px -8px rgba(15,42,67,.34),inset 0 0 0 1px rgba(15,42,67,.06)}
.float:active{transform:scale(.95)}
.float svg{width:20px;height:20px}
/* 44px keeps the secondary buttons at the minimum comfortable tap target */
.float.sm{width:44px;height:44px}
.float.wa{width:54px;height:54px;background:#25d366;box-shadow:0 10px 26px -6px rgba(37,211,102,.55)}
.float.wa:hover{box-shadow:0 16px 32px -8px rgba(37,211,102,.65)}
.float.wa svg{width:26px;height:26px;color:#fff}
@media(min-width:1024px){
  .float svg{width:22px;height:22px}
  .float.sm{width:46px;height:46px}
  .float.wa{width:56px;height:56px}
  .float.wa svg{width:28px;height:28px}
}
.float.tt svg{color:#0f0f14}
@keyframes floatIn{to{opacity:1;transform:none}}
.float-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(6px);padding:7px 12px;border-radius:999px;background:var(--navy-900);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 20px -8px rgba(15,42,67,.5)}
.float:hover .float-tip,.float:focus-visible .float-tip{opacity:1;transform:translateY(-50%)}
@media(hover:none){.float-tip{display:none}}
/* WhatsApp attention ring — quiet, and only while the page is idle at the top */
.float.wa::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid #25d366;opacity:0;animation:waPulse 2.8s ease-out infinite;animation-delay:1.2s}
@keyframes waPulse{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.45)}100%{opacity:0;transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.float{opacity:1;transform:none;animation:none}.float.wa::after{animation:none;display:none}}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(15,42,67,.5);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.open{opacity:1;visibility:visible}

/* cart */
aside.cart{position:fixed;top:0;right:0;bottom:0;z-index:80;width:100%;max-width:448px;display:flex;flex-direction:column;background:#fff;box-shadow:-20px 0 60px -20px rgba(15,42,67,.4);transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
aside.cart.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--ring)}
.cart-head h3{display:flex;align-items:center;gap:8px;font-size:20px}
.cart-head h3 .ico{color:var(--sky-600)}
.closebtn{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:var(--sky-50);color:var(--navy-700);transition:background .2s}
.closebtn:hover{background:var(--sky-100)}
.ship{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--ring);background:rgba(244,250,255,.75)}
.ship .ico{width:18px;height:18px;color:var(--sky-600);flex:none}
.ship b{display:block;font-size:12px;font-weight:700}
.ship span{font-size:11px;color:var(--muted)}
/* Progress bar for a free-shipping threshold. Hidden while FREE_SHIPPING is 0,
   which matches the live store: flat $9.000 to the Valle de Aburra, no free tier. */
.ship .bar{height:8px;border-radius:999px;background:#fff;overflow:hidden;margin-top:8px}
.ship .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sky-400),var(--sky-600));width:0;transition:width .4s}
.cart-body{flex:1;overflow-y:auto;padding:16px 20px}
.cart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.cart-empty .e{font-size:48px}
.cart-empty b{font-size:15px}
.cart-empty p{font-size:14px;color:var(--muted)}
.cart-list{display:flex;flex-direction:column;gap:16px}
.cart-item{display:flex;gap:12px}
.cart-thumb{width:80px;height:80px;flex:none;border-radius:16px;background:var(--sky-50);overflow:hidden;padding:6px}
.cart-info{flex:1;display:flex;flex-direction:column;min-width:0}
.cart-info .b{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--sky-600)}
.cart-info .n{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
span.qty{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:999px;background:var(--sky-50)}
span.qty button{width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(15,42,67,.14);transition:transform .15s}
span.qty button:active{transform:scale(.9)}
span.qty .ico{width:12px;height:12px}
span.qty b{min-width:16px;text-align:center;font-size:12px;font-weight:700}
.cart-item .line{font-size:14px;font-weight:700;white-space:nowrap}
.cart-del{align-self:flex-start;color:var(--faint);transition:color .2s}
.cart-del:hover{color:#ef4444}
.cart-foot{padding:16px 20px;border-top:1px solid var(--ring);display:flex;flex-direction:column;gap:12px}
.cart-foot .r{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.cart-foot .t{display:flex;justify-content:space-between;padding-top:12px;border-top:1px dashed var(--sky-100);font-size:16px;font-weight:800;color:var(--ink)}
.cart-foot .go{width:100%;padding:14px;border-radius:999px;background:var(--sky-600);color:#fff;font-size:14px;font-weight:700;box-shadow:var(--shadow-btn);transition:transform .2s,background .2s}
.cart-foot .go:hover{transform:translateY(-2px);background:var(--sky-700)}
.cart-foot .keep{width:100%;padding:10px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
.cart-foot .keep:hover{color:var(--ink)}
.btn-wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:999px;background:#25d366;color:#fff;font-size:14px;font-weight:700;box-shadow:0 10px 22px -8px rgba(37,211,102,.6);transition:transform .2s,background .2s}
.btn-wa:hover{transform:translateY(-2px);background:#1eb85a}
.btn-wa svg{width:18px;height:18px;flex:none}

/* ---------- checkout ---------- */
.co-sum{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:var(--sky-50);margin-bottom:20px}
.co-sum .ico{width:18px;height:18px;color:var(--sky-600);flex:none}
.co-sum>div{min-width:0}
.co-sum>div b{display:block;font-size:13px;line-height:1.35}
.co-sum>div span{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.co-sum .amt{margin-left:auto;font-size:16px;font-weight:800;white-space:nowrap;color:var(--ink)}
.co-note{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:12px 14px;border-radius:16px;background:var(--sky-50);font-size:12px;color:var(--muted)}
.co-note .ico{width:16px;height:16px;color:var(--sky-600);flex:none;margin-top:1px}
.co-err{margin-top:12px;font-size:12px;font-weight:600;color:#d13c3c}
.field.bad input,.field.bad select{box-shadow:inset 0 0 0 2px #f0a3a3;background:#fff8f8}
.pays-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.pay-opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--sky-50);box-shadow:inset 0 0 0 1px var(--sky-100);cursor:pointer;transition:box-shadow .2s,background .2s}
.pay-opt:hover{background:var(--sky-100)}
.pay-opt.on{background:#fff;box-shadow:inset 0 0 0 2px var(--sky-500)}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-dot{width:20px;height:20px;flex:none;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--sky-200);display:grid;place-items:center;transition:box-shadow .2s}
.pay-opt.on .pay-dot{box-shadow:inset 0 0 0 6px var(--sky-500)}
.pay-opt .txt b{display:block;font-size:13px}
.pay-opt .txt span{font-size:11px;color:var(--muted)}
.co-lines{margin-top:18px;padding-top:14px;border-top:1px dashed var(--sky-100);display:flex;flex-direction:column;gap:8px}
.co-lines .r{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.co-lines .t{display:flex;justify-content:space-between;font-size:16px;font-weight:800;color:var(--ink);padding-top:8px;border-top:1px dashed var(--sky-100)}
.co-or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--muted);font-size:12px;font-weight:600}
.co-or::before,.co-or::after{content:"";flex:1;height:1px;background:var(--sky-100)}
.co-order{margin-top:6px;padding:10px 16px;border-radius:999px;background:var(--sky-50);font-size:13px;font-weight:700;color:var(--sky-700)}
.co-items{margin:16px 0 0;display:flex;flex-direction:column;gap:8px;text-align:left}
.co-items li{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.co-items li b{color:var(--ink);font-weight:600}

/* search */
div.search{position:fixed;inset:0;z-index:70;display:flex;justify-content:center;align-items:flex-start;padding:80px 16px 16px;background:rgba(15,42,67,.5);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
@media(min-width:640px){div.search{padding-top:112px}}
div.search.open{opacity:1;visibility:visible}
.search-box{width:100%;max-width:576px;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(15,42,67,.5);transform:translateY(-16px) scale(.98);transition:transform .25s}
div.search.open .search-box{transform:none}
.search-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ring)}
.search-top .ico{color:var(--sky-500);flex:none}
.search-top input{flex:1;min-width:0;border:0;background:none;font-size:14px}
.search-top input:focus{outline:none}
.search-top input::placeholder{color:var(--faint)}
.search-res{max-height:60vh;overflow-y:auto;padding:8px}
.search-hint{padding:24px 16px;text-align:center;font-size:14px;color:var(--faint)}
.search-group{padding:8px 12px}
.search-group>p{margin-bottom:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.search-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 8px;border-radius:12px;text-align:left;transition:background .15s}
.search-item:hover{background:var(--sky-50)}
.search-item .t{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-item .p{flex:none;font-size:14px;font-weight:700;color:var(--sky-700)}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-end;background:rgba(15,42,67,.5);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
@media(min-width:640px){.modal{align-items:center;padding:24px}}
.modal.open{opacity:1;visibility:visible}
.modal-box{width:100%;max-width:512px;max-height:92vh;overflow-y:auto;padding:24px;background:#fff;border-radius:32px 32px 0 0;box-shadow:0 30px 70px -20px rgba(15,42,67,.5);transform:translateY(40px);transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media(min-width:640px){.modal-box{border-radius:32px;padding:32px}}
.modal.open .modal-box{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.modal-head h3{font-size:22px}
.stepper{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.stepper .seg{display:flex;align-items:center;gap:8px;flex:1}
.stepper .dot{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:999px;background:var(--sky-50);color:var(--faint);font-size:12px;font-weight:700;box-shadow:inset 0 0 0 1px var(--sky-100);transition:background .3s,color .3s}
.stepper .dot.on{background:var(--sky-600);color:#fff;box-shadow:none}
.stepper .bar{flex:1;height:4px;border-radius:999px;background:var(--sky-100);transition:background .3s}
.stepper .bar.on{background:var(--sky-600)}
.step-label{margin-bottom:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--sky-600)}
.fields{display:grid;gap:16px}
@media(min-width:640px){.fields{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px;text-align:left}
.field span{font-size:12px;font-weight:600;color:var(--muted)}
.field input,.field select{height:44px;width:100%;padding:0 16px;border:0;border-radius:16px;background:var(--sky-50);font-size:14px;box-shadow:inset 0 0 0 1px var(--sky-100);transition:background .2s,box-shadow .2s}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c3f63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field input:focus,.field select:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--sky-400)}
.field input::placeholder{color:rgba(28,63,99,.35)}
.field.full{grid-column:1/-1}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px}
.modal-back{padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
.modal-back[disabled]{opacity:0;pointer-events:none}
.modal-next{flex:1;padding:14px 32px;border-radius:999px;background:var(--sky-600);color:#fff;font-size:14px;font-weight:700;box-shadow:var(--shadow-btn);transition:transform .2s,background .2s}
@media(min-width:640px){.modal-next{flex:none}}
.modal-next:hover{transform:translateY(-2px);background:var(--sky-700)}
.done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 0;text-align:center}
.done .ico{width:48px;height:48px;color:var(--sky-500)}
.done h4{font-size:20px}
.done p{max-width:360px;font-size:14px;color:var(--muted)}
.hidden{display:none!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ---------- WordPress core required classes ---------- */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip-path:none;color:var(--sky-700);display:block;font-size:14px;font-weight:700;height:auto;left:8px;padding:14px 22px;text-decoration:none;top:8px;width:auto;z-index:100000;border-radius:999px;box-shadow:0 8px 24px -10px rgba(15,42,67,.5)}
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{max-width:1280px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:12px;color:var(--muted);text-align:center;margin-top:6px}
.sticky,.bypostauthor{position:relative}
.admin-bar .header{top:32px}
@media(max-width:782px){.admin-bar .header{top:46px}}

/* ---------- editorial content (pages, posts) ---------- */
.entry{max-width:768px;margin:0 auto;padding:48px 16px}
.entry-title{font-family:'Luckiest Guy',cursive;font-size:32px;line-height:1.15;margin-bottom:8px}
.entry-meta{font-size:12px;color:var(--muted);margin-bottom:24px}
.entry-content{font-size:15px;line-height:1.7}
.entry-content>*+*{margin-top:16px}
.entry-content h2{font-family:'Luckiest Guy',cursive;font-size:24px;margin-top:32px}
.entry-content h3{font-size:18px;font-weight:700;margin-top:24px}
/* Solo los enlaces escritos a mano en el editor llevan subrayado editorial.
   Un <a> con clase es un componente (un botón, una etiqueta, un resultado) y
   trae su propio color: sin este :not, las páginas de WooCommerce —que viven
   dentro de .entry-content— pintaban los botones de azul y subrayados. */
.entry-content a:not([class]){color:var(--sky-700);text-decoration:underline}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content ul li{list-style:disc}
.entry-content ol li{list-style:decimal}
.entry-content img{border-radius:18px}
.entry-content blockquote{border-left:3px solid var(--sky-300);padding-left:16px;color:var(--muted);font-style:italic}
.pagination{display:flex;justify-content:center;gap:8px;margin:32px 0}
.pagination .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border-radius:999px;background:var(--sky-50);font-size:14px;font-weight:600;color:var(--navy-700)}
.pagination .page-numbers.current{background:var(--sky-600);color:#fff}

/* ---------- WooCommerce ---------- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 auto 20px;max-width:1280px;padding:14px 18px;border-radius:18px;font-size:14px;font-weight:600}
.woocommerce-message{background:var(--sky-50);color:var(--sky-700);box-shadow:inset 0 0 0 1px var(--sky-200)}
.woocommerce-info{background:var(--sky-50);color:var(--navy-700);box-shadow:inset 0 0 0 1px var(--sky-200)}
.woocommerce-error{background:#fff5f5;color:#c0392b;box-shadow:inset 0 0 0 1px #f5c6c6}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none}
.shop-head{padding:40px 0 8px}
.shop-layout{display:grid;gap:28px;align-items:start}
@media(min-width:1024px){.shop-layout{grid-template-columns:250px 1fr}}
.shop-filters{display:flex;flex-direction:column;gap:18px}
.shop-filters .widget{padding:18px;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100)}
.shop-filters .widget-title{font-size:13px;font-weight:700;margin-bottom:10px}
.shop-filters ul{display:flex;flex-direction:column;gap:8px}
.shop-filters a{font-size:13px;color:var(--muted)}
.shop-filters a:hover{color:var(--sky-600)}
/* Filtros propios del tema (inc/filters.php). */
.shop-filters .widget{padding:16px 18px}
.shop-filters .widget-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fp-filter{padding:0}
.fp-filter>summary{list-style:none;cursor:pointer;padding:16px 18px;margin:0;border-radius:24px;transition:background .2s}
.fp-filter>summary::-webkit-details-marker{display:none}
.fp-filter>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--sky-500);border-bottom:2px solid var(--sky-500);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.fp-filter[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.fp-filter>summary:hover{background:var(--sky-50)}
.fp-count{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:auto;border-radius:999px;background:var(--sky-600);color:#fff;font-size:10px;font-weight:700}
.fp-filter-list,.shop-filters ul.fp-filter-list{display:flex;flex-direction:column;gap:2px;padding:0 10px 12px}
.fp-opt{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:12px;font-size:13px;color:var(--navy-700);transition:background .15s}
.fp-opt:hover{background:var(--sky-50)}
.fp-opt .box{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#fff;color:#fff;box-shadow:inset 0 0 0 1.5px var(--sky-200);transition:background .15s,box-shadow .15s}
.fp-opt.on .box{background:var(--sky-600);box-shadow:inset 0 0 0 1.5px var(--sky-600)}
.fp-opt.on .t{font-weight:700;color:var(--ink)}
.fp-opt .t{min-width:0}
/* Filtros activos */
.fp-filter-active{background:var(--sky-50);box-shadow:inset 0 0 0 1px var(--sky-200)}
.fp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;font-size:12px;font-weight:600;color:var(--navy-700);box-shadow:inset 0 0 0 1px var(--sky-200);transition:background .2s,color .2s}
.fp-chip:hover{background:#fff5f5;color:#c0392b}
.fp-chip .ico{width:12px;height:12px;flex:none;opacity:.6}
.fp-clear{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:var(--sky-700);text-decoration:underline}
/* Precio */
.fp-price-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.fp-price-row input{width:100%;min-width:0;height:40px;padding:0 12px;border:0;border-radius:12px;background:var(--sky-50);font-size:13px;box-shadow:inset 0 0 0 1px var(--sky-100)}
.fp-price-row input:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--sky-400)}
.fp-price-row .sep{flex:none;color:var(--faint)}
.fp-price-btn{width:100%;height:40px;margin-top:10px;border:0;border-radius:999px;background:var(--sky-50);color:var(--sky-700);font-size:13px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--sky-200);transition:background .2s}
.fp-price-btn:hover{background:var(--sky-100)}

/* --- Filtros en móvil: la barra lateral se convierte en panel --- */
.fp-filter-open{display:none}
.fp-filter-head,.fp-filter-foot{display:none}
@media(max-width:1023px){
  /* El botón vive en la barra de herramientas, encima de los productos. */
  .fp-filter-open{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--sky-600);color:#fff;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 10px 20px -10px rgba(47,139,221,.8)}
  .fp-filter-open .fp-count{background:#fff;color:var(--sky-700)}
  .shop-toolbar{gap:10px}

  .shop-filters{position:fixed;inset:0;z-index:95;display:block;padding:0 16px 96px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--sky-50);transform:translateY(100%);visibility:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),visibility .3s}
  .shop-filters.fp-open{transform:none;visibility:visible}

  .fp-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:2;margin:0 -16px 14px;padding:16px;background:var(--sky-50);border-bottom:1px solid var(--sky-200)}
  .fp-filter-head b{font-family:'Luckiest Guy',cursive;font-size:20px;font-weight:400}
  .fp-filter-head .closebtn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:#fff;color:var(--navy-700);cursor:pointer;box-shadow:inset 0 0 0 1px var(--sky-200)}

  .fp-filter-foot{display:block;position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -12px 30px -18px rgba(15,42,67,.5)}
  .fp-filter-foot .btn{width:100%}

  /* Dentro del panel hay sitio de sobra: las opciones se ven más cómodas. */
  .shop-filters .widget{padding:14px 16px}
  .fp-filter>summary{padding:14px 16px}
  .fp-opt{padding:11px 8px;font-size:14px}
}
.shop-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.woocommerce-result-count{font-size:13px;color:var(--muted);margin:0}
.woocommerce-ordering select{height:42px;padding:0 40px 0 16px;border:0;border-radius:999px;background-color:var(--sky-50);font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px var(--sky-100);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c3f63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
ul.products{display:grid;grid-template-columns:1fr 1fr;gap:16px;list-style:none}
@media(min-width:640px){ul.products{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(min-width:1024px){ul.products{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){ul.products{grid-template-columns:repeat(4,1fr)}}
ul.products li.product{list-style:none}
/* WooCommerce le pone a ul.products un ::before y un ::after de "clearfix"
   (content:" "). En una rejilla CSS eso NO es invisible: cada pseudo-elemento
   se convierte en una CASILLA, y empuja el primer producto a la segunda
   columna dejando un hueco delante. Por eso se quitan.
   De paso se anulan el float y el ancho en porcentaje que Woo usa para su
   maquetación antigua, incompatibles con la rejilla del tema. */
ul.products::before,ul.products::after,.woocommerce ul.products::before,.woocommerce ul.products::after,.woocommerce-page ul.products::before,.woocommerce-page ul.products::after{content:none;display:none}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{float:none;width:auto;margin:0;padding:0}
.woocommerce-pagination ul{display:flex;justify-content:center;gap:8px;margin:36px 0;list-style:none}
.woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border-radius:999px;background:var(--sky-50);font-size:14px;font-weight:600;color:var(--navy-700)}
.woocommerce-pagination .current{background:var(--sky-600);color:#fff}

/* Tarjeta de producto: el enlace "Ver carrito".
   WooCommerce lo inyecta con su propio JS justo despues del boton AJAX, como
   texto plano que no podemos envolver desde PHP. Aqui escondemos el boton de
   agregar (ya cumplio) y convertimos ese enlace en un boton redondo del mismo
   tamano, con un ojo dibujado por mascara CSS. La fila sigue teniendo dos
   elementos, asi que "Comprar ahora" nunca se aprieta ni se solapa.
   El texto sigue presente para los lectores de pantalla. */
.card-actions .add_to_cart_button.added,.woocommerce .card-actions a.add_to_cart_button.added{display:none}
.card-actions a.added_to_cart,.woocommerce .card-actions a.added_to_cart,.woocommerce-page .card-actions a.added_to_cart{position:relative;overflow:hidden;width:40px;height:40px;padding:0;flex:none;border-radius:999px;background:var(--sky-600);color:#fff;font-size:0;line-height:0;text-decoration:none;box-shadow:0 10px 20px -10px rgba(47,139,221,.8);transition:background .2s,transform .15s}
/* El ojo va absoluto sobre la burbuja: asi queda centrado aunque WooCommerce
   imponga su propio display/padding sobre .added_to_cart. */
.card-actions a.added_to_cart::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/20px 20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.card-actions a.added_to_cart:hover{background:var(--sky-700)}
.card-actions a.added_to_cart:active{transform:scale(.92)}
.card-actions .add_to_cart_button.loading{opacity:.55}

/* single product */
.single-product-wrap{display:grid;gap:36px;padding:36px 0}
@media(min-width:1024px){.single-product-wrap{grid-template-columns:1fr 1fr;gap:56px}}
.sp-gallery{position:relative;border-radius:32px;background:var(--sky-50);padding:24px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.sp-gallery img{border-radius:24px;width:100%;height:100%;object-fit:contain}
.sp-brand{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--sky-600)}
.sp-title{font-family:'Luckiest Guy',cursive;font-size:28px;line-height:1.15;margin-top:6px}
@media(min-width:640px){.sp-title{font-size:34px}}
.sp-meta{margin-top:8px;font-size:13px;color:var(--muted)}
.sp-price{display:flex;align-items:baseline;gap:10px;margin:18px 0}
.sp-price .price{font-size:28px;font-weight:800;color:var(--ink)}
.sp-price del{font-size:15px;color:var(--faint)}
.sp-price ins{text-decoration:none}
.sp-stock{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--sky-50);font-size:12px;font-weight:700;color:var(--sky-700)}
.sp-stock.out{background:#fff5f5;color:#c0392b}
.sp-desc{margin-top:22px;font-size:14px;line-height:1.7;color:var(--navy-700)}
.sp-attrs{width:100%;margin-top:22px;border-collapse:collapse;font-size:13px}
.sp-attrs th,.sp-attrs td{padding:10px 0;border-bottom:1px solid var(--sky-100);text-align:left;vertical-align:top}
.sp-attrs th{width:42%;font-weight:600;color:var(--muted)}
/* Fila de compra: la insignia "Disponible" y el boton van juntos.
   El form de WooCommerce trae class="cart"; aqui lo dejamos en flujo normal
   de forma explicita para que ninguna regla de panel lateral se lo lleve
   fuera de la pantalla. */
.sp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.sp-actions .sp-stock{margin:0;flex:none}
.sp-actions .stock{display:none}
.sp-actions form.cart,.woocommerce .sp-actions form.cart{position:static;transform:none;inset:auto;width:auto;max-width:none;margin:0;padding:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:1 1 260px}
.sp-actions .quantity{margin:0}
.sp-actions .quantity input.qty,.woocommerce .sp-actions .quantity input.qty{width:76px;height:52px;text-align:center;border:0;border-radius:999px;background:var(--sky-50);font-size:15px;font-weight:700;box-shadow:inset 0 0 0 1px var(--sky-200)}
.sp-actions button[type=submit],.sp-actions .single_add_to_cart_button{flex:1 1 180px;min-width:180px;height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--sky-600);color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .2s,background .2s}
.sp-actions button[type=submit]:hover,.sp-actions .single_add_to_cart_button:hover{transform:translateY(-2px);background:var(--sky-700)}
/* Productos con presentaciones (variables): el selector de WooCommerce. */
.sp-actions form.variations_form,.woocommerce .sp-actions form.variations_form,.woocommerce-page .sp-actions form.variations_form{flex:1 1 100%;display:block;margin:0;padding:0;position:static;transform:none;background:none;box-shadow:none;max-width:none;width:auto}
.sp-actions table.variations,.woocommerce .sp-actions table.variations{width:100%;margin:0 0 8px;border:0;border-collapse:collapse;background:none}
.sp-actions table.variations tr,.sp-actions table.variations th,.sp-actions table.variations td,.woocommerce .sp-actions table.variations th,.woocommerce .sp-actions table.variations td{display:block;width:auto;padding:0;border:0;background:none;text-align:left}
.sp-actions table.variations th.label label{font-size:12px;font-weight:600;color:var(--muted)}
.sp-actions table.variations td.value{margin-top:6px}
.sp-actions table.variations select,.woocommerce .sp-actions table.variations select{width:100%;height:52px;padding:0 46px 0 18px;border:0;border-radius:999px;background-color:var(--sky-50);color:var(--ink);font-size:15px;font-weight:600;box-shadow:inset 0 0 0 1px var(--sky-200);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232f8bdd' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.sp-actions table.variations select:focus{outline:none;background-color:#fff;box-shadow:inset 0 0 0 2px var(--sky-400)}
.sp-actions .reset_variations{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--sky-700);text-decoration:underline}
.sp-actions .single_variation_wrap{margin-top:6px}
.sp-actions .woocommerce-variation{margin-bottom:12px}
.sp-actions .woocommerce-variation-price .price{font-size:26px;font-weight:800;color:var(--ink)}
.sp-actions .woocommerce-variation-price del{font-size:15px;color:var(--faint);margin-right:8px}
.sp-actions .woocommerce-variation-price ins{text-decoration:none}
.sp-actions .woocommerce-variation-availability p{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 14px;border-radius:999px;background:var(--sky-50);font-size:12px;font-weight:700;color:var(--sky-700)}
.sp-actions .woocommerce-variation-availability .out-of-stock{background:#fff5f5;color:#c0392b}
.sp-actions .woocommerce-variation-description{margin-bottom:10px;font-size:13px;line-height:1.6;color:var(--muted)}
.sp-actions .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sp-actions .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled button{opacity:.45;cursor:not-allowed;transform:none}
/* El precio de la variación manda: el rango de arriba se queda como referencia. */
.sp-actions .woocommerce-variation-price .price{display:block}

.related-products{padding:8px 0 56px}

/* cart & checkout pages */
/* Las páginas de carrito, checkout, mi cuenta y "pedido recibido" son páginas
   normales de WordPress, así que page.php las mete en la columna de lectura de
   768px pensada para textos. Una tabla de pedido no cabe ahí: aquí recuperan el
   ancho de la tienda. */
.woocommerce-cart .entry,.woocommerce-checkout .entry,.woocommerce-account .entry,.woocommerce-order-received .entry{max-width:none;padding:24px 0 56px}
.woocommerce-cart .entry-title,.woocommerce-checkout .entry-title,.woocommerce-account .entry-title,.woocommerce-order-received .entry-title{margin-bottom:20px}

.wc-page{padding:36px 0 56px}
.wc-page h1{font-family:'Luckiest Guy',cursive;font-size:30px;margin-bottom:20px}
.shop_table,.woocommerce table.shop_table,.woocommerce-page table.shop_table{width:100%;border:0;border-collapse:collapse;border-radius:0;font-size:14px;margin:0}
.shop_table th,.shop_table td,.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:14px 10px;border:0;border-bottom:1px solid var(--sky-100);text-align:left;vertical-align:middle}
.shop_table th,.woocommerce table.shop_table th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.woocommerce table.shop_table tbody tr:last-child td,.woocommerce table.shop_table tfoot tr:last-child td,.woocommerce table.shop_table tfoot tr:last-child th{border-bottom:0}
.cart_totals,.woocommerce-checkout-review-order{padding:22px;border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100)}
.cart-collaterals{margin-top:28px;width:100%}
/* WooCommerce flota el bloque de totales al 48%; con la rejilla del tema
   eso lo dejaba angosto y con el texto partido. */
.woocommerce .cart-collaterals,.woocommerce-page .cart-collaterals{width:100%}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{float:none;width:auto}
.cart_totals h2{font-family:'Luckiest Guy',cursive;font-size:22px;margin:14px 0 12px}
.cart_totals .woocommerce-shipping-destination{margin-top:6px;font-size:12px;color:var(--muted)}
.cart_totals .shipping td ul{list-style:none;margin:0;padding:0}
/* Grid en vez de float: con float, si algo no se limpia, el footer sube y se
   mete en medio de la página. Grid contiene siempre a sus hijos. */
@media(min-width:1024px){
  .woocommerce-cart .wc-page>.woocommerce{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:start}
  .woocommerce-cart .wc-page>.woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1}
  .woocommerce-cart .woocommerce-cart-form{min-width:0;width:auto;float:none}
  .woocommerce-cart .cart-collaterals{min-width:0;width:auto;margin-top:0;float:none}
}

/* Red de seguridad en movil: si la tabla del carrito no alcanza a apilarse,
   se desplaza dentro de su propia caja en vez de estirar toda la pagina. */
@media(max-width:768px){.woocommerce-cart-form{overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* La foto del producto en el carrito, en movil.
   woocommerce-smallscreen.css apila la tabla y ESCONDE la celda de la foto:
     .woocommerce table.cart .product-thumbnail{display:none}
   Por eso en el computador se veia la imagen y en el telefono no.
   Aqui la devolvemos y de paso armamos la fila en dos columnas: foto a la
   izquierda, datos apilados a la derecha.
   Sobre los selectores: la regla de WooCommerce pesa (0,3,1) y su variante con
   #content pesa (1,3,1), asi que hay que nombrar table.cart, tr.cart_item y
   td.product-thumbnail para ganarle. Una regla corta tipo .product-thumbnail
   no alcanzaria por mas que el tema cargue despues. */
@media(max-width:768px){
  .woocommerce table.cart tr.cart_item,.woocommerce-page table.cart tr.cart_item{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:14px;align-items:center;padding:4px 16px}
  .woocommerce table.cart tr.cart_item td.product-thumbnail,.woocommerce-page table.cart tr.cart_item td.product-thumbnail,.woocommerce #content table.cart tr.cart_item td.product-thumbnail,.woocommerce-page #content table.cart tr.cart_item td.product-thumbnail{display:block;grid-column:1;grid-row:1/span 5;width:auto;padding:10px 0;border:0}
  /* La celda de la foto no trae data-title, asi que la etiqueta de
     woocommerce-smallscreen saldria como un ": " suelto. */
  .woocommerce table.cart tr.cart_item td.product-thumbnail::before,.woocommerce-page table.cart tr.cart_item td.product-thumbnail::before{content:none;display:none}
  .woocommerce table.cart tr.cart_item td.product-thumbnail img{display:block;width:84px;height:84px;border-radius:18px;object-fit:contain;background:var(--sky-50)}
  .woocommerce table.cart tr.cart_item td.product-remove,.woocommerce table.cart tr.cart_item td.product-name,.woocommerce table.cart tr.cart_item td.product-price,.woocommerce table.cart tr.cart_item td.product-quantity,.woocommerce table.cart tr.cart_item td.product-subtotal{grid-column:2;padding:7px 0}
  /* Sin la foto delante, la equis quedaba flotando sola en una linea propia. */
  .woocommerce table.cart tr.cart_item td.product-remove{grid-row:1;border:0;padding-top:10px;padding-bottom:0}
  .woocommerce table.cart tr.cart_item td.product-remove a,.woocommerce .woocommerce-cart-form tr.cart_item td.product-remove a{margin-left:auto}
  /* El nombre a la izquierda: alineado a la derecha, un nombre largo se parte
     en escalera y cuesta leerlo. WooCommerce lo fuerza con !important, asi que
     toca responder igual. Y su etiqueta "Producto:" sobra: se ve que lo es. */
  .woocommerce table.cart tr.cart_item td.product-name,.woocommerce-page table.cart tr.cart_item td.product-name{border-top:0;padding-top:0;text-align:left!important}
  /* Ultima celda de cada producto: la linea la pone la fila, no la celda. */
  .woocommerce table.cart tr.cart_item td.product-subtotal{border-bottom:0}
  .woocommerce table.cart tr.cart_item+tr.cart_item{border-top:1px solid var(--sky-100)}
  .woocommerce table.cart tr.cart_item td.product-name::before,.woocommerce-page table.cart tr.cart_item td.product-name::before{content:none;display:none}
  .woocommerce table.cart tr.cart_item td.product-name a{text-decoration:none;line-height:1.35}

  /* El cupon en movil.
     woocommerce-smallscreen le pone width:48% al campo y al boton "Aplicar
     cupon", pero .coupon es flex con gap, asi que 48+48+10px no cabe en una
     linea y cada uno terminaba en su propio renglon, a media anchura, mientras
     "Actualizar carrito" iba al 100%: tres anchos distintos, uno debajo de
     otro. Aqui los tres quedan del mismo ancho, apilados y con la misma
     separacion. Los selectores nombran table.cart, td.actions y el elemento
     (input/button) porque la regla de WooCommerce pesa (0,4,3). */
  .woocommerce table.cart td.actions .coupon,.woocommerce-page table.cart td.actions .coupon{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 10px;float:none}
  .woocommerce table.cart td.actions .coupon input.input-text,.woocommerce-page table.cart td.actions .coupon input.input-text{width:100%;float:none;margin:0}
  .woocommerce table.cart td.actions .coupon button.button,.woocommerce table.cart td.actions .coupon input.button,.woocommerce-page table.cart td.actions .coupon button.button,.woocommerce-page table.cart td.actions .coupon input.button{width:100%;float:none;margin:0}
  .woocommerce table.cart td.actions button.button,.woocommerce table.cart td.actions input.button{width:100%;margin:0}
}

/* Tabla del carrito. La tabla de WooCommerce trae class="... cart ...", por eso
   los selectores de aqui son explicitos: nada de reglas sueltas con .cart. */
.woocommerce-cart-form table.shop_table,.woocommerce .woocommerce-cart-form table.shop_table{background:#fff;border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--sky-100)}
.woocommerce-cart-form .shop_table th{padding:14px 16px;background:var(--sky-50)}
.woocommerce-cart-form .shop_table td{padding:16px}
.woocommerce-cart-form .product-thumbnail{width:88px}
.woocommerce-cart-form .product-thumbnail img,.woocommerce-cart-form .product-thumbnail .bag{width:72px;height:72px;border-radius:16px;object-fit:contain;background:var(--sky-50)}
.woocommerce-cart-form .product-name a{font-weight:600;color:var(--ink)}
.woocommerce-cart-form .product-name a:hover{color:var(--sky-600)}
.woocommerce-cart-form .product-price,.woocommerce-cart-form .product-subtotal{white-space:nowrap;font-weight:600}
.woocommerce-cart-form .product-remove a,.woocommerce .woocommerce-cart-form .product-remove a{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--sky-50);color:var(--muted);font-size:16px;line-height:1;text-decoration:none;transition:background .2s,color .2s}
.woocommerce-cart-form .product-remove a:hover{background:#fff5f5;color:#c0392b}
.woocommerce-cart-form .quantity input.qty,.woocommerce .woocommerce-cart-form .quantity input.qty{width:72px;height:42px;text-align:center;border:0;border-radius:999px;background:var(--sky-50);font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1px var(--sky-200)}
.woocommerce-cart-form td.actions,.woocommerce .woocommerce-cart-form td.actions{padding:16px 0 0;border:0}
.woocommerce-cart-form .coupon{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.woocommerce-cart-form .coupon input,.woocommerce .woocommerce-cart-form .coupon input{height:46px;padding:0 16px;border:0;border-radius:999px;background:var(--sky-50);font-size:14px;box-shadow:inset 0 0 0 1px var(--sky-200)}
.woocommerce-cart-form .button,.woocommerce .woocommerce-cart-form .button{height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--sky-50);color:var(--sky-700);font-size:13px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--sky-200);transition:background .2s}
.woocommerce-cart-form .button:hover:not(:disabled),.woocommerce .woocommerce-cart-form .button:hover:not(:disabled){background:var(--sky-100)}
.woocommerce-cart-form .button:disabled{opacity:.5;cursor:default}
.cart_totals table{width:100%;border-collapse:collapse;font-size:14px}
.cart_totals th,.cart_totals td{padding:12px 0;border-bottom:1px solid var(--sky-100);text-align:left}
.cart_totals th{font-weight:600;color:var(--muted)}
.cart_totals td{text-align:right;font-weight:600}
.cart_totals .order-total td{font-size:18px;font-weight:800;color:var(--ink)}
.wc-proceed-to-checkout{margin-top:18px}
/* WooCommerce maqueta el checkout con floats y anchos en porcentaje.
   Aqui los anulamos y usamos rejilla. Los selectores llevan el prefijo
   .woocommerce/.woocommerce-page a proposito: es la unica forma de superar
   en especificidad a las reglas propias del plugin. */
.woocommerce .col2-set,.woocommerce-page .col2-set{width:auto;display:grid;gap:24px}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2,.woocommerce-page .col2-set .col-1,.woocommerce-page .col2-set .col-2{float:none;width:auto}
.woocommerce form .form-row,.woocommerce-page form .form-row{float:none;width:auto;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
/* -first/-last/-wide traen width:47% y float en WooCommerce; hay que
   nombrarlos uno por uno para igualar su especificidad. */
.woocommerce form .form-row-first,.woocommerce form .form-row-last,.woocommerce form .form-row-wide,.woocommerce-page form .form-row-first,.woocommerce-page form .form-row-last,.woocommerce-page form .form-row-wide{float:none;width:auto;clear:none}
.form-row{display:flex;flex-direction:column;gap:6px;margin:0}
@media(min-width:1024px){
  .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.15fr .85fr;gap:12px 32px;align-items:start}
  /* form.checkout tiene TRES hijos: datos, titulo del resumen y resumen.
     Sin colocarlos a mano, la rejilla manda el resumen a una segunda fila
     de la columna izquierda, que era justo lo que se veia mal. */
  .woocommerce-checkout form.checkout>#customer_details{grid-column:1;grid-row:1/span 2}
  .woocommerce-checkout form.checkout>#order_review_heading{grid-column:2;grid-row:1;margin:0}
  .woocommerce-checkout form.checkout>#order_review{grid-column:2;grid-row:2}
}
.woocommerce-checkout #customer_details,.woocommerce-checkout #order_review{float:none;width:auto}
.woocommerce-billing-fields h3,#order_review_heading{font-family:'Luckiest Guy',cursive;font-size:22px;margin-bottom:16px}
.woocommerce-billing-fields__field-wrapper{display:grid;gap:16px}
@media(min-width:640px){.woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr 1fr}}
.form-row-wide,.form-row.notes,.woocommerce form .form-row-wide,.woocommerce form .form-row.notes{grid-column:1/-1}
.form-row label,.woocommerce form .form-row label{font-size:12px;font-weight:600;line-height:1.4;color:var(--muted)}
.form-row .required,.woocommerce form .form-row .required{color:#c0392b;text-decoration:none;border:0}
.form-row .optional,.woocommerce form .form-row .optional{color:var(--faint);font-weight:500}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.form-row input.input-text,.form-row textarea,.form-row select{box-sizing:border-box;width:100%;min-height:44px;padding:10px 16px;border:0;border-radius:16px;background:var(--sky-50);font-size:14px;line-height:1.4;box-shadow:inset 0 0 0 1px var(--sky-100);transition:background .2s,box-shadow .2s}
.woocommerce form .form-row textarea,.form-row textarea{min-height:88px;resize:vertical}
.form-row input.input-text:focus,.form-row textarea:focus,.form-row select:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--sky-400)}
.woocommerce-invalid input.input-text,.woocommerce-invalid select{box-shadow:inset 0 0 0 2px #f0a3a3;background:#fff8f8}
.fullpets-hidden{display:none}
/* Botones: el .alt de WooCommerce viene morado (#a46497) de fabrica. */
#place_order,.checkout-button,.button.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce a.checkout-button,.woocommerce #place_order,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:15px 24px;border:0;border-radius:999px;background:var(--sky-600);background-color:var(--sky-600);color:#fff;font-size:14px;font-weight:700;text-align:center;box-shadow:var(--shadow-btn);transition:transform .2s,background-color .2s;cursor:pointer}
#place_order:hover,.checkout-button:hover,.button.alt:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,.woocommerce a.checkout-button:hover,.woocommerce #place_order:hover{transform:translateY(-2px);background-color:var(--sky-700);color:#fff}
.woocommerce-checkout div#payment,.woocommerce-page div#payment{background:var(--sky-50);border-radius:24px;padding:18px;margin-top:18px}
.wc_payment_methods{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;padding:0}
/* WooCommerce pone el radio y la etiqueta como hermanos sueltos; con flex
   en el <li> quedan en la misma linea y la descripcion debajo. */
.wc_payment_method{display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none}
.wc_payment_method>input[type=radio]{flex:none;width:18px;height:18px;margin:0;accent-color:var(--sky-600)}
.wc_payment_method>label{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:14px;border-radius:18px;background:#fff;font-size:13px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--sky-100)}
.wc_payment_method>.payment_box{flex-basis:100%}
.wc_payment_method input:checked+label{background:#fff;box-shadow:inset 0 0 0 2px var(--sky-500)}
.payment_box,.woocommerce-checkout .payment_box{padding:12px 14px;border-radius:16px;background:#fff;font-size:12px;line-height:1.55;color:var(--muted);margin:0;box-shadow:inset 0 0 0 1px var(--sky-100)}
.woocommerce-checkout .payment_box::before{display:none}
/* WooCommerce dibuja iconos con una fuente propia en ::before. Sin esa fuente
   salen como cuadritos o emojis sueltos, asi que los quitamos. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,.woocommerce-noreviews::before,.woocommerce-shipping-calculator a::after,.shipping-calculator-button::after{display:none;content:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{padding-left:18px}
.woocommerce-form-coupon-toggle .woocommerce-info a,.shipping-calculator-button{font-weight:700;color:var(--sky-700)}
.woocommerce-order{max-width:768px;margin:0 auto;padding:48px 16px;text-align:center}
.woocommerce-order .woocommerce-thankyou-order-received{font-family:'Luckiest Guy',cursive;font-size:28px;color:var(--ink);margin-bottom:12px}
.woocommerce-order ul.order_details{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:24px 0;padding:20px;border-radius:24px;background:var(--sky-50)}
.woocommerce-order ul.order_details li{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.woocommerce-order ul.order_details li strong{display:block;margin-top:4px;font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink)}
.wa-checkout{margin-top:14px}
/* Aviso de pago sin completar (checkout/thankyou.php). Ámbar a propósito: no
   es un error del cliente ni un éxito, es algo que quedó a medias. */
.fp-pay-notice{max-width:680px;margin:0 auto;padding:28px 24px;border-radius:28px;background:#fffaf0;box-shadow:inset 0 0 0 1px #f3ddb0;text-align:center}
@media(min-width:640px){.fp-pay-notice{padding:36px}}
.fp-pay-notice h2{font-family:'Luckiest Guy',cursive;font-size:26px;line-height:1.15;color:#8a5a0b}
.fp-pay-notice>p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--navy-700)}
.fp-pay-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.fp-pay-actions .btn,.fp-pay-actions .btn-wa{flex:0 1 auto;width:auto;max-width:100%;padding:14px 24px}
.fp-pay-hint{margin-top:18px;font-size:13px;color:var(--muted)}
.woocommerce-order .fp-pay-notice+.woocommerce-order-details,.woocommerce-order .fp-pay-notice~.woocommerce-order-details{margin-top:32px}

/* ---------- pagina de resultados de busqueda ---------- */
a.search-item{color:inherit;text-decoration:none}
.search-list{display:grid;gap:14px;max-width:768px}
.search-hit{padding:18px 20px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100)}
.search-hit h2{font-size:17px;font-weight:700}
.search-hit h2 a{color:var(--ink)}
.search-hit h2 a:hover{color:var(--sky-600)}
.search-hit p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--muted)}
.search-empty{max-width:620px;margin:0 auto;padding:44px 20px;text-align:center}
.search-empty .e{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:999px;background:var(--sky-50);color:var(--sky-500)}
.search-empty h2{font-family:'Luckiest Guy',cursive;font-size:24px;line-height:1.2}
.search-empty>p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--muted)}
.search-again{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.search-again input{flex:1 1 240px;min-width:0;height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--sky-50);font-size:14px;box-shadow:inset 0 0 0 1px var(--sky-100)}
.search-again input:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--sky-400)}
.search-again .btn{flex:none;height:48px}
.search-cats{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:26px}
.search-cats span{width:100%;margin-bottom:2px;font-size:12px;font-weight:600;color:var(--faint)}
.search-cat{display:inline-block;padding:9px 18px;border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:var(--sky-700);box-shadow:inset 0 0 0 1px var(--sky-200);transition:background .2s,transform .15s}
.search-cat:hover{background:var(--sky-50);transform:translateY(-1px)}

/* ---------- rastreo de pedido ---------- */
/* El formulario lo genera WooCommerce; aqui solo lo acomodamos en rejilla. */
.track-form .track_order{display:grid;gap:16px;margin:0}
@media(min-width:640px){.track-form .track_order{grid-template-columns:1fr 1fr}}
.track-form .track_order>p:not(.form-row){grid-column:1/-1;margin:0;font-size:14px;line-height:1.6;color:var(--muted);text-align:center}
.track-form .track_order .form-row{grid-column:1/-1}
.track-form .track_order .form-row-first,.track-form .track_order .form-row-last{grid-column:auto}
.track-form .track_order .clear{display:none}
.track-form .track_order button{display:inline-flex;align-items:center;justify-content:center;width:100%;height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--sky-600);color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .2s,background .2s}
.track-form .track_order button:hover{transform:translateY(-2px);background:var(--sky-700)}
/* Resultado: el estado del pedido y su tabla de detalle. */
/* WooCommerce marca datos con <mark>; sin esto salen con el resaltado
   amarillo del navegador. */
.track-form mark{background:none;padding:0;color:var(--ink);font-weight:700}
.track-form mark.order-status{background:var(--sky-50);color:var(--sky-700);padding:3px 12px;border-radius:999px;font-weight:700}
.track-form h2{font-family:'Luckiest Guy',cursive;font-size:20px;margin:26px 0 12px}
.track-form .woocommerce-order-details,.track-form .woocommerce-customer-details{margin-top:8px}
.track-form ul.order_details{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:0 0 20px;padding:18px;border-radius:20px;background:var(--sky-50)}
.track-form ul.order_details li{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.track-form ul.order_details li strong{display:block;margin-top:4px;font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink)}

.track-steps{display:grid;gap:16px;list-style:none;counter-reset:none;padding:0}
@media(min-width:640px){.track-steps{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.track-steps{grid-template-columns:repeat(4,1fr)}}
.track-step{position:relative;list-style:none;padding:24px 20px;border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100)}
.track-step .n{position:absolute;top:16px;right:18px;font-family:'Luckiest Guy',cursive;font-size:26px;line-height:1;color:var(--sky-100)}
.track-step i{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--sky-50);color:var(--sky-600);margin-bottom:14px}
.track-step b{display:block;font-size:15px}
.track-step p{margin-top:6px;font-size:13px;line-height:1.55;color:var(--muted)}

/* ---------- inner pages (veterinaria, membresías, suscripción) ---------- */
.page-hero{background:rgba(244,250,255,.6);padding:48px 0 40px}
@media(min-width:640px){.page-hero{padding:64px 0 48px}}
.page-hero-in{max-width:720px;margin:0 auto;text-align:center}
.page-hero-in h1{font-family:'Luckiest Guy',cursive;font-size:32px;line-height:1.12;margin-top:8px}
@media(min-width:640px){.page-hero-in h1{font-size:44px}}
.page-hero-in .lede{margin:12px auto 0;max-width:560px}
.page-hero-in .btn{margin-top:24px}

.form-card{max-width:768px;margin:0 auto;padding:28px 20px;border-radius:32px;background:#fff;box-shadow:0 30px 60px -34px rgba(15,42,67,.35),inset 0 0 0 1px var(--sky-100)}
@media(min-width:640px){.form-card{padding:36px}}
.form-card-head{text-align:center;margin-bottom:26px}
.form-card-head .lede{margin-top:6px}
.fp-form .fields{display:grid;gap:16px}
@media(min-width:640px){.fp-form .fields{grid-template-columns:1fr 1fr}}
.fp-form .field.full{grid-column:1/-1}
.fp-form textarea{width:100%;min-height:104px;padding:12px 16px;border:0;border-radius:16px;background:var(--sky-50);font-size:14px;line-height:1.55;resize:vertical;box-shadow:inset 0 0 0 1px var(--sky-100);transition:background .2s,box-shadow .2s;font-family:inherit}
.fp-form textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--sky-400)}
.fp-form textarea::placeholder{color:rgba(28,63,99,.35)}
.fp-form .required{color:#c0392b;text-decoration:none;border:0;margin-left:2px}
.fp-form-legal{margin-top:14px;font-size:11px;line-height:1.5;color:var(--faint);text-align:center}
/* Honeypot: off-screen for bots, invisible and unfocusable for people. */
.fp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* El aviso emergente al enviar una solicitud. Reutiliza .modal/.modal-box del
   tema y solo cambia el contenido: mismo aspecto que el resto del sitio.
   Se dibuja ya abierto desde PHP, sin depender del JavaScript. */
.fp-modal-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:32px;padding-bottom:32px}
.fp-modal-icono{display:grid;place-items:center;width:72px;height:72px;margin-bottom:4px;border-radius:999px;background:var(--sky-50);color:var(--sky-600)}
.fp-modal-icono .ico{width:38px;height:38px}
.fp-modal-box h3{font-family:'Luckiest Guy',cursive;font-size:26px;line-height:1.15}
.fp-modal-box p{max-width:360px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.fp-modal-nota{font-size:13px!important;color:var(--faint)!important}
.fp-modal-nota a{color:var(--sky-700);font-weight:700;text-decoration:underline}
.fp-modal-ok{margin-top:14px;min-width:180px;justify-content:center}
/* Con el emergente abierto no se desplaza el fondo. Se resuelve en CSS para
   que tambien funcione sin JavaScript, y se suelta solo cuando el JS le quita
   la clase «open». */
body:has(.fp-modal.open){overflow:hidden}
/* Linea de estado donde estaba el formulario. Deliberadamente discreta: el
   aviso lo da el emergente, y esto solo impide que la pagina quede vacia
   cuando el cliente lo cierra. */
.fp-form-listo{display:flex;width:fit-content;align-items:center;gap:9px;margin:8px auto;padding:12px 20px;border-radius:999px;background:var(--sky-50);color:var(--sky-700);font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px var(--sky-200)}
.fp-form-listo .ico{flex:none;width:19px;height:19px}

.faq{max-width:768px;margin:0 auto}
.faq-item{border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100);margin-bottom:10px;overflow:hidden}
.faq-item summary{padding:16px 20px;font-size:14px;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:20px;font-weight:700;color:var(--sky-500);flex:none;line-height:1;transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:var(--sky-50)}
.faq-item p{padding:0 20px 18px;font-size:14px;line-height:1.6;color:var(--muted)}

/* FAQ agrupado */
.faq-group{margin-bottom:32px}
.faq-group-title{font-family:'Luckiest Guy',cursive;font-size:20px;margin-bottom:12px;color:var(--sky-700)}
.faq-cta{margin-top:8px;padding:28px;border-radius:28px;background:var(--sky-50);text-align:center}
.faq-cta p{font-size:15px;font-weight:600;margin-bottom:14px}

/* Contacto */
.contacto-grid{display:grid;gap:24px;align-items:start}
@media(min-width:1024px){.contacto-grid{grid-template-columns:340px 1fr;gap:32px}}
.contacto-info{display:grid;gap:14px}
@media(min-width:640px) and (max-width:1023px){.contacto-info{grid-template-columns:1fr 1fr}}
.contacto-card{padding:20px;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--sky-100)}
.contacto-card i{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--sky-50);color:var(--sky-600);margin-bottom:12px}
.contacto-card b{display:block;font-size:15px}
.contacto-card p{margin-top:4px;font-size:13px;line-height:1.55;color:var(--muted);word-break:break-word}
.contacto-card .btn-wa{margin-top:14px}

/* Páginas legales */
.legal-entry{max-width:800px}
.legal-entry .entry-content h2{font-family:'Luckiest Guy',cursive;font-size:21px;color:var(--sky-700);margin-top:34px}
.legal-entry .entry-content h2:first-child{margin-top:0}
.legal-entry .entry-content p,.legal-entry .entry-content li{color:var(--navy-700)}
.legal-entry .entry-content em{color:#c0392b;font-style:italic;font-weight:600}

/* Icono de la cabecera con sesión abierta: la inicial sobre un círculo azul.
   Antes el icono era idéntico con sesión y sin sesión, así que no había forma
   de saber si uno estaba dentro. */
.iconbtn-in .user-inicial{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--sky-600);color:#fff;font-size:13px;font-weight:800;line-height:1;letter-spacing:.02em;box-shadow:0 6px 14px -6px rgba(47,139,221,.7)}
.iconbtn-in:hover .user-inicial{background:var(--sky-700)}
/* La leyenda con el nombre al pasar el mouse. Va DEBAJO del icono porque la
   cabecera esta arriba, y con pointer-events:none para que no le robe el clic
   al propio boton. */
.iconbtn-tip{position:absolute;top:calc(100% + 8px);right:0;z-index:60;padding:7px 12px;border-radius:999px;background:var(--navy-900);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s;box-shadow:0 10px 24px -10px rgba(15,42,67,.6)}
.iconbtn-in:hover .iconbtn-tip,.iconbtn-in:focus-visible .iconbtn-tip{opacity:1;transform:none}
/* En pantalla tactil no hay "pasar el mouse": la leyenda se quedaria pegada. */
@media(hover:none){.iconbtn-tip{display:none}}
@media(min-width:1024px){.iconbtn-in .user-inicial{width:32px;height:32px;font-size:14px}}

/* ---------- Panel de solicitudes del equipo (page-panel-solicitudes.php) ----
   Es una pagina del SITIO, no del panel de WordPress: la veterinaria entra con
   su usuario y ve sus citas sin pasar por wp-admin. Pensado para el telefono,
   que es donde de verdad se va a usar. */
.panel-hero{padding:40px 0 8px}
.panel-sec{padding-top:16px}
.panel-login{max-width:420px;margin:0 auto;padding:28px 24px;border-radius:28px;background:#fff;box-shadow:0 20px 50px -30px rgba(15,42,67,.35),inset 0 0 0 1px var(--sky-100)}
.panel-login h2{font-family:'Luckiest Guy',cursive;font-size:22px;margin-bottom:6px}
.panel-note{font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.panel-note a{color:var(--sky-700);text-decoration:underline}
.panel-error{padding:10px 14px;border-radius:14px;background:#fff5f5;color:#c0392b;font-size:13px;font-weight:600;margin-bottom:14px}
.panel-login label{display:block;font-size:12px;font-weight:700;color:var(--navy-700);margin-bottom:6px}
.panel-login input[type=text],.panel-login input[type=password]{width:100%;height:48px;padding:0 16px;margin-bottom:14px;border:0;border-radius:999px;background:var(--sky-50);font-size:15px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--sky-200)}
.panel-login input[type=text]:focus,.panel-login input[type=password]:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--sky-400)}
.panel-login .login-remember{font-weight:500;color:var(--muted);margin-bottom:14px}
.panel-login .login-remember input{margin-right:6px}
.panel-login input[type=submit]{width:100%;height:50px;border:0;border-radius:999px;background:var(--sky-600);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-btn)}
.panel-login input[type=submit]:hover{background:var(--sky-700)}

.panel-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-hola{font-size:15px;color:var(--navy-700)}
.panel-salir{font-size:13px;font-weight:700;color:var(--sky-700);text-decoration:underline}
.panel-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.panel-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--navy-700);box-shadow:inset 0 0 0 1px var(--sky-200);transition:background .2s,color .2s}
.panel-chip:hover{background:var(--sky-50)}
.panel-chip.on{background:var(--sky-600);color:#fff;box-shadow:none}
.panel-chip-n{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sky-50);color:var(--sky-700);font-size:11px;font-weight:800}
.panel-chip.on .panel-chip-n{background:rgba(255,255,255,.25);color:#fff}

/* Pestañas del panel: Solicitudes / Pedidos. Solo salen si la persona puede
   abrir las dos; con una sola serían un adorno. */
.panel-tabs{display:flex;gap:6px;margin-bottom:16px;padding:5px;border-radius:999px;background:var(--sky-50);width:fit-content;max-width:100%;overflow-x:auto}
.panel-tab{flex:none;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:700;color:var(--navy-700);white-space:nowrap;transition:background .2s,color .2s}
.panel-tab:hover{background:#fff}
.panel-tab.on{background:var(--sky-600);color:#fff;box-shadow:var(--shadow-btn)}

/* Tarjeta de pedido */
.panel-direccion{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;font-size:13.5px;color:var(--navy-700)}
.panel-direccion .ico{flex:none;width:17px;height:17px;margin-top:2px;color:var(--sky-500)}
.panel-articulos{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;padding:12px 14px;border-radius:16px;background:var(--sky-50);list-style:none}
.panel-articulos li{display:flex;gap:9px;font-size:13.5px;color:var(--navy-700);list-style:none}
.panel-cant{flex:none;font-weight:800;color:var(--sky-700)}
.panel-art{min-width:0}
.panel-nota-cliente{margin-bottom:12px;padding:10px 14px;border-radius:14px;background:#fffaf0;font-size:13px;line-height:1.55;color:var(--navy-700);box-shadow:inset 0 0 0 1px #f3ddb0}
.panel-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:14px;padding-top:12px;border-top:1px solid var(--sky-100)}
.panel-total span{font-size:13px;font-weight:700;color:var(--muted)}
.panel-total strong{font-size:20px;font-weight:800;color:var(--ink)}
.panel-total em{font-size:12px;font-style:normal;color:var(--faint)}
/* Contra entrega: el domiciliario tiene que cobrar, y eso se ve de lejos. */
.panel-total.cobrar{padding:12px 14px;border-top:0;border-radius:16px;background:#fff8e6;box-shadow:inset 0 0 0 1px #f3ddb0}
.panel-total.cobrar span{color:#8a5a00}

/* El boton claro de los paneles. Estaba usado en las plantillas y NO estaba
   definido en ninguna parte: "Cancelar pedido", "Restaurar", "Ir a la tienda" y
   "Cerrar sesion" salian sin fondo, como texto suelto con espacio alrededor.
   Mismo aspecto que .btn-ghost, que es el claro del resto del sitio. */
.btn-light{background:#fff;color:var(--navy-900);padding:14px 24px;font-size:14px;box-shadow:inset 0 0 0 1px var(--sky-200)}
.btn-light:hover{background:var(--sky-50)}

/* A quien le toca llevar el pedido. Se ve gris mientras no se ha asignado y
   azul cuando ya tiene dueno, para que en una lista larga se distinga de un
   golpe de vista lo que falta por despachar. El desplegable y el boton van en
   una rejilla de dos columnas: en movil el boton no cabe al lado del select
   sin dejarlo demasiado angosto para leer un nombre. */
.panel-lleva{margin-bottom:14px;padding:12px 14px;border-radius:16px;background:#f6f7f8;box-shadow:inset 0 0 0 1px #e6eaee}
.panel-lleva.on{background:var(--sky-50);box-shadow:inset 0 0 0 1px var(--sky-200)}
.panel-lleva-quien{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.panel-lleva-quien span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.panel-lleva-quien strong{font-size:14.5px;font-weight:700;color:var(--muted)}
.panel-lleva.on .panel-lleva-quien span{color:var(--sky-600)}
.panel-lleva.on .panel-lleva-quien strong{color:var(--ink)}
.panel-asignar{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0 0}
/* 16px en el desplegable no es capricho: por debajo de eso, Safari en iPhone
   hace zoom solo al tocarlo y descoloca el panel. */
.panel-asignar select{width:100%;padding:11px 12px;border:0;border-radius:12px;background:#fff;font-family:inherit;font-size:16px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--sky-200)}
.panel-asignar .btn{padding:10px 18px;border:0;cursor:pointer;font-family:inherit;font-size:13.5px}
@media(min-width:520px){.panel-asignar{grid-template-columns:1fr auto}}

.panel-chips-tipo{margin-bottom:10px}
.panel-chip-papelera{margin-left:auto;color:var(--muted)}
.panel-chip-papelera .panel-chip-n{background:#f1f3f5;color:var(--muted)}
.panel-chips-tipo .panel-chip{font-size:12.5px;padding:8px 14px}
.panel-aviso{padding:11px 16px;margin-bottom:16px;border-radius:16px;background:var(--sky-50);color:var(--sky-700);font-size:13.5px;font-weight:600;box-shadow:inset 0 0 0 1px var(--sky-200)}
.panel-borrar{margin:0}
.panel-borrar .btn{border:0;cursor:pointer;font-family:inherit}
.panel-vacio{padding:34px 24px;border-radius:24px;background:#fff;text-align:center;box-shadow:inset 0 0 0 1px var(--sky-100)}
.panel-lista{display:grid;gap:16px}
@media(min-width:900px){.panel-lista{grid-template-columns:1fr 1fr}}
.panel-card{display:flex;flex-direction:column;padding:20px;border-radius:24px;background:#fff;box-shadow:0 18px 44px -32px rgba(15,42,67,.4),inset 0 0 0 1px var(--sky-100)}
.panel-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-tipo{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-600)}
.panel-nombre{font-size:17px;font-weight:700;line-height:1.3;margin:3px 0 2px;color:var(--ink)}
.panel-cuando{font-size:12px;color:var(--faint)}
.panel-estado{flex:none;padding:5px 13px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.panel-contacto{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.panel-contacto .btn-wa{padding:9px 16px;font-size:13px}
.panel-tel{font-size:14px;font-weight:600;color:var(--navy-700)}
.panel-datos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 16px;font-size:13.5px}
.panel-datos dt{font-weight:700;color:var(--muted)}
.panel-datos dd{margin:0;color:var(--navy-700);min-width:0;overflow-wrap:anywhere}
.panel-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px}
.panel-acciones .btn{padding:11px 18px;font-size:13.5px}
.panel-cancelar:hover{background:#fff5f5;color:#c0392b}
.panel-sec .page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.panel-sec .page-numbers li{list-style:none}
.panel-sec .page-numbers a,.panel-sec .page-numbers span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 14px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--navy-700);box-shadow:inset 0 0 0 1px var(--sky-200)}
.panel-sec .page-numbers .current{background:var(--sky-600);color:#fff;box-shadow:none}

/* Botones flotantes: en movil, uno solo que se despliega.
   Medido en la pagina real a 390px: las tres burbujas ocupaban 54x158px fijos
   en la esquina y tapaban hasta el 40% del boton "Comprar ahora" de la columna
   derecha, mas el nombre y la descripcion de ese producto. Ahora en movil solo
   se ve WhatsApp; TikTok e Instagram salen al tocar el boton de mas.
   De 1024px para arriba no cambia nada: sobra espacio, se ven los tres y el
   boton de mas no se dibuja.
   Va en este bloque (solo WordPress) y no en head.html a proposito: la pagina
   suelta FullPets-home.html no lleva el boton de mas en su HTML, asi que si
   estas reglas la alcanzaran le esconderian TikTok e Instagram para siempre. */
.floats .fp-float-toggle{width:44px;height:44px;padding:0;border:0;cursor:pointer;background:#fff;color:var(--sky-700)}
.floats .fp-float-toggle svg{width:20px;height:20px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.floats .fp-float-more{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media(max-width:1023px){
  /* Plegado: display:none y no visibility, para que no siga ocupando el alto. */
  .floats .fp-float-more{display:none}
  .floats.fp-open .fp-float-more{display:flex}
  .floats.fp-open .fp-float-toggle svg{transform:rotate(45deg)}
}
@media(min-width:1024px){
  .floats .fp-float-toggle{display:none}
  .floats .fp-float-more{gap:12px}
}