/* ============================================================
   GERPRO — Desplegable "Productos".
   Compartido por la cabecera del home y la de los subsitios.
   Requiere tokens.css.
   ============================================================ */

.prod{ position:relative; display:flex; align-items:center; }

/* ---------- Disparador ---------- */
.prod-t{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; padding:0;
  font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:.6;
  transition:opacity .2s;
}
.prod-t:hover, .prod[data-open] .prod-t{ opacity:1; }

/* Chevron dibujado con bordes: no depende de ninguna fuente de iconos. */
.prod-t .cv{
  width:6px; height:6px; margin-top:-3px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.prod[data-open] .prod-t .cv{ transform:rotate(-135deg); margin-top:2px; }

/* ---------- Panel ----------
   Mismo tratamiento de "profundidad" que .card/.pregunta/.faq details en
   subsitio.css (fondo con el color de marca mezclado, borde teñido, halo de
   sombra a color) en vez del navy plano de antes. En el home ese fondo
   plano quedaba disimulado porque el fondo de pagina detras es muy vivido y
   el backdrop-filter lo recoge; en los subsitios, con un fondo mas apagado,
   se veia chato. --c no existe en el home (ecosistema.css no lo define):
   var(--c, var(--teal)) evita que el panel se quede sin fondo ahi. Los
   tonos de superficie son los mismos fijos de --surf-b/--surf-c en
   subsitio.css (#2E3468/#262C56) escritos literales para no depender de esa
   hoja, que el home no carga. */
.prod-m{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:min(340px, calc(100vw - 32px));
  transform:translateX(-50%);
  padding:10px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--c, var(--teal)) 48%, var(--hair));
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--c, var(--teal)) 34%, #3A4079), #262C56 60%);
  backdrop-filter:blur(18px) saturate(1.7); -webkit-backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 8px 20px rgba(3,5,16,.5),
    inset 0 1px 0 rgba(255,255,255,.18);
  display:grid; gap:2px;
}
/* [hidden] no basta: display:grid lo pisaria. */
.prod-m[hidden]{ display:none; }

/* Animacion de entrada. La clase la pone el JS tras quitar [hidden], para que
   el panel no aparezca de golpe pero siga existiendo para el lector de pantalla.
   Ancla al disparador (arriba-centro, por el translateX(-50%) de .prod-m):
   escala desde ahi en vez de solo deslizarse — un popover "sale" de su
   boton, no aparece flotando al lado. scale(.96), no 0: nada del mundo real
   aparece desde la nada (ver .wa-fab-m y el nav movil, mismo patron). */
@media (prefers-reduced-motion: no-preference){
  .prod-m{
    transform-origin:top center;
    opacity:0; transform:translateX(-50%) translateY(-6px) scale(.96);
    transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);
  }
  .prod[data-open] .prod-m{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

.prod-h{
  padding:8px 12px 10px;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); opacity:.7;
  border-bottom:1px solid var(--hair); margin-bottom:6px;
}

/* ---------- Cada servicio ----------
   El prefijo .prod NO es cosmetico: estos <a> viven dentro de <nav>, y sin el
   los pisan `nav a{display:none}` (home, <960px) y `.sub-header nav a`
   (opacidad .62 y otro tamano). No lo quite. */
.prod .prod-m a{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 12px; border-radius:11px;
  text-decoration:none; color:var(--ink);
  /* .sub-header nav a los deja al 62%: dentro del panel van a plena opacidad. */
  opacity:1;
  transition:background .2s;
}
.prod .prod-m a:hover, .prod .prod-m a:focus-visible{ background:rgba(127,192,183,.10); }
.prod .prod-m a[aria-current="page"]{ background:color-mix(in srgb, var(--pc) 14%, transparent); }

.prod .prod-m .pdot{
  width:9px; height:9px; margin-top:5px; flex:none;
  border-radius:50%; background:var(--pc);
  box-shadow:0 0 10px var(--pc);
}
.prod .prod-m .pt{ display:grid; gap:2px; }
.prod .prod-m .pn{
  font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:0; text-transform:none; color:#fff; line-height:1.2;
}
.prod .prod-m .pa{
  font-size:11.5px; line-height:1.35; color:var(--ink-dim);
  letter-spacing:.02em; text-transform:none;
}

