/*
 * MCTO — Sistema de diseño base (v1)
 *
 * Este fichero es la ÚNICA hoja de estilos global de la plataforma.
 * Contiene: tokens de diseño, reset, tipografía, layout y componentes
 * reutilizables (botones, tarjetas, formularios, cabecera, pie).
 *
 * Regla de extensión: las páginas y herramientas nuevas NO deben crear
 * su propia paleta ni redefinir estos tokens. Si una página necesita
 * estilos exclusivos, se añaden en un bloque nuevo AL FINAL de este
 * fichero (o en un fichero adicional enlazado aparte), nunca editando
 * los bloques existentes. Así se garantiza que nada de lo ya construido
 * se rompe al añadir cosas nuevas.
 *
 * Fundamento: Biblia del proyecto, cap. 03 "Branding e Identidad de
 * Marca" — estilo limpio/moderno/elegante/minimalista/profesional,
 * paleta neutra con azul suave para estabilidad, colores de acción
 * reservados para elementos importantes. Los valores exactos (hex,
 * escalas) quedan formalizados en Biblia del proyecto mcto/
 * Guia-de-Estilo-Visual-MCTO.txt — cualquier cambio de estos tokens
 * debe reflejarse también en ese documento.
 */

/* ---------- 1. Tokens de diseño ---------- */

:root {
  /* Color — neutros */
  --color-bg: #ffffff;
  /* Antes #f7f8fa (gris azulado frío). Pasada de diseño 2026: fondo
     neutro con matiz cálido en vez de frío, para sensación más humana
     y menos "SaaS genérico" — coherente con la tendencia de tonos
     tierra/cálidos. Verificado por script contra WCAG AA (4.5:1): un
     tono más cálido y oscuro (#f8f6f2) bajaba el contraste de
     --color-text-faint sobre este fondo a 4.48:1 (falla) porque
     --color-text-faint se usa como texto sobre --color-bg-subtle en
     .badge--soon ("Próximamente") — #faf8f4 mantiene el mismo margen
     de seguridad que el fondo frío original (4.56:1) sin perder el
     matiz cálido. Ver Guia-de-Estilo-Visual-MCTO.txt §9. */
  --color-bg-subtle: #faf8f4;
  --color-text: #1a1d23;
  --color-text-muted: #5b6472;
  /* #8a93a3 original daba solo ~3.1:1 de contraste sobre blanco (por
     debajo del 4.5:1 que exige WCAG AA para texto normal) — se usaba en
     hints de formulario y metadatos a 12-14px, ilegible para bastante
     gente. #6b7280 da ~4.8:1, sigue leyéndose "terciario/discreto" pero
     es accesible. Ver Guia-de-Estilo-Visual-MCTO.txt. */
  --color-text-faint: #6b7280;
  --color-border: #e4e7ec;
  --color-border-strong: #c9cfd8;

  /* Color — estabilidad / marca (azul suave, único color de identidad) */
  --color-primary: #2b5fa8;
  --color-primary-dark: #1f4b87;
  --color-primary-subtle: #eaf1fb;
  --color-on-primary: #ffffff;

  /* Color — acento secundario de marca ("terracota/ladrillo"). Añadido
     en la pasada de diseño 2026 para dar algo de personalidad más allá
     del azul corporativo, sin tocar los colores semánticos (éxito/aviso/
     error) que ya cumplen una función y no deben cambiar. Uso: solo
     detalles decorativos puntuales (frase destacada del titular,
     tarjeta de la herramienta ya disponible) — nunca para textos de
     cuerpo ni para estados de validación. #9a3412 da >6:1 de contraste
     sobre blanco, válido también como texto si hiciera falta en el
     futuro. Ver Guia-de-Estilo-Visual-MCTO.txt §9. */
  --color-accent: #9a3412;
  --color-accent-subtle: #fbe9e2;

  /* Color — semántico (uso puntual: validación, avisos) */
  --color-success: #1f8a5b;
  --color-success-subtle: #e7f6ef;
  --color-warning: #b7791f;
  --color-warning-subtle: #fbf1e1;
  --color-danger: #c0392b;
  --color-danger-subtle: #fcebe9;

  /* Tipografía — stack de sistema: sin dependencias externas, carga
     instantánea, máxima legibilidad garantizada en cualquier equipo. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.375rem;
  --text-5xl: 3rem;

  --leading-tight: 1.2;
  --leading-base: 1.6;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Bordes y sombras */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* Layout */
  --container-max: 1120px;
  --header-height: 72px;
}

/* ---------- 2. Reset y base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Enlace "saltar al contenido": invisible hasta que recibe foco por
   teclado. Imprescindible para quien navega sin ratón (lectores de
   pantalla, teclado) — sin esto tienen que pasar por toda la nav en
   cada página. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
  font-size: var(--text-sm);
}

.skip-link:focus {
  left: 0;
}

/* ---------- 3. Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-16);
}

.section--subtle {
  background-color: var(--color-bg-subtle);
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-10);
  }
}

/* ---------- 4. Tipografía de contenido ---------- */

.eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.heading-1 {
  /* Antes text-5xl fijo (3rem). Pasada 2026 "wide & loud": algo más
     grande y con más peso en pantallas amplias, usando clamp() para
     que en móvil no crezca más allá de lo que ya funcionaba (evita
     tener que duplicar la media query de abajo con otro valor fijo). */
  font-size: clamp(var(--text-4xl), 4vw + 1.5rem, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Resalta una frase concreta del titular con el acento de marca, sin
   añadir negrita extra (ya es tan pesado como el resto del H1) ni
   animación — solo un subrayado de color grueso, legible también para
   quien no distingue bien los colores porque el texto sigue siendo el
   mismo negro de siempre. */
.hero__highlight {
  color: inherit;
  background-image: linear-gradient(
    to top,
    var(--color-accent-subtle) 0.2em,
    transparent 0.2em
  );
}

.heading-2 {
  font-size: var(--text-3xl);
}

.heading-3 {
  font-size: var(--text-xl);
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-sm {
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .heading-1 {
    font-size: var(--text-4xl);
  }
}

/* ---------- 5. Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-base);
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.05s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
}

.btn--secondary {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- 6. Cabecera / navegación ---------- */

.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(6px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
}

/* Logotipo (ver x-logo). Reutilizado en cabecera y pie de página.
   Wordmark puro: "MCT" + una "O" convertida en círculo macizo del azul
   de marca. El tamaño se controla con la prop $size del componente
   (font-size en línea), no aquí, para poder reutilizarlo a distintos
   tamaños (cabecera vs. pie de página) sin duplicar CSS. */
.logo {
  display: inline-flex;
  align-items: center;
}

.logo__wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.logo__o {
  width: 0.68em;
  height: 0.68em;
  display: inline-block;
  vertical-align: -0.05em;
  color: var(--color-primary);
  margin-left: 0.02em;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header__nav a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.site-header__nav a:hover {
  color: var(--color-primary);
}

/* Indica en qué sección/herramienta está el usuario ahora mismo — sin
   esto la navegación no da ninguna pista de "dónde estoy". */
.site-header__nav a.is-active {
  color: var(--color-primary);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header__nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  color: var(--color-text);
}

.site-header__nav-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* En móvil la nav de enlaces desaparecía por completo sin dejar forma
   de acceder a "Cómo funciona"/"Metodología" desde la cabecera (solo
   quedaba el botón "Explorar herramientas" y el pie de página). Se
   sustituye por un menú desplegable accesible por botón, en vez de
   ocultar la navegación sin más. */
@media (max-width: 768px) {
  .site-header__nav-toggle {
    display: inline-flex;
  }

  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-6);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .site-header__nav.is-open {
    display: flex;
  }

  .site-header__nav a {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .site-header__nav a:last-child {
    border-bottom: none;
  }
}

/* ---------- 7. Hero ---------- */

.hero {
  padding-block: var(--space-20) var(--space-16);
  text-align: center;
}

.hero__content {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-3);
}

.hero__trust {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.hero__trust svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .hero {
    padding-block: var(--space-12) var(--space-10);
  }
}

/* ---------- 8. Rejilla de secciones / cómo funciona ---------- */

.section-header {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-10);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

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

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

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

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

/* ---------- 9. Tarjetas de herramienta ---------- */

.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
  height: 100%;
}

a.tool-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.tool-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* Distingue la(s) herramienta(s) ya disponibles dentro de la misma
   rejilla (sin romper la geometría: mismo tamaño y posición que el
   resto, solo un borde superior de acento) para que la vista vaya
   primero a lo que sí se puede usar hoy. */
.tool-card--featured {
  border-top: 3px solid var(--color-accent);
}

.tool-card--featured .tool-card__icon {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}

.tool-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.tool-card__description {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-grow: 1;
}

.tool-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 600;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge--available {
  background-color: var(--color-success-subtle);
  color: var(--color-success);
}

.badge--soon {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-faint);
}

/* ---------- 10. Bloques de confianza ---------- */

.trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.trust-item__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

/* ---------- 11. Formularios (herramientas) ---------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.form-field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

.form-field input,
.form-field select {
  font-family: inherit;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.form-field--error input {
  border-color: var(--color-danger);
}

.form-field__error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  display: none;
}

.form-field--error .form-field__error {
  display: block;
}

.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.result-panel {
  display: none;
  margin-top: var(--space-8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.result-panel.is-visible {
  display: block;
}

.result-panel.result-panel--in {
  opacity: 1;
  transform: translateY(0);
}

.result-empty-icon {
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.result-row:last-child {
  border-bottom: none;
}

.result-row__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.result-row__value {
  font-weight: 700;
  font-size: var(--text-lg);
}

.result-row--highlight .result-row__value {
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

.alert--warning {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning);
}

.alert--danger {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* ---------- 12. Pie de página ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-10);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-footer__cols {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.site-footer__col h4 {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.site-footer__col a {
  display: block;
  padding-block: var(--space-1);
}

.site-footer__col a:hover {
  color: var(--color-primary);
}

.site-footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}