/**
* Template Name: Dewi
* Template URL: https://bootstrapmade.com/dewi-free-multi-purpose-html-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/


/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/


/* Fonts */

:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway", sans-serif;
    --nav-font: "Inter", sans-serif;
}


/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */

:root {
    --background-color: #ffffff;
    /* Background color for the entire website, including individual sections */
    --default-color: #444444;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #273d4e;
    /* Color for headings, subheadings and title throughout the website */
    --accent-color: #2d7df6;
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff;
    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}


/* 
--accent-color: #ff4a17;
lo cambio por #2d7df6 */


/* 
--nav-hover-color: #ff4a17;  cambio por azul*/


/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */

:root {
    --nav-color: #e5eaee;
    /* The default color of the main navmenu links */
    --nav-hover-color: #2d7df6;
    /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff;
    /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff;
    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #444444;
    /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #ff4a17;
    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}


/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f1f4fa;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #000910;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #28323a;
    --contrast-color: #ffffff;
}


/* Smooth scroll */

:root {
    scroll-behavior: smooth;
}


/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/

body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}


/* PHP Email Form Messages
------------------------------*/

.php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Pulsating Play Button
------------------------------*/

.pulsating-play-btn {
    width: 94px;
    height: 94px;
    background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
    border-radius: 50%;
    display: block;
    position: relative;
    overflow: hidden;
}

.pulsating-play-btn:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    animation-delay: 0s;
    animation: pulsate-play-btn 2s;
    animation-direction: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    animation: none;
    border-radius: 0;
}

.pulsating-play-btn:hover:after {
    border-left: 15px solid var(--accent-color);
    transform: scale(20);
}

@keyframes pulsate-play-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}


/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/

.header {
    --background-color: rgba(0, 0, 0, 0);
    --default-color: #ffffff;
    --heading-color: #ffffff;
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 20px 0;
    transition: all 0.5s;
    z-index: 997;
}

.header .logo {
    line-height: 1;
}

.header .logo img {
    max-height: 36px;
    margin-right: 8px;
}

.header .logo h1 {
    font-size: 30px;
    margin: 0;
    font-weight: 700;
    color: var(--heading-color);
}

.header .cta-btn,
.header .cta-btn:focus {
    color: var(--contrast-color);
    font-size: 13px;
    padding: 7px 25px;
    margin: 0 0 0 30px;
    border-radius: 4px;
    transition: 0.3s;
    text-transform: uppercase;
    border: 2px solid var(--contrast-color);
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
    color: var(--contrast-color);
    background: var(--accent-color);
    border-color: var(--accent-color);
}

@media (max-width: 1200px) {
    .header .logo {
        order: 1;
    }
    .header .cta-btn {
        order: 2;
        margin: 0 15px 0 0;
        padding: 6px 15px;
    }
    .header .navmenu {
        order: 3;
    }
}

.scrolled .header {
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}


/* Global Header on Scroll
------------------------------*/

.scrolled .header {
    --background-color: rgba(21, 34, 43, 0.85);
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/


/* Desktop Navigation */

@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }
    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }
    .navmenu li {
        position: relative;
    }
    .navmenu>ul>li {
        white-space: nowrap;
        padding: 15px 14px;
    }
    .navmenu>ul>li:last-child {
        padding-right: 0;
    }
    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        font-size: 13px;
        padding: 0 2px;
        font-family: var(--nav-font);
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
        position: relative;
        text-transform: uppercase;
    }
    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }
    .navmenu>ul>li>a:before {
        content: "";
        position: absolute;
        height: 2px;
        bottom: -6px;
        left: 0;
        background-color: var(--nav-hover-color);
        visibility: hidden;
        width: 0px;
        transition: all 0.3s ease-in-out 0s;
    }
    .navmenu a:hover:before,
    .navmenu li:hover>a:before,
    .navmenu .active:before {
        visibility: visible;
        width: 100%;
    }
    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
        color: color-mix(in srgb, var(--nav-color) 90%, white 15%);
    }
    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }
    .navmenu .dropdown ul li {
        min-width: 200px;
    }
    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
        color: var(--nav-dropdown-color);
    }
    .navmenu .dropdown ul a i {
        font-size: 12px;
    }
    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
        color: var(--nav-dropdown-hover-color);
    }
    .navmenu .dropdown:hover>ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }
    .navmenu .dropdown .dropdown ul {
        top: 0;
        left: -90%;
        visibility: hidden;
    }
    .navmenu .dropdown .dropdown:hover>ul {
        opacity: 1;
        top: 0;
        left: -100%;
        visibility: visible;
    }
}


/* Mobile Navigation */

@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }
    .navmenu {
        padding: 0;
        z-index: 9997;
    }
    .navmenu ul {
        display: none;
        list-style: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
    }
    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-dropdown-color);
        padding: 10px 20px;
        font-family: var(--nav-font);
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }
    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    }
    .navmenu a i:hover,
    .navmenu a:focus i:hover {
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }
    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-dropdown-hover-color);
    }
    .navmenu .active i,
    .navmenu .active:focus i {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        transform: rotate(180deg);
    }
    .navmenu .dropdown ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        background-color: var(--nav-dropdown-background-color);
        transition: all 0.5s ease-in-out;
    }
    .navmenu .dropdown ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }
    .navmenu .dropdown>.dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }
    .mobile-nav-active {
        overflow: hidden;
    }
    .mobile-nav-active .mobile-nav-toggle {
        color: #fff;
        position: absolute;
        font-size: 32px;
        top: 15px;
        right: 15px;
        margin-right: 0;
        z-index: 9999;
    }
    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }
    .mobile-nav-active .navmenu>ul {
        display: block;
    }
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/

.footer {
    color: var(--default-color);
    background-color: var(--background-color);
    font-size: 14px;
    position: relative;
}

.footer .footer-top {
    padding-top: 50px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
    line-height: 1;
    margin-bottom: 25px;
}

.footer .footer-about .logo img {
    max-height: 40px;
    margin-right: 6px;
}

.footer .footer-about .logo span {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: var(--heading-font);
    color: var(--heading-color);
}

.footer .footer-about p {
    font-size: 14px;
    font-family: var(--heading-font);
}

.footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-right: 10px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.footer h4 {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-bottom: 12px;
}

.footer .footer-links {
    margin-bottom: 30px;
}

.footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-links ul i {
    padding-right: 3px;
    font-size: 13px;
    line-height: 0;
    color: var(--accent-color);
}

.footer .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.footer .footer-links ul li:first-child {
    padding-top: 0;
}

.footer .footer-links ul a {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    display: inline-block;
    line-height: 1;
}

.footer .footer-links ul a:hover {
    color: var(--accent-color);
}

