@charset "utf-8";

        :root{
      --color-brand:#2d00fb;
      --color-sub:#1a008c;
      --radius:14px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Roboto,system-ui,Arial,Helvetica,sans-serif;
      background:#f0f2f7;
      padding-top:55px; /* 👈 lo quitamos */
    }

    .header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      background:rgba(45,0,251,0.85);
      backdrop-filter:blur(12px);
      padding:8px 20px;
      position:fixed;
      top:0; left:0; right:0;
      z-index:1000;
      height:72px;
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 4px 12px rgba(0,0,0,.15);
    }
    .logo img{ max-height:56px; width:auto; display:block; object-fit:contain; }

    .menu-toggle{display:none}
    .menu-icon{
      display:none;
      font-size:30px;
      color:#fff;
      cursor:pointer;
      user-select:none;
      padding:6px 10px;
      border-radius:var(--radius);
      transition:background .3s;
    }
    .menu-icon:hover{background:rgba(255,255,255,.1)}

    /* MODIFICADO: botones más juntos */
    .nav > ul{ 
      list-style:none; margin:0; padding:0; 
      display:flex; gap:12px;  /* antes 22px */
    }
    .nav > ul > li{position:relative}

    .nav a{
      color:#fff; text-decoration:none; font-weight:500;
      display:flex; align-items:center; gap:6px;
      padding:8px 10px; /* antes 10px 12px */
      border-radius:10px;
      transition:background .3s;
    }
    .nav a:hover{
      background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
    }
      
      /* ROTULO PIEDE PAGINA */ 
    .rotulo-web img {    /* cartel azul bajo pie planos */
    width: 100%;          /* ancho que quieras */
    max-width: 915px;    /* ancho máximo */
    border: 6px ridge #666; /* tipo de borde */
    border-radius: 15px; /* esquinas redondeadas, opcional */
    box-shadow: 2px 2px 5px #006; /* sombra opcional */
    display: block;
    margin: 20px auto;   /* centrado */
}
       /* FIN ROTULO PIEDE PAGINA */


    /* SUBMENÚ */
    .submenu{
      list-style:none;
      margin:0;
      padding:0;
      background:var(--color-sub);
      border-radius:var(--radius);
      overflow:hidden;
      height:0;
      opacity:0;
      transition:height .35s ease, opacity .35s ease;
    }
    .submenu li a{
      padding:12px 18px;
      white-space:nowrap;
      border-bottom:1px solid rgba(255,255,255,.14);
    }
    .submenu li:last-child a{border-bottom:none}

    /* Escritorio */
    @media (min-width:769px){
      .menu-icon{display:none}
      .nav > ul{flex-direction:row}
      .submenu{
        position:absolute;
        top:100%;
        left:0;
        min-width:220px;
        box-shadow:0 10px 24px rgba(0,0,0,.16);
        display:none;
        height:auto !important;
        opacity:1;
        transition:none;
      }
      .nav li:hover > .submenu{display:block}
      .nav > ul > li:last-child > .submenu{left:auto;right:0}
    }

/* ROTULO PIEDE PAGINA MÓVIL*/ 
@media (max-width:768px){
    .rotulo-web img {    /* cartel azul bajo pie planos */
    width: 90%;          /* ancho que quieras */
    max-width: 915px;    /* ancho máximo 915*/
    border: 6px ridge #666; /* tipo de borde */
    border-radius: 15px; /* esquinas redondeadas, opcional */
    box-shadow: 2px 2px 5px #006; /* sombra opcional */
    display: block;
    margin: 20px auto;   /* centrado */
}

    /* Móvil */
    @media (max-width:768px){
      .menu-icon{display:block}
      .nav{
        position:absolute;
        top:100%;
        left:12px;
        background:rgba(45,0,251,0.95);
        border-radius:var(--radius);
        padding:8px;
        box-shadow:0 10px 24px rgba(0,0,0,.25);
        transform:scaleY(0);
        transform-origin:top;
        transition:transform .3s ease;
        min-width:260px;
        max-width:90vw;
        z-index:999;
      }
      .nav > ul{flex-direction:column; gap:0}
      .nav > ul > li > a{padding:14px 18px}
      .menu-toggle:checked ~ nav.nav{transform:scaleY(1)}
      .has-submenu > a::after{
        content:"▾"; margin-left:auto; font-size:0.9em; opacity:.9;
      }
      .has-submenu.open > a::after{content:"▴"}

      /* MODIFICADO: submenús largos con scroll */
      .submenu{
        max-height:260px;   /* altura máxima visible */
        overflow-y:auto;    /* scroll vertical */
      }
      /* Scroll fino */
      .submenu::-webkit-scrollbar {
        width:6px;
      }
      .submenu::-webkit-scrollbar-thumb {
        background:rgba(255,255,255,0.4);
        border-radius:4px;
      }
      .submenu::-webkit-scrollbar-track {
        background:transparent;
      }
    }
    
    /* ROTULO PIEDE PAGINA MÓVIL*/ 
@media (max-width:715px){
    .rotulo-web img {    /* cartel azul bajo pie planos */
    width: 90%;          /* ancho que quieras */
    max-width: 915px;    /* ancho máximo 915*/
    border: 6px ridge #666; /* tipo de borde */
    border-radius: 15px; /* esquinas redondeadas, opcional */
    box-shadow: 2px 2px 5px #006; /* sombra opcional */
    display: block;
    margin: 20px auto;   /* centrado */
}