/* ── LA CABECERA Y LOS SECTORES (8-oct-2026) ─────────────────────────────────────────────────────────────────────────────────────────────────────
   El menú de Space (grabación spacefs2.mov, fotograma a fotograma a 30 fps): una píldora «Menú» fija arriba al centro; al pulsarla, el MISMO contenedor se ensancha y
   crece hacia abajo hasta ser un panel de cristal (la etiqueta se vuelve «Cerrar» y las dos rayas, una ✕); las columnas entran con sus enlaces subiendo 18 px, uno tras otro
   (≈ 0,55 s en abrir); al elegir algo se pliega más deprisa (≈ 0,3 s). El enlace bajo el cursor se aclara. Aquí, el contenido del panel es el de ElevenLabs: la lista de
   sectores, cada uno con su línea de qué hace.
   Todo con transiciones CSS (sin librería): el alto «auto» se anima con `grid-template-rows: 0fr → 1fr`; el estado lo pone assets/nav-v1.js (data-abierto).
   La entrada de la cabecera al cargar (bajar 8 px y aparecer) NO está aquí: es de la capa de movimiento. */
.top { grid-template-columns:1fr auto 1fr }                                      /* círculo | píldora | acciones, en todos los anchos */
.mn-slot { position:relative; width:calc(116 * var(--u)); height:calc(52 * var(--u)) }      /* reserva el sitio de la píldora cerrada: el panel crece sin mover nada */
.mn { position:absolute; top:0; left:50%; translate:-50% 0; width:100%; border-radius:calc(26 * var(--u)); background:rgba(255, 255, 255, .93); box-shadow:var(--sombra-s); overflow:hidden;
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  transition:width .45s var(--ease), border-radius .45s var(--ease), box-shadow .45s var(--ease), background-color .3s var(--ease-ui) }
.mn[data-abierto="true"] { width:min(calc(100vw - 32px), calc(560 * var(--u))); border-radius:calc(28 * var(--u)); background:rgba(255, 255, 255, .9); box-shadow:var(--sombra) }

.mn-bar { all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--u)); width:100%; height:calc(52 * var(--u)); cursor:pointer; color:var(--ink); font-size:var(--fs-m); font-weight:500 }
.mn-bar:focus-visible { outline:2px solid var(--acento); outline-offset:-3px }
.mn-ico { position:relative; flex:none; width:calc(18 * var(--u)); height:calc(12 * var(--u)) }
.mn-ico i { position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--ink); transition:top .45s var(--ease), transform .45s var(--ease) }
.mn-ico i:nth-child(1) { top:calc(2.5 * var(--u)) } .mn-ico i:nth-child(2) { top:calc(8 * var(--u)) }
.mn[data-abierto="true"] .mn-ico i { top:calc(5 * var(--u)) }
.mn[data-abierto="true"] .mn-ico i:nth-child(1) { transform:rotate(45deg) } .mn[data-abierto="true"] .mn-ico i:nth-child(2) { transform:rotate(-45deg) }
.mn-lab { display:grid; overflow:hidden; line-height:1.3 }
.mn-l1, .mn-l2 { grid-area:1 / 1; text-align:left; transition:opacity .3s var(--ease-ui), transform .45s var(--ease) }
.mn-l2 { opacity:0; transform:translateY(80%) }
.mn[data-abierto="true"] .mn-l1 { opacity:0; transform:translateY(-80%) } .mn[data-abierto="true"] .mn-l2 { opacity:1; transform:none }

