/* ==========================================================================
   1. IMPORTACIÓN (Siempre arriba de todo)
   ========================================================================== */

/* Importa la tipografía Plus Jakarta Sans desde los servidores de Google */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   2. VARIABLES GLOBALES (Design System)
   ========================================================================== */

:root {
    --font-main: 'Plus Jakarta Sans', sans-serif; /* Fuente principal del sitio */
    --bg: #030610;               /* Color de fondo oscuro principal */
    --card: #0d1221;             /* Color para fondos de tarjetas y elementos */
    --primary: #818cf8;          /* Color de marca (lavanda/índigo) */
    --primary-glow: rgba(129, 140, 248, 0.2); /* Resplandor para efectos de luz */
    --text: #f9fafb;             /* Color de texto principal */
    --text-muted: #94a3b8;       /* Color de texto para descripciones o estados secundarios */
    --border: rgba(255, 255, 255, 0.1); /* Bordes semi-transparentes */
    --radius: 20px;              /* Radio de curvatura estándar de kovertiz */
    --container: 1200px;         /* Ancho máximo de la rejilla de contenido */
}

/* ==========================================================================
   3. RESET Y BASE
   ========================================================================== */

/* Universal reset para asegurar que paddings y márgenes sean consistentes */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    background-color: var(--bg);  /* Fondo oscuro general */
    color: var(--text);           /* Texto claro general */
    font-family: var(--font-main); /* Fuente Jakarta aplicada a todo el cuerpo */
    line-height: 1.6;             /* Espaciado entre líneas para legibilidad */
    -webkit-font-smoothing: antialiased; /* Suavizado de fuente para navegadores Webkit */
    -moz-osx-font-smoothing: grayscale;   /* Suavizado de fuente para Firefox */
    overflow-x: hidden;           /* Previene el scroll lateral por animaciones */
}

/* Forzar que los inputs y botones de kovertiz también la usen */
input, button, select, textarea {
    font-family: var(--font-main); /* Hereda la fuente en elementos de formulario */
}

.container { 
    max-width: var(--container);  /* Limita el ancho del contenido */
    margin: 0 auto;               /* Centra el contenedor */
    padding: 0 24px;              /* Margen de seguridad en móviles */
}

section { 
    padding: 100px 0;             /* Espaciado vertical entre secciones */
}

a { 
    text-decoration: none;        /* Quita el subrayado de los enlaces */
    transition: 0.3s;             /* Transición suave para todos los efectos hover */
}

/* ==========================================================================
   4. SECCIÓN HERO
   ========================================================================== */

.hero { 
    padding-top: 140px;           /* Espacio superior para compensar el header */
}

.hero .container { 
    display: grid;                /* Activa grid para alinear texto y mockup */
    grid-template-columns: 1fr 1fr; /* Divide el espacio en dos columnas iguales */
    gap: 60px;                    /* Separación entre columnas */
    align-items: center;          /* Centra verticalmente el contenido */
}

.kicker { 
    color: var(--primary);        /* Color de marca para el texto pequeño superior */
    font-weight: 700;             /* Peso de fuente negrita */
    font-size: 14px;              /* Tamaño pequeño */
    text-transform: uppercase;    /* Siempre en mayúsculas */
    letter-spacing: 2px;          /* Espaciado entre letras para estilo moderno */
}

h1 { 
    font-size: 3.5rem;            /* Tamaño de título gigante */
    font-weight: 800;             /* Peso extra bold */
    line-height: 1.1;             /* Espaciado de línea apretado para títulos */
    margin: 20px 0;               /* Margen superior e inferior */
}

/* ==========================================================================
   5. MOCKUP VISUAL COMPLETO
   ========================================================================== */

.hero-dashboard-mockup {
    position: relative;           /* Necesario para posicionar badges flotantes */
    width: 100%;                  /* Ocupa el ancho de su columna */
    height: 450px;                /* Altura fija del área del mockup */
    display: flex;                /* Flexbox para centrar la tarjeta principal */
    align-items: center;          /* Centrado vertical */
    justify-content: center;      /* Centrado horizontal */
    perspective: 1000px;          /* Permite efectos de rotación 3D */
}

.mockup-card {
    background: #111827;          /* Fondo oscuro estilo terminal */
    border: 1px solid var(--border); /* Borde sutil */
    border-radius: 12px;          /* Bordes redondeados */
    box-shadow: 0 20px 50px rgba(0,0,0,0.6); /* Sombra profunda para dar profundidad */
    color: #fff;                  /* Texto blanco interno */
    opacity: 0;                   /* Inicia invisible para la animación */
    animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* Animación de entrada */
    animation-delay: calc(var(--order) * 0.15s); /* Delay basado en variable CSS */
}

