/* MOFT legal pages (Alérgenos, Privacidad, Cookies, Aviso legal). Page layer on top of home.css and cacao.css (the
   inverted theme: cacao ground, Galleta header and footer). Layout only: every colour is a --moft-* token.
   Solid colours only: states swap solid fills and text. */

.lg-date{display:inline-flex;align-items:center;min-height:30px;margin-top:var(--moft-space-5);padding:0 var(--moft-space-3);border:2px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-pill);font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;line-height:1;color:var(--moft-salty-caramel)}

/* ---------- Layout: index + text. Phones: the index sits on top. Desktop: it stays beside the text ---------- */
.lg{padding-block:var(--moft-space-5) var(--moft-space-6)}
.lg__grid{display:grid;gap:var(--moft-space-6)}
.lg__toc{align-self:start;padding:var(--moft-space-4) var(--moft-space-5) var(--moft-space-5);background:var(--moft-cacao);border:2px solid var(--moft-salty-caramel-deep);border-radius:var(--moft-radius-card)}
.lg__toc-t{margin-bottom:var(--moft-space-2);font-size:var(--moft-size-label);line-height:1.2;font-weight:var(--moft-weight-black);letter-spacing:.1em;text-transform:uppercase;color:var(--moft-salty-caramel)}
.lg__toc ol{display:grid;gap:2px}
.lg__toc a{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:baseline;gap:var(--moft-space-2);min-height:44px;padding:var(--moft-space-2) var(--moft-space-3);margin-inline:calc(-1 * var(--moft-space-3));border-radius:var(--moft-radius-small);font-size:var(--moft-size-small);font-weight:var(--moft-weight-medium);letter-spacing:.03em;line-height:1.35;color:var(--moft-crema);text-decoration:none;transition:background-color .15s ease,color .15s ease}
.lg__toc a b{font-weight:var(--moft-weight-black);color:var(--moft-salty-caramel);font-variant-numeric:tabular-nums}
@media (hover:hover){.lg__toc a:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}.lg__toc a:hover b{color:var(--moft-tiramisu)}}
/* The section being read (legal.js) */
.lg__toc a[aria-current]{background:var(--moft-salty-caramel);color:var(--moft-tiramisu);font-weight:var(--moft-weight-black)}
.lg__toc a[aria-current] b{color:var(--moft-tiramisu)}
@media (prefers-reduced-motion:reduce){.lg__toc a{transition:none}}

/* ---------- The text ---------- */
.lg__body{display:grid;gap:var(--moft-space-7);min-width:0;max-width:72ch}
.lg-sec{display:grid;gap:var(--moft-space-4);scroll-margin-top:calc(var(--moft-space-9) + 8.5vw)}
/* Section title: a numbered Salty Caramel disc (the Encarga tu tarta step numbers) and the Fraunces H2 in Crema */
.lg-sec__t{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:var(--moft-space-3);padding-bottom:var(--moft-space-3);border-bottom:2px dotted var(--moft-salty-caramel-deep);color:var(--moft-crema)}
.lg-sec__n{display:grid;place-items:center;width:40px;height:40px;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:20px;line-height:1}
.lg-sec h3{margin-top:var(--moft-space-2);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;color:var(--moft-salty-caramel)}
.lg-sec p,.lg-list li{font-size:var(--moft-size-body);line-height:1.7;color:var(--moft-crema)}
.lg-sec strong{font-weight:var(--moft-weight-black);color:var(--moft-salty-caramel)}
.lg-sec a:not(.moft-btn),.lg-panel a{color:var(--moft-salty-caramel);font-weight:var(--moft-weight-bold);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.lg-sec a:not(.moft-btn):hover,.lg-panel a:hover{color:var(--moft-crema)}
/* Lists: a small Salty Caramel drop for each point */
.lg-list{display:grid;gap:var(--moft-space-2)}
.lg-list li{position:relative;padding-left:var(--moft-space-5)}
.lg-list li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--moft-salty-caramel)}
/* Placeholders still to fill in: the Salty Caramel accent so they are easy to spot before publishing */
.todo{font-weight:var(--moft-weight-black);color:var(--moft-salty-caramel)}

