/* ============================================================
   🎨 ALTTAX — HOJA DE ESTILOS OPTIMIZADA Y DOCUMENTADA
   ------------------------------------------------------------
   Estructura general:
   1. Variables y configuración base
   2. Layout principal
   3. Encabezado (utility bar + navegación)
   4. Sección destacada (hero grid)
   5. Sección de servicios
   6. Área principal (3 columnas)
   7. Pie de página
   8. Diseño responsivo
   ============================================================ */

/* ============================================================
   1. VARIABLES Y BASE GLOBAL
   ============================================================ */
:root {                        /* == Variables CSS == */
  --blue-700: #003366;         /* Azul oscuro, usado para elementos destacados */
  --blue-500: #336699;         /* Azul medio, puede usarse para fondos o bordes */
  --accent: #669ACC;           /* Color de acento, ideal para botones o enlaces */
  --muted: #E6F0FA;            /* Color suave para fondos o elementos secundarios */
  --text-dark: #000033;        /* Color oscuro para texto principal */
  --white: #ffffff;            /* Blanco puro, útil para fondos o texto */
  --yellow: #fff000;           /* Amarillo brillante, puede usarse para alertas o énfasis */
  --max-width: 1000px;         /* Ancho máximo para contenedores principales, útil para centrar contenido en pantallas grandes */}
* {                            /* == Box model universal == */
  box-sizing: border-box;      /* Incluye padding y border dentro del ancho/alto total de los elementos */
}


body {                                      /* == Estilos del cuerpo == */
  margin: 0;                                /* Elimina el margen por defecto del navegador */
  font-family: "Segoe UI", Arial, Helvetica, sans-serif; /* Fuente principal con alternativas */
  background-image: url("../images/bkground_body_bbs.jpg"); /* Imagen de fondo */
  background-repeat: no-repeat;             /* No repetir la imagen de fondo */
  background-size: cover;                   /* Escalar la imagen para cubrir todo el fondo */
  background-attachment: fixed;             /* La imagen permanece fija al hacer scroll */
  background-position: center;              /* Centra la imagen en el fondo */
  color: #222;                              /* Color de texto inicial (será sobrescrito abajo) */
  background: repeating-linear-gradient(    /* Fondo alternativo con líneas horizontales */
    0deg,
    #f5f8fb,
    #f5f8fb 10px,
    #eef4fb 10px,
    #eef4fb 20px
  );
  color: var(--text-dark);                  /* Color de texto final, usando variable */
}

a {                                   /* == Estilos para enlaces == */
  text-decoration: none;              /* Elimina el subrayado de los enlaces */
  color: inherit;                     /* Hereda el color del texto del elemento padre */
  transition: color 0.3s ease;        /* Suaviza el cambio de color al interactuar */
}

img {                                /* == Estilos para imágenes == */
  max-width: 100%;                   /* Escala la imagen para que no exceda su contenedor */
  display: block;                    /* Elimina el espacio inferior causado por inline-block */
  border: 0;                         /* Elimina cualquier borde por defecto */
}

/* ============================================================
   2. LAYOUT PRINCIPAL
   ============================================================ */
.page {                                     /* == Contenedor principal de la páginas == */
  max-width: var(--max-width);              /* Limita el ancho máximo del contenedor a 1000px usando la variable definida en :root */
  margin: 20px auto;                        /* Aplica 20px de margen vertical y centra horizontalmente con auto */
  background: var(--white);                 /* Establece el fondo blanco usando la variable personalizada */
  border-radius: 6px;                       /* Redondea las esquinas del contenedor con 6px de radio */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);/* Añade una sombra sutil para dar profundidad al contenedor */
  overflow: hidden;                         /* Oculta cualquier contenido que se desborde del contenedor */
}

/* ============================================================
   3. ENCABEZADO (UTILITY BAR + NAVEGACIÓN)
   ============================================================ */
.utility {                              /* == Barra superior de utilidades == */
  background: var(--blue-700);          /* Fondo azul oscuro */
  color: var(--yellow);                  /* Texto blanco */
  padding: 6px 12px;                    /* Espaciado interno vertical y horizontal */
  font-size: 13px;                      /* Tamaño de fuente pequeño */
  text-align: right;                    /* Alineación del texto a la derecha */
}

