/* Tipografía premium */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;500;600&display=swap');

:root {

  --gold: #FFD700;

  --gold-soft: #fff8b0;

  --black: #0a0a0a;

  --dark-gray: #1a1a1a;

  --mid-gray: #2a2a2a;

  --white: #ffffff;

}

/* Base */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {

  font-family: 'Poppins', sans-serif;

  background-color: var(--black);

  color: var(--white);

  line-height: 1.6;

}

/* Botón dorado */

.btn-gold {

  display: inline-block;

  background: linear-gradient(45deg, var(--gold), var(--gold-soft));

  color: var(--black);

  border: none;

  padding: 12px 24px;

  font-weight: 600;

  text-transform: uppercase;

  border-radius: 30px;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);

  text-decoration: none;

}

.btn-gold:hover {

  background: #fff;

  color: var(--gold);

  box-shadow: 0 0 24px var(--gold);

}

/* Secciones */

.section {

  padding: 60px 20px;

  background: linear-gradient(180deg, var(--dark-gray) 0%, var(--mid-gray) 100%);

  border-top: 1px solid rgba(255, 215, 0, 0.25);

  border-bottom: 1px solid rgba(255, 215, 0, 0.25);

}

.section h2 {

  font-family: 'Playfair Display', serif;

  font-size: 2.2rem;

  color: var(--gold);

  text-align: center;

  margin: 0 0 20px;

  text-shadow: 0 0 14px rgba(255, 215, 0, 0.5);

}

.section-subtitle {

  text-align: center;

  color: #cfcfcf;

  margin-bottom: 30px;

}

/* Hero */

.hero-black {

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  background: radial-gradient(circle at center, #111 0%, #000 100%);

  position: relative;

}

/* Detalles dorados en el fondo */

.hero-black::before {

  content: "";

  position: absolute;

  inset: 0;

  background: repeating-radial-gradient(circle at top left,

    rgba(255, 215, 0, 0.15) 0px,

    transparent 80px);

  opacity: 0.4;

}

.hero-overlay-box {

  position: relative;

  z-index: 1;

  background: rgba(0,0,0,0.6); /* cuadro transparente */

  border: 2px solid var(--gold);

  border-radius: 12px;

  padding: 40px;

  text-align: center;

  max-width: 600px;

  box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);

}

.hero-overlay-box h1 {

  font-family: 'Playfair Display', serif;

  font-size: 3rem;

  color: var(--gold);

  margin-bottom: 15px;

  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);

}

.hero-overlay-box p {

  font-size: 1.2rem;

  color: #e9e9e9;

  margin-bottom: 20px;

}

.btn-gold {

  display: inline-block;

  background: var(--gold);

  color: #000;

  padding: 12px 24px;

  border-radius: 6px;

  font-weight: bold;

  text-decoration: none;

  transition: background 0.3s ease;

}

.btn-gold:hover {

  background: #e6c200;

}
 

/* Carrusel */

.carrusel { position: relative; }

.carousel {

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  gap: 18px;

  padding: 12px 10px;

}

.carousel::-webkit-scrollbar {

  height: 8px;

}

.carousel::-webkit-scrollbar-thumb {

  background: rgba(255, 215, 0, 0.4);

  border-radius: 8px;

}

.slide { flex: none; scroll-snap-align: center; }

.carousel img {

  width: 300px;

  height: 200px;

  object-fit: cover;

  border-radius: 12px;

  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);

  border: 1px solid rgba(255, 215, 0, 0.25);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.carousel img:hover {

  transform: scale(1.05);

  box-shadow: 0 0 22px rgba(255, 215, 0, 0.6);

}

.carousel-controls {

  display: flex;

  justify-content: center;

  gap: 16px;

  margin-top: 14px;

}

.carousel-btn {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  border: 1px solid rgba(255, 215, 0, 0.4);

  background: linear-gradient(45deg, var(--dark-gray), var(--mid-gray));

  color: var(--gold);

  cursor: pointer;

  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.carousel-btn:hover {

  transform: scale(1.08);

  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);

}

/* Quiénes somos */

.quienes-somos { max-width: 1000px; margin: 0 auto; }

