/* ============================================================
   BRAVA — extras: ficha del corte, armá tu asado, cupón,
   pedido mínimo, WhatsApp flotante, sin stock.
   Va DESPUÉS de styles.css.
   ============================================================ */
.chip[aria-pressed="true"] { background: var(--carbon); color: var(--crema); border-color: var(--carbon); }

/* tarjeta: foto y nombre son botones que abren la ficha */
.prod__ver { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.prod__nombre { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; text-decoration: underline transparent 1px; text-underline-offset: .22em; transition: text-decoration-color var(--dur-media) var(--ease-suave); }
.prod__nombre:hover { text-decoration-color: currentColor; }
.prod.sin-stock .prod__foto { filter: grayscale(.9); opacity: .55; }
.agotado { font: 500 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acento-texto); border: 1px solid currentColor; border-radius: 999px; padding: .55rem .8rem; white-space: nowrap; }
.repetir { margin-top: 1.4rem; font: 500 .9rem/1 var(--f-texto); color: var(--texto); background: transparent; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: .75rem 1.2rem; cursor: pointer; transition: background var(--dur-media) var(--ease-suave), color var(--dur-media) var(--ease-suave); }
.repetir:hover { background: var(--carbon); color: var(--crema); border-color: var(--carbon); }
.repetir[hidden] { display: none; }

/* ---------- ARMÁ TU ASADO ---------- */
.asado { background: var(--fondo-alt); padding: var(--s-seccion) var(--s-borde); }
.asado__in { max-width: var(--ancho-amplio); margin-inline: auto; display: grid; gap: 3rem; align-items: start; }
.asado__cab h2 { font-size: var(--t-h1); font-weight: 500; line-height: 1.02; margin: 1rem 0 1.4rem; max-width: 15ch; }
.asado__cab p:last-child { color: var(--texto-suave); max-width: 46ch; }
.ctrl { display: grid; gap: .8rem; margin-top: 2rem; justify-items: start; }
.hambre, .cortes { display: flex; flex-wrap: wrap; gap: .5rem; }
.ticket {
  background: var(--fondo); border: 1px solid var(--linea-fuerte);
  border-radius: 5rem 5rem .6rem .6rem; padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.4rem, 3vw, 2.4rem) 1.8rem;
}
.ticket__lista { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px dashed var(--linea-fuerte); }
.ticket__lista li { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: .8rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px dashed var(--linea-fuerte); }
.ticket__lista li span:first-child { font: 500 .85rem var(--f-mono); color: var(--acento-texto); }
.ticket__lista li span:nth-child(2) { font: 500 1.1rem/1.2 var(--f-display); }
.ticket__lista li b { font: 500 .95rem var(--f-mono); }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; padding: 1.2rem 0 1.4rem; }
.ticket__total span { font: 400 .75rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.ticket__total b { font: 500 2rem/1 var(--f-mono); letter-spacing: -.04em; }
.ticket__nota { margin: 1rem 0 0; font-size: .82rem; color: var(--texto-suave); }
@media (min-width: 60rem) {
  .asado__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 7vw, 7rem); }
  .ticket { position: sticky; top: 7rem; margin-top: 2rem; }
}

/* ---------- FICHA DEL CORTE ---------- */
.ficha { padding: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); color: var(--texto); width: min(58rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; margin: auto; }
.ficha[open] { animation: ficha-in var(--dur-lenta) var(--ease-suave) both; }
.ficha::backdrop { background: oklch(27% .028 48 / .58); animation: velo-in var(--dur-media) var(--ease-suave) both; }
@keyframes ficha-in { from { opacity: 0; transform: translateY(2rem); } }
@keyframes velo-in { from { opacity: 0; } }
#fichaCuerpo { position: relative; display: grid; }
.ficha__x { position: absolute; top: .9rem; right: .9rem; z-index: 3; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: var(--fondo); color: var(--texto); cursor: pointer; transition: background var(--dur-media) var(--ease-suave), color var(--dur-media) var(--ease-suave); }
.ficha__x:hover { background: var(--carbon); color: var(--crema); }
.ficha__foto { padding: .8rem; }
.ficha__foto .prod__foto { aspect-ratio: 4 / 3; border-radius: 5rem 5rem .5rem .5rem; }
.ficha__txt { padding: 1.4rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.ficha__txt h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 500; line-height: 1.02; }
.ficha__txt p { margin: 0; color: var(--texto-suave); }
.ficha__datos { width: 100%; margin: .4rem 0 0; border-top: 1px solid var(--linea); }
.ficha__datos div { padding: .8rem 0; border-bottom: 1px solid var(--linea); display: grid; gap: .25rem; }
.ficha__datos dd { margin: 0; font-size: .98rem; line-height: 1.45; }
.ficha__acc { margin-top: .6rem; }
@media (min-width: 46rem) {
  #fichaCuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ficha__foto { padding: 1rem 0 1rem 1rem; }
  .ficha__foto .prod__foto { aspect-ratio: auto; height: 100%; min-height: 24rem; border-radius: 9rem 9rem .5rem .5rem; }
  .ficha__txt { padding: 3.2rem 2.4rem 2.4rem; }
}

