:root {
  --admaca-bg: #11100d;
  --admaca-bg-soft: #15130f;
  --admaca-panel: #211e19;
  --admaca-panel-high: #2b2720;
  --admaca-stone: #cfc8b6;
  --admaca-ivory: #eee7d8;
  --admaca-gold: #f2ca50;
}

html {
  background: var(--admaca-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--admaca-ivory);
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--admaca-bg);
  background-image:
    linear-gradient(180deg, rgba(242, 202, 80, 0.08) 0, rgba(242, 202, 80, 0) 18rem),
    linear-gradient(90deg, rgba(238, 231, 216, 0.04), rgba(238, 231, 216, 0) 34%, rgba(153, 144, 124, 0.05) 68%, rgba(153, 144, 124, 0)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 7.5rem);
  background-attachment: scroll;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
.font-headline,
.font-display {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
}

.font-body,
.font-label {
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#root {
  min-height: 100vh;
  isolation: isolate;
}

.bg-background {
  background-color: var(--admaca-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(242, 202, 80, 0.055), rgba(17, 16, 13, 0) 20rem),
    linear-gradient(90deg, rgba(238, 231, 216, 0.035), rgba(238, 231, 216, 0) 36%);
}

.bg-surface {
  background-color: var(--admaca-bg-soft) !important;
  background-image: linear-gradient(180deg, rgba(238, 231, 216, 0.035), rgba(21, 19, 15, 0) 18rem);
}

.bg-surface-container {
  background-color: #1f1c17 !important;
}

.bg-surface-container-high {
  background-color: var(--admaca-panel-high) !important;
}

.bg-surface-container-low {
  background-color: #181510 !important;
}

section.bg-surface-container,
footer.bg-surface-container {
  background-image:
    linear-gradient(180deg, rgba(242, 202, 80, 0.045), rgba(31, 28, 23, 0) 17rem),
    linear-gradient(90deg, rgba(238, 231, 216, 0.03), rgba(238, 231, 216, 0));
}

.hero-elegant-shade {
  background:
    linear-gradient(90deg, rgba(17, 16, 13, 0.94) 0%, rgba(17, 16, 13, 0.66) 44%, rgba(17, 16, 13, 0.82) 100%),
    linear-gradient(180deg, rgba(242, 202, 80, 0.18), rgba(242, 202, 80, 0) 36%, rgba(17, 16, 13, 0.96) 100%);
}

.seccion-bordeada {
  border-bottom: 1px solid rgba(238, 231, 216, 0.1);
}

@media (max-width: 768px) {
  html {
    font-size: 100%;
  }

  body,
  .bg-background,
  .bg-surface {
    background-image:
      linear-gradient(180deg, rgba(242, 202, 80, 0.06), rgba(17, 16, 13, 0) 14rem),
      linear-gradient(90deg, rgba(238, 231, 216, 0.026), rgba(238, 231, 216, 0));
  }

  .hero-elegant-shade {
    background:
      linear-gradient(180deg, rgba(17, 16, 13, 0.76), rgba(17, 16, 13, 0.48) 38%, rgba(17, 16, 13, 0.96) 100%),
      linear-gradient(90deg, rgba(17, 16, 13, 0.9), rgba(17, 16, 13, 0.34));
  }
}