/* "En corto": the summary panel, the dark twin of the Home hero box (solid Cacao, Salty Caramel border, hard panel shadow) */
.lg-panel{display:grid;gap:var(--moft-space-3);padding:var(--moft-space-5);background:var(--moft-cacao);border:3px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-card);box-shadow:var(--sh-panel) var(--moft-tiramisu)}
.lg-panel__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-salty-caramel)}
.lg-panel .lg-list li{font-size:var(--moft-size-body);line-height:1.55}

/* Data rows (Titular, cookies): key on the left, value on the right; the dotted rule of the Visítanos tables */
.lg-data{display:grid;margin:0;border-top:2px dotted var(--moft-salty-caramel-deep)}
.lg-data>div{display:grid;gap:2px var(--moft-space-4);padding-block:var(--moft-space-3);border-bottom:2px dotted var(--moft-salty-caramel-deep)}
.lg-data dt{font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-body);letter-spacing:.03em;color:var(--moft-salty-caramel)}
.lg-data dd{margin:0;font-size:var(--moft-size-body);line-height:1.55;color:var(--moft-crema);overflow-wrap:anywhere}
@media (min-width:600px){.lg-data>div{grid-template-columns:minmax(150px,32%) minmax(0,1fr);align-items:baseline}}

/* Cookie cards: one per cookie or service, a quiet Cacao card with the same dotted rows inside */
.lg-cards{display:grid;gap:var(--moft-space-4)}
.lg-card{display:grid;gap:var(--moft-space-3);padding:var(--moft-space-4) var(--moft-space-5) var(--moft-space-3);background:var(--moft-cacao);border:2px solid var(--moft-salty-caramel-deep);border-radius:var(--moft-radius-card)}
.lg-card__t{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--moft-space-2);font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:var(--moft-size-h3);line-height:1.2;color:var(--moft-crema)}
.lg-card .lg-data{border-top:0}
.lg-card .lg-data>div:last-child{border-bottom:0}
/* The tag on each card: outline word in Salty Caramel (the dark-ground twin of the Noticia tag) */
.lg-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--moft-space-3);border:2px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-pill);font-family:var(--moft-font);font-size:13px;font-weight:var(--moft-weight-black);letter-spacing:.05em;line-height:1;color:var(--moft-salty-caramel)}
.lg-tag--solid{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}

