/* ═══════════════════════════════════════════════════════════
   Bloques de la portada y el tablero. Contenido, sin la densidad de
   comportamiento del workspace: aqui las primitivas de composicion hacen
   casi todo y los bloques solo nombran lo que se repite.
   ═══════════════════════════════════════════════════════════ */

/* Metrica del tablero */
.metric { background-color: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-md); }
.metric--accent { background-color: var(--color-teal-600); border-color: var(--color-teal-600); }
.metric--accent:hover { background-color: var(--color-teal-700); }
.metric__label { font-size: var(--size-step--1); font-weight: 500; color: var(--color-stone-400); text-transform: uppercase; letter-spacing: 0.05em; }
.metric--accent .metric__label { color: var(--color-teal-200); }
.metric__value { font-size: var(--size-step-3); font-family: var(--font-mono); font-weight: 500; color: var(--color-stone-900); margin-block-start: var(--space-3xs); }
.metric--accent .metric__value { color: #fff; font-family: var(--font-body); font-size: var(--size-step-0); font-weight: 600; }

/* Secciones de la portada */
.section { margin-inline: auto; max-inline-size: 64rem; padding: var(--space-2xl) var(--space-lg); }
.eyebrow { font-size: var(--size-step-1); font-weight: 600; color: var(--color-teal-600); }
.section__title { margin-block-start: var(--space-xs); font-family: var(--font-display); font-size: var(--size-step-3); color: var(--color-stone-900); }

/* Tarjeta con aro en vez de sombra dura */
.ring-card { position: relative; background-color: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-md); outline: 1px solid var(--color-stone-200); }

/* Item con icono a la izquierda */
.feature { display: flex; gap: var(--space-md); padding: var(--space-md); }
.feature__icon {
  flex: none; inline-size: 2.5rem; block-size: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background-color: var(--color-teal-50); color: var(--color-teal-600);
}

/* Acordeon de preguntas frecuentes (details/summary nativo) */
.faq { background-color: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); outline: 1px solid var(--color-stone-200); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer; font-weight: 600; color: var(--color-stone-900);
}
.faq__a { padding: 0 var(--space-lg) var(--space-md); color: var(--color-stone-600); line-height: 1.6; }
.faq__mark { inline-size: 1.25rem; block-size: 1.25rem; color: var(--color-stone-400); flex: none; transition: transform 150ms; }
.faq[open] .faq__mark { transform: rotate(45deg); }

.hero { position: relative; overflow: hidden; background-color: var(--color-stone-50); }
.hero__inner { margin-inline: auto; max-inline-size: 64rem; padding: var(--space-2xl) var(--space-lg); }
.hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--color-stone-900); line-height: 1.1; }
.hero__lead { margin-block-start: var(--space-lg); font-size: var(--size-step-2); color: var(--color-stone-600); max-inline-size: 42rem; margin-inline: auto; line-height: 1.6; }
.hero__actions { margin-block-start: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); }
.band { background-color: var(--surface-card); border-block: 1px solid var(--line); }
.step-num { display: flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); background-color: var(--color-teal-50); color: var(--color-teal-600); font-family: var(--font-mono); }
.card-title { margin-block-start: var(--space-md); font-size: var(--size-step-2); font-weight: 600; color: var(--color-stone-900); }
.card-body { margin-block-start: var(--space-xs); color: var(--color-stone-600); line-height: 1.6; }
.button--lg { padding-inline: var(--space-2xl); min-block-size: 3rem; font-size: var(--size-step-1); }
.link-cta { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--size-step-0); font-weight: 500; color: var(--color-teal-600); }
.link-cta:hover { color: var(--color-teal-700); }