.card-main {
    width: 320px;                 /* Ancho de la tarjeta de código */
    z-index: 5;                   /* Se sitúa sobre el fondo */
    font-family: 'Courier New', monospace; /* Fuente de estilo programador */
    overflow: hidden;             /* Mantiene el contenido dentro de los bordes */
}

.mockup-header {
    padding: 10px 15px;           /* Espaciado interno de la barra superior */
    background: rgba(168, 53, 53, 0.03); /* Fondo muy ligero */
    border-bottom: 1px solid var(--border); /* Línea divisoria inferior */
    display: flex;                /* Alinea los botones de ventana */
    gap: 8px;                     /* Espacio entre los botones circulares */
    align-items: center;          /* Centrado vertical */
}

.dot-red { width: 8px; height: 8px; border-radius: 50%; background: #ff5f56; } /* Botón rojo mockup */
.dot-yellow { width: 8px; height: 8px; border-radius: 50%; background: #ffbd2e; } /* Botón amarillo mockup */
.dot-green { width: 8px; height: 8px; border-radius: 50%; background: #27c93f; } /* Botón verde mockup */

.mockup-title { 
    font-size: 11px;              /* Texto muy pequeño */
    color: var(--text-muted);     /* Color atenuado */
    margin-left: auto;            /* Empuja el título a la derecha */
}

.mockup-body { 
    padding: 20px;                /* Espaciado del contenido interno */
    font-size: 13px;              /* Tamaño de fuente legible para el código */
    color: #a5b4fc;               /* Tono azulado para resaltar el texto */
}

/* BADGES FLOTANTES */
.floating-badge {
    position: absolute;           /* Se posiciona respecto a .hero-dashboard-mockup */
    padding: 12px 18px;           /* Espaciado interno del globo */
    display: flex;                /* Alinea icono y texto */
    align-items: center;          /* Centrado vertical */
    gap: 10px;                    /* Espacio entre icono y texto */
    font-size: 13px;              /* Tamaño de fuente */
    font-weight: 600;             /* Peso de fuente semi-bold */
    background: rgba(17, 24, 39, 0.8); /* Fondo oscuro translúcido */
    backdrop-filter: blur(8px);    /* Efecto de desenfoque detrás del badge */
    border: 1px solid var(--border); /* Borde fino */
    z-index: 6;                   /* Por encima de la tarjeta principal */
    animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, 
               float 4s ease-in-out infinite; /* Animación doble: entrada y flotación */
    animation-delay: calc(var(--order) * 0.15s), calc(var(--order) * 0.4s); /* Delays sincronizados */
}

.floating-badge i { 
    color: var(--primary);        /* Color del icono dentro del badge */
    font-size: 16px;              /* Tamaño del icono */
}

/* POSICIONES DE BADGES */
.t-1 { top: 15%; right: 0; }      /* Posición arriba derecha */
.t-2 { top: 25%; left: -20px; }   /* Posición superior izquierda con desborde */
.t-3 { bottom: 20%; right: -10px; } /* Posición inferior derecha */
.t-4 { bottom: 10%; left: 10%; }  /* Posición inferior izquierda interna */
.t-5 { top: 0; left: 25%; }       /* Posición superior centrada izquierda */
.t-6 { bottom: 0; right: 20%; }   /* Posición inferior centrada derecha */

/* ==========================================================================
   6. ANIMACIONES
   ========================================================================== */

@keyframes reveal {
    from { 
        opacity: 0; 
        transform: translateY(30px) rotateX(-10deg); /* Aparece desde abajo con rotación */
    }
    to { 
        opacity: 1; 
        transform: translateY(0) rotateX(0);        /* Termina en su posición original */
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }         /* Estado inicial y final */
    50% { transform: translateY(-15px); }          /* Pico de la flotación (sube 15px) */
}

/* ==========================================================================
   7. TEXTOS Y BOTONES (CTAs)
   ========================================================================== */

.sub { 
    display: block;               /* Se asegura que ocupe toda la línea */
    font-size: 1.25rem;           /* Tamaño mediano alto */
    color: var(--text-muted);     /* Color grisáceo */
    font-weight: 400;             /* Peso normal */
    margin-top: 10px;             /* Separación del elemento superior */
}

.lead { 
    font-size: 1.15rem;           /* Texto de introducción */
    color: var(--text-muted);     /* Color atenuado */
    margin-bottom: 35px;          /* Espacio antes de los botones */
}

.ctas {
    display: flex;
    gap: 20px;           /* Espacio horizontal entre los dos botones */
    margin-top: 20px;    /* Espacio extra respecto al texto de arriba */
    margin-bottom: 40px; /* Espacio respecto a las "features" de abajo */
}
.btn { 
    padding: 14px 28px;           /* Tamaño del botón */
    border-radius: 12px;          /* Esquinas suavizadas */
    font-weight: 700;             /* Texto en negrita */
    cursor: pointer;              /* Cambia el cursor al pasar por encima */
    border: none;                 /* Quita el borde por defecto */
    transition: 0.3s;             /* Transición para hover */
}

.btn-primary { 
    background: var(--primary);   /* Color principal */
    color: white;                 /* Texto blanco */
    box-shadow: 0 10px 20px var(--primary-glow); /* Sombra con color de marca */
}

.btn-primary:hover { 
    transform: translateY(-2px);  /* Sube un poco al hacer hover */
    box-shadow: 0 15px 30px var(--primary-glow); /* Sombra más intensa al hover */
}

.btn-ghost { 
    background: rgba(255,255,255,0.05); /* Fondo casi transparente */
    color: white;                 /* Texto blanco */
    border: 1px solid var(--border); /* Borde fino */
}

.btn-ghost:hover { 
    background: rgba(255,255,255,0.1); /* Se aclara ligeramente al hover */
}

.features { 
    display: flex;                /* Alinea iconos de características */
    gap: 25px;                    /* Espacio entre características */
    margin-top: 40px;             /* Separación del bloque anterior */
}

.feature { 
    display: flex;                /* Alinea punto e icono horizontalmente */
    align-items: center;          /* Centrado vertical */
    gap: 8px;                     /* Espacio entre el punto y el texto */
    color: var(--text-muted);     /* Texto grisáceo */
    font-size: 14px;              /* Tamaño pequeño */
}

.dot { 
    width: 8px;                   /* Diámetro del punto */
    height: 8px; 
    background: var(--primary);   /* Color del punto */
    border-radius: 50%;           /* Forma circular */
    box-shadow: 0 0 10px var(--primary); /* Efecto de resplandor neón */
}

/* ==========================================================================
   8. BUSCADOR INTELIGENTE
   ========================================================================== */

/* Añade esta regla que faltaba para contener los resultados */
.hero-search {
    position: relative; /* CRUCIAL: Esto ancla los resultados aquí */
    width: 100%;
    max-width: 600px;   /* Ajusta según el ancho que desees en kovertiz */
    z-index: 100;       /* Asegura que el buscador esté sobre otros elementos */
}

.search-inner {
  position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin: 30px 0;
}

.search-inner:hover {
  border-color: rgba(255, 255, 255, 0.2); /* Aclara el borde al pasar el mouse */
  background: rgba(255, 255, 255, 0.05);  /* Aclara el fondo al pasar el mouse */
}

.search-inner:focus-within {
  border-color: var(--primary);   /* Cambia el borde al color de marca al escribir */
  background: rgba(255, 255, 255, 0.07); /* Fondo más visible al enfocar */
}

.search-inner i {
  color: var(--text-muted);       /* Color de la lupa */
  margin-right: 12px;             /* Espacio respecto al input */
  font-size: 0.9rem;              /* Tamaño del icono */
}

.search-inner input {
  flex: 1;                        /* Toma todo el espacio disponible */
  background: transparent;        /* Quita el fondo por defecto */
  border: none;                   /* Quita el borde por defecto */
  color: white;                   /* Texto blanco al escribir */
  font-size: 1rem;                /* Tamaño de letra */
  outline: none;                  /* Quita el aro de enfoque del navegador */
}

.search-inner input::placeholder {
  color: var(--text-muted);       /* Color del texto de ejemplo */
  opacity: 0.6;                   /* Transparencia del placeholder */
}

/* ==========================================================================
   9. RESPONSIVE BÚSQUEDA
   ========================================================================== */

@media (max-width: 768px) {
  .hero-search {
    width: 100%;                  /* Ocupa todo el ancho en móviles */
    max-width: 100%;              /* Sin límites laterales */
  }
}

/* ==========================================================================
   10. RESULTADOS DE BÚSQUEDA
   ========================================================================== */

.search-results {
    position: absolute;           /* Se despliega sobre el contenido inferior */
    top: calc(100% + 10px);       /* Posicionado justo debajo del input */
    left: 0; 
    right: 0; 
    background: #111827;          /* Fondo oscuro sólido */
    border: 1px solid var(--border); /* Borde sutil */
    border-radius: 12px;          /* Esquinas redondeadas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra para elevarlo visualmente */
    display: none;                /* Oculto por defecto, activado por JS */
    overflow: hidden;             /* Mantiene los items dentro de los bordes redondeados */
    z-index: 999;
}

.search-item {
    display: flex;                /* Alinea icono y nombre del resultado */
    padding: 14px 18px;           /* Espaciado del item */
    color: #fff;                  /* Texto blanco */
    text-decoration: none;        /* Quita subrayado */
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Separador entre resultados */
    font-size: 14px;              /* Tamaño de texto */
    transition: 0.2s;             /* Transición de hover */
}

.search-item:hover {
    background: var(--primary);   /* Fondo de marca al seleccionar */
    color: white;                 /* Mantiene texto blanco */
}

/* Scrollbar estética para el buscador */
.search-results::-webkit-scrollbar {
    width: 6px;                   /* Ancho de la barra de scroll */
}

.search-results::-webkit-scrollbar-thumb {
    background: var(--border);    /* Color del tirador del scroll */
    border-radius: 10px;          /* Redondeado del scroll */
}

.search-item i { 
    margin-right: 15px;           /* Espacio tras el icono del resultado */
    width: 20px;                  /* Ancho fijo para alineación vertical */
    text-align: center;           /* Centra el icono */
}

.search-go-btn {
    background: transparent;      /* Sin fondo blanco */
    border: none;                 /* Sin bordes */
    color: var(--primary);        /* Color de la flecha de marca */
    padding: 5px;                 /* Espaciado del clic */
    border-radius: 8px;           /* Esquinas suaves */
    cursor: pointer;              /* Cursor interactivo */
    margin-left: 10px;            /* Separación del input */
    transition: 0.2s;             /* Animación de hover */
    display: flex;                /* Flex para centrar flecha */
    align-items: center; 
    justify-content: center;
}

.search-go-btn:hover {
    transform: scale(1.2);        /* Se agranda ligeramente al hover */
    color: white;                 /* Cambia a blanco al hover */
}

/* ==========================================================================
   11. RESPONSIVO RÁPIDO HERO
   ========================================================================== */

@media (max-width: 968px) {
    .hero .container { 
        grid-template-columns: 1fr; /* Una sola columna en tablets/móviles */
        text-align: center;         /* Centra todo el texto */
    }
    .hero-dashboard-mockup { 
        display: none;              /* Oculta el mockup en pantallas pequeñas para ahorrar espacio */
    }
    .search-container { 
        margin: 0 auto 30px;        /* Centra la barra de búsqueda */
    }
    .ctas { 
        justify-content: center;    /* Centra los botones principales */
    }
    .features { 
        justify-content: center;    /* Centra las características inferiores */
    }
}

/* ==========================================================================
   12. SECCIÓN HOME INTRO (kovertiz STYLE)
   ========================================================================== */

.home-intro.dark-theme {
  --bg-dark: #020617;             /* Variable local para fondo oscuro */
  --text-main: #f8fafc;           /* Texto brillante */
  --text-dim: #94a3b8;            /* Texto grisáceo */
  --accent: #818cf8;              /* Color acento */
  
  position: relative;             /* Para posicionar el fondo de rejilla */
  background-color: var(--bg-dark); /* Aplica el fondo */
  padding: 90px 1.5rem;           /* Espaciado lateral y vertical */
  overflow: hidden;               /* Corta cualquier desborde decorativo */
  color: var(--text-main);        /* Color de texto por defecto */
}

/* Fondos Tecnológicos Rejilla */
.intro-bg-grid {
  position: absolute;             /* Capa de fondo absoluta */
  inset: 0;                       /* Cubre todo el área de la sección */
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1.5px, transparent 1.5px), 
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1.5px, transparent 1.5px);
  background-size: 45px 45px;      /* Tamaño de los cuadrados de la cuadrícula */
  mask-image: radial-gradient(circle at center, black, transparent 90%); /* Desvanece la rejilla en los bordes */
  pointer-events: none;           /* No interfiere con clics */
}

.intro-layout {
    display: grid;                /* Activa grid */
    grid-template-columns: 1.2fr 0.8fr; /* Columna de texto más ancha */
    gap: 40px;                    /* Espacio entre columnas */
    align-items: center;          /* Centrado vertical */
    text-align: left;             /* Alineación de texto a la izquierda */
}

/* Feature Cards del Intro */
.intro-aside {
  display: flex;                  /* Coloca las tarjetas una bajo otra */
  flex-direction: column; 
  gap: 1.2rem;                    /* Espacio entre tarjetas */
}

.feature-card {
  background: rgba(255, 255, 255, 0.02); /* Fondo semi-invisible */
  border: 1px solid rgba(255, 255, 255, 0.06); /* Borde sutil */
  padding: 1.5rem;                /* Espaciado interno */
  border-radius: 16px;            /* Esquinas redondeadas */
  display: flex;                  /* Alinea icono y texto */
  align-items: flex-start;        /* Alinea al inicio superior */
  gap: 1rem;                      /* Espacio entre icono y texto */
  transition: 0.3s ease;          /* Animación suave */
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.05); /* Brilla al hover */
  transform: translateX(8px);     /* Desplazamiento lateral sutil */
  border-color: rgba(129, 140, 248, 0.3); /* Cambia color de borde al hover */
}