.utility a {                            /* == Enlaces dentro de la barra de utilidades == */
  color: var(--white);                  /* Enlaces en blanco para contraste */
  margin-left: 0px;                     /* Espacio entre enlaces */
  position: relative;                   /* Necesario para posicionar el pseudo-elemento ::after */
  padding: 4px 8px;                     /* Espaciado interno para área clickeable */
  border-radius: 3px;                   /* Bordes redondeados suaves */
  transition: all 0.3s ease;            /* Transición suave para todos los cambios */
  display: inline-block;                /* Para que las transformaciones funcionen correctamente */
}

.utility a::after {                     /* == Línea decorativa animada debajo del enlace == */
  content: "";                          /* Crea un pseudo-elemento vacío */
  position: absolute;                   /* Posición absoluta dentro del enlace */
  width: 0%;                            /* Comienza invisible */
  height: 2px;                          /* Altura de la línea */
  bottom: 0px;                          /* Posicionada en la base del texto */
  left: 50%;                            /* Comienza desde el centro */
  transform: translateX(-50%);          /* Centra la línea */
  background-color: var(--yellow);      /* Color amarillo para la línea */
  transition: width 0.3s ease;          /* Animación suave al expandirse */
}

.utility a:hover {                      /* == Efecto al pasar el cursor == */
  color: var(--yellow);                 /* Cambia el color del texto a amarillo */
  background: rgba(255, 255, 255, 0.1); /* Fondo blanco semitransparente */
  transform: translateY(-2px);          /* Eleva el enlace ligeramente */
}

.utility a:hover::after {               /* == Expande la línea en hover == */
  width: 80%;                           /* Expande la línea decorativa */
}

.utility a:active {                     /* == Efecto al hacer clic == */
  transform: translateY(0);             /* Vuelve a la posición original */
  transition: transform 0.1s ease;      /* Transición rápida para feedback inmediato */
}

.nav-toggle {                           /* == Botón para mostrar/ocultar menú móvil == */
  background: transparent;              /* Fondo transparente */
  border: none;                         /* Sin borde */
  color: var(--white);                  /* Color blanco para el ícono o texto */
  font-size: 20px;                      /* Tamaño grande para visibilidad */
  font-weight: bold;                    /* Texto en negrita */
  display: none;                        /* Oculto por defecto (se muestra con media queries) */
  cursor: pointer;                      /* Cursor tipo puntero al pasar el mouse */
  padding: 6px 12px;                    /* Espaciado interno */
}

.main-nav {                             /* == Contenedor principal de navegación == */
  background: var(--blue-500);          /* Fondo azul medio */
  padding: 8px 12px;                    /* Espaciado interno */
  display: flex;                        /* Usa Flexbox para organizar los elementos */
  align-items: center;                  /* Centra verticalmente los elementos */
  justify-content: space-between;       /* Distribuye los elementos con espacio entre ellos */
  flex-wrap: wrap;                      /* Permite que los elementos se ajusten en varias líneas si es necesario */
}