/* ---------- Fila con submenu (IngeMAX ERP -> sus 5 modulos) ----------
   Misma fila visual que las demas de .prod-m, pero partida en dos elementos
   interactivos: un <a> no puede contener un <button> (HTML invalido), asi
   que el enlace ocupa el grueso de la fila y un boton aparte solo pinta el
   chevron. El padding y el hover viven en .prod-row -no en .prod-link-, asi
   toda la fila reacciona igual sin importar sobre cual de los dos este el
   mouse (:hover en el padre ya cubre a los hijos, no hace falta :has()). */
.prod .prod-row{ display:flex; align-items:stretch; border-radius:11px; }
.prod .prod-row:hover, .prod .prod-row:focus-within{ background:rgba(127,192,183,.10); }
.prod .prod-link{
  display:flex; align-items:flex-start; gap:12px; flex:1;
  padding:11px 6px 11px 12px; text-decoration:none; color:var(--ink);
}
.prod .prod-link[aria-current="page"]{
  background:color-mix(in srgb, var(--pc) 14%, transparent); border-radius:11px;
}

.prod-sub-t{
  display:flex; align-items:center; justify-content:center;
  width:38px; flex:none; border:0; background:none; padding:0; margin:4px 4px 4px 0;
  border-radius:8px; color:var(--ink-dim); cursor:pointer;
  transition:background .2s, color .2s;
}
.prod-sub-t:hover, .prod-sub-t:focus-visible{ background:rgba(127,192,183,.16); color:var(--ink); }
.prod-sub-t .cv{
  width:6px; height:6px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .25s ease;
}
.prod-sub-t[aria-expanded="true"] .cv{ transform:rotate(-135deg); margin-top:3px; }

/* ---------- Submenu de modulos ---------- */
.prod-sub{
  display:grid; gap:2px; margin:0 0 4px 20px;
  padding-left:11px; border-left:1px solid var(--hair);
}
.prod-sub[hidden]{ display:none; }
.prod-sub a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:9px; font-size:13.5px;
  text-decoration:none; color:var(--ink-dim); opacity:1;
  transition:background .2s, color .2s;
}
.prod-sub a:hover, .prod-sub a:focus-visible{ background:rgba(127,192,183,.10); color:var(--ink); }
.prod-sub a[aria-current="page"]{ background:color-mix(in srgb, var(--pc) 14%, transparent); color:var(--ink); }
.prod-sub .pdot{
  width:6px; height:6px; flex:none; border-radius:50%;
  background:var(--pc); box-shadow:0 0 8px var(--pc);
}
.prod-sub .pn{ font-family:var(--display); font-weight:600; font-size:13.5px; color:inherit; }

/* ---------- Movil ----------
   En el home, `nav a{display:none}` oculta los enlaces por debajo de 960px.
   El disparador es un <button>, asi que sobrevive: en movil este menu es el
   unico acceso a los productos.
   `right:0` relativo a .prod (position:absolute) asumia que el disparador
   quedaba pegado al borde derecho — cierto cuando "Eventos" y "Gerpro IA²"
   tambien se ocultaban, pero el boton IA² sigue visible siempre, asi que
   .prod termina a la izquierda de eso, no en el borde. El panel entonces se
   extendia hacia la izquierda desde ahi y se salia por el borde IZQUIERDO
   de la pantalla — justo lo contrario de lo que el comentario original
   queria evitar. position:fixed lo ancla al viewport de verdad, sin
   importar donde caiga el disparador. */
@media (max-width:960px){
  .prod-t{ font-size:11px; letter-spacing:.1em; }
  .prod-m{
    position:fixed; top:68px; left:auto; right:12px; transform:none;
    transform-origin:top right;
    width:min(320px, calc(100vw - 24px));
  }
  @media (prefers-reduced-motion: no-preference){
    .prod-m{ transform:translateY(-6px) scale(.96); }
    .prod[data-open] .prod-m{ transform:translateY(0) scale(1); }
  }
}