.f-icon { font-size: 1.5rem; }    /* Tamaño del icono de la tarjeta */
.f-info strong { 
    display: block;               /* El título de la tarjeta en su propia línea */
    font-size: 1rem;              /* Tamaño del título */
    margin-bottom: 0.2rem;        /* Separación de la descripción */
    color: var(--text-main);      /* Texto blanco brillante */
}
.f-info p { 
    font-size: 0.85rem;           /* Tamaño de descripción pequeño */
    color: var(--text-dim);       /* Color gris */
    margin: 0; 
    line-height: 1.4;             /* Espaciado de línea apretado */
}

/* Responsive Intro */
@media (max-width: 950px) {
  .intro-layout { 
      grid-template-columns: 1fr; /* Pasa a una sola columna */
      gap: 3rem; 
      text-align: center;         /* Centra el texto */
  }
  .feature-card { text-align: left; } /* Mantiene alineación de items en tarjetas */
  .home-intro .intro-title { font-size: 2.8rem; } /* Reduce tamaño de título */
}

/* ==========================================================================
   13. HERRAMIENTAS DESTACADAS (kovertiz PREMIUM)
   ========================================================================== */

.featured-tools {
  --ft-bg: #020617;               /* Fondo oscuro profundo */
  --ft-card: rgba(255, 255, 255, 0.03); /* Fondo de tarjetas translúcido */
  --ft-border: rgba(255, 255, 255, 0.08); /* Borde de tarjeta */
  --ft-accent: #818cf8;           /* Color acento de kovertiz */
  --ft-text: #f8fafc;             /* Texto blanco */
  --ft-text-dim: #94a3b8;         /* Texto apagado */
  
  background-color: var(--ft-bg); /* Aplica fondo */
  padding: 60px 1.5rem;           /* Espaciado vertical y horizontal */
}

