/* ============================================================
   MARCELO ARKAN · EL SANTUARIO — Mega Menú (estilos del plugin)
   Autocontenido, sin Tailwind. Todo va bajo .mam-root para no
   chocar con tu tema. Tokens y temas claro/oscuro por variables.
   ============================================================ */

/* ---------- TOKENS / TEMAS ----------
   Los derivados (gold-soft/deep, bordes) se calculan del acento,
   así basta cambiar --mam-gold para que todo se actualice.
   El panel de ajustes sólo sobreescribe los colores base. */
.mam-root,
.mam-root[data-theme="dark"],
.mam-overlay[data-theme="dark"] {
  --mam-bg:#13100c; --mam-bg-deep:#0b0805; --mam-panel:#1a1510; --mam-elevated:#221b13;
  --mam-text:#efe6d6; --mam-muted:#a4937a; --mam-faint:#6f6452;
  --mam-gold:#c8a868;
  --mam-gold-soft:color-mix(in srgb, var(--mam-gold) 68%, #ffffff 32%);
  --mam-gold-deep:color-mix(in srgb, var(--mam-gold) 78%, #000000 22%);
  --mam-border:color-mix(in srgb, var(--mam-gold) 16%, transparent);
  --mam-border-strong:color-mix(in srgb, var(--mam-gold) 34%, transparent);
  --mam-scrim:color-mix(in srgb, var(--mam-bg-deep) 78%, transparent);
}
.mam-root[data-theme="light"],
.mam-overlay[data-theme="light"] {
  --mam-bg:#f3ecdd; --mam-bg-deep:#e7dcc6; --mam-panel:#fbf6ec; --mam-elevated:#fff;
  --mam-text:#2a2017; --mam-muted:#6a5e4b; --mam-faint:#9b8c74;
  --mam-gold:#9a7838;
  --mam-gold-soft:color-mix(in srgb, var(--mam-gold) 72%, #ffffff 28%);
  --mam-gold-deep:color-mix(in srgb, var(--mam-gold) 80%, #000000 20%);
  --mam-border:color-mix(in srgb, var(--mam-gold) 22%, transparent);
  --mam-border-strong:color-mix(in srgb, var(--mam-gold) 40%, transparent);
  --mam-scrim:color-mix(in srgb, #3c301e 34%, transparent);
}

/* ---------- DIMENSIONES / FUENTES (configurables) ---------- */
.mam-root, .mam-overlay {
  --mam-font-display:'Cormorant Garamond', Georgia, serif;
  --mam-font-body:'Jost', system-ui, sans-serif;
  --mam-font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --mam-max:1400px;          /* ancho máximo del contenedor */
  --mam-h:76px;              /* alto del header (móvil) */
  --mam-h-lg:86px;           /* alto del header (escritorio) */
  --mam-nav-size:11px;       /* tamaño de los enlaces del nav */
  --mam-nav-tr:.22em;        /* tracking del nav */
  --mam-megalink-size:17px;  /* tamaño de los sub-enlaces */
  --mam-radius:2px;          /* radio de bordes */
  --mam-trans:280ms;         /* velocidad de transición del mega */
  --mam-drawer-w:420px;      /* ancho del drawer móvil */
  --mam-z:9000;              /* z-index base */
}

/* ---------- BASE ---------- */
.mam-root, .mam-root *, .mam-overlay, .mam-overlay * { box-sizing:border-box; }
.mam-root {
  font-family:var(--mam-font-body); color:var(--mam-text);
  -webkit-font-smoothing:antialiased; line-height:1.4;
  position:relative; /* contexto de apilamiento para elementos hijos */
}
.mam-root a { text-decoration:none; color:inherit; }
.mam-root button { font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.mam-serif { font-family:var(--mam-font-display); }
.mam-mono { font-family:var(--mam-font-mono); }
.mam-italic { font-style:italic; }
.mam-up { text-transform:uppercase; }
.mam-tr1 { letter-spacing:.32em; }
.mam-tr2 { letter-spacing:.22em; }

/* ---------- MARQUEE ---------- */
.mam-marquee { width:100%; overflow:hidden; border-bottom:1px solid var(--mam-border); background:var(--mam-bg-deep); }
.mam-marquee-track {
  display:inline-flex; white-space:nowrap; padding:8px 0;
  font-family:var(--mam-font-mono); font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--mam-faint); animation:mam-drift 60s linear infinite;
}
.mam-marquee-track span { padding:0 16px; }
@keyframes mam-drift { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .mam-marquee-track{animation:none} }

/* ---------- HEADER ---------- */
.mam-header { position:sticky; top:0; z-index:var(--mam-z); }
.mam-header.mam-not-sticky { position:relative; }
.mam-bar { border-bottom:1px solid var(--mam-border); transition:background-color .5s ease, backdrop-filter .5s ease; }
.mam-bar.mam-scrolled { background:color-mix(in oklab, var(--mam-bg) 86%, transparent); backdrop-filter:blur(14px); }
.mam-inner { max-width:var(--mam-max); margin:0 auto; padding:0 20px; }
.mam-row { display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--mam-h); transition:height .4s ease; }
.mam-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.mam-badge { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--mam-border-strong); }
.mam-badge span { font-family:var(--mam-font-display); font-size:20px; line-height:1; color:var(--mam-gold-soft); }
.mam-logo-img { height:42px; width:auto; display:block; object-fit:contain; }
.mam-logo-text { line-height:1; }
.mam-logo-name { display:block; font-family:var(--mam-font-display); font-size:15px; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; color:var(--mam-text); margin-bottom:4px; }
.mam-logo-sub { display:block; font-family:var(--mam-font-display); font-style:italic; font-size:12px; line-height:1; color:var(--mam-gold); }

.mam-nav { display:none; align-items:center; gap:28px; }
.mam-nav-item { position:relative; }
.mam-nav-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mam-font-mono); font-size:var(--mam-nav-size); letter-spacing:var(--mam-nav-tr); text-transform:uppercase;
  color:var(--mam-muted); transition:color .2s ease;
}
.mam-root[data-nav-case="normal"] .mam-nav-link { text-transform:none; }
.mam-nav-link:hover { color:var(--mam-text); }
.mam-nav-link svg { margin-top:1px; transition:transform .3s ease; }
.mam-nav-link[aria-expanded="true"] svg { transform:rotate(180deg); }
.mam-nav-link::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--mam-gold);
  transform:scaleX(0); transform-origin:center; transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.mam-nav-link:hover::after, .mam-nav-link[aria-expanded="true"]::after, .mam-nav-link[data-active="true"]::after { transform:scaleX(1); }
