/* =========================================
   BASE CSS — Portafolio Juanita González
   ========================================= */

/* ── Body ── */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.8;
}

/* ── Contenedor principal ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}

/* ── Tipografía base ── */
h1 {
  font-size: var(--font-h1);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

h2 {
  font-size: var(--font-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h3 {
  font-size: var(--font-h3);
  font-weight: var(--font-weight-light);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

p {
  font-size: var(--font-body);
  font-weight: var(--font-weight-light);
  line-height: 1.8;
  color: var(--color-text);
  max-width: 65ch;
}

/* ── Links ── */
a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

/* ── Caption ── */
.caption {
  font-size: var(--font-caption);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* ── Etiqueta de sección (LABEL) ── */
.section-label {
  font-size: var(--font-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2em;
  color: var(--color-muted);
  text-transform: uppercase;
}

/* ── Línea divisoria ── */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  border: none;
}

/* ── Placeholder de imagen ── */
.img-placeholder {
  background-color: #EBEBEB;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.img-placeholder--alt1 { background-color: #EBEBEB; }
.img-placeholder--alt2 { background-color: #E5E5E5; }
.img-placeholder--alt3 { background-color: #F0F0F0; }

.img-placeholder__label {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  color: #AAAAAA;
  text-align: center;
  padding: 16px;
  user-select: none;
}

/* ── Animación de entrada de página ── */
.page-content {
  animation: fadeIn 0.4s ease 0.1s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 40px var(--gutter-desktop);
  text-align: center;
}

.site-footer p {
  font-size: 12px;
  font-weight: var(--font-weight-light);
  color: var(--color-muted);
  letter-spacing: 0.05em;
  max-width: none;
}