/* MOFT Mostrador. Page layer on top of home.css (the shared site base: header, footer, buttons, page head, chip bar,
   photo placeholders and treatment, and the day's board .ob shared with Home). Layout only: every colour, size, space
   and radius is a --moft-* token or a home.css variable. Solid colours only: states swap solid fills and text. */

/* Section chips jump to their module; the scroll glides unless reduced motion is on */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.filters__chip{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* Section heads: title and a short line, left-aligned (as the Catálogo category heads) */
.ob-head{flex-wrap:wrap;align-items:baseline;justify-content:flex-start;column-gap:var(--moft-space-4);row-gap:var(--moft-space-1);margin-bottom:var(--moft-space-5)}
.ob-sec{padding-top:var(--moft-space-5)}

/* ---------- A · Hoy en el mostrador ---------- */
/* The board is the Home one (.ob, .ob-card, .ob-tag in home.css); here it lists the whole day */
.ob-live__date::first-letter{text-transform:uppercase}

/* Diary: loose photos of the week, each with its time and one line. Swipe on phones, a row of five on desktop */
.diary{margin-top:var(--moft-space-7)}
.diary__head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--moft-space-4);row-gap:var(--moft-space-1);margin-bottom:var(--moft-space-4)}
.diary__t{font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-h3);line-height:1.25;letter-spacing:.03em}
.diary__rail{display:flex;gap:var(--moft-space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--moft-space-4);margin:0 calc(-1 * var(--moft-space-4));padding:0 var(--moft-space-4) var(--moft-space-3);scrollbar-width:none;list-style:none}
.diary__rail::-webkit-scrollbar{display:none}
.diary__rail>li{flex:0 0 min(58%,220px);scroll-snap-align:start}
.diary__item{margin:0;display:grid;gap:var(--moft-space-2)}
.diary__ph{aspect-ratio:4/5}
.diary__item figcaption{display:grid;gap:2px}
.diary__when{font-size:var(--moft-size-label);font-weight:var(--moft-weight-black);letter-spacing:.1em;text-transform:uppercase;color:var(--moft-accent-text-on-light)}
.diary__line{font-size:15px;line-height:1.45}

/* ---------- B · Una tarta por dentro ---------- */
.cut{display:grid;gap:var(--moft-space-5)}
.cut__fig{position:relative}
.cut__ph{aspect-ratio:4/3;width:100%}
/* The photos fill their slots. The cut keeps its 4:3 on every layout, so the points stay on their layers. */
.cut__ph,.cut__layer-ph{position:relative;overflow:hidden}
.cut__ph>img,.cut__layer-ph>img,.tex__ph>img,.tech__ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Points on the cut: the kit's button pair (Chocolate fill, Crema text) with the hard pill shadow.
   The open layer swaps to the other pair (Salty Caramel fill, Tiramisu text). 36px drawn, 44px to tap. */
.cut__dot,.cut__n{display:grid;place-items:center;line-height:1;padding-bottom:.06em;font-variant-numeric:lining-nums tabular-nums;flex:none;border-radius:var(--moft-radius-pill);background:var(--moft-chocolate);color:var(--moft-crema);font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;line-height:1;box-shadow:var(--sh-pill) var(--moft-chocolate-deep);transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease}
.cut__dot{position:absolute;left:var(--x);top:var(--y);z-index:2;width:36px;height:36px;margin:-18px 0 0 -18px;padding:0 0 .06em;border:2px solid var(--moft-whipped-cream);font-size:18px;cursor:pointer}
.cut__dot::before{content:"";position:absolute;inset:-6px}
@media (hover:hover){.cut__dot:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}}
.cut__dot[aria-expanded=true],.cut__item.is-open .cut__n{background:var(--moft-salty-caramel);color:var(--moft-tiramisu);box-shadow:var(--sh-pill) var(--moft-tiramisu)}
.cut__dot:active{transform:translate(3px,4px);box-shadow:none}
.cut__dot:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:3px;border-radius:var(--moft-radius-pill)}

/* Layer list: a dotted rule between rows (as the Catálogo variables); each row opens its photo and line */
.cut__list{display:grid;border-top:2px dotted var(--moft-chocolate-light)}
.cut__item{border-bottom:2px dotted var(--moft-chocolate-light)}
.cut__btn{display:flex;align-items:center;gap:var(--moft-space-3);width:100%;min-height:60px;padding:var(--moft-space-2) var(--moft-space-1) var(--moft-space-2) 0;background:none;border:0;color:var(--moft-text-on-light);font:inherit;text-align:left;cursor:pointer}
.cut__n{width:32px;height:32px;font-size:17px}
.cut__name{flex:1;font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-h3);line-height:1.25;letter-spacing:.03em;transition:color .15s ease}
@media (hover:hover){.cut__btn:hover .cut__name{color:var(--moft-accent-text-on-light)}}
.cut__btn:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:2px;border-radius:var(--moft-radius-small)}
.cut__chev{width:10px;height:10px;margin:0 var(--moft-space-2) 4px;border-right:3px solid var(--moft-chocolate);border-bottom:3px solid var(--moft-chocolate);transform:rotate(45deg);transition:transform .25s ease}
.cut__item.is-open .cut__chev{transform:translateY(4px) rotate(-135deg)}
/* Opening: the row grows from 0 to its height; closed rows are hidden from tab order and screen readers */
.cut__detail{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s var(--moft-ease-out),visibility 0s linear .3s}
.cut__item.is-open .cut__detail{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s var(--moft-ease-out),visibility 0s}
.cut__inner{min-height:0;overflow:hidden;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:var(--moft-space-4)}
.cut__inner>*{margin-bottom:var(--moft-space-4)}
.cut__layer-ph{aspect-ratio:1/1;padding:var(--moft-space-1) var(--moft-space-2);font-size:10px}
.cut__line{max-width:40ch;font-size:var(--moft-size-body);line-height:1.5}
@media (prefers-reduced-motion:reduce){.cut__detail,.cut__item.is-open .cut__detail,.cut__chev,.cut__dot,.cut__n{transition:none}}

