/*
 * Home — "Platos posibles" section. Tokens from Figma node 1:304.
 * Desktop: title centred, then 4-col grid (tag pill + photo + caption).
 * Mobile (≤768): single-column stack, photos full-width.
 */
:root {
  --weilo-pt-bg:           #FAF6EE;     /* brand/cream */
  --weilo-pt-text:         #1A1714;     /* neutro/negro */
  --weilo-pt-text-deep:    #14120F;     /* neutro/negro-profundo */
  --weilo-pt-text-grey:    #736E66;     /* neutro/gris */
  --weilo-pt-tag-cream:    #EFE8DC;     /* brand/cream-dark */
  --weilo-pt-tag-green:    #253D24;     /* brand/verde-oscuro */
  --weilo-pt-tag-violet:   #7B6BAE;     /* acento/violeta */
  --weilo-pt-tag-orange:   #F07840;     /* acento/naranja */
  --weilo-pt-photo-w:      337px;
  --weilo-pt-photo-h:      350px;
  --weilo-pt-card-gap:     16px;
  --weilo-pt-radius:       16px;
}

.weilo-platos {
  background: var(--weilo-pt-bg);
  color: var(--weilo-pt-text);
  padding: 80px 0 96px;
  /* Full-bleed inside Astra/UAGB containers. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  /* `100vw` includes the scrollbar — clip locally so the slider's
     internal scroll never leaks into the page body. */
  overflow-x: hidden;
}
.weilo-platos, .weilo-platos * { box-sizing: border-box; }

.weilo-platos__inner {
  max-width: calc(4 * var(--weilo-pt-photo-w) + 3 * var(--weilo-pt-card-gap) + 100px);
  margin: 0 auto;
  padding: 0 50px;
}

/* ---------- Title ---------- */
.weilo-platos__title {
  margin: 0 auto 64px;
  max-width: 756px;
  font-family: "PP Nikkei Journal", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: 46px;
  line-height: 51px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  color: var(--weilo-pt-text);
}

/* ---------- Tags row (own line, sits above the photo grid) ---------- */
.weilo-platos__tags {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}
.weilo-platos__tags li { margin: 0; }

/* ---------- Grid ---------- */
.weilo-platos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, var(--weilo-pt-photo-w));
  gap: var(--weilo-pt-card-gap);
  justify-content: center;
}

/* ---------- Card ---------- */
.weilo-platos__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------- Tag pill — width follows its content (no truncation) ---------- */
.weilo-platos__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 36px;
  border-radius: 100px;
  font-family: "PP Nikkei Journal", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.weilo-platos__tag--cream  { background: var(--weilo-pt-tag-cream);  color: var(--weilo-pt-text-deep); }
.weilo-platos__tag--green  { background: var(--weilo-pt-tag-green);  color: #fff; }
.weilo-platos__tag--violet { background: var(--weilo-pt-tag-violet); color: #fff; }
.weilo-platos__tag--orange { background: var(--weilo-pt-tag-orange); color: #fff; }

/* ---------- Photo ---------- */
.weilo-platos__photo {
  display: block;
  width: 100%;
  max-width: var(--weilo-pt-photo-w);
  height: var(--weilo-pt-photo-h);
  object-fit: cover;
  border-radius: var(--weilo-pt-radius);
}

/* ---------- Captions ---------- */
.weilo-platos__plate-title {
  margin: 17px 0 0;
  align-self: stretch;
  padding-left: 22px;          /* matches Figma offset relative to the card edge */
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--weilo-pt-text);
}
.weilo-platos__plate-benefit {
  margin: 8px 0 0;
  align-self: stretch;
  padding-left: 22px;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: var(--weilo-pt-text-grey);
}

/* ---------- Tablet — keep 4 cols but allow them to shrink ---------- */
@media (max-width: 1499px) and (min-width: 769px) {
  .weilo-platos { padding: 56px 0 72px; }
  .weilo-platos__inner { padding: 0 32px; }
  .weilo-platos__title { font-size: 38px; line-height: 44px; margin-bottom: 48px; }
  .weilo-platos__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .weilo-platos__photo { height: auto; aspect-ratio: 337/350; max-width: 100%; }
  .weilo-platos__tag {
    height: 48px;
    padding: 0 24px;
    font-size: 18px;
  }
  .weilo-platos__plate-title   { padding-left: 0; }
  .weilo-platos__plate-benefit { padding-left: 0; }
}

/* ---------- Mobile — horizontal scroll-snap slider ---------- */
@media (max-width: 768px) {
  .weilo-platos { padding: 48px 0 56px; }
  .weilo-platos__inner { padding: 0; }
  .weilo-platos__title {
    padding: 0 20px;
    margin: 0 auto 24px;
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.05;
  }
  .weilo-platos__tags {
    padding: 0 20px;
    gap: 8px 12px;
    margin-bottom: 24px;
  }
  .weilo-platos__tag {
    height: 44px;
    padding: 0 22px;
    font-size: 16px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
  }
  .weilo-platos__grid {
    display: block;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    padding: 4px 20px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 16px 15px !important;
  }
  .weilo-platos__grid::-webkit-scrollbar { display: none; }
  .weilo-platos__card {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    white-space: normal;
    width: calc(100vw - 64px);
    max-width: 337px;
    margin-right: 12px;
    scroll-snap-align: center;
    align-items: stretch;
  }
  .weilo-platos__card:last-child { margin-right: 0; }
  .weilo-platos__photo {
    height: auto;
    aspect-ratio: 337/350;
    max-width: 100%;
  }
  .weilo-platos__plate-title   { padding-left: 0; text-align: center; font-size: 20px; }
  .weilo-platos__plate-benefit { padding-left: 0; text-align: center; }
}