/* ============================================================
   GUAUFY — Megamenu (premium dropdown navigation)
   Usa los tokens definidos en guaufy.css (:root)
   ============================================================ */

/* ---------- nav wrapper ----------
   El contenedor Elementor donde se monta (.elementor-element-4fd0e21) trae
   un --width:60% y flex-wrap propios del header original. Forzamos que la
   lista no envuelva y ocupe su ancho natural para que quepan los 5 items
   en una sola fila, salga o no del 60% nominal del contenedor padre. */
.gua-megamenu{width:auto;max-width:none;flex:1 1 auto;min-width:0;position:relative;z-index:20;}
.gua-megamenu__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:nowrap;width:max-content;}
.gua-megamenu__item{position:relative;flex:none;}

/* El contenedor Elementor padre (.elementor-element-4fd0e21) trae un
   --width:60% fijo por CSS var — con 5 items no cabe y el <ul> se desborda
   VISUALMENTE por encima del contenedor de iconos vecino (6d6577d), pero
   ese hermano sigue ganando el hit-test del ratón en la zona de solape
   porque llega después en el DOM. Forzamos el ancho real del contenedor
   al 100% de su fila y overflow visible en toda la cadena para que el
   megamenu tenga el espacio real que necesita y no se disparen falsos
   negativos de hover. */
.elementor-element-4fd0e21.gua-megamenu-mounted{
  --width:100% !important;
  --container-widget-width:auto !important;
  flex-grow:1 !important;
  overflow:visible !important;
  position:relative;z-index:20;
}
.elementor-element-71bb229{overflow:visible !important;}
.elementor-element-a1bfe68{overflow:visible !important;}

.gua-megamenu__link{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-ui);font-weight:600;font-size:14.5px;color:var(--text-title);
  padding:10px 14px;border-radius:var(--radius-sm);text-decoration:none;
  transition:background .16s ease,color .16s ease;
  min-height:44px;box-sizing:border-box;
}
.gua-megamenu__link:hover,
.gua-megamenu__link:focus-visible{background:var(--surface-alt);color:var(--brand-primary-deep);}
.gua-megamenu__link:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;}
.gua-megamenu__caret{width:11px;height:11px;flex:none;transition:transform .18s ease;}
.gua-megamenu__item.is-open > .gua-megamenu__link .gua-megamenu__caret{transform:rotate(180deg);}

