/* MENÚ DE SOLUCIONES en «App» (21-oct) — ver menu-soluciones.js. Estilo Apple: panel blanco que
   flota, filas de 44 px o más, un color por solución (el de su pestaña en la portada). */
.ms-caja{ position:relative; display:inline-flex; align-items:center; }
/* la flechita NO ocupa lugar en la fila (Samuel 22-oct: «rompiste la proporción»): cuelga a la derecha de «App» */
.ms-flecha{ position:absolute; left:100%; top:50%; translate:1px -50%; display:grid; place-items:center; width:18px; height:22px; margin:0; padding:0; border:0; border-radius:6px; background:none; color:rgba(29,29,31,.56); cursor:pointer;
  opacity:0; transition:opacity .2s, color .2s, transform .25s cubic-bezier(.22,1,.36,1); }
.ms-flecha svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ms-caja:hover .ms-flecha, .ms-caja.abierto .ms-flecha, .ms-flecha:focus-visible{ opacity:1; color:#1D1D1F; }
.ms-caja.abierto .ms-flecha{ rotate:180deg; }
.ms-flecha:focus-visible{ outline:2px solid #0071E3; outline-offset:2px; }
/* sin mouse no hay «pasar por encima»: la flechita siempre a la vista, con área de toque de 44 px */
@media (hover:none), (pointer:coarse){
  .ms-flecha{ opacity:1; }
  .ms-flecha::before{ content:''; position:absolute; inset:-11px; }
}

.ms-panel{ position:absolute; top:calc(100% + 14px); left:50%; z-index:200; width:540px; padding:18px; border-radius:24px; background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.8) blur(24px); backdrop-filter:saturate(1.8) blur(24px);
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04), 0 34px 80px -30px rgba(0,0,0,.38);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; text-align:left; letter-spacing:-.01em;
  opacity:0; visibility:hidden; transform:translate(-50%,-8px) scale(.98); transform-origin:50% 0;
  transition:opacity .22s, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s .32s; }
.ms-panel::before{ content:''; position:absolute; left:0; right:0; top:-16px; height:16px; }   /* puente: el mouse cruza al panel sin cerrarlo */
.ms-caja.abierto .ms-panel{ opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .22s, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s; }
.ms-panel a::after{ display:none !important; }   /* el punto azul de .prodnav a.on no aplica aquí */
.ms-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:2px 6px 14px; }
.ms-cab b{ font-size:13px; font-weight:600; color:#1D1D1F; }
.ms-cab span{ font-size:12px; color:#86868B; }
.ms-rej{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ms-rej a{ position:relative; display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; min-height:76px; padding:14px; border-radius:18px;
  background:#F5F5F7; color:#1D1D1F; text-decoration:none; overflow:hidden; transition:background .25s, box-shadow .25s; }
.ms-rej a::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%); opacity:0; transition:opacity .3s; }
.ms-rej a:hover::before, .ms-rej a:focus-visible::before, .ms-rej a[aria-current="page"]::before{ opacity:1; }
.ms-rej a:hover, .ms-rej a:focus-visible{ background:#fff; box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 14px 30px -20px color-mix(in srgb, var(--c) 80%, transparent); outline:none; }
.ms-rej a[aria-current="page"]{ background:#fff; box-shadow:0 0 0 1.5px var(--c); }
.ms-rej i{ grid-row:span 2; position:relative; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, white), var(--c)); box-shadow:0 8px 16px -8px var(--c), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.ms-rej a:hover i{ transform:scale(1.06) rotate(-3deg); }
.ms-rej i svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ms-rej b{ position:relative; align-self:end; font-size:16px; font-weight:600; line-height:1.2; }
.ms-rej small{ position:relative; align-self:start; font-size:12.5px; color:#6E6E73; line-height:1.3; margin-top:2px; }
.ms-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:12px 6px 0; border-top:1px solid rgba(0,0,0,.06); }
.ms-pie a{ display:inline-flex; align-items:center; gap:6px; min-height:36px; font-size:14px; font-weight:500; text-decoration:none; }
.ms-toda{ color:#0071E3; }
.ms-toda:hover{ text-decoration:underline; }
.ms-toda svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s; }
.ms-toda:hover svg{ transform:translateX(3px); }
.ms-precios{ padding:0 16px; border-radius:999px; background:#1D1D1F; color:#fff; }
.ms-precios:hover{ background:#000; }
/* en el teléfono la barra de productos es la segunda fila, centrada: el panel se abre a todo lo ancho útil */
@media (max-width:899px){
  .ms-panel{ position:fixed; top:120px; left:12px; right:12px; width:auto; padding:14px; transform:translateY(-8px) scale(.98); }
  .ms-caja.abierto .ms-panel{ transform:none; }
  .ms-cab span{ display:none; }
  .ms-rej{ grid-template-columns:1fr; gap:6px; }
  .ms-rej a{ min-height:64px; padding:10px 12px; }
  .ms-rej i{ width:40px; height:40px; border-radius:12px; }
}
@media (prefers-reduced-motion:reduce){ .ms-panel, .ms-flecha{ transition:none; } }
/* el panel vive DENTRO de .prodnav: sus enlaces heredaban el gris, el padding y el margen de los de la barra */
.prodnav .ms-panel a{ margin:0; letter-spacing:-.01em; }
.prodnav .ms-rej a{ color:#1D1D1F; padding:14px; }
.prodnav .ms-pie a.ms-toda{ color:#0071E3; padding:0; }
.prodnav .ms-pie a.ms-precios{ color:#fff; padding:0 16px; }
@media (max-width:899px){ .prodnav .ms-rej a{ padding:10px 12px; } }
@media (min-width:900px){ .ms-panel{ width:600px; } }