/* ==========================================================
   BASE
   Variables, reset, typography, layout, utilities and animations.
   ========================================================== */

/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
  /* Interfaz menta */
  --menta-accent: #799a5b;

  /* Colores existentes de mentabase */
  --primary-color: #105b63;
  --secondary-color: #18929d;
  --active-color: #a2dda0;
  --soft-color: #f9fefb;
  --highlight-color: rgba(236, 138, 52, 0.5);

  /* Texto y superficies */
  --text-color: #111;
  --surface-color: #fff;

  /* Bordes y separadores */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --section-divider-color: #f2f6f1;
  --menta-accent-soft: rgba(121, 154, 91, 0.12);

  /* Layout */
  --container-width: 1160px;
  --container-gutter: 1.25rem;
  --header-height: 65px;

  /* Animaciones reveal */
  --reveal-distance: 8px;
  --reveal-duration: 0.6s;
  --reveal-ease: ease-out;
}

/* ==========================================================
   RESET AND GLOBAL BASE
   ========================================================== */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--surface-color);
  color: var(--text-color);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================
   TYPOGRAPHY SCALE
   ========================================================== */

:root {
  --font-size-h1: clamp(2.4rem, 4vw, 3.2rem);
  --font-size-h2: clamp(1.8rem, 3vw, 2.5rem);
  --font-size-h3: 1.25rem;

  --line-height-heading: 1.08;
  --letter-spacing-heading: -0.025em;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h2 {
  margin: 0 0 1rem;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h3 {
  margin: 0;
  font-size: var(--font-size-h3);
}

.lead {
  margin: 0 0 1.25rem;
  opacity: 0.9;
}

/* ==========================================================

   SECTION TYPOGRAPHY

   Patrones reutilizables para cabeceras de sección

   ========================================================== */

.section-header {

  max-width: 840px;

  margin-bottom: 3rem;

}

.kicker {

  margin: 0 0 0.75rem;

  color: var(--menta-accent);

  font-size: 0.95rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.chapter-title{
    position: relative;
    padding-bottom: .5rem;
    margin: 3rem 0 1.5rem;

    color: var(--menta-accent);
    font-size: clamp(1.45rem,2vw,2rem);
    font-weight: 700;
}

.chapter-title::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:56px;
    height:3px;

    background:var(--menta-accent);
    border-radius:99px;
}

.section-lead {

  max-width: 760px;

  margin: 0.5rem 0 1.5rem;

  padding-left: 1rem;

  border-left: 3px solid var(--menta-accent);

  color: var(--text-color);

  line-height: 1.6;

}



/* ==========================================================
   LAYOUT
   ========================================================== */

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

section {
  padding: 3rem 0;
}

.grid-2,
.grid-3,
.steps {
  display: grid;
  gap: 1rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3,
.steps {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
  .grid-2,
  .grid-3,
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   UTILITIES
   ========================================================== */

/* Compensa la cabecera sticky en enlaces internos */
section[id] {
  scroll-margin-top: var(--header-height);
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icono estándar para tarjetas y bloques informativos */
.icon {
  display: block;

  width: 48px;
  height: 48px;

  object-fit: contain;
  flex: 0 0 auto;
}

.icon--lg {
  width: 64px;
  height: 64px;
}

/* ==========================================================
   REVEAL ANIMATIONS
   ========================================================== */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   REVEAL VARIANTS
   ========================================================== */

.reveal--soft {
  transform: translateY(18px);
}

.reveal--left {
  transform: translateX(-28px);
}

.reveal--right {
  transform: translateX(28px);
}

.reveal--soft.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible {
  transform: none;
}