/* ============================================================
   DIETÉTICA — hoja de estilos única
   Paleta: russet (marrón cálido) / champán (crema) / oliva
   ============================================================ */

:root{
  --russet:#7a4423;
  --russet-osc:#60361c;
  --marron-txt:#3f2416;
  --champan:#f4ead9;
  --fondo:#d7dcc9;      /* detrás de las tarjetas: verde oliva claro, para que el producto salte */
  --arena:#f6eee4;      /* franja de arriba del catálogo */
  --champan-claro:#faf4e9;
  --crema-card:#fbf6ec;
  --foto-crema:#f6eee3;
  --oliva:#6f7a52;
  --oliva-osc:#5b6543;
  --oliva-claro:#e6e9dc;
  --calendula:#c58a3b;
  --calendula-claro:#f2ddb8;
  --linea:#e0d2ba;
  --gris-txt:#6b5a4b;
  --blanco:#fff;
  --rojo:#a8342a;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  --sombra:0 1px 3px rgba(63,36,22,.06),0 6px 18px rgba(63,36,22,.05);
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--marron-txt);
  background:var(--fondo);
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0}
/* El recuadro sólo aparece cuando se navega con teclado; al tocar con el dedo no
   se ve nada, ni el destello azul del navegador. */
button,a,select,input,textarea,label{-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:3px solid var(--oliva);outline-offset:2px;border-radius:4px}
.oculto{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.contenedor{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
main{min-height:60vh;padding-bottom:40px}
.seccion{padding:32px 0}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--russet);color:var(--champan-claro);
  height:var(--header-h);
  display:flex;align-items:center;
}
.header .contenedor{display:flex;align-items:center;gap:12px}
.icon-btn{
  background:none;border:0;padding:8px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;color:inherit;
}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.marca{flex:1;text-align:center;line-height:1}
.marca__logo{display:block;margin:0 auto;height:42px;width:auto;max-width:100%}
.marca__nombre{font-family:var(--serif);font-size:26px;letter-spacing:.14em;display:block}
.marca__bajada{display:block;margin-top:3px;font-family:var(--sans);font-weight:400;
  text-transform:uppercase;font-size:9.5px;letter-spacing:.14em;opacity:.72;white-space:nowrap}
.carrito-btn{position:relative}
.carrito-btn__n{
  position:absolute;top:2px;right:2px;
  background:var(--champan-claro);color:var(--russet);
  font-size:11px;font-weight:700;line-height:1;
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- menú lateral ---------- */
.overlay{position:fixed;inset:0;background:rgba(63,36,22,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s ease}
.overlay.abierto{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;bottom:0;z-index:70;width:min(88vw,380px);
  background:var(--champan-claro);display:flex;flex-direction:column;
  transition:transform .28s ease;box-shadow:0 0 40px rgba(63,36,22,.2);
}
.panel--izq{left:0;transform:translateX(-102%)}
.panel--der{right:0;transform:translateX(102%);width:min(94vw,440px)}
.panel.abierto{transform:translateX(0)}
.panel__top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 8px 12px 16px;background:var(--russet);color:var(--champan-claro);
}
.panel__titulo{font-family:var(--serif);font-size:20px}
.panel__cuerpo{flex:1;overflow-y:auto;padding:8px 16px 24px;-webkit-overflow-scrolling:touch}

.envio-aviso{
  display:flex;align-items:center;gap:9px;margin:10px 0 0;
  padding:10px 12px;border-radius:12px;font-size:14px;
  background:var(--champan);color:var(--marron-txt);
}
.envio-aviso svg{flex:0 0 auto;color:var(--oliva-osc)}
.envio-aviso b{font-weight:700}
.envio-aviso--ok{background:var(--oliva-claro);color:var(--oliva-osc)}

/* El botón de avanzar/enviar queda pegado abajo: con muchos productos no hay que
   scrollear hasta el final para mandar el pedido. */
.co-fijo{
  position:sticky;bottom:0;z-index:3;
  margin:10px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--champan-claro);
  box-shadow:0 -10px 18px -12px rgba(63,36,22,.35);
}
.co-fijo .btn{margin:0}
.menu-nav{display:flex;flex-direction:column;padding:8px 0}
.menu-nav a{
  padding:14px 4px;border-bottom:1px solid var(--linea);
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;
}
.menu-nav a:hover{color:var(--oliva-osc)}
.menu-datos{margin-top:20px;font-size:14px;color:var(--gris-txt)}
.menu-datos p{margin:6px 0}

/* ---------- buscador ---------- */
.buscador{position:relative;display:flex;align-items:center}
.buscador svg{position:absolute;left:14px;color:var(--gris-txt)}
.buscador input{
  width:100%;font:inherit;font-size:15px;color:var(--marron-txt);
  padding:13px 14px 13px 44px;border:1px solid var(--linea);
  border-radius:var(--r-md);background:var(--crema-card);
}
.buscador input::placeholder{color:#a08f7d}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--r-md);padding:13px 22px;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  min-height:46px;transition:background .2s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--oliva{background:var(--oliva);color:#fff}
.btn--oliva:hover{background:var(--oliva-osc)}
.btn--russet{background:var(--russet);color:var(--champan-claro)}
.btn--russet:hover{background:var(--russet-osc)}
.btn--claro{background:var(--champan-claro);color:var(--russet);border:1px solid var(--linea)}
.btn--fantasma{background:transparent;border:1px solid var(--linea);color:var(--marron-txt)}
.btn--bloque{width:100%}

/* ---------- título de sección con filete ---------- */
.titulo-filete{
  display:flex;align-items:center;gap:14px;justify-content:center;
  margin-bottom:22px;
}
.titulo-filete::before,.titulo-filete::after{
  content:"";height:1px;background:currentColor;opacity:.35;flex:1;max-width:80px;
}
.titulo-filete h2{
  font-size:clamp(22px,5.5vw,30px);letter-spacing:.06em;text-transform:uppercase;
  text-align:center;font-weight:500;
}

/* ---------- hero ---------- */
.hero{
  background:var(--champan-claro);
  padding:34px 0 0;
  position:relative;overflow:hidden;
}
.hero__txt{max-width:520px}
.hero h1{font-size:clamp(34px,10vw,58px);letter-spacing:-.01em}
.hero p{font-size:17px;color:var(--gris-txt);margin:14px 0 22px}
.hero__arte{margin-top:24px}
.hero__arte img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 62%}

/* ---------- categorías ---------- */
.cats{background:var(--oliva);color:var(--champan-claro);padding:28px 0}
.cats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cats-carrusel{position:relative}
.cats-pista{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cats-pista::-webkit-scrollbar{display:none}
.cats-pagina{
  flex:0 0 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;scroll-snap-align:start;scroll-snap-stop:always;
}
.cats-puntos{display:flex;align-items:center;justify-content:center;margin-top:7px}
.cats-puntos button{
  width:36px;height:36px;padding:0;border:0;background:transparent;
  position:relative;cursor:pointer;
}
.cats-puntos button::before{
  content:"";position:absolute;inset:14px;border-radius:999px;
  background:rgba(250,244,233,.42);transition:inset .2s ease,background-color .2s ease;
}
.cats-puntos button[aria-current="true"]::before{inset:14px 9px;background:var(--champan-claro)}
.cats-flecha{display:none}
.cat-card{
  background:var(--crema-card);color:var(--marron-txt);
  border-radius:var(--r-lg);padding:14px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:150px;box-shadow:var(--sombra);
  transition:transform .2s ease;
}
.cat-card:hover{transform:translateY(-2px)}
.cat-card__nom{font-family:var(--serif);font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.cat-card__fig{align-self:flex-end;width:74px;height:74px;margin:-4px 0}
.cat-card__ver{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--russet);display:flex;align-items:center;gap:6px}

/* ---------- franja envío ---------- */
.franja{
  background:var(--russet);color:var(--champan-claro);
  padding:14px 0;font-size:14px;
}
.franja .contenedor{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}

/* ---------- grilla de productos ---------- */
.grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.prod{
  background:var(--crema-card);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:10px;position:relative;
  display:flex;flex-direction:column;
}
.prod__fig{
  position:relative;display:block;aspect-ratio:1/1;
  border-radius:var(--r-md);overflow:hidden;background:var(--champan);
}
.prod__fig img{width:100%;height:100%;object-fit:cover}
.prod__badge{
  position:absolute;top:8px;left:8px;z-index:2;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;color:#fff;background:var(--russet);
}
.prod__badge--tag{background:var(--oliva)}
.prod__nom{font-family:var(--serif);font-size:16px;margin:7px 0 2px;line-height:1.25}
.prod__sub{font-size:12px;color:var(--gris-txt);margin:0 0 6px}
.prod__sub:empty{display:none}
.prod__sel{
  width:100%;font:inherit;font-size:13px;color:var(--marron-txt);
  padding:9px 10px;border:1px solid var(--linea);border-radius:var(--r-sm);
  background:var(--champan-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5a4b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance:none;appearance:none;min-height:38px;
}
.prod__pie{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.precio{font-family:var(--serif);font-size:19px;line-height:1.1}
.precio__antes{display:block;font-family:var(--sans);font-size:12px;color:var(--gris-txt);text-decoration:line-through}
.prod__add{
  border:0;background:var(--oliva);color:#fff;border-radius:var(--r-sm);
  min-width:44px;min-height:40px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.prod__add:hover{background:var(--oliva-osc)}
.prod--agotado{opacity:.72}
.prod__agotado{font-size:12px;color:var(--rojo);letter-spacing:.04em}

/* ---------- filtros catálogo ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--crema-card);border:1px solid var(--linea);
  border-radius:var(--r-md);padding:10px 16px;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--marron-txt);
  min-height:42px;
}
.chip[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva);color:#fff}

/* Segunda fila: sin TACC, vegano, orgánico. Se pueden combinar entre sí. */
.chips--tags{padding-top:0}
.chip--tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;min-height:38px;font-size:12px;
  border-radius:999px;border-style:dashed;
}
.chip--tag small{
  font-size:11px;padding:1px 6px;border-radius:999px;
  background:rgba(122,68,35,.10);color:var(--gris-txt);letter-spacing:0;
}
.chip--tag[aria-pressed="true"]{border-style:solid}
.chip--tag[aria-pressed="true"] small{background:rgba(255,255,255,.22);color:#fff}
.chip--oferta{border-color:rgba(168,52,42,.45);color:var(--rojo)}
.chip--oferta small{background:rgba(168,52,42,.12);color:var(--rojo)}
/* dos clases, para ganarle a los .chip[aria-pressed] de los breakpoints de abajo */
.chip--tag.chip--oferta[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo);color:#fff}
.chip--tag.chip--oferta[aria-pressed="true"] small{background:rgba(255,255,255,.22);color:#fff}
/* Volver de la ficha de producto: vuelve a la lista, al punto donde estabas. */
.orden-fila{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid rgba(122,68,35,.16);
  margin-top:12px;padding:10px 0 4px;
}
.orden-fila p{margin:0;font-size:13px;color:var(--gris-txt)}
.orden-campo{position:relative;display:flex;align-items:center}
.orden-campo select{
  -webkit-appearance:none;appearance:none;
  border:0;background:transparent;color:var(--marron-txt);
  font:inherit;font-size:14px;padding:6px 26px 6px 6px;min-height:38px;
  text-align:right;text-align-last:right;
}
.orden-campo__flecha{position:absolute;right:2px;pointer-events:none;color:var(--gris-txt)}

.volver-atras{
  display:inline-flex;align-items:center;gap:6px;
  margin:12px 0 -10px;margin-inline-start:clamp(18px,5vw,54px);
  padding:9px 14px 9px 10px;min-height:40px;
  border:1px solid var(--linea);border-radius:999px;
  background:var(--crema-card);color:var(--marron-txt);
  font:inherit;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 2px 10px rgba(63,36,22,.10);
}
.volver-atras:active{transform:translateY(1px)}


/* Franja de arriba del catálogo: título, buscador, categorías y orden sobre el
   mismo color, cerrada con una línea. Sin caja: los elementos quedan como estaban. */
.cat-cabecera{
  position:relative;
  background:var(--arena);
  background-image:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,0) 60%);
  border-bottom:1px solid rgba(122,68,35,.18);
  padding:26px 0 10px;
  margin-bottom:22px;
}
.seccion.catalogo{padding-top:0}
.barra-orden{display:grid;grid-template-columns:1fr;gap:10px;margin:4px 0 16px}
.barra-orden select,.barra-orden button{
  width:100%;font:inherit;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:12px;border:1px solid var(--linea);border-radius:var(--r-md);
  background:var(--crema-card);color:var(--marron-txt);min-height:46px;
  -webkit-appearance:none;appearance:none;text-align:center;
}
.vacio{
  text-align:center;padding:48px 20px;color:var(--gris-txt);
  border:1px dashed var(--linea);border-radius:var(--r-lg);background:var(--crema-card);
}
.vacio h3{font-size:20px;margin-bottom:8px;color:var(--marron-txt)}

/* ---------- ficha de producto ---------- */
.ficha__cat{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oliva-osc);
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.ficha__cat::after{content:"";height:1px;width:34px;background:currentColor;opacity:.6}
.ficha h1{font-size:clamp(30px,9vw,46px);margin-bottom:16px}
.ficha__img{border-radius:var(--r-lg);overflow:hidden;background:var(--champan-claro);aspect-ratio:1/1}
.ficha__img img{width:100%;height:100%;object-fit:cover}
.ficha__galeria{display:flex;gap:8px;margin-top:8px}
.ficha__thumb{width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;background:var(--champan-claro);padding:0}
.ficha__thumb[aria-pressed="true"]{border-color:var(--oliva)}
.caja-compra{
  background:var(--crema-card);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:18px;margin-top:18px;
}
.caja-compra h2{font-size:24px;margin-bottom:14px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}
.opt{
  background:var(--champan-claro);border:1px solid var(--linea);
  border-radius:var(--r-md);padding:12px 8px;font-size:14px;min-height:48px;
  display:flex;align-items:center;justify-content:center;gap:6px;color:var(--marron-txt);
}
.opt[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva);color:#fff}
.opt:disabled{opacity:.45;cursor:not-allowed}
.fila-precio{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}
.fila-precio .precio{font-size:34px}
.ahorro{font-size:13px;color:var(--oliva-osc);font-family:var(--sans)}
.stepper{
  display:inline-flex;align-items:center;border:1px solid var(--linea);
  border-radius:999px;background:var(--champan-claro);overflow:hidden;
}
.stepper button{background:none;border:0;width:46px;height:46px;font-size:20px;color:var(--marron-txt)}
.stepper button:hover{background:var(--oliva-claro)}
.stepper span{min-width:40px;text-align:center;font-size:16px;border-left:1px solid var(--linea);border-right:1px solid var(--linea);line-height:46px}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--linea);margin:26px 0 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:none;border:0;padding:12px 2px;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris-txt);border-bottom:2px solid transparent;white-space:nowrap;
}
.tab[aria-selected="true"]{color:var(--oliva-osc);border-bottom-color:var(--oliva)}
.tab-panel{padding:18px 0;color:var(--gris-txt);font-size:15px}
.tab-panel dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.tab-panel dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--marron-txt)}
.tab-panel dd{margin:0}

