/* =============================================================
   Casona San José — Sección Manifiesto (Home)
   Text-first, narrow container, left-aligned.
   Título en Cormorant 300, firma en Cormorant italic.
   Referencia visual: Manifiesto.jsx del design system.
   Dials: motion 3-4, density 2-3, variance 5-6.
   ============================================================= */


/* -----------------------------------------------------------
   SECCIÓN — fondo y padding vertical
   ----------------------------------------------------------- */

.csn-manif {
  padding-block: var(--section-padding-y);
  background: var(--bg);
}


/* -----------------------------------------------------------
   CONTENEDOR — narrow (760px), respeta section-padding-x
   ----------------------------------------------------------- */

.csn-manif__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}


/* -----------------------------------------------------------
   EYEBROW — usa la utilidad .eyebrow de base.css
   Solo override de color si necesita diferenciarse
   ----------------------------------------------------------- */

.csn-manif__eyebrow {
  color: var(--color-sombra);   /* ligeramente más oscuro que el default de .eyebrow */
}


/* -----------------------------------------------------------
   TÍTULO — Cormorant Garamond 300, fluido
   em = itálica para énfasis de frase final
   ----------------------------------------------------------- */

.csn-manif__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-display-lg);          /* clamp(2.25rem, 4vw, 3.75rem) */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-noche);
  margin-block: var(--space-5) var(--space-6); /* 24px arriba, 32px abajo */
  text-wrap: balance;
}

.csn-manif__title em {
  font-style: italic;
}


/* -----------------------------------------------------------
   CUERPO — DM Sans, lectura cómoda
   Los <p> dentro no heredan max-width de base.css
   ----------------------------------------------------------- */

.csn-manif__body {
  color: var(--color-noche-suave);
}

.csn-manif__body p {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-noche-suave);
  max-width: unset;   /* anula el max-width:72ch de base.css → lo controla __inner */
}

.csn-manif__body p + p {
  margin-block-start: var(--space-4);   /* 16px — JSX referencia usa 18px */
}


/* -----------------------------------------------------------
   FIRMA — Cormorant italic, tamaño medio
   ----------------------------------------------------------- */

.csn-manif__signoff {
  margin-block-start: var(--space-6);   /* 32px — JSX usa 36px */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-display-sm);    /* clamp(1.375rem, 2vw, 1.75rem) ≈ 22–28px */
  line-height: var(--leading-normal);
  color: var(--color-noche);
}


/* -----------------------------------------------------------
   RESPONSIVE — mobile (≤ 600px)
   ----------------------------------------------------------- */

@media (max-width: 600px) {
  .csn-manif__title {
    /* type-display-lg mínimo es 2.25rem — suficiente en mobile */
    margin-block: var(--space-4) var(--space-5);
  }

  .csn-manif__body p {
    font-size: var(--type-body-md);   /* 16px en pantallas muy pequeñas */
  }
}


/* -----------------------------------------------------------
   PREFERS-REDUCED-MOTION
   El .reveal de la sección lo maneja base.css globalmente.
   ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* No hay transiciones propias en esta sección — cubierto por base.css */
}