.mam-nav-link[data-active="true"] { color:var(--mam-text); }

.mam-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mam-icon-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--mam-border); transition:border-color .3s ease; }
.mam-icon-btn:hover { border-color:var(--mam-gold); }
.mam-icon-btn svg { color:var(--mam-muted); }
.mam-burger { width:44px; height:44px; }
.mam-burger svg { color:var(--mam-text); }
.mam-hide-desktop { display:grid; }
.mam-search-btn { display:none; }

/* ---------- MEGA MENÚ ---------- */
/*
 * position:fixed desacopla el mega del flujo del documento y lo libera de
 * cualquier overflow:hidden que el tema tenga en sus contenedores.
 * top se actualiza dinámicamente en menu.js usando getBoundingClientRect().
 */
.mam-mega-root {
  position:fixed;
  left:0; right:0;
  top:var(--mam-h-lg); /* valor inicial; JS lo actualiza en tiempo real */
  display:none;
  z-index:calc(var(--mam-z) - 1);
}
.mam-mega-panel {
  background:var(--mam-panel); border-bottom:1px solid var(--mam-border);
  box-shadow:0 24px 50px -12px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
  transition:opacity var(--mam-trans) ease, transform var(--mam-trans) cubic-bezier(.22,1,.36,1), visibility 0s linear var(--mam-trans);
}
.mam-mega-panel.mam-open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition:opacity var(--mam-trans) ease, transform var(--mam-trans) cubic-bezier(.22,1,.36,1), visibility 0s; }
.mam-mega-in { max-width:var(--mam-max); margin:0 auto; padding:36px 32px; }
.mam-root[data-mega-width="full"] .mam-mega-in { max-width:none; }

