/* =========================================================
   TOKENS
   =========================================================
   Paleta tomada directo del logo real de SANFIT (círculo negro-azulado +
   texto "SUPLEMENTOS" en teal/cyan) — antes esta variable usaba un verde
   inventado que no correspondía al logo. Como el resto del CSS usa estas
   variables en vez de colores sueltos, cambiar estos valores retemiza TODO
   el sitio sin tener que tocar cada regla. */
:root{
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f4f5f3;
  --border:        #e4e6e2;
  --text:          #0c0f0d;
  --text-muted:    #6b7169;
  --accent:        #2ac1bb;
  --accent-dim:    #1f9c97;
  --accent-ink:    #06211e;
  --accent-text:   #0c7a75; /* teal más oscuro, para texto sobre fondo claro (el --accent normal no da suficiente contraste como texto) */
  --warn:          #e5484d;
  --dark:          #0c0f0d;

  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius: 8px;
  --max-w: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
h1, h2, h3{ font-family:var(--font-display); line-height:1.08; letter-spacing:-.01em; }

/* =========================================================
   FEEDBACK VISUAL AL HACER CLICK (todos los botones del sitio)
   ========================================================= */
button, .btn-primary, .btn-add, .btn-whatsapp, .btn-vaciar, .cuenta-link, .footer-social a{
  transition: transform .1s ease, filter .1s ease, box-shadow .1s ease;
}
button:active:not(:disabled),
.btn-primary:active, .btn-add:active:not(:disabled),
.btn-whatsapp:active:not(:disabled), .btn-vaciar:active, .cuenta-link:active, .footer-social a:active{
  transform: scale(.94);
  filter: brightness(.94);
}
@media (prefers-reduced-motion: reduce){
  button, .btn-primary, .btn-add, .btn-whatsapp, .btn-vaciar, .cuenta-link, .footer-social a{ transition:none; }
  button:active, .btn-primary:active, .btn-add:active, .btn-whatsapp:active, .btn-vaciar:active, .cuenta-link:active, .footer-social a:active{ transform:none; filter:none; }
}

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}
@media (max-width:480px){
  .wrap{ padding:0 16px; }
}

/* =========================================================
   TOP BANNER — franja fina arriba de todo, texto editable en index.php
   ========================================================= */
.top-banner{
  background:var(--dark);
  color:#fff;
  text-align:center;
  font-size:.78rem;
  font-weight:600;
  padding:9px 16px;
}
.top-banner strong{ color:var(--accent); }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar .wrap{
  display:flex; align-items:center; gap:20px;
  height:72px;
}
/* En celular, el buscador pasa a una segunda fila propia (ocupa todo el
   ancho) en vez de achicarse hasta quedar inusable al lado del logo, la
   cuenta y el carrito. */
@media (max-width:640px){
  .topbar .wrap{
    flex-wrap:wrap;
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
    row-gap:10px;
    gap:12px;
  }
  .search-box{
    order:3;
    flex-basis:100%;
    max-width:100%;
    margin-left:0;
  }
}
@media (max-width:380px){
  .brand{ font-size:1rem; gap:8px; }
  .brand-logo{ height:32px; width:32px; }
  .cuenta-link{ padding:.4rem .7rem; font-size:.8rem; }
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.01em;
  white-space:nowrap;
  text-decoration:none;
  color:var(--text);
  flex-shrink:0;
}
.brand-logo{ height:38px; width:38px; object-fit:contain; flex-shrink:0; border-radius:50%; }

.search-box{
  flex:1;
  max-width:420px;
  margin-left:auto;
  position:relative;
}
.search-box input{
  width:100%;
  padding:.6rem .9rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:.9rem;
}
.search-box input:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

