@charset "UTF-8";
/* ========================================== */
/* LAYOUT MAIN - Archivo CSS Combinado */
/* ========================================== */
html {
	box-sizing:border-box;
	-ms-text-size-adjust:100%
}
/* Activar scroll suave */
html {
    scroll-behavior: smooth;
  }
  html, body, * {
    cursor:url(/static/frontend/svg/cursor.svg) 2 2, auto;
}
body {
	/*background-color:var(--white);*/
	width:100%;
	min-width: 320px;
	line-height:1.4;
	margin: 0;
    padding: 0;
	background-attachment:fixed;
	background-size:cover;
    font-family: var(--nx-f-family-InterVariable);
    font-weight: 400;
    font-size: 1rem;
    text-rendering: optimizeLegibility;
    color: var(--dark-asfalt) !important;
    overflow-x: hidden;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}
/*****##### UNTITLED #####*****/
*,::after,::before{box-sizing:border-box}
/*****##### INTITLED #####*****/
a {
    color: #2b2a28;
    font-weight:400;
    text-decoration: none;
    background-color: transparent;
   /*transition: 0.2s;*/
}
a:hover{
    color:#000000;
    text-decoration: none;
}
#main-content{
    width:100% !important;
    height:100% !important;
}/*====================================================*/
/*  NX Buttons Colorized Styles */
/*====================================================*/
.btn_grad_red{
	border: 1px solid #93021B;
	background: linear-gradient(-45deg,#8F1E30,#93021B); 
}
.btn_grad_green{
	border: 1px solid #38943A;
	background: linear-gradient(-45deg,#38943A,#226d24);
}
.btn_grad_blue{
	border: 1px solid #4D90EF;
	background: linear-gradient(-45deg,#2170E1,#2170E1);
}
.btn_grad_yellow{
	border: 1px solid #F1D910;
	background: linear-gradient(-45deg,#F1D910,#e7b401);
}
.btn_grad_gray{
	border: 1px solid #D2D2D2;
	background: linear-gradient(-45deg,#D2D2D2,#BFC0C1);
}
.btn_color_silver{
	background-color:var(--silver) !important;
}
.btn_color_cyan-blue{
	background-color:var(--cyan-blue) !important;
}
.btn_color_golden-lock{
	background-color:var(--golden-lock) !important;
}
.btn_color_hard-coal{
	background-color:var(--hard-coal) !important;
}
.btn_color_krishna-blue{
	background-color:var(--krishna-blue) !important;
}
.btn_color_blue_lobster{
	background-color: var(--blue-lobster) !important;
}
.btn_color_success{
	background-color:var(--success) !important;
}
.btn_color_black{
	background-color:var(--pure-black) !important;
}
.btn_color_old-whine{
    background-color: var(--old-wine) !important;
}
/* ========================================================================== */
/* LAYER NAVHEADER CSS                                                        */
/* ========================================================================== */
.main-navigation {
    margin-left: auto;
    margin-right: auto;
    height: 47px;
    }
    /* Menú sticky (pegajoso) */
.sticky-menu {
    position: -webkit-sticky; /* Para navegadores webkit */
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    }
.navmenu-fluid {
    background: rgba(255,255,255,0.8);
    border-bottom: 1px solid #b5b5b5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    }
.navbar {
    padding: 0;
    width: 100%;
    }
.logo-wrapper {
    margin-left: auto;
    margin-right: auto;
    }
.logo-wrapper a {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .25em;
    box-sizing: border-box;
    min-height: 50px;
    }
.nav-menu-default {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    }
.nav-menu-default li {
    margin: 0 8px;
    }
.nav-menu-default li a.nav-link {
    background-color: rgb(255, 255, 255);
    color: #000;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.05rem;
    padding: 6px 14px;
    border-radius: 24px;
    display: block;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out 0s;
    }
.nav-menu-default li a.nav-link:hover {
    background-color: rgba(45, 41, 41, 0.87);
    color: #fff;
    transition: .2s ease-in-out;
    transition-property: background-color;
    border-radius: 24px;
    }
.long-nav {
    /*border-top: 1px solid transparent;*/
    padding-top: 8px;
    }
/*.nav-bground-wrapper-row {
    position:absolute;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    pointer-events: auto;
    width:100%;
    height:auto;
    background:rgba(255,255,255,0);
    margin-top:0px;
    padding-top: 10px;
    padding-left:40px;
    padding-right:40px;
    left:0%;
    z-index: 2;
    }*/
    
.nav-bground-wrapper-row {
    display:block;
    pointer-events: auto;
    width:100%;
    height:auto;
    background:rgba(255,255,255,0);
    margin-top:0px;
    padding-top: 12px;
    padding-left:0px;
    padding-right:0px;
    left:0%;
    z-index: 2;
    }
.nav-wrapper-flex-sub {
    position: absolute;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    pointer-events: auto;
    width:100%;
    min-height:450px;
    padding-top:20px;
    padding-bottom: 30px;
    margin-left:auto;
    margin-right:auto;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 4px 15px rgba(1, 143, 186, 0.2);
    }
.nav-menu-default li.long-nav:hover .nav-bground-wrapper-row {
    display:flex !important;
    flex-direction: row;
    position: absolute;
    pointer-events: auto;
    z-index: 9;
    }
/***** Inner submenu wrappers cols******/
.sub-wrapper-inner-row-default {
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width:1200px;
    height:auto;
    padding:5px;
    margin-top:15px;
    }
.sub-nav-card-col {
    display:flex;
    flex-direction: column;
    align-items: flex-start !important;
    align-items: center;
    width:auto;
    height:auto;
    padding:0px;
    }
.main-prod-featured-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width:300px;
    height:auto;
    padding:5px;
    }
.main-prod-advertise-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width:530px;
    height:auto;
    padding:5px;
    }
/********* On mouse over display subnav panel for navmenu *******/
/******** Enable transition effect on mouse over **************/
ul.nav-menu-default li.long-nav:hover .nav-wrapper-flex-sub{
    visibility: visible;
    transform: scale(1); /* Tamaño final (100%) */
    opacity: 1; /* Visibilidad total */
    transition-delay: 0s; /* Asegura que se anime sin retraso al salir */
      }
.nav-wrapper-flex-sub{
    visibility:hidden;
    opacity: 0; /* Comienza invisible */
    transform: scale(0.3); /* Comienza al 50% de tamaño */
    transition: transform 0.3s ease 0.5s, opacity 0.5s ease 0.5s; /* Retraso de 0.5s */
    }
/**** item hover mainnav ***/
.item-prod-col {
    background-color: rgba(255, 255, 255, 0.65);
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 201px;
    overflow: hidden;
    padding: 4px;
    border-radius: 7px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 5px rgba(1, 143, 186, 0.197);
    transition: box-shadow 0.15s ease-in-out 0.15s, background-color 0.15s ease-in-out 0s;
    justify-content: space-between;
    backdrop-filter: blur(2px);
    }
.item-prod-col:hover {
    background-color: rgba(255,255,255,1); 
    box-shadow: 0 0 0 1px rgba(7, 163, 247, 0.063),0px 30px 32px rgba(27, 176, 240, 0.2),0px 22px 18px rgba(0,0,0,0.03),0px 12px 10px rgba(0,0,0,0.03),0px 7px 5px rgba(0,0,0,0.04),0px 3px 2px rgba(0,0,0,0.07);
    transition-property: transition, box-shadow, background-color;
    }
a.item-link:link,a.item-link:visited {
    color:rgb(60, 59, 59);
    text-decoration: none;
    }
a.item-link:hover {
    color:rgb(5, 5, 5);
    text-decoration: none;
    }
ul.main-features li.icon-graphic-design {
    list-style-position: outside;
    background: url(/static/frontend/svg/web-graphic.svg) no-repeat left 0px;
    padding-left: 4px;
    display:block;
    width:auto;
    height:40px;
    background-position: center center;
    }
ul.main-features li.icon-coding-website {
    list-style-position: outside;
    background: url(/static/frontend/svg/coding-website.svg) no-repeat left 0px;
    padding-left: 4px;
    display:block;
    width:auto;
    height:40px;
    background-position: center center;
    }
ul.main-features li.icon-develop-app {
    list-style-position: outside;
    background: url(/static/frontend/svg/develop-app.svg) no-repeat left 0px;
    padding-left: 4px;
    display:block;
    width:auto;
    height:40px;
    background-position: center center;
    }
ul.main-features li.icon-wordpress {
    list-style-position: outside;
        background: url(/static/frontend/svg/wordpress.svg) no-repeat left 0px;
        padding-left: 4px;
        display:block;
        height:30px;
        background-position: center center;
    }
ul.main-features li.icon-woocommerce {
    list-style-position: outside;
        background: url(/static/frontend/svg/woocommerce.svg) no-repeat left 0px;
        padding-left: 4px;
        display:block;
        height:30px;
        background-position: center center;
    }
.item-block-col {
    list-style-type: none;
        padding:10px 4px;
    }
.item-block-row {
    padding:4px 0;
        display: block;
    }
    /************** Sub Main Dropdown ******/
.nav-menu-default li.long-nav:hover .subnav-dropdown-box {
    transition: .5s ease-in-out;
    display: block !important;
    position: absolute;
    width: auto;
    height: auto;
    padding: 0px 4px;
    background: transparent;
    top: 40px;
    z-index: 99999;
    }
/***** SubNav Menu Box Dropdown *********/
.subnav-dropdown-box {
    display: none;
    }
.subbox-navmnu {
    border-radius: 14px;
    padding: 20px;
    width: 100%;
    background: rgba(255,255,255,1);
    margin: auto;
    box-shadow: 0 0 0 1px rgba(106, 220, 248, 0.07),0 16px 32px rgba(64, 208, 248, 0.18),0 4px 8px rgba(0,0,0,0.1);
    z-index: 100;
    outline: 0px;
    }
.subnav-dropdown {
    position: relative;
    min-width: 315px;
    min-height: auto;
    height:auto;
    margin-top: 20px;
    left: 0;
    opacity: 1;
    color: #000;
    border-style: solid;
    border-color: rgba(2, 175, 238, 0.05);
    border-width: 1px 1px 1px 1px;
    z-index: 1020;
    background-color: rgba(255,255,255,1);
    box-shadow: 0 0 0 1px rgba(7, 163, 247, 0.063),0px 30px 32px rgba(27, 176, 240, 0.2),0px 22px 18px rgba(0,0,0,0.03),0px 12px 10px rgba(0,0,0,0.03),0px 7px 5px rgba(0,0,0,0.04),0px 3px 2px rgba(0,0,0,0.07);
    transition-property: transition, box-shadow, background-color;
    border-radius: 7px;
    transition: box-shadow 0.15s ease-in-out 0.15s, background-color 0.15s ease-in-out 0s;
    justify-content: space-between;
    backdrop-filter: blur(2px);
    }
/***** SubNav Menu Box Dropdown *********/
/*****  SubDropDown Items *******/
.sub-dropdown-item::before {
    background: #00000081;
    box-sizing: border-box;
    clip-path: polygon(0 100%,100% 0,0 0);
    content: "";
    height: 10px;
    left: 33px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -5px;
    transform: rotate(45deg);
    width: 10px;
    }
.sub-dropdown-item {
    list-style-type: none;
    padding: 4px 0;
    }
.sub-dropdown-item-link:first-child,.sub-dropdown-item-link:first-child:hover {
    padding-top: 12px;
    }
.sub-dropdown-item-link:last-child,.sub-dropdown-item-link:last-child:hover {
    padding-bottom: 20px;
    }
.sub-dropdown-item-link {
    padding: 5px 2px;
    }
.sub-dropdown-item-link:hover {
    padding: 5px 2px;
    /*background: #f8f8f8;*/
    }
.sub-dropdown-item-link a {
    font-size: 16px !important;
    color: #000;
    font-weight: 400;
    }
.sub-dropdown-item-link a:hover {
    color: #cc011f;
    }
/*****  SubDropDown Items *******/
/********** NavBar Dropdown Parent Icon *********/
.nav-menu-default li.long-nav .navbar-parent-icon {
    margin-left: 4px;
    width: 12px;
    height: 12px;
    transition: transform .3s ease-in-out;
    }
.nav-menu-default li.long-nav:hover .navbar-parent-icon {
    transform: rotateX(180deg);
    transition: transform .3s ease-in-out;
    }
/********** NavBar Dropdown Parent Icon ************/
/********* NAV ITEM LINE *********/
.nav-menu-default li.long-nav .nav-item-line {
    display: block;
    width: 100%; /* La línea tendrá el ancho completo */
    height: 1px;
    background-color: rgba(235,36,67,0); /* Inicialmente transparente */
    opacity: 0;
    transform: scaleX(0); /* Escala inicial: 0 (invisible) */
    transform-origin: center; /* Punto de origen: centro */
    transition: .4s ease-in-out; /* Transición suave */
    transition-property: transform, opacity, background-color;
    }
.nav-menu-default li.long-nav:hover .nav-item-line {
    transform: scaleX(1); /* Se expande desde el centro hacia ambos lados */
    background-color: rgba(235,36,67,1); /* Color visible al hacer hover */
    opacity: 1; /* Aparece gradualmente */
    }
    /* ========================================================================== */
    /* ESTILOS EMBEBIDOS DESDE  navheader.html   */
    /* ========================================================================== */
    
/* ============================================
    ESTILOS PARA MENÚ HAMBURGUESA Y SIDEBAR
    ============================================ */
    
    /* Header con z-index máximo */
    /*.section-l12.sticky-menu {
        position: relative;
        z-index: 99999 !important;
    }
    
    .sticky-menu hdrnx-element {
        position: relative;
        z-index: 99999 !important;
    }*/
    
/* Botón Hamburguesa */
.hamburger-button {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100000;
    position: fixed;
    right: 14px;
    top: 20px;
    }
    
.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
    }
    
/* Animación del botón hamburguesa cuando está activo */
.hamburger-button.active .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    }
    
.hamburger-button.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scale(0);
    }
    
.hamburger-button.active .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    }
    
    /* Overlay oscuro */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99997;
    }
    
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    }
    
    /* Sidebar móvil */
.mobile-sidebar {
    position: fixed;
    top: 0;
    right: -320px; /* Inicialmente oculto a la derecha */
    width: 320px; /* Ancho del sidebar - ajustable */
    height: 100%;
    background-color: #ffffff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
    overflow-y: auto;
    padding: 20px 0;
    }
    
.mobile-sidebar.active {
    right: 0; /* Se desliza hacia dentro */
    }
    
    /* Botón Close */
.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease;
    display: none; /* ELIMINADO - No se usa */
    }
    
.close-button:hover {
    transform: rotate(90deg);
    }
    
.close-icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    }
    
