/* Tokens según GUIA_DE_MARCA_multiservicios_mendieta.md v1.0 */
:root {
  /* Marca */
  --mm-blue: #0505C1;
  --mm-blue-hover: #03039E;
  --mm-blue-light: #246FEB;
  --mm-red: #C1272D;
  --mm-red-hover: #9E1F24;
  --mm-yellow: #FDC202;
  --mm-yellow-hover: #E0AC00;
  --mm-gray: #808080;
  --mm-gray-light: #CCCCCC;
  /* Neutros */
  --mm-white: #FFFFFF;
  --mm-bg: #F5F7FA;
  --mm-text: #1F2937;
  --mm-text-muted: #4B5563;
  --mm-dark: #111827;
  /* WhatsApp oficial */
  --mm-whatsapp: #25D366;
  --mm-whatsapp-hover: #128C7E;
  --mm-whatsapp-active: #075E54;
  /* Redes oficiales */
  --mm-facebook: #0866FF;
  --mm-youtube: #FF0000;
  --mm-tiktok: #000000;
  --mm-instagram: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
  /* Tipografía */
  --mm-font-title: "Oswald", Impact, sans-serif;
  --mm-font-body: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Forma */
  --mm-shell: 1180px;
  --mm-radius: 16px;
  --mm-radius-btn: 10px;
  --mm-shadow: 0 14px 36px rgba(17, 24, 39, .08);
}

html { scroll-behavior: smooth; }
body {
  color: var(--mm-text);
  font-family: var(--mm-font-body);
  font-size: 18px;
  line-height: 1.65;
}
body, p, li, input, textarea, select { font-family: var(--mm-font-body); }
h1, h2, h3, h4,
.ct-header-menu, .menu, .mm-btn, .mm-eyebrow {
  font-family: var(--mm-font-title);
}
h1 { font-size: clamp(2.125rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--mm-dark); }
h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; line-height: 1.15; text-transform: uppercase; color: var(--mm-dark); }
h3 { font-size: clamp(1.375rem, 3vw, 1.625rem); font-weight: 600; line-height: 1.2; color: var(--mm-blue); }
h4 { font-size: clamp(1.125rem, 2.4vw, 1.25rem); font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-text); }
h5 { font-family: var(--mm-font-body); font-size: clamp(1rem, 2vw, 1.0625rem); font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; color: var(--mm-blue); }
h6 { font-family: var(--mm-font-body); font-size: clamp(.875rem, 1.8vw, .9375rem); font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--mm-text-muted); }
small, .mm-small { font-size: 15px; line-height: 1.5; color: var(--mm-text-muted); }
a { text-underline-offset: .14em; }
:focus-visible { outline: 3px solid var(--mm-yellow); outline-offset: 3px; }

.mm-shell { width: min(calc(100% - 40px), var(--mm-shell)); margin-inline: auto; }

/* Keep Blocksy header native and editable. Do not force sticky positioning here:
   Blocksy owns header/off-canvas positioning and forcing .ct-header to sticky can
   make the mobile off-canvas panel inherit the header's containing block. */