.cuenta-link{
  flex-shrink:0;
  font-size:.85rem;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  padding:.5rem .9rem;
  border-radius:100px;
  background:var(--surface-2);
  white-space:nowrap;
}
.cuenta-link:hover{ background:var(--dark); color:#fff; }

.cart-btn{
  position:relative;
  background:var(--dark);
  border:none;
  color:#fff;
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.cart-btn:hover{ background:var(--accent-dim); }
.cart-btn svg{ width:20px; height:20px; }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:.7rem; font-weight:800;
  min-width:18px; height:18px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
  border:2px solid #fff;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:40px 0 32px; }
.hero .wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:700;
  background:var(--surface-2); padding:6px 14px; border-radius:20px;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2rem, 4.6vw, 3rem);
  margin:0 0 18px;
}
.hero h1 em{ font-style:normal; color:var(--accent-text); }
.hero p{
  color:var(--text-muted);
  font-size:1rem;
  max-width:46ch;
  margin:0 0 22px;
}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:18px;
  margin:0 0 26px; padding:0; list-style:none;
  font-size:.8rem; font-weight:600;
}
.hero-badges li{ display:flex; align-items:center; gap:6px; }
.btn-primary{
  display:inline-block;
  background:var(--dark);
  color:#fff;
  border:none;
  font-weight:700;
  padding:.9rem 1.7rem;
  border-radius:var(--radius);
  text-decoration:none;
  font-size:.92rem;
  box-shadow:5px 5px 0 var(--accent);
}
.btn-primary:hover{ background:var(--accent-dim); box-shadow:5px 5px 0 var(--accent-dim); }

/* Tarjeta del producto destacado, al lado del texto del hero. Borde e
   "hard shadow" en vez de sombra difusa: mismo lenguaje visual (bloque
   sólido, sin difuminar) que la sección "¿Para qué entrenás?" de más
   abajo, para que se sienta parte del mismo sistema. */