.nav-menu {                             /* == Contenedor de enlaces de navegación == */
  display: flex;                        /* Usa Flexbox para alinear los enlaces */
  flex-wrap: wrap;                      /* Permite que los enlaces se ajusten en varias líneas */
  gap: 12px;                            /* Espacio entre enlaces */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {                           /* == Estilo base para enlaces de navegación == */
  color: var(--white);                  /* Texto blanco */
  padding: 6px 10px;                    /* Espaciado interno para hacer clic fácilmente */
  border-radius: 4px;                   /* Bordes redondeados para suavidad visual */
  position: relative;                   /* Necesario para posicionar el pseudo-elemento ::after */
  transition: all 0.3s ease;            /* Transición suave para todos los cambios */
  display: inline-block;                /* Para que las transformaciones funcionen correctamente */
}

.nav-menu a::after {                    /* == Línea decorativa animada debajo del enlace == */
  content: "";                          /* Crea un pseudo-elemento vacío */
  position: absolute;                   /* Posición absoluta dentro del enlace */
  width: 0%;                            /* Comienza invisible */
  height: 2px;                          /* Altura de la línea */
  bottom: 2px;                          /* Posicionada cerca de la base del texto */
  left: 50%;                            /* Comienza desde el centro */
  transform: translateX(-50%);          /* Centra la línea */
  background-color: var(--yellow);      /* Color amarillo para la línea */
  transition: width 0.3s ease;          /* Animación suave al expandirse */
}

.nav-menu a.highlight {                 /* == Enlace destacado == */
  color: var(--yellow);                 /* Color amarillo para destacar el enlace */
}

.nav-menu a:hover {                     /* == Efecto al pasar el cursor == */
  background: rgba(255, 255, 255, 0.1); /* Fondo blanco semitransparente al hacer hover */
  color: var(--yellow);                 /* Cambia el color del texto a amarillo */
  transform: translateY(-2px);          /* Eleva el enlace ligeramente */
}

.nav-menu a:hover::after {              /* == Expande la línea decorativa al hover == */
  width: 80%;                           /* Hace que la línea ocupe el 80% del ancho del enlace */
}

.nav-menu a:active {                    /* == Efecto al hacer clic == */
  transform: translateY(0);             /* Vuelve a la posición original inmediatamente */
  transition: transform 0.1s ease;      /* Transición rápida para feedback inmediato */
}

/* ============================================================
   4. SECCIÓN DE GRILLA DESTACADA (HERO GRID)
   ============================================================ */

.hero-grid {                                  /* == Contenedor de cuadrícula == */
  display: grid;                              /* Usa sistema de cuadrícula CSS */
  grid-template-columns: repeat(3, 1fr);      /* Tres columnas de igual tamaño */
  gap: 20px;                                  /* Espacio entre elementos de la cuadrícula */
  background: var(--blue-500);                /* Fondo azul medio */
  padding: 20px;                              /* Espacio interno alrededor del contenido */
}

.fpbox {                                      /* == Caja de contenido == */
  background: var(--white);                   /* Fondo blanco */
  padding: 15px;                              /* Espacio interno */
  border-radius: 10px;                        /* Bordes redondeados */
  text-align: left;                           /* Alineación del texto a la izquierda */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);    /* Sombra suave para profundidad */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animación suave al interactuar */
}

.fpbox:hover {
  transform: translateY(-4px);                /* Eleva la caja al pasar el cursor */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);  /* Sombra más intensa al hacer hover */
}
.fpbox img {
  border-radius: 6px;                         /* Bordes redondeados para imágenes */
  margin-bottom: 8px;                         /* Espacio debajo de la imagen */
}

.fpbox-inner {                                /* == Contenido interno de la caja == */
  background: var(--white);                   /* Fondo blanco */
  padding: 10px;                              /* Espacio interno */
  border-radius: 6px;                         /* Bordes redondeados */
  margin-top: 8px;                            /* Espacio superior respecto al contenido anterior */
}

.fpbox-inner a {                              /* == Enlaces dentro de la caja == */
  padding: 2px 4px;                           /* Espacio interno horizontal y vertical */
  border-radius: 4px;                         /* Bordes redondeados */
  transition: background 0.3s, color 0.3s;    /* Animación suave al cambiar color o fondo */
}
.fpbox-inner a:hover {
  background: var(--accent);                  /* Fondo azul claro al pasar el cursor */
  color: var(--white);                        /* Texto blanco al pasar el cursor */
}

.fpbox-inner a img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fpbox-inner a:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.20);
}

.bullet {                                     /* == 🔹 Puntos decorativos pequeños == */
  width: 6px;                                 /* Ancho del punto */
  height: 6px;                                /* Alto del punto */
  background: var(--accent);                  /* Color azul claro */
  display: inline-block;                      /* Se comporta como elemento en línea */
  margin-right: 6px;                          /* Espacio a la derecha del punto */
  border-radius: 1px;                         /* Bordes ligeramente redondeados */
}

.bullet-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.bullet-list li {
  padding-left: 15px;
  position: relative;
  margin-bottom: 4px;
}

.bullet-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 8px;
  border-radius: 1px;
}

