/* ==========================================================================
   global.css — Tipografía base, semánticos y utilidades
   ========================================================================== */

/* --- Fuente --- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  color: var(--ink);
  background-color: var(--paper);
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-tight); }

p {
  color: var(--ink-2);
  max-width: 65ch;
  line-height: var(--leading-body);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
a:hover { opacity: 0.72; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Layout helpers --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Alternancia de fondos entre secciones */
.section--paper  { background-color: var(--paper); }
.section--canvas { background-color: var(--canvas); }
.section--dark   { background-color: var(--ink-deep); color: var(--paper); }

section {
  padding-block: var(--section-gap);
}

/* --- Eyebrow (etiqueta pequeña sobre los títulos) --- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

/* --- CTA link estilo texto --- */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  transition: gap var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.cta-link:hover {
  opacity: 1;
  gap: var(--space-3);
}

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn--primary {
  background-color: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  opacity: 1;
}

.btn--secondary {
  background-color: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn--secondary:hover {
  background-color: var(--accent-light);
  opacity: 1;
}

.btn--whatsapp {
  background-color: var(--wa-green);
  color: #fff;
  font-size: var(--text-body);
  padding: var(--space-4) var(--space-8);
}
.btn--whatsapp:hover {
  background-color: var(--wa-green-hover);
  opacity: 1;
}

.btn--lg {
  font-size: var(--text-body);
  padding: var(--space-4) var(--space-8);
}

/* --- Badge / pill info --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 500;
  background-color: var(--accent-light);
  color: var(--accent-dark);
}

/* --- Imagen placeholder (mientras no hay foto real) --- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  color: var(--accent);
  font-size: var(--text-caption);
  font-weight: 500;
}

.img-placeholder--tall { aspect-ratio: 3/4; }
.img-placeholder--square { aspect-ratio: 1/1; }
.img-placeholder--wide { aspect-ratio: 16/9; }

/* --- Scroll reveal --- */
.reveal__item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.reveal__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger entre hermanos */
.reveal__item:nth-child(1) { transition-delay: 0ms; }
.reveal__item:nth-child(2) { transition-delay: 60ms; }
.reveal__item:nth-child(3) { transition-delay: 120ms; }
.reveal__item:nth-child(4) { transition-delay: 180ms; }
.reveal__item:nth-child(5) { transition-delay: 240ms; }
.reveal__item:nth-child(6) { transition-delay: 300ms; }

/* --- Grid de 12 columnas helper --- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

/* --- Divider --- */
.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin-block: var(--space-12);
}

/* --- Screen reader only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}