.quienes-somos p { text-align: center; color: #dcdcdc; }

.qs-grid {

  margin-top: 24px;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

}

.qs-item {

  background: linear-gradient(180deg, #121212, #1e1e1e);

  border: 1px solid rgba(255, 215, 0, 0.25);

  border-radius: 12px;

  padding: 18px;

  text-align: center;

}

.qs-item h3 {

  color: var(--gold);

  margin: 0 0 8px;

  font-weight: 600;

}

/* Servicios */

.servicios { max-width: 1200px; margin: 0 auto; }

.services-grid {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 16px;

}

@media (max-width: 1100px) {

  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

@media (max-width: 700px) {

  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

.service-card {

  margin: 0;

  background: linear-gradient(180deg, #121212, #1e1e1e);

  border: 1px solid rgba(255, 215, 0, 0.25);

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.service-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);

}

.service-card img {

  width: 100%;

  height: 180px;

  object-fit: cover;

  display: block;

}

.service-card figcaption {

  padding: 10px 12px;

  color: #e9e9e9;

  text-align: center;

}

/* Formulario de contacto */

.contacto .contact-form {

  display: flex;

  flex-direction: column;

  gap: 14px;

  max-width: 520px;

  margin: 0 auto;

}

.contact-form input, .contact-form textarea {

  padding: 12px;

  border: 2px solid rgba(255, 215, 0, 0.45);

  border-radius: 10px;

  background-color: var(--dark-gray);

  color: var(--white);

  font-family: 'Poppins', sans-serif;

  outline: none;

  transition: box-shadow 0.2s ease, border-color 0.2s ease;

}

.contact-form input::placeholder, .contact-form textarea::placeholder { color: #bdbdbd; }

.contact-form input:focus, .contact-form textarea:focus {

  box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);

  border-color: var(--gold);

}

/* Íconos sociales vectoriales */

.social-buttons {

  margin-top: 24px;

  display: flex;

  justify-content: center;

  gap: 22px;

}

.social-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  color: var(--gold);

  background-color: var(--dark-gray);

  width: 46px;

  height: 46px;

  border-radius: 50%;

  text-decoration: none;

  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);

  border: 1px solid rgba(255, 215, 0, 0.3);

  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;

}

.social-icon:hover {

  transform: scale(1.12);

  box-shadow: 0 0 18px rgba(255, 215, 0, 0.55);

  background-color: var(--gold);

  color: var(--black);

}

/* Footer */

footer {

  background-color: var(--black);

  padding: 28px 16px;

  text-align: center;

  border-top: 1px solid rgba(255, 215, 0, 0.25);

}

.footer-top { margin-bottom: 10px; }

.footer-copy { color: #bdbdbd; margin: 8px 0 0; }
.services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px;
}
.services img {

  width: 100%;

  max-width: 300px;

  height: 200px;

  object-fit: cover;

  border-radius: 10px;

  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);

}
 .navbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #0a0a0a;

  padding: 15px 30px;

  border-bottom: 1px solid rgba(255, 215, 0, 0.3);

}

.navbar .logo a {

  font-family: 'Playfair Display', serif;

  font-size: 1.6rem;

  color: var(--gold);

  text-decoration: none;

}

.nav-links {

  list-style: none;

  display: flex;

  gap: 25px;

  margin: 0;

  padding: 0;

}

.nav-links li a {

  color: #fff;

  text-decoration: none;

  font-weight: 500;

  transition: color 0.3s ease;

}

.nav-links li a:hover {

  color: var(--gold);

}
 .services-diff-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 25px;

  margin-top: 30px;

}

.service-card {

  position: relative;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 0 18px rgba(255, 215, 0, 0.3);

  transition: transform 0.3s ease;

}

.service-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

  display: block;

}

.service-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5);

}

.service-card .overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 15px;

  color: #fff;

  text-align: center;

  background: rgba(0,0,0,0.6);

}

.service-card .overlay h3 {

  margin: 8px 0;

  font-size: 1.3rem;

  color: var(--gold);

}

.service-card .overlay i {

  font-size: 28px;

  margin-bottom: 8px;

  color: var(--gold);

}

/* Estilos únicos por servicio */

.buffet img {

  filter: brightness(1.1) saturate(1.2);

}

.comparsa img {

  filter: hue-rotate(330deg) contrast(1.1);

}

.pantallas img {

  filter: hue-rotate(30deg) contrast(1.2);

}

.sonido img {

  filter: grayscale(0.2) saturate(1.3);

}
 
 .mensaje-exito{
    margin-top:20px;
    padding:15px;
    background:#d4edda;
    color:#155724;
    border:1px solid #c3e6cb;
    border-radius:8px;
    text-align:center;
    font-weight:bold;
}