/* ---------- Alérgenos ---------- */
/* One card per allergen we work with: the round allergen icon (the same files as the Catálogo), name, where it shows up */
.alg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--moft-space-3)}
.alg-card{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:var(--moft-space-2) var(--moft-space-4);padding:var(--moft-space-4);background:var(--moft-cacao);border:2px solid var(--moft-salty-caramel-deep);border-radius:var(--moft-radius-card)}
.alg-card .alg__i{width:48px;height:48px;background:center/contain no-repeat}
.alg-card__t{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:var(--moft-size-h3);line-height:1.2;letter-spacing:.03em;color:var(--moft-crema)}
.alg-card p{margin-top:var(--moft-space-1);font-size:15px;line-height:1.5;color:var(--moft-crema)}
.alg__i[data-allergen="gluten"]{background-image:url(allergens/gluten.svg)}
.alg__i[data-allergen="huevo"]{background-image:url(allergens/huevo.svg)}
.alg__i[data-allergen="lacteos"]{background-image:url(allergens/lacteos.svg)}
.alg__i[data-allergen="frutos"]{background-image:url(allergens/frutos.svg)}
.alg__i[data-allergen="soja"]{background-image:url(allergens/soja.svg)}
.alg__i[data-allergen="cacahuete"]{background-image:url(allergens/cacahuete.svg)}
.alg__i[data-allergen="sesamo"]{background-image:url(allergens/sesamo.svg)}
.alg__i[data-allergen="sulfitos"]{background-image:url(allergens/sulfitos.svg)}
.alg__i[data-allergen="crustaceos"]{background-image:url(allergens/crustaceos.svg)}
.alg__i[data-allergen="pescado"]{background-image:url(allergens/pescado.svg)}
.alg__i[data-allergen="moluscos"]{background-image:url(allergens/moluscos.svg)}
.alg__i[data-allergen="apio"]{background-image:url(allergens/apio.svg)}
.alg__i[data-allergen="mostaza"]{background-image:url(allergens/mostaza.svg)}
.alg__i[data-allergen="altramuces"]{background-image:url(allergens/altramuces.svg)}
/* The allergens we don't use: plain outline words, no icon */
.alg-none{display:flex;flex-wrap:wrap;gap:var(--moft-space-2)}
@media (min-width:600px){.alg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Closing: a question line and its action ---------- */
.lg-ask{display:grid;gap:var(--moft-space-4);justify-items:start;padding-top:var(--moft-space-5);border-top:2px dotted var(--moft-salty-caramel-deep)}
.lg-ask__t{max-width:40ch;font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:20px;line-height:1.4;color:var(--moft-salty-caramel)}

/* ---------- The other legal pages: one floating bar, the old header pill living on in the page (Cacao fill,
   Salty Caramel border; hover and current = Salty Caramel fill, Tiramisu text; pressed = no fill, lightest text) ---------- */
.lg-more{padding-block:0 var(--moft-space-6);text-align:center}
.lg-more__t{margin-bottom:var(--moft-space-3);font-size:var(--moft-size-label);line-height:1.2;font-weight:var(--moft-weight-black);letter-spacing:.1em;text-transform:uppercase;color:var(--moft-salty-caramel)}
.lg-more__bar{display:inline-flex;flex-wrap:wrap;justify-content:center;max-width:100%;gap:var(--moft-space-1);padding:var(--moft-space-1);background:var(--moft-cacao);border:2px solid var(--moft-salty-caramel);border-radius:28px;box-shadow:var(--sh-pill) var(--moft-tiramisu)}
.lg-more__bar a{display:inline-flex;align-items:center;min-height:44px;padding:0 calc(var(--moft-space-4) - 2px);border:2px solid transparent;border-radius:var(--moft-radius-pill);font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.04em;color:var(--moft-crema);text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
@media (hover:hover){.lg-more__bar a:hover{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}}
.lg-more__bar a[aria-current]{background:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
.lg-more__bar a:active,.lg-more__bar a[aria-current]:active{background:transparent;border-color:var(--moft-salty-caramel);color:var(--moft-whipped-cream)}
@media (prefers-reduced-motion:reduce){.lg-more__bar a{transition:none}}
@media (max-width:479px){.lg-more__bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.lg-more__bar a{justify-content:center;padding:0 var(--moft-space-2)}}

/* Phones: section titles one step down (H2 28 → 24) so long legal headings don't stack three lines deep */
@media (max-width:767px){.lg-sec__t{font-size:24px}}

/* ---------- Tablet and desktop ---------- */
@media (min-width:768px){
  .lg{padding-block:var(--moft-space-6) var(--moft-space-7)}
  .lg-panel{padding:var(--moft-space-6)}
  .lg-ask{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}
@media (min-width:1024px){
  .lg__grid{grid-template-columns:270px minmax(0,1fr);gap:var(--moft-space-8);align-items:start}
  .lg__toc{position:sticky;top:calc(118px + 8.5vw);max-height:calc(100vh - 142px - 8.5vw);overflow:auto;scrollbar-width:thin}
  .lg-sec{scroll-margin-top:calc(118px + 8.5vw)}
  .alg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The more-bar already spaces the footer */
.legal .foot{margin-top:0}
/* Translated legal pages (Română, English): a line saying the Spanish text is the one that counts */
.lg-note{display:block;min-height:0;margin:var(--moft-space-3) auto 0;padding:0;border:0;border-radius:0;max-width:60ch;font-weight:var(--moft-weight-medium);letter-spacing:0;line-height:1.5;text-align:center;color:inherit}
.lg-note a{color:inherit;text-underline-offset:3px}