/* ============================================================
   FitEvents · LAYOUT
   Cabecera, migas, pie y pagina de error: el marco que envuelve
   a todas las paginas. Todo sale de tokens.css.
   ============================================================ */

/* ============================================================
   CABECERA
   ============================================================ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,242,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;}
header .brand{text-decoration:none;display:inline-flex;}
header .wordmark{font-size:17px;color:var(--ink);}
header .btn{padding:11px 20px;font-size:13px;}

header nav{display:flex;align-items:center;gap:26px;}

.nav-lista{list-style:none;display:flex;align-items:center;gap:26px;margin:0;padding:0;}
.navlink{
  font-size:var(--fs-small);font-weight:var(--fw-medium);
  color:var(--ink-soft);text-decoration:none;
}
.navlink:hover,
.navlink.is-active{color:var(--ink);}

/* Lo que solo existe en el movil */
.nav-movil,
.nav-pie,
.nav-toggle{display:none;}

/* En escritorio este contenedor no existe: el boton queda suelto en la
   fila del menu, como si no estuviera envuelto. */
.nav-fijo{display:contents;}

/* ---------- Boton de menu ---------- */
.nav-toggle{
  align-items:center;gap:10px;
  background:transparent;border:none;padding:6px 2px;
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:var(--track-caption);text-transform:uppercase;
  color:var(--ink);
}
.nav-toggle-lineas{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:20px;height:14px;}
.nav-toggle-lineas span{display:block;height:1.5px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
header.is-open .nav-toggle-lineas span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
header.is-open .nav-toggle-lineas span:nth-child(2){opacity:0;}
header.is-open .nav-toggle-lineas span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ---------- Movil: el menu se pliega ---------- */
@media (max-width:720px){

  .nav-toggle{display:inline-flex;}
  .nav-escritorio{display:none;}

  /* El panel ocupa lo que queda de pantalla y NO scrollea el mismo:
     scrollea la lista de enlaces, y el bloque del CTA queda anclado abajo. */
  header nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:0 var(--gutter);
    max-height:calc(100vh - 72px);
    max-height:calc(100dvh - 72px);
    overflow:hidden;
  }
  header.is-open nav{display:flex;}

  /* Agrupado por secciones: el epigrafe deja claro que cuelga de que.
     Esta es la unica parte que se desplaza. */
  .nav-movil{
    display:flex;flex-direction:column;align-items:stretch;
    flex:1;min-height:0;overflow-y:auto;
    padding:8px 0 12px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav-grupo{padding:14px 0;}
  .nav-grupo + .nav-grupo{border-top:1px solid var(--line);}
  .nav-grupo ul{list-style:none;margin:0;padding:0;}

  .nav-grupo-titulo{
    display:block;margin-bottom:6px;
    font-size:10.5px;font-weight:var(--fw-semibold);
    letter-spacing:var(--track-caption);text-transform:uppercase;
    color:var(--ink-faint);
  }

  .nav-movil .navlink{display:block;padding:11px 0;font-size:16px;color:var(--ink);}
  .nav-grupo-titulo + ul .navlink{padding-left:14px;}
  .nav-movil .navlink.is-active{color:var(--malva-dark);font-weight:var(--fw-semibold);}

  /* Bloque anclado: el CTA siempre a la vista, pase lo que pase arriba */
  .nav-fijo{
    display:block;flex:none;
    padding:16px 0 calc(18px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:var(--cream);
  }
  .nav-cta{width:100%;padding:16px 24px;font-size:14.5px;}

  .nav-pie{
    display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:14px;
    font-size:12.5px;font-weight:var(--fw-medium);
  }
  .nav-pie a{color:var(--ink-soft);text-decoration:none;}
}

/* ============================================================
   MIGAS DE PAN
   ============================================================ */
.migas{padding:20px 0 0;font-size:12.5px;font-weight:var(--fw-medium);}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;}
.migas a{color:var(--ink-faint);text-decoration:none;}
.migas a:hover{color:var(--ink);}
.migas span{color:var(--ink-soft);}
.migas li + li::before{content:"/";margin-right:8px;color:var(--ink-faint);opacity:.6;}
.migas + .hero{padding-top:32px;}

/* ============================================================
   PIE
   ============================================================ */
footer{
  background:var(--ink);color:rgba(251,248,242,.6);
  padding:56px 0 30px;
  border-top:1px solid rgba(251,248,242,.12);
}

.footer-top{
  display:grid;
  grid-template-columns:1.6fr repeat(4, 1fr);
  gap:34px;
  padding-bottom:40px;
}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr;gap:32px 24px;} }
@media (max-width:520px){ .footer-top{grid-template-columns:1fr;} }

.footer-marca .wordmark{font-size:15px;color:var(--cream);}
.footer-marca .wordmark .dot{color:var(--malva-tint);}
.footer-claim{
  margin-top:12px;font-size:11.5px;font-weight:var(--fw-semibold);
  letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--malva-tint);
}
.footer-nota{margin-top:14px;font-size:12.5px;line-height:1.6;max-width:260px;}

.footer-col-titulo{
  display:block;font-size:10.5px;font-weight:var(--fw-semibold);
  letter-spacing:var(--track-caption);text-transform:uppercase;
  color:rgba(251,248,242,.45);margin-bottom:14px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:13px;font-weight:var(--fw-medium);text-decoration:none;color:rgba(251,248,242,.72);}
.footer-col a:hover{color:var(--cream);}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  padding-top:24px;border-top:1px solid rgba(251,248,242,.12);
}
footer .links{display:flex;gap:22px;font-size:12.5px;font-weight:var(--fw-medium);flex-wrap:wrap;align-items:center;}
footer .links a{text-decoration:none;color:rgba(251,248,242,.6);}
footer .links a:hover{color:var(--cream);}
.footer-copy{font-size:12px;color:rgba(251,248,242,.45);}

/* ============================================================
   PAGINA DE ERROR
   ============================================================ */
.error-page{min-height:60vh;display:flex;align-items:center;text-align:center;}
.error-page .wrap{max-width:560px;}
.error-page .code{font-size:clamp(64px,12vw,120px);font-weight:var(--fw-light);color:var(--malva);line-height:1;}
.error-page h1{font-size:clamp(26px,4vw,38px);margin-top:10px;}
.error-page p{color:var(--ink-soft);margin-top:16px;}
.error-page .btn{margin-top:28px;}
.error-links{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:30px;font-size:13px;font-weight:var(--fw-medium);}
.error-links a{color:var(--ink-soft);text-decoration:none;}
.error-links a:hover{color:var(--ink);}