/* ============================================
   ESTILOS CERTIFICADO TRIBUTARIO - COOINDEGABO
   ============================================
   
   INDICE DE SECCIONES:
   1. Variables CSS (colores, espaciados, fuentes)
   2. Hero Banner con Parallax
   3. Seccion Informativa Principal
   4. Columna de Imagen
   5. Columna de Contenido
   6. Lista de Pasos
   7. Nota Importante
   8. Boton CTA
   9. Animaciones
   10. Media Queries (Responsive)
   
============================================ */

/* ============================================
   1. VARIABLES CSS
   ============================================
   Modifica estos valores para cambiar colores
   y espaciados en toda la seccion
============================================ */
:root {
    /* --- COLORES PRINCIPALES --- */
    /* Color verde principal de Cooindegabo */
    --certificado-color-primary: #388e3c;
    /* Color verde oscuro para hover y acentos */
    --certificado-color-primary-dark: #2e7d32;
    /* Color verde claro para fondos suaves */
    --certificado-color-primary-light: #4caf50;
    /* Color verde muy claro para fondos */
    --certificado-color-bg-light: #e8f5e9;
    
    /* --- COLORES DE TEXTO --- */
    --certificado-color-text-dark: #1a1a2e;
    --certificado-color-text-medium: #4a4a5a;
    --certificado-color-text-light: #6a6a7a;
    
    /* --- COLORES DE FONDO --- */
    --certificado-color-bg-white: #ffffff;
    --certificado-color-bg-gray: #f8f9fa;
    
    /* --- COLORES DE ACENTO --- */
    --certificado-color-warning: #ff9800;
    --certificado-color-info: #2196f3;
    
    /* --- ESPACIADOS --- */
    /* Espaciado extra pequeno */
    --certificado-spacing-xs: 0.5rem;
    /* Espaciado pequeno */
    --certificado-spacing-sm: 1rem;
    /* Espaciado mediano */
    --certificado-spacing-md: 1.5rem;
    /* Espaciado grande */
    --certificado-spacing-lg: 2rem;
    /* Espaciado extra grande */
    --certificado-spacing-xl: 3rem;
    /* Espaciado extra extra grande */
    --certificado-spacing-xxl: 4rem;
    
    /* --- BORDES --- */
    --certificado-border-radius-sm: 8px;
    --certificado-border-radius-md: 12px;
    --certificado-border-radius-lg: 16px;
    --certificado-border-radius-xl: 24px;
    
    /* --- SOMBRAS --- */
    --certificado-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --certificado-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --certificado-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --certificado-shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);
    
    /* --- TRANSICIONES --- */
    --certificado-transition-fast: 0.2s ease;
    --certificado-transition-normal: 0.3s ease;
    --certificado-transition-slow: 0.5s ease;
}

/* ============================================
   2. HERO BANNER CON PARALLAX
   ============================================
   PARA CAMBIAR ALTURA: Modifica min-height
   PARA CAMBIAR IMAGEN: Modifica background-image url
   PARA QUITAR PARALLAX: Cambia background-attachment a scroll
============================================ */
.certificado-hero {
    /* --- Dimensiones --- */
    min-height: 400px;
    /* Altura minima del hero - MODIFICABLE */
    width: 100%;
    
    /* --- Imagen de fondo con parallax --- */
    background-image: url('imagens-web/heros/hero-tributario.png');
    /* Cambia esta URL por tu imagen */
    background-size: cover;
    /* La imagen cubre todo el area */
    background-position: center;
    /* Centra la imagen */
    background-attachment: fixed;
    /* EFECTO PARALLAX - Cambia a 'scroll' para desactivar */
    background-repeat: no-repeat;
    
    /* --- Posicionamiento --- */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* --- Espaciado interno --- */
    padding: var(--certificado-spacing-xxl) var(--certificado-spacing-md);
}

/* --- Overlay verde semi-transparente --- */
/* PARA CAMBIAR COLOR: Modifica los valores rgba */
/* PARA CAMBIAR OPACIDAD: Modifica el ultimo valor (0.85) */
.certificado-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente verde - Cambia los colores aqui */
    background: linear-gradient(
        135deg,
        rgba(56, 142, 60, 0.9) 0%,
        /* Verde principal con 90% opacidad */
        rgba(46, 125, 50, 0.50) 50%,
        /* Verde oscuro con 85% opacidad */
        rgba(27, 94, 32, 0.9) 100%
        /* Verde muy oscuro con 90% opacidad */
    );
    z-index: 1;
}