.fp-image {
  width: 100%;
  height: 100px; 
   /* height: auto;Mantiene la proporción original */
  max-height: 50%; /* Evita que se desborde en pantallas pequeñas */
}

.fp-image2 {
  width: 28.5%; /* 5% menos que 30% */
  height: auto; /* Mantiene la proporción original */
  max-width: 142px; /* 5% menos que 150px */
  display: block; /* Necesario para centrar */
  margin: 0 auto; /* Centrado horizontal */
  border: 2px solid #336699; /* Borde azul ALTTAX */
  /* border-radius: 0px; Bordes ligeramente redondeados (opcional) */
  /* box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); /* Sombra suave opcional */
}


/* ============================================================
   5. SECCIÓN DE SERVICIOS
   ============================================================ */
.services {                                  /* == Contenedor de la sección de servicios == */
  display: grid;                             /* Usa CSS Grid para organizar el contenido */
  grid-template-columns: 1fr 300px;          /* Dos columnas: una flexible y otra fija de 300px */
  gap: 12px;                                 /* Espacio entre columnas */
  padding: 14px;                             /* Espaciado interno general */
}

.service-header {                            /* == Encabezado de cada bloque de servicio == */
  background: var(--text-dark);              /* Fondo azul oscuro */
  color: var(--white);                       /* Texto blanco */
  padding: 10px;                             /* Espaciado interno */
  border-radius: 6px 6px 0 0;                /* Bordes redondeados solo arriba */
  text-align: center;                        /* Texto centrado horizontalmente */
  font-size: 22px;                           /* Tamaño de fuente grande */
}

.service-content {                           /* == Contenido del servicio == */
  background: var(--white);                  /* Fondo blanco */
  padding: 12px;                             /* Espaciado interno */
  border-radius: 0 0 6px 6px;                /* Bordes redondeados solo abajo */
}

.service-content p {                         /* == Párrafos dentro del contenido == */
  margin-bottom: 10px;                       /* Espacio debajo de cada párrafo */
  font-size: 14px;                           /* Tamaño de fuente */
}

.services a {                                /* == Enlaces dentro de la sección de servicios == */
  position: relative;                        /* Necesario para posicionar el pseudo-elemento ::after */
  color: var(--blue-500);                    /* Color azul medio */
  font-weight: 600;                          /* Texto seminegrita */
  text-decoration: none;                     /* Sin subrayado */
}

.services a::after {                         /* == Línea decorativa animada debajo del enlace == */
  content: "";                               /* Crea un pseudo-elemento vacío */
  position: absolute;                        /* Posición absoluta dentro del enlace */
  width: 0%;                                 /* Comienza invisible */
  height: 2px;                               /* Altura de la línea */
  bottom: -3px;                              /* Posicionada justo debajo del texto */
  left: 0;                                   /* Comienza desde la izquierda */
  background-color: var(--blue-500);         /* Color azul medio */
  transition: width 0.3s ease;               /* Animación suave al expandirse */
}

.services a:hover {                          /* == Efecto al pasar el cursor == */
  color: var(--blue-700);                    /* Cambia el color del texto a azul oscuro */
  transform: translateX(4px);
}
.services a:hover::after {
  width: 100%;                               /* Expande la línea decorativa completamente */
}

.services li {                               /* == Elementos de lista dentro de servicios == */
  margin-bottom: 15px;                       /* Espacio entre ítems de lista */
}

.right {                                     /* == Columna lateral derecha == */
  text-align: left;                        /* Centra el contenido horizontalmente */
}

.right img {                                 /* == Imagen dentro de la columna derecha == */
  width: 150px;                              /* Ancho fijo de la imagen */
  border-radius: 6px;                        /* Bordes redondeados */
  margin-bottom: 10px;                       /* Espacio debajo de la imagen */
}

.extra-info {                                /* == Bloque adicional de información (comentado) == */
 /* background: #BAC2D5; */                  /* Fondo gris azulado */
  padding: 10px;                             /* Espaciado interno alrededor del contenido */
  border-radius: 6px;                        /* Bordes redondeados */
  text-align: left;                          /* Alineación del texto a la izquierda */
  display: inline-block;                     /* Mantiene el bloque ajustado al contenido */
}