.featured-tools .ft-container {
  max-width: 1200px;              /* Límite de ancho */
  margin: 0 auto;                 /* Centrado */
}

/* Header & Pulse (Efecto de actividad) */
.featured-tools .ft-header {
  display: flex;                  /* Alinea verticalmente los elementos del header */
  flex-direction: column; 
  align-items: center; 
  margin-bottom: 40px;            /* Espacio antes del grid */
  text-align: center; 
}

.featured-tools .ft-pulse-wrapper {
  display: flex;                  /* Alinea el punto y el texto del badge */
  align-items: center; 
  gap: 10px; 
  background: rgba(129, 140, 248, 0.1); /* Fondo lavanda muy suave */
  padding: 6px 14px;              /* Tamaño del badge */
  border-radius: 100px;           /* Forma de píldora */
  margin-bottom: 15px; 
  border: 1px solid rgba(129, 140, 248, 0.2); /* Borde de marca */
}

.featured-tools .ft-pulse {
  width: 8px;                     /* Tamaño del punto central */
  height: 8px; 
  background: var(--ft-accent);   /* Color del punto */
  border-radius: 50%;             /* Circular */
  position: relative;             /* Para posicionar la animación */
}

.featured-tools .ft-pulse::after {
  content: '';                    /* Elemento invisible para la animación de onda */
  position: absolute; 
  width: 100%; height: 100%; 
  background: var(--ft-accent); 
  border-radius: 50%; 
  animation: ft-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; /* Efecto ping-pong infinito */
}

