/* ==========================================================================
   GRUPOS — grupos.html only (pedidos de grupo: 5+ envío gratis, 10+ además
   10% de descuento, pedir antes de las 11:00 para recibir antes de las 14:00).
   Loaded AFTER styles.css and never by index.html, so nothing here can move
   the measured home page. Colours, fonts and motion resolve to tokens.css.
   New sections are px, scoped to their own classes: the root font-size is
   fluid (10px on a phone) and these are phone-first blocks. Never :root
   (CLAUDE.md: no vw/calc over % in :root).
   ========================================================================== */

/* ---------------- HERO: the offer ---------------- */
.grp-hero{
  --grp-max: 1232px;           /* 1200 + the 16px side padding: lines up with the 83px gutter at 1366 */
  display:flex; align-items:center;
}
/* Stronger scrim than the home hero's .13: here white copy sits on the photo,
   not a single wordmark. */
.grp-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.30) 45%,rgba(0,0,0,.62) 100%)}
.grp-hero__inner{
  position:relative; z-index:2; width:100%; max-width:var(--grp-max); margin:0 auto;
  padding:calc(var(--nav-h) + 48px) 16px 64px;
  color:var(--c-cream-2);
}
.grp-hero__eyebrow{
  font-family:var(--ff-mono); font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; opacity:.85;
}
.grp-hero__title{
  margin-top:14px; font-size:clamp(38px, 6.4vw, 84px); font-weight:700;
  line-height:.98; letter-spacing:var(--ls-tight); text-transform:uppercase;
}
/* second half of the title as a subtitle (owner): one h1, read as one line */
.grp-hero__sub{
  display:block; margin-top:14px; font-size:clamp(28px, 4vw, 54px);
  line-height:1.15; letter-spacing:.01em;
}
/* Discount tiers: two full strips of text (owner's sketch), black and the
   olive of the carta labels, cream text (owner's pick). */
/* The two offers as plain text, no boxes (owner, 2 Nov 2026). */
.grp-tiers{display:grid;gap:6px;margin-top:26px;max-width:620px}
.grp-tier{color:var(--c-cream-2);font-size:20px;font-weight:400;line-height:1.35}
/* small print under the tiers (owner) */
.grp-hero__time{
  margin-top:14px; font-size:13px; line-height:1.45; max-width:620px; opacity:.85;
}
.grp-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}
.grp-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:0 26px; border:2px solid var(--c-cream-2); color:var(--c-cream-2);
  font-size:16px; font-weight:700; letter-spacing:.06em;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.grp-btn:hover{background:rgba(253,248,243,.14)}
.grp-btn--solid{background:var(--c-cream-2);color:var(--c-black)}
.grp-btn--solid:hover{background:var(--c-white)}
.grp-hero .grp-btn:focus-visible{outline:2px solid var(--c-cream-2);outline-offset:3px}

/* ---------------- CÓMO FUNCIONA ---------------- */
/* NOSOTROS background (owner): white + the stretched LETTUCE ghost wordmark,
   centred at the same size as on the home page (--ghost-w, which tokens.css
   already switches to vw below 854). */
.grp-how{position:relative;overflow:hidden;background:var(--c-white);padding:64px 16px}
.grp-how::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; width:var(--ghost-w); aspect-ratio:1800 / 1080;
  transform:translate(-50%,-50%);
  background:url("../img/nosotros-ghost-1800.webp") center / 100% 100% no-repeat;
}
/* The wordmark's solid black baseline bars are faded out at EVERY width
   (unlike the home page, which only does it below 854): here the section's
   height depends on how the steps stack, so the bars can land on text at any
   width. A long fade, ending before the bars (owner). */