.close-icon::before,
.close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: transform 0.3s ease;
    }
    
    .close-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .close-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    .close-button:hover .close-icon::before {
        transform: translate(-50%, -50%) rotate(225deg);
    }
    
    .close-button:hover .close-icon::after {
        transform: translate(-50%, -50%) rotate(135deg);
    }
    
    /* Menú móvil */
    .mobile-nav-menu {
        list-style: none;
        padding: 20px 0 0 0;
        margin: 0;
    }
    
    .mobile-nav-item {
        border-bottom: 1px solid #f0f0f0;
    }
    
    .mobile-nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 25px;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    .mobile-nav-link:hover {
        background-color: #f5f5f5;
        color: #0066cc;
    }
    
    /* Flecha SVG para submenús */
    .submenu-arrow {
        transition: transform 0.3s ease;
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .mobile-nav-item.has-submenu.active .submenu-arrow {
        transform: rotate(180deg);
    }
    
    /* Submenú */
    .mobile-submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        background-color: #fafafa;
        transition: max-height 0.4s ease, padding 0.4s ease;
    }
    
    .mobile-nav-item.has-submenu.active .mobile-submenu {
        max-height: 500px;
        padding: 10px 0;
    }
    
    .mobile-submenu li {
        border-bottom: 1px solid #efefef;
    }
    
    .mobile-submenu li:last-child {
        border-bottom: none;
    }
    
    .mobile-submenu a {
        display: block;
        padding: 12px 25px 12px 45px;
        color: #555;
        text-decoration: none;
        font-size: 15px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    .mobile-submenu a:hover {
        background-color: #e8e8e8;
        color: #0066cc;
    }
    
    /* Media Queries */
    @media screen and (max-width: 1024px) {
        /* Ocultar menú desktop */
        .desktop-nav {
            display: none !important;
        }
        
        /* Mostrar botón hamburguesa */
        .hamburger-button {
            display: flex;
        }
        
        /* Ajustar el contenedor del logo */
        .content-expanded {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    
    @media screen and (max-width: 480px) {
        /* Ajustar ancho del sidebar en móviles pequeños */
        .mobile-sidebar {
            width: 280px;
            right: -280px;
        }
    }
    
    /* Prevenir scroll del body cuando el sidebar está abierto */
    body.sidebar-open {
        overflow: hidden;
    }
/*=============================================*/
/*  HERO MULTIPLE SECTIONS */
/*==============================================*/
  /* Hero Web Design Section */
  .webdev-hero-bground{
    background: url('/static/frontend/images/web-design-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    height: 100%;
    z-index:100;
}
@media only screen and (max-width:810px){
    .webdev-hero-bground{
        background: url('/static/frontend/images/web-design-hero.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height: 100%;
    }
}
/* Hero Web Design Section */
/* Hero Wordpress Design Section */
.wordpress-design-hero{
    background: url('/static/frontend/images/wordpress-design-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height: 100%;
}
@media only screen and (max-width:810px){
    .wordpress-design-hero{
        background: url('/static/frontend/images/wordpress-design-hero.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 80% 50%;
        width: 100%;
        height: 100%;
    }
    .wordpress-design-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(33, 21, 54, 0.412); /* overlay oscuro */
        backdrop-filter: blur(20px);     /* difumina */
        z-index: 0;
    }
}
@media (min-width:1921px){
    .wordpress-design-hero{
        min-height: 600px;
    }
}
/* Hero Wordpress Design Section */
/* Hero Section Programming */
.hero-programming{
    background: url('/static/frontend/images/programacion-coding.webp');
     background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height: 100%;
    }
@media only screen and (max-width:810px){
    .hero-programming{
        background: url('/static/frontend/images/programacion-coding.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 80% 50%;
        width: 100%;
        height: 100%;
        }
    .hero-programming::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(18, 44, 96, 0.1); /* overlay oscuro */
        backdrop-filter: blur(12px);
        z-index: 0;
    }
    }
/*/* Hero Develop Apps Section */
.develop-apps-hero{
    background: url('/static/frontend/images/development-keywords-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    height: 100%;
}
@media only screen and (max-width:810px){
    .develop-apps-hero{
        background: url('/static/frontend/images/development-keywords-hero.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 80% 50%;
        width: 100%;
        height: 100%;
    }
    .develop-apps-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(12px);
        z-index: 0;
    }
}
/* Hero Develop Apps Section */
/* Hero Hosting Section */
.hero-hosting-media{
    background: url('/static/frontend/images/hosting-hero-slider.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height: 100%;
}
@media only screen and (max-width:810px){
    .hero-hosting-media{
        background: url('/static/frontend/images/hosting-hero-slider.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 80% 50%;
        width: 100%;
        height: 100%;
    }
    .hero-hosting-media::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(22, 8, 69, 0.403); /* overlay oscuro */
        backdrop-filter: blur(10px);     /* difumina */
        z-index: 0;
    }
}

@media (min-width:1921px){
.hero-hosting-media{
    min-height: 600px;
}
}
/* Hero Hosting section */
/* Hero Section Mantenimiento */
.maitenance-hero{
    background: url('/static/frontend/images/maintenance-hero.webp');
     background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height: 100%;
    }
    @media only screen and (max-width:810px){
        .maitenance-hero{
            background: url('/static/frontend/images/maintenance-hero.webp');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 80% 50%;
            width: 100%;
            height: 100%;
        }
        .maitenance-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(3, 18, 49, 0.33); /* overlay oscuro */
            backdrop-filter: blur(10px);
            z-index: 0;
    }
    }
  /* Hero Web Design Section */
/* Contact Support Page */
.contact-support-hero{
    background: url('/static/frontend/images/contact-support.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height: 100%;
}
@media only screen and (max-width:810px){
    .contact-support-hero{
        background: url('/static/frontend/images/contact-support.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 80% 50%;
        width: 100%;
        height: 100%;
    }
    .contact-support-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(228, 226, 231, 0.332); /* overlay oscuro */
        backdrop-filter: blur(16px);     /* difumina */
        z-index: 0;
    }
}
/* Hero Contact Support Section */
/* Hero Web Support */
/* Web Tech Support Page */
.web-support-hero{
    background: url('/static/frontend/images/hero-web-support.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height: 100%;
}
@media only screen and (max-width:810px){
    .web-support-hero{
        background: url('/static/frontend/images/hero-web-support.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 80% 50%;
        width: 100%;
        height: 100%;
    }
    .web-support-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(228, 226, 231, 0.332); /* overlay oscuro */
        backdrop-filter: blur(16px);     /* difumina */
        z-index: 0;
    }
}
/* Hero Web Support */
/* Secure Access Section */
.secure-access-hero{
    background: url('/static/frontend/images/secure_connect_hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    height: 100%;
    z-index:100;
}
@media only screen and (max-width:810px){
    .secure-access-hero{
        background: url('/static/frontend/images/secure_connect_hero.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height: 100%;
    }
    .secure-access-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 55, 106, 0.24); /* overlay oscuro */
        backdrop-filter: blur(12px);     /* difumina */
        z-index: 0;
    }
}
/* Secure Access Section */

.webdev-hero-bground *, 
.develop-apps-hero *, 
.hero-programming *, 
.wordpress-design-hero *, 
.hero-hosting-media *, 
.contact-support-hero *,
.web-support-hero *, 
.secure-access-hero *,
.maitenance-hero * {
  position: relative;
  z-index: 1; /* el texto siempre por encima */
}
/* ========================================== */
/* LAYOUT INDEX */
/* ========================================== */

.marker-accept {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: content-box;
    fill: currentColor;
    flex-shrink: 0;
    outline: 0;
    color: #00c192;
    position: relative;
    bottom: 0;
    margin-right: 5px;
    top: 2px;
  }
  .marker-like {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: content-box;
    fill: currentColor;
    flex-shrink: 0;
    outline: 0;
    color: #a41465;
    position: relative;
    bottom: 0;
    margin-right: 3px;
    width:28px;
    height:28px;
    top: 3px;
  }
.item-child-header{
    background:#f5f6f7;
    border-bottom: 1px solid #a5a1a1;
    width: 100%;
    height:70px;
    padding: 0px;
    position: relative;
    overflow: hidden;
    z-index:99;
}
.nx-card:hover .item-child-header img {
    transition: transform 0.4s ease-in-out;
    transform: scale(1.3);
}
.nx-card:not(:hover) .item-child-header img{
    transition: transform 0.4s ease-in-out;
    transform:scale(1)
}
.item-child-body{
    width:100%;
    padding:15px;
    min-height:360px;
    height:auto;
    position: relative;
}
.item-child-link{
    display:flex;
    flex-direction: row;
    position:relative;
    padding:6px 25px;
    margin-top: 20px;
    background-color: #0c7691;
    color:#fff;
    border-radius: 25px;
    width: fit-content;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    z-index:99;
    box-shadow:0 3px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease-in-out;
}
.item-child-link:hover{
    background: #015e75;
    box-shadow:0 2px 3px rgba(0,0,0,0.4);
    transition-property: background-color , box-shadow;
}
.card-wrapper ul li.icon-notsupport:last-child::before {
    background: url(/static/frontend/svg/tilda_icons_warning.svg) no-repeat center center;
    background-size: contain;
  }
  .bg-foreground-pontoon {
    background-color: rgba(223, 120, 2, 0.7);
  }
  .bg-foreground-night-owl {
    background-color: rgba(189, 67, 114, 0.7);
  }
  .bg-foreground-misty-moor{
    background-color: rgba(218, 55, 14, 0.7);
  }
  .bg-foreground-hillside-green{
    background-color: rgba(233, 143, 64, 0.7);
  }
    ul.main-features li.icon-graphic-design{
    list-style-position: outside;
    background: url(/static/frontend/svg/web-graphic.svg) no-repeat left 0px;
    padding-left: 4px;
    display:block;
    width:auto;
    height:40px;
    background-position: center center;
    }
    ul.main-features li.icon-coding-website{
        list-style-position: outside;
        background: url(/static/frontend/svg/coding-website.svg) no-repeat left 0px;
        padding-left: 4px;
        display:block;
        width:auto;
        height:40px;
        background-position: center center;
        }
    ul.main-features li.icon-develop-app{
            list-style-position: outside;
            background: url(/static/frontend/svg/develop-app.svg) no-repeat left 0px;
            padding-left: 4px;
            display:block;
            width:auto;
            height:40px;
            background-position: center center;
        }
   ul.main-features li.icon-wordpress {
    list-style-position: outside;
    background: url(/static/frontend/svg/wordpress.svg) no-repeat left 0px;
    padding-left: 4px;
    display:block;
    height:30px;
    background-position: center center;
}
  ul.main-features li.icon-woocommerce {
    list-style-position: outside;
    background: url(/static/frontend/svg/woocommerce.svg) no-repeat left 0px;
    padding-left: 4px;
    display:block;
    height:30px;
    background-position: center center;
  }
.icon-wrapper{
display: flex;
flex-direction:column;
align-content: center;
justify-content: flex-start;
pointer-events: auto;
padding: 8px;
margin-top:14px;
width:100%;
word-break: break-word;
overflow-wrap: break-word;
}
.icon-hero-wrapper {
    display: flex;
    align-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
    max-width: 17rem;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
  }
.card-wrapper{
    display:flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    min-height:420px;
    width: 100%;
    max-width: 640px;
    padding:10px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #adacac;
    border-radius: 5px;
    position:relative;
    transition: box-shadow 0.3s ease-in-out;
}
.card-wrapper:hover{
    box-shadow:0 8px 20px rgb(0 0 0 / 8%),0 1px 6px rgb(0 0 0 / 5%) !important;
}
.card-wrapper ul{
    list-style-type:none;
    padding-left: 0;
}
.card-wrapper ul li{
    padding:2px 0 2px 24px;
    border-bottom:1px dashed #333;
}
.card-wrapper ul li::before{
    content: ""; /* necesario para que se muestre */
    position: absolute;
    left: 20px;
    width: 24px;
    height: 24px;
    background: url("/static/frontend/svg/tilda_icons_accept-black.svg") no-repeat center center;
    background-size: contain;
}
.cuted-icon-link{
    position:absolute;
    top:10px;
    right:5px;
}
  .product-card-col-33:hover .product-card-header img {
    transition: transform 0.4s ease-in-out;
    transform: scale(1.3);
}
    .hero-title {
        font-size: clamp(2,3rem, 9vw, 8rem) !important;
        line-height: 1.4;
        font-weight: 600;
        word-break: keep-all;
        white-space: normal;
        }
        #hero-hexagon .curve, #hero-disenoweb .curve, #hero-hosting .curve, #hero-programming .curve, #hero-djangodevelop .curve, #hero-webwordpress .curve, #hero-secureaccess .curve, #hero-contact-support .curve, #hero-web-support .curve, #hero-maitenance .curve {
        position: absolute;
        width: calc(100% + 50px);
        height: auto;
        z-index: 50;
        bottom: -8px;
        }

    #hero-disenoweb {
        width: 100%;
        min-height: 450px;
        background-color: rgb(1, 37, 51);
        position: relative;
        overflow: hidden;
        }
    #hero-hosting {
        width: 100%;
        min-height: 450px;
        background-color: rgb(0, 59, 121);
        position: relative;
        overflow: hidden;
        }
    #hero-programming {
        width: 100%;
        min-height: 450px;
        background-color: #342a47;
        position: relative;
        overflow: hidden;
        }
    #hero-djangodevelop {
        width: 100%;
        min-height: 450px;
        background-color: #0f312d;
        position: relative;
        overflow: hidden;
        }
    #hero-maitenance {
        width: 100%;
        min-height: 450px;
        background-color: #0f312d;
        position: relative;
        overflow: hidden;
        }
    #hero-contact-support {
        width: 100%;
        min-height: 450px;
        background-color: rgb(231, 233, 237);
        position: relative;
        overflow: hidden;
        }
    #hero-web-support{
        width: 100%;
        min-height: 450px;
        background-color: rgb(231, 233, 237);
        position: relative;
        overflow: hidden;
        }
    #hero-webwordpress {
        width: 100%;
        min-height: 450px;
        background-color: #2a055e;
        position: relative;
        overflow: hidden;
        }
    #hero-secureaccess {
        width: 100%;
        min-height: 450px;
        background-color: #2a055e;
        position: relative;
        overflow: hidden;
        }

      /*** Start page - hero section ***/
        #hero-hexagon {
            display: block;
            background-color: #013E9B;
            position: relative;
            overflow: hidden;
        }
        @media (max-width:400px){
            #hero-hexagon {
                height:820px;
              }
          }
          
          #hero-hexagon .bg span:nth-child(1) {
            z-index: 14;
            background: linear-gradient(165deg, rgba(64, 24, 174, 0) 25.03%, #04b1a0 98.93%);
          }
          #hero-hexagon .bg span:nth-child(2) {
            z-index: 11;
            background: linear-gradient(105deg, rgba(34, 172, 255, 0) 59.75%, #8902E6 132.36%);
          }
          #hero-hexagon .bg span:nth-child(3) {
            z-index: 12;
            background: linear-gradient(155deg, rgba(33, 168, 119, 0) 5%, #3310B1F5 107.99%);
          }
          #hero-hexagon .bg span:nth-child(4) {
            z-index: 13;
            background: linear-gradient(280deg, rgba(47, 8, 155, 0) 17.99%, #02346a 92.78%);
          }
          #hero-hexagon .bg span {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }

          #hero-disenoweb .bg span:nth-child(1) {
            z-index: 14;
            background: linear-gradient(165deg, rgba(64, 24, 174, 0) 25.03%, #02b0b9 98.93%);
            }
          #hero-disenoweb .bg span:nth-child(2) {
            z-index: 11;
            background: linear-gradient(105deg, rgba(134, 172, 255, 0) 59.75%, #04b76c 132.36%);
            }
          #hero-disenoweb .bg span:nth-child(3) {
            z-index: 12;
            background: linear-gradient(155deg, rgba(33, 168, 119, 0) 5%, #2F1999 107.99%);
            }
          #hero-disenoweb .bg span:nth-child(4) {
            z-index: 13;
            background: linear-gradient(280deg, rgba(47, 8, 155, 0) 17.99%, #162a59 92.78%);
          }
          #hero-disenoweb .bg span {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            }

          #hero-hexagon .graphic-wrapper {
            display: block;
            width: 1024px;
            height: 600px;
            position: absolute;
            z-index: 40;
            transform: scale(0.8);
            right: -105px;
            top: -122px;
            /*background-color:rgba(255,255,255,0.1);*/
        }
        
        #hero-hexagon .graphic-wrapper {
          display: none;
        }
        @media (min-width: 600px){
            #hero-hexagon .graphic-wrapper {
          transform: scale(1);
          right: -12vw;
          top: -72px;
        } 
        }
        
        @media (min-width: 600px){
            #hero-hexagon .graphic-wrapper {
            display: block;
            width: 1024px;
            height: 600px;
            position: relative;
            z-index: 40;
            transform: scale(1);
            right: -28px;
            top: -30px;
            }
          }

        #hero-hexagon .mobile-hex {
            position: absolute;
            width: 349px;
            height: 442px;
            top: 325px;
            /*right: -50px;*/
          }
          @media (min-width: 595px){
            #hero-hexagon .mobile-hex {
           display: none;
         } 
         }
        #hero-hexagon .hex-container {
            font-size: 0;
         }
         #hero-hexagon .hex-container .hex-row {
            display: block;
            width: 100%;
            margin-top: calc(var(--hex-margin) - var(--hex-width) * 0.3272727);
        }
        #hero-hexagon .hex-container .hex-row-e {
            margin-left: calc(var(--hex-width) / 2 + var(--hex-margin));
        }
        #hero-hexagon .hex-container .hex {
            display: inline-block;
            width: var(--hex-width);
            height: calc(var(--hex-width) * 1.1547);
            margin: var(--hex-margin);
            position: relative;
      }