.footer .footer-contact p {
    margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
    margin-top: 30px;
    margin-bottom: 15px;
    padding: 6px 8px;
    position: relative;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    display: flex;
    background-color: var(--background-color);
    transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
    border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
    border: 0;
    padding: 4px;
    width: 100%;
    background-color: var(--background-color);
    color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
    outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
    border: 0;
    font-size: 16px;
    padding: 0 20px;
    margin: -7px -8px -7px 0;
    background: var(--accent-color);
    color: var(--contrast-color);
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .copyright {
    padding: 25px 0;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
    margin-bottom: 0;
}

.footer .credits {
    margin-top: 6px;
    font-size: 13px;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    background: var(--background-color);
    transition: all 0.6s ease-out;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #ffffff;
    border-color: var(--accent-color) transparent var(--accent-color) transparent;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/

.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Casos de Éxito
--------------------------------------------------------------*/
:root {
    --success-gradient: linear-gradient(135deg, #1c3e9b 0%, #145694 100%);
    --card-shadow: 0 8px 32px rgba(45, 125, 246, 0.12);
    --card-shadow-hover: 0 16px 48px rgba(45, 125, 246, 0.18);
}

/* Animaciones */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    33% { transform: translateY(-30px) rotate(120deg) scale(1.1); }
    66% { transform: translateY(15px) rotate(240deg) scale(0.9); }
}

@keyframes gentlePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* Componentes de tarjetas */
.success-card {
    background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    height: 100%;
    position: relative;
}

.success-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--success-gradient);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.success-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--accent-color);
}

.success-card:hover::before {
    transform: scaleX(1);
}

/* Badges */
.industry-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.75rem;
    /* text-transform: uppercase; */
    letter-spacing: 0.5px;
    color: var(--heading-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.result-badge {
    background: var(--success-gradient);
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 6px 20px rgba(45, 125, 246, 0.4);
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
}

/* Tech Stack */
.tech-stack-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.tech-tag {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    color: var(--accent-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
    transition: all 0.2s ease;
}

.tech-tag:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-1px);
}

/* Testimonios mejorados */
.testimonial-card {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

.testimonial-card:hover {
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow);
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 4rem;
    color: color-mix(in srgb, var(--accent-color), transparent 80%);
    font-family: serif;
    line-height: 1;
}

/* Sistema de métricas */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

.metric-item {
    padding: 0.5rem;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.98rem;
}

.metric-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.result-value {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Utilidades de color */
.bg-purple {
    background-color: #8b5cf6 !important;
    color: white !important;
}

.aws-tech {
    background: #fff1e6 !important;
    color: #ff9900 !important;
}

.azure-tech {
    background: #e6f2ff !important;
    color: #0078d4 !important;
}

/* Estados animados */
.metric-pulse {
    animation: gentlePulse 3s ease-in-out infinite;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.floating-shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

/* Responsive para componentes migrados */
@media (max-width: 768px) {
    .success-card:hover {
        transform: translateY(-4px);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .metric-value {
        font-size: 1.1rem;
    }
    
    .floating-shape {
        display: none;
    }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}


/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/

.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 0 80px 0;
    text-align: center;
    position: relative;
}

.page-title:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 30%);
    position: absolute;
    inset: 0;
}

.page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
    padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}


/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/

section,
.section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 90px;
    overflow: clip;
}

@media (max-width: 1199px) {
    section,
    .section {
        scroll-margin-top: 76px;
    }
}


/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/

.section-title {
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    line-height: 1px;
    margin: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    position: relative;
}

.section-title h2::after {
    content: "";
    width: 120px;
    height: 1px;
    display: inline-block;
    background: var(--accent-color);
    margin: 4px 10px;
}

.section-title p {
    color: var(--heading-color);
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: var(--heading-font);
}

@media (max-width: 768px) {
    .section-title p {
        font-size: 24px;
    }
}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 30%);
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
}

.hero p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin: 10px 0 0 0;
    font-size: 24px;
}

.hero .btn-get-started {
    background: var(--accent-color);
    color: var(--contrast-color);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 4px;
    transition: 0.3s;
    text-transform: uppercase;
}

.hero .btn-get-started:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.hero .btn-watch-video {
    font-size: 16px;
    transition: 0.5s;
    margin-left: 25px;
    font-weight: 400;
    color: var(--default-color);
}

.hero .btn-watch-video i {
    color: var(--accent-color);
    font-size: 32px;
    transition: 0.3s;
    line-height: 0;
    margin-right: 8px;
}

.hero .btn-watch-video:hover {
    color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
    color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@media (max-width: 768px) {
    .hero h2 {
        font-size: 32px;
    }
    .hero p {
        font-size: 18px;
    }
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

.about h3 {
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 20px;
}

.about .fst-italic {
    color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
    list-style: none;
    padding: 0;
}

.about .content ul li {
    padding: 0 0 10px 30px;
    position: relative;
}

.about .content ul i {
    position: absolute;
    font-size: 20px;
    left: 0;
    top: -3px;
    color: var(--accent-color);
}

.about .content p:last-child {
    margin-bottom: 0;
}

.about .pulsating-play-btn {
    position: absolute;
    left: calc(50% - 47px);
    top: calc(50% - 47px);
}


/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/

.stats .stats-item {
    background-color: var(--surface-color);
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.stats .stats-item i {
    color: var(--accent-color);
    font-size: 42px;
    line-height: 0;
    margin-right: 20px;
}

.stats .stats-item span {
    color: var(--heading-color);
    font-size: 36px;
    display: block;
    font-weight: 600;
}

.stats .stats-item p {
    padding: 0;
    margin: 0;
    font-family: var(--heading-font);
    font-size: 16px;
}


/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/

.services .img {
    border-radius: 8px;
    overflow: hidden;
}

.services .img img {
    transition: 0.6s;
}

.services .details {
    background: color-mix(in srgb, var(--surface-color), transparent 5%);
    padding: 50px 30px;
    margin: -100px 30px 0 30px;
    transition: all ease-in-out 0.3s;
    position: relative;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
}

.services .details .icon {
    margin: 0;
    width: 72px;
    height: 72px;
    background: var(--accent-color);
    color: var(--contrast-color);
    border: 6px solid var(--contrast-color);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 28px;
    transition: ease-in-out 0.3s;
    position: absolute;
    top: -36px;
    left: calc(50% - 36px);
}

.services .details h3 {
    font-weight: 700;
    margin: 10px 0 15px 0;
    font-size: 22px;
    transition: ease-in-out 0.3s;
}

.services .details p {
    color: color-mix(in srgb, var(--default-color), transparent 10%);
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.services .service-item:hover .details h3 {
    color: var(--accent-color);
}

.services .service-item:hover .details .icon {
    background: var(--surface-color);
    border: 2px solid var(--accent-color);
}

.services .service-item:hover .details .icon i {
    color: var(--accent-color);
}

.services .service-item:hover .img img {
    transform: scale(1.2);
}


/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/

.clients {
    padding: 20px 0;
}

.clients .client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.clients .client-logo img {
    padding: 20px 40px;
    max-width: 90%;
    transition: 0.3s;
    opacity: 0.5;
    filter: grayscale(100);
}

.clients .client-logo img:hover {
    filter: none;
    opacity: 1;
}

@media (max-width: 640px) {
    .clients .client-logo img {
        padding: 20px;
    }
}


/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/

.features .nav-tabs {
    border: 0;
}

.features .nav-link {
    background-color: var(--surface-color);
    color: var(--heading-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    padding: 15px 20px;
    transition: 0.3s;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
}

.features .nav-link i {
    padding-right: 15px;
    font-size: 48px;
}

.features .nav-link h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.features .nav-link:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.features .nav-link.active {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--accent-color);
}

.features .nav-link.active h4 {
    color: var(--contrast-color);
}

@media (max-width: 768px) {
    .features .nav-link i {
        padding: 0;
        line-height: 1;
        font-size: 36px;
    }
}

@media (max-width: 575px) {
    .features .nav-link {
        padding: 15px;
    }
    .features .nav-link i {
        font-size: 24px;
    }
}

.features .tab-content {
    margin-top: 30px;
}

.features .tab-pane h3 {
    color: var(--heading-color);
    font-weight: 700;
    font-size: 26px;
}

.features .tab-pane ul {
    list-style: none;
    padding: 0;
}

.features .tab-pane ul li {
    padding-bottom: 10px;
}

.features .tab-pane ul i {
    font-size: 20px;
    padding-right: 4px;
    color: var(--accent-color);
}

.features .tab-pane p:last-child {
    margin-bottom: 0;
}


/*--------------------------------------------------------------
# Services 2 Section
--------------------------------------------------------------*/

.services-2 .service-item {
    background-color: var(--surface-color);
    padding: 30px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    transition: 0.3s;
}

.services-2 .service-item .icon {
    font-size: 36px;
    line-height: 0;
    margin-right: 30px;
    color: var(--accent-color);
}

.services-2 .service-item .title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 20px;
}

.services-2 .service-item .title a {
    color: var(--heading-color);
}

.services-2 .service-item .description {
    line-height: 24px;
    font-size: 14px;
    margin: 0;
}

.services-2 .service-item:hover {
    border-color: var(--accent-color);
}

.services-2 .service-item:hover .title a {
    color: var(--accent-color);
}


/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/

.testimonials {
    padding: 80px 0;
    position: relative;
}

.testimonials:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 30%);
    position: absolute;
    inset: 0;
    z-index: 2;
}

.testimonials .testimonials-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.testimonials .container {
    position: relative;
    z-index: 3;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
    overflow: hidden;
}

.testimonials .testimonial-item {
    text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
    width: 100px;
    border-radius: 50%;
    border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
    margin: 0 auto;
}

.testimonials .testimonial-item h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    margin: 0 0 15px 0;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.testimonials .testimonial-item .stars {
    margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: 26px;
    line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
    height: auto;
}

.testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: color-mix(in srgb, var(--default-color), transparent 50%);
    opacity: 0.5;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--default-color);
    opacity: 1;
}