/* ---------- C · Texturas: six close-ups, one word each. Three columns on phones, six on desktop ---------- */
.tex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-4) var(--moft-space-3)}
.tex__item{margin:0;display:grid;gap:var(--moft-space-2)}
.tex__ph{aspect-ratio:1/1}
/* The word: the accent line role (Fraunces italic 600, WONK 1) */
.tex__w{font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:17px;line-height:1.2;color:var(--moft-text-brand-on-light)}

/* ---------- D · Técnicas: three cards, photo or short video on top, title and two lines. Swipe on phones ---------- */
.tech{display:flex;gap:var(--moft-space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--moft-space-4);margin:0 calc(-1 * var(--moft-space-4));padding:0 var(--moft-space-4) var(--moft-space-3);scrollbar-width:none;list-style:none}
.tech::-webkit-scrollbar{display:none}
.tech>li{flex:0 0 min(82%,320px);scroll-snap-align:start;display:flex}
.tech__card{display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden}
.tech__ph{aspect-ratio:4/3;border-radius:0}
.tech__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tech__body{display:grid;gap:var(--moft-space-2);padding:var(--moft-space-4) var(--moft-space-4) var(--moft-space-5)}
.tech__txt{font-size:15px;line-height:1.5}

/* ---------- Closing: one line and Ver catálogo ---------- */
.ob-end .wrap{display:grid;justify-items:center;gap:var(--moft-space-4);text-align:center}
.ob-end__t{font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:22px;line-height:1.3;color:var(--moft-text-brand-on-light)}

/* ---------- Tablet ---------- */
@media (min-width:768px){
  .ob-sec{padding-top:var(--moft-space-6)}
  .diary__rail{margin:0;padding:0 0 var(--moft-space-3)}
  .diary__rail>li{flex-basis:200px}
  .tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-4);overflow:visible;margin:0;padding:0}
  .tech__body{padding:var(--moft-space-4) var(--moft-space-5) var(--moft-space-5)}
  .cut__inner{grid-template-columns:120px minmax(0,1fr)}
  .ob-end__t{font-size:24px}
}

/* ---------- Desktop ---------- */
@media (min-width:1024px){
  /* The full day's board: rows after the first two keep the same height as Home's small cards */
  .ob--full{grid-auto-rows:minmax(260px,auto)}
  .diary__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--moft-space-3);overflow:visible;padding:0}
  .diary__rail>li{flex:none}
  .tex{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--moft-space-4)}
  .ob-end{padding-block:var(--moft-space-8) var(--moft-space-6)}
}

/* ---------- B · Cake picker: one card. Tabs on top, then the cut (photo + points) beside the cake's story:
   hook, layers, and the button as the closing line of that story. The card measures itself (container query), so it
   re-flows with its own width, not the screen's. ---------- */
.cakes{container-type:inline-size;padding:var(--moft-space-4);display:grid;gap:var(--moft-space-5)}
.cake-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--moft-space-1);padding:var(--moft-space-1);background:var(--moft-crema);border:2px solid var(--moft-cacao);border-radius:var(--moft-radius-pill)}
.cake-pick__btn{min-height:44px;padding:0 var(--moft-space-2);border:2px solid transparent;border-radius:var(--moft-radius-pill);background:transparent;color:var(--moft-text-on-light);font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.04em;line-height:1.1;cursor:pointer;transition:background-color .15s ease,color .15s ease}
@media (hover:hover){.cake-pick__btn:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}}
.cake-pick__btn[aria-pressed=true]{background:var(--moft-chocolate);color:var(--moft-crema)}
.cake-pick__btn:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:1px}
.cake-pick__btn span{display:none}
.cake[hidden]{display:none}
.cut__side{display:grid;gap:var(--moft-space-4);align-content:start;min-width:0}
/* The hook: the accent line role (Fraunces italic 600, WONK 1) */
.cake__hook{font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:22px;line-height:1.25;color:var(--moft-text-brand-on-light);text-wrap:balance}
.cake__go{justify-self:start;margin-top:var(--moft-space-2)}
/* Narrow card: the tabs share the pill equally, whatever their number; a long name wraps onto two lines inside its button */
@container (max-width:560px){
  .cake-pick{display:flex;overflow-x:auto;scrollbar-width:none}
  .cake-pick::-webkit-scrollbar{display:none}
  .cake-pick__btn{flex:1 1 0;min-width:0;padding:0 var(--moft-space-2);text-wrap:balance}
}
/* Whenever the photo sits on top (card narrower than 760px), the button is centred under the layers */
@container (max-width:759px){
  .cake__go{justify-self:center}
}
/* Wide card: cut on the left, story on the right, the story as tall as the photo */
@container (min-width:760px){
  .cut{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--moft-space-6);align-items:stretch}
  .cut__fig{display:flex;align-self:start}
  .cut__ph{aspect-ratio:4/3}
  .cut__side{align-content:space-between}
}
@media (min-width:768px){.cakes{padding:var(--moft-space-5)}}
@media (prefers-reduced-motion:reduce){.cake-pick__btn{transition:none}}