:root {
  --blanco-logo: #FFFFFF;
  --crema: #FBF7F3;
  --crema-luz: #FDFBF8;
  --crema-carta: #FEFCFA;
  --crema-alt: #F4EEE6;
  --oliva: #23302B;
  --oliva-suave: #57655F;
  --dorado: #A98F63;
  --dorado-linea: rgba(169, 143, 99, 0.35);
  --dorado-suave: rgba(169, 143, 99, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--crema);
  color: var(--oliva);
  font-family: 'Inter', sans-serif;
}

/*
 * El archivo del logotipo tiene fondo blanco. El encabezado usa ese mismo
 * blanco y el inicio de la portada lo funde poco a poco con el crema de la web,
 * de modo que el logo no se perciba como una imagen rectangular pegada encima.
 */
.site-header {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(169, 143, 99, 0.14);
  box-shadow: 0 1px 0 rgba(35, 48, 43, 0.02),
              0 12px 32px rgba(35, 48, 43, 0.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
  position: relative;
}

.site-logo-image {
  background-color: transparent;
}

.hero-intro {
  background:
    radial-gradient(circle at 50% 12%, rgba(169, 143, 99, 0.055), transparent 35%),
    linear-gradient(180deg, var(--blanco-logo) 0%, var(--crema-luz) 22%, var(--crema) 68%);
}

.site-footer {
  background: linear-gradient(180deg, var(--crema-luz) 0%, var(--blanco-logo) 72%);
  border-color: rgba(169, 143, 99, 0.18);
}

@media (max-width: 767px) {
  .site-header {
    box-shadow: 0 1px 0 rgba(35, 48, 43, 0.035),
                0 8px 22px rgba(35, 48, 43, 0.04);
  }

  .hero-intro {
    background: linear-gradient(180deg, var(--blanco-logo) 0%, var(--crema-luz) 18%, var(--crema) 58%);
  }
}

h1, h2, h3, .font-serif {
  font-family: 'Fraunces', serif;
}

/* Animaciones de Reveal */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Transición para ocultar/mostrar paneles */
.hidden-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}