/* MOFT "cacao" theme: the site's inverted look, used by Conoce MOFT, Visítanos and the legal pages.
   Add class "theme-cacao" to <body> and load this after home.css. The rest of the site is a light page under a chocolate
   header; these pages invert it: the cacao texture is the ground, and the header becomes a Galleta ("vanilla") band with
   the Galleta drip hanging from it, so the glaze still reads as light poured over dark (never a family on its own tone).
   Every relation in the header is mirrored:
     light pages                                 cacao pages
     band  element-chocolate                     band  element-galleta (the drip's exact colour)
     pill  Cacao fill, Salty Caramel border      pill  Whipped Cream fill, Cacao border (as the light-ground chip bar)
     text  Crema                                 text  Tiramisu
     hover/current  border colour as fill        hover/current  Chocolate fill, Crema text (the kit's button pair)
     pressed  no fill, border, lightest text     pressed  no fill, Chocolate border, darkest text
     logo  Whipped Cream one-ink                 logo  Carbon one-ink (its own Whipped Cream ground = the pill)
   The footer follows (a Chocolate wave on cacao would break the "own tone" rule): Galleta wave and band, dark text,
   Dulce de Leche logo. The shared parts of home.css that assume a light ground (labels, small text, links, tags,
   buttons) get their dark-ground pairs at the end. Solid colours only: states swap solid fills and text.

   Markup per page: <body class="moft theme-cacao">, header drip moft_drip_galleta.png (2613×347), logo
   moft_wordmark_carbon_one-ink_transparent.svg, menu "moft-texture--crema", <main data-ground="dark">, footer wave
   moft_wave-flat_galleta.png, footer logo moft_full_dulce-de-leche_main_transparent.svg, .moft-footer data-ground="light". */

/* ---------- Ground: the cacao texture on the same counter-scroll layer as the crema one ---------- */
html:has(body.theme-cacao){background:var(--moft-element-cacao-texture)}
body.theme-cacao.moft{background:transparent;color:var(--moft-text-on-dark)}
.theme-cacao .ground,body.theme-cacao::before{background:var(--moft-element-cacao-texture) url("moft-design-system/elements/moft_texture_cacao.png") center/cover no-repeat}
.theme-cacao a:focus-visible,.theme-cacao button:focus-visible{outline-color:var(--moft-salty-caramel)}

/* ---------- Header: Galleta band + light pills ---------- */
/* The Galleta drip: same 85% compression as the chocolate one (11.29vw tall). Its top 86 rows are flat #F3D1A6
   (2.80vw once compressed), identical to the band, so the irregular edge starts exactly where the header ends.
   Visible part: 8.49vw, which the page head below already leaves room for (8.52vw). */
.theme-cacao .hdr-band{background:var(--moft-element-galleta);color:var(--moft-text-on-light)}
.theme-cacao .hdr-drip{top:calc(100% - 2.8vw);height:11.29vw}
.theme-cacao .hdr-band a:focus-visible,.theme-cacao .hdr-band button:focus-visible{outline-color:var(--moft-caramelo-deep)}
.theme-cacao .hdr-pill{background-color:var(--moft-whipped-cream);color:var(--moft-text-on-light);border-color:var(--moft-cacao);box-shadow:var(--sh-pill) var(--moft-chocolate-deep)}
/* Logo on the light header: no shadow of its own (the pill already has one); only the TV film over the whole box */
.theme-cacao .hdr-logo img{filter:none}
/* Language: the quiet pill keeps no shadow, but takes the Whipped Cream fill so the inactive code (Salty Caramel deep,
   4.9:1) stays readable; on the bare Galleta band it would drop to 3.5:1. Current code in Tiramisu. */
.theme-cacao .hdr-lang{box-shadow:none;color:var(--moft-salty-caramel-deep)}
.theme-cacao .hdr-lang a[aria-current]{color:var(--moft-text-on-light)}
.theme-cacao .hdr-menu[aria-expanded=true]{background:var(--moft-cacao);color:var(--moft-crema)}
.theme-cacao .hdr-menu:hover,.theme-cacao .hdr-menu:active{background:var(--moft-chocolate);color:var(--moft-crema)}
@media (min-width:1024px){
  .theme-cacao .hdr-lang{background:var(--moft-whipped-cream);border-color:var(--moft-cacao);box-shadow:var(--sh-pill) var(--moft-chocolate-deep)}
  .theme-cacao .hdr-nav a:hover,.theme-cacao .hdr-nav a[aria-current]{background:var(--moft-chocolate);color:var(--moft-crema)}
  .theme-cacao .hdr-nav a:active,.theme-cacao .hdr-nav a[aria-current]:active{background:transparent;border-color:var(--moft-chocolate);color:var(--moft-tiramisu)}
}

