/* =========================================
   main.css — Amulen Creative Studio
   ========================================= */

@import url('/css/fonts.css');
@import url('/css/components/loader.css');
@import url('/css/components/navbar.css');
@import url('/css/components/hero.css');
@import url('/css/components/roots.css');
@import url('/css/components/services.css');
@import url('/css/components/case-study.css');
@import url('/css/components/process.css');
@import url('/css/components/about.css');
@import url('/css/components/contact.css');
@import url('/css/components/footer.css');
@import url('/css/components/page-inner.css');
@import url('/css/components/fotos.css');
@import url('/css/components/wave-marquee.css');
@import url('/css/components/ig-carousel.css');
@import url('/css/components/section-wave.css');

/* =========================================
   Variables globales
   ========================================= */
:root {
  /* Colores */
  --color-tierra:  #625142;
  --color-crema:   #efeae4;
  --color-dorado:  #d4b56a;
  --color-cielo:   #aecae8;

  /* Tipografías */
  --font-display: 'TAN Angleton', Georgia, serif;
  --font-body:    'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  'Yellowtail', cursive;

  /* Base */
  --text-base:   18px;
  --line-height: 1.6;
}

/* =========================================
   Reset mínimo
   ========================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
video {
  max-width: 100%;
  display: block;
}

/* =========================================
   Tipografía base
   ========================================= */
html {
  font-size: var(--text-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--color-tierra);
  background-color: var(--color-crema);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================
   Utilidad — reveal al scroll
   ========================================= */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

/* Variantes direccionales — sobreescriben el transform inicial */
.js-reveal--left  { transform: translateX(-44px); }
.js-reveal--right { transform: translateX(44px); }

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Offset de scroll para navbar fija */
section[id] {
  scroll-margin-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-reveal--left,
  .js-reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   Accesibilidad — movimiento reducido
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}