@import "tailwindcss";

@theme {
  --color-gold: #d4af37;
  --color-wine: #800d08;
  --color-ink: #1f2937;
  --color-cream: #f8f5ec;
  --shadow-soft: 0 10px 35px rgba(0, 0, 0, 0.08);
}

/* Degradado global: recorre todo el body; las secciones de contenido sin fondo lo dejan ver. El pie sigue con su propio fondo en HTML. */
@layer base {
  html {
    min-height: 100%;
    /* Anclas (#servicios, etc.): no tapar títulos bajo el header sticky */
    scroll-padding-top: 5.5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    min-height: 100%;
    background-color: var(--color-cream);
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-wine) 7%, var(--color-cream)) 0%,
      color-mix(in srgb, var(--color-wine) 3.5%, var(--color-cream)) 7%,
      var(--color-cream) 12%,
      #f9f5ee 18%,
      #faf7f1 26%,
      #fffcf8 34%,
      #fefefd 42%,
      #faf9f6 50%,
      #f9f6ef 58%,
      var(--color-cream) 66%,
      #f4efe6 74%,
      var(--color-cream) 84%,
      var(--color-cream) 100%
    );
  }
}

/* Línea decorativa dorada entre secciones */
@layer components {
  .section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
  }

  .section-divider__arm {
    height: 2px;
    flex: 1 1 0;
    max-width: min(20rem, 42vw);
    border-radius: 9999px;
  }

  .section-divider__arm--left {
    background: linear-gradient(90deg, transparent, var(--color-gold));
  }

  .section-divider__arm--right {
    background: linear-gradient(90deg, var(--color-gold), transparent);
  }

  .section-divider__gem {
    width: 0.45rem;
    height: 0.45rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--color-gold);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--color-gold) 28%, transparent),
      0 0 12px color-mix(in srgb, var(--color-gold) 35%, transparent);
  }
}