/* P di Prego · pantallas anchas (iPad y escritorio).
   Se enlaza con media="(min-width: 700px) and (min-height: 500px)": un teléfono, parado o acostado, ni la aplica.
   Es la misma app reacomodada: sin columna de teléfono, el mostrador a todo el ancho, columnas donde entran y las hojas como diálogo. */

/* ───── base: la app ocupa la ventana y el contenido se alinea a una columna de hasta 1160 px ───── */
#app { max-width: none; --gut: max(32px, calc((100cqw - 1160px) / 2)); }
#view { padding-bottom: calc(124px + var(--sab)); }
#app.con-pill #view { padding-bottom: calc(186px + var(--sab)); }
.sec { padding: 30px var(--gut) 0; }
.st { margin-bottom: 14px; }
.st h3, .menu h3 { font-size: 25px; }
.st button, .st-s { font-size: 13px; }
.pie { padding: 30px var(--gut) 0; font-size: 12px; }
.nota { max-width: 72ch; font-size: 12.5px; }

/* ───── mostrador: toldo, saludo y vitrina ───── */
/* las rayas del toldo se contaban en quinceavos del ancho: acá van de a más para que cada una siga midiendo unos 38 px (siempre impares, así empieza y termina en negro) */
.tol { --w: calc(100cqw / 21); }
.tol-t { height: 52px; padding: 0 var(--gut); }
.tol-t small { gap: 2px 8px; font-size: 13.5px; }
.tol-t small span { font-size: 11.5px; }
.tol-t small i { width: 8px; height: 8px; }
.sel { height: 42px; padding: 0 16px 0 6px; font-size: 14.5px; }
.sel span { width: 30px; height: 30px; }
.sel .pe { width: 15px; }
.tol-a { height: 50px; }
.tol-l { width: 112px; height: 112px; margin-left: -56px; }
.hola { padding: 30px var(--gut) 0; }
.hi { font-size: 36px; }
.hola small { gap: 6px; padding-bottom: 6px; font-size: 13px; }
.hola small svg { width: 16px; height: 16px; }
/* cubetas de ancho fijo (ya no un porcentaje de la vitrina); el pote queda a la izquierda de las opciones y del botón */
.vit { margin: 12px var(--gut) 0; border-radius: 34px; }
.vit-h { padding: 16px 24px 0; }
.vit-h h2 { font-size: 30px; }
.desliza { font-size: 12px; }
.chips button { height: 40px; padding: 0 18px; font-size: 13.5px; }
.vit .chips { margin-top: 12px; padding: 0 20px 12px; }
.cub { grid-auto-columns: 118px; gap: 6px 0; padding: 16px 10px 12px; }
.tb .cu { max-width: 100px; }
.tb b { min-height: 28px; font-size: 11.5px; }
.ban { grid-template-columns: 150px minmax(0, 1fr); gap: 12px 26px; padding: 16px 26px 22px; }
.ban-p { grid-row: span 2; }
.ban > .btn { grid-column: 2; height: 54px; }
.ban .opt { max-width: 400px; gap: 8px; }
.ban .opt button { height: 38px; font-size: 13.5px; }
.ban-n { margin-top: 12px; font-size: 17px; }
.g-d span { height: 30px; padding: 0 12px; font-size: 12px; }
.g-d small { font-size: 10.5px; }
.g-t { font-size: 12.5px; }
/* acostado y escritorio: la vitrina a la izquierda y la bandeja con el pote a la derecha */
@media (min-width: 1000px) {
  .vit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto 1fr; }
  .vit-h, .vit .chips, .cub { grid-column: 1; }
  .cub { align-content: center; border-bottom: 0; }
  .ban { grid-column: 2; grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 14px; padding: 24px; border-left: 3.5px solid var(--ink); }
  .ban-p { grid-row: auto; justify-self: center; width: 176px; }
  .ban > .btn { grid-column: 1; }
  .ban .opt { max-width: none; }
}
/* con alto de sobra, tres filas de cubetas */
@media (min-width: 1000px) and (min-height: 860px) {
  /* el alto mínimo es el de las tres filas: al filtrar por una familia corta, la vitrina no se achica ni mueve lo de abajo */
  .cub { grid-template-rows: repeat(3, auto); min-height: 454px; }
  .ban-p { width: 204px; }
}
/* donde las seis familias no entran en una fila (vitrina angosta, o con la bandeja al costado hasta unos 1120 px) van más apretadas; y si aun así no entran, bajan a un segundo renglón en vez de quedar cortadas, que con mouse no se alcanzaban */
@media (max-width: 799.98px), (min-width: 1000px) and (max-width: 1119.98px) {
  .vit .chips { flex-wrap: wrap; gap: 6px; padding-inline: 16px; }
  .vit .chips button { padding: 0 12px; font-size: 12.5px; }
}
@media (min-width: 900px) { .tol { --w: calc(100cqw / 27); } }
@media (min-width: 1100px) { .tol { --w: calc(100cqw / 31); } }
@media (min-width: 1300px) { .tol { --w: calc(100cqw / 37); } }
@media (min-width: 1600px) { .tol { --w: calc(100cqw / 47); } }
@media (min-width: 2000px) { .tol { --w: calc(100cqw / 59); } }

