/*
 * Home — "Esta será tu caja del jueves" section. Tokens from Figma node 1:255.
 * Desktop: 2-col split (copy + 2x2 photo grid).
 * Mobile (≤768): vertical stack — copy → 2x2 grid → CTA + promo.
 */
:root {
  --weilo-cj-bg:        #F9F6ED;     /* brand/cream-light */
  --weilo-cj-text:      #13120F;
  --weilo-cj-photo-w:   408px;
  --weilo-cj-photo-h:   307px;
  --weilo-cj-gap:       16px;
  --weilo-cj-radius:    16px;
}

.weilo-caja {
  background: var(--weilo-cj-bg);
  color: var(--weilo-cj-text);
  padding: 56px 0;
  /* Break out of the parent container so the cream band reaches both edges. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow-x: hidden;
}
@media (max-width: 768px) {                                                              
  .weilo-caja { 
    text-align: center;
   }
}
.weilo-caja, .weilo-caja * { box-sizing: border-box; }

.weilo-caja__inner {
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}

/* ---------- Left column (copy + CTA + promo) ---------- */
.weilo-caja__copy {
  max-width: 520px;
}
.weilo-caja__title {
  margin: 0 0 24px;
  font-family: "PP Nikkei Journal", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: 46px;
  line-height: 46px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--weilo-cj-text);
}
.weilo-caja__lead {
  margin: 0 0 16px;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  color: var(--weilo-cj-text);
}
.weilo-caja__cta {
  margin-top: 16px;
  width: 100%;
  max-width: 100%;
}
.weilo-caja__promo {
  margin: 24px 0 0;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: var(--weilo-cj-text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;

  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}
/* Force the headline (✦ Aprovecha…) to occupy a full row so the
   "| Código: EATWEILO |" trio wraps onto the second line. */
.weilo-caja__promo > span:first-child { flex-basis: 100%; font-weight: 600; }
.weilo-caja__promo .weilo-caja__promo-sep { opacity: 1; }
.weilo-caja__promo strong { font-weight: 600;  }

/* ---------- Right column (2x2 photo grid) ---------- */
.weilo-caja__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--weilo-cj-photo-w) var(--weilo-cj-photo-w);
  gap: var(--weilo-cj-gap);
}
.weilo-caja__grid li { margin: 0; }
.weilo-caja__grid img {
  display: block;
  width: 100%;
  height: var(--weilo-cj-photo-h);
  object-fit: contain;             /* show the whole photo (no crop) */
  border-radius: var(--weilo-cj-radius);
  background: transparent;
  /* Layered drop-shadow for a "floating" effect with the bulk of the
     shadow below each tray (large Y offset, bigger blur, no spread on
     X so it doesn't bleed sideways). */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08))
          drop-shadow(0 22px 28px rgba(0, 0, 0, 0.22));
}

/* ---------- Tablet — narrower photos to fit alongside copy ---------- */
@media (max-width: 1199px) and (min-width: 769px) {
  .weilo-caja__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    padding: 0 32px;
  }
  .weilo-caja__title { font-size: 38px; line-height: 38px; }
  .weilo-caja__lead  { font-size: 18px; line-height: 26px; }
  .weilo-caja__grid {
    grid-template-columns: 1fr 1fr;
  }
  .weilo-caja__grid img { height: auto; aspect-ratio: 408/307; object-fit: contain; }
}

/* ---------- Mobile — stacked: copy → grid → CTA + promo ---------- */
@media (max-width: 768px) {
  .weilo-caja { padding: 40px 0; }
  .weilo-caja__inner {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 10px;
  }
  .weilo-caja__copy { display: contents; }   /* hoist children into the parent grid for explicit ordering */

  .weilo-caja__title {
    order: 1;
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1;
    margin: 0;
  }
  .weilo-caja__lead { order: 2; font-size: 16px; line-height: 24px; margin: 0; }
  .weilo-caja__grid { order: 3; grid-template-columns: 1fr 1fr; gap: 12px; }
  .weilo-caja__grid img { height: auto; aspect-ratio: 408/307; object-fit: contain; }
  .weilo-caja__cta   { order: 4; margin: 8px auto 0; width: 100%; max-width: 360px; justify-self: center; }
  .weilo-caja__promo { order: 5; margin: 4px 0 0; font-size: 13px; line-height: 22px; justify-content: center; text-align: center; }
}