/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Poyntia · web v2 · CABECERA, PIE y BOTONES (paquete autocontenido, 16-oct-2026, sesión A).
   Todas las clases llevan el prefijo v2- (salvo .btn*) y los tokens van ACOTADOS a sus elementos: se puede incluir en una página heredada (Planes, Acceso, legales) sin chocar con su CSS.
   Reglas: DM Sans (la página que lo use tiene que declarar la @font-face), ni mono ni versales con espaciado, azul de la web, nada baja de tamaño (--u), prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.v2-cab, .v2-panel, .v2-pie, .v2-skip, .btn {
  --u: clamp(1px, .068vw, 1.74px);
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --azul: #2551d6; --azul-l: #7f9cff; --neg: #050608; --luz: #f3f4f6; --luz-2: #9aa0ab; --papel: #fff;
  --tinta: #0e0f12; --tinta-2: #565b66; --linea: #dcdfe4; --rayo: rgba(255,255,255,.16); --rayo-2: rgba(255,255,255,.34);
  --alto-cab: calc(64 * var(--u)); --cab-h: calc(88 * var(--u)); --gut: calc(24 * var(--u));
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-ui: cubic-bezier(.4, 0, .2, 1);
  font-family: var(--sans); font-synthesis: none; letter-spacing: -.012em; font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.v2-cab *, .v2-panel *, .v2-pie *, .btn { box-sizing: border-box; }
.v2-cab a:not(.btn), .v2-pie a, .v2-panel a:not(.btn) { color: inherit; text-decoration: none; }
.v2-cab a.btn, .v2-panel a.btn { text-decoration: none; }
.v2-cab button, .v2-pie button, .btn { font: inherit; letter-spacing: inherit; cursor: pointer; }
.v2-cab img, .v2-pie img { display: block; max-width: none; }
.v2-cab ul, .v2-pie ul { list-style: none; margin: 0; padding: 0; }
.v2-cab h3, .v2-pie h3, .v2-pie p { margin: 0; }
.v2-cab :focus-visible, .v2-pie :focus-visible, .v2-panel :focus-visible, .btn:focus-visible, .v2-skip:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.v2-pie :focus-visible { outline-color: var(--azul-l); }
/* ── botones: Scale usa rectángulos de 6-8 px, negros sobre claro, contorno sobre negro ─────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); min-height: max(44px, calc(40 * var(--u)));
  padding: 0 calc(18 * var(--u)); border-radius: calc(8 * var(--u)); border: 1px solid transparent; font-weight: 500; font-size: var(--fs-ui);
  letter-spacing: -.01em; line-height: 1; white-space: nowrap; transition: background .25s var(--ease-ui), border-color .25s var(--ease-ui), color .25s var(--ease-ui), transform .25s var(--ease-ui); }
.btn-neg { background: var(--tinta); color: #fff; }
.btn-blanco { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(14,15,18,.06); }
.btn-borde { border-color: var(--linea); color: var(--tinta-2); background: transparent; }
@media (hover: hover) { .btn-borde:hover { border-color: #b9bec7; color: var(--tinta); } }
.btn-vela { border-color: var(--rayo-2); background: rgba(255,255,255,.08); color: #fff; }       /* sobre negro: contorno y velo, nunca relleno blanco */
@media (hover: hover) { .btn-vela:hover { border-color: rgba(255,255,255,.6); } }
.btn-l { min-height: calc(48 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: max(16px, calc(var(--fs-ui) * 1.06)); }
.btn .fl { width: .5em; height: .5em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: -.1em; }

.btn-azul { background: var(--azul-prof); color: #fff; }      /* 18-oct (Pablo): «no quiero azules chillones, los botones azules tienen que ser azul marino oscuro» (17-oct #1b3a96; antes var(--azul) = #2551d6) */
/* 18-oct tarde (Pablo): «los efectos de los botones se vean así» (poyntia scale.mov, el botón «Schedule A Demo ›» de Scale, medido a 60 fps): al entrar el ratón una capa MÁS CLARA barre el botón de izquierda a derecha y, al salir, se retira por la derecha
   (≈ 0,45 s, curva que frena); el texto y el icono no se mueven. La capa es un ::before que escala en X: con el ratón dentro nace por la izquierda (transform-origin left) y al salir se encoge hacia la derecha (origin right). Cada variante pone su --fx. */
.btn, .so-btn, .lg-enviar, .lg-boton { position: relative; overflow: hidden; isolation: isolate; }
.btn::before, .so-btn::before, .lg-enviar::before, .lg-boton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fx, rgba(255,255,255,.17)); transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
@media (hover: hover) { .btn:hover::before, .so-btn:hover::before, .lg-enviar:hover::before, .lg-boton:hover::before { transform: scaleX(1); transform-origin: left center; } }
.btn:focus-visible::before, .so-btn:focus-visible::before, .lg-enviar:focus-visible::before, .lg-boton:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn-neg, .btn-vela, .btn-azul, .so-btn, .lg-enviar { --fx: rgba(255,255,255,.17); }
.btn-blanco, .btn-borde, .lg-boton { --fx: rgba(14,15,18,.07); }
@media (prefers-reduced-motion: reduce) { .btn::before, .so-btn::before, .lg-enviar::before, .lg-boton::before { transition: none; } }


/* ── cabecera: barra blanca fina (Scale, 0:82) con MEGAMENÚ. Se esconde al bajar y vuelve al subir; sobre negro se invierte; con el panel abierto, siempre clara ─────── */
.v2-cab { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--cab-h); display: flex; align-items: center; gap: calc(28 * var(--u));
  padding: 0 var(--gut); color: var(--tinta); transition: transform .45s var(--ease), color .35s var(--ease-ui); }
/* el fondo de la barra vive en ::before (no en la cabecera): así el panel del megamenú, hijo de la cabecera, puede desenfocar de verdad lo que hay detrás */
.v2-cab::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--cab-h); background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: background .35s var(--ease-ui), box-shadow .35s var(--ease-ui); }
.v2-cab[data-oculta] { transform: translateY(-101%); }
.v2-cab .v2-logo { display: block; flex: none; }
.v2-cab .v2-logo img { height: calc(24 * var(--u)); width: auto; }
.v2-cab .v2-mm-nav { display: flex; gap: calc(4 * var(--u)); margin-right: auto; }
.v2-cab .v2-mm-b { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(14 * var(--u)); border: 0; border-radius: 8px; background: none;
  font-size: var(--fs-ui); color: inherit; transition: color .25s var(--ease-ui); }
