/* Fital API — tokens y clases compartidas. Fuente: DISENO.md. */
:root {
  color-scheme: light;

  /* Color */
  --marfil: #FCFBF8;
  --marfil-2: #F7F3EA;
  --ivory: #F3EEE2;
  --blanco-calido: #FFFEFB;
  --tinta: #0C1830;
  --texto-2: #4A5468;
  --texto-3: #5F6878;
  --oro: #B98A32;
  --oro-premium: #C99A43;
  --oro-texto: #8B6623;
  --hilo: rgba(185, 138, 50, .24);
  --grad-oro: linear-gradient(135deg, #AB7B29, #C99A43 55%, #E2C98D);
  --punto-mapa: #736752; /* 55 % --texto-3 + 45 % --oro-texto: gris cálido, no azul frío */

  /* Tipografía */
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-display: clamp(3.2rem, 9vw, 8.5rem);
  --t-h2: clamp(2.4rem, 5.6vw, 5rem);
  --t-h3: clamp(1.3rem, 2vw, 1.75rem);
  --t-h4: 1.125rem;
  --t-lead: clamp(1.1rem, 1.5vw, 1.4rem);
  --t-cuerpo: 1rem;
  --t-desc: 1.0625rem;
  --lh-desc: 1.47;
  --t-meta: .875rem;

  /* Espacio y forma */
  --seccion: clamp(96px, 14vh, 180px);
  --gutter: clamp(16px, 4vw, 48px);
  --ancho: 1240px;
  --ancho-texto: 760px;
  --nav-h: 64px;
  /* Radios: solo esta escala. --radio-s controles y chips · --radio tarjetas y paneles ·
     --radio-l contenedores grandes y medios. Píldoras: 999px. Sin valores sueltos. */
  --radio-s: 10px;
  --radio: 18px;
  --radio-l: 28px;
  --ico-s: 18px;
  --ico-m: 22px;
  --ico-l: 28px;
  /* Elevación: un solo nivel. --borde + --sombra en lo que flota (tarjetas, botón de oro);
     lo hundido (.panel) lleva solo --borde. Sin blur ni brillos. */
  --borde: 1px solid var(--hilo);
  --sombra: 0 1px 2px rgba(12, 24, 48, .04), 0 12px 32px rgba(12, 24, 48, .06);

  /* Movimiento */
  --expo: cubic-bezier(.16, 1, .3, 1);
}

/* Contenedores */
.wrap { width: 100%; max-width: calc(var(--ancho) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--texto { max-width: calc(var(--ancho-texto) + var(--gutter) * 2); }

/* Rejilla */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Texto */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: var(--t-meta); font-weight: 500;
  color: var(--oro-texto);
}
.eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--oro); }

.titular {
  margin: 0;
  font-size: var(--t-h2); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.04;
  color: var(--tinta);
}
.titular--display { font-size: var(--t-display); letter-spacing: -.045em; line-height: .98; }
/* Máscara del reveal por líneas. El padding evita recortar descendentes. */
.titular .linea { display: block; overflow: hidden; padding: 0 .05em .14em; margin: 0 -.05em -.14em; }
.titular .linea > span { display: block; }
/* En móvil el titular fluye completo: los cortes de escritorio dejaban palabras solas.
   El !important gana a los font-size por #sección y deja la escala de DISENO.md. */
@media (max-width: 899px) {
  .titular:not(.titular--display) { font-size: var(--t-h2) !important; text-wrap: balance; }
  .titular:not(.titular--display) .linea,
  .titular:not(.titular--display) .linea > span { display: inline; overflow: visible; padding: 0; margin: 0; }
}

.h3 { margin: 0; font-size: var(--t-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--tinta); }
.h4 { margin: 0; font-size: var(--t-h4); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--tinta); }
.lead { margin: 0; max-width: 38em; font-size: var(--t-lead); font-weight: 400; line-height: 1.45; color: var(--texto-2); }
.meta { font-size: var(--t-meta); color: var(--texto-3); }
.mono { font-family: var(--mono); font-size: .92em; }
.tabular { font-variant-numeric: tabular-nums; }
p { text-wrap: pretty; }
.lead, .h3, h3, .h4 { text-wrap: balance; }

/* Botones. Máximo un .boton--oro por pantalla. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--expo), border-color .3s, background-color .3s, box-shadow .3s;
}
.boton--oro { background: var(--grad-oro); background-origin: border-box; color: var(--tinta); box-shadow: var(--sombra); }
.boton--sec { background: transparent; border-color: var(--hilo); color: var(--tinta); }
@media (hover: hover) {
  .boton:hover { transform: translateY(-1px); }
  .boton--sec:hover { border-color: var(--oro); background: var(--blanco-calido); }
}
.boton--chico { min-height: 44px; padding: 8px 18px; font-size: .9375rem; }

/* Tarjetas y paneles */
.tarjeta {
  background: var(--blanco-calido);
  border: 1px solid var(--hilo);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: clamp(20px, 2.4vw, 32px);
}
.panel {
  background: var(--ivory);
  border: 1px solid var(--hilo);
  border-radius: var(--radio);
}

/* Iconos propios: SVG de línea, trazo 1.5 */
.icono { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Línea de oro: conector vertical opcional entre bloques */
.hilo-vertical { display: block; width: 1px; height: clamp(48px, 10vh, 96px); margin-inline: auto; background: var(--oro); }