/* Mobile menu: the light twin of the cacao panel. Crema texture, Cacao border; its hard shadow takes the band's own
   colour (Galleta), as the dark panel's shadow takes the chocolate band's. Links: hover Chocolate fill with Crema text,
   pressed no fill with a Chocolate border and Tiramisu text. */
.theme-cacao .menu{border-color:var(--moft-cacao);color:var(--moft-text-on-light);box-shadow:var(--sh-panel) var(--moft-tiramisu)}
.theme-cacao .menu__t{color:var(--moft-text-on-light)}
.theme-cacao .menu__close{color:var(--moft-text-brand-on-light)}
.theme-cacao .menu__list a{color:var(--moft-text-on-light)}
.theme-cacao .menu__list a:hover{background:var(--moft-chocolate);color:var(--moft-crema)}
.theme-cacao .menu__list a:active{background:transparent;border-color:var(--moft-chocolate);color:var(--moft-tiramisu)}
.theme-cacao .menu a:focus-visible,.theme-cacao .menu button:focus-visible{outline-color:var(--moft-caramelo-deep)}

/* ---------- Page head on dark ---------- */
.theme-cacao .pagehead__t{color:var(--moft-text-on-dark)}
.theme-cacao .pagehead__sub{color:var(--moft-text-accent-on-dark)}

/* ---------- Footer: the Galleta twin of the chocolate footer ---------- */
.theme-cacao .moft-footer{background:var(--moft-element-galleta);color:var(--moft-text-on-light)}
.theme-cacao .foot a{color:var(--moft-text-on-light)}
.theme-cacao .foot a:hover{color:var(--moft-text-brand-on-light)}
.theme-cacao .foot a:focus-visible{outline-color:var(--moft-caramelo-deep)}
.theme-cacao .foot__h{color:var(--moft-text-brand-on-light)}
.theme-cacao .foot__week dt{color:var(--moft-text-on-light)}
.theme-cacao .foot__week dd{color:var(--moft-text-brand-on-light)}
.theme-cacao .foot__lang,.theme-cacao .foot__lang a{color:var(--moft-text-brand-on-light)}
.theme-cacao .foot__lang a[aria-current]{color:var(--moft-text-on-light);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.theme-cacao .foot__lang a:hover{color:var(--moft-text-on-light)}
.theme-cacao .foot__copy{border-top-color:var(--moft-galleta-deep);color:var(--moft-text-brand-on-light)}
.theme-cacao .foot__tag span{background:var(--moft-chocolate);color:var(--moft-crema);box-shadow:2px 4px 0 var(--moft-chocolate-deep)}
/* the current legal page in the footer links */
.theme-cacao .foot__links a[aria-current]{font-weight:var(--moft-weight-black);text-decoration-thickness:2px}


/* ---------- Shared pieces of home.css, in their dark-ground pairs ---------- */
/* Kicker labels and small text: Salty Caramel (accent text on dark, 10.4:1) */
.theme-cacao .t-label,.theme-cacao .t-small{color:var(--moft-text-accent-on-dark)}
/* Text links: Salty Caramel, hover Crema */
.theme-cacao .link{color:var(--moft-text-accent-on-dark)}
.theme-cacao .link:hover{color:var(--moft-text-on-dark)}
/* Plain tags (Noticia, Solo para llevar): the same outline word in Salty Caramel */
.theme-cacao .tag-noticia,.theme-cacao .tag-agotada{border-color:var(--moft-salty-caramel);color:var(--moft-salty-caramel)}
/* Buttons. Main and secondary: the kit's Salty Caramel fill with Tiramisu text; border and shadow in Tiramisu so the
   edge reads on the cacao ground. Generic: the outline in Salty Caramel, its shadow in Salty Caramel deep.
   The floating call button and anything sitting on a light block (photo slots, light panels) keep their own look. */
.theme-cacao :is(.btn-main,.btn-secondary){--btn-shadow:var(--moft-tiramisu);background-color:var(--moft-salty-caramel);color:var(--moft-tiramisu)}
.theme-cacao .btn-generic:not(.fab){--btn-shadow:var(--moft-salty-caramel-deep);border-color:var(--moft-salty-caramel);color:var(--moft-salty-caramel)}
.theme-cacao :is(.ph,[data-ground=light]) .btn-generic:not(.fab){--btn-shadow:var(--moft-chocolate-deep);border-color:var(--moft-chocolate-deep);color:var(--moft-chocolate-deep)}
.theme-cacao :is(.ph,[data-ground=light]) :is(.btn-main,.btn-secondary){--btn-shadow:var(--moft-chocolate-deep)}
/* Dark card: the twin of the Whipped Cream card (solid Cacao, Salty Caramel deep edge, Crema text) */
.theme-cacao .card-dark{background:var(--moft-cacao);color:var(--moft-crema);border:2px solid var(--moft-salty-caramel-deep)}