html,
body {
  margin: 0;
  padding: 0;
  background-color: #eae0d5;
  /* Bloquear scroll horizontal */
  overflow-x: hidden;
  max-width: 100%;
}

/* Asegurar que todos los elementos respeten el ancho máximo */
* {
  box-sizing: border-box;
}

/* Prevenir desbordamiento horizontal en contenedores */
.container,
section,
div {
  max-width: 100%;
}

/* ===== Fuentes locales (ajusta nombres si cambian) ===== */
@font-face {
  font-family: "Great Vibes";
  src: url("./fonts/GreatVibes-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Andreas family (restored) */
@font-face {
  font-family: "Andreas";
  src: url("./fonts/Andreas.otf") format("opentype"),
    url("./fonts/Andreas.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Great Vibes";
  src: url("fonts/GreatVibes-Regular.ttf") format("truetype");
}
.font-stringline {
  font-family: "Great Vibes", cursive;
}

/* Clases utilitarias para usarlas en HTML */
.font-stringline {
  font-family: "Great Vibes", cursive;
}

.font-andreas {
  font-family: "Andreas", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
}

/* ===== Estado inicial: bloquear scroll mientras está el intro ===== */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.locked {
  overflow: hidden;
  height: 100vh;
} /* se quita al entrar */

/* ===== Intro de video a pantalla completa ===== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #000; /* por si el video tarda */
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.intro.fade-out {
  opacity: 0;
}

/* El video cubre todo el viewport */
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta sin deformar */
  object-position: center;
}
#portada-video iframe {
  display: block;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
}

/* Oscurecedor opcional para mejorar legibilidad del botón */
.intro-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.35)
  );
  pointer-events: none;
}