@media (min-width: 992px) {
    .testimonials .testimonial-item p {
        width: 80%;
    }
}


/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/

.portfolio .portfolio-filters {
    padding: 0;
    margin: 0 auto 20px auto;
    list-style: none;
    text-align: center;
}

.portfolio .portfolio-filters li {
    cursor: pointer;
    display: inline-block;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    margin: 0 10px;
    line-height: 1;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
    color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
    margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
    margin-right: 0;
}

@media (max-width: 575px) {
    .portfolio .portfolio-filters li {
        font-size: 14px;
        margin: 0 5px;
    }
}

.portfolio .portfolio-content {
    position: relative;
    overflow: hidden;
}

.portfolio .portfolio-content img {
    transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
    opacity: 0;
    position: absolute;
    inset: 0;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
    font-size: 14px;
    padding: 5px 10px;
    font-weight: 400;
    color: #ffffff;
    display: inline-block;
    background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
    position: absolute;
    bottom: 10px;
    text-align: center;
    display: inline-block;
    left: 0;
    right: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
    position: absolute;
    left: calc(50% - 40px);
    font-size: 26px;
    top: calc(50% - 14px);
    color: #fff;
    transition: 0.3s;
    line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
    color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
    left: 50%;
    font-size: 34px;
    line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
    opacity: 1;
}

.portfolio .portfolio-content:hover img {
    transform: scale(1.1);
}


/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/

.team .member {
    position: relative;
}

.team .member .pic {
    overflow: hidden;
    margin-bottom: 50px;
}

.team .member .member-info {
    background-color: var(--surface-color);
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: -50px;
    left: 20px;
    right: 20px;
    padding: 20px 15px;
    overflow: hidden;
    transition: 0.5s;
}

.team .member h4 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 16px;
    position: relative;
    padding-bottom: 10px;
}

.team .member h4::after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 1px;
    background: color-mix(in srgb, var(--default-color), transparent 60%);
    bottom: 0;
    left: 0;
}

.team .member span {
    font-style: italic;
    display: block;
    font-size: 13px;
}

