/* Zenth Toolkit — Mega menú de escritorio (specs/navegacion/SPEC.md §3).
   Todo el archivo vive dentro de min-width:1025px a propósito: el propio
   ítem del menú (.arr-nav__menu) ya se oculta en tablet/móvil con las
   clases responsive nativas de Elementor (hidden-tablet/hidden-mobile,
   ver header-del-sitio.json), así que estas reglas nunca deberían
   necesitar aplicarse por debajo de ese punto de ruptura; la media query
   es una segunda barrera defensiva (evita cualquier parpadeo del trigger
   sin estilo si algún día cambia esa condición responsive). */
@media (min-width:1025px){

  /* ---- Trigger (Programas / Sé parte) ----
     OJO: el <li> ("zenth-menu__item--mega") se deja SIN position:relative
     a propósito. El panel .arr-mega es hijo directo de ese <li> en el DOM,
     así que si el <li> tuviera position:relative se convertiría en el
     containing block del panel (position:absolute se ancla al ancestro
     posicionado MÁS CERCANO) y el panel quedaría mal anclado -pegado a la
     posición del propio ítem dentro del menú, no al pill completo-. El
     containing block real es .arr-nav.e-con (position:relative, ver
     bloque PILL de style-header.css), el siguiente ancestro posicionado
     hacia arriba. Verificado con el fixture: con position:relative aquí el
     panel medía ~20px de ancho en vez de ~1270px.

     BUG REAL #2 (encontrado en producción, con el DOM real de Elementor,
     no con el fixture): el propio Elementor trae `.elementor-widget{
     position:relative}` en su frontend.min.css -de CORE, no tocable-,
     aplicada al wrapper del widget (.elementor-widget-zenth-nav-menu,
     ENTRE .arr-nav y el <li>). Mi fixture anterior no cargaba el CSS real
     de Elementor, así que nunca lo vi: ese wrapper se convertía en el
     containing block real del panel en vez de .arr-nav (el panel salía
     anclado al ancho del <nav> del menú, ~609px, no a los ~1350px del
     pill). Se neutraliza aquí, scopeado a esta instancia del widget
     (nunca globalmente: otros widgets sí pueden depender de ese
     position:relative de Elementor para sus propios usos, p.ej. motion
     effects). */
  .arr-nav .elementor-widget-zenth-nav-menu{
    position:static;
  }

  .zenth-menu__trigger{
    display:inline-flex;
    align-items:center;
    gap:10px;
    /* Fondo/borde/color en TODOS los estados explícitamente (no solo en el
       reposo): BUG REAL #3 encontrado en producción — Hello Elementor
       (reset.css) trae `button{border:1px solid #c36;color:#c36}` y
       `button:hover,button:focus{background-color:#c36;color:#fff}` (con
       la MISMA o mayor especificidad que una regla de reposo sin
       pseudo-clase). Hay que igualar cada estado explícitamente para
       ganarle con especificidad de verdad (.zenth-menu__trigger:hover =
       0,2,0 > button:hover = 0,1,1), no basta con la regla base. */
    background:transparent;
    border:none;
    /* padding + margin negativo iguales: agranda el área de clic/hover en
       vertical (el brief pide que cubra "todo el alto del pill") sin mover
       ni un píxel el layout del menú (el padding extra queda cancelado por
       el margin negativo, así que la caja visible/con texto no se desplaza). */
    padding:28px 0;
    margin:-28px 0;
    color:#fff;
    font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size:14.13px;
    font-weight:400;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
  }
  .zenth-menu__trigger:hover,
  .zenth-menu__trigger:focus,
  .zenth-menu__trigger:active{
    background:transparent;
    border:none;
    color:#fff;
    text-decoration:none;
  }
  .zenth-menu__trigger:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
    border-radius:4px;
  }

  .zenth-menu__chevron{
    width:16px;
    height:16px;
    flex:0 0 auto;
    fill:currentColor;
    transition:transform .18s ease;
  }
  .zenth-menu__trigger[aria-expanded="true"] .zenth-menu__chevron{
    transform:rotate(180deg);
  }

  /* ---- Panel ----
     Inset ASIMÉTRICO (31.95px izquierda / 39.1px derecha), NO el radio
     simétrico de la cápsula (38.48px, lo usado antes): pasada final de
     calibración contra medidas/megamenu-1440.png -en vivo el panel medía
     x83->1358 (w1275) y el objetivo es x76.2->1355.7 (w1279.5, RECON-
     geometria.md §2)-, así que se vuelve a la medida literal del diseño
     (76.2-44.25=31.95 de la izquierda; 1394.8-1355.7=39.1 de la derecha)
     en vez de la simetría "geométricamente elegante" que se había preferido
     antes (misma inconsistencia ya advertida en RECON-geometria.md §2 como
     posible ruido de medición a esa escala de captura, pero el objetivo
     pide ahora ±2px contra el valor literal, no contra la propiedad
     geométrica). position:absolute respecto a .arr-nav (position:relative,
     ver bloque PILL de este mismo archivo de seed style-header.css), NUNCA
     fixed — ver SPEC §3 y RECON-codigo.md §6. */
  .arr-mega{
    position:absolute;
    top:100%;
    left:31.95px;
    right:39.1px;
    background:#FFFFFF;
    border:1px solid rgba(156,0,0,.10);
    border-top:none;
    border-radius:0 0 32.4px 32.4px;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:10;
  }
  .arr-mega[hidden]{ display:none; }
  .arr-mega.is-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  @media (prefers-reduced-motion:reduce){
    .arr-mega{ transition:none; }
  }

  .arr-mega__inner{
    /* padding-bottom 86.4 = 68.4 (SPEC/RECON-geometria.md §2: espacio
       visual desde el borde inferior de la ETIQUETA hasta el borde
       inferior del panel) + 18 (lo que la etiqueta sobresale por debajo de
       la foto, .arr-mega__label{bottom:-18px}) — la etiqueta está fuera
       del flujo (position:absolute), así que el padding-bottom del CSS se
       mide desde el borde de la FOTO (fin del flujo normal), no desde el
       de la etiqueta; hay que sumarle esos 18px para que el hueco VISUAL
       tras la etiqueta sea el que pide el spec. Verificado con el fixture:
       con 68.4 a secas el panel media ~307px de alto en vez de ~321px. */
    padding:46px 63px 86.4px;
  }

  .arr-mega__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:42px;
  }

  /* Prefijo ".arr-mega__head" (NO ".arr-mega__title" a secas): BUG REAL
     encontrado en producción — zenth-widgets.css (compartido, fuera de la
     propiedad de archivos de N1) trae ".zenth-menu__list a{color:inherit;
     display:inline-block}", un selector descendiente que TAMBIÉN alcanza
     estos enlaces (están dentro de .zenth-menu__list, aunque muy anidados)
     con especificidad (0,1,1) — más que ".arr-mega__title" a secas
     (0,1,0), así que ganaba pase lo que pase el orden de carga. Anteponer
     ".arr-mega__head" (una clase más) sube la propia a (0,2,0), que gana
     SIEMPRE a (0,1,1) sin importar el orden. Sin este arreglo el título y
     el enlace de esquina salían en el color heredado (#333, texto oscuro
     apenas visible) en vez de en rojo de marca. */
  .arr-mega__head .arr-mega__title{
    /* Parkinsans (RECON-geometria.md §2). Ya se auto-aloja e importa como
       @font-face site-wide en arrayanes-child/style.css:2792 (variable,
       peso 300-800) — reutilizado aquí tal cual, mismo criterio que la
       página de Donantes (--don-ff-head). Instrument Sans como respaldo si
       la fuente no llega a cargar.
       font-size RECALIBRADO (era 26px): comparado en vivo contra
       medidas/megamenu-1440.png, "Programas" pintaba ≈149.8px de ancho
       contra un objetivo de ≈114px (x140.4->254.3). 19.8px reproduce el
       ancho casi exacto (medido en vivo: 114.x px) manteniendo la misma
       familia/peso; el alto de caja resultante (≈23-24px) queda algo por
       encima del "≈22px de caja de tinta" del objetivo (aproximado, con
       "≈" en el propio dato) porque a este tamaño el ancho es el dato con
       coordenadas exactas dadas (x140.4->254.3) - se prioriza ese. */
    font-family:'Parkinsans', 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color:#9C0000;
    font-weight:700;
    font-size:19.8px;
    line-height:1.2;
    text-decoration:none;
  }
  .arr-mega__head a.arr-mega__title:hover,
  .arr-mega__head a.arr-mega__title:focus-visible{
    text-decoration:underline;
  }

  .arr-mega__head .arr-mega__corner{
    display:inline-flex;
    align-items:center;
    gap:14.4px;
    margin-top:6px;
    color:rgba(156,0,0,.6);
    font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight:600;
    font-size:13px;
    line-height:1.3;
    text-decoration:none;
    white-space:nowrap;
  }
  .arr-mega__head .arr-mega__corner:hover,
  .arr-mega__head .arr-mega__corner:focus-visible{
    text-decoration:underline;
  }
  .arr-mega__corner-icon{
    width:20px;
    height:20px;
    flex:0 0 auto;
    fill:currentColor;
  }

  /* ---- Tarjetas ----
     flex + flex:1 1 0 en cada tarjeta reparte el ancho por igual entre
     TODAS las tarjetas presentes, sin necesidad de saber de antemano si
     son 3 ("Sé parte") o 4 ("Programas") — SPEC §3. */
  .arr-mega__cards{
    display:flex;
    gap:0 34.5px;
  }

  .arr-mega__card{
    /* position:relative AQUÍ (no en .arr-mega__photo): en el markup que
       emite el walker (class-zenth-nav-menu.php) .arr-mega__photo y
       .arr-mega__label son HERMANOS, ambos hijos directos de .arr-mega__card
       -no está la etiqueta anidada dentro de la foto-, así que el
       containing block de la etiqueta (position:absolute) tiene que ser la
       tarjeta, no la foto. Da el mismo resultado geométrico: la etiqueta
       no aporta altura al flujo (está posicionada de forma absoluta), así
       que el alto de la tarjeta lo determina solo la foto y el borde
       inferior de ambas coincide igualmente. Verificado con el fixture:
       con position:relative en .arr-mega__photo la etiqueta terminaba
       anclada al panel entero (su containing block real, al no tener
       ningún ancestro posicionado más cercano), no a la tarjeta. */
    position:relative;
    flex:1 1 0;
    min-width:0;
    display:block;
    color:inherit;
    text-decoration:none;
  }
  .arr-mega__card:focus-visible{
    outline:2px solid #9C0000;
    outline-offset:4px;
    border-radius:10px;
  }

  .arr-mega__photo{
    display:block;
    /* overflow visible a propósito: la etiqueta roja se monta sobre la
       foto y sobresale por debajo (SPEC §3); si se recortara aquí, la
       parte que sobresale desaparecería. */
    overflow:visible;
  }
  .arr-mega__img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:262.7 / 125;
    object-fit:cover;
    border-radius:6px;
    background:rgba(156,0,0,.08);
  }

  .arr-mega__label{
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    width:143px;
    max-width:92%;
    height:28.8px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    background:#9C0000;
    border-radius:9.6px;
    color:#fff;
    font-family:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight:700;
    font-size:14px;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

}