/* ===================================================================
 * base.css — Hoja de estilos base (actualizado con animaciones y comentarios)
 * Fuente: Satoshi (https://fontsource.org/fonts/satoshi)
 * Inspiración: Lovable & Convrt
 * Usado como plantilla base para proyectos.
 * =================================================================== */

/* -------------------------------------------------------------------
 * 1. Importación de la fuente
 * Importa la fuente Satoshi desde fontsource CDN.
 * ------------------------------------------------------------------- */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/satoshi/index.css');

/* -------------------------------------------------------------------
 * 2. Reset / Normalize
 * Un conjunto de reglas para normalizar estilos y resetear márgenes,
 * paddings, etc., para una base consistente entre navegadores.
 * ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* Incluye padding y border en el tamaño total del elemento */
  margin: 0;              /* Elimina márgenes por defecto */
  padding: 0;             /* Elimina paddings por defecto */
}

html {
  -webkit-text-size-adjust: 100%; /* Previene el zoom de texto en iOS */
  -moz-tab-size: 4;              /* Establece el tamaño de tabulación por defecto en Firefox */
       tab-size: 4;             /* Establece el tamaño de tabulación por defecto */
}

body {
  min-height: 100vh;             /* Asegura que el body ocupe al menos el alto de la ventana */
  line-height: 1.5;              /* Establece un interlineado base */
  text-rendering: optimizeLegibility; /* Mejora el renderizado del texto para mayor legibilidad */
  -webkit-font-smoothing: antialiased; /* Suaviza las fuentes en navegadores Webkit */
  background-color: var(--color-white); /* Establece el color de fondo base */
}

/* Elimina los puntos/viñetas de las listas desordenadas y ordenadas */
ul[class],
ol[class] {
  list-style: none;
}

/* Estilo para enlaces: elimina el subrayado por defecto para enlaces sin una clase específica */
a:not([class]) {
  text-decoration-skip-ink: auto; /* Controla cuándo se "recorta" el subrayado para no pasar por las letras */
}

/* Imágenes, media y elementos visuales: aseguran que sean responsivos por defecto */
img,
picture,
video,
canvas,
svg {
  display: block;    /* Los hace elementos de bloque */
  max-width: 100%;   /* Asegura que no excedan su contenedor */
}

/* Formulario: aplica estilos heredados para campos de texto, botones, etc. */
input,
button,
textarea,
select {
  font: inherit; /* Hereda la fuente y tamaño del elemento padre */
}

/* -------------------------------------------------------------------
 * 3. Variables globales (Custom Properties)
 * Define colores, tipografía, espaciados y sombras para fácil mantenimiento.
 * ------------------------------------------------------------------- */
:root {
  /* --- Tipografía --- */
  --font-sans: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Pila de fuentes con Satoshi como principal */
  --font-size-base: 16px;     /* Tamaño de fuente base */
  --line-height-base: 1.6;    /* Interlineado base */

  /* --- Colores --- */
  --color-white: #ffffff;      /* Blanco puro */
  --color-black: #222222;      /* Negro casi puro */
  --color-gray-100: #f5f7fa;   /* Gris muy claro */
  --color-gray-200: #e2e8f0;   /* Gris claro */
  --color-gray-700: #4a5568;   /* Gris oscuro */

  --color-primary: #6936F5;       /* Morado intenso (color principal) */
  --color-primary-light: #9B87F5; /* Morado suave */
  --color-primary-dark: #5828E0;  /* Morado oscuro */
  --color-secondary: #FF5B5B;     /* Rojo anaranjado (color secundario/acento) */
  --color-accent: #FF8C5B;        /* Naranja (acento cálido) */

  /* --- Gradientes aplicables a secciones específicas --- */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, #ff5e62 100%); /* Degradado morado a rojo/naranja */
  --gradient-subtle: linear-gradient(180deg,
    rgba(255,255,255,1) 0%,                  /* Blanco al 0% */
    rgba(105,54,245,0.05) 100%               /* Morado semitransparente al 100% */
  );
  /* Definimos un gradiente más "pesado" para la sección CTA */
  --gradient-bg-heavy: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);   /* Sombra pequeña */
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);   /* Sombra mediana */
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);  /* Sombra grande */

  /* --- Espaciados base --- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
}

/* -------------------------------------------------------------------
 * 4. Base de tipografía
 * Define estilos por defecto para el cuerpo del texto y encabezados.
 * ------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);     /* Aplica la pila de fuentes base */
  font-size: var(--font-size-base);  /* Aplica el tamaño de fuente base */
  line-height: var(--line-height-base); /* Aplica el interlineado base */
  color: var(--color-black);         /* Color de texto principal */
}

/* Estilos para los encabezados (h1 a h6) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;                 /* Grosor de fuente semi-bold */
  line-height: 1.2;                 /* Interlineado más ajustado para títulos */
  margin-bottom: var(--space-3);    /* Margen inferior estándar */
  color: var(--color-black);        /* Color de texto para títulos */
}
h1 { font-size: 2.25rem; } /* 36px */
h2 { font-size: 1.875rem; } /* 30px */
h3 { font-size: 1.5rem; } /* 24px */
h4 { font-size: 1.25rem; } /* 20px */
h5 { font-size: 1rem; } /* 16px */
h6 { font-size: 0.875rem; } /* 14px */

/* Estilo por defecto para párrafos */
p {
  margin-bottom: var(--space-3); /* Margen inferior estándar */
  color: var(--color-gray-700);  /* Color de texto secundario/de párrafo */
}

/* -------------------------------------------------------------------
 * 5. Layout y Utilidades
 * Clases para estructura de página, espaciado y alineación.
 * ------------------------------------------------------------------- */

