/* MOFT Conoce MOFT. Page layer on top of home.css (the shared site base: header, footer, buttons, page head, section heads,
   photo placeholders and treatment). 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. */

/* ---------- 2 · La elaboración: headline, photo and text. Phones stack them; desktop puts the text left, the photo right ---------- */
.ab-story{padding-top:var(--moft-space-5)}
.ab-story__grid{display:grid;gap:var(--moft-space-5)}
.ab-story__head{display:grid;gap:var(--moft-space-2)}
.ab-story__t{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:32px;line-height:1.1;letter-spacing:.02em;text-wrap:balance;color:var(--moft-text-on-light)}
.ab-story__ph{aspect-ratio:4/3;width:100%}
.ab-story__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.ab-story__text{display:grid;gap:var(--moft-space-4);max-width:58ch;font-size:var(--moft-size-body);line-height:1.65}
/* Closing line of the story: the accent line role (Fraunces italic 600, WONK 1), with a short dotted rule above */
.ab-story__line{padding-top:var(--moft-space-4);border-top:2px dotted var(--moft-chocolate-light);font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:21px;line-height:1.35;color:var(--moft-text-brand-on-light);text-wrap:balance}

/* ---------- 3 · Las tres ideas: dark cacao-texture panel (the Home "Encarga tu tarta" build), numbered ideas ---------- */
.ideas{display:grid;gap:var(--moft-space-6);padding:var(--moft-space-6) var(--moft-space-5);border:3px solid var(--moft-cacao);border-radius:var(--moft-radius-card);color:var(--moft-crema)}
.ideas__head{text-align:center}
.ideas__kicker{margin-bottom:var(--moft-space-2);color:var(--moft-salty-caramel)}
.ideas .t-h2{color:var(--moft-crema)}
.ideas__list{display:grid;gap:0}
/* Phones: one idea per row, the numeral on the left (as in the wireframe), a dotted Salty Caramel deep rule between rows */
.idea{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--moft-space-4);align-items:start;padding-block:var(--moft-space-5)}
.idea:not(:last-child){border-bottom:3px dotted var(--moft-salty-caramel-deep)}
.idea:first-child{padding-top:0}
.idea:last-child{padding-bottom:0}
/* Numeral: the step disc from Home (Salty Caramel fill, Tiramisu figure, hard Tiramisu shadow) */
.idea__n{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--moft-radius-pill);background:var(--moft-salty-caramel);color:var(--moft-tiramisu);box-shadow:var(--sh-pill) var(--moft-tiramisu);font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:26px;line-height:1}
.idea__body{display:grid;gap:var(--moft-space-2)}
.idea__t{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:24px;line-height:1.15;letter-spacing:.02em;color:var(--moft-salty-caramel)}
.idea p{max-width:40ch;line-height:1.55;color:var(--moft-crema)}
/* Scroll reveal: the ideas rise in one after another (only with JS, never under reduced motion) */
.js .idea{opacity:0;transform:translateY(22px);transition:opacity .6s ease calc(var(--i) * .18s),transform .6s var(--moft-ease-out) calc(var(--i) * .18s)}
.js .idea.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .idea{opacity:1;transform:none;transition:none}}

/* ---------- 4 · ¿Qué significa moft?: hidden until tapped. The toggle is a light pill (the chip bar build) with the glint ---------- */
.ab-word{padding-block:var(--moft-space-4)}
.ab-word .wrap{display:flex;justify-content:center}
.word{width:100%;max-width:560px;display:grid;justify-items:center}
.word__sum{display:inline-flex;align-items:center;gap:var(--moft-space-2);min-height:48px;padding:0 var(--moft-space-5) 0 var(--moft-space-4);border:2px solid var(--moft-cacao);border-radius:var(--moft-radius-pill);background:var(--moft-whipped-cream);color:var(--moft-text-on-light);box-shadow:var(--sh-pill) var(--moft-chocolate-deep);font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;cursor:pointer;list-style:none;user-select:none;transition:background-color .15s ease,color .15s ease,transform .12s ease,box-shadow .12s ease}
.word__sum::-webkit-details-marker{display:none}
.word__glint{width:20px;height:20px;flex:none}
.word__chev{width:9px;height:9px;margin:0 0 3px var(--moft-space-1);border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);transition:transform .25s ease}
.word[open] .word__chev{transform:translateY(3px) rotate(-135deg)}
@media (hover:hover){.word__sum:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}}
.word__sum:active{transform:translate(3px,4px);box-shadow:none}
/* Open: the kit's other button pair (Salty Caramel fill, Tiramisu text), so the Chocolate glint stays visible */
.word[open] .word__sum{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
.word__sum:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:3px}
/* The definition: a dictionary entry on a Whipped Cream card */
.word__card{width:100%;margin-top:var(--moft-space-5);padding:var(--moft-space-5) var(--moft-space-5) var(--moft-space-6);display:grid;gap:var(--moft-space-3);border:2px solid var(--moft-cacao)}
.word[open] .word__card{animation:word-in .3s var(--moft-ease-out)}
/* Closing fades the card instead of cutting it (browsers without ::details-content just close instantly). */
.word::details-content{opacity:0;transition:opacity .15s var(--moft-ease-out),content-visibility .15s allow-discrete}
.word[open]::details-content{opacity:1}
@keyframes word-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.word[open] .word__card{animation:none}.word__chev,.word__sum{transition:none}}
.word__entry{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--moft-space-3);row-gap:var(--moft-space-1);padding-bottom:var(--moft-space-3);border-bottom:2px dotted var(--moft-chocolate-light)}
.word__w{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-h1);line-height:1;letter-spacing:.02em;color:var(--moft-text-on-light)}
.word__gram{font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:17px;color:var(--moft-accent-text-on-light)}
.word__defs{display:grid;gap:var(--moft-space-2);padding-left:var(--moft-space-5);list-style:decimal;font-size:var(--moft-size-body);line-height:1.5}
.word__defs li::marker{font-weight:var(--moft-weight-black);color:var(--moft-text-brand-on-light)}
.word__eg{font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:19px;color:var(--moft-text-brand-on-light)}

