/**
* Viafacil Theme - CSS Principal
* Todos los estilos del template en un solo archivo
*/
/* ============================================
IMPORTAR FUENTE INTER DE GOOGLE FONTS
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
/* ============================================
VARIABLES CSS
============================================ */
:root {
--primary-color: #1e40af;
--primary-dark: #1e3a8a;
--primary-light: #3b82f6;
--secondary-color: #0f172a;
--accent-color: #f59e0b;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #ffc107;
--info-color: #3b82f6;
--white: #ffffff;
--black: #000000;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-750: #2d3a4f;
--gray-800: #1e293b;
--gray-900: #0f172a;
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--border-radius: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================
RESET Y BASE
============================================ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px; /* Base para cálculos rem/em - igual que 'new' */
}
body {
font-family: var(--font-family) !important;
line-height: 1.6;
color: var(--gray-700) !important;
background-color: var(--white) !important;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================
LAYOUT
============================================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.container-fluid {
width: 100%;
padding: 0 1rem;
}
@media (max-width: 767px) {
.container {
padding: 0 1rem;
}
.container-fluid {
padding: 0 1rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 0.75rem;
}
.container-fluid {
padding: 0 0.75rem;
}
}
/* Grid System */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -0.75rem;
}
.col-12 { width: 100%; padding: 0 0.75rem; }
.col-lg-1 { width: 8.333%; padding: 0 0.75rem; }
.col-lg-2 { width: 16.666%; padding: 0 0.75rem; }
.col-lg-3 { width: 25%; padding: 0 0.75rem; }
.col-lg-4 { width: 33.333%; padding: 0 0.75rem; }
.col-lg-5 { width: 41.666%; padding: 0 0.75rem; }
.col-lg-6 { width: 50%; padding: 0 0.75rem; }
.col-lg-7 { width: 58.333%; padding: 0 0.75rem; }
.col-lg-8 { width: 66.666%; padding: 0 0.75rem; }
.col-lg-9 { width: 75%; padding: 0 0.75rem; }
.col-lg-10 { width: 83.333%; padding: 0 0.75rem; }
.col-lg-11 { width: 91.666%; padding: 0 0.75rem; }
.col-lg-12 { width: 100%; padding: 0 0.75rem; }
@media (max-width: 991px) {
.col-md-1 { width: 8.333%; }
.col-md-2 { width: 16.666%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.333%; }
.col-md-5 { width: 41.666%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333%; }
.col-md-8 { width: 66.666%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.333%; }
.col-md-11 { width: 91.666%; }
.col-md-12 { width: 100%; }
}
@media (max-width: 767px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
width: 100%;
}
}
/* ============================================
HEADER
============================================ */
.header-main {
background: var(--white);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 9998; /* Alto pero menor que el dropdown */
width: 100%;
overflow: visible !important; /* Asegurar que el dropdown no se corte */
}
@media (max-width: 767px) {
.header-main {
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
.header-content {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 1rem 2rem;
padding: 1rem 0;
align-items: start;
position: relative;
z-index: 9998; /* Alto pero menor que el dropdown */
overflow: visible !important; /* Asegurar que el dropdown no se corte */
}
.header-content > .logo {
grid-column: 1;
grid-row: 1 / 3;
align-self: center;
}
.header-utilities {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
}
.nav-main {
grid-column: 2;
grid-row: 2;
position: relative;
z-index: 9999; /* Valor muy alto para estar por encima de todo */
overflow: visible !important; /* Asegurar que el dropdown no se corte */
}
@media (max-width: 991px) {
.header-content {
gap: 1rem 1.5rem;
}
.header-utilities {
gap: 0.75rem;
}
.nav-main {
gap: 1.5rem;
}
}
@media (max-width: 767px) {
.header-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.625rem 0;
position: relative;
min-height: 56px;
width: 100%;
}
.header-content > .logo {
flex: 0 1 auto;
min-width: 0;
max-width: calc(100% - 140px);
order: 1;
}
.header-utilities {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
order: 2;
}
/* Reducir tamaño de elementos en móvil */
.header-utilities .language-btn {
padding: 0.35rem 0.45rem;
font-size: 0.7rem;
min-width: 32px;
width: 32px;
height: 32px;
justify-content: center;
}
.header-utilities .language-btn i.fa-globe {
font-size: 0.9rem;
}
.header-utilities .language-text {
display: none !important;
}
.header-utilities .language-arrow {
display: none !important;
}
.header-utilities .nav-link-cart {
width: 32px;
height: 32px;
padding: 0.35rem;
min-width: 32px;
flex-shrink: 0;
}
.header-utilities .nav-link-cart i {
font-size: 1rem;
}
.header-utilities .nav-link-client {
padding: 0.45rem 0.6rem;
font-size: 0.7rem;
white-space: nowrap;
min-width: auto;
}
.header-utilities .nav-link-client .nav-link-text {
display: none !important;
}
.header-utilities .nav-link-client i {
margin: 0 !important;
font-size: 0.9rem;
}
.menu-toggle {
order: 3;
flex-shrink: 0;
margin-left: 0.25rem;
width: 32px;
height: 32px;
padding: 6px 3px;
}
.menu-toggle span {
height: 2px;
}
/* El menú móvil se define más abajo con position: fixed */
}
.logo img {
height: 80px;
width: auto;
max-width: 320px;
}
.nav-main {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
padding-top: 0.5rem;
border-top: 1px solid var(--gray-200);
}
.nav-main a {
color: var(--gray-700);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
white-space: nowrap;
font-size: 1rem;
}
.nav-main a:hover {
color: var(--primary-color);
}
/* Icono de home - solo icono, sin texto */
.nav-link-home {
font-size: 1.25rem;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
transition: var(--transition);
width: 40px;
height: 40px;
}
.nav-link-home:hover {
background: var(--gray-100);
color: var(--primary-color);
transform: scale(1.1);
}
.nav-link-home .nav-link-text {
display: none;
}
/* Enlaces de servicios */
.nav-link-service {
padding: 0.5rem 0;
position: relative;
}
.nav-link-service::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.nav-link-service:hover::after {
width: 100%;
}
/* Dropdown de navegación - Diseño simple estilo DonWeb */
.nav-dropdown {
position: relative;
z-index: 9999; /* Valor muy alto para estar por encima de todo */
}
.nav-link-with-dropdown {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.nav-link-with-dropdown:hover {
color: inherit;
text-decoration: none;
}
.nav-dropdown-arrow {
font-size: 0.7rem;
transition: transform 0.2s ease;
color: var(--gray-500);
margin-left: 0.25rem;
}
/* Desktop - Hover para mostrar submenú */
@media (min-width: 768px) {
.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.active .nav-dropdown-arrow {
transform: rotate(180deg);
color: var(--primary-color);
}
/* El posicionamiento del dropdown se maneja en el bloque "FIX UNIVERSAL V2" al final */
/* Solo mantenemos los estilos básicos aquí */
.nav-dropdown-menu li {
list-style: none;
margin: 0 0 2px 0;
padding: 0;
}
.nav-dropdown-menu li:last-child {
margin-bottom: 0;
}
/* NOTA: El posicionamiento del submenú se maneja en el bloque "FIX FINAL" al final */
/* Estas reglas se eliminaron para evitar conflictos con la técnica Stellar */
}
/* Estilos de items del dropdown - Diseño DonWeb con fondo de color completo */
.nav-dropdown-item {
display: flex;
align-items: center;
padding: 0.875rem 1rem;
color: #ffffff;
text-decoration: none;
font-weight: 400;
margin: 0;
background: #ffffff;
border-left: none;
position: relative;
transition: opacity 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.nav-dropdown-item:hover {
opacity: 0.9;
color: #ffffff;
text-decoration: none;
}
/* Ocultar iconos - Solo texto */
.nav-dropdown-icon {
display: none !important;
}
.nav-dropdown-arrow-item {
display: none !important;
}
/* FONDOS DE COLOR COMPLETO - Estilo DonWeb con clases específicas */
/* VPS - Azul */
.nav-dropdown-item-vps {
background-color: #8ab2f3 !important;
color: #ffffff !important;
}
.nav-dropdown-item-vps:hover {
background-color: #2563eb !important;
opacity: 1;
}
/* Web Hosting - Verde */
.nav-dropdown-item-hosting {
background-color: #62d1aa !important;
color: #ffffff !important;
}
.nav-dropdown-item-hosting:hover {
background-color: #059669 !important;
opacity: 1;
}
/* Dominios - Naranja */
.nav-dropdown-item-domain {
background-color: #face82 !important;
color: #ffffff !important;
}
.nav-dropdown-item-domain:hover {
background-color: #d97706 !important;
opacity: 1;
}
/* Complementos - Púrpura */
.nav-dropdown-item-addon {
background-color: #b79be9 !important;
color: #ffffff !important;
}
.nav-dropdown-item-addon:hover {
background-color: #6d28d9 !important;
opacity: 1;
}
/* Soporte - Rojo/Naranja */
.nav-dropdown-item-support {
background-color: #fa9f9f !important;
color: #ffffff !important;
}
.nav-dropdown-item-support:hover {
background-color: #ec4e4e !important;
opacity: 1;
}
/* Contenido del dropdown - Solo título, sin descripción */
.nav-dropdown-content {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
}
.nav-dropdown-title {
font-weight: 500;
font-size: 0.9375rem;
color: inherit;
line-height: 1.4;
margin: 0;
}
.nav-dropdown-desc {
display: none;
}
/* Separador entre items - Sin borde, el color ya separa */
@media (min-width: 768px) {
.nav-dropdown-menu li:not(:last-child) .nav-dropdown-item {
border-bottom: none;
margin-bottom: 2px;
}
}
/* Selector de Idioma */
.language-selector {
position: relative;
}
.language-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: transparent;
border: 1px solid var(--gray-300);
border-radius: var(--border-radius);
color: var(--gray-700);
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
transition: var(--transition);
}
.language-btn:hover {
background: var(--gray-50);
border-color: var(--primary-color);
color: var(--primary-color);
}
.language-btn i.fa-globe {
font-size: 1rem;
}
.language-text {
font-weight: 600;
min-width: 28px;
text-align: center;
}
.language-arrow {
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.language-selector.active .language-arrow {
transform: rotate(180deg);
}
.language-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--border-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 150px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
overflow: hidden;
}
.language-selector.active .language-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: var(--gray-700);
text-decoration: none;
transition: var(--transition);
border-bottom: 1px solid var(--gray-100);
}
.language-option:last-child {
border-bottom: none;
}
.language-option:hover {
background: var(--gray-50);
color: var(--primary-color);
}
.language-option.active {
background: var(--primary-color);
color: var(--white);
}
.language-option.active:hover {
background: var(--primary-dark);
color: var(--white);
}
.language-flag {
font-size: 1.2rem;
}
/* Carrito de Compras */
.nav-link-cart {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
color: var(--gray-700);
text-decoration: none;
border-radius: var(--border-radius);
transition: var(--transition);
width: 40px;
height: 40px;
}
.nav-link-cart:hover {
background: var(--gray-50);
color: var(--primary-color);
transform: scale(1.1);
}
.nav-link-cart i {
font-size: 1.25rem;
}
.cart-count {
position: absolute;
top: -2px;
right: -2px;
background: var(--primary-color);
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
padding: 0.15rem 0.4rem;
border-radius: 10px;
min-width: 18px;
text-align: center;
line-height: 1.2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.cart-count:empty {
display: none;
}
/* Portal de Cliente */
.nav-link-client {
font-weight: 600;
padding: 0.75rem 1.5rem;
box-shadow: var(--shadow-md);
white-space: nowrap;
}
.nav-link-client:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.nav-link-client i {
font-size: 1rem;
}
/* Botón cerrar menú - oculto en desktop */
.menu-close {
display: none;
}
/* Botón Hamburguesa */
.menu-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 36px;
height: 28px;
background: transparent;
border: none;
cursor: pointer;
padding: 6px 4px;
z-index: 1001;
position: relative;
outline: none;
}
.menu-toggle span {
width: 100%;
height: 3.5px;
background: var(--gray-800);
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
display: block;
}
.menu-toggle:hover span,
.menu-toggle:focus span,
.menu-toggle:active span {
background: var(--primary-color);
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(10px, 10px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
transform: translateX(-20px);
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(10px, -10px);
}
.nav-link-text {
display: inline;
}
@media (max-width: 991px) {
.nav-main {
gap: 1.5rem;
}
.nav-link-client {
padding: 0.625rem 1.25rem;
font-size: 0.9rem;
}
.language-btn {
padding: 0.5rem 0.625rem;
font-size: 0.85rem;
}
}
@media (max-width: 767px) {
.logo a {
display: block;
line-height: 0;
}
.logo img {
height: 40px;
max-width: 140px;
width: auto;
max-height: 40px;
object-fit: contain;
}
/* Botón hamburguesa en móvil */
.menu-toggle {
display: flex !important;
z-index: 1002;
width: 40px;
height: 40px;
padding: 8px 6px;
background: transparent;
border: none;
cursor: pointer;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
}
.menu-toggle:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.menu-toggle span {
background: var(--gray-800);
height: 3px;
width: 100%;
display: block;
transition: all 0.3s ease;
border-radius: 2px;
}
/* Menú lateral móvil - oculto por defecto */
.nav-main {
display: flex !important;
position: fixed !important;
top: 0 !important;
left: -100% !important;
width: 85% !important;
max-width: 320px !important;
height: 100vh !important;
height: 100dvh !important;
background: #f8f9fa !important;
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2) !important;
flex-direction: column !important;
gap: 0 !important;
align-items: stretch !important;
padding: 70px 0 2rem !important;
overflow-y: auto !important;
overflow-x: hidden !important;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 10000 !important; /* Muy alto para estar por encima de todo */
visibility: visible !important;
opacity: 1 !important;
border-top: none !important;
pointer-events: auto !important;
}
/* Menú lateral móvil - VISIBLE cuando está activo (desliza desde la izquierda) */
.nav-main.active {
left: 0 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
background: #f8f9fa !important;
z-index: 10000 !important;
pointer-events: auto !important;
transform: translateX(0) !important; /* Asegurar que esté visible */
}
/* Asegurar que el menú se muestre incluso si hay conflictos */
body.menu-open .nav-main.active {
left: 0 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ocultar utilidades del header cuando el menú está abierto en móvil */
body.menu-open .header-utilities {
display: none !important;
}
/* Botón cerrar menú móvil - solo visible en móvil cuando el menú está abierto */
.menu-close {
display: none !important;
}
.nav-main.active .menu-close {
display: flex !important;
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
background: var(--white);
border: 2px solid var(--gray-300);
border-radius: 50%;
color: var(--gray-700);
font-size: 1.1rem;
cursor: pointer;
z-index: 1002;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
order: 0;
}
.nav-main.active .menu-close:hover {
background: var(--gray-100);
border-color: var(--primary-color);
color: var(--primary-color);
transform: rotate(90deg);
}
/* Utilidades clonadas en menú móvil - aparecen primero */
.nav-main.active .mobile-utilities-clone {
display: flex !important;
flex-direction: column;
width: 100%;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--gray-200);
margin-bottom: 0.5rem;
gap: 0.75rem;
order: 1;
}
.nav-main.active .mobile-utilities-clone .language-selector {
width: 100%;
margin-bottom: 0.5rem;
}
.nav-main.active .mobile-utilities-clone .language-btn {
width: 100%;
justify-content: space-between;
padding: 0.875rem 1rem;
font-size: 0.95rem;
}
.nav-main.active .mobile-utilities-clone .language-text {
display: inline-block;
}
.nav-main.active .mobile-utilities-clone .language-arrow {
display: block;
}
.nav-main.active .mobile-utilities-clone .nav-link-cart {
width: 100%;
justify-content: flex-start;
padding: 0.875rem 1.25rem;
border-bottom: 1px solid var(--gray-200);
margin: 0;
border-radius: 0;
font-size: 1rem;
}
.nav-main.active .mobile-utilities-clone .nav-link-client {
width: 100%;
justify-content: center;
text-align: center;
margin: 0;
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
.nav-main.active .mobile-utilities-clone .nav-link-client .nav-link-text {
display: inline-block;
}
.nav-main.active .mobile-utilities-clone .nav-link-client i {
margin-right: 0.5rem;
}
/* Estilos para enlaces de servicios cuando el menú está activo */
/* Solo los enlaces directos (excluye los que están dentro de .mobile-utilities-clone) */
.nav-main.active > a.nav-link-home,
.nav-main.active > a.nav-link-service:not(.nav-link-with-dropdown) {
padding: 1rem 1.25rem;
text-align: left;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
gap: 0.75rem;
color: #333333;
font-weight: 500;
width: 100%;
text-decoration: none;
transition: background-color 0.2s ease;
white-space: nowrap;
order: 2;
background: #ffffff;
}
.nav-main.active > a.nav-link-home:active,
.nav-main.active > a.nav-link-home:hover,
.nav-main.active > a.nav-link-service:not(.nav-link-with-dropdown):active,
.nav-main.active > a.nav-link-service:not(.nav-link-with-dropdown):hover {
background: #e9ecef;
color: #333333;
}
.nav-main.active > a.nav-link-home {
justify-content: flex-start;
font-size: 1rem;
width: 100%;
}
.nav-main.active > a.nav-link-home i {
font-size: 1.25rem;
width: 24px;
text-align: center;
flex-shrink: 0;
}
.nav-main.active > a.nav-link-service:not(.nav-link-with-dropdown) .nav-link-text {
flex: 1;
}
.nav-main.active > a.nav-link-service:not(.nav-link-with-dropdown)::after {
display: none;
}
/* Submenús en móvil */
.nav-main.active .nav-dropdown {
width: 100%;
border-bottom: 1px solid var(--gray-200);
order: 2;
list-style: none !important;
}
/* Eliminar TODOS los puntos/marcadores de lista en móvil - MÁS AGRESIVO */
.nav-main.active,
.nav-main.active *,
.nav-main.active ul,
.nav-main.active ul li,
.nav-main.active .nav-dropdown,
.nav-main.active .nav-dropdown *,
.nav-main.active .nav-dropdown-menu,
.nav-main.active .nav-dropdown-menu *,
.nav-main.active .nav-dropdown-menu li,
.nav-main.active .nav-dropdown-menu li * {
list-style: none !important;
list-style-type: none !important;
}
.nav-main.active .nav-dropdown-menu::marker,
.nav-main.active .nav-dropdown-menu li::marker,
.nav-main.active ul::marker,
.nav-main.active ul li::marker {
display: none !important;
content: '' !important;
font-size: 0 !important;
width: 0 !important;
height: 0 !important;
}
/* Eliminar cualquier pseudo-elemento que pueda mostrar puntos */
.nav-main.active .nav-dropdown-menu li::before,
.nav-main.active .nav-dropdown-menu li::after {
content: none !important;
display: none !important;
}
.nav-main.active .nav-link-with-dropdown {
width: 100%;
padding: 1rem 1.25rem;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
text-align: left;
display: flex !important;
align-items: center;
gap: 0.75rem;
color: #333333;
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease;
cursor: pointer;
background: #ffffff;
pointer-events: auto !important;
-webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
user-select: none;
margin: 0;
}
.nav-main.active .nav-link-with-dropdown:hover,
.nav-main.active .nav-link-with-dropdown:active {
background: #e9ecef;
color: #333333;
}
.nav-main.active .nav-dropdown.active .nav-link-with-dropdown {
background: #e9ecef;
color: #333333;
}
/* Fondo para enlaces principales (home, servicios sin dropdown) */
.nav-main.active > a.nav-link-home,
.nav-main.active > a.nav-link-service:not(.nav-link-with-dropdown) {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
.nav-main.active .nav-link-with-dropdown .nav-link-text {
pointer-events: none;
}
.nav-main.active .nav-link-with-dropdown .nav-dropdown-arrow {
pointer-events: none;
}
.nav-main.active .nav-dropdown-arrow {
transform: rotate(0deg);
transition: transform 0.3s ease;
margin-left: auto;
}
.nav-main.active .nav-dropdown.active .nav-dropdown-arrow {
transform: rotate(180deg);
}
/* Submenús móviles - Diseño estable estilo*/
.nav-main.active .nav-dropdown-menu {
display: none !important;
list-style: none !important;
margin: 0 !important;
padding: 2px 0 !important;
background: transparent !important;
border-top: 1px solid #e5e7eb !important;
width: 100% !important;
box-sizing: border-box !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
border-radius: 0 !important;
min-width: auto !important;
max-width: 100% !important;
height: auto !important;
overflow: visible !important;
}
/* Mostrar submenú cuando el dropdown está activo - ESTABLE */
.nav-main.active .nav-dropdown.active .nav-dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
transform: none !important;
background: transparent !important;
padding: 2px 0 !important;
}
.nav-main.active .nav-dropdown-menu li {
list-style: none;
margin: 0 0 2px 0;
padding: 0;
display: block;
width: 100%;
box-sizing: border-box;
}
.nav-main.active .nav-dropdown-menu li:last-child {
margin-bottom: 0;
}
/* Eliminar TODOS los marcadores y pseudo-elementos */
.nav-main.active .nav-dropdown-menu,
.nav-main.active .nav-dropdown-menu li,
.nav-main.active .nav-dropdown-menu li::before,
.nav-main.active .nav-dropdown-menu li::after,
.nav-main.active .nav-dropdown-menu li::marker {
list-style: none !important;
list-style-type: none !important;
}
.nav-main.active .nav-dropdown-menu li::marker {
display: none !important;
content: '' !important;
font-size: 0 !important;
width: 0 !important;
height: 0 !important;
}
/* Items del submenú móvil - ESTABLE con fondo de color completo */
.nav-main.active .nav-dropdown-item {
display: flex !important;
align-items: center;
padding: 0.875rem 1rem;
color: #ffffff;
text-decoration: none;
background: #ffffff;
border-bottom: none;
border-left: none;
margin: 0 0 2px 0;
width: 100%;
box-sizing: border-box;
min-height: 44px;
position: relative;
}
.nav-main.active .nav-dropdown-item:last-child {
margin-bottom: 0;
}
.nav-main.active .nav-dropdown-item:active,
.nav-main.active .nav-dropdown-item:hover {
opacity: 0.9;
}
/* Fondos de color completo en móvil - Usando clases específicas */
.nav-main.active .nav-dropdown-item-vps {
background-color: #8ab2f3 !important;
color: #ffffff !important;
}
.nav-main.active .nav-dropdown-item-vps:hover,
.nav-main.active .nav-dropdown-item-vps:active {
background-color: #2563eb !important;
opacity: 1;
}
.nav-main.active .nav-dropdown-item-hosting {
background-color: #62d1aa !important;
color: #ffffff !important;
}
.nav-main.active .nav-dropdown-item-hosting:hover,
.nav-main.active .nav-dropdown-item-hosting:active {
background-color: #059669 !important;
opacity: 1;
}
.nav-main.active .nav-dropdown-item-domain {
background-color: #face82 !important;
color: #ffffff !important;
}
.nav-main.active .nav-dropdown-item-domain:hover,
.nav-main.active .nav-dropdown-item-domain:active {
background-color: #d97706 !important;
opacity: 1;
}
.nav-main.active .nav-dropdown-item-addon {
background-color: #b79be9 !important;
color: #ffffff !important;
}
.nav-main.active .nav-dropdown-item-addon:hover,
.nav-main.active .nav-dropdown-item-addon:active {
background-color: #6d28d9 !important;
opacity: 1;
}
.nav-main.active .nav-dropdown-item-support {
background-color: #fa9f9f !important;
color: #ffffff !important;
}
.nav-main.active .nav-dropdown-item-support:hover,
.nav-main.active .nav-dropdown-item-support:active {
background-color: #ec4e4e !important;
opacity: 1;
}
/* Ocultar iconos en móvil */
.nav-main.active .nav-dropdown-icon {
display: none !important;
}
.nav-main.active .nav-dropdown-arrow-item {
display: none !important;
}
/* Contenido - Solo texto */
.nav-main.active .nav-dropdown-content {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
.nav-main.active .nav-dropdown-title {
font-size: 0.9375rem;
font-weight: 500;
color: inherit;
line-height: 1.4;
margin: 0;
}
.nav-main.active .nav-dropdown-desc {
display: none;
}
/* Eliminar todos los pseudo-elementos que puedan crear puntos */
.nav-main.active .nav-dropdown-menu::before,
.nav-main.active .nav-dropdown-menu::after,
.nav-main.active .nav-dropdown-menu li::before,
.nav-main.active .nav-dropdown-menu li::after,
.nav-main.active .nav-dropdown-item::before,
.nav-main.active .nav-dropdown-item::after {
display: none !important;
content: '' !important;
}
/* Overlay cuando el menú está abierto - muy sutil, casi invisible */
body.menu-open::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1000;
animation: fadeIn 0.3s ease;
pointer-events: none;
}
/* Alternativamente, eliminar el overlay completamente */
/* body.menu-open::before {
display: none;
} */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Prevenir scroll del body cuando el menú está abierto */
body.menu-open {
overflow: hidden;
position: relative;
height: 100vh;
touch-action: none;
}
/* Asegurar que el contenido no se desplace cuando el menú está abierto */
body.menu-open .header-main {
position: sticky;
z-index: 999;
}
/* Asegurar que el menú móvil esté por encima del overlay y sea completamente interactivo */
.nav-main.active {
z-index: 1002 !important;
}
/* El overlay no debe bloquear clicks dentro del menú */
body.menu-open::before {
pointer-events: none;
}
/* Restaurar pointer-events en el menú y todos sus elementos */
.nav-main.active,
.nav-main.active * {
pointer-events: auto !important;
}
/* Asegurar que los enlaces sean clickeables */
.nav-main.active a {
pointer-events: auto !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
}
/* Asegurar que los botones sean clickeables */
.nav-main.active button {
pointer-events: auto !important;
cursor: pointer !important;
}
}
/* ============================================
BOTONES
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: var(--transition);
position: relative;
overflow: hidden;
min-height: 48px;
}
.btn-primary {
background: var(--primary-color) !important;
color: var(--white) !important;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background: var(--primary-dark) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
color: var(--white) !important;
}
.btn-outline-primary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-outline-white {
background: transparent !important;
color: var(--white) !important;
border: 2px solid var(--white) !important;
}
.btn-outline-white:hover {
background: var(--white) !important;
color: var(--primary-color) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1.125rem;
min-height: 56px;
}
.btn-block {
width: 100%;
}
/* ============================================
HERO SECTION - CARRUSEL
============================================ */
.hero-carousel {
position: relative;
min-height: 600px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.hero-slides {
position: relative;
width: 100%;
height: 100%;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
display: flex;
align-items: center;
padding: 100px 80px 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: var(--white) !important;
overflow: hidden;
}
/* Patrón sutil de fondo para más profundidad */
.hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.hero-slide .container {
position: relative;
z-index: 1;
}
.hero-slide.active {
opacity: 1;
visibility: visible;
position: relative;
z-index: 1;
}
.hero-slide h1 {
color: var(--white) !important;
font-weight: 800 !important;
margin-bottom: 1.75rem !important;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.2) !important;
font-size: clamp(2.5rem, 5vw, 4rem) !important;
line-height: 1.2 !important;
letter-spacing: -0.5px !important;
}
.hero-slide .lead {
color: rgba(255, 255, 255, 0.95) !important;
font-size: 1.3rem !important;
margin-bottom: 2.5rem !important;
max-width: 650px !important;
line-height: 1.6 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
font-weight: 400 !important;
}
/* Botones del hero-carousel - Resaltados para visibilidad */
.hero-slide .btn-primary {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
color: var(--primary-color) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
font-weight: 700 !important;
letter-spacing: 0.3px;
position: relative;
overflow: visible;
}
.hero-slide .btn-primary::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
border-radius: var(--border-radius);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.hero-slide .btn-primary:hover {
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
color: var(--primary-dark) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
transform: translateY(-3px) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
0 6px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 1),
0 0 0 4px rgba(255, 255, 255, 0.1) !important;
}
.hero-slide .btn-primary:hover::before {
opacity: 1;
}
.hero-slide .btn-primary:active {
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3),
0 3px 8px rgba(0, 0, 0, 0.2) !important;
}
.hero-slide .btn-primary i {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
/* Contenedor de imagen del hero - Mejor integración armónica */
.hero-image-wrapper {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.15);
}
.hero-image-wrapper:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
}
.hero-person-image {
width: 100%;
height: 450px;
min-height: 450px;
display: block;
object-fit: cover;
object-position: center center;
border-radius: 22px;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
/* Filtro para armonizar con el fondo azul del carrusel */
filter: brightness(0.9) contrast(1.1) saturate(1.1);
position: relative;
}
.hero-person-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(30, 64, 175, 0.35) 0%,
rgba(59, 130, 246, 0.2) 50%,
rgba(30, 64, 175, 0.4) 100%);
border-radius: 22px;
pointer-events: none;
z-index: 1;
mix-blend-mode: color;
opacity: 0.7;
}
.hero-image-wrapper:hover .hero-person-image {
transform: scale(1.05);
filter: brightness(0.95) contrast(1.15) saturate(1.15);
}
.hero-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.95) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.7) 60%,
rgba(0, 0, 0, 0.4) 85%,
transparent 100%);
padding: 3rem 2.5rem 2.5rem;
color: var(--white);
text-align: center;
border-radius: 0 0 22px 22px;
backdrop-filter: blur(10px);
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-image-overlay h3 {
font-size: 1.875rem;
font-weight: 800;
margin-bottom: 0.875rem;
color: var(--white);
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6),
0 2px 5px rgba(0, 0, 0, 0.4),
0 0 20px rgba(0, 0, 0, 0.3);
line-height: 1.2;
letter-spacing: -0.5px;
}
.hero-image-overlay p {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.98);
margin: 0;
line-height: 1.6;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6),
0 1px 3px rgba(0, 0, 0, 0.4);
font-weight: 400;
}
/* Responsive para imágenes del hero - Mejor integración */
@media (max-width: 991px) {
.hero-image-wrapper {
max-width: 420px;
margin-top: 2.5rem;
border-radius: 20px;
}
.hero-person-image {
height: 380px;
min-height: 380px;
border-radius: 18px;
}
.hero-person-image::before {
border-radius: 18px;
}
.hero-image-overlay {
padding: 2.5rem 2rem 2rem;
border-radius: 0 0 20px 20px;
}
.hero-image-overlay h3 {
font-size: 1.625rem;
margin-bottom: 0.75rem;
}
.hero-image-overlay p {
font-size: 0.95rem;
}
}
@media (max-width: 767px) {
.hero-slide .col-lg-4 {
display: block !important;
margin-top: 2.5rem;
}
.hero-image-wrapper {
max-width: 85%;
margin-top: 2rem;
border-radius: 18px;
}
.hero-person-image {
height: 320px;
min-height: 320px;
border-radius: 16px;
}
.hero-person-image::before {
border-radius: 16px;
}
.hero-image-overlay {
padding: 2.25rem 1.75rem 1.75rem;
border-radius: 0 0 18px 18px;
}
.hero-image-overlay h3 {
font-size: 1.375rem;
margin-bottom: 0.625rem;
}
.hero-image-overlay p {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.hero-image-wrapper {
max-width: 100%;
border-radius: 16px;
margin-top: 1.5rem;
}
.hero-person-image {
height: 280px;
min-height: 280px;
border-radius: 14px;
}
.hero-person-image::before {
border-radius: 14px;
}
.hero-image-overlay {
padding: 2rem 1.5rem 1.5rem;
border-radius: 0 0 16px 16px;
}
.hero-image-overlay h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.hero-image-overlay p {
font-size: 0.85rem;
}
}
/* Fallback si la imagen no carga */
.hero-person-image[src=""],
.hero-person-image:not([src]),
.hero-person-image[src*="undefined"],
.hero-person-image[onerror*="this"] {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(30, 64, 175, 0.35) 100%);
background-image: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
}
/* Controles del carrusel - Estilo Swiper */
.swiper-button-prev.hero-nav-button,
.swiper-button-next.hero-nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
margin: 0;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: var(--white);
z-index: 10;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
backdrop-filter: blur(10px);
}
.swiper-button-prev.hero-nav-button {
left: 30px;
}
.swiper-button-next.hero-nav-button {
right: 30px;
}
.swiper-button-prev.hero-nav-button:hover,
.swiper-button-next.hero-nav-button:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-50%) scale(1.1);
}
.swiper-button-prev.hero-nav-button:active,
.swiper-button-next.hero-nav-button:active {
transform: translateY(-50%) scale(0.95);
}
.swiper-button-prev.hero-nav-button::after,
.swiper-button-next.hero-nav-button::after {
display: none;
}
@media (max-width: 991px) {
.swiper-button-prev.hero-nav-button,
.swiper-button-next.hero-nav-button {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
.swiper-button-prev.hero-nav-button {
left: 20px;
}
.swiper-button-next.hero-nav-button {
right: 20px;
}
}
@media (max-width: 991px) {
.hero-slide {
padding: 120px 70px 80px;
}
}
@media (max-width: 991px) {
.hero-slide h1 {
font-size: clamp(2rem, 4vw, 3rem) !important; /* 32px - 48px - igual que 'new' */
}
.hero-slide .lead {
font-size: 1.2rem !important; /* 19.2px - igual que 'new' */
}
}
@media (max-width: 767px) {
.hero-carousel {
min-height: 500px;
}
.hero-slide {
padding: 80px 1rem 60px;
text-align: center;
}
.hero-slide h1 {
font-size: clamp(1.75rem, 5vw, 2.25rem) !important; /* 28px - 36px - igual que 'new' */
line-height: 1.3 !important;
margin-bottom: 1rem !important;
}
.hero-slide .lead {
font-size: 1.1rem !important; /* 17.6px - NO 0.95rem - igual que 'new' */
margin-bottom: 1.5rem !important;
line-height: 1.5 !important;
}
.hero-slide .d-flex {
flex-direction: column;
gap: 0.75rem !important;
align-items: stretch;
}
.hero-slide .btn {
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
.hero-slide .btn-primary {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
0 3px 10px rgba(0, 0, 0, 0.25) !important;
}
.hero-slide .btn-primary:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
.hero-slide .col-lg-4 {
display: none;
}
.swiper-button-prev.hero-nav-button,
.swiper-button-next.hero-nav-button {
width: 36px;
height: 36px;
font-size: 1rem;
}
.swiper-button-prev.hero-nav-button {
left: 8px;
}
.swiper-button-next.hero-nav-button {
right: 8px;
}
}
@media (max-width: 575px) {
.hero-carousel {
min-height: 450px;
}
.hero-slide {
padding: 70px 0.75rem 50px;
}
.hero-slide h1 {
font-size: clamp(1.75rem, 5vw, 2.25rem) !important; /* 28px - 36px - igual que 'new' */
margin-bottom: 0.75rem !important;
}
.hero-slide .lead {
font-size: 1.1rem !important; /* 17.6px - NO 0.95rem - igual que 'new' */
margin-bottom: 1.25rem !important;
}
.hero-slide .btn {
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
}
.hero-slide .btn-primary {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
.hero-slide .btn-primary:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
0 3px 10px rgba(0, 0, 0, 0.3) !important;
}
}
/* ============================================
SECCIONES
============================================ */
.section {
padding: 80px 0;
position: relative;
width: 100%;
}
.section.bg-light {
padding: 100px 0 !important; /* Mismo padding que new */
padding-top: 100px !important; /* Eliminar cualquier padding superior diferente */
padding-bottom: 100px !important; /* Mismo padding inferior que new */
box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.02), inset 0 -2px 30px rgba(0, 0, 0, 0.02) !important; /* Mismo box-shadow que new */
background-color: #f8fafc !important; /* Mismo color que new - var(--gray-50) */
margin-top: 0 !important; /* Eliminar cualquier margin superior */
margin-bottom: 0 !important;
}
/* Eliminar cualquier espacio blanco antes de la sección bg-light */
.section.bg-light::before,
.section.bg-light::after {
display: none !important;
content: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Asegurar que no haya elementos con fondo blanco antes de la sección */
.section.bg-light + *,
* + .section.bg-light,
section + .section.bg-light,
.section + .section.bg-light,
*:not(.section.bg-light) + .section.bg-light {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Eliminar cualquier padding/margin del container antes de bg-light */
.section.bg-light > .container {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Eliminar cualquier padding/margin del row antes del accordion */
.section.bg-light .row.justify-content-center {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Eliminar cualquier padding/margin superior del título */
.section.bg-light .text-center.mb-5 {
margin-top: 0 !important;
padding-top: 0 !important;
}
@media (max-width: 767px) {
.section {
padding: 50px 0;
}
.section.bg-light {
padding: 60px 0;
}
}
@media (max-width: 480px) {
.section {
padding: 40px 0;
}
.section.bg-light {
padding: 50px 0;
}
}
.section-title {
font-size: 2.75rem !important; /* Forzar tamaño igual a 'new' */
font-weight: 800 !important;
line-height: 1.2 !important;
margin-bottom: 1.5rem !important;
position: relative;
display: inline-block;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--accent-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
letter-spacing: -0.5px !important;
padding: 0 1rem 1.25rem !important;
filter: drop-shadow(0 2px 8px rgba(30, 64, 175, 0.15));
}
/* Línea decorativa principal */
.section-title::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, transparent 0%, var(--primary-color) 30%, var(--primary-light) 50%, var(--primary-color) 70%, transparent 100%);
border-radius: 2px;
box-shadow: 0 2px 10px rgba(30, 64, 175, 0.4),
0 0 20px rgba(59, 130, 246, 0.2);
animation: lineGlow 3s ease-in-out infinite;
}
/* Línea decorativa secundaria */
.section-title::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.5) 50%, transparent 100%);
border-radius: 1px;
opacity: 0.7;
}
/* Versión para texto blanco (sobre fondos oscuros) */
.section-title.text-white {
background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #bae6fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.2));
}
.section-title.text-white::before {
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.6) 70%, transparent 100%);
box-shadow: 0 2px 10px rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.2);
animation: lineGlowWhite 3s ease-in-out infinite;
}
.section-title.text-white::after {
background: linear-gradient(90deg, transparent 0%, rgba(224, 242, 254, 0.6) 50%, transparent 100%);
}
@keyframes lineGlowWhite {
0%, 100% {
opacity: 1;
box-shadow: 0 2px 10px rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.2);
}
50% {
opacity: 0.8;
box-shadow: 0 2px 15px rgba(255, 255, 255, 0.6),
0 0 30px rgba(255, 255, 255, 0.4);
}
}
/* Animación de gradiente */
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Animación de brillo en la línea */
@keyframes lineGlow {
0%, 100% {
opacity: 1;
box-shadow: 0 2px 10px rgba(30, 64, 175, 0.4),
0 0 20px rgba(59, 130, 246, 0.2);
}
50% {
opacity: 0.8;
box-shadow: 0 2px 15px rgba(30, 64, 175, 0.6),
0 0 30px rgba(59, 130, 246, 0.4);
}
}
/* Efecto hover */
.section-title:hover {
transform: translateY(-2px);
transition: transform 0.3s ease;
}
.section-title:hover::before {
width: 120px;
transition: width 0.3s ease;
box-shadow: 0 2px 12px rgba(30, 64, 175, 0.4);
}
/* Responsive */
@media (max-width: 768px) {
.section-title {
font-size: 1.75rem !important; /* Forzar tamaño igual a 'new' */
padding-bottom: 0.75rem;
margin-bottom: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.section-title::before {
width: 60px;
height: 3px;
}
.section-title::after {
width: 90px;
height: 1.5px;
}
.section-subtitle {
font-size: 1.1rem;
padding: 0 1rem;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 1.5rem !important; /* Forzar tamaño igual a 'new' */
padding-bottom: 0.5rem;
margin-bottom: 0.75rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.section-title::before {
width: 50px;
height: 2px;
}
.section-title::after {
width: 70px;
height: 1px;
}
.section-subtitle {
font-size: 1rem;
padding: 0 0.5rem;
}
}
.section-subtitle {
font-size: 1.25rem !important;
color: #475569 !important; /* Mismo color que new - var(--gray-600) */
max-width: 600px;
margin: 0 auto;
line-height: 1.6 !important;
font-weight: 400 !important;
}
.section-subtitle.text-white {
color: rgba(255, 255, 255, 0.9);
}
.bg-light {
position: relative;
background:
linear-gradient(135deg, #ffffff 0%, #f8fafc 25%, #f1f5f9 50%, #e8f2ff 75%, #f0f7ff 100%) !important;
overflow: hidden;
}
.bg-light::before {
content: '';
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background:
radial-gradient(ellipse at 20% 30%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(96, 165, 250, 0.08) 0%, transparent 70%);
animation: bgFloat 25s ease-in-out infinite;
pointer-events: none;
z-index: 0;
filter: blur(60px);
}
.bg-light::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(59, 130, 246, 0.03) 2px,
rgba(59, 130, 246, 0.03) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.5) 2px,
rgba(255, 255, 255, 0.5) 4px
);
opacity: 0.4;
pointer-events: none;
z-index: 0;
mix-blend-mode: overlay;
}
.bg-light > * {
position: relative;
z-index: 1;
}
@keyframes bgFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
opacity: 1;
}
25% {
transform: translate(3%, -3%) rotate(1deg);
opacity: 0.9;
}
50% {
transform: translate(-2%, 2%) rotate(-1deg);
opacity: 0.95;
}
75% {
transform: translate(2%, -2%) rotate(0.5deg);
opacity: 0.9;
}
}
.bg-white {
background-color: var(--white) !important;
position: relative;
}
.bg-dark {
background-color: var(--gray-900) !important;
}
.bg-primary {
background-color: var(--primary-color) !important;
}
/* ============================================
SERVICES MENU
============================================ */
.services-menu-container {
margin: 2.5rem 0 2rem;
display: flex;
justify-content: center;
}
.services-menu {
display: inline-flex;
align-items: center;
background: var(--white);
border-radius: 50px;
padding: 0.5rem;
gap: 0.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 2px solid var(--gray-200);
}
.service-menu-btn {
padding: 0.875rem 2rem;
border: none;
background: transparent;
color: var(--gray-700);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
border-radius: 50px;
transition: var(--transition);
position: relative;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.service-menu-btn i {
font-size: 1.1rem;
}
.service-menu-btn:hover {
color: var(--primary-color);
background: rgba(59, 130, 246, 0.05);
}
.service-menu-btn.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--white);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.service-menu-btn.active:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}
/* ============================================
PRICING TOGGLE
============================================ */
.pricing-toggle-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.pricing-toggle {
display: inline-flex;
align-items: center;
background: var(--gray-200);
border-radius: 50px;
padding: 0.5rem;
gap: 0;
position: relative;
}
.toggle-btn {
padding: 0.75rem 2rem;
border: none;
background: transparent;
color: var(--gray-700);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
border-radius: 50px;
transition: var(--transition);
position: relative;
z-index: 2;
}
.toggle-btn.active {
background: var(--white);
color: var(--primary-color);
box-shadow: var(--shadow-md);
}
.toggle-label {
font-size: 0.9rem;
color: var(--gray-600);
}
/* Botón Conoce Más */
.know-more-btn {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
color: var(--white) !important;
padding: 1rem 5rem !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
border-radius: 0 !important;
box-shadow: 0 8px 24px rgba(30, 64, 175, 0.4) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 56px !important;
min-width: 320px !important;
letter-spacing: 0.5px !important;
border: none !important;
}
.know-more-btn:hover {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%) !important;
transform: translateY(-3px) !important;
box-shadow: 0 12px 32px rgba(30, 64, 175, 0.5) !important;
color: var(--white) !important;
}
.know-more-btn:active {
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4) !important;
}
.savings-badge {
background: linear-gradient(135deg, var(--accent-color), #ff6b6b);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
box-shadow: var(--shadow-sm);
display: inline-block;
}
/* ============================================
PRICING CARDS
============================================ */
.pricing-cards-row {
margin-bottom: 2rem;
}
.pricing-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow);
border: 2px solid var(--gray-200);
transition: var(--transition);
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.pricing-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.pricing-card-featured {
border: 3px solid #7c3aed;
background: var(--white);
box-shadow: 0 15px 40px -5px rgba(124, 58, 237, 0.25);
position: relative;
overflow: visible;
padding-top: 3rem;
}
/* Header destacado estilo DonWeb para tarjeta recomendada */
.pricing-card-featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #7c3aed 100%);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
z-index: 1;
}
.pricing-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-color);
color: var(--white);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
box-shadow: var(--shadow-md);
z-index: 10;
}
/* Badge destacado para el plan recomendado - Estilo DonWeb */
.pricing-badge-featured {
background: #7c3aed;
color: var(--white);
padding: 0.65rem 2rem;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow:
0 4px 12px rgba(124, 58, 237, 0.35),
0 2px 4px rgba(124, 58, 237, 0.2);
border: none;
top: -12px;
transform: translateX(-50%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 20;
}
.pricing-card-featured:hover .pricing-badge-featured {
background: #6d28d9;
box-shadow:
0 6px 16px rgba(124, 58, 237, 0.4),
0 3px 6px rgba(124, 58, 237, 0.25);
}
/* Ajustar espaciado en tarjeta destacada para evitar que el badge tape el contenido */
.pricing-card-featured .pricing-header {
margin-top: 0;
}
.pricing-header {
text-align: center;
margin-bottom: 2rem;
}
.pricing-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: var(--shadow-md);
}
.pricing-icon i {
font-size: 2.5rem;
color: var(--white);
}
.pricing-card h3,
.pricing-card h3.product-name {
font-size: 1.75rem !important;
font-weight: 700 !important;
color: #1e293b !important; /* Mismo color que new - var(--gray-800) */
margin-bottom: 1rem;
}
.pricing-description {
color: var(--gray-600);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0;
}
.pricing-price {
text-align: center;
margin: 2rem 0;
padding: 1.5rem 0;
border-top: 2px solid var(--gray-200);
border-bottom: 2px solid var(--gray-200);
}
.price-monthly,
.price-annual {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.price-currency {
font-size: 1.5rem;
font-weight: 600;
color: var(--gray-700);
}
.price-amount {
font-size: 3rem;
font-weight: 800;
color: var(--primary-color);
line-height: 1;
}
.price-period {
font-size: 1.25rem;
color: var(--gray-600);
font-weight: 500;
}
.price-original-wrapper {
text-align: center;
margin-top: 0.5rem;
margin-bottom: 0.25rem;
}
.price-original {
font-size: 0.95rem;
color: var(--gray-500);
text-decoration: line-through;
font-weight: 400;
}
.price-savings {
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
.savings-text {
color: var(--gray-600);
font-size: 0.9rem;
font-weight: 500;
display: inline-block;
}
.savings-text.savings-annual {
background: transparent;
color: var(--gray-600);
padding: 0;
border-radius: 0;
display: inline-block;
}
.savings-badge-text {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
color: var(--white);
padding: 0.375rem 0.875rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}
.savings-percent {
font-weight: 800;
font-size: 0.85rem;
}
.price-bonus {
text-align: center;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.bonus-text {
color: var(--primary-color);
font-size: 0.95rem;
font-weight: 600;
display: inline-block;
}
.bonus-months {
font-weight: 700;
color: var(--primary-dark);
font-size: 1rem;
}
.savings-text.savings-monthly {
color: var(--gray-500);
font-size: 0.85rem;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 2rem 0;
flex-grow: 1;
}
.pricing-features li {
padding: 0.75rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--gray-700);
font-size: 1rem;
border-bottom: 1px solid var(--gray-100);
}
.pricing-features li:last-child {
border-bottom: none;
}
.pricing-features i {
color: var(--success-color);
font-size: 1.25rem;
flex-shrink: 0;
}
.pricing-btn {
margin-top: auto;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
}
/* Características Estándar VPS */
.standard-features-box {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 2px solid var(--primary-color);
border-radius: var(--border-radius-lg);
padding: 2.5rem;
margin-top: 3rem;
box-shadow: 0 8px 24px rgba(30, 64, 175, 0.1);
}
.standard-features-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1.5rem;
text-align: center;
}
.standard-feature-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--white);
border-radius: var(--border-radius);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
}
.standard-feature-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}
.standard-feature-item i {
color: var(--primary-color);
font-size: 1.5rem;
flex-shrink: 0;
width: 30px;
text-align: center;
}
.standard-feature-item span {
color: var(--gray-700);
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
/* Versión Mejorada de Características Estándar */
.standard-features-box.enhanced {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e9ecef 100%);
border: 3px solid var(--primary-color);
border-radius: var(--border-radius-xl);
padding: 3.5rem 2.5rem;
margin-top: 4rem;
box-shadow: 0 12px 40px rgba(30, 64, 175, 0.15);
position: relative;
overflow: hidden;
}
.standard-features-box.enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
}
.standard-features-title.enhanced-title {
font-size: 2rem;
font-weight: 800;
color: #1e40af !important; /* Mismo color que new - var(--primary-color) */
margin-bottom: 2.5rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
padding-bottom: 1rem;
}
.standard-features-title.enhanced-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
border-radius: 2px;
}
.standard-feature-item.enhanced-feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25rem;
padding: 2rem 1.5rem;
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.standard-feature-item.enhanced-feature::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.05), transparent);
transition: left 0.5s ease;
}
.standard-feature-item.enhanced-feature:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 12px 32px rgba(30, 64, 175, 0.2);
border-color: var(--primary-color);
}
.standard-feature-item.enhanced-feature:hover::before {
left: 100%;
}
.feature-icon-wrapper {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
box-shadow: 0 8px 20px rgba(30, 64, 175, 0.25);
transition: all 0.4s ease;
position: relative;
}
.standard-feature-item.enhanced-feature:hover .feature-icon-wrapper {
transform: rotate(5deg) scale(1.1);
box-shadow: 0 12px 28px rgba(30, 64, 175, 0.35);
}
.feature-icon-wrapper i {
color: var(--white);
font-size: 2rem;
z-index: 1;
}
.feature-content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.feature-title {
color: #1e293b !important; /* Mismo color que new - var(--gray-800) */
font-size: 1.125rem;
font-weight: 600;
line-height: 1.6;
margin: 0;
transition: color 0.3s ease;
}
.standard-feature-item.enhanced-feature:hover .feature-title {
color: #1e40af !important; /* Mismo color que new - var(--primary-color) */
}
/* Estilos para botón scroll-to-pricing - igual que new */
.btn.btn-lg.scroll-to-pricing,
a.btn.btn-lg.scroll-to-pricing {
background: var(--accent-color) !important;
color: var(--white) !important;
padding: 1rem 3rem !important;
font-weight: 600 !important;
font-size: 1.125rem !important;
border-radius: var(--border-radius) !important;
border: none !important;
transition: all 0.3s ease !important;
display: inline-block !important;
text-decoration: none !important;
min-height: 56px !important;
line-height: 1.5 !important;
}
.btn.btn-lg.scroll-to-pricing:hover,
a.btn.btn-lg.scroll-to-pricing:hover {
background: var(--accent-color-dark, #e55a2b) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}
/* Asegurar que la sección standard-features-box enhanced se vea igual que new */
.standard-features-box.enhanced {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e9ecef 100%) !important;
border: 3px solid var(--primary-color) !important;
border-radius: var(--border-radius-xl) !important;
padding: 3.5rem 2.5rem !important;
margin-top: 4rem !important;
box-shadow: 0 12px 40px rgba(30, 64, 175, 0.15) !important;
position: relative !important;
overflow: hidden !important;
}
@media (max-width: 991px) {
.standard-features-box.enhanced {
padding: 2.5rem 1.5rem;
}
.standard-features-title.enhanced-title {
font-size: 1.75rem;
margin-bottom: 2rem;
}
.standard-feature-item.enhanced-feature {
padding: 1.75rem 1.25rem;
}
.feature-icon-wrapper {
width: 70px;
height: 70px;
}
.feature-icon-wrapper i {
font-size: 1.75rem;
}
.feature-title {
font-size: 1.05rem;
}
}
@media (max-width: 768px) {
.standard-features-box {
padding: 1.5rem;
margin-top: 2rem;
}
.standard-features-box.enhanced {
padding: 2rem 1.25rem;
margin-top: 3rem;
}
.standard-features-title {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.standard-features-title.enhanced-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.standard-feature-item {
padding: 0.875rem;
}
.standard-feature-item.enhanced-feature {
padding: 1.5rem 1rem;
gap: 1rem;
}
.standard-feature-item i {
font-size: 1.25rem;
}
.standard-feature-item span {
font-size: 0.95rem;
}
.feature-icon-wrapper {
width: 60px;
height: 60px;
}
.feature-icon-wrapper i {
font-size: 1.5rem;
}
.feature-title {
font-size: 1rem;
}
}
/* ============================================
PRICING CAROUSEL
============================================ */
.pricing-carousel-container {
position: relative;
margin: 2rem 0;
padding: 0 60px;
}
.pricing-carousel-wrapper {
position: relative;
width: 100%;
}
.pricing-carousel {
overflow: hidden;
width: 100%;
position: relative;
}
.pricing-carousel-track {
display: flex;
gap: 2rem;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
will-change: scroll-position;
}
.pricing-carousel-track::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.pricing-carousel-slide {
flex: 0 0 calc(25% - 1.5rem);
min-width: 300px;
opacity: 1;
transition: opacity 0.3s ease;
}
.pricing-carousel-slide[style*="display: none"] {
display: none !important;
}
.pricing-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: var(--white);
border: 2px solid var(--gray-300);
border-radius: 50%;
color: var(--primary-color);
font-size: 1.25rem;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.pricing-carousel-nav:hover {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.pricing-carousel-nav:active {
transform: translateY(-50%) scale(0.95);
}
.pricing-carousel-prev {
left: -60px;
}
.pricing-carousel-next {
right: -60px;
}
@media (max-width: 1400px) {
.pricing-carousel-slide {
flex: 0 0 calc(33.333% - 1.33rem);
}
}
@media (max-width: 1200px) {
.pricing-carousel-container {
padding: 0 50px;
}
.pricing-carousel-prev {
left: -50px;
}
.pricing-carousel-next {
right: -50px;
}
.pricing-carousel-slide {
flex: 0 0 calc(50% - 1rem);
min-width: 280px;
}
}
@media (max-width: 991px) {
.services-menu {
flex-wrap: wrap;
justify-content: center;
padding: 0.75rem;
}
.service-menu-btn {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}
.pricing-carousel-container {
padding: 0 45px;
}
.pricing-carousel-prev {
left: -45px;
}
.pricing-carousel-next {
right: -45px;
}
.pricing-carousel-nav {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
@media (max-width: 767px) {
.services-menu {
width: 100%;
max-width: 100%;
padding: 0.5rem;
gap: 0.25rem;
}
.service-menu-btn {
padding: 0.625rem 1rem;
font-size: 0.875rem;
flex: 1;
min-width: 0;
}
.service-menu-btn i {
font-size: 1rem;
margin-right: 0.25rem;
}
.pricing-carousel-container {
padding: 0 40px;
}
.pricing-carousel-prev {
left: -40px;
}
.pricing-carousel-next {
right: -40px;
}
.pricing-carousel-nav {
width: 40px;
height: 40px;
font-size: 1rem;
}
.pricing-carousel-slide {
flex: 0 0 100%;
min-width: 100%;
}
.pricing-carousel-track {
gap: 1.5rem;
}
}
@media (max-width: 480px) {
.pricing-carousel-container {
padding: 0 35px;
}
.pricing-carousel-prev {
left: -35px;
}
.pricing-carousel-next {
right: -35px;
}
.pricing-carousel-nav {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
}
/* Domain Card */
.domain-card {
position: relative;
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
border-radius: var(--border-radius-lg);
padding: 4rem 3rem;
box-shadow: 0 20px 60px -15px rgba(59, 130, 246, 0.5);
color: var(--white);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.domain-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 70px -10px rgba(59, 130, 246, 0.6);
}
.domain-card-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
opacity: 0.6;
pointer-events: none;
}
.domain-card-content {
position: relative;
z-index: 2;
text-align: center;
}
.domain-icon-wrapper {
position: relative;
display: inline-block;
margin-bottom: 2rem;
}
.domain-icon {
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
transition: transform 0.3s ease;
}
.domain-card:hover .domain-icon {
transform: scale(1.1) rotate(5deg);
}
.domain-icon i {
font-size: 3.5rem;
background: linear-gradient(135deg, #3b82f6, #1e3a8a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.domain-icon-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
z-index: 1;
}
@keyframes pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.3;
}
}
.domain-card h3 {
color: var(--white) !important;
margin-bottom: 1rem !important;
font-size: 2.5rem !important; /* Forzar tamaño igual a 'new' */
font-weight: 700 !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}
.domain-description {
color: rgba(255, 255, 255, 0.95);
font-size: 1.25rem;
margin-bottom: 2.5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.domain-price-container {
margin: 3rem 0;
display: flex;
justify-content: center;
}
.domain-price-badge {
background: rgba(255, 255, 255, 0.98);
border-radius: 20px;
padding: 1.5rem 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
.domain-price-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.price-label {
font-size: 0.9rem;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.domain-price {
display: flex;
align-items: baseline;
gap: 0.3rem;
color: #1e293b;
}
.domain-price .price-currency {
font-size: 2rem;
font-weight: 700;
color: #3b82f6;
}
.domain-price .price-amount {
font-size: 4rem;
font-weight: 900;
color: #1e293b;
line-height: 1;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.domain-price .price-period {
font-size: 1.25rem;
font-weight: 600;
color: #64748b;
margin-left: 0.25rem;
}
.domain-features {
list-style: none;
padding: 0;
margin: 2.5rem 0;
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.domain-features li {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
font-weight: 500;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.domain-features li:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.domain-features i {
color: #4ade80;
font-size: 1.25rem;
filter: drop-shadow(0 2px 4px rgba(74, 222, 128, 0.3));
}
.domain-btn {
background: var(--white);
color: var(--primary-color);
border: none;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 700;
border-radius: 50px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
margin-top: 1rem;
}
.domain-btn:hover {
background: #f1f5f9;
color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.domain-btn i {
font-size: 1.1rem;
}
/* ============================================
FEATURE BOXES
============================================ */
.feature-box {
background: var(--white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid var(--gray-200);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
}
.feature-box:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(30, 64, 175, 0.15);
border-color: var(--primary-light);
}
.feature-box-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-color) 100%);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 2.5rem;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.2);
}
.feature-box-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: left 0.6s ease;
}
.feature-box:hover .feature-box-header::before {
left: 100%;
}
.feature-box-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-box:hover .feature-box-header::after {
opacity: 1;
}
.feature-box-header i {
font-size: 4rem;
color: var(--white);
z-index: 2;
position: relative;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-box:hover .feature-box-header i {
transform: scale(1.2) rotate(5deg);
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
.feature-box-content {
padding: 2.5rem 2rem;
flex-grow: 1;
display: flex;
flex-direction: column;
background: var(--white);
}
.feature-box-content h4 {
font-size: 1.6rem !important;
font-weight: 700 !important;
color: #1e293b !important; /* Mismo color que new - var(--gray-800) */
margin-bottom: 1.25rem;
line-height: 1.3 !important;
text-align: left;
letter-spacing: -0.3px !important;
}
.feature-box-content p {
font-size: 1.05rem !important;
color: #475569 !important; /* Mismo color que new - var(--gray-600) */
line-height: 1.7 !important;
margin: 0;
text-align: left;
flex-grow: 1;
}
@media (max-width: 991px) {
.pricing-card {
padding: 2rem;
margin-bottom: 2rem;
}
.price-amount {
font-size: 2.5rem;
}
.domain-features {
flex-direction: column;
gap: 1rem;
}
.feature-box-header {
height: 120px;
padding: 2rem;
}
.feature-box-header i {
font-size: 3.5rem;
}
.feature-box-content {
padding: 2rem 1.5rem;
}
.feature-box-content h4 {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.feature-box-content p {
font-size: 1rem;
}
}
@media (max-width: 767px) {
.pricing-toggle {
width: 100%;
max-width: 300px;
}
.toggle-btn {
flex: 1;
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.pricing-card {
padding: 1.5rem;
}
.price-amount {
font-size: 2rem;
}
.pricing-toggle-container {
margin-bottom: 2rem;
padding: 0 0.5rem;
}
.pricing-toggle {
width: 100%;
max-width: 280px;
}
.pricing-card {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.pricing-header {
margin-bottom: 1.5rem;
}
.pricing-icon {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.pricing-icon i {
font-size: 2rem;
}
.pricing-card h3,
.pricing-card h3.product-name {
font-size: 1.5rem !important;
color: #1e293b !important; /* Mismo color que new - var(--gray-800) */
}
.price-amount {
font-size: 2rem;
}
.pricing-features {
margin: 1.5rem 0;
}
.pricing-features li {
padding: 0.5rem 0;
font-size: 0.95rem;
}
.pricing-btn {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
.domain-card {
padding: 2.5rem 1.5rem;
margin: 0 0.5rem;
}
.domain-card h3 {
font-size: 1.75rem !important; /* Tamaño responsive igual a 'new' */
}
.domain-description {
font-size: 1rem;
}
.domain-price .price-amount {
font-size: 2.5rem;
}
.domain-features {
gap: 1rem;
flex-direction: column;
}
.domain-features li {
font-size: 0.95rem;
padding: 0.5rem 1rem;
width: 100%;
justify-content: center;
}
.feature-box-header {
height: 100px;
padding: 1.5rem;
}
.feature-box-header i {
font-size: 3rem;
}
.feature-box-content {
padding: 1.75rem 1.25rem;
}
.feature-box-content h4 {
font-size: 1.3rem;
margin-bottom: 0.75rem;
}
.feature-box-content p {
font-size: 0.95rem;
line-height: 1.6;
}
.row {
margin: 0 -0.5rem;
}
.row > [class*="col-"] {
padding: 0 0.5rem;
}
}
/* ============================================
TECHNOLOGIES CAROUSEL
============================================ */
.technologies-section {
overflow: hidden;
}
.technologies-carousel {
position: relative;
padding: 2rem 60px;
}
.technologies-track {
display: flex;
gap: 2rem;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 1rem 0;
}
.technologies-track::-webkit-scrollbar {
display: none;
}
.technology-card {
flex: 0 0 calc(25% - 1.5rem);
min-width: 280px;
background: var(--white);
border: 2px solid var(--gray-200);
border-radius: var(--border-radius-lg);
padding: 2rem;
text-align: center;
transition: var(--transition);
scroll-snap-align: start;
box-shadow: var(--shadow);
}
.technology-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.tech-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.technology-card:hover .tech-icon {
transform: scale(1.1);
box-shadow: var(--shadow-lg);
}
.tech-icon i {
font-size: 2.5rem;
color: var(--white);
}
.technology-card h4 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 1rem;
}
.technology-card p {
color: var(--gray-600);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.tech-features {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.tech-features li {
padding: 0.5rem 0;
color: var(--gray-700);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tech-features li::before {
content: '✓';
color: var(--success-color);
font-weight: 700;
font-size: 1rem;
}
.tech-nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: var(--white);
border: 2px solid var(--gray-300);
border-radius: 50%;
color: var(--primary-color);
font-size: 1.25rem;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
z-index: 10;
}
.tech-nav-button:hover {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
transform: translateY(-50%) scale(1.1);
box-shadow: var(--shadow-lg);
}
.tech-nav-prev {
left: 0;
}
.tech-nav-next {
right: 0;
}
.tech-nav-button:active {
transform: translateY(-50%) scale(0.95);
}
@media (max-width: 991px) {
.technologies-carousel {
padding: 2rem 50px;
}
.technology-card {
flex: 0 0 calc(33.333% - 1.33rem);
min-width: 250px;
}
.tech-nav-button {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
@media (max-width: 767px) {
.technologies-carousel {
padding: 2rem 45px;
}
.technology-card {
flex: 0 0 calc(50% - 1rem);
min-width: 220px;
padding: 1.5rem;
}
.tech-nav-button {
width: 40px;
height: 40px;
font-size: 1rem;
}
.tech-nav-prev {
left: 5px;
}
.tech-nav-next {
right: 5px;
}
}
@media (max-width: 575px) {
.technology-card {
flex: 0 0 85%;
min-width: 200px;
}
}
/* ============================================
FOOTER
============================================ */
.footer-main {
background: var(--gray-900);
color: var(--white);
padding: 3rem 0 1rem;
width: 100%;
}
.footer-logo {
margin-bottom: 1.5rem;
}
.footer-logo img {
height: 80px;
width: auto;
max-width: 320px;
filter: brightness(1.1);
transition: var(--transition);
}
.footer-logo img:hover {
transform: scale(1.05);
filter: brightness(1.2);
}
@media (max-width: 767px) {
.footer-logo img {
height: 60px;
max-width: 240px;
}
}
.footer-text {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.footer-social {
display: flex;
gap: 1rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
font-size: 1.5rem;
transition: var(--transition);
border: 2px solid rgba(255, 255, 255, 0.15);
}
.footer-social a:hover {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.footer-title {
color: var(--white);
margin-bottom: 1.25rem;
font-weight: 700;
font-size: 1.125rem;
letter-spacing: 0.5px;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
transition: var(--transition);
font-size: 0.95rem;
display: inline-block;
padding: 0.25rem 0;
}
.footer-links a:hover {
color: var(--primary-light);
padding-left: 5px;
}
.footer-contact p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
}
.footer-contact i {
margin-right: 0.5rem;
color: var(--primary-color);
}
.footer-divider {
border-color: rgba(255, 255, 255, 0.2);
margin: 2rem 0 1rem;
}
.footer-copyright {
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0;
font-size: 0.9rem;
}
@media (max-width: 991px) {
.footer-main {
padding: 2.5rem 0 1rem;
}
.footer-title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.footer-title:first-of-type {
margin-top: 0;
}
}
@media (max-width: 767px) {
.footer-main {
padding: 2rem 0 1rem;
}
.footer-text {
font-size: 0.95rem;
margin-bottom: 1.25rem;
}
.footer-social {
gap: 0.75rem;
}
.footer-social a {
width: 40px;
height: 40px;
font-size: 1.25rem;
}
.footer-title {
font-size: 1rem;
margin-bottom: 0.875rem;
}
.footer-links a {
font-size: 0.9rem;
}
.footer-copyright {
font-size: 0.875rem;
text-align: center;
}
.footer-copyright:last-child {
margin-top: 0.5rem;
}
.row.align-items-center {
flex-direction: column;
text-align: center;
}
.row.align-items-center .col-lg-6 {
width: 100%;
}
.row.align-items-center .col-lg-6.text-right {
text-align: center;
}
}
/* ============================================
UTILITIES
============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-white { color: var(--white) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-muted { color: var(--gray-500) !important; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.me-2 { margin-right: 0.5rem; }
.ms-2 { margin-left: 0.5rem; }
/* ============================================
PÁGINA VPS - ESTILOS ESPECÍFICOS
============================================ */
/* Hero Section para páginas internas */
.page-hero {
padding: 100px 0 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.page-hero .container {
position: relative;
z-index: 1;
}
.page-hero h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.page-hero .lead {
font-size: 1.25rem;
font-weight: 400;
opacity: 0.95;
}
@media (max-width: 767px) {
.page-hero {
padding: 60px 0 50px;
}
.page-hero h1 {
font-size: 2rem;
}
.page-hero .lead {
font-size: 1.1rem;
}
}
/* Accordion FAQ */
.accordion {
--bs-accordion-color: #1e293b !important; /* Mismo color que new - var(--gray-800) */
--bs-accordion-bg: #ffffff !important; /* Mismo color que new - var(--white) */
--bs-accordion-border-color: #e2e8f0 !important; /* Mismo color que new - var(--gray-200) */
--bs-accordion-border-radius: var(--border-radius-lg);
--bs-accordion-btn-padding-x: 1.5rem;
--bs-accordion-btn-padding-y: 1.25rem;
--bs-accordion-body-padding-x: 1.5rem;
--bs-accordion-body-padding-y: 1.25rem;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.accordion-item {
border: 1px solid #e2e8f0 !important; /* Mismo color que new - var(--gray-200) */
border-radius: var(--border-radius-lg);
margin-bottom: 1rem;
overflow: hidden;
background: #ffffff !important; /* Mismo color que new - var(--white) */
box-shadow: var(--shadow);
transition: var(--transition);
}
.accordion-item:hover {
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px) !important;
transition: var(--transition) !important;
}
.accordion-button {
background: #ffffff !important; /* Mismo color que new - var(--white) */
color: #1e293b !important; /* Mismo color que new - var(--gray-800) */
font-weight: 600 !important;
font-size: 1.1rem !important;
border: none !important;
padding: 1.25rem 1.5rem !important;
transition: var(--transition) !important;
width: 100% !important;
text-align: left !important;
cursor: pointer !important;
}
.accordion-button:not(.collapsed) {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important; /* Mismo gradiente que new */
color: #ffffff !important; /* Mismo color que new - var(--white) */
box-shadow: none;
}
.accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(30, 64, 175, 0.25) !important;
border-color: transparent !important;
outline: none !important;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23334155'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transition: transform 0.3s ease;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(180deg);
}
.accordion-body {
padding: 1.5rem !important;
color: #334155 !important; /* Mismo color que new - var(--gray-700) */
line-height: 1.7 !important;
background: #f8fafc !important; /* Mismo color que new - var(--gray-50) */
}
.accordion-collapse {
transition: height 0.35s ease;
}
/* Ilustración VPS */
.vps-illustration {
padding: 2rem;
}
@media (max-width: 991px) {
.vps-illustration {
margin-top: 2rem;
}
.vps-illustration i {
font-size: 150px !important;
}
}
/* Toggle de precios en página VPS */
#toggle-monthly-vps,
#toggle-annual-vps {
cursor: pointer;
}
#savings-badge-vps {
display: inline-block;
margin-top: 0.5rem;
}
/* Ajustes para pricing cards en página VPS */
.vps.tpl .pricing-card {
margin-bottom: 0;
}
/* Mejoras de presentación para página VPS */
section.section .container {
max-width: 1200px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.pricing-toggle-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.pricing-toggle {
display: flex;
gap: 0.5rem;
background: var(--gray-100);
padding: 0.5rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow);
}
.toggle-btn {
padding: 0.75rem 2rem;
border: none;
background: transparent;
color: var(--gray-700);
font-weight: 600;
border-radius: var(--border-radius);
cursor: pointer;
transition: var(--transition);
}
.toggle-btn.active {
background: var(--primary-color);
color: var(--white);
box-shadow: var(--shadow-md);
}
.toggle-btn:hover:not(.active) {
background: var(--gray-200);
color: var(--primary-color);
}
.toggle-label {
display: flex;
align-items: center;
justify-content: center;
}
.savings-badge {
display: inline-block;
background: linear-gradient(135deg, var(--accent-color) 0%, #ff6b35 100%);
color: var(--white);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
box-shadow: var(--shadow-md);
}
/* Centrar tarjetas de precios en página VPS */
section.section .row.justify-content-center {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
margin-left: -15px !important;
margin-right: -15px !important;
}
/* Asegurar que las tarjetas tengan el mismo ancho máximo */
.pricing-card {
max-width: 100%;
width: 100%;
}
@media (min-width: 576px) {
.pricing-card {
max-width: 100%;
}
}
@media (min-width: 768px) {
.pricing-card {
max-width: 100%;
}
}
@media (min-width: 992px) {
.pricing-card {
max-width: 100%;
}
}
/* Mejorar espaciado de secciones */
section.section {
padding: 80px 0 !important;
}
section.section.bg-light {
padding: 100px 0 !important; /* Mismo padding que new */
padding-top: 100px !important; /* Eliminar cualquier padding superior diferente */
padding-bottom: 100px !important; /* Mismo padding inferior que new */
box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.02), inset 0 -2px 30px rgba(0, 0, 0, 0.02) !important; /* Mismo box-shadow que new */
background-color: #f8fafc !important; /* Mismo color que new - var(--gray-50) */
margin-top: 0 !important; /* Eliminar cualquier margin superior */
margin-bottom: 0 !important;
}
/* Eliminar cualquier espacio antes de section.section.bg-light */
section + section.section.bg-light,
.section + section.section.bg-light,
* + section.section.bg-light {
margin-top: 0 !important;
padding-top: 0 !important;
}
@media (max-width: 767px) {
.pricing-toggle-container {
margin-bottom: 2rem;
}
.toggle-btn {
padding: 0.6rem 1.5rem;
font-size: 0.875rem;
}
.savings-badge {
font-size: 0.75rem;
padding: 0.4rem 1rem;
}
}
/* Botón "Ir arriba" */
.scroll-to-top-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: var(--white);
border: none;
border-radius: 50%;
font-size: 1.25rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.scroll-to-top-btn.show {
opacity: 1;
visibility: visible;
}
.scroll-to-top-btn:hover {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.scroll-to-top-btn:active {
transform: translateY(-2px);
}
@media (max-width: 767px) {
.scroll-to-top-btn {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
/* Ocultar controles del carrusel en página VPS (solo hay un slide) */
body:has(.vps.tpl) .hero-carousel .swiper-button-prev,
body:has(.vps.tpl) .hero-carousel .swiper-button-next,
.vps.tpl .hero-carousel .swiper-button-prev,
.vps.tpl .hero-carousel .swiper-button-next,
.hero-carousel .swiper-button-prev:not(.hero-nav-button),
.hero-carousel .swiper-button-next:not(.hero-nav-button) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Ocultar cualquier elemento de paginación o puntos en el carrusel VPS */
.vps.tpl .hero-carousel .swiper-pagination,
.vps.tpl .hero-carousel .hero-dots,
.vps.tpl .hero-carousel .carousel-dots,
.vps.tpl .hero-carousel [class*="pagination"],
.vps.tpl .hero-carousel [class*="dot"] {
display: none !important;
visibility: hidden !important;
}
/* Centrar mejor las preguntas frecuentes */
.vps.tpl .accordion {
max-width: 100% !important;
margin: 0 auto !important;
}
/* Asegurar que col-lg-10 y col-xl-8 tengan el mismo comportamiento que new */
.section.bg-light .col-lg-10,
.section.bg-light .col-xl-8 {
padding-left: 15px !important;
padding-right: 15px !important;
margin: 0 auto !important;
}
.vps.tpl .row.justify-content-center {
display: flex;
justify-content: center;
}
/* ============================================
DOMAIN REGISTRATION PAGE STYLES
============================================ */
/* Buscador de Dominios Mejorado */
.domain-search-hero {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.85) 0%, rgba(255, 140, 66, 0.85) 50%, rgba(255, 160, 122, 0.85) 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.domain-search-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.domain-search-box-enhanced {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.domain-search-form-enhanced {
position: relative;
}
.domain-search-input-wrapper {
display: flex;
align-items: center;
background: white;
border-radius: 1rem;
padding: 0.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.domain-search-input-wrapper:hover {
transform: translateY(-2px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}
.domain-search-icon-left {
padding: 0 1.5rem;
color: #FF6B35;
font-size: 1.5rem;
}
.domain-search-input {
flex: 1;
border: none;
outline: none;
padding: 1.5rem 1rem;
font-size: 1.25rem;
color: #1f2937;
}
.domain-search-input::placeholder {
color: #9ca3af;
}
.domain-search-button {
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
color: white;
border: none;
padding: 1.5rem 2.5rem;
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}
.domain-search-button:hover {
background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%);
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
}
/* Precios de Dominios en Cards */
.domain-pricing-container {
margin-top: 2rem;
}
.domain-pricing-title {
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFA07A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2.5rem;
font-weight: 700;
}
.domain-pricing-wrapper {
margin-top: 2rem;
}
/* Estilos para convertir tabla en cards - Solo Registrar */
.domain-pricing-wrapper table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0;
display: block;
}
.domain-pricing-wrapper table tbody {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: flex-start;
width: 100%;
margin: 0;
padding: 0;
}
.domain-pricing-wrapper table thead {
display: none !important;
}
/* Ocultar cualquier encabezado de tabla */
.domain-pricing-wrapper table thead tr,
.domain-pricing-wrapper table thead th,
.domain-pricing-wrapper table thead td {
display: none !important;
}
.domain-pricing-wrapper table tbody tr {
display: flex;
flex-direction: column;
flex: 0 0 calc(33.333% - 1rem);
max-width: calc(33.333% - 1rem);
background: white;
border-radius: 1rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid transparent;
min-height: 240px;
position: relative;
padding-bottom: 4rem;
cursor: pointer;
margin: 0;
box-sizing: border-box;
}
.domain-pricing-wrapper table tbody tr:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: #FF6B35;
}
.domain-pricing-wrapper table tbody tr td {
display: block;
padding: 1.5rem;
text-align: center;
border: none;
}
/* Ocultar primera fila si es encabezado (TLD Min. Años Registrar...) */
.domain-pricing-wrapper table tbody tr:first-child {
display: none !important;
}
/* Ocultar primera columna (Min. Años) en todas las filas */
.domain-pricing-wrapper table tbody tr td:first-child {
display: none !important;
}
/* TLD como header - mostrar la extensión */
.domain-pricing-wrapper table tbody tr td:nth-child(2) {
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
color: white;
font-weight: 700;
font-size: 1.5rem;
border-radius: 1rem 1rem 0 0;
padding: 1.5rem;
margin: -1.5rem -1.5rem 1rem -1.5rem;
text-transform: uppercase;
position: relative;
}
/* Ocultar cualquier texto tachado dentro del TLD */
.domain-pricing-wrapper table tbody tr td:nth-child(2) del,
.domain-pricing-wrapper table tbody tr td:nth-child(2) s,
.domain-pricing-wrapper table tbody tr td:nth-child(2) strike {
display: none;
}
.domain-pricing-wrapper table tbody tr td:nth-child(2) .tld-text {
display: block;
font-size: 1.5rem;
font-weight: 700;
}
/* Ocultar Transferir y Renovar, solo mostrar Registrar */
.domain-pricing-wrapper table tbody tr td:nth-child(4),
.domain-pricing-wrapper table tbody tr td:nth-child(5) {
display: none;
}
/* Ocultar texto tachado en todas las celdas */
.domain-pricing-wrapper table tbody tr td del,
.domain-pricing-wrapper table tbody tr td s,
.domain-pricing-wrapper table tbody tr td strike {
display: none !important;
}
/* Solo mostrar Registrar (tercera columna) */
.domain-pricing-wrapper table tbody tr td:nth-child(3) {
padding: 1.5rem 1.5rem 2rem 1.5rem;
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 0.5rem;
flex: 1;
}
/* Ocultar texto tachado en la columna de precio */
.domain-pricing-wrapper table tbody tr td:nth-child(3) del,
.domain-pricing-wrapper table tbody tr td:nth-child(3) s,
.domain-pricing-wrapper table tbody tr td:nth-child(3) strike {
display: none !important;
}
.domain-pricing-wrapper table tbody tr td:nth-child(3):before {
content: 'Registrar';
display: block;
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Cambiar "Registrar" a "Transferir" en la página de transferencia */
.hook-tf-domain-transfer .domain-pricing-wrapper table tbody tr td:nth-child(3):before {
content: 'Transferir';
}
.domain-pricing-wrapper table tbody tr td:nth-child(3) strong {
color: #FF6B35;
font-size: 1.5rem;
font-weight: 700;
display: block;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}
/* Asegurar que la celda de precio tenga espacio para el botón */
.domain-pricing-wrapper table tbody tr td {
position: relative;
padding-bottom: 1rem;
}
/* Botón de buscar en cada card */
.domain-pricing-search-btn {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
transition: all 0.3s ease;
z-index: 10;
border: none;
color: white;
font-size: 1.25rem;
text-decoration: none;
}
.domain-pricing-search-btn:hover {
transform: translateX(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
color: white;
text-decoration: none;
}
.domain-pricing-search-btn i {
pointer-events: none;
}
/* Botón de búsqueda pequeño dentro de cada card */
.domain-card-search-btn {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
transition: all 0.3s ease;
border: none;
color: white;
font-size: 0.9rem;
margin: 0.75rem auto 0;
padding: 0;
flex-shrink: 0;
}
.domain-card-search-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.5);
background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%);
}
.domain-card-search-btn i {
pointer-events: none;
}
/* Asegurar que las celdas se muestren correctamente */
.domain-pricing-wrapper table tbody tr td {
display: block;
}
/* Botón "Top" para volver arriba */
.scroll-top-button {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
transition: all 0.3s ease;
z-index: 1000;
border: none;
color: white;
font-size: 1.2rem;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.scroll-top-button.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top-button:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%);
}
.scroll-top-button i {
pointer-events: none;
}
@media (max-width: 768px) {
.scroll-top-button {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
font-size: 1rem;
}
}
/* CTA Final Mejorado */
.domain-cta-section {
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFA07A 100%);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.domain-cta-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: moveBackground 20s linear infinite;
}
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.domain-cta-content {
text-align: center;
position: relative;
z-index: 1;
}
.domain-cta-icon {
width: 100px;
height: 100px;
margin: 0 auto 2rem;
background: rgba(255, 255, 255, 0.2);
border: 3px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: pulse 2s infinite;
backdrop-filter: blur(10px);
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.domain-cta-title {
color: #ffffff;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.domain-cta-subtitle {
color: #ffffff;
font-size: 1.25rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
.domain-cta-button {
display: inline-block;
background: white;
color: #FF6B35;
padding: 1.25rem 3rem;
border-radius: 3rem;
font-size: 1.25rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
border: 3px solid white;
}
.domain-cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.95);
color: #FF6B35;
border-color: white;
}
/* Feature Cards */
.feature-card {
padding: 2rem;
background: white;
border-radius: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
}
.feature-card h4 {
color: var(--primary-color);
margin-bottom: 1rem;
font-weight: 600;
}
/* Benefit Cards */
.benefit-card {
padding: 2rem;
background: white;
border-radius: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border-left: 4px solid var(--primary-color);
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.benefit-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
margin-bottom: 1.5rem;
}
.benefit-card h4 {
color: var(--primary-color);
margin-bottom: 1rem;
font-weight: 600;
}
/* Accordion Styles */
.accordion-item {
border: none;
margin-bottom: 1rem;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.accordion-button {
background: white;
color: var(--primary-color);
font-weight: 600;
border: none;
padding: 1.25rem 1.5rem;
}
.accordion-button:not(.collapsed) {
background: var(--primary-color);
color: white;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: transparent;
}
.accordion-body {
padding: 1.5rem;
background: #f9fafb;
}
/* Responsive Styles */
@media (max-width: 992px) {
.domain-pricing-wrapper table tbody tr {
flex: 0 0 calc(50% - 0.75rem);
max-width: calc(50% - 0.75rem);
}
}
@media (max-width: 768px) {
.domain-pricing-wrapper table tbody {
gap: 1rem;
}
.domain-pricing-wrapper table tbody tr {
flex: 0 0 calc(50% - 0.5rem);
max-width: calc(50% - 0.5rem);
}
.domain-search-input-wrapper {
flex-direction: column;
padding: 1rem;
}
.domain-search-icon-left {
display: none;
}
.domain-search-input {
width: 100%;
margin-bottom: 1rem;
padding: 1.25rem;
}
.domain-search-button {
width: 100%;
padding: 1.25rem;
}
.domain-search-box {
padding: 1.5rem;
}
.domain-search-form .form-control {
font-size: 1rem;
padding: 0.875rem 1.25rem;
}
}
/* ============================================
ESTILOS PARA TOGGLE DE PRECIOS - BADGE "AHORRA 70%"
============================================ */
.toggle-savings-badge {
display: inline-block;
background: #10b981;
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
margin-left: 0.5rem;
animation: pulse 2s infinite;
}
/* ============================================
ESTILOS PARA PRECIO POR SITIO (RESELLER)
============================================ */
.price-per-site {
text-align: center;
padding-top: 0.5rem;
border-top: 1px solid #e5e7eb;
margin-top: 0.5rem;
}
.price-per-site-text {
display: block;
font-size: 0.85rem;
color: #6b7280;
margin-bottom: 0.25rem;
}
.price-per-site-amount {
font-size: 1.1rem;
font-weight: 600;
color: #059669;
}
/* ============================================
ESTILOS ESPECÍFICOS PARA TRANSFERENCIA DE DOMINIOS
============================================ */
.scroll-to-transfer {
transition: all 0.3s ease;
}
.scroll-to-transfer:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}
/* ============================================
ESTILOS PARA CERTIFICADOS SSL
============================================ */
.ssl-certificates-container {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.ssl-certificate-row {
width: 100%;
}
.ssl-certificate-card {
background: white;
border-radius: 1rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
padding: 2rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.ssl-certificate-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: #FF6B35;
}
.ssl-certificate-header {
display: flex;
align-items: center;
gap: 1.5rem;
flex: 0 0 280px;
}
.ssl-certificate-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.ssl-certificate-info {
flex: 1;
}
.ssl-certificate-name {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin: 0 0 0.5rem 0;
}
.ssl-certificate-description {
font-size: 0.95rem;
color: #6b7280;
margin: 0;
}
.ssl-certificate-features {
flex: 1;
padding: 0 1rem;
}
.ssl-features-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.ssl-features-list li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: #4b5563;
}
.ssl-features-list li i {
color: #10b981;
font-size: 0.85rem;
}
.ssl-certificate-pricing {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex: 0 0 200px;
text-align: center;
}
.ssl-price-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.ssl-price-label {
font-size: 0.85rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.ssl-price-amount {
font-size: 2rem;
font-weight: 700;
color: #FF6B35;
line-height: 1;
}
.ssl-price-period {
font-size: 0.9rem;
color: #6b7280;
}
.ssl-price-annual {
font-size: 0.85rem;
color: #6b7280;
margin-top: 0.5rem;
}
.ssl-price-annual-text {
display: block;
margin-bottom: 0.25rem;
}
.ssl-price-annual-amount {
font-weight: 600;
color: #059669;
}
.ssl-price-loading {
color: #9ca3af;
font-size: 0.9rem;
}
.ssl-certificate-action {
flex: 0 0 180px;
}
.ssl-buy-button {
width: 100%;
padding: 0.875rem 1.5rem;
font-weight: 600;
white-space: nowrap;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
border-radius: 50%;
color: white;
font-size: 1.5rem;
font-weight: 700;
}
.scroll-to-ssl {
transition: all 0.3s ease;
}
.scroll-to-ssl:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}
/* Responsive para certificados SSL */
@media (max-width: 992px) {
.ssl-certificate-card {
flex-direction: column;
text-align: center;
}
.ssl-certificate-header {
flex: 1;
width: 100%;
justify-content: center;
}
.ssl-certificate-features {
width: 100%;
padding: 0;
}
.ssl-features-list {
grid-template-columns: 1fr;
}
.ssl-certificate-pricing {
width: 100%;
}
.ssl-certificate-action {
width: 100%;
}
}
@media (max-width: 768px) {
.ssl-certificate-card {
padding: 1.5rem;
}
.ssl-certificate-name {
font-size: 1.25rem;
}
.ssl-price-amount {
font-size: 1.75rem;
}
}
/* ============================================
TECH DARK MODE - Portal de Clientes
============================================ */
/* Los estilos del Portal de Clientes se han movido a client-portal.css */
/* ============================================
ESTILOS ESPECÍFICOS PARA HOMEPAGE
============================================ */
/* Asegurar que el body y html tengan el fondo correcto en el home */
body.homepage {
background-color: var(--white) !important;
min-height: 100vh;
display: flex;
flex-direction: column;
}
html body.homepage {
background-color: var(--white) !important;
min-height: 100vh;
}
/* Hero-carousel - Extender fondo a todo el ancho en el home */
body.homepage .hero-carousel {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
right: 0 !important;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 50%, #3b82f6 100%) !important;
position: relative;
overflow-x: hidden;
}
body.homepage .hero-slide {
width: 100% !important;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 50%, #3b82f6 100%) !important;
}
/* Secciones - Extender fondos a todo el ancho en el home */
body.homepage .section {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
right: 0 !important;
position: relative;
overflow-x: hidden;
}
body.homepage .section.bg-light {
background-color: var(--gray-50) !important;
}
body.homepage .section.bg-white {
background-color: var(--white) !important;
}
body.homepage .section.bg-primary {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 50%, #3b82f6 100%) !important;
}
/* Footer - Extender fondo a todo el ancho en el home */
body.homepage .footer-main {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
right: 0 !important;
margin-top: auto;
background: var(--gray-900) !important;
padding: 3rem 0 1.5rem;
flex-shrink: 0;
position: relative;
overflow-x: hidden;
}
/* Asegurar que el html y body no tengan overflow horizontal */
body.homepage,
html body.homepage {
overflow-x: hidden;
width: 100%;
}
/* ============================================
ESTILOS PARA TODAS LAS PÁGINAS DE SERVICIOS
(Extender fondos a todo el ancho)
============================================ */
/* ============================================
ESTILOS PARA TODAS LAS PÁGINAS DE SERVICIOS
(Extender fondos a todo el ancho)
Excluye: homepage y páginas del portal de clientes
============================================ */
/* Hero-carousel - Extender fondo a todo el ancho en páginas de servicios */
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .hero-carousel {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
right: 0 !important;
position: relative;
overflow-x: hidden;
}
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .hero-slide {
width: 100% !important;
}
/* Footer - Extender fondo a todo el ancho en páginas de servicios */
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .footer-main {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
right: 0 !important;
margin-top: auto;
background: var(--gray-900) !important;
padding: 3rem 0 1.5rem;
flex-shrink: 0;
position: relative;
overflow-x: hidden;
}
/* Asegurar que el html y body no tengan overflow horizontal en páginas de servicios */
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements),
html body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) {
overflow-x: hidden;
width: 100%;
}
/* ============================================
ESTILOS PARA TODAS LAS PÁGINAS DE SERVICIOS
(Extender fondos a todo el ancho)
============================================ */
/* Secciones - Extender fondos a todo el ancho en páginas de servicios */
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
right: 0 !important;
position: relative;
overflow-x: hidden;
}
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section.bg-light {
background-color: var(--gray-50) !important;
}
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section.bg-white {
background-color: var(--white) !important;
}
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section.bg-primary {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 50%, #3b82f6 100%) !important;
}
/* Secciones - Extender fondos a todo el ancho en páginas de servicios */
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
left: 0 !important;
right: 0 !important;
position: relative;
overflow-x: hidden;
}
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section.bg-light {
background-color: var(--gray-50) !important;
}
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section.bg-white {
background-color: var(--white) !important;
}
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements) .section.bg-primary {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 50%, #3b82f6 100%) !important;
}
/* Asegurar que el contenido principal no corte el footer */
body.homepage #main-body {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
/* Responsive para el footer en el home */
@media (max-width: 767px) {
body.homepage .footer-main {
padding: 2rem 0 1.5rem;
}
}
@media (max-width: 575px) {
body.homepage .footer-main {
padding: 1.5rem 0 1rem;
}
}
/* Reset para páginas de servicios - asegurar que no hereden estilos del portal de clientes */
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements):not(.hook-tf-submitticket) #main-body {
background-color: transparent !important;
padding: 0 !important;
min-height: unset !important;
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
/* Asegurar fondo blanco y layout correcto en body para páginas de servicios */
body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements):not(.hook-tf-submitticket) {
background-color: var(--white) !important;
min-height: 100vh;
display: flex;
flex-direction: column;
}
html body:not(.homepage):not(.hook-tf-knowledgebase):not(.hook-tf-contact):not(.hook-tf-announcements):not(.hook-tf-submitticket) {
background-color: var(--white) !important;
min-height: 100vh;
}
/* Los estilos del portal de clientes están en client-portal.css */
/* ============================================
ESTILOS PARA ANNOUNCEMENTS (Tech Dark Mode)
============================================ */
.announcement-single {
background-color: var(--gray-700);
border: 1px solid var(--gray-600);
border-radius: var(--border-radius-lg);
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.announcement-single:hover {
border-color: var(--primary-light);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
background-color: var(--gray-750);
}
.announcement-single .title {
color: var(--primary-light);
font-size: 1.75rem;
font-weight: 700;
text-decoration: none;
display: block;
margin-bottom: 1rem;
transition: var(--transition);
}
.announcement-single .title:hover {
color: var(--primary-color);
text-decoration: underline;
}
.announcement-single p {
color: var(--gray-100);
line-height: 1.7;
margin-bottom: 1.5rem;
font-size: 1rem;
}
.announcement-single .label.label-warning {
background-color: var(--accent-color);
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 600;
text-decoration: none;
display: inline-block;
margin-top: 0.5rem;
transition: var(--transition);
border: none;
}
.announcement-single .label.label-warning:hover {
background-color: var(--warning-color);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: var(--white);
}
.announcement-single .article-items {
color: var(--gray-300);
font-size: 0.9rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--gray-600);
display: flex;
align-items: center;
gap: 0.5rem;
}
.announcement-single .article-items i {
color: var(--primary-light);
margin-right: 0.25rem;
}
.announcement-single .article-items .admin-inline-edit {
color: var(--primary-light);
text-decoration: none;
margin-left: auto;
transition: var(--transition);
}
.announcement-single .article-items .admin-inline-edit:hover {
color: var(--primary-color);
text-decoration: underline;
}
.announcement-single .fb-like {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--gray-600);
}
.announcement-single .fb-like * {
color: var(--gray-100) !important;
}
.announcement-single .fb-like a,
.announcement-single .fb-like span,
.announcement-single .fb-like button,
.announcement-single .fb-like div {
color: var(--gray-100) !important;
opacity: 1 !important;
background-color: transparent !important;
}
.announcement-single .fb-like .fb_iframe_widget span {
color: var(--gray-100) !important;
}
.announcement-single .fb-like iframe {
filter: brightness(1.2) contrast(1.1);
}
/* Paginación de announcements */
.announcement-single + .col-md-6 {
margin-top: 2rem;
}
.col-md-6.col-md-offset-3 .form-inline {
display: flex;
justify-content: center;
margin-top: 2rem;
margin-bottom: 4rem;
}
.col-md-6.col-md-offset-3 .input-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.col-md-6.col-md-offset-3 .form-control {
background-color: var(--gray-800);
border: 1px solid var(--gray-700);
color: var(--gray-200);
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
text-align: center;
}
.col-md-6.col-md-offset-3 .btn-default {
background-color: var(--gray-700);
border: 1px solid var(--gray-600);
color: var(--gray-200);
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
transition: var(--transition);
text-decoration: none;
}
.col-md-6.col-md-offset-3 .btn-default:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Responsive para announcements */
@media (max-width: 768px) {
.announcement-single {
padding: 1.5rem;
}
.announcement-single .title {
font-size: 1.5rem;
}
.col-md-6.col-md-offset-3 {
margin-left: 0;
width: 100%;
}
.col-md-6.col-md-offset-3 .input-group {
flex-direction: column;
width: 100%;
}
.col-md-6.col-md-offset-3 .input-group-btn {
width: 100%;
}
.col-md-6.col-md-offset-3 .btn-default {
width: 100%;
margin-bottom: 0.5rem;
}
}
/* ============================================
ESTILOS PARA SIDEBAR (Tech Dark Mode)
============================================ */
.sidebar {
margin-bottom: 2rem;
padding-right: 1rem;
}
/* Estilos para sidebar - solo cuando está presente */
.containerwhmcs {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Solo aplicar layout flex cuando hay sidebar */
.containerwhmcs:has(.sidebar) .row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.containerwhmcs:has(.sidebar) .sidebar {
order: 1;
padding: 0 15px;
}
.containerwhmcs:has(.sidebar) .main-content {
order: 2;
padding: 0 15px;
}
@media (min-width: 992px) {
.containerwhmcs:has(.sidebar) .sidebar {
order: 1;
flex: 0 0 25%;
max-width: 25%;
}
.containerwhmcs:has(.sidebar) .main-content {
order: 2;
flex: 0 0 75%;
max-width: 75%;
}
}
@media (max-width: 991px) {
.containerwhmcs:has(.sidebar) .sidebar,
.containerwhmcs:has(.sidebar) .main-content {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Fallback para navegadores que no soportan :has() */
@supports not selector(:has(*)) {
.containerwhmcs .row.has-sidebar {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.containerwhmcs .row.has-sidebar .sidebar {
order: 1;
padding: 0 15px;
}
.containerwhmcs .row.has-sidebar .main-content {
order: 2;
padding: 0 15px;
}
}
.panel-sidebar {
background-color: var(--gray-800);
border: 1px solid var(--gray-700);
border-radius: var(--border-radius-lg);
margin-bottom: 1.5rem;
box-shadow: var(--shadow-md);
}
.panel-sidebar .panel-heading {
background-color: var(--gray-700);
border-bottom: 1px solid var(--gray-600);
padding: 1rem 1.25rem;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.panel-sidebar .panel-title {
color: var(--white);
font-size: 1.1rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-sidebar .panel-title i {
color: var(--primary-light);
margin-right: 0.5rem;
}
.panel-sidebar .panel-minimise {
color: var(--gray-400);
cursor: pointer;
transition: var(--transition);
}
.panel-sidebar .panel-minimise:hover {
color: var(--primary-light);
}
.panel-sidebar .panel-body {
padding: 1rem 1.25rem;
color: var(--gray-200);
}
.panel-sidebar .list-group {
margin: 0;
border-radius: 0;
}
.panel-sidebar .list-group-item {
background-color: transparent;
border: none;
border-bottom: 1px solid var(--gray-700);
color: var(--gray-200);
padding: 0.875rem 1.25rem;
transition: var(--transition);
text-decoration: none;
}
.panel-sidebar .list-group-item:first-child {
border-top: none;
}
.panel-sidebar .list-group-item:last-child {
border-bottom: none;
}
.panel-sidebar .list-group-item:hover {
background-color: var(--gray-700);
color: var(--primary-light);
padding-left: 1.5rem;
}
.panel-sidebar .list-group-item.active {
background-color: var(--primary-color);
color: var(--white);
font-weight: 600;
}
.panel-sidebar .list-group-item.active:hover {
background-color: var(--primary-dark);
padding-left: 1.25rem;
}
.panel-sidebar .list-group-item i {
color: var(--primary-light);
margin-right: 0.5rem;
width: 1.2rem;
text-align: center;
}
.panel-sidebar .list-group-item.active i {
color: var(--white);
}
.panel-sidebar .list-group-item .badge {
background-color: var(--gray-600);
color: var(--white);
float: right;
}
.panel-sidebar .list-group-item.active .badge {
background-color: rgba(255, 255, 255, 0.3);
}
.panel-sidebar .panel-footer {
background-color: var(--gray-700);
border-top: 1px solid var(--gray-600);
padding: 1rem 1.25rem;
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
color: var(--gray-200);
}
/* Responsive para sidebar */
@media (max-width: 768px) {
.sidebar {
margin-bottom: 2rem;
}
.panel-sidebar {
margin-bottom: 1rem;
}
}
/* ==========================================================================
FIX FINAL: SUPERPOSICIÓN DE MENÚ Y Z-INDEX
========================================================================== */
/* 1. ROMPER EL AISLAMIENTO (CRUCIAL) */
/* Esto permite que el menú "salga" de la caja del header y flote sobre el banner azul */
.header-main,
.header-content,
.nav-main,
.container {
overflow: visible !important;
isolation: auto !important; /* Anula el 'isolate' que causa el corte */
transform: none !important; /* Anula transformaciones que crean nuevos contextos */
}
/* 2. JERARQUÍA DE CAPAS (Z-INDEX) */
/* Header en la cima */
.header-main {
position: sticky !important;
top: 0;
z-index: 9998 !important;
background: var(--white);
}
/* Menú desplegable por encima del header */
.nav-dropdown-menu {
z-index: 9999 !important;
}
/* Empujar el contenido hacia atrás */
.hero-carousel,
.domain-search-hero,
.page-hero,
.section,
#main-body {
position: relative !important;
z-index: 1 !important; /* Nivel bajo */
}
/* Excepción para el buscador de dominios (para que funcione el click) */
.domain-search-box-enhanced {
position: relative;
z-index: 5 !important;
}
/* 3. AJUSTE VISUAL DESKTOP (> 992px) - TÉCNICA STELLAR EXACTA */
@media (min-width: 992px) {
.nav-dropdown {
position: relative !important;
}
.nav-dropdown-menu {
position: absolute !important;
top: 100% !important;
left: -999em !important; /* OCULTO: Fuera de la pantalla (técnica Stellar) */
display: block !important;
/* Estética */
background-color: #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
border-radius: 0 0 8px 8px;
border: 1px solid rgba(0,0,0,0.05);
min-width: 240px;
z-index: 9999 !important;
}
/* Mostrar al pasar el mouse (Hover CSS puro - técnica Stellar EXACTA) */
.nav-dropdown:hover .nav-dropdown-menu {
left: 0 !important; /* VISIBLE: Cambia de -999em a 0px */
}
/* Ajuste para dropdowns del lado derecho (como Stellar menuright) */
.nav-dropdown:last-child:hover .nav-dropdown-menu,
.nav-dropdown:nth-last-child(2):hover .nav-dropdown-menu {
left: auto !important;
right: 0 !important;
}
}
/* 4. AJUSTE VISUAL MÓVIL (< 991px) */
@media (max-width: 991px) {
.nav-main {
/* Configuración del panel lateral */
position: fixed !important;
top: 0 !important;
left: -100% !important; /* Oculto a la izquierda */
width: 85% !important;
max-width: 320px !important;
height: 100vh !important;
z-index: 99999 !important;
background: #ffffff !important;
transition: left 0.3s ease !important;
display: block !important;
overflow-y: auto !important;
isolation: auto !important;
}
.nav-main.active {
left: 0 !important; /* Mostrar */
}
/* El submenú en móvil empuja el contenido (static), no flota */
.nav-dropdown-menu {
position: static !important;
float: none !important;
width: 100% !important;
box-shadow: none !important;
border: none !important;
display: none; /* Oculto por defecto */
left: auto !important; /* Resetear left para móvil */
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Mostrar cuando tiene la clase activa (vía JS) */
.nav-dropdown.active .nav-dropdown-menu {
display: block !important;
}
}
/* ======================================================
FIX VISUAL V2: LIMPIEZA TOTAL DE CABECERA
====================================================== */
/* 1. Ocultar el Título H1 por defecto (el texto negro) */
/* Esto elimina "WordPress Hosting Optimizado", "VPS", etc. */
body:not(.homepage) .main-content > h1,
body:not(.homepage) .header-lined {
display: none !important;
}
/* 2. Ocultar migas de pan (Breadcrumbs) si no lo hiciste antes */
body:not(.homepage) .breadcrumb {
display: none !important;
}
/* 3. Eliminar espacios y paddings para que el banner azul pegue arriba */
body:not(.homepage) #main-body {
padding-top: 0 !important;
margin-top: 0 !important;
}
body:not(.homepage) .main-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* OPCIONAL: Si aún queda una línea blanca delgada entre el menú y el banner */
body:not(.homepage) .header-main {
border-bottom: none !important;
}
/* ============================================
INPUT BUSCADOR DE DOMINIOS - ESTILO IGUAL A 'new'
Solo asegurar color y background, respetar padding y font-size del HTML
============================================ */
#domain-search.form-control,
input#domain-search {
color: #1f2937 !important;
background-color: #ffffff !important;
border-radius: var(--border-radius) !important;
height: auto !important;
line-height: 1.5 !important;
display: flex !important;
align-items: center !important;
}
#domain-search.form-control::placeholder,
input#domain-search::placeholder {
color: #9ca3af !important;
}
/* Botón del buscador de dominios - Estilo igual a 'new' */
button.btn-lg[onclick*="searchDomain"],
button.btn[onclick*="searchDomain"] {
height: auto !important;
line-height: 1.5 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
}