/* Contenedor principal: centra el contenido y limita el ancho */
.container {
  width: 100%;                  /* Ocupa todo el ancho disponible */
  max-width: 1200px;            /* Ancho máximo */
  margin: 0 auto;               /* Centra horizontalmente */
  padding: 0 var(--space-4);    /* Padding horizontal interno */
}

/* Sistema básico de filas (usando flexbox) */
.row {
  display: flex;                /* Habilita flexbox */
  flex-wrap: wrap;              /* Permite que los elementos se envuelvan a la siguiente línea */
  margin: calc(-1 * var(--space-3)); /* Margen negativo para compensar el padding de las columnas */
}

/* Sistema básico de columnas */
.col {
  flex: 1 1 0%;                 /* Permite que la columna crezca, se encoja y tenga un tamaño base de 0 */
  padding: var(--space-3);      /* Padding interno para crear el espacio entre columnas */
}

/* Utilidades de alineación de texto */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Utilidades de margen (margin-top, margin-bottom, margin-left, margin-right, margin-x, margin-y) */
/* Ejemplo: margin-top */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* Ejemplo: margin-bottom */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Ejemplo: margin-auto (horizontalmente) */
.mx-auto { margin-left: auto; margin-right: auto; }


/* Utilidades de padding (padding-top, padding-bottom, padding-left, padding-right, padding-x, padding-y) */
/* Puedes añadir utilidades de padding de manera similar si las necesitas */
.pt-1 { padding-top: var(--space-1); }
.pb-5 { padding-bottom: var(--space-5); } /* Ya existían algunos, completamos el rango o ajustamos */
.pb-10 { padding-bottom: 2.5rem; } /* 40px */
.pb-20 { padding-bottom: 5rem; } /* 80px */


/* -------------------------------------------------------------------
 * 6. Botones
 * Estilos para diferentes tipos de botones.
 * ------------------------------------------------------------------- */
.btn {
  display: inline-block;           /* Permite aplicar padding y ancho, pero en línea con el texto */
  font-weight: 500;                /* Grosor de fuente medio */
  text-align: center;              /* Centra el texto */
  line-height: 1.2;                /* Interlineado ajustado */
  padding: var(--space-2) var(--space-4); /* Padding vertical y horizontal */
  border-radius: 0.75rem;          /* Bordes redondeados */
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; /* Transiciones suaves al pasar el ratón */
  cursor: pointer;                 /* Cambia el cursor a mano */
  user-select: none;               /* Evita la selección de texto */
  border: none;                    /* Elimina el borde por defecto */
  text-decoration: none;           /* Asegura que no tengan subrayado */
}

/* Variante principal del botón */
.btn-primary {
  background: var(--color-primary); /* Fondo con color principal */
  color: var(--color-white);        /* Texto blanco */
}
.btn-primary:hover {
  background: var(--color-primary-dark); /* Fondo oscuro al pasar el ratón */
  transform: translateY(-1px);           /* Efecto ligero de elevación */
}

/* Variante secundaria del botón */
.btn-secondary {
  background: var(--color-secondary); /* Fondo con color secundario */
  color: var(--color-white);          /* Texto blanco */
}
.btn-secondary:hover {
  background: #e04a4a;                /* Fondo ligeramente más oscuro al pasar el ratón */
  transform: translateY(-1px);        /* Efecto ligero de elevación */
}

/* Variante de botón con borde (outline) */
.btn-outline {
  background: transparent;            /* Fondo transparente */
  border: 1px solid var(--color-gray-200); /* Borde gris claro */
  color: var(--color-black);          /* Texto negro */
}
.btn-outline:hover {
  background: var(--color-gray-100); /* Fondo gris muy claro al pasar el ratón */
}

/* -------------------------------------------------------------------
 * 7. Tarjetas (Cards)
 * Estilos base para componentes tipo tarjeta.
 * ------------------------------------------------------------------- */
.card {
  background-color: var(--color-white); /* Fondo blanco */
  border-radius: 1rem;              /* Bordes redondeados */
  box-shadow: var(--shadow-md);     /* Sombra mediana por defecto */
  overflow: hidden;                 /* Oculta contenido que se salga (ej: imágenes en la parte superior) */
  transition: box-shadow 0.2s ease-in-out; /* Transición suave para la sombra */
}
.card:hover {
  box-shadow: var(--shadow-lg);     /* Sombra grande al pasar el ratón */
}
.card-body {
  padding: var(--space-4);          /* Padding interno para el contenido de la tarjeta */
}
/* Nota: Aplica .animate-fade-in y .animate-delay-Xms a la tarjeta en tu HTML si deseas animarla. */

/* -------------------------------------------------------------------
 * 8. Formularios
 * Estilos por defecto para campos de entrada de texto, áreas de texto, etc.
 * ------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;                       /* Ocupa todo el ancho de su contenedor */
  padding: var(--space-2) var(--space-3); /* Padding interno */
  border: 1px solid var(--color-gray-200); /* Borde gris claro */
  border-radius: 0.5rem;             /* Bordes semi-redondeados */
  background-color: var(--color-gray-100); /* Fondo gris muy claro */
  transition: border-color 0.2s ease-in-out; /* Transición suave para el borde */
}
input:focus,
textarea:focus,
select:focus {
  outline: none;                     /* Elimina el contorno azul por defecto en algunos navegadores */
  border-color: var(--color-primary-light); /* Cambia el color del borde al enfocar */
}

/* -------------------------------------------------------------------
 * 9. Navbar
 * Estilos para una barra de navegación simple.
 * ------------------------------------------------------------------- */
