/* === Reset y variables === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  font-size: 16px;
  --color-bg: #0A0A0A;        /* Fondo principal */
  --color-dark: #1E1E1E;      /* Gris carbón */
  --color-accent: #7A0C0C;    /* Rojo sangre */
  --color-hover: #A4161A;     /* Rojo intenso */
  --color-gold: #C2A14D;      /* Dorado envejecido */
  --color-text: #F5F0E6;      /* Marfil antiguo */
  --color-secondary: #B8AFA6; /* Gris cálido */
}

/* 🔤 Fuente Berkshire Swash desde carpeta local */
@font-face {
  font-family: 'Berkshire Swash';
  src: url('./font/BerkshireSwash-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* === Tipografía base === */
p { font-size: 1.2rem; }
h1 { font-size: 2rem;  color: var(--color-gold);}
h2 { font-size: 1.5rem; color: var(--color-gold); }

body {
  font-family: sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  transition: background 0.3s ease, color 0.3s ease;
}
html, body {
  overflow-x: hidden;
}


/* 🌙 Modo oscuro/claro */
.dark-mode {
  background: var(--color-text);
  color: #000000;
}

/* === Loader === */
.loader {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  z-index: 9999;
}
.loader.hidden { display: none; }
.spinner {
  border: 6px solid var(--color-secondary);
  border-top: 6px solid var(--color-gold);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* 🔝 Navbar */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: var(--color-dark);
  border-bottom: 0.1rem solid var(--color-gold);
  position: fixed;   /* 👈 cambia sticky por fixed */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: top 0.3s ease; /* animación suave */
}

.logo img { width: 3rem; margin-right: 2rem; }
.menu { display: flex; list-style: none; }
.menu li { margin: 0 1rem; }
.menu a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: bold;
   transition: color 0.3s ease, text-shadow 0.3s ease;
}
.menu a:hover {  color: var(--color-gold);
  text-shadow: 0 0 10px var(--color-gold);}
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .menu { display: none; flex-direction: column; }
  .menu.active { display: flex; }
  .menu-toggle { display: block; }
}

.menu a.active {
  color: var(--color-gold);
  position: relative;
}

.menu a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(1);
}

/* 🖼️ Banner */
.banner { position: relative; text-align: center; }
.banner img {
  width: 100%;
  height:100vh;
  object-fit: cover;
  filter: brightness(30%);
}
.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-gold);
  text-shadow: 2rem 0 2rem #ffffff;
}
.banner-text h1 {
  font-family: 'Berkshire Swash', serif;
  font-size: 3rem;
  text-transform: uppercase;
}
.banner-text {
  position: absolute;
  z-index: 10; /* asegura que quede encima de la imagen */
}

/* 👋 Bienvenida */
.bienvenida {
  padding: 2rem;
  text-align: center;
}
.bienvenida h2, .bienvenida h3 {
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}
.center-img {
  display: block;
  margin: 2rem auto;
  width: 50%;
  border: 0.2rem solid var(--color-gold);
  border-radius: 0.5rem;
}

/* 💬 Comentarios */
.comentarios { padding: 2rem; }
.comentario {
  margin: 2rem 0;
  background: rgba(255,255,255,0.05);
  padding: 1rem;
  border-radius: 0.5rem;
  border-left: 0.3rem solid var(--color-gold);
}
.comentario img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
}
.comentario h3 {
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
}
.ver-mas {
  background: none;
  border: none;
  color: var(--color-hover);
  cursor: pointer;
}
.hidden { display: none; }

/* 🔚 Footer */
footer {
  text-align: center;
  padding: 2rem;
  background: var(--color-dark);
  color: var(--color-text);
  border-top: 0.1rem solid var(--color-gold);
}
footer img { width: 10rem; height: 10rem; }
footer a {
  color: var(--color-gold);
  text-decoration: none;
}
footer a:hover { color: var(--color-hover); }