.mn-cuerpo { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .32s var(--ease), visibility 0s .32s }
.mn[data-abierto="true"] .mn-cuerpo { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .55s var(--ease), visibility 0s }
.mn-int { min-height:0; overflow:hidden; display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); column-gap:calc(26 * var(--u)); padding:0 calc(28 * var(--u)) }
.mn-col { padding-top:calc(8 * var(--u)) }
.mn-t { margin:calc(10 * var(--u)) 0 calc(8 * var(--u)); color:var(--ink-3); font-size:calc(14 * var(--u)); font-weight:500; letter-spacing:.09em; text-transform:uppercase }
.mn ul { list-style:none; margin:0; padding:0 }
.mn li a { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.55em; padding:calc(6 * var(--u)) 0; color:var(--ink); text-decoration:none; transition:color .15s var(--ease-ui) }
.mn li a b { font-size:calc(23 * var(--u)); font-weight:500; letter-spacing:-.02em; line-height:1.18 }
.mn li a small { flex-basis:100%; margin-top:1px; color:var(--ink-3); font-size:calc(14 * var(--u)); line-height:1.35 }
.mn li a:hover, .mn li a:focus-visible { color:var(--ink-3) }                    /* como en Space: el enlace bajo el cursor se aclara */
.mn li a:focus-visible, .mn-pie a:focus-visible, .mn-pie button:focus-visible { outline:2px solid var(--acento); outline-offset:3px; border-radius:6px }
.mn li a[aria-current="page"] b::after { content:""; display:inline-block; width:.3em; height:.3em; margin-left:.4em; border-radius:50%; background:var(--acento); vertical-align:.16em }
.mn-tag { font-style:normal; padding:.08em .65em; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-3); font-size:calc(14 * var(--u)); font-weight:500; letter-spacing:0; line-height:1.5; white-space:nowrap }
.mn-pie { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:calc(6 * var(--u)) calc(20 * var(--u)); margin:calc(12 * var(--u)) 0 calc(20 * var(--u)); padding-top:calc(16 * var(--u)); border-top:1px solid var(--line); font-size:calc(14 * var(--u)) }
.mn-pie a { color:var(--ink-3); text-decoration:none; transition:color .15s var(--ease-ui) } .mn-pie a:hover { color:var(--ink) }
.mn-pie button { all:unset; margin-left:auto; padding:.25em .9em; border:1px solid var(--line-2); border-radius:999px; color:var(--ink); font-weight:500; cursor:pointer; transition:background-color .15s var(--ease-ui) } .mn-pie button:hover { background:var(--bg-2) }
/* la entrada del contenido: cada enlace sube 18 px y aparece, escalonado (retraso 0,14 s + 0,045 s por pieza, como en Space); al cerrar, todo se va a la vez y deprisa */
.mn li, .mn .mn-t, .mn-pie { opacity:0; transform:translateY(calc(18 * var(--u))); transition:opacity .2s var(--ease-ui), transform .25s var(--ease-ui) }
.mn[data-abierto="true"] li, .mn[data-abierto="true"] .mn-t, .mn[data-abierto="true"] .mn-pie { opacity:1; transform:none;
  transition:opacity .45s var(--ease) calc(.14s + var(--i, 0) * .045s), transform .6s var(--ease) calc(.14s + var(--i, 0) * .045s) }

/* móvil: el panel ocupa el ancho, las dos columnas se apilan si no caben, y la acción de la cabecera pasa al panel y a la portada */
@media (max-width: 640px) {
  .mn-slot { width:104px; height:48px } .mn-bar { height:48px; font-size:15px } .mn { border-radius:24px }
  .mn[data-abierto="true"] { width:calc(100vw - 20px) }
  .mn-int { grid-template-columns:minmax(0, .72fr) minmax(0, 1.28fr); column-gap:16px; padding:0 18px }
  .mn li a b { font-size:21px } .mn li a small { font-size:14px }
}
@media (max-width: 560px) { .top .pill-ink { display:none } .top-r .lang-mini { display:grid } }
@media (max-width: 640px) { .top:has(.mn[data-abierto="true"]) .top-r { opacity:0; pointer-events:none; transition:opacity .2s var(--ease-ui) } .top-r { transition:opacity .35s var(--ease-ui) .2s } }
@media (max-width: 380px) { .mn-int { grid-template-columns:minmax(0, 1fr) } .mn-col-sec { grid-row:auto } }
@media (prefers-reduced-motion: reduce) { .mn, .mn *, .mn-cuerpo { transition:none !important } }

/* ── LOS SECTORES EN LOS QUE TRABAJAMOS (sección de la portada): los mismos seis del menú, cada uno con lo que hace y a dónde lleva ─────────────── */
.sec-sectores .h2 { margin-bottom:clamp(36px, 4vw, 64px) }
.sectores { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 28px) }
.sectores li { display:flex }
.sector-c { flex:1; display:flex; flex-direction:column; gap:calc(10 * var(--u)); padding:calc(30 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)); border-radius:calc(28 * var(--u)); background:#fff; box-shadow:var(--sombra); color:var(--ink); text-decoration:none;
  transition:box-shadow .2s var(--ease-ui) }
.sector-c:focus-visible { outline:2px solid var(--acento); outline-offset:3px }
.sc-et { color:var(--ink-3); font-size:calc(14 * var(--u)); font-weight:500; letter-spacing:.09em; text-transform:uppercase }
.sc-n { display:flex; align-items:center; gap:.5em; font-size:calc(34 * var(--u)); font-weight:500; letter-spacing:-.03em; line-height:1.1 }
.sc-t { flex:1; color:var(--ink-2); font-size:var(--fs-m); line-height:1.5; text-wrap:pretty }
.sc-go { display:inline-flex; align-items:center; gap:.5em; margin-top:calc(8 * var(--u)); font-size:var(--fs-m); font-weight:500 }
.sc-go svg { width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease-ui) }
.sector-c:hover .sc-go svg { transform:translateX(3px) }
@media (max-width: 1100px) { .sectores { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .sectores { grid-template-columns:minmax(0, 1fr) } .sector-c { padding:24px 22px 22px } .sc-n { font-size:30px } }