.mam-eyebrow { font-family:var(--mam-font-mono); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--mam-gold); }
.mam-mega-title { font-family:var(--mam-font-display); color:var(--mam-text); line-height:1.04; }
.mam-mega-desc { font-family:var(--mam-font-display); font-style:italic; color:var(--mam-muted); line-height:1.55; }

.mam-featured { position:relative; border:1px solid var(--mam-border-strong); border-radius:2px; overflow:hidden;
  background-color:color-mix(in oklab, var(--mam-gold) 5%, var(--mam-panel));
  background-image:repeating-linear-gradient(135deg, color-mix(in oklab,var(--mam-gold) 14%,transparent) 0, color-mix(in oklab,var(--mam-gold) 14%,transparent) 1px, transparent 1px, transparent 11px); }
.mam-featured img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.mam-featured-tag { position:absolute; top:16px; left:16px; font-family:var(--mam-font-mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-faint); background:color-mix(in oklab,var(--mam-bg) 55%, transparent); padding:4px 8px; border-radius:2px; }
.mam-featured-num { font-family:var(--mam-font-display); line-height:1; color:var(--mam-gold-soft); }
.mam-featured-name { font-family:var(--mam-font-display); font-style:italic; color:var(--mam-text); }

.mam-col-head { font-family:var(--mam-font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-gold); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--mam-border); }
.mam-col ul { list-style:none; margin:0; padding:0; }
.mam-mega-link { display:flex; align-items:center; padding:7px 0; font-family:var(--mam-font-display); font-size:var(--mam-megalink-size); color:var(--mam-muted); transition:color .2s ease, padding-left .2s ease; }
.mam-mega-link:hover { color:var(--mam-text); padding-left:6px; }
.mam-dot { color:var(--mam-gold); margin-right:10px; opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .2s ease; }
.mam-mega-link:hover .mam-dot { opacity:1; transform:scale(1); }
.mam-rom { font-family:var(--mam-font-display); font-size:13px; color:var(--mam-gold-deep); min-width:1.5em; display:inline-block; margin-right:12px; }

.mam-cta { display:inline-flex; align-items:center; gap:10px; padding:0 24px; height:48px; border:1px solid var(--mam-border-strong); border-radius:2px; color:var(--mam-text); font-family:var(--mam-font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; transition:all .25s ease; }
.mam-cta:hover { border-color:var(--mam-gold); color:var(--mam-gold-soft); }
.mam-vsep { width:1px; align-self:stretch; background:var(--mam-border); }

/* Variante I — UMBRAL */
.mam-umbral .mam-umbral-top { display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start; margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--mam-border); }
.mam-umbral .mam-featured { aspect-ratio:4/3; width:100%; }
.mam-umbral .mam-featured-inner { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; }
.mam-umbral .mam-featured-num { font-size:36px; }
.mam-umbral .mam-featured-name { font-size:20px; margin-top:4px; }
.mam-umbral .mam-mega-title { font-size:36px; margin:12px 0 16px; white-space:pre-line; }
.mam-umbral .mam-mega-desc { font-size:18px; max-width:28rem; margin-bottom:24px; }
.mam-umbral .mam-cols { display:grid; grid-template-columns:repeat(var(--mam-ncol,3),1fr); gap:32px; }

