/*
Theme Name: ITgen Child
Theme URI:
Description: Tema hijo de ITgen para Versionum
Author: Versionum
Template: itgen
Version: 1.0.0
Text Domain: itgen-child
*/
/* ==========================================================
   VERSIONUM - CSS ADICIONAL PARA ITGEN / IT SOLUTIONS DEMO 2
   Pegar en: Apariencia > Personalizar > CSS adicional
   ========================================================== */

/* ----------------------------------------------------------
   1. PALETA GLOBAL
   ---------------------------------------------------------- */
:root {
    --versionum-primary: #087F5B;
    --versionum-primary-light: #20C997;
    --versionum-accent: #38D9A9;
    --versionum-blue: #176B87;
    --versionum-dark-blue: #04364A;
    --versionum-bg: #F4F8F7;
    --versionum-text: #1C2B2B;
    --versionum-white: #FFFFFF;

    /* Variables nativas de ITgen */
    --body-bg: #FFFFFF !important;
    --white-bg: #FFFFFF !important;
    --section-bg: #F4F8F7 !important;
    --primary-bg: linear-gradient(135deg, #087F5B 0%, #176B87 100%) !important;
    --headding-bg: #04364A !important;
    --header-top-bg: #04364A !important;
    --body-color: #1C2B2B !important;
    --primary-color: #087F5B !important;
    --secondary-color: #176B87 !important;
    --headding-color: #04364A !important;
    --white-color: #FFFFFF !important;
    --no-change-color1: #04364A !important;
    --dark-bg: #04364A !important;
    --border-color: #E3ECE9 !important;
    --ct-border-color: #DCE8E4 !important;
    --ct-border-color2: #DCE8E4 !important;
    --ct-border-color3: #DCE8E4 !important;
}

/* Si la demo activa accidentalmente un modo dark/blue, mantenemos Versionum */
[data-bs-theme="dark"],
[data-bs-theme="blue"] {
    --body-bg: #FFFFFF !important;
    --white-bg: #FFFFFF !important;
    --section-bg: #F4F8F7 !important;
    --primary-bg: linear-gradient(135deg, #087F5B 0%, #176B87 100%) !important;
    --body-color: #1C2B2B !important;
    --primary-color: #087F5B !important;
    --secondary-color: #176B87 !important;
    --headding-color: #04364A !important;
    --white-color: #FFFFFF !important;
}

/* ----------------------------------------------------------
   2. BASE
   ---------------------------------------------------------- */
body {
    color: var(--versionum-text);
    background: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--versionum-dark-blue);
}

::selection {
    background: var(--versionum-primary);
    color: #FFFFFF;
}

.section-bg {
    background-color: var(--versionum-bg) !important;
}

/* ----------------------------------------------------------
   3. BOTONES ITGEN
   ---------------------------------------------------------- */
.button-1 {
    background: var(--versionum-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--versionum-primary) !important;
}

.button-1::after {
    background: var(--versionum-dark-blue) !important;
}

.button-1:hover {
    color: #FFFFFF !important;
}

.button-1.style-2 {
    background: var(--versionum-dark-blue) !important;
    color: #FFFFFF !important;
}

.button-1.style-2::after {
    background: var(--versionum-primary-light) !important;
}

.button-2:hover {
    background: var(--versionum-primary) !important;
    border-color: var(--versionum-primary) !important;
    color: #FFFFFF !important;
}

/* ----------------------------------------------------------
   4. HEADER Y MENU
   El header de Demo 2 está sobre el hero, por eso se mantiene blanco.
   ---------------------------------------------------------- */
.header .menu > ul > li > a {
    color: #FFFFFF;
}

.header .menu > ul > li:hover > a,
.header .menu > ul > li.current-menu-item > a,
.header .menu > ul > li.current_page_item > a {
    color: var(--versionum-accent) !important;
}

.menu ul li > ul li a:hover {
    color: var(--versionum-primary) !important;
}

.header .button-1 {
    background: var(--versionum-primary) !important;
}

.header .button-1::after {
    background: #FFFFFF !important;
}

.header .button-1:hover {
    color: var(--versionum-primary) !important;
}

/* Header sticky: más legible sobre fondo claro */
.header.sticky-header.sticky {
    background: #FFFFFF !important;
}

.header.sticky-header.sticky .menu > ul > li > a {
    color: var(--versionum-dark-blue) !important;
}

.header.sticky-header.sticky .menu > ul > li:hover > a,
.header.sticky-header.sticky .menu > ul > li.current-menu-item > a {
    color: var(--versionum-primary) !important;
}

/* ----------------------------------------------------------
   5. HERO - DEMO 2 (.ct-hero-section3)
   ---------------------------------------------------------- */
.ct-hero-section3 .content h4 {
    color: var(--versionum-accent) !important;
}

.ct-hero-section3 .content h2 {
    color: #FFFFFF !important;
}

.ct-hero-section3 .content h2 span {
    color: var(--versionum-accent) !important;
}

.ct-hero-section3 .content p {
    color: #FFFFFF !important;
}

.ct-hero-section3 .content .h-button a.button-1 {
    background: var(--versionum-primary) !important;
}

.ct-hero-section3 .content .h-button a.button-1::after {
    background: #FFFFFF !important;
}

.ct-hero-section3 .content .h-button a.button-1:hover {
    color: var(--versionum-primary) !important;
}

.ct-hero-section3 .content .h-button.vedio .video-btn a,
.ct-video-banner-image .video-btn a,
.ct-video-banner-image .container-fluid a.video-p-btn {
    color: var(--versionum-primary) !important;
}

.ct-hero-section3 .content .h-button.vedio .video-btn a:hover,
.ct-video-banner-image .video-btn a:hover,
.ct-video-banner-image .container-fluid a.video-p-btn:hover {
    background: var(--versionum-primary) !important;
    color: #FFFFFF !important;
}

/* ----------------------------------------------------------
   6. TITULOS DE SECCION
   ---------------------------------------------------------- */
.ct-section-title h4 {
    color: var(--versionum-primary) !important;
}

.ct-section-title h4::before,
.ct-section-title h4::after {
    background-color: var(--versionum-primary) !important;
}

.ct-section-title h2 {
    color: var(--versionum-dark-blue) !important;
}

.ct-section-title h2 span {
    color: var(--versionum-primary) !important;
}

.cta-versionum h1,
.cta-versionum h2,
.cta-versionum h3,
.cta-versionum .section-title {
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   7. SOBRE NOSOTROS - DEMO 2
   ---------------------------------------------------------- */
.ct-about-us-section3 .ct-about-us-image .experience h4,
.ct-about-us-section3 .about-avatar span.talk {
    background: linear-gradient(135deg, #087F5B 0%, #176B87 100%) !important;
}

.ct-about-us-section3 .about-avatar span.talk {
    color: #FFFFFF !important;
}

.ct-about-us-image .ab-im-content .icon {
    -webkit-text-stroke-color: var(--versionum-primary) !important;
    background: var(--versionum-bg) !important;
}

.ct-about-us-section3 .ct-about-us-image .experience h4 {
    background: linear-gradient(
        to right,
        #087F5B,
        #20C997
    ) !important;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.quitar-avatar-about .about-avatar {
    display: none !important;
}

/* ----------------------------------------------------------
   8. SERVICIOS - DEMO 2 / STYLE 3
   ---------------------------------------------------------- */
.services-card-item-style3 {
    border-color: #DCE8E4 !important;
    background: #FFFFFF;
}

.services-card-item-style3 .icon .ic {
    color: var(--versionum-primary) !important;
}

.services-card-item-style3 .icon .ic svg {
    fill: var(--versionum-primary) !important;
}

.services-card-item-style3 .content h2 {
    color: var(--versionum-dark-blue);
}

.services-card-item-style3 a {
    color: var(--versionum-dark-blue) !important;
    border-color: #DCE8E4 !important;
}

.services-card-item-style3:hover {
    background: var(--versionum-primary) !important;
    border-color: var(--versionum-primary) !important;
}

.services-card-item-style3:hover .icon .ic {
    color: #FFFFFF !important;
}

.services-card-item-style3:hover .icon .ic svg {
    fill: #FFFFFF !important;
}

.services-card-item-style3:hover .content h2,
.services-card-item-style3:hover .content p,
.services-card-item-style3:hover a {
    color: #FFFFFF !important;
}

.services-card-item-style3 a:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--versionum-primary) !important;
}

/* ----------------------------------------------------------
   9. PORTFOLIO / PROYECTOS
   ---------------------------------------------------------- */
.portfolio-slider-full2 .portfolio-nav i:hover {
    background: var(--versionum-primary) !important;
    color: #FFFFFF !important;
}

.portfolio-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    border-color: var(--versionum-primary) !important;
}

.portfolio-item-single-style2 .content h2 a:hover {
    color: var(--versionum-accent) !important;
}

/* ----------------------------------------------------------
   10. PRICING
   ---------------------------------------------------------- */
.ct-pricing-p-section2 .list-p-s .si-item:hover .icon,
.ct-pricing-p-section2 .ct-p-t-s ul li.active,
.ct-pricing-card2 .badge-text {
    background: var(--versionum-primary) !important;
    color: #FFFFFF !important;
}

.ct-pricing-card2.yes {
    border-color: var(--versionum-primary) !important;
}

.ct-pricing-card2 strong {
    color: var(--versionum-primary) !important;
}

.ct-pricing-p-section2 .ct-p-t-s ul li span {
    background: var(--versionum-dark-blue) !important;
}

/* ----------------------------------------------------------
   11. TESTIMONIOS
   ---------------------------------------------------------- */
.testimonial-left-rating .rating i,
.testimonial-card .rating-a .rating i,
.testimonial-card-2 .rating-a .rating i,
.testimonial-card-3 .rating-a .rating i {
    color: var(--versionum-primary-light) !important;
}

.testimonial-left-rating .tes-nav i:hover,
.testimonial-slider-full-2 .tes-nav i:hover {
    background: var(--versionum-primary) !important;
    color: #FFFFFF !important;
}

.testimonial-slider-full-2 .swiper-pagination-bullet.swiper-pagination-bullet-active,
.testimonial-slider-3 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--versionum-primary) !important;
}