/* standalone highlighted link (Packs y ahorro) */
.gua-megamenu__link--highlight{
  background:var(--brand-primary);color:#fff!important;font-weight:700;
}
.gua-megamenu__link--highlight:hover,
.gua-megamenu__link--highlight:focus-visible{background:var(--brand-primary-deep);color:#fff;}

/* ---------- panel ----------
   position:fixed (no absolute) porque el contenedor Elementor padre tiene
   un ancho recortado al 60% y overflow implícito que cortaba el panel por
   la izquierda. El JS (megamenu.js) calcula left/top en cada apertura para
   anclarlo bajo el link real, con clamp a los bordes del viewport. */
.gua-megamenu__panel{
  position:fixed;top:0;left:0;transform:translateY(-8px);
  width:max-content;max-width:92vw;
  background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:28px;z-index:9999;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.gua-megamenu__item.is-open > .gua-megamenu__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s;
}

/* Cada dropdown de Guaufy trae una sola categoría (columna); en vez de
   dejar hueco vacío al reservar una rejilla de 2 columnas, cada .col se
   presenta en horizontal: título de categoría + subcategorías a la
   izquierda + imagen grande a la derecha (protagonista). El título vive
   dentro del <a> (junto a la imagen) en el HTML, así que se saca de ahí
   por grid-area para colocarlo como cabecera de la columna de texto,
   encima de la lista de enlaces. */
.gua-megamenu__cols{display:grid;grid-template-columns:1fr;gap:24px;}
.gua-megamenu__cols:has(.gua-megamenu__col:nth-child(2)){grid-template-columns:repeat(2,1fr);}

/* Título y lista comparten UNA sola celda de grid (grid-row:1, misma que
   la imagen) y se apilan entre sí por flujo normal de documento (no-grid),
   usando position relative/static + el propio orden del DOM — evita el
   problema de que dos filas de grid separadas hereden la altura de la
   imagen que las abarca. La imagen vive en su propia columna, más alta,
   y el texto simplemente no le importa cuánto mida: fluye por su cuenta. */
.gua-megamenu__col{
  display:grid;grid-template-columns:minmax(0,240px) 260px;grid-template-rows:auto;column-gap:16px;align-items:start;justify-content:start;
}
.gua-megamenu__cols:has(.gua-megamenu__col:nth-child(2)) .gua-megamenu__col{
  display:block;
}
/* El <a> envuelve imagen+título en el HTML; display:contents lo "disuelve"
   para que sus hijos (imagen, título) participen directamente en el grid
   del padre en vez de agruparse en el bloque del enlace. */
.gua-megamenu__col > a{display:contents;}

.gua-megamenu__coltitle{
  grid-column:1;grid-row:1;align-self:start;margin-bottom:10px;
  font-family:var(--font-display);font-weight:800;color:var(--text-title);font-size:18px;
  text-decoration:none;letter-spacing:-0.01em;display:block;
}
.gua-megamenu__coltitle:hover{color:var(--brand-primary-deep);}

.gua-megamenu__sublist{
  grid-column:1;grid-row:1;align-self:start;margin-top:37px;
  list-style:none;padding:0;display:flex;flex-direction:column;gap:4px;
}
.gua-megamenu__sublist a{
  display:block;font-family:var(--font-ui);font-size:15.5px;font-weight:500;color:var(--text-body);
  text-decoration:none;padding:6px 0;border-radius:var(--radius-sm);transition:color .14s ease;
  min-height:32px;
}
.gua-megamenu__sublist a:hover,
.gua-megamenu__sublist a:focus-visible{color:var(--brand-primary-deep);text-decoration:underline;}

.gua-megamenu__colimg{
  grid-column:2;grid-row:1;align-self:start;
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);
  background:var(--surface-alt);margin-bottom:10px;transition:transform .3s ease;
}
.gua-megamenu__col:hover .gua-megamenu__colimg{transform:scale(1.02);}

/* ---------- mobile / tablet (<=782px, matches WooCommerce breakpoint) ---------- */
@media (max-width:782px){
  /* En este breakpoint .gua-megamenu (contenedor, no solo la lista) debe
     ocupar el 100% de su padre Elementor — sin esto el flex-basis:auto
     heredado de la regla de escritorio empuja el bloque entero fuera del
     viewport hacia la derecha. */
  .gua-megamenu{width:100%;flex:1 1 100%;}
  .gua-megamenu__list{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .gua-megamenu__item{width:100%;border-bottom:1px solid var(--line);}
  .gua-megamenu__link{width:100%;justify-content:space-between;padding:14px 4px;font-size:16px;border-radius:0;min-height:48px;}
  .gua-megamenu__link--highlight{border-radius:var(--radius-sm);margin:8px 0;padding:12px 14px;}

  .gua-megamenu__panel{
    position:static;transform:none;width:100%;margin-top:0;box-shadow:none;border:0;
    border-radius:0;padding:6px 4px 16px;background:var(--surface-alt);
    max-height:0;overflow:hidden;visibility:visible;opacity:1;pointer-events:none;
    transition:max-height .22s ease,padding .22s ease;
  }
  .gua-megamenu__item.is-open > .gua-megamenu__panel{
    max-height:2000px;pointer-events:auto;padding:10px 4px 20px;
  }
  .gua-megamenu__cols{grid-template-columns:1fr;gap:18px;}
  .gua-megamenu__col{display:block;}
  .gua-megamenu__col > a{display:block;}
  .gua-megamenu__colimg{aspect-ratio:16/9;}
  .gua-megamenu__sublist a{font-size:16px;}
}

/* ---------- tablet ---------- */
@media (min-width:783px) and (max-width:1024px){
  .gua-megamenu__panel{width:min(94vw,680px);padding:22px;}
  .gua-megamenu__cols{grid-template-columns:repeat(2,1fr);gap:18px;}
}