/* ---------- Carrito: mínimo, cupón, totales ---------- */
.minimo:empty { display: none; }
.minimo { margin-bottom: 1rem; }
.minimo__barra { height: 4px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.minimo__barra i { display: block; height: 100%; background: var(--salmon); transition: width var(--dur-lenta) var(--ease-suave); }
.minimo p { margin: .55rem 0 0; font-size: .85rem; color: var(--texto-suave); }
.minimo b { color: var(--texto); font-family: var(--f-mono); font-weight: 500; }
.cupon { display: flex; gap: .5rem; }
.cupon input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; text-transform: uppercase; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: .65rem 1rem; transition: border-color var(--dur-media) var(--ease-suave); }
.cupon input:focus { outline: none; border-color: var(--carbon); }
.cupon input::placeholder { text-transform: none; }
.cupon input[hidden], .cupon__btn[hidden] { display: none; }
.cupon__btn { font: 500 .88rem var(--f-texto); padding: .65rem 1.1rem; border-radius: 999px; background: transparent; color: var(--texto); border: 1px solid var(--carbon); cursor: pointer; transition: background var(--dur-media) var(--ease-suave), color var(--dur-media) var(--ease-suave); }
.cupon__btn:hover { background: var(--carbon); color: var(--crema); }
.cupon__msg { margin: .45rem 0 .9rem; min-height: 1.2em; font-size: .82rem; color: var(--acento-texto); }
.cupon__msg.ok { color: var(--verde); }
.totales .total { padding-top: .7rem; margin-top: .3rem; border-top: 1px solid var(--linea-fuerte); }
.totales .total dt { font-size: 1rem; color: var(--texto); font-weight: 500; }
.totales .total dd { font-size: 1.6rem; letter-spacing: -.04em; }
.totales dd em { font: normal 400 .8rem var(--f-texto); color: var(--texto-suave); letter-spacing: 0; }

/* ---------- WhatsApp flotante ---------- */
.fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 55; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: var(--crema); text-decoration: none; transition: transform var(--dur-media) var(--ease-suave), background var(--dur-media) var(--ease-suave), bottom var(--dur-media) var(--ease-suave); }
.fab:hover { transform: scale(1.08); background: oklch(38% .08 148); }
@media (max-width: 63.99rem) { .con-barra .fab { bottom: 5.4rem; } }
.pie__links { display: flex; justify-content: space-between; gap: 1rem; margin-top: .3rem; }
.pie__links .link-vaciar[hidden] { display: none; }
.cupon__msg { margin-bottom: .6rem; }

/* ============================================================
   TARJETA = ETIQUETA DE ENVASE
   franja de encabezado · datos en grilla · precio · línea de
   corte con muescas · código de barras
   ============================================================ */
.prod {
  padding: 0; gap: 0; align-items: stretch; overflow: hidden;
  grid-template-columns: 7.4rem 1fr; border: 1.5px solid var(--carbon); border-radius: .55rem;
  background: var(--fondo);
}
.prod:hover { border-color: var(--carbon); }
.prod.en-pedido { box-shadow: inset 0 0 0 1.5px var(--carbon); }
.prod__top {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem .85rem; background: var(--carbon); color: var(--crema);
  font: 500 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.prod__top span:last-child { color: var(--salmon); }
.prod__ver { margin: .8rem 0 .8rem .8rem; width: auto; align-self: start; }
.prod__cuerpo { padding: .8rem .85rem .8rem .8rem; }
.prod__datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: .5rem 0 0; border-top: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte); }
.prod__datos div { padding: .45rem .7rem .45rem 0; margin-right: .7rem; border-right: 1px solid var(--linea); }
.prod__datos div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.prod__datos dt { font: 400 .56rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: .25rem; }
.prod__datos dd { margin: 0; font: 500 .74rem/1.1 var(--f-mono); letter-spacing: .02em; white-space: nowrap; }
.prod__pie { padding-top: .75rem; }
.prod__precio b { font-size: 1.45rem; letter-spacing: -.05em; }
.prod__precio span { font-size: .62rem; letter-spacing: .12em; }

/* línea de corte con muescas + código de barras */
.prod__barras {
  grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: .9rem;
  padding: .85rem .85rem .75rem; border-top: 1.5px dashed var(--linea-fuerte);
}
.prod__barras::before, .prod__barras::after {
  content: ""; position: absolute; top: -.62rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--fondo-alt); border: 1.5px solid var(--carbon); box-sizing: border-box;
}
.prod__barras::before { left: -.55rem; clip-path: inset(0 0 0 50%); }
.prod__barras::after { right: -.55rem; clip-path: inset(0 50% 0 0); }
.prod__barras i {
  flex: none; width: 5.2rem; height: 1.55rem;
  background:
    repeating-linear-gradient(90deg, var(--carbon) 0 2px, transparent 2px 4px, var(--carbon) 4px 5px, transparent 5px 8px, var(--carbon) 8px 11px, transparent 11px 13px);
  opacity: .85;
}
.prod__barras span { font: 400 .58rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }

