/* MOFT cookie consent (consent.js). Loaded on every page after home.css. Layout only: every colour is a --moft-* token.
   Bar: a small floating Cacao panel at the bottom, the dark menu's build (Salty Caramel border, Crema text), so it reads
   on the light pages and, through its border, on the cacao ones. Rejecting and accepting share one button look: the
   kit's Salty Caramel fill with Tiramisu text. "Configurar" is a text link. Solid colours only: states swap solid fills. */

.ck{position:fixed;z-index:16;left:var(--moft-space-3);right:var(--moft-space-3);bottom:calc(var(--moft-space-3) + env(safe-area-inset-bottom));max-width:1040px;margin-inline:auto;display:grid;gap:var(--moft-space-3);padding:var(--moft-space-3) var(--moft-space-4);background:var(--moft-cacao);color:var(--moft-crema);border:3px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-card);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);font-family:var(--moft-font);transition:opacity .3s var(--moft-ease-out),transform .3s var(--moft-ease-out)}
/* In and out the same way: rises from the bottom edge, leaves back through it (consent.js adds .ck--out before removing it). */
@starting-style{.ck{opacity:0;transform:translateY(16px)}.ck--still{opacity:1;transform:none}}
.ck--out{opacity:0;transform:translateY(16px);transition-duration:.2s}
@media (prefers-reduced-motion:reduce){.ck{transition:opacity .2s ease}@starting-style{.ck{transform:none}}.ck--out{transform:none}}
.ck__msg{display:flex;align-items:center;gap:var(--moft-space-3)}
.ck__ic{flex:none;width:36px;height:36px}
.ck__ic-body{fill:var(--moft-salty-caramel)}
.ck__ic-chip{fill:var(--moft-tiramisu)}
.ck__text{margin:0;font-size:13px;line-height:1.45;font-weight:var(--moft-weight-medium);letter-spacing:.02em}
.ck a,.ck-prefs a{color:var(--moft-salty-caramel);font-weight:var(--moft-weight-black);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ck a:hover,.ck-prefs a:hover{color:var(--moft-crema)}
.ck :focus-visible,.ck-prefs :focus-visible{outline:3px solid var(--moft-salty-caramel);outline-offset:2px;border-radius:var(--moft-radius-pill)}
/* Aceptar and Modificar side by side */
.ck__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:stretch;gap:var(--moft-space-2)}
/* One look for every choice button (bar and settings): equal weight, so no option is pushed. Compact size. */
.ck-btn{--btn-shadow:var(--moft-tiramisu);justify-content:center;min-height:40px;padding:8px 16px;border:3px solid var(--moft-tiramisu);background:var(--moft-salty-caramel);background-clip:padding-box;color:var(--moft-tiramisu);font-size:var(--moft-size-small);text-transform:none}
.moft-btn.ck-btn{margin:0 2px 4px 0}
/* "Modificar": the quieter choice, no fill, lighter border and text */
.moft-btn.ck-btn--quiet{--btn-shadow:transparent;background:none;border-color:var(--moft-salty-caramel-deep);color:var(--moft-salty-caramel)}
.moft-btn.ck-btn--quiet:hover{background:none;color:var(--moft-crema);border-color:var(--moft-crema)}

/* The floating call button rides above the bar while it is open (consent.js sets --ck-h) */
.ck-on .fab{bottom:calc(var(--ck-h,120px) + var(--moft-space-3) + var(--moft-space-4) + env(safe-area-inset-bottom))}

@media (min-width:768px){
  .ck{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--moft-space-5);padding:var(--moft-space-3) var(--moft-space-3) var(--moft-space-3) var(--moft-space-5);bottom:calc(var(--moft-space-4) + env(safe-area-inset-bottom))}
  .ck__text{font-size:var(--moft-size-small);max-width:62ch}
  .ck__actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ck-btn{min-width:144px}
  .ck-on .fab{bottom:calc(var(--ck-h,80px) + var(--moft-space-4) + var(--moft-space-5))}
}
/* With room: "Modificar" left, "Aceptar" right (Aceptar stays first in the reading order) */
@media (min-width:900px){
  .ck__actions{grid-template-columns:repeat(2,auto);align-items:center}
  .moft-btn.ck-btn--quiet{order:-1}
}

/* ---------- Second layer: settings dialog, the dark menu panel build ---------- */
.ck-prefs{width:min(92vw,520px);max-height:88dvh;overflow:auto;margin:auto;padding:var(--moft-space-5);border:3px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-card);background:var(--moft-cacao) url("moft-design-system/elements/moft_texture_cacao.png") center/cover;color:var(--moft-crema);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);font-family:var(--moft-font)}
.ck-prefs::backdrop{background:color-mix(in srgb,var(--moft-tiramisu) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ck-prefs__head{display:flex;align-items:center;justify-content:space-between;gap:var(--moft-space-4);margin-bottom:var(--moft-space-3)}
.ck-prefs__t{margin:0;font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:26px;line-height:1.1;color:var(--moft-crema)}
.ck-prefs__close{min-height:44px;padding:0 var(--moft-space-2);background:none;border:0;cursor:pointer;font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;color:var(--moft-salty-caramel);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ck-prefs__intro{margin:0 0 var(--moft-space-4);font-size:15px;line-height:1.5}
.ck-cats{display:grid;margin:0;padding:0;list-style:none;border-top:2px dotted var(--moft-salty-caramel-deep)}
.ck-cat{display:grid;gap:var(--moft-space-1);padding-block:var(--moft-space-4);border-bottom:2px dotted var(--moft-salty-caramel-deep)}
.ck-cat__head{display:flex;align-items:center;justify-content:space-between;gap:var(--moft-space-4)}
.ck-cat__t{margin:0;font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:var(--moft-size-h3);line-height:1.2;letter-spacing:.03em;color:var(--moft-salty-caramel)}
.ck-cat__d{margin:0;font-size:14px;line-height:1.5}
.ck-cat__always{flex:none;display:inline-flex;align-items:center;min-height:28px;padding:0 var(--moft-space-3);border-radius:var(--moft-radius-pill);background:var(--moft-salty-caramel);color:var(--moft-tiramisu);font-size:12px;font-weight:var(--moft-weight-black);letter-spacing:.05em}
/* Switch: off = Salty Caramel outline with a Salty Caramel knob on the left; on = Salty Caramel fill, Tiramisu knob on the right */
.ck-switch{flex:none;appearance:none;-webkit-appearance:none;position:relative;width:52px;height:30px;margin:0;border:2px solid var(--moft-salty-caramel);border-radius:var(--moft-radius-pill);background:transparent;cursor:pointer;transition:background-color .15s ease}
.ck-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--moft-salty-caramel);transition:transform .15s ease,background-color .15s ease}
.ck-switch:checked{background:var(--moft-salty-caramel)}
.ck-switch:checked::after{transform:translateX(22px);background:var(--moft-tiramisu)}
.ck-switch:focus-visible{outline:3px solid var(--moft-salty-caramel);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ck-switch,.ck-switch::after{transition:none}}
.ck-prefs__actions{display:grid;gap:var(--moft-space-3);margin-top:var(--moft-space-5)}
@media (min-width:480px){.ck-prefs__actions{grid-template-columns:repeat(3,minmax(0,1fr))}.ck-prefs__actions .ck-btn{padding-inline:var(--moft-space-2)}}

/* Footer "Configurar cookies": a link like its neighbours */
.foot__links [data-cookie-prefs]{cursor:pointer}
