.top { position: fixed; top: 0; right: 0; left: 0; z-index: 40; }
/* Evita el destello azul propio de los navegadores móviles al tocar enlaces o botones. */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
header { position: fixed; top: 34px; right: 0; left: 0; z-index: 30; }
/* En móvil, la franja (34 px) y la navegación (64 px) suman 98 px.
   Reservar 112 px dejaba una franja blanca de 14 px antes del contenido. */
body:has(.top) { padding-top: 112px; }

@media (max-width: 540px) {
  body:has(.top) { padding-top: 98px; }
}
.services-intro-link{display:inline-flex;gap:8px;margin-left:10px;color:var(--black);font-size:.82rem;font-weight:900;text-transform:uppercase;white-space:nowrap}.services-intro-link span{color:var(--black);font-size:1.2em}.services-intro-link:hover{text-decoration:underline;text-underline-offset:4px}
.footer-brand{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px}.footer-brand> a,.footer-brand>.logo,.footer-brand>p{grid-column:1}.footer-brand> a,.footer-brand>.logo{grid-row:1}.footer-brand>p{grid-row:2}.footer-social{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:9px;color:#dce4f3;font-size:.78rem;font-weight:700}.instagram-footer-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:currentColor;transition:color .2s ease,transform .2s ease}.instagram-footer-link svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}.instagram-footer-link .instagram-dot{fill:currentColor;stroke:0}.instagram-footer-link:hover{color:var(--green);transform:translateY(-2px)}

@media (max-width: 900px) {
  .nav { position: relative; }
  .nav-actions > .btn { display: none; }
  .nav-actions > .language { display: none; }
  .menu-toggle {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    min-width: 70px;
    min-height: 48px;
    padding: 8px 4px 22px;
    background: transparent;
    color: var(--black);
    font: inherit;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle.is-open { color: #1d6b5d; }
  .links {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: -20px;
    right: -20px;
    padding: 14px 20px 20px;
    background: var(--black);
    border-top: 1px solid rgba(255,255,255,.27);
  }
  .links.menu-open { display: grid; gap: 0; }
  .links a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.27); color: #fff; font-size: .9rem; }
  .links a:last-child { border-bottom: 0; }
  .mobile-language { display: block; justify-self: start; margin-top: 12px; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.27); background: transparent; color: #fff; font-size: .86rem; font-weight: 800; cursor: pointer; }
}
@media (min-width: 901px) { .menu-toggle, .mobile-language { display: none; } }

@media (max-width: 540px) {
  .footer { display: block; }
  .footer .legal-link { margin-top: 18px; }
}

/* Identidad Skill3 Acadèmia de Futbol: azul como base, lima para acentos. */
:root { --green: #e8ff16; --black: #263A69; --gray: #52617b; --paper: #e4e7eb; --mist: #f4f6f8; --line: #dbe1e9; }
.top { background: var(--black); color: #fff; }
/* La antigua franja de borrador ya no se utiliza. */
.top { display: none; }
header { top: 0; }
body:has(.top) { padding-top: 96px; }
/* El logotipo oficial es azul marino: un blanco roto frío lo mantiene legible sin resultar tan intenso. */
header { background: var(--paper); color: var(--black); box-shadow: 0 2px 12px rgba(38, 58, 105, .16); }
/* Borde de césped integrado en la propia barra, sin sobresalir al hacer scroll. */
header { position: fixed; overflow: hidden; }
@media (max-width: 900px) { header.menu-active { overflow: visible; } }
header::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 21px;
  background: url('assets/grass-edge.svg') repeat-x bottom / auto 20px;
  pointer-events: none;
  z-index: 2;
}
.nav { position: relative; z-index: 3; }
.header-cursor-ball {
  position: absolute;
  top: 0;
  left: 0;
  /* Visible sobre la barra, pero siempre por detrás del césped y del menú. */
  z-index: 1;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  pointer-events: none;
}
.header-cursor-ball::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: 6px;
  bottom: 1px;
  left: 6px;
  height: 7px;
  border-radius: 50%;
  background: rgba(16, 42, 25, .32);
  filter: blur(2px);
}
.header-cursor-ball__icon {
  position: relative;
  z-index: 1;
  display: block;
  will-change: transform;
}
.header-cursor-ball__icon img { display: block; width: 48px; height: 48px; object-fit: contain; }
.links a:hover { color: var(--black); }
.links a.active { color: #1d6b5d; text-decoration: underline 3px #1d6b5d; text-underline-offset: 7px; }
.nav-actions .btn, .btn { background: var(--green); border-color: var(--green); color: var(--black); }
.btn.dark { background: var(--paper); border-color: var(--paper); color: var(--black); }
.btn:hover { background: #d7ee00; border-color: #d7ee00; }
.language, .menu-ball { color: var(--black); }
@media (min-width: 901px) {
  .nav-actions {
    flex: 0 0 288px;
    width: 288px;
    justify-content: flex-end;
  }
  .nav-actions > .language {
    flex: 0 0 96px;
    width: 96px;
    box-sizing: border-box;
  }
  .nav-actions > .btn {
    flex: 0 0 180px;
    width: 180px;
    min-width: 180px;
    white-space: nowrap;
    text-align: center;
  }
}
.logo { content: url('assets/skill3-logo-transparent.png'); width: 78px; height: 86px; object-fit: contain; }
.home-hero .hero-inner { position: relative; padding-bottom: 112px; }
.nav { min-height: 96px; }
body:has(.top) { padding-top: 148px; }
footer { background: var(--black); }
.footer .logo { background: var(--paper); border-radius: 10px; padding: 3px; }
/* En escritorio, el enlace activo gana presencia y se lee por encima de la pelota decorativa. */
@media (hover: hover) and (min-width: 901px) {
  .language {
    position: relative;
    z-index: 4;
    padding: 9px 11px;
    border-radius: 999px;
    color: var(--black);
    transition: color .22s ease, background-color .22s ease, box-shadow .22s ease;
  }
  .language b {
    display: inline-flex;
    border: 2px solid #1d6b5d;
    border-radius: 3px;
    line-height: 0;
  }
  .language:hover {
    background: var(--black);
    color: #fff;
    box-shadow: 0 0 0 2px var(--green), 0 5px 14px rgba(38, 58, 105, .25);
  }
  .language:hover b { border-color: var(--green); }
  .links a {
    position: relative;
    z-index: 1;
    margin: -9px -12px;
    padding: 9px 12px;
    border-radius: 999px;
    transition: color .22s ease, background-color .22s ease, transform .22s ease, box-shadow .22s ease;
  }
  .links a:hover {
    color: #fff;
    background: var(--black);
    transform: scale(1.12);
    box-shadow: 0 0 0 2px var(--green), 0 5px 14px rgba(38, 58, 105, .25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  }
}
.language-flag { display: inline-block; width: 25px; height: 17px; vertical-align: middle; border-radius: 2px; box-shadow: 0 1px 3px rgba(38,58,105,.25); }
.language span { display: inline-block; margin: 0 5px; vertical-align: middle; }
.mobile-language b { display: inline-flex; border: 2px solid var(--green); border-radius: 3px; line-height: 0; }
@media (max-width: 900px) {
  .header-cursor-ball { display: grid; opacity: .92; }
  .links a:hover, .links a.active { color: var(--green); }
}
@media (max-width: 540px) {
  body:has(.top) { padding-top: 72px; }
  .nav { min-height: 72px; }
  .logo { width: 58px; height: 64px; }
  .home-hero .hero-inner { padding-top: 60px; padding-bottom: 96px; }
}
.instagram-footer-link{width:38px;height:38px}.instagram-footer-link svg{width:30px;height:30px}
.footer-links{flex-wrap:wrap}
@media (min-width: 901px) { body:has(.top) { padding-top: 96px; } }
@media (min-width: 541px) and (max-width: 900px) { body:has(.top) { padding-top: 96px; } }
.why .eyebrow{color:var(--green)}
@media (min-width: 901px) { body:has(.top) { padding-top: 96px; } }

@media (max-width: 900px) {
  .links {
    display: grid;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transform-origin: top center;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: opacity .28s ease, max-height .48s ease, transform .38s ease, clip-path .48s ease, visibility 0s linear .48s;
  }
  .links.menu-open {
    visibility: visible;
    opacity: 1;
    max-height: 520px;
    transform: translateY(0);
    clip-path: inset(0);
    pointer-events: auto;
    transition: opacity .28s ease, max-height .48s ease, transform .38s ease, clip-path .48s ease, visibility 0s;
  }
  .links a, .links .mobile-language {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .28s ease;
  }
  .links a:nth-child(1) { transition-delay: .12s; }
  .links a:nth-child(2) { transition-delay: .08s; }
  .links a:nth-child(3) { transition-delay: .04s; }
  .links a:nth-child(4), .links .mobile-language { transition-delay: 0s; }
  .links.menu-open a, .links.menu-open .mobile-language {
    opacity: 1;
    transform: translateY(0);
  }
  .links.menu-open a:nth-child(1) { transition-delay: .06s; }
  .links.menu-open a:nth-child(2) { transition-delay: .12s; }
  .links.menu-open a:nth-child(3) { transition-delay: .18s; }
  .links.menu-open a:nth-child(4), .links.menu-open .mobile-language { transition-delay: .24s; }
  .links.menu-open.menu-closing {
    visibility: visible;
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: opacity .28s ease, max-height .48s ease, transform .38s ease, clip-path .48s ease;
  }
  .links.menu-open.menu-closing a, .links.menu-open.menu-closing .mobile-language {
    opacity: 0;
    transform: translateY(-12px);
  }
}