.extra-info a {                              /* == Enlaces dentro del bloque adicional == */
  display: block;                            /* Cada enlace ocupa una línea completa */
  margin-bottom: 4px;                        /* Espacio entre enlaces */
  color: #336699;                            /* Color azul personalizado */
  text-decoration: none;                     /* Sin subrayado */
  transition: all 0.3s ease;                 /* Transición suave para todos los cambios */
}

.extra-info a::after {                       /* == Línea decorativa animada == */
  content: "";                               /* Pseudo-elemento vacío */
  position: absolute;                        /* Posición absoluta */
  width: 0%;                                 /* Comienza invisible */
  height: 2px;                               /* Altura de la línea */
  bottom: -2px;                              /* Posicionada justo debajo del texto */
  left: 0;                                   /* Comienza desde la izquierda */
  background-color: var(--blue-500);         /* Color azul medio */
  transition: width 0.3s ease;               /* Animación suave al expandirse */
}

.extra-info a:hover {                        /* == Efecto al pasar el cursor == */
  color: #d9e8ff;                            /* Cambia el color del texto a azul claro */
  transform: translateX(5px);                /* Desplaza el enlace hacia la derecha */
}
.extra-info a:hover::after {
  width: 100%;                               /* Expande la línea decorativa completamente */
}

/* ============================================================
   6. ÁREA PRINCIPAL DE CONTENIDO (3 COLUMNAS)
   ============================================================ */
main {                                              /* == Contenedor principal de la página == */
  background-color: #fff;                           /* Fondo blanco */
  max-width: 1200px;                                /* Ancho máximo del contenedor */
  margin: 0 auto;                                   /* Centrado horizontal */
  padding: 20px;                                    /* Espaciado interno */
  background-image: url("images/bkground_body_taxs.jpg"); /* Imagen de fondo */
  background-repeat: no-repeat;                     /* No repetir la imagen */
  background-position: left top;                    /* Posiciona la imagen en la esquina superior izquierda */
  border-radius: 8px;                               /* Bordes redondeados */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);            /* Sombra suave para profundidad */
}

/* ============================================================
   7. PIE DE PÁGINA
   ============================================================ */
   
.footer {                                   /* == Contenedor principal del pie de página == */
  background-color: var(--blue-500);        /* Fondo azul medio */
  padding: 25px 0;                          /* Espaciado vertical arriba y abajo */
  text-align: center;                       /* Centra el contenido horizontalmente */
  font-size: 0.95rem;                       /* Tamaño de fuente ligeramente reducido */
  color: #f2f2f2;                           /* Color claro para el texto */
  border-top: 2px solid #2b577d;            /* Línea superior decorativa */
  line-height: 1.6;                         /* Altura de línea para mejor legibilidad */
}

.footer-links {                             /* == Contenedor principal del pie de página == */
  display: flex;                            /* Usa Flexbox para organizar los enlaces */
  flex-wrap: wrap;                          /* Permite que los enlaces se ajusten en varias líneas */
  justify-content: center;                  /* Centra los enlaces horizontalmente */
  gap: 6px;                                 /* Espacio entre enlaces */
  padding: 0 10px;                          /* Espaciado horizontal interno */
}

.footer a {                                 /* == Estilo base para enlaces == */
  position: relative;                       /* Necesario para posicionar el pseudo-elemento ::after */
  color: var(--yellow);                      /* Color blanco para el texto del enlace */
  font-weight: 500;                         /* Seminegrita */
  transition: color 0.3s ease;              /* Transición suave al cambiar el color */
}

.footer a::after {                          /* == Línea decorativa animada debajo del enlace == */
  content: "";                              /* Crea un pseudo-elemento vacío */
  position: absolute;                       /* Posición absoluta dentro del enlace */
  width: 0%;                                /* Comienza invisible */
  height: 2px;                              /* Altura de la línea */
  bottom: -2px;                             /* Posicionada justo debajo del texto */
  left: 0;                                  /* Comienza desde la izquierda */
  background-color: var(--white);           /* Color blanco para la línea */
  transition: width 0.3s ease;              /* Animación suave al expandirse */
}