/* ----------------------------------------------------------
   12. EQUIPO
   ---------------------------------------------------------- */
.team-card-single .social,
.team-card-single .content h4,
.team-card-single .content p {
    background: var(--versionum-primary) !important;
}

.team-card-single .social span a:hover {
    color: var(--versionum-accent) !important;
}

/* ----------------------------------------------------------
   13. BLOG
   ---------------------------------------------------------- */
.blog-single-item .content .title h3 a:hover,
.blog-single-item .content .date i {
    color: var(--versionum-primary) !important;
}

/* ----------------------------------------------------------
   14. FAQ / ACORDEONES
   Colores generales de Bootstrap usados por el widget.
   ---------------------------------------------------------- */
.accordion-button:not(.collapsed) {
    color: var(--versionum-primary) !important;
    background-color: var(--versionum-bg) !important;
}

.accordion-button:focus {
    border-color: var(--versionum-primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(8, 127, 91, 0.15) !important;
}

/* ----------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------- */

.site-footer {
    background-color: var(--versionum-dark-blue) !important;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.12) !important;
}

.footer-social span a {
    background: var(--versionum-primary) !important;
    color: #FFFFFF !important;
}

.footer-social span a:hover {
    background: #FFFFFF !important;
    color: var(--versionum-primary) !important;
}

