/* ---- MENÚ DE NAVEGACIÓN (SUPERPUESTO) ---- */
    nav {
      background-color: rgba(0, 0, 255, 0.2);
      position: absolute;
      top: 0; 
      left: 0;
      width: 100%;
      z-index: 10;
      display: flex;
      align-items: center; 
      padding: 10px 20px;
    }

    nav img {
      margin-right: 20px;
    }
    nav ul {
      list-style: none;
      display: flex;
      flex: 1;
      justify-content: center;
    }
    nav li {
      margin: 0 15px;
      position: relative;
    }
    nav a {
      display: inline-block;
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      font-size: 22px;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s, padding 0.3s;
    }
    nav a:hover,
    nav a:focus {
      background-color: darkred;
      padding: 26px 30px;
    }

    /* ---- SUBMENÚ ---- */
    nav ul li ul.submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 255, 0.5);
      z-index: 999;
    }
    nav li:hover > ul.submenu,
    nav li:focus-within > ul.submenu {
      display: block;
    }
    nav ul.submenu li {
      margin: 0;
    }
    nav ul.submenu a {
      display: block;
      white-space: nowrap;
      padding: 8px 12px;
      font-size: 16px;
      border-radius: 0;
    }
    nav ul.submenu a:hover,
    nav ul.submenu a:focus {
      background-color: darkred;
      padding: 12px 16px;
    }

 
	  
    /* ---- BOTÓN "CONTACTO" EN LA PARTE SUPERIOR DERECHA ---- */
    .contacto-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color: #FF4500;    /* Fondo marrón */
      color: #fff;               /* Texto blanco */
      padding: 12px 24px;
      border-radius: 4px;
      text-decoration: none;     /* Quitar subrayado */
      font-weight: bold;
      transition: background-color 0.3s;
    }
    .contacto-btn:hover {
      background-color: #8B4513;  /* Ejemplo: marrón más oscuro al pasar mouse */
    }


/* ---- FOOTER AL FINAL ---- */
    footer {
      background-color: #222;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    footer img {
      display: block;
      margin: 0 auto 10px auto;
    }
    footer p {
      margin: 5px 0;
    }