.hero-card{
  background:var(--surface-2);
  border-radius:14px;
  border:2px solid var(--dark);
  box-shadow:8px 8px 0 var(--accent);
  padding:22px;
}
.hero-card-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; font-size:.7rem; font-weight:800;
}
.hero-card-top .tag-top{ background:var(--dark); color:#fff; padding:5px 12px; border-radius:16px; }
.hero-card-top .tag-lab{ color:var(--accent-text); }
.hero-card-img{
  background:#fff; border-radius:14px; padding:20px;
  display:flex; justify-content:center; margin-bottom:16px;
}
.hero-card-img img{ max-height:200px; object-fit:contain; }
.hero-card-name .sub{ font-size:.7rem; font-weight:700; color:var(--text-muted); letter-spacing:.03em; }
.hero-card-name h3{ font-size:1.2rem; margin:4px 0 10px; font-family:var(--font-body); font-weight:800; }
.price-row{ display:flex; align-items:baseline; gap:10px; }
.price-row .old{ color:var(--text-muted); text-decoration:line-through; font-size:.85rem; }
.price-row .now{ color:var(--accent-text); font-size:1.4rem; font-weight:800; }
.hero-stats{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:18px;
}
.hero-stats div{ background:#fff; border-radius:12px; padding:12px 8px; text-align:center; }
.hero-stats div b{ display:block; font-family:var(--font-display); font-size:1.15rem; }
.hero-stats div span{ font-size:.64rem; color:var(--text-muted); font-weight:700; }

@media (max-width: 760px){
  .hero{ padding:28px 0 24px; }
  .hero .wrap{ grid-template-columns:1fr; gap:28px; }
  .eyebrow{ margin-bottom:12px; }
  .hero h1{ margin:0 0 12px; }
  .hero p{ margin:0 0 16px; }
  .hero-badges{ margin:0 0 18px; }
}

/* Cuando todavía no se eligió un producto destacado en el admin, el hero
   queda a una sola columna centrada en vez de dejar un hueco vacío del
   lado derecho (ver index.php: la tarjeta solo se imprime si hay
   $destacado). */
.hero .wrap.hero-solo{
  grid-template-columns:1fr;
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.hero-solo .hero-badges,
.hero-solo .eyebrow{ justify-content:center; }
.hero-solo p{ margin-left:auto; margin-right:auto; }

/* =========================================================
   FRANJA DE CATEGORÍAS (arriba del catálogo, dividido por rubro)
   ========================================================= */
.filters{
  background:var(--surface-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.filters .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:14px 24px;
}
.filters-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.filters-hint{ font-size:.78rem; color:var(--text-muted); font-weight:600; }
@media (max-width:640px){
  .filters .wrap{ padding:12px 16px; }
}
.pill{
  border:none;
  background:#fff;
  color:var(--text-muted);
  padding:.55rem 1.1rem;
  border-radius:100px;
  font-size:.82rem;
  font-weight:700;
}
.pill.active, .pill:hover{ background:var(--dark); color:#fff; }

/* =========================================================
   GRID DE PRODUCTOS
   ========================================================= */
.productos-section{ padding:32px 0 48px; }
.catalog-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; margin-bottom:8px;
}
.catalog-head h2{ font-size:1.7rem; margin:2px 0 0; }
.catalog-head p{ color:var(--text-muted); max-width:380px; font-size:.86rem; margin:0; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:22px;
  margin-top:24px;
}
@media (max-width:640px){
  .productos-section{ padding:24px 0 40px; }
  .catalog-head h2{ font-size:1.35rem; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; margin-top:16px; }
}
@media (max-width:420px){
  /* En la pantalla más chica, 2 columnas parejas en vez de que la última
     quede sola y angosta con auto-fill. */
  .grid{ grid-template-columns:repeat(2, 1fr); }
}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.card-img{
  aspect-ratio:1/1;
  background:var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card-img .sin-stock{
  position:absolute; inset:0;
  background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--text-muted); font-weight:700;
}
.badge-destacado{
  position:absolute; top:10px; left:10px;
  background:var(--dark);
  color:#fff;
  font-size:.66rem; font-weight:800;
  padding:.25rem .6rem;
  border-radius:100px;
}
/* Se muestra en el top 3 de más vendidos (confirmadas) cuando ESE producto
   no es ya el destacado (para no repetir dos etiquetas en la misma
   esquina) — ver window.MAS_VENDIDOS_IDS en index.php y renderCard() en
   js/main.js. */
.badge-vendido{
  position:absolute; top:10px; left:10px;
  background:var(--accent-text);
  color:#fff;
  font-size:.66rem; font-weight:800;
  padding:.25rem .6rem;
  border-radius:100px;
}
.card-body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.card-cat{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.card-title{
  font-size:.98rem;
  font-weight:700;
  margin:0;
  min-height:2.6em;
}
.card-price{
  margin-top:auto;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.card-price .actual{
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--accent-text);
}
.card-price .anterior{
  font-size:.78rem;
  color:var(--text-muted);
  text-decoration:line-through;
}
.btn-add{
  margin-top:10px;
  width:100%;
  padding:.65rem;
  border:none;
  background:var(--dark);
  color:#fff;
  border-radius:var(--radius);
  font-size:.85rem;
  font-weight:700;
}
.btn-add:hover:not(:disabled){ background:var(--accent-dim); }
.btn-add:disabled{ opacity:.4; cursor:not-allowed; background:var(--surface-2); color:var(--text-muted); }

/* Contador +/- que reemplaza al botón "Agregar al pedido" apenas el
   producto ya tiene alguna unidad en el carrito (ver renderAccionCard en
   js/main.js). Mismo alto que el botón para que la tarjeta no salte de
   tamaño al cambiar de uno a otro. */
.card-stepper{
  margin-top:10px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--dark); border-radius:var(--radius);
  padding:.3rem .4rem;
}
.stepper-btn{
  width:32px; height:32px;
  border:none; background:transparent; color:#fff;
  border-radius:6px; font-size:1.1rem; font-weight:700; line-height:1;
}
.stepper-btn:hover{ background:var(--accent-dim); }
.stepper-cant{ font-weight:700; font-size:.95rem; min-width:24px; text-align:center; color:#fff; }

.vacio{
  color:var(--text-muted);
  padding:40px 0;
  text-align:center;
}

/* =========================================================
   "¿PARA QUÉ ENTRENÁS?" — objetivos (admin > Objetivos), agrupa productos
   por lo que busca el cliente en vez de por rubro. Fondo negro-azulado +
   acento teal, a propósito distinto del resto de la portada (que es clara):
   marca la sección como "la del logo" y la separa visualmente del catálogo
   de arriba. No se imprime nada si no hay objetivos cargados (ver el `if`
   en index.php).
   ========================================================= */
.metas-section{
  background:var(--dark);
  color:#fff;
  padding:40px 0;
  position:relative;
  overflow:hidden;
}
/* Cuña diagonal decorativa, apenas visible, mismo recurso que en la
   propuesta de diseño aprobada — un solo elemento gráfico, no repetido. */
.metas-section::before{
  content:"";
  position:absolute;
  top:-60%; right:-18%;
  width:520px; height:520px;
  background:var(--accent);
  opacity:.08;
  border-radius:42% 58% 61% 39% / 45% 40% 60% 55%;
  transform:rotate(18deg);
}
.metas-section .wrap{ position:relative; z-index:1; }
.metas-section h2{ font-size:1.7rem; margin:0 0 24px; }

.metas-tabs{
  display:flex; flex-wrap:wrap; gap:28px;
  border-bottom:1px solid rgba(255,255,255,.15);
  margin-bottom:26px;
}
.meta-tab{
  background:none; border:none; color:rgba(255,255,255,.55);
  font-size:.95rem; font-weight:700;
  padding-bottom:14px;
  border-bottom:3px solid transparent;
}
.meta-tab:hover{ color:#fff; }
.meta-tab.active{ color:#fff; border-bottom-color:var(--accent); }

.metas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:18px;
  margin-bottom:22px;
}
.meta-card{
  background:#171b1e;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:16px;
  display:flex; flex-direction:column; gap:8px;
}
.meta-card img{
  aspect-ratio:1/1; object-fit:cover; border-radius:6px;
  background:rgba(255,255,255,.06);
}
.meta-card .nombre{ font-size:.88rem; font-weight:700; margin:0; min-height:2.4em; }
.meta-card .precio{ font-family:var(--font-display); color:var(--accent); font-size:1rem; }
.metas-vacio{ color:rgba(255,255,255,.55); font-size:.88rem; padding:10px 0 20px; }

.btn-ver-meta{
  display:inline-block;
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  font-weight:700;
  padding:.75rem 1.4rem;
  border-radius:var(--radius);
  font-size:.88rem;
}
.btn-ver-meta:hover{ background:#fff; }

@media (max-width:640px){
  .metas-section{ padding:28px 0; }
  .metas-section h2{ font-size:1.4rem; margin:0 0 16px; }
  .metas-tabs{ gap:18px; margin-bottom:18px; }
  .metas-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin-bottom:16px; }
  .meta-card{ padding:10px; }
}

/* =========================================================
   "¿POR QUÉ PEDIR POR WHATSAPP?" — 4 pasos del flujo real de la tienda
   ========================================================= */
.why-section{ background:var(--surface-2); padding:60px 0; text-align:center; }
.why-section h2{ font-size:1.7rem; max-width:600px; margin:10px auto 14px; }
.why-section > .wrap > p{ color:var(--text-muted); max-width:560px; margin:0 auto 40px; font-size:.9rem; }
.why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:left; }
.why-card{ background:#fff; border-radius:14px; padding:22px; border:1px solid var(--border); }
.why-card .icon{
  width:38px; height:38px; border-radius:10px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.1rem;
}
.why-card h4{ font-size:.9rem; margin:0 0 6px; }
.why-card p{ font-size:.78rem; color:var(--text-muted); margin:0; }

@media (max-width: 900px){
  .why-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .why-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   PREGUNTAS FRECUENTES (acordeón — ver el <script> al pie de index.php)
   ========================================================= */
.faq-section{ padding:60px 0; text-align:center; }
.faq-section h2{ margin:10px 0 30px; font-size:1.7rem; }
.faq-list{ max-width:760px; margin:0 auto; text-align:left; }
.faq-item{
  background:var(--surface-2); border-radius:10px; margin-bottom:10px; overflow:hidden;
}
.faq-item button{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:none; border:none; padding:16px 20px; text-align:left;
  font-weight:700; font-size:.88rem; color:var(--text);
}
.faq-item .faq-icono{ font-size:1.1rem; color:var(--text-muted); flex-shrink:0; transition:transform .2s ease; }
.faq-item.open .faq-icono{ transform:rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  font-size:.85rem; color:var(--text-muted); padding:0 20px;
}
.faq-item.open .faq-answer{ max-height:220px; padding:0 20px 18px; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ border-top:1px solid var(--border); padding:50px 0 26px; font-size:.85rem; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-bottom:30px;
}
.footer-grid h5{ font-size:.76rem; margin:0 0 14px; letter-spacing:.03em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid ul li{ margin-bottom:8px; }
.footer-grid a{ color:var(--text-muted); text-decoration:none; font-size:.85rem; }
.footer-grid a:hover{ color:var(--accent-dim); }
.footer-brand p{ font-size:.85rem; color:var(--text-muted); margin:10px 0 0; max-width:320px; }
.footer-bottom{
  border-top:1px solid var(--border); padding-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color:var(--text-muted);
}
footer a.footer-wsp{ color:var(--text); text-decoration:none; font-weight:600; }
footer a.footer-wsp:hover{ color:var(--accent-dim); }

@media (max-width: 760px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 500px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* Ícono + usuario de Instagram, centrado debajo de la línea de copyright/WhatsApp */
.footer-social{ display:flex; justify-content:center; padding-top:18px; }
.footer-social a.footer-ig{
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px;
  border:1px solid var(--border); color:var(--text);
  font-size:.82rem; font-weight:700; text-decoration:none;
}
.footer-social a.footer-ig:hover{ border-color:var(--accent-dim); color:var(--accent-dim); }

/* Botón flotante de WhatsApp, siempre visible mientras se scrollea. Queda
   por debajo del overlay del carrito (z-index:50) para que se tape solito
   cuando el carrito está abierto. */
.wsp-float{
  position:fixed; right:20px; bottom:20px; z-index:45;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s ease, filter .15s ease;
}
.wsp-float:hover{ filter:brightness(.95); }
.wsp-float:active{ transform:scale(.94); }
@media (prefers-reduced-motion: reduce){
  .wsp-float{ transition:none; }
  .wsp-float:active{ transform:none; }
}

/* =========================================================
   PÁGINAS LEGALES (botón de arrepentimiento, y a futuro términos/privacidad)
   ========================================================= */
.pagina-legal{ padding:48px 0 70px; }
.legal-wrap{ max-width:680px; margin:0 auto; }
.legal-wrap h1{ font-size:1.9rem; margin:0 0 18px; }
.legal-wrap h2{ font-size:1.2rem; margin:34px 0 14px; }
.legal-wrap p{ color:var(--text-muted); font-size:.92rem; margin:0 0 14px; }
.legal-wrap p b{ color:var(--text); }
.legal-lista{ color:var(--text-muted); font-size:.9rem; padding-left:20px; margin:0; }
.legal-lista li{ margin-bottom:8px; }
.legal-card{
  background:var(--surface-2); border-radius:16px; padding:26px;
  margin:26px 0; border:1px solid var(--border);
}
.legal-card .form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}
.legal-card .form-grid .col-2{ grid-column:1 / -1; }
@media (max-width:560px){
  .legal-card .form-grid{ grid-template-columns:1fr; }
}
.legal-card .form-grid textarea{
  width:100%; padding:.6rem .7rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg); color:var(--text); resize:vertical;
}
.legal-card label{ display:block; font-size:.82rem; color:var(--text-muted); margin-bottom:.35rem; }
.legal-card input[type=text]{
  width:100%; padding:.6rem .7rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg); color:var(--text); box-sizing:border-box;
}
#arExito p{ margin-bottom:14px; }

/* toast simple */
.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--dark);
  color:#fff;
  padding:.7rem 1.2rem;
  border-radius:var(--radius);
  font-size:.88rem; font-weight:600;
  opacity:0; pointer-events:none;
  transition:all .25s ease;
  z-index:100;
}
.toast.show{
  opacity:1; transform:translateX(-50%) translateY(0);
}

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

/* =========================================================
   CARRITO (drawer)
   ========================================================= */
.overlay{
  position:fixed; inset:0;
  background:rgba(12,15,13,.5);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:50;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(400px, 100%);
  background:#fff;
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:60;
  display:flex;
  flex-direction:column;
}
.drawer.show{ transform:translateX(0); }

.drawer-header{
  padding:20px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-header h2{
  font-family:var(--font-display);
  font-size:1.1rem;
  margin:0;
}
.drawer-close{
  background:none; border:none; color:var(--text-muted);
  font-size:1.4rem; line-height:1;
}
.drawer-items{
  flex:1; overflow-y:auto;
  padding:10px 20px;
}
.drawer-empty{
  color:var(--text-muted);
  text-align:center;
  padding:40px 0;
}
.item{
  display:flex; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.item img{
  width:56px; height:56px; object-fit:cover;
  border-radius:4px;
  background:var(--surface-2);
  flex-shrink:0;
}
.item-info{ flex:1; min-width:0; }
.item-info p{ margin:0 0 4px; font-size:.88rem; font-weight:700; }
.item-info .precio-unit{ font-size:.78rem; color:var(--text-muted); }
.item-qty{
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
}
.item-qty button{
  width:24px; height:24px;
  border:none;
  background:var(--surface-2);
  color:var(--text);
  border-radius:4px;
  font-size:.9rem;
  line-height:1;
}
.item-remove{
  background:none; border:none; color:var(--warn);
  font-size:.78rem;
  align-self:flex-start;
}
.item-total{
  font-size:.88rem; font-weight:700;
  white-space:nowrap;
}

.drawer-footer{
  border-top:1px solid var(--border);
  padding:18px 20px 22px;
}
.subtotal-row{
  display:flex; justify-content:space-between;
  font-size:1rem; margin-bottom:14px;
}
.subtotal-row b{ font-family:var(--font-display); color:var(--accent-text); }
.btn-whatsapp{
  width:100%;
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  padding:.9rem;
  border-radius:var(--radius);
  font-weight:700;
  font-size:.95rem;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-whatsapp:hover:not(:disabled){ background:var(--accent-dim); color:#fff; }
.btn-whatsapp:disabled{ opacity:.4; }
.btn-vaciar{
  width:100%;
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:.8rem;
  margin-top:10px;
}

/* =========================================================
   CUENTA DE CLIENTE (form de invitado en el drawer del carrito)
   ========================================================= */
.datos-invitado{ margin-bottom:16px; }
.datos-invitado label{
  display:block; font-size:.78rem; color:var(--text-muted); margin:.6rem 0 .3rem;
}
.datos-invitado input{
  width:100%; padding:.6rem .7rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-size:.88rem;
}
.form-error{
  display:block; color:var(--warn); font-size:.8rem; margin-bottom:8px; min-height:1em;
}