.ct-header [data-id="logo"] img,
.site-branding img,
.site-logo-container img {
  width: var(--mm-header-logo-desktop, 250px) !important;
  max-width: 100%;
  max-height: none !important;
  height: auto !important;
  object-fit: contain;
}
.ct-header-menu > li > a,
.ct-header .menu > li > a {
  font-family: "Oswald", Impact, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.ct-header-menu .mm-menu-cta > a,
.ct-header .menu .mm-menu-cta > a,
.mm-menu-cta > a {
  background: var(--mm-blue) !important;
  color: #fff !important;
  border-radius: var(--mm-radius-btn);
  transition: background .2s ease;
  padding-inline: 18px !important;
  min-height: 48px;
  height: auto !important;
  align-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}
.ct-header-menu .mm-menu-cta > a:hover,
.mm-menu-cta > a:hover { background: var(--mm-blue-hover) !important; color: #fff !important; }

/* The project footer is rendered by the child theme. Hide Blocksy's stock footer only on frontend. */
body:not(.wp-admin) footer.ct-footer { display: none !important; }

/* Hide Blocksy's automatic page hero; each page carries its own branded hero. */
body.page .hero-section { display: none; }
body.page .site-main > .ct-container,
body.page .site-main > .ct-container-full { padding-top: 0; padding-bottom: 0; }
body.page .entry-content { margin-top: 0; }

/* Full-width section utility that works even inside Blocksy's normal content container. */
.mm-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.mm-section { padding-block: 82px; }
.mm-section-alt { background: var(--mm-bg); }
.mm-page-hero {
  color: #fff;
  background: linear-gradient(135deg, #111827 0%, #172554 60%, #0505C1 100%);
  padding-block: 76px;
}
.mm-page-hero h1 { color: #fff; margin: 0 0 16px; }
.mm-page-hero .mm-lead { color: rgba(255,255,255,.9); max-width: 900px; font-size: 1.25rem; margin-bottom: 0; }

.mm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--mm-blue);
  font-family: var(--mm-font-body);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 14px;
  font-weight: 700;
}
.mm-eyebrow::before { content:""; width: 34px; height: 4px; background: var(--mm-yellow); border-radius: 99px; }
.mm-page-hero .mm-eyebrow { color: #fff; }

.mm-section h2 { margin: 0 0 14px; }
.mm-section-intro { max-width: 760px; font-size: 1.1rem; }
.mm-grid { display: grid; gap: 24px; margin-top: 38px; }
.mm-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mm-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mm-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e6ed;
  border-radius: var(--mm-radius);
  padding: 28px;
  box-shadow: var(--mm-shadow);
}
.mm-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background: var(--accent, var(--mm-blue)); }
.mm-card h2, .mm-card h3 { font-size: clamp(1.375rem, 3vw, 1.625rem); margin: 0 0 10px; }
.mm-card p:last-child { margin-bottom: 0; }
.mm-accent-blue { --accent: var(--mm-blue); }
.mm-accent-red { --accent: var(--mm-red); }
.mm-accent-yellow { --accent: var(--mm-yellow); }
.mm-accent-gray { --accent: var(--mm-gray); }
.mm-accent-blue-light { --accent: var(--mm-blue-light); }
.mm-accent-whatsapp { --accent: var(--mm-whatsapp); }
.mm-accent-facebook { --accent: var(--mm-facebook); }
.mm-icon {
  width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--accent, var(--mm-blue)); color:#fff; font-size:1.35rem; font-family:Arial,sans-serif;
  margin-bottom: 18px;
}
.mm-accent-yellow .mm-icon { color: var(--mm-dark); }
.mm-icon svg { width: 26px; height: 26px; display: block; }
.mm-card ul { margin-bottom: 0; padding-left: 1.15em; }
.mm-card li { margin: .35em 0; }
.mm-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px; margin-top:36px; }
.mm-step { background:#fff; border:1px solid #e0e5ed; border-radius:var(--mm-radius); padding:28px; }
.mm-step-number { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--mm-blue); color:#fff; font-family:"Oswald",sans-serif; font-weight:700; margin-bottom:16px; }
.mm-notice { margin-top:32px; padding:18px 20px; border-left:5px solid var(--mm-yellow); background:#fff8dd; border-radius:0 10px 10px 0; color:#453900; }
.mm-split { display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:56px; }
.mm-check-list { list-style:none; padding:0; margin:0; }
.mm-check-list li { position:relative; padding-left:30px; margin:10px 0; }
.mm-check-list li::before { content:"✓"; position:absolute; left:0; color:var(--mm-blue); font-weight:700; }

.mm-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
/* Botones estándar (guía §4) */
.mm-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:14px 26px;
  border-radius:var(--mm-radius-btn); text-decoration:none !important; text-transform:uppercase; letter-spacing:.03em;
  font-family:var(--mm-font-title); font-weight:600; font-size:16px; line-height:1.1; border:2px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mm-btn svg { width:20px; height:20px; fill:currentColor; flex:none; }
.mm-btn:focus-visible { outline:3px solid var(--mm-yellow); outline-offset:3px; }
.mm-btn-primary { background:var(--mm-blue); color:#fff !important; }
.mm-btn-primary:hover { background:var(--mm-blue-hover); color:#fff !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(5,5,193,.3); }
.mm-btn-outline { background:#fff; border-color:var(--mm-red); color:var(--mm-red) !important; }
.mm-btn-outline:hover { background:var(--mm-red); color:#fff !important; }
.mm-btn-accent { background:var(--mm-yellow); color:var(--mm-text) !important; }
.mm-btn-accent:hover { background:var(--mm-yellow-hover); color:var(--mm-text) !important; }
.mm-btn-ghost { background:transparent; border-color:#fff; color:#fff !important; }
.mm-btn-ghost:hover { background:#fff; color:var(--mm-blue) !important; }
.mm-btn[disabled], .mm-btn.is-disabled { background:var(--mm-gray-light); border-color:transparent; color:var(--mm-text-muted) !important; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none; }

/* CTA de WhatsApp: verde y blanco oficial (guía §5). Incluye el botón del hero slider. */
.mm-btn-whatsapp,
.mmhs-btn.mmhs-btn-secondary {
  background:var(--mm-whatsapp); color:#fff !important; font-weight:700; font-size:18px;
  box-shadow:0 6px 16px rgba(37,211,102,.35);
}
.mm-btn-whatsapp:hover,
.mmhs-btn.mmhs-btn-secondary:hover {
  background:var(--mm-whatsapp-hover); color:#fff !important; transform:translateY(-2px); box-shadow:0 10px 22px rgba(18,140,126,.4);
}
.mm-btn-whatsapp:active,
.mmhs-btn.mmhs-btn-secondary:active { background:var(--mm-whatsapp-active); transform:none; }

/* El botón 2 del slider solo es verde si lleva a WhatsApp; si no, es "cotización" (contorno rojo). */
.mmhs-btn.mmhs-btn-secondary:not([href*="wa.me"]):not([href*="whatsapp"]) {
  background:#fff; border-color:var(--mm-red); color:var(--mm-red) !important; font-size:16px; font-weight:600; box-shadow:none;
}
.mmhs-btn.mmhs-btn-secondary:not([href*="wa.me"]):not([href*="whatsapp"]):hover { background:var(--mm-red); color:#fff !important; }

/* Slider: mismos hovers que los botones estándar */
.mmhs-btn.mmhs-btn-primary:hover { background:var(--mm-blue-hover); }
.mmhs-btn.mmhs-btn-tertiary:hover { background:var(--mm-red); color:#fff !important; }

/* Íconos de redes en su color oficial (guía §6) */
.mm-social { display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; margin:0; }
.mm-social a {
  width:40px; height:40px; border-radius:50%; display:inline-grid; place-items:center; color:#fff !important;
  transition:opacity .2s ease, transform .2s ease;
}
.mm-social a:hover { opacity:.85; transform:translateY(-2px); }
.mm-social svg { width:20px; height:20px; fill:currentColor; }
.mm-social-whatsapp { background:var(--mm-whatsapp); }
.mm-social-whatsapp:hover { background:var(--mm-whatsapp-hover); opacity:1 !important; }
.mm-social-facebook { background:var(--mm-facebook); }
.mm-social-instagram { background:var(--mm-instagram); }
.mm-social-tiktok { background:var(--mm-tiktok); }
.mm-social-youtube { background:var(--mm-youtube); }
.mm-social-google { background:#fff; }
.mm-social-phone { background:var(--mm-blue); }

.mm-contact-card { text-align:center; }
.mm-contact-card .mm-icon { margin-inline:auto; }
.mm-contact-card a { font-weight:600; }

/* Footer */
.mm-site-footer { background:var(--mm-footer-bg, var(--mm-dark)); color:var(--mm-footer-text, rgba(255,255,255,.84)); }
.mm-footer-grid { display:grid; grid-template-columns:1.35fr 1fr .9fr 1fr; gap:42px; padding-block:62px 52px; }
.mm-footer-logo-link { display:inline-flex; border-radius:10px; }
.mm-footer-logo-link.has-card { background:var(--mm-footer-logo-card, #fff); padding:7px; }
.mm-footer-logo { width:min(var(--mm-footer-logo-width, 330px),100%); max-width:100%; height:auto; display:block; }
.mm-footer-slogan { color:var(--mm-footer-accent, var(--mm-yellow)); font-weight:600; margin:18px 0 12px; }
.mm-site-footer h2 { color:var(--mm-footer-heading, #fff); font-family:"Oswald",sans-serif; font-size:1.25rem; text-transform:uppercase; letter-spacing:.04em; margin:0 0 16px; }
.mm-site-footer ul { list-style:none; padding:0; margin:0; }
.mm-site-footer li { margin:7px 0; }
.mm-site-footer a { color:var(--mm-footer-text, rgba(255,255,255,.92)); text-decoration:none; }
.mm-site-footer a:hover { color:var(--mm-footer-accent, var(--mm-yellow)); }
.mm-footer-contact a { display:flex; align-items:center; gap:10px; }
.mm-footer-contact svg {
  width:36px; height:36px; padding:8px; border-radius:50%; box-sizing:border-box;
  fill:#fff; background:var(--mm-blue); flex:none; transition:background-color .2s ease, transform .2s ease;
}
.mm-footer-contact a[href^="https://wa.me"] svg,
.mm-footer-contact a[href*="whatsapp"] svg { background:var(--mm-whatsapp); }
.mm-footer-contact a[href*="facebook.com"] svg { background:var(--mm-facebook); }
.mm-footer-contact a[href*="google"] svg,
.mm-footer-contact a[href*="g.page"] svg,
.mm-footer-contact a[href*="goo.gl"] svg { background:#fff; fill:#4285F4; }
.mm-footer-contact a:hover svg { transform:translateY(-2px); }
.mm-footer-contact a.mm-footer-review svg { background:var(--mm-yellow); fill:var(--mm-dark); }
.mm-footer-contact a.mm-footer-review:hover svg { background:var(--mm-yellow-hover); }

/* El footer puede ser azul (Personalizador): el teléfono va en círculo blanco para no perderse. */
.mm-footer-contact a[href^="tel:"] svg { background:#fff; fill:var(--mm-blue); }
.mm-footer-contact a[href^="tel:"]:hover svg { background:var(--mm-yellow); fill:var(--mm-dark); }
.mm-footer-contact a[href^="https://wa.me"]:hover svg,
.mm-footer-contact a[href*="whatsapp"]:hover svg { background:var(--mm-whatsapp-hover); }
.mm-footer-bottom { border-top:1px solid color-mix(in srgb, var(--mm-footer-text, #fff) 18%, transparent); padding:18px 0; color:var(--mm-footer-text, rgba(255,255,255,.66)); opacity:.78; font-size:.9rem; }

.mm-footer-bottom-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }
.mm-footer-bottom a { text-decoration:underline; text-underline-offset:.2em; }

/* Blog: CTA al final de cada entrada */
.mm-post-cta {
  margin-top:48px; padding:32px 28px; border-radius:var(--mm-radius);
  background:var(--mm-bg); border-left:6px solid var(--mm-blue);
}
.mm-post-cta h2 { margin:0 0 10px; }
.mm-post-cta p:not(.mm-eyebrow) { margin:0; }
.mm-post-cta .mm-actions { margin-top:20px; }

/* Páginas legales: ancho de lectura cómodo */
.mm-legal { max-width:820px; }
.mm-legal h2 { font-size:clamp(1.375rem, 3vw, 1.625rem); margin:40px 0 12px; }
.mm-legal ul { padding-left:1.2em; }
.mm-legal li { margin:.35em 0; }

@media (max-width: 1050px) {
  .mm-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mm-footer-grid { grid-template-columns:1.3fr 1fr 1fr; }
  .mm-footer-grid > div:last-child { grid-column:2 / 4; }
}
@media (max-width: 850px) {
  .ct-header [data-id="logo"] img, .site-branding img, .site-logo-container img { width: var(--mm-header-logo-tablet, 220px) !important; }
  .mm-steps, .mm-split { grid-template-columns:1fr; }
  .mm-section { padding-block:64px; }
  .ct-header-menu .mm-menu-cta > a, .mm-menu-cta > a { margin-left:0; margin-top:8px; }
}
@media (max-width: 650px) {
  body { font-size:17px; }
  .mm-shell { width:min(calc(100% - 28px),var(--mm-shell)); }
  .mm-grid-3, .mm-grid-2, .mm-footer-grid { grid-template-columns:1fr; }
  .mm-footer-grid > div:last-child { grid-column:auto; }
  .mm-actions .mm-btn { width:100%; }
  .ct-header [data-id="logo"] img, .site-branding img, .site-logo-container img { width: var(--mm-header-logo-mobile, 180px) !important; }
}


/* Mobile menu safety layer --------------------------------------------------
   Keep Blocksy's native off-canvas functional above full-bleed hero content. */
@media (max-width: 999.98px) {
  #offcanvas.ct-panel {
    position: fixed !important;
    inset: var(--admin-bar, 0px) 0 0 0 !important;
    z-index: 9999999 !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - var(--admin-bar, 0px)) !important;
  }

  #offcanvas .ct-panel-inner {
    min-height: 100% !important;
    background: #ffffff !important;
  }

  #offcanvas .ct-panel-actions {
    min-height: 72px;
    flex: 0 0 auto;
  }

  #offcanvas .ct-panel-content {
    min-height: 0;
    flex: 1 1 auto;
    background: #ffffff;
  }

  #offcanvas .ct-panel-content-inner {
    width: 100%;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #offcanvas .mobile-menu,
  #offcanvas .mobile-menu > ul {
    width: 100%;
  }

  #offcanvas .mobile-menu li {
    width: 100%;
    display: block;
  }

  #offcanvas .mobile-menu a,
  #offcanvas .mobile-menu .ct-menu-link {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    color: var(--mm-dark) !important;
    font-family: "Oswald", Impact, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .025em;
  }

  #offcanvas .mobile-menu .current-menu-item > a,
  #offcanvas .mobile-menu a:hover {
    color: var(--mm-blue) !important;
  }

  #offcanvas .ct-toggle-close {
    color: var(--mm-red) !important;
  }
}

/* Mobile menu compact refinement v1.5 --------------------------------------
   Narrower drawer, smaller typography and a permanently visible close button.
   Keep this layer after the generic Blocksy off-canvas safety rules above. */
@media (max-width: 650px) {
  #offcanvas.ct-panel {
    --side-panel-width: 300px !important;
    --panel-padding: 0px !important;
    --vertical-alignment: flex-start !important;
  }

  #offcanvas .ct-panel-inner {
    width: min(78vw, 300px) !important;
    max-width: 300px !important;
    min-height: calc(100dvh - var(--admin-bar, 0px)) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    background: #fff !important;
    box-shadow: -12px 0 30px rgba(17, 24, 39, .16) !important;
  }

  /* The close control must never be pushed out of view by menu content. */
  #offcanvas .ct-panel-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 20 !important;
    width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
  }

  #offcanvas .ct-panel-actions .ct-panel-heading {
    display: none !important;
  }

  #offcanvas .ct-toggle-close {
    --toggle-button-size: 42px !important;
    --toggle-button-padding: 11px !important;
    --toggle-button-margin-end: 0px !important;
    --toggle-button-margin-block: 0px !important;
    --theme-icon-size: 17px !important;
    --theme-icon-color: var(--mm-red) !important;
    --toggle-button-background: rgba(193, 39, 45, .07) !important;
    --toggle-button-radius: 50% !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    color: var(--mm-red) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
  }

  #offcanvas .ct-toggle-close .ct-icon,
  #offcanvas .ct-toggle-close svg {
    width: 17px !important;
    height: 17px !important;
    fill: var(--mm-red) !important;
    color: var(--mm-red) !important;
  }

  #offcanvas .ct-panel-content {
    justify-content: flex-start !important;
    --vertical-alignment: flex-start !important;
    padding-top: 0 !important;
  }

  #offcanvas .ct-panel-content-inner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 64px 18px 24px !important;
    overflow-y: auto !important;
  }

  #offcanvas .mobile-menu,
  #offcanvas .mobile-menu > ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #offcanvas .mobile-menu li {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(17, 24, 39, .07);
  }

  #offcanvas .mobile-menu li:last-child {
    border-bottom: 0;
  }

  #offcanvas .mobile-menu a,
  #offcanvas .mobile-menu .ct-menu-link {
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 4px !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    letter-spacing: .015em !important;
    font-weight: 600 !important;
  }

  #offcanvas .mobile-menu .mm-menu-cta > a,
  #offcanvas .mm-menu-cta > a {
    width: 100% !important;
    min-height: 42px !important;
    margin: 12px 0 0 !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }
}