.grp-how::before{
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 90%);
          mask-image:linear-gradient(to bottom, #000 62%, transparent 90%);
}
.grp-how__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.grp-how .h-section{font-size:clamp(40px, 6.7vw, 92px)}
.grp-how__steps{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; margin-top:36px;
  counter-reset:paso;
}
.grp-how__step{border-top:2px solid var(--c-black);padding-top:16px}
/* Desktop and tablet: closed boxes, white like the NOSOTROS review cards
   that also sit on the ghost wordmark (owner). Phones keep the top rule. */
@media (min-width: 621px){
  .grp-how__step{border:2px solid var(--c-black);background:var(--c-white);padding:18px 20px 22px}
}
.grp-how__step span{
  display:block; font-family:var(--ff-mono); font-size:13px; font-weight:700;
  letter-spacing:.14em; color:var(--c-accent);
}
.grp-how__step h3{margin-top:8px;font-size:22px;font-weight:700;line-height:1.2;text-transform:uppercase}
.grp-how__step p{margin-top:8px;font-size:16px;line-height:1.55}
.grp-how__step p.grp-how__step-note{margin-top:10px;font-size:13px;line-height:1.45;color:rgba(0,0,0,.62)}
.grp-how__fine{margin-top:28px;font-size:14px;line-height:1.55;color:var(--c-black)}
.grp-how__note{margin-top:8px;font-size:12px;line-height:1.5;color:rgba(0,0,0,.62)}
.grp-how__note a{text-decoration:underline;text-underline-offset:2px}

/* ---------------- CARTA on this page: prices + a fourth tab ---------------- */
/* The price row takes the slot of .card__foot (same rule above it, same
   bottom), so the card's content height barely changes. Card px are an island
   (tokens.css), so these are px too. */
.card__price{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:7px; padding-top:6px; border-top:1px solid var(--c-rule); line-height:1;
  font-family:var(--ff-mono); font-size:var(--fs-card-brand); font-weight:700; letter-spacing:.07em;
}
.card__price b{font-family:var(--ff-sans);font-size:14px;letter-spacing:0;color:var(--c-accent)}
.card__desc + .card__price,.card__ing + .card__price,
.card__steps + .card__price,.card__dressing + .card__price{margin-top:auto}
.card__ing--pending li{color:var(--c-accent);font-style:italic}

/* ---------------- TU PEDIDO ---------------- */
.grp-order{padding:72px 16px 80px;background:var(--c-white)}
.grp-order__inner{max-width:1200px;margin:0 auto}
.grp-order .h-section{font-size:clamp(40px, 6.7vw, 92px)}
.grp-order__lead{margin-top:12px;font-size:17px;line-height:1.55;max-width:640px}
.grp-order__grid{
  display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:40px;
  align-items:start; margin-top:32px;
}
.grp-order .label{font-size:12px}
.grp-items + .label{margin-top:26px}
.grp-items{margin-top:8px;border-top:1.5px solid var(--c-black)}
.grp-item{
  display:grid; grid-template-columns:1fr auto auto; gap:8px 16px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--c-rule);
}
.grp-item__name{font-size:17px;font-weight:700;line-height:1.25}
.grp-item__name small{display:block;font-size:13px;font-weight:400;color:rgba(0,0,0,.62);margin-top:2px}
.grp-item__price{font-family:var(--ff-mono);font-size:14px;font-weight:700;white-space:nowrap}
.grp-step{display:flex;align-items:center;border:1.5px solid var(--c-black)}
.grp-step button{
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  font-family:var(--ff-sans); font-size:22px; line-height:1; color:var(--c-black);
}
.grp-step button:hover{background:var(--c-cream-1)}
.grp-step button:disabled{opacity:.3;cursor:default;background:transparent}
.grp-step output{min-width:34px;text-align:center;font-size:17px;font-weight:700}
.grp-item.is-on{background:linear-gradient(90deg,var(--c-cream-3),transparent)}