/* ---------- carrito ---------- */
.item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea)}
.item__fig{width:68px;height:68px;border-radius:var(--r-sm);overflow:hidden;flex:0 0 auto;background:var(--champan)}
.item__fig img{width:100%;height:100%;object-fit:cover}
.item__cuerpo{flex:1;min-width:0}
.item__nom{font-family:var(--serif);font-size:16px;line-height:1.2}
.item__meta{font-size:13px;color:var(--gris-txt);margin:2px 0 8px}
.item__pie{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stepper--mini button{width:36px;height:36px;font-size:17px}
.stepper--mini span{line-height:36px;min-width:32px;font-size:14px}
.item__quitar{background:none;border:0;color:var(--gris-txt);font-size:12px;text-decoration:underline;padding:6px}
.totales{padding:16px 0;font-size:15px}
.totales__fila{display:flex;justify-content:space-between;padding:4px 0}
.totales__total{font-family:var(--serif);font-size:22px;border-top:1px solid var(--linea);margin-top:8px;padding-top:12px}
.form-campo{margin:12px 0}
.form-campo label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.form-campo input,.form-campo textarea,.form-campo select{
  width:100%;font:inherit;font-size:15px;color:var(--marron-txt);
  padding:12px;border:1px solid var(--linea);border-radius:var(--r-sm);
  background:var(--champan-claro);min-height:46px;
}
.form-campo textarea{min-height:80px;resize:vertical}
.radio-fila{display:flex;gap:10px}
.radio-fila .opt{flex:1}
.aviso{font-size:13px;color:var(--gris-txt);background:var(--oliva-claro);border-radius:var(--r-sm);padding:12px;margin-top:14px}
.error-msg{color:var(--rojo);font-size:13px;margin-top:6px}

/* ---------- armá tu mix ---------- */
.mix-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mix-card{
  background:var(--crema-card);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:12px;text-align:left;position:relative;
}
.mix-card[aria-pressed="true"]{border-color:var(--oliva);background:#f2f4ea}
.mix-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.mix-card__nom{font-family:var(--serif);font-size:15px;line-height:1.2}
.mix-card__check{
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--russet);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--russet);
}
.mix-card[aria-pressed="true"] .mix-card__check{background:var(--oliva);border-color:var(--oliva);color:#fff}
.mix-card__fig{aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--champan)}
.mix-card__fig img{width:100%;height:100%;object-fit:cover}
.mix-resumen{
  background:var(--russet);color:var(--champan-claro);
  border-radius:var(--r-lg);padding:20px 16px;margin-top:20px;text-align:center;
}
.mix-resumen h2{font-size:24px;margin-bottom:2px}
.mix-resumen__n{font-size:14px;opacity:.85;margin-bottom:14px}
.mix-resumen .opt{background:transparent;border-color:rgba(244,234,217,.5);color:var(--champan-claro)}
.mix-resumen .opt[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva);color:#fff}
.mix-resumen__total{border-top:1px solid rgba(244,234,217,.3);margin-top:16px;padding-top:14px}
.mix-resumen__total span{display:block;font-size:14px;opacity:.85}
.mix-resumen__total strong{font-family:var(--serif);font-size:34px;font-weight:500}

/* ---------- combos ---------- */
.combo{
  background:var(--crema-card);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:16px;margin-bottom:16px;
}
.combo__top{display:flex;gap:14px;align-items:flex-start}
.combo__txt{flex:1;min-width:0}
.combo h3{font-size:20px;text-transform:uppercase;letter-spacing:.04em;line-height:1.15}
.combo__hr{height:1px;background:var(--linea);margin:10px 0;max-width:120px}
.combo__desc{font-size:14px;color:var(--gris-txt);margin:0 0 10px}
.combo__n{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;
  background:var(--champan);border-radius:999px;padding:5px 10px;color:var(--gris-txt);
}
.combo__fig{width:120px;flex:0 0 auto;align-self:flex-start;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--champan)}
.combo__fig img{width:100%;height:100%;object-fit:cover}
.combo__precio{font-family:var(--serif);font-size:26px;margin:12px 0 6px}
.combo__ahorro{
  display:inline-block;background:var(--oliva);color:#fff;border-radius:var(--r-sm);
  padding:6px 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;
}
.combo__detalle{font-size:14px;color:var(--gris-txt);margin:0 0 12px;padding-left:18px}
.combo__detalle li{margin:3px 0}

