/* SMA Technology: barra superior compartida (paginas con el estilo anterior).
   Todo va dentro de .bar para no chocar con las hojas de estilo de cada pagina. */

.bar {
  --b-ink: #0f1733;
  --b-white: #ffffff;
  --b-soft: #f2f5fa;
  --b-purple: #8740a8;
  --b-m: clamp(20px, 4vw, 64px);
  --b-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  transition: background 0.25s;
  font-family: "Roboto", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.bar.solid { background: var(--b-white); }
.bar *, .bar *::before, .bar *::after { box-sizing: border-box; }
.bar ul { list-style: none; margin: 0; padding: 0; }
.bar a { text-decoration: none; }

body.has-bar { padding-top: 84px; }

.bar .wrap { width: 100%; max-width: calc(1280px + 2 * var(--b-m)); margin: 0 auto; padding-inline: var(--b-m); }
.bar .bar-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 84px; }

.bar .bar-logo { display: flex; align-items: center; gap: 14px; font: 600 1.625rem/1 "Outfit", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--b-ink); }
.bar .bar-logo img { height: 56px; width: auto; }
.bar .bar-logo span { color: var(--b-ink); font-weight: 600; }

.bar .bar-nav { margin-left: auto; }
.bar .bar-nav > ul { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); }
.bar .bar-nav > ul > li { position: relative; }
.bar .bar-nav a, .bar .bar-nav button.drop-btn {
  font: 500 1.0625rem/1 "Roboto", system-ui, sans-serif; color: var(--b-ink);
  background: none; border: 0; padding: 12px 0; cursor: pointer; transition: color 0.2s;
}
.bar .bar-nav a:hover, .bar .bar-nav button.drop-btn:hover,
.bar .bar-nav a[aria-current="page"], .bar .bar-nav .drop-btn.current { color: var(--b-purple); }
.bar .bar-nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--b-purple); }

.bar .drop-menu { position: absolute; left: -20px; top: calc(100% + 8px); width: min(440px, 80vw); background: rgba(236, 242, 252, 0.88); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); padding: 12px 0; display: none; }
.bar .drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.bar .has-drop:hover .drop-menu, .bar .has-drop:focus-within .drop-menu, .bar .has-drop.open .drop-menu { display: block; }
.bar .drop-menu a { display: block; color: var(--b-ink); padding: 11px 22px; line-height: 1.3; font-size: 1rem; }
.bar .drop-menu a:hover { background: var(--b-purple); color: var(--b-white); }
.bar .drop-menu a[aria-current="page"] { color: var(--b-purple); font-weight: 500; box-shadow: none; }
.bar .drop-menu a[aria-current="page"]:hover { color: var(--b-white); }

