/* ==========================================================================
   MEGAMENÚ DE SERVICIOS — Cantabria Marketing
   Usa la paleta del header (crema / bosque / coral / salvia / mostaza) y las
   fuentes ya cargadas en functions.php (Bricolage, IBM Plex Mono, Fraunces).
   El contenido se gestiona en el admin → "Megamenú" (inc/megamenu.php).
   ========================================================================== */

.cm-mega{
  --cm-mono:'IBM Plex Mono', ui-monospace, monospace;
  --cm-serif:'Fraunces', Georgia, serif;
}

/* Si el elemento tenía subelementos en Apariencia → Menús, manda el megamenú. */
.main-menu > li.cm-has-mega > .sub-menu{ display:none !important; }

/* Flechita: gira al abrir. */
.cm-has-mega > .submenu-caret span{ display:inline-block; transition:transform .2s ease; }
.cm-has-mega.open > .submenu-caret span{ transform:rotate(180deg); }

/* ---------- Piezas comunes ---------- */
.cm-mega__list{ margin:0; padding:0; list-style:none; }
.cm-mega__title{
  display:flex; align-items:center; gap:9px;
  margin:0 0 10px; padding:0 12px;
  font-family:var(--cm-mono); font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--coral-deep);
}
.cm-mega__title::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--coral); flex-shrink:0; }

.cm-mega__link{
  display:flex; align-items:flex-start; gap:12px;
  padding:9px 12px; border-radius:12px;
  color:var(--forest); text-decoration:none;
  transition:background-color .18s ease;
}
.cm-mega__link:hover, .cm-mega__link:focus-visible{ background:var(--sage); }
.cm-mega__link:focus-visible, .cm-mega__all:focus-visible, .cm-mega__feature:focus-visible, .cm-mega__chip:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.cm-mega__num{ font-family:var(--cm-mono); font-size:12px; color:var(--coral); padding-top:3px; min-width:18px; }
.cm-mega__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cm-mega__label{ font-size:15px; font-weight:650; line-height:1.3; }
.cm-mega__desc{ font-size:13px; line-height:1.4; color:var(--ink-soft); }
.cm-mega__meta{
  margin-left:auto; align-self:center; padding-left:10px; white-space:nowrap;
  font-family:var(--cm-mono); font-size:12px; color:var(--forest); opacity:.8;
}
.cm-mega__badge{
  display:inline-block; vertical-align:2px; margin-left:4px;
  padding:2px 7px; border-radius:999px; background:var(--coral); color:#fff;
  font-family:var(--cm-mono); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; line-height:1.4;
}
.cm-mega__link[aria-current="page"] .cm-mega__label{ color:var(--coral-deep); }

/* Formato "precio": nombre y precio en la misma línea, descripción debajo. */
.cm-mega__col--price .cm-mega__link{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; padding:9px 12px; }
.cm-mega__col--price .cm-mega__body{ display:contents; }
.cm-mega__col--price .cm-mega__label{ grid-column:1; grid-row:1; }
.cm-mega__col--price .cm-mega__meta{ grid-column:2; grid-row:1; align-self:start; padding:3px 0 0; }
.cm-mega__col--price .cm-mega__desc{ grid-column:1 / -1; grid-row:2; }

.cm-mega__col--compact .cm-mega__link{ padding:8px 12px; }
.cm-mega__col--compact .cm-mega__label{ font-size:14.5px; }
.cm-mega__col--compact .cm-mega__desc{ font-size:12.5px; }

.cm-mega__arrow{ width:14px; height:14px; flex-shrink:0; transition:transform .2s ease; }
.cm-mega__all{
  display:inline-flex; align-items:center; gap:8px;
  margin:8px 12px 0; padding:4px 0;
  font-size:14px; font-weight:700; color:var(--coral-deep); text-decoration:none;
}
.cm-mega__all:hover .cm-mega__arrow{ transform:translateX(4px); }

