/* ============================= */
/* VARIABLES */
/* ============================= */
:root {
  --azul-aora: #003366;
  --verde-aora: #4ca642;
  --gris-texto: #666;
  --gris-claro: #f8faff;

  --a-azul: #003366;
  --a-verde: #4ca642;
  --a-rojo: #d0021b;
  --a-celeste: #4a90e2;
  --a-fondo: #f8fbff;
}

/* ============================= */
/* RESET */
/* ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--gris-claro);
  color: #333;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
}

/* ============================= */
/* NAVBAR */
/* ============================= */
.navbar {
  background: #fff;
  padding: 15px 0;
  border-bottom: 2px solid #f0f0f0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 24px;
  color: var(--azul-aora);
}

.nav-logo img {
  height: 45px;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--gris-texto);
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s;
}

.nav-menu a:hover {
  color: var(--azul-aora);
}

.nav-menu li.active a {
  color: var(--verde-aora);
  border-bottom: 3px solid var(--verde-aora);
  padding-bottom: 5px;
}

/* ============================= */
/* HERO - CORREGIDO ESPACIADO */
/* ============================= */
.hero {
  background: radial-gradient(circle at center, #ffffff 0%, #f0f7ff 100%);
  padding: 60px 0 100px 0; /* Aumentado el padding inferior a 100px */
  position: relative;
  overflow: visible; /* Permitir que las cartas floten un poco */
}

.hero-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 5;
}

.hero-logo-top {
  width: 220px;
  height: auto;
  margin-bottom: -15px;
}

.hero-title {
  font-size: 90px;
  font-weight: 900;
  color: var(--azul-aora);
  font-style: italic;
  line-height: 0.8;
}

.hero-slogan {
  font-size: 26px;
  font-weight: 700;
  color: var(--azul-aora);
  letter-spacing: 4px;
  margin-top: 10px;
}


.btn-blue-hero, .btn-green-hero {
  padding: 14px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: white;
  transition: 0.3s;
}

