/* ================
   Variables CSS 
   ================ */
   :root {
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
    --color-dark-1: #1a1e28;     /* Fondo oscuro principal */
    --color-dark-2: #111927;     /* Fondo oscuro secundario */
    --color-text: #e2e8f0;       /* Color de texto principal */
    --gap-columns: 1rem;         /* Espacio entre columnas */
    --border-radius: 12px;       /* Radio de bordes */
}

/* ================
   Contenedor Principal 
   ================ */
.content-container {
    width: 100%;           /* Ancho máximo del contenido */
    margin: 0 auto;              /* Centrado horizontal */
    /*padding: 2rem 1.5rem;        /* Espaciado interno */
}

/* ================
   Grid de Dos Columnas 
   ================ */
.two-column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
    gap: var(--gap-columns);
    align-items: start;          /* Alinear elementos al inicio */
    
    /* Animación suave para cambios de grid */
    transition: grid-template-columns 0.3s ease;
}

/* ================
   Columnas 
   ================ */
.column {
    border-radius: var(--border-radius);
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    /* Borde sutil con gradiente */
    border-image: linear-gradient(
        to right,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.15)
    ) 1;
}

/* Columna de Automatización */
.automation-column {
    position: sticky;
    top: 1rem; /* Mantiene fija la columna al hacer scroll */
    margin-left: 14px;
}

/* Columna de Imagen */
.image-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    
}
.column.image-column{
    margin-right: 14px;
}

/* ================
   Responsive Design 
   ================ */
@media (max-width: 768px) {
    .two-column-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .column {
        padding: 1.5rem;
        width: calc(100% - 3rem); /* Ajuste para móviles */
        margin: 0 auto;          /* Centrado en móviles */
    }
    
    .automation-column {
        position: static;        /* Elimina sticky en móviles */
    }
}

@media (max-width: 480px) {
    .content-container {
        padding: 1rem 0.5rem;
    }
    
    .column {
        padding: 1rem;
        border-radius: calc(var(--border-radius) - 2px);
    }
}