/* Variante II — PÓRTICO */
.mam-portico .mam-portico-grid { display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:stretch; }
.mam-portico .mam-portico-left { display:flex; flex-direction:column; }
.mam-portico .mam-mega-title { font-size:2.6rem; margin:12px 0 16px; white-space:pre-line; }
.mam-portico .mam-mega-desc { font-size:16px; margin-bottom:24px; }
.mam-portico .mam-featured { aspect-ratio:5/3; width:100%; margin:auto 0 24px; }
.mam-portico .mam-featured-inner { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; }
.mam-portico .mam-featured-num { font-size:34px; }
.mam-portico .mam-featured-name { font-size:18px; margin-top:4px; }
.mam-portico .mam-cols { display:grid; grid-template-columns:repeat(var(--mam-ncol,3),1fr); gap:32px; padding-left:48px; border-left:1px solid var(--mam-border); }

/* Variante III — CONSTELACIÓN */
.mam-constel .mam-banner { position:relative; border:1px solid var(--mam-border-strong); border-radius:2px; overflow:hidden; min-height:150px; margin-bottom:36px;
  background-color:color-mix(in oklab,var(--mam-gold) 5%,var(--mam-panel));
  background-image:repeating-linear-gradient(135deg, color-mix(in oklab,var(--mam-gold) 14%,transparent) 0, color-mix(in oklab,var(--mam-gold) 14%,transparent) 1px, transparent 1px, transparent 11px); }