.btn-blue-hero { background: linear-gradient(to bottom, #0052cc, #003399); }
.btn-green-hero { background: linear-gradient(to bottom, #76b041, #5a8a32); }

.hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 5px;
}

.eddy-img {
  max-width: 420px;
  width: 100%;
  height: auto;
}

.hero-main-btns {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.bio-tag {
  position: absolute;
  bottom: 123px;
  right: 16%;
  background: var(--verde-aora);
  color: white;
  padding: 12px 35px;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  z-index: 10;
  text-decoration: none;
}

/* ============================= */
/* PILARES - CORREGIDO POSICIÓN */
/* ============================= */
.values-section {
  margin-top: -60px; /* Las cartas suben un poco para morder el hero */
  position: relative;
  z-index: 20;
}

.values-container {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  padding: 0 20px;
}

.v-card {
  padding: 30px 20px;
  border-radius: 15px;
  color: white;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.v-blue { background: #4a90e2; }
.v-green { background: #76b041; }
.v-orange { background: #f5a623; }
.v-red { background: #d0021b; }

/* ============================= */
/* MENSAJE PRESIDENTE */
/* ============================= */
.message-section {
  padding: 80px 0;
  background: #fff;
}

.msg-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 40px;
  padding: 0 20px;
}

.section-title {
  color: var(--azul-aora);
  margin-bottom: 30px;
}

.president-card {
  display: flex;
  background: #f9f9f9;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.president-card img {
  width: 200px;
  object-fit: cover;
}

.president-info {
  padding: 25px;
}

.msg-right {
  flex: 1;
}

.crowd-img {
  width: 100%;
  border-radius: 15px;
}

/* ============================= */
/* NOTICIAS */
/* ============================= */
.noticias-section {
  padding: 80px 20px;
  background: #f4f7fb;
}

.noticias-header {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filters {
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: white;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-decoration: none;
}

.filter-btn.active {
  background: var(--verde-aora);
  color: white;
}

.search-box {
  max-width: 1200px;
  margin: 0 auto 40px auto;
  display: flex;
  justify-content: flex-end;
}

.search-box input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 8px 0 0 8px;
  width: 250px;
}

.search-box button {
  background: var(--verde-aora);
  border: none;
  padding: 10px 15px;
  color: white;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
}

.noticias-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.noticia-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.noticia-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.noticia-card h3 {
  padding: 15px;
  color: var(--azul-aora);
}

.noticia-card p {
  padding: 0 15px 20px 15px;
  color: var(--gris-texto);
}

/* ============================= */
/* BANNER */
/* ============================= */
.full-banner {
  background: var(--azul-aora);
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.btn-green-large {
  background: var(--verde-aora);
  padding: 15px 50px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}

/* ============================= */
/* FORMULARIO */
/* ============================= */
.join-section {
  max-width: 800px;
  margin: 80px auto;
  text-align: center;
}

.join-form {
  margin-top: 30px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.join-form input,
.join-form select {
  flex: 1;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.btn-green-submit {
  width: 100%;
  background: var(--verde-aora);
  color: white;
  padding: 18px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}

.whatsapp-contact {
  margin-top: 15px;
  font-weight: bold;
  color: var(--verde-aora);
}

/* ============================= */
/* FOOTER */
/* ============================= */
.footer {
  background: #111;
  color: white;
  text-align: center;
  padding: 20px;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media (max-width: 992px) {

  .hero-container,
  .msg-container {
    flex-direction: column;
    text-align: center;
  }

  .values-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .noticias-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }

  .form-row {
    flex-direction: column;
  }

}

@media (max-width: 600px) {

  .values-container {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 45px;
  }

}

/* --- Estilos Generales Páginas Internas --- */
.hero-internal {
  background: radial-gradient(circle at center, #ffffff 0%, #f0f7ff 100%);
  padding: 40px 0;
  border-bottom: 1px solid #ddd;
}

.container-small {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
  line-height: 1.8;
  font-size: 18px;
}

/* --- Estilos El Partido --- */
.mv-card-internal {
  background: white;
  padding: 40px 20px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  border-top: 4px solid var(--azul-aora);
}
.mv-card-internal i { font-size: 40px; color: var(--azul-aora); margin-bottom: 20px; }

/* --- Estilos Dirección --- */
.team-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.team-card img { width: 100%; height: 250px; object-fit: cover; }
.team-card h4 { margin-top: 15px; color: var(--azul-aora); }
.team-card span { color: var(--verde-aora); font-weight: bold; font-size: 14px; }

/* --- Estilos Multimedia --- */
.gallery-item img {
  width: 100%;
  border-radius: 10px;
  transition: 0.3s;
}
.gallery-item img:hover { transform: scale(1.03); }

/* ============================= */
/* ESTILOS DE CABECERA (Páginas de Gestión) */
/* ============================= */
header {
  background: radial-gradient(circle at center, #ffffff 0%, #f0f7ff 100%);
  padding: 30px 20px;
  text-align: center;
  border-bottom: 2px solid #eee;
}

header h1, header h2 {
  color: var(--azul-aora);
  font-family: 'Montserrat', sans-serif;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

header nav ul {
  list-style: none;
  margin-top: 15px;
}

header nav a {
  text-decoration: none;
  color: var(--verde-aora);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
}

/* ============================= */
/* PÁGINA DE INSCRIPCIÓN (iFrame) */
/* ============================= */
iframe {
  display: block;
  margin: 40px auto;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  max-width: 100%;
}

.anuncios-laterales {
  text-align: center;
  margin: 20px 0;
}

.anuncio-derecho img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ============================= */
/* LOGIN ADMIN */
/* ============================= */
.login-container {
  max-width: 400px;
  margin: 80px auto;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  text-align: center;
}

.login-container h2 {
  color: var(--azul-aora);
  margin-bottom: 25px;
}

.login-container input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
}

.login-container button {
  width: 100%;
  padding: 12px;
  background: var(--azul-aora);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.login-container button:hover {
  background: var(--verde-aora);
}

/* ============================= */
/* PANEL DE ADMINISTRADOR */
/* ============================= */
.container {
  max-width: 900px;
  margin: 50px auto;
  background: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  text-decoration: none;
}

#formPost input[type="text"] {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

#editor {
  background: white;
  border-radius: 0 0 8px 8px;
}

#formPost button {
  margin-top: 20px;
  padding: 12px 40px;
  background: var(--verde-aora);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

/* Lista de noticias en el panel */
#listaNoticias {
  margin-top: 40px;
}

#listaNoticias div {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

#listaNoticias h3 {
  color: var(--azul-aora);
}

#listaNoticias button {
  background: #ff4d4d;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

/* ============================= */
/* FOOTER ESPECÍFICO (Site-Footer) */
/* ============================= */
.site-footer {
  background: #1a1a1a;
  color: white;
  padding: 60px 20px 20px;
  margin-top: 80px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.footer-column h3 {
  border-bottom: 2px solid var(--verde-aora);
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 5px;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 12px;
  font-size: 14px;
}

.footer-column a {
  color: #bbb;
  text-decoration: none;
  transition: 0.3s;
}

.footer-column a:hover {
  color: var(--verde-aora);
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  font-size: 20px;
  background: #333;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #333;
}


/*
DISEÑO PARA NOSOTROS
*/

.content-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* --- TARJETA PRINCIPAL QUIÉNES SOMOS --- */
.info-card-main {
    background: white;
    display: flex;
    align-items: center;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 40px;
    gap: 30px;
}
.card-content { flex: 2; }
.card-image-logo { flex: 1; text-align: center; }
.card-image-logo img { max-width: 200px; }

/* --- MISIÓN Y VISIÓN --- */
.mv-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 50px;
}
.mv-card-new {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    border-top: 6px solid;
}
.mv-card-new:hover { transform: translateY(-5px); }
.mv-card-new i { font-size: 40px; margin-bottom: 15px; }
.mision { border-top-color: var(--a-celeste); }
.mision i { color: var(--a-celeste); }
.vision { border-top-color: var(--a-verde); }
.vision i { color: var(--a-verde); }

/* --- GRILLA DE VALORES --- */
.section-title-center {
    text-align: center;
    color: var(--a-azul);
    font-size: 32px;
    margin-bottom: 30px;
}
.values-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.value-box {
    background: white;
    padding: 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-left: 5px solid;
}
.value-box i { font-size: 30px; margin-bottom: 10px; }
.value-box h3 { margin: 10px 0; color: #333; }

/* Colores dinámicos por valor */
.v-celeste { border-left-color: var(--a-celeste); } .v-celeste i { color: var(--a-celeste); }
.v-verde { border-left-color: var(--a-verde); } .v-verde i { color: var(--a-verde); }
.v-rojo { border-left-color: var(--a-rojo); } .v-rojo i { color: var(--a-rojo); }
.v-azul { border-left-color: var(--a-azul); } .v-azul i { color: var(--a-azul); }

/* Responsive */
@media (max-width: 768px) {
    .mv-container { grid-template-columns: 1fr; }
    .info-card-main { flex-direction: column; text-align: center; }
}

.page-banner {
    padding: 60px 20px;
    text-align: center; /* Esto centra el texto horizontalmente */
    background: radial-gradient(circle at center, #ffffff 0%, #f0f7ff 100%); /* Fondo profesional */
    border-bottom: 1px solid #eee;
}

.page-banner h1 {
    font-size: 48px;
    color: var(--a-azul); /* El azul oscuro de tu logo */
    margin-bottom: 10px;
    text-transform: uppercase;
}

.page-banner p {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto; /* Centra el párrafo si tiene un ancho máximo */
}

/* --- ARREGLO PARA ICONOS DE QUILL --- */

/* Evita que los botones del editor hereden el estilo de tus botones verdes */
.ql-toolbar.ql-snow button {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 28px !important;
    height: 24px !important;
    padding: 3px 5px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Asegura que los iconos (trazos) sean visibles */
.ql-snow .ql-stroke {
    stroke: #444 !important;
}

.ql-snow .ql-fill {
    fill: #444 !important;
}

/* Restablece el efecto al pasar el mouse sobre los iconos */
.ql-toolbar.ql-snow button:hover .ql-stroke {
    stroke: var(--verde-aora) !important;
}

/* Corrige el contenedor del editor para que no se vea deformado */
.ql-container.ql-snow {
    border-radius: 0 0 8px 8px;
    background: white;
}

.ql-toolbar.ql-snow {
    border-radius: 8px 8px 0 0;
    background: #f9f9f9;
}

/* para que la lista de noticias del panel de administracion se vea bien*/

#listaNoticias div {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}

#listaNoticias img {
    border-radius: 5px;
    margin: 10px 0;
    display: block;
}

/* Botón de eliminar específico */
#listaNoticias button {
    background: #ff4d4d;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

#listaNoticias button:hover {
    background: #cc0000;
}

/*ESTO ES PARA QUE EL CONTEO O CONTADOR SE VEA BIEN*/

/* Contenedor principal para ponerlos al lado */
.seccion-registro {
    display: flex;           /* Activa el modo "lado a lado" */
    align-items: flex-start; /* Alinea ambos al tope superior */
    justify-content: center; /* Los centra en la pantalla */
    gap: 30px;               /* Espacio de separación entre ellos */
    max-width: 1100px;
    margin: 40px auto;       /* Margen arriba y abajo */
    padding: 0 20px;
}

/* Estilo para la caja verde del contador */
.counter-box {
    background: var(--verde-aora);
    color: white;
    padding: 25px;
    border-radius: 25px;
    text-align: center;
    min-width: 220px;        /* Ancho fijo para que no se encoja */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: 0.3s;
}

.counter-box:hover {
    transform: translateY(-5px); /* Pequeño salto al pasar el mouse */
}

/* Ajuste para el contenedor del iframe */
.form-wrapper {
    flex-grow: 1;            /* Hace que el formulario use el resto del espacio */
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.form-wrapper iframe {
    width: 100%;             /* Se adapta al ancho del contenedor */
    display: block;
}

/* Movil: Si la pantalla es pequeña, se ponen uno arriba del otro */
@media (max-width: 850px) {
    .seccion-registro {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================
   🎯 MEDIA QUERIES RESPONSIVE
============================================ */

/* =========================
   📱 TABLETS (768px+)
========================= */

@media (min-width: 768px){

/* NAVBAR */

.nav-logo img{
    width:60px;
}

.logo-text{
    font-size:1.5rem;
}

.nav-menu{
    gap:15px;
}

/* HERO */

.hero-container{
    flex-direction:row;
    align-items:center;
}

.hero-title{
    font-size:2.5rem;
}

.hero-slogan{
    font-size:1.2rem;
}

.eddy-img{
    max-width:350px;
}

/* NOTICIAS */

.noticias-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

/* BANNER */

.full-banner h2{
    font-size:2rem;
}

/* FOOTER */

.footer-container{
    flex-wrap:wrap;
    gap:20px;
}

.footer-column{
    flex:1 1 45%;
}

}


/* =========================
   💻 DESKTOP (992px+)
========================= */

@media (min-width: 992px){

/* NAVBAR */

.navbar{
    padding:15px 5%;
}

.logo-text{
    font-size:2rem;
}

.nav-menu{
    gap:25px;
}

.nav-menu a{
    font-size:1rem;
}

/* HERO */

.hero-title{
    font-size:3rem;
}

.hero-slogan{
    font-size:1.3rem;
}

.eddy-img{
    max-width:420px;
}

/* NOTICIAS */

.noticias-grid{
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* DIRECCIÓN */

.team-section .values-container{
    grid-template-columns:repeat(3,1fr);
}

/* MULTIMEDIA */

.gallery-section .noticias-grid{
    grid-template-columns:repeat(3,1fr);
}

/* FOOTER */

.footer-container{
    justify-content:space-between;
}

.footer-column{
    flex:1;
}

}

/* --- Estilos Generales del Navbar --- */
.navbar {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-logo img { height: 50px; }
.logo-text { font-weight: bold; font-size: 1.5rem; color: #0056b3; }

.nav-menu {
    display: flex;
    list-style: none;
    gap: 15px;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: 0.3s;
}

/* Botón SUMATE+ resaltado */
.nav-cta a {
    background-color: #28a745;
    color: white !important;
    padding: 8px 15px;
    border-radius: 5px;
}

/* --- Estilos del Botón Hamburguesa --- */
.hamburger {
    display: none; /* Oculto en PC */
    cursor: pointer;
    background: none;
    border: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #333;
    transition: 0.3s;
}

/* --- DISEÑO PARA MÓVILES (Responsive) --- */
@media (max-width: 768px) {
    .hamburger { display: block; } /* Aparece en móviles */

    .nav-menu {
        position: absolute;
        top: 80px; /* Ajusta según el alto de tu navbar */
        left: -100%; /* Escondido a la izquierda */
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        text-align: center;
        transition: 0.4s;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 20px 0;
    }

    .nav-menu.active {
        left: 0; /* Entra a la pantalla cuando se activa */
    }

    .nav-menu li { margin: 15px 0; }
}