/* =====================================================================
   CELTIC — ESTILOS BASE
   ---------------------------------------------------------------------
   Reglas generales que valen para todo el sitio: cómo se ve el texto,
   los títulos, los enlaces, las imágenes y el "contenedor" que centra
   el contenido. Se apoya en las variables de variables.css.
   ===================================================================== */

/* Reinicio suave: saca los márgenes raros que traen los navegadores
   por defecto y hace que los tamaños se calculen de forma pareja. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* al saltar a una sección, se desliza suave */
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: 1.125rem;      /* texto un poco más grande, estilo editorial */
  line-height: 1.65;        /* aire entre renglones para lectura cómoda */
  -webkit-font-smoothing: antialiased;
}

/* ---------- Títulos ---------- */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--color-principal);
  line-height: 1.2;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: 0.06em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: 0.04em; }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h4 { font-size: 1.15rem; }

/* "clamp" hace que el título sea más chico en el celular y más grande
   en la compu, automáticamente. No hay que hacer nada. */

p { margin-bottom: var(--espacio-3); }

/* ---------- Enlaces ---------- */
a {
  color: var(--color-secundario-oscuro);
  text-decoration: none;
  transition: color var(--transicion);
}
a:hover { color: var(--color-secundario); }

/* ---------- Imágenes ---------- */
img {
  max-width: 100%;  /* nunca se desbordan de su espacio */
  height: auto;
  display: block;
}

/* ---------- Contenedor ----------
   Caja invisible que centra el contenido y le deja aire a los costados,
   sobre todo importante en el celular. */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding-left: var(--espacio-3);
  padding-right: var(--espacio-3);
}

/* ---------- Ayudas de texto ---------- */
.texto-centrado { text-align: center; }
.subtitulo {
  font-family: var(--fuente-texto);
  font-style: italic;
  color: var(--color-terciario);
  font-size: 1.1rem;
}

/* Etiqueta pequeña en mayúsculas (estilo "recetas ancestrales") */
.sobretitulo {
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  color: var(--color-secundario);
}

/* Separación estándar entre secciones grandes de una página */
.seccion {
  padding-top: var(--espacio-6);
  /* Debajo del contenido dejamos poco aire (parecido al alto de la barra de
     novedades), para que el pie no quede tan lejos. */
  padding-bottom: var(--espacio-5);
}

/* Marca visible para el contenido de ejemplo que Eze debe reemplazar */
.placeholder {
  outline: 1px dashed var(--color-terciario);
  outline-offset: 3px;
}