.mam-constel .mam-banner-row { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:48px 28px 28px; }
.mam-constel .mam-mega-title { font-size:48px; line-height:1.02; }
.mam-constel .mam-featured-num { font-size:48px; }
.mam-constel .mam-featured-name { font-size:16px; margin-top:4px; }
.mam-constel .mam-cols { display:grid; grid-template-columns:repeat(var(--mam-ncol,3),1fr); gap:40px; margin-bottom:32px; }
.mam-constel .mam-foot { padding-top:24px; border-top:1px solid var(--mam-border); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.mam-constel .mam-foot .mam-mega-desc { font-size:18px; max-width:28rem; }

/* ---------- BÚSQUEDA OVERLAY ---------- */
.mam-search { position:fixed; inset:0; z-index:calc(var(--mam-z) + 300); display:none; }
.mam-search.mam-show { display:block; }
.mam-search-scrim { position:absolute; inset:0; background:var(--mam-scrim); backdrop-filter:blur(4px); }
.mam-search-wrap { position:relative; max-width:760px; margin:14vh auto 0; padding:0 24px; }
.mam-search-box { background:var(--mam-panel); border:1px solid var(--mam-border-strong); border-radius:2px; padding:28px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.mam-search-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.mam-search-head span { font-family:var(--mam-font-mono); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--mam-faint); }
.mam-search-close { font-family:var(--mam-font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-muted); transition:color .2s ease; }
.mam-search-close:hover { color:var(--mam-gold); }
.mam-search-field { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--mam-border-strong); padding-bottom:12px; }
.mam-search-field svg { color:var(--mam-gold); flex-shrink:0; }
.mam-search-input { width:100%; background:none; border:none; outline:none; font-family:var(--mam-font-display); font-size:30px; color:var(--mam-text); }
.mam-search-input::placeholder { opacity:.5; }
.mam-chips { margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mam-chips-label { font-family:var(--mam-font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-faint); margin-right:4px; }
.mam-chip { font-family:var(--mam-font-mono); font-size:11px; letter-spacing:.08em; padding:6px 12px; border-radius:2px; border:1px solid var(--mam-border); color:var(--mam-muted); transition:all .2s ease; }
.mam-chip:hover { border-color:var(--mam-gold); color:var(--mam-gold-soft); }

/* ---------- DRAWER MÓVIL ---------- */
.mam-drawer { position:fixed; inset:0; z-index:calc(var(--mam-z) + 400); visibility:hidden; }
.mam-drawer.mam-vis { visibility:visible; }
.mam-drawer-scrim { position:absolute; inset:0; background:var(--mam-scrim); opacity:0; transition:opacity .4s ease; }
.mam-drawer.mam-open .mam-drawer-scrim { opacity:1; }
.mam-drawer-panel { position:absolute; right:0; top:0; height:100%; width:100%; max-width:var(--mam-drawer-w); display:flex; flex-direction:column;
  background:var(--mam-bg); border-left:1px solid var(--mam-border); transform:translateX(100%); transition:transform .42s cubic-bezier(.22,1,.36,1); }
.mam-drawer.mam-open .mam-drawer-panel { transform:translateX(0); }
.mam-drawer[data-side="left"] .mam-drawer-panel { right:auto; left:0; border-left:none; border-right:1px solid var(--mam-border); transform:translateX(-100%); }
.mam-drawer[data-side="left"].mam-open .mam-drawer-panel { transform:translateX(0); }
.mam-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:var(--mam-h); border-bottom:1px solid var(--mam-border); flex-shrink:0; }
.mam-drawer-search { padding:16px 20px; border-bottom:1px solid var(--mam-border); flex-shrink:0; }
.mam-drawer-search label { display:flex; align-items:center; gap:12px; border:1px solid var(--mam-border-strong); border-radius:2px; padding:0 12px; height:48px; background:var(--mam-panel); }
.mam-drawer-search input { width:100%; background:none; border:none; outline:none; font-size:15px; color:var(--mam-text); }
.mam-drawer-search svg { color:var(--mam-gold); }
.mam-drawer-nav { flex:1; overflow-y:auto; padding:8px; }
.mam-drawer-foot { padding:16px 20px; border-top:1px solid var(--mam-border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.mam-drawer-foot .mam-social { display:flex; gap:16px; font-family:var(--mam-font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-muted); }
.mam-drawer-foot .mam-social a:hover { color:var(--mam-gold); }

.mam-acc-wrap { border-bottom:1px solid var(--mam-border); }
.mam-acc { width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 12px; min-height:56px; text-align:left; }
.mam-acc-label { font-family:var(--mam-font-mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-text); transition:color .2s ease; }
.mam-acc[aria-expanded="true"] .mam-acc-label { color:var(--mam-gold); }
.mam-acc-chevron { color:var(--mam-gold); transition:transform .3s ease; }
.mam-acc[aria-expanded="true"] .mam-acc-chevron { transform:rotate(180deg); }
.mam-acc-body { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1); }
.mam-acc-body-in { padding-bottom:8px; }
.mam-acc-link { display:flex; align-items:center; padding:12px 0 12px 16px; min-height:48px; font-family:var(--mam-font-display); font-size:18px; color:var(--mam-muted); }
.mam-acc-cta { display:flex; align-items:center; padding:12px 0 12px 16px; font-family:var(--mam-font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-gold); }
.mam-drawer-link { display:flex; align-items:center; padding:0 12px; min-height:56px; font-family:var(--mam-font-mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--mam-text); border-bottom:1px solid var(--mam-border); }

/* Clase que bloquea scroll del documento cuando el drawer está abierto */
html.mam-noscroll { overflow:hidden; }

/* ---------- FOCUS ---------- */
.mam-root :focus-visible, .mam-overlay :focus-visible { outline:2px solid var(--mam-gold); outline-offset:3px; border-radius:1px; }

/* ---------- RESPONSIVE ----------
   El interruptor móvil/escritorio lo genera el plugin según el
   breakpoint configurado (data-bp + msm_dynamic_css). Este bloque
   por defecto (1024px) sólo aplica cuando NO hay breakpoint propio
   (vistas previas y modo sin plugin). */
@media (min-width:1024px){
  .mam-root:not([data-bp]) .mam-row { height:var(--mam-h-lg); }
  .mam-root:not([data-bp]) .mam-inner { padding:0 32px; }
  .mam-root:not([data-bp]) .mam-logo-name { font-size:17px; }
  .mam-root:not([data-bp]) .mam-logo-sub { font-size:13px; }
  .mam-root:not([data-bp]) .mam-nav { display:flex; }
  .mam-root:not([data-bp]) .mam-search-btn { display:grid; }
  .mam-root:not([data-bp]) .mam-burger { display:none; }
  .mam-root:not([data-bp]) .mam-mega-root { display:block; }
  .mam-root:not([data-bp]) .mam-drawer { display:none; }
}