/* ========== RESET ========== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== PAGE ========== */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #233541;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== LANDING ========== */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  width: 100%;
}

/* ========== 1. LOGO — escudo ========== */
.logo-wrapper {
  margin-bottom: 14px;
}

.logo {
  width: clamp(70px, 8vw, 100px);
  height: auto;
  opacity: 0;
  transform: scale(0.85);
  animation: zoomSutil 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}

@keyframes zoomSutil {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== 2. SOL NACIENTE — imagen PNG ========== */
.name-wrapper {
  margin-bottom: 14px;
}

.name-img {
  width: clamp(207px, 29.4vw, 364px);
  height: auto;
  opacity: 0;
  animation: fadeSutil 1.4s ease 1.6s forwards;
}

@keyframes fadeSutil {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ========== 3. CASAS DE CAMPO — texto ========== */
.subtitle {
  font-family: 'Gotham', 'Montserrat', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: clamp(0.65rem, 1.6vw, 0.95rem);
  color: #D88255;
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-25px);
  animation: slideRight 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.6s forwards;
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-25px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========== FOOTER ========== */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  font-family: 'Gotham', 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.footer a {
  color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #D88255;
}

.footer-sep {
  opacity: 0.3;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  .logo {
    width: 60px;
  }

  .name-img {
    width: 173px;
  }

  .subtitle {
    letter-spacing: 4px;
  }

  .footer {
    flex-direction: column;
    gap: 4px;
    font-size: 0.5rem;
    letter-spacing: 2px;
    padding: 12px 16px;
  }

  .footer-sep {
    display: none;
  }
}