/* ── LA FORMA DE TOTEM NUBE, EN NEGRO Y NEÓN (3-oct-2026, pedido de Edgar) ─────────────────
   Edgar: "una onda como totemnube.app pero en negro y neón… que Piedra Blanca no pierda esa
   esencia de oscuro y neón". De la estética de Totem Nube (la de totemnube.app, que CC-Mac
   llevó al ERP y al dashboard) se toma SÓLO LA FORMA: tarjetas muy redondeadas, botones
   píldora, chips, campos suaves y aire. El color, la tipografía y el neón siguen siendo los de
   Piedra Blanca (tokens.css + neon.css). ⚠️ Otra excepción a BRAND.md §7 (radio 2 px),
   decidida por Edgar: ver §14. Va DESPUÉS de neon.css en cada página. */
:root {
  --radio: 18px;            /* todas las tarjetas que ya usaban var(--radio) */
  --radio-chico: 12px;      /* campos, miniaturas, burbujas */
  --vidrio-luz: linear-gradient(180deg, rgba(90, 107, 240, .07), rgba(90, 107, 240, 0) 160px);
}

/* Tarjetas: redondeadas, con una luz apenas arriba (como un cartel iluminado desde el borde). */
/* La luz va SÓLO en lo que ya era tarjeta: `.cols > div` en la portada es texto suelto, sin
   fondo, y con la luz aparecían rectángulos detrás de los párrafos. */
.producto, .ficha, .caja, .tablero, .wa-probar, .wa-chat, .precio-caja, .equipo {
  border-radius: var(--radio) !important;
  background-image: var(--vidrio-luz);
}
.producto { overflow: hidden; }
.demo-grupo { border-radius: var(--radio) !important; padding: 16px 18px !important; background-image: var(--vidrio-luz); }
.bn-marco { border-radius: 24px !important; }
.wa-chat .msj { border-radius: var(--radio-chico) !important; }
.sp-marco { border-radius: 24px !important; }
.sp-marco img, .sp-cap, .sp-medio { border-radius: var(--radio-chico) !important; }

/* Botones: píldoras. */
.ingresar, .enviar, .mando, .sp-cta, .wa-abrir, .demo-grupo a {
  border-radius: 999px !important;
}
.ingresar { padding-inline: 18px !important; }
.enviar { padding-inline: 28px !important; }
.demo-grupo a { padding: 7px 14px !important; }

/* Chips: "Próximamente" y compañía. */
.pronto { border-radius: 999px !important; padding-inline: 10px !important; }

/* Campos de formulario suaves, con el foco en neón. */
.campo input, .campo select, .campo textarea, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  border-radius: var(--radio-chico) !important;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--neon) !important; box-shadow: 0 0 0 3px rgba(90, 107, 240, .18), 0 0 14px var(--neon-suave);
  outline: none;
}

/* El menú: el enlace bajo el mouse se enciende como una píldora. */
.cabecera nav a:not(.ingresar) { border-radius: 999px; padding: 6px 10px; transition: background .2s, text-shadow .2s; }
.cabecera nav a:not(.ingresar):hover { background: rgba(90, 107, 240, .12); }

/* Las tarjetas se levantan un poco al pasar el mouse (el borde neón ya lo pone neon.css). */
.producto, .ficha, .caja { transition: border-color .25s, box-shadow .25s, transform .25s; }
.producto:hover, .ficha:hover, .caja:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .producto:hover, .ficha:hover, .caja:hover { transform: none; }
}

/* ── EL MENÚ «PRODUCTOS» (7-oct-2026, Edgar: "no me gusta todos los productos arriba; una solapa
   que diga Productos y que se desplieguen") ────────────────────────────────────────────────────
   Un <details> (anda sin JavaScript; /assets/menu.js sólo lo cierra al tocar afuera o con Esc).
   Los productos agrupados por lo que resuelven, con su ícono. En el celular el resto del menú se
   esconde (cada página lo hace a ≤ 760 px) pero «Productos» queda, y el panel ocupa el ancho. */
.menu-prod { position: relative; }
.menu-prod > summary { list-style: none; cursor: pointer; color: var(--texto-2); font-size: var(--pb-t-sm); font-weight: 500;
  border-radius: 999px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
.menu-prod > summary::-webkit-details-marker { display: none; }
.menu-prod > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.menu-prod[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu-prod > summary:hover, .menu-prod[open] > summary { color: var(--texto); background: rgba(90, 107, 240, .12); }
.menu-panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(760px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px;
  background: #121519; border: 1px solid #2A2F33; border-radius: 16px; padding: 18px;
  box-shadow: 0 0 0 1px rgba(90, 107, 240, .25), 0 24px 60px rgba(0, 0, 0, .6); }
.menu-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-grupo > p { margin: 0 0 6px 10px; font-family: var(--pb-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.cabecera nav .menu-panel a { display: flex !important; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--texto);
  text-decoration: none; background: none; }
.cabecera nav .menu-panel a:hover { background: rgba(90, 107, 240, .14); text-shadow: none; }
.menu-panel img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.menu-panel span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.menu-panel b { font-weight: 600; font-size: var(--pb-t-sm); }
.menu-panel i { font-style: normal; font-size: 12px; color: var(--texto-2); }
.menu-panel .menu-todos { grid-column: 1 / -1; justify-content: center; margin-top: 6px; border-top: 1px solid #2A2F33; border-radius: 0 0 10px 10px;
  font-size: var(--pb-t-sm); color: var(--texto-2) !important; }
@media (max-width: 900px) { .menu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* «Ingresar» va adentro del menú sólo en el celular: arriba no entran la marca, Productos e Ingresar. */
.cabecera nav .menu-panel a.menu-ingresar { display: none !important; }
@media (max-width: 760px) {
  .menu-prod { position: static; }
  .menu-panel { position: fixed; top: 84px; left: 16px; right: 16px; width: auto; transform: none; grid-template-columns: 1fr;
    max-height: calc(100dvh - 100px); overflow-y: auto; }
  .cabecera nav > a.ingresar { display: none; }
  .cabecera nav .menu-panel a.menu-ingresar { display: flex !important; justify-content: center; grid-column: 1 / -1; border: 1px solid var(--acento);
    color: var(--acento); border-radius: 10px; margin-top: 4px; font-weight: 600; }
  .menu-prod > summary { padding: 8px 12px; border: 1px solid #2A2F33; }
}

/* Anchos intermedios (tablet): el índice de la página se acorta a lo esencial (las secciones siguen
   en la página). En el celular angosto, la marca se achica para que entre «Productos». */
@media (max-width: 1060px) { .cabecera nav > a.nav-extra { display: none; } }
@media (max-width: 440px) {
  .marca svg { height: 50px !important; }
  .marca .nombre b { font-size: 1.02rem !important; }
  .marca .nombre i { font-size: 9px !important; letter-spacing: .22em !important; }
  .cabecera { gap: 8px !important; }
}

/* PRESENTE, la app (8-oct-2026): arriba de todo en el menú, a lo ancho, con su índigo. Es lo que
   une a los productos: donde los clientes de cada uno llevan su turno, su club, su pedido. */
.cabecera nav .menu-panel a.menu-app { grid-column: 1 / -1; border: 1px solid rgba(124, 140, 255, .45); background: rgba(124, 140, 255, .08); margin-bottom: 8px; }
.cabecera nav .menu-panel a.menu-app:hover { background: rgba(124, 140, 255, .16); }
.menu-panel a.menu-app b { color: #A9B4FF; }