/* =========================================================
   ZONA MASCOTAS — Cd. Victoria, Tamaulipas
   Landing de campaña + SEO local
   ========================================================= */

:root{
  --naranja:#F26A21;
  --naranja-osc:#D9541A;
  --naranja-claro:#FFF0E6;
  --azul:#1B4FA0;
  --azul-osc:#12305F;
  --azul-claro:#EAF1FB;
  --wa:#25D366;
  --wa-osc:#128C7E;
  --crema:#FFF8F1;
  --tinta:#182B45;
  --gris:#5B6B80;
  --borde:#E7EAF0;
  --blanco:#fff;
  --r:18px;
  --r-lg:26px;
  --sombra:0 10px 30px rgba(18,48,95,.08);
  --sombra-alta:0 18px 45px rgba(18,48,95,.16);
  --max:1180px;
  --display:'Baloo 2', 'Nunito', system-ui, sans-serif;
  --texto:'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--texto); color:var(--tinta);
  background:var(--blanco); font-size:17px; line-height:1.65;
  overflow-x:hidden; padding-bottom:0;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--azul); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display); line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:800}
h3{font-size:1.22rem; font-weight:700}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}

.wrap{width:min(100% - 2.5rem, var(--max)); margin-inline:auto}
.wrap--angosto{width:min(100% - 2.5rem, 820px)}
.salta{position:absolute; left:-9999px}
.salta:focus{left:1rem; top:1rem; z-index:999; background:#fff; padding:.6rem 1rem; border-radius:8px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  padding:.85rem 1.6rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-align:center; line-height:1.2;
}
.btn:hover{transform:translateY(-2px); text-decoration:none}
.btn--xl{padding:1.05rem 2rem; font-size:1.12rem}
.btn--wa{background:var(--wa); color:#08331d; box-shadow:0 8px 20px rgba(37,211,102,.32)}
.btn--wa:hover{background:#1fbe5b}
.btn--naranja{background:var(--naranja); color:#fff; box-shadow:0 8px 20px rgba(242,106,33,.3)}
.btn--naranja:hover{background:var(--naranja-osc)}
.btn--linea{background:transparent; color:var(--azul); border-color:var(--azul)}
.btn--linea:hover{background:var(--azul); color:#fff}
.btn--blanco{background:#fff; color:var(--azul-osc)}
.btn--linea-blanco{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn--linea-blanco:hover{background:#fff; color:var(--azul-osc)}
.ico-wa{width:22px; height:22px; fill:currentColor; flex:none}

/* ---------- Cinta superior ---------- */
.cinta{background:var(--azul-osc); color:#DCE7F7; font-size:.86rem}
.cinta__in{display:flex; gap:.7rem; justify-content:center; align-items:center; padding:.5rem 0; flex-wrap:wrap}
.cinta__sep{opacity:.4}
@media(max-width:760px){ .cinta__i:nth-child(3), .cinta__i:nth-child(5), .cinta__sep{display:none} }

/* ---------- Header ---------- */
.head{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--borde)}
.head__in{display:flex; align-items:center; gap:1rem; padding:.7rem 0}
.marca{display:flex; align-items:center; gap:.6rem; color:var(--tinta)}
.marca:hover{text-decoration:none}
.marca img{border-radius:50%; width:52px; height:52px; object-fit:cover}
.marca__txt{display:flex; flex-direction:column; line-height:1.1}
.marca__txt strong{font-family:var(--display); font-size:1.24rem; color:var(--azul); font-weight:800}
.marca__txt small{font-size:.76rem; color:var(--gris)}
.nav{display:flex; gap:1.35rem; margin-left:auto; font-weight:700; font-size:.97rem}
.nav a{color:var(--tinta)}
.nav a:hover{color:var(--naranja); text-decoration:none}
.head__cta{padding:.6rem 1.2rem; font-size:.95rem}
.burger{display:none; background:none; border:0; flex-direction:column; gap:5px; padding:.5rem; cursor:pointer}
.burger span{width:24px; height:3px; background:var(--azul); border-radius:3px; transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:960px){
  .nav{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    gap:0; padding:0 1.25rem; max-height:0; overflow:hidden; transition:max-height .3s ease;
    border-bottom:1px solid var(--borde); box-shadow:var(--sombra);
  }
  .nav.abierto{max-height:420px; padding:.5rem 1.25rem 1rem}
  .nav a{padding:.75rem 0; border-bottom:1px solid var(--borde)}
  .burger{display:flex; margin-left:auto; order:3}
  .head__cta{order:2; margin-left:auto}
  .head__cta span{display:none}
}
@media(max-width:520px){ .head__cta{padding:.55rem .9rem} .marca__txt small{display:none} }

/* ---------- Hero ---------- */
.hero{position:relative; background:linear-gradient(160deg,#fff 0%, var(--azul-claro) 100%); overflow:hidden; padding:3.2rem 0 3.6rem}
.hero__blob{position:absolute; top:-160px; right:-140px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(242,106,33,.22), rgba(242,106,33,0) 70%)}
.hero__in{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:2.8rem; align-items:center}
.pill{display:inline-block; background:var(--naranja-claro); color:var(--naranja-osc); font-weight:800; font-size:.86rem; padding:.4rem 1rem; border-radius:999px; margin-bottom:1rem}
.hero h1{color:var(--azul-osc)}
.dest{color:var(--naranja); position:relative; white-space:nowrap}
.lead{font-size:1.13rem; color:var(--gris); max-width:56ch}
.lead strong{color:var(--tinta)}
.hero__btns{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.6rem 0 1.2rem}
.hero__btns--centro{justify-content:center}
.hero__checks{display:flex; gap:1.3rem; flex-wrap:wrap; font-weight:700; font-size:.95rem; color:var(--azul-osc)}
.hero__img img{border-radius:var(--r-lg); box-shadow:var(--sombra-alta)}
@media(max-width:940px){
  .hero{padding:2.4rem 0 2.6rem}
  .hero__in{grid-template-columns:1fr; gap:2rem}
  .hero__img{order:-1}
}

/* ---------- Beneficios ---------- */
.benes{background:var(--azul-osc); padding:2.2rem 0}
.benes__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
.bene{color:#fff}
.bene__ico{font-size:1.9rem; display:block; margin-bottom:.4rem}
.bene h3{color:#fff; font-size:1.08rem; margin-bottom:.25rem}
.bene p{color:#BFD2EC; font-size:.93rem; margin:0}
@media(max-width:860px){ .benes__grid{grid-template-columns:repeat(2,1fr); gap:1.4rem} }
@media(max-width:460px){ .benes__grid{grid-template-columns:1fr} }

/* ---------- Secciones ---------- */
.sec{padding:4.2rem 0}
.sec--crema{background:var(--crema)}
.sec--azul{background:linear-gradient(160deg,var(--azul) 0%, var(--azul-osc) 100%); color:#fff}
.sec__head{max-width:780px; margin:0 auto 2.6rem; text-align:center}
.sec__head h2{color:var(--azul-osc)}
.sec__head--claro h2{color:#fff}
.sec__sub{color:var(--gris); font-size:1.06rem; margin:0}
.sec__head--claro .sec__sub{color:#CFDDF3}
.sec__head--claro .sec__sub strong{color:#fff}
.eyebrow{display:inline-block; font-family:var(--display); font-weight:700; color:var(--naranja); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; margin-bottom:.4rem}
.eyebrow--claro{color:#FFB784}
@media(max-width:700px){ .sec{padding:3rem 0} }

/* ---------- Cards servicios ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.card{background:#fff; border:1px solid var(--borde); border-radius:var(--r); padding:1.7rem 1.5rem; box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.card__ico{font-size:2rem; display:block; margin-bottom:.6rem}
.card h3{color:var(--azul-osc)}
.card p{color:var(--gris); font-size:.97rem; flex:1}
.card__link{font-weight:800; color:var(--naranja); font-size:.95rem}
@media(max-width:900px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .cards{grid-template-columns:1fr} }

/* ---------- Split (imagen + texto) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.split--inv .split__img{order:2}
.split__img img{border-radius:var(--r-lg); box-shadow:var(--sombra-alta)}
.split__txt h2{color:var(--azul-osc)}
.split__txt p{color:var(--gris)}
@media(max-width:900px){
  .split{grid-template-columns:1fr; gap:2rem}
  .split--inv .split__img{order:0}
}

.etapas{display:grid; gap:.7rem; margin:1.4rem 0}
.etapa{background:#fff; border-left:5px solid var(--naranja); border-radius:12px; padding:.75rem 1rem; box-shadow:0 3px 10px rgba(18,48,95,.06)}
.etapa strong{display:block; color:var(--azul-osc); font-family:var(--display); font-size:1.05rem}
.etapa span{color:var(--gris); font-size:.94rem}
.marcas{background:var(--azul-claro); border-radius:12px; padding:.9rem 1.1rem; font-size:.95rem; color:var(--azul-osc)!important}

.lista-check{margin:1.2rem 0 1.6rem; display:grid; gap:.6rem}
.lista-check li{position:relative; padding-left:1.9rem; color:var(--gris)}
.lista-check li::before{content:"✔"; position:absolute; left:0; top:0; color:var(--naranja); font-weight:800}
.lista-check strong{color:var(--tinta)}

/* ---------- Planes de vacunación ---------- */
.planes{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start}
.plan{background:#fff; border-radius:var(--r-lg); padding:2rem 1.6rem; text-align:center; box-shadow:var(--sombra-alta); position:relative}
.plan--top{transform:scale(1.045); border:3px solid var(--naranja)}
.plan__tag{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--naranja); color:#fff; font-family:var(--display); font-weight:700; font-size:.8rem; padding:.28rem 1rem; border-radius:999px; white-space:nowrap}
.plan__precio{font-family:var(--display); font-weight:800; font-size:2.5rem; color:#fff; border-radius:999px; padding:.15rem 1.4rem; display:inline-block; margin-bottom:.8rem; line-height:1.3}
.plan__precio--a{background:#E8446E}
.plan__precio--b{background:#7DB63F}
.plan__precio--c{background:#8B5FBF}
.plan h3{color:var(--azul-osc); font-size:1.45rem; margin-bottom:.2rem}
.plan__vac{color:var(--gris); font-weight:700; font-size:.95rem; margin-bottom:1.1rem}
.plan__lista{display:grid; gap:.5rem; text-align:left; margin-bottom:1.5rem; font-size:.97rem; color:var(--tinta)}
.plan__lista li{position:relative; padding-left:1.6rem}
.plan__lista li::before{content:"✓"; position:absolute; left:0; color:var(--wa-osc); font-weight:800}
.plan .btn{width:100%}
.nota{text-align:center; color:#CFDDF3; font-size:.93rem; margin-top:2rem}
.nota a{color:#fff; font-weight:700; text-decoration:underline}
.nota--osc{color:var(--gris)}
@media(max-width:900px){
  .planes{grid-template-columns:1fr; max-width:440px; margin-inline:auto; gap:1.8rem}
  .plan--top{transform:none}
}

/* ---------- Kit cachorro ---------- */
.kit{background:linear-gradient(150deg,var(--naranja) 0%, #E85C15 100%); color:#fff; padding:4rem 0}
.kit h2{color:#fff}
.kit p{color:#FFE7D6}
.kit strong{color:#fff}

/* ---------- Pasos ---------- */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.paso{background:#fff; border-radius:var(--r); padding:1.8rem 1.5rem; box-shadow:var(--sombra); position:relative}
.paso__n{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--azul); color:#fff; font-family:var(--display); font-weight:800; font-size:1.3rem; margin-bottom:.7rem}
.paso h3{color:var(--azul-osc)}
.paso p{color:var(--gris); font-size:.97rem; margin:0}
@media(max-width:820px){ .pasos{grid-template-columns:1fr} }

/* ---------- Zonas de cobertura ---------- */
.zonas{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}
.zonas li{background:var(--azul-claro); color:var(--azul-osc); font-weight:700; font-size:.93rem; padding:.45rem 1.05rem; border-radius:999px}

/* ---------- Ubicación ---------- */
.ubica{display:grid; grid-template-columns:1fr 1.15fr; gap:2.4rem; align-items:start}
.dato{margin-bottom:1.5rem}
.dato h3{color:var(--azul-osc); font-size:1.08rem; margin-bottom:.2rem}
.dato p{color:var(--gris); margin:0}
.dato a{font-weight:800}
.ubica__btns{display:flex; gap:.7rem; flex-wrap:wrap}
.ubica__mapa{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-alta); line-height:0}
.ubica__mapa iframe{width:100%; height:430px; border:0}
@media(max-width:900px){ .ubica{grid-template-columns:1fr} .ubica__mapa iframe{height:320px} }

/* ---------- FAQ ---------- */
.faqs{display:grid; gap:.8rem}
.faqs details{background:#fff; border:1px solid var(--borde); border-radius:14px; padding:1.05rem 1.3rem; box-shadow:0 3px 12px rgba(18,48,95,.05)}
.faqs summary{font-family:var(--display); font-weight:700; font-size:1.06rem; color:var(--azul-osc); cursor:pointer; list-style:none; position:relative; padding-right:2rem}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+"; position:absolute; right:0; top:-2px; color:var(--naranja); font-size:1.6rem; line-height:1; transition:transform .2s}
.faqs details[open] summary::after{transform:rotate(45deg)}
.faqs p{color:var(--gris); margin:.7rem 0 0; font-size:.98rem}

/* ---------- CTA final ---------- */
.cta-final{background:var(--azul-osc); color:#fff; text-align:center; padding:4rem 0}
.cta-final h2{color:#fff; font-size:clamp(1.9rem,4vw,2.9rem)}
.cta-final p{color:#C6D7EF; max-width:620px; margin:0 auto 1.6rem; font-size:1.08rem}

/* ---------- Footer ---------- */
.pie{background:#0D2547; color:#B9CBE5; padding:3rem 0 0; font-size:.95rem}
.pie__grid{display:grid; grid-template-columns:1.3fr 1fr 1.3fr; gap:2.2rem; padding-bottom:2.4rem}
.pie h3{color:#fff; font-size:1.05rem; margin-bottom:.7rem}
.pie ul{display:grid; gap:.45rem}
.pie a{color:#B9CBE5}
.pie a:hover{color:var(--naranja)}
.pie__logo{border-radius:50%; margin-bottom:.7rem}
.pie__slogan{font-family:var(--display); font-weight:700; color:var(--naranja); font-size:1.15rem; margin:0 0 .3rem}
.pie__min{font-size:.9rem; margin:0}
.pie__base{border-top:1px solid rgba(255,255,255,.12); padding:1rem 0; font-size:.86rem}
.pie__base .wrap{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
@media(max-width:820px){ .pie__grid{grid-template-columns:1fr; gap:1.8rem} }

/* ---------- Flotantes ---------- */
.wa-flota{
  position:fixed; right:18px; bottom:22px; z-index:70;
  width:60px; height:60px; border-radius:50%; background:var(--wa);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45); animation:pulso 2.6s infinite;
}
.wa-flota svg{width:34px; height:34px; fill:#fff}
@keyframes pulso{0%,100%{box-shadow:0 10px 26px rgba(37,211,102,.45)}50%{box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,.12)}}

.barra-movil{display:none}
@media(max-width:760px){
  body{padding-bottom:64px}
  .wa-flota{bottom:78px; width:54px; height:54px}
  .wa-flota svg{width:30px; height:30px}
  .barra-movil{
    display:grid; grid-template-columns:repeat(3,1fr); position:fixed; bottom:0; left:0; right:0; z-index:65;
    background:#fff; border-top:1px solid var(--borde); box-shadow:0 -4px 18px rgba(18,48,95,.1);
  }
  .barra-movil a{
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:.55rem 0;
    font-size:.76rem; font-weight:800; color:var(--azul-osc); text-decoration:none;
  }
  .barra-movil a span{font-size:1.15rem}
  .barra-movil--wa{background:var(--wa); color:#08331d}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================
   TIENDA · CARRITO · CHECKOUT
   ========================================================= */

/* ---------- Filtros ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2rem}
.filtro{
  background:#fff; border:2px solid var(--borde); color:var(--azul-osc);
  font-family:var(--display); font-weight:700; font-size:.92rem;
  padding:.45rem 1.1rem; border-radius:999px; cursor:pointer; transition:.18s;
}
.filtro:hover{border-color:var(--naranja); color:var(--naranja)}
.filtro.activo{background:var(--azul); border-color:var(--azul); color:#fff}

/* ---------- Grid de productos ---------- */
.grid-tienda{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem}
@media(max-width:1050px){ .grid-tienda{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px){ .grid-tienda{grid-template-columns:repeat(2,1fr); gap:1rem} }
@media(max-width:430px){ .grid-tienda{grid-template-columns:1fr} }

.prod{
  background:#fff; border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease; border:1px solid var(--borde);
}
.prod:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.prod__top{
  position:relative; height:130px; display:grid; place-items:center;
  background:linear-gradient(150deg,#EAF1FB,#D8E5F8);
}
.prod__top--rc{background:linear-gradient(150deg,#FDE8EC,#F8D2DA)}
.prod__top--nupec{background:linear-gradient(150deg,#E6F0FF,#CFE0FA)}
.prod__icono{font-size:3.2rem; line-height:1}
.prod__marca{
  position:absolute; top:.6rem; left:.6rem; background:rgba(255,255,255,.92);
  font-family:var(--display); font-weight:800; font-size:.74rem; letter-spacing:.03em;
  color:var(--azul-osc); padding:.2rem .65rem; border-radius:999px; text-transform:uppercase;
}
.pr__off{
  position:absolute; top:.6rem; right:.6rem; background:var(--naranja); color:#fff;
  font-family:var(--display); font-weight:800; font-size:.8rem; padding:.2rem .6rem; border-radius:999px;
}
.prod__body{padding:1.1rem 1.1rem 1.3rem; display:flex; flex-direction:column; flex:1}
.prod__body h3{font-size:1.06rem; color:var(--azul-osc); margin-bottom:.3rem; line-height:1.25}
.prod__desc{color:var(--gris); font-size:.86rem; line-height:1.5; margin-bottom:.8rem; flex:1}
.prod__precio{display:flex; align-items:baseline; gap:.5rem; margin-bottom:.7rem; flex-wrap:wrap}
.pr__ahora{font-family:var(--display); font-weight:800; font-size:1.6rem; color:var(--naranja); line-height:1}
.pr__antes{color:var(--gris); text-decoration:line-through; font-size:.95rem}
.prod__label{display:block; font-size:.78rem; font-weight:800; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.7rem}
.prod__sel{
  width:100%; margin-top:.25rem; padding:.55rem .7rem; border:2px solid var(--borde);
  border-radius:10px; font-family:var(--texto); font-size:.93rem; font-weight:600;
  color:var(--tinta); background:#fff; cursor:pointer;
}
.prod__sel:focus{outline:none; border-color:var(--azul)}
.prod__add{width:100%; padding:.7rem 1rem; font-size:.97rem}
.tienda__aviso{margin-top:2rem}

/* ---------- Burbuja del carrito ---------- */
.burbuja{
  position:fixed; right:18px; bottom:96px; z-index:71; width:60px; height:60px;
  border-radius:50%; background:var(--azul); color:#fff; border:0; cursor:pointer;
  font-size:1.5rem; display:none; place-items:center; box-shadow:0 10px 26px rgba(27,79,160,.45);
}
.burbuja.visible{display:grid}
.burbuja__n{
  position:absolute; top:-4px; right:-4px; background:var(--naranja); color:#fff;
  font-family:var(--display); font-weight:800; font-size:.82rem; min-width:24px; height:24px;
  border-radius:999px; display:grid; place-items:center; border:2px solid #fff;
}

/* ---------- Cajón lateral ---------- */
.cajon{position:fixed; inset:0; z-index:90; visibility:hidden; pointer-events:none}
.cajon.abierto{visibility:visible; pointer-events:auto}
.cajon__fondo{position:absolute; inset:0; background:rgba(18,48,95,.55); opacity:0; transition:opacity .25s}
.cajon.abierto .cajon__fondo{opacity:1}
.cajon__panel{
  position:absolute; top:0; right:0; height:100%; width:min(100%,430px); background:#fff;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease;
  box-shadow:-10px 0 40px rgba(18,48,95,.2);
}
.cajon.abierto .cajon__panel{transform:none}
.cajon__head{display:flex; align-items:center; padding:1.1rem 1.3rem; border-bottom:1px solid var(--borde)}
.cajon__head h2{margin:0; font-size:1.25rem; color:var(--azul-osc)}
.cajon__x{margin-left:auto; background:none; border:0; font-size:2rem; line-height:1; color:var(--gris); cursor:pointer; padding:0 .3rem}
.cajon__body{flex:1; overflow-y:auto; padding:1rem 1.3rem}
.carrito__vacio{text-align:center; color:var(--gris); padding:2.5rem 0; font-size:.97rem}

.citem{display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; padding:.9rem 0; border-bottom:1px solid var(--borde); align-items:center}
.citem__info strong{display:block; font-size:.95rem; color:var(--azul-osc); line-height:1.3}
.citem__info small{color:var(--gris); font-size:.84rem}
.citem__ctrl{display:flex; align-items:center; gap:.5rem; grid-column:2; grid-row:1}
.citem__ctrl button{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--borde); background:#fff;
  font-size:1.1rem; font-weight:700; color:var(--azul); cursor:pointer; line-height:1;
}
.citem__ctrl button:hover{border-color:var(--naranja); color:var(--naranja)}
.citem__ctrl span{min-width:20px; text-align:center; font-weight:800}
.citem__sub{grid-column:2; grid-row:2; text-align:right; font-family:var(--display); font-weight:800; color:var(--naranja)}

.cajon__pie{border-top:1px solid var(--borde); padding:1.1rem 1.3rem 1.4rem; background:var(--crema)}
.cajon__total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem}
.cajon__total span{font-weight:700; color:var(--gris)}
.cajon__total strong{font-family:var(--display); font-size:1.9rem; color:var(--azul-osc)}
.cajon__btn{width:100%}
.cajon__btn:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* ---------- Checkout ---------- */
.checkout{display:none; margin-top:1.2rem; padding-top:1.2rem; border-top:2px dashed var(--borde)}
.checkout.visible{display:block}
.checkout h3{font-size:1.08rem; color:var(--azul-osc); margin-bottom:.8rem}
.checkout label{display:block; font-size:.8rem; font-weight:800; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.7rem}
.checkout input,.checkout select{
  width:100%; margin-top:.25rem; padding:.65rem .8rem; border:2px solid var(--borde); border-radius:10px;
  font-family:var(--texto); font-size:.97rem; font-weight:600; color:var(--tinta); background:#fff;
  text-transform:none; letter-spacing:normal;
}
.checkout input:focus,.checkout select:focus{outline:none; border-color:var(--azul)}
.checkout__min{font-size:.8rem; color:var(--gris); text-align:center; margin:.7rem 0 0; text-transform:none; letter-spacing:normal; font-weight:400}

/* ---------- Confirmación ---------- */
.gracias{position:fixed; inset:0; z-index:95; display:none; place-items:center; background:rgba(18,48,95,.7); padding:1.2rem}
.gracias.visible{display:grid}
.gracias__caja{background:#fff; border-radius:var(--r-lg); padding:2.4rem 2rem; text-align:center; max-width:420px; box-shadow:var(--sombra-alta)}
.gracias__ico{font-size:3.4rem; display:block; margin-bottom:.4rem}
.gracias__caja h2{color:var(--azul-osc); margin-bottom:.5rem}
.gracias__caja p{color:var(--gris); font-size:1rem}
.gracias__caja strong{color:var(--naranja); font-family:var(--display); font-size:1.15rem}
.gracias__min{font-size:.88rem}
.gracias__cerrar{display:block; margin:1rem auto 0; background:none; border:0; color:var(--gris); text-decoration:underline; cursor:pointer; font-family:var(--texto); font-size:.92rem}

/* ---------- Consola de píxel para la demo (?debug=1) ---------- */
.dbg{
  position:fixed; left:14px; bottom:14px; z-index:99; width:min(92vw,310px);
  background:#0D1B2E; color:#D6E4F7; border-radius:14px; overflow:hidden;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
  box-shadow:0 16px 40px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12);
}
.dbg__head{display:flex; align-items:center; gap:.5rem; padding:.6rem .85rem; background:rgba(255,255,255,.06); font-weight:700; letter-spacing:.03em}
.dbg__punto{width:9px; height:9px; border-radius:50%; background:#25D366; box-shadow:0 0 0 0 rgba(37,211,102,.7); animation:latido 1.8s infinite}
@keyframes latido{50%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}
.dbg__x{margin-left:auto; background:none; border:0; color:#8FA6C4; font-size:1.2rem; cursor:pointer; line-height:1}
.dbg__log{max-height:230px; overflow-y:auto; padding:.4rem .5rem .6rem}
.dbg__fila{display:flex; gap:.45rem; align-items:baseline; padding:.28rem .35rem; border-radius:6px}
.dbg__fila:nth-child(odd){background:rgba(255,255,255,.04)}
.dbg__fila b{color:#FFB784}
.dbg__hora{color:#6E88AB; font-size:.7rem}
.dbg__extra{color:#8FA6C4; font-size:.72rem; margin-left:auto; text-align:right}

body.sin-scroll{overflow:hidden}
@media(max-width:760px){ .burbuja{bottom:140px; width:54px; height:54px; font-size:1.3rem} }