.bar .bar-end { display: flex; align-items: center; gap: 12px; }
.bar .bar-toggle { display: none; width: 48px; height: 48px; min-height: 0; padding: 0; border: 0; color: transparent; font-size: 0; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1733' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / 26px 26px no-repeat var(--b-soft); transition: background-color 0.2s; }
.bar .bar-toggle:hover { background-color: #e3ecf9; }
.bar .skip { position: absolute; left: var(--b-m); top: -60px; background: var(--b-ink); color: var(--b-white); padding: 12px 18px; }
.bar .skip:focus { top: 8px; }

@media (max-width: 991px) {
  body.has-bar { padding-top: 72px; }
  .bar .bar-in { height: 72px; }
  .bar .bar-toggle { display: inline-flex; align-items: center; }
  .bar .bar-end { margin-left: auto; }
  .bar .bar-nav { margin-left: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--b-white); padding: 8px var(--b-m) 20px; display: none; }
  .bar.open { background: var(--b-white); }
  .bar.open .bar-nav { display: block; }
  .bar .bar-nav > ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .bar .bar-nav a, .bar .bar-nav button.drop-btn { padding: 14px 0; font-size: 1.0625rem; }
  .bar .drop-menu { position: static; width: auto; margin: 0 0 8px; }
  .bar .drop-menu::before { display: none; }
  .bar .bar-logo img { height: 44px; }
  .bar .bar-logo { font-size: 1.3rem; }
}

/* ---------- menu lateral movil ---------- */
.bar .drawer-head { display: none; }
@media (max-width: 991px) {
  body.menu-open { overflow: hidden; }
  .bar.open::before { content: ""; position: fixed; inset: 0; background: rgba(15, 23, 51, 0.5); z-index: -1; }
  .bar .bar-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0;
    width: min(86vw, 380px); background: var(--b-ink); color: var(--b-white);
    padding: 0 28px 36px; display: flex; flex-direction: column; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.35s var(--b-ease), visibility 0s linear 0.35s;
  }
  .bar.open .bar-nav { display: flex; transform: none; visibility: visible; transition: transform 0.35s var(--b-ease); }
  .bar .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 18px; }
  .bar .bar-nav .drawer-brand { display: flex; align-items: center; gap: 12px; font: 600 1.3rem/1 "Outfit", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--b-white); }
  .bar .drawer-brand img { height: 42px; width: auto; }
  .bar .drawer-close { width: 44px; height: 44px; background: none; border: 0; color: var(--b-white); font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .bar .drawer-close:hover { color: #56aaf2; }
  .bar .bar-nav > ul { margin-top: 18px; align-items: stretch; gap: 0; }
  .bar .bar-nav > ul > li > a, .bar .bar-nav button.drop-btn {
    display: block; width: 100%; text-align: left; padding: 18px 0;
    font: 600 1.5rem/1.2 "Outfit", system-ui, sans-serif; letter-spacing: -0.015em; color: var(--b-white);
  }
  .bar .bar-nav a:hover, .bar .bar-nav button.drop-btn:hover { color: #56aaf2; }
  .bar .bar-nav > ul > li > a[aria-current="page"] { box-shadow: none; color: #56aaf2; }
  .bar .bar-nav .drop-btn.current { color: #56aaf2; }
  .bar .drop-menu { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 0 10px 16px; width: auto; margin: 0; }
  .bar .drop-menu a { color: #cfe0f7; font: 500 1.0625rem/1.35 "Roboto", system-ui, sans-serif; padding: 10px 0; }
  .bar .drop-menu a:hover { background: none; color: #56aaf2; }
  .bar .drop-menu a[aria-current="page"] { color: #56aaf2; }
  .bar .has-drop:hover .drop-menu { display: none; }
  .bar .has-drop.open .drop-menu { display: block; }
}

/* menu movil a pantalla completa: blanco con azul desenfocado */
@media (max-width: 991px) {
  .bar.open::before { display: none; }
  .bar.open .bar-toggle { visibility: hidden; }
  .bar .bar-nav {
    left: 0; right: 0; width: 100%; max-width: none;
    background: radial-gradient(ellipse 80% 45% at 0% 0%, rgba(86, 170, 242, 0.55) 0%, transparent 70%), radial-gradient(ellipse 70% 40% at 100% 100%, rgba(86, 170, 242, 0.35) 0%, transparent 70%), rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
    color: var(--b-ink);
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, transform 0.35s var(--b-ease), visibility 0s linear 0.35s;
  }
  .bar.open .bar-nav { transform: none; opacity: 1; visibility: visible; transition: opacity 0.3s ease, transform 0.35s var(--b-ease); }
  .bar .bar-nav .drawer-brand { color: var(--b-ink); }
  .bar .drawer-close { color: var(--b-ink); }
  .bar .drawer-close:hover { color: var(--b-purple); }
  .bar .bar-nav > ul > li > a, .bar .bar-nav button.drop-btn { color: var(--b-ink); font-size: clamp(1.75rem, 7.5vw, 2.25rem); padding: 20px 0; }
  .bar .bar-nav a:hover, .bar .bar-nav button.drop-btn:hover { color: var(--b-purple); }
  .bar .bar-nav > ul > li > a[aria-current="page"], .bar .bar-nav .drop-btn.current { color: var(--b-purple); }
  .bar .drop-menu a { color: #3b4466; font-size: 1.1875rem; padding: 11px 0; }
  .bar .drop-menu a:hover { background: none; color: var(--b-purple); }
  .bar .drop-menu a[aria-current="page"] { color: var(--b-purple); }
}

/* certificaciones en el pie de las paginas viejas */
.foot-certs-wrap { padding-block: 8px 28px; }
.foot-certs-title { font: 500 1.0625rem/1.2 "Outfit", system-ui, sans-serif; color: #fff; margin: 0 0 14px; }
.foot-certs ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.foot-certs li { background: #fff; padding: 10px 16px; border-radius: 10px; display: flex; align-items: center; }
.foot-certs img { height: 76px; width: auto; display: block; }