.navbar {
  display: flex;                       /* Habilita flexbox */
  align-items: center;                 /* Centra verticalmente los elementos */
  justify-content: space-between;      /* Distribuye el espacio entre los elementos */
  padding: var(--space-3) var(--space-4); /* Padding vertical y horizontal */
  background-color: var(--color-white); /* Fondo blanco */
  box-shadow: var(--shadow-sm);        /* Sombra pequeña */
  /* Nota: Si quieres animar la navbar, aplica .animate-fade-in en el HTML. */
}
.navbar a {
  color: var(--color-black);           /* Color de texto para los enlaces */
  text-decoration: none;               /* Elimina el subrayado */
  margin-left: var(--space-4);         /* Margen a la izquierda entre enlaces */
  font-weight: 500;                    /* Grosor de fuente medio */
  transition: color 0.2s ease-in-out;  /* Transición suave para el color */
}
.navbar a:first-child {
  margin-left: 0; /* El primer enlace no necesita margen a la izquierda */
}
.navbar a:hover {
  color: var(--color-primary-light);   /* Cambia el color al pasar el ratón */
}

/* -------------------------------------------------------------------
 * 10. Gradientes de fondo
 * Clases para aplicar gradientes predefinidos.
 * ------------------------------------------------------------------- */

/* Sección con el gradiente primario */
.bg-gradient-primary {
  background: var(--gradient-primary); /* Aplica el gradiente morado a rojo/naranja */
}

/* Contenedor con el degradado lineal sutil + glow radial */
.bg-gradient-subtle {
  position: relative;         /* Necesario para posicionar el pseudo-elemento */
  background: var(--gradient-subtle); /* Aplica el degradado sutil */
  overflow: visible;          /* Permite que el pseudo-elemento "glow" se salga */
}

/* Pseudo-elemento para crear el "glow" radial */
.bg-gradient-subtle::before {
  content: '';                /* Contenido vacío necesario para pseudo-elementos */
  position: absolute;         /* Posicionamiento absoluto */
  top: 50%;                   /* Centra verticalmente */
  left: 50%;                  /* Centra horizontalmente */
  width: 120%;                /* Ancho mayor que el contenedor para cubrir bien */
  height: 120%;               /* Alto mayor que el contenedor */
  background: radial-gradient( /* Gradiente radial */
    circle at top center,     /* Forma y posición del gradiente */
    rgba(105,54,245,0.15) 0%, /* Morado semitransparente en el centro */
    rgba(105,54,245,0) 60%    /* Transparente al 60% */
  );
  transform: translate(-50%, -50%); /* Ajuste para centrar el pseudo-elemento */
  filter: blur(80px);         /* Aplica un desenfoque para el efecto de "glow" */
  z-index: -1;                /* Asegura que esté detrás del contenido */
}

/* -------------------------------------------------------------------
 * 11. Animaciones de entrada (Fade In al Scrollear)
 * Define los keyframes y las clases para animar elementos cuando
 * entran en el viewport, controlado por JavaScript (Intersection Observer).
 * ------------------------------------------------------------------- */

/* Definición del keyframe para el efecto de aparición gradual con desplazamiento */
@keyframes fadeIn {
  from {
    opacity: 0;               /* Inicia completamente invisible */
    transform: translateY(20px); /* Inicia ligeramente desplazado hacia abajo */
  }
  to {
    opacity: 1;               /* Termina completamente visible */
    transform: translateY(0);    /* Termina en su posición original */
  }
}

/* Clase base para elementos que serán animados al scrollear */
/* Esta clase define el estado INICIAL ANTES de que sean visibles. */
.animate-fade-in {
  opacity: 0;               /* Inicialmente invisible */
  transform: translateY(20px); /* Inicialmente desplazado */
  transition: none;         /* Importante: Deshabilita transiciones por defecto */
  /* La animación REAL se aplica cuando se añade la clase 'is-visible' por JS */
}

/* Clase que se añade por JavaScript cuando el elemento entra en el viewport */
/* Esta clase activa la animación definida en el keyframe. */
.animate-fade-in.is-visible {
  animation: fadeIn 0.8s ease-out forwards; /* Aplica la animación: nombre, duración, curva de tiempo, mantiene el estado final */
  /* Las clases de retraso (animate-delay-...) funcionan aquí también */
}


/* Utilidades para añadir retrasos a la animación */
/* Aplica estas clases en tu HTML junto a .animate-fade-in */
.animate-delay-100ms { animation-delay: 100ms; }
.animate-delay-200ms { animation-delay: 200ms; }
.animate-delay-300ms { animation-delay: 300ms; }
.animate-delay-400ms { animation-delay: 400ms; }
.animate-delay-500ms { animation-delay: 500ms; }
.animate-delay-600ms { animation-delay: 600ms; }
.animate-delay-700ms { animation-delay: 700ms; }
.animate-delay-800ms { animation-delay: 800ms; }
.animate-delay-900ms { animation-delay: 900ms; }
.animate-delay-1000ms { animation-delay: 1000ms; }

/* Puedes añadir más clases de retraso si necesitas valores más altos */

/* -------------------------------------------------------------------
 * 12. Media queries básicos
 * Ajustes de estilos para diferentes tamaños de pantalla.
 * ------------------------------------------------------------------- */

/* Para pantallas con ancho máximo de 768px (típicamente tablets y móviles) */
@media (max-width: 768px) {
  /* La navbar se apila verticalmente */
  .navbar { flex-direction: column; }
  /* Los enlaces de la navbar */
  .navbar a { margin: var(--space-1) 0; } /* Ajusta márgenes para la disposición vertical */

  /* Las filas también se apilan verticalmente */
  .row { flex-direction: column; }

  /* El padding del contenedor puede ajustarse para móviles */
  .container { padding: 0 var(--space-3); } /* Ejemplo: usar un padding menor en móviles */

  /* Ajustes opcionales para tipografía en pantallas pequeñas */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
}