/* Tarjeta destacada (Método ACTIVA) */
.cm-mega__feature{
  display:flex; flex-direction:column; gap:10px;
  padding:26px; border-radius:18px;
  background:var(--forest); color:var(--cream); text-decoration:none;
  transition:background-color .2s ease;
}
.cm-mega__feature:hover{ background:#24493E; }
.cm-mega__feature-eyebrow{ font-family:var(--cm-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--marigold); }
.cm-mega__feature-title{ font-family:var(--cm-serif); font-weight:500; font-size:26px; line-height:1.1; letter-spacing:-.005em; }
.cm-mega__feature-text{ font-size:14px; line-height:1.5; color:rgba(251,245,236,.78); }
.cm-mega__feature-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px;
  font-family:var(--cm-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
}
.cm-mega__feature-btn .cm-mega__arrow{ color:var(--coral); }
.cm-mega__feature:hover .cm-mega__arrow{ transform:translateX(4px); }

/* Barra inferior */
.cm-mega__bar{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; }
.cm-mega__bar-text{ font-size:14.5px; font-weight:700; }
.cm-mega__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.cm-mega__chip{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--forest); text-decoration:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cm-mega__chip:hover{ background:var(--forest); border-color:var(--forest); color:var(--cream); }
.cm-mega__cta.btn{ margin-left:auto; padding:11px 20px; font-size:14px; box-shadow:0 8px 20px rgba(255,107,77,.28); }

/* Anclas de los packs en /productos/ (que no queden bajo el header fijo). */
.nd-plan[id]{ scroll-margin-top:110px; }

/* ==========================================================================
   ESCRITORIO (> 960px): panel ancho bajo el header
   ========================================================================== */
@media (min-width:961px){
  .site-nav{ position:relative; }
  .main-menu > li.cm-has-mega{ position:static; }

  .cm-mega{
    position:absolute; top:100%; z-index:60;
    left:max(8px, calc(var(--gutter) - 20px)); right:max(8px, calc(var(--gutter) - 20px));
    padding-top:6px;
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  /* Puente invisible entre "Servicios" y el panel: no se cierra al bajar el ratón. */
  .cm-mega::before{ content:""; position:absolute; left:0; right:0; top:-22px; height:28px; }

  .main-menu > li.cm-has-mega:hover > .cm-mega,
  .main-menu > li.cm-has-mega.open > .cm-mega,
  .main-menu > li.cm-has-mega:has(:focus-visible) > .cm-mega{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }

  .cm-mega__inner{
    background:var(--cream); border:1px solid var(--line); border-radius:22px;
    box-shadow:0 26px 60px -18px rgba(30,61,52,.28);
    max-height:calc(100vh - var(--cm-header-h, 70px) - 24px); overflow-y:auto;
  }
  .cm-mega__grid{
    display:grid; gap:24px;
    grid-template-columns:var(--cm-mega-tracks, repeat(3, minmax(0, 1fr)));
    padding:26px 22px 22px;
  }
  .cm-mega__col--detail{ min-width:0; }
  .cm-mega__bar{
    padding:16px 34px; border-top:1px solid var(--line);
    background:rgba(217,232,221,.38); border-radius:0 0 21px 21px;
  }
}

/* Pantalla ancha: el destacado va debajo de la última columna. */
@media (min-width:1181px){
  .cm-mega__grid.has-feature > .cm-mega__col:not(:last-of-type){ grid-row:1 / span 2; }
  .cm-mega__grid.has-feature > .cm-mega__col:last-of-type{ grid-row:1; }
  .cm-mega__grid.has-feature > .cm-mega__feature{ grid-column:-2 / -1; grid-row:2; align-self:end; }
}

/* Portátiles pequeños: el destacado pasa a franja horizontal. */
@media (min-width:961px) and (max-width:1180px){
  .cm-mega__feature{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:20px; padding:20px 24px; }
  .cm-mega__feature-title{ font-size:22px; white-space:nowrap; }
  .cm-mega__feature-text{ flex:1; }
  .cm-mega__feature-btn{ margin-top:0; padding-top:0; white-space:nowrap; }
  .cm-mega__col--detail .cm-mega__desc{ display:none; }
}

/* ==========================================================================
   MÓVIL / TABLET (≤ 960px): dentro del menú hamburguesa
   ========================================================================== */
@media (max-width:960px){
  /* El menú abierto ahora puede ser largo: que haga scroll dentro. */
  .site-header.nav-open .main-menu{
    max-height:calc(100vh - var(--cm-header-h, 70px));
    max-height:calc(100dvh - var(--cm-header-h, 70px));
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }

  .cm-mega{ display:none; order:3; flex-basis:100%; width:100%; }
  .site-header.nav-open .main-menu > li.cm-has-mega.open > .cm-mega{ display:block; }

  .cm-mega__inner{ padding:2px 0 14px 12px; border-left:2px solid var(--sage); margin-left:4px; }
  .cm-mega__col{ margin-bottom:10px; }
  .cm-mega__title{ padding:12px 4px 4px; margin:0; font-size:11.5px; }
  .cm-mega__link,
  .cm-mega__col--price .cm-mega__link,
  .cm-mega__col--compact .cm-mega__link{ padding:11px 4px; min-height:44px; align-items:center; border-radius:8px; }
  .cm-mega__col--price .cm-mega__meta{ align-self:center; padding:0; }
  .cm-mega__link:hover{ background:none; }
  .cm-mega__num, .cm-mega__desc{ display:none; }
  .cm-mega__label, .cm-mega__col--compact .cm-mega__label{ font-size:15px; font-weight:600; }
  .cm-mega__meta{ font-size:11.5px; }
  .cm-mega__all{ margin:2px 4px 0; font-size:13.5px; }

  .cm-mega__feature{ margin:8px 0 14px; padding:18px; gap:6px; border-radius:16px; }
  .cm-mega__feature-title{ font-size:21px; }
  .cm-mega__feature-text{ display:none; }
  .cm-mega__feature-btn{ padding-top:4px; }

  .cm-mega__bar{ padding-top:12px; border-top:1px solid var(--line); gap:10px; }
  .cm-mega__bar-text{ width:100%; font-size:13.5px; }
  .cm-mega__chip{ padding:9px 14px; }
  .cm-mega__cta{ display:none !important; } /* el header ya lleva "Cuéntanos tu caso" */
}