/* ============================================================
   tarjetas.css · LAS TARJETAS DE PRODUCTO
   ------------------------------------------------------------
   Se carga al final de todo.

   Qué estaba mal antes:
     · Un hueco muerto enorme entre la descripción y el precio,
       porque el grid iguala alturas y el contenido no llenaba.
     · La descripción cortada con "…" a mitad de frase.
     · El precio y "Ver detalle" del mismo peso visual: nada
       llamaba a tocar la tarjeta.
     · Todo plano: mismo borde, mismo radio, cero jerarquía.

   Cómo queda ahora:
     · La foto respira y hace zoom al tocarla.
     · El nombre en Anton, grande, sin competencia.
     · La descripción en dos líneas parejas para todas.
     · El precio protagonista, y al lado un botón amarillo que
       dice qué va a pasar. Eso es lo que da ganas de tocar.
   ============================================================ */

/* ============================================================
   1 · LA TARJETA
   ============================================================ */

.product-card {
  display: flex !important;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, #161616 0%, #0e0e0e 62%) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 20px !important;
  transition:
    transform .32s cubic-bezier(.2, .8, .3, 1),
    border-color .32s ease,
    box-shadow .32s ease;
}

/* Una línea amarilla que se enciende arriba al pasar por encima.
   Es el detalle que hace que la tarjeta se sienta viva. */
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg,
    transparent, var(--y, #F5C518) 22%, var(--y, #F5C518) 78%, transparent);
  transform: scaleX(0);
  transition: transform .38s cubic-bezier(.2, .8, .3, 1);
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(245, 197, 24, .3) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(245, 197, 24, .08);
}

.product-card:hover::before,
.product-card:focus-within::before { transform: scaleX(1); }

/* Al soltar el dedo en el celular, respuesta inmediata. */
.product-card:active { transform: scale(.985); transition-duration: .12s; }


/* ============================================================
   2 · LA FOTO
   ============================================================ */

.card-img-wrap {
  position: relative;
  overflow: hidden !important;
  border-radius: 20px 20px 0 0 !important;
}

.card-img {
  transition: transform .55s cubic-bezier(.2, .8, .3, 1) !important;
}

.product-card:hover .card-img { transform: scale(1.07) !important; }

/* Una sombra suave abajo de la foto para que el nombre despegue
   del fondo en vez de quedar pegado a la imagen. */
.card-img-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(14, 14, 14, .85));
}


/* ============================================================
   3 · EL CUERPO
   ------------------------------------------------------------
   El footer se va abajo del todo con margin-top:auto, y la
   descripción se fija en dos líneas: así todas las tarjetas del
   grid quedan parejas sin dejar el hueco muerto de antes.
   ============================================================ */

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 9px;
  padding: 16px 17px 15px !important;
}

.card-name {
  font-family: var(--f-display, 'Anton', Impact, sans-serif) !important;
  font-size: clamp(23px, 5.6vw, 30px) !important;
  line-height: .98 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 !important;
}

