/* ============================================================================
   Yumman Agency - Hoja de estilos principal
   ----------------------------------------------------------------------------
   Para que sirve: define el sistema visual completo del sitio. Se carga en
   todas las paginas. No depende de ningun framework externo.

   Organizacion del archivo:
     1. Tokens          variables de color, tipografia y espaciado
     2. Reset           normalizacion de estilos del navegador
     3. Tipografia      titulos, texto y codigo
     4. Maquetacion     contenedor, secciones y rejillas
     5. Componentes     cabecera, boton, tarjeta, tabla, pie
     6. Utilidades      clases auxiliares puntuales
     7. Responsive      ajustes por ancho de pantalla

   Convencion de color: se define una paleta unica en tonos oscuros. El publico
   objetivo son desarrolladores, que trabajan mayoritariamente en modo oscuro.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Superficies, de mas oscura a mas clara */
  --color-fondo: #0b0d10;
  --color-superficie: #12151a;
  --color-superficie-alta: #181c23;
  --color-borde: #232830;
  --color-borde-claro: #2f3641;

  /* Texto */
  --color-texto: #e6e9ee;
  --color-texto-suave: #9aa3b0;
  --color-texto-tenue: #6b7482;

  /* Acento: un solo color de marca, usado con moderacion */
  --color-acento: #4f8cff;
  --color-acento-suave: #1b2b4d;

  /* Estados de producto */
  --color-estado-idea: #6b7482;
  --color-estado-investigacion: #b98900;
  --color-estado-planificado: #4f8cff;
  --color-estado-lanzado: #2ea043;

  /* Tipografia */
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-codigo: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala de espaciado, base 4px */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-12: 3rem;
  --espacio-16: 4rem;
  --espacio-24: 6rem;

  /* Otros */
  --ancho-maximo: 1100px;
  --radio: 8px;
  --transicion: 150ms ease;
}

/* ----------------------------------------------------------------- 2. Reset */

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

html {
  scroll-behavior: smooth;
}

/* Respeta a quien pide menos movimiento por accesibilidad. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------- 3. Tipografia */

h1, h2, h3, h4 {
  margin: 0 0 var(--espacio-4);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

p {
  margin: 0 0 var(--espacio-4);
}

a {
  color: var(--color-acento);
  text-decoration: none;
  transition: color var(--transicion);
}

a:hover {
  text-decoration: underline;
}

/* Foco visible en todo elemento interactivo. Requisito de accesibilidad:
   quien navega con teclado debe ver siempre donde esta. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
  border-radius: 2px;
}

code {
  font-family: var(--fuente-codigo);
  font-size: 0.9em;
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

pre {
  font-family: var(--fuente-codigo);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-4);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Colores del ejemplo de codigo de la portada. */
.tok-com { color: var(--color-texto-tenue); }
.tok-key { color: #c792ea; }
.tok-str { color: #7fd88f; }
.tok-fun { color: #82aaff; }

/* --------------------------------------------------------- 4. Maquetacion */

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 var(--espacio-6);
}

.seccion {
  padding: var(--espacio-24) 0;
  border-top: 1px solid var(--color-borde);
}

.seccion__titulo {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-tenue);
  margin-bottom: var(--espacio-6);
}

.rejilla {
  display: grid;
  gap: var(--espacio-4);
}

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

/* Enlace de salto para lectores de pantalla y teclado. Solo visible al
   recibir el foco. */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-acento);
  color: #fff;
  padding: var(--espacio-3) var(--espacio-4);
  z-index: 100;
}

.salto-contenido:focus {
  left: var(--espacio-4);
  top: var(--espacio-4);
}

/* --------------------------------------------------------- 5. Componentes */

/* Cabecera ---------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 13, 16, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-borde);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-6);
  height: 60px;
}

.logo {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-texto);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}

.logo:hover {
  text-decoration: none;
  color: var(--color-texto);
}

/* Marca de la cabecera: los mismos tres rombos del favicon. */
.logo__marca-svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.logo__marca {
  color: var(--color-texto-tenue);
  font-weight: 400;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--espacio-6);
}

.nav a {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.nav a:hover {
  color: var(--color-texto);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--color-texto);
}