.footer a:hover {                           /* == Efecto al pasar el cursor == */
  color: #d9e8ff;                           /* Cambia el color del texto a azul claro */
}
.footer a:hover::after {
  width: 100%;                              /* Expande la línea decorativa completamente */
}

.footer a.highlight {                       /* == Enlace destacado == */
  font-weight: 600;                         /* Negrita */
  color: #ffdd66;                           /* Amarillo suave para destacar */
}
.footer a.highlight:hover {
  color: #ffe699;                           /* Amarillo más claro al hacer hover */
}

.footer-info {                              /* == Información adicional en el pie de página == */
  margin-top: 12px;                         /* Espacio superior respecto a los enlaces */
  font-size: 0.9rem;                        /* Tamaño de fuente ligeramente reducido */
  color: var(--yellow);                           /* Color gris claro para texto secundario */
}

/* ============================================================
   8. DISEÑO RESPONSIVO - Adaptación a pantallas pequeñas
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: repeat(2, 1fr);      /* Reduce de 3 a 2 columnas */
  }
  .services {
    grid-template-columns: 1fr;                 /* Convierte la cuadrícula en una sola columna */
  }
  .nav-menu {
    display: none;                              /* Oculta el menú de navegación */
    flex-direction: column;                     /* Cambia a disposición vertical */
  }
  .nav-toggle {
    display: inline-block;                      /* Muestra el botón de menú (hamburguesa) */
  }
  .page {
    margin: 8px;                                /* Reduce el margen exterior */
  }
}

@media (max-width: 600px) {
  .hero-grid {
    grid-template-columns: 1fr;                 /* Una sola columna para máxima legibilidad */
  }
  .content-grid {
    grid-template-columns: 1fr;                 /* Apila el contenido verticalmente */
  }
  .side-left img, .side-right img {
    max-width: 80%;                             /* Reduce el tamaño de las imágenes */
    margin-top: 20px;                           /* Menor espacio superior */
  }
  main {
    padding: 10px;                              /* Reduce el espaciado interno */
  }
  .footer {
    font-size: 0.9rem;                          /* Ajusta el tamaño de fuente */
    padding: 20px 10px;                         /* Reduce el espaciado vertical y horizontal */
  }
  .footer-links {
    gap: 10px;                                  /* Aumenta el espacio entre enlaces */
  }
}

/* ============================================================
   9. MENÚ CONTEXTUAL CON SUBMENÚS (UNIFORME + ANIMACIÓN)
   ============================================================ */

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  display: block;
  padding: 6px 10px;
  color: var(--white);
  border-radius: 4px;
  transition: background 0.3s ease;
}

/* === Corrección para que el último submenú no se corte === */
.nav-menu > li:last-child .submenu {
  left: auto;
  right: 0;
}

/* Si el submenú sigue muy pegado al borde, añade este pequeño margen */
.submenu {
  margin-right: 5px;
}


/* Submenús */
.submenu {
  display: none;
  position: absolute;
  background: var(--blue-700);
  top: 100%;
  left: 0;
  min-width: 220px;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  list-style: none;
  padding: 6px 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.25s ease;
}

/* Enlace dentro del submenú */
.submenu li a {
  display: flex;
  padding: 8px 14px;
  color: var(--white);
  transition: background 0.3s ease;
}

.submenu li a:hover {
  background: var(--accent);
  color: var(--white);
}

/* Guion antes de cada enlace del submenú */
.submenu li a::before {
  content: "▸ "; /* Puedes cambiar por "• " o "– " si prefieres otro símbolo */
  color: var(--yellow, #fff000);
  font-weight: bold;
}

/* Mostrar submenú al pasar el mouse */
.has-submenu:hover > .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Modo móvil */
@media (max-width: 900px) {
  .nav-menu {
    flex-direction: column;
  }
  .submenu {
    position: static;
    box-shadow: none;
    background: var(--blue-500);
    transform: none;
    opacity: 1;
    transition: none;
  }
  .has-submenu > .submenu {
    display: none;
  }
  .has-submenu.open > .submenu {
    display: block;
  }
}