/* 🌙 Botones flotantes accesibilidad */
.accesibilidad-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}
.accesibilidad-float button {
  background: var(--color-dark);
  color: var(--color-text);
  border: none;
  padding: 0.6rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: background 0.3s;
}
.accesibilidad-float button:hover {
  background: var(--color-hover);
}
/* Estado inicial: oculto */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* opcional: que suba desde abajo */
  transition: opacity 1s ease, transform 1s ease;
}

/* Cuando se activa */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-out */
.fade-out {
  opacity: 1;
  transition: opacity 1s ease;
}
.fade-out.hidden {
  opacity: 0;
}
/* Fade-in desde la izquierda */
.fade-in-left {
  opacity: 0;
  transform: translateX(-50px); /* desplazado a la izquierda */
  transition: opacity 1s ease, transform 1s ease;
  overflow-x: hidden; /* evita desbordes horizontales */
}

/* Fade-in desde la derecha */
.fade-in-right {
  opacity: 0;
  transform: translateX(50px); /* desplazado a la derecha */
  transition: opacity 1s ease, transform 1s ease;
  overflow-x: hidden; /* evita desbordes horizontales */
}

/* Estado visible */
.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 🎠 Sección Carrusel */
.carrusel {
  padding: 2rem;
  text-align: center;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 60rem;
  margin: 2rem auto;
  overflow: hidden; /* evita desbordes */
  border: 0.1rem solid var(--color-gold);
  border-radius: 0.5rem;
}

.carousel-slide {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide img {
  flex: 0 0 100%;       /* cada imagen ocupa todo el ancho */
  height: 30rem;        /* altura fija para simetría */
  object-fit: cover;    /* recorta proporcionalmente */
  cursor: pointer;
  border-radius: 0.5rem;
}

/* Botones de navegación */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 50%;
  font-size: 2rem;
  z-index: 10;
  transition: background 0.3s ease;
}
.prev { left: 1rem; }
.next { right: 1rem; }
.prev:hover, .next:hover { background: var(--color-hover); }

/* Pantalla completa (Lightbox) */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.lightbox.hidden { display: none; }

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;   /* aquí mostramos la imagen completa */
  border: 0.2rem solid var(--color-gold);
  border-radius: 0.5rem;
}

.lightbox .close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 3rem;
  color: var(--color-gold);
  cursor: pointer;
  transition: color 0.3s ease;
}
.lightbox .close:hover {
  color: var(--color-hover);
}
.dos-columnas {
  padding: 3rem 1rem;
}

.fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.columna {
  flex: 1;
  padding: 1rem;
}

.columna.imagen img {
  width: 100%;
  height:40rem;
  border-radius: 5rem;
  border: 0.2rem solid var(--color-gold);
  object-fit: cover;
}

/* Invertir orden para bloque 2 */
.fila.invertida {
  flex-direction: row-reverse;
}