.v2-cab .v2-mm-b::after { content: ""; position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.v2-cab .v2-mm-b[aria-expanded="true"]::after { transform: scaleX(1); }
/* mientras uno está abierto, el otro se atenúa (Scale) */
.v2-cab[data-mm="sec"] .v2-mm-b[data-mm="poy"], .v2-cab[data-mm="poy"] .v2-mm-b[data-mm="sec"] { color: #b4b8c1; }
.v2-cab .v2-der { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.v2-cab .v2-der .btn { min-height: max(40px, calc(40 * var(--u))); }
@media (pointer: coarse) { .v2-cab .v2-der .btn { min-height: 44px; } }
.v2-cab .v2-acc { border-color: #c7c7c7; color: #767676; }
@media (hover: hover) { .v2-cab .v2-acc:hover { border-color: #8e8e8e; color: var(--tinta); } }
.v2-cab .v2-idi { min-width: max(44px, calc(40 * var(--u))); padding: 0 calc(10 * var(--u)); background: none; color: #767676; }
@media (hover: hover) { .v2-cab .v2-idi:hover { color: var(--tinta); } }
.v2-cab .v2-menu-b { display: none; }
.v2-cab .v2-menu-t-b, .v2-menu-b[aria-expanded="true"] .v2-menu-t-a { display: none; }
.v2-menu-b[aria-expanded="true"] .v2-menu-t-b { display: inline; }
/* sobre una escena negra la barra pasa a negro translúcido, con texto claro y botones de contorno (no con el megamenú abierto) */
html.sobre-negro:not(.mm-abierto) .v2-cab { color: var(--luz); }
html.sobre-negro:not(.mm-abierto) .v2-cab::before { background: rgba(5,6,8,.72); box-shadow: none; }      /* 19-oct (Pablo: «no pongas separación entre barra y fondo negros»): sin la línea fina inferior que se veía sobre el negro */
html.sobre-negro:not(.mm-abierto) .v2-cab .btn-borde { border-color: var(--rayo-2); color: var(--luz); }
html.sobre-negro:not(.mm-abierto) .v2-cab .btn-neg { background: rgba(255,255,255,.12); border-color: var(--rayo-2); color: var(--luz); }
html.sobre-negro:not(.mm-abierto) .v2-cab .v2-idi { color: var(--luz-2); }
html.sobre-negro:not(.mm-abierto) .v2-cab .v2-logo img { filter: invert(1) brightness(2); }
html.sobre-negro:not(.mm-abierto) .v2-cab[data-mm] .v2-mm-b { color: var(--luz); }

/* ── megamenú (≥ 901 px): panel claro a todo el ancho bajo la barra; columna de enlaces a la izquierda, tarjeta de foto/vídeo a la derecha ──────── */
.v2-vel { position: fixed; z-index: 48; inset: 0; background: rgba(5,6,8,.34); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease-ui), visibility 0s .3s; }
html.mm-abierto .v2-vel { opacity: 1; visibility: visible; transition-delay: 0s; }
.v2-mega { position: absolute; left: 0; right: 0; top: 100%; height: 0; overflow: hidden; visibility: hidden; background: rgba(250,251,253,.95);
  -webkit-backdrop-filter: saturate(1.5) blur(26px); backdrop-filter: saturate(1.5) blur(26px); box-shadow: 0 34px 60px -24px rgba(5,6,8,.34); color: var(--tinta);
  transition: height .38s var(--ease), visibility 0s .38s; }
.v2-mega[data-abierto] { visibility: visible; transition-delay: 0s, 0s; }
.v2-mm-p { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: calc(40 * var(--u));
  padding: calc(28 * var(--u)) var(--gut) calc(36 * var(--u)); opacity: 0; visibility: hidden; transition: opacity .26s var(--ease-ui), visibility 0s .26s; }
.v2-mm-p[data-on] { opacity: 1; visibility: visible; transition-delay: 0s; }
.v2-mm-cols { display: flex; gap: calc(64 * var(--u)); padding-left: calc(14 * var(--u)); }
.v2-mm-rot { margin: 0 0 calc(10 * var(--u)); font-size: var(--fs-sm); color: #8b909b; letter-spacing: 0; }
.v2-mm-lista { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.v2-cab .v2-mm-it { display: block; padding: calc(7 * var(--u)) 0; font-size: var(--fs-body); line-height: 1.25; color: var(--tinta); transition: color .2s var(--ease-ui); }
.v2-cab a.v2-mm-it:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .v2-cab a.v2-mm-it:hover { color: var(--azul); } }
.v2-cab a.v2-mm-it:focus-visible { color: var(--azul); }
.v2-mm-tarjeta { position: relative; flex: none; width: max(280px, calc(400 * var(--u))); aspect-ratio: 8 / 5; border-radius: calc(12 * var(--u)); overflow: hidden; background: #e7eaf0; box-shadow: 0 1px 0 rgba(14,15,18,.06); }
.v2-mm-med { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease-ui); }
.v2-mm-med[data-on] { opacity: 1; }
.v2-mm-med picture, .v2-mm-med img, .v2-mm-med video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-mm-med video { opacity: 0; transition: opacity .35s var(--ease-ui); }
.v2-mm-med video[data-v] { opacity: 1; }

/* ── menú móvil (≤ 900 px): acordeón a pantalla completa ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .v2-cab { gap: calc(12 * var(--u)); padding: 0 16px; --alto-cab: 56px; --cab-h: 56px; }
  .v2-cab .v2-mm-nav, .v2-cab .v2-idi, .v2-cab .v2-acc, .v2-cab .v2-hab, .v2-mega, .v2-vel { display: none; }
  .v2-cab .v2-der { margin-left: auto; }
  .v2-cab .v2-der .v2-menu-b { display: inline-flex; }
  .v2-panel { position: fixed; z-index: 49; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--alto-cab) + 12px) 20px 28px; background: var(--papel); color: var(--tinta);
    display: flex; flex-direction: column; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-ui), transform .4s var(--ease), visibility 0s .4s; }
  .v2-panel[data-abierto] { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .v2-ac { border-bottom: 1px solid var(--linea); }
  .v2-ac-b { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 0; border: 0; background: none; color: inherit; text-align: left;
    font-size: clamp(30px, 8.6vw, 40px); letter-spacing: -.03em; }
  .v2-ac-b::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .35s var(--ease); }
  .v2-ac-b[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px, -3px); }
  .v2-ac-c { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .38s var(--ease), visibility 0s .38s; }
  .v2-ac-c > ul { overflow: hidden; min-height: 0; }
  .v2-ac-b[aria-expanded="true"] + .v2-ac-c { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .v2-ac-it { display: block; padding: 11px 4px; font-size: clamp(20px, 5.6vw, 26px); letter-spacing: -.02em; color: var(--tinta); text-decoration: none; }
  .v2-ac-c li:last-child { padding-bottom: 12px; }
  .v2-ac-pie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .v2-panel .v2-idi-p { margin-top: auto; padding-top: 28px; align-self: flex-start; }
}
@media (min-width: 901px) { .v2-panel { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .v2-mega, .v2-mm-p, .v2-mm-med, .v2-vel, .v2-cab, .v2-cab::before, .v2-ac-c, .v2-panel { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ── velo de la transición a Acceso: el mismo degradado azul que la pantalla de Acceso (acceso-azul-v2.css) ── */
html { --v2-grad-acceso: radial-gradient(60% 55% at 12% 6%, #7d94ec 0%, rgba(125,148,236,0) 70%), radial-gradient(55% 50% at 52% 0%, #cbd8ff 0%, rgba(203,216,255,0) 72%), radial-gradient(60% 60% at 100% 8%, #94adf3 0%, rgba(148,173,243,0) 68%), radial-gradient(75% 38% at 0% 50%, #cfe3ff 0%, rgba(207,227,255,0) 72%), linear-gradient(180deg, #b4c5f6 0%, #dce6fb 34%, #f4f6fb 64%, #f5f7fb 100%); }
.v2-velo-ac { position: fixed; inset: 0; z-index: 9999; opacity: 0; pointer-events: all; transition: opacity .42s cubic-bezier(.4, 0, .2, 1); background: var(--v2-grad-acceso); }
.v2-velo-ac[data-on] { opacity: 1; }
/* ── enlace «Saltar al contenido» ── */
.v2-skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--tinta); color: #fff; border-radius: 8px; transition: top .2s; }
.v2-skip:focus { top: 12px; }


/* ── 18-oct tarde (Pablo, poyntia scale.mov): «el panel de Scale depende de en qué página estás: unas son blancas y otras negras». Las páginas con el hero negro (portada, plataforma, energía, real estate: <html data-menu="negro">) llevan, con el megamenú abierto,
   la barra y el panel como UNA sola superficie oscura, con los títulos en gris, el activo en blanco y el botón de demo en blanco; las demás, blancas. Enlaces más grandes, la opción bajo el ratón en lila y el resto se atenúa (Scale). ── */
html.mm-abierto .v2-cab .v2-mm-b:not([aria-expanded="true"]) { color: #8b909b; }
html[data-menu="negro"].mm-abierto .v2-cab { color: var(--luz); }
html[data-menu="negro"].mm-abierto .v2-cab::before { background: rgba(22,22,23,.97); box-shadow: none; }
html[data-menu="negro"].mm-abierto .v2-cab .v2-logo img { filter: invert(1) brightness(2); }
html[data-menu="negro"].mm-abierto .v2-cab .v2-mm-b[aria-expanded="true"] { color: #fff; }
html[data-menu="negro"].mm-abierto .v2-cab .btn-borde { border-color: var(--rayo-2); color: var(--luz); }
html[data-menu="negro"].mm-abierto .v2-cab .btn-neg { background: #fff; color: var(--tinta); border-color: #fff; --fx: rgba(14,15,18,.08); }
html[data-menu="negro"].mm-abierto .v2-cab .v2-idi, html[data-menu="negro"].mm-abierto .v2-cab .v2-acc { color: var(--luz-2); }
html[data-menu="negro"] .v2-mega { background: rgba(22,22,23,.97); color: var(--luz); box-shadow: 0 34px 60px -24px rgba(0,0,0,.6); }
html[data-menu="negro"] .v2-mm-rot { color: #7d828d; }
html[data-menu="negro"] .v2-cab .v2-mm-it { color: var(--luz); }
html[data-menu="negro"] .v2-mm-tarjeta { background: #0e0e10; box-shadow: none; }
.v2-cab .v2-mm-it { font-size: calc(var(--fs-lead) * 1.05); padding: calc(8 * var(--u)) 0; }
.v2-mm-lista:hover .v2-mm-it:not(:hover) { color: #8b909b; }
.v2-mm-tarjeta { width: max(300px, calc(540 * var(--u))); }
@media (hover: hover) {
  .v2-cab a.v2-mm-it:hover, .v2-cab .v2-mm-it:hover { color: #7c5ad9; }
  html[data-menu="negro"] .v2-cab a.v2-mm-it:hover, html[data-menu="negro"] .v2-cab .v2-mm-it:hover { color: #a08ef2; }
}