/* Summary: sticky beside the list on desktop, in flow on phones. */
/* The column sticks, so the red note travels with the box under it. */
.grp-sum-col{position:sticky; top:calc(var(--nav-h) + 16px)}
.grp-sum{
  background:var(--c-cream-1); border:2px solid var(--c-black); padding:22px;
  /* "Lo que paga cada uno" can get long: never taller than the screen
     (minus room for the note under it) */
  max-height:calc(100vh - var(--nav-h) - 96px); overflow-y:auto;
}
.grp-sum__plazo{margin-top:12px;font-size:14px;line-height:1.45;font-weight:700;color:var(--c-accent)}
.grp-sum dl{margin:12px 0 0}
.grp-sum__row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:16px}
.grp-sum__row dt{color:rgba(0,0,0,.7)}
.grp-sum__row dd{margin:0;font-weight:700;text-align:right}
.grp-sum__row--ok dd{color:var(--c-success)}
.grp-sum__row--total{border-top:1.5px solid var(--c-black);margin-top:6px;padding-top:12px;font-size:20px}
.grp-sum__row--total dt{color:var(--c-black);font-weight:700}
.grp-sum__bar{position:relative;height:8px;background:rgba(18,17,13,.12);margin:16px 0 6px}
.grp-sum__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c-black);transition:width var(--dur-base) var(--ease-out)}
.grp-sum__marks{position:relative;height:16px;font-family:var(--ff-mono);font-size:11px;font-weight:700}
.grp-sum__marks span{position:absolute;transform:translateX(-50%)}
.grp-sum__nudge{margin-top:10px;font-size:15px;line-height:1.45;font-weight:700}
.grp-sum__note{margin-top:8px;font-size:13px;line-height:1.45;color:rgba(0,0,0,.62)}

/* DATOS DE ENTREGA: same white background as the order; a title as big as
   TU PEDIDO is what separates the two parts (owner). */
.grp-form__data{margin-top:64px}
.grp-form__data > :not(.grp-form__title){max-width:760px}
.grp-form__data > .grp-form__title{
  font-size:clamp(40px, 6.7vw, 92px); font-weight:700; line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight); text-transform:uppercase; margin-bottom:28px;
}
.grp-form .field input,.grp-form .field textarea{font-size:16px}
.grp-form .field label{font-size:12px}
.grp-form .field__hint{display:block;font-size:13px;line-height:1.45;color:rgba(0,0,0,.62);margin-top:6px}
.grp-form .legal{font-size:12px}
.grp-form .btn-submit{font-size:17px;padding:17px}
.grp-form .form__status{font-size:13px}
.grp-form .field__err{font-size:12px}
.grp-done{border-top:2px solid var(--c-success);padding-top:18px;max-width:640px;margin-top:24px}
.grp-done h3{font-size:24px;font-weight:700;text-transform:uppercase;color:var(--c-success)}
.grp-done p{font-size:16px;line-height:1.55;margin-top:10px}
.grp-done a{text-decoration:underline;text-underline-offset:2px}

#descuentos,#pedido{scroll-margin-top:var(--nav-h)}

/* ---------------- reflow ---------------- */
@media (max-width: 900px){
  .grp-order__grid{grid-template-columns:1fr}
  .grp-sum-col{position:static}
  .grp-sum{max-height:none;overflow:visible}
  .grp-how__steps{grid-template-columns:repeat(2, 1fr);gap:16px}
}
@media (max-width: 760px){
  .grp-hero__inner{padding-top:calc(var(--nav-h-m) + 36px)}
  #descuentos,#pedido{scroll-margin-top:var(--nav-h-m)}
}
@media (max-width: 620px){
  .grp-how__steps{grid-template-columns:1fr;gap:22px}
  .grp-tier{font-size:17px}
  .grp-btn{flex:1 1 100%}
  .grp-item{grid-template-columns:1fr auto;grid-template-areas:"n n" "p s"}
  .grp-item__name{grid-area:n}
  .grp-item__price{grid-area:p}
  .grp-step{grid-area:s}
}

/* "De estas, cuántas…" option rows under a salad (grupos.js, data-opciones).
   Only shown once the row has at least one salad. */
