/* ============================================================
   base.css — variables, reset y estilos globales
   Base tipográfica: 10px (1rem = 10px). Todas las medidas en rem.
   ============================================================ */

:root {
  /* La paleta se completa desde el panel: --c-primario y --c-acento se inyectan en la cabecera */
  --c-primario: #9a4a1e;
  --c-acento: #2f5d50;
  --c-primario-osc: color-mix(in srgb, var(--c-primario) 80%, black);
  --c-tinta: #241b12;
  --c-papel: #f7f1e8;
  --c-papel-2: #efe6d8;
  --c-blanco: #fffdf9;
  --c-linea: rgba(36, 27, 18, 0.16);
  --c-error: #9c3425;
  --fuente-titulos: Georgia, "Times New Roman", serif;
  --fuente-texto: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radio: 0.4rem;
  --sombra: 0 0.2rem 1.4rem rgba(36, 27, 18, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 10px; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--c-tinta);
  background: var(--c-papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--fuente-titulos); line-height: 1.15; margin: 0 0 1.6rem; }
p { margin: 0 0 1.4rem; }
img { max-width: 100%; }
a { color: var(--c-primario); }
a:hover { color: var(--c-primario-osc); }
::selection { background: var(--c-primario); color: #fff; }
:focus-visible { outline: 0.2rem solid var(--c-primario); outline-offset: 0.2rem; }
input, textarea, select, button { accent-color: var(--c-primario); }

/* ---------- Utilidades propias ---------- */

.contenedor { max-width: 118rem; margin-inline: auto; padding-inline: 2.4rem; }
.centrado { text-align: center; margin-top: 4rem; }
.salto-contenido {
  position: absolute; left: -999rem;
  background: var(--c-tinta); color: #fff; padding: 1rem 1.6rem; z-index: 100;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

.seccion { padding: 8rem 0; }
.seccion--alterna { background: var(--c-papel-2); }

.titulo-seccion { font-size: 3.4rem; margin-bottom: 3.6rem; }
.titulo-seccion::after {
  content: ""; display: block; width: 6rem; height: 0.3rem;
  background: var(--c-primario); margin-top: 1.4rem;
}

/* Animación de aparición al hacer scroll (controlada desde main.js) */
[data-aparecer] { opacity: 0; transform: translateY(2.4rem); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-aparecer].aparecer--visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-aparecer] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Ajuste de componentes de Bootstrap al rem de 10px ---------- */

.btn { font-size: 1.5rem; }
.btn-primary {
  --bs-btn-bg: var(--c-primario); --bs-btn-border-color: var(--c-primario);
  --bs-btn-hover-bg: var(--c-primario-osc); --bs-btn-hover-border-color: var(--c-primario-osc);
  --bs-btn-active-bg: var(--c-primario-osc); --bs-btn-active-border-color: var(--c-primario-osc);
}
.modal-content { border-radius: 0.6rem; border: none; }
.modal-header, .modal-footer { border-color: var(--c-linea); }
.modal-title { font-family: var(--fuente-titulos); font-size: 2.2rem; }