@media (max-width: 390px) {
  #offcanvas.ct-panel {
    --side-panel-width: 280px !important;
  }

  #offcanvas .ct-panel-inner {
    width: min(76vw, 280px) !important;
    max-width: 280px !important;
  }

  #offcanvas .ct-panel-content-inner {
    padding-inline: 16px !important;
  }

  #offcanvas .mobile-menu a,
  #offcanvas .mobile-menu .ct-menu-link {
    font-size: 16px !important;
    min-height: 38px !important;
    padding-block: 8px !important;
  }
}

/* Mobile menu content-height refinement v1.6 -------------------------------
   Keep the off-canvas overlay full viewport for click-outside behavior,
   but let the visible white drawer end shortly after the last menu item. */
@media (max-width: 650px) {
  #offcanvas.ct-panel {
    align-items: flex-start !important;
    background: transparent !important;
  }

  #offcanvas .ct-panel-inner {
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--admin-bar, 0px) - 12px) !important;
    align-self: flex-start !important;
    overflow: hidden !important;
    border-radius: 0 0 0 16px !important;
  }

  #offcanvas .ct-panel-content {
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  #offcanvas .ct-panel-content-inner {
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--admin-bar, 0px) - 12px) !important;
    padding: 58px 18px 16px !important;
    overflow-y: auto !important;
  }

  #offcanvas .mobile-menu,
  #offcanvas .mobile-menu > ul {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 390px) {
  #offcanvas .ct-panel-content-inner {
    padding: 56px 16px 14px !important;
  }
}