.grp-sub{
  grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:center; gap:12px;
  margin-top:-2px;
}
.grp-sub[hidden]{display:none}
.grp-sub__label{font-size:14px;line-height:1.3;color:rgba(0,0,0,.7);text-align:right}
.grp-step--sub{border-width:1px;flex-shrink:0}
.grp-step--sub button{width:36px;height:36px;font-size:18px}
.grp-step--sub output{min-width:28px;font-size:15px}
@media (max-width: 620px){
  .grp-sub{justify-content:space-between}
  .grp-sub__label{text-align:left}
}
@media (pointer: coarse){
  .grp-step--sub button{width:44px;height:44px}
}
/* Automatic "3 van con atún" / "2 van en su versión original" under the options. */
.grp-sub__resto{grid-column:1 / -1;margin:0;font-size:13px;line-height:1.3;color:rgba(0,0,0,.62);text-align:right}
.grp-sub__resto[hidden]{display:none}
@media (max-width: 620px){ .grp-sub__resto{text-align:left} }

/* ---------------- PERSONALIZADAS (grupos-personaliza.js) ----------------
   One card per "Crea tu ensalada": ingredient chips, black when chosen. */
.grp-pz{grid-column:1 / -1;display:grid;gap:12px;margin-top:4px}
.grp-pz[hidden]{display:none}
.grp-pz__card{border:1.5px solid var(--c-black);background:var(--c-white)}
.grp-pz__card summary{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline;
  padding:12px 14px; cursor:pointer; list-style:none; background:var(--c-cream-1);
}
.grp-pz__card summary::-webkit-details-marker{display:none}
.grp-pz__card summary::after{content:"+";grid-column:2;grid-row:1;justify-self:end;display:none}
.grp-pz__t{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.grp-pz__price{font-family:var(--ff-mono);font-size:15px;font-weight:700}
.grp-pz__state{grid-column:1 / -1;font-size:13px;color:rgba(0,0,0,.62)}
.grp-pz__card.is-complete .grp-pz__state{color:var(--c-success);font-weight:700}
.grp-pz__card.is-checked:not(.is-complete){border-color:var(--c-error)}
.grp-pz__card.is-checked:not(.is-complete) .grp-pz__state{color:var(--c-error);font-weight:700}
.grp-pz__body{padding:4px 14px 16px}
.grp-pz__para{margin:10px 0 4px}
.grp-pz__sec{border:0;margin:14px 0 0;padding:0;min-width:0}
.grp-pz__sec legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:700;line-height:1.3}
.grp-pz__sec legend small{font-size:13px;font-weight:400;color:rgba(0,0,0,.62)}
.grp-pz__sec legend em{font-style:normal;font-size:13px;color:var(--c-success)}
.grp-pz__sec legend em.is-warn{color:var(--c-error);font-weight:700}
.grp-pz__chips{display:flex;flex-wrap:wrap;gap:6px}
.grp-pz__chip{
  display:inline-flex; align-items:baseline; gap:6px; min-height:36px;
  padding:7px 12px; border:1.5px solid var(--c-black); border-radius:999px;
  background:var(--c-white); color:var(--c-black); cursor:pointer;
  font-family:var(--ff-sans); font-size:14px; line-height:1.2; text-align:left;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.grp-pz__chip small{font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--c-accent)}
.grp-pz__chip b{font-weight:700}
.grp-pz__chip b:empty{display:none}
.grp-pz__chip:hover{background:var(--c-cream-1)}
.grp-pz__chip[aria-pressed="true"]{background:var(--c-black);color:var(--c-white)}
.grp-pz__chip[aria-pressed="true"] small{color:var(--c-glovo)}
.grp-pz__chip.is-full{opacity:.4}
@media (pointer: coarse){ .grp-pz__chip{min-height:var(--tap-min)} }