.team .member .social {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.team .member .social a {
    transition: color 0.3s;
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.team .member .social a:hover {
    color: var(--accent-color);
}

.team .member .social i {
    font-size: 16px;
    margin: 0 2px;
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/

.contact .info-item {
    background-color: var(--surface-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    padding: 24px 0 30px 0;
}

.contact .info-item i {
    font-size: 20px;
    color: var(--accent-color);
    width: 56px;
    height: 56px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    border-radius: 50%;
    border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
    font-size: 20px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
}

.contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.contact .php-email-form {
    background-color: var(--surface-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    height: 100%;
    padding: 30px;
}

@media (max-width: 575px) {
    .contact .php-email-form {
        padding: 20px;
    }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: var(--surface-color);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}


/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/

.portfolio-details .portfolio-details-slider img {
    width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: color-mix(in srgb, var(--default-color), transparent 85%);
    opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
    background-color: var(--surface-color);
    padding: 30px;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
    margin-top: 10px;
}

.portfolio-details .portfolio-description {
    padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
    padding: 0;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}


/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/

.service-details .services-list {
    background-color: var(--surface-color);
    padding: 10px 30px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    margin-bottom: 20px;
}

.service-details .services-list a {
    display: block;
    line-height: 1;
    padding: 8px 0 8px 15px;
    border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
    margin: 20px 0;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    transition: 0.3s;
}

.service-details .services-list a.active {
    color: var(--heading-color);
    font-weight: 700;
    border-color: var(--accent-color);
}

.service-details .services-list a:hover {
    border-color: var(--accent-color);
}

.service-details .services-img {
    margin-bottom: 20px;
}

.service-details h3 {
    font-size: 26px;
    font-weight: 700;
}

.service-details h4 {
    font-size: 20px;
    font-weight: 700;
}

.service-details p {
    font-size: 15px;
}

.service-details ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.service-details ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.service-details ul i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--accent-color);
}


/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/


/* .starter-section { */


/* Add your styles here */


/* } */



/* Iconos de las tarjetas de contacto */

.contact .info-item i {
    color: var(--brand-blue);
    border: 2px dashed currentColor;
    width: 60px;
    height: 60px;
    line-height: 56px;
    text-align: center;
    border-radius: 50%;
    font-size: 26px;
    margin-bottom: 10px;
}


/* Botón del formulario: azul, rectangular con bordes redondeados (no pastilla) */

.php-email-form .btn-send {
    background: var(--brand-blue);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    /* menos redondo que una pastilla */
    font-weight: 600;
    transition: transform .05s ease, filter .2s ease;
}

.php-email-form .btn-send:hover {
    filter: brightness(0.92);
}

.php-email-form .btn-send:active {
    transform: translateY(1px);
}


/* Contacto: forzar estilo del botón de envío */

.contact .php-email-form button[type="submit"] {
    background: #2d7df6 !important;
    /* tu azul */
    color: #fff !important;
    border: 0 !important;
    padding: 12px 28px !important;
    border-radius: 5px !important;
    /* rectangular con esquinas suaves */
    font-weight: 600;
    transition: transform .05s ease, filter .2s ease;
}

.contact .php-email-form button[type="submit"]:hover {
    filter: brightness(0.92);
}

.contact .php-email-form button[type="submit"]:active {
    transform: translateY(1px);
}


/* Panel del formulario con sello decorativo */

.contact-form-panel {
    position: relative;
    background: #fff;
    padding: 24px 220px 28px 24px;
    /* espacio a la derecha para el sello */
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}


/* Sello como pseudo-elemento (no interferirá con clicks) */

.contact-form-panel::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 160px;
    /* tamaño del sello */
    aspect-ratio: 1 / 1;
    /* mantiene cuadrado */
    background: url("assets/img/sello_azul_Selkion1.png") no-repeat center / contain;
    opacity: 0.12;
    /* sutil, estilo marca de agua */
    pointer-events: none;
}


/* Ajustes del botón (azul y rectangular con bordes suaves) */

.contact .php-email-form button[type="submit"] {
    background: #2d7df6 !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 28px !important;
    border-radius: 5px !important;
    /* menos circular */
    font-weight: 600;
    transition: transform .05s ease, filter .2s ease;
}

.contact .php-email-form button[type="submit"]:hover {
    filter: brightness(.92);
}

.contact .php-email-form button[type="submit"]:active {
    transform: translateY(1px);
}


/* Responsive: ocultar sello en móviles y recuperar padding */

@media (max-width: 991.98px) {
    .contact-form-panel {
        padding: 20px;
        /* sin hueco a la derecha */
    }
    .contact-form-panel::after {
        display: none;
    }
}



/* Newsletter submit (azul, rectangular con bordes suaves) */

.footer-newsletter .newsletter-form input[type="submit"] {
    background: var(--brand-blue) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 10px 18px !important;
    border-radius: 2px !important;
    /* no pastilla */
    font-weight: 600;
    cursor: pointer;
    transition: filter .2s ease, transform .05s ease;
}

.footer-newsletter .newsletter-form input[type="submit"]:hover {
    filter: brightness(.92);
}

.footer-newsletter .newsletter-form input[type="submit"]:active {
    transform: translateY(1px);
}


/* Scroll-to-top en azul a juego */

#scroll-top.scroll-top {
    background: var(--brand-blue) !important;
    color: #fff !important;
    border-radius: 2px !important;
    /* menos circular que el default */
    width: 40px;
    height: 40px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

#scroll-top.scroll-top i {
    font-size: 24px;
    line-height: 1;
}

#scroll-top.scroll-top:hover {
    filter: brightness(.92);
}

.features .nav-tabs .nav-link.active {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

.features .nav-tabs .nav-link i {
    margin-right: .4rem;
}


.latest-news .single-latest-news {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.latest-news .single-latest-news:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.latest-news .latest-news-bg {
    height: 190px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.latest-news .news-text-box {
    padding: 20px 8px 22px;
    padding: 30px !important;
}

.latest-news .news-text-box h3 {
    font-size: 1.1rem;
    margin: 0 0 .5rem;

}

.latest-news .news-text-box h3 a {
    color: #0f2537;
    text-decoration: none;
}

.latest-news .news-text-box h3 a:hover {
    color: var(--brand-blue);
}

.latest-news .blog-meta {
    font-size: .9rem;
    color: #6b7b8a;
    margin-bottom: .6rem;
}

.latest-news .blog-meta .author,
.latest-news .blog-meta .date {
    margin-right: 14px;
    white-space: nowrap;
}

.latest-news .blog-meta i {
    margin-right: 6px;
}

.latest-news .excerpt {
    color: #4c5a67;
    margin-bottom: .75rem;
}

/* .latest-news .read-more-btn {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-blue);
}

.latest-news .read-more-btn i {
    vertical-align: middle;
} */
.latest-news .read-more-btn {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-blue);
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin-top: auto;
}

.latest-news .read-more-btn i {
    vertical-align: middle;
}

.latest-news .news-text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 60px;
}

.pagination-wrap ul {
    display: inline-flex;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.pagination-wrap a {
    display: block;
    padding: .4rem .7rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1b2a38;
    background: #f2f5f8;
}

.pagination-wrap a.active,
.pagination-wrap a:hover {
    background: var(--brand-blue);
    color: #fff;
}


/* Fondos (pon tus imágenes) */

/* .news-bg-1 {
    background-image: url("assets/img/news/news-1.jpg");
}

.news-bg-2 {
    background-image: url("assets/img/news/news-2.jpg");
}

.news-bg-3 {
    background-image: url("assets/img/news/news-3.jpg");
} */


/* AQUI ES LA SECCIÓN DE LAS TARJETAS DE SOLUCIONES. */

.latest-news .single-latest-news {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.latest-news .single-latest-news:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.latest-news .latest-news-bg {
    height: 190px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.latest-news .news-text-box {
    padding: 20px 18px 22px;
}

.latest-news .news-text-box h3 {
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}

.latest-news .news-text-box h3 a {
    color: #0f2537;
    text-decoration: none;
}

.latest-news .news-text-box h3 a:hover {
    color: var(--brand-blue);
}

.latest-news .blog-meta {
    font-size: .9rem;
    color: #6b7b8a;
    margin-bottom: .6rem;
}

.latest-news .blog-meta .author,
.latest-news .blog-meta .date {
    margin-right: 14px;
    white-space: nowrap;
}

.latest-news .blog-meta i {
    margin-right: 6px;
}

.latest-news .excerpt {
    color: #4c5a67;
    margin-bottom: .75rem;
}

.latest-news .read-more-btn {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-blue);
}

.latest-news .read-more-btn i {
    vertical-align: middle;
}

.pagination-wrap ul {
    display: inline-flex;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.pagination-wrap a {
    display: block;
    padding: .4rem .7rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1b2a38;
    background: #f2f5f8;
}

.pagination-wrap a.active,
.pagination-wrap a:hover {
    background: var(--brand-blue);
    color: #fff;
}

/* Sección breadcrumb con imagen de fondo */

.breadcrumb-section {
    position: relative;
    padding: 110px 0 96px;
    /* altura del banner */
    overflow: hidden;
    color: #fff;
}


/* 
.breadcrumb-bg {
    background: url("assets/img/Fondo_sinletra_selkion.png") center/cover no-repeat;
} */


/* Overlay suave para mejorar el contraste del texto */

.breadcrumb-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .45));
    z-index: 1;
}


/* Texto */

.breadcrumb-text {
    position: relative;
    z-index: 1;
}

.breadcrumb-text p {
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .25rem;
    opacity: .9;
}

.breadcrumb-text h1 {
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    margin: 0;
}


/* Variante de color (opcional): subrayado fino */


/* Imagen de fondo */

.breadcrumb-section::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Imagen leída de una variable, con un fallback global */
  background: var(--breadcrumb-bg,
                 url("../img/soluciones/cloud_consulting.jpeg"))
              center/cover no-repeat;
  z-index: 0; /* debajo de textos/overlay */
}