.hex.hexa-rotation {
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }
  .hex.hexa-rotation:hover {
    z-index: 10;
  }
  .hex.hexa-rotation:hover .cards-flip__wrapper {
    transition: transform 700ms cubic-bezier(.5,.3,.3,1); /* Transición rápida para el giro (mouse over) */
  }
  .cards-flip__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: initial;
    transform-style: preserve-3d;
    transition: transform 1300ms cubic-bezier(.17, .67, .5, 1);
  }
  .hex[data-flip-direction="3d-y-flip"]:hover .cards-flip__wrapper {
    transform: rotateY(180deg);
  }
  .hex[data-flip-direction="3d-x-flip"]:hover .cards-flip__wrapper {
    transform: rotateX(180deg);
  }
  .back-face__card {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .front-face__card img, .back-face__card img {
    width:100% !important;
    height:100% !important;
  }
  .front-face__card {
    z-index: 2;
    transform: rotateY(0deg);
  }
  .hex-front-face__rotation{
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 2px;

  }
           #hero-hexagon .hex-container .hex-i {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: var(--hex-width);
          margin: var(--hex-margin);
          height: calc(var(--hex-width) * 1.1547);
          display: inline-block;
          font-size: initial;
          clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
          transform: scale(0);
          animation: grow 0.5s ease forwards;
            animation-delay: 0s;
          overflow: visible;
        }
        #hero-hexagon .hex-container .hex .icon {
            position: absolute;
            width: 56px;
            height: 56px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            z-index: 100;
        }
            #hero-hexagon .show-on-xxl {
          display: inline-block !important;
        }
            #hero-hexagon .hex-container div a.light, #hero-hexagon .hex-container div span.light {
                color: #041C2C;
                }
            #hero-hexagon .hex-container .hex a {
                text-decoration: none;
                }
            #hero-hexagon .hex-container .hex a, #hero-hexagon .hex-container .hex-i > span {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                padding: 8px;
                transition: background-color 0.3s;
                }
                #hero-hexagon .hex-container div a span, #hero-hexagon .hex-container div > span {
                    font-weight: 500;
                    text-align: center;
                    font-size: 14px;
                    line-height: 1.3;
                  }
        #hero-hexagon .hex-container div a.dark, #hero-hexagon .hex-container div span.dark {
            color: #FFFFFF;
        }
        #hero-hexagon .hex-container div a.light:hover {
            color: #041C2C !important;
            background-color: #e7e7e7 !important;
            text-decoration: underline !important;
        }
        #hero-hexagon .hex-container div a.dark:hover {
            color: #FFFFFF !important;
            background-color: #000000 !important;
            text-decoration: underline !important;
        }
           #hero-hexagon .hex-d-2 {
          animation-delay: 1.2s !important;
        }
            #hero-hexagon .hex-c-1-02 {
          background-color: rgba(200, 212, 232, 0.02);
        }
            #hero-hexagon .o-0-on-xl {
                opacity: 0 !important;
            }
            #hero-hexagon .hide-on-xxl {
                display: none !important;
            }
            #hero-hexagon .hex-d-3 {
          animation-delay: 1.3s !important;
        }
            #hero-hexagon .hex-c-1-01 {
          background-color: rgba(219, 233, 245, 0.03);
        }
        #hero-hexagon .hex-c-1-12 {
            background-color: rgba(9, 169, 196, 0.29);
          }
          #hero-hexagon .hex-light { background-color: #fff; }
          #hero-hexagon .hex-dark { background-color: rgba(0, 26, 44, 0.739); }
          #hero-hexagon .hex-c-1-04 { /*background-color: rgba(200, 212, 232, 0.04);*/ background-color: rgba(5, 44, 111, 0.12); }
          #hero-hexagon .hex-c-1-06 { background-color: rgba(200, 212, 232, 0.06); }
          #hero-hexagon .hex-c-1-08 { background-color: rgba(200, 212, 232, 0.08); }
          #hero-hexagon .hex-c-1-16 { background-color: rgba(200, 212, 232, 0.16); }
          #hero-hexagon .hex-c-2-02 { background-color: rgba(192, 236, 220, 0.02); }
          #hero-hexagon .hex-c-2-04 { background-color: rgba(192, 236, 220, 0.04); }
          #hero-hexagon .hex-c-2-08 { background-color: rgba(192, 236, 220, 0.08); }
          #hero-hexagon .hex-c-2-10 { background-color: rgba(192, 236, 220, 0.10); }
          #hero-hexagon .hex-c-2-16 { background-color: rgba(192, 236, 220, 0.16); }
          #hero-hexagon .front_face_rand_bg_r2-02 {
            animation: bgColorCycle_r2-02 5s ease-in-out infinite;
            background: rgba(3, 59, 97, 0.05);
          }
          #hero-hexagon .front_face_rand_bg_r2-04 {
            animation: bgColorCycle_r2-04 3s ease-in-out infinite;
            background: rgba(07, 240, 244, 0.08);
          }
          #hero-hexagon .front_face_rand_bg_r3-02 {
            animation: bgColorCycle_r3-02 4s ease-in-out infinite;
            background: rgba(9, 107, 135, 0.134);
          }
          #hero-hexagon .front_face_rand_bg_r4-02 {
            animation: bgColorCycle_r4-02 4s ease-in-out infinite;
            background: rgba(1, 101, 129, 0.07);
          }
          #hero-hexagon .hex-d-4 { animation-delay: 1.4s !important; }
          #hero-hexagon .hex-d-5 { animation-delay: 1.5s !important; }
          #hero-hexagon .hex-d-6 { animation-delay: 1.6s !important; }
          #hero-hexagon .hex-d-7 { animation-delay: 1.7s !important; }
          #hero-hexagon .hex-d-8 { animation-delay: 1.8s !important; }
          #hero-hexagon .hex-d-9 { animation-delay: 1.9s !important; }
        .img-esquema-services{
            width:100%;
            height: 740px;
            background: url(/static/frontend/images/jumping-web-design.webp);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: contain;
        }
        @media only screen and (max-width:1365px){
            .dev-items-header{
            width:100% !important;
            }
            .dev-items-header .icon-logo, .dev-items-header .icon-banners, .dev-items-header .icon-tarjetas, .dev-items-header .icon-folletos, .dev-items-header .icon-catalog, .dev-items-header .icon-multimedia{
                display:none;
            }
        }
        .dev-items-header .icon-logo, .dev-items-header .icon-banners, .dev-items-header .icon-tarjetas, .dev-items-header .icon-folletos, .dev-items-header .icon-catalog, .dev-items-header .icon-multimedia{
                position:absolute;
                top:120px;
                width:40px;
                height:40px;
                transition:all 0.2s ease-in-out;
              }
        .dev-items-wrapper:hover .icon-logo, .dev-items-wrapper:hover .icon-banners, .dev-items-wrapper:hover .icon-tarjetas, .dev-items-wrapper:hover .icon-folletos, .dev-items-wrapper:hover .icon-catalog, .dev-items-wrapper:hover .icon-multimedia{
                position:absolute;
                transform: translateY(-80px);
              }

          .marker::after {
            content: "_";
            opacity: 0.3;
            position: absolute;
            animation: 1.5s ease 0s infinite normal none running blink;
            margin-left: 8px;
            color: #eb2443;
          }
  .img-screen-design{
    max-width: 650px;
    height: 100%;
    width:100%;
  }
  .wd-prod-ul{
    list-style-type:none;
    padding:0px;
    margin: 0;
  }
  .wd-item-list{
    padding:2px 0;
    counter-increment: numbered-list 1;
    display: list-item;
  }