/* tarjetas del inicio: lo que iba en porcentaje del ancho, acotado */
.nv { display: flex; flex-direction: column; justify-content: center; padding: 24px min(42%, 210px) 20px 22px; }
.nv h3 { font-size: 23px; }
.nv p { font-size: 13px; }
.nv-f { width: min(52%, 250px); }
.dh { padding: 18px 18px 18px 6px; }
.dh-c { flex: 0 0 min(31%, 132px); }
.dh-t h3 { font-size: 25px; }
.dh-t p { font-size: 13.5px; }
.tn { align-content: center; }
.tn-t > span { max-width: 300px; font-size: 13px; }
.tk-t span { font-size: 12.5px; }
.ls-t b { font-size: 14px; }
.ls-t small { font-size: 12.5px; }
/* la estantería sigue siendo un riel hasta los bordes; si entran todos los platos, se reparten el ancho */
.est { margin: 0 calc(-1 * var(--gut)); padding: 16px var(--gut) 10px; }
.pl { flex: 1 0 136px; }
/* con mouse, arrastrar la estantería empezando sobre una foto ya no se corta: el navegador no arranca a «llevarse» la imagen */
.pl-f img { -webkit-user-drag: none; pointer-events: none; }
.ts { display: flex; flex-direction: column; justify-content: center; }
.ts p { font-size: 13px; }
.loc { display: flex; flex-direction: column; }
.loc li { font-size: 14px; }
.loc .row { margin-top: auto; padding-top: 16px; }

/* ───── cabeceras interiores ───── */
.hd2 { padding: 24px var(--gut) 0; }
.hd2 h1, .hd3 h1, .hd4 h1 { font-size: 42px; }
.hd2-r { gap: 14px; }
.hd2-r h1 { font-size: 34px; }
.volver { width: 46px; height: 46px; }
.hd2 .chips { margin: 16px 0 0; padding: 0 0 14px; }

/* ───── sabores y delicias: listas en grilla ───── */
.menu { padding: 28px var(--gut) 0; }
.menu > p { margin: 8px 0 16px; font-size: 13.5px; }
.menu .lst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
#m-potes .lst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#m-potes .row-f { width: 62px; height: 62px; }
#m-potes .row-t em { -webkit-line-clamp: 3; }
@media (max-width: 799.98px) { #m-potes .rowi { gap: 9px; padding-right: 10px; } #m-potes .row-f { width: 52px; height: 52px; } }
.sgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.sb { gap: 9px; padding: 16px 8px 14px; border-radius: 20px; }
.sb .bo { width: 64px; }
.sb b { font-size: 12px; }
@media (min-width: 1100px) {
  .rowi { gap: 14px; padding: 12px 16px 12px 12px; }
  .row-f, .row-b, #m-potes .row-f { width: 84px; height: 84px; }
  .row-t b { font-size: 15.5px; }
  .row-t em { font-size: 12.5px; }
  .row-t small { font-size: 15px; }
}

/* ───── desafíos: el cucurucho no crece más que en un teléfono grande ───── */
.dz-h { padding: 36px var(--gut) 0; }
.dz-h h1 { font-size: 44px; }
.dz-h p { max-width: 400px; font-size: 14.5px; }
.dz-n { padding: 9px 16px; font-size: 15px; }
.dz { max-width: 460px; margin-inline: auto; padding-top: 26px; }
.sc { padding: 30px 40px 58px; }
.sc h4 { font-size: 20px; }
.sc p { max-width: 280px; font-size: 13.5px; }
.cn { min-height: 390px; }
.cn h4 { font-size: 21px; }
.cn p { font-size: 13px; }
.px svg { max-width: 96px; }
.como li, .suma li, .fi-l li { font-size: 13.5px; }

/* ───── torneo ───── */
.hd4 { padding: 30px var(--gut) 36px; border-radius: 0 0 44px 44px; }
.hd4 p { font-size: 14px; }
.hd4-w { right: calc(var(--gut) - 50px); top: -34px; width: 320px; }
.regla { gap: 18px; padding: 20px; }
.regla h4 { font-size: 19px; }
.regla p { max-width: 64ch; font-size: 13.5px; }
.btn.demo { max-width: 420px; }

/* ───── club y pedido ───── */
.cred { padding: 22px; }
.cred-l b { font-size: 27px; }
.cred-l p { max-width: 34ch; font-size: 12.5px; }
.cred-q { width: 128px; height: 128px; }
@media (max-width: 779.98px) { .cred-l b { font-size: 23px; } .cred-q { width: 108px; height: 108px; } }
.vale { padding: 15px 16px; }
.vale b { font-size: 15px; }
.vale small { font-size: 12px; }
.inv { padding: 18px 20px; }
.inv h4 { font-size: 16px; }
.inv p { font-size: 13px; }
.acc b { font-size: 15px; }
.acc small { font-size: 12px; }
.cnd p, .vacio p { font-size: 13.5px; }
.tot div { font-size: 14.5px; }

/* ───── hojas: diálogo centrado, con las cuatro esquinas redondeadas ───── */
.sh { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100% - 64px)); max-height: 88%; padding: 32px 30px 30px; border-radius: 32px; box-shadow: 0 8px 0 rgba(0, 0, 0, .28), 0 44px 80px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, -46%) scale(.97); transition: transform .36s var(--out), opacity .22s; }
.shw.open .sh { opacity: 1; transform: translate(-50%, -50%); }
.sh-x { right: 16px; top: 16px; }
.sh h3 { font-size: 28px; }
.iv p, .pd p { font-size: 14.5px; }
.pd-f { width: calc(100% + 60px); margin: -32px -30px 20px; }