/* Botón de entrar */
.intro-cta {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: #c81e1e; /* rojo */
  color: #fff;
  font-family: "Andreas", sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.intro-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.intro-cta:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* ===== Contenido principal ===== */
main {
  background: #eae0d5;
}
@font-face {
  font-family: "Andreas";
  src: url("fonts/Andreas-Regular.otf") format("opentype"); /* o .ttf si es tu caso */
  font-weight: normal;
  font-style: normal;
}

.font-andreas {
  font-family: "Andreas", serif;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @keyframes slide-in-left {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-right {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .animate-slide-in-left {
    animation: slide-in-left 1.2s ease-out forwards;
  }

  .animate-slide-in-right {
    animation: slide-in-right 1.2s ease-out forwards;
  }
}
.dresscode-section {
  background-color: #eae0d5;
  padding: 40px 20px;
  font-family: "Andreas", serif;
}

.dresscode-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

.dresscode-image {
  flex: 1 1 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dresscode-image img {
  max-width: 100%;
  height: auto;
}

.dresscode-info {
  flex: 1 1 400px;
  padding: 20px;
  text-align: center;
}

.dresscode-subtitle {
  font-size: 28px;
  margin-bottom: 20px;
}

.dresscode-options {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.dresscode-item {
  text-align: center;
  flex: 1 1 45%;
}

.dresscode-item img {
  width: 100%;
  max-width: 120px;
  margin-bottom: 10px;
}

.dresscode-item p {
  margin: 0;
  font-size: 16px;
}

.dresscode-disclaimer {
  flex: 1 1 100%;
  margin-top: 30px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  padding: 10px 30px;
}

/* Glitch Effect Styles */
@font-face {
  font-family: "Courier Prime";
  src: url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap");
}

.glitch {
  font-family: "Courier New", "Courier Prime", monospace !important;
  position: relative;
  color: #eae0d5;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: "Courier New", "Courier Prime", monospace !important;
}

.glitch::before {
  animation: glitch-anim-1 0.4s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  opacity: 0.8;
}

.glitch::after {
  animation: glitch-anim-2 0.4s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  opacity: 0.8;
}

@keyframes glitch-anim-1 {
  0% {
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    transform: translate(-2px, -1px);
    text-shadow: 2px 0 #ff00de;
  }
  10% {
    clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%);
    transform: translate(1px, 0px);
    text-shadow: -2px 0 #00fffc;
  }
  20% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    transform: translate(-1px, 1px);
    text-shadow: 2px 0 #ff00de;
  }
  30% {
    clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%);
    transform: translate(0px, 1px);
    text-shadow: -1px 0 #00fffc;
  }
  40% {
    clip-path: polygon(0 40%, 100% 40%, 100% 45%, 0 45%);
    transform: translate(1px, -1px);
    text-shadow: 1px 0 #ff00de;
  }
  50% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    transform: translate(-1px, 0px);
    text-shadow: -2px 0 #00fffc;
  }
  60% {
    clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
    transform: translate(2px, 1px);
    text-shadow: 2px 0 #ff00de;
  }
  70% {
    clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
    transform: translate(-1px, -1px);
    text-shadow: -1px 0 #00fffc;
  }
  80% {
    clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
    transform: translate(0px, 1px);
    text-shadow: 1px 0 #ff00de;
  }
  90% {
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    transform: translate(1px, 0px);
    text-shadow: -2px 0 #00fffc;
  }
  100% {
    clip-path: polygon(0 35%, 100% 35%, 100% 40%, 0 40%);
    transform: translate(-2px, -1px);
    text-shadow: 2px 0 #ff00de;
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: polygon(0 65%, 100% 65%, 100% 70%, 0 70%);
    transform: translate(2px, 1px);
    text-shadow: -2px 0 #00fffc;
  }
  10% {
    clip-path: polygon(0 55%, 100% 55%, 100% 60%, 0 60%);
    transform: translate(-1px, 0px);
    text-shadow: 2px 0 #ff00de;
  }
  20% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    transform: translate(1px, -1px);
    text-shadow: -1px 0 #00fffc;
  }
  30% {
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    transform: translate(-2px, 1px);
    text-shadow: 1px 0 #ff00de;
  }
  40% {
    clip-path: polygon(0 25%, 100% 25%, 100% 35%, 0 35%);
    transform: translate(0px, -1px);
    text-shadow: -2px 0 #00fffc;
  }
  50% {
    clip-path: polygon(0 85%, 100% 85%, 100% 95%, 0 95%);
    transform: translate(1px, 0px);
    text-shadow: 2px 0 #ff00de;
  }
  60% {
    clip-path: polygon(0 5%, 100% 5%, 100% 15%, 0 15%);
    transform: translate(-1px, 1px);
    text-shadow: -1px 0 #00fffc;
  }
  70% {
    clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%);
    transform: translate(2px, -1px);
    text-shadow: 1px 0 #ff00de;
  }
  80% {
    clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%);
    transform: translate(-1px, 0px);
    text-shadow: -2px 0 #00fffc;
  }
  90% {
    clip-path: polygon(0 75%, 100% 75%, 100% 85%, 0 85%);
    transform: translate(0px, 1px);
    text-shadow: 2px 0 #ff00de;
  }
  100% {
    clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
    transform: translate(1px, -1px);
    text-shadow: -1px 0 #00fffc;
  }
}

/* Flicker effect */
@keyframes glitch-flicker {
  0%, 100% { opacity: 1; }
  5% { opacity: 0.85; }
  10% { opacity: 1; }
  15% { opacity: 0.9; }
  20% { opacity: 1; }
  25% { opacity: 0.95; }
  30% { opacity: 1; }
  35% { opacity: 0.85; }
  40% { opacity: 1; }
  45% { opacity: 0.9; }
  50% { opacity: 1; }
  55% { opacity: 0.95; }
  60% { opacity: 1; }
  65% { opacity: 0.85; }
  70% { opacity: 1; }
  75% { opacity: 0.9; }
  80% { opacity: 1; }
  85% { opacity: 0.95; }
  90% { opacity: 1; }
  95% { opacity: 0.85; }
}

.glitch-active {
  animation: glitch-flicker 0.3s linear;
}

/* Hide pseudo elements initially */
.glitch:not(.glitch-active)::before,
.glitch:not(.glitch-active)::after {
  display: none;
}