/* =========================================================
   ESTILO TÓTEM — capa visual de la tienda del cliente
   ---------------------------------------------------------
   Solo cambia cómo se VE la tienda (colores, letras, cabeceras
   y botones). No toca datos, precios, pedidos ni funciones.
   Se carga al final para pisar los estilos anteriores sin
   borrarlos: para volver al diseño anterior basta quitar la
   línea <link ... estilo-totem.css> de index.html.

   Etapa 1 (11-11-2026): colores, letras, cabeceras y botones.
   ========================================================= */
:root{
  --red:#e3121d;
  --red-d:#8d0a12;
  --ink:#171111;
  --ink2:#6b5f5a;
  --line:#e3dad4;
  --dark:#0a0808;
  --tt-negro:#000000;
  --tt-linea-oscura:#3a2c2c;
  --tt-gris-barra:#b9aca7;
  --tt-rojo-claro:#ff5a62;
  --tt-precio:#c20e18;
  --tt-fondo:#f3efec;
  --tt-titulo:"Anton","Impact","Arial Narrow",sans-serif;
  --tt-texto:"Barlow","Inter",system-ui,-apple-system,sans-serif;
}

/* ── Letras ── */
body{font-family:var(--tt-texto)}
#bestTitle,
.vitrina-heading h1,
.sh-head h3,
.easy-head h1,
.easy-section-head h2,
.brand-modal-card h2{
  font-family:var(--tt-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;text-wrap:balance
}
#bestTitle{font-size:30px}
.vitrina-heading h1{font-size:26px}
.vitrina-heading h1 span{color:var(--red)}
.sh-head h3{font-size:24px}

/* ── Fondo del catálogo ── */
body.benefits-design{background:var(--tt-fondo)}

/* ── Cabecera negra con filete rojo ── */
body.benefits-flow .tb,
body.easy-flow .tb{background:var(--tt-negro);border-bottom:3px solid var(--red)}
.tb-back-label{font-weight:700}

/* ── Buscador en forma de píldora ── */
.search-launch{border-radius:999px!important;font-weight:600}

/* ── Precios ── */
.pc-price,.promo-price,.easy-price{font-variant-numeric:tabular-nums}
.pc-price{color:var(--tt-precio)!important;font-weight:800!important}

/* ── Botones ── */
.pc-add{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;box-shadow:0 6px 16px rgba(227,18,29,.35)}
.home-best-more,
.cbar-b,
.search-cart,
.brand-modal-card button{border-radius:999px!important;background:var(--red)!important;color:#fff!important;font-weight:800!important}
.home-best-more{border:0!important;min-height:54px}

/* ── Barra del carrito ── */
.cbar{background:var(--tt-negro)!important;color:#fff;border-top:1px solid var(--tt-linea-oscura)}
.cbar-i b{color:#fff}
.cbar-i span{color:var(--tt-gris-barra)}

/* ── Barra inferior negra ── */
@media(max-width:767px){
  .bottom-nav{background:var(--tt-negro)!important;border-top:1px solid var(--tt-linea-oscura)!important;box-shadow:none!important}
  .bottom-nav button{color:var(--tt-gris-barra)!important;font-weight:700}
  .bottom-nav button.active{color:#fff!important}
  .bottom-nav button.active svg{stroke:var(--tt-rojo-claro)}
  .bottom-nav-count{background:var(--red)!important}
}

/* ── Portada «Elige cómo comprar» ── */
.easy-logo{content:url("marca/logo-claro.png");filter:drop-shadow(0 4px 18px rgba(0,0,0,.85))}
.easy-mode b{font-family:var(--tt-titulo);font-weight:400!important;text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
.easy-mode-action{font-weight:800}

/* ── Botones principales de ficha, carrito y pasos siguientes ── */
.fi-add,.btn-p{border-radius:999px!important;font-weight:800!important}

/* ── Compra fácil: títulos de sección ── */
.easy-section-title h2{font-family:var(--tt-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}

/* =========================================================
   Etapa 1b (11-11-2026): «Compra con beneficios» en fondo NEGRO
   ---------------------------------------------------------
   Pedido del propietario: al entrar a Compra con beneficios, el
   fondo de la tienda es negro. La estructura de la tienda no
   cambia (ni la de Compra fácil, que conserva su propio armado).
   El cliente puede volver al fondo claro con el botón sol/luna de la
   cabecera (assets/estilo-totem.js agrega la clase tt-claro al body).
   ========================================================= */
body.benefits-flow:not(.tt-claro){
  color-scheme:dark;
  --bg:#0a0808;
  --surface:#231b1b;
  --ink:#faf5f1;
  --ink2:#b9aca7;
  --line:#3a2c2c;
  --dark:#231b1b;
  --tt-precio:#ffffff;
  --tt-tarjeta:#181313;
  background:#0a0808;color:var(--ink);
}
body.benefits-flow:not(.tt-claro) #app,
body.benefits-design:not(.tt-claro) #app{background:#0a0808}
body.benefits-flow:not(.tt-claro) .shop-tools{background:#0a0808;border-color:var(--line)}
body.benefits-flow:not(.tt-claro) .search-launch{background:var(--tt-tarjeta)!important;border-color:var(--line)!important;color:var(--ink2)!important}

/* Tarjetas de producto */
body.benefits-design:not(.tt-claro) #app .grid .pc{background:var(--tt-tarjeta);border-color:var(--line);box-shadow:none}
body.benefits-design:not(.tt-claro) #app .grid .pc-unit,
body.benefits-design:not(.tt-claro) #app .grid .promo-summary,
body.benefits-design:not(.tt-claro) #app .grid .pc-price small{color:var(--ink2)}
body.benefits-design:not(.tt-claro) #app .grid .pc-title{color:var(--ink)}
body.benefits-design:not(.tt-claro) #app .grid .promo-delivery{background:#2b1414;color:#ffb3b6}
body.benefits-design:not(.tt-claro) #app .grid .pc-step{border-color:var(--tt-tarjeta)}

/* ── Botón sol / luna (lo agrega assets/estilo-totem.js en la cabecera) ── */
.tt-tema{display:none;flex:0 0 auto;align-items:center;gap:2px;margin-left:auto;padding:3px;border:1px solid var(--tt-linea-oscura);border-radius:999px;background:#181313}
body.benefits-flow .tt-tema{display:flex}
.tt-tema button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--tt-gris-barra);cursor:pointer}
.tt-tema button[aria-pressed="true"]{background:var(--red);color:#fff}
.tt-tema button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tt-tema svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Fondo negro: textos de la vitrina y del inicio ── */
body.benefits-flow:not(.tt-claro) .vitrina-heading h1,
body.benefits-flow:not(.tt-claro) .vitrina-arrow{color:var(--ink)}
body.benefits-flow:not(.tt-claro) .home-best-intro p,
body.benefits-flow:not(.tt-claro) .vitrina-caption{color:var(--ink2)}

/* ── Fondo negro: tarjetas de Categorías, Más, Notificaciones y Carnicería en tu Mano ── */
body.benefits-flow:not(.tt-claro) .pc-media,
body.benefits-flow:not(.tt-claro) #app .grid .pc-media,
body.benefits-flow:not(.tt-claro) #app .grid .pc-photo img,
body.benefits-flow:not(.tt-claro) .cn-category-image{background:#231b1b}
body.benefits-flow:not(.tt-claro) .home-menu-card,
body.benefits-flow:not(.tt-claro) .home-menu-action,
body.benefits-flow:not(.tt-claro) .cn-category,
body.benefits-flow:not(.tt-claro) .cn-category-arrow,
body.benefits-flow:not(.tt-claro) .order-tabs button:not(.active):not([aria-selected="true"]){background:var(--tt-tarjeta);border-color:var(--line);color:var(--ink);box-shadow:none}
body.benefits-flow:not(.tt-claro) .asado-entry{background:#2b1414;border-color:#5a2323;color:var(--ink)}
body.benefits-flow:not(.tt-claro) .cn-category.active,
body.benefits-flow:not(.tt-claro) .cn-category.is-active,
body.benefits-flow:not(.tt-claro) .cn-category[aria-pressed="true"]{border-color:var(--red)}
body.benefits-flow:not(.tt-claro) .asado-entry small,
body.benefits-flow:not(.tt-claro) .home-menu-copy span,
body.benefits-flow:not(.tt-claro) .home-menu-action small,
body.benefits-flow:not(.tt-claro) .more-page>p,
body.benefits-flow:not(.tt-claro) .cn-hint{color:var(--ink2)}
body.benefits-flow:not(.tt-claro) .home-menu-copy .price-drop-note,
body.benefits-flow:not(.tt-claro) .cn-price-drop,
body.benefits-flow:not(.tt-claro) .cn-hint-icon{color:var(--tt-rojo-claro)}
body.benefits-flow:not(.tt-claro) .fi-media{background:#231b1b}
body.benefits-flow:not(.tt-claro) .delivery-note{background:var(--tt-tarjeta);border-color:var(--line);color:var(--ink)}

/* ── Fondo negro: «Finaliza tu pedido» ── */
body.benefits-flow:not(.tt-claro) .fg.delivery-date,
body.benefits-flow:not(.tt-claro) .order-state{background:var(--tt-tarjeta);border-color:var(--line);color:var(--ink)}
body.benefits-flow:not(.tt-claro) .fg.delivery-date label,
body.benefits-flow:not(.tt-claro) .order-state b{color:var(--ink)}
body.benefits-flow:not(.tt-claro) .date-shortcuts button:not(.active):not(.is-active):not([aria-pressed="true"]),
body.benefits-flow:not(.tt-claro) .sheet select,
body.benefits-flow:not(.tt-claro) .sheet input,
body.benefits-flow:not(.tt-claro) .sheet textarea{background:#231b1b;color:var(--ink);border-color:var(--line)}
body.benefits-flow:not(.tt-claro) .checkout-steps li:not(.active):not(.is-active):not([aria-current]){color:var(--ink2)}
body.benefits-flow:not(.tt-claro) .text-button{color:var(--tt-rojo-claro)}

/* El botón «agregar» es rojo con ícono blanco: se quita el disco blanco interior del diseño anterior. */
.pc-add::before{background:transparent!important}

/* ── Fondo negro: buscador y resto del paso de entrega ── */
body.benefits-flow:not(.tt-claro) #bus .bus-top{background:#0a0808;border-color:var(--line)}
body.benefits-flow:not(.tt-claro) #busInput{background:#231b1b;color:var(--ink);border-color:var(--line)}
body.benefits-flow:not(.tt-claro) .filter-btn:not(.active){background:var(--tt-tarjeta);color:var(--ink);border-color:var(--line)}
body.benefits-flow:not(.tt-claro) .search-count,
body.benefits-flow:not(.tt-claro) .pc .promo-summary,
body.benefits-flow:not(.tt-claro) #f-fecha-ayuda,
body.benefits-flow:not(.tt-claro) .order-state span,
body.benefits-flow:not(.tt-claro) .checkout-steps li{color:var(--ink2)}
body.benefits-flow:not(.tt-claro) .checkout-steps li.step{color:var(--tt-rojo-claro)}
body.benefits-flow:not(.tt-claro) .pc .promo-delivery{background:#2b1414;color:#ffb3b6}
body.benefits-flow:not(.tt-claro) td.pr{color:var(--ink)}
body.benefits-flow:not(.tt-claro) .ml-pdf{background:var(--tt-tarjeta);color:var(--ink);border-color:var(--line)}
body.benefits-flow:not(.tt-claro) .chip.on{background:var(--red);border-color:var(--red);color:#fff}

/* =========================================================
   Etapa 1c (11-11-2026): PORTADA estilo tótem
   ---------------------------------------------------------
   La entrada «Elige cómo comprar» se ve como la bienvenida del
   tótem: fotos de cortes de fondo, la pregunta grande y las dos
   opciones compactas y centradas, cada una con su «Pincha aquí».
   Los dos botones son los mismos de siempre (llevan a Compra
   fácil y a Compra con beneficios); solo cambia cómo se ven.
   La pregunta y las fotos las agrega assets/estilo-totem.js.
   ========================================================= */
.easy-landing{position:relative;isolation:isolate;overflow:hidden;justify-content:center;gap:14px;padding:22px 18px 28px;background:#0a0808}
.tt-fotos{position:absolute;inset:0;z-index:-1}
.tt-fotos img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;animation:tt-foto 20s infinite}
.tt-fotos img:nth-child(2){animation-delay:5s}
.tt-fotos img:nth-child(3){animation-delay:10s}
.tt-fotos img:nth-child(4){animation-delay:15s}
@keyframes tt-foto{0%{opacity:0;transform:scale(1.04)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1.14)}100%{opacity:0}}
.tt-fotos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,8,.94) 0%,rgba(10,8,8,.55) 26%,rgba(10,8,8,.8) 48%,rgba(10,8,8,.98) 78%)}
.easy-landing .easy-logo{width:min(70vw,280px);max-height:none;margin:0 auto}
.tt-pregunta{margin:6px 0 0;font-family:var(--tt-titulo);font-weight:400;font-size:clamp(40px,12.500vw,60px);line-height:1;text-transform:uppercase;letter-spacing:.01em;text-align:center;text-wrap:balance;color:#faf5f1;text-shadow:0 4px 20px rgba(0,0,0,.8)}
.tt-pregunta span{color:var(--red)}
.tt-guia{margin:0 0 4px;text-align:center;font-size:17px;font-weight:600;color:#e9dfda}

.easy-landing .easy-mode{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center;justify-content:normal;width:min(88%,340px);min-height:0!important;align-self:center;padding:14px!important;border-radius:24px;text-align:left}
.easy-landing .easy-mode-simple{background:linear-gradient(135deg,var(--red),var(--red-d));box-shadow:0 14px 40px rgba(227,18,29,.45)}
.easy-landing .easy-mode-simple::after{content:"";position:absolute;inset:0;border-radius:inherit;border:3px solid var(--tt-rojo-claro);animation:tt-anillo 1.800s ease-out infinite;pointer-events:none}
@keyframes tt-anillo{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.06,1.22)}}
.easy-landing .easy-mode-icon{grid-column:1;grid-row:1/3;width:52px;height:52px;padding:10px;border-radius:14px;background:rgba(0,0,0,.28)}
.easy-landing .easy-mode-benefits .easy-mode-icon{background:var(--red);color:#fff}
.easy-landing .easy-mode>b{grid-column:2;grid-row:1;font-size:clamp(21px,6vw,26px);line-height:1.05;letter-spacing:.01em;text-align:left}
.easy-landing .easy-mode>b br{display:none}
.easy-landing .easy-mode>small{grid-column:2;grid-row:2;font-size:14px;font-weight:600;opacity:.92}
.easy-landing .easy-mode-action{grid-column:1/-1;grid-row:3;min-width:0;width:100%;min-height:42px;margin-top:10px;padding:8px 14px;gap:6px;font-size:15px;font-weight:800}
.easy-landing .easy-mode-action i{display:none}
.easy-landing .easy-mode-action::before{content:"👆";display:inline-block;animation:tt-toque 1.200s ease-in-out infinite}
@keyframes tt-toque{0%,100%{transform:translateY(0)}50%{transform:translateY(5px) scale(.92)}}
.easy-landing .easy-benefits{grid-column:1/-1;grid-row:4;display:flex;justify-content:center;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid #d8d2ce}
.easy-landing .easy-benefits i{display:flex;align-items:center;gap:4px;border:0;font-size:15px}
.easy-landing .easy-benefits em{margin:0;font-size:12px;font-weight:700}
@media(prefers-reduced-motion:reduce){
  .tt-fotos img{animation:none}.tt-fotos img:first-child{opacity:1}
  .easy-landing .easy-mode-simple::after,.easy-landing .easy-mode-action::before{animation:none}
}

.tt-tema b{font-family:var(--tt-texto);font-size:15px;font-weight:800;line-height:1}

/* ── Fondo negro: guía de asado (el formulario conserva su tarjeta clara) ── */
body.benefits-flow:not(.tt-claro) .asado-heading h1{color:var(--ink)}
body.benefits-flow:not(.tt-claro) .asado-heading p,
body.benefits-flow:not(.tt-claro) .asado-progress li{color:var(--ink2)}
body.benefits-flow:not(.tt-claro) .asado-eyebrow{color:var(--tt-rojo-claro)}

/* ── Fondo negro: Mi cuenta (la tarjeta de ingreso conserva su fondo claro) y nota de despacho ── */
body.benefits-flow:not(.tt-claro) .account-page>h1{color:var(--ink)}
body.benefits-flow:not(.tt-claro) .account-page>p{color:var(--ink2)}
body.benefits-flow:not(.tt-claro) .account-card .text-button{color:#c20e18}
body.benefits-flow:not(.tt-claro) .delivery-note b{color:var(--ink)}

/* En pantallas anchas, los costados de la portada también son negros. */
body:has(.easy-landing){background:#0a0808}