/* ───── pedido confirmado: el cucurucho a la izquierda y el detalle a la derecha ───── */
.fi-in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 460px); justify-content: center; align-content: center; column-gap: clamp(24px, 6cqw, 84px); padding: 40px var(--gut); }
.fi-in > * { grid-column: 2; }
.fi-in > small { justify-self: start; }
.fi-in h2 { font-size: 44px; }
.fi-p { margin-bottom: 18px; font-size: 14.5px; }
.fi-c { grid-column: 1; grid-row: 1 / span 5; align-self: center; flex-direction: column; align-items: center; gap: 0; margin: 0; }
.fi-c .cono { flex: none; width: min(100%, 220px); }
.fi-n { padding: 0; text-align: center; }
.fi-l { margin-bottom: 0; padding: 6px 18px 16px; }
.fi-b { position: static; margin: 22px 0 0; padding: 0; background: none; }
/* la fila del candidato lleva la misma clase que el cucurucho de los desafíos y le heredaba el alto y el relleno: acá se los saca */
.fi-l li.cn { width: auto; min-height: 0; padding: 0; text-align: left; }

/* ───── barra, pedido flotante, aviso ───── */
/* la píldora muestra los cuatro rótulos; el pedido flota centrado arriba de ella y, cuando hay lugar, a su derecha */
#nav { bottom: calc(20px + var(--sab)); gap: 6px; padding: 7px; }
#nav button { height: 56px; padding: 0 20px 0 16px; font-size: 14px; }
#nav button span, #nav button.on span { max-width: 110px; margin-left: 9px; opacity: 1; }
#nav button.on { padding: 0 22px 0 16px; }
#nav button u { right: 8px; top: -6px; }
#pill { left: calc(50% - 210px); right: auto; bottom: calc(102px + var(--sab)); width: 420px; height: 54px; }
/* con la bandeja al costado y hasta ~1160 px, la píldora de 420 se metía en la columna de la bandeja y, en un alto de iPad acostado, pisaba la punta de «Agregar al pedido»: ahí va del ancho que tiene en escritorio */
@media (min-width: 1000px) and (max-width: 1163.98px) { #pill { left: calc(50% - 142px); width: 284px; } }
#toast { top: calc(20px + var(--sat)); max-width: min(86%, 520px); padding: 13px 22px; font-size: 13.5px; }
@media (min-width: 1280px) {
  #pill { left: auto; right: var(--gut); bottom: calc(28px + var(--sab)); width: 284px; }
  #app.con-pill #view { padding-bottom: calc(124px + var(--sab)); }
}
/* ventana ancha pero baja (una notebook con las barras del navegador): a la derecha caería justo sobre «Agregar al pedido» de la bandeja, así que va a la izquierda de la barra */
@media (min-width: 1280px) and (max-height: 739.98px) {
  #pill { left: var(--gut); right: auto; }
}
@media (hover: hover) {
  #nav button:not(.on):hover { background: rgba(255, 255, 255, .12); color: #fff; }
  .sb:hover:not(:active), .px:hover:not(:active), .acc:hover:not(:active), .fam:hover:not(:active) { transform: translateY(-2px); }
  .pl:hover:not(:active) .pl-f { transform: scale(1.04); }
  .tb:not(.on):hover:not(:active) .cu { transform: scale(1.05); }
}

/* sin :has() (navegadores viejos) queda todo en una sola columna, más angosta */
@supports not selector(:has(*)) { #app { --gut: max(32px, calc((100cqw - 720px) / 2)); } }

/* ───── composiciones en columnas (cada vista se reconoce por su cabecera) ───── */
@supports selector(:has(*)) {
  /* la vista tiene alto fijo: con filas automáticas, lo que recorta su contenido (vitrina, cabecera del torneo) quedaría de alto cero; por eso las filas van a max-content */
  /* mostrador: toldo y vitrina a todo el ancho; abajo, las tarjetas de a dos */
  #view:has(> .tol) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; grid-auto-flow: row dense; gap: 26px 24px; align-content: start; padding-inline: var(--gut); }
  .tol, .tol ~ * { grid-column: 1 / -1; min-width: 0; }
  .tol { margin-inline: calc(-1 * var(--gut)); }
  .tol ~ .hola { margin-bottom: -12px; padding: 6px 0 0; }
  .tol ~ .vit { margin: 0; }
  /* los ocho frutales entran siempre sin deslizar: van centrados, en dos filas de cuatro y sin el cartel */
  .vit:has(#ap-fam [data-f="fruta"].on) .cub { grid-template-rows: repeat(2, auto); justify-content: center; }
  .vit:has(#ap-fam [data-f="fruta"].on) .desliza { visibility: hidden; }
  .tol ~ .sec { display: flex; flex-direction: column; padding: 0; }
  .tol ~ .pie { padding: 0; }
  .tol ~ .sec > .nv, .tol ~ .sec > .dh, .tol ~ .sec > .tn, .tol ~ .sec > .tk, .tol ~ .sec > .card, .tol ~ .sec > .loc { flex: 1; }
  .tol ~ .sec:has(> .nv) { grid-column: 1; }
  .tol ~ .sec:has(> .dh) { grid-column: 2; margin-top: 14px; }
  .tol ~ .sec:has(> .tn) { grid-column: 1; grid-row: span 2; }
  .tol ~ .sec:has(> .tk), .tol ~ .sec:has(> .ls) { grid-column: 2; }
  .tol ~ .sec:has(> .ts) { grid-column: 1; }
  .tol ~ .sec:has(> .loc) { grid-column: 2; }
  /* sin cupón, «lo de siempre» queda solo al lado del torneo */
  @media (max-width: 1099.98px) {
    #view:not(:has(.tk)) > .sec:has(> .ls) { grid-row: span 2; justify-content: center; }
    #view:not(:has(.tk)) > .sec > .ls { flex: 0 0 auto; }
  }
  /* de 1100 en más: tres columnas, con los desafíos al medio ocupando dos filas */
  @media (min-width: 1100px) {
    #view:has(> .tol) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .tol ~ .sec:has(> .nv), .tol ~ .sec:has(> .ls) { grid-column: 1 / span 2; }
    .tol ~ .sec:has(> .dh) { grid-column: 3 / span 2; grid-row: span 2; }
    .tol ~ .sec:has(> .tn) { grid-column: 5 / span 2; grid-row: auto; margin-top: 14px; }
    .tol ~ .sec:has(> .tk), .tol ~ .sec:has(> .loc) { grid-column: 5 / span 2; }
    .tol ~ .sec:has(> .ts) { grid-column: 1 / span 4; }
    #view:not(:has(.tk)) > .sec:has(> .tn) { grid-row: span 2; }
    .dh { align-items: center; }
    .dh-c { flex-basis: 42%; }
    .tol ~ .sec .sg { grid-template-columns: repeat(12, 1fr); gap: 10px; }
    .tol ~ .sec > .ts { padding: 22px 24px; }
    .tol ~ .sec .ts-h { margin-bottom: 16px; }
    .tol ~ .sec .ts-h b { font-size: 17px; }
    .tol ~ .sec .ts p { margin-top: 16px; }
  }

  /* desafíos: el texto a la izquierda y el cucurucho a la derecha (lo que le sobra de alto al cucurucho va todo a la última fila, así el texto queda junto arriba) */
  #view:has(> .dz-h) { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 460px); grid-template-rows: minmax(min-content, 1px) minmax(min-content, 1px) auto; justify-content: center; align-content: start; column-gap: clamp(28px, 6cqw, 100px); padding-inline: var(--gut); }
  .dz-h { grid-column: 1; padding: 46px 0 0; text-align: left; }
  .dz-h p { margin-inline: 0; }
  .dz { grid-column: 2; grid-row: 1 / span 3; width: 100%; max-width: none; margin: 0; padding: 30px 0 0; }
  .dz-h ~ .sec { grid-column: 1; padding: 34px 0 0; }

  /* torneo: la regla y el cupón a la par, los cruces de a dos */
  #view:has(> .hd4) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; grid-auto-flow: row dense; column-gap: 24px; align-content: start; padding-inline: var(--gut); }
  .hd4 { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gut)); }
  .hd4 ~ .sec { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; padding: 28px 0 0; }
  .hd4 ~ .sec:has(> .regla) { grid-column: 1; }
  .hd4 ~ .sec:has(> .tk) { grid-column: 2; }
  .hd4 ~ .sec > .regla, .hd4 ~ .sec > .tk { flex: 1; }
  .vss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  @media (max-width: 1099.98px) {
    #view:not(:has(.tk)) > .sec:has(> .regla) { grid-column: 1 / -1; }
    /* la llave a todo el ancho: la primera ronda arriba y las demás en un renglón, repartidas de punta a punta de la tarjeta */
    .hd4 ~ .sec > .ll { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 14px 12px; }
    .hd4 ~ .sec > .ll > .ll-r:first-child { flex-basis: 100%; }
    .hd4 ~ .sec > .ll > .ll-r:first-child .ll-c { justify-content: space-between; }
  }
  /* de 1100 en más: la regla y los cruces a la izquierda; el cupón y la llave en una columna a la derecha */
  @media (min-width: 1100px) {
    #view:has(> .hd4) { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; }
    .hd4 ~ .sec { grid-column: 1; }
    .hd4 ~ .sec:has(> .tk), .hd4 ~ .sec:has(> .ll) { grid-column: 2; }
    #view:not(:has(.tk)) > .sec:has(> .ll) { grid-row: span 2; }
  }

  /* club: la credencial y los sellos a la izquierda; los vales y la invitación a la derecha */
  #view:has(.cred) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; grid-auto-flow: row dense; column-gap: 24px; align-content: start; padding-inline: max(var(--gut), calc((100cqw - 1060px) / 2)); }
  #view:has(.cred) > * { grid-column: 1 / -1; min-width: 0; }
  #view:has(.cred) > .hd2 { padding: 28px 0 4px; }
  #view:has(.cred) > .sec { display: flex; flex-direction: column; padding: 26px 0 0; }
  #view:has(.cred) > .pie { padding: 26px 0 0; }
  #view:has(.cred) > .sec:has(> .cred), #view:has(.cred) > .sec:has(> .ts) { grid-column: 1; }
  #view:has(.cred) > .sec:has(> .st), #view:has(.cred) > .sec:has(> .inv) { grid-column: 2; }
  #view:has(.cred) > .sec > .cred, #view:has(.cred) > .sec > .ts, #view:has(.cred) > .sec > .inv { flex: 1; }
  #view:has(.cred) .dos { gap: 24px; }

  /* pedido: lo que llevás a la izquierda; el total y el botón, fijos a la derecha */
  #view:has(> .hd2.solo > .volver) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); grid-auto-rows: max-content; column-gap: 28px; align-content: start; padding-inline: max(var(--gut), calc((100cqw - 1060px) / 2)); }
  .hd2.solo:has(> .volver) { grid-column: 1 / -1; padding: 28px 0 4px; }
  .hd2.solo:has(> .volver) ~ .sec { grid-column: 1; min-width: 0; padding: 22px 0 0; }
  .hd2.solo:has(> .volver) ~ .sec:has(> .tot) { grid-column: 2; grid-row: 2 / span 3; align-self: start; position: sticky; top: 4px; }
  .hd2.solo:has(> .volver) ~ .sec:has(> .vacio) + .sec { grid-column: 2; grid-row: 2; }

  /* hojas con más para mostrar: la ficha de producto va a dos columnas (foto y datos) */
  .sh:has(> .ci) { width: min(620px, calc(100% - 64px)); }
  .sh:has(> .pd) { width: min(820px, calc(100% - 64px)); padding: 0; }
  .pd { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 420px; padding: 56px 32px 36px calc(50% + 32px); }
  .pd-f { position: absolute; left: 0; top: 0; width: 50%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; }
  .pd-b { margin-top: 26px; }
}