/* --- Contenedor del contenido del hero --- */
.certificado-hero-content {
    position: relative;
    z-index: 2;
    /* Sobre el overlay */
    max-width: 800px;
    padding: var(--certificado-spacing-lg);
    
    /* Animacion de entrada */
    animation: certificadoFadeInUp 0.8s ease-out;
}

/* --- Titulo principal del hero --- */
/* PARA CAMBIAR TAMANO: Modifica font-size */
/* PARA CAMBIAR COLOR: Modifica color */
.certificado-hero-title {
    font-size: 3rem;
    /* Tamano del titulo - MODIFICABLE */
    font-weight: 800;
    color: var(--certificado-color-bg-white);
    /* Color blanco */
    margin-bottom: var(--certificado-spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Sombra para mejor legibilidad */
    line-height: 1.2;
}

/* --- Descripcion del hero --- */
.certificado-hero-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   3. SECCION INFORMATIVA PRINCIPAL
   ============================================
   PARA CAMBIAR FONDO: Modifica background
   PARA CAMBIAR ESPACIADO: Modifica padding
============================================ */
.certificado-info-section {
    padding: var(--certificado-spacing-xxl) var(--certificado-spacing-md);
    background: var(--certificado-color-bg-white);
    /* Fondo blanco - MODIFICABLE */
}

/* --- Contenedor con Grid --- */
/* PARA CAMBIAR PROPORCION DE COLUMNAS: Modifica grid-template-columns */
/* Ejemplo: 1fr 2fr (imagen pequena, contenido grande) */
/* Ejemplo: 2fr 1fr (imagen grande, contenido pequeno) */
.certificado-container {
    max-width: 1200px;
    /* Ancho maximo del contenedor */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columnas iguales - MODIFICABLE */
    gap: var(--certificado-spacing-xxl);
    /* Espacio entre columnas */
    align-items: center;
}

/* ============================================
   4. COLUMNA DE IMAGEN (IZQUIERDA)
   ============================================
   PARA MOVER A LA DERECHA: Agrega order: 2;
============================================ */
.certificado-image-column {
    position: relative;
    /* Para posicionar elementos decorativos */
    order: 1;
    /* CAMBIA A 2 para mover a la derecha */
}

/* --- Contenedor de la imagen con efectos --- */
.certificado-image-wrapper {
    position: relative;
    display: inline-block;
}

/* --- Efecto decorativo detras de la imagen --- */
/* PARA QUITAR: Elimina este bloque completo */
/* PARA CAMBIAR COLOR: Modifica background */
.certificado-image-wrapper::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--certificado-color-primary-light) 0%, var(--certificado-color-primary) 100%);
    border-radius: var(--certificado-border-radius-lg);
    z-index: -1;
    opacity: 0.2;
    transform: rotate(-3deg);
}

/* --- Imagen principal --- */
/* PARA CAMBIAR TAMANO: Modifica max-width */
/* PARA CAMBIAR BORDE: Modifica border-radius */
.certificado-main-image {
    max-width: 100%;
    /* Ancho maximo - MODIFICABLE */
    height: auto;
    border-radius: var(--certificado-border-radius-lg);
    box-shadow: var(--certificado-shadow-xl);
    transition: transform var(--certificado-transition-normal), box-shadow var(--certificado-transition-normal);
}

/* --- Efecto hover en la imagen --- */
.certificado-main-image:hover {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 20px 60px rgba(56, 142, 60, 0.25);
}

/* --- Icono flotante decorativo --- */
/* PARA QUITAR: Elimina este bloque y el HTML correspondiente */
/* PARA CAMBIAR POSICION: Modifica top, right, bottom, left */
.certificado-floating-icon {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 60px;
    height: 60px;
    background: var(--certificado-color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--certificado-shadow-md);
    animation: certificadoFloat 3s ease-in-out infinite;
}

.certificado-floating-icon svg {
    width: 30px;
    height: 30px;
    color: white;
}

/* ============================================
   5. COLUMNA DE CONTENIDO (DERECHA)
   ============================================
   PARA MOVER A LA IZQUIERDA: Agrega order: 1;
============================================ */
.certificado-content-column {
    order: 2;
    /* CAMBIA A 1 para mover a la izquierda */
}

/* --- Titulo de la seccion --- */
/* PARA CAMBIAR COLOR: Modifica color */
/* PARA CAMBIAR TAMANO: Modifica font-size */
.certificado-section-title {
    font-size: 2rem;
    /* Tamano del titulo - MODIFICABLE */
    font-weight: 700;
    color: var(--certificado-color-text-dark);
    margin-bottom: var(--certificado-spacing-md);
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    gap: var(--certificado-spacing-xs);
}