/* ---------- 5 · En Instagram: six posts. Three columns on phones, six on desktop. Each opens Instagram ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-2)}
/* A post lifts like the buttons on hover (1px up-left, hard shadow) and presses back in */
.ig-post{display:block;border-radius:var(--moft-radius-small);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.ig-post__ph{aspect-ratio:4/5;width:100%;padding:var(--moft-space-1) var(--moft-space-2);font-size:10px}
@media (hover:hover){.ig-post:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-panel) var(--moft-chocolate-deep)}}
.ig-post:active{transform:translate(2px,3px);box-shadow:none}
@media (prefers-reduced-motion:reduce){.ig-post{transition:none}}
.ab-more{display:flex;justify-content:center;margin-top:var(--moft-space-6)}

/* ---------- 6 · Opiniones en Google ---------- */
/* Stars: one row of five drawn with a mask; the fill stops at --r of 5 (Caramelo), the rest in Chocolate light.
   A rating marker, not a brand icon: it never stands in for one. */
.stars{--s:22px;display:inline-block;flex:none;width:calc(var(--s) * 5 * 28 / 24);height:var(--s);background:linear-gradient(90deg,var(--moft-caramelo) calc(var(--r,5) / 5 * 100%),var(--moft-chocolate-light) 0);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 1.5l3.1 6.9 7.4.7-5.6 5 1.7 7.4L12 17.6l-6.6 3.9 1.7-7.4-5.6-5 7.4-.7z'/%3E%3C/svg%3E") 0 0/calc(var(--s) * 28 / 24) var(--s) repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 1.5l3.1 6.9 7.4.7-5.6 5 1.7 7.4L12 17.6l-6.6 3.9 1.7-7.4-5.6-5 7.4-.7z'/%3E%3C/svg%3E") 0 0/calc(var(--s) * 28 / 24) var(--s) repeat-x}
.stars--sm{--s:17px}
.reviews{display:grid;gap:var(--moft-space-5)}
.score{display:flex;align-items:center;gap:var(--moft-space-4)}
.score__n{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-display);line-height:1;letter-spacing:.01em;color:var(--moft-text-on-light);font-variant-numeric:tabular-nums}
.score__meta{display:grid;gap:var(--moft-space-1)}
.reviews__list{display:grid;gap:var(--moft-space-3)}
.reviews__list>li{display:flex}
.review{display:flex;flex-direction:column;gap:var(--moft-space-3);width:100%;padding:var(--moft-space-5)}
.review__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--moft-space-3)}
.review__name{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}
.review__when{font-size:var(--moft-size-small);font-weight:var(--moft-weight-medium);letter-spacing:.05em;color:var(--moft-text-brand-on-light)}
.review__txt{font-size:var(--moft-size-body);line-height:1.55}

/* ---------- 7 · Closing: the tagline and two ways on ---------- */
.ab-end .wrap{display:grid;justify-items:center;gap:var(--moft-space-5);text-align:center}
.ab-end__t{max-width:28ch;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);text-wrap:balance}
.ab-end__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--moft-space-4)}

/* ---------- Tablet ---------- */
@media (min-width:768px){
  .ab-story{padding-top:var(--moft-space-6)}
  .ab-story__t{font-size:var(--moft-size-h1)}
  .ideas{padding:var(--moft-space-7) var(--moft-space-6)}
  .ig-grid{gap:var(--moft-space-3)}
  .reviews__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-4)}
  .ab-end__t{font-size:24px}
}

/* ---------- Desktop ---------- */
@media (min-width:1024px){
  /* Text on the left, the photo on the right, as in the wireframe */
  .ab-story__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"head ph" "text ph";column-gap:var(--moft-space-8);row-gap:var(--moft-space-5);align-items:start}
  .ab-story__head{grid-area:head;align-self:end}
  .ab-story__text{grid-area:text}
  .ab-story__ph{grid-area:ph;aspect-ratio:4/5;align-self:center}
  .ab-story__t{font-size:var(--moft-size-display);line-height:1.02}
  /* Ideas: three columns, the numeral on top, dotted rules between columns */
  .ideas{padding:var(--moft-space-8) var(--moft-space-7);gap:var(--moft-space-7)}
  .ideas__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .idea{grid-template-columns:none;row-gap:var(--moft-space-4);padding:0 var(--moft-space-6)}
  .idea:not(:last-child){border-bottom:0;border-right:3px dotted var(--moft-salty-caramel-deep)}
  .idea:first-child{padding-left:0}
  .idea:last-child{padding-right:0}
  .idea__n{width:56px;height:56px;font-size:30px}
  .ig-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  /* Reviews: the score on the left, three reviews on the right */
  .reviews{grid-template-columns:220px minmax(0,1fr);gap:var(--moft-space-6);align-items:start}
  .score{flex-direction:column;align-items:flex-start;gap:var(--moft-space-3);padding-top:var(--moft-space-2)}
  .score__n{font-size:72px}
  .ab-end{padding-block:var(--moft-space-8) var(--moft-space-6)}
}