/* =========================================================
   Landing de pedido — estilos propios
   Se apoya en ../css/styles.css para tokens, tipografía y botones.
   ========================================================= */

.nav {
  position: static;
  box-shadow: none;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

/* "¿Cuál es tu antojo de hoy?" se acorta en tablet/mobile para que el
   encabezado no ocupe tanto en pantallas chicas — mismo corte que el
   carrusel de sabores (1023px). */
.heading-short {
  display: none;
}

@media (max-width: 1023px) {
  .heading-full {
    display: none;
  }

  .heading-short {
    display: inline;
  }
}

/* ---------- Hero ---------- */

.pedido-hero {
  padding-block: 2rem 1.25rem;
  text-align: center;
}

/* Esta página encadena muchos pasos en una sola columna — comprimimos el
   padding vertical de cada sección (por defecto 2.75rem via ../css/styles.css)
   para que el scroll se sienta continuo en vez de espaciado. */
.section {
  padding-block: 1.75rem;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
}

.pedido-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--color-ink);
  text-wrap: balance;
}

.pedido-hero-sub {
  margin-top: var(--space-4);
  max-width: 56ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  text-wrap: balance;
}

.text-gold {
  color: var(--color-gold-deep);
}

.text-pink {
  color: var(--color-pink-deep);
}

.text-turquoise {
  color: var(--color-turquoise-deep);
}

/* ---------- Tarjetas de sabor (colores tomados del catálogo, realzados) ---------- */

.flavor-card {
  border-top: 4px solid var(--flavor-color);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--flavor-color) 24%, white),
    color-mix(in srgb, var(--flavor-color) 6%, white)
  );
}

.flavor-card .product-desc {
  color: color-mix(in srgb, var(--flavor-color) 55%, var(--color-ink));
}

/* En desktop (>=1024px) esta grilla ya no es carrusel, es 3 columnas fijas
   vía .card-grid — con 7 sabores la última fila queda con 1 suelto y
   pegado a la izquierda. Cambiamos a flex+wrap para que cualquier resto
   (uno o dos) quede centrado en su fila, sin tocar el resto del sitio. */
@media (min-width: 1024px) {
  #flavorsShowcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }

  #flavorsShowcase .product-card {
    flex: 0 0 calc((100% - 2 * var(--space-4)) / 3);
  }
}

/* Descriptions vary in length, so without a shared height each carousel
   card ends up a different size — pin it to the tallest. */
#flavorsShowcase .product-body {
  min-height: 132px;
}

/* ---------- Carrusel de sabores: extendido a tablet (esta página únicamente) ----------
   ../css/styles.css ya define .carousel-mobile / .carousel-arrow, pero solo hasta
   639px (mobile). Aquí ampliamos el mismo mecanismo hasta 1023px (tablet incluida)
   sin tocar el comportamiento del resto del sitio, porque este archivo solo se
   carga en esta landing. */
@media (min-width: 640px) and (max-width: 1023px) {
  .carousel-mobile {
    display: flex;
    grid-template-columns: none;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .carousel-mobile::-webkit-scrollbar {
    display: none;
  }

  /* Spacer width must satisfy: spacer + gap + half-card = half-track, so it
     depends on the card's own flex-basis below (56% here, vs. 76% on the
     shared mobile rule) — recalculated for this card width. */
  .carousel-mobile::before,
  .carousel-mobile::after {
    content: "";
    flex: 0 0 calc(22% - var(--space-4));
  }

  .carousel-mobile > * {
    flex: 0 0 56%;
    min-width: 0;
    scroll-snap-align: center;
  }

  .carousel-mobile .product-desc {
    flex-grow: 0;
  }

  .carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 8px 20px -8px var(--color-shadow);
    z-index: 3;
    touch-action: manipulation;
  }

  .carousel-arrow--prev {
    left: -6px;
  }

  .carousel-arrow--next {
    right: -6px;
  }
}

/* ---------- Presentaciones seleccionables ---------- */

.presentation-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  clear: both;
}

@media (min-width: 640px) {
  .presentation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .presentation-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.presentation-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  background: var(--color-surface);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 10px 30px -14px var(--color-shadow);
  transition: transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  font-family: inherit;
  padding: var(--space-4) var(--space-5);
}

.presentation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -14px var(--color-shadow);
}

.presentation-card.is-selected {
  border-color: var(--color-gold-deep);
  box-shadow: 0 16px 34px -14px var(--color-shadow);
}