@keyframes ft-ping { 
    75%, 100% { transform: scale(3); opacity: 0; } /* La onda crece y desaparece */
}

.featured-tools .ft-title {
  font-size: 2rem;                /* Tamaño de título de sección */
  font-weight: 800;               /* Peso extra bold */
  color: var(--ft-text);          /* Blanco */
}

.featured-tools .ft-brand {
  color: var(--ft-accent);        /* Palabra kovertiz resaltada */
}

/* Grid de Herramientas */
.featured-tools .ft-grid {
  display: grid;                  /* Grid flexible */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Columnas automáticas según ancho */
  gap: 1.5rem;                    /* Espacio entre tarjetas */
}

/* Estilo de Tarjeta Destacada */
.featured-tools .ft-card {
  position: relative;             /* Necesario para .ft-card-glow */
  background: var(--ft-card);     /* Fondo oscuro suave */
  border: 1px solid var(--ft-border); /* Borde sutil */
  padding: 1.5rem;                /* Espaciado interno */
  border-radius: 20px;            /* Esquinas redondeadas */
  text-decoration: none;          /* Quita subrayado de enlace */
  display: flex;                  /* Alinea icono e info */
  align-items: center; 
  gap: 1.2rem;                    /* Separación icono-texto */
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición premium */
  overflow: hidden;               /* Mantiene efectos dentro de la tarjeta */
}