/* ---------- cómo comprar ---------- */
.pasos{background:var(--oliva);color:var(--champan-claro);border-radius:var(--r-lg);padding:28px 18px;margin-top:8px}
.pasos h1{font-size:clamp(32px,9vw,46px);text-align:center;margin-bottom:6px}
.pasos__sep{height:1px;background:rgba(244,234,217,.35);margin:22px 0}
.paso{display:flex;gap:16px;align-items:flex-start}
.paso__n{font-family:var(--serif);font-size:44px;color:var(--russet);line-height:1;min-width:56px}
.paso__cuerpo{flex:1;border-left:1px solid rgba(244,234,217,.35);padding-left:16px}
.paso h3{font-size:20px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.paso p{margin:0;font-size:15px;opacity:.9}
.pasos__cierre{text-align:center;font-size:13px;opacity:.85;margin-top:16px;font-style:italic}

/* ---------- pie ---------- */
.pie{background:var(--russet);color:var(--champan-claro);padding:32px 0 90px;margin-top:20px;font-size:14px}
.pie h3{font-size:18px;margin-bottom:10px}
.pie__bloque{margin-bottom:22px}
.pie__bloque p{margin:4px 0;opacity:.9}
.pie__links{display:flex;flex-wrap:wrap;gap:12px 20px}
.pie__legal{border-top:1px solid rgba(244,234,217,.25);margin-top:10px;padding-top:14px;font-size:12px;opacity:.75}

/* ---------- barra inferior móvil ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:var(--champan-claro);border-top:1px solid var(--linea);
  display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 2px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-txt);
  min-height:48px;justify-content:center;
}
.tabbar a[aria-current="page"]{color:var(--russet)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);
  background:var(--marron-txt);color:var(--champan-claro);
  padding:12px 18px;border-radius:999px;font-size:14px;z-index:90;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  max-width:90vw;text-align:center;
}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- escritorio ---------- */
@media (min-width:640px){
  .grilla{grid-template-columns:repeat(3,1fr);gap:16px}
  .cats-grid{grid-template-columns:repeat(4,1fr)}
  .cats-pagina{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .cats-pagina--2 .cat-card:first-child{grid-column:2}
  .cats-pagina--1 .cat-card:first-child{grid-column:2}
  .cats-puntos{display:none}
  .cats-flecha{
    position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border:1px solid var(--linea);border-radius:50%;
    color:var(--russet);background:var(--champan-claro);
    box-shadow:0 7px 18px rgba(63,36,22,.18);
    transform:translateY(-50%);transition:transform .2s ease,background-color .2s ease;
  }
  .cats-flecha[hidden]{display:none}
  .cats-flecha--ant{left:-14px}
  .cats-flecha--ant svg{transform:rotate(180deg)}
  .cats-flecha--sig{right:-14px}
  .cats-flecha:hover{background:var(--crema-card);transform:translateY(-50%) scale(1.04)}
  .cats-flecha:active{transform:translateY(-50%) scale(.96)}
  .mix-grid{grid-template-columns:repeat(3,1fr)}
  .prod__nom{font-size:17px}
}
@media (min-width:960px){
  .grilla{grid-template-columns:repeat(4,1fr)}
  .seccion{padding:44px 0}
  .hero{padding:56px 0 0}
  .hero .contenedor{display:flex;align-items:center;gap:32px}
  .hero__arte{flex:1;margin:0}
  .ficha__cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .caja-compra{margin-top:0}
  .combo__fig{width:220px}
  .tabbar{display:none}
  .pie{padding-bottom:32px}
  .pie__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .toast{bottom:32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   Ajuste visual inspirado en las maquetas
   Mantiene la estructura y la lógica existentes.
   ============================================================ */

body{
  background-color:var(--fondo);
  background-image:none;
  max-width:100%;
  overflow-x:hidden;
}

body::before{
  display:none;
}

.contenedor{padding-inline:clamp(18px,5vw,54px)}
.seccion{padding-block:clamp(34px,7vw,74px)}

.header{
  height:76px;
  background:linear-gradient(108deg,#673314 0%,#86461f 58%,#6a3518 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.14),0 8px 28px rgba(76,37,17,.12);
}
.header .contenedor{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px 40px;
  gap:0;
  width:100vw;
  max-width:100vw;
  padding-inline:8px;
}
.icon-btn svg{width:25px;height:25px}
.marca{min-width:0}
.marca__nombre{font-size:22px;font-weight:500;letter-spacing:.09em;white-space:nowrap;overflow:hidden}
.marca__logo{height:42px}
.marca__bajada{font-size:10px;letter-spacing:.15em;margin-top:3px}
.carrito-btn__n{top:0;right:0;width:20px;height:20px;border-radius:50%}

.hero{
  padding:0;
  min-height:min(700px,calc(100dvh - 76px));
  background:
    radial-gradient(circle at 82% 72%,rgba(111,122,82,.13),transparent 27%),
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.82),transparent 34%),
    var(--champan);
}
.hero::before{
  display:none;
}
.hero .contenedor{
  position:relative;
  z-index:1;
  padding-top:clamp(48px,9vw,88px);
}
.hero__txt{max-width:560px;position:relative;z-index:2}
.hero h1{
  max-width:9.5ch;
  font-size:clamp(48px,13vw,82px);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.035em;
}
.hero p{max-width:20ch;font-size:clamp(18px,4vw,23px);line-height:1.38;margin:22px 0 28px;color:#50382b}
.hero__arte{margin:20px -18px 0;filter:drop-shadow(0 20px 26px rgba(76,43,23,.12))}
.hero__arte img{
  aspect-ratio:4/3;
  height:clamp(360px,78vw,520px);
  object-fit:cover;
  object-position:58% center;
  mix-blend-mode:normal;
  border-radius:46% 46% 0 0 / 14% 14% 0 0;
}

.btn{
  border-radius:11px;
  min-height:52px;
  padding:14px 24px;
  font-size:14px;
  font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--oliva{background:linear-gradient(135deg,#7d8960,#667249)}
.btn--russet{background:linear-gradient(135deg,#87481f,#693415)}
.btn--claro{background:var(--champan);border-color:rgba(244,234,217,.58)}
.btn--fantasma{border-color:#bba98f;background:rgba(255,250,242,.36)}

.titulo-filete{gap:10px;margin-bottom:28px;color:#465036;min-width:0}
.titulo-filete::before,.titulo-filete::after{max-width:150px;min-width:0;opacity:.65}
.titulo-filete h2{
  color:var(--marron-txt);
  min-width:0;
  font-size:clamp(22px,5.7vw,39px);
  letter-spacing:.025em;
  line-height:1;
}

.cats{padding:38px 0 42px;background:linear-gradient(135deg,#76815b,#606b49);position:relative}
.cats::before,.pasos::before,.mix-resumen::before{
  display:none;
}
.cats .titulo-filete{color:var(--champan)}
.cats .titulo-filete h2{color:var(--champan-claro)}
.cats-grid{gap:14px}
.cat-card{
  min-height:180px;
  padding:18px;
  border:1px solid rgba(123,63,29,.09);
  border-radius:19px;
  background:linear-gradient(145deg,#fff9ef,#f4e6d1);
  box-shadow:0 12px 30px rgba(52,45,28,.11),inset 0 1px 0 rgba(255,255,255,.8);
}
.cat-card__nom{max-width:10ch;font-size:19px;line-height:1.12;letter-spacing:.01em}
.cat-card__fig{width:112px;height:112px;object-fit:cover;border-radius:50%;filter:drop-shadow(0 10px 12px rgba(63,36,22,.12));mix-blend-mode:normal}
.cat-card__ver{font-size:11px;font-weight:600;letter-spacing:.08em}

.franja{padding:16px 0;background:linear-gradient(95deg,#713716,#8a4a23 55%,#703717);font-size:16px}
.franja svg{width:28px;height:28px}

.grilla{gap:14px}
.prod{
  padding:10px 10px 13px;
  border-color:rgba(122,91,61,.18);
  border-radius:18px;
  background:rgba(255,250,242,.76);
  box-shadow:0 9px 24px rgba(83,49,26,.07),inset 0 1px 0 rgba(255,255,255,.8);
  overflow:hidden;
}
.prod__fig{margin:-10px -10px 0;aspect-ratio:1.08/1;border-radius:17px 17px 8px 8px;background:var(--champan)}
.prod__fig img{mix-blend-mode:normal;transform:scale(1.04)}
.prod__badge{border-radius:6px;background:#82461f}
.prod__badge--tag{background:#78845a}
.prod__nom{font-size:clamp(16px,4.3vw,20px);margin-top:12px}
.prod__sub{min-height:1.55em;font-size:12px}
.prod__sel{background-color:rgba(255,250,242,.7);border-color:#cbb99e}
.precio{font-family:var(--sans);font-size:21px;font-weight:500;letter-spacing:-.025em}
.prod__add{border-radius:10px;background:linear-gradient(135deg,#7d8960,#657048)}

.buscador input,
.barra-orden select,.barra-orden button{
  background:rgba(255,250,242,.66);
  border-color:#cbb99e;
  box-shadow:inset 0 1px 1px rgba(80,45,24,.03);
}
.buscador input{min-height:58px;font-size:17px;border-radius:14px;padding-left:50px}
.chips{padding-block:18px 16px}
.chip{border-radius:11px;background:rgba(255,250,242,.58);border-color:#cbb99e}
.chip[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva)}
.barra-orden{margin-bottom:22px}

.ficha{position:relative;overflow:hidden}
.ficha::before{
  display:none;
}
.ficha__cat{font-family:var(--serif);font-size:15px;font-weight:500}
.ficha h1{max-width:10ch;font-size:clamp(45px,12vw,76px);font-weight:500;line-height:.98;letter-spacing:-.025em}
.ficha__img{border-radius:24px;box-shadow:0 22px 42px rgba(81,46,24,.10)}
.ficha__img img{mix-blend-mode:normal}
.caja-compra{padding:clamp(20px,5vw,34px);border-radius:22px;background:rgba(255,250,242,.78);box-shadow:0 18px 38px rgba(83,49,26,.09)}
.caja-compra h2{font-size:clamp(27px,6vw,38px);font-weight:500}
.opt{min-height:54px;border-color:#85906a;background:rgba(255,250,242,.52);font-size:16px}
.fila-precio .precio{font-family:var(--sans);font-size:39px;font-weight:400}
.tabs{justify-content:space-between;gap:8px}

.mix-grid{gap:14px}
.portada-vista{margin-bottom:30px;text-align:center}
.portada-vista::after{
  content:"";display:block;width:min(100%,320px);height:16px;margin:22px auto 0;
  background:
    url("../assets/detalle-oliva.png?v=2") center/46px auto no-repeat,
    linear-gradient(90deg,var(--oliva) 0 38%,transparent 38% 62%,var(--oliva) 62% 100%) center/100% 1px no-repeat;
  opacity:.72;
}
.portada-vista h1{max-width:11ch;margin-inline:auto;font-size:clamp(48px,12vw,78px);font-weight:500;line-height:.96;letter-spacing:-.03em}
.portada-vista p{max-width:28ch;margin:16px auto 0;color:#564033;font-size:clamp(17px,4vw,22px);line-height:1.4}
.mix-card{padding:12px;border-color:#945126;border-radius:18px;background:rgba(255,250,242,.67)}
.mix-card[aria-pressed="true"]{border-color:#77845a;background:rgba(242,244,234,.85);box-shadow:inset 0 0 0 1px rgba(111,122,82,.22)}
.mix-card__nom{font-size:clamp(16px,4vw,20px)}
.mix-card__fig{margin:2px -3px -3px;aspect-ratio:1.12/1;background:transparent}
.mix-card__fig img{mix-blend-mode:normal}
.mix-resumen{position:relative;border-radius:20px;padding:26px 18px;background:linear-gradient(118deg,#703718,#8a4a23 52%,#693316);box-shadow:0 18px 38px rgba(91,45,20,.18)}
.mix-resumen>*{position:relative}

.combo{
  padding:20px;
  border-radius:21px;
  background:rgba(255,250,242,.76);
  box-shadow:0 12px 30px rgba(83,49,26,.08);
}
.combo h3{font-size:clamp(25px,6vw,38px);font-weight:500;letter-spacing:.01em}
.combo__fig{border-radius:18px;background:transparent}
.combo__fig img{mix-blend-mode:multiply}
.combo__precio{font-family:var(--sans);font-weight:500;font-size:30px}
.combo__ahorro{border-radius:9px;background:#6f7a52}

.pasos{position:relative;padding:38px 22px;border-radius:24px;background:linear-gradient(145deg,#657049,#78825c);box-shadow:0 20px 42px rgba(52,58,37,.15);overflow:hidden}
.pasos>*{position:relative}
.pasos h1{font-size:clamp(46px,12vw,82px);font-weight:500;line-height:.98}
.paso{align-items:center}
.paso__n{font-size:52px;color:#8d4823}
.paso h3{font-size:clamp(21px,5vw,31px);line-height:1.08}
.paso p{font-size:17px}

.pie{background:linear-gradient(120deg,#663114,#7d401d);margin-top:0}
.panel{background:var(--champan-claro)}
.panel__top{background:linear-gradient(105deg,#6b3416,#84471f)}
.tabbar{background:rgba(250,244,233,.94);backdrop-filter:blur(12px)}

@media (min-width:640px){
  .header .contenedor{gap:6px;padding-inline:clamp(18px,5vw,54px)}
  .marca__nombre{font-size:31px;letter-spacing:.18em}
  .marca__logo{height:44px}
  .titulo-filete{gap:18px}
  .cat-card{min-height:210px}
  .cat-card__fig{width:112px;height:112px}
}

@media (min-width:960px){
  .header{height:88px}
  .marca__nombre{font-size:39px}
  .marca__logo{height:46px}
  .hero{min-height:650px}
  .hero .contenedor{display:grid;grid-template-columns:.88fr 1.12fr;gap:10px;padding-top:38px}
  .hero__arte{margin:0 -54px 0 -50px;align-self:end}
  .hero__arte img{aspect-ratio:1.12/1;border-radius:50% 0 0 0 / 20% 0 0 0}
  .hero h1{font-size:clamp(65px,6.4vw,88px)}
  .hero p{font-size:22px}
  .cat-card{min-height:245px;padding:23px}
  .cat-card__nom{font-size:22px}
  .cat-card__fig{width:138px;height:138px}
  .prod{padding:14px 14px 16px}
  .prod__fig{margin:-14px -14px 0}
  .prod__add{padding-inline:14px}
  .ficha__cols{gap:54px}
  .combo{padding:26px}
  .combo__fig{width:310px}
  .pasos{max-width:860px;margin-inline:auto;padding:58px 62px}
}

/* ============================================================
   Réplica mobile-first de las maquetas
   ============================================================ */
.prod__add-label{display:none}

@media (max-width:639px){
  :root{--header-h:60px}

  body{font-size:15px;background:var(--fondo)}
  main{padding-bottom:62px}
  .contenedor{padding-inline:16px}
  .volver-atras{margin-inline-start:16px}
  .seccion{padding-block:27px 36px}

  .header{
    height:60px;
    background:#7a4423;
    background-image:none;
    box-shadow:none;
  }
  .header .contenedor{
    width:100%;max-width:none;
    display:grid;grid-template-columns:42px minmax(0,1fr) 42px 42px;
    gap:0;padding-inline:10px;
  }
  .icon-btn{min-width:42px;min-height:42px;padding:7px}
  .icon-btn svg{width:27px;height:27px}
  .marca{min-width:0}
  .marca__nombre{font-size:24px;letter-spacing:.12em}
  .marca__logo{height:36px}
  .marca__bajada{font-size:9px;letter-spacing:.13em;margin-top:2px}
  .carrito-btn__n{top:0;right:0}
  .panel{background:var(--champan-claro)}
  .panel__top{background:#7a4423;background-image:none}
  .menu-demo{
    margin:18px 0 4px;padding:10px 12px;border-radius:8px;
    color:var(--champan-claro);background:#6f7a52;font-size:12px;line-height:1.35;
  }

  .btn{
    min-height:44px;padding:11px 18px;border-radius:10px;
    font-size:12px;box-shadow:none;
  }
  .btn--oliva{background:#6f7a52}
  .btn--russet{background:#7a4423}

  .hero{height:352px;min-height:0;padding:0;background:#f4ead9}
  .hero .contenedor{position:relative;display:block;height:100%;padding:0 0 0 30px}
  .hero__arte{position:absolute;inset:0;margin:0;filter:none}
  .hero__arte img{
    width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;
    border-radius:0;mix-blend-mode:normal;transform:translateY(22px);
  }
  .hero__txt{position:relative;z-index:2;width:270px;max-width:none;padding-top:28px}
  .hero h1{max-width:8ch;font-size:38px;line-height:.9;letter-spacing:-.025em;text-wrap:balance}
  .hero p{max-width:18ch;margin:14px 0 18px;font-size:18px;line-height:1.35;color:#50382b}
  .hero .btn{min-height:44px;padding:10px 17px;font-size:12px}

  .titulo-filete{gap:9px;margin-bottom:18px}
  .titulo-filete::before,.titulo-filete::after{max-width:44px}
  .titulo-filete h2{font-size:22px;line-height:1;letter-spacing:.055em;white-space:nowrap}

  .cats{padding:20px 0 22px;background:#6f7a52;background-image:none}
  .cats .contenedor{padding-inline:16px}
  .cats .titulo-filete{margin-bottom:18px}
  .cats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cats-pagina{gap:10px}
  .cat-card{
    position:relative;overflow:hidden;height:108px;min-height:108px;padding:12px;
    border:0;border-radius:11px;background:#fbf6ec;
    box-shadow:0 4px 12px rgba(56,39,23,.12);
  }
  .cat-card__nom{position:relative;z-index:2;max-width:11ch;font-size:15px;line-height:1.08}
  .cat-card__fig{
    position:absolute;right:-2px;bottom:-4px;width:105px;height:105px;margin:0;
    object-fit:cover;object-position:center;border-radius:0;filter:none;mix-blend-mode:normal;
  }
  .cat-card__ver{position:relative;z-index:2;font-size:9px;letter-spacing:.07em}
  .cat-card__ver svg{width:13px;height:13px}

  .franja{min-height:32px;padding:6px 0;background:#7a4423;background-image:none;font-size:12px}
  .franja .contenedor{padding-inline:12px}
  .franja svg{width:21px;height:21px}

  .ofertas-home{padding:27px 0 34px}
  .ofertas-home .contenedor{padding-inline:16px}
  .ofertas-home .titulo-filete{margin-bottom:18px}

  .grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .prod{
    overflow:hidden;padding:8px 8px 10px;border:1px solid rgba(122,91,61,.14);
    border-radius:13px;background:#fbf6ec;
    box-shadow:0 3px 10px rgba(83,49,26,.08);
  }
  .prod__fig{margin:-8px -8px 0;aspect-ratio:1.38/1;border-radius:12px 12px 5px 5px;background:var(--champan)}
  .prod__fig img{width:100%;height:100%;object-fit:cover;object-position:center;transform:none;mix-blend-mode:normal}
  .prod__badge{top:7px;left:7px;padding:4px 7px;border-radius:4px;font-size:8px}
  .prod__nom{margin:8px 0 2px;font-size:15px;line-height:1.1}
  .prod__sub{min-height:1.35em;margin-bottom:6px;font-size:10px;line-height:1.25}
  .prod__sel{min-height:34px;padding:6px 26px 6px 8px;font-size:12px;background-color:#faf4e9}
  .prod__pie{padding-top:7px;gap:5px}
  .precio{font-family:var(--sans);font-size:18px;font-weight:500}
  .precio__antes{font-size:10px}
  .prod__add{min-width:40px;min-height:36px;padding:0 8px;border-radius:8px;background:#6f7a52}
  .prod__add svg{width:20px;height:20px;flex:0 0 auto}
  body[data-vista="catalogo"] .prod__add{padding-inline:9px;font-size:9px;letter-spacing:.035em}
  body[data-vista="catalogo"] .prod__add-label{display:inline}

  .catalogo{padding:25px 0 36px}
  .catalogo .contenedor{padding-inline:16px}
  .catalogo>.contenedor>.titulo-filete h2{font-size:29px}
  .catalogo>.contenedor>.titulo-filete::before,
  .catalogo>.contenedor>.titulo-filete::after{max-width:55px}
  .buscador input{min-height:46px;padding:10px 12px 10px 43px;border-radius:10px;background:#fbf6ec;font-size:15px;box-shadow:none}
  .chips{gap:7px;padding:13px 0 10px}
  .chip{min-height:38px;padding:8px 12px;border-radius:9px;background:#fbf6ec;font-size:11px}
  .barra-orden{gap:8px;margin:2px 0 12px}
  .barra-orden select,.barra-orden button{min-height:42px;padding:9px;border-radius:9px;background:#fbf6ec;font-size:11px}

  .ficha{padding:27px 0 36px}
  .ficha>.contenedor{padding-inline:16px}
  .ficha__cat{margin-bottom:9px;font-size:14px}
  .ficha h1{margin-bottom:18px;font-size:48px;line-height:.95}
  .ficha__img{height:330px;aspect-ratio:auto;margin-inline:-28px;border-radius:0;box-shadow:none}
  .ficha__img img{width:100%;height:100%;object-fit:cover;object-position:center}
  .ficha__cols>div:first-child>p{display:none !important}
  .caja-compra{
    position:relative;z-index:2;margin:-28px -12px 0;padding:22px 20px;
    border-radius:18px;background:#fbf6ec;box-shadow:0 12px 28px rgba(83,49,26,.12);
  }
  .caja-compra h2{font-size:28px}
  .caja-compra .opts{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .opt{min-height:48px;padding:9px 5px;border-radius:9px;font-size:15px}
  .fila-precio{margin:20px 0}
  .fila-precio .precio{font-size:34px}
  .stepper button{width:42px;height:42px}
  .stepper span{line-height:42px}
  .tabs{justify-content:space-between;gap:9px;margin-top:24px}
  .tab{padding:11px 1px;font-size:11px}
  .tab-panel{padding-top:15px;font-size:14px}

  .portada-vista{margin-bottom:21px}
  .portada-vista h1{max-width:8ch;font-size:46px;line-height:.96}
  .portada-vista p{margin:12px auto 0;font-size:17px;line-height:1.35}
  .portada-vista::after{
    width:min(100%,280px);height:14px;margin:16px auto 0;background-color:transparent;
    background:
      url("../assets/detalle-oliva.png?v=2") center/42px auto no-repeat,
      linear-gradient(90deg,var(--oliva) 0 37%,transparent 37% 63%,var(--oliva) 63% 100%) center/100% 1px no-repeat;
    opacity:.7;
  }

  .creador-mix{padding:26px 0 36px}
  .creador-mix .contenedor{padding-inline:16px}
  .mix-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .mix-card{overflow:hidden;height:146px;min-height:146px;padding:10px;border-radius:12px;background:#fbf6ec}
  .mix-card__top{position:relative;z-index:2;margin:0}
  .mix-card__nom{font-size:16px;line-height:1.05}
  .mix-card__check{width:30px;height:30px}
  .mix-card__fig{height:112px;aspect-ratio:auto;margin:0 -4px -7px;background:transparent}
  .mix-card__fig img{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:normal}
  .mix-resumen{margin-top:22px;padding:22px 18px;border-radius:17px;background:#7a4423;background-image:none;box-shadow:0 8px 20px rgba(91,45,20,.16)}
  .mix-resumen .titulo-filete{margin-bottom:2px}
  .mix-resumen .titulo-filete h2{font-size:27px;color:#f4ead9}
  .mix-resumen .opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mix-resumen .form-campo{display:none}
  .mix-resumen>p:last-child{display:none}
  .mix-resumen__total{margin-top:12px;padding-top:10px}
  .mix-resumen__total strong{font-size:32px}

  .combos{padding:26px 0 36px}
  .combos .contenedor{padding-inline:16px}
  .combos .portada-vista h1{max-width:9ch;font-size:46px}
  .combo{margin-bottom:12px;padding:12px;border-radius:14px;background:#fbf6ec;box-shadow:0 5px 14px rgba(83,49,26,.08)}
  .combo__top{position:relative;display:block;min-height:150px}
  .combo__txt{position:relative;z-index:2;width:48%;padding:4px}
  .combo h3{font-size:25px;line-height:1.02}
  .combo__hr{margin:8px 0;max-width:74px;background:#7e8b61}
  .combo__desc{margin-bottom:9px;font-size:12px;line-height:1.35}
  .combo__n{padding:4px 7px;border-radius:7px;font-size:10px}
  .combo__fig{position:absolute;right:-7px;top:-5px;width:58%;height:155px;border-radius:0;background:transparent}
  .combo__fig img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;mix-blend-mode:normal}
  .combo__detalle{display:none}
  .combo__precio{margin:8px 4px 6px;font-size:25px}
  .combo__ahorro{margin:0 0 9px 4px;font-size:10px}
  .combo>.btn{min-height:42px}

  body[data-vista="como-comprar"] .header,
  body[data-vista="como-comprar"] .pie,
  body[data-vista="como-comprar"] .tabbar{display:none}
  body[data-vista="como-comprar"] main{padding:0}
  .como-comprar{padding:0}
  .como-comprar>.contenedor{padding:0}
  .pasos{
    min-height:100dvh;margin:0;padding:52px 39px 34px;border-radius:0;
    background:#697451;background-image:none;box-shadow:none;
  }
  .pasos h1{max-width:330px;margin-inline:auto;font-size:56px;line-height:.98;text-align:center}
  .pasos__ornamento{display:block;width:100%;height:24px;margin:18px 0 8px}
  .pasos__sep{position:relative;height:1px;margin:20px 0;background:rgba(244,234,217,.43)}
  .pasos__sep::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#f4ead9;transform:translate(-50%,-50%)}
  .paso{display:grid;grid-template-columns:120px minmax(0,1fr);gap:15px;align-items:stretch;min-height:155px}
  .paso__visual{position:relative;display:flex;align-items:flex-end;justify-content:center}
  .paso__n{position:absolute;left:0;top:0;min-width:0;font-size:44px}
  .paso__ico{display:block;width:92px;height:92px;margin-bottom:2px}
  .paso__ico svg{width:100%;height:100%}
  .paso__cuerpo{display:flex;flex-direction:column;justify-content:center;padding-left:17px;border-left:1px solid rgba(244,234,217,.43)}
  .paso h3{margin-bottom:11px;font-size:27px;line-height:1.08}
  .paso p{font-size:17px;line-height:1.35}
  .pasos>.btn{min-height:54px;margin-top:4px;font-family:var(--serif);font-size:18px}
  .pasos__cierre{margin-top:13px;font-size:12px}
  .como-extra{display:none}

  .pie{margin-top:0;background:#7a4423;background-image:none}
  .tabbar{padding:5px 4px calc(5px + env(safe-area-inset-bottom));background:#faf4e9;backdrop-filter:none}
  .tabbar a{min-height:46px;font-size:9px}
}

/* Auditoría visual: encuadres completos y superficies fotográficas continuas. */
.prod__sel--fija{
  display:flex;align-items:center;background-image:none;
}
.cat-card,.mix-card{background:var(--foto-crema)}
.mix-card[aria-pressed="true"]{background:var(--foto-crema)}
.prod__fig,.ficha__img,.mix-card__fig,.combo__fig{background:var(--foto-crema)}
.cat-card__fig,
.prod__fig img,
.ficha__img img,
.mix-card__fig img,
.combo__fig img{
  object-fit:contain;
  object-position:center;
  transform:none;
  mix-blend-mode:normal;
}
.combo{background:var(--foto-crema)}

@media (max-width:639px){
  body[data-vista="catalogo"] .prod__sub{display:none}
  body[data-vista="catalogo"] .prod__nom{min-height:2.2em;text-wrap:balance}
  .cat-card__fig{background:var(--foto-crema)}
  .mix-card__top{position:absolute;top:10px;right:10px;left:10px}
  .mix-card__fig{
    position:absolute;right:10px;bottom:8px;left:10px;height:104px;margin:0;
  }
  .mix-card__fig img{object-position:center bottom}
}


/* ============================================================
   Ajustes pedidos: botón del hero más chico y categorías centradas
   ============================================================ */

/* --- 1. el botón del hero no debe tapar la foto --- */
.btn--hero{
  min-height:44px;
  padding:11px 18px;
  font-size:12.5px;
  letter-spacing:.07em;
}
.btn--hero svg{width:14px;height:14px}
@media (max-width:639px){
  .btn--hero{min-height:40px;padding:9px 15px;font-size:11.5px;letter-spacing:.06em}
  .btn--hero svg{width:13px;height:13px}
}

/* --- 2. categorías: foto centrada dentro de la tarjeta --- */
.cat-card{
  align-items:center;
  text-align:center;
  gap:10px;
  background:var(--foto-crema);
}
.cat-card__nom{max-width:none;min-height:2.2em;display:flex;align-items:center;justify-content:center}
.cat-card__fig{
  position:static;
  align-self:center;
  margin:0;
  width:104px;height:104px;
  object-fit:contain;
  object-position:center;
  border-radius:10px;
  background:var(--foto-crema);
}
.cat-card__ver{justify-content:center}

@media (max-width:639px){
  .cat-card{height:auto;min-height:0;padding:14px 10px 12px;background:var(--foto-crema)}
  .cat-card__nom{max-width:none;font-size:14px}
  .cat-card__fig{position:static;right:auto;bottom:auto;width:110px;height:110px;border-radius:10px;object-fit:contain}
}
@media (min-width:640px){
  .cat-card{min-height:0;padding:20px 12px 18px}
  .cat-card__fig{width:min(136px,100%);height:auto;aspect-ratio:1}
}
@media (min-width:960px){
  .cat-card{padding:24px 18px 20px}
  .cat-card__fig{width:148px;height:148px}
}

/* ============================================================
   Creador de mix en tres pasos (misma lógica que el de Paladear)
   ============================================================ */
.mix-paso{margin-top:26px}
.mix-paso__lbl{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-txt);
}
.mix-paso__lbl span{
  background:var(--russet);color:var(--champan-claro);
  border-radius:999px;padding:4px 10px;font-size:11px;letter-spacing:.06em;
}

/* paso 1 — tamaño */
.mix-tams{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mix-tam{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--crema-card);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:14px 8px;min-height:70px;color:var(--marron-txt);
}
.mix-tam strong{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.1}
.mix-tam span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-txt)}
.mix-tam[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva);color:#fff}
.mix-tam[aria-pressed="true"] span{color:rgba(255,255,255,.85)}

/* paso 2 — lista de ingredientes */
.buscador--mix{margin-bottom:10px}
#mix-cats{margin-bottom:4px}
.mix-lista{
  max-height:min(52vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linea);border-radius:var(--r-lg);background:var(--crema-card);
  padding:4px 10px;
}
.mix-fila{
  display:flex;align-items:center;gap:12px;
  padding:10px 7px;border-bottom:1px solid var(--linea);border-radius:10px;
  transition:background-color .2s ease;
}
.mix-fila:last-child{border-bottom:0}
.mix-fila__fig{
  width:52px;height:52px;flex:0 0 auto;border-radius:10px;
  object-fit:contain;background:var(--foto-crema);
}
.mix-fila__txt{flex:1;min-width:0}
.mix-fila__nom{font-family:var(--serif);font-size:16px;line-height:1.2;margin:0}
.mix-fila__precio{font-size:12px;color:var(--gris-txt);margin:2px 0 0}
.mix-fila--sel{background:var(--oliva-claro);border-bottom-color:transparent}
.mix-fila--sel .mix-fila__nom{color:var(--oliva-osc)}
.mix-fila--sel .stepper{background:rgba(250,244,233,.86)}
.mix-fila .stepper{flex:0 0 auto;background:var(--champan-claro)}
.mix-fila .stepper span{min-width:52px;font-size:13px}
.mix-fila .stepper button:disabled{opacity:.35;cursor:not-allowed}
.mix-lista__vacio{padding:26px 10px;text-align:center;color:var(--gris-txt);font-size:14px}

/* barra de llenado */
.mix-barra{
  position:sticky;top:calc(var(--header-h) + 6px);z-index:20;
  background:var(--champan-claro);border:1px solid var(--linea);
  border-radius:var(--r-md);padding:12px 14px;margin-top:14px;
  box-shadow:0 6px 16px rgba(63,36,22,.07);
}
.mix-barra__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:14px}
.mix-barra__top strong{font-family:var(--serif);font-size:19px;font-weight:500}
.mix-barra__riel{height:8px;border-radius:999px;background:var(--oliva-claro);overflow:hidden;margin:8px 0 6px}
.mix-barra__fill{height:100%;background:var(--russet);border-radius:999px;transition:width .25s ease}
.mix-barra__fill--listo{background:var(--oliva)}
.mix-barra__hint{margin:0;font-size:12px;color:var(--gris-txt)}

/* paso 3 — resumen */
.mix-resumen{
  background:var(--russet);color:var(--champan-claro);
  border-radius:var(--r-lg);padding:20px 18px;text-align:left;
}
.mix-resumen__head{
  font-family:var(--serif);font-size:22px;margin:0 0 12px;
}
.mix-ings{list-style:none;margin:0 0 4px;padding:0;font-size:14px}
.mix-ings li{
  display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid rgba(244,234,217,.22);
}
.mix-ings__vacio{font-size:14px;opacity:.8;margin:0 0 6px}
.mix-resumen .form-campo{margin:16px 0 10px}
.mix-resumen .form-campo label{color:var(--champan-claro);opacity:.85}
.mix-tot{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:4px 0}
.mix-tot--main{
  border-top:1px solid rgba(244,234,217,.3);margin-top:8px;padding-top:12px;
  font-family:var(--serif);font-size:24px;
}
.mix-resumen #add-mix{margin-top:14px}
.mix-resumen #add-mix:disabled{opacity:.55;cursor:not-allowed}
.mix-nota{font-size:12px;opacity:.8;margin:10px 0 0}

@media (min-width:640px){
  .mix-tams{max-width:420px}
  .mix-fila__fig{width:60px;height:60px}
  .mix-resumen{padding:24px 22px}
}

/* filas del mix más compactas: entran más ingredientes en pantalla */
.mix-fila{padding:8px 7px;gap:10px}
.mix-fila__fig{width:46px;height:46px}
.mix-fila__nom{font-size:15px;line-height:1.15}
.mix-fila__precio{font-size:11.5px}
.mix-fila .stepper span{min-width:46px;line-height:36px}
.mix-fila .stepper button{width:34px;height:36px}
@media (min-width:640px){
  .mix-fila__fig{width:52px;height:52px}
  .mix-fila__nom{font-size:16px}
}

/* ============================================================
   Hero con la foto de La Natural: más aire, texto sobre el
   espacio libre de la izquierda y los productos a la derecha
   ============================================================ */
.hero__arte picture{display:block;width:100%;height:100%}

@media (max-width:639px){
  .hero{height:auto;min-height:0;padding:0;background:#f4ead9}
  .hero .contenedor{
    position:relative;display:block;height:auto;
    padding:0;aspect-ratio:1/0.95;
  }
  .hero__arte{position:absolute;inset:0;margin:0;filter:none}
  .hero__arte img{
    width:100%;height:100%;object-fit:cover;object-position:100% 55%;
    transform:none;border-radius:0;
  }
  .hero__txt{
    position:relative;z-index:2;width:auto;max-width:none;
    padding:34px 24px 0;
  }
  .hero h1{max-width:9ch;font-size:clamp(38px,11.5vw,48px);line-height:.96;letter-spacing:-.02em}
  .hero p{max-width:15ch;margin:16px 0 22px;font-size:17px;line-height:1.4}
}

@media (min-width:640px){
  .hero{min-height:0}
  .hero .contenedor{position:relative;display:block;padding:0}
  .hero__arte{position:absolute;inset:0;margin:0}
  .hero__arte img{
    width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:70% center;
    border-radius:0;
  }
  .hero__txt{position:relative;z-index:2;padding:clamp(56px,9vw,104px) 24px clamp(64px,11vw,120px);max-width:min(56%,560px)}
}

/* ============================================================
   Carrito: un bloque por producto, con una fila por presentación
   ============================================================ */
.item__var{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;
}
.item__var + .item__var{border-top:1px dashed var(--linea)}
.item__var-lbl{
  flex:1;min-width:0;font-size:13px;line-height:1.25;color:var(--marron-txt);
}
.item__var-lbl em{
  display:block;font-style:normal;font-size:11.5px;color:var(--gris-txt);margin-top:1px;
}
.item__var strong{font-size:14px;min-width:64px;text-align:right}
.item__var .stepper{flex:0 0 auto}
.item__sub{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:1px solid var(--linea);margin-top:6px;padding-top:8px;font-size:13px;
}
.item__sub strong{font-family:var(--serif);font-size:17px;font-weight:500}
.item__quitar{padding:8px 0 2px}

/* que el precio unitario no se parta en dos líneas */
.item__var-lbl em{white-space:nowrap}
.item__var strong{min-width:58px;font-size:13.5px}
.item__var .stepper button{width:30px;height:34px;font-size:16px}
.item__var .stepper span{min-width:28px;line-height:34px;font-size:13px}

/* ============================================================
   Tarjetas con la mecánica de Paladear (botones de peso,
   cantidad y estado en el pedido), con la piel de La Natural
   ============================================================ */
.prod{gap:0}
.pesos{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}
.peso-btn{
  flex:1 1 auto;min-width:0;
  border:1.5px solid var(--linea);border-radius:8px;
  background:var(--champan-claro);color:var(--marron-txt);
  padding:6px 8px;font-size:12.5px;line-height:1.1;min-height:32px;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.peso-btn:hover:not([aria-pressed="true"]){border-color:var(--oliva)}
.peso-btn[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva);color:#fff}

.prod__pie{align-items:center;gap:6px;padding-top:2px}
.stepper--card{border-radius:999px}
.stepper--card button{width:30px;height:32px;font-size:16px}
.stepper--card span{min-width:24px;line-height:32px;font-size:14px}

.prod__add{
  width:100%;margin-top:9px;min-height:42px;border-radius:10px;
  gap:7px;font-size:12.5px;letter-spacing:.06em;position:relative;overflow:hidden;
}
.prod__add svg{width:17px;height:17px}
.prod__add span{white-space:nowrap}

.prod__enpedido{
  margin:9px 0 0;padding:7px 9px;border-radius:8px;
  background:var(--oliva-claro);color:var(--oliva-osc);
  font-size:11.5px;line-height:1.3;
}
.prod__enpedido strong{font-weight:600}
/* Fila chica: la tarjeta ya es alta, esto no tiene que sumarle altura. */
.prod__acciones{display:flex;gap:5px;margin-top:4px}
/* Lo que ya está en el pedido, dentro de la tarjeta del combo */
/* Resalta un momento el producto que se vino a editar */
@keyframes resaltarItem{
  0%{background:var(--oliva-claro);box-shadow:0 0 0 2px var(--oliva)}
  70%{background:var(--oliva-claro);box-shadow:0 0 0 2px var(--oliva)}
  100%{background:transparent;box-shadow:0 0 0 2px transparent}
}
.item--resaltado{
  animation:resaltarItem 2.6s ease-out;
  border-radius:12px;
}
.combo__pedido{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.combo__pedido .prod__enpedido{margin:0;display:flex;align-items:center;gap:7px}
.combo__pedido .prod__acciones{margin-top:0}
.prod__quitar{
  width:30px;height:28px;flex:0 0 auto;border-radius:7px;
  border:1px solid rgba(168,52,42,.3);background:rgba(168,52,42,.08);color:var(--rojo);
  display:flex;align-items:center;justify-content:center;transition:background .18s ease;
}
.prod__quitar svg{width:15px;height:15px}
.prod__quitar:hover{background:rgba(168,52,42,.16)}
.prod__vercarrito{
  flex:1;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--linea);background:var(--champan-claro);color:var(--marron-txt);
  font-size:11.5px;letter-spacing:.04em;transition:background .18s ease;
}
.prod__vercarrito:hover{background:var(--oliva-claro)}
.prod--en-pedido{border-color:var(--oliva)}

/* ============================================================
   Movimiento: onda al tocar, confirmación en verde,
   la foto que vuela al carrito
   ============================================================ */
.btn,.prod__add,.peso-btn,.opt,.chip,.mix-tam{position:relative;overflow:hidden}
.onda{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);transform:scale(0);
  animation:ondaExpandir .6s ease-out forwards;
}
.btn--fantasma .onda,.peso-btn .onda,.chip .onda,.mix-tam .onda{background:rgba(111,122,82,.25)}
@keyframes ondaExpandir{to{transform:scale(1);opacity:0}}

.btn--hecho{background:var(--oliva-osc) !important;color:#fff !important}

.vuela{
  position:fixed;z-index:9999;pointer-events:none;
  border-radius:50%;object-fit:cover;background:var(--foto-crema);
  box-shadow:0 6px 20px rgba(63,36,22,.25);
  transition:transform .62s cubic-bezier(.4,0,.2,1),opacity .62s ease;
}
.carrito-late{animation:carritoLate .45s ease}
@keyframes carritoLate{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}}

@media (min-width:640px){
  .peso-btn{font-size:13px;padding:7px 10px;min-height:34px}
  .prod__add{font-size:13px;min-height:44px}
  .prod__enpedido{font-size:12.5px}
}

/* el precio de la tarjeta no se parte en dos líneas */
.prod__pie .precio{white-space:nowrap;font-size:16.5px;flex:0 1 auto;min-width:0}
.prod__pie .precio__antes{font-size:11px}
.stepper--card button{width:28px}
.stepper--card span{min-width:22px}
@media (min-width:640px){
  .prod__pie .precio{font-size:19px}
  .stepper--card button{width:32px;height:34px}
  .stepper--card span{min-width:26px;line-height:34px}
}

/* ============================================================
   Carrito flotante, header compacto y barra inferior con vida
   ============================================================ */
.cart-fab{
  position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:56;
  width:54px;height:54px;border-radius:50%;border:0;
  background:var(--russet);color:var(--champan-claro);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(63,36,22,.32);
  opacity:0;transform:translateY(14px) scale(.85);
  transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.4,.64,1),background .2s ease;
}
.cart-fab.visible{opacity:1;transform:translateY(0) scale(1)}
.cart-fab:hover{background:var(--russet-osc)}
.cart-fab__n{
  position:absolute;top:-2px;right:-2px;
  min-width:22px;height:22px;padding:0 5px;border-radius:11px;
  background:var(--oliva);color:#fff;font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--champan);
}
@media (min-width:960px){
  .cart-fab{bottom:24px;right:24px;width:58px;height:58px}
}

/* header compacto al bajar */
.header{transition:height .25s ease,box-shadow .25s ease}
.marca__nombre,.marca__bajada{transition:font-size .25s ease,opacity .2s ease,margin .25s ease}
.marca__logo{transition:height .25s ease}
body.compacto .header{height:52px;box-shadow:0 4px 16px rgba(63,36,22,.18)}
body.compacto .marca__nombre{font-size:18px}
body.compacto .marca__logo{height:26px}
body.compacto .marca__bajada{opacity:0;font-size:0;margin:0}
body.compacto .icon-btn svg{width:22px;height:22px}

/* barra inferior: pastilla que se desliza y rebote del ícono */
.tabbar{position:fixed;isolation:isolate}
.tabbar__pill{
  position:absolute;top:4px;bottom:calc(4px + env(safe-area-inset-bottom));left:0;
  width:0;border-radius:12px;background:var(--oliva-claro);
  opacity:0;z-index:-1;
  transition:transform .34s cubic-bezier(.2,.7,.35,1),width .34s cubic-bezier(.2,.7,.35,1),opacity .2s ease;
}
.tabbar a{position:relative;z-index:1;transition:color .2s ease}
.rebota{animation:iconoRebota .32s ease-out}
@keyframes iconoRebota{0%{transform:scale(.86)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .cart-fab,.tabbar__pill,.header,.marca__nombre{transition:none}
}

/* ============================================================
   Checkout en pasos dentro del panel del carrito
   ============================================================ */
.co-resumen{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:var(--crema-card);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:16px;font-size:14px;
}
.co-resumen strong{font-family:var(--serif);font-size:20px;font-weight:500}
.co-lbl{font-size:15px;margin:0 0 14px;color:var(--marron-txt)}

.co-opcion{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--crema-card);border:1.5px solid var(--linea);border-radius:var(--r-lg);
  padding:16px 14px;margin-bottom:12px;color:var(--marron-txt);
  transition:border-color .2s ease,background .2s ease,transform .15s ease;
  position:relative;overflow:hidden;
}
.co-opcion:hover{border-color:var(--oliva);background:var(--champan-claro)}
.co-opcion:active{transform:scale(.99)}
.co-opcion__ico{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  background:var(--oliva-claro);color:var(--oliva-osc);
  display:flex;align-items:center;justify-content:center;
}
.co-opcion__txt{flex:1;min-width:0}
.co-opcion__txt b{display:block;font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.2}
.co-opcion__txt small{display:block;font-size:12.5px;color:var(--gris-txt);margin-top:3px;line-height:1.35}
.co-opcion__arr{color:var(--russet);flex:0 0 auto}

.co-dir{
  display:block;width:100%;text-align:left;margin-bottom:6px;
  border:1.5px solid var(--linea);border-radius:var(--r-sm);background:var(--champan-claro);
  padding:11px 12px;font-size:14px;color:var(--marron-txt);
}
.co-dir:hover{border-color:var(--oliva)}
.co-dir--elegida{border-color:var(--oliva);background:var(--oliva-claro)}

.btn--wa{background:#1f9d55;color:#fff}
.btn--wa:hover{background:#178144}
.btn--wa svg{width:19px;height:19px}

.co-pago{font-size:13px;color:var(--gris-txt);margin:12px 0 0}
.co-guardado{font-size:12px;color:var(--gris-txt);margin:8px 0 0}
.co-guardado button{
  background:none;border:0;padding:0;color:var(--russet);
  text-decoration:underline;font-size:12px;
}

/* productos de presentación única: no necesitan un recuadro de selección */
.prod__sel--fija{
  display:inline-block;width:auto;min-height:0;padding:0;margin:0 0 9px;
  border:0;background:none;font-size:12.5px;color:var(--gris-txt);letter-spacing:.02em;
}

/* ============================================================
   Precios de la tarjeta: primero el kilo, después la medida.
   Subtotales con el peso visual que tienen en Paladear.
   ============================================================ */
.prod__precios{display:flex;flex-direction:column;gap:1px;margin:0 0 6px}
/* el renglón del precio por kilo se reserva siempre, así la tarjeta no salta al
   cambiar de medida */
.prod__precios .precio-medida{min-height:1.25em}
@keyframes precioSale{to{opacity:0;transform:scale(.9)}}
@keyframes precioEntra{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.precio--sale{animation:precioSale .11s ease-in forwards}
.precio--entra{animation:precioEntra .3s cubic-bezier(.2,.72,.3,1)}
.precio--kg{font-size:19px;line-height:1.1;white-space:nowrap}
.precio--kg em{font-style:normal;font-family:var(--sans);font-size:12px;color:var(--gris-txt)}
.precio-medida{font-size:12px;color:var(--gris-txt);white-space:nowrap}
.precio-medida strong{color:var(--marron-txt);font-weight:600}
.prod__pie{justify-content:space-between}

/* chip de lo que ya está en el pedido */
.prod__enpedido{
  display:flex;align-items:center;gap:6px;
  margin:9px 0 0;padding:6px 9px;border-radius:999px;
  background:var(--oliva-claro);color:var(--oliva-osc);
  font-size:11.5px;line-height:1.25;
}
.prod__enpedido svg{width:14px;height:14px;flex:0 0 auto}
.prod__enpedido strong{font-weight:700}

/* filas del carrito: el monto pesa y queda alineado a la derecha */
.item__monto{
  min-width:66px;text-align:right;white-space:nowrap;
  font-size:14px;font-weight:700;
}
.item__papelera{
  flex:0 0 auto;width:28px;height:28px;border:0;border-radius:6px;
  background:none;color:rgba(63,36,22,.3);
  display:flex;align-items:center;justify-content:center;transition:color .2s ease;
}
.item__papelera:hover{color:var(--rojo)}
.item__var .stepper span{min-width:24px}
.item__var .stepper button{width:28px}
.item__sub strong{font-size:18px}

@media (min-width:640px){
  .precio--kg{font-size:21px}
  .precio-medida{font-size:13px}
}

/* cantidad y agregar en la misma fila: la tarjeta queda más corta */
.prod__pie{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:2px}
.prod__pie .prod__add{width:auto;flex:1;margin-top:0;padding:0 8px;min-height:40px}
.prod__pie .prod__add span{font-size:11.5px}
.stepper--card{flex:0 0 auto}
@media (min-width:640px){
  .prod__pie .prod__add span{font-size:12.5px}
}

/* cantidad + lo que ya está en el pedido en una fila; Agregar ancho abajo */
.prod__pie{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:2px;flex-wrap:wrap}
.prod__pie .prod__enpedido{margin:0;padding:3px 7px;font-size:10.5px;flex:1 1 auto;min-width:0}
.prod__pie .prod__enpedido span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod__add{width:100%;flex:none;margin-top:7px;min-height:38px;padding:0 10px}
.prod__add span{font-size:12px}
@media (min-width:640px){
  .prod__add span{font-size:13px}
  .prod__pie .prod__enpedido{font-size:11.5px}
}

/* fila del carrito más compacta: entra medida, precio por kilo, cantidad y monto */
.item{gap:10px}
.item__fig{width:44px;height:44px;border-radius:8px}
.item__nom{font-size:15px}
.item__var{gap:6px}
.item__var-lbl{flex:1 1 auto;min-width:0;font-size:12.5px;overflow:hidden}
.item__var-lbl em{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__var .stepper{flex:0 0 auto}
.item__var .stepper button{width:26px;height:32px;font-size:15px}
.item__var .stepper span{min-width:20px;line-height:32px;font-size:12.5px}
.item__monto{min-width:58px;font-size:13.5px}
.item__papelera{width:24px;height:24px}
.item__papelera svg{width:14px;height:14px}

/* las medidas, siempre en una sola fila y todas del mismo ancho, sean 2, 3 o 4 */
.pesos{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:5px;margin:0 0 6px;
}
.peso-btn{
  flex:none;width:100%;padding:6px 2px;font-size:11.5px;min-height:30px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
}
/* con cuatro entran justas: se achica la letra y el espacio entre botones */
.pesos:has(.peso-btn:nth-child(4)){gap:4px}
.pesos:has(.peso-btn:nth-child(4)) .peso-btn{font-size:10.5px;padding:6px 1px;letter-spacing:-.01em}
@media (min-width:640px){
  .pesos{gap:6px}
  .peso-btn{font-size:12.5px;min-height:34px;padding:7px 4px}
  .pesos:has(.peso-btn:nth-child(4)) .peso-btn{font-size:12px;padding:7px 3px}
}

/* ============================================================
   Ajuste visual de escritorio
   Mobile conserva la composición validada de las maquetas.
   ============================================================ */
@media (min-width:960px){
  :root{--header-h:76px}

  .header{height:var(--header-h)}
  .header .contenedor{max-width:1280px;padding-inline:28px}
  .marca__nombre{font-size:31px;letter-spacing:.16em}
  .marca__logo{height:44px}
  .marca__bajada{font-size:11px;letter-spacing:.12em;margin-top:3px}

  .hero{
    height:auto;min-height:0;padding:clamp(22px,2vw,30px) 0 clamp(28px,2.4vw,36px);
    background:#f4ead9;
  }
  .hero .contenedor{
    position:relative;display:block;
    width:calc(100% - 40px);max-width:1320px;height:auto;aspect-ratio:1983/793;
    margin:0 auto;padding:0;overflow:hidden;border:1px solid rgba(122,68,35,.12);border-radius:18px;
    box-shadow:0 16px 38px rgba(82,48,27,.12);
  }
  .hero__txt{
    position:absolute;z-index:2;top:50%;left:clamp(52px,6.2vw,86px);
    width:min(34%,400px);max-width:none;padding:0;transform:translateY(-50%);
  }
  .hero h1{max-width:8ch;font-size:clamp(50px,4vw,58px);line-height:.95;letter-spacing:-.025em;text-wrap:balance}
  .hero p{max-width:22ch;margin:15px 0 22px;font-size:18px;line-height:1.38}
  .hero__arte{
    position:absolute;inset:0;height:100%;margin:0;overflow:hidden;filter:none;
  }
  .hero__arte picture{height:100%}
  .hero__arte img{
    width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:center;
    transform:none;
  }

  .titulo-filete h2{font-size:34px}
  .cats{padding:32px 0 36px}
  .cats-grid{gap:16px}
  .cats-pagina{gap:16px}
  .cat-card{
    min-height:0;padding:18px 16px 16px;gap:8px;
    background:var(--foto-crema);border-color:rgba(122,91,61,.12);
    box-shadow:0 8px 20px rgba(52,45,28,.08);
  }
  .cat-card__nom{min-height:2.25em;font-size:18px;line-height:1.1;display:flex;align-items:center;justify-content:center}
  .cat-card__fig{
    width:148px;height:148px;background:var(--foto-crema);filter:none;
  }
  .cat-card__ver{font-size:10.5px}

  .ofertas-home .prod__fig,
  .catalogo .prod__fig{aspect-ratio:1.14/1}
  .prod__nom{font-size:18px}

  .ficha h1{font-size:64px}
  .ficha__cols{gap:44px;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)}

  .portada-vista{margin-bottom:26px}
  .portada-vista h1{max-width:none;font-size:64px;line-height:1;text-wrap:balance}
  .portada-vista p{max-width:48ch;font-size:19px}

  .creador-mix .contenedor{max-width:1020px}
  .creador-mix .portada-vista{max-width:820px}
  .mix-tams{max-width:none;gap:14px}
  .mix-tam{min-height:88px}

  .combos .contenedor{max-width:1120px}
  .combo{
    display:grid;grid-template-columns:minmax(0,1fr) 300px;
    column-gap:38px;align-items:start;
    min-height:0;margin-bottom:20px;padding:28px 30px;
  }
  .combo__top{display:contents}
  .combo__txt{grid-column:1;grid-row:1}
  .combo__fig{
    grid-column:2;grid-row:1 / span 6;
    width:100%;align-self:center;border-radius:16px;
  }
  .combo h3{font-size:31px}
  .combo__detalle{grid-column:1;grid-row:2;margin:20px 0 8px}
  .combo>.precio__antes{grid-column:1;grid-row:3}
  .combo__precio{grid-column:1;grid-row:4;margin:2px 0 7px}
  .combo__ahorro{grid-column:1;grid-row:5;justify-self:start;margin-bottom:12px}
  .combo>.btn{grid-column:1;grid-row:6;width:min(100%,380px);margin-top:4px}

  .pasos{max-width:980px;padding:40px 48px}
  .pasos h1{font-size:62px}
  .pasos__ornamento{display:block;width:100%;height:24px;margin:14px 0 4px}
  .pasos__sep{margin:16px 0}
  .paso{align-items:center}
  .paso__visual{display:flex;align-items:center;gap:12px;min-width:150px}
  .paso__n{min-width:auto;font-size:42px}
  .paso__ico{display:block;width:50px;height:50px}
  .paso__ico svg{width:100%;height:100%}
  .paso h3{font-size:24px}
  .paso p{font-size:16px}
}

@media (min-width:960px) and (max-width:1199px){
  .hero .contenedor{width:calc(100% - 32px)}
  .hero__txt{left:52px;width:36%}
  .hero h1{font-size:clamp(46px,5vw,54px)}
}

/* ============================================================
   Buscador predictivo y barra compacta del catálogo
   ============================================================ */
.buscador-abrir{
  width:100%;min-height:52px;margin:0 0 12px;padding:10px 14px;
  display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:center;text-align:left;
  border:1px solid var(--linea);border-radius:14px;background:var(--crema-card);color:var(--marron-txt);
  font:inherit;transition:border-color .2s ease,background .2s ease;
}
.buscador-abrir:hover{border-color:var(--oliva);background:var(--champan-claro)}
.buscador-abrir svg{grid-row:1 / span 2;color:var(--oliva-osc)}
.buscador-abrir span{font-size:15px;font-weight:600}
.buscador-abrir small{font-size:11.5px;color:var(--gris-txt);margin-top:1px}

.header-compacta{
  position:fixed;top:0;left:0;right:0;z-index:58;
  background:var(--russet);color:var(--champan-claro);
  box-shadow:0 4px 16px rgba(63,36,22,.2);
  transform:translateY(-110%);pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
body.compacto-catalogo .header-compacta{transform:translateY(0);pointer-events:auto}
.header-compacta__in{
  width:100%;max-width:1180px;min-height:60px;margin:0 auto;padding:8px 14px;
  display:flex;align-items:center;gap:9px;
}
.header-compacta__buscar{
  flex:1;min-width:0;min-height:44px;padding:0 15px;
  display:flex;align-items:center;gap:9px;
  border:0;border-radius:22px;background:var(--champan-claro);color:var(--gris-txt);
  font:inherit;font-size:15px;text-align:left;
}
.header-compacta__buscar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-compacta__cats{
  width:44px;height:44px;flex:0 0 auto;border:1px solid rgba(255,255,255,.45);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:inherit;
}
.header-compacta__buscar:hover{background:#fff}
.header-compacta__cats:hover{background:rgba(255,255,255,.22)}

.busqueda-pantalla{
  position:fixed;inset:0;z-index:120;background:var(--champan);
  opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.busqueda-pantalla.abierta{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .2s ease,transform .2s ease;
}
.busqueda-top{position:sticky;top:0;z-index:2;background:var(--russet);box-shadow:0 3px 14px rgba(63,36,22,.18)}
.busqueda-top__in{max-width:920px;min-height:68px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:8px}
.busqueda-volver{
  width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:var(--champan-claro);display:flex;align-items:center;justify-content:center;
}
.busqueda-campo{
  min-width:0;flex:1;min-height:46px;padding:0 8px 0 14px;border-radius:24px;
  display:flex;align-items:center;gap:9px;background:var(--champan-claro);color:var(--gris-txt);
}
.busqueda-campo input{
  min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--marron-txt);
  font:inherit;font-size:16px;
}
.busqueda-campo input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
.busqueda-campo input::placeholder{color:#a08f7d}
.busqueda-campo button{
  width:34px;height:34px;flex:0 0 auto;border:0;border-radius:50%;background:transparent;
  color:var(--gris-txt);font-size:24px;line-height:1;
}
.busqueda-campo:focus-within{box-shadow:0 0 0 3px rgba(244,234,217,.28)}
.busqueda-contenido{width:100%;max-width:920px;margin:0 auto;padding:22px 16px 110px}
.busqueda-estado{padding:48px 18px;text-align:center;color:var(--gris-txt);font-size:15px}
.busqueda-grupo{margin-bottom:24px}
.busqueda-grupo h2{font-size:22px;margin:0 0 11px;color:var(--marron-txt)}
.busqueda-categorias{display:flex;gap:8px;flex-wrap:wrap}
.busqueda-categoria{
  min-height:42px;padding:9px 13px;border:1px solid var(--linea);border-radius:12px;
  display:flex;align-items:center;gap:8px;background:var(--oliva-claro);color:var(--oliva-osc);font:inherit;font-size:14px;font-weight:600;
}
.busqueda-categoria svg{width:14px;height:14px}
.busqueda-lista{display:grid;grid-template-columns:1fr;gap:8px}
.busqueda-resultado{
  width:100%;min-width:0;padding:9px 11px;border:1px solid var(--linea);border-radius:14px;
  display:flex;align-items:center;gap:11px;text-align:left;background:var(--champan-claro);color:var(--marron-txt);
  transition:border-color .2s ease,transform .2s ease;
}
.busqueda-resultado:hover{border-color:var(--oliva);transform:translateX(2px)}
.busqueda-resultado__fig{width:58px;height:58px;flex:0 0 auto;border-radius:10px;overflow:hidden;background:var(--foto-crema)}
.busqueda-resultado__fig img{width:100%;height:100%;object-fit:cover}
.busqueda-resultado__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.busqueda-resultado__txt strong{font-family:var(--serif);font-size:16px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.busqueda-resultado__txt small{font-size:11.5px;color:var(--gris-txt);margin-top:2px}
.busqueda-resultado__txt em{font-style:normal;font-size:13px;font-weight:600;color:var(--oliva-osc);margin-top:2px}
.busqueda-resultado>svg{width:16px;height:16px;flex:0 0 auto;color:var(--russet)}

/* La cantidad real queda visible mientras se modifica cada variante. */
.item__acum{margin:2px 0 5px;font-size:12px;font-weight:600;color:var(--oliva-osc)}
.item__var-total{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--russet);white-space:nowrap}

@media (min-width:720px){
  .busqueda-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .busqueda-contenido{padding-top:30px}
  .header-compacta__in{padding-inline:28px}
}

/* Safari amplía automáticamente campos menores a 16 px. */
@media (max-width:639px){
  .buscador input,
  .barra-orden select,
  .form-campo input,
  .form-campo textarea,
  .form-campo select{font-size:16px}
  .barra-orden select{letter-spacing:.02em;text-transform:none}
}

/* ============================================================
   Barra inferior con los íconos propios y la pastilla chica
   ============================================================ */
.tabbar a img{
  width:26px;height:26px;object-fit:contain;
  transition:opacity .2s ease,transform .2s ease;
  opacity:.62;
}
.tabbar a[aria-current="page"] img{opacity:1}
.tabbar a{color:var(--gris-txt)}
.tabbar a[aria-current="page"]{color:var(--russet);font-weight:600}

/* la burbuja abraza sólo al ícono */
.tabbar__pill{
  top:5px;bottom:auto;height:38px;width:52px;
  border-radius:14px;background:var(--oliva-claro);
}

/* íconos propios del encabezado */
.icon-btn__img{width:24px;height:24px;object-fit:contain;display:block}
.icon-btn__img--carrito{width:26px;height:26px}
body.compacto .icon-btn__img{width:21px;height:21px}
body.compacto .icon-btn__img--carrito{width:23px;height:23px}


/* ============================================================
   Auditoría: áreas táctiles cómodas en la tarjeta
   ============================================================ */
.prod__nom a{display:block}
.peso-btn{min-height:36px}
.stepper--card button{width:34px;height:36px}
.stepper--card span{min-width:26px;line-height:36px}
.prod__quitar{width:32px;height:30px}
.prod__vercarrito{height:30px}
@media (min-width:640px){
  .stepper--card button{width:36px;height:38px}
  .stepper--card span{line-height:38px}
}

/* el botón del hero acompaña el tamaño de la pantalla */
@media (min-width:960px){
  .btn--hero{min-height:50px;padding:14px 26px;font-size:14px}
  .btn--hero svg{width:16px;height:16px}
}


/* legibilidad: lo que estaba en 9 y 10 px era chico para leer en un celular */
.tabbar a{font-size:10.5px}
.prod__sub{font-size:11.5px}
.chip{color:#5e4c3c}


/* el filtro activo usa el mismo oliva que el resto de la marca */
.chip[aria-pressed="true"]{background:var(--oliva);border-color:var(--oliva)}


/* ============================================================
   El detalle de La Natural, diminuto, entre dos líneas
   ============================================================ */
.filete{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:min(300px,84%);margin:16px auto 10px;
}
.filete::before,.filete::after{
  content:"";flex:1;height:1px;background:currentColor;opacity:.42;
}
.filete img{width:44px;height:auto;opacity:.85;flex:0 0 auto}
.filete--claro{color:var(--champan)}
.pie__sello{display:block;margin:0 auto 14px;height:78px;width:auto;opacity:.9}
/* En escritorio el pie es una grilla de tres columnas: el sello y el filete tienen
   que cruzarla entera, si no se comen dos columnas y los bloques se desordenan. */
.pie__sello,
.pie .filete--pie{grid-column:1 / -1}
.filete--pie{margin:0 auto 20px;width:min(240px,70%);opacity:.75}
.menu-wa{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-weight:600;color:var(--oliva-osc);text-decoration:none;
  border-bottom:1px solid rgba(111,122,82,.4);padding-bottom:2px;
}

@media (min-width:640px){
  .filete{width:min(340px,60%);margin:18px auto 12px}
  .filete img{width:50px}
}

/* los títulos de los pasos no se parten a la mitad */
.paso h3{
  overflow-wrap:normal;word-break:normal;hyphens:none;
  text-wrap:balance;
}
@media (max-width:639px){
  .paso h3{font-size:clamp(16px,4.9vw,24px);letter-spacing:.03em;line-height:1.12}
  .paso__cuerpo{min-width:0}
}

/* ============================================================
   Descuentos en porcentaje y combos que se abren
   ============================================================ */
.desc-badge{
  position:absolute;top:8px;left:8px;z-index:3;
  background:var(--rojo);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;
  padding:5px 9px;border-radius:999px;line-height:1;
  box-shadow:0 2px 8px rgba(168,52,42,.28);
}
.desc-chip{
  display:inline-flex;align-items:center;
  background:rgba(168,52,42,.1);color:var(--rojo);
  border:1px solid rgba(168,52,42,.25);
  border-radius:999px;padding:5px 11px;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;
}

/* combo desplegable */
.combo__cab{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  background:none;border:0;padding:0;text-align:left;color:inherit;
}
.combo__txt{flex:1;min-width:0;display:block}
.combo__nom{
  display:block;font-family:var(--serif);font-size:20px;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.15;
}
.combo__hr{display:block;height:1px;background:var(--linea);margin:10px 0;max-width:120px}
.combo__desc{display:block;font-size:14px;color:var(--gris-txt);margin-bottom:10px}
.combo__n{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;
  background:var(--champan);border-radius:999px;padding:5px 10px;color:var(--gris-txt);
}
.combo__fig{position:relative;width:120px;flex:0 0 auto;align-self:flex-start}

.combo__cuerpo{
  border-top:1px dashed var(--linea);margin-top:14px;padding-top:12px;
  animation:aparece .22s ease;
}
@keyframes aparece{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.combo__lista{list-style:none;margin:0;padding:0}
.combo__lista li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--linea);font-size:14px;
}
.combo__lista li:last-child{border-bottom:0}
.combo__item-nom{flex:1;min-width:0}
.combo__item-nom em{
  display:block;font-style:normal;font-size:12px;color:var(--gris-txt);margin-top:2px;
}
.combo__item-precio{font-weight:600;white-space:nowrap}
.combo__cuentas{margin-top:10px;padding-top:10px;border-top:1px solid var(--linea)}
.combo__fila{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0;color:var(--gris-txt)}
.combo__fila--desc{color:var(--rojo);font-weight:600}

.combo__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.combo__precio{font-family:var(--serif);font-size:26px;margin:0}
.combo__ver{
  width:100%;margin-top:8px;background:none;border:0;
  color:var(--russet);font-size:13px;text-decoration:underline;padding:10px;
}

@media (min-width:640px){
  .combo__fig{width:200px}
  .combo__nom{font-size:23px}
}

/* al pasar de una página de categorías a la otra, que se note la separación */
.cats-pista{gap:16px}
.cats-pagina{flex:0 0 100%}

/* ============================================================
   Catálogo: rubro visible, controles bajo demanda y más calidez
   ============================================================ */
.seccion.catalogo{padding-top:0}
.cat-cabecera{
  position:relative;margin-bottom:20px;padding:25px 0 11px;
  background:
    linear-gradient(112deg,rgba(197,138,59,.10),transparent 36%),
    linear-gradient(180deg,#fbf5e9 0%,#f4ecdd 100%);
  border-bottom:0;
}
.cat-cabecera::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--calendula) 0 28%,var(--oliva) 28% 72%,var(--russet) 72% 100%);
}
.catalogo-presentacion{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:16px;
}
.catalogo-titulo{min-width:0}
.catalogo-titulo__kicker{
  display:flex;align-items:center;gap:8px;margin-bottom:5px;
  color:var(--russet);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.catalogo-titulo__kicker::before{
  content:"";width:13px;height:8px;flex:0 0 auto;
  border-radius:10px 2px 10px 2px;background:var(--calendula);transform:rotate(-12deg);
}
.catalogo-titulo h1{
  max-width:18ch;color:var(--marron-txt);font-size:clamp(34px,4.6vw,54px);
  line-height:.98;letter-spacing:-.025em;text-wrap:balance;
}
.catalogo-titulo h1::after{
  content:"";display:block;width:56px;height:4px;margin-top:10px;
  border-radius:4px 1px 4px 1px;background:var(--calendula);
}
.catalogo-controles{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.catalogo-control{
  position:relative;min-height:48px;padding:0 17px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:15px 15px 6px 15px;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.catalogo-control:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(63,36,22,.12)}
.catalogo-control:active{transform:translateY(0)}
.catalogo-control--categorias{background:var(--oliva);color:#fff}
.catalogo-control--categorias:hover{background:var(--oliva-osc)}
.catalogo-control--filtros{
  color:var(--marron-txt);background:#fff8e9;border-color:#d9ad6d;
}
.catalogo-control--filtros:hover{background:var(--calendula-claro)}
.catalogo-control__badge{
  position:absolute;top:-7px;right:-6px;min-width:21px;height:21px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;border:2px solid #fbf5e9;border-radius:11px;
  background:var(--russet);color:#fff;font-size:10px;line-height:1;letter-spacing:0;
}
.catalogo-control__badge[hidden]{display:none}
.cat-cabecera .buscador-abrir{
  min-height:54px;margin-bottom:8px;padding-inline:15px;
  border-color:rgba(111,122,82,.34);border-radius:17px 7px 17px 17px;
  background:rgba(255,252,245,.88);box-shadow:0 4px 14px rgba(63,36,22,.055);
}
.cat-cabecera .buscador-abrir:hover{border-color:var(--oliva);background:#fffaf1}
.cat-cabecera .buscador-abrir svg{color:var(--oliva)}
.cat-cabecera .orden-fila{margin-top:7px;padding:9px 2px 1px;border-top-color:rgba(111,122,82,.25)}

/* Paneles del catálogo: listas claras, no otra colección de pastillas. */
.panel-catalogo__intro{
  margin:12px 0 14px;color:var(--gris-txt);font-size:14px;line-height:1.4;
}
.menu-nav--catalogo{gap:7px;padding-top:0}
.menu-nav--catalogo a{
  min-height:50px;padding:10px 11px;display:grid;grid-template-columns:12px minmax(0,1fr) 18px;
  align-items:center;gap:10px;border:1px solid transparent;border-radius:12px 12px 5px 12px;
  background:#f7eddd;font-size:13px;line-height:1.2;letter-spacing:.045em;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.menu-nav--catalogo a:hover{transform:translateX(2px);background:#f2e3ca}
.menu-nav--catalogo a[aria-current="true"]{
  color:var(--oliva-osc);background:var(--oliva-claro);border-color:rgba(111,122,82,.32);font-weight:700;
}
.menu-nav--catalogo a>svg{justify-self:end;color:var(--russet)}
.panel-categoria__marca{
  width:10px;height:15px;border-radius:10px 2px 10px 2px;background:var(--calendula);transform:rotate(-10deg);
}
.panel-categoria__marca--todos{background:var(--oliva)}
.panel__top--filtros{background:var(--calendula);color:var(--marron-txt)}
.panel-filtros__lista{display:grid;gap:9px}
.filtro-opcion{
  width:100%;min-height:62px;padding:9px 11px;display:grid;
  grid-template-columns:40px minmax(0,1fr) 25px;align-items:center;gap:11px;text-align:left;
  border:1px solid var(--linea);border-radius:14px 14px 6px 14px;
  background:#fffaf1;color:var(--marron-txt);
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.filtro-opcion:hover{transform:translateX(2px);border-color:var(--calendula)}
.filtro-opcion[aria-pressed="true"]{border-color:var(--oliva);background:var(--oliva-claro)}
.filtro-opcion__ico{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:12px 12px 4px 12px;background:var(--calendula-claro);
  color:var(--russet);font-family:var(--serif);font-size:20px;font-weight:600;
}
.filtro-opcion--oferta .filtro-opcion__ico{background:#f4d8d1;color:var(--rojo);font-family:var(--sans);font-size:15px}
.filtro-opcion__texto{min-width:0;display:flex;flex-direction:column}
.filtro-opcion__texto strong{font-size:15px;line-height:1.2}
.filtro-opcion__texto small{margin-top:2px;color:var(--gris-txt);font-size:11.5px}
.filtro-opcion__check{
  width:23px;height:23px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);border-radius:50%;color:transparent;font-size:13px;
}
.filtro-opcion[aria-pressed="true"] .filtro-opcion__check{border-color:var(--oliva);background:var(--oliva);color:#fff}
.panel-filtros__limpiar{
  width:100%;min-height:44px;margin-top:16px;border:0;border-bottom:1px solid currentColor;
  background:transparent;color:var(--russet);font:inherit;font-size:13px;font-weight:700;
}
.panel-filtros__limpiar:disabled{opacity:.38;cursor:default}
.panel-filtros__vacio{padding:22px 0;color:var(--gris-txt);text-align:center}

/* Al bajar, el nombre del rubro tiene prioridad y los controles ocupan lo mínimo. */
.header-compacta{
  background:#fbf6ec;color:var(--marron-txt);
  border-bottom:4px solid var(--oliva);box-shadow:0 5px 18px rgba(63,36,22,.18);
}
.header-compacta__in{min-height:58px;padding:6px 14px;gap:7px}
.header-compacta__rubro{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.08}
.header-compacta__rubro small{
  margin-bottom:2px;color:var(--russet);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.header-compacta__rubro strong{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--serif);font-size:18px;font-weight:600;
}
.header-compacta__accion{
  position:relative;width:42px;height:42px;flex:0 0 auto;padding:0;
  display:flex;align-items:center;justify-content:center;border:1px solid transparent;
  border-radius:13px 13px 5px 13px;background:#fffaf1;color:var(--marron-txt);
}
.header-compacta__accion--buscar{border-color:var(--linea)}
.header-compacta__accion--categorias{background:var(--oliva);color:#fff}
.header-compacta__accion--filtros{background:var(--calendula-claro);color:var(--russet)}
.header-compacta__accion .catalogo-control__badge{top:-6px;right:-5px;border-color:#fbf6ec}

@media (max-width:639px){
  .catalogo{padding:0 0 36px}
  .cat-cabecera{margin-bottom:14px;padding:17px 0 10px}
  .catalogo-presentacion{align-items:center;gap:10px;margin-bottom:12px}
  .catalogo-titulo__kicker{margin-bottom:4px;font-size:9.5px}
  .catalogo-titulo h1{max-width:19ch;font-size:clamp(26px,8vw,31px);line-height:1.02}
  .catalogo-titulo h1::after{width:40px;height:3px;margin-top:7px}
  .catalogo-controles{gap:6px}
  .catalogo-control{width:45px;min-height:45px;padding:0;border-radius:13px 13px 5px 13px}
  .catalogo-control__texto{display:none}
  .cat-cabecera .buscador-abrir{min-height:49px;margin-bottom:5px;padding:8px 12px;border-radius:14px 6px 14px 14px}
  .cat-cabecera .buscador-abrir span{font-size:14px}
  .cat-cabecera .buscador-abrir small{font-size:10.5px}
  .cat-cabecera .orden-fila{margin-top:5px;padding-top:7px}
  .cat-cabecera .orden-fila p{font-size:12px}
  .cat-cabecera .orden-campo select{max-width:170px;font-size:13px}
  .header-compacta__in{min-height:53px;padding:5px 10px;gap:6px}
  .header-compacta__rubro small{display:none}
  .header-compacta__rubro strong{font-size:16px}
  .header-compacta__accion{width:39px;height:39px;border-radius:11px 11px 4px 11px}
  .header-compacta__accion svg{width:19px;height:19px}
}

@media (min-width:640px){
  .cat-cabecera{padding-top:32px}
  .cat-cabecera .buscador-abrir{max-width:none}
  .catalogo-control{min-width:138px}
  .header-compacta__in{padding-inline:28px}
}