/* === RESETEO Y BASE === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; color: #fff; overflow-x: hidden; }

/* === HEADER === */
header { width: 100%; overflow: hidden; }
header .logo img { width: 100%; height: auto; display: block; object-fit: cover; }

/* === NAV === */
.nav {
  position: relative;
  z-index: 100;
  background: linear-gradient(270deg,#ffcc80,#ffe0b2,#e1f5fe,#c5cae9,#b39ddb,#ffcc80);
  background-size: 600% 600%;
  animation: movimientoGradiente 12s ease infinite;
  color: #000;
  font-weight: 600;
}

@keyframes movimientoGradiente {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.nav-wrap { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: center;gap: 12px; }

/* Botón hamburguesa */
.nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid rgba(0,0,0,.35);
  color: #000;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* Lista principal */
.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.menu > li { position: relative; }

/* Botones/enlaces del menú */
.menu > li > a, .dd-toggle {
  color: #000;
  font-weight: 500;
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .25s;
}
.menu > li > a:hover, .dd-toggle:hover { background: rgba(0,0,0,.06); }

/* === SUBMENÚ PRIMER NIVEL === */
.has-sub { position: relative; padding-bottom: 10px; }
.submenu {
  position: absolute; left: 0; top: 100%;
  min-width: 220px; background: #fff; color: #0f172a;
  border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, .15);
  padding: 6px; list-style: none; display: none; z-index: 999;
}
.submenu li a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: inherit; text-decoration: none; font-weight: 600; transition: background .25s;
}
.submenu li a:hover { background: #f1f5f9; }

/* Mostrar submenús por hover/foco en desktop */
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu { display: block; }

/* Cuando se abre por JS */
.has-sub.open > .submenu { display: block; }
.has-sub.open > .dd-toggle { background: rgba(0,0,0,.06); }

/* === SUB-SUBMENÚ === */
.submenu .has-sub { position: relative; padding-right: 10px; }
.submenu .submenu {
  position: absolute; top: 0; left: calc(100% - 6px);
  min-width: 220px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, .15);
  padding: 6px; display: none; z-index: 1000;
}
.submenu .has-sub:hover > .submenu { display: block; }

/* === MAIN === */
main { position: relative; width: 100%; height: 100vh; overflow: hidden; }
main .fondo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* === FOOTER === */
footer {
  text-align: center;
  padding: 20px;
  background: linear-gradient(270deg,#ffcc80,#ffe0b2,#e1f5fe,#c5cae9,#b39ddb,#ffcc80);
  background-size: 600% 600%;
  animation: movimientoGradiente 12s ease infinite;
  color: #000;
  font-weight: 400;
}

/* === RESPONSIVE (móvil con el mismo layout que PC) === */
@media (max-width: 900px) {
  /* El contenedor puede seguir alineado como en desktop */
  .nav-wrap { 
    justify-content: center;    /* o space-between, como prefieras */
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Oculta el botón hamburguesa si quieres el mismo layout que PC */
  .nav-toggle { 
    display: none; 
  }

  /* Mantén el menú visible y en fila */
  .menu {
    display: flex;              /* ❗ visible, no lo ocultes */
    flex-direction: row;        /* ❗ en fila como PC */
    flex-wrap: wrap;
    justify-content: center;    /* centra los <li> */
    gap: 32px;                  /* separa los <li> (ajusta a gusto) */
    width: auto;
    margin-top: 0;
  }
  .menu.open { display: flex; } /* inofensivo si no usas el toggle */

  /* Mantén los submenús flotantes como en PC (no los hagas estáticos) */
  .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(2, 8, 23, .15);
    padding: 6px;
    z-index: 999;
  }
  .submenu .submenu {
    position: absolute;
    top: 0;
    left: calc(100% - 6px);
    min-width: 220px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(2, 8, 23, .15);
    padding: 6px;
    z-index: 1000;
  }

  /* (Opcional) pequeño sangrado para items dentro de submenús */
  .submenu li a { padding-left: 12px; }
}