/* Boton que abre el menu en movil. Oculto en escritorio. */
.nav-boton {
  display: none;
  background: none;
  border: 1px solid var(--color-borde-claro);
  border-radius: var(--radio);
  color: var(--color-texto);
  padding: var(--espacio-2) var(--espacio-3);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

/* Portada ----------------------------------------------------------------- */

.portada {
  padding: var(--espacio-24) 0 var(--espacio-16);
}

.portada__texto {
  max-width: 620px;
}

.portada p {
  font-size: 1.1rem;
  color: var(--color-texto-suave);
  max-width: 560px;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-top: var(--espacio-8);
}

.portada__codigo {
  margin-top: var(--espacio-16);
}

.portada__codigo-pie {
  font-size: 0.85rem;
  color: var(--color-texto-tenue);
  margin: var(--espacio-3) 0 0;
}

/* Boton ------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-3) var(--espacio-6);
  border-radius: var(--radio);
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.boton:hover {
  text-decoration: none;
}

.boton--principal {
  background: var(--color-acento);
  color: #fff;
}

.boton--principal:hover {
  background: #3d7bf0;
  color: #fff;
}

.boton--secundario {
  background: transparent;
  border-color: var(--color-borde-claro);
  color: var(--color-texto);
}

.boton--secundario:hover {
  border-color: var(--color-texto-tenue);
  background: var(--color-superficie);
  color: var(--color-texto);
}

/* Tarjeta ----------------------------------------------------------------- */

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-6);
  transition: border-color var(--transicion);
}

a.tarjeta:hover {
  border-color: var(--color-borde-claro);
  text-decoration: none;
}

.tarjeta h3 {
  color: var(--color-texto);
  margin-bottom: var(--espacio-2);
}

.tarjeta p {
  color: var(--color-texto-suave);
  font-size: 0.925rem;
  margin: 0;
}

.tarjeta__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-2);
}

.tarjeta__cabecera h3 {
  margin: 0;
}

/* Etiqueta de estado ------------------------------------------------------ */

/* Para que sirve: comunica el estado real de un producto con una palabra.
   Sustituye a los marcadores graficos, que la regla 2 de CLAUDE.md prohibe. */
.estado {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.estado--idea { color: var(--color-estado-idea); }
.estado--investigacion { color: var(--color-estado-investigacion); }
.estado--planificado { color: var(--color-estado-planificado); }
.estado--lanzado { color: var(--color-estado-lanzado); }

/* Lista de caracteristicas ------------------------------------------------ */

.lista-limpia {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-limpia li {
  padding: var(--espacio-3) 0;
  border-bottom: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
}

.lista-limpia li:last-child {
  border-bottom: none;
}

.lista-limpia strong {
  color: var(--color-texto);
  font-weight: 600;
}

/* Aviso ------------------------------------------------------------------- */

/* Para que sirve: destacar informacion importante sin recurrir a iconos. */
.aviso {
  background: var(--color-acento-suave);
  border: 1px solid var(--color-acento);
  border-radius: var(--radio);
  padding: var(--espacio-4) var(--espacio-6);
  color: var(--color-texto-suave);
  font-size: 0.925rem;
}

.aviso strong {
  color: var(--color-texto);
}

.aviso p:last-child {
  margin-bottom: 0;
}

/* Pie de pagina ----------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--color-borde);
  padding: var(--espacio-12) 0;
  color: var(--color-texto-tenue);
  font-size: 0.875rem;
}

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

.pie a {
  color: var(--color-texto-suave);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-6);
}

/* ------------------------------------------------------------ 6. Utilidades */

.texto-suave { color: var(--color-texto-suave); }
.sin-margen { margin: 0; }

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

/* ------------------------------------------------------------ 7. Responsive */

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

  .seccion {
    padding: var(--espacio-16) 0;
  }

  .portada {
    padding: var(--espacio-16) 0 var(--espacio-12);
  }

  .nav-boton {
    display: block;
  }

  /* El menu pasa a desplegarse en vertical bajo la cabecera. Lo controla
     assets/js/main.js mediante el atributo data-abierto. */
  .nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    padding: var(--espacio-2) var(--espacio-6) var(--espacio-4);
  }

  .nav[data-abierto="true"] {
    display: flex;
  }

  .nav a {
    padding: var(--espacio-3) 0;
    width: 100%;
  }

  .pie__interior {
    flex-direction: column;
    gap: var(--espacio-4);
  }
}

/* Impresion: se retira el fondo oscuro para no gastar tinta. */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .cabecera,
  .nav,
  .portada__acciones {
    display: none;
  }
}