.featured-tools .ft-card-glow {
  position: absolute;             /* Capa de luz de fondo */
  top: 0; left: 0; width: 100%; height: 100%; 
  background: radial-gradient(circle at center, rgba(129, 140, 248, 0.15), transparent 70%); /* Luz radial */
  opacity: 0;                     /* Invisible por defecto */
  transition: opacity 0.3s ease;  /* Transición de aparición */
}

.featured-tools .ft-card:hover {
  transform: translateY(-5px);    /* Levanta la tarjeta */
  background: rgba(255, 255, 255, 0.06); /* Aclara fondo */
  border-color: var(--ft-accent); /* Borde se tiñe al hover */
}

.featured-tools .ft-card:hover .ft-card-glow {
  opacity: 1;                     /* Muestra el brillo al hover */
}

/* Iconos e Información interna */
.featured-tools .ft-icon {
  width: 50px;                    /* Tamaño fijo */
  height: 50px; 
  background: rgba(255, 255, 255, 0.05); /* Fondo del icono */
  border-radius: 12px; 
  display: flex; align-items: center; justify-content: center; 
  color: var(--ft-accent);        /* Color icono de marca */
  font-size: 1.4rem; 
  flex-shrink: 0;                 /* Evita que se encoja el icono */
  z-index: 1;                     /* Sobre el resplandor */
}

.featured-tools .ft-info {
  flex-grow: 1;                   /* Ocupa el resto de la tarjeta */
  z-index: 1; 
}

.featured-tools .ft-tag {
  font-size: 0.65rem;             /* Mini etiqueta (ej: SEO, AI) */
  font-weight: 700; 
  color: var(--ft-accent); 
  text-transform: uppercase; 
  background: rgba(129, 140, 248, 0.1); 
  padding: 2px 8px; 
  border-radius: 4px; 
  margin-bottom: 6px; 
  display: inline-block; 
}

.featured-tools .ft-info h3 {
  font-size: 1.1rem; 
  color: var(--ft-text); 
  margin-bottom: 4px; 
  font-weight: 700; 
}

.featured-tools .ft-info p {
  font-size: 0.85rem; 
  color: var(--ft-text-dim); 
  line-height: 1.4; 
  margin: 0; 
}

.featured-tools .ft-action {
  color: var(--ft-text-dim);      /* Flecha de acción a la derecha */
  font-size: 0.9rem; 
  transition: transform 0.3s ease, color 0.3s ease; 
  z-index: 1; 
}

.featured-tools .ft-card:hover .ft-action {
  transform: translateX(5px);     /* Mueve la flecha a la derecha */
  color: var(--ft-accent);        /* Colorea la flecha */
}

/* Mobile featured */
@media (max-width: 600px) {
  .featured-tools .ft-grid { grid-template-columns: 1fr; } /* Columna única en móviles */
  .featured-tools .ft-card { padding: 1.2rem; }
}

/* ==========================================================================
   14. SEO EDITORIAL (HIGH-END QUALITY)
   ========================================================================== */

.seo-editorial {
  --ed-bg: #020617;               /* Fondo editorial oscuro */
  --ed-text: #f8fafc;             /* Texto editorial principal */
  --ed-muted: #64748b;            /* Texto editorial muted */
  --ed-accent: #818cf8;           /* Acento marca editorial */
  
  background-color: var(--ed-bg); 
  padding: 120px 1.5rem;          /* Espaciado elegante alto */
  border-top: 1px solid rgba(255, 255, 255, 0.05); /* Separador superior sutil */
}

.seo-editorial .ed-container {
  max-width: 1200px; 
  margin: 0 auto; 
}

.seo-editorial .ed-grid {
  display: grid; 
  grid-template-columns: 1fr 1.5fr; /* Diseño asimétrico para mayor elegancia */
  gap: 80px; 
  align-items: start; 
}