.footer-widgets-item ul.menu li a:hover,
.footer-bottom .copy-text p a:hover {
    color: var(--versionum-accent) !important;
}


/* ----------------------------------------------------------
   15.1 AJUSTE ESTRUCTURAL DEL FOOTER
   ---------------------------------------------------------- */

/* Espaciado general */
.site-footer .footer-top {
    padding-top: 60px;
    padding-bottom: 35px;
}


/* Logo y primera columna */
.site-footer .footer-widgets-item .f-logo {
    margin-bottom: 24px;
}

.site-footer .footer-widgets-item .f-logo img {
    width: 100%;
    max-width: 250px;
    height: auto;
    display: block;
}

.site-footer .footer-widgets-item > p.content {
    max-width: 280px;
    margin-bottom: 24px;
    line-height: 1.7;
}


/* Títulos */
.site-footer .footer-widgets-item h2 {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 22px;
}


/* Menús Legal y Navegación */
.site-footer .footer-widgets-item ul.menu {
    float: none;
    margin: 0;
    padding: 0;
}

.site-footer .footer-widgets-item ul.menu li a {
    margin: 5px 0;
    line-height: 1.5;
}


/* Contacto */
.site-footer .footer-widgets-item ul.contact-info {
    margin: 0;
    padding: 0;
}

.site-footer .footer-widgets-item ul.contact-info li {
    margin-bottom: 22px;
    align-items: flex-start;
}

.site-footer .footer-widgets-item ul.contact-info li:last-child {
    margin-bottom: 0;
}

.site-footer .footer-widgets-item ul.contact-info li .icon {
    flex: 0 0 auto;
}

.site-footer .footer-widgets-item ul.contact-info li .icon i {
    width: 44px;
    height: 44px;
    margin-right: 16px;
}