/* Para pantallas con ancho máximo de 1024px (típicamente laptops pequeñas y tablets grandes) */
@media (max-width: 1024px) {
   /* Ajuste específico para las columnas del dashboard en pantallas medianas */
  .dashboard-columns {
    grid-template-columns: 1fr; /* Se convierten en una sola columna */
  }
}


/* -------------------------------------------------------------------
 * 13. Secciones Específicas del Sitio
 * Estilos para componentes y secciones diseñadas a medida.
 * ------------------------------------------------------------------- */

/* ─── Feature Cards ───────────────────────────────────────────────── */

/* Contenedor flex para las tarjetas de características */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);         /* Espacio entre las tarjetas */
  margin-top: var(--space-5);  /* Margen superior */
  justify-content: center;     /* Centra las tarjetas si no llenan la fila */
}

/* Tarjeta individual de característica */
.feature-card {
  flex: 1;                      /* Permite que la tarjeta crezca y se encoja */
  min-width: 200px;             /* Ancho mínimo antes de apilarse */
  background: var(--color-white); /* Fondo blanco */
  border-radius: 1rem;          /* Bordes redondeados */
  box-shadow: var(--shadow-sm); /* Sombra pequeña */
  padding: var(--space-4);      /* Padding interno */
  text-align: center;           /* Centra el contenido de texto */
  transition: box-shadow 0.2s ease-in-out; /* Transición para la sombra */
  color: var(--color-secondary); /* Color por defecto heredable (puede ser sobrescrito) */
  /* Nota: Aplica .animate-fade-in y .animate-delay-Xms a la tarjeta en tu HTML si deseas animarla. */
}
.feature-card:hover {
  box-shadow: var(--shadow-md); /* Sombra mediana al pasar el ratón */
}

/* Ícono dentro de la tarjeta (hereda color por defecto) */
.feature-icon {
  font-size: 2.5rem;            /* Tamaño del ícono */
  color: currentColor;          /* Usa el color de texto actual del padre (.feature-card) */
  margin-bottom: var(--space-2);/* Margen inferior */
}

/* Párrafo dentro de la tarjeta (hereda color por defecto) */
.feature-card p {
  margin: 0;                    /* Elimina el margen inferior por defecto del párrafo */
  font-weight: 500;             /* Grosor de fuente medio */
  font-size: 1rem;              /* Tamaño de fuente base */
  color: currentColor;          /* Usa el color de texto actual del padre (.feature-card) */
}

/* Utilidades para cambiar el color del texto (aplicables a .feature-card u otros elementos) */
.text-primary   { color: var(--color-primary) !important; } /* Color primario */
.text-secondary { color: var(--color-secondary) !important; } /* Color secundario */
.text-accent    { color: var(--color-accent) !important; } /* Color de acento */


/* ─── Dashboard Styles ─────────────────────────────────────────────── */

/* Wrapper principal del área del dashboard simulado */
.dashboard-wrapper {
  background: var(--color-white); /* Fondo blanco */
  border-radius: 1rem;            /* Bordes redondeados */
  box-shadow: var(--shadow-lg);   /* Sombra grande */
  padding: var(--space-5);        /* Padding interno */
  position: relative;             /* Necesario si hay elementos posicionados absolutamente dentro */
  /* Nota: Aplica .animate-fade-in al .dashboard-wrapper en tu HTML si deseas animarlo. */
}