/* --- Icono del titulo --- */
.certificado-icon-title {
    font-size: 1.8rem;
    line-height: 1;
}

/* --- Texto introductorio --- */
.certificado-intro-text {
    font-size: 1.1rem;
    color: var(--certificado-color-text-medium);
    line-height: 1.7;
    margin-bottom: var(--certificado-spacing-lg);
}

/* --- Texto resaltado --- */
/* PARA CAMBIAR COLOR: Modifica color y border-bottom-color */
.certificado-highlight {
    color: var(--certificado-color-primary);
    font-weight: 600;
    position: relative;
}

.certificado-highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--certificado-color-primary);
    opacity: 0.3;
}

/* ============================================
   6. LISTA DE PASOS
   ============================================
   PARA CAMBIAR FONDO: Modifica background en .certificado-guide-box
   PARA AGREGAR MAS PASOS: Solo agrega mas <li> en el HTML
============================================ */
.certificado-guide-box {
    background: var(--certificado-color-bg-light);
    /* Fondo verde claro - MODIFICABLE */
    border-radius: var(--certificado-border-radius-md);
    padding: var(--certificado-spacing-lg);
    margin-bottom: var(--certificado-spacing-lg);
    border-left: 4px solid var(--certificado-color-primary);
    /* Borde izquierdo verde */
}

/* --- Titulo de la guia --- */
.certificado-guide-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--certificado-color-primary-dark);
    margin-bottom: var(--certificado-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--certificado-spacing-xs);
}

.guide-icon {
    width: 24px;
    height: 24px;
    color: var(--certificado-color-primary);
}

/* --- Lista ordenada de pasos --- */
.certificado-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: none;
    /* Desactiva contador automatico */
}

/* --- Cada paso individual --- */
/* PARA CAMBIAR ESPACIADO ENTRE PASOS: Modifica margin-bottom */
.certificado-step-item {
    display: flex;
    align-items: flex-start;
    gap: var(--certificado-spacing-sm);
    margin-bottom: var(--certificado-spacing-sm);
    padding: var(--certificado-spacing-sm);
    background: var(--certificado-color-bg-white);
    border-radius: var(--certificado-border-radius-sm);
    transition: transform var(--certificado-transition-fast), box-shadow var(--certificado-transition-fast);
}

.certificado-step-item:last-child {
    margin-bottom: 0;
}

/* --- Efecto hover en cada paso --- */
.certificado-step-item:hover {
    transform: translateX(5px);
    box-shadow: var(--certificado-shadow-sm);
}

/* --- Numero del paso --- */
/* PARA CAMBIAR COLOR: Modifica background */
/* PARA CAMBIAR TAMANO: Modifica width, height y font-size */
.step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--certificado-color-primary);
    /* Color verde - MODIFICABLE */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* --- Texto del paso --- */
.step-text {
    color: var(--certificado-color-text-medium);
    line-height: 1.5;
    padding-top: 3px;
}

.step-text strong {
    color: var(--certificado-color-text-dark);
}

/* ============================================
   7. NOTA IMPORTANTE
   ============================================
   PARA CAMBIAR COLOR DE FONDO: Modifica background
   PARA CAMBIAR COLOR DEL BORDE: Modifica border-left-color
============================================ */
.certificado-note {
    display: flex;
    align-items: flex-start;
    gap: var(--certificado-spacing-sm);
    padding: var(--certificado-spacing-md);
    background: #fff8e1;
    /* Fondo amarillo claro - MODIFICABLE */
    border-radius: var(--certificado-border-radius-sm);
    border-left: 4px solid var(--certificado-color-warning);
    /* Borde naranja - MODIFICABLE */
    margin-bottom: var(--certificado-spacing-lg);
}

/* --- Icono de la nota --- */
.note-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--certificado-color-warning);
}

.note-icon svg {
    width: 100%;
    height: 100%;
}

/* --- Contenido de la nota --- */
.note-content {
    color: var(--certificado-color-text-medium);
    font-size: 0.95rem;
    line-height: 1.5;
}

.note-content strong {
    color: var(--certificado-color-text-dark);
}

/* ============================================
   8. BOTON CTA
   ============================================
   PARA CAMBIAR COLOR: Modifica background
   PARA CAMBIAR TAMANO: Modifica padding y font-size
============================================ */
.certificado-cta-container {
    text-align: left;
    /* CAMBIA A center para centrar el boton */
}