.seo-editorial .ed-kicker {
  display: block; 
  font-size: 0.8rem; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 0.2em; 
  color: var(--ed-accent); 
  margin-bottom: 1rem; 
}

.seo-editorial .ed-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem); /* Tamaño dinámico según resolución */
  font-weight: 900; 
  line-height: 1; 
  letter-spacing: -0.05em; 
  color: var(--ed-text); 
}

.seo-editorial .brand-accent {
  color: var(--ed-accent);        /* Texto de acento en el título */
}

/* Bloques de contenido editorial */
.seo-editorial .ed-block {
  margin-bottom: 3.5rem;          /* Separación entre bloques de texto */
}

.seo-editorial .ed-block h3 {
  font-size: 1.2rem; 
  font-weight: 700; 
  color: var(--ed-text); 
  margin-bottom: 1rem; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.seo-editorial .ed-block h3::before {
  content: '';                    /* Decoración de línea horizontal para títulos */
  width: 20px; 
  height: 2px; 
  background: var(--ed-accent); 
}

.seo-editorial .ed-block p {
  font-size: 1.1rem; 
  line-height: 1.8;               /* Espaciado de línea amplio para lectura prolongada */
  color: var(--ed-muted); 
  max-width: 600px;               /* Limita ancho de lectura */
}

.seo-editorial strong {
  color: var(--ed-text);          /* Resalta negritas con blanco puro */
  font-weight: 600; 
}

.seo-editorial .brand-name {
  color: var(--ed-text); 
  font-weight: 800; 
  text-decoration: underline dotted var(--ed-accent); /* Estilo de subrayado para kovertiz */
}

@media (max-width: 992px) {
  .seo-editorial .ed-grid {
    grid-template-columns: 1fr;   /* Apila contenido en una columna */
    gap: 40px; 
  }
  .seo-editorial { padding: 80px 1.5rem; }
}

/* ==========================================================================
   15. CATEGORÍAS DE HERRAMIENTAS (kovertiz CATEGORIES)
   ========================================================================== */

.tool-categories {
    --sc-bg: #030610;             /* Color de fondo */
    --sc-accent: #818cf8;         /* Color de marca */
    --sc-text-dim: #94a3b8;       /* Texto gris */
    --sc-card-bg: #0d1221;        /* Color de tarjeta */
    --sc-border: rgba(255, 255, 255, 0.1); 
    
    background-color: var(--sc-bg); 
    padding: 100px 1.5rem; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    color: #fff; 
}

.sc-container { max-width: 1200px; margin: 0 auto; }

.sc-header { text-align: center; margin-bottom: 60px; }

.sc-title { 
    font-size: 3rem; 
    font-weight: 800; 
    margin-bottom: 20px; 
    letter-spacing: -1px; 
}

/* Efecto gradiente en texto compatible */
.sc-gradient, .gradient-text {
    background: linear-gradient(135deg, #fff, var(--sc-accent));
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    color: transparent; 
}

.gradient-text {
    /* 1. Definimos el gradiente (Blanco a Lavanda kovertiz) */
    background: linear-gradient(135deg, #FFFFFF 30%, #818cf8 100%);
    
    /* 2. Aplicamos el recorte al texto (Crucial para que no sea invisible) */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Hacemos el color del texto transparente para revelar el fondo */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* 4. Ajustes de renderizado */
    display: inline-block; /* Ayuda a que el gradiente se calcule bien */
    filter: drop-shadow(0 2px 10px rgba(129, 140, 248, 0.15)); /* Brillo sutil */
}

.sc-subtitle { 
    color: var(--sc-text-dim); 
    font-size: 1.1rem; 
    max-width: 700px; 
    margin: 0 auto; 
}

.sc-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 24px; 
}

.sc-card {
    background: var(--sc-card-bg); 
    border: 1px solid var(--sc-border); 
    border-radius: 24px; 
    padding: 35px; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    isolation: isolate;           /* Evita conflictos de capas con el hover */
    transition: transform 0.3s ease, border-color 0.3s ease; 
}

.sc-card::before {
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.1), transparent 70%); 
    opacity: 0; 
    transition: opacity 0.4s ease; 
    pointer-events: none !important; /* No bloquea el clic en links internos */
    z-index: -1; 
}

.sc-card:hover {
    transform: translateY(-5px); 
    border-color: var(--sc-accent); 
}

.sc-card:hover::before { opacity: 1; }

.sc-icon {
    width: 50px; 
    height: 50px; 
    background: rgba(129, 140, 248, 0.1); 
    border-radius: 14px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--sc-accent); 
    font-size: 1.4rem; 
    margin-bottom: 20px; 
}

.sc-card h3 { font-size: 1.4rem; margin-bottom: 15px; font-weight: 700; }