.site-footer .footer-widgets-item ul.contact-info li .content {
    min-width: 0;
}

.site-footer .footer-widgets-item ul.contact-info li .content h4 {
    margin-bottom: 0;
    line-height: 1.4;
}

.site-footer .footer-widgets-item ul.contact-info li .content p {
    margin-top: 3px;
    line-height: 1.55;
}

/* ----------------------------------------------------------
   15.2 CENTRADO DEL CONTENIDO DEL FOOTER
   ---------------------------------------------------------- */

.site-footer .footer-top .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.site-footer .footer-top .row {
    justify-content: center;
}

/* ----------------------------------------------------------
   15.3 DISTRIBUCIÓN DE COLUMNAS - ESCRITORIO
   ITgen original: 25% / 25% / 25% / 25%
   Versionum:       25% / 17% / 17% / 34%
   ---------------------------------------------------------- */

@media (min-width: 1200px) {

    /* Logo / descripción */
    .site-footer .footer-top .row > div:nth-child(1) {
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%;
    }

    /* Legal */
    .site-footer .footer-top .row > div:nth-child(2) {
        flex: 0 0 17%;
        width: 17%;
        max-width: 17%;
    }

    /* Navegación */
    .site-footer .footer-top .row > div:nth-child(3) {
        flex: 0 0 17%;
        width: 17%;
        max-width: 17%;
    }

    /* Contacto */
    .site-footer .footer-top .row > div:nth-child(4) {
        flex: 0 0 34%;
        width: 34%;
        max-width: 34%;
    }
}

/* ----------------------------------------------------------
   15.3 TABLET
   Mantiene la estructura 2x2 original de Bootstrap
   ---------------------------------------------------------- */

@media (min-width: 576px) and (max-width: 991px) {

    .site-footer .footer-top .row > div {
        margin-bottom: 40px;
    }

    .site-footer .footer-widgets-item .f-logo img {
        max-width: 230px;
    }
}


/* ----------------------------------------------------------
   15.4 MÓVIL
   ---------------------------------------------------------- */

@media (max-width: 575px) {

    .site-footer .footer-top {
        padding-top: 45px;
        padding-bottom: 20px;
    }

    .site-footer .footer-top .row > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 35px;
    }

    .site-footer .footer-top .row > div:last-child {
        margin-bottom: 0;
    }

    .site-footer .footer-widgets-item .f-logo img {
        max-width: 220px;
    }

    .site-footer .footer-widgets-item > p.content {
        max-width: 100%;
    }

    .site-footer .footer-widgets-item h2 {
        font-size: 20px;
        margin-bottom: 16px;
    }
}


/* ----------------------------------------------------------
   16. ELEMENTOS AUXILIARES / COLORES AZULES FIJOS DEL TEMA
   ---------------------------------------------------------- */
.portfolio-details-full .project-info-s {
    background: var(--versionum-primary) !important;
}

.portfolio-details-full .project-info-s .blog-share span a {
    background: var(--versionum-blue) !important;
}

.portfolio-details-full .portfolio-sidebar .po-contact-info .list .item .icon i {
    color: var(--versionum-primary) !important;
    background: rgba(8, 127, 91, 0.12) !important;
}

.single-widgets h2::after,
.single-widgets h3::after {
    background: var(--versionum-primary) !important;
}

/* ----------------------------------------------------------
   17. FORMULARIOS
   ---------------------------------------------------------- */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--versionum-primary) !important;
    outline-color: var(--versionum-primary) !important;
}

input[type="submit"],
button[type="submit"] {
    background-color: var(--versionum-primary);
    color: #FFFFFF;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--versionum-primary-light);
}

.privacy-check .wpcf7-list-item {
    margin: 0;
}

.privacy-check .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.privacy-check input[type="checkbox"] {
    margin: 0;
    width: auto;
    height: auto;
}

.privacy-check {
    text-align: left;
}

/* ----------------------------------------------------------
   18. RESPONSIVE - SIN CAMBIAR ESTRUCTURA
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .offcanvas_menu_wrapper a:hover,
    .offcanvas_menu_wrapper .active > a {
        color: var(--versionum-primary) !important;
    }
}


/* ==============================
   VERSIONUM - PRELOADER
   ============================== */

.preloader {
    background-color: #04364A !important;
}

.loading-container,
.loading {
    width: 120px !important;
    height: 120px !important;
}

