/* ================================================================
   AULA 9 · V10
   - Cabecera azul limitada al ancho del contenido
   - Hero pegado a la cabecera
   - Espacio real antes de las reseñas
   - Menú móvil completamente contenido en el panel azul
   ================================================================ */

/* La franja exterior deja de ser azul: el azul vive en .nav-row */
.site-header{
  background:transparent !important;
  box-shadow:none !important;
}

.nav-row{
  width:min(calc(100% - 40px), var(--v9-max));
  min-height:82px;
  padding:0 22px;
  background:var(--v9-navy);
  border-radius:18px 18px 0 0;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}

/* El hero empieza exactamente donde termina la cabecera */
.photo-hero{
  padding:0 !important;
  margin:0 !important;
}

.photo-hero-inner{
  border-radius:0 0 28px 28px !important;
  border-top:0 !important;
}

/* Las opiniones ya no pisan el hero */
.reviews-wrap,
.reviews-course{
  margin-top:30px !important;
}

/* ----------------------------------------------------------------
   Menú responsive
   ---------------------------------------------------------------- */
@media (max-width:1180px){
  .nav-row{
    width:min(calc(100% - 40px), var(--v9-max));
    min-height:74px;
    padding:0 18px;
    grid-template-columns:minmax(0,1fr) auto;
    border-radius:16px 16px 0 0;
  }

  .nav-toggle{
    min-width:58px;
    justify-self:end;
  }

  /* Forzamos que el desplegable use TODO el ancho interior de la cabecera. */
  .site-nav{
    position:absolute !important;
    z-index:110;
    top:74px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    grid-column:1 / -1 !important;
    justify-self:auto !important;
    align-self:auto !important;
    box-sizing:border-box !important;
    padding:10px 18px 16px !important;
    overflow:hidden !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    border-radius:0 0 16px 16px !important;
    background:var(--v9-navy) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.24) !important;
  }

  .site-nav.open{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
  }

  .site-nav > a{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    align-items:center !important;
    padding:11px 8px !important;
    margin:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .site-nav .nav-cta{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
    justify-content:center !important;
    margin:10px 0 0 !important;
    padding:11px 12px !important;
    border-bottom:0 !important;
    overflow:hidden !important;
  }

  .site-nav .nav-cta span{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  .reviews-wrap,
  .reviews-course{
    margin-top:26px !important;
  }
}

@media (max-width:560px){
  .nav-row{
    width:min(calc(100% - 24px), var(--v9-max));
    padding:0 14px;
    border-radius:14px 14px 0 0;
  }

  .site-nav{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    padding:8px 14px 14px !important;
    border-radius:0 0 14px 14px !important;
  }

  .site-nav > a{
    font-size:.86rem !important;
    padding:10px 6px !important;
  }

  .photo-hero-inner{
    border-radius:0 0 22px 22px !important;
  }

  .reviews-wrap,
  .reviews-course{
    margin-top:22px !important;
  }
}