html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #181818;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@font-face {
  font-family: 'MADE Cannes';
  src: url('fonts/MADE Cannes PERSONAL USE.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #111;
  box-shadow: 0 2px 8px #0005;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo { height: 60px; width: auto; object-fit: contain; }
.brand { display: inline-block; }

.nav-menu {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.20rem;
  transition: color .2s ease;
}
.nav-link:hover { color: #d80000; }

/* Botón hamburguesa (oculto en desktop) */
.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: #fff;
}

/* --- Vista móvil --- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* Menú drop-down */
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #111;
    display: none;           /* oculto por defecto */
    flex-direction: column;
    gap: 0;
    padding: 10px 16px 16px;
    border-top: 1px solid #222;
    box-shadow: 0 10px 20px #0006;
  }

  .nav-menu li { padding: 10px 4px; }
  .nav-link { display: block; font-size: 1rem; }

  /* Mostrar cuando nav está abierto */
  .navbar.is-open .nav-menu { display: flex; }
}

/* HERO */

.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 30px 0 #000a;
}
.hero-video-bg {
  position: absolute;
  z-index: 0;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.38;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #19181b 70%, #e11d48 110%);
  opacity: 0.7;
  z-index: 1;
}
.hero-wrapper {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 350px;
  z-index: 2;
}
.hero-img {
  flex: 1 1 54%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
  min-height: 320px;
  background: #eee;
  /* Sin border-radius (cuadrado) */
  border-radius: 0;
  box-shadow: none;
}
.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sin border-radius */
  border-radius: 0;
  box-shadow: none;
}
.hero-text {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 40px 54px 50px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(20px);
  /* Sin border-radius */
  border-radius: 0;
  margin-right: 0;
  margin-top: 32px;
  margin-bottom: 32px;
  box-shadow: 0 6px 28px 0 #0003;
  z-index: 2;
  max-width: 520px;
  border-left: 5px solid #d80000;
}
.hero-headline {
  font-family: 'MADE Cannes', 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: bold;
  letter-spacing: -1px;
  color: #101010;
  background: linear-gradient(90deg, #d80000 0 10%, #fff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.hero-bar {
  display: inline-block;
  width: 8px;
  height: 44px;
  border-radius: 7px;
  background: #d80000;
  margin-right: 10px;
}
.hero-article {
  font-size: 1.11rem;
  color: #fff;
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.hero-author {
  font-size: 1rem;
  color: #b0b0b0;
  font-style: italic;
  margin-bottom: 7px;
}
.hero-main {
  margin-bottom: 16px;
  color: #FFF;
  font-size: 1.13rem;
}
.highlight {
  color: #d80000;
  font-weight: bold;
}
.hero-tagline {
  color: #ffffff;
  font-style: italic;
  font-size: 1.03rem;
  border-left: 3px solid #d80000;
  padding-left: 14px;
}
/* RESPONSIVE HERO */
@media (max-width: 950px) {
  .hero-wrapper {
    flex-direction: column;
    min-height: unset;
    padding: 0;
  }
  .hero-img {
    order: 1;
    border-radius: 0;
    min-height: 220px;
  }
  .hero-img img {
    border-radius: 0;
    min-width: 0;
    height: 220px;
    object-fit: cover;
  }
  .hero-text {
    order: 2;
    margin: 0 auto 0 auto;
    border-radius: 0;
    border-left: none;
    border-top: 5px solid #e11d48;
    max-width: 98vw;
    padding: 36px 20px 34px 20px;
    box-shadow: 0 6px 28px 0 #0004;
  }
  .hero-headline {
    font-size: 2.1rem;
    gap: 11px;
  }
  .hero-bar {
    width: 7px;
    height: 32px;
  }
}
@media (max-width: 520px) {
  .hero-headline { font-size: 1.25rem; }
  .hero-text { padding: 23px 6vw 19px 6vw; }
}

/* SECCIONES */
.section {
  padding: 20px 14px;
}
.section-title {
  font-size: 5rem;
  font-family: 'MADE Cannes', 'Playfair Display', serif;
  font-weight: bold;
  margin-bottom: 38px;
  text-align: center;
}
.section-content {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.1rem;
  color: #eee;
}
.dark-section {
  background: #111;
  color: #fff;
}
.light-section {
  background: #fafafa;
  color: #111;
}

/* GALERÍA */
#galeria .section-title {
  color: #101010;
}
.gallery-section {
  background: #fafafa;
  padding: 64px 14px;
}
.gallery-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 38px;
}
.gallery-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform 0.18s;
  padding: 0;
}
.gallery-btn:active {
  transform: scale(0.96);
}
.gallery-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid transparent;
  box-shadow: 0 0 0 0 #d80000, 0 4px 18px 0 #0002;
  filter: grayscale(1) brightness(1.09);
  transition:
    filter 0.4s cubic-bezier(.32,.72,.38,.95),
    transform 0.32s cubic-bezier(.32,.72,.38,.95),
    border-color 0.28s,
    box-shadow 0.38s cubic-bezier(.32,.72,.38,.95);
  background: #fff;
  object-fit: cover;
  display: block;
}