@media (max-width:560px){
  .prod-t{ font-size:10px; letter-spacing:.06em; gap:5px; }
  .prod-m{ top:57px; width:min(300px, calc(100vw - 20px)); }
}

/* ============================================================
   GERPRO — Boton hamburguesa del menu movil.
   Compartido por la cabecera del home y la de los subsitios (mismo
   componente visual en los dos; cada cabecera decide en su propio CSS a
   que ancho aparece y como se ve el panel que abre — ver ecosistema.css
   y subsitio.css). Requiere tokens.css.
   ============================================================ */
.sub-burger{
  display:none; flex:none; width:38px; height:38px; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border-radius:10px; border:1px solid var(--hair);
  background:rgba(255,255,255,.05); cursor:pointer;
  transition:transform .2s var(--ease-out);
}
.sub-burger:active{ transform:scale(.9); }
.sub-burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .25s var(--ease-out), opacity .25s var(--ease-out);
}
.sub-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.sub-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.sub-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   GERPRO — Boton flotante de WhatsApp.
   Puerta general a un asesor humano, visible en todo el scroll del sitio
   (home y subsitios): distinta de la caja de Gerpro IA del hero, que
   enruta por tema DENTRO del chat.
   z-index:55 — sobre la cabecera (50 en el home, 60 en subsitios cubre el
   caso en el que el propio header deba ganar) y el riel (40); por debajo
   del panel Gerpro IA² (60), que ya lo tapa por si solo al ser pantalla
   completa. En el home queda oculto mientras el portal de entrada sigue
   arriba: ver body.gp-home:not(.gate-done) en ecosistema.css.
   ============================================================ */
.wa-fab{
  position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  z-index:55;
}
.wa-fab-t{
  width:56px; height:56px; border-radius:50%; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,.5);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.wa-fab-t:hover, .wa-fab-t:focus-visible{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.4); }
.wa-fab-t:active{ transform:scale(.93); }

/* Mismo tratamiento de profundidad que .prod-m, pero con el verde de
   WhatsApp (#25D366, la marca de este panel especifico) en vez de --c —
   este panel no representa al producto/pagina actual, representa a
   WhatsApp, igual que .wa-fab-t ya usa ese verde fijo. */
.wa-fab-m{
  position:absolute; right:0; bottom:calc(100% + 14px);
  width:min(280px, calc(100vw - 28px));
  padding:10px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, #25D366 48%, var(--hair));
  background:linear-gradient(155deg, color-mix(in srgb, #25D366 30%, #3A4079), #262C56 60%);
  backdrop-filter:blur(18px) saturate(1.7); -webkit-backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 8px 20px rgba(3,5,16,.5),
    inset 0 1px 0 rgba(255,255,255,.18);
  display:grid; gap:2px;
}
.wa-fab-m[hidden]{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .wa-fab-m{
    transform-origin:bottom right;
    opacity:0; transform:translateY(6px) scale(.96);
    transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);
  }
  .wa-fab[data-open] .wa-fab-m{ opacity:1; transform:translateY(0) scale(1); }
}
.wa-fab-h{
  padding:8px 10px 10px;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); opacity:.7;
  border-bottom:1px solid var(--hair); margin-bottom:6px;
}
.wa-fab-m a{
  display:flex; flex-direction:column; gap:1px;
  padding:10px; border-radius:11px;
  text-decoration:none; color:var(--ink);
  transition:background .2s var(--ease-out);
}
.wa-fab-m a:hover, .wa-fab-m a:focus-visible{ background:rgba(37,211,102,.14); }
.wa-fab-m a b{ font-family:var(--display); font-weight:700; font-size:14px; color:#fff; }
.wa-fab-m a span{ font-size:12.5px; color:var(--ink-dim); }

@media (max-width:560px){
  .wa-fab-t{ width:50px; height:50px; }
}