/* "Lo que paga cada uno": each unit at its discounted price (grupos.js). */
.grp-pp{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-rule)}
.grp-pp[hidden]{display:none}
.grp-pp__list{margin-top:8px}
.grp-pp__list li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px;line-height:1.35}
.grp-pp__list b{white-space:nowrap}
.grp-pp__note{margin-top:8px;font-size:13px;line-height:1.45;color:rgba(0,0,0,.62)}
/* Summary on the "Pedido enviado" screen: count, one row per person, total. */
.grp-done__sum{margin-top:28px;border-top:2px solid var(--c-black);padding-top:14px}
.grp-done p.grp-done__count{font-size:18px;font-weight:700;margin-top:0}
.grp-done p.grp-done__pp-t{font-size:14px;font-weight:700;margin-top:16px}
.grp-done__pp{list-style:none;padding:0;margin-top:4px}
.grp-done__pp li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:8px 0; border-bottom:1px solid var(--c-rule); font-size:16px; line-height:1.4;
}
.grp-done__pp b{white-space:nowrap;text-align:right}
.grp-done__pp small{display:block;font-size:12px;font-weight:400;color:rgba(0,0,0,.62)}
.grp-done p.grp-done__tot{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:0; padding-top:12px; border-top:2px solid var(--c-black); font-size:18px; font-weight:700;
}
.grp-done__tot b{font-size:24px}
.grp-order__lead[hidden]{display:none}

/* Notas o comentarios: under the drinks, part of the order list (owner). */
.grp-notas{margin-top:26px}
.grp-notas label{font-size:12px}
.grp-notas textarea{font-size:16px}

/* Under 5 salads: recommend Glovo / Uber Eats (grupos.js). */
.grp-sum__pocas{
  margin-top:12px; padding:12px 14px; border:1.5px solid var(--c-black);
  background:var(--c-glovo); font-size:14px; line-height:1.45;
}
.grp-sum__pocas[hidden]{display:none}
.grp-sum__pocas a{font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Order reference on the "Pedido enviado" screen: a box, its fine print under it. */
.grp-done__ref{
  display:inline-block; margin-top:16px; padding:12px 18px; border:2px solid var(--c-black);
}
.grp-done__ref-l{
  display:block; font-family:var(--ff-mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(0,0,0,.62);
}
.grp-done__ref b{
  display:block; margin-top:4px; font-family:var(--ff-mono); font-size:26px;
  letter-spacing:.06em; color:var(--c-black);
}
.grp-done p.grp-done__fine{font-size:13px;line-height:1.5;color:rgba(0,0,0,.62);margin-top:8px}
.grp-done__sum + p.grp-done__fine{margin-top:20px}
/* focus is moved here by script so screen readers announce it; no ring needed */
.grp-done:focus{outline:none}

/* Extras that can be repeated: chip + a "− 2 +" counter once chosen (grupos-personaliza.js). */
.grp-pz__opt{display:inline-flex;align-items:stretch}
.grp-pz__opt .grp-pz__chip[aria-pressed="true"]{border-radius:999px 0 0 999px}
.grp-pz__cnt{
  display:inline-flex; align-items:center;
  border:1.5px solid var(--c-black); border-left:0; border-radius:0 999px 999px 0;
  background:var(--c-white);
}
.grp-pz__cnt[hidden]{display:none}
.grp-pz__cnt button{
  min-width:34px; height:100%; padding:0 8px; border:0; background:transparent;
  color:var(--c-black); font-family:var(--ff-sans); font-size:18px; line-height:1; cursor:pointer;
}
.grp-pz__cnt button:hover{background:var(--c-cream-1)}
.grp-pz__cnt .grp-pz__mas{border-radius:0 999px 999px 0;padding-right:12px}
.grp-pz__cnt .grp-pz__mas.is-full{opacity:.35}
.grp-pz__cnt output{min-width:18px;text-align:center;font-size:15px;font-weight:700}
@media (pointer: coarse){ .grp-pz__cnt button{min-width:40px} }