/* Imagen de referencia única — en mobile va apilada arriba del párrafo;
   desde tablet flota a la derecha y el texto del párrafo la rodea. */
.builder-hero-image {
  display: none;
}

@media (min-width: 1024px) {
  .builder-hero-image {
    display: block;
    float: right;
    width: 42%;
    max-width: 300px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0 0 var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px -18px var(--color-shadow);
  }
}

.presentation-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.presentation-name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.presentation-card-flavors {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink-dim);
  text-transform: none;
  letter-spacing: normal;
}

.presentation-card.is-selected .presentation-name {
  color: var(--color-gold-deep);
}

.presentation-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-gold-deep);
  white-space: nowrap;
  flex-shrink: 0;
}

.presentation-price sup {
  font-size: 0.6875rem;
  color: var(--color-ink-dim);
}

/* ---------- Constructor: bloques ---------- */

.builder-block {
  margin-top: var(--space-6);
}

.builder-block-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.builder-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-ink-dim);
}

.builder-error {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-pink-deep);
  font-weight: 600;
}

.flavor-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.flavor-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.flavor-pill:has(input:checked) {
  border-color: var(--color-gold-deep);
  background: rgba(185, 128, 63, 0.12);
  color: var(--color-gold-deep);
  font-weight: 600;
}

.flavor-pill:has(input:disabled:not(:checked)) {
  opacity: 0.4;
  cursor: not-allowed;
}

.flavor-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* ---------- Toggle / checkbox rows ---------- */

.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.toggle-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-gold-deep);
}

.personalization-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px -16px var(--color-shadow);
}

.personalization-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.chip-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1.5px solid var(--color-line);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.chip-checkbox:has(input:checked) {
  border-color: var(--color-turquoise-deep);
  background: rgba(95, 169, 165, 0.14);
  color: var(--color-turquoise-deep);
  font-weight: 600;
}

.chip-checkbox input {
  accent-color: var(--color-turquoise-deep);
}

#addToCartBtn {
  margin-top: var(--space-5);
}

/* ---------- Carrito ---------- */

.cart-empty {
  margin-top: var(--space-5);
  color: var(--color-ink-dim);
  font-size: 0.9375rem;
}

.cart-list {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.cart-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: 0 8px 24px -16px var(--color-shadow);
}

.cart-item-info {
  flex: 1 1 220px;
  min-width: 0;
}

.cart-item-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
}

.cart-item-detail {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-ink-dim);
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.qty-btn:hover {
  background: var(--color-gold-light);
  color: #fff;
}

.qty-value {
  min-width: 1.25rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
}

.cart-item-price {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-gold-deep);
  white-space: nowrap;
}

.cart-item-price sup {
  font-size: 0.6875rem;
  color: var(--color-ink-dim);
}

.cart-item-remove {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-ink-dim);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.cart-item-remove:hover {
  background: rgba(217, 122, 145, 0.15);
  color: var(--color-pink-deep);
}

.cart-total-row {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.cart-total-row sup {
  font-size: 0.6875rem;
  opacity: 0.75;
}

#addMoreBtn {
  margin-top: var(--space-5);
}

/* ---------- Formulario de datos ---------- */

.form-grid {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
}

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* En "Método de pago" el field-label va pegado directo al H2 (sin un
   section-lede de por medio, como en las demás secciones) — le damos el
   mismo respiro que tendría un párrafo ahí. */
#pago .field-label {
  margin-top: var(--space-5);
}

.required-mark {
  color: var(--color-pink-deep);
}

.field-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.field-input:focus {
  outline: none;
  border-color: var(--color-gold-deep);
}

textarea.field-input {
  resize: vertical;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.radio-pill:has(input:checked) {
  border-color: var(--color-gold-deep);
  color: var(--color-gold-deep);
  font-weight: 600;
}

.radio-pill input {
  accent-color: var(--color-gold-deep);
}

.delivery-fields {
  display: grid;
  gap: var(--space-4);
}

.pickup-note {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-ink-dim);
}

/* ---------- Envío final ---------- */

.pedido-submit {
  text-align: center;
  max-width: 560px;
}

.pedido-note {
  color: var(--color-ink-dim);
  font-size: 0.9375rem;
  margin-bottom: var(--space-5);
}

#submitOrderBtn {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

#submitOrderBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

.pedido-thanks {
  margin-top: var(--space-5);
  font-family: var(--font-brand);
  font-size: 1.125rem;
  color: var(--color-gold-deep);
}