.gallery-btn:hover .gallery-img,
.gallery-btn:focus .gallery-img,
.gallery-btn.active .gallery-img {
  filter: grayscale(0) brightness(1.08) saturate(1.09);
  /* Efecto zoom */
  transform: scale(1.05);
  /* Efecto neón */
  border-color: #ff1859;
  box-shadow:
    0 0 18px 2px #ff1859,
    0 0 40px 7px #ff18596e,
    0 4px 30px 0 #d8000040;
}

.gallery-btn:active .gallery-img {
  transform: scale(0.97);
}

.gallery-btn span {
  margin-top: 7px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  color: #b90000;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: color 0.18s;
}

.gallery-btn:hover span,
.gallery-btn:focus span,
.gallery-btn.active span {
  color: #d80000;
}

/* Responsive */
@media (max-width: 800px) {
  .gallery-img {
    width: 85px;
    height: 85px;
  }
}
/* CURSOS */
.courses-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width:900px) {
  .courses-grid { flex-direction: row;}
}
.course-card {
  background: linear-gradient(180deg, #2d2d2d 60%, #000 100%);
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px 0 #0006;
  padding: 32px 24px;
  color: #fff;
  flex: 1 1 0%;
  margin: 0 4px;
  border: 1.5px solid #fff1;
  transition: transform 0.18s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.course-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.price {
  margin-top: 8px;
  font-size: 1.25rem;
  font-weight: bold;
  color: #8d0000;
}
.course-card:hover {
  transform: scale(1.03);
  border-color: #8d0000;
}

/* CONTACTO */
.contact-form {
  background: #fff;
  color: #222;
  padding: 34px 24px;
  border-radius: 1.7rem;
  box-shadow: 0 4px 18px 0 #0001;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form input,
.contact-form textarea {
  border-radius: 10px;
  border: 1.5px solid #ddd;
  padding: 13px 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #f9f9f9;
  resize: none;
  outline: none;
  transition: border-color 0.19s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #8d0000;
}
.contact-form button {
  background: #8d0000;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 13px 0;
  margin-top: 6px;
  cursor: pointer;
  transition: background 0.19s;
}
.contact-form button:hover {
  background: #5f0000;
}

/* FOOTER */
.footer {
  background: #101010;
  color: #fff;
  text-align: center;
  padding: 22px 0 14px 0;
  border-top: 1px solid #222;
  font-size: 1rem;
  margin-top: auto;
}
.footer-note {
  color: #bbb;
  font-size: 0.92rem;
  margin-top: 6px;
}

/* GALLERY MASONRY */
.gallery-masonry {
  columns: 1;
  column-gap: 18px;
  margin: 38px auto 0 auto;
  max-width: 1100px;
  transition: max-height 0.65s, opacity 0.65s, margin 0.33s;
  overflow: hidden;
  opacity: 1;
  will-change: max-height, opacity;
}
@media (min-width: 600px) {
  .gallery-masonry { columns: 2; }
}
@media (min-width: 900px) {
  .gallery-masonry { columns: 3; }
}
@media (min-width: 1200px) {
  .gallery-masonry { columns: 4; }
}

.gallery-masonry.closed {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  transition: opacity 0.5s, max-height 0.7s cubic-bezier(.51,.82,.42,1.24), margin 0.25s;
  pointer-events: none;
}
.gallery-masonry.open {
  opacity: 1;
  max-height: 4000px;
  margin-top: 38px;
  pointer-events: auto;
}

.gallery-masonry-item {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  width: 100%;
  margin-bottom: 0px;
  border-radius: 0rem;
  box-shadow: 0 0px 0px #0002, 0 1px 0px #d8000033;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 
    transform 0.19s cubic-bezier(.29,.96,.48,1.04),
    box-shadow 0.22s cubic-bezier(.29,.96,.48,1.04),
    opacity 0.4s;
  opacity: 0;
  will-change: transform, opacity;
}
.gallery-masonry.open .gallery-masonry-item {
  opacity: 1;
  animation: masonryIn 0.7s cubic-bezier(.23,.82,.53,1.06) backwards;
}
@keyframes masonryIn {
  0% { opacity: 0; transform: translateY(48px) scale(0.97);}
  100% { opacity: 1; transform: none;}
}

.gallery-masonry-item:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow: 0 8px 40px #d8000033;
}
.gallery-masonry-item {
  transition: 
    transform 0.19s cubic-bezier(.29,.96,.48,1.04),
    box-shadow 0.22s cubic-bezier(.29,.96,.48,1.04),
    opacity 0.4s;
}

.gallery-masonry-item:hover {
  transform: translateY(-6px) scale(1.018);
  box-shadow: 0 12px 44px #d800003a;
  z-index: 3;
}

.gallery-masonry-item:active {
  transform: scale(0.97);
}

.gallery-modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(25, 20, 23, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.37s cubic-bezier(.51,.82,.42,1.24);
}
.gallery-modal:not(.hidden) {
  opacity: 1;
  pointer-events: all;
}
.gallery-modal-img {
  max-width: 93vw;
  max-height: 75vh;
  border-radius: 1.2rem;
  box-shadow: 0 12px 44px #d800005a, 0 2px 14px #0007;
  background: #fff;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.98) translateY(40px);
  transition: opacity 0.37s, transform 0.37s;
}
.gallery-modal:not(.hidden) .gallery-modal-img {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.gallery-modal-close {
  position: absolute;
  top: 2.5vw;
  right: 3vw;
  font-size: 2.5rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 900;
  z-index: 11;
  text-shadow: 0 2px 10px #000;
  transition: color 0.13s;
}
.gallery-modal-close:hover { color: #ff1859;}
.gallery-modal-arrow {
  position: absolute;
  top: 50%;
  font-size: 1.6rem;
  background: rgba(220,0,36,0.9);
  border: none;
  color: #fff;
  border-radius: 50%;
  padding: 0.38em 0.63em;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 10;
  box-shadow: 0 1px 8px #000a;
  transition: background 0.13s;
}
.gallery-modal-arrow.left { left: 2vw;}
.gallery-modal-arrow.right { right: 2vw;}
.gallery-modal-arrow:hover { background: #ff1859;}
.gallery-modal-caption {
  margin-top: 2.3rem;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .gallery-modal-arrow {
    font-size: 1.4rem;
    padding: 0.22em 0.33em;
    opacity: 0.78;
    background: rgba(220,0,36,0.72);
  }
  .gallery-modal-arrow.left { left: 2vw;}
  .gallery-modal-arrow.right { right: 2vw;}
}