/* Responsive: reduce altura en móviles */

@media (max-width: 767.98px) {
    .breadcrumb-section {
        padding: 56px 0;
        margin-top: 70px;
    }
}


/* letras e imagen de arriba */

.breadcrumb-section .container {
    margin-top: 80px;
    position: relative;
    z-index: 2;
}


/* Tipografía del hero */

.hero-title {
    color: #fff;
    font-weight: 600;
    line-height: 1.05;
    font-size: clamp(40px, 7.5vw, 72px);
    margin: 0;
}

.hero-lead {
    color: #fff;
    /* fuerza blanco, no gris */
    opacity: 1;
    font-weight : 400;
}


/* Fondos (pon tus imágenes) soluciones_cloud_consulting*/

.news-bg-1 {
    background: url("../img/soluciones/cloud_consulting.png");
}

.news-bg-2 {
    background: url("../img/soluciones/img_devops.png");
}

.news-bg-3 {
    background: url("../img/soluciones/cloud_consulting.png");
}

/* Fondos vista  Cloud Infrastructure imagenes acordeon*/

.news-bg-4 {
    background: url("../img/soluciones/iac_new.jpg");
}

.news-bg-5 {
    background: url("../img/soluciones/entornos_new.jpg");
}

.news-bg-6 {
    background: url("../img/soluciones/migration_new.jpg");
}
/* Fondos vista  Cloud security compilance*/
.news-bg-7 {
    background: url("../img/soluciones/img_security1.jpg");
}

.news-bg-8 {
    background: url("../img/soluciones/img_security2.jpg");
}

.news-bg-9 {
    background: url("../img/soluciones/img_security3.jpg");
}

/* Fondos vista  Cloud optimization  finops*/
.news-bg-10 {
    background: url("../img/soluciones/img_finops1.jpg");
}

.news-bg-11 {
    background: url("../img/soluciones/img_finops2.jpg");
}

.news-bg-12 {
    background: url("../img/soluciones/img_finops3.jpg");
}






/*ACORDENO CLOUD  */

:root {
    --brand-blue: #2d7df6;
    --cc-primary: #2d7df6;     /* azul brand */
  --cc-primary-dark: #1b57c9;
  --cc-azure: #0078d4;
  --cc-aws: #ff9900;
  --cc-text: #1a2633;
  --cc-muted: #667892;
  --cc-bg: #ffffff;
  --cc-surface: #ffffff;
  --cc-light: #f1f5ff;
  --cc-shadow: 0 8px 32px rgba(0,0,0,.08);
  --cc-radius: 12px;
}

.detail-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
    padding: 28px;
    margin-top: 8px;
}

.detail-title {
    font-weight: 800;
    font-size: clamp(22px, 2.2vw, 28px);
    color: #0f2537;
    margin: 0;
}

.detail-list {
    margin: 0 0 .75rem 0;
    padding-left: 1.1rem;
}

.detail-list li {
    margin-bottom: .35rem;
    line-height: 1.55;
}

.detail-list li::marker {
    color: var(--brand-blue);
}

.detail-benefit {
    background: #f4f8ff;
    border-left: 4px solid var(--brand-blue);
    padding: 10px 12px;
    border-radius: 10px;
    margin: 10px 0 0;
}

.btn-cta {
    background: var(--brand-blue);
    border: 0;
    border-radius: 12px;
    font-weight: 700;
}

.btn-cta:hover {
    filter: brightness(.92);
}

/* Tarjetas "latest-news": títulos un poco más grandes y legibles */
.latest-news .single-latest-news .news-text-box h3 {
  font-size: clamp(1.20rem, 1.1vw + 1rem, 1.45rem); /* ~19–23px */
  line-height: 1.25;
  margin-bottom: .35rem;
}

