:root {
    --color-blanco: #ffffff;
    --color-negro: #121212;
    --color-gris: #e0e0e0;
    --color-verde: #456344;        /* Verde oscuro - Opacidad 30%*/
    --color-azul: #32476F;        /* Azul oscuro - Opacidad 80%*/
    --color-amarillo: #F1D74B;        /* Amarillo - Opacidad 100%*/
    --color-rosa: #C593AE;        /* Rosa - Opacidad 100%*/
    --color-celeste: #C2CEE4;        /* Celeste - Opacidad 15%*/
}

@font-face {
  font-family: 'AlexanderLettering';
  src: url('../assets/fonts/AlexanderLettering.woff2') format('woff2');
  src: url('../assets/fonts/AlexanderLettering.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Joliet';
  src: url('../assets/fonts/Joliet-Regular.woff2') format('woff2');
  src: url('../assets/fonts/Joliet-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Coterie';
  src: url('../assets/fonts/coterie-regular.woff2') format('woff2');
  src: url('../assets/fonts/coterie-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Breathing';
  src: url('../assets/fonts/BreathingReg.woff2') format('woff2');
  src: url('../assets/fonts/BreathingReg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-blanco);
  background-image: url(../assets/img/fondo.png);
  color: var(--color-texto);
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  overflow-x: hidden;
}

html {
    font-family: 'Lato', sans-serif;
    scroll-behavior: smooth;
}

h1 {
  font-family: 'Great Vibes', cursive;
  font-size: 48px;
  color: var(--color-acento);
  margin-bottom: 10px;
}

h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--color-texto);
}

a, button {
    transition: all 0.3s ease;
}

button, .btn {
  background-color: var(--color-verde);
  color: var(--color-blanco);
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

button:hover {
  transform: scale(1.05);
}

section {
  padding: 60px 20px;
  margin: 0 auto;
  max-width: 800px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animación base */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Elementos a animar */
.animar-entrada-stagger > * {
  opacity: 0;
  animation: fadeInSlideUp 0.8s ease-out forwards;
}

/* Delay escalonado */
.animar-entrada-stagger > *:nth-child(1) { animation-delay: 0.2s; }
.animar-entrada-stagger > *:nth-child(2) { animation-delay: 0.4s; }
.animar-entrada-stagger > *:nth-child(3) { animation-delay: 0.6s; }
.animar-entrada-stagger > *:nth-child(4) { animation-delay: 0.8s; }
.animar-entrada-stagger > *:nth-child(5) { animation-delay: 1s; }
.animar-entrada-stagger > *:nth-child(6) { animation-delay: 1.2s; }
.animar-entrada-stagger > *:nth-child(7) { animation-delay: 1.4s; }
.animar-entrada-stagger > *:nth-child(8) { animation-delay: 1.6s; }
.animar-entrada-stagger > *:nth-child(9) { animation-delay: 1.8s; }