.card-desc {
  /* Dos líneas para todas: parejo y sin cortar a mitad de palabra. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #9a9a9a !important;
}

/* El chip de papas: más chico y discreto, es un dato no un título. */
.includes-fries {
  align-self: flex-start;
  margin: 0 !important;
  padding: 5px 11px !important;
  background: rgba(245, 197, 24, .08) !important;
  border: 1px solid rgba(245, 197, 24, .22) !important;
  border-radius: 999px !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase;
  color: var(--y, #F5C518) !important;
}


/* ============================================================
   4 · EL PIE: PRECIO Y ACCIÓN
   ------------------------------------------------------------
   Acá está el cambio que más importa. Antes el precio y "ver
   detalle" pesaban igual y nada invitaba a tocar. Ahora el
   precio manda, y al lado hay un botón amarillo que dice qué va
   a pasar si lo aprietas.
   ============================================================ */

.card-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
}

.card-price {
  font-family: var(--f-display, 'Anton', Impact, sans-serif) !important;
  font-size: clamp(25px, 6vw, 32px) !important;
  line-height: 1 !important;
  letter-spacing: .3px;
  color: var(--y, #F5C518) !important;
  font-variant-numeric: tabular-nums;
}

/* De enlace tímido a botón que invita. */
.card-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 40px;
  padding: 10px 16px !important;
  background: var(--y, #F5C518) !important;
  border-radius: 999px;
  color: #080808 !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase;
  transition: background .22s ease, transform .22s ease, gap .22s ease;
}

.card-cta svg {
  width: 15px !important;
  height: 15px !important;
  transition: transform .22s ease;
}

.product-card:hover .card-cta {
  background: #FFD84D !important;
  gap: 9px;
}
.product-card:hover .card-cta svg { transform: translateX(2px); }


/* ============================================================
   5 · LA DESTACADA
   ------------------------------------------------------------
   Ocupa el mejor espacio de la carta, así que se nota que es
   distinta: foto más ancha, nombre más grande y descripción
   completa en vez de recortada.
   ============================================================ */

.product-card.featured {
  border-color: rgba(245, 197, 24, .22) !important;
}

.product-card.featured .card-name {
  font-size: clamp(30px, 8vw, 46px) !important;
}

.product-card.featured .card-desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 14.5px !important;
}

.product-card.featured .card-price {
  font-size: clamp(30px, 8vw, 40px) !important;
}

.product-card.featured .card-cta {
  min-height: 46px;
  padding: 12px 22px !important;
  font-size: 14px !important;
}


/* ============================================================
   6 · LAS ETIQUETAS
   ============================================================ */

.badge {
  top: 13px !important;
  left: 13px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}


/* ============================================================
   7 · PAPAS Y BEBIDAS, EL MISMO LENGUAJE
   ============================================================ */

.fries-card,
.drink-card {
  background: linear-gradient(170deg, #161616 0%, #0e0e0e 62%) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 18px !important;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1),
              border-color .3s ease, box-shadow .3s ease !important;
}

.fries-card:hover,
.drink-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(245, 197, 24, .3) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

.fries-img,
.drink-img { transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
.fries-card:hover .fries-img,
.drink-card:hover .drink-img { transform: scale(1.06); }

.fries-name {
  font-family: var(--f-display, 'Anton', Impact, sans-serif) !important;
  letter-spacing: .4px;
}

.fries-price {
  font-family: var(--f-display, 'Anton', Impact, sans-serif) !important;
  font-size: clamp(21px, 5.5vw, 26px) !important;
  color: var(--y, #F5C518) !important;
  font-variant-numeric: tabular-nums;
}

/* El botón de agregar rápido: el mismo amarillo del resto, para
   que el cliente aprenda que amarillo = se toca. */
.add-direct-btn {
  min-height: 44px !important;
  background: var(--y, #F5C518) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #080808 !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, transform .14s ease;
}
.add-direct-btn:hover { background: #FFD84D !important; }
.add-direct-btn:active { transform: scale(.96); }


@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card::before, .card-img,
  .fries-card, .drink-card, .card-cta { transition: none !important; }
}


/* ============================================================
   8 · SEGUNDA PASADA — EL TRABAJO FINO
   ------------------------------------------------------------
   Lo que faltaba después del primer rediseño:

   a) El hueco seguía. La causa real no era el contenido sino la
      grilla: por defecto estira todas las tarjetas al alto de la
      más alta de su fila. Se corrige con align-items:start, y
      además ahora el espacio se llena con las fichas de
      ingredientes en vez de quedar en blanco.

   b) El titular del hero se juntaba entre líneas en escritorio:
      Anton con line-height .88 hace que las mayúsculas se toquen.

   c) "Quitar ingredientes" se veía como un formulario. Ahora son
      fichas que se apagan al tocarlas, que es lo que en realidad
      está pasando.
   ============================================================ */

/* --- a) Cada tarjeta a su altura, sin estirar --- */
.product-grid {
  align-items: start !important;
}

/* --- Las fichas de ingredientes --- */
.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.chip {
  padding: 5px 10px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #a5a5a5;
  white-space: nowrap;
  transition: border-color .3s ease, color .3s ease;
}

/* La de papas es la que más vende: va en amarillo. */
.chip-papas {
  background: rgba(245, 197, 24, .09);
  border-color: rgba(245, 197, 24, .28);
  color: var(--y, #F5C518);
}

.product-card:hover .chip { border-color: rgba(255, 255, 255, .16); color: #c4c4c4; }
.product-card:hover .chip-papas { border-color: rgba(245, 197, 24, .5); color: var(--y, #F5C518); }

/* El chip viejo ya no se usa: lo reemplazaron las fichas. */
.includes-fries { display: none !important; }

/* Con las fichas adentro, el cuerpo respira distinto. */
.card-body { gap: 10px !important; }
.card-desc { margin-bottom: 0 !important; }


/* --- b) El titular del hero, sin letras pegadas --- */
@media (min-width: 1000px) {
  .manifiesto__titular {
    line-height: 1.02 !important;
  }
  .manifiesto__frase {
    line-height: 1.1 !important;
    margin-top: 2px;
  }
}

/* En celular también, que Anton aprieta igual. */
.manifiesto__titular { line-height: 1 !important; }


/* ============================================================
   9 · "QUITAR INGREDIENTES", EN FICHAS
   ------------------------------------------------------------
   Era una lista de casillas con "Sin costo" repetido seis veces,
   con aspecto de formulario de banco. Lo que la persona hace ahí
   es sacar cosas de su hamburguesa, así que ahora son fichas que
   se apagan y se tachan al tocarlas: se ve lo que va a llegar.
   ============================================================ */

#removables-section {
  padding: 15px !important;
  background: rgba(255, 255, 255, .022) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
}

#removables-section .extras-title {
  margin-bottom: 4px !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase;
  color: #8A8A8A !important;
}

/* El título decía "(sin costo)" y cada fila lo repetía. Una vez
   arriba basta: abajo se gana espacio y se lee más rápido. */
#removables-section .extras-title::after {
  content: ' · toca lo que no quieras';
  font-weight: 700;
  letter-spacing: 1px;
  color: #5f5f5f;
}

#removables-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

/* Cada ingrediente pasa a ser una ficha encendida. */
#removables-list label,
#removables-list .removable-row,
#removables-list > div {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: auto !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  background: rgba(245, 197, 24, .07) !important;
  border: 1px solid rgba(245, 197, 24, .26) !important;
  border-bottom: 1px solid rgba(245, 197, 24, .26) !important;
  border-radius: 999px !important;
  font-family: var(--f-body, 'Barlow', sans-serif);
  font-size: 13px !important;
  font-weight: 600;
  color: #e8e8e8 !important;
  cursor: pointer;
  transition: all .22s ease;
}

#removables-list input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  accent-color: var(--y, #F5C518);
  cursor: pointer;
}

/* Marcado = ese ingrediente NO va. La ficha se apaga y se tacha. */
#removables-list label:has(input:checked),
#removables-list > div:has(input:checked) {
  background: rgba(255, 255, 255, .03) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #6a6a6a !important;
  text-decoration: line-through;
  text-decoration-color: rgba(230, 57, 70, .7);
  text-decoration-thickness: 2px;
}

/* El "Sin costo" de cada fila sobra: ya lo dice el título. */
#removables-list .removable-price,
#removables-list span:last-child:not(:first-child) {
  display: none !important;
}


/* ============================================================
   10 · "PERSONALIZA TU BURGER", MÁS ORDENADO
   ============================================================ */

.extras-section {
  padding: 15px !important;
  background: rgba(255, 255, 255, .022) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
}

.extras-section .extras-title {
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase;
  color: #8A8A8A !important;
  margin-bottom: 13px !important;
}

.extra-row {
  align-items: center;
  padding: 10px 12px !important;
  border-radius: 12px;
  border-bottom: none !important;
  transition: background .2s ease;
}
.extra-row + .extra-row { margin-top: 4px; }
.extra-row:hover { background: rgba(255, 255, 255, .03); }

.extra-name  { font-size: 14px !important; color: #e8e8e8 !important; }
.extra-price {
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--y, #F5C518) !important;
}

/* La etiqueta de destacado no debe chocar con la de arriba. */
.extra-destacado { margin-top: 12px !important; padding: 12px !important; }
.extra-destacado + .extra-destacado { margin-top: 14px !important; }