.sc-card p { 
    font-size: 0.95rem; 
    color: var(--sc-text-dim); 
    line-height: 1.6; 
    margin-bottom: 25px; 
}

.sc-list {
    list-style: none;             /* Quita puntos de lista */
    padding: 0; 
    margin-top: auto;             /* Empuja la lista al final de la tarjeta */
    position: relative; 
    z-index: 10;                  /* Capa superior para clics directos */
}

.sc-list li { margin-bottom: 12px; }

.sc-list a::after {
    content: '→';                 /* Flecha para cada link de herramienta */
    margin-left: 8px; 
    opacity: 0; 
    transform: translateX(-5px); 
    transition: 0.2s; 
}

.sc-list a:hover { color: #fff; }
.sc-list a:hover::after { opacity: 1; transform: translateX(0); }

@media (max-width: 768px) {
    .sc-title { font-size: 2.2rem; }
    .sc-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. AJUSTES DE ICONOS Y COLORES SVG
   ========================================================================== */

svg {
    display: inline-block;        /* Alinea con texto */
    vertical-align: middle; 
    width: 1.1em; 
    height: 1.1em; 
    fill: currentColor;           /* Usa el color del texto circundante */
    flex-shrink: 0; 
}

.sc-list li svg, 
.related-tools svg {
    fill: #4f46e5;                /* Color índigo para iconos específicos */
    width: 14px; 
    height: 14px; 
}

/* ==========================================================================
   17. SECCIÓN INTRO TEXTUAL Y DETALLES SEO
   ========================================================================== */

.hero-title .sub {
  display: block; 
  font-size: 1.1rem; 
  color: #6b7280;                 /* Color gris oscuro */
  margin-top: 15px; 
  max-width: 650px; 
}

.text-gradient {
    display: block; 
    font-size: 2.4rem; 
    font-weight: 700; 
    margin-top: 5px; 
    background: linear-gradient(90deg, #4f46e5, #9333ea); /* Gradiente de azul a morado */
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    letter-spacing: -0.02em; 
}

.lead {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 40px; /* Aumentamos de 35px a 40px o 45px */
    line-height: 1.8;    /* Mejora la legibilidad del bloque de texto */
}

.intro-details p {
    font-size: 1.05rem; 
    color: #9ca3af; 
    line-height: 1.7; 
    margin-top: 20px; 
}

.hero-title-left {
    font-size: 3.5rem !important; /* Ajusta este número a tu gusto */
    line-height: 1.1;
    display: block; /* Asegura que respete márgenes */
}

.elegant-intro-left {
    max-width: 900px; 
    margin-left: 0; 
    text-align: left; 
    border-left: 2px solid rgba(79, 70, 229, 0.4); /* Línea lateral decorativa de marca */
    padding-left: 30px; 
    margin-top: 50px; 
}

/* --- Visual Premium para kovertiz --- */
.ed-premium-visual {
    position: relative;
    height: 450px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* El Núcleo */
.v-core {
    width: 140px;
    height: 140px;
    background: #0f172a;
    border: 1px solid rgba(79, 70, 229, 0.4);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    transform: rotate(-10deg);
}

.v-core-label {
    font-family: 'Monaco', monospace;
    font-size: 10px;
    color: #4f46e5;
    letter-spacing: 2px;
}

.v-core-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
    filter: blur(20px);
}

/* Capas de Datos (Tags flotantes) */
.v-layer {
    position: absolute;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    animation: floatLayer 6s infinite ease-in-out;
}

.v-layer-1 { top: 15%; right: 10%; animation-delay: 0s; }
.v-layer-2 { bottom: 20%; left: 5%; animation-delay: -2s; }
.v-layer-3 { top: 30%; left: 0%; animation-delay: -4s; }

.v-tag {
    font-size: 10px;
    font-weight: 900;
    color: #4f46e5;
    text-transform: uppercase;
}

.v-line {
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.v-value {
    font-family: 'Monaco', monospace;
    font-size: 12px;
    color: #94a3b8;
}

/* Blob de fondo */
.v-bg-blob {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #4f46e5;
    filter: blur(120px);
    opacity: 0.1;
    z-index: 1;
}

/* Animaciones */
@keyframes floatLayer {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

/* ==========================================================================
   18. RESPONSIVE FINAL (Ajustes de Layout)
   ========================================================================== */

@media (max-width: 992px) {
    .intro-layout {
        grid-template-columns: 1fr; /* Columna única para intro en móviles */
        text-align: left; 
    }
    .intro-side {
        justify-content: flex-start; 
        margin-top: 30px; 
    }
}