/* ============================================================
   MatuFilms — global.css
   Tokens, reset, tipografía y componentes base.
   Se carga en TODAS las páginas del sitio (landing, blog, recursos,
   thank-you pages, privacidad, 404) para que compartan la misma
   identidad visual sin tener que rediseñar cada página por separado.

   Los estilos exclusivos de la landing (hero, marquee, filmstrip,
   etc.) NO van aquí — van en landing.css. Los estilos de artículos
   de blog / recursos van en content.css.
   ============================================================= */

:root{
  --ivory: #F2EDE2;
  --ink: #29241E;
  --terracotta: #786242;
  --rose: #D9C9A8;
  --stone: #EAE3D3;
  --gray: #6B5F4E;
  --ff-display: 'Bodoni Moda', serif;
  --ff-script: 'Italianno', cursive;
  --ff-body: 'Archivo', sans-serif;
  --ff-mono: 'Space Mono', monospace;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }

.wrap{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px){ .wrap{ padding: 0 56px; } }
.wrap-narrow{ max-width: 900px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px){ .wrap-narrow{ padding: 0 56px; } }

h1,h2,h3{ font-family: var(--ff-display); font-weight: 500; line-height: 1.06; }

.eyebrow{
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 16px;
  display: block;
}

/* ============ BOTONES (compartidos) ============ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--terracotta);
  color: var(--ivory);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 30px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 18px rgba(120,98,66,0.25);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(120,98,66,0.35); }
.btn:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

.btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px;
  transition: color .25s ease, border-color .25s ease;
  background: none; cursor: pointer;
}
.btn-outline:hover{ color: var(--terracotta); border-color: var(--terracotta); }

.microcopy{ font-size: 13px; color: var(--gray); margin-top: 12px; }

section{ padding: 88px 0; }
@media (min-width: 768px){ section{ padding: 150px 0; } }

.pull{ font-family: var(--ff-display); font-style: italic; font-weight: 500; line-height: 1.18; }

/* ============ REVEAL (animación de entrada, usada en varias páginas) ============ */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }

/* ============ TOPBAR (compartido) ============ */
.topbar{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  background: rgba(242,237,226,0.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(41,36,30,0.08);
}
@media (min-width: 768px){ .topbar{ padding: 20px 56px; } }
.topbar .logo{ height: 30px; width: auto; display: block; }
.topbar-links{ display:flex; align-items:center; gap:24px; }
.topbar-links a:not(.btn){
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Páginas de contenido (blog/recursos) usan una topbar simple, no-fixed */
.topbar-static{ position: static; background: transparent; backdrop-filter: none; }

.back-link{
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px;
  transition: color .25s ease, border-color .25s ease;
}
.back-link:hover{ color: var(--terracotta); border-color: var(--terracotta); }

/* ============ FOOTER (compartido) ============ */
footer.site-footer{
  padding: 48px 24px; text-align:center;
  display:flex; flex-direction:column; gap: 10px; align-items:center;
  background: var(--ink); color: var(--ivory);
}
footer.site-footer .logo{ height: 44px; width: auto; display: block; margin: 0 auto; }
footer.site-footer a{ color: var(--rose); font-size: 14px; }
footer.site-footer .legal{ font-size: 12px; color: rgba(242,237,226,0.5); margin-top: 6px; }

/* ============ PÁGINAS SIMPLES (privacy, 404, gracias, pago) ============ */
.simple-page{ min-height: 70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 140px 24px 100px; }
.simple-page .box{ max-width: 620px; }
.simple-page h1{ font-size: clamp(30px,5vw,48px); font-style: italic; margin-bottom: 18px; }
.simple-page p{ color: var(--gray); font-size: 17px; margin-bottom: 28px; }