.certificado-cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--certificado-spacing-sm);
    padding: var(--certificado-spacing-md) var(--certificado-spacing-xl);
    /* Espaciado interno - MODIFICABLE */
    background: linear-gradient(135deg, var(--certificado-color-primary) 0%, var(--certificado-color-primary-dark) 100%);
    /* Gradiente verde - MODIFICABLE */
    color: white;
    font-size: 1.1rem;
    /* Tamano de fuente - MODIFICABLE */
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--certificado-border-radius-md);
    box-shadow: var(--certificado-shadow-md);
    transition: all var(--certificado-transition-normal);
    position: relative;
    overflow: hidden;
}

/* --- Efecto de brillo en el boton --- */
.certificado-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.certificado-cta-button:hover::before {
    left: 100%;
}

/* --- Efecto hover del boton --- */
.certificado-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(56, 142, 60, 0.4);
}

/* --- Icono del boton --- */
.cta-icon {
    width: 24px;
    height: 24px;
    transition: transform var(--certificado-transition-fast);
}

.certificado-cta-button:hover .cta-icon {
    transform: translateY(3px);
    /* Animacion de descarga */
}

/* ============================================
   9. ANIMACIONES
   ============================================
============================================ */

/* --- Animacion de entrada desde abajo --- */
@keyframes certificadoFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Animacion de flotacion --- */
@keyframes certificadoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* --- Clase para animacion al scroll --- */
.certificado-animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.certificado-animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   10. MEDIA QUERIES (RESPONSIVE)
   ============================================
   Ajustes para diferentes tamanos de pantalla
============================================ */

/* --- Tablets grandes (max 1024px) --- */
@media (max-width: 1024px) {
    .certificado-container {
        gap: var(--certificado-spacing-xl);
    }
    
    .certificado-hero-title {
        font-size: 2.5rem;
    }
    
    .certificado-section-title {
        font-size: 1.75rem;
    }
}

/* --- Tablets (max 992px) --- */
@media (max-width: 992px) {
    /* Cambiar a una sola columna */
    .certificado-container {
        grid-template-columns: 1fr;
        /* Una columna */
        gap: var(--certificado-spacing-xl);
    }
    
    /* Imagen arriba, contenido abajo */
    .certificado-image-column {
        order: 1;
        text-align: center;
    }
    
    .certificado-content-column {
        order: 2;
    }
    
    .certificado-main-image {
        max-width: 500px;
    }
    
    .certificado-cta-container {
        text-align: center;
    }
}

/* --- Tablets pequenas (max 768px) --- */
@media (max-width: 768px) {
    .certificado-hero {
        min-height: 350px;
        /* Efecto parallax desactivado en moviles para mejor rendimiento */
        background-attachment: scroll;
    }
    
    .certificado-hero-title {
        font-size: 2rem;
    }
    
    .certificado-hero-description {
        font-size: 1.1rem;
    }
    
    .certificado-info-section {
        padding: var(--certificado-spacing-xl) var(--certificado-spacing-sm);
    }
    
    .certificado-section-title {
        font-size: 1.5rem;
        flex-direction: column;
        gap: var(--certificado-spacing-xs);
    }
    
    .certificado-guide-box {
        padding: var(--certificado-spacing-md);
    }
    
    .certificado-main-image {
        max-width: 100%;
    }
}

/* --- Moviles (max 576px) --- */
@media (max-width: 576px) {
    .certificado-hero {
        min-height: 300px;
        padding: var(--certificado-spacing-xl) var(--certificado-spacing-sm);
    }
    
    .certificado-hero-title {
        font-size: 1.75rem;
    }
    
    .certificado-hero-description {
        font-size: 1rem;
    }
    
    .certificado-section-title {
        font-size: 1.3rem;
    }
    
    .certificado-intro-text {
        font-size: 1rem;
    }
    
    .certificado-step-item {
        padding: var(--certificado-spacing-xs);
    }
    
    .step-number {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .certificado-cta-button {
        width: 100%;
        justify-content: center;
        padding: var(--certificado-spacing-md);
        font-size: 1rem;
    }
    
    .certificado-note {
        flex-direction: column;
        gap: var(--certificado-spacing-xs);
    }
    
    .certificado-floating-icon {
        width: 50px;
        height: 50px;
        bottom: -10px;
        right: -10px;
    }
    
    .certificado-floating-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* --- Moviles muy pequenos (max 400px) --- */
@media (max-width: 400px) {
    .certificado-hero-title {
        font-size: 1.5rem;
    }
    
    .certificado-section-title {
        font-size: 1.2rem;
    }
    
    .certificado-guide-title {
        font-size: 1rem;
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}