.loading {
    border: 2px solid transparent !important;
    border-color:
        transparent #20C997
        transparent #20C997 !important;

    animation: rotate-loading 1.2s linear infinite !important;
}

#loading-icon {
    width: 70px !important;
    max-width: 70px !important;
}

#loading-icon img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* ==================================================
   WHY CHOOSE US 2 - Subtítulo estilo Versionum
   ================================================== */

.ct-why-choose-us-section2 .ct-section-title h4 {
    font-size: 14px !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;

    border: 1px solid var(--ct-border-color) !important;
    display: inline-flex !important;

    padding: 8px 24px !important;
    border-radius: 30px !important;
    line-height: 24px !important;

    background: #e2e8f04d !important;
    color: var(--primary-color) !important;

    margin-bottom: 18px !important;
}

/* Quitar las líneas decorativas originales */
.ct-why-choose-us-section2 .ct-section-title h4::before,
.ct-why-choose-us-section2 .ct-section-title h4::after {
    display: none !important;
    content: none !important;
}


/*================================================
	Nosotros - Logos de empresas
================================================*/
.versionum-client-logos img {
    height: 80px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
}
/* ==================================================
   BREADCRUMB - RESPONSIVE VERSIONUM
   ================================================== */

@media (max-width: 767px) {

    .breadcrumb-section {
        padding-top: 65px !important;
        padding-bottom: 65px !important;

        background-size: cover !important;
        background-position: center center !important;
    }

    .breadcrumb-section .content h2 {
        font-size: 30px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .breadcrumb-section .content ul li {
        font-size: 16px !important;
    }
}

/* ==============================
   VERSIONUM - BREADCRUMB MÁS FINO
   ============================== */

.breadcrumb-area,
.breadcrumb-section,
.page-banner,
.page-title-area {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.breadcrumb-area h1,
.breadcrumb-section h1,
.page-banner h1,
.page-title-area h1 {
    font-size: 42px !important;
    margin-bottom: 10px !important;
}

/* ========================================
   VERSIONUM - Breadcrumb servicios
   ======================================== */

.versionum-breadcrumb-dark .breadcrumb-section {
    background-size: 105% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Capa oscura */
.versionum-breadcrumb-dark .breadcrumb-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 54, 74, 0.40);
    z-index: -1;
}



/* =========================================
   CTA VERSIONUM
   ========================================= */

.cta-versionum {
    background: var(--versionum-primary) !important;
}

.cta-versionum .button-1 {
    background: #228BE6 !important;
    border-color: #228BE6 !important;
    color: #FFFFFF !important;
}

.cta-versionum .button-1::after {
    background: #04364A !important;
}

.cta-versionum .button-1:hover {
    color: #FFFFFF !important;
}

/* =========================================================
   Why Choose Us 2 + Tarjeta (widget del tema hijo)
   Sustituye a TODO el bloque anterior de este widget
   ========================================================= */

/* Imagen horizontal a tamaño natural: se ve completa */
.ct-why-has-card .ct-why-media {
    position: relative;          /* referencia para la tarjeta */
}
.ct-why-has-card .ct-why-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tarjeta superpuesta dentro de la imagen, abajo a la izquierda */
.ct-why-has-card .ct-why-card {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 3;
    max-width: calc(100% - 60px);
    padding: 14px 22px;
    background: var(--white-bg, #fff);
    border-radius: 10px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .15);
}
.ct-why-has-card .ct-why-card-name {
    margin: 0 0 2px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--headding-color);
}
.ct-why-has-card .ct-why-card-role {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Móvil/tablet: imagen encima del texto */
@media (max-width: 991px) {
    .ct-why-has-card .ct-why-media-col {
        padding-top: 60px;
    }
    .ct-why-has-card .ct-why-card {
        left: 15px;
        bottom: 15px;
        max-width: calc(100% - 30px);
        padding: 10px 16px;
    }
    .ct-why-has-card .ct-why-card-name { font-size: 18px; }
    .ct-why-has-card .ct-why-card-role { font-size: 15px; }
}

/* Imagen más grande que su columna, creciendo hacia el borde exterior */
@media (min-width: 992px) {
    .ct-why-has-card .ct-why-media-col { display: flex; }
    .ct-why-has-card .ct-why-media-col.img-left { justify-content: flex-end; }
    .ct-why-has-card .ct-why-media { flex-shrink: 0; }
}
@media (max-width: 991px) {
    .ct-why-has-card .ct-why-media { width: 100% !important; }
}