/* Simulación de la barra de "browser" */
.dashboard-browser-bar {
  display: flex;              /* Habilita flexbox */
  align-items: center;        /* Centra verticalmente los puntos */
  gap: var(--space-1);        /* Espacio entre los puntos */
  margin-bottom: var(--space-4); /* Margen inferior */
}
.dashboard-browser-bar .dot {
  width: 0.75rem;             /* Ancho del punto */
  height: 0.75rem;            /* Alto del punto */
  border-radius: 50%;         /* Forma circular */
  display: inline-block;      /* Se muestran en línea pero aceptan dimensiones */
}
/* Colores específicos para los puntos */
.dashboard-browser-bar .red   { background: #FF5B5B; }
.dashboard-browser-bar .yellow{ background: #F5A623; }
.dashboard-browser-bar .green { background: #37D67A; }

/* Pestañas de navegación dentro del dashboard */
.dashboard-tabs {
  display: flex;              /* Habilita flexbox */
  gap: var(--space-4);        /* Espacio entre las pestañas */
  border-bottom: 1px solid var(--color-gray-200); /* Línea inferior */
  margin-bottom: var(--space-4); /* Margen inferior */
}
.dashboard-tab {
  position: relative;         /* Necesario para la línea indicadora inferior */
  padding-bottom: var(--space-2); /* Espacio debajo del texto */
  font-weight: 500;           /* Grosor de fuente medio */
  color: var(--color-gray-700); /* Color de texto por defecto */
  cursor: pointer;            /* Cambia el cursor */
  transition: color 0.2s ease-in-out; /* Transición suave para el color */
}
/* Estilo para la pestaña activa */
.dashboard-tab.active {
  color: var(--color-primary); /* Color primario para la pestaña activa */
}
.dashboard-tab.active::after {
  content: '';                /* Contenido vacío */
  position: absolute;         /* Posicionamiento absoluto */
  bottom: -1px;               /* Alineado con el borde inferior del padre (.dashboard-tabs) */
  left: 0;                    /* Desde el inicio de la pestaña */
  width: 100%;                /* Ocupa todo el ancho de la pestaña */
  height: 3px;                /* Alto de la línea indicadora */
  background: var(--color-primary); /* Color primario */
  border-radius: 2px 2px 0 0; /* Bordes superiores redondeados */
}

/* Badges de estado y avatar en el header del dashboard */
.header-badges {
  margin-left: auto;          /* Empuja este grupo hacia la derecha */
  display: flex;              /* Habilita flexbox */
  gap: var(--space-4);        /* Espacio entre los badges y el avatar */
  align-items: center;        /* Centra verticalmente */
}
/* Estilo para los badges tipo "pill" */
.header-badges .pill {
  display: inline-flex;       /* Flexbox en línea */
  align-items: center;        /* Centra contenido (ícono y texto) */
  gap: var(--space-1);        /* Espacio entre ícono y texto */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
  font-weight: 500;           /* Grosor de fuente medio */
  padding: var(--space-1) var(--space-3); /* Padding interno */
  border-radius: var(--space-3); /* Bordes muy redondeados (forma de pill) */
}
/* Colores específicos para los badges */
.header-badges .pill.green  {
  background: #E6F7EE;        /* Fondo verde muy claro */
  color: #37D67A;             /* Texto verde */
}
.header-badges .pill.orange {
  background: #FFF4E5;        /* Fondo naranja muy claro */
  color: #F5A623;             /* Texto naranja */
}
/* Estilo para el ícono/avatar de usuario */
.header-badges .user-icon {
  width: 2.5rem;              /* Ancho */
  height: 2.5rem;             /* Alto */
  border-radius: 50%;         /* Forma circular */
  background: var(--color-gray-200); /* Fondo gris claro (placeholder) */
}

/* Layout de dos columnas: feed y sidebar */
.dashboard-columns {
  display: grid;                          /* Habilita grid layout */
  grid-template-columns: 3fr 1fr;         /* Define dos columnas: una ancha (3 partes) y una estrecha (1 parte) */
  gap: var(--space-5);                    /* Espacio entre las columnas */
  /* Nota: Las columnas individuales o los items dentro pueden animarse con .animate-fade-in. */
}

/* Feed de items (columna principal) */
.dashboard-feed {
  display: flex;              /* Habilita flexbox */
  flex-direction: column;     /* Elementos apilados verticalmente */
  gap: var(--space-4);        /* Espacio entre los items del feed */
}

/* Cada item individual en el feed */
.feed-item {
  background: var(--color-white); /* Fondo blanco */
  border-radius: 1rem;            /* Bordes redondeados */
  box-shadow: var(--shadow-sm);   /* Sombra pequeña */
  overflow: hidden;               /* Oculta contenido que se salga */
  transition: box-shadow 0.2s ease-in-out; /* Transición para la sombra */
   /* Nota: Aplica .animate-fade-in y .animate-delay-Xms a cada .feed-item en tu HTML si deseas animarlos uno por uno. */
}
.feed-item:hover {
  box-shadow: var(--shadow-md);   /* Sombra mediana al pasar el ratón */
}

/* Header de cada post/item del feed */
.feed-item-header {
  display: flex;              /* Habilita flexbox */
  align-items: center;        /* Centra verticalmente */
  padding: var(--space-3);    /* Padding interno */
  border-bottom: 1px solid var(--color-gray-100); /* Separador inferior */
}
/* Avatar en el header del item */
.feed-item-header .avatar {
  width: 2.5rem;              /* Ancho */
  height: 2.5rem;             /* Alto */
  border-radius: 50%;         /* Forma circular */
  background: var(--color-gray-200); /* Fondo gris claro (placeholder) */
  margin-right: var(--space-2); /* Margen a la derecha */
}
/* Nombre de usuario en el header del item */
.feed-item-header .name {
  font-weight: 600;           /* Grosor de fuente semi-bold */
  color: var(--color-black);  /* Color de texto */
}
/* Metadatos (ej. fecha) en el header del item */
.feed-item-header .meta {
  margin-left: auto;          /* Empuja hacia la derecha */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
  color: var(--color-gray-700); /* Color de texto secundario */
}

/* Cuerpo del post/item */
.feed-item-body {
  padding: var(--space-3);    /* Padding interno */
  font-size: 1rem;            /* Tamaño de fuente base */
  line-height: 1.5;           /* Interlineado estándar */
  color: var(--color-gray-700); /* Color de texto secundario */
}

/* Acciones (ej. likes, comentarios) en el footer del item */
.feed-item-actions {
  display: flex;              /* Habilita flexbox */
  gap: var(--space-4);        /* Espacio entre acciones */
  padding: var(--space-2) var(--space-3); /* Padding interno */
  border-top: 1px solid var(--color-gray-100); /* Separador superior */
}
/* Cada acción individual */
.feed-item-actions .action {
  display: flex;              /* Habilita flexbox */
  align-items: center;        /* Centra verticalmente ícono y texto */
  gap: var(--space-1);        /* Espacio entre ícono y texto */
  color: var(--color-gray-700); /* Color de texto secundario */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
  cursor: pointer;            /* Cambia el cursor */
  transition: color 0.2s ease-in-out; /* Transición de color */
}
.feed-item-actions .action:hover {
  color: var(--color-primary); /* Color primario al pasar el ratón */
}

/* Variación para respuestas generadas por IA */
.feed-item.ai-response {
  background: var(--color-primary-light); /* Fondo morado suave */
}
.feed-item.ai-response .feed-item-body {
  color: var(--color-black); /* Color de texto más oscuro para contraste */
}
.feed-item.ai-response .feed-item-actions .action {
  color: var(--color-white); /* Acciones en blanco para contraste */
}


/* ─── Highlight Section ───────────────────────────────────────────── */

/* 1. Contenedor de la sección destacada (fondo oscuro + posición relativa) */
.highlight-section {
  position: relative;             /* Necesario para posicionar los elementos internos y pseudo-elementos */
  overflow: hidden;               /* Oculta cualquier contenido que se salga */
  border-radius: 1rem;            /* Bordes redondeados */
  background-color: #1F1F2E;      /* Color de fondo gris/azul muy oscuro */
  /* Nota: Aplica .animate-fade-in al .highlight-section en tu HTML si deseas animarla. */
}

/* 2. Capa de fondo con el contenido borroso (simula un dashboard de fondo) */
.highlight-bg {
  position: absolute;             /* Posicionamiento absoluto */
  inset: 0;                       /* Cubre todo el contenedor padre (top, right, bottom, left = 0) */
  overflow: hidden;               /* Oculta contenido interno que se salga */
  z-index: 0;                     /* Detrás del contenido y del overlay */
}
/* Aplica efectos al contenido dentro de .highlight-bg */
.highlight-bg > * {
  filter: blur(4px);             /* Aplica un desenfoque */
  transform: scale(1.05);        /* Ligeramente ampliado para evitar bordes nítidos después del blur */
  opacity: 0.6;                   /* Reduce la opacidad para que se vea el fondo oscuro y el overlay */
}

/* 3. Overlay semitransparente y borroso */
.highlight-section::before {
  content: '';                /* Contenido vacío */
  position: absolute;         /* Posicionamiento absoluto */
  inset: 0;                   /* Cubre todo el contenedor padre */
  background-color: rgba(34, 34, 34, 0.838); /* Fondo semitransparente */
  backdrop-filter: blur(4px); /* Aplica blur al contenido que está detrás de este overlay */
  z-index: 1;                 /* Encima del fondo borroso */
}

/* 4. Contenido principal de la sección (encima de todo) */
.highlight-content {
  position: relative;         /* Asegura que esté encima de los pseudo-elementos */
  z-index: 2;                 /* Asegura un z-index mayor */
  padding: var(--space-5);    /* Padding interno */
  color: var(--color-white);  /* Color de texto blanco */
  text-align: center;         /* Centra el texto */
   /* Nota: Puedes aplicar .animate-fade-in y .animate-delay-Xms al .highlight-content en tu HTML si deseas animarlo como un bloque. */
}

/* 5. "Pill" superior en la sección */
.highlight-pill {
  display: inline-flex;       /* Flexbox en línea */
  align-items: center;        /* Centra verticalmente ícono y texto */
  gap: var(--space-2);        /* Espacio entre ícono y texto */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
  font-weight: 500;           /* Grosor de fuente medio */
  background: rgba(155, 135, 245, 0.15); /* Fondo morado muy claro semitransparente */
  color: var(--color-primary); /* Color de texto primario */
  padding: var(--space-1) var(--space-4); /* Padding interno */
  border-radius: 2rem;        /* Bordes muy redondeados (forma de pill) */
  margin-bottom: var(--space-4); /* Margen inferior */
}

/* 6. Título principal de la sección */
.highlight-title {
  font-size: 2.25rem;         /* Tamaño de fuente grande */
  font-weight: 600;           /* Grosor de fuente semi-bold */
  margin-bottom: var(--space-3); /* Margen inferior */
  line-height: 1.2;           /* Interlineado ajustado */
  color: #f5f7fa;             /* Color blanco muy claro */
}
/* 7. Subtítulo de la sección */
.highlight-subtitle {
  font-size: 1.125rem;        /* Tamaño de fuente ligeramente mayor que el base */
  margin-bottom: var(--space-4); /* Margen inferior */
  color: rgba(255,255,255,0.9); /* Color blanco ligeramente transparente */
}

/* 8. Lista de beneficios en la sección */
.highlight-list {
  list-style: none;           /* Elimina los puntos de lista */
  margin-bottom: var(--space-5); /* Margen inferior */
  padding: 0;                 /* Elimina el padding por defecto de la lista */
}
.highlight-list li {
  display: flex;              /* Habilita flexbox */
  align-items: center;        /* Centra verticalmente ícono y texto */
  gap: var(--space-2);        /* Espacio entre ícono y texto */
  font-size: 1rem;            /* Tamaño de fuente base */
  margin-bottom: var(--space-2); /* Margen inferior entre items */
  color: var(--color-white);  /* Color de texto blanco */
}
.highlight-list li i {
  font-size: 1.25rem;         /* Tamaño del ícono */
  color: var(--color-primary); /* Color primario para el ícono */
}

/* 9. Botón destacado en la sección */
.highlight-btn {
  display: inline-block;      /* Bloque en línea */
  font-size: 1rem;            /* Tamaño de fuente base */
  font-weight: 500;           /* Grosor de fuente medio */
  color: var(--color-white);  /* Texto blanco */
  background: var(--color-primary); /* Fondo con color primario */
  padding: var(--space-3) var(--space-5); /* Padding interno */
  border-radius: 2rem;        /* Bordes muy redondeados */
  text-decoration: none;      /* Elimina subrayado */
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; /* Transiciones suaves */
}
.highlight-btn:hover {
  background: var(--color-primary-dark); /* Fondo oscuro al pasar el ratón */
  transform: translateY(-1px);        /* Efecto ligero de elevación */
}


/* ─── Compare Cards Section ───────────────────────────────────────── */

/* Contenedor de la sección de tarjetas de comparación */
.compare-section {
  display: flex;              /* Habilita flexbox */
  flex-wrap: wrap;            /* Permite que las tarjetas se envuelvan */
  gap: var(--space-5);        /* Espacio entre las tarjetas */
  margin-top: var(--space-5); /* Margen superior */
  justify-content: center;    /* Centra las tarjetas si no llenan la fila */
}

/* Card base para la comparación */
.compare-card {
  --status-color: var(--color-secondary); /* Color por defecto para status (secundario/rojo) */
  --status-bg: rgba(255,91,91,0.1);      /* Fondo por defecto para status (rojo semitransparente) */
  --card-bg: var(--color-white);         /* Fondo blanco por defecto de la tarjeta */

  position: relative;         /* Necesario si hay elementos posicionados dentro */
  flex: 1 1 0;                /* Permite crecer/encoger, base 0 */
  min-width: 280px;           /* Ancho mínimo antes de apilarse */
  background-color: var(--card-bg); /* Fondo usando la variable local */
  border-radius: 1rem;        /* Bordes redondeados */
  padding: var(--space-5);    /* Padding interno */
  box-shadow: var(--shadow-sm); /* Sombra pequeña */
  transition: box-shadow 0.2s ease-in-out; /* Transición para la sombra */
  /* Nota: Aplica .animate-fade-in y .animate-delay-Xms a cada .compare-card en tu HTML si deseas animarlas. */
}
.compare-card:hover {
  box-shadow: var(--shadow-md); /* Sombra mediana al pasar el ratón */
}

/* Variantes de fondo y colores para las tarjetas de comparación */
/* Tarjeta Tradicional */
.compare-card--traditional {
  --card-bg: rgba(255,91,91,0.05); /* Fondo rojo muy claro */
  --status-color: var(--color-secondary);
  --status-bg: rgba(255,91,91,0.1);
}
/* Tarjeta AI */
.compare-card--ai {
  --card-bg: rgba(155,135,245,0.1); /* Fondo morado muy claro */
  --status-color: var(--color-primary);
  --status-bg: rgba(155,135,245,0.15);
}

/* Cabecera de la tarjeta: título + icono de estado */
.compare-card__header {
  display: flex;              /* Habilita flexbox */
  align-items: center;        /* Centra verticalmente */
  justify-content: space-between; /* Distribuye espacio */
  margin-bottom: var(--space-4); /* Margen inferior */
}
/* Título dentro de la cabecera */
.compare-card__title {
  font-size: 1.25rem;         /* Tamaño de fuente */
  font-weight: 600;           /* Grosor de fuente semi-bold */
  color: var(--color-black);  /* Color de texto */
}
/* Icono/indicador de estado */
.compare-card__status {
  width: var(--space-5);      /* Ancho */
  height: var(--space-5);     /* Alto */
  display: flex;              /* Habilita flexbox para centrar contenido */
  align-items: center;        /* Centra verticalmente */
  justify-content: center;    /* Centra horizontalmente */
  border-radius: 50%;         /* Forma circular */
  background-color: var(--status-bg); /* Fondo usando la variable local */
  color: var(--status-color); /* Color de texto/ícono usando la variable local */
  font-size: 1rem;            /* Tamaño del ícono */
}

/* Lista de puntos/características dentro de la tarjeta */
.compare-list {
  list-style: none;           /* Elimina los puntos de lista */
  margin: 0;                  /* Elimina márgenes por defecto */
  padding: 0;                 /* Elimina paddings por defecto */
}
.compare-list li {
  display: flex;              /* Habilita flexbox */
  gap: var(--space-3);        /* Espacio entre el ícono y el texto */
  margin-bottom: var(--space-3); /* Margen inferior entre items */
}
.compare-list li:last-child {
  margin-bottom: 0;           /* Elimina el margen inferior del último item */
}

/* Icono dentro de cada item de la lista */
.list-icon {
  flex-shrink: 0;             /* Evita que el ícono se encoja */
  display: flex;              /* Habilita flexbox para centrar contenido */
  align-items: center;        /* Centra verticalmente */
  justify-content: center;    /* Centra horizontalmente */
  width: var(--space-5);      /* Ancho */
  height: var(--space-5);     /* Alto */
  border-radius: 50%;         /* Forma circular */
  background-color: var(--status-bg); /* Fondo usando la variable local de la tarjeta */
  color: var(--status-color); /* Color de texto/ícono usando la variable local de la tarjeta */
  font-size: 1rem;            /* Tamaño del ícono */
}

/* Contenedor de texto para cada item de la lista */
.list-text {
  display: flex;              /* Habilita flexbox */
  flex-direction: column;     /* El texto se apila verticalmente */
}
/* Primer párrafo (título del punto) */
.list-text p:first-child {
  margin: 0;                  /* Elimina el margen por defecto */
  font-weight: 600;           /* Grosor de fuente semi-bold */
  color: var(--color-black);  /* Color de texto */
}
/* Segundo párrafo (descripción del punto) */
.list-text p:last-child {
  margin: 0;                  /* Elimina el margen por defecto */
  color: var(--color-gray-700); /* Color de texto secundario */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
}

/* ─── Hero Header Styles ─────────────────────────────────────────── */

/* Contenedor principal del encabezado tipo Hero */
.hero-header {
  text-align: center;         /* Centra todo el contenido de texto */
  padding: var(--space-5) 0;  /* Padding superior e inferior */
  /* Nota: Puedes aplicar .animate-fade-in al .hero-header en tu HTML si deseas animarlo. */
}

/* 1. Pill superior en el Hero */
.hero-header .hero-pill {
  display: inline-flex;       /* Flexbox en línea */
  align-items: center;        /* Centra verticalmente ícono y texto */
  gap: var(--space-2);        /* Espacio entre ícono y texto */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
  font-weight: 500;           /* Grosor de fuente medio */
  color: var(--color-primary); /* Color de texto primario */
  background: rgba(155, 135, 245, 0.15); /* Fondo morado muy claro semitransparente */
  padding: var(--space-1) var(--space-4); /* Padding interno */
  border-radius: 2rem;        /* Bordes muy redondeados (forma de pill) */
  margin-bottom: var(--space-4); /* Margen inferior */
}

/* 2. Título principal del Hero */
.hero-header .hero-title {
  font-size: 2.5rem;          /* Tamaño de fuente grande */
  font-weight: 700;           /* Grosor de fuente bold */
  line-height: 1.1;           /* Interlineado ajustado */
  margin-bottom: var(--space-3); /* Margen inferior */
  color: var(--color-black);  /* Color de texto principal */
}

/* Colores específicos para palabras dentro del título del Hero */
.hero-title .text-primary   { color: var(--color-primary) !important; } /* Color primario */
.hero-title .text-secondary { color: var(--color-secondary) !important; } /* Color secundario */

/* 3. Subtítulo del Hero */
.hero-header .hero-subtitle {
  font-size: 1.125rem;        /* Tamaño de fuente ligeramente mayor que el base */
  font-weight: 400;           /* Grosor de fuente normal */
  color: var(--color-gray-700); /* Color de texto secundario */
  margin-bottom: var(--space-5); /* Margen inferior */
}

/* ─── Gradient Call-to-Action Section ───────────────────────────────── */

/* 1. Sección sin degradado de fondo, con padding y bordes redondeados */
/* El fondo será el color base del body o el que se aplique externamente. */
.gradient-section {
  position: relative;         /* Necesario si hay elementos posicionados dentro */
  /* background: var(--gradient-bg-heavy); /* Línea eliminada/comentada */
  padding: var(--space-5) 0;  /* Padding superior e inferior */
  border-radius: 1rem;        /* Bordes redondeados */
   /* Nota: Puedes aplicar .animate-fade-in a la .gradient-section en tu HTML si deseas animarla. */
}

/* 2. Card interior blanca dentro de la sección (mantiene su fondo blanco) */
.gradient-card {
  background-color: var(--color-white); /* Fondo blanco */
  border-radius: 1rem;            /* Bordes redondeados */
  box-shadow: var(--shadow-md);   /* Sombra mediana */
  padding: var(--space-4);        /* Padding interno */
  max-width: 800px;               /* Ancho máximo */
  margin: 0 auto var(--space-5);  /* Centra horizontalmente, margen inferior */
   /* Nota: Puedes aplicar .animate-fade-in y .animate-delay-Xms a la .gradient-card en tu HTML si deseas animarla. */
}

/* 3. Área de texto dentro de la card */
.gradient-card textarea {
  width: 100%;                  /* Ocupa todo el ancho */
  border: none;                 /* Elimina el borde por defecto */
  resize: none;                 /* Evita que el usuario cambie el tamaño */
  font-family: var(--font-sans);/* Hereda la fuente */
  font-size: var(--font-size-base); /* Hereda el tamaño */
  line-height: var(--line-height-base); /* Hereda el interlineado */
  padding: var(--space-3);      /* Padding interno */
  border-radius: 0.75rem;       /* Bordes redondeados */
  background: var(--color-gray-100); /* Fondo gris claro */
  margin-bottom: var(--space-4); /* Margen inferior */
}

/* 4. Footer de la card: controles (attach, pública) y botón de enviar */
.gradient-card-footer {
  display: flex;              /* Habilita flexbox */
  align-items: center;        /* Centra verticalmente */
  justify-content: space-between; /* Distribuye el espacio */
}
/* Controles de la izquierda (botón de adjuntar, etc.) */
.gradient-card-footer .left-controls button {
  background: transparent;    /* Fondo transparente */
  border: none;               /* Sin borde */
  color: var(--color-gray-700); /* Color de texto secundario */
  display: inline-flex;       /* Flexbox en línea */
  align-items: center;        /* Centra ícono y texto */
  gap: var(--space-2);        /* Espacio entre ícono y texto */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
  cursor: pointer;            /* Cambia el cursor */
}
/* Botón de enviar (a la derecha) */
.gradient-card-footer .right-controls button {
  background: var(--color-black); /* Fondo negro */
  border: none;               /* Sin borde */
  color: var(--color-white);  /* Texto blanco */
  width: var(--space-6);      /* Ancho */
  height: var(--space-6);     /* Alto */
  border-radius: 50%;         /* Forma circular */
  display: inline-flex;       /* Flexbox en línea */
  align-items: center;        /* Centra verticalmente */
  justify-content: center;    /* Centra horizontalmente */
  cursor: pointer;            /* Cambia el cursor */
}

/* 5. Botones de característica debajo de la card */
.feature-buttons {
  display: flex;              /* Habilita flexbox */
  flex-wrap: wrap;            /* Permite que los botones se envuelvan */
  gap: var(--space-3);        /* Espacio entre los botones */
  justify-content: center;    /* Centra los botones horizontalmente */
  /* Nota: Puedes aplicar .animate-fade-in y .animate-delay-Xms a cada .btn-feature en tu HTML si deseas animarlos. */
}
.btn-feature {
  background: var(--color-white); /* Fondo blanco */
  border: 1px solid var(--color-gray-200); /* Borde gris claro */
  border-radius: 9999px;      /* Bordes muy redondeados (forma de pill/botón) */
  padding: var(--space-2) var(--space-4); /* Padding interno */
  display: inline-flex;       /* Flexbox en línea */
  align-items: center;        /* Centra verticalmente ícono y texto */
  gap: var(--space-2);        /* Espacio entre ícono y texto */
  font-size: 0.875rem;        /* Tamaño de fuente pequeño */
  cursor: pointer;            /* Cambia el cursor */
  transition: background-color 0.2s ease-in-out; /* Transición para el fondo */
}
.btn-feature:hover {
  background: var(--color-gray-100); /* Fondo gris muy claro al pasar el ratón */
}