.hermandad {
  padding: 3rem 1rem;
  background: linear-gradient(180deg, #0A0A0A, #1E1E1E);
  border-top: 0.2rem solid var(--color-gold);
}

.hermandad h2 {
  text-align: center;
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.bloque {
  margin: 2rem auto;
  padding: 1.5rem;
  border: 0.1rem solid var(--color-gold);
  border-radius: 0.5rem;
  background: rgba(194,161,77,0.05);
  max-width: 800px;
  box-shadow: 0 0 15px rgba(194,161,77,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* ✨ Efecto al pasar el mouse */
.bloque:hover {
  transform: translateY(-5px); /* se eleva un poco */
  box-shadow: 0 0 25px rgba(194,161,77,0.6); /* resplandor dorado más fuerte */
  background: rgba(194,161,77,0.1); /* fondo un poco más brillante */
}


.bloque h3 {
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin-bottom: 1rem;
  text-align: center;
}

.bloque ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.bloque li {
  margin: 0.5rem 0;
  color: var(--color-text);
  font-size: 1.1rem;
  text-shadow: 0 0 8px rgba(194,161,77,0.6);
}
.formaciones h2,
.formaciones h3,
.hermandad h2,
.hermandad h3 {
  text-align: center;              /* centra el texto */
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}
.titulo-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* espacio entre icono y texto */
}

.icono-redondo {
  width: 100px;
  height: 100px;
  border-radius: 50%;        /* hace la imagen circular */
  border: 2px solid var(--color-gold);
  object-fit: cover;
  box-shadow: 0 0 10px rgba(194,161,77,0.6); /* resplandor dorado */
}
/* Estilos generales Hermandad */
.hermandad {
  padding: 3rem 1rem;
  border-top: 0.2rem solid var(--color-gold);
}

/* Títulos centrados */
.hermandad h2,
.hermandad h3 {
  text-align: center;
  font-family: 'Berkshire Swash', serif;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

/* Bloques */
.hermandad .bloque {
  margin: 2rem auto;
  padding: 1.5rem;
  border: 0.1rem solid var(--color-gold);
  border-radius: 0.5rem;
  max-width: 800px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hermandad .bloque:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(194,161,77,0.4);
}

/* Listas */
.hermandad ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.hermandad li {
  margin: 0.5rem 0;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

/* 🌞 Modo día */
body.light-mode .hermandad h2,
body.light-mode .hermandad h3 {
  color: var(--color-gold);   /* títulos dorados */
}

body.light-mode .hermandad .bloque ul li {
  color: #000;                /* texto negro */
}

/* 🌙 Modo noche (opcional) */
body.dark-mode .hermandad h2,
body.dark-mode .hermandad h3 {
  color: var(--color-gold);
}

body.dark-mode .hermandad li {
  color: var(--color-text);   /* texto claro definido en tu paleta */
}


.virtudes {
  padding: 3rem 1rem;
  background: linear-gradient(180deg, #0A0A0A, #1E1E1E);
  text-align: center;
}

.virtudes h2 {
  text-align: center;
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

/* Imagen central */
.virtudes-imagen {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.virtudes-imagen img {
  width: 450px;
  height: 450px;
  border: 3px solid var(--color-gold);
  box-shadow: 0 0 20px rgba(194,161,77,0.6);
  object-fit: cover;
 
}


/* Bloques de Misión y Visión */
.virtudes-texto {
  max-width: 800px;
  margin: 1rem auto;
  padding: 1.5rem;
  border: 0.1rem solid var(--color-gold);
  border-radius: 0.5rem;
  background: rgba(194,161,77,0.05);
  transition: transform 0.4s ease, background 0.4s ease;
}

.virtudes-texto h3 {
  text-align: center;                /* títulos centrados */
  font-family: 'Berkshire Swash', serif;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.virtudes-texto p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
  transition: transform 0.4s ease, color 0.4s ease;
}

/* ✨ Hover delicado en texto */
.virtudes-texto:hover {
  transform: translateY(-3px);       /* se eleva suavemente */
  background: rgba(194,161,77,0.1);  /* un poco más brillante */
}

.virtudes-texto:hover p {
  transform: scale(1.05);            /* agranda suavemente el texto */

}

.cursos {
  padding: 3rem 1rem;
  background:var(--color-bg);
  text-align: center;
}

.cursos h2 {
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

/* Grid de cards */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Card */
.curso-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.curso-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(194,161,77,0.4);
}

/* Imagen simétrica */
.curso-img {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.curso-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* todas simétricas */
  transition: transform 0.5s ease;
}

.curso-card:hover .curso-img img {
  transform: scale(1.1); /* zoom suave */
}

/* Título */
.curso-card h3 {
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin: 1rem 0 0.5rem;
  text-align: center;
}

/* Descripción */
.curso-card p {
  font-size: 0.95rem;
  color: #444;
  text-align: center;
  padding: 0 1rem;
  flex-grow: 1;
}

/* Estado */
.estado {
  margin: 0.5rem 0;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.estado.activo {
  background: #4CAF50;
  color: #fff;
  box-shadow: 0 0 10px rgba(76,175,80,0.5);
}

.estado.cerrado {
  background: #f44336;
  color: #fff;
  box-shadow: 0 0 10px rgba(244,67,54,0.5);
}

/* Botón Ver más */
.ver-mas {
  background: var(--color-gold);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  margin: 1rem 0;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
}

.ver-mas:hover {
  background: #c2a14d;
  transform: scale(1.05);
}
/* Modal */
.modal {
  display: none; /* oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  transition: opacity 0.3s ease;
}

.modal-content {
  background: #fff;
  margin: 10% auto;
  padding: 2rem;
  border-radius: 0.5rem;
  width: 80%;
  max-width: 600px;
  position: relative;
}

.cerrar {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}

.tomar-formacion {
  background: #4CAF50;
  color: #fff;
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
}

/* Formulario */
.formulario {
  display: none;
  background: #fff;
  padding: 2rem;
  border-radius: 0.5rem;
  max-width: 600px;
  margin: 2rem auto;
}

.formulario form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.formulario input,
.formulario textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
}


/* 📱 Mobile: carrusel horizontal */
@media (max-width: 768px) {
  .cursos-grid {
    display: flex;              /* cambia a flexbox */
    overflow-x: auto;           /* scroll horizontal */
    scroll-snap-type: x mandatory; /* efecto carrusel */
    -webkit-overflow-scrolling: touch; /* suavidad en iOS */
    gap: 1rem;
    padding-bottom: 1rem;
  }

  .curso-card {
    flex: 0 0 80%;              /* cada card ocupa 80% del ancho */
    max-width: 300px;
    scroll-snap-align: center;  /* se centra al deslizar */
    margin: 0 auto;
  }

  .curso-img img {
    height: 500px;              /* ajusta altura en mobile */
  }

  .ver-mas {
    width: 100%;                /* botón ocupa todo el ancho */
  }
}

/* Opcional: ocultar scrollbar feo en mobile */
.cursos-grid::-webkit-scrollbar {
  display: none;
}

.btn-curso,
.ver-mas-c {
  background: var(--color-gold);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
}

.btn-curso:hover,
.ver-mas-c:hover {
  background: #c2a14d;
  transform: scale(1.05);
}


/* ===== Sección Cursos ===== */
.cursos {
  padding: 3rem 1rem;
  background: var(--color-bg);
  text-align: center;
}

.cursos h2 {
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

/* Grid de cards */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Card */
.curso-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.curso-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(194,161,77,0.4);
}

/* Imagen simétrica */
.curso-img {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.curso-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.curso-card:hover .curso-img img {
  transform: scale(1.1);
}

/* Título */
.curso-card h3 {
  font-family: 'Berkshire Swash', serif;
  color: var(--color-gold);
  margin: 1rem 0 0.5rem;
  text-align: center;
}

/* Descripción */
.curso-card p {
  font-size: 0.95rem;
  color: #444;
  text-align: center;
  padding: 0 1rem;
  flex-grow: 1;
}

/* Estado */
.estado {
  margin: 0.5rem 0;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.estado.activo {
  background: #452969;
  color: #fff;
  box-shadow: 0 0 10px rgba(76,175,80,0.5);
}

.estado.cerrado {
  background: #000000;
  color: #fff;
  box-shadow: 0 0 10px rgba(244,67,54,0.5);
}

/* Botones (comentarios y cursos) */
.btn-curso,
.ver-mas-c {
  background: var(--color-gold);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  margin: 1rem 0;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
}

.btn-curso:hover,
.ver-mas-c:hover {
  background: #c2a14d;
  transform: scale(1.05);
}

/* ===== Modales ===== */
.modal {
  display: none; /* oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.modal.show {
  display: block; /* 🔑 aparece */
  opacity: 1;
}

.modal-content {
  background: #fff;
  margin: 8% auto;
  padding: 2rem;
  border-radius: 1rem;
  width: 80%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 0 25px rgba(194,161,77,0.4);
  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}

.cerrar {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-bloodred);
  transition: color 0.3s ease;
}

.cerrar:hover {
  color: var(--color-gold);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .cursos-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1rem;
  }

  .curso-card {
    flex: 0 0 80%;
    max-width: 300px;
    scroll-snap-align: center;
    margin: 0 auto;
  }

  .curso-img img {
    height: 500px;
  }

  .btn-curso {
    width: 100%;
  }
}

.cursos-grid::-webkit-scrollbar {
  display: none;
}


/* Responsivo: en móviles se apilan */
@media (max-width: 768px) {
  .fila, .fila.invertida {
    flex-direction: column;
  }
  .columna.imagen img {
  width: 100%;
  height:100%;
  border-radius: 1rem;
  
}
.banner img {
  width: 100%;
  height:70vh;
 
}

}

  /* Botón para abrir cursos */
.btn-curso {
  background: goldenrod;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
}
.btn-curso:hover {
  background: #c2a14d;
  transform: scale(1.05);
}

/* Fondo del modal */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); /* fondo oscuro translúcido */
  overflow-y: auto;

  /* Animación con visibility + opacity */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}
.modal.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Caja del contenido */
.modal-content {
  background: #fdfdfd;
  margin: 5% auto;
  padding: 2rem;
  border-radius: 1rem;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(194,161,77,0.6);
  font-family: Arial, sans-serif;
  color: #222;
  position: relative;

  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}

/* Scroll interno */
.modal-content::-webkit-scrollbar {
  width: 8px;
}
.modal-content::-webkit-scrollbar-thumb {
  background: var(--color-gold, #c2a14d);
  border-radius: 4px;
}

/* Títulos y textos */
.modal-content h3 {
  color: var(--color-gold, #c2a14d);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}
.modal-content p,
.modal-content label {
  color: #222;
  font-size: 1rem;
  line-height: 1.5;
}

/* Inputs y textarea */
.modal-content input,
.modal-content textarea {
  width: 100%;
  padding: 0.7rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.4rem;
  font-size: 1rem;
  color: #222;
  background: #fff;
}

/* Botón Inscribirme */
.btn-inscribir {
  background: var(--color-gold, #c2a14d);
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  margin-top: 1rem;
}
.btn-inscribir:hover:not(:disabled) {
  background: #a8893a;
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(194,161,77,0.6);
}
.btn-inscribir:active:not(:disabled) {
  transform: scale(0.95);
}
.btn-inscribir:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  opacity: 0.7;
}

/* Botón enviar del formulario */
.modal-content button[type="submit"] {
  background: #222;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.3s ease;
}
.modal-content button[type="submit"]:hover {
  background: #444;
  transform: scale(1.05);
}

/* Botón cerrar (X) */
.cerrar {
  position: absolute;
  top: 10px; right: 15px;
  cursor: pointer;
  font-size: 1.5rem;
  color: #b22222;
  transition: color 0.3s ease;
}
.cerrar:hover {
  color: var(--color-gold, #c2a14d);
}

/* Formulario único siempre arriba */
#formulario.modal {
  z-index: 2000;
}
.modal {
  position: fixed;
  z-index: 1000;
  inset: 0; /* equivale a top:0; left:0; width:100%; height:100% */
  background: rgba(0,0,0,0.6);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.modal.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.modal-content {
  background: #fff;
  margin: 8% auto;
  padding: 2rem;
  border-radius: 1rem;
  width: 80%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 0 25px rgba(194,161,77,0.4);
  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}
/* Por defecto, la X no se ve en desktop */
.menu-close {
  display: none;
}

/* En mobile sí se muestra */
@media (max-width: 768px) {
  .menu {
    position: fixed;
    inset: 0;
    background: var(--color-dark);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-size: 1.5rem;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
  }

  .menu.active {
    opacity: 1;
    visibility: visible;
  }

  .menu-close {
    display: block; /* 👈 ahora solo en mobile */
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: var(--color-text);
    cursor: pointer;
  }
}

@media (max-width: 768px) {
  .menu {
    position: fixed;
    inset: 0; /* ocupa toda la pantalla */
    background: var(--color-dark);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-size: 1.5rem;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
  }

  .menu.active {
    opacity: 1;
    visibility: visible;
  }

  .menu a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: bold;
  }

  .menu a:hover {
    color: var(--color-gold);
    text-shadow: 0 0 10px var(--color-gold);
  }

  .menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: var(--color-text);
    cursor: pointer;
  }

  .menu-toggle {
    display: block;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-text);
  }
}
/* Estado inicial: oculto */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estado visible */
.modal.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Caja del contenido */
.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 25px rgba(194,161,77,0.6);
  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  position: relative;
}

.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}