.wd-prod-ul li:nth-child(1)::before  { background: #067aa8; }
.wd-prod-ul li:nth-child(2)::before  { background: #1a6aa9; }
.wd-prod-ul li:nth-child(3)::before  { background: #2f5aaa; }
.wd-prod-ul li:nth-child(4)::before  { background: #4450ab; }
.wd-prod-ul li:nth-child(5)::before  { background: #5946ac; }
.wd-prod-ul li:nth-child(6)::before  { background: #6e3cad; }
.wd-prod-ul li:nth-child(7)::before  { background: #8332ae; }
.wd-prod-ul li:nth-child(8)::before  { background: #9828af; }
.wd-prod-ul li:nth-child(9)::before  { background: #ad1eb0; }
.wd-prod-ul li:nth-child(10)::before { background: #c214b1; }
.wd-prod-ul li:nth-child(11)::before { background: #9d0c8f; }
  .wd-item-list::before{
    content: "0" counter(numbered-list);
    position: relative;
    font-variant-numeric: slashed-zero;
    background-clip: text;
    left: 0px;
    height: 1.5em;
    margin-bottom: -1.5em;
    display: inline;
    list-style-position: inside;
   width: 43px;
   text-align: right;
   margin-right: 20px;
   font-variant-numeric: slashed-zero;
   color: #f7edef !important;
   /*background: #067aa8;*/
   padding: 2px 8px;
   border-radius: 3px;
  }
    .prod-card-body ul li.icon-notsupport:last-child::before {
        background: url("/static/frontend/svg/tilda_icons_warning.svg") no-repeat center center;
        background-size: contain;
      }
          .icon-minus {
            display: none;
          }
          .faq-item.active .icon-plus {
            display: none;
          }
          .faq-item.active .icon-minus {
            display: inline;
          }

/* ========================================== */
/* LAYOUT CONTACTO */
/* ========================================== */
.text-contact{
    position:relative;
    margin-top:30px;
}
.svg-acept::before{
    position: absolute;
    content: "";
    left: -8px;
    top: 14px;
    transform: translateY(-50%);
    background: url('/static/frontend/svg/checked.svg');
      background-position-x: 0%;
      background-position-y: 0%;
      background-repeat: repeat;
      background-size: auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
}

  .alert-session-start{
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    max-width: 600px;
  }

.form-group {
    margin-bottom: 20px;
    }

.contact-form p label {
    font-weight: 600;
    color: #333;
    float:left;
    margin-top:12px;
    }

.messages-container {
margin-bottom: 20px;
}
.alert {
padding: 12px 15px;
border-radius: 5px;
margin-bottom: 10px;
}
.alert-error {
background-color: #fee;
border: 1px solid #fcc;
}
.alert-success {
background-color: #efe;
border: 1px solid #cfc;
}
.captcha-group {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin: 8px 0;
    margin-bottom: 8px;
    padding: 5px 0px;
    background: #fff;
    border-radius: 8px;
    width: 100%;
    text-align: center;
}
.captcha-question {
display: flex;
align-items: center;
gap: 10px;
}
.captcha-question strong {
font-size: 1.1em;
color: #333;
}
.pin-verification-container {
padding: 30px;
background: #f8f9fa;
border-radius: 10px;
border: 2px solid #007bff;
}
.pin-info {
text-align: center;
margin-bottom: 25px;
}
.pin-info h4 {
color: #007bff;
margin-bottom: 10px;
}
.email-hint {
font-size: 0.9em;
color: #666;
margin-top: 5px;
}
.pin-group {
text-align: center;
}
.pin-input {
width: 150px;
height: 50px;
font-size: 24px;
text-align: center;
letter-spacing: 10px;
border: 2px solid #007bff;
border-radius: 8px;
margin: 15px auto;
display: block;
}
.pin-input:focus {
outline: none;
border-color: #0056b3;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}
.help-text {
display: block;
color: #666;
font-size: 0.85em;
margin-top: 10px;
}
.btn-submit {
width: 100%;
max-width:265px;
padding: 12px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 15px;
}
.btn-submit:hover {
background: #0056b3;
}
.pin-actions {
text-align: center;
margin-top: 15px;
}
.btn-secondary {
display: inline-block;
padding: 8px 20px;
background: #6c757d;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
}
.btn-secondary:hover {
background: #5a6268;
}

/* ========================================== */
/* LAYOUT DISENO WEB BARCELONA */
/* ========================================== */

    a.nav-breadcrumns:link, a.nav-breadcrumns:visited {
        color: #606060;
        margin-right:4px;
        margin-left:4px;
        font-family: inherit;
        font-size: 0.850rem;
    }
    a.nav-breadcrumns:hover {
        color: #171616;
    }
    .nav-breadcrumns-active{
        font-weight:600;
        font-size:0.850rem;
        margin-left:6px;
        color:#000;
    }
        .item-step-1, .item-step-2, .item-step-3, .item-step-4, .item-step-5, .item-step-6{
            min-height: 280px;
            box-shadow: 0px 12px 6px -10px rgba(0,0,0,0.35);
        }
        .item-step-1{
            position:relative;
            background: #f1f8ff;
            border-radius: 12px;
            border: 1px solid #c4e0fb;
        }
        .item-step-2{
            position:relative;
            background: #ecf7f0;
            border-radius: 12px;
            border: 1px solid #afe8c3;
        }
        .item-step-3{
            position:relative;
            background: #e7fcfd;
            border-radius: 12px;
            border: 1px solid #9fe7f2;
        }
        .item-step-4{
            position:relative;
            background: #f5fde5;
            border-radius: 12px;
            border: 1px solid #d0e87c;
        }
        .item-step-5{
            position:relative;
            background: #f9f6e7;
            border-radius: 12px;
            border: 1px solid #ece28c;
        }
        .item-step-6{
            position:relative;
            background: #fdf5ed;
            border-radius: 12px;
            border: 1px solid #ffd5b0;
        }
        .col-small-ico{
            /*display:flex;
            align-content: center;
            align-items: center;
            justify-content: space-around;*/
            width:60px;
            height:auto;
            /*margin-top: 30px;*/
        }
        .col-sketch-content{
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            align-items: baseline;
            /*max-width:470px;*/
            width:100%;
            height:auto;
            padding: 4px 8px;
            z-index:3;
        }
        .col-sketch-image{
            display:flex;
            align-content: center;
            align-items: center;
            justify-content: space-around;
            max-width:140px;
            width:100%;
            height:auto;
            text-align:center;
        }
        .col-sketch-image img{
            max-width:200px;
            width:100%;
            height:auto;
        }
        .img-esquema-development{
            width:100%;
            height: auto;
            max-width:540px;
        }
.webdev-hero-bground{
    background: url('/static/frontend/images/web-design-hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    height: 100%;
    z-index:100;
}
.title-wrap-header{
    border-radius:8px 8px 0 0;
}
.btn-login {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: transform 0.2s;
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
  .breadcrumb a {
    color: #405872;
    text-decoration: none;
  }
  .breadcrumb a:hover {
    color: #000;
  }
  .precio-original {
    margin-bottom: 5px;
  }
  .precio-tachado {
    text-decoration: line-through;
    color: #768593;
  }
  .precio-descuento {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }
  .productos-relacionados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

      .webdev-product-header{
        padding: 6px 10px;
        border-bottom: 1px solid #91b5b0;
        background: #cddfe1;
      }
      .linked-quick-mnu{
        position:absolute;
        display: inline-block;
        cursor: pointer;
        width:24px;
        height:24px;
        padding:3px;
        top:28%;
        right:10px;
      }
      .linked-quick-mnu img{
        width:16px;
        height:16px;
      }
      .toggle-menu {
        display: inline-block;
        width: 24px;
        height: 24px;
        cursor: pointer;
        transform: rotateX(180deg); /* por defecto mira hacia arriba */
        transition: transform 0.4s ease;
      }
      .linked-quick-mnu:hover .toggle-menu {
        transform: rotate(0deg);
      }
.custom-dropdown {
    position: absolute;
    top: 32px;  /* justo debajo del ícono */
    right: 0;   /* alineado a la derecha */
    width: 180px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
    display: none; /* oculto por defecto */
    flex-direction: column;
    font-size: inherit;
    z-index: 999;
    overflow: hidden;
  }
  .custom-dropdown a {
    padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
  }
  .custom-dropdown a:hover {
    background: #bdbdfc;
  }
  .custom-dropdown.show {
    display: flex;
    animation: slideDown 0.25s ease;
  }
      .webdev-product-content{
        display:flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: baseline;
        justify-content: center;
      }
      .webdev-product-description {
          margin: 5px 0;
          padding: 0px;
      }
      .precio-info {
        /*background: rgba(224,244,253,0.4);*/
        padding: 5px;
        border-radius: 8px;
        margin: 3px 0;
      }
      .precio-info p {
          margin: 3px 0;
      }
.accion {
    text-align: center;
    margin-bottom: 7px;
    height: 44px;
    position: absolute;
    bottom: 0%;
    padding-top: 5px;
    left: calc(50% / 2);
      }
      .btn-info {
        background: #074566;
        color: #fff;
        border: none;
        padding: 8px 24px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        transition: background 0.3s;
        margin-top: 0px;
      }
      .btn-info:hover {
        background: #00517d;
    }
      .btn-contratar {
          background: #329780;
          color: #fff;
          border: none;
          padding: 8px 24px;
          border-radius: 5px;
          cursor: pointer;
          font-size: 16px;
          font-weight:600;
          transition: background 0.3s;
      }
      .btn-contratar:hover {
          background: #266c5c;
      }
      .no-productos {
          text-align: center;
          padding: 40px;
          background: #f8f9fa;
          border-radius: 8px;
          color: #666;
      }
      .periodo-selector{
        background-color: #cfcbff;
        border-radius: 4px;
        text-align: center;
        }
        .select-payment-case{
            border: 1px solid #b685ff;
            padding: 5px;
            border-radius: 4px;
            margin-bottom: 3px;
            margin-top: 3px;
        }
        .price-month{
          padding:1px 0 4px 0;
          text-align: right;
        }
      .precio-total {
        color: inherit;
        margin-top: 10px;
        padding: 3px;
        background-color: rgba(126,191,249,0.4);
        border-radius: 4px;
        }
        .discount-row{
            height: 28px;
            line-height: 30px;
            background: #ffbf00;
            text-align: center;
            border-radius: 4px;
        }
    ._parent-bg-number {
        color: rgba(0,0,0,0.2);
        font-size: 65px;
        font-weight: 700;
        left: -106px;
        line-height: 100px;
        position: absolute;
        top: 157px;
        z-index: -1;
        }
        .breadcrumb {
            display:inline;
            color: #3e3c3c;
            font-size: 16px;
            padding: 15px;
            line-height:2rem;
        }
        .wdev-producto-header {
            margin-top:20px;
            margin-bottom: 20px;
            padding-bottom: 15px;
        }
        .wdev-producto-header h1 {
            font-size: 2em;
            color: #0066cc;
        }
        .referencia {
            color: #736c68;
            margin-top: 5px;
            display: inline-flex;
            width: 300px;
            padding: 4px 10px;
            background-color: #fbf4ee;
            border-radius: 24px;
            align-content: center;
            align-items: center;
            justify-content: center;
        }
        .producto-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 40px;
        }
        .producto-meta {
            background: #f9f9f9;
            border: 1px solid #d8d9d4;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .meta-item {
            margin-bottom: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #b1dffb;
        }
        .meta-item:last-child {
            border-bottom: none;
        }
        .producto-ficha-tecnica {
            margin-bottom: 30px;
            padding: 20px 20px 40px 20px;
            width: 100%;
            background: #f9f9f9;
            border: 1px solid #d8d9d4;
            border-radius: 6px;
            text-align:left;
            /*box-shadow: 0px 12px 6px -8px rgba(0,0,0,0.35);*/
            -webkit-box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
        }
        .producto-ficha-tecnica h3 {
            font-family: var(--nx-f-family-InterVariable);
            margin-bottom: 15px;
            color: #2e4155;
        }
        .ficha-content {
            line-height: 1.8;
            color: #555;
        }
        .producto-sidebar{
            width: 100%;
            max-width: 425px;
        }
        .precio-base {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 20px;
        }
        .precio-base h3 {
            font-size: 1.2em;
            color: #666;
            margin-bottom: 10px;
        }
        .periodo-selector label {
            display: inline;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .periodo-selector select {
            width: auto;
            font-size: 14px;
            padding: 5px 10px;
            cursor: pointer;
        }
        .periodo-selector select:focus {
            outline: none;
            border-color: #df5cf0;
        }
        .precio-desglose {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
        }
        .precio-desglose p {
            margin: 8px 0;
            font-size: 14px;
        }
        .descuento-badge {
            background: #e0ffe8;
            padding: 2px 15px;
            border-radius: 5px;
            text-align: center;
            margin: 15px 0;
            border: 1px solid #28a745;
            color: #0f5e40;
            font-size: 1.062rem;
        }
        .descuento-valor {
            font-size: 1.5em;
            font-weight: bold;
            color: #155724;
        }
        .precio-total-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background: #d8f7e2;
            color: #2e4155;
            padding: 8px 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .precio-total-box h3 {
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        .precio-total-valor {
            font-size: 2.5em;
            font-weight: bold;
        }
        .precio-consultar {
            background: #f8f9fa;
            padding: 30px;
            text-align: center;
            border-radius: 8px;
        }
        .precio-consultar h3 {
            color: #0066cc;
            margin-bottom: 10px;
        }
        .acciones-producto {
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .btn {
            padding: 15px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1em;
            font-weight: bold;
            transition: all 0.3s;
            text-align: center;
            width: 100%;
        }
        .productos-relacionados {
            /*top: 80px;
            position: sticky;*/
            padding:10px;
        }
        .productos-relacionados h2 {
            font-family: var(--nx-f-family-InterVariable);
            font-size: 2em;
            margin-bottom: 15px;
            color: #2e4155;
        }
        .productos-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        @media (max-width: 576px){
            .productos-grid {
                grid-template-columns: repeat(1, 1fr);
            }
        }
        .producto-relacionado-card {
            background: #f8fbff;
            border: 1px solid #b3d6f7;
            border-radius: 5px;
            padding: 14px;
            transition: all 0.3s;
        }
        .producto-relacionado-card:hover {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.131);
        }
        .producto-relacionado-card h3 {
            font-family: var(--nx-f-family-InterVariable);
            font-size: var(--nx-textsize-300);
            margin-bottom: 10px;
            color: #2d353d;
        }
        .producto-relacionado-card p {
            color: #666;
            margin-bottom: 15px;
        }
        .producto-relacionado-card .precio {
            font-weight: bold;
            color: #28a745;
            margin-bottom: 15px;
        }
        .btn-ver-mas {
            display: inline-block;
            padding: 8px 24px;
            background: #0269d0;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .btn-ver-mas:hover {
            background: #004599;
            color: #fff !important;
        }
        .no-disponible {
            background: #f8d7da;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            color: #721c24;
        }
        .precio-card {
            position: static;
        }
        .producto-info {
            padding: 14px 6px;
            margin-bottom: 10px;
            width:100%;
        }
        .brd-base-price {
            border: 4px solid var(--violet-gems);
            background-color: #fff;
            padding-top: 20px;
        }
        .precio-valor {
            font-size: var(--nx-textsize-350);
            font-weight:600;
            color: var(--blue-wing-teal);
          }
        .info-periodo-aumento{
            margin: 5px 0px;
            font-size: 14px;
            color: rgb(251, 66, 10);
            display: block;
          }
.btn-descargar-pdf {
    display: inline-block;
    background: #dc3545;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-descargar-pdf:hover {
    background: #c82333;
    transform: translateY(-2px);
}
.precio-base-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}
.precio-comparacion {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.precio-antes, .precio-despues {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.precio-destacado {
    color: #28a745;
    font-weight: 700;
    font-size: 28px;
}
.btn-solicitar-servicio {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}
.btn-solicitar-servicio:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-solicitar-servicio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-contacto {
    display: block;
    width: 280px;
    padding: 12px;
    color: #fff;
    background-color: #107d8e;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    transition: all 0.3s;
}
.btn-contacto:hover {
    color: #fff !important;
    background: #0a606e;
}
.btn-primary-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-primary-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-cancelar, .btn-enviar {
padding: 14px 30px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
border: none;
text-decoration: none;
display: inline-block;
}
.btn-cancelar {
background: #6c757d;
color: white;
}
.btn-cancelar:hover {
background: #5a6268;
}
.btn-enviar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-enviar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.precio-base-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.precio-calculado {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #e0e0e0;
}
.precio-con-descuento {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}
.precio-final {
    color: #28a745;
    font-weight: 700;
    font-size: 24px;
}
.btn-primary {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* ========================================== */
/* LAYOUT DESARROLLO DJANGO */
/* ========================================== */

/* ========================================== */
/* LAYOUT HOSTING BARCELONA */
/* ========================================== */
.prod-card-col-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-around;
    max-width: 24rem;
    width: 100%;
    min-height: 300px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
.prod-card-default{
    position: relative;
    background-color: #f9f9f9;
    color: #1b232d;
    border-radius:6px;
    border: 1px solid #c2c2c2;
    margin-top: 4px;
    margin-bottom: 14px;
    box-shadow: 0px 7px 5px -3px rgba(0,0,0,0.35);
    transition: box-shadow 0.1s ease-in-out 0.1s;
}
  .prod-card-header{
    display:flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width:100%;
    height: 80px;
    padding:0px;
    border-bottom: 1px solid #b0b6bb;
    position: relative;
    overflow: hidden;
    background: url('/static/frontend/images/prod-card-header-bg.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }
    .prod-card-body{
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        padding:14px;
        height: 465px;
    }
    .prod-card-footer{
        display:flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        width:100%;
        min-height: 214px;
        color: #fff;
        border-top: 1px solid #021f4d;
        background: #0e518c;
    }
    .prod-card-btninfo{
        background-color: #0b96ac;
        color: #fff;
        border: none;
        padding: 12px 24px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        transition: background 0.3s;
        min-width: 240px;
    }
    .prod-card-btninfo:hover{
        background-color:#04869a;
    }
    .prod-link-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .price-total-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(6, 185, 240, 0.34);
        padding: 5px 18px;
        border-radius: 8px;
        margin: 8px 0;
        min-width: 240px;
    }
    .prod-card-footer .prod-link-wrapper img{
        display: inline;
        width:32px;
        height:32px;
        margin-left:auto;
        margin-right:auto;
        transition: transform 0.3s ease;
    }
    .prod-card-footer .prod-link-wrapper:hover img {
        transform: translateX(8px); /* Mueve 8px a la derecha */
    }
    .prod-card-body ul {
        list-style-type: none;
        padding:4px;
    }
    .prod-card-body ul li {
        margin-left:20px;
        padding: 3px 0;
        border-bottom: 1px dashed #222;
    }
    .prod-card-body ul li::before {
        content: "";
        position: absolute;
        left: 6px;
        width: 24px;
        height: 24px;
        background: url("/static/frontend/svg/tilda_icons_accept-green.svg") no-repeat center center;
          background-size: auto;
        background-size: contain;
      }
.hosting-detalle-container {
    max-width: 1650px;
    width:100%;
    margin: 0 auto;
    padding: 0px;
  }
  .producto-header {
    /*display: grid;
    grid-template-columns: 1fr auto;*/
    display: flex;
    flex-direction: column;
    align-items: baseline;
    align-content: center;
    gap: 10px;
  }
    .main-header-product{
    margin-bottom: 40px;
    padding: 0px;
    }
  .inner-col-6{
    display:flex;
    flex-direction: column;
    align-content: center;
    align-items: baseline;
  }
  .product-hosting-wrapper{
    display:flex;
    align-items: center;
    align-content: center;
    padding:0px;
}
@media (max-width:1120px){
    .product-hosting-wrapper{
        flex-direction:column;
    }
}
  .product-base-info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 659px;
    width: 100%;
    padding: 12px;
    align-content: center;
    align-items: center;
    margin-bottom: 20px;
    }
  .producto-wrapper{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    align-content: center;
    border-bottom: 1px dashed #2c2c2c;
  }
  .producto-titulo h1 {
    margin-bottom: 10px;
  }
  .categoria-badge {
    display: inline-block;
    background: #bee7ff;
    color: #0c6be6;
    padding: 5px 20px;
    border-radius: 24px;
    margin-left: 13px;
    margin-bottom: 7px;
    border: 1px solid #3c99fd;
     }
  .producto-precios {
    text-align: right;
  }
  .garantia-uptime {
    margin-top: 15px;
    padding: 5px 10px;
    background: #e3fbe3;
    border-radius: 24px;
    border: 1px solid #28a745;
  }
  .especificaciones-tecnicas {
    margin-bottom: 40px;
    width: 100%;
  }
  .specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
  }
  .spec-section {
    margin-bottom: 10px;
    padding: 20px 20px 40px 20px;
    background: #f9f9f9;
    border: 1px solid #d8d9d4;
    border-radius: 6px;
    text-align:left;
    -webkit-box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
  }
  .spec-section h3 {
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #d7d7d6;
    padding-bottom: 10px;
  }
  .spec-list {
    list-style: none;
    padding: 0;
  }
  .spec-list li {
    padding: 8px 0;
    border-bottom: 1px solid #e6e6e6;
  }
  .spec-list li:last-child {
    border-bottom: none;
  }
  .spec-label {
    color: #7b7e6a;
    min-width: 120px;
    display: inline-block;
  }
  .servicios-adicionales {
    margin-bottom: 40px;
  }
  .servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
  }
  .servicio-item {
    padding: 25px;
    border-radius: 6px;
    background: #fffef9;
    border: 1px solid #ecddbb;
    /*box-shadow: 0px 12px 6px -8px rgba(0,0,0,0.25);*/
    -webkit-box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
  }
  .servicio-item h4 {
    margin-bottom: 15px;
    color: #333;
  }
  .ficha-tecnica-section {
    margin-bottom: 40px;
    text-align: center;
  }
  .download-btn {
    display: inline-block;
    background: #1976d2;
    color: white;
    padding: 15px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
  }
  .download-btn:hover {
    background: #1565c0;
  }
  .related-product-block{
    width:100%;
    height:auto;
    padding:10px;
    margin-bottom:25px;
  }
  .related-product-row {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .related-products-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 19rem;
    background: #f2f7f9;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
  }
  .related-prod-section-header{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    border-bottom: 2px solid #cee6f7;
  }
  .ver-detalle-btn {
    display: inline-block;
    background: #cbe2f7;
    color: #1978dd;
    padding: 8px 25px;
    border-radius: 24px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 10px;
    transition: background-color 0.3s easy-in-out;
    border: 1px solid #7baff2;
    }
  .ver-detalle-btn:hover {
    background: #0c6ace;
    color: #fff;
  }
  .contacto-section {
    text-align: center;
    padding: 40px;
    border-radius: 6px;
  }
  .contacto-btn {
    display: inline-block;
    background: #2ca332;
    color: white;
    padding: 7px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
    transition: background-color 0.3s;
  }
  .contacto-btn:hover {
    background: #1c9321;
    color:#fff;
  }
.periodo-info {
    text-align: center;
    color: #666;
}

/* ========================================== */
/* LAYOUT LOGIN REGISTER */
/* ========================================== */

  .user-login-form{
    max-width: 400px !important;
    width: 100%;
    background-color: #fdfcfc;
    padding: 20px;
    border: 1px solid #dcdcdc;
    border-top-color: rgb(220, 220, 220);
    border-top-style: solid;
    border-top-width: 1px;
    border-radius: 6px;
    border-top: 3px solid #d73c3c;
  }
  .user-login-form-label{
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    text-align:left;
  }
  .user-login-form .login-form-input{
    width: 100%;
    padding: 12px;
    border: 2px solid #c6bcbc;
    border-radius: 6px;
    font-size: 16px;
  }
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
.login-form-wrapper{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.form-control {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 15px;
transition: all 0.3s;
}

/* ========================================== */
/* LAYOUT MANTENIMIENTO */
/* ========================================== */
.detalle-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.info-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #c2c2c2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
}
.info-section h2 {
    margin-bottom: 20px;
}
.caracteristicas-lista {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.caracteristicas-lista li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.caracteristicas-lista svg {
    flex-shrink: 0;
    margin-top: 3px;
}
.caracteristicas-lista strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
}
.caracteristicas-lista p {
    color: #666;
    font-size: 14px;
    margin: 0;
}
.detalle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: fit-content;
}
.info-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #c2c2c2;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.selector-periodo-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.periodo-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
}
.periodo-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.descuento-alert {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.descuento-alert strong {
    display: block;
    color: #856404;
    margin-bottom: 5px;
}
.descuento-alert p {
    color: #856404;
    margin: 0;
    font-size: 14px;
}
.ahorro-info {
    text-align: center;
    padding: 10px;
    background: #d4edda;
    border-radius: 6px;
    margin-top: 10px;
    color: #155724;
    font-weight: 600;
}
.mantenimiento-servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
    width: 100%;
    margin: 0px 0;
    max-width: 1650px;
}

.mantenimiento-servicio-card {
    background: #fdfcfc;
    border: 3px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    position: relative;
    height: fit-content;
    min-width: 20rem;
}
@media (max-width:1120px) {
    .mantenimiento-servicio-card {
            min-width: 0;
    
        }
    }
.mantenimiento-servicio-card:hover {
    border-color: #667eea;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    transform: translateY(-4px);
}
.servicio-header {
    text-align: center;
    padding-bottom:5px;
    border-bottom: 2px solid #f0f0f0;
}
.badge-destacado {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
}
.servicio-ref {
    color: #666;
    margin-top: 8px;
}
.servicio-descripcion {
    flex-grow: 0;
    min-height: 40px;
}
.servicio-caracteristicas {
    flex-grow: 1;
    width: 100%;
}
.lista-caracteristicas {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.lista-caracteristicas li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 14px;
    color: #333;
}
.lista-caracteristicas svg {
    flex-shrink: 0;
}
.lista-caracteristicas li.caracteristica-adicional {
    color: #007bff;
    font-weight: 500;
}
.lista-caracteristicas li.caracteristica-adicional svg {
    fill: #007bff;
}
.servicio-periodo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.mnt-selector {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s;
    cursor: pointer;
}
.mnt-selector:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.servicio-precios {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
}
.descuento-info {
    text-align: center;
    margin-bottom: 12px;
}
.badge-descuento {
    background: #ffc107;
    color: #000;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}
.servicio-acciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

/* ========================================== */
/* LAYOUT PROGRAMACION */
/* ========================================== */

.section-disabled{
    display:none !important;
    visibility: none !important;
}
        .dev-items-wrapper{
            width:100%;
            height: 100%;
            min-height:100px;
        }
        .dev-items-header{
            position:relative;
            display:flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            justify-content: center;
            min-width:200px;
            height:100%;
            background-color: rgba(109, 200, 245,0.15);
            padding:8px 12px;
            border-right: 1px solid rgba(109, 200, 245,0.45);
            transition-property:all 0.3s ease-in-out;
        }
        .dev-items-content{
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            padding:10px;
            width: 100%;
            height: 100%;
            background: #fff;
        }
        .dev-items-wrapper #logotipo, .dev-items-wrapper #banners, .dev-items-wrapper #tarjetas, .dev-items-wrapper #folletos, .dev-items-wrapper #catalog, .dev-items-wrapper #multimedia{
            color:#333;
            transition:all 0.2s ease-in-out;
        }
        .dev-items-wrapper:hover #logotipo, .dev-items-wrapper:hover #banners, .dev-items-wrapper:hover #tarjetas, .dev-items-wrapper:hover #folletos, .dev-items-wrapper:hover #catalog,  .dev-items-wrapper:hover #multimedia{
            color:#009af7;
            transform: translateY(-30px);
            font-size:var(--nx-textsize-150) !important;
        }
        .dev-items-wrapper:hover .dev-items-content span{
            color:#009af7;
        }
        .half-conten-img{
            display:block;
            max-width:800px;
            width:100%;
            height:auto;
            overflow: hidden;
        }
        .half-conten-img img{
            max-width:800px;
            height: auto;
        }
        .section-title{
            font-family:var(--nx-f-family-Inter-cyrillic) !important;
            font-size: inherit;
            font-weight: inherit;
            letter-spacing:-0.02em;
        }
.item-services-row{
    display:flex;
    align-content: center;
    border-radius: max(0px, min(6px, -999900% - 169983px + 999900vw)) / 6px;
    overflow: hidden;
    /*box-shadow: 0px 0px 1px 0px rgba(25, 27, 35, 0.26), 0px 1px 2px 0px rgba(25, 27, 35, 0.22);*/
    box-shadow: 0px 0px 1px 0px rgba(1, 184, 255, 0.59), 0px 0px 4px -1px rgba(2, 156, 217, 0.58);
}
.item-services-row div img{
    width:100%;
    height:auto;
    max-width:300px;
}
        .faq-container {
            max-width: 1200px;
            width:100%;
            margin: 40px auto;
            padding: 0;
          }
          .faq-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 30px;
            color: #333;
          }
          .faq-item {
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
          }
          .faq-question {
            background-color: #fbfafa;
            cursor: pointer;
            padding: 18px 20px;
            font-weight: 600;
            font-size: 1.05rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
          }
          .faq-item.active .faq-question {
            background-color: #fbf8ca; /* amarillo pastel */
            border-bottom:1px solid #cac8a1;
          }
          .faq-question:hover {
            background-color: #f2f2f2;
          }
          .faq-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .faq-answer {
            background-color: #fbfbfb;
            font-size: 1rem;
            line-height: 1.6;
            color: #333;
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s ease, padding 0.4s ease;
          }
          .faq-answer.open {
            padding: 14px 20px;
            max-height: 800px;
          }
          .faq-answer img {
            max-width: 100%;
            height: auto;
            margin-top: 10px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
          }

/* ========================================== */
/* LAYOUT SOPORTE */
/* ========================================== */

/* ========================================== */
/* LAYOUT WEB WORDPRESS */
/* ========================================== */
.card-item-wordpress{
    position:relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 23rem;
    width:100%;
    min-height:170px;
    padding:40px;
    background-color: rgb(249, 248, 248);
    border: 1px solid #ccc;
    border-radius:6px;
    overflow: hidden;
    box-shadow: 0 4px 3px -2px rgba(0,0,0,0.23);
}
.item-number-wps{
color: rgba(177, 110, 179, 0.2);
font-size: 96px;
font-weight: 700;
left: 80%;
line-height: 100px;
position: absolute;
top: 78px;
z-index: 1;
}

.valor-total {
font-size: 28px;
font-weight: 700;
color: #28a745;
}
.stock-wrapper-row {
display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    align-content: center;
    width:auto;
    padding: 3px;
    margin: 0 0 3px 0;
}
.resumen-item .valor {
font-weight: 600;
color: #333;
}
/* Características */
.servicio-caracteristicas {
flex-grow: 1;
    width: 100%;
}

a.item-link-more:hover {
text-decoration: none !important;
    color:#c60505;
}
.col-quarter div.structure-points div.sketch-col {
display:block !important;
            padding-right: 24px !important;
}
@media (max-width: 768px) {
.slider-section {
                max-width: 100%;
            }
}
.svg-icon-outstock {
width:24px;
    height:24px;
    position:relative;
    top:4px;
    margin-right:12px;
    fill: #aa412c;
}
.items-row {
display:flex;
            flex-direction: row;
            align-items: baseline;
            align-content: center;
            justify-content: center;
            width:100%;
            max-width:max-content;
            gap:0.5rem;
}
.nx-btn-delete-product {
background: #aa412c;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 1.0rem;
    padding: 9px 20px;
    margin:4px;
    border-radius: 0px;
    border: 1px solid transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,0.30);
    transition: all 0.3s ease;
    cursor: pointer;
}
.forgot-password a:hover {
color: #667eea;
}
.domain-section {
background: #f0f4ff;
            padding: 15px;
            border-radius: 6px;
            margin-top: 15px;
}
/****  Main content static media ***/
  .img-screen-design {
max-width: 650px;
    height: 100%;
    width:100%;
}
/* Cuando pasa el mouse → rota hacia abajo */
      .linked-quick-mnu:hover .toggle-menu {
transform: rotate(0deg);
}
ul.circle-style li {
padding:4px 0;
}
/*** HERO Login - Register - Access */
  .alert-session-start {
padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    max-width: 600px;
}
.nav-user-icons ul {
list-style-type: none;
    padding:0px;
}
.hero-subtext-col:nth-child(2):hover .child-wrapper {
position:absolute;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            width:100%;
            max-width:690px;
            height: 100%;
            background: #ffe40c;
            top:0% !important;
            left:0px;
            opacity: 1;
            z-index:3;
}
.rounded-full {
border-radius: 9999px;
}
@media only screen and (max-width:799px) {
.hero-grow-content{
        display:flex;
        flex-direction: column;
        gap:8px;
        width:100%;
    }
}
@media only screen and (max-width: 800px) {
.hero-subtext-col {
          min-height: 266px !important;
        }
}
/* ============================= */
/* POSICIONES */
/* ============================= */

/* TOP (CENTRADO) */
.tooltip[data-position="top"] .tooltip-content {
bottom: calc(70% + 10px);
    left: 50%;
    transform-origin: bottom center;
    translate: -50% 0;
}
/* Botones */
.servicio-acciones {
display: flex;
    flex-direction: column;
    gap: 12px;
}
/*********** Window popup *****/
/********** Section Slider 3 blocks **********/
.slider-section {
position: relative;
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    padding-bottom: 40px;
    /*background-color: #fff;*/
    height: auto;
}
/* Menú oculto inicialmente */
.custom-dropdown {
position: absolute;
    top: 32px;  /* justo debajo del ícono */
    right: 0;   /* alineado a la derecha */
    width: 180px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
    display: none; /* oculto por defecto */
    flex-direction: column;
    font-size: inherit;
    z-index: 999;
    overflow: hidden;
}
.descripcion-content,
        .ficha-content {
line-height: 1.8;
            color: #555;
}
hgroup p {
margin: 0;
  font-weight: bold;
}
/*.precio-valor {
font-size: 2.5em;
            font-weight: bold;
            color: #18416a;
}
.stock-notice-row {
display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    max-width:240px;
    padding:4px 14px;
    background: #cfffdf;
    border:1px solid #94de7a;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:auto;
    margin-right:auto;
}
/* Rotación en hover según el data-attribute */
  .hex[data-flip-direction="3d-y-flip"]:hover .cards-flip__wrapper {
transform: rotateY(180deg);
}
@keyframes blinker {
50% {
    opacity: 0;}
}
.formulario-card, .resumen-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
#zoom-area {
display: none;
    position: absolute;
    width: 160px;
    height: 160px;
    border: 3px solid #ddff00;
    overflow: hidden;
    cursor: crosshair;
    pointer-events: none; /* No interfiere con eventos del mouse */
    background-repeat: no-repeat;
    background-size: 1800px 1100px; /* Duplicamos el tamaño de la imagen principal */
}
.login-box {
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    max-width: 500px;
    margin: 0 auto;
}
@keyframes grow {
from {
                transform: scale(0);
            }
            to {
                transform: scale(1);
            }
}
/*=========================================
*** Solicitud Mantenimiento Form Section
=========================================*/

.login-tabs {
display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #ddd;
}

.marker-accept {
display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: content-box;
    fill: currentColor;
    flex-shrink: 0;
    outline: 0;
    color: #00c192;
    position: relative;
    bottom: 0;
    margin-right: 5px;
    top: 2px;
}
.nx-text-sketch-programming {
color:#1ac6ff;
            font-weight:600 !important;
}
/*--------  Anim Rounded -------*/
  .anim-absolute {
position:absolute;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
input[type=radio]:checked {
background-color: #1b54ff;
}
.sidebar-productos-grid {
display:grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            justify-content:center;
            gap: 20px;
}
/* Responsive */
    .main-header-product {
margin-bottom: 40px;
    padding: 0px;
}
/* Resumen */
.resumen-contenido {
margin: 20px 0;
}
::-moz-selection {
background: #dd1868;
    color: #ffffff;
}
/* ============================= */
/* TEXTO */
/* ============================= */
.tooltip-title {
display: block;
    background: #2a2a2a;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
}
.tab-content.active {
display: block;
}
.recovery-header {
text-align: center;
    margin-bottom: 30px;
}
@keyframes ripple {
0%,
    to {
     transform:translate(-50%,-50%) scale(1)
    }
    50% {
     transform:translate(-50%,-50%) scale(.9)
    }
}
/********* Border's content **********/
/***** HERO Section ****/
.video-background {
position: relative;
    width: 100%;
    height: 100%; /* Ajusta esto según sea necesario */
    overflow: hidden;
}
:-ms-input-placeholder {
color: #999;
}
.formulario-header {
margin-bottom: 40px;
}
.tooltip[data-position="top-left"] .tooltip-content::after {
top: 100%;
    right: 12px;
    border-top-color: #fbcc24;
}
.sketch-ground-development {
background: url(/static/frontend/svg/sketch-switch-desarrollo.svg) no-repeat left 0px;
            background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
}
.nx-text-sketch-seo {
color:#96ca24;
            font-weight:600 !important;
}
.login-form-inline {
max-width: 400px;
    width: 100%;
}
/* Cara frontal */
  .front-face__card {
z-index: 2;
    transform: rotateY(0deg);
}
.nx-btn-addtocart:hover {
background: #058bf1;
    color: #ffffff;
    transform: translateX(-3px);
    box-shadow: 0 1px 3px rgba(0,0,0,.50);
}
@media only screen and (max-width: 360px) {
.hero-subtext-col {
              min-height: 314px !important;
            }
}
/*******/
    ._parent-bg-number {
color: rgba(0,0,0,0.2);
        font-size: 65px;
        font-weight: 700;
        left: -46px;
        line-height: 100px;
        position: absolute;
        top: 157px;
        z-index: -1;
}
.hero-subtext-col:nth-child(1) {
border-top: 8px solid #e1e806;
            text-align: initial;
}
.servicio-destacado {
border-color: #ffc107;
    background: linear-gradient(135deg, #fffbf0 0%, #ffffff 100%);
}
.thumbnails .thumb:hover {
border-color: #fff;
    transform: scale(1.2);
}
.outstock-notice-row {
display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    max-width:240px;
    padding:4px 14px;
    background: #fedad9;
    border:1px solid #eaa0a2;
    margin-top:0px;
    margin-bottom:0px;
}
/*** Page - Solicitud formulario servicio diseño web ***/
        /*** Section FAQs questions/answers ***/
        .faq-container {
max-width: 1200px;
            width:100%;
            margin: 40px auto;
            padding: 0;
}
.hero-subtext-col:nth-child(3) .child-wrapper {
position:absolute;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            width:100%;
            max-width:690px;
            height: 100%;
            padding:0px;
            background: #ffa800;
            top:-100%;
            left:0px;
            opacity: 1;
            transition: top 0.4s ease-in-out;
}
/************* Inner Wrapper **********/
/******* Thumbs of Products ******/
.thumbs-product {
width:120px;
    height:120px;
    padding:0px;
    margin:2px;
}
@keyframes marquee-vertical {
0% {
     transform:translateY(0)
    }
    to {
     transform:translateY(calc(-100% - var(--gap)))
    }
}
.hero-subtext-col:nth-child(2) .inner-hero-wrapper {
width: 100%;
            height: 100%;
            border-bottom: 1px solid #d4bd00;
            padding: 0px;
            scrollbar-color: #d4bd00 #ffe40c; /* Color del thumb y del track */
}
.item-child-link:hover::before {
transform: translateX(14px);
    opacity: 0;
}
.hero-subtext-col:nth-child(1) .inner-hero-wrapper::-webkit-scrollbar-track {
background-color: #e1e806; /* Color del fondo de la barra de desplazamiento */
}
.item-child-flex-1 {
display: flex;
    flex-direction: column;
    justify-content:baseline; /* with flex-direction column - display content on the top */
    align-items: center; /* with flex-direction column - display content align in center */
    flex-grow: 1;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    background-color: #fff;
    width: 100%;
    min-height: 420px;
    margin-bottom:16px;
    height:420px;
    overflow: hidden;
}
.solicitud-header h1 {
margin: 0 0 10px 0;
}

.hero-subtext-col:nth-child(3):after {
content: "";
            display: inline-block;
            background-image: url(/static/frontend/svg/arrow-up-circle-child3.svg);
            background-size: contain;
            background-repeat: no-repeat;
            width: 40px;
            height: 40px;
            position: absolute;
            top:80%;
            animation: bounce 1.5s ease-in-out infinite;
            animation-delay: 1.66s; /* Intervalo de espera */
            animation-iteration-count: 2;
            z-index:1;
            cursor: pointer;
}
/*=================================================
*** Mantenimiento Web - Page Detailes Info
================================================*/
.detalle-grid-mantenimiento {
display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
    max-width: 1650px;
    margin: 0 auto;
}
/***=============================================
  Contact Form
 ==============================================*/
    .producto-precios {
text-align: center;
}
.hero-subtext-col:nth-child(2) .inner-hero-wrapper::-webkit-scrollbar-thumb {
background-color: #d4bd00; /* Color del thumb (barra de desplazamiento) */
            border-radius: 5px; /* Bordes redondeados */
}
.form-solicitud-webdesign label {
text-align:left;
}
.product-selection-badge {
background: #e8f5e9; 
    padding: 15px; 
    border-radius: 6px; 
    margin-top: 15px; 
    border-left: 4px solid #4caf50; 
    text-align:left;
    width: 100%;
}
/***=========================
* Login section
===========================*/
/*************** Page - hosting-detalle.html ****************/
/* Estilos para la página de detalle */
.hosting-detalle-container {
max-width: 1650px;
    width:100%;
    margin: 0 auto;
    padding: 0px;
}
/******** Translator - Estilos para el botón ********/ 
/*********** Window popup *****/
.popup-overlay {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index:9999;
}
/*.item-child-link:hover::before {
transform: translateX(14px);
    opacity: 1;
}
.hero-grow-content {
display:flex;
    flex-direction: row;
    gap:24px;
    width:100%;
}
/* Mostrar el menú desplegable cuando el usuario pasa el cursor */
.dropdown:hover .dropdown-content {
display: block;
}
.hero-subtext-col:nth-child(3) .inner-hero-wrapper::-webkit-scrollbar-thumb {
background-color: #cc8600; /* Color del thumb (barra de desplazamiento) */
            border-radius: 5px; /* Bordes redondeados */
}
.arrow {
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(189, 186, 186, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
}
/*#hero-hexagon .front_face_bg_r2-04 {
background-color: rgba(153, 239, 248, 0.5);
}
/*======================================================
*** Login form - Page User Login
=======================================================*/
.login-form-wrapper {
display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.recovery-header p {
color: #666;
    margin: 0;
}
.checkbox-item label, .radio-item label {
margin: 0;
            cursor: pointer;
            font-weight: normal;
}
.nav-user-icons ul li {
display: inline-flex;
    padding: 2px 4px;
    margin-right: 4px;
    line-height: 4px;
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    overflow: hidden; /* Evita que el fondo se desborde */
    z-index: 0; /* Asegura que el li esté en una capa específica */
}
@media (min-width: 599px) {
#hero-hexagon .hide-on-xxl {
                display: none !important;
            }
            #hero-hexagon .show-on-xxl {
                display: inline-block !important;
            }
}
/* Animación de cambio de fondo con 9 colores */
          @keyframes backgroundChange {
0% { background: #252756; }   /* Azul oscuro */
            11.11% { background: #163c5f; } /* Azul medio */
            22.22% { background: #0b4251; } /* Púrpura oscuro */
            33.33% { background: #26403a; } /* Vino oscuro */
            44.44% { background: #404634; } /* Verde oscuro */
            55.55% { background: #4a4117; } /* Marrón oscuro */
            66.66% { background: #573e29; } /* Rojo oscuro */
            77.77% { background: #631903; } /* Gris azulado */
            88.88% { background: #590d17; } /* Teal oscuro */
            100% { background: #362640; }  /* Vuelve al inicio */
}
.recovery-icon {
font-size: 64px;
    margin-bottom: 20px;
}
.new-domain-input {
display: none;
            margin-top: 15px;
            animation: slideDown 0.3s ease;
}
.checkbox-group, .radio-group {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 10px;
}
.tooltip[data-position="bottom"] .tooltip-content::after {
bottom: 100%;
    left: 50%;
    translate: -50% 0;
    border-bottom-color: #fbcc24;
}
.resumen-footer {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid #e0e0e0;
text-align: center;
color: #666;
}
/* Define for - front_face_rand_bg_r3-02 */
          @keyframes bgColorCycle_r3-02 {
0% {
              background-color: rgba(9, 107, 135, 0.134);
            }
            50% {
              background-color: rgba(4, 157, 177, 0.49);
            }
            100% {
              background-color: rgba(9, 107, 135, 0.134);
            }
}
.stock-full {
background: #b3eb9f;
    border:1px solid rgb(45, 147, 70);
}
@media (max-width: 968px) {
.producto-grid {
                grid-template-columns: 1fr;
            }
            .precio-card {
                position: static;
            }
}
.hero-subtext-col:nth-child(1):hover .child-wrapper {
position:absolute;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            width:100%;
            max-width:690px;
            height: 100%;
            background: #e1e806;
            top:0% !important;
            left:0px;
            opacity: 1;
            z-index:3;
}
.product-selection-price {
font-size: 18px;
}

.card-wrapper ul li.icon-notsupport:last-child::before {
background: url(/static/frontend/svg/tilda_icons_warning.svg) no-repeat center center;
    background-size: contain;
}
.sketch-ground-seo {
background: url(/static/frontend/svg/sketch-switch-seo.svg) no-repeat left 0px;
            background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
}
/* Estilos de los links */
  .custom-dropdown a {
padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}
.hero-subtext-col:nth-child(1) .inner-hero-wrapper {
width: 100%;
            height: 100%;
            border-bottom: 1px solid #9a9f04;
            padding: 0px;
            scrollbar-color: #9a9f04 #e1e806; /* Color del thumb y del track */
}
/**********  Product Thumbs Gallery *****/
.main-image-container {
position:relative;
    display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 624px;
    overflow: hidden;
}
.nx-toolbar {
padding-top: 6px;
    padding-bottom: 0px;
    box-sizing: content-box;
    position: relative;
}
.col-quarter div.structure-points div {
min-height:40px;
            padding:0px;
}
/* FOCUS → SOLO BORDE ROJO */
input:focus,
textarea:focus {
outline: none;
    border: 2px solid #c51010 !important;
    box-shadow: 0px 0px 10px rgba(146, 1, 1, 0.5);
}
.form-label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.go-top-btn:hover {
background-color: #333;
}
.item-child-link:hover::after {
transform: translateX(14px);
    opacity: 1;
}
.hero-subtext-col:nth-child(2) .inner-hero-wrapper::-webkit-scrollbar-track {
background-color: #ffe40c; /* Color del fondo de la barra de desplazamiento */
}
*/
        .periodo-selector {
margin: 4px 0;
}
.nx-text-sketch-development {
color:#35ac72;
            font-weight:600 !important;
}
.arrow.right {
right: -52px;
}
.slider-row {
display: flex;
    flex: 0 0 100%;
    min-height: 320px;
    height:auto;
    justify-content: space-between;
}
.register-link a {
color: #667eea;
    text-decoration: none;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (min-width:1921px) {
.hero-hosting-media{
            min-height: 600px;
        }
}
/* Menú estático */
.static-menu {
position: relative;
}
.animate-pulse {
animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite
}
@keyframes zoomIn {
from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
}
50% {
    opacity: 1;
}
}
/* Contenido del menú desplegable (oculto por defecto) */
.dropdown-content {
display: none;
    position: absolute;
    background: #f8f8f8;
    min-width: 145px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.42);
    z-index: 1;
}
.hiddenprice-row {
display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 260px;
    padding:4px 14px;
    background: #c3f3ff;
    border:1px solid #5eddf4;
    color:#000;
    margin-top:10px;
    margin-bottom:20px;
}
.hero-subtext-col:nth-child(2) {
border-top: 8px solid #ffe40c;
            text-align: initial;
}
.stock-counter-block {
display: block;
    width:58px;
    height: 42px;
    padding:2px;
    line-height: 42px;
    margin-right: 4px;
}
.zoomIn {
animation-name: zoomIn;
}
.privacy-checkbox input {
margin-top: 3px;
}
@media only screen and (max-width:1120px) {
.producto-header {
        border-right: 0px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
}
.new-domain-input.active {
display: block;
}
/*** Breadcrumbs **/
    a.nav-breadcrumns:link, a.nav-breadcrumns:visited {
color: #606060;
        margin-right:4px;
        margin-left:4px;
        font-family: inherit;
        font-size: 0.850rem;
}
.item-child-flex {
display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
}

.producto-descripcion h3,
        .producto-ficha-tecnica h3 {
font-family: var(--nx-f-family-InterVariable);
            margin-bottom: 15px;
            color: #2e4155;
}
/*** Go to Top */
.go-top-btn {
position: fixed;
    bottom: 4px;
    right: 20px;
    width: 54px;
    height: 54px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
    display: none;
    z-index: 1000;
}
.blinking-cursor {
display: inline;
    animation: blink 0.8s steps(2, start) infinite;
    color: rgb(255, 255, 255);
    margin-left: 4px;
}
.item-scrolling-child {
display:flex;
            flex-direction:column;
            align-items:baseline;
            height:auto;
            padding: 20px;
            overflow-y: auto;
}
/*********/
        .col-quarter div.structure-points div:nth-child(1) {
width: 60px;
            display: inline;
            height: 100%;
            background-position: center center;
}
.btn-secundario {
background: white;
    color: #667eea;
    border: 2px solid #667eea;
}
.specs-grid,
    .servicios-grid {
grid-template-columns: 1fr;
}
/* Imagen de la bandera dentro de la opción */
.dropdown-content a img {
width: 24px;
    height: 16px;
    margin-right: 10px;
}
/*******  CSS Media SVG Icons and PNG *******/
 .svg-icon-instock {
width:24px;
    height:24px;
    position:relative;
    top:4px;
    margin-right:12px;
    fill: #278604;
}
.hero-subtext-col:nth-child(3) .inner-hero-wrapper::-webkit-scrollbar-track {
background-color: #ffa800; /* Color del fondo de la barra de desplazamiento */
}
@media (max-width:640px) {
.acciones-producto {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                gap: 6px;
            }
}
.tab-btn:hover {
color: #667eea;
}
.hero-subtext-col:nth-child(3) .inner-hero-wrapper {
width: 100%;
            height: 100%;
            border-bottom: 1px solid #cc8600;
            padding: 0px;
            scrollbar-color: #cc8600 #ffa800; /* Color del thumb y del track */
}
/* Caras del hexágono */
  .front-face__card,
  .back-face__card {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/*** Hex Rotation ***/
        
        @media (min-width: 600px) {
#hero-hexagon .hex-container .hex-i {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: var(--hex-width);
          margin: var(--hex-margin);
          height: calc(var(--hex-width) * 1.1547);
          display: inline-block;
          font-size: initial;
          clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
          transform: scale(0);
          animation: grow 0.5s ease forwards;
            animation-delay: 0s;
          overflow: visible;
        } 
        #hero-hexagon .hex-container .hex .icon {
            position: absolute;
            width: 56px;
            height: 56px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            z-index: 100;
        }
}
.rounded-square {
border-radius: 9px;
}
@media only screen and (max-width: 1120px) {
.footer-container{
    justify-content: flex-start;
    gap: .500rem;
    }
}
.form-checkbox input[type="checkbox"] {
margin-top: 3px;
cursor: pointer;
}
.nav-user-icons ul li::before {
content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Inicialmente el fondo no es visible */
    height: 100%;
    background-color: rgba(136, 13, 54, 0.50);
    transition: width 0.2s ease-in-out; /* Anima el crecimiento del fondo */
    z-index: -1; /* Mantiene el pseudo-elemento debajo del contenido */
}
.servicio-info-box {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #667eea;
}
@media (min-width: 600px) {
#hero-hexagon .hex-c-1-01 {
          background-color: rgba(219, 233, 245, 0.03);
        }
        #hero-hexagon .hex-c-1-12 {
            background-color: rgba(9, 169, 196, 0.29);
          }
}
/* Hero Develop Apps Section */
/* Contact Support Page */
.btn-primario {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.form-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
}

/*=====================================
  *** Contacto / Page Contact Form
  ======================================*/
.contact-form{
    display:flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    align-content: center;
    justify-content: flex-start;
    width: 100%;
    max-width:540px;
    background: #fbfbfb;
    padding: 10px 20px;
    border: 1px solid #e6e4e4;
    margin-top: 20px;
    border-radius: 8px;
    border-top: 4px solid #01a5e6;
  }
  .contact-form label{
    text-align:left;
  }
  .submit-btn-wrapper{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap:1rem;
    margin:12px 0;
}
@media (max-width:1650px){
    .submit-btn-wrapper{
        flex-direction: column;
    }
}

/* Empty state */
.empty-state {
text-align: center;
    padding: 60px 20px;
}
.cart-product-thumbimage {
display:block;
	width:160px;
	height:110px;
	overflow: hidden;
}
.resumen-descuento {
background: #fff1c5;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
}
@keyframes slideDown {
from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
}
.hero-card-section {
display: flex;
    flex-direction: column;
    align-content: center;
    width:100%;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-left:4px;
    padding-right:4px;
}
/* Hosting products view card */
.prod-card-col-3 {
display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-around;
    max-width: 24rem;
    width: 100%;
    min-height: 300px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Wrapper interno que controla la rotación */
  .cards-flip__wrapper {
position: relative;
    width: 100%;
    height: 100%;
    perspective: initial;
    transform-style: preserve-3d;
    transition: transform 1300ms cubic-bezier(.17, .67, .5, 1);
}
.hero-subtext-col:nth-child(1):after {
content: "";
            display: inline-block;
            background-image: url(/static/frontend/svg/arrow-up-circle-child1.svg);
            background-size: contain;
            background-repeat: no-repeat;
            width: 40px;
            height: 40px;
            position: absolute;
            top:80%;
            animation: bounce 1.5s ease-in-out infinite;
            animation-delay: 1s; /* Intervalo de espera */
            animation-iteration-count: 2;
            z-index:1;
            cursor: pointer;
}
@media only screen and (max-width: 112px) {
.header-navigation{
    display:none !important;
}
}

.nav-user-icons ul li:hover::before {
width: 100%; /* El fondo crece para cubrir todo el elemento */
}
.hero-subtext-col:nth-child(2):after {
content: "";
            display: inline-block;
            background-image: url(/static/frontend/svg/arrow-up-circle-child2.svg);
            background-size: contain;
            background-repeat: no-repeat;
            width: 40px;
            height: 40px;
            position: absolute;
            top:80%;
            animation: bounce 1.5s ease-in-out infinite;
            animation-delay: 1.33s; /* Intervalo de espera */
            animation-iteration-count: 2;
            z-index:1;
            cursor: pointer;
}
/***********  CSS Media SVG Icons and PNG *******/
/******** Footer *********/
.footer-logo-wrapper {
display: flex;
flex-direction: column;
align-items: center;
align-content: center !important;
justify-content: center;
max-width: 850px;
width: 100%;
}
/**** Disabled elements ***/
.spacer-obj-x {
margin-right: 12px;
}
/* ============================= */
/* FLECHA BASE */
/* ============================= */
.tooltip-content::after {
content: "";
    position: absolute;
    border: 7px solid transparent;
}
.form-help {
display: block;
margin-top: 5px;
font-size: 13px;
color: #666;
}

/* ============================= */
/* CONTENIDO */
/* ============================= */
.tooltip-content {
position: absolute;
    min-width: 290px;
    max-width: 300px;
    background: #fbcc24;
    color: #000;
    border-radius: 6px;
    overflow: hidden;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity .2s ease, transform .2s ease;
}
.animate-ripple {
animation: ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite;
}
.meta-info {
margin-top: 15px;
          padding-top: 10px;
          border-top: 1px solid #eee;
}
.mantenimiento-descuento-badge {
background: #fba500;
    color: #fff;
    padding: 6px 34px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 8px;
}
.hero-subtext-col:nth-child(1) .child-wrapper {
position:absolute;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            width:100%;
            max-width:690px;
            height: 100%;
            padding:0px;
            background: #e1e806;
            top:-100%;
            left:0px;
            opacity: 1;
            transition: top 0.4s ease-in-out;
}
/*** Web design page - hero section ***/
    /*** Start page - hero section ***/
        #hero-hexagon {
display: block;
            background-color: #013E9B;
            position: relative;
            overflow: hidden;
}
.tab-content {
display: none;
}
.slider-row:nth-child(even) div, .slider-row:nth-child(odd) div {
background-color: #ffffff;
}
.back-link a {
color: #667eea;
    text-decoration: none;
    font-weight: 600;
}
.tooltip[data-position="top"] .tooltip-content::after {
top: 100%;
    left: 50%;
    translate: -50% 0;
    border-top-color: #fbcc24;
}
/******** Toolbar **************/
.toolbar-enabled {
display: block;
}
.sketch-ground-design {
background: url(/static/frontend/svg/sketch-switch-design.svg) no-repeat left 0px;
            background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
}
.time-input-group {
display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
}
/* Descripción */
.servicio-descripcion {
flex-grow: 0;
    min-height: 40px;
}
@media only screen and(max-width:1365px) {
.hero-card-section{
        display: flex;
        flex-direction: column;
        align-content: center;
        width:100%;
    }
}
.char-counter {
text-align: right;
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
}
.video-background video {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}
.resumen-info {
text-align: center;
color: #666;
}
.svg-section-row {
float: left;
    margin-right: 20px;
}
/********* Add to cart, Delete, Wishlist Buttons ***********/      
.cart-layer-row {
display: flex;
    flex-direction: column;
    align-items: center;
}
::placeholder {
color: #999;
}
/********* SVG Icons ***********/
.svg-sub-icon {
position:relative;
    top:16px;
    margin-right:10px;
}
.fadeInUp {
animation-name: fadeInUp;
}
/* Responsive */
@media (max-width: 768px) {
.servicios-grid {
        grid-template-columns: 1fr;
    }
    
    .mantenimiento-servicio-card {
        min-height: auto;
    }
}

.resumen-card {
position: sticky;
top: 80px;
height: fit-content;
}
.animate-marquee {
animation:marquee var(--duration) linear infinite
}
.popup-header {
width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px;
}
@keyframes lightSpeedIn {
from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
}
60% {
    transform: skewX(20deg);
    opacity: 1;
}
80% {
    transform: skewX(-5deg);
    opacity: 1;
}
to {
    transform: none;
    opacity: 1;
}
}
/*=====================================
*** Mantenimiento Page 
=====================================*/
/* Mostrar menú */
  .custom-dropdown.show {
display: flex;
    animation: slideDown 0.25s ease;
}
.checkbox-item:hover, .radio-item:hover {
background: #e9ecef;
}
@media only screen and (max-width:680px) {
#typewriter-wrapper {
        min-height: 250px;
        height: 100%; 
        margin-top:20px;
    }
}
/* Header */
.servicio-header {
text-align: center;
    padding-bottom:5px;
    border-bottom: 2px solid #f0f0f0;
}
.item-child-flex-4 {
display: flex;
    flex-direction: column;
    justify-content: baseline; /* with flex-direction column display content on the middle */
    align-items: center; /* with flex-direction column - display content align in center */
    flex-grow: 1;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    background-color: #fff;
    width: 100%;
    min-height: 420px;
    margin-bottom:16px;
    height:420px;
    overflow: hidden;
}
@keyframes fadeInOut {
0% { opacity: 0; }
    20% { opacity: 1; } /* Aparece completamente */
    80% { opacity: 1; } /* Se mantiene visible */
    100% { opacity: 0; } /* Desaparece */
}
.product-selection-title, .product-selection-payment, .product-selection-baseprice, .product-selection-totalprice {
color: #2e7d32;
}
@media only screen and (max-width: 1365px) {
.nav-menu-default {
        display:none !important;
    }
}
/*.producto-descripcion {
margin-bottom: 40px;
    padding: 30px;
    background: #ffffff;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #d7d7d7;
    box-shadow: 0px 12px 6px -8px rgba(0,0,0,0.35);
}
.arrow:hover {
background-color: rgba(31, 26, 26, 1);
}
/*** WordPress services card */
.card-item-wordpress {
position:relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 23rem;
    width:100%;
    min-height:170px;
    padding:40px;
    background-color: rgb(249, 248, 248);
    border: 1px solid #ccc;
    border-radius:6px;
    overflow: hidden;
    box-shadow: 0 4px 3px -2px rgba(0,0,0,0.23);
}
.overzooming {
transition: transform 0.4s ease-in-out;
}
.hero-subtext-col:nth-child(1) .inner-hero-wrapper::-webkit-scrollbar-thumb {
background-color: #9a9f04; /* Color del thumb (barra de desplazamiento) */
            border-radius: 5px; /* Bordes redondeados */
}
/* Disable Full Section
=====================*/
#hidden-section {
display: none !important;
    visibility: hidden !important;
}
.dropdown-content a:hover {
background: #F0F0F0;
}
.sticky-header {
position: -webkit-sticky; /* Para navegadores webkit */
  position: sticky; /* Apply the sticky positioning */
  top: 0; /* Stick the element to the top of the viewport */
  z-index: 1000; /* Ensure the navbar is above other content */
}
/*** Hex Rotation **/
         /* Contenedor principal del hexágono con rotación */
.hex.hexa-rotation {
perspective: 1000px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
/* Define for - front_face_rand_bg_r2-04 */
          @keyframes bgColorCycle_r2-04 {
0% {
              background-color: rgba(207, 240, 244, 0.08);
            }
            50% {
              background-color: rgba(62, 198, 247, 0.435);
            }
            100% {
              background-color: rgba(207, 240, 244, 0.08);
            }
}
/*************************/
  @keyframes marquee {
0% {
     transform:translateX(0)
    }
    to {
     transform:translateX(calc(-100% - var(--gap)))
    }
}
/*********** Header Main Navigation **********/
/********* Inner Wraper **********/
.icon-wrapper {
display: flex;
flex-direction:column;
align-content: center;
justify-content: flex-start;
pointer-events: auto;
padding: 8px;
margin-top:14px;
width:100%;
word-break: break-word;
overflow-wrap: break-word;
}
.gray-border-side-right {
border-right: 1px solid #c8c8c8;
}
.product-selection-title {
margin: 0 0 10px 0;
}
@keyframes slide-in {
from {
    left: -100%}
to {
    left: 0;
}
}
@keyframes rotate {
from {
    transform: rotate(0);
}
to {
    transform: rotate(360deg);
}
}
.item-child-flex-3 {
display: flex;
    flex-direction: column;
    justify-content: baseline; /* with flex-direction column display content on the middle */
    align-items: center; /* with flex-direction column - display content align in center */
    flex-grow: 1;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    background-color: #fff;
    width: 100%;
    min-height: 420px;
    margin-bottom:16px;
    height:420px;
    overflow: hidden;
}
.cart-section-resumen-payment {
display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
/* Para navegadores basados en WebKit (Chrome, Edge, Safari) */
        .hero-subtext-col .inner-hero-wrapper::-webkit-scrollbar {
width: 10px; /* Ancho de la barra de desplazamiento */
}
.btn-secundario:hover {
background: #667eea;
    color: white;
}
hgroup h1 {
margin-bottom: 0;
}
/*********** Carrito de compra ************/
/********* Add to cart, Delete, Wishlist Buttons ***********/
.nx-btn-addtocart {
background: #35393c;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 1.0rem;
    padding: 9px 35px;
    border-radius: 0px;
    border: 1px solid transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,0.30);
    transition: all 0.3s ease;
    cursor: pointer;
}
/*****************************/

[class*=" ti-"]::before, [class^=ti-]::before {
content: ' • '
}
a.footer-link:link, a.footer-link:visited {
color: #333!important;
}
.lightSpeedIn {
animation-name: lightSpeedIn;
    animation-timing-function: ease-out;
}
a {
color: #2b2a28;
    font-weight:400;
    text-decoration: none;
    background-color: transparent;
   /*transition: 0.2s;*/
}
.btn-primario:hover:not(:disabled) {
transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/******** Footer *********/
/************** Hgroup ************/
hgroup {
text-align: right;
  padding-right: 16px;
  border-right: 10px solid #00c8d7;
}
@media only screen and (max-width:1440px) {
.hero-subtext-col{
                min-height: 340px !important;
            }
}
/*********** Header Main Navigation **********/
.header-navigation {
display: flow-root;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.slider-items-row {
display: flex;
    transition: transform 0.5s ease;
}
.product-texture-block {
display: inline-block;
    border:1px solid #666;
    background:#fff;
    padding:2px 5px;
    margin: 2px 0;
    vertical-align: middle;
}
.checkbox-item input, .radio-item input {
width: 18px;
            height: 18px;
            cursor: pointer;
}
.solicitud-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 30px;
max-width: 1650px;
margin: 0 auto;
}

#hero-hexagon .front_face_rand_bg_r2-02 {
    animation: bgColorCycle_r2-02 5s ease-in-out infinite;
    background: rgba(3, 59, 97, 0.05);
}
@keyframes blink {
0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
/********* Border's content **********/
.white-border-side-left {
border-left: 1px solid #ffffff;
}
.forgot-password {
text-align: center;
    margin-top: 15px;
}
.popup-content {
    display:flex;
    flex-direction: column;
    align-content: center;
    justify-content: baseline;
    width: 100%;
    height:100%;
}
ul.circle-style li::marker {
color: #c74949;
}
/*
.item-child-link::before {
content: "";
    display: flex;
    background-image: url(/static/frontend/svg/arrow-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    left: -25%;
    opacity: 1;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.arrow.left {
left:-52px;
}
.item-child-link::after {
content: "";
    display: flex;
    background-image: url(/static/frontend/svg/arrow-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    left: 95%;
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
/* Define for - front_face_rand_bg_r2-02 */
          @keyframes bgColorCycle_r2-02 {
0% {
              background-color: rgba(3, 59, 97, 0.05);
            }
            50% {
              background-color: rgba(8, 207, 213, 0.233);
            }
            100% {
              background-color: rgba(3, 59, 97, 0.05);
            }
}
.resumen-items-line {
display: flex;
    -moz-box-pack: justify;
    justify-content: space-between;
}
* {
box-sizing: border-box;
    outline: 0;
    -webkit-touch-callout: none;
}
/*========================
        * Button secondary
*=======================*/
    .ctr_btn_secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width:260px;
            margin-top: 14px;
            margin-left: auto;
            margin-right: auto;
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            background: linear-gradient(135deg, #648096 0%, #4b6477 100%);
            padding: 12px 34px;
            border: none;
            outline: none;
            text-decoration: none;
            text-decoration: none !important;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            transition: transform 0.2s, box-shadow 0.2s;
}
/********** Section Slider 3 blocks **********/

/*** Hero Background Section Randomizing ****/
.hero-randomizing {
background: #323235; /* Color inicial */
    color:#fff;
    text-align: center;
    animation: backgroundChange 27s infinite; /* 4s por color x 9 colores = 36s */
    overflow-wrap: break-word;
}

::-webkit-input-placeholder {
color: #999;
}
.hero-subtext-col:nth-child(3) {
border-top: 8px solid #ffa800;
            text-align: initial;
}
.sketch-ground-mantenimiento {
background: url(/static/frontend/svg/sketch-switch-mantenimiento.svg) no-repeat left 0px;
            background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
}
.thumbnails .thumb.active {
border-color: #ef0101;
}
/******** Media Images Bgrounds ******/
.col-hero-bground {
background: url('/static/frontend/images/web-design-development.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    max-width:650px;
    width: 100%;
    height: 100%;
}
.footer-container {
display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    width:100%;
    max-width:850px;
    min-height: 200px;
    margin: 20px auto;
}

.back-link {
text-align: center;
    margin-top: 20px;
}
.col-quarter div.structure-points {
display:flex;
            flex-direction: row;
            justify-content: right;
            align-items: flex-start;
            width:100%;
            text-align: right;
            list-style-type: none;
            padding:0px;
            border-top: 1px dashed #b7b6b6;
            margin:18px auto;
}
.stock-last {
background: #ffab91;
    border:1px solid rgb(158, 40, 40);
}
.form-label.required::after {
content: " *";
color: #dc3545;
}
/*** Page - WebDev product detailed view ***/
        .breadcrumb {
display:inline;
            color: #3e3c3c;
            font-size: 16px;
            padding: 15px;
            line-height:2rem;
}
@media only screen and (max-width:809px) {
.items-row{
            display:flex;
            flex-direction: column;
            align-items: baseline;
            align-content: center;
            justify-content: center;
            width:100%;
            max-width:max-content;
            gap:0.5rem;
          }
}
/* Fondo pastel para pregunta activa */
          .faq-item.active .faq-question {
background-color: #fbf8ca; /* amarillo pastel */
            border-bottom:1px solid #cac8a1;
}
.sticky-header nvnx-element {
display: flex;
  justify-content: center;
  align-items: center;
}
/******************************/
.ico-subtitle {
padding-left: 24px;
}
.close-popup-btn {
padding: 8px 12px;
    background: red;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}
/* Selector de periodo */
.servicio-periodo {
display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.privacy-checkbox {
display: flex;
        align-items: start;
        gap: 10px;
        padding: 15px;
        background: #fff3cd;
        border-radius: 6px;
        border: 1px solid #ffc107;
}
/* INPUTS */
input,
textarea {
width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #cecece;
    font-size: 1rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/*** dropdown linked menu ***/
      .toggle-menu {
display: inline-block;
        width: 24px;
        height: 24px;
        cursor: pointer;
        transform: rotateX(180deg); /* por defecto mira hacia arriba */
        transition: transform 0.4s ease;
}
.required-field::after {
content: " *";
            color: #dc3545;
}
.tm-section-title>::before {
content: "";
    position: absolute;
    top: -36px!important;
    left: calc(50% - (15px / 2))!important;
    height: 15px;
    width: 15px;
    border-radius: 50%!important;
    animation: 1.8s linear infinite blinker!important;
}
.main-navigation {
margin-left: auto;
margin-right: auto;
height: 47px;
}
.btn-primario:disabled {
opacity: 0.5;
    cursor: not-allowed;
}
.outprice-row {
display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 260px;
    padding:4px 14px;
    background: #fbeeab;
    border:1px solid #fad337;
    color:#000;
    margin-top:10px;
    margin-bottom:20px;
}
/* PLACEHOLDER GRIS */
input::placeholder,
textarea::placeholder {
color: #404b5f;
}
ul.circle-style {
list-style-type: disc;
}
.section-outside {
width: auto;
    height: auto;
    padding: 1rem;
    position: relative;
    left: 22%;
    z-index: 3;
}
.arrow-restangle {
display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top:4px;
    width: auto;
    height: 8px;
    top: 0;
    left: 1%;
}
.user-requestpwd-form {
max-width:400px !important;
}
@media only screen and (min-width:1366px) and (max-width:1440px) {
.logo-wrapper{
            padding-left: 20px;
            margin-left: auto;
            margin-right: auto;
        }
}

@keyframes bounce {
0% { transform: translateY(0); }
            50% { transform: translateY(-14px); } /* Sube */
            100% { transform: translateY(0); } /* Vuelve a su posición */
}
@media only screen and (min-width:1120px) and (max-width:1366px) {
.uk-navbar {
    display: block!important;
    position: relative;
}
}
/***================================================
    *** Login Form  Section
    ==================================================*/
/* Estilos para el formulario de login */
.login-required-section {
background: #f8f9fa;
    border: 1px solid #babaee;
    border-radius: 6px;
    padding: 20px;
    margin: 30px 0;
    max-width:580px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14);
}
.forgot-password a {
color: #999;
    font-size: 14px;
    text-decoration: none;
}
/* 🔥 Estilo especial para características adicionales */
.lista-caracteristicas li.caracteristica-adicional {
color: #007bff;
    font-weight: 500;
}
.reference-badge {
display:inline;
    font-size:0.850rem !important;
    color: #0878bb;
    padding: 6px 20px;
    background: #e8f4ff;
    border: 1px solid #97cdfb;
    border-radius:24px;
    margin:10px auto 14px;
}
.badge-discount-text {
margin: 5px 0;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
    max-width: 300px;
    width: 100%;
    border: 2px dotted #217702;
}

/**** Content Features Class and Styles
============================*/
.over-hero-position {
margin-top: 0px;
    background: #ecebeb;
    /*background: transparent url('/static/frontend/images/bg_pattern.jpg');*/
    background-repeat: repeat;
    min-height: 540px;
    border-left:1px solid #e9e6e6;
    border-right: 1px solid #d3cccc;
    border-bottom: 1px solid #d3cccc;
}
.resumen-total {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 15px 0;
}
*/

/* LABEL */
label {
display: block;
    margin-top:6px;
    margin-bottom: 2px;
    font-weight: 600;
}
::selection {
background: #dd1868;
    color: #ffffff;
}
.item-child-flex-2 {
display: flex;
    flex-direction: column;
    justify-content: baseline; /* with flex-direction column display content on the middle */
    align-items: center; /* with flex-direction column - display content align in center */
    flex-grow: 1;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    background-color: #fff;
    width: 100%;
    min-height: 420px;
    margin-bottom:16px;
    height:420px;
    overflow: hidden;
}
.nx-text-sketch-design {
color:#1a5cc6;
            font-weight:600 !important;
}
.solicitud-header-webdesign {
background: linear-gradient(135deg, #eef1fd 0%, #bddfe6 100%);
            color: #000;
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 30px;
            text-align: center;
}
@media only screen and (max-width:648px) {
.img-esquema-services{
                width:100%;
            height: 640px;
            background: url(/static/frontend/images/jumping-web-design.webp);
            background-repeat: no-repeat;
            background-position: 50% 0%;
            background-size: cover;
            }
}
*, :after, :before {
box-sizing: inherit;
}
.ctr_btn_success:hover {
background: linear-gradient(135deg, #0d874e 0%, #076338 100%);
            color:#fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2)
}

.form-section {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
}
/*** Typewriter  **/
  #typewriter-wrapper {
font-family: monospace;
    font-size: 1rem;
    text-align: left;         
    white-space: pre-wrap;   
    word-wrap: break-word;   
    width: 100%;         
    max-width: 1200px;
    margin: 10px auto 0;
    height: 145px;
}
.form-section:last-child {
border-bottom: none;
}
.resumen-item .label {
color: #666;
}
/*========================================
*** Contacto Page
=========================================*/
  /* Estilos para campos de solo lectura */
  input[readonly] {
background-color: #f5f5f5;
    cursor: not-allowed;
    color: #666;
}
.form-select-asunto:focus {
border-color: #0246b4;
    box-shadow: 0 0 0 2px rgba(0, 107, 230, 0.208);
    outline: none;
}
/*** Main Structure Design section ***/
        /*** Big section Title Text ***/
        .section-title {
font-family:var(--nx-f-family-Inter-cyrillic) !important;
            font-size: inherit;
            font-weight: inherit;
            letter-spacing:-0.02em;
}
/* Contenedor del menú desplegable */
.dropdown {
position: relative;
    display: inline-block;
    margin: 8px;
    padding: 4px 3px 0 0;
    cursor: pointer;
}
/*=========================================
*** Restablecer Contraseña - Page Recovery Password 
=========================================*/
.recovery-wrapper {
max-width: 500px;
    margin: 10px auto;
    background: white;
    border-radius: 6px;
    border: 1px solid #bebebf;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.resumen-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.register-link {
text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.producto-descripcion,
        .producto-ficha-tecnica {
margin-bottom: 30px;
            padding: 20px 20px 40px 20px;
            width: 100%;
            background: #f9f9f9;
            border: 1px solid #d8d9d4;
            border-radius: 6px;
            text-align:left;
            /*box-shadow: 0px 12px 6px -8px rgba(0,0,0,0.35);*/
            -webkit-box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 14px 4px -12px rgba(0, 0, 0, 0.32), 0 8px 8px -10px rgba(0, 0, 0, 0.4), 0 1px 4px -2px rgba(0, 0, 0, 0.2);
}
.addtocart-wrapper-row {
display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    align-content: center;
    width:290px;
    padding: 3px;
    margin: 0 0 3px 0;
}

@media only screen and (max-width:800px) {
.producto-wrapper{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        align-content: center;
        margin-bottom: 10px;
      }
}
/* Page - hosting-detalle.html */
    
    /*** Page diseno-web-barcelona ***/
.webdev-product-wrapper {
    max-width:24rem;
      border-radius: 6px;
      padding: 0;
      background: #fff;
      border: 1px solid #bfd3d0;
      box-shadow: 0px 12px 6px -8px rgba(0,0,0,0.15);
      overflow: hidden;
      min-height:455px;
      position: relative;
  }
  @media (max-width:640px) {
    .webdev-product-wrapper {
        min-height:492px;
        height: fit-content;
            }
    }
/*.btn-primario, .btn-secundario {
padding: 14px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    font-size: 15px;
}
/* Go tot Top */

/********** Translator - Estilos para el botón ***********/
.dropbtn {
background-color: #6A6C6C;
    color: #fff;
    padding: 5px 10px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    border-radius: 0px;
}
/* Animación para el parpadeo del cursor */
@keyframes blink {
0%, 100% { opacity: 0.08; }
    50% { opacity: 1; }
}
div.col-quarter div.last-point {
border-bottom:1px dashed #b7b6b6;
}

/********** Main hero section ********/
        /*** HEXAGON Hero Section ***/
        @media only screen and (max-width:1120px) {
.hero-title {
            font-size: clamp(2,3rem, 9vw, 8rem) !important;
            line-height: 1.4;
            font-weight: 600;
            word-break: keep-all;
            white-space: normal;
            }
}
.hero-subtext-col:nth-child(2) .child-wrapper {
position:absolute;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            width:100%;
            max-width:690px;
            height: 100%;
            padding:0px;
            background: #ffe40c;
            top:-100%;
            left:0px;
            opacity: 1;
            transition: top 0.4s ease-in-out;
}
.nx-toolbar-default {
color: #fff;
  font-size: 13px;
  font-weight: 400;
}
/*============ End Solicitud Diseño Web ======*/

  /***======================================
  * Contact Form - Login Form - Register User Form
  =======================================*/
  .user-login-form {
max-width: 400px !important;
    width: 100%;
    background-color: #fdfcfc;
    padding: 20px;
    border: 1px solid #dcdcdc;
    border-top-color: rgb(220, 220, 220);
    border-top-style: solid;
    border-top-width: 1px;
    border-radius: 6px;
    border-top: 3px solid #d73c3c;
}
/* Precios */
.servicio-precios {
background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
}
/* Hero Wordpress Design Section */
/* Hero Section Programming */
.hero-programming {
background: url('/static/frontend/images/programacion-coding.webp');
     background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height: 100%;
}
.register-link a:hover {
text-decoration: underline;
}
/* BOTTOM */
.tooltip[data-position="bottom"] .tooltip-content {
top: calc(100% + 10px);
    left: 50%;
    translate: -50% 0;
    transform-origin: top center;
}
.nx-btn-delete-product:hover {
background: #c34e37;
    transform: translateX(-3px);
    box-shadow: 0 1px 3px rgba(0,0,0,.50);
}
input[type=radio] {
width: 20px;
    height: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    outline: 0;
    border: 2px solid #1b54ff;
    background: #fff;
    margin-right: 10px;
    position: relative;
    top: 5px;
}
.form-checkbox label {
cursor: pointer;
user-select: none;
}
*/

  .especificaciones-tecnicas {
margin-bottom: 40px;
    width: 100%;
}
.disabled {
background-color:#f2f2f2;
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            transition: border-color 0.3s;
            box-sizing: border-box;
}
.hero-subtext-col {
position:relative;
            display:flex;
            align-content: center;
            justify-content: space-around;
            width:100%;
            max-width:690px;
            height:100%;
            min-height: 280px;
            padding:6px;
            color: #000000;
            overflow:hidden;
}
.input-stock-required {
display: inline-block;
    width:64px;
    height:40px;
    font-size: 1rem;
    border:1px solid #666;
    text-align:center;
    background:#fff;
    padding:2px;
    line-height: 42px;
    margin-right: 4px;
}
.main-nav__link::after {
-webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}
@media (max-width: 1024px) {
.solicitud-grid {
    grid-template-columns: 1fr;
}

.resumen-card {
    position: static;
}

.form-row {
    grid-template-columns: 1fr;
}
}
a.footer-link:active, a.footer-link:hover, a.footer-link:visited:hover {
color: #000!important;
}
.nx-text-sketch-hosting {
color:#ebd402;
            font-weight:600 !important;
}
@media screen and (min-width:1120px) {
.main-nav {
    display: flex;
}
.menu-toggle {
    display: none;
}
}
.nx-parent-icon-hidden {
display: none;
}
*/

a.item-link-more:link {
color:#000;
    text-decoration: underline !important;
}
/* TOP LEFT */
.tooltip[data-position="top-left"] .tooltip-content {
bottom: calc(70% + 10px);
    right: 0;
    transform-origin: bottom right;
}
@media (max-width: 600px) {
.faq-question {
              font-size: 1rem;
              padding: 14px 16px;
            }
            .faq-answer {
              font-size: 0.95rem;
            }
}
.cart-section-items {
display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    /*background: #fbfbfb;*/
    /*border: 1px solid #ececec;*/
    border-bottom: 1px solid #dfdfdf;
    margin:5px 0;
    padding: 5px 5px;
}
.tooltip-text {
display: block;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
}
/* FORMS */

/*form {
width: 100%;
    margin: 2rem auto;
    padding: 14px 20px;
    background: rgba(252, 251, 251, 0.893);
    border-radius: 6px;
    border-top:5px solid #007d93 !important;
    border: 1px solid #c8cacc;
    text-align:center;
    box-shadow:0 3px 8px rgba(0,0,0,0.2);
}
.col-quarter div.structure-points div:nth-child(2) {
width:90%;
            display:inline;
}
/*** Page - Solicitud formulario servicio diseño web ***/
        .solicitud-container {
            display:flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            justify-content: flex-start;
            width:100%;
}
.ctr_btn_secondary:hover {
    background: linear-gradient(135deg, #4b6477 0%, #344755 100%);
    color:#fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2)
}
.checkbox-item, .radio-item {
    display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s;
}

/********** Main hero section ********/
        .section-frontend-hero-bg {
background: url('/static/frontend/images/frontend-screen-bg.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        max-width:2560px;
        width: 100%;
        height: 100%;
}
/* ============================= */
/* MOSTRAR */
/* ============================= */
.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content {
opacity: 1;
    visibility: visible;
    transform: scale(1);
}
/****  Sketch Items ***/
.item-step-1, .item-step-2, .item-step-3, .item-step-4, .item-step-5, .item-step-6 {
    min-height: 280px;
    max-width: 780px;
    width: 100%;
    box-shadow: 0px 12px 6px -10px rgba(0,0,0,0.35);
}
@keyframes fadeInUp {
from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}
to {
    opacity: 1;
    transform: none;
}
}

/* Cara trasera - ya rotada 180deg para que se vea correctamente */
  .back-face__card {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255,0.65);
    color: white;
    padding: 3px;
    text-align: center;
}
/*** HEXAGON Hero Section ***/
    /********** Main Structure Design Section ********/
        .col-quarter {
display:flex;
            flex-direction: column;
            align-items: baseline;
            justify-content: center;
            width:100%;
            height:100%;
            margin-left:auto;
            margin-right:auto;
            margin-top: 20px;
}
/*** dropdown menu linked ***/
      .webdev-product-content {
display:flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: baseline;
        justify-content: center;
}
/*=======================================
* Solicitud Diseño Web - Page
=======================================*/
/*** Form solicitud diseño web ***/
.form-solicitud-webdesign {
width: 100%;
    margin: 1rem auto 1rem;
    padding: 14px;
    background: #fff;
    text-align: center;
}
.login-header p {
color: #666;
    font-size: 14px;
}
@media (max-width: 599px) {
#hero-hexagon .o-0-on-xl {
                opacity: 0 !important;
            }
}
.nx-parent-icon {
margin: 0;
        border: none;
        border-radius: 0;
        overflow: visible;
        font: inherit;
        color: inherit;
        text-transform: none;
        padding: 0;
        background-color: transparent;
        display: inline-block;
        fill: currentcolor;
        line-height: 0;
}
/* CAPTCHA */
#math_question {
max-width: 80px;
    text-align: center;
}
.tab-btn.active {
color: #667eea;
    border-bottom-color: #667eea;
}
.hero-subtext-col:nth-child(3):hover .child-wrapper {
position:absolute;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            width:100%;
            max-width:690px;
            height: 100%;
            background: #ffa800;
            top:0% !important;
            left:0px;
            opacity: 1;
            z-index:3;
}
/******** SEO HIDDEN KEYWORDS ***************/
.seokeyphrase {
display:none;
    visibility: hidden;
    margin-top:0px !important;
    margin-bottom:0px !important;
    font-size:9px !important;
    color:#fff;
    /*** Disable select text **/
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
     user-select: none; /* Standard syntax */
}
/* Animación */
  @keyframes slideDown {
from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}
.form-select-asunto option {
padding: 10px;
    font-size: 14px;
}
.form-select-asunto {
width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
    background-color: #fff;
    transition: all 0.3s ease;
}
.rotating-arrow {
width: 20px;
    height: 1px;
    background-color: #cac4c4;
    animation: 1.8s linear infinite rotate;
}
/* CAMPO REQUERIDO VACÍO DESPUÉS DE USARLO */
input:required:invalid:not(:focus),
textarea:required:invalid:not(:focus) {
background-color: #fff6ee;   /* rojo claro */
}
::-webkit-selection {
background: #dd1868;
    color: #ffffff;
}
/*****##### INTITLED #####*****/
/**** Disabled elements ***/
.section-disabled {
display:none !important;
    visibility: none !important;
}
.col-quarter div.structure-points div:nth-child(3) {
display:flex;
            width:60px;
            height:100%;
            align-content: center;
            justify-content: center;
}
.meta-info small {
color: #666;
}
.form-section h3 {
margin-bottom: 20px;
color: #333;
}
.go-top-btn svg {
fill: white;
}
/* Define for - front_face_rand_bg_r4-02 */
          @keyframes bgColorCycle_r4-02 {
0% {
              background-color: rgba(1, 101, 129, 0.07);
            }
            50% {
              background-color: rgba(3, 51, 96, 0.623);
            }
            100% {
              background-color: rgba(1, 101, 129, 0.07);
            }
}
nav ol, nav ul, ol, ul {
list-style: none;
    margin: 0;
    padding: 0;
}
.box {
position: relative;
    display: inline-block;
    padding-bottom: 10px;
    cursor: pointer;
}
.tooltip[data-position="top-right"] .tooltip-content::after {
top: 100%;
    left: 12px;
    border-top-color: #fbcc24;
}
.popup {
width: 580px;
    height: 480px;
    background: rgb(255, 255, 255);
    color: #464444;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    top:230px;
}
.tab-btn {
flex: 1;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    transition: all 0.3s;
}
.box::after {
content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: #f74a06;
    transition: width .3s ease-in-out;
    transform: scaleX(1);
}
.sketch-ground-programming {
background: url(/static/frontend/svg/sketch-switch-programacion.svg) no-repeat left 0px;
            background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
}
.form-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 30px;
}
/* Animación de contenido */
          .faq-answer {
background-color: #fbfbfb;
            font-size: 1rem;
            line-height: 1.6;
            color: #333;
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s ease, padding 0.4s ease;
}
/***** Zooming image on mouseover ****/
  .thumbnails .thumb {
width: 140px;
    height: 100px;
    cursor: pointer;
    object-fit: cover;
    border: 1px solid transparent;
    border-radius: 0px;
    transition: border-color 0.3s ease, transform 0.2s ease;
}
/********** Transition Hidden Words *********/
.transition_words {
display:none;
    visibility: hidden;
    margin-top:0px !important;
    margin-bottom:0px !important;
    font-size:9px !important;
    color:#fff;
    /*** Disable select text **/
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
     user-select: none; /* Standard syntax */
}
.toolbar-disbaled {
display: none !important;
}
.login-header h3 {
color: #667eea;
    font-size: 24px;
    margin-bottom: 10px;
}
.nx-text-sketch-mantenimiento {
color:#f99539;
            font-weight:600 !important;
}
.main-image-container img {
width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
}
@media only screen and (max-width:1365px) {
._parent-bg-number {
            display:none;
            }
}
.cart-resumen-bottom {
border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding-bottom: 14px;
    border-bottom: 3px solid #ccc;
}
/*** Section FAQs questions/answers ***/
/* ============================= */
/* BASE */
/* ============================= */
.tooltip {
position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.animate-marquee-vertical {
animation:marquee-vertical var(--duration) linear infinite
}
/*******  Product Thumbs Gallery *****/
.measure-select {
background#fff;
    border:1px solid #058bf1;
    padding:3px 6px;
}
/* TOP RIGHT */
.tooltip[data-position="top-right"] .tooltip-content {
bottom: calc(70% + 10px);
    left: 0;
    transform-origin: bottom left;
}
.recovery-header h1 {
font-size: 24px;
    color: #333;
    margin: 0 0 10px 0;
}
.sketch-ground-hosting {
background: url(/static/frontend/svg/sketch-switch-hosting.svg) no-repeat left 0px;
            background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
}
::-o-selection {
background: #dd1868;
    color: #ffffff;
}
/* Opciones del menú */
.dropdown-content a {
color: #666;
    font-size:13px;
    padding: 6px 10px;
    text-decoration: none;
    text-transform: lowercase;
    display: flex;
    align-items: center;
}
.typing::after {
content: "_";
            opacity: 0.3;
            position: absolute;
            animation: 1.5s ease 0s infinite normal none running blink;
            margin-left: 8px;
            color: #ffca38;
}
/*==================
        * Button success
        *==================*/
        .ctr_btn_success {
display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width:260px;
            margin-top: 14px;
            margin-left: auto;
            margin-right: auto;
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            background: linear-gradient(135deg, #16995c 0%, #0c7846 100%);
            padding: 10px 24px;
            border: none;
            outline: none;
            text-decoration: none;
            text-decoration: none !important;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            transition: transform 0.2s, box-shadow 0.2s;
}
.login-header {
text-align: center;
    margin-bottom: 30px;
}