:root{
  /* ============================================
     COLORES BÁSICOS
     ============================================ */
  --page-bg-color: #0b0d12; /* Color de fondo base (no se usa actualmente, el gradiente lo reemplaza) */
  --fg: #ffffff; /* Color del texto principal (blanco) - Ajusta aquí para cambiar color del nombre de marca y botón */
  --muted: #a9b4c4; /* Color del texto secundario/subtítulo - Ajusta aquí para cambiar color del subtítulo */
  
  /* ============================================
     GRADIENTE DE FONDO AZUL VERTICAL
     ============================================ */
  --gradient-top: #0e41ce; /* Color azul brillante en la parte SUPERIOR del gradiente - Cambia este valor para ajustar el azul superior */
  --gradient-bottom: #03040f; /* Color azul muy oscuro en la parte INFERIOR del gradiente - Cambia este valor para ajustar el azul inferior */
  
  /* ============================================
     TARJETA (actualmente no visible)
     ============================================ */
  --card-alpha: 0; /* Transparencia de la tarjeta (0 = invisible, 0.1-0.2 = visible) */
  --card-blur: 0px; /* Efecto blur de la tarjeta (0-20px) */
  
  /* ============================================
     LAYOUT Y POSICIÓN
     ============================================ */
  --wrap-place-items: center; /* Centra el contenido vertical y horizontalmente */
  --wrap-padding: 24px; /* Espaciado alrededor del contenido (padding) - Aumenta para más espacio en los bordes */
  
  /* ============================================
     ALINEACIÓN DEL TEXTO
     ============================================ */
  --card-text-align: center; /* Alineación del texto: 'center' o 'left' */
  
  /* ============================================
     AVATAR CIRCULAR (DISCO OSCURO)
     ============================================ */
  --avatar-size: 200px; /* Tamaño del avatar circular - Cambia este valor (ej: 120px, 80px) para hacerlo más grande o pequeño */
  --avatar-bg: #0a0e27; /* Color de fondo del avatar circular - Cambia este color para el disco oscuro */
  
  /* ============================================
     LOGO DENTRO DEL AVATAR
     ============================================ */
  --logo-width: 600px; /* Ancho del logo dentro del avatar - Ajusta este valor para cambiar el tamaño del logo (ej: 80px, 140px) */
  --logo-margin: 0 auto; /* Centra el logo dentro del avatar */
  
  /* ============================================
     NOMBRE DE MARCA "aix.hacks"
     ============================================ */
  --brand-font-size: 28px; /* Tamaño de la fuente del nombre "aix.hacks" - Cambia este valor para hacer el texto más grande o pequeño (ej: 32px, 24px) */
  --brand-font-weight: 700; /* Grosor de la fuente: 400 (normal), 600 (semi-bold), 700 (bold), 800 (extra-bold) */
  
  /* ============================================
     SUBTÍTULO
     ============================================ */
  --subtitle-font-size: 16px; /* Tamaño de la fuente del subtítulo - Cambia este valor para ajustar el tamaño del texto del subtítulo */
  --subtitle-margin-top: 12px; /* Espacio entre el nombre de marca y el subtítulo - Aumenta para más espacio (ej: 16px, 20px) */
  
  /* ============================================
     BOTÓN CTA "See the workflow →"
     ============================================ */
  --cta-margin-top: 24px; /* Espacio entre el subtítulo y el botón - Aumenta para más espacio (ej: 32px, 40px) */
  --cta-padding: 14px 28px; /* Relleno interno del botón: primero vertical, luego horizontal - Cambia para hacer el botón más grande o pequeño (ej: 16px 32px) */
  --cta-border-radius: 12px; /* Redondeo de las esquinas del botón - Aumenta para más redondeo (ej: 16px, 20px) o 0 para esquinas cuadradas */
  --cta-bg: rgba(255, 255, 255, 0.15); /* Color de fondo del botón: rgba(rojo, verde, azul, transparencia) - Ajusta el último número (0.0-1.0) para más/menos opacidad */
  --cta-border: 1px solid rgba(255, 255, 255, 0.25); /* Borde del botón: grosor, estilo, color - Cambia 0.25 para más/menos opacidad del borde */
  --cta-font-weight: 600; /* Grosor de la fuente del botón: 400 (normal), 600 (semi-bold), 700 (bold) */
}

/* /ingles theme only — applies ONLY when body has class theme-ingles */
body.theme-ingles{
  --gradient-top: #b40ece;
  --gradient-bottom: #0d030f;

  --avatar-bg: #1B0B3A;

  --fg: #ffffff;
  --muted: #D1C4FF;

  --cta-bg: rgba(255, 255, 255, 0.14);
  --cta-border: 1px solid rgba(255, 255, 255, 0.28);
}

body.theme-ingles{
  --avatar-size: 160px;   /* antes 200px */
  --logo-width: 200px;    /* ajusta según tu SVG */
}