/* Justificar los párrafos de las tarjetas */
.latest-news .single-latest-news .news-text-box .excerpt {
  text-align: justify;
  text-justify: inter-word;  /* reparte mejor los espacios */
  hyphens: auto;             /* cortes de palabra si el navegador lo permite */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Opcional: ligeramente más oscuro para mejorar contraste */
.latest-news .single-latest-news .news-text-box .excerpt,
.latest-news .single-latest-news .news-text-box { color: #1b2a38; }

/* 2) Justificar textos dentro de las tarjetas (por si no lo tenías) */
.news-text-box p.excerpt {
  text-align: justify;
}
/* Si en móviles prefieres no justificar, deshazlo aquí */
@media (max-width: 575.98px){
  .latest-news .single-latest-news .news-text-box .excerpt{
    text-align: left;
  }
}
/* 3) Por coherencia, las listas de detalle también justificadas */
.detail-panel .detail-list {
  text-align: left;
}
.detail-panel p.detail-benefit {
  text-align: justify;
}

/* (opcional) marca visual sutil a los strong del hero titulos de arriba de soluciones le pongo color azul en las negritas */
.breadcrumb-section .hero-lead strong {
  color: #29B7E1 ; /* azul muy claro sobre fondo oscuro #29B7E1  mas oscuro este #2d7df6;*/
  font-weight: 700;
}


/* aqui las imagenes de fondo para cada solucion , si quieres cambiar hazlo aqui que esta metido como variables */
/* .breadcrumb-section.consulting::after{ */
  /* background-image:url("../img/soluciones/cloud_consulting_new.jpg"); */
/* } */
.breadcrumb-section.infra::after{
  background-image:url("../img/soluciones/cloud_infrastructure_new.png");
}
.breadcrumb-section.security::after{
  background-image:url("../img/soluciones/security_compliance_new.png");
}
.breadcrumb-section.finops::after{
  background-image:url("../img/soluciones/optimization_finops.jpeg");
}
.breadcrumb-section.contacto::after{
  background-image:url("../img/nosotros/sobre_nosotrosV2.jpeg");
}

/* VISTA contato */
/* Imagen superior izquierda algo más compacta */
.contact-hero{object-fit:cover; width:100%; max-height:240px}

/* Tarjetas compactas de la izquierda */
.contact-left-card{
  background:#fff;border-radius:12px;padding:22px;
  box-shadow:0 8px 24px rgba(24, 39, 75, .08);
  text-align:center
}
.contact-left-card i{
  font-size:28px;line-height:1;color:#2b66ff;
  border:2px dashed #2b66ff;border-radius:50%;
  width:64px;height:64px;display:grid;place-items:center;margin-bottom:10px
}
.contact-left-card h3{font-size:18px;margin:4px 0 6px}



/* Estados del formulario */
.php-email-form .loading{padding:.75rem 1rem;background:#f6f6f6;border-radius:.5rem}
.php-email-form .error-message{padding:.75rem 1rem;background:#ffe6e6;color:#b30000;border-radius:.5rem}
.php-email-form .sent-message{padding:.75rem 1rem;background:#e7f5ff;color:#0057b8;border-radius:.5rem}
.d-none{display:none!important}

/* Responsive: separa columnas en móvil */
@media (max-width: 991.98px){
  .contact-hero{max-height:200px}
}
/* Contacto: altura del mensaje */
.php-email-form textarea[name="message"]{
  min-height: 220px;  /* ajústalo a tu gusto */
  resize: vertical;   /* permitir que el usuario lo estire */
}
@media (max-width: 576px){
  .php-email-form textarea[name="message"]{ min-height: 160px; }
}

/* ==========================================
   Cloud Consulting (scoped) – reutilizable
   Para activarlo: <body class="cc"> o <div class="cc">…</div>
   ========================================== */

/* Paleta (solo añadimos si no existen) */
:root {
  --cc-primary-blue: #0066cc;
  --cc-dark-blue: #004499;
  --cc-light-blue: #e6f0ff;
  --cc-azure-blue: #0078d4;
  --cc-aws-orange: #ff9900;
  --cc-dark-bg: #0a0f1c;
  --cc-card-bg: #ffffff;
  --cc-text-dark: #1a1a1a;
  --cc-text-light: #666666;
  --cc-radius: 12px;
  --cc-shadow: 0 8px 32px rgba(0,0,0,.1);
  --cc-transition: all .3s ease;
  --cc-success: #10b981;
}

/* ---------- Hero / breadcrumb ---------- */
.cc .breadcrumb-section {
  background: linear-gradient(135deg, var(--cc-primary-blue) 0%, var(--cc-dark-blue) 100%);
  color: #fff;
  padding: 12rem 0 6rem;
  text-align: center;
  position: relative;
  min-height: 80vh; /* un poco menos que v5 para no chocarse */
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cc .breadcrumb-section::before{
  content:"";
  position:absolute; inset:0;
  background: url('assets/img/soluciones/piña') center/cover no-repeat;
  opacity:.1;
}
.cc .connection-pattern{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.10) 2px, transparent 0),
    radial-gradient(circle at 80% 65%, rgba(255,255,255,.08) 1px, transparent 0);
  background-size:50px 50px, 30px 30px;
  animation: cc-pattern-drift 20s linear infinite;
}
@keyframes cc-pattern-drift { 100% { transform: translate(-50px, -50px); } }

.cc .hero-title{
  font-size: clamp(2.2rem, 3.5vw + 1rem, 3.5rem);
  font-weight: 700;
  font-family:sans-serif;
  margin: 0 0 1.25rem;
  /* background: linear-gradient(45deg, #fff, #e6f0ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; */
      /* recuadro oscuro semitransparente */
  /* background:rgba(233, 227, 227, 0.371);   
  padding: 0 .95em;
  border-radius: .15em;  */
  text-shadow: 3px 3px 8px rgba(0.5, 1, 1, 1);
} 
.cc .hero-lead{
  font-size: 1.40rem;
  max-width: 820px;
  margin: 0 auto;
  opacity:.95;
text-shadow: 3px 3px 8px rgba(0.5, 1, 1, 1);

}
.cc .cloud-providers{
  display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap; margin:1.75rem 0;
}
.cc .provider-badge{
  background: rgba(255,255,255,.12);
  padding: .85rem 1.5rem; border-radius: var(--cc-radius);
  border:1px solid rgba(255,255,255,.25);
  font-weight:600; display:flex; align-items:center; gap:.5rem;
  backdrop-filter: blur(10px);
  transition: var(--cc-transition);
}
.cc .provider-badge:hover{ transform: translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.2);}
.cc .aws-badge   { border-left:4px solid var(--cc-aws-orange); }
.cc .azure-badge { border-left:4px solid var(--cc-azure-blue); }

/* Botones hero */
.cc .btn-cta.btn { background:#fff; color:var(--cc-primary-blue); border:none; }
.cc .btn-cta.btn:hover { transform: translateY(-2px); }
.cc .btn-ghost.btn { color:#fff; border:1px solid rgba(255,255,255,.6);   backdrop-filter: blur(15px);    }
.cc .btn-ghost.btn:hover { background:#fff; color:var(--cc-primary-blue); }

/* ---------- Métricas ---------- */
.cc .impact-metrics { background:#fff; padding:4rem 0; border-bottom:1px solid rgba(0,0,0,.05); }
.cc .metric-card { text-align:center; padding:2rem 1rem; border-radius:var(--cc-radius); transition:var(--cc-transition);}
.cc .metric-card:hover{ transform: translateY(-5px); box-shadow:var(--cc-shadow);}
.cc .metric-value{ font-size:2.25rem; font-weight:700; color:var(--cc-primary-blue); margin-bottom:.25rem;}
.cc .metric-label{ color:var(--cc-text-light); }

/* ---------- Grid de tarjetas ---------- */
.cc .latest-news { padding: 4rem 0; background:#fff; }
.cc .single-latest-news{
  background: var(--cc-card-bg); border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow); border: 1px solid rgba(0,0,0,.05);
  transition: var(--cc-transition); position:relative; overflow:hidden; height:100%;
}
.cc .single-latest-news::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:4px;
  background: linear-gradient(90deg, var(--cc-primary-blue), var(--cc-dark-blue));
}
.cc .single-latest-news:hover{ transform:translateY(-8px); box-shadow:0 16px 48px rgba(0,0,0,.15); }
.cc .latest-news-bg{ height:200px; background-size:cover; background-position:center; transition: var(--cc-transition);}
.cc .news-bg-1 { background-image: url('../img/soluciones/img_cloud.png'); }
.cc .news-bg-2 { background-image: url('../img/soluciones/img_automatizaciones _devOps.png'); }
.cc .news-bg-3 { background-image: url('../img/soluciones/img_capacitación_cloud.png'); }

.cc .news-text-box{ padding:2rem; }
.cc .news-text-box h3{ color:var(--cc-text-dark); font-size:1.35rem; font-weight:600; margin:0 0 .75rem; }
.cc .excerpt{ color:var(--cc-text-light); margin:0 0 1rem; }
.cc .tech-stack{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.25rem; }
.cc .tech-stack span{
  background: var(--cc-light-blue); color: var(--cc-primary-blue);
  padding:.45rem .9rem; border-radius:20px; font-size:.875rem; font-weight:500; transition: var(--cc-transition);
}
.cc .tech-stack span:hover{ transform: translateY(-2px); }
.cc .aws-tech{ background:#fff1e6 !important; color: var(--cc-aws-orange) !important; }
.cc .azure-tech{ background:#e6f2ff !important; color: var(--cc-azure-blue) !important; }

.cc .read-more-btn{
  color: var(--cc-primary-blue); text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:.35rem; transition:var(--cc-transition);
}
.cc .read-more-btn:hover{ gap:.75rem; }

/* ---------- Acordeón de detalles ---------- */
.cc .detail-panel{
  background:#fff; border-radius:var(--cc-radius); box-shadow: var(--cc-shadow);
  padding:2rem 2.25rem; border:1px solid rgba(0,0,0,.1); margin-top:1rem;
}
.cc .detail-title{ color: var(--cc-text-dark); font-size:1.6rem; font-weight:600; margin:0 0 1.1rem;}
.cc .detail-list{ list-style:none; padding:0; margin:0 0 1.5rem; }
.cc .detail-list li{
  position:relative; padding:.5rem 0 .5rem 1.35rem; color: var(--cc-text-light);
}
.cc .detail-list li::before{
  content:'▸'; position:absolute; left:0; color:var(--cc-primary-blue); font-weight:700;
}
.cc .detail-benefit{
  background: var(--cc-light-blue);
  border-left:4px solid var(--cc-primary-blue);
  padding: .85rem 1rem; border-radius: var(--cc-radius); margin:1rem 0 0;
}

/* ---------- Casos de Éxito ---------- */
.cc .success-stories { background: linear-gradient(135deg, var(--cc-light-blue) 0%, #f8fbff 100%); padding: 4.5rem 0; }
.cc .story-card{ background:#fff; border-radius:var(--cc-radius); box-shadow: var(--cc-shadow);
  padding:2rem; height:100%; transition: var(--cc-transition); border-top:4px solid var(--cc-primary-blue); }
.cc .story-card:hover{ transform: translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,.15);}
.cc .client-logo{ height:58px; margin:0 0 1.25rem; filter:grayscale(100%); opacity:.7; transition: var(--cc-transition);}
.cc .story-card:hover .client-logo{ filter:none; opacity:1; }
.cc .result-metric{ display:inline-block; background: var(--cc-success); color:#fff; padding:.25rem .7rem; border-radius:999px; font-size:.85rem; font-weight:600; margin:0 .35rem .35rem 0; }

/* ---------- Partners ---------- */
.cc .partners-section{ padding:4rem 0; background:#fff; }
.cc .partner-logo{ height:72px; filter:grayscale(100%); opacity:.65; transition: var(--cc-transition);}
.cc .partner-logo:hover{ filter:none; opacity:1; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .cc .breadcrumb-section{ padding: 8rem 0 3.5rem; min-height: 70vh; }
  .cc .detail-panel { padding:1.25rem 1.35rem; }
}

/* NOSOTROS CAMBIOS Y ESTILOS */Ç
/* Forzar que en la página Nosotros todo sea Roboto */
.page-nosotros {
  --heading-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
/* Justificar textos en la sección "Visión–Misión" */
/* Visión–Misión: justificar SIN partir palabras */
#vision-mision .content p,
#vision-mision .info-box p {
  text-align: justify;
  text-justify: inter-word;

  /* NO cortar palabras */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  word-break: normal;
  overflow-wrap: normal; /* (o 'break-word' si necesitas evitar desbordes) */
}

/* Aquí termina el CSS existente */

/*--------------------------------------------------------------
# Tech Impact Matrix - Casos de Éxito V4
--------------------------------------------------------------*/

/* VARIABLES ESPECÍFICAS DE MATRIX */
:root {
    --matrix-bg: #ffffff;
    --matrix-border: #e2e8f0;
    --matrix-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --azure-color: #0078d4;
    --aws-color: #ff9900;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
}

/* MATRIX NAV */
.matrix-nav {
    position: relative;
}

.nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.nav-scroll::-webkit-scrollbar {
    display: none;
}

.nav-items {
    display: inline-flex;
    gap: 0.75rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 12px;
    min-width: min-content;
}

.nav-item {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-item:hover {
    background: #e2e8f0;
    color: #475569;
}

.nav-item.active {
    background: #1e293b;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.matrix-nav .nav-items {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 12px;
    min-width: min-content;
}

/* Estilos para categorías de filtros */
.platform-filter {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    border-left: 3px solid #2196f3 !important;
}

.tech-filter {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%) !important;
    border-left: 3px solid #9c27b0 !important;
}

.industry-filter {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    border-left: 3px solid #4caf50 !important;
}

/* Estados activos */
.platform-filter.active {
    background: #2196f3 !important;
    color: white !important;
}

.tech-filter.active {
    background: #9c27b0 !important;
    color: white !important;
}

.industry-filter.active {
    background: #4caf50 !important;
    color: white !important;
}

/* MATRIX GRID */
.matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 1200px) {
    .matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MATRIX CARD */
.matrix-card {
    background: var(--matrix-bg);
    border: 1px solid var(--matrix-border);
    border-radius: 20px;
    box-shadow: var(--matrix-shadow);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.matrix-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: #cbd5e1;
}

/* CARD HEADER */
.card-header-matrix {
    padding: 1.5rem 1.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.case-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.case-number {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    opacity: 0.9;
}

.case-type {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.tag {
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.azure-tag {
    background: #e6f2ff;
    color: var(--azure-color);
    border-color: #bfdbfe;
}

.aws-tag {
    background: #fff1e6;
    color: var(--aws-color);
    border-color: #fed7aa;
}

/* Etiquetas de industria para Matrix - INSERTAR DESPUÉS DE .aws-tag */
.education-tag {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border-color: #a5d6a7 !important;
}

.fintech-tag {
    background: #e3f2fd !important;
    color: #1565c0 !important;
    border-color: #90caf9 !important;
}

.enterprise-tag {
    background: #f3e5f5 !important;
    color: #7b1fa2 !important;
    border-color: #ce93d8 !important;
}

.technology-tag {
    background: #fff3e0 !important;
    color: #ef6c00 !important;
    border-color: #ffcc80 !important;
}

.media-tag {
    background: #e0f2f1 !important;
    color: #00695c !important;
    border-color: #80cbc4 !important;
}

/* CARD CONTENT */
.card-content-matrix {
    padding: 1.5rem;
    flex-grow: 1;
}

.case-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.case-description {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}



.impact-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.impact-metric:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
}

.metric-icon {
    font-size: 1.25rem;
    color: #64748b;
    opacity: 0.8;
}

.metric-content {
    flex-grow: 1;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.125rem;
}

.metric-value.positive {
    color: var(--success-color);
}

.metric-value.negative {
    color: var(--danger-color);
}

.metric-value.neutral {
    color: #6b7280;
}

.metric-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* CASE DETAILS */
.case-details {
    border-top: 1px solid #f1f5f9;
    padding-top: 1.5rem;
}

.detail-section {
    margin-bottom: 1.25rem;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.detail-header i {
    font-size: 1rem;
}

.detail-content {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.solution-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.solution-tech span {
    background: white;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}

.impact-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.impact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
}

.impact-item i {
    color: var(--success-color);
    font-size: 0.9rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* CARD FOOTER */
.card-footer-matrix {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roi-indicator {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.roi-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.roi-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--success-color);
}

.sla-indicator {
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.sla-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

/* SUMMARY STATS */
.summary-stats {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 3rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #3b82f6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-content {
    flex-grow: 1;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

/* ANIMATIONS */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.matrix-card {
    animation: cardAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.matrix-card:nth-child(1) { animation-delay: 0.1s; }
.matrix-card:nth-child(2) { animation-delay: 0.2s; }
.matrix-card:nth-child(3) { animation-delay: 0.3s; }
.matrix-card:nth-child(4) { animation-delay: 0.4s; }
.matrix-card:nth-child(5) { animation-delay: 0.5s; }

/* RESPONSIVE */
@media (max-width: 992px) {
    .matrix-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .impact-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .impact-metrics {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .card-header-matrix {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .case-tags {
        justify-content: flex-start;
    }
}

/* FILTER ANIMATION */
.matrix-card.hidden {
    display: none;
    animation: none;
}

/* ===== ESTILOS PARA SCROLL HORIZONTAL DE FILTROS ===== */
.applied-filters-scroll {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
    max-width: 100%;
}

/* Filtros aplicados: corregir posición de las badges de industria 
El terccero nose visualiza proque se posiciona encima*/
.applied-filters-scroll .industry-badge {
    position: static;   /* o relative, pero static basta */
    top: auto;
    left: auto;
    box-shadow: none;
    backdrop-filter: none;
}


.applied-filters-scroll::-webkit-scrollbar {
    height: 6px;
}

.applied-filters-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.applied-filters-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.applied-filters-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.filter-badge {
    white-space: nowrap;
    flex-shrink: 0; /* IMPORTANTE: evita que se reduzcan */
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.35rem 0.75rem 0.35rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.filter-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-badge i.bi-x {
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    padding-left: 0.25rem;
}

.filter-badge i.bi-x:hover {
    opacity: 1;
    color: #dc2626;
}



/* Indicador de que hay más filtros */
.more-filters-indicator {
    background: #f8fafc;
    color: #64748b;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px dashed #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
/* ===== FIN DE ESTILOS PARA SCROLL HORIZONTAL ===== */

/* ===== ESTILOS PARA FILTROS APLICADOS - CASOS DE ÉXITO ===== */
#applied-filters-container {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* .industry-badge {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
} */

.applied-filters-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 0;
    gap: 8px;
}


.filter-badge {
    background-color: #e7f1ff;
    color: #0d6efd;
    border: 1px solid #b6d4fe;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
  .filter-badge .remove-filter {
    color: #6c757d;
    cursor: pointer;
    font-size: 0.9rem;
    margin-left: 4px;
    padding: 2px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
        
.filter-badge .remove-filter:hover {
    background-color: #dc3545;
    color: white;
}

.filter-badge .bi-x {
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.filter-badge .bi-x:hover {
    opacity: 1;
    color: #dc2626;
}

#active-filters-list:empty::before {
    content: "No hay filtros aplicados";
    color: #94a3b8;
    font-style: italic;
    font-size: 0.9rem;
}

.filter-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}
/* ===== FIN ESTILOS FILTROS APLICADOS ===== */
/* Tipos de badges por categoría */
        .cloud-badge { background-color: #e7f1ff; color: #0d6efd; border-color: #b6d4fe; }
        .tech-badge { background-color: #f3e8ff; color: #8b5cf6; border-color: #d8b4fe; }
        .industry-badge { background-color: #d1fae5; color: #10b981; border-color: #a7f3d0; }
        
        .filters-badge {
            background-color: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 0.75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
        }
/* Solo estilos específicos de esta página */
        .success-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/img/casos_exito/img_map_conection.png') center/cover no-repeat;
            position: relative;
            overflow: hidden;
            padding: 140px 0 80px;
        }
        
        .success-cta {
            background: linear-gradient(135deg, #2d7df6 0%, #1c3e9b 100%);
            position: relative;
            overflow: hidden;
        }

        /* Nueva navegación por categorías */
        .category-nav {
            background: #fff;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            margin-bottom: 3rem;
        }

        .category-section {
            margin-bottom: 1.5rem;
        }

        .category-section:last-child {
            margin-bottom: 0;
        }

        .category-title {
            font-size: 1rem;
            font-weight: 600;
            color: #2d7df6;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .category-title i {
            font-size: 1.1rem;
        }

        .category-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .category-tag {
            padding: 0.5rem 1rem;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            color: #475569;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            position: relative;
        }

        .category-tag:hover {
            background: #e2e8f0;
            transform: translateY(-1px);
        }

        .category-tag.active {
            background: #2d7df6;
            color: white;
            border-color: #2d7df6;
        }

        /* Estilos para múltiples selecciones */
        .category-tag.multi-active {
            background: #2d7df6;
            color: white;
            border-color: #2d7df6;
        }

        /* "Todos" activo tiene estilo diferente */
        .category-tag.all-active {
            background: #10b981 !important;
            color: white !important;
            border-color: #10b981 !important;
        }

        .cloud-tag.active, 
        .cloud-tag.multi-active { 
            background: #2d7df6 !important; 
            color: white !important;
        }

        .tech-tag.active, 
        .tech-tag.multi-active { 
            background: #8b5cf6 !important; 
            color: white !important;
        }

        .industry-tag.active, 
        .industry-tag.multi-active { 
            background: #10b981 !important; 
            color: white !important;
        }

        /* Indicador de múltiples selecciones */
        .multi-select-indicator {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 16px;
            height: 16px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            font-size: 0.65rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* Grid de casos mejorado */
        .cases-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .cases-counter {
            background: #f1f5f9;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            color: #475569;
        }

        /* Contador de filtros aplicados */
        .filters-counter {
            display: inline-flex;
            align-items: center;
            margin-left: 0.75rem;
        }
        /* Controles de filtro MEJORADOS - para mostrar TODOS los filtros */
        .filter-controls {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e2e8f0;
            gap: 1rem;
        }

        .filter-info {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            flex-grow: 1;
            min-width: 0;
        }

        .filter-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .applied-filters-container {
            flex-grow: 1;
            min-width: 0;
        }

        .applied-filters-label {
            font-size: 0.85rem;
            color: #64748b;
            font-weight: 500;
            margin-bottom: 0.5rem;
            display: block;
        }

        @media (max-width: 768px) {
            .success-hero {
                padding: 120px 0 60px;
            }
            
            .cases-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .filter-controls {
                flex-direction: column;
                align-items: stretch;
                gap: 1rem;
            }
            
            .filter-actions {
                justify-content: space-between;
                width: 100%;
            }
            
            .cases-counter {
                align-self: flex-end;
            }
        }

        @media (max-width: 576px) {
            .filter-controls {
                gap: 0.75rem;
            }
            
            .filter-actions {
                flex-direction: column;
                align-items: stretch;
                gap: 0.5rem;
            }
            
            .cases-counter {
                align-self: center;
            }
        }

        /* Casos organizados por industria */
        .education-case { border-top: 4px solid #10b981; }
        .financial-case { border-top: 4px solid #3b82f6; }
        .enterprise-case { border-top: 4px solid #8b5cf6; }
        .media-case { border-top: 4px solid #f59e0b; }

        /* Estado sin resultados */
        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 4rem 2rem;
            background: #f8fafc;
            border-radius: 16px;
            border: 2px dashed #e2e8f0;
        }

        .no-results i {
            font-size: 3rem;
            color: #94a3b8;
            margin-bottom: 1rem;
        }

        .no-results h4 {
            color: #475569;
            margin-bottom: 0.5rem;
        }

        .no-results p {
            color: #64748b;
            max-width: 400px;
            margin: 0 auto;
        }