/* ==========================================================================
   ALC — ESTILOS BASE Y TIPOGRAFÍA EDITORIAL (BLANCO PROTAGONISTA)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:wght@200;300;400;500;600&display=swap');

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: #FAF8F5;
  color: #1A1615;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.02em;
  background: var(--grad-luminous-base);
  color: #1A1615;
  overflow-x: hidden;
  position: relative;
}

/* --- SCROLLBAR DE LUJO --- */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: var(--color-ivory);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--color-gold-dark), var(--color-garnet), var(--color-gold-dark));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* --- SELECCIÓN DE TEXTO --- */
::selection {
  background-color: var(--color-garnet);
  color: #FFFFFF;
}

/* --- TIPOGRAFÍAS Y JERARQUÍA --- */
h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif-editorial);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.03em;
  color: #120E0D;
}

h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 300;
}

h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 300;
}

h3 {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

p {
  color: #423835;
  font-size: 1.05rem;
}

.script-accent {
  font-family: var(--font-script);
  font-size: 1.7em;
  color: var(--color-garnet);
  font-weight: normal;
  display: inline-block;
}

/* --- CONTENEDORES --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 768px) {
  .container {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* --- SECCIONES Y ATMÓSFERAS --- */
section {
  position: relative;
  padding: var(--section-padding) 0;
  overflow: hidden;
}

/* Lienzo Blanco Marfil (Protagonista) */
.section-light {
  background-color: var(--color-ivory);
  color: #1A1615;
}

.section-pure-white {
  background-color: var(--color-white);
  color: #1A1615;
}

/* Momentos de Intensidad: Enmarcado en Degradado Carbón y Granate */
.section-dark-ritual {
  background: linear-gradient(165deg, #0D0B0A 0%, #1c1416 50%, #0D0B0A 100%);
  color: var(--color-ivory);
}

.section-dark-ritual h1,
.section-dark-ritual h2,
.section-dark-ritual h3 {
  color: #FFFFFF;
}

.section-dark-ritual p {
  color: rgba(250, 248, 244, 0.85);
}

.section-garnet-gradient {
  background: linear-gradient(135deg, #3D0511 0%, #6E0F23 50%, #1E0309 100%);
  color: var(--color-ivory);
}

/* --- CLASES DE SÍMBOLOS OFICIALES Y FILTROS --- */
.symbol-img {
  display: inline-block;
  object-fit: contain;
  transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

.symbol-dark {
  filter: none;
}

.symbol-white {
  filter: brightness(0) invert(1);
}

.symbol-gold {
  filter: invert(72%) sepia(35%) saturate(700%) hue-rotate(6deg) brightness(95%) contrast(90%);
}

.symbol-garnet {
  filter: invert(13%) sepia(85%) saturate(3800%) hue-rotate(330deg) brightness(85%) contrast(105%);
}

/* Separadores Ornamentales */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
}

.ornament-line {
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.ornament-icon {
  height: 26px;
  width: auto;
  opacity: 0.9;
}

/* Patrón de la Corona a baja opacidad (5-8%) */
.pattern-crown-light {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/corona-alc.png');
  background-size: 140px 100px;
  background-repeat: repeat;
  opacity: 0.035;
  pointer-events: none;
}

.pattern-crown-dark {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/corona-alc.png');
  background-size: 140px 100px;
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
  filter: brightness(0) invert(1);
}