.prod.sin-stock .prod__top { background: var(--texto-suave); }

@media (min-width: 40rem) {
  .prod { grid-template-columns: 1fr; padding: 0; }
  .prod__ver { margin: .85rem .85rem 0; }
  .prod__cuerpo { padding: 1rem 1.1rem 1.1rem; }
  .prod__tag { align-self: flex-start; }
}

/* ============================================================
   SELLO DEL HERO = ROSETA (festón + disco + cintas)
   ============================================================ */
.hero .hero__sello {
  width: clamp(12rem, 16.5vw, 15rem); aspect-ratio: 200 / 250; border-radius: 0; background: none; outline: 0;
  display: block; transform: none; rotate: -4deg; text-align: center;
  left: clamp(-6rem, -6.5vw, -3.6rem); bottom: -2.2rem;
}
.hero__sello svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rosa__fest { fill: var(--carbon); }
.rosa__aro { fill: var(--crema); }
.rosa__disco { fill: var(--salmon); }
.rosa__filete { fill: none; stroke: var(--crema); stroke-width: 1.4; opacity: .9; }
.rosa__cinta .c1 { fill: var(--salmon); }
.rosa__cinta .c2 { fill: oklch(65% .105 20); }
.hero__sello-txt { position: absolute; left: 0; right: 0; top: 40%; translate: 0 -50%; z-index: 1; display: grid; justify-items: center; gap: .22rem; }
.hero__sello-txt .etiqueta { color: var(--carbon); font-size: .54rem; letter-spacing: .16em; font-weight: 500; }
.hero__sello-txt strong { font: 700 clamp(1.45rem, 2.1vw, 1.95rem)/1 var(--f-display); letter-spacing: -.02em; color: var(--carbon); }
.orn { position: relative; display: block; width: 3.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--carbon) 25%, var(--carbon) 75%, transparent); margin: .08rem 0; opacity: .7; }
.orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: .36rem; height: .36rem; background: var(--carbon); translate: -50% -50%; rotate: 45deg; }
@media (max-width: 59.99rem) {
  .hero .hero__sello { width: 11rem; left: -.9rem; bottom: -2rem; }
  .hero__sello-txt strong { font-size: 1.3rem; }
  .hero__sello-txt .etiqueta { font-size: .54rem; }
}

/* ---------- Tabla de cortes: fondo de «Cómo pedir» ---------- */
.como { position: relative; overflow: hidden; isolation: isolate; }
.como__in { position: relative; z-index: 1; }
.como__tabla { position: relative; z-index: 0; display: block; width: 125%; max-width: none; margin: 2rem 0 -3.5rem -22%; rotate: -5deg; pointer-events: none; user-select: none; }
@media (min-width: 60rem) {
  .como__tabla { position: absolute; left: -7vw; bottom: -9vw; width: min(45vw, 43rem); margin: 0; rotate: -7deg; }
  .como__cab { position: static; }
}

/* ---------- Tabla de cortes también en el pie (espejada) ---------- */
.pie { position: relative; overflow: hidden; isolation: isolate; }
.pie > .pie__logo, .pie > .pie__cuerpo { position: relative; z-index: 1; }
.pie__tabla { position: relative; z-index: 0; display: block; width: 115%; max-width: none; margin: 1rem 0 -6rem -8%; scale: -1 1; rotate: 5deg; pointer-events: none; user-select: none; }
@media (min-width: 52rem) {
  .pie__tabla { position: absolute; right: -10vw; bottom: -11vw; left: auto; width: min(41vw, 39rem); margin: 0; scale: -1 1; rotate: 6deg; }
  .pie__cuerpo p { max-width: 40ch; }
}

/* ---------- Zonas de toque cómodas en celular (mín. 44 px) ---------- */
.agregar { min-height: 2.75rem; padding-inline: 1.2rem; }
.paso button { flex: none; width: 2.75rem; height: 2.75rem; }
.linea-p__der .paso button { width: 2.6rem; height: 2.6rem; }
.prod__nombre { position: relative; }
.prod__nombre::after { content: ""; position: absolute; inset: -.55rem -.4rem; } /* área de toque ampliada, sin mover el layout */
.carrito__cerrar, .ficha__x { width: 2.75rem; height: 2.75rem; }
.link-vaciar { padding: .8rem 0; }
.cupon__btn, .repetir { min-height: 2.75rem; }
.chip { min-height: 2.75rem; }