html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
header,
nav,
section,
article,
aside,
footer,
hgroup {
display: block;
}
* {
box-sizing: border-box;
}
html,
body {
font-family: 'Poppins', sans-serif;
font-weight: 400;
background-color: #2c2c2c;
font-size: 16px;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none !important;
color: #003366;
}
a:hover {
color: #FC3;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0px;
margin-bottom: 0px;
}
ul {
margin-bottom: 0px;
}
p {
font-size: 14px;
line-height: 25px;
color: #2a2a2a;
}
img {
width: 100%;
overflow: hidden;
}
/*
---------------------------------------------
global styles
---------------------------------------------
*/
* {
margin: 5;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
background: #fff;
scroll-behavior: smooth;
}
a {
text-decoration: none !important;
}
/* ===== HEADER + SUBHEADER ===== */
.sub-header {
background: #2777b9;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1111;
padding: 6px 0;
min-height: 38px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.language-selector a {
color: #fff;
font-size: 12px;
padding: 4px 8px;
transition: 0.2s;
}
.right-icons ul {
display: flex;
gap: 18px;
}
.right-icons ul li a {
color: #fff;
font-size: 16px;
transition: 0.2s;
}
.right-icons ul li a:hover {
color: #f5a425;
transform: translateY(-2px);
}
/* Header principal */
.header-area {
background: #c7260a; /* jess*/
position: fixed !important;
top: 38px;
left: 0;
width: 100%;
z-index: 1100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.header-area .main-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 40px;
}
.logo img {
height: 55px;
width: auto;
filter: brightness(0) invert(1);
}
/* Menú */
.main-nav .nav {
display: flex;
gap: 6px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
border-radius: 60px;
padding: 6px 18px;
margin: 0;
}
.main-nav .nav li a {
color: #fff !important;
font-size: 13px !important;
font-weight: 600;
padding: 8px 16px;
border-radius: 40px;
transition: 0.2s;
}
.main-nav .nav li a:hover,
.main-nav .nav li a.active {
background: #f5a425;
color: #0a2e4a !important;
}
/* Submenú ejecutivo */
.has-sub {
position: relative;
}
.sub-menu {
position: absolute;
top: 42px;
left: 0;
background: #03192a;
border-radius: 16px;
padding: 12px 0;
min-width: 310px;
opacity: 0;
visibility: hidden;
transition: 0.2s;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
z-index: 999;
}
/* Para el primer submenú (SERVICIOS) */
.has-sub:first-child .sub-menu {
min-width: 320px;
}
.has-sub:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 36px;
}
.sub-menu li a {
color: #1e293b !important;
padding: 10px 20px;
display: block;
font-size: 12px;
font-weight: 500;
border-left: 3px solid transparent;
}
.sub-menu li a:hover {
background: #f8fafc;
border-left-color: #f5a425;
color: #0a4d82 !important;
}
.header-area.header-sticky {
position: fixed !important;
top: 0 !important;
background: #0a4d82 !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
animation: slideDown 0.3s ease;
}
/* ===== AMBOS HEADERS SIEMPRE VISIBLES ===== */
.sub-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 9999 !important;
background: #2777b9 !important;
transition: all 0.3s ease;
}
.header-area {
position: fixed !important;
top: 38px !important;
left: 0 !important;
width: 100% !important;
z-index: 9998 !important;
background: #0a4d82 !important;
transition: all 0.3s ease;
}
/* Al hacer scroll, el header principal cambia de color o estilo si quieres */
.header-area.header-sticky {
background: #0a4d82 !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
top: 38px !important;
/* ← Se mantiene en la misma posición */
}
/* El sub-header NUNCA se oculta */
.sub-header {
display: block !important;
}
/* Espacio para que el contenido no quede debajo de los headers fijos */
body {
padding-top: 95px !important;
}
/* Ajuste para móviles */
@media (max-width: 768px) {
body {
padding-top: 80px !important;
}
}
/* ================== Fin header ================== */
.sub-menu li a:hover,
.sub-menu li a:focus,
.sub-menu li a:active {
background: transparent !important;
box-shadow: none !important;
opacity: 1 !important;
}
.sub-menu li a:hover i,
.sub-menu li a:focus i,
.sub-menu li a:active i {
color: #ffffff !important;
opacity: 1 !important;
}
/* ==============================================
BANNER - VIDEO + TARJETA CON DIFUMINADO SUAVE
============================================== */
.banner-split-container {
display: flex;
min-height: 85vh;
margin-top: 0;
align-items: stretch;
gap: 0px;
background: transparent !important;
position: relative;
}
/* VIDEO - Contenedor más grande (58%) */
.banner-video-wrapper {
flex: 0 0 58%;
position: relative;
overflow: hidden;
border-radius: 24px 0 0 24px;
min-height: 420px;
background: #000;
}
/* Degradado en el borde derecho del video */
.banner-video-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 100%;
background: linear-gradient(
to left,
rgba(30, 35, 50, 0.85) 0%,
rgba(30, 35, 50, 0.5) 25%,
rgba(30, 35, 50, 0.15) 50%,
transparent 100%
);
backdrop-filter: blur(12px);
pointer-events: none;
z-index: 2;
}
/* CAPA DE FONDO DETRÁS DE LA TARJETA - CON DEGRADADO TRANSPARENTE */
.banner-card-wrapper::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(60, 65, 75, 0.3) 0%,
rgba(40, 45, 55, 0.2) 50%,
rgba(30, 35, 45, 0.15) 100%
);
backdrop-filter: blur(12px);
border-radius: 32px;
z-index: -1;
pointer-events: none;
}
/* TARJETA INTERNA - TRANSPARENTE */
.welcome-card-modern {
background: rgba(180, 180, 190, 0.25);
backdrop-filter: blur(16px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
width: 90% !important; /* Reduce el ancho */
max-width: 600px !important; /* Ancho máximo más pequeño */
padding: 16px !important; /* Reduce el padding interno */
margin: 10px auto !important; /* Centra y reduce margen */
}
/* CONTENEDOR DE LA TARJETA - Altura reducida */
.banner-card-wrapper {
flex: 0 0 42%;
background: transparent !important;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
min-height: 420px;
position: relative;
z-index: 10;
}
/* CSS */
.tarjeta-bienvenida i,
.welcome-card i,
.card-bienvenida i {
font-size: 5px !important;
/* o usa: transform: scale(0.8); */
}
#bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* CAPA DE FONDO TRANSPARENTE - MÁS GRANDE SIN MOVERSE */
.banner-card-wrapper::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(60, 60, 70, 0.25) 0%, rgba(30, 30, 40, 0.1) 100%);
backdrop-filter: blur(15px);
border-radius: 32px;
z-index: -1;
pointer-events: none;
}
/* TARJETA INTERNA - También reducimos el padding para que sea más compacta */
.welcome-card-modern {
background: rgba(200, 200, 210, 0.25);
backdrop-filter: blur(16px);
border-radius: 28px;
padding: 18px 26px; /* Reducido de 32px 38px */
border: 1px solid rgba(255, 255, 255, 0.2);
width: 100%;
max-width: 580px;
margin: 0 auto;
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.welcome-card-modern h3 {
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
text-align: center;
position: relative;
}
.welcome-card-modern h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #4DB8FF;
border-radius: 3px;
}
.welcome-card-modern p {
font-size: 0.85rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.9);
margin: 22px 0 20px;
text-align: justify;
}
.welcome-card-modern:hover {
background: rgba(80, 80, 90, 0.5); /* Un poco más opaco al hacer hover */
border-color: rgba(77, 184, 255, 0.3);
}
/* ==============================================
AJUSTES: ICONOS DERECHITOS - 3 ARRIBA Y 3 ABAJO
============================================== */
/* Forzar el contenedor principal al lateral */
.tech-stack-container {
margin: 6px 10px !important;
padding-left: 0 !important;
margin-left: -10px !important; /* Mueve más a la izquierda */
}
/* Forzar grid al lateral izquierdo */
.tech-stack-grid {
display: grid !important;
grid-template-columns: repeat(3, auto) !important; /* Columnas automáticas */
gap: 15px !important;
justify-content: center !important; /* Fuerza al inicio izquierdo */
text-align: left !important;
}
/* Iconos más compactos */
.tech-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 5px 8px !important;
min-width: 80px !important;
}
.tech-item:hover {
transform: none !important;
background: transparent !important;
}
.tech-item:hover i {
color: #4DB8FF !important;
transform: none !important;
}
/* Alinear iconos derechitos - todos con misma altura */
.tech-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Centra el contenido interno */
justify-content: flex-start !important;
min-height: 100px !important;
}
.tech-item i {
font-size: 2rem !important;
color: #4DB8FF !important;
margin-bottom: 12px !important;
line-height: 1 !important;
height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.tech-item span {
font-size: 0.8rem !important;
color: rgba(255, 255, 255, 0.85) !important;
line-height: 1.3 !important;
text-align: center !important;
display: block !important;
}
/* Botón */
.btn-modern-red {
background: linear-gradient(135deg, #0D66AB, #084d82);
color: #ffffff;
padding: 8px 22px;
border-radius: 40px;
font-weight: 700;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
border: none;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-modern-red {
background: rgba(13, 102, 171, 0.75); /* Azul transparente como en la imagen */
backdrop-filter: blur(10px); /* Difuminado del fondo */
color: #ffffff;
padding: 12px 32px;
border-radius: 50px;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-modern-red i {
font-size: 0.9rem;
}
.btn-modern-red:hover {
background: rgba(58, 147, 214, 0.9);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
.btn-modern-red:hover {
background: linear-gradient(135deg, #2e97cf, #0D66AB);
transform: translateY(-2px);
}
.button-wrapper {
text-align: center;
margin-top: 5px;
}
/* RESPONSIVE */
@media (max-width: 992px) {
.banner-split-container {
flex-direction: column;
}
.banner-video-wrapper {
flex: 100%;
border-radius: 24px 24px 0 0;
min-height: 350px;
}
.banner-video-wrapper::before {
display: none;
}
.banner-card-wrapper {
flex: 100%;
padding: 30px 20px;
}
.welcome-card-modern {
max-width: 95%;
}
}
@media (max-width: 768px) {
.welcome-card-modern h3 {
font-size: 1.3rem;
}
.welcome-card-modern p {
font-size: 0.7rem;
}
}
/* CSS que fuerza la alineación vertical */
.contenedor-iconos,
.fila-icono,
.item-icono {
display: flex;
align-items: center !important;
flex-wrap: wrap;
}
.icono {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
}
.icono i,
.icono svg {
display: block !important;
line-height: 1 !important;
}
.texto-icono {
display: inline-block !important;
vertical-align: middle !important;
line-height: 1.2 !important;
}
/* ==============================================
TÍTULO DE SERVICIOS - MISMO ESTILO QUE VALORES
============================================== */
.services-header-wrapper {
text-align: center;
margin-bottom: 40px;
margin-top: 20px;
}
.services-title-modern {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 0;
}
/* Responsive para el título */
@media (max-width: 768px) {
.services-title-modern {
font-size: 0.9rem;
padding: 8px 20px;
letter-spacing: 2px;
}
}
@media (max-width: 576px) {
.services-title-modern {
font-size: 0.8rem;
padding: 6px 16px;
letter-spacing: 1.5px;
}
}
/* ===== TARJETAS MODERNAS ===== */
.service-card-modern {
background: linear-gradient(to top,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.08) 50%,
transparent 100%);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.15);
transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
border: 1px solid rgba(13, 102, 171, 0.2);
/* ← MARCO LIGERO */
}
.service-card-modern:hover {
transform: translateY(-10px);
box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(13, 102, 171, 0.5);
/* ← MARCO MÁS VISIBLE AL HOVER */
}
/* ===== WRAPPER DE IMAGEN ===== */
.service-img-wrapper {
width: 100%;
height: 250px;
/* ← MISMA ALTURA PARA TODAS */
overflow: hidden;
position: relative;
background-color: #0a2e4a;
border-radius: 20px 20px 0 0;
/* ← BORDES REDONDEADOS ARRIBA */
}
.service-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
/* ← IMAGEN CUBRE SIN DISTORSIÓN */
object-position: center;
transition: transform 0.6s ease;
display: block;
}
.service-card-modern:hover .service-img-wrapper img {
transform: scale(1.05);
}
/* Overlay sutil sobre la imagen */
.service-img-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.15) 0%, rgba(0, 0, 0, 0.1) 100%);
pointer-events: none;
z-index: 1;
}
/* ===== WRAPPER DE TEXTO ===== */
.service-text-wrapper {
padding: 28px 24px 32px 24px;
/* Opción A3: Azul Cielo */
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15), transparent);
position: relative;
flex: 1;
display: flex;
flex-direction: column;
border-top: none;
}
/* Línea decorativa superior */
.service-text-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 3px;
background: linear-gradient(90deg, #0D66AB, #BC1722, #0D66AB);
background-size: 200% 100%;
border-radius: 3px;
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: center;
}
.service-card-modern:hover .service-text-wrapper::before {
transform: scaleX(1);
}
/* ===== ICONOS - MÁS GRANDES ===== */
.service-text-wrapper .icon {
margin-bottom: 18px;
}
/* ==============================================
FORZAR SUBIR TÍTULO "CONOCE MÁS SOBRE NOSOTROS"
============================================== */
/* Forzar el contenedor del título */
.services-header-wrapper {
margin-top: -80px !important;
margin-bottom: 30px !important;
position: relative !important;
z-index: 20 !important;
}
/* Forzar la sección completa de servicios */
.services {
margin-top: -150px !important;
padding-top: 0 !important;
position: relative !important;
}
/* Forzar el título específicamente */
.services-title-modern {
position: relative !important;
top: -20px !important; /* Ajusta este valor para subir más o menos */
}
/* Si el título tiene un contenedor padre */
.services .container {
margin-top: -50px !important;
}
/* Para pantallas más pequeñas */
@media (max-width: 992px) {
.services-header-wrapper {
margin-top: -50px !important;
}
.services-title-modern {
top: -40px !important;
}
}
@media (max-width: 768px) {
.services-header-wrapper {
margin-top: -30px !important;
}
.services-title-modern {
top: -25px !important;
}
}
.service-text-wrapper .icon i {
font-size: 40px;
/* ← ICONOS MÁS GRANDES */
background: linear-gradient(135deg, #0D66AB, #2192D1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: all 0.3s ease;
}
.service-card-modern:hover .icon i {
background: linear-gradient(135deg, #BC1722, #f5a425);
-webkit-background-clip: text;
background-clip: text;
transform: scale(1.02);
}
/* ===== TÍTULO DEL SERVICIO ===== */
.service-text-wrapper h4 {
font-size: 1.6rem;
font-weight: 700;
color: #0D66AB;
margin-bottom: 16px;
letter-spacing: -0.3px;
position: relative;
display: inline-block;
width: fit-content;
}
/* Línea bajo el título */
.service-text-wrapper h4::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 40px;
height: 3px;
background: #BC1722;
border-radius: 3px;
transition: width 0.3s ease;
}
.service-card-modern:hover .service-text-wrapper h4::after {
width: 70px;
}
/* ===== DESCRIPCIÓN ===== */
.service-text-wrapper p {
font-size: 0.9rem;
line-height: 1.6;
color: #ffffff !important;
margin-bottom: 0;
text-align: justify;
flex: 1;
}
/* ===== CARRUSEL ===== */
.owl-service-item .owl-stage {
display: flex;
align-items: stretch;
}
.owl-service-item .owl-item {
height: auto !important;
display: flex;
}
.owl-service-item .item {
height: 100%;
display: flex;
}
/* Flechas de navegación */
.owl-service-item .owl-nav button {
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
width: 44px;
height: 44px;
border-radius: 50% !important;
color: #0D66AB !important;
font-size: 24px !important;
transition: all 0.2s;
}
.owl-service-item .owl-nav button:hover {
background: #0D66AB !important;
color: #ffffff !important;
transform: scale(1.08);
}
/* Puntos (dots) */
.owl-service-item .owl-dot span {
width: 10px;
height: 10px;
background: #cbd5e1;
transition: all 0.2s;
}
.owl-service-item .owl-dot.active span {
background: #0D66AB;
transform: scale(1.2);
width: 28px;
border-radius: 6px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.services {
margin-top: -60px;
}
}
@media (max-width: 768px) {
.services {
margin-top: -40px;
}
.services-title-wrapper {
margin-bottom: 30px;
margin-top: 10px;
}
.services-main-title {
font-size: 1.5rem;
}
.services-badge {
font-size: 0.7rem;
}
.service-img-wrapper {
height: 200px;
border-radius: 16px 16px 0 0;
}
.service-text-wrapper {
padding: 22px 18px 28px 18px;
}
.service-text-wrapper .icon i {
font-size: 50px;
}
.service-text-wrapper h4 {
font-size: 1.3rem;
}
}
@media (max-width: 576px) {
.services {
margin-top: -20px;
}
.services-main-title {
font-size: 1.2rem;
}
.services-badge {
font-size: 0.65rem;
}
.services-divider {
width: 50px;
}
.service-img-wrapper {
height: 180px;
border-radius: 14px 14px 0 0;
}
.service-text-wrapper {
padding: 18px 16px 24px 16px;
}
.service-text-wrapper .icon i {
font-size: 44px;
}
.service-text-wrapper h4 {
font-size: 1.2rem;
}
.service-text-wrapper p {
font-size: 0.8rem;
}
}
/* ==============================================
NAVEGACIÓN EN CARRUSEL DE INSTALACIONES
============================================== */
.apply-now .owl-courses-item {
width: 115% !important;
/* 15% más ancho que el padre */
margin-left: -7.5% !important;
/* Centrar el excedente */
padding: 0 !important;
overflow: visible !important;
}
/* Para que no se corte el desbordamiento */
.apply-now .owl-carousel {
overflow: visible !important;
}
/* Cada slide: sin padding lateral excesivo */
.apply-now .owl-courses-item .item {
padding: 0 8px;
background: transparent !important;
}
/* Imágenes: tamaño grande y nítidas */
.apply-now .owl-courses-item .item img {
width: 100%;
height: auto;
min-height: 450px;
/* Agranda altura */
max-height: 600px;
object-fit: cover;
/* Recorta suavemente para llenar */
object-position: center;
border-radius: 16px;
/* Mejora el suavizado y nitidez al reescalar */
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
image-rendering: smooth;
-ms-interpolation-mode: bicubic;
transition: transform 0.3s;
}
.apply-now .owl-courses-item .item img:hover {
transform: scale(1.02);
}
/* ===== BOTONES EXACTAMENTE IGUALES QUE EL CARRUSEL DE CLIENTES ===== */
/* Flechas laterales */
.apply-now .owl-courses-item .owl-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.6) !important;
color: #fff !important;
font-size: 28px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: 0.3s;
z-index: 10;
}
.apply-now .owl-courses-item .owl-nav button.owl-prev {
left: -25px;
/* Posición izquierda */
}
.apply-now .owl-courses-item .owl-nav button.owl-next {
right: -25px;
/* Posición derecha */
}
.apply-now .owl-courses-item .owl-nav button:hover {
background: #0066FF !important;
transform: translateY(-50%) scale(1.05);
}
/* Puntos inferiores (dots) */
.apply-now .owl-courses-item .owl-dots {
text-align: center;
margin-top: 25px;
}
.apply-now .owl-courses-item .owl-dot span {
width: 12px;
height: 12px;
margin: 0 5px;
background: #ccc;
border-radius: 50%;
display: inline-block;
transition: 0.3s;
}
.apply-now .owl-courses-item .owl-dot.active span {
background: #0066FF;
transform: scale(1.2);
}
/* ===== FIJAR REDES SOCIALES A LA DERECHA EN CUALQUIER TAMAÑO ===== */
/* Pantallas grandes (más de 1200px) */
@media (min-width: 1200px) {
.sub-header .container {
max-width: 1200px;
}
.sub-header .right-icons {
margin-left: auto;
right: 0;
}
}
/* Pantallas medianas (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
.sub-header .right-icons {
margin-left: auto;
}
}
/* Pantallas tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.sub-header .right-icons {
margin-left: auto;
}
.sub-header .right-icons ul li {
margin-left: 10px;
}
}
/* Pantallas móviles (menos de 767px) */
@media (max-width: 767px) {
.sub-header .row {
flex-direction: column;
text-align: center;
}
.sub-header .left-content {
text-align: center;
margin-bottom: 5px;
margin-left: 0;
/* ← Mantiene tu ajuste */
}
.sub-header .right-icons {
text-align: center;
margin-left: 0;
margin-right: 0;
/* ← Mantiene tu ajuste */
}
.sub-header .right-icons ul {
justify-content: center;
}
}
/*redes sociales - jess*/
/* ============================================ */
/* REDES SOCIALES - HOVER CON COLOR */
/* ============================================ */
/* Estilo base de los botones */
.team-social-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 45px !important;
height: 45px !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 50% !important;
color: white !important;
font-size: 1.2rem !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
/* Efecto hover para TODOS los botones */
.team-social-icon:hover {
transform: translateY(-5px) !important;
}
/* Facebook */
.team-social-icon:hover .fa-facebook-f {
color: #1877f2 !important;
}
.team-social-icon:hover:has(.fa-facebook-f) {
background: rgba(24, 119, 242, 0.2) !important;
box-shadow: 0 5px 15px rgba(24, 119, 242, 0.3) !important;
}
/* X (Twitter) */
.team-social-icon:hover .fa-x-twitter {
color: #ffffff !important;
}
.team-social-icon:hover:has(.fa-x-twitter) {
background: #000000 !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}
/* Instagram */
.team-social-icon:hover .fa-instagram {
color: #e4405f !important;
}
.team-social-icon:hover:has(.fa-instagram) {
background: rgba(228, 64, 95, 0.2) !important;
box-shadow: 0 5px 15px rgba(228, 64, 95, 0.3) !important;
}
/* LinkedIn */
.team-social-icon:hover .fa-linkedin-in {
color: #0077b5 !important;
}
.team-social-icon:hover:has(.fa-linkedin-in) {
background: rgba(0, 119, 181, 0.2) !important;
box-shadow: 0 5px 15px rgba(0, 119, 181, 0.3) !important;
}
/* YouTube */
.team-social-icon:hover .fa-youtube {
color: #ff0000 !important;
}
.team-social-icon:hover:has(.fa-youtube) {
background: rgba(255, 0, 0, 0.2) !important;
box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3) !important;
}
/* WhatsApp hover effect */
.team-social-icon[href*="wa.me"]:hover,
.team-social-icon[href*="whatsapp"]:hover {
background: #128C7E !important;
transform: translateY(-5px) !important;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4) !important;
}
/*redes sociales - jess*/
/* ===== DEL CARRUSEL DE INSTALACIONES ===== */
.apply-now .instalaciones-wrapper {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
.apply-now .owl-courses-item {
background: transparent !important;
margin-top: -10px !important;
}
.apply-now .owl-courses-item .item {
background: transparent !important;
}
.apply-now .item {
background: transparent !important;
box-shadow: none !important;
}
/* Eliminar cualquier fondo blanco en la sección apply-now */
section.apply-now .container {
background: transparent !important;
}
section.apply-now .row {
background: transparent !important;
}
section.apply-now [class*="col-"] {
background: transparent !important;
}
.instalaciones-header {
text-align: center;
margin-bottom: 10px !important;
padding: 50px;
margin-top: 80px;
}
/* ==============================================
TÍTULO PARA CARRUSEL DE INSTALACIONES
TEXTO MÁS GRANDE, NEGRITAS, COLOR MÁS FUERTE
============================================== */
.instalaciones-header {
text-align: center;
margin-bottom: 50px;
padding: 0 20px;
}
.instalaciones-badge {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
margin: 0 auto;
margin-bottom: 60px;
}
.instalaciones-title {
font-size: 2.8rem;
font-weight: 800;
color: #1a1a1a;
/* ← NEGRO (antes #ffffff) */
margin-bottom: 100px;
}
.instalaciones-title .highlight {
color: #BC1722;
/* ← ROJO para destacar (puede ser #0D66AB si prefieres azul) */
position: relative;
display: inline-block;
}
.instalaciones-subtitle {
font-size: 1.3rem;
font-weight: 700;
color: #ffffff !important;
/* ← NEGRO (antes #ffffff) */
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
font-style: normal;
text-shadow: none;
/* ← QUITAR SOMBRA */
}
.instalaciones-title .highlight::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 4px;
background: #f5a425;
border-radius: 2px;
}
.instalaciones-divider {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #0D66AB, #f5a425, #BC1722);
margin: 0 auto 25px;
border-radius: 2px;
}
/* Responsive */
@media (max-width: 768px) {
.instalaciones-title {
font-size: 2rem;
}
.instalaciones-subtitle {
font-size: 1.1rem;
font-weight: 600;
padding: 0 15px;
}
.instalaciones-badge {
font-size: 0.8rem;
padding: 6px 20px;
}
}
@media (max-width: 576px) {
.instalaciones-title {
font-size: 1.6rem;
}
.instalaciones-subtitle {
font-size: 1rem;
font-weight: 600;
}
.instalaciones-divider {
width: 60px;
}
}
/* Responsive */
@media (max-width: 768px) {
.instalaciones-title {
font-size: 1.6rem;
}
.instalaciones-subtitle {
font-size: 0.95rem;
padding: 0 15px;
}
.instalaciones-badge {
font-size: 0.7rem;
}
}
@media (max-width: 576px) {
.instalaciones-title {
font-size: 1.3rem;
}
.instalaciones-subtitle {
font-size: 0.85rem;
}
}
/* Cada tarjeta (actividad) más grande */
.card-actividad {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: 32px;
padding: 2rem 1.5rem;
/* Más padding interior */
text-align: center;
transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
border: 1px solid rgba(255, 255, 255, 0.25);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.card-actividad:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 25px 35px rgba(0, 0, 0, 0.35);
border-color: rgba(255, 255, 255, 0.6);
}
/* IMAGEN más grande dentro de la tarjeta */
.img-actividad {
width: 100%;
max-width: 220px;
/* Aumentado */
height: 190px;
/* Más alto */
object-fit: cover;
border-radius: 28px;
margin-bottom: 1.5rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
transition: transform 0.2s;
}
.card-actividad:hover .img-actividad {
transform: scale(1.02);
}
/* Título más grande */
.titulo-actividad {
font-size: 1.3rem;
/* Antes 1.1rem */
font-weight: 700;
color: #ffffff;
margin: 0.5rem 0 0;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
letter-spacing: 0.5px;
}
/* Texto resumen más grande */
.resumen-actividades {
font-size: 1.2rem;
color: #ffffff;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.85), rgba(33, 146, 209, 0.85));
display: inline-block;
padding: 12px 30px;
border-radius: 40px;
margin-bottom: 20px;
font-weight: 600;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
}
/* Responsive para tablet/móvil: se reduce ligeramente pero sigue siendo grande */
@media (max-width: 992px) {
.actividades-grid {
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.actividades-empresariales-wrapper {
padding: 35px 25px;
margin: 40px 0 30px;
}
.img-actividad {
max-width: 180px;
height: 160px;
}
.titulo-actividad {
font-size: 1.1rem;
}
.resumen-actividades {
font-size: 1.3rem;
padding: 12px 30px;
}
}
@media (max-width: 576px) {
.actividades-grid {
gap: 1.2rem;
grid-template-columns: 1fr;
/* En móvil una columna, más grande */
}
.card-actividad {
padding: 1.8rem;
}
.img-actividad {
max-width: 200px;
height: 170px;
}
.resumen-actividades {
font-size: 1.1rem;
padding: 10px 20px;
}
}
/* ==============================================
FORZAR MISMO TAMAÑO EN IMÁGENES DE CARRUSELES
CON RADIO LIGERO
============================================== */
/* === CARRUSEL DE INSTALACIONES === */
.apply-now .owl-courses-item .item img {
width: 100% !important;
height: 320px !important;
/* ← MISMA ALTURA PARA TODAS */
object-fit: cover !important;
/* ← MANTIENE PROPORCIÓN SIN DEFORMAR */
object-position: center !important;
border-radius: 16px !important;
/* ← RADIO LIGERO */
display: block;
}
/* === CARRUSEL DE CLIENTES (logos) === */
.our-courses .owl-courses-item .item img {
width: 100% !important;
height: 160px !important;
/* ← MISMA ALTURA PARA TODOS LOS LOGOS */
object-fit: contain !important;
/* ← PARA QUE EL LOGO NO SE CORTE */
object-position: center !important;
border-radius: 12px !important;
/* ← RADIO LIGERO */
background: linear-gradient(135deg, rgba(79, 148, 206, 0.481), rgb(189, 189, 189)) !important;
padding: 10px;
}
/* === CARRUSEL DE ACTIVIDADES === */
.owl-courses-item .card-actividad .img-actividad {
width: 100% !important;
height: 240px !important;
/* ← MISMA ALTURA PARA TODAS */
object-fit: cover !important;
object-position: center !important;
border-radius: 16px 16px 0 0 !important;
/* ← RADIO SOLO ARRIBA */
}
/* === CARRUSEL DE SERVICIOS (Misión/Visión/Nosotros) === */
.owl-service-item .service-img-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* === RADIO LIGERO PARA TODAS LAS TARJETAS === */
.service-card-modern,
.premium-card,
.card-actividad,
.apply-now .owl-courses-item .item {
border-radius: 20px !important;
overflow: hidden;
}
/* ==============================================
RESPONSIVE - AJUSTE EN PANTALLAS PEQUEÑAS
============================================== */
@media (max-width: 768px) {
.apply-now .owl-courses-item .item img {
height: 250px !important;
border-radius: 12px !important;
}
.our-courses .owl-courses-item .item img {
height: 130px !important;
}
.owl-courses-item .card-actividad .img-actividad {
height: 200px !important;
}
}
@media (max-width: 576px) {
.apply-now .owl-courses-item .item img {
height: 200px !important;
border-radius: 10px !important;
}
.our-courses .owl-courses-item .item img {
height: 100px !important;
}
.owl-courses-item .card-actividad .img-actividad {
height: 180px !important;
}
}
/* ==============================================
FORZAR MISMO TAMAÑO EN IMÁGENES DE CARRUSELES
CON RADIO LIGERO
============================================== */
/* === CARRUSEL DE INSTALACIONES === */
.apply-now .owl-courses-item .item img {
width: 100% !important;
height: 320px !important;
/* ← MISMA ALTURA PARA TODAS */
object-fit: cover !important;
/* ← MANTIENE PROPORCIÓN SIN DEFORMAR */
object-position: center !important;
border-radius: 16px !important;
/* ← RADIO LIGERO */
display: block;
}
/* === CARRUSEL DE CLIENTES (logos) === */
.our-courses .owl-courses-item .item img {
width: 100% !important;
height: 160px !important;
/* ← MISMA ALTURA PARA TODOS LOS LOGOS */
object-fit: contain !important;
/* ← PARA QUE EL LOGO NO SE CORTE */
object-position: center !important;
border-radius: 12px !important;
/* ← RADIO LIGERO */
background-color: #ffffff;
padding: 10px;
}
/* === CARRUSEL DE ACTIVIDADES === */
.owl-courses-item .card-actividad .img-actividad {
width: 100% !important;
height: 240px !important;
/* ← MISMA ALTURA PARA TODAS */
object-fit: cover !important;
object-position: center !important;
border-radius: 16px 16px 0 0 !important;
/* ← RADIO SOLO ARRIBA */
}
/* === CARRUSEL DE SERVICIOS (Misión/Visión/Nosotros) === */
.owl-service-item .service-img-wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* === RADIO LIGERO PARA TODAS LAS TARJETAS === */
.service-card-modern,
.premium-card,
.card-actividad,
.apply-now .owl-courses-item .item {
border-radius: 20px !important;
overflow: hidden;
}
/* ==============================================
RESPONSIVE - AJUSTE EN PANTALLAS PEQUEÑAS
============================================== */
@media (max-width: 768px) {
.apply-now .owl-courses-item .item img {
height: 250px !important;
border-radius: 12px !important;
}
.our-courses .owl-courses-item .item img {
height: 130px !important;
}
.owl-courses-item .card-actividad .img-actividad {
height: 200px !important;
}
}
@media (max-width: 576px) {
.apply-now .owl-courses-item .item img {
height: 200px !important;
border-radius: 10px !important;
}
.our-courses .owl-courses-item .item img {
height: 100px !important;
}
.owl-courses-item .card-actividad .img-actividad {
height: 180px !important;
}
}
/* ===== INICIO - LETRA BLANCA ===== */
.header-area .main-nav .nav li a,
.header-area .main-nav .nav li a.active {
color: #ffffff !important;
}
/* Fuerza TODOS los enlaces del menú a blanco cuando hay scroll */
.background-header .main-nav .nav li a,
.background-header .main-nav .nav li a.active {
color: #ffffff !important;
}
/* Enlace activo en estado normal (sin scroll) - blanco */
.header-area .main-nav .nav li a.active {
color: #ffffff !important;
}
/* Enlace activo cuando el header es fijo (scroll) - color que contraste con fondo blanco */
.background-header .main-nav .nav li a.active {
color: #ffffff !important;
/* ← Azul institucional para el enlace activo */
}
/*h Fuerza las flechas del submenú a blanco en ambos estados */
.header-area .main-nav .nav li.has-sub:after,
.background-header .main-nav .nav li.has-sub:after {
color: #ffffff !important;
right: -6px !important;
/* ← Aumentado de -5px a -15px para separar más */
font-size: 14px !important;
font-weight: bold !important;
position: absolute;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Flechas del submenú cuando el header es fijo - oscuras y más grandes */
.background-header .main-nav .nav li.has-sub:after {
color: #ffffff !important;
font-size: 15px !important;
font-weight: bold !important;
position: absolute;
right: -7x !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Fuerza el hover a naranja (opcional) */
.header-area .main-nav .nav li:hover a {
color: #e8e9eb !important; /*jess color sub menu*/
/* Solo cambia el color */
background-color: visible;
/* Sin fondo */
opacity: 1 !important;
/* Asegura que no desaparezca */
}
.background-header .logo img,
.header-sticky .logo img {
filter: brightness(0) invert(1);
/* Mantiene el logo blanco */
}
/* Pantallas muy grandes - sin límite de ancho para que los iconos lleguen a la derecha */
@media (max-width: 1200px) {
.header-area .main-nav .nav {
right: -20px;
}
}
@media (max-width: 992px) {
.header-area .main-nav .nav {
right: 0px;
}
}
/* Bloque de bienvenida*/
.welcome-card {
background: #ffffff;
border-radius: 10px;
padding: 25px 35px !important;
/* Muy poco padding */
margin: 0 !important;
border: none;
box-shadow: none;
display: inline-block;
width: auto;
}
.welcome-card h6 {
font-size: 18px !important;
/* Forzado */
color: #666666;
line-height: 1.3;
margin-bottom: 8px !important;
}
.welcome-card h2 {
font-size: 32px !important;
color: #040505;
line-height: 1.2;
margin: 12px 0 !important;
padding: 0 !important;
font-weight: 700 !important;
}
.welcome-card p {
font-size: 18px !important;
color: #333333;
line-height: 1.5;
text-align: justify;
margin-bottom: 20px !important;
}
.welcome-card .main-button-red {
margin: 0 !important;
padding: 0 !important;
}
.welcome-card h6 {
font-size: 9px;
color: #666666;
line-height: 1;
}
.welcome-card h2 {
font-size: 14px;
color: #0d66ab;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
}
.welcome-card p {
font-size: 9px;
color: #333333;
line-height: 1;
text-align: justify;
}
.welcome-card .main-button-red a {
font-size: 14px !important;
padding: 10px 25px !important;
background-color: #bc1722;
color: #ffffff;
display: inline-block;
margin-top: 2px;
border-radius: 25px 15px;
}
/* Posición abajo a la derecha */
.main-banner .caption {
position: absolute;
top: 210%;
right: 3%;
left: auto;
transform: translateY(-50%);
z-index: 50;
}
/* Botón rojo más grande */
.welcome-card .main-button-red a {
padding: 8px 20px;
/* Aumentado de 2px 8px */
font-size: 12px;
/* Aumentado de 8px */
border-radius: 25px;
/* Bordes redondeados */
background-color: #bc1722;
color: #ffffff;
display: inline-block;
margin-top: 5px;
font-weight: 600;
text-transform: uppercase;
transition: all 0.3s ease;
}
.welcome-card .main-button-red a:hover {
background-color: #8a1119;
transform: scale(1.02);
}
/* Forzar bloque al frente */
.main-banner .caption {
position: relative;
z-index: 300;
}
.welcome-card {
background: #ffffff;
position: relative;
z-index: 999 !important;
/* Forzar al frente */
}
.services .service-card .icon i {
color: #ffffff !important;
}
.header-area .container,
.header-area .row,
.header-area .col-12,
.header-area .main-nav {
max-width: 100%;
overflow: visible;
}
.header-area .main-nav {
min-height: 80px;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
overflow: visible;
}
/* Forzar que el fondo del contenido sea transparente */
.services .service-card .down-content {
background-color: transparent !important;
}
/* Forzar justificado */
.services .service-card .down-content p {
text-align: justify !important;
}
/* ===== ENFOQUE EN TEXTO DE TARJETAS MISIÓN, VISIÓN, NOSOTROS ===== */
.services .service-card {
position: relative;
}
.services .service-card img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
z-index: 0;
}
/* Degradado oscuro desde abajo hacia arriba para enfoque en texto */
.services .service-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.3), transparent);
border-radius: 20px;
z-index: 1;
pointer-events: none;
}
/* El contenido queda por encima del degradado */
.services .service-card .icon,
.services .service-card .down-content {
position: relative;
z-index: 2;
}
/* Asegurar que el texto sea legible */
.services .service-card .down-content p {
color: #ffffff !important;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.services .service-card .down-content h4 {
color: #787a81 !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.services .service-card .down-content * {
color: #ffffff !important;
}
/* Flechas de navegación */
.owl-instalaciones .owl-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: rgba(0, 0, 0, 0.6) !important;
color: white !important;
font-size: 24px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: 0.3s;
z-index: 10;
}
.owl-instalaciones .owl-nav button.owl-prev {
left: -20px;
}
.owl-instalaciones .owl-nav button.owl-next {
right: -20px;
}
.owl-instalaciones .owl-nav button:hover {
background: #bc1722 !important;
}
/* Puntos (dots) */
.owl-instalaciones .owl-dots {
text-align: center;
margin-top: 25px;
}
.owl-instalaciones .owl-dot span {
width: 12px;
height: 12px;
margin: 0 5px;
background: #ccc;
border-radius: 50%;
display: inline-block;
transition: 0.3s;
}
.owl-instalaciones .owl-dot.active span {
background: #bc1722;
transform: scale(1.2);
}
/* Imagenes responsivas */
.owl-instalaciones img {
transition: transform 0.3s ease;
}
.owl-instalaciones img:hover {
transform: scale(1.02);
}
/* ======= ACTIVIDADES EMPRESARIALES ======= */
.actividades-titulo-wrapper {
text-align: center;
margin-bottom: 40px;
margin-top: 10px; /* IReduce tamaño de separacion*/
}
.actividades-titulo {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
/* Contenedor del carrusel de actividades */
.owl-courses-item .card-actividad {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05));
border-radius: 24px;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(13, 102, 171, 0.15);
margin: 10px;
display: flex;
flex-direction: column;
height: 100%;
}
/* Hover de la tarjeta */
.owl-courses-item .card-actividad:hover {
transform: translateY(-8px);
box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.2);
border-color: rgba(13, 102, 171, 0.4);
}
/* ===== IMAGEN ===== */
.owl-courses-item .card-actividad .img-actividad {
width: 100%;
height: 240px;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s ease;
}
.owl-courses-item .card-actividad:hover .img-actividad {
transform: scale(1.03);
}
/* ===== CONTENEDOR DEL TEXTO ===== */
.owl-courses-item .card-actividad .actividad-content {
padding: 25px 20px 30px 20px;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.2), rgba(13, 102, 171, 0.08));
text-align: center;
position: relative;
}
/* Línea decorativa superior */
.owl-courses-item .card-actividad .actividad-content::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background: linear-gradient(90deg, #0D66AB, #BC1722);
border-radius: 3px;
transition: width 0.3s ease;
}
.owl-courses-item .card-actividad:hover .actividad-content::before {
width: 80px;
}
.owl-courses-item .card-actividad:hover .titulo-actividad::after {
width: 60px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.owl-courses-item .card-actividad .img-actividad {
height: 210px;
}
.owl-courses-item .card-actividad .titulo-actividad {
font-size: 1.2rem;
}
.owl-courses-item .card-actividad .actividad-content {
padding: 20px 15px 25px 15px;
}
}
@media (max-width: 768px) {
.owl-courses-item .card-actividad {
margin: 5px;
}
.owl-courses-item .card-actividad .img-actividad {
height: 190px;
}
.owl-courses-item .card-actividad .titulo-actividad {
font-size: 1.1rem;
}
.owl-courses-item .card-actividad .actividad-content {
padding: 18px 12px 22px 12px;
}
}
@media (max-width: 576px) {
.owl-courses-item .card-actividad .img-actividad {
height: 170px;
}
.owl-courses-item .card-actividad .titulo-actividad {
font-size: 1rem;
}
.owl-courses-item .card-actividad .actividad-content::before {
width: 40px;
}
}
/* Tarjetas de actividades dentro del carrusel existente */
.owl-courses-item .card-actividad {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.12), transparent);
border-radius: 20px;
overflow: hidden;
text-align: center;
margin: 10px;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
}
.owl-courses-item .card-actividad:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(243, 226, 226, 0.2);
}
/* ===== IMÁGENES MÁS GRANDES ===== */
.owl-courses-item .card-actividad .img-actividad {
width: 100%;
height: 320px;
/* Aumentado de 250px a 320px */
object-fit: cover;
display: block;
}
/* Contenido debajo de la imagen */
.owl-courses-item .card-actividad .actividad-content {
padding: 20px 15px;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.15), rgba(13, 102, 171, 0.05));
border-radius: 0 0 24px 24px;
}
/* ===== TÍTULO CON COLOR AZUL INSTITUCIONAL ===== */
.owl-courses-item .card-actividad .titulo-actividad {
font-size: 1.25rem;
font-weight: 700;
color: #ffffff;
/* Azul institucional fuerte */
margin: 0;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: inherit;
}
/* Hover effect para el título */
.owl-courses-item .card-actividad:hover .titulo-actividad {
color: #2192D1;
/* Azul más claro al hacer hover */
transition: color 0.3s ease;
}
/* Ajustes responsive */
@media (max-width: 768px) {
.owl-courses-item .card-actividad .img-actividad {
height: 250px;
/* En móvil sigue siendo grande */
}
.owl-courses-item .card-actividad .titulo-actividad {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.owl-courses-item .card-actividad .img-actividad {
height: 220px;
}
}
.owl-courses-item .card-actividad:hover .titulo-actividad::after {
width: 80px;
}
/* Posicion de arrusel de Nosotros, Visión, Misión */
.services {
margin-top: 200px !important;
}
/* Ajuste para pantallas más pequeñas */
@media (max-width: 768px) {
.services {
margin-top: 150px !important;
}
}
@media (max-width: 576px) {
.services {
margin-top: 100px !important;
}
}
/* ============================================
ESTILOS INTEGRADOS DE bandainfo2.php (tooplate-style2.css)
Prefijo: .banda2- para evitar conflictos
============================================ */
/* Contenedor principal de la segunda banda */
.banda2-section {
background: rgba(33, 146, 209, 0.25) !important; /* Azul más claro */
padding: 60px 0;
width: 100%;
overflow-x: hidden;
}
.banda2-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}
/* Fila de columnas */
.banda2-row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.banda2-col {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}
@media (max-width: 991px) {
.banda2-col {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
}
}
/* Estilos de texto */
.banda2-site-header {
margin: 10px;
text-align: right;
width: 100%;
}
.banda2-site-header h1 {
font-size: 2rem;
margin-bottom: 15px;
color: white;
}
.banda2-site-header p {
font-size: 0.9rem;
line-height: 1.6;
color: white;
}
.banda2-site-header img {
max-width: 60%;
margin-bottom: 20px;
}
/* Grid de botones estilo pop */
.banda2-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.banda2-grid__item {
flex: 0 0 calc(50% - 15px);
margin: 0;
}
@media (max-width: 768px) {
.banda2-grid__item {
flex: 0 0 calc(100% - 15px);
}
}
/* Botones tipo tm-nav-link */
.banda2-product {
background: transparent;
transition: all 0.3s ease;
text-align: center;
}
.banda2-product:hover {
background: #2c2a35;
border-radius: 10px;
}
.banda2-tm-nav-link {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 140px;
text-align: center;
border: 1px solid white;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px;
}
.banda2-tm-nav-link:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.02);
}
.banda2-tm-nav-icon {
font-size: 2.2rem;
margin-bottom: 10px;
}
.banda2-tm-nav-text {
font-size: 0.85rem;
}
/* Descripciones ocultas que aparecen al hacer click (JS manejado aparte) */
.banda2-product__description {
background: #2c2a35;
padding: 20px;
border-radius: 10px;
margin-top: 10px;
display: none;
text-align: left;
color: rgb(66, 59, 59);
}
.banda2-product__description h2 {
font-size: 1.2rem;
margin-bottom: 15px;
color: #f5a425;
}
.banda2-product__description ul {
list-style: disc;
padding-left: 20px;
}
.banda2-product__description li {
margin-bottom: 5px;
}
/* Tarjeta de información */
.banda2-info-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
text-align: center;
margin-top: 30px;
}
.banda2-info-card i {
color: #f5a425;
}
.banda2-info-card hr {
background: rgba(255, 255, 255, 0.2);
margin: 15px 0;
}
/* ===== FORZAR TEXTO BLANCO EN BANDA2 ===== */
.banda2-info-card h4 {
color: #ffffff !important;
}
.banda2-badge-custom {
background: #f5a425;
padding: 4px 12px;
margin: 3px;
display: inline-block;
border-radius: 20px;
font-size: 0.7rem;
color: #1e1e1e;
}
/* Imagen con hover */
.banda2-image-hover-container {
margin-top: 30px;
}
.banda2-hover-image-card {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.banda2-hover-image-card:hover {
transform: translateY(-5px);
}
.banda2-hover-image {
width: 80%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.banda2-hover-image-card:hover .banda2-hover-image {
transform: scale(1.05);
}
.banda2-hover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.95), rgba(0, 51, 102, 0.95));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 15px;
}
.banda2-hover-image-card:hover .banda2-hover-overlay {
opacity: 1;
}
.banda2-overlay-content {
text-align: center;
color: white;
padding: 20px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.banda2-hover-image-card:hover .banda2-overlay-content {
transform: translateY(0);
}
.banda2-overlay-content i {
font-size: 2rem;
margin-bottom: 10px;
animation: banda2-pulse 2s infinite;
}
.banda2-overlay-content h3 {
font-size: 1rem;
margin-bottom: 8px;
}
.banda2-overlay-content p {
font-size: 0.75rem;
margin-bottom: 10px;
}
.banda2-overlay-btn {
background-color: #f5a425;
color: white;
padding: 6px 18px;
border-radius: 25px;
font-size: 0.7rem;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease;
}
.banda2-overlay-btn:hover {
background-color: white;
color: #0d66ab;
}
/* Estadísticas */
.banda2-image-stats {
display: flex;
justify-content: space-between;
gap: 15px;
margin-top: 20px;
}
.banda2-stat-item {
flex: 1;
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 12px 8px;
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.banda2-stat-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.banda2-stat-item i {
font-size: 1.3rem;
color: #f5a425;
display: block;
margin-bottom: 5px;
}
.banda2-stat-item span {
display: block;
font-size: 1rem;
font-weight: bold;
color: white;
}
.banda2-stat-item small {
display: block;
font-size: 0.65rem;
opacity: 0.8;
}
@keyframes banda2-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Ajustes responsivos */
@media (max-width: 768px) {
.banda2-site-header {
text-align: center;
}
.banda2-site-header img {
display: block;
margin: 0 auto 15px auto;
}
.banda2-image-stats {
flex-wrap: wrap;
}
.banda2-stat-item {
flex: 0 0 calc(33.333% - 10px);
}
}
@media (max-width: 480px) {
.banda2-stat-item {
flex: 0 0 100%;
margin-bottom: 10px;
}
.banda2-tm-nav-link {
height: 110px !important;
}
}
/* Países grid */
.countries-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
margin-top: 15px;
}
.countries-grid li {
background: rgba(255, 255, 255, 0.15);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
}
/* ============================================
SECCIÓN ORACLE - Estilo corporativo Oracle
Paleta: #0d66ab (azul Oracle), #f5a425 (naranja)
============================================ */
.banda1-section {
background:rgba(58, 58, 58, 0.5); /*FONDO DE BANDA1*/
padding: 60px 0;
width: 100%;
overflow-x: hidden;
}
.banda1-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}
/* Fila de columnas - orden normal: texto izquierda, botones derecha */
.banda1-row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.banda1-col {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}
@media (max-width: 991px) {
.banda1-col {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
}
}
/* Estilos de texto Oracle */
.banda1-site-header {
margin: 10px;
text-align: left;
width: 100%;
}
.banda1-site-header h1 {
font-size: 2rem;
margin-bottom: 15px;
color: white;
font-weight: 700;
}
.banda1-site-header p {
font-size: 0.9rem;
line-height: 1.6;
color: white;
}
.banda1-site-header img {
max-width: 60%;
margin-bottom: 20px;
}
/* Grid de botones Oracle */
.banda1-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.banda1-grid__item {
flex: 0 0 calc(50% - 15px);
margin: 0;
}
@media (max-width: 768px) {
.banda1-grid__item {
flex: 0 0 calc(100% - 15px);
}
}
/* Botones estilo Oracle */
.banda1-product {
background: transparent;
transition: all 0.3s ease;
text-align: center;
}
.banda1-product:hover {
background: rgba(255, 255, 255, 0.15);
border-radius: 10px;
}
.banda1-tm-nav-link {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 140px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
}
.banda1-tm-nav-link:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.02);
border-color: #f5a425;
}
.banda1-tm-nav-icon {
font-size: 2.2rem;
margin-bottom: 10px;
}
.banda1-tm-nav-text {
font-size: 0.85rem;
font-weight: 500;
}
/* Tarjeta de información Oracle */
.banda1-info-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
text-align: center;
margin-top: 30px;
}
.banda1-info-card i {
color: #f5a425;
}
.banda1-info-card hr {
background: rgba(255, 255, 255, 0.2);
margin: 15px 0;
}
.banda1-badge-custom {
background: #f5a425;
padding: 4px 12px;
margin: 3px;
display: inline-block;
border-radius: 20px;
font-size: 0.7rem;
color: #1e1e1e;
font-weight: 600;
}
/* Imagen con hover Oracle */
.banda1-image-hover-container {
margin-top: 30px;
}
.banda1-hover-image-card {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
/* Color de fondo por si la imagen es más pequeña */
}
.banda1-hover-image-card:hover {
transform: translateY(-5px);
}
.banda1-hover-image {
width: 56%;
height: auto;
display: block;
transition: transform 0.5s ease;
object-fit: cover;
object-position: center;
}
.banda1-hover-image-card .banda1-hover-image {
margin: 0 auto;
}
.banda1-hover-image-card:hover .banda1-hover-image {
transform: scale(1.05);
}
.banda1-hover-image-card:hover .banda1-hover-overlay {
opacity: 1;
}
.banda1-overlay-content {
text-align: center;
color: white;
padding: 20px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.banda1-hover-image-card:hover .banda1-overlay-content {
transform: translateY(0);
}
.banda1-overlay-content i {
font-size: 2rem;
margin-bottom: 10px;
animation: banda1-pulse 2s infinite;
}
.banda1-overlay-content h3 {
font-size: 1rem;
margin-bottom: 8px;
}
.banda1-overlay-content p {
font-size: 0.75rem;
margin-bottom: 10px;
}
.banda1-overlay-btn {
background-color: #f5a425;
color: #1e1e1e;
padding: 6px 18px;
border-radius: 25px;
font-size: 0.7rem;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.banda1-overlay-btn:hover {
background-color: white;
color: #0d66ab;
}
/* Estadísticas Oracle */
.banda1-image-stats {
display: flex;
justify-content: space-between;
gap: 15px;
margin-top: 20px;
}
.banda1-stat-item {
flex: 1;
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 12px 8px;
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.banda1-stat-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.banda1-stat-item i {
font-size: 1.3rem;
color: #f5a425;
display: block;
margin-bottom: 5px;
}
.banda1-stat-item span {
display: block;
font-size: 1rem;
font-weight: bold;
color: white;
}
.banda1-stat-item small {
display: block;
font-size: 0.65rem;
opacity: 0.8;
}
@keyframes banda1-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Ajustes responsivos */
@media (max-width: 768px) {
.banda1-site-header {
text-align: center;
}
.banda1-site-header img {
display: block;
margin: 0 auto 15px auto;
}
.banda1-image-stats {
flex-wrap: wrap;
}
.banda1-stat-item {
flex: 0 0 calc(33.333% - 10px);
}
}
@media (max-width: 480px) {
.banda1-stat-item {
flex: 0 0 100%;
margin-bottom: 10px;
}
.banda1-tm-nav-link {
height: 110px !important;
}
}
/* ============================================
BLOQUEAR SCROLL CUANDO MODAL ESTÁ ABIERTO
============================================ */
/* Clase que se añade al body cuando un modal está abierto */
body.modal-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
}
/* Evitar que el overlay del modal permita cerrar al hacer clic fuera */
.banda2-modal-overlay {
pointer-events: auto; /* El overlay captura clics */
}
/* El contenedor del modal también captura clics normalmente */
.banda2-modal-container {
pointer-events: auto;
}
/* El overlay NO debe cerrar el modal al hacer clic */
.banda2-modal-overlay {
cursor: default; /* Sin cursor de mano */
}
/* ============================================
MODAL TECNOLÓGICO MODAL2 - VERSIÓN FORZADA
Fondo: gris claro (#3a3a3a80)
Hover: borde amarillo (#FFD700)
============================================ */
/* Overlay del modal - fondo gris claro FORZADO */
.banda2-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(58, 58, 58, 0.5) !important;
backdrop-filter: blur(8px);
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.banda2-modal-overlay.active {
display: flex;
opacity: 1;
}
/* Contenedor del modal - fondo gris claro FORZADO */
.banda2-modal-container {
width: 90%;
max-width: 1200px;
max-height: 85vh;
background: rgba(58, 58, 58, 0.5) !important;
border-radius: 20px;
overflow: hidden;
position: relative;
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Botón cerrar - hover amarillo FORZADO */
.banda2-modal-close {
position: absolute;
top: 20px;
right: 25px;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.banda2-modal-close:hover {
background: #FFD700 !important;
transform: rotate(90deg);
border-color: #FFD700 !important;
}
/* Header del modal - borde amarillo FORZADO */
.banda2-modal-header {
padding: 25px 30px;
background: linear-gradient(90deg, #0d66ab, #0a4d82);
border-bottom: 2px solid #FFD700 !important;
}
/* Tarjeta de imagen - hover borde amarillo FORZADO */
.banda2-modal-image-card {
position: relative;
border-radius: 15px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
border: 2px solid transparent !important;
transition: all 0.3s ease;
}
.banda2-modal-image-card:hover {
border-color: #FFD700 !important;
transform: translateY(-3px);
}
/* Listas - hover borde amarillo FORZADO */
.banda2-modal-list li {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.banda2-modal-list li:hover {
transform: translateX(5px);
border-bottom-color: #FFD700 !important;
}
.banda2-modal-list li i {
color: #FFD700 !important;
width: 25px;
font-size: 0.9rem;
margin-right: 12px;
}
/* Badges tecnológicos - hover amarillo FORZADO */
.banda2-tech-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(58, 58, 58, 0.5);
border: 1px solid rgba(13, 102, 171, 0.3);
padding: 6px 14px;
border-radius: 30px;
font-size: 0.75rem;
font-weight: 500;
color: #e0e0e0;
margin: 4px;
transition: all 0.3s ease;
}
.banda2-tech-badge::before {
content: "▹";
color: #FFD700 !important;
font-size: 0.7rem;
}
.banda2-tech-badge:hover {
background: rgba(58, 58, 58, 0.7);
border-color: #FFD700 !important;
color: #FFD700 !important;
transform: translateY(-2px);
}
/* Botón modal - hover borde amarillo FORZADO */
.banda2-modal-btn {
background: linear-gradient(135deg, #0d66ab, #0a4d82);
color: white;
border: none;
padding: 10px 25px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid transparent !important;
}
.banda2-modal-btn:hover {
background: linear-gradient(135deg, #0d66ab, #0a4d82);
border-color: #FFD700 !important;
transform: translateY(-2px);
color: #FFD700 !important;
}
/* ============================================
SECCIÓN SAP - Estilo corporativo SAP
Paleta: #2192d1 (azul SAP), #0a5d8c, #ffffff
============================================ */
.banda3-section {
background: rgba(13, 102, 171, 0.2) !important;
padding: 60px 0;
width: 100%;
overflow-x: hidden;
}
.banda3-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}
/* Fila de columnas - orden invertido: botones izquierda, texto derecha */
.banda3-row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.banda3-col {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}
@media (max-width: 991px) {
.banda3-col {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
}
/* En móvil, mantener orden lógico: botones arriba, texto abajo */
.banda3-col:first-child {
order: 1;
}
.banda3-col:last-child {
order: 2;
}
}
/* Estilos de texto SAP */
.banda3-site-header {
margin: 10px;
text-align: left;
width: 100%;
}
.banda3-site-header h1 {
font-size: 2rem;
margin-bottom: 15px;
color: white;
font-weight: 700;
}
.banda3-site-header p {
font-size: 0.9rem;
line-height: 1.6;
color: white;
}
.banda3-site-header img {
max-width: 60%;
margin-bottom: 20px;
}
/* Grid de botones SAP */
.banda3-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.banda3-grid__item {
flex: 0 0 calc(50% - 15px);
margin: 0;
}
@media (max-width: 768px) {
.banda3-grid__item {
flex: 0 0 calc(100% - 15px);
}
}
/* Botones estilo SAP */
.banda3-product {
background: transparent;
transition: all 0.3s ease;
text-align: center;
}
.banda3-product:hover {
background: rgba(255, 255, 255, 0.15);
border-radius: 10px;
}
.banda3-tm-nav-link {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 140px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
}
.banda3-tm-nav-link:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.02);
border-color: #F5A425;
}
.banda3-tm-nav-icon {
font-size: 2.2rem;
margin-bottom: 10px;
}
.banda3-tm-nav-text {
font-size: 0.85rem;
font-weight: 500;
}
/* Tarjeta de información SAP */
.banda3-info-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
text-align: center;
width: 100% !important;
max-width: 100% !important;
padding: 30px 25px !important;
margin: 20px 0 0 0 !important;
color: #ffffff !important;
}
.banda3-info-card i {
color: #F5A425;
}
.banda3-info-card hr {
color: #ffffff !important;
}
.banda3-badge-custom {
background: #F5A425;
padding: 4px 12px;
margin: 3px;
display: inline-block;
border-radius: 20px;
font-size: 0.7rem;
color: #1e1e1e;
font-weight: 600;
}
/* Imagen con hover SAP */
.banda3-image-hover-container {
margin-top: 30px;
}
.banda3-hover-image-card {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.banda3-hover-image-card:hover {
transform: translateY(-5px);
}
.banda3-hover-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.banda3-hover-image-card:hover .banda3-hover-image {
transform: scale(1.05);
}
.banda3-hover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(33, 146, 209, 0.95), rgba(10, 93, 140, 0.95));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 15px;
}
.banda3-hover-image-card:hover .banda3-hover-overlay {
opacity: 1;
}
.banda3-overlay-content {
text-align: center;
color: white;
padding: 20px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.banda3-hover-image-card:hover .banda3-overlay-content {
transform: translateY(0);
}
.banda3-overlay-content i {
font-size: 2rem;
margin-bottom: 10px;
animation: banda3-pulse 2s infinite;
}
.banda3-overlay-content h3 {
font-size: 1rem;
margin-bottom: 8px;
}
.banda3-overlay-content p {
font-size: 0.75rem;
margin-bottom: 10px;
}
.banda3-overlay-btn {
background-color: #F5A425;
color: #1e1e1e;
padding: 6px 18px;
border-radius: 25px;
font-size: 0.7rem;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.banda3-overlay-btn:hover {
background-color: white;
color: #2192d1;
}
/* Estadísticas SAP */
.banda3-image-stats {
display: flex;
justify-content: space-between;
gap: 15px;
margin-top: 20px;
}
.banda3-stat-item {
flex: 1;
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 12px 8px;
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.banda3-stat-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.banda3-stat-item i {
font-size: 1.3rem;
color: #F5A425;
display: block;
margin-bottom: 5px;
}
.banda3-stat-item span {
display: block;
font-size: 1rem;
font-weight: bold;
color: white;
}
.banda3-stat-item small {
display: block;
font-size: 0.65rem;
opacity: 0.8;
}
@keyframes banda3-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Ajustes responsivos */
@media (max-width: 768px) {
.banda3-site-header {
text-align: center;
}
.banda3-site-header img {
display: block;
margin: 0 auto 15px auto;
}
.banda3-image-stats {
flex-wrap: wrap;
}
.banda3-stat-item {
flex: 0 0 calc(33.333% - 10px);
}
}
@media (max-width: 480px) {
.banda3-stat-item {
flex: 0 0 100%;
margin-bottom: 10px;
}
.banda3-tm-nav-link {
height: 110px !important;
}
}
/* ============================================
IGUALAR ALTURA DE SERVICIOS (services section)
============================================ */
.services .owl-service-item {
display: flex;
flex-wrap: wrap;
}
.services .item {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
.services .item .down-content {
flex: 1;
display: flex;
flex-direction: column;
}
.services .item .down-content p {
flex: 1;
margin-bottom: 0;
}
/* Asegurar que todas las tarjetas tengan la misma altura */
.services .owl-stage {
display: flex;
align-items: stretch;
}
.services .owl-item {
height: auto !important;
}
.services .owl-stage-outer {
overflow: visible;
}
/* Forzar texto blanco en toda la lista de contacto */
.contact-list,
.contact-list * {
color: #ffffff !important;
}
/* Iconos en blanco */
.contact-icon i {
color: #ffffff !important;
}
/* Enlaces de email en blanco */
.contact-info a {
color: #ffffff !important;
}
/* Títulos en blanco */
.contact-info h4 {
color: #ffffff !important;
}
/* Texto del cargo en blanco */
.contact-info p {
color: #ffffff !important;
}
/* Iconos de la sección contacto */
.contact-us .tm-contact-social li a i {
color: #ffffff !important;
}
/* Iconos del footer */
.footer .tm-contact-social li a i {
color: #ffffff !important;
font-size: 28px !important;
}
/* Agrandar iconos y su contenedor */
.tm-contact-social li a {
width: 55px !important;
height: 55px !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.count-area-content {
text-align: center;
background-color: rgba(14, 1, 1, 0.5);
border-radius: 20px;
padding: 25px 30px 35px 30px;
margin: 15px 0px;
}
/* Hacer la imagen más pequeña */
.count-area-content img {
width: 300px;
height: auto;
display: block;
margin: 0 auto 15px auto;
}
/* ==============================================
SECCIÓN DE VALORES - DISEÑO TRANSPARENTE MODERNO
============================================== */
.premium-values {
padding: 60px 0 80px;
position: relative;
}
/* Header de la sección - SOLO TÍTULO VALORES */
.premium-header {
text-align: center;
margin-bottom: 40px;
}
.premium-title {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 0;
}
/* Grid de valores - SEPARACIÓN MEJORADA */
/* Grid de valores - ORDENADO */
.valores-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -12px;
}
/* TARJETAS MÁS PEQUEÑAS */
.valor-card {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
border-radius: 16px; /* Reducido de 20px a 16px */
padding: 20px 15px; /* Reducido de 30px 20px a 20px 15px */
margin: 0 12px 30px 12px; /* Espacio entre tarjetas horizontal y vertical */
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
height: auto;
min-height: 220px; /* Altura mínima uniforme */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Espacio extra entre filas en móvil */
@media (max-width: 991px) {
.valor-card {
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.valor-card {
margin-bottom: 25px;
}
}
.valor-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
/* Icono circular - AZUL FUERTE */
.valor-icon {
width: 70px;
height: 70px;
background: rgba(14, 44, 80, 0.993); /* Fondo azul transparente */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
border: 1px solid rgba(13, 102, 171, 0.3);
}
.valor-card:hover .valor-icon {
background: rgba(13, 102, 171, 0.3);
border-color: #0D66AB;
transform: scale(1.05);
}
.valor-icon i {
font-size: 28px;
color: #ffffff; /* ← BLANCO - Ahora se ve bien */
transition: all 0.3s ease;
}
.valor-card:hover .valor-icon i {
color: #2192D1; /* Azul más brillante al hover */
transform: scale(1.02);
}
/* Título del valor */
.valor-card h3 {
font-size: 1.4rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 15px;
letter-spacing: 0.5px;
}
/* Descripción del valor */
.valor-card p {
font-size: 0.85rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
text-align: center;
}
/* Botón AZUL semi oscuro - MÁS BONITO */
.valor-btn-small {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #8b1111, #830b0b); /* Azul fuerte a azul más oscuro */
padding: 10px 28px;
border-radius: 50px;
color: #ffffff;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 12px rgba(13, 102, 171, 0.3);
}
.valor-btn-small:hover {
background: linear-gradient(135deg, #8a1616, #c93f3f); /* Azul más brillante al hover */
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(99, 4, 4, 0.842);
color: #ffffff;
text-decoration: none;
}
.valor-btn-small i {
font-size: 0.75rem;
transition: transform 0.3s ease;
}
.valor-btn-small:hover i {
transform: translateX(5px);
}
/* ==============================================
RESPONSIVE - SECCIÓN VALORES
============================================== */
@media (max-width: 991px) {
.premium-values {
padding: 50px 0 60px;
}
.premium-title {
font-size: 1rem;
padding: 10px 24px;
}
.valor-card {
padding: 25px 18px;
margin-bottom: 30px;
}
.valor-icon {
width: 60px;
height: 60px;
}
.valor-icon i {
font-size: 24px;
}
.valor-card h3 {
font-size: 1.2rem;
}
.valor-card p {
font-size: 0.8rem;
}
}
@media (max-width: 768px) {
.premium-values {
padding: 40px 0 50px;
}
.premium-title {
font-size: 0.9rem;
padding: 8px 20px;
letter-spacing: 2px;
}
.valores-grid {
margin-bottom: 40px;
}
.valor-card {
padding: 20px 15px;
margin-bottom: 25px;
}
.valor-icon {
width: 55px;
height: 55px;
margin-bottom: 15px;
}
.valor-icon i {
font-size: 22px;
}
.valor-card h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.valor-card p {
font-size: 0.75rem;
line-height: 1.5;
}
.valor-btn-small {
padding: 8px 24px;
font-size: 0.7rem;
gap: 8px;
}
}
@media (max-width: 576px) {
.premium-values {
padding: 30px 0 40px;
}
.premium-title {
font-size: 0.8rem;
padding: 6px 16px;
letter-spacing: 1.5px;
}
.valores-grid {
margin-bottom: 30px;
}
.valor-card {
padding: 18px 12px;
margin-bottom: 20px;
}
.valor-icon {
width: 48px;
height: 48px;
}
.valor-icon i {
font-size: 20px;
}
.valor-card h3 {
font-size: 1rem;
}
.valor-card p {
font-size: 0.7rem;
}
.valor-btn-small {
padding: 6px 20px;
font-size: 0.65rem;
gap: 6px;
}
}
/* ========== TARJETAS DE HECHOS ========== */
/* ========== TARJETAS DE HECHOS - MISMA ALTURA PARA LAS 6 (SIN HOVER) ========== */
.fact-card-modern {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 1.8rem 1rem;
text-align: center;
margin-bottom: 25px;
transition: none; /* Sin transición */
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
position: relative;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Efecto de brillo eliminado */
.fact-card-modern::before {
display: none;
}
/* Icono - SIN cambios al hover */
.fact-icon {
font-size: 48px;
color: #ff6b6b;
margin-bottom: 15px;
line-height: 1;
}
/* Número - IGUAL PARA TODAS */
.fact-digit {
font-size: 40px;
font-weight: 800;
color: #ffffff;
line-height: 1.2;
margin-bottom: 8px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
/* Modelos de Trabajo - MISMA ALTURA Y ESTILO QUE LOS DEMÁS */
.fact-digit-modelos {
font-size: 22px;
font-weight: 700;
color: #F5A425;
background: rgba(0, 0, 0, 0.4);
display: inline-block;
padding: 6px 12px;
border-radius: 40px;
margin-bottom: 8px;
letter-spacing: 0.5px;
line-height: 1.3;
}
/* Título - IGUAL PARA TODAS */
.fact-title {
font-size: 15px;
font-weight: 600;
color: #f5f5f5;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
margin-top: 5px;
}
/* ===== RESPONSIVE ===== */
/* Pantalla mediana */
@media (max-width: 992px) {
.fact-card-modern {
padding: 1.4rem 0.8rem;
min-height: 200px;
}
.fact-icon {
font-size: 40px;
margin-bottom: 12px;
}
.fact-digit {
font-size: 34px;
}
.fact-digit-modelos {
font-size: 18px;
padding: 4px 10px;
}
.fact-title {
font-size: 13px;
}
}
/* Pantalla tablet */
@media (max-width: 768px) {
.fact-card-modern {
padding: 1.2rem 0.6rem;
min-height: 180px;
margin-bottom: 20px;
}
.fact-icon {
font-size: 36px;
margin-bottom: 10px;
}
.fact-digit {
font-size: 30px;
}
.fact-digit-modelos {
font-size: 16px;
padding: 4px 8px;
white-space: normal;
line-height: 1.3;
}
.fact-title {
font-size: 12px;
}
}
/* Pantalla móvil */
@media (max-width: 576px) {
.fact-card-modern {
padding: 1rem 0.5rem;
min-height: 160px;
}
.fact-icon {
font-size: 32px;
margin-bottom: 8px;
}
.fact-digit {
font-size: 26px;
}
.fact-digit-modelos {
font-size: 14px;
padding: 3px 8px;
white-space: normal;
}
.fact-title {
font-size: 10px;
}
}
/* ===== GRID - MISMO ANCHO PARA LAS 6 TARJETAS ===== */
.fact-grid .col-lg-4 {
flex: 0 0 33.333% !important;
max-width: 33.333% !important;
}
@media (max-width: 992px) {
.fact-grid .col-md-6 {
flex: 0 0 33.333% !important;
max-width: 33.333% !important;
}
}
@media (max-width: 768px) {
.fact-grid .col-sm-6 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (max-width: 576px) {
.fact-grid .col-sm-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* Centrar tarjetas dentro de su columna */
.fact-card-modern {
max-width: 95% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ===== TÍTULO NUESTROS HECHOS - MISMO ESTILO QUE INSIGNIAS ===== */
.hechos-header-wrapper {
text-align: center;
margin-bottom: 40px;
margin-top: 30px; /* ← AGREGA ESTO - Empuja el título hacia abajo */
padding-top: 10px; /* ← OPCIONAL - Más espacio interno arriba */
}
.hechos-badge-modern {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
margin: 0 auto;
}
/* Ajuste responsivo */
@media (max-width: 768px) {
.hechos-badge-modern {
font-size: 1rem;
padding: 10px 20px;
letter-spacing: 2px;
}
}
@media (max-width: 576px) {
.hechos-badge-modern {
font-size: 0.85rem;
padding: 8px 16px;
letter-spacing: 1.5px;
}
}
.divider-icon:hover {
transform: rotate(360deg);
border-color: #F5A425;
color: #F5A425;
}
/* ===== TÍTULO NUESTROS CLIENTES - MISMO ESTILO QUE LOS DEMÁS ===== */
.our-courses .section-heading {
text-align: center !important;
margin-bottom: 40px !important; /* Cambia de 500px a 40px */
margin-top: 70px !important;
}
.our-courses .section-heading h2 {
font-family: 'Poppins', sans-serif !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08) !important;
display: inline-block !important;
width: auto !important;
padding: 12px 28px !important;
border-radius: 50px !important;
backdrop-filter: blur(4px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
text-align: center !important;
margin: 0 auto !important;
}
/* Forzar cambios en título NUESTROS CLIENTES */
section.our-courses .container .row .col-lg-12 .section-heading {
margin-bottom: 50px !important;
}
section.our-courses .container .row .col-lg-12 .section-heading h2 {
margin-bottom: 0 !important;
}
/* ===== FLECHAS EN CARRUSEL DE NUESTROS CLIENTES ===== */
.our-courses .owl-courses-item .owl-nav {
display: block !important;
}
.our-courses .owl-courses-item .owl-nav button {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 40px !important;
height: 40px !important;
background: rgba(0, 0, 0, 0.6) !important;
color: #ffffff !important;
font-size: 24px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
z-index: 10 !important;
}
.our-courses .owl-courses-item .owl-nav button.owl-prev {
left: -20px !important;
}
.our-courses .owl-courses-item .owl-nav button.owl-next {
right: -20px !important;
}
.our-courses .owl-courses-item .owl-nav button:hover {
background: #f5a425 !important;
color: #1e1e1e !important;
transform: translateY(-50%) scale(1.05) !important;
}
/* Ajuste responsive */
@media (max-width: 768px) {
.our-courses .owl-courses-item .owl-nav button {
width: 35px !important;
height: 35px !important;
font-size: 20px !important;
}
.our-courses .owl-courses-item .owl-nav button.owl-prev {
left: -15px !important;
}
.our-courses .owl-courses-item .owl-nav button.owl-next {
right: -15px !important;
}
}
/* ===== ACERCAR CARRUSEL DE ACTIVIDADES AL TÍTULO NUESTROS CLIENTES ===== */
.our-courses .section-heading {
margin-bottom: 10px !important; /* Reduce espacio debajo del título */
}
.our-courses {
margin-top: -20px !important; /* Valor negativo sube el carrusel */
padding-top: 0 !important;
}
/* ===== ANCHO UNIFORME PARA LAS 6 TARJETAS ===== */
.fact-grid .col-lg-4 {
flex: 0 0 33.333% !important;
max-width: 33.333% !important;
}
/* Ajuste para pantallas medianas */
@media (max-width: 992px) {
.fact-grid .col-md-6 {
flex: 0 0 33.333% !important;
max-width: 33.333% !important;
}
}
/* Ajuste para móviles */
@media (max-width: 768px) {
.fact-grid .col-sm-6 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (max-width: 576px) {
.fact-grid .col-sm-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* Hacer las tarjetas más angostas internamente */
.fact-card-modern {
max-width: 95% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ===== TÍTULO INSIGNIAS - MISMO ESTILO QUE EQUIPO EJECUTIVO ===== */
.insignias-header-wrapper {
text-align: center;
margin-bottom: 30px;
}
.insignias-badge-modern {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
margin: 0 auto 15px auto;
}
/* Ajuste responsivo */
@media (max-width: 768px) {
.insignias-badge-modern {
font-size: 1rem;
padding: 10px 20px;
letter-spacing: 2px;
}
.insignias-subtitle {
font-size: 0.75rem !important;
padding: 0 15px;
}
}
@media (max-width: 576px) {
.insignias-badge-modern {
font-size: 0.85rem;
padding: 8px 16px;
letter-spacing: 1.5px;
}
}
.insignia-card {
width: 100%;
max-width: 220px;
min-height: 280px;
/* Altura mínima uniforme */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(8px);
border-radius: 20px;
overflow: hidden;
text-align: center;
margin: 0 auto 30px auto;
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
}
.insignia-img-wrapper {
padding: 20px;
background: rgba(0, 0, 0, 0.712);
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
flex-shrink: 0;
}
.insignia-img-wrapper img {
max-width: 100%;
max-height: 100px;
object-fit: contain;
transition: transform 0.3s;
}
.insignia-content {
padding: 15px 12px;
background: rgba(0, 0, 0, 0.5);
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.insignia-content h4 {
color: #F5A425;
font-size: 1rem;
margin-bottom: 6px;
font-weight: 700;
line-height: 1.3;
}
.insignia-content p {
color: #dddddd;
font-size: 0.7rem;
margin: 0;
line-height: 1.3;
}
/* Badge posicionado correctamente */
.new-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
color: white;
font-size: 9px;
font-weight: bold;
padding: 3px 8px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
}
/* Para que todas las columnas tengan el mismo ancho */
.insignias-grid [class*="col-"] {
display: flex;
justify-content: center;
}
/* Responsive para 5 columnas */
@media (min-width: 1200px) {
.insignias-grid .col-lg-2 {
flex: 0 0 20%;
max-width: 20%;
}
}
@media (max-width: 1199px) and (min-width: 768px) {
.insignias-grid .col-md-4 {
flex: 0 0 33.333%;
max-width: 33.333%;
}
}
@media (max-width: 767px) {
.insignias-grid .col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 480px) {
.insignias-grid .col-sm-6 {
flex: 0 0 100%;
max-width: 100%;
}
.insignia-card {
max-width: 260px;
}
}
/*********************** CONTACTO Y MAPA***************************/
.contact-premium-section {
font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
background: transparent !important;
color: #eef2ff;
padding: 80px 20px 60px !important;
width: 100% !important;
overflow-x: hidden !important;
}
.container-premium {
max-width: 1600px !important;
width: 95% !important;
margin: 0 auto !important;
padding: 0 0 !important;
}
/* Grid dos mitades - lado a lado */
.contact-grid-premium {
display: flex !important;
flex-wrap: wrap !important;
gap: 35px !important;
margin-bottom: 70px !important;
width: 100% !important;
}
/* Columna del formulario - MÁS ANCHA */
.form-col-premium {
flex: 1.3 !important; /* ← 30% más ancha que el mapa */
min-width: 400px !important;
max-width: 55% !important;
}
/* Columna del mapa - MÁS ANGOSTA pero MÁS ALTA */
.map-col-premium {
flex: 0.7 !important; /* ← 30% menos ancha */
min-width: 320px !important;
max-width: 45% !important;
}
/* ===== FORMULARIO ===== */
.form-card-premium {
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(12px) !important;
border-radius: 32px !important;
padding: 35px 45px !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
transition: transform 0.3s ease;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
height: 100% !important;
}
.form-card-premium h3 {
font-size: 2rem !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
color: #ffffff !important;
}
.form-card-premium p {
font-size: 0.9rem !important;
margin-bottom: 25px !important;
color: #f0f0f0 !important;
}
/* INPUTS */
.input-premium {
margin-bottom: 18px !important;
width: 100% !important;
}
.input-premium input,
.input-premium select,
.input-premium textarea {
width: 100% !important;
padding: 13px 20px 13px 50px !important;
font-size: 0.95rem !important;
border-radius: 30px !important;
background: rgba(29, 110, 216, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.input-premium textarea {
min-height: 90px !important;
}
/* BOTÓN */
.btn-submit-premium {
background: linear-gradient(135deg, #f33f3f, #bc1722) !important;
padding: 13px 35px !important;
border-radius: 50px !important;
font-size: 1rem !important;
font-weight: 700 !important;
width: 100% !important;
margin-top: 10px !important;
}
/* ===== MAPA - MÁS VERTICAL (MÁS ALTO) ===== */
.map-card-premium {
background: rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(10px) !important;
border-radius: 32px !important;
padding: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* MAPA MÁS ALTO - ocupa más espacio vertical */
.map-wrapper-premium-grande {
width: 100% !important;
height: 520px !important; /* ← MÁS ALTO: aumentado de 480px a 520px */
border-radius: 24px !important;
overflow: hidden !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
margin-bottom: 20px !important;
}
.mapa-grande-iframe {
width: 100% !important;
height: 100% !important;
border: none !important;
display: block !important;
}
/* DIRECCIÓN DEBAJO DEL MAPA */
.mapa-direccion-grande {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.85), rgba(8, 77, 130, 0.85)) !important;
backdrop-filter: blur(8px) !important;
border-radius: 24px !important;
padding: 18px 22px !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
margin-top: auto !important;
}
.mapa-direccion-grande i {
font-size: 2rem !important;
color: #F5A425 !important;
}
.direccion-texto h4 {
font-size: 1rem !important;
font-weight: 700 !important;
color: #ffffff !important;
margin-bottom: 5px !important;
}
.direccion-texto p {
font-size: 0.85rem !important;
color: #f0f0f0 !important;
line-height: 1.4 !important;
margin-bottom: 0 !important;
}
/* CAPTCHA */
.captcha-premium-wrapper {
border-radius: 30px !important;
padding: 12px 18px !important;
margin-bottom: 18px !important;
background: rgba(255, 255, 255, 0.1) !important;
}
.securimage-img-premium {
height: 50px !important;
}
.captcha-input-premium {
padding: 10px 18px 10px 48px !important;
font-size: 0.85rem !important;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
.form-card-premium {
padding: 30px 35px !important;
}
.map-wrapper-premium-grande {
height: 450px !important; /* Sigue siendo alto pero ajustado */
}
}
@media (max-width: 900px) {
.contact-grid-premium {
flex-direction: column !important;
gap: 30px !important;
}
.form-col-premium,
.map-col-premium {
max-width: 100% !important;
min-width: 100% !important;
}
.map-wrapper-premium-grande {
height: 400px !important;
}
}
@media (max-width: 768px) {
.form-card-premium {
padding: 25px 25px !important;
}
.form-card-premium h3 {
font-size: 1.6rem !important;
}
.map-wrapper-premium-grande {
height: 350px !important;
}
.mapa-direccion-grande {
padding: 15px 18px !important;
}
}
@media (max-width: 576px) {
.map-wrapper-premium-grande {
height: 300px !important;
}
.mapa-direccion-grande {
flex-direction: column !important;
text-align: center !important;
}
}
/* ============================================ */
/* ESTILOS MAPA RESPONSIVO - iT-GLOBAL - JESS */
/* ============================================ */
.mapa-responsivo-section {
position: relative;
width: 100%;
overflow: hidden;
padding: 20px 0 50px 0;
}
.mapa-wrapper-premium {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.mapa-contenedor-responsivo {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
background: #000;
transition: all 0.3s ease;
}
.mapa-contenedor-responsivo:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}
.mapa-contenedor-responsivo iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border: 0;
display: block;
}
/* Tablets (768px - 1024px) */
@media screen and (max-width: 1024px) {
.mapa-contenedor-responsivo {
border-radius: 20px;
}
}
/* Tablets pequeñas y móviles grandes (768px - 991px) */
@media screen and (max-width: 991px) {
.mapa-wrapper-premium {
padding: 0 15px;
}
.mapa-contenedor-responsivo {
padding-bottom: 60%; /* Relación más alta para tablets */
border-radius: 18px;
}
}
/* Móviles (576px - 767px) */
@media screen and (max-width: 767px) {
.mapa-responsivo-section {
padding: 10px 0 30px 0;
}
.mapa-wrapper-premium {
padding: 0 12px;
}
.mapa-contenedor-responsivo {
padding-bottom: 75%; /* Relación 4:3 para móviles */
border-radius: 16px;
}
}
/* Móviles pequeños (menos de 576px) */
@media screen and (max-width: 576px) {
.mapa-contenedor-responsivo {
padding-bottom: 100%; /* Relación 1:1 para móviles muy pequeños */
border-radius: 14px;
}
}
/* Móviles muy pequeños (menos de 400px) */
@media screen and (max-width: 400px) {
.mapa-contenedor-responsivo {
padding-bottom: 120%; /* Aún más altura para pantallas muy pequeñas */
border-radius: 12px;
}
}
/* Ajuste del título en móviles */
@media screen and (max-width: 767px) {
.titulo-presencia {
margin: 20px auto 25px auto !important;
}
.titulo-presencia > div {
padding: 8px 20px !important;
gap: 10px !important;
}
.titulo-presencia h1 {
font-size: 0.9rem !important;
letter-spacing: 2px !important;
}
.titulo-presencia > div > div {
width: 3px !important;
height: 30px !important;
}
}
/* ============================================ */
/* ESTILOS MAPA RESPONSIVO - iT-GLOBAL - JESS */
/* ============================================ */
/************ mapa ubicacion***********************/
.map-wrapper-premium {
border-radius: 28px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 12px 28px black;
}
.map-wrapper-premium iframe {
width: 100%;
height: 280px;
border: none;
display: block;
}
.address-premium {
background: rgba(0, 0, 0, 0.5);
border-radius: 22px;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 16px;
border-left: 4px solid #f33f3f;
}
.address-premium i {
font-size: 1.8rem;
color: #f33f3f;
}
/* ===== TÍTULO "HABLEMOS DE TU ÉXITO" - MISMO ESTILO QUE EQUIPO EJECUTIVO ===== */
.exito-header-wrapper {
text-align: center;
margin-bottom: 10px;
}
.exito-badge-premium {
text-align: center;
font-size: 1.2rem;
letter-spacing: 3px;
color: #ffffff !important;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
text-transform: uppercase;
font-weight: 700;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
width: auto;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ===== REDUCIR ESPACIO ENTRE HABLEMOS DE TU ÉXITO Y TARJETAS DE INSIGNIAS ===== */
.exito-header-wrapper {
margin-top: -40px !important;
margin-bottom: 5px !important;
}
.insignias-grid {
margin-top: -5px !important; /* Valor negativo para acercar más */
}
.insignia-card {
margin-top: 0px !important;
margin-bottom: 15px !important;
}
/* ===== CORREGIR COLOR DE TEXTO EN FORMULARIO DE CONTACTO ===== */
.input-premium input,
.input-premium select,
.input-premium textarea,
.input-premium input::placeholder,
.input-premium textarea::placeholder {
color: #1a1a1a !important; /* Texto negro */
font-size: 1rem !important; /* Tamaño más grande */
font-weight: 500 !important;
}
/* Para el texto dentro de los inputs mientras se escribe */
.input-premium input:focus,
.input-premium select:focus,
.input-premium textarea:focus {
color: #000000 !important; /* Negro puro al enfocar */
font-size: 1rem !important;
}
/* Para los placeholders (texto de ejemplo antes de escribir) */
.input-premium input::placeholder,
.input-premium textarea::placeholder {
color: #666666 !important; /* Gris oscuro, legible */
font-size: 0.95rem !important;
}
/* Para el select (desplegable) */
.input-premium select option {
color: #1a1a1a !important;
background: white !important;
}
/* Asegurar que todo el texto del formulario sea oscuro */
.input-premium input,
.input-premium textarea {
background-color: #ffffff !important;
border: 1px solid #ccc !important;
}
/* Contenedor principal del mapa */
.map-col-premium {
flex: 0 0 50% !important;
max-width: 50% !important;
display: flex !important;
justify-content: flex-start !important;
align-items: flex-start !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Wrapper del mapa */
.map-wrapper-premium {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Iframe del mapa */
.map-wrapper-premium iframe {
width: 100% !important;
height: 300px !important;
border: none !important;
display: block !important;
margin: 0 !important;
}
/* Tarjeta de dirección */
.address-premium {
margin: 20px 0 0 0 !important;
padding: 20px !important;
text-align: left !important;
width: 100% !important;
}
/* ===== EQUIPO EJECUTIVO - 4 TARJETAS EN LÍNEA ===== */
.team-staggered-premium {
margin: 20px 0 60px;
}
.team-badge-premium {
text-align: center;
font-size: 1.2rem;
letter-spacing: 3px;
color: #ffffff !important;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
text-transform: uppercase;
font-weight: 700;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
width: auto;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Grid de tarjetas ejecutivas */
.team-grid-premium {
display: flex !important;
flex-wrap: wrap !important; /* Permite que se envuelvan en pantallas pequeñas */
justify-content: center !important;
gap: 16px !important;
margin-top: 40px !important;
}
/* Cada tarjeta ejecutiva */
.team-card-premium {
border-radius: 28px;
width: 100% !important;
max-width: 280px !important;
min-width: 240px !important;
padding: 28px 16px 24px;
text-align: center;
border: 1px solid rgba(243, 63, 63, 0.3);
transition: 0.3s;
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.4);
flex: 1 1 auto;
}
/* Hover efecto */
.team-card-premium:hover {
transform: translateY(-6px);
border-color: rgba(243, 63, 63, 0.8);
background: rgba(0, 0, 0, 0.6);
}
/* Correo electrónico - UNA SOLA LÍNEA EN ESCRITORIO */
.team-card-premium a {
font-size: 0.78rem;
color: #F5A425 !important;
text-decoration: none;
border-bottom: 1px solid #f33f3f;
transition: 0.2s;
display: inline-block;
margin-top: 10px;
font-weight: 500;
white-space: nowrap;
overflow: visible;
max-width: 100%;
}
.team-card-premium a:hover {
color: #ffffff !important;
border-bottom-color: #ffffff;
}
/* Icono */
.team-icon-premium {
font-size: 2.4rem;
background: rgba(243, 63, 63, 0.2);
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 60px;
margin: 0 auto 16px;
color: #f33f3f;
}
/* Títulos y texto */
.team-card-premium h4 {
font-size: 1.2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 6px;
}
.team-card-premium p {
font-size: 0.8rem;
font-weight: 500;
color: #e0e0e0;
margin-bottom: 12px;
}
/* ============================================ */
/* RESPONSIVE - PANTALLAS GRANDES (hasta 1300px) */
/* ============================================ */
@media (max-width: 1300px) {
.team-card-premium {
max-width: 270px;
min-width: 230px;
padding: 26px 14px 22px;
}
.team-card-premium a {
font-size: 0.75rem;
}
.team-icon-premium {
width: 65px;
height: 65px;
font-size: 2.2rem;
}
}
/* ============================================ */
/* RESPONSIVE - PANTALLAS MEDIANAS (992px - 1200px) */
/* ============================================ */
@media (max-width: 1200px) {
.team-grid-premium {
gap: 14px !important;
}
.team-card-premium {
max-width: 260px;
min-width: 220px;
padding: 24px 12px 20px;
}
.team-card-premium a {
font-size: 0.72rem;
}
.team-card-premium h4 {
font-size: 1.1rem;
}
.team-card-premium p {
font-size: 0.75rem;
}
}
/* ============================================ */
/* RESPONSIVE - TABLET (768px - 991px) */
/* ============================================ */
@media (max-width: 991px) {
.team-grid-premium {
gap: 20px !important;
}
.team-card-premium {
max-width: 280px;
min-width: 240px;
flex: 0 0 auto;
padding: 28px 16px 24px;
}
/* En tablet, el correo puede ocupar 2 líneas si es necesario */
.team-card-premium a {
white-space: normal;
font-size: 0.75rem;
word-break: break-all;
}
.team-icon-premium {
width: 70px;
height: 70px;
font-size: 2.4rem;
}
.team-card-premium h4 {
font-size: 1.2rem;
}
}
/* ============================================ */
/* RESPONSIVE - TABLET PEQUEÑA (576px - 767px) */
/* ============================================ */
@media (max-width: 767px) {
.team-staggered-premium {
margin: 20px 0 40px;
}
.team-badge-premium {
font-size: 1rem;
padding: 10px 20px;
letter-spacing: 2px;
}
.team-grid-premium {
gap: 25px !important;
justify-content: center !important;
}
.team-card-premium {
max-width: 300px;
min-width: 260px;
width: 100%;
padding: 25px 15px 20px;
}
.team-card-premium a {
white-space: normal;
font-size: 0.75rem;
word-break: break-all;
}
.team-icon-premium {
width: 65px;
height: 65px;
font-size: 2.2rem;
margin-bottom: 14px;
}
.team-card-premium h4 {
font-size: 1.15rem;
}
.team-card-premium p {
font-size: 0.78rem;
}
}
/* ============================================ */
/* RESPONSIVE - MÓVIL (480px - 575px) */
/* ============================================ */
@media (max-width: 575px) {
.team-staggered-premium {
margin: 15px 0 35px;
}
.team-badge-premium {
font-size: 0.9rem;
padding: 8px 18px;
letter-spacing: 2px;
}
.team-grid-premium {
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
}
.team-card-premium {
max-width: 320px;
min-width: 280px;
width: 90%;
padding: 22px 15px 18px;
}
.team-card-premium a {
white-space: normal;
font-size: 0.73rem;
word-break: break-all;
}
.team-icon-premium {
width: 60px;
height: 60px;
font-size: 2rem;
margin-bottom: 12px;
}
.team-card-premium h4 {
font-size: 1.1rem;
}
.team-card-premium p {
font-size: 0.75rem;
}
}
/* ============================================ */
/* RESPONSIVE - MÓVIL MUY PEQUEÑO (menos de 480px) */
/* ============================================ */
@media (max-width: 480px) {
.team-badge-premium {
font-size: 0.8rem;
padding: 6px 14px;
letter-spacing: 1.5px;
}
.team-grid-premium {
gap: 18px !important;
}
.team-card-premium {
max-width: 280px;
min-width: 260px;
padding: 20px 12px 16px;
}
.team-card-premium a {
font-size: 0.7rem;
}
.team-icon-premium {
width: 55px;
height: 55px;
font-size: 1.8rem;
margin-bottom: 10px;
}
.team-card-premium h4 {
font-size: 1rem;
}
.team-card-premium p {
font-size: 0.7rem;
}
}
/* ===== MAPA GRANDE + DIRECCIÓN DEBAJO EN SECCIÓN CONTACTO ===== */
/* MAPA - con menos espacio abajo */
.map-wrapper-premium-grande {
width: 100% !important;
height: 540px !important;
border-radius: 24px !important;
overflow: hidden !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
margin-bottom: 40px !important; /* ← Cambiado: de 20px a 8px (menos espacio) */
}
.map-wrapper-premium-grande:hover {
transform: scale(1.01);
}
.mapa-grande-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* DIRECCIÓN - TARJETA MÁS GRANDE */
/* ===== DIRECCIÓN - TARJETA MUCHO MÁS GRANDE ===== */
.mapa-direccion-grande {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.85), rgba(8, 77, 130, 0.85)) !important;
backdrop-filter: blur(8px) !important;
border-radius: 28px !important; /* ← Bordes más grandes */
padding: 35px 35px !important; /* ← MUCHO MÁS GRANDE: de 25px 28px a 35px 35px */
display: flex !important;
align-items: center !important;
gap: 25px !important; /* ← Más espacio entre elementos */
border: 1px solid rgba(255, 255, 255, 0.2) !important;
margin-top: 10px !important; /* ← Pequeño margen superior */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; /* ← Sombra más pronunciada */
}
/* Icono mucho más grande */
.mapa-direccion-grande i {
font-size: 3.2rem !important; /* ← MUCHO MÁS GRANDE: de 2.5rem a 3.2rem */
color: #F5A425 !important;
}
/* Título mucho más grande */
.direccion-texto h4 {
font-size: 1.5rem !important; /* ← MUCHO MÁS GRANDE: de 1.2rem a 1.5rem */
font-weight: 800 !important; /* ← Más negrita */
color: #ffffff !important;
margin-bottom: 12px !important; /* ← Más espacio abajo */
letter-spacing: 1px !important; /* ← Espaciado entre letras */
}
/* Texto de dirección mucho más grande */
.direccion-texto p {
font-size: 1.1rem !important; /* ← MUCHO MÁS GRANDE: de 0.95rem a 1.1rem */
color: #f0f0f0 !important;
line-height: 1.6 !important; /* ← Más espacio entre líneas */
margin-bottom: 0 !important;
}
.mapa-direccion-grande:hover {
transform: translateY(-3px);
}
.mapa-direccion-grande i {
font-size:6rem;
color: #f5a425;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.direccion-texto {
flex: 1;
}
.direccion-texto h4 {
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
}
.direccion-texto p {
font-size: 1rem;
color: #e0e0e0;
line-height: 1.5;
margin-bottom: 10px;
}
.horarios {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.horarios i {
font-size: 1rem;
color: #F5A425;
margin: 0;
}
.horarios span {
font-size: 0.85rem;
color: #F5A425;
}
/* Ajuste de la columna del mapa para que sea igual de ancha que el formulario */
.map-col-premium {
flex: 1;
min-width: 280px;
display: flex;
flex-direction: column;
}
/* Responsive */
@media (max-width: 992px) {
.map-wrapper-premium-grande {
height: 320px;
}
.mapa-direccion-grande {
padding: 20px 25px;
}
.direccion-texto h4 {
font-size: 1.1rem;
}
.direccion-texto p {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.map-wrapper-premium-grande {
height: 280px;
}
.mapa-direccion-grande {
flex-direction: column;
text-align: center;
padding: 20px;
}
.mapa-direccion-grande i {
font-size: 2rem;
}
.horarios {
justify-content: center;
}
.direccion-texto h4 {
font-size: 1rem;
}
.direccion-texto p {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.map-wrapper-premium-grande {
height: 240px;
}
.mapa-direccion-grande {
padding: 15px;
}
.horarios span {
font-size: 0.75rem;
}
}
/* ===== ELIMINAR EFECTO DE AGRANDAMIENTO DEL MAPA ===== */
.map-wrapper-premium-grande {
transition: none !important; /* Elimina la transición suave */
}
.map-wrapper-premium-grande:hover {
transform: none !important; /* Elimina el agrandamiento al hacer hover */
scale: 1 !important;
}
/* Si el mapa tiene efecto de escala en hover */
.mapa-grande-iframe {
transition: none !important;
}
.mapa-grande-iframe:hover {
transform: none !important;
scale: 1 !important;
}
/* Para cualquier efecto de zoom en el contenedor del mapa */
.map-col-premium .map-wrapper-premium-grande {
transition: none !important;
}
.map-col-premium .map-wrapper-premium-grande:hover {
transform: none !important;
}
/* Si hay algún efecto en la tarjeta de dirección */
.mapa-direccion-grande {
transition: none !important;
}
.mapa-direccion-grande:hover {
transform: none !important;
}
/* jess 1*/
/* CORRECCIÓN: Select visible en formulario de contacto */
.input-premium select,
.input-premium select option {
color: #515355 !important;
background-color: #ffffff !important;
}
.input-premium select {
color: #aca0a0ee !important;
}
/* ==============================================
FORZAR COLOR DEL MENÚ COMPLETO (INCLUYE SERVICIOS)
============================================== */
/* Todos los elementos del menú - sin cambios de color al hover */
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active,
.header-area .main-nav .nav li.has-sub > a:hover,
.header-area .main-nav .nav li.has-sub.active > a {
background: transparent !important;
color: #ffffff !important;
}
.header-area .main-nav .nav li.has-sub > a:hover {
background: transparent !important;
color: #ffffff !important;
}
/* Para la flecha del submenú (la que está junto a SERVICIOS) */
.header-area .main-nav .nav li.has-sub:hover > a i,
.header-area .main-nav .nav li.has-sub:hover > a .fa-chevron-down {
color: #f1f0f0!important;
}
/* Asegurar que todo el texto dentro del enlace cambie */
.header-area .main-nav .nav li a:hover *,
.header-area .main-nav .nav li a.active * {
color: #141414 !important;
}
/* Efecto hover SOLO para el menú principal (primer nivel) - AZUL SÓLIDO */
.header-area .main-nav > .nav > li > a:hover {
background: #4DB8FF !important; /* Fondo azul sólido */
color: #ffffff !important; /* Texto blanco */
border-radius: 30px !important; /* Bordes redondeados */
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.4) !important; /* Sombra azul */
transition: all 0.3s ease !important;
}
/* Para SERVICIOS (que tiene submenú) - mismo efecto azul sólido */
.header-area .main-nav > .nav > li.has-sub > a:hover {
background: #4DB8FF !important; /* Fondo azul sólido */
color: #ffffff !important; /* Texto blanco */
border-radius: 30px !important;
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.4) !important;
}
/* Iconos del menú principal - se vuelven blancos */
.header-area .main-nav > .nav > li > a:hover i {
color: #ffffff !important;
}
/* Flecha de SERVICIOS - se vuelve blanca */
.header-area .main-nav > .nav > li.has-sub > a:hover::after {
color: #ffffff !important;
}
/* ===== SUBMENÚS - NO SE AFECTAN (SE MANTIENEN) ===== */
.sub-menu li a:hover {
background: transparent !important;
color: #000000 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.sub-menu li a:hover i {
color: #ffffff !important;
}
/* ==============================================
CORREGIR SUBMENÚ - QUE NO DESAPAREZCA
============================================== */
/* Hacer que el área del submenú sea más accesible */
.has-sub {
position: relative;
}
/* Crear un puente invisible entre el menú y el submenú */
.has-sub::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 15px;
background: transparent;
z-index: 998;
}
/* Ajustar la posición del submenú */
.sub-menu {
position: absolute;
top: 100% !important; /* ← Justo debajo del menú */
left: 0;
background: #ffffff;
border-radius: 12px;
padding: 4px 0;
min-width: 220px;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.541);
z-index: 1000;
margin-top: 0 !important;
}
/* Mostrar submenú al hacer hover */
.has-sub:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 100% !important; /* ← Mantener justo debajo */
margin-top: 0px; /* ← Pequeño espacio para no estar pegado */
}
/* Opcional: Retraso para que no desaparezca muy rápido */
.has-sub .sub-menu {
pointer-events: none;
}
.has-sub:hover .sub-menu {
pointer-events: auto;
}
/*jess 5*/
.sub-menu {
background: #f5f5f5; /* Gris muy claro */
/* o */
background: #0a4d82; /* Azul institucional */
/* o */
background: #f5a425; /* Naranja */
/* o */
background: #9e9797; /* Azul oscuro */
}
/* ===== REDES SOCIALES DEBAJO DEL EQUIPO CORPORATIVO ===== */
.team-social-wrapper {
margin-top: 50px;
text-align: center;
width: 100%;
padding: 20px 0 10px;
}
.team-social-title {
font-family: 'Poppins', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
color: #f5a425;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
/* Líneas decorativas a los lados del título */
.team-social-title::before,
.team-social-title::after {
content: '';
position: absolute;
top: 50%;
width: 50px;
height: 1px;
background: linear-gradient(90deg, transparent, #f33f3f, transparent);
}
.team-social-title::before {
right: calc(100% + 20px);
background: linear-gradient(90deg, #f33f3f, transparent);
}
.team-social-title::after {
left: calc(100% + 20px);
background: linear-gradient(90deg, transparent, #f33f3f);
}
/* Contenedor de iconos */
.team-social-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
/* Cada icono de red social - BLANCO */
.team-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
color: #ffffff !important; /* ← ICONOS BLANCOS */
font-size: 1.3rem;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Efecto hover */
.team-social-icon:hover {
background: #f33f3f;
color: #ffffff !important;
transform: translateY(-4px);
border-color: #f33f3f;
}
/* ===== AVISO DE PRIVACIDAD FORMAL ===== */
.privacy-notice-formal {
margin-top: 50px;
padding: 30px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.15);
border-radius: 16px;
}
.privacy-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: 20px;
text-align: left;
}
.privacy-icon {
flex-shrink: 0;
}
.privacy-icon i {
font-size: 2rem;
color: #f5a425;
opacity: 0.8;
}
.privacy-text {
flex: 1;
}
.privacy-text h4 {
font-family: 'Poppins', sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #f5a425;
margin-bottom: 8px;
letter-spacing: 1.5px;
}
.privacy-text p {
font-size: 0.7rem;
line-height: 1.5;
color: #c0c0c0;
margin-bottom: 12px;
}
.privacy-links {
font-size: 0.65rem;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.privacy-links a {
color: #F5A425;
text-decoration: none;
transition: color 0.2s;
}
.privacy-links a:hover {
color: #f33f3f;
text-decoration: underline;
}
.separator {
color: #4a5568;
font-size: 0.6rem;
}
.copyright {
color: #6b7280;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.team-social-title::before,
.team-social-title::after {
width: 30px;
}
.team-social-title::before {
right: calc(100% + 12px);
}
.team-social-title::after {
left: calc(100% + 12px);
}
.team-social-icon {
width: 42px;
height: 42px;
font-size: 1.1rem;
}
.privacy-container {
flex-direction: column;
text-align: center;
align-items: center;
}
.privacy-text {
text-align: center;
}
.privacy-links {
justify-content: center;
}
}
@media (max-width: 576px) {
.team-social-wrapper {
margin-top: 35px;
}
.team-social-title {
font-size: 0.7rem;
letter-spacing: 3px;
}
.team-social-title::before,
.team-social-title::after {
width: 20px;
}
.team-social-title::before {
right: calc(100% + 8px);
}
.team-social-title::after {
left: calc(100% + 8px);
}
.team-social-icon {
width: 36px;
height: 36px;
font-size: 0.95rem;
}
.privacy-notice-formal {
padding: 20px 15px;
}
.privacy-text p {
font-size: 0.6rem;
}
.privacy-links {
font-size: 0.55rem;
gap: 8px;
}
}
/* ===== REDES SOCIALES DEBAJO DEL EQUIPO CORPORATIVO ===== */
.team-social-wrapper {
margin-top: 50px;
text-align: center;
width: 100%;
padding: 20px 0 10px;
text-align: center;
}
.team-social-title {
font-family: 'Poppins', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
color: #faf7f2;
margin-bottom: 20px;
text-align: center;
display: inline-block;
width: auto;
position: static !important;
}
/* FORZAR QUE NO APAREZCAN LAS LÍNEAS */
.team-social-title::before,
.team-social-title::after {
display: none !important;
content: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Contenedor de iconos */
.team-social-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
/* Cada icono de red social - BLANCO */
.team-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
color: #ffffff !important; /* ← ICONOS BLANCOS */
font-size: 1.3rem;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Efecto hover */
.team-social-icon:hover {
background: #f33f3f;
color: #ffffff !important;
transform: translateY(-4px);
border-color: #f33f3f;
}
.team-social-title::before {
right: calc(100% + 20px);
background: linear-gradient(90deg, #f33f3f, transparent);
}
.team-social-title::after {
left: calc(100% + 20px);
background: linear-gradient(90deg, transparent, #f33f3f);
}
/* ===== MODAL AVISO DE PRIVACIDAD - UN SOLO SCROLL (NAVEGADOR) ===== */
.privacidad-wrapper {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.btn-privacidad-modal {
background: #8B3A3A;
border: none;
color: #ffffff;
padding: 12px 32px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 12px rgba(139, 58, 58, 0.3);
}
.btn-privacidad-modal:hover {
background: #6B2A2A;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(139, 58, 58, 0.4);
}
/* Overlay del modal - Fondo oscuro */
.privacidad-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
z-index: 10000;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
/* Permitir scroll en el overlay (navegador) */
overflow-y: auto;
overflow-x: hidden;
}
.privacidad-modal-overlay.active {
display: flex;
opacity: 1;
}
/* Contenedor del modal - SIN SCROLL INTERNO */
.privacidad-modal-container {
width: 90%;
max-width: 200px;
background: #F5EFE6;
border-radius: 24px;
overflow: visible; /* ← Sin scroll interno */
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(139, 58, 58, 0.4);
/* Eliminar cualquier scroll interno */
max-height: 15vh;
height: auto;
}
.privacidad-modal-overlay.active .privacidad-modal-container {
transform: scale(1);
}
/* Header del modal */
.privacidad-modal-header {
background: #8B3A3A;
padding: 18px 25px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.privacidad-modal-header h3 {
color: #F5EFE6;
margin: 0;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 1px;
}
.privacidad-modal-header h3 i {
margin-right: 10px;
}
/* Botón de cerrar (X) */
.privacidad-modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: #F5EFE6;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 1.3rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.privacidad-modal-close:hover {
background: #ffffff;
color: #8B3A3A;
transform: rotate(90deg);
}
/* Body del modal - SIN SCROLL INTERNO */
.privacidad-modal-body {
padding: 30px 35px;
color: #2C2420;
line-height: 1.8;
font-size: 0.95rem;
text-align: justify;
background: #F5EFE6;
/* Eliminar cualquier scroll interno */
overflow: visible;
max-height: none;
height: auto;
}
/* Estilos de texto dentro del body */
.privacidad-modal-body p {
margin-bottom: 16px;
color: #2C2420;
}
.privacidad-modal-body strong {
color: #8B3A3A;
font-weight: 700;
}
.privacidad-modal-body a {
color: #8B3A3A;
text-decoration: none;
border-bottom: 1px solid #8B3A3A;
}
.privacidad-modal-body a:hover {
color: #6B2A2A;
border-bottom-color: #6B2A2A;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.privacidad-modal-container {
width: 92%;
max-width: 600px;
margin: 20px auto;
}
.privacidad-modal-header {
padding: 14px 20px;
}
.privacidad-modal-header h3 {
font-size: 1rem;
}
.privacidad-modal-body {
padding: 20px 25px;
font-size: 0.85rem;
line-height: 1.7;
}
.privacidad-modal-close {
width: 32px;
height: 32px;
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.privacidad-modal-container {
width: 95%;
max-width: 500px;
margin: 15px auto;
}
.privacidad-modal-header {
padding: 12px 16px;
}
.privacidad-modal-header h3 {
font-size: 0.85rem;
}
.privacidad-modal-body {
padding: 16px 18px;
font-size: 0.8rem;
line-height: 1.6;
}
.privacidad-modal-close {
width: 28px;
height: 28px;
font-size: 1rem;
}
}
/* ===== TEXTO MÁS GRANDE EN EL MODAL ===== */
.privacidad-modal-body {
font-size: 1rem !important; /* Texto más grande (antes 0.85rem) */
line-height: 1.8 !important; /* Más espacio entre líneas */
}
.privacidad-modal-body p {
font-size: 1rem !important;
line-height: 1.8 !important;
margin-bottom: 16px !important;
}
.privacidad-modal-body h4 {
font-size: 1.1rem !important;
}
/* Responsive: en móvil sigue siendo legible */
@media (max-width: 576px) {
.privacidad-modal-body {
font-size: 0.9rem !important;
}
.privacidad-modal-body p {
font-size: 0.9rem !important;
}
}
/* Forzar que el modal solo se cierre con el botón */
.privacidad-modal-overlay {
pointer-events: none; /* Evita que el overlay reciba clics */
}
.privacidad-modal-container {
pointer-events: auto; /* El contenido del modal sí recibe clics */
}
/* Responsive */
@media (max-width: 576px) {
.privacidad-modal-container {
width: 95%;
}
.privacidad-modal-body {
padding: 20px;
font-size: 0.8rem;
}
.privacidad-modal-header h3 {
font-size: 1rem;
}
.btn-privacidad-modal {
padding: 10px 24px;
font-size: 0.8rem;
}
}
/* ===== PRESENCIA iT-Global ===== */
.presencia-header-wrapper {
text-align: center;
margin-bottom: 30px;
margin-top: 40px;
}
.presencia-badge-premium {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: none;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
margin: 0 auto;
}
/* captcha */
/* ============================================
ESTILOS PARA SECURIMAGE CAPTCHA
(Manteniendo la estructura original)
============================================ */
.captcha-premium-wrapper {
border-radius: 28px;
padding: 20px 24px;
margin-bottom: 28px;
border: 1px dashed rgba(243, 63, 63, 0.4);
background: rgba(0, 0, 0, 0.2);
}
.captcha-label-premium {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
font-size: 0.85rem;
color: #e0e0e0;
}
.captcha-code-display-securimage {
padding: 6px 14px;
border-radius: 30px;
font-family: monospace;
font-size: 0.85rem;
font-weight: normal;
letter-spacing: normal;
color: #f33f3f;
background: rgba(0, 0, 0, 0.3);
}
/* Wrapper de imagen y botón */
.securimage-img-wrapper {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.securimage-img-premium {
border: 1px solid rgba(243, 63, 63, 0.4);
border-radius: 12px;
background: white;
height: 65px;
width: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: transform 0.2s;
}
.securimage-img-premium:hover {
transform: scale(1.02);
}
/* Botón de refrescar - respetando estilo original */
.btn-refresh-captcha-securimage {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(243, 63, 63, 0.4);
color: #f33f3f;
cursor: pointer;
font-size: 0.9rem;
padding: 8px 18px;
border-radius: 30px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.btn-refresh-captcha-securimage:hover {
background: #f33f3f;
color: white;
transform: scale(1.02);
border-color: #f33f3f;
}
/* Input wrapper */
.captcha-input-wrapper-premium {
position: relative;
margin-top: 10px;
}
.captcha-input-icon-premium {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #f33f3f;
font-size: 1rem;
z-index: 2;
}
.captcha-input-premium {
width: 100%;
padding: 14px 20px 14px 48px;
font-size: 1rem;
font-family: monospace;
letter-spacing: 1px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(243, 63, 63, 0.3);
border-radius: 30px;
color: #1e1e1e;
transition: all 0.3s ease;
}
.captcha-input-premium:focus {
outline: none;
border-color: #f33f3f;
box-shadow: 0 0 0 3px rgba(243, 63, 63, 0.2);
background: white;
}
.captcha-input-premium::placeholder {
color: #9ca3cf;
font-family: inherit;
letter-spacing: normal;
}
.captcha-error-msg {
display: none;
margin-top: 12px;
font-size: 0.75rem;
color: #ff6b6b;
text-align: left;
padding-left: 5px;
}
/* Responsive */
@media (max-width: 576px) {
.captcha-premium-wrapper {
padding: 15px 18px;
}
.securimage-img-premium {
height: 50px;
}
.btn-refresh-captcha-securimage {
padding: 6px 14px;
font-size: 0.75rem;
}
.captcha-input-premium {
padding: 12px 16px 12px 42px;
font-size: 0.9rem;
}
}
/* ==============================================
BOTÓN ENVIAR MEJORADO Y MÁS GRANDE
============================================== */
.btn-submit-premium {
background: linear-gradient(135deg, #f33f3f, #bc1722);
border: none;
color: #ffffff;
padding: 16px 32px;
border-radius: 50px;
font-size: 1rem;
font-weight: 700;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
text-transform: uppercase;
margin-top: 10px;
box-shadow: 0 6px 20px rgba(188, 23, 34, 0.4);
}
.btn-submit-premium:hover {
background: linear-gradient(135deg, #bc1722, #8a1119);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(188, 23, 34, 0.5);
}
.btn-submit-premium:active {
transform: translateY(0);
}
.btn-submit-premium i {
font-size: 1rem;
transition: transform 0.3s ease;
}
.btn-submit-premium:hover i {
transform: translateX(5px);
}
/* ===== FORMULARIO MÁS GRANDE ===== */
.form-card-premium {
backdrop-filter: blur(10px);
border-radius: 32px;
padding: 50px 45px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.3s ease;
background: rgba(0, 0, 0, 0.3);
}
.form-card-premium h3 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
color: #ffffff;
}
.form-card-premium p {
font-size: 1rem;
margin-bottom: 35px;
color: #cbd5e1;
}
.input-premium {
margin-bottom: 28px;
}
.input-premium i {
font-size: 1.1rem;
left: 20px;
}
.input-premium input,
.input-premium select,
.input-premium textarea {
padding: 16px 20px 16px 52px;
font-size: 1rem;
border-radius: 30px;
background: rgba(255, 255, 255, 0.95);
}
.input-premium textarea {
padding: 16px 20px 16px 52px;
min-height: 120px;
}
/* Ajustes responsive */
@media (max-width: 768px) {
.form-card-premium {
padding: 35px 25px;
}
.form-card-premium h3 {
font-size: 1.6rem;
}
.btn-submit-premium {
padding: 14px 28px;
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.form-card-premium {
padding: 25px 20px;
}
.form-card-premium h3 {
font-size: 1.4rem;
}
.input-premium input,
.input-premium select,
.input-premium textarea {
padding: 14px 16px 14px 45px;
font-size: 0.9rem;
}
}
/* ============================================
SECCIÓN NETSUITE - Estilo corporativo NetSuite
Paleta: #1a4d3b (verde NetSuite), #f5a425 (naranja), #ffffff
============================================ */
.banda4-section {
background:rgba(58, 58, 58, 0.5); /*FONDO DE BANDA1*/
padding: 60px 0;
width: 100%;
overflow-x: hidden;
}
.banda4-section .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}
/* Fila de columnas */
.banda4-row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.banda4-col {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}
@media (max-width: 991px) {
.banda4-col {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
}
}
/* Estilos de texto NetSuite */
.banda4-site-header {
margin: 10px;
text-align: left;
width: 100%;
}
.banda4-site-header h1 {
font-size: 2rem;
margin-bottom: 15px;
color: white;
font-weight: 700;
}
.banda4-site-header p {
font-size: 0.9rem;
line-height: 1.6;
color: white;
}
.banda4-site-header img {
max-width: 60%;
margin-bottom: 20px;
}
/* Grid de botones NetSuite */
.banda4-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.banda4-grid__item {
flex: 0 0 calc(50% - 15px);
margin: 0;
}
@media (max-width: 768px) {
.banda4-grid__item {
flex: 0 0 calc(100% - 15px);
}
}
/* Botones estilo NetSuite */
.banda4-product {
background: transparent;
transition: all 0.3s ease;
text-align: center;
}
.banda4-product:hover {
background: rgba(255, 255, 255, 0.15);
border-radius: 10px;
}
.banda4-tm-nav-link {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 140px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
}
.banda4-tm-nav-link:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.02);
border-color: #f5a425;
}
.banda4-tm-nav-icon {
font-size: 2.2rem;
margin-bottom: 10px;
}
.banda4-tm-nav-text {
font-size: 0.85rem;
font-weight: 500;
}
/* Tarjeta de información NetSuite */
.banda4-info-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
text-align: center;
margin-top: 30px;
}
.banda4-info-card i {
color: #f5a425;
}
.banda4-info-card hr {
background: rgba(255, 255, 255, 0.2);
margin: 15px 0;
}
.banda4-badge-custom {
background: #f5a425;
padding: 4px 12px;
margin: 3px;
display: inline-block;
border-radius: 20px;
font-size: 0.7rem;
color: #1e1e1e;
font-weight: 600;
}
/* Imagen con hover NetSuite */
.banda4-image-hover-container {
margin-top: 30px;
}
.banda4-hover-image-card {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
min-height: 280px;
}
.banda4-hover-image-card:hover {
transform: translateY(-5px);
}
.banda4-hover-image {
width: 70%;
height: auto;
display: block;
transition: transform 0.5s ease;
margin: 0 auto;
}
.banda4-hover-image-card:hover .banda4-hover-image {
transform: scale(1.05);
}
.banda4-hover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(13, 102, 171, 0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 15px;
}
.banda4-hover-image-card:hover .banda4-hover-overlay {
opacity: 1;
}
.banda4-overlay-content {
text-align: center;
color: white;
padding: 20px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.banda4-hover-image-card:hover .banda4-overlay-content {
transform: translateY(0);
}
.banda4-overlay-content i {
font-size: 2rem;
margin-bottom: 10px;
animation: banda4-pulse 2s infinite;
}
.banda4-overlay-content h3 {
font-size: 1rem;
margin-bottom: 8px;
}
.banda4-overlay-content p {
font-size: 0.75rem;
margin-bottom: 10px;
}
.banda4-overlay-btn {
background-color: #f5a425;
color: #1e1e1e;
padding: 6px 18px;
border-radius: 25px;
font-size: 0.7rem;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.banda4-overlay-btn:hover {
background-color: white;
color: #1a4d3b;
}
/* Estadísticas NetSuite */
.banda4-image-stats {
display: flex;
justify-content: space-between;
gap: 15px;
margin-top: 20px;
}
.banda4-stat-item {
flex: 1;
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 12px 8px;
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.banda4-stat-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.banda4-stat-item i {
font-size: 1.3rem;
color: #f5a425;
display: block;
margin-bottom: 5px;
}
.banda4-stat-item span {
display: block;
font-size: 1rem;
font-weight: bold;
color: white;
}
.banda4-stat-item small {
display: block;
font-size: 0.65rem;
opacity: 0.8;
}
@keyframes banda4-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Ajustes responsivos */
@media (max-width: 768px) {
.banda4-site-header {
text-align: center;
}
.banda4-site-header img {
display: block;
margin: 0 auto 15px auto;
}
.banda4-image-stats {
flex-wrap: wrap;
}
.banda4-stat-item {
flex: 0 0 calc(33.333% - 10px);
}
}
@media (max-width: 480px) {
.banda4-stat-item {
flex: 0 0 100%;
margin-bottom: 10px;
}
.banda4-tm-nav-link {
height: 110px !important;
}
}
.banda2-modal-grid p {
color: #ffffff !important; /* Color del texto JESS*/
font-size: 1rem !important;
line-height: 1.7 !important;
}
/*jess modo vista CEL*/
/* ===== MENÚ HAMBURGUESA PARA MÓVIL ===== */
/* Botón hamburguesa - oculto en desktop */
.menu-toggle {
display: none;
background: #f5a425;
border: none;
width: 45px;
height: 45px;
border-radius: 8px;
cursor: pointer;
position: relative;
z-index: 9999;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background: white;
border-radius: 3px;
transition: all 0.3s ease;
}
/* Animación del botón cuando está activo */
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Responsive - Tablets y móviles */
@media (max-width: 992px) {
.header-area .main-nav {
flex-wrap: wrap;
padding: 12px 20px;
}
/* Mostrar botón hamburguesa */
.menu-toggle {
display: flex;
}
/* Ocultar menú por defecto en móvil */
.main-nav .nav {
display: none;
width: 100%;
flex-direction: column;
background: #0a4d82;
border-radius: 16px;
padding: 20px;
margin-top: 15px;
gap: 10px;
}
/* Mostrar menú cuando está activo */
.main-nav .nav.active {
display: flex;
}
/* Estilos de los items del menú en móvil */
.main-nav .nav li {
width: 100%;
text-align: center;
}
.main-nav .nav li a {
display: block;
padding: 12px 16px;
font-size: 14px !important;
}
/* Submenú en móvil */
.has-sub {
position: relative;
}
/* Submenús en móvil - CORREGIDO */
.has-sub > a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px;
}
.sub-menu {
position: static;
opacity: 1;
visibility: visible;
display: none;
background: rgba(255, 255, 255, 0.1);
margin-top: 8px;
border-radius: 12px;
box-shadow: none;
}
.has-sub.active .sub-menu {
display: block;
}
.sub-menu li a {
padding: 10px 20px;
color: white !important;
text-align: center;
}
/* Flecha del submenú en móvil */
.has-sub > a::after {
content: '\f107';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 12px;
transition: transform 0.3s;
}
.has-sub.active > a::after {
transform: rotate(180deg);
}
}
/*MENU HABURGESA CEL JESS */
/* ===== SUB-HEADER EN MÓVIL - UNA SOLA LÍNEA ===== */
@media (max-width: 768px) {
/* Reducir altura del sub-header */
.sub-header {
padding: 4px 0 !important;
min-height: auto !important;
position: relative !important;
}
.sub-header .container {
padding: 0 12px !important;
}
.sub-header .row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0 !important;
}
/* Columna izquierda - Idiomas */
.sub-header .col-lg-6.col-sm-6:first-child {
flex: 0 0 auto !important;
width: auto !important;
text-align: left !important;
}
/* Columna derecha - Redes sociales */
.sub-header .col-lg-6.col-sm-6:last-child {
flex: 0 0 auto !important;
width: auto !important;
text-align: right !important;
}
/* Selector de idiomas */
.language-selector {
display: flex !important;
gap: 8px !important;
background: transparent !important;
padding: 0 !important;
}
.language-selector a {
font-size: 10px !important;
padding: 2px 6px !important;
}
/* Redes sociales - más pequeños */
.right-icons ul {
display: flex !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
}
.right-icons ul li a {
width: 28px !important;
height: 28px !important;
font-size: 12px !important;
background: transparent !important;
}
.right-icons ul li a:hover {
background: rgba(255, 255, 255, 0.2) !important;
transform: none !important;
}
}
/* ===== MENÚ HAMBURGUESA JESS ===== */
@media (max-width: 992px) {
/* Botón hamburguesa */
.menu-toggle {
display: flex !important;
background: #f5a425;
border: none;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
}
.menu-toggle span {
width: 22px;
height: 2.5px;
background: white;
border-radius: 3px;
}
/* Ocultar menú normal */
.main-nav .nav {
display: none !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0a4d82;
flex-direction: column;
padding: 15px;
margin: 0;
border-radius: 0 0 16px 16px;
z-index: 1000;
}
.main-nav .nav.active {
display: flex !important;
}
.main-nav .nav li {
text-align: center;
width: 100%;
}
.main-nav .nav li a {
padding: 10px !important;
display: block;
}
/* Submenú en móvil */
.sub-menu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
display: none !important;
background: rgba(255,255,255,0.1) !important;
margin-top: 5px;
}
.has-sub.active .sub-menu {
display: block !important;
}
.has-sub > a::after {
content: " ▼";
font-size: 10px;
}
}
/* ===== QUITAR ESPACIO SUPERIOR EN MÓVIL ===== */
@media (max-width: 768px) {
/* Reducir padding del body */
body {
padding-top: 60px !important;
}
/* Reducir altura del sub-header */
.sub-header {
padding: 2px 0 !important;
position: fixed !important;
top: 0 !important;
background: #2777b9 !important;
}
/* Reducir espacio del header principal */
.header-area {
top: 32px !important;
}
/* Espacio general */
.banner-split-container {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* Ajuste específico para móviles muy pequeños */
@media (max-width: 480px) {
body {
padding-top: 55px !important;
}
.header-area {
top: 28px !important;
}
}
/* ===== TÍTULO CON FONDO BLANCO - FORZADO SUBIR ===== */
.titulo-fondo-blanco {
text-align: center !important;
margin: -400px auto 100px auto !important; /* Sube 100px */
position: relative !important;
z-index: 10 !important;
}
.titulo-fondo-blanco-contenedor {
background: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 15px !important;
padding: 12px 35px !important;
border-radius: 12px !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
.titulo-fondo-blanco-linea {
width: 4px !important;
height: 40px !important;
background: #0D66AB !important;
border-radius: 2px !important;
}
.titulo-fondo-blanco h1 {
font-family: 'Poppins', sans-serif !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
color: #0D66AB !important;
margin: 0 !important;
letter-spacing: 3px !important;
}
/* ===== MODAL AVISO DE PRIVACIDAD - VERSIÓN FINAL ===== */
.privacidad-wrapper {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.btn-privacidad-modal {
background: #8B3A3A;
border: none;
color: #ffffff;
padding: 12px 32px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 12px rgba(139, 58, 58, 0.3);
}
.btn-privacidad-modal:hover {
background: #6B2A2A;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(139, 58, 58, 0.4);
}
/* Overlay */
.privacidad-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
z-index: 10000;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.privacidad-modal-overlay.active {
display: flex;
opacity: 1;
}
/* Contenedor - RESPONSIVE */
.privacidad-modal-container {
width: 90%;
max-width: 750px;
background: #F5EFE6;
border-radius: 20px;
overflow: hidden;
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(139, 58, 58, 0.3);
max-height: 70vh;
display: flex;
flex-direction: column;
}
.privacidad-modal-overlay.active .privacidad-modal-container {
transform: scale(1);
}
/* Header */
.privacidad-modal-header {
background: #8B3A3A;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.privacidad-modal-header h3 {
color: #F5EFE6;
margin: 0;
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
}
.privacidad-modal-header h3 i {
margin-right: 8px;
}
/* Botón cerrar */
.privacidad-modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: #F5EFE6;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 1.1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.privacidad-modal-close:hover {
background: #ffffff;
color: #8B3A3A;
transform: rotate(90deg);
}
/* Body - TEXTO CON FORMATO LIGERO */
.privacidad-modal-body {
padding: 20px 25px;
color: #2C2420;
line-height: 1.6;
font-size: 0.85rem;
text-align: left;
background: #F5EFE6;
overflow-y: auto;
flex: 1;
}
.privacidad-modal-body p {
margin-bottom: 12px;
}
.privacidad-modal-body strong {
color: #8B3A3A;
font-weight: 700;
}
.privacidad-modal-body a {
color: #8B3A3A;
text-decoration: none;
border-bottom: 1px solid #8B3A3A;
}
.privacidad-modal-body a:hover {
color: #6B2A2A;
border-bottom-color: #6B2A2A;
}
/* Scroll bonito */
.privacidad-modal-body::-webkit-scrollbar {
width: 5px;
}
.privacidad-modal-body::-webkit-scrollbar-track {
background: #E0D6CC;
border-radius: 3px;
}
.privacidad-modal-body::-webkit-scrollbar-thumb {
background: #8B3A3A;
border-radius: 3px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.privacidad-modal-container {
width: 92%;
max-width: 90%;
max-height: 75vh;
}
.privacidad-modal-header {
padding: 10px 16px;
}
.privacidad-modal-header h3 {
font-size: 0.85rem;
}
.privacidad-modal-body {
padding: 15px 20px;
font-size: 0.75rem;
line-height: 1.5;
}
.privacidad-modal-close {
width: 28px;
height: 28px;
font-size: 1rem;
}
}
@media (max-width: 576px) {
.privacidad-modal-container {
width: 95%;
max-height: 80vh;
}
.privacidad-modal-header {
padding: 8px 12px;
}
.privacidad-modal-header h3 {
font-size: 0.75rem;
}
.privacidad-modal-body {
padding: 12px 15px;
font-size: 0.7rem;
line-height: 1.45;
}
.privacidad-modal-close {
width: 26px;
height: 26px;
font-size: 0.9rem;
}
}
/************ Separador entre Hechos e Insignias ************/
.separador-hechos-insignias {
height: 100px;
margin: 20px 0;
}
/* Versión responsive */
@media (max-width: 768px) {
.separador-hechos-insignias {
height: 40px;
margin: 10px 0;
}
}
/* ===== ESTILOS SECCIÓN "¿POR QUÉ ELEGIR IT GLOBAL SOLUTIONS?" ===== */
/* ← Agrega o reduce espacio entre elementos*/
.porque-elegir-section {
padding: 80px 0 20px 0;
position: relative;
z-index: 2;
}
/* Tarjeta principal */
.elegir-card-principal {
background: rgba(10, 77, 130, 0.15);
backdrop-filter: blur(10px);
border-radius: 28px;
padding: 40px;
margin-bottom: 60px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.elegir-card-principal:hover {
transform: translateY(-5px);
border-color: rgba(13, 102, 171, 0.6);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}
.elegir-texto-principal h2 {
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
}
.highlight-text {
color: #0D66AB;
position: relative;
display: inline-block;
}
.highlight-text::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #0D66AB, #4facfe);
border-radius: 3px;
}
.elegir-texto-principal p {
color: #e0e0e0;
line-height: 1.7;
margin-bottom: 20px;
font-size: 1rem;
}
.elegir-badge-socio {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(13, 102, 171, 0.2);
border-left: 4px solid #0D66AB;
padding: 12px 20px;
border-radius: 12px;
margin-top: 15px;
}
.elegir-badge-socio i {
font-size: 1.5rem;
color: #0D66AB;
}
.elegir-badge-socio span {
font-weight: 500;
color: #ffffff;
font-size: 0.9rem;
}
/* Icono central animado */
.elegir-video-wrapper {
position: relative;
width: 100%;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.3), rgba(0, 0, 0, 0.3));
border-radius: 24px;
overflow: hidden;
}
.elegir-icono-central {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
animation: pulse-icon 2s infinite;
}
.elegir-icono-central i {
font-size: 3rem;
color: #ffffff;
}
.elegir-efecto-ondas {
position: absolute;
width: 100%;
height: 100%;
border-radius: 24px;
background: radial-gradient(circle, rgba(13, 102, 171, 0.2) 0%, transparent 70%);
animation: ripple 3s infinite;
}
@keyframes pulse-icon {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 102, 171, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(13, 102, 171, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 102, 171, 0); }
}
@keyframes ripple {
0% { opacity: 0.6; transform: scale(0.8); }
100% { opacity: 0; transform: scale(1.8); }
}
/* Grid de beneficios */
.elegir-beneficios-grid {
margin-bottom: 60px;
}
.elegir-beneficio-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 30px 20px;
margin-bottom: 25px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
}
.elegir-beneficio-card:hover {
transform: translateY(-8px);
border-color: rgba(13, 102, 171, 0.5);
background: rgba(13, 102, 171, 0.1);
}
.elegir-beneficio-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto;
transition: all 0.3s ease;
}
.elegir-beneficio-card:hover .elegir-beneficio-icon {
transform: rotateY(180deg);
border-radius: 50%;
}
.elegir-beneficio-icon i {
font-size: 2rem;
color: #ffffff;
}
.elegir-beneficio-card h4 {
font-size: 1.2rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
}
.elegir-beneficio-card p {
font-size: 0.85rem;
color: #c0c0c0;
line-height: 1.5;
margin: 0;
}
.elegir-card-hover-effect {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
pointer-events: none;
}
.elegir-beneficio-card:hover .elegir-card-hover-effect {
left: 100%;
}
/* Sección de soluciones (badges) */
.elegir-soluciones-wrapper {
background: rgba(0, 0, 0, 0.3);
border-radius: 24px;
padding: 35px 30px;
margin-bottom: 50px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.elegir-soluciones-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
justify-content: center;
}
.elegir-soluciones-header i {
font-size: 2rem;
color: #0D66AB;
}
.elegir-soluciones-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: #ffffff;
margin: 0;
}
.elegir-badges-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.elegir-badge {
background: linear-gradient(135deg, #0D66AB, #0a4d82);
padding: 8px 20px;
border-radius: 40px;
color: #ffffff;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
cursor: default;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.elegir-badge:hover {
transform: scale(1.05);
background: linear-gradient(135deg, #0a4d82, #0D66AB);
box-shadow: 0 4px 12px rgba(13, 102, 171, 0.4);
}
/* Sección de enfoque */
.elegir-enfoque-wrapper {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.15), rgba(0, 0, 0, 0.3));
border-radius: 24px;
padding: 40px 30px;
margin-bottom: 50px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.elegir-enfoque-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
justify-content: center;
}
.elegir-enfoque-header i {
font-size: 2rem;
color: #0D66AB;
}
.elegir-enfoque-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: #ffffff;
margin: 0;
}
.elegir-enfoque-texto p {
text-align: center;
color: #e0e0e0;
font-size: 1rem;
line-height: 1.7;
max-width: 800px;
margin: 0 auto 25px auto;
}
.elegir-frase-final {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
background: rgba(13, 102, 171, 0.2);
padding: 20px;
border-radius: 16px;
max-width: 700px;
margin: 0 auto;
border-left: 4px solid #0D66AB;
}
.elegir-frase-final i {
font-size: 2rem;
color: #0D66AB;
opacity: 0.7;
}
.elegir-frase-final span {
font-size: 1rem;
font-weight: 500;
color: #ffffff;
font-style: italic;
}
/* Botón CTA */
.elegir-btn-cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
color: #ffffff;
font-weight: 600;
font-size: 1rem;
padding: 14px 35px;
border-radius: 40px;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
box-shadow: 0 5px 15px rgba(13, 102, 171, 0.3);
margin-bottom: 900; /* ← Agrega o cambia este valor a 0 */
}
.elegir-btn-cta:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(13, 102, 171, 0.5);
background: linear-gradient(135deg, #0a4d82, #0D66AB);
color: #ffffff;
}
.elegir-btn-cta i {
transition: transform 0.3s ease;
}
.elegir-btn-cta:hover i {
transform: translateX(5px);
}
/* Responsive */
@media (max-width: 768px) {
.porque-elegir-section {
padding: 50px 0;
}
.elegir-card-principal {
padding: 25px;
}
.elegir-texto-principal h2 {
font-size: 1.5rem;
}
.elegir-beneficio-card {
padding: 20px 15px;
}
.elegir-soluciones-header h3,
.elegir-enfoque-header h3 {
font-size: 1.2rem;
}
.elegir-badge {
font-size: 0.75rem;
padding: 6px 14px;
}
.elegir-frase-final {
flex-direction: column;
text-align: center;
}
}
/* Subir todo el bloque de soluciones NetSuite */
.elegir-soluciones-wrapper {
margin-top: -50px !important;
padding-top: 15px !important;
}
/* CSS complementario - solo mejora la apariencia */
.banda2-modal-overlay.active {
display: flex !important;
opacity: 1 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 9999 !important;
background: rgba(0, 0, 0, 0.85) !important;
backdrop-filter: blur(8px) !important;
}
/*ESTILO PARA EL MODO RESPONSIVO PARA CONTACTANOS -JESS*/
/* ============================================ */
/* RESPONSIVE: HABLEMOS DE TU ÉXITO (Contacto) */
/* ============================================ */
/* Tablet (768px - 991px) */
@media screen and (max-width: 991px) {
.contact-grid-premium {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.form-col-premium,
.map-col-premium {
width: 100% !important;
}
.form-card-premium {
padding: 30px 25px !important;
}
.map-wrapper-premium-grande {
height: 350px !important;
}
.mapa-grande-iframe {
height: 100% !important;
}
.mapa-direccion-grande {
flex-direction: column !important;
text-align: center !important;
gap: 15px !important;
padding: 20px !important;
}
.mapa-direccion-grande i {
margin-right: 0 !important;
margin-bottom: 10px !important;
}
.direccion-texto h4 {
font-size: 1.1rem !important;
}
.direccion-texto p {
font-size: 0.85rem !important;
}
}
/* Móvil (hasta 767px) */
@media screen and (max-width: 767px) {
/* Título */
.titulo-hablemos-exito {
margin: 0 auto 30px auto !important;
}
.titulo-hablemos-exito > div {
padding: 10px 20px !important;
gap: 10px !important;
}
.titulo-hablemos-exito h1 {
font-size: 0.9rem !important;
letter-spacing: 2px !important;
}
.titulo-hablemos-exito > div > div {
width: 3px !important;
height: 30px !important;
}
/* Contenedor principal */
.contact-premium-section {
padding: 40px 15px !important;
}
/* Formulario */
.form-card-premium {
padding: 25px 18px !important;
border-radius: 20px !important;
}
.form-card-premium h3 {
font-size: 1.5rem !important;
text-align: center !important;
}
.form-card-premium p {
font-size: 0.85rem !important;
text-align: center !important;
margin-bottom: 25px !important;
}
.input-premium {
margin-bottom: 18px !important;
}
.input-premium i {
width: 40px !important;
font-size: 0.9rem !important;
}
.input-premium input,
.input-premium select,
.input-premium textarea {
padding: 12px 15px !important;
font-size: 0.85rem !important;
}
/* CAPTCHA */
.captcha-premium-wrapper {
padding: 15px !important;
margin: 20px 0 !important;
}
.captcha-label-premium {
flex-wrap: wrap !important;
justify-content: center !important;
text-align: center !important;
gap: 8px !important;
margin-bottom: 15px !important;
}
.captcha-label-premium span {
font-size: 0.8rem !important;
}
.securimage-img-wrapper {
justify-content: center !important;
margin-bottom: 15px !important;
}
.securimage-img-premium {
max-width: 180px !important;
height: auto !important;
}
.captcha-input-wrapper-premium {
width: 100% !important;
}
.captcha-input-premium {
padding: 10px 12px !important;
font-size: 0.85rem !important;
}
/* Botón enviar */
.btn-submit-premium {
width: 100% !important;
padding: 14px 20px !important;
font-size: 0.9rem !important;
justify-content: center !important;
}
/* Mapa */
.map-wrapper-premium-grande {
height: 280px !important;
border-radius: 20px !important;
}
.mapa-direccion-grande {
padding: 18px !important;
margin-top: -20px !important;
position: relative !important;
z-index: 2 !important;
border-radius: 16px !important;
}
.mapa-direccion-grande i {
font-size: 1.8rem !important;
}
.direccion-texto h4 {
font-size: 1rem !important;
}
.direccion-texto p {
font-size: 0.75rem !important;
}
/* Equipo Directivo */
.team-grid-premium {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.team-card-premium {
padding: 20px !important;
text-align: center !important;
}
.team-card-premium h4 {
font-size: 1.1rem !important;
}
.team-card-premium p {
font-size: 0.85rem !important;
}
.team-card-premium a {
font-size: 0.7rem !important;
word-break: break-all !important;
}
.titulo-equipo-ejecutivo {
margin: 30px auto 25px auto !important;
}
.titulo-equipo-ejecutivo h1 {
font-size: 0.9rem !important;
letter-spacing: 2px !important;
}
.titulo-equipo-ejecutivo > div {
padding: 10px 20px !important;
gap: 10px !important;
}
/* Redes sociales */
.team-social-wrapper {
margin-top: 30px !important;
padding: 20px 15px !important;
}
.team-social-title {
font-size: 0.9rem !important;
}
.team-social-icons {
gap: 15px !important;
}
.team-social-icon {
width: 40px !important;
height: 40px !important;
font-size: 1rem !important;
}
/* Botón Aviso de Privacidad */
.privacidad-wrapper {
margin: 30px auto 20px !important;
}
.btn-privacidad-modal {
padding: 10px 20px !important;
font-size: 0.75rem !important;
}
/* Modal de privacidad */
.privacidad-modal-container {
width: 95% !important;
max-height: 85vh !important;
margin: 20px auto !important;
}
.privacidad-modal-header h3 {
font-size: 1rem !important;
}
.privacidad-modal-body {
padding: 15px !important;
font-size: 0.75rem !important;
}
.privacidad-modal-body p {
font-size: 0.7rem !important;
line-height: 1.5 !important;
}
}
/* Móvil muy pequeño (hasta 480px) */
@media screen and (max-width: 480px) {
.form-card-premium {
padding: 20px 12px !important;
}
.input-premium i {
width: 35px !important;
font-size: 0.8rem !important;
}
.input-premium input,
.input-premium select,
.input-premium textarea {
padding: 10px 12px !important;
font-size: 0.8rem !important;
}
.map-wrapper-premium-grande {
height: 220px !important;
}
.mapa-direccion-grande {
padding: 12px !important;
}
.direccion-texto h4 {
font-size: 0.9rem !important;
}
.direccion-texto p {
font-size: 0.65rem !important;
}
.team-card-premium {
padding: 15px !important;
}
.team-card-premium a {
font-size: 0.6rem !important;
}
}
/* Ajustes adicionales para el grid general */
.contact-grid-premium {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
@media screen and (max-width: 991px) {
.contact-grid-premium {
grid-template-columns: 1fr !important;
gap: 30px !important;
}
}
/* Asegurar que el mapa iframe sea responsivo */
.mapa-grande-iframe {
width: 100%;
height: 100%;
border: 0;
}
.map-wrapper-premium-grande {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 16px;
}
@media screen and (max-width: 991px) {
.map-wrapper-premium-grande {
height: 350px !important;
}
}
@media screen and (max-width: 767px) {
.map-wrapper-premium-grande {
height: 280px !important;
}
}
/* Mejora para el formulario en móvil */
@media screen and (max-width: 767px) {
.input-premium {
display: flex;
flex-wrap: wrap;
}
.input-premium i {
flex-shrink: 0;
}
.input-premium input,
.input-premium select,
.input-premium textarea {
flex: 1;
min-width: 0;
}
/* Ajuste del captcha */
.captcha-premium-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.captcha-input-wrapper-premium {
width: 100%;
}
/* Espaciado general */
.contact-premium-section .container-premium {
padding-left: 15px;
padding-right: 15px;
}
}
/* Dirección responsiva */
.mapa-direccion-grande {
display: flex;
align-items: center;
gap: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 20px 25px;
border-radius: 16px;
margin-top: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 767px) {
.mapa-direccion-grande {
flex-direction: column;
text-align: center;
gap: 10px;
margin-top: -15px;
}
.mapa-direccion-grande i {
margin-bottom: 5px;
}
}
/* Corrección del grid del equipo directivo */
.team-grid-premium {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 25px;
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.team-grid-premium {
grid-template-columns: 1fr;
gap: 20px;
}
}
/*ESTILO PARA EL MODO RESPONSIVO PARA EL MAPA - JESS */
/* Contenedor del mapa - Responsive */
.mapa-responsive-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
height: 0;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
margin: 20px 0;
}
.mapa-responsive-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}
/* Alternativa: Altura fija pero responsiva */
.mapa-altura-fija {
width: 100%;
height: auto;
min-height: 400px;
border-radius: 20px;
overflow: hidden;
}
.mapa-altura-fija iframe {
width: 100%;
height: 400px;
border: 0;
}
/* Ajustes para tablets */
@media screen and (max-width: 991px) {
.mapa-altura-fija iframe {
height: 350px;
}
}
/* Ajustes para móviles */
@media screen and (max-width: 767px) {
.mapa-responsive-container {
padding-bottom: 75%; /* Relación 4:3 para móvil */
border-radius: 16px;
}
.mapa-altura-fija iframe {
height: 280px;
}
}
/* Para móviles muy pequeños */
@media screen and (max-width: 480px) {
.mapa-altura-fija iframe {
height: 220px;
}
}
/*ESTILO PARA EL MODO RESPONSIVO PARA EL MAPA - JESS */
/*alinea texto bandas - jess*/
/* ============================================ */
/* CORREGIR ESPACIADO DE LA LISTA */
/* ============================================ */
.banda2-modal-list {
text-align: left !important;
padding-left: 0 !important;
margin-left: 0 !important;
list-style: none !important;
}
.banda2-modal-list li {
text-align: left !important;
margin-bottom: 15px !important;
margin-left: 0 !important;
padding-left: 0 !important;
display: block !important;
clear: both !important;
}
.banda2-modal-list li i {
width: 25px !important;
display: inline-block !important;
margin-right: 10px !important;
margin-left: 0 !important;
color: #f5a425 !important;
}
.banda2-modal-list li strong {
display: inline-block !important;
}
/* Si el problema persiste, fuerza el contenedor padre */
.banda2-modal-col {
text-align: left !important;
padding-left: 0 !important;
}
.banda2-modal-body {
text-align: left !important;
}
.banda2-modal-text,
.banda2-modal-text * {
text-align: left !important;
}
/*alinea texto bandas - jess*/
/* ============================================ */
/* CLIENTES - LOGOS GRANDES CON DOTS */
/* ============================================ */
/* Contenedor de cada logo */
.cliente-item {
padding: 10px;
}
.cliente-logo-box {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 35px 25px;
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px);
}
.cliente-logo-box:hover {
background: rgba();
transform: translateY(-5px);
border-color: #f5a425;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/* Imágenes GRANDES */
.cliente-logo-box img {
max-width: 100%;
max-height: 140px;
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
filter: none;
transition: all 0.3s ease;
}
.cliente-logo-box:hover img {
transform: scale(1.05);
}
/* ===== FLECHAS DE NAVEGACIÓN ===== */
.our-courses .owl-courses-item .owl-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: rgba(0, 0, 0, 0.6) !important;
color: white !important;
font-size: 24px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
cursor: pointer;
}
.our-courses .owl-courses-item .owl-nav button:hover {
background: #f5a425 !important;
color: #1e1e1e !important;
transform: translateY(-50%) scale(1.1);
}
.our-courses .owl-courses-item .owl-nav button.owl-prev {
left: -20px;
}
.our-courses .owl-courses-item .owl-nav button.owl-next {
right: -20px;
}
/* ===== PUNTOS (DOTS) ANIMADOS ===== */
.our-courses .owl-courses-item .owl-dots {
text-align: center;
margin-top: 35px;
}
.our-courses .owl-courses-item .owl-dot span {
width: 8px;
height: 8px;
margin: 0 5px;
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
display: inline-block;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.our-courses .owl-courses-item .owl-dot.active span {
background: #f5a425;
width: 28px;
height: 8px;
border-radius: 10px;
}
.our-courses .owl-courses-item .owl-dot:hover span {
background: #f5a425;
opacity: 0.7;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.cliente-logo-box {
min-height: 190px;
padding: 30px 20px;
}
.cliente-logo-box img {
max-height: 120px;
}
.our-courses .owl-courses-item .owl-nav button {
width: 38px;
height: 38px;
font-size: 20px;
}
.our-courses .owl-courses-item .owl-nav button.owl-prev {
left: -15px;
}
.our-courses .owl-courses-item .owl-nav button.owl-next {
right: -15px;
}
}
@media (max-width: 768px) {
.cliente-logo-box {
min-height: 160px;
padding: 25px 15px;
border-radius: 16px;
}
.cliente-logo-box img {
max-height: 100px;
}
.our-courses .owl-courses-item .owl-nav button {
width: 32px;
height: 32px;
font-size: 18px;
}
.our-courses .owl-courses-item .owl-nav button.owl-prev {
left: -12px;
}
.our-courses .owl-courses-item .owl-nav button.owl-next {
right: -12px;
}
.our-courses .owl-courses-item .owl-dots {
margin-top: 25px;
}
.our-courses .owl-courses-item .owl-dot span {
width: 8px;
height: 8px;
margin: 0 4px;
}
}
@media (max-width: 576px) {
.cliente-logo-box {
min-height: 140px;
padding: 20px 12px;
border-radius: 14px;
}
.cliente-logo-box img {
max-height: 85px;
}
}
/* ===== CORREGIR SOLO EL SUBMENÚ ===== */
/* Reducir el espacio interno del submenú */
.sub-menu {
padding: 0 !important;
margin: 0 !important;
}
.sub-menu li {
margin: 0 !important;
padding: 0 !important;
}
.sub-menu li a {
padding: 6px 16px !important;
margin: 0 !important;
}
/* Reducir la altura del header para que el submenú quede más cerca */
.header-area .main-nav {
min-height: 60px !important;
}
/* Eliminar el espacio entre el menú y el submenú */
.has-sub:hover .sub-menu {
margin-top: 0 !important;
top: 100% !important;
}
/* ============================================
ESTILOS PARA TARJETA DE INTEGRACIONES EMPRESARIALES
============================================ */
/* Contenedor principal de badges */
.ns-badge-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
}
/* Badges individuales */
.ns-badge-container .banda2-tech-badge {
background: rgba(13, 102, 171, 0.2);
border: 1px solid rgba(13, 102, 171, 0.4);
padding: 6px 14px;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 500;
color: #e0e0e0;
transition: all 0.3s ease;
}
.ns-badge-container .banda2-tech-badge:hover {
background: #0D66AB;
border-color: #f5a425;
color: #ffffff;
transform: translateY(-2px);
}
/* Caja de integraciones estratégicas */
.ns-enterprise-box {
background: rgba(13, 102, 171, 0.1);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.ns-enterprise-box:hover {
background: rgba(13, 102, 171, 0.2);
border-color: rgba(245, 164, 37, 0.5);
}
.ns-enterprise-box h4 {
color: #f5a425;
font-size: 1.1rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.ns-enterprise-box h4 i {
font-size: 1.2rem;
}
.ns-enterprise-box p {
color: #e0e0e0;
font-size: 0.85rem;
line-height: 1.6;
margin: 0;
}
/* Tarjetas de 4 conceptos (Sistemas Conectados, etc.) */
.integracion-concept-card {
background: rgba(13, 102, 171, 0.15);
border-radius: 12px;
padding: 15px;
border-left: 3px solid #0D66AB;
transition: all 0.3s ease;
}
.integracion-concept-card:hover {
background: rgba(13, 102, 171, 0.25);
transform: translateX(5px);
}
.integracion-concept-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.integracion-concept-header i {
color: #0D66AB;
font-size: 1.2rem;
}
.integracion-concept-header h4 {
color: #ffffff;
margin: 0;
font-size: 0.9rem;
font-weight: 600;
}
.integracion-concept-text {
color: #e0e0e0;
font-size: 0.7rem;
line-height: 1.5;
margin: 0;
}
/* Grid de conceptos (2 columnas) */
.integracion-grid-2cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 10px;
}
/* Palabras clave (keywords) */
.integracion-keywords {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.integracion-keyword {
background: rgba(245, 164, 37, 0.2);
color: #f5a425;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
transition: all 0.3s ease;
}
.integracion-keyword:hover {
background: rgba(245, 164, Banayar, 0.4);
transform: scale(1.05);
}
/* Ajustes responsivos */
@media (max-width: 768px) {
.integracion-grid-2cols {
grid-template-columns: 1fr;
gap: 12px;
}
.ns-badge-container {
gap: 8px;
}
.ns-badge-container .banda2-tech-badge {
font-size: 0.65rem;
padding: 4px 10px;
}
.integracion-keyword {
font-size: 0.65rem;
padding: 4px 12px;
}
}
/* ============================================
ESTILOS PARA MANUFACTURA E INDUSTRIA 4.0
============================================ */
/* Grid de capacidades - 2 columnas */
.industria-grid-2cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 20px;
}
/* Tarjeta de capacidad industrial */
.industria-capacidad-card {
background: rgba(13, 102, 171, 0.12);
border-radius: 16px;
padding: 18px;
display: flex;
gap: 15px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.industria-capacidad-card:hover {
background: rgba(13, 102, 171, 0.25);
transform: translateX(5px);
border-color: rgba(245, 164, 37, 0.3);
}
/* Icono de la tarjeta */
.industria-capacidad-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.industria-capacidad-icon i {
font-size: 1.4rem;
color: #ffffff;
}
.industria-capacidad-card:hover .industria-capacidad-icon {
transform: scale(1.05);
background: linear-gradient(135deg, #0a4d82, #0D66AB);
}
/* Contenido de la tarjeta */
.industria-capacidad-content {
flex: 1;
}
.industria-capacidad-content h4 {
color: #f5a425;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 6px;
}
.industria-capacidad-content p {
color: #e0e0e0;
font-size: 0.7rem;
line-height: 1.5;
margin: 0;
}
/* Caja destacada "Una sola plataforma" */
.industria-plataforma-box {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.25), rgba(0, 0, 0, 0.3));
border-radius: 20px;
padding: 25px;
text-align: center;
margin-bottom: 25px;
border: 1px solid rgba(245, 164, 37, 0.3);
}
.industria-plataforma-box i {
font-size: 2.5rem;
color: #f5a425;
margin-bottom: 15px;
}
.industria-plataforma-box h3 {
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.industria-plataforma-box p {
color: #e0e0e0;
font-size: 0.85rem;
line-height: 1.6;
margin: 0;
}
.industria-plataforma-box strong {
color: #f5a425;
}
/* Timeline de implementación */
.industria-timeline {
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.industria-timeline h4 {
color: #f5a425;
font-size: 1rem;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.industria-timeline-steps {
display: flex;
flex-direction: column;
gap: 12px;
}
.industria-timeline-step {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.industria-timeline-step:hover {
background: rgba(13, 102, 171, 0.2);
transform: translateX(5px);
}
.industria-step-number {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
color: #ffffff;
flex-shrink: 0;
}
.industria-step-content {
flex: 1;
}
.industria-step-content strong {
display: block;
color: #ffffff;
font-size: 0.85rem;
font-weight: 600;
}
.industria-step-content span {
display: block;
color: #c0c0c0;
font-size: 0.7rem;
}
/* Responsive */
@media (max-width: 992px) {
.industria-grid-2cols {
grid-template-columns: 1fr;
gap: 12px;
}
.industria-capacidad-card {
padding: 14px;
}
.industria-capacidad-icon {
width: 40px;
height: 40px;
}
.industria-capacidad-icon i {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
.industria-timeline-step {
padding: 8px;
}
.industria-step-number {
width: 35px;
height: 35px;
font-size: 1rem;
}
}
/* ==============================================
ELIMINAR HOVER DE IMÁGENES EN BANDAS
(Quita la pantallita azul al pasar el mouse)
============================================== */
/* Eliminar el overlay azul que aparece al hacer hover */
.banda1-hover-overlay,
.banda2-hover-overlay,
.banda3-hover-overlay,
.banda4-hover-overlay {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Eliminar cualquier transformación o efecto al hacer hover */
.banda1-hover-image-card:hover,
.banda2-hover-image-card:hover,
.banda3-hover-image-card:hover,
.banda4-hover-image-card:hover {
transform: none !important;
}
.banda1-hover-image-card:hover .banda1-hover-image,
.banda2-hover-image-card:hover .banda2-hover-image,
.banda3-hover-image-card:hover .banda3-hover-image,
.banda4-hover-image-card:hover .banda4-hover-image {
transform: none !important;
}
/* Eliminar cualquier fondo o cambio de opacidad al hacer hover */
.banda1-hover-image-card:hover::before,
.banda2-hover-image-card:hover::before,
.banda3-hover-image-card:hover::before,
.banda4-hover-image-card:hover::before {
display: none !important;
}
/* ============================================
ESTILOS PARA MANUFACTURA E INDUSTRIA 4.0
============================================ */
/* Grid simple de capacidades - vertical con más separación */
.industria-grid-simple {
display: flex;
flex-direction: column;
gap: 24px; /* Aumentado de 16px a 24px */
margin-bottom: 10px;
}
/* Tarjeta de capacidad industrial - más aire */
.industria-capacidad-card {
background: rgba(13, 102, 171, 0.12);
border-radius: 20px; /* Aumentado de 16px a 20px */
padding: 20px 22px; /* Aumentado el padding interno */
display: flex;
gap: 20px; /* Aumentado de 15px a 20px */
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
}
.industria-capacidad-card:hover {
background: rgba(13, 102, 171, 0.25);
transform: translateX(8px);
border-color: rgba(245, 164, 37, 0.5);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* Icono de la tarjeta - más grande y con más presencia */
.industria-capacidad-icon {
flex-shrink: 0;
width: 56px; /* Aumentado de 48px a 56px */
height: 56px; /* Aumentado de 48px a 56px */
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 18px; /* Aumentado de 14px a 18px */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.industria-capacidad-icon i {
font-size: 1.6rem; /* Aumentado de 1.4rem a 1.6rem */
color: #ffffff;
}
.industria-capacidad-card:hover .industria-capacidad-icon {
transform: scale(1.08);
background: linear-gradient(135deg, #0a4d82, #0D66AB);
box-shadow: 0 8px 18px rgba(13, 102, 171, 0.4);
}
/* Contenido de la tarjeta - más espacio */
.industria-capacidad-content {
flex: 1;
padding-right: 8px;
}
.industria-capacidad-content h4 {
color: #f5a425;
font-size: 1rem; /* Aumentado de 0.9rem a 1rem */
font-weight: 700;
margin-bottom: 10px; /* Aumentado de 6px a 10px */
font-family: 'Poppins', sans-serif;
letter-spacing: 0.3px;
}
.industria-capacidad-content p {
color: #e8e8e8;
font-size: 0.8rem; /* Aumentado de 0.75rem a 0.8rem */
line-height: 1.6; /* Aumentado de 1.5 a 1.6 */
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Caja destacada "Una sola plataforma" - versión más pequeña */
.industria-plataforma-box-small {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.3), rgba(0, 0, 0, 0.35));
border-radius: 20px;
padding: 18px 22px;
text-align: center;
margin-bottom: 28px; /* Aumentado de 20px a 28px */
border: 1px solid rgba(245, 164, 37, 0.4);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
}
.industria-plataforma-box-small:hover {
transform: translateY(-4px);
border-color: rgba(245, 164, 37, 0.7);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
.industria-plataforma-box-small i {
font-size: 2rem;
color: #f5a425;
margin-bottom: 12px;
display: inline-block;
}
.industria-plataforma-box-small h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
font-family: 'Poppins', sans-serif;
}
.industria-plataforma-box-small p {
color: #e0e0e0;
font-size: 0.8rem;
line-height: 1.55;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.industria-plataforma-box-small strong {
color: #f5a425;
font-weight: 700;
}
/* Títulos de sección */
.banda2-modal-section-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px; /* Aumentado de 20px a 28px */
padding-bottom: 14px; /* Aumentado de 12px a 14px */
border-bottom: 2px solid rgba(245, 164, 37, 0.5);
}
.banda2-modal-section-title i {
color: #f5a425;
font-size: 1.6rem;
}
.banda2-modal-section-title h3 {
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
margin: 0;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.5px;
}
/* Separación entre columnas */
.banda2-modal-grid {
display: flex;
gap: 40px; /* Aumentado el gap entre columnas */
}
/* Responsive */
@media (max-width: 992px) {
.banda2-modal-grid {
gap: 30px;
flex-direction: column;
}
.industria-grid-simple {
gap: 20px;
}
.industria-capacidad-card {
padding: 16px 18px;
gap: 16px;
}
.industria-capacidad-icon {
width: 48px;
height: 48px;
}
.industria-capacidad-icon i {
font-size: 1.4rem;
}
.industria-capacidad-content h4 {
font-size: 0.95rem;
}
.industria-capacidad-content p {
font-size: 0.75rem;
}
.industria-plataforma-box-small {
padding: 15px 18px;
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.industria-grid-simple {
gap: 16px;
}
.industria-capacidad-card {
padding: 14px;
gap: 14px;
}
.industria-capacidad-icon {
width: 42px;
height: 42px;
}
.industria-capacidad-icon i {
font-size: 1.2rem;
}
.industria-capacidad-content h4 {
font-size: 0.85rem;
margin-bottom: 6px;
}
.industria-capacidad-content p {
font-size: 0.7rem;
line-height: 1.5;
}
.industria-plataforma-box-small {
padding: 12px 16px;
margin-bottom: 20px;
}
.industria-plataforma-box-small i {
font-size: 1.6rem;
}
.industria-plataforma-box-small h3 {
font-size: 0.95rem;
}
.industria-plataforma-box-small p {
font-size: 0.7rem;
}
.banda2-modal-section-title {
margin-bottom: 22px;
}
.banda2-modal-section-title h3 {
font-size: 1.1rem;
}
}
/* ============================================
ESTILOS PARA BUSINESS INTELLIGENCE & ANALYTICS
============================================ */
/* Caja de descripción principal - MEJORADA */
.bi-descripcion-box {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.15), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 25px;
margin-bottom: 28px;
border-left: 5px solid #f5a425;
border-right: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.bi-descripcion-box:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.22), rgba(13, 102, 171, 0.08));
transform: translateY(-2px);
}
.bi-descripcion-box p {
color: #f0f0f0;
font-size: 0.95rem;
line-height: 1.65;
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-align: justify;
letter-spacing: 0.2px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
/* Resaltar palabras clave dentro del texto principal (opcional) */
.bi-descripcion-box p strong {
color: #f5a425;
font-weight: 600;
}
/* Grid de 2 columnas para indicadores */
.bi-grid-2cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 10px;
}
/* Tarjeta de indicador */
.bi-indicador-card {
background: rgba(13, 102, 171, 0.12);
border-radius: 18px;
padding: 18px;
display: flex;
gap: 15px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.bi-indicador-card:hover {
background: rgba(13, 102, 171, 0.25);
transform: translateY(-4px);
border-color: rgba(245, 164, 37, 0.4);
}
/* Icono del indicador */
.bi-indicador-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.bi-indicador-icon i {
font-size: 1.4rem;
color: #ffffff;
}
/* Contenido del indicador */
.bi-indicador-content {
flex: 1;
}
.bi-indicador-content h4 {
color: #f5a425;
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.3px;
}
.bi-indicador-content p {
color: #e0e0e0;
font-size: 0.75rem;
line-height: 1.55;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Contenedor de imagen */
.bi-imagen-container {
margin-top: 30px;
width: 100%;
}
.bi-imagen-box {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease;
cursor: pointer;
}
.bi-imagen-box:hover {
transform: translateY(-5px);
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}
.bi-imagen {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.bi-imagen-box:hover .bi-imagen {
transform: scale(1.03);
}
.bi-imagen-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
padding: 30px 25px 22px;
text-align: center;
}
.bi-imagen-overlay h3 {
color: #f5a425;
font-size: 1rem;
font-weight: 700;
margin-bottom: 6px;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.5px;
}
.bi-imagen-overlay p {
color: #ffffff;
font-size: 0.8rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Lista de capacidades analíticas */
.bi-capacidades-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.bi-capacidades-list li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.bi-capacidades-list li:hover {
transform: translateX(6px);
}
.bi-capacidades-list li i {
color: #f5a425;
font-size: 1.1rem;
margin-top: 3px;
flex-shrink: 0;
}
.bi-capacidades-list li strong {
display: block;
color: #ffffff;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.bi-capacidades-list li span {
display: block;
color: #c0c0c0;
font-size: 0.7rem;
line-height: 1.5;
font-family: 'Poppins', sans-serif;
}
/* Grid de plataformas analíticas */
.bi-plataformas-grid {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 5px;
}
/* Tarjeta de plataforma */
.bi-plataforma-card {
background: rgba(13, 102, 171, 0.12);
border-radius: 16px;
padding: 18px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.bi-plataforma-card:hover {
background: rgba(13, 102, 171, 0.25);
transform: translateY(-4px);
border-color: rgba(245, 164, 37, 0.4);
}
.bi-plataforma-card i {
font-size: 2rem;
color: #f5a425;
margin-bottom: 12px;
display: inline-block;
}
.bi-plataforma-card h4 {
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 8px;
font-family: 'Poppins', sans-serif;
}
.bi-plataforma-card p {
color: #c0c0c0;
font-size: 0.7rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Títulos de sección */
.banda2-modal-section-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(245, 164, 37, 0.4);
}
.banda2-modal-section-title i {
color: #f5a425;
font-size: 1.4rem;
}
.banda2-modal-section-title h3 {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.3px;
}
/* Responsive */
@media (max-width: 992px) {
.bi-grid-2cols {
gap: 16px;
}
.bi-indicador-card {
padding: 14px;
}
.bi-indicador-icon {
width: 44px;
height: 44px;
}
.bi-indicador-icon i {
font-size: 1.2rem;
}
.bi-descripcion-box {
padding: 18px 20px;
}
.bi-descripcion-box p {
font-size: 0.85rem;
line-height: 1.6;
}
}
@media (max-width: 768px) {
.bi-grid-2cols {
grid-template-columns: 1fr;
gap: 14px;
}
.bi-indicador-card {
padding: 12px;
}
.bi-indicador-icon {
width: 40px;
height: 40px;
}
.bi-indicador-icon i {
font-size: 1.1rem;
}
.bi-indicador-content h4 {
font-size: 0.85rem;
}
.bi-indicador-content p {
font-size: 0.7rem;
}
.bi-descripcion-box {
padding: 15px 18px;
}
.bi-descripcion-box p {
font-size: 0.8rem;
line-height: 1.55;
}
.bi-capacidades-list li {
padding: 10px 0;
}
.bi-imagen-overlay {
padding: 18px 15px;
}
.bi-imagen-overlay h3 {
font-size: 0.85rem;
}
.bi-imagen-overlay p {
font-size: 0.7rem;
}
}
/* ============================================
TÍTULO DE IMAGEN - FORMATO MEJORADO
============================================ */
.bi-imagen-titulo {
text-align: center;
margin-bottom: 20px;
padding: 18px 20px;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.25), rgba(13, 102, 171, 0.1));
border-radius: 20px;
border-left: 4px solid #f5a425;
border-right: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
backdrop-filter: blur(4px);
position: relative;
overflow: hidden;
}
/* Efecto de brillo al hacer hover */
.bi-imagen-titulo::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
pointer-events: none;
}
.bi-imagen-titulo:hover::before {
left: 100%;
}
.bi-imagen-titulo:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.35), rgba(13, 102, 171, 0.15));
transform: translateY(-3px);
border-left-color: #f5a425;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.bi-imagen-titulo h3 {
color: #f5a425;
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.8px;
text-transform: uppercase;
position: relative;
display: inline-block;
padding-bottom: 8px;
}
/* Línea decorativa debajo del título */
.bi-imagen-titulo h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #f5a425, #F5A425);
border-radius: 3px;
transition: width 0.3s ease;
}
.bi-imagen-titulo:hover h3::after {
width: 100px;
}
.bi-imagen-titulo p {
color: #e8e8e8;
font-size: 0.85rem;
line-height: 1.6;
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 400;
letter-spacing: 0.3px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
/* Contenedor de imagen */
.bi-imagen-container {
margin-top: 35px;
width: 100%;
}
.bi-imagen-box {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
cursor: pointer;
}
.bi-imagen-box:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
.bi-imagen {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s cubic-bezier(0.3, 0.8, 0.4, 1);
}
.bi-imagen-box:hover .bi-imagen {
transform: scale(1.04);
}
/* ============================================
RESPONSIVE PARA TÍTULO DE IMAGEN
============================================ */
@media (max-width: 992px) {
.bi-imagen-titulo {
padding: 14px 16px;
margin-bottom: 16px;
}
.bi-imagen-titulo h3 {
font-size: 1rem;
letter-spacing: 0.6px;
}
.bi-imagen-titulo h3::after {
width: 50px;
}
.bi-imagen-titulo:hover h3::after {
width: 80px;
}
.bi-imagen-titulo p {
font-size: 0.8rem;
}
}
@media (max-width: 768px) {
.bi-imagen-titulo {
padding: 12px 14px;
margin-bottom: 14px;
border-radius: 16px;
}
.bi-imagen-titulo h3 {
font-size: 0.9rem;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.bi-imagen-titulo h3::after {
width: 40px;
height: 2px;
}
.bi-imagen-titulo:hover h3::after {
width: 60px;
}
.bi-imagen-titulo p {
font-size: 0.7rem;
line-height: 1.5;
}
.bi-imagen-container {
margin-top: 25px;
}
}
/* ============================================
ESTILOS PARA SEGURIDAD Y COMPLIANCE
============================================ */
/* Grid de 2 columnas para controles de seguridad */
.seguridad-grid-2cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-bottom: 15px;
}
/* Tarjeta de control de seguridad */
.seguridad-control-card {
background: rgba(13, 102, 171, 0.12);
border-radius: 18px;
padding: 16px;
display: flex;
gap: 14px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.seguridad-control-card:hover {
background: rgba(13, 102, 171, 0.25);
transform: translateY(-4px);
border-color: rgba(245, 164, 37, 0.4);
}
/* Icono de control */
.seguridad-control-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.seguridad-control-icon i {
font-size: 1.3rem;
color: #ffffff;
}
.seguridad-control-card:hover .seguridad-control-icon {
transform: scale(1.05);
}
/* Contenido */
.seguridad-control-content {
flex: 1;
}
.seguridad-control-content h4 {
color: #f5a425;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 5px;
font-family: 'Poppins', sans-serif;
}
.seguridad-control-content p {
color: #e0e0e0;
font-size: 0.7rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Caja de descripción principal */
.seguridad-descripcion-box {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.15), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 18px 22px;
margin-bottom: 25px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.seguridad-descripcion-box p {
color: #f0f0f0;
font-size: 0.85rem;
line-height: 1.6;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: justify;
}
/* Caja de cumplimiento */
.seguridad-compliance-box {
background: rgba(13, 102, 171, 0.1);
border-radius: 16px;
padding: 18px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
border: 1px solid rgba(245, 164, 37, 0.3);
transition: all 0.3s ease;
}
.seguridad-compliance-box:hover {
background: rgba(13, 102, 171, 0.18);
transform: translateX(5px);
}
.seguridad-compliance-box i {
font-size: 1.8rem;
color: #f5a425;
flex-shrink: 0;
}
.seguridad-compliance-box p {
color: #e0e0e0;
font-size: 0.8rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Certificaciones */
.seguridad-certificaciones {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 20px;
margin-bottom: 25px;
text-align: center;
}
.seguridad-certificaciones h4 {
color: #f5a425;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Poppins', sans-serif;
}
.seguridad-certificaciones h4 i {
font-size: 1.1rem;
}
.seguridad-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.seguridad-badge {
background: rgba(13, 102, 171, 0.2);
border: 1px solid rgba(245, 164, 37, 0.4);
padding: 6px 16px;
border-radius: 30px;
color: #f5a425;
font-size: 0.7rem;
font-weight: 600;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
.seguridad-badge:hover {
background: #0D66AB;
color: #ffffff;
border-color: #f5a425;
transform: translateY(-2px);
}
/* Caja destacada plataforma */
.seguridad-plataforma-box {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.25), rgba(0, 0, 0, 0.3));
border-radius: 18px;
padding: 20px;
text-align: center;
margin-bottom: 25px;
border: 1px solid rgba(245, 164, 37, 0.35);
transition: all 0.3s ease;
}
.seguridad-plataforma-box:hover {
transform: translateY(-3px);
border-color: rgba(245, 164, 37, 0.6);
}
.seguridad-plataforma-box i {
font-size: 1.8rem;
color: #f5a425;
margin-bottom: 12px;
display: inline-block;
}
.seguridad-plataforma-box h4 {
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 6px;
font-family: 'Poppins', sans-serif;
}
.seguridad-plataforma-box p {
color: #e0e0e0;
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.seguridad-plataforma-box strong {
color: #f5a425;
}
/* Imagen */
.seguridad-imagen-container {
margin-top: 15px;
width: 100%;
}
.seguridad-imagen-titulo {
text-align: center;
margin-bottom: 16px;
padding: 12px 15px;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.2), rgba(13, 102, 171, 0.08));
border-radius: 16px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.seguridad-imagen-titulo:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.28), rgba(13, 102, 171, 0.12));
transform: translateY(-2px);
}
.seguridad-imagen-titulo h3 {
color: #f5a425;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 5px;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.5px;
}
.seguridad-imagen-titulo p {
color: #e0e0e0;
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.seguridad-imagen-box {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease;
cursor: pointer;
}
.seguridad-imagen-box:hover {
transform: translateY(-5px);
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}
.seguridad-imagen {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.seguridad-imagen-box:hover .seguridad-imagen {
transform: scale(1.03);
}
/* Responsive */
@media (max-width: 992px) {
.seguridad-grid-2cols {
gap: 14px;
}
.seguridad-control-card {
padding: 12px;
}
.seguridad-control-icon {
width: 42px;
height: 42px;
}
.seguridad-control-icon i {
font-size: 1.1rem;
}
.seguridad-control-content h4 {
font-size: 0.8rem;
}
.seguridad-control-content p {
font-size: 0.65rem;
}
}
@media (max-width: 768px) {
.seguridad-grid-2cols {
grid-template-columns: 1fr;
gap: 12px;
}
.seguridad-descripcion-box {
padding: 14px 16px;
}
.seguridad-descripcion-box p {
font-size: 0.8rem;
}
.seguridad-compliance-box {
padding: 14px;
}
.seguridad-compliance-box i {
font-size: 1.5rem;
}
.seguridad-compliance-box p {
font-size: 0.75rem;
}
.seguridad-badge {
padding: 4px 12px;
font-size: 0.65rem;
}
.seguridad-imagen-titulo h3 {
font-size: 0.85rem;
}
.seguridad-imagen-titulo p {
font-size: 0.7rem;
}
}
/* ============================================
ESTILOS PARA ORACLE NETSUITE MODAL
============================================ */
.netsuite-modal-grid {
gap: 30px;
}
/* Tarjeta principal de información */
.netsuite-info-card-principal {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.2), rgba(13, 102, 171, 0.08));
border-radius: 24px;
padding: 30px;
text-align: center;
margin-bottom: 25px;
border: 1px solid rgba(245, 164, 37, 0.3);
transition: all 0.3s ease;
}
.netsuite-info-card-principal:hover {
transform: translateY(-4px);
border-color: rgba(245, 164, 37, 0.6);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.netsuite-icon-header {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto;
transition: all 0.3s ease;
}
.netsuite-info-card-principal:hover .netsuite-icon-header {
transform: scale(1.05);
border-radius: 50%;
}
.netsuite-icon-header i {
font-size: 2rem;
color: #f5a425;
}
.netsuite-info-card-principal h2 {
color: #f5a425;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 15px;
font-family: 'Poppins', sans-serif;
}
.netsuite-divider {
width: 80px;
height: 3px;
background: linear-gradient(90deg, #f5a425, #0D66AB);
margin: 0 auto 15px auto;
border-radius: 3px;
}
.netsuite-info-card-principal p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Grid de características (3 columnas) */
.netsuite-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.netsuite-feature-item {
background: rgba(13, 102, 171, 0.12);
border-radius: 16px;
padding: 15px 12px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.netsuite-feature-item:hover {
background: rgba(13, 102, 171, 0.25);
transform: translateY(-4px);
border-color: rgba(245, 164, 37, 0.4);
}
.netsuite-feature-item i {
font-size: 1.5rem;
color: #f5a425;
margin-bottom: 10px;
display: inline-block;
}
.netsuite-feature-item h4 {
color: #ffffff;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 5px;
font-family: 'Poppins', sans-serif;
}
.netsuite-feature-item p {
color: #c0c0c0;
font-size: 0.65rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Caja de beneficios */
.netsuite-benefits-box {
background: rgba(13, 102, 171, 0.1);
border-radius: 20px;
padding: 20px;
margin-bottom: 25px;
border: 1px solid rgba(245, 164, 37, 0.2);
transition: all 0.3s ease;
}
.netsuite-benefits-box:hover {
background: rgba(13, 102, 171, 0.18);
transform: translateX(5px);
}
.netsuite-benefits-box h3 {
color: #f5a425;
font-size: 1rem;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
font-family: 'Poppins', sans-serif;
}
.netsuite-benefits-box h3 i {
font-size: 1.1rem;
}
.netsuite-benefits-list {
list-style: none;
padding: 0;
margin: 0;
}
.netsuite-benefits-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.netsuite-benefits-list li i {
color: #f5a425;
font-size: 0.8rem;
flex-shrink: 0;
}
.netsuite-benefits-list li span {
color: #e0e0e0;
font-size: 0.75rem;
font-family: 'Poppins', sans-serif;
}
/* Contenedor de badges */
.netsuite-badges-container {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 18px;
margin-bottom: 25px;
text-align: center;
}
.netsuite-badges-container h4 {
color: #f5a425;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Poppins', sans-serif;
}
.netsuite-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.netsuite-badge {
background: rgba(13, 102, 171, 0.2);
border: 1px solid rgba(245, 164, 37, 0.4);
padding: 5px 14px;
border-radius: 30px;
color: #f5a425;
font-size: 0.7rem;
font-weight: 600;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
.netsuite-badge:hover {
background: #0D66AB;
color: #ffffff;
transform: translateY(-2px);
}
/* Contenedor de imagen */
.netsuite-imagen-container {
margin-top: 10px;
width: 100%;
}
.netsuite-imagen-box {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease;
cursor: pointer;
}
.netsuite-imagen-box:hover {
transform: translateY(-5px);
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}
.netsuite-imagen {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.netsuite-imagen-box:hover .netsuite-imagen {
transform: scale(1.03);
}
/* Responsive */
@media (max-width: 992px) {
.netsuite-features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.netsuite-info-card-principal h2 {
font-size: 1.1rem;
}
.netsuite-info-card-principal p {
font-size: 0.8rem;
}
}
@media (max-width: 768px) {
.netsuite-features-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.netsuite-info-card-principal {
padding: 20px;
}
.netsuite-info-card-principal h2 {
font-size: 1rem;
}
.netsuite-icon-header {
width: 55px;
height: 55px;
}
.netsuite-icon-header i {
font-size: 1.5rem;
}
.netsuite-benefits-list li span {
font-size: 0.7rem;
}
.netsuite-badge {
font-size: 0.65rem;
padding: 4px 12px;
}
}
/* ============================================
TARJETA DE INFORMACIÓN NETSUITE - DISEÑO MEJORADO
============================================ */
.banda4-info-card {
background:(255, 255, 255, 0.10);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 25px;
margin-top: 30px;
border: 1px solid rgba(245, 164, 37, 0.3);
transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
position: relative;
overflow: hidden;
}
/* Efecto de brillo al hacer hover */
.banda4-info-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
pointer-events: none;
}
.banda4-info-card:hover::before {
left: 100%;
}
.banda4-info-card:hover {
transform: translateY(-5px);
border-color: rgba(245, 164, 37, 0.6);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
}
/* Header de la tarjeta */
.banda4-card-header {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 20px;
}
.banda4-icon-wrapper {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(13, 102, 171, 0.3);
}
.banda4-info-card:hover .banda4-icon-wrapper {
transform: scale(1.05);
border-radius: 50%;
background: linear-gradient(135deg, #0a4d82, #0D66AB);
}
.banda4-icon-wrapper i {
font-size: 1.8rem;
color: #f5a425;
}
.banda4-title-wrapper {
flex: 1;
}
.banda4-title-wrapper h4 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 8px 0;
font-family: 'Poppins', sans-serif;
line-height: 1.4;
}
.banda4-title-underline {
width: 60px;
height: 3px;
background: linear-gradient(90deg, #f5a425, #0D66AB);
border-radius: 3px;
transition: width 0.3s ease;
}
.banda4-info-card:hover .banda4-title-underline {
width: 100px;
}
/* Cuerpo de la tarjeta */
.banda4-card-body {
margin-bottom: 20px;
padding: 15px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.banda4-card-body p {
color: #e0e0e0;
font-size: 0.85rem;
line-height: 1.6;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: center;
}
/* Contenedor de características */
.banda4-features-container {
margin-top: 5px;
}
.banda4-features-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.banda4-feature-item {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(13, 102, 171, 0.2);
border: 1px solid rgba(245, 164, 37, 0.3);
padding: 8px 16px;
border-radius: 40px;
transition: all 0.3s ease;
cursor: pointer;
}
.banda4-feature-item:hover {
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-color: #f5a425;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(13, 102, 171, 0.4);
}
.banda4-feature-item i {
font-size: 0.9rem;
color: #f5a425;
transition: all 0.3s ease;
}
.banda4-feature-item:hover i {
color: #ffffff;
transform: scale(1.1);
}
.banda4-feature-item span {
color: #ffffff;
font-size: 0.7rem;
font-weight: 500;
font-family: 'Poppins', sans-serif;
}
/* Responsive */
@media (max-width: 768px) {
.banda4-info-card {
padding: 18px;
}
.banda4-card-header {
flex-direction: column;
text-align: center;
gap: 12px;
}
.banda4-icon-wrapper {
width: 50px;
height: 50px;
}
.banda4-icon-wrapper i {
font-size: 1.5rem;
}
.banda4-title-wrapper h4 {
font-size: 0.95rem;
text-align: center;
}
.banda4-title-underline {
margin: 0 auto;
}
.banda4-card-body p {
font-size: 0.75rem;
}
.banda4-feature-item {
padding: 5px 12px;
}
.banda4-feature-item i {
font-size: 0.7rem;
}
.banda4-feature-item span {
font-size: 0.6rem;
}
}
/* ============================================
ESTILOS PARA HERRAMIENTAS Y TECNOLOGÍAS
============================================ */
.herramientas-modal-grid {
gap: 30px;
}
.herramientas-categoria {
background: rgba(13, 102, 171, 0.08);
border-radius: 20px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.herramientas-categoria:hover {
background: rgba(13, 102, 171, 0.15);
border-color: rgba(245, 164, 37, 0.3);
}
.herramientas-categoria-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(245, 164, 37, 0.4);
}
.herramientas-categoria-header i {
font-size: 1.6rem;
color: #f5a425;
}
.herramientas-categoria-header h3 {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.herramientas-subcategoria {
margin-bottom: 18px;
}
.herramientas-subcategoria h4 {
color: #f5a425;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
font-family: 'Poppins', sans-serif;
}
.herramientas-subcategoria h4 i {
font-size: 0.9rem;
}
.herramientas-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.herramienta-badge {
background: rgba(13, 102, 171, 0.2);
border: 1px solid rgba(245, 164, 37, 0.3);
padding: 5px 12px;
border-radius: 20px;
color: #e0e0e0;
font-size: 0.7rem;
font-weight: 500;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
.herramienta-badge:hover {
background: #0D66AB;
border-color: #f5a425;
color: #ffffff;
transform: translateY(-2px);
}
/* Imagen */
.herramientas-imagen-container {
margin-top: 20px;
width: 100%;
}
.herramientas-imagen-box {
width: 100%;
border-radius: 18px;
overflow: hidden;
transition: all 0.4s ease;
}
.herramientas-imagen-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.herramientas-imagen {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.herramientas-imagen-box:hover .herramientas-imagen {
transform: scale(1.02);
}
/* Responsive */
@media (max-width: 992px) {
.herramientas-modal-grid {
flex-direction: column;
gap: 20px;
}
.herramientas-categoria {
padding: 15px;
}
.herramientas-categoria-header h3 {
font-size: 1rem;
}
.herramientas-subcategoria h4 {
font-size: 0.8rem;
}
.herramienta-badge {
font-size: 0.65rem;
padding: 4px 10px;
}
}
/* Tarjeta de información NetSuite - aproximadamente línea 2760-2800 */
.banda4-info-card h4 {
color: #ffffff;
font-size: 1.4rem; /* ← Cambia esto */
font-weight: 700;
margin: 0 0 8px 0;
}
.banda4-info-card p {
color: #e0e0e0;
font-size: 0.90rem; /* ← Cambia esto */
line-height: 1.6;
}
/* Forzar que todas las descripciones estén ocultas al cargar */
.banda2-product__description {
display: none !important;
}
/* Solo mostrar cuando tienen la clase active */
.banda2-product__description.active {
display: block !important;
}
/* Asegurar que todo dentro del submenú tenga fondo oscuro */
.sub-menu,
.sub-menu *,
.has-sub.active .sub-menu,
.has-sub.active .sub-menu * {
background: #0a4d82 !important;
color: #ffffff !important;
}
/* Excepciones: botones y elementos interactivos mantienen su estilo */
.sub-menu button,
.sub-menu input,
.sub-menu select,
.sub-menu textarea {
background: #ffffff !important;
color: #333333 !important;
}
/* Grid para las tarjetas del equipo */
.equipo-cards-grid {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.5rem;
}
/* Cada item del equipo */
.equipo-card-item {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 1rem 1.2rem;
border-radius: 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
cursor: pointer;
}
.equipo-card-item:hover {
transform: translateX(5px);
border-color: #f97316;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}
/* Icono */
.equipo-card-icon {
width: 48px;
height: 48px;
background: #f97316;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.equipo-card-icon i {
font-size: 1.5rem;
color: white;
}
/* Contenido */
.equipo-card-content {
flex: 1;
}
.equipo-card-number {
display: block;
font-size: 1.3rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.equipo-card-text {
display: block;
font-size: 0.85rem;
color: #475569;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.equipo-card-item {
padding: 0.8rem 1rem;
}
.equipo-card-icon {
width: 40px;
height: 40px;
}
.equipo-card-icon i {
font-size: 1.2rem;
}
.equipo-card-number {
font-size: 1.1rem;
}
.equipo-card-text {
font-size: 0.75rem;
}
}
/* Subtítulo más grande */
.banda2-modal-content .subtitulo-equipo {
font-size: 1.3rem;
font-weight: 600;
color: #f97316;
margin-bottom: 1.5rem;
text-align: center;
}
/* Si el subtítulo está dentro del header del modal */
.banda2-modal-header h3,
.banda2-modal-content > p {
font-size: 1.2rem;
font-weight: 500;
color: #f97316;
margin: 0 0 1rem 0;
}
/* Grid para las tarjetas del equipo */
.equipo-cards-grid {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.5rem;
}
/* Cada item del equipo */
.equipo-card-item {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 1rem 1.2rem;
border-radius: 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
cursor: pointer;
}
.equipo-card-item:hover {
transform: translateX(5px);
border-color: #f97316;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}
/* Icono */
.equipo-card-icon {
width: 48px;
height: 48px;
background: #f97316;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.equipo-card-icon i {
font-size: 1.5rem;
color: white;
}
/* Contenido */
.equipo-card-content {
flex: 1;
}
.equipo-card-number {
display: block;
font-size: 1.3rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.equipo-card-text {
display: block;
font-size: 0.85rem;
color: #475569;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.equipo-card-item {
padding: 0.8rem 1rem;
}
.equipo-card-icon {
width: 40px;
height: 40px;
}
.equipo-card-icon i {
font-size: 1.2rem;
}
.equipo-card-number {
font-size: 1.1rem;
}
.equipo-card-text {
font-size: 0.75rem;
}
}
/* Grid para las tarjetas del equipo */
.equipo-cards-grid {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.5rem;
}
/* Cada item del equipo - NUEVOS COLORES MÁS ARMONIOSOS */
.equipo-card-item {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
padding: 1rem 1.2rem;
border-radius: 16px;
border: 1px solid #fde68a;
transition: all 0.3s ease;
cursor: pointer;
}
.equipo-card-item:hover {
transform: translateX(5px);
border-color: #f59e0b;
box-shadow: 0 5px 15px rgba(245, 158, 11, 0.15);
background: linear-gradient(135deg, #fde68a 0%, #fef3c7 100%);
}
/* Icono */
.equipo-card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #f59e0b, #d97706);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}
.equipo-card-icon i {
font-size: 1.5rem;
color: white;
}
/* Contenido */
.equipo-card-content {
flex: 1;
}
.equipo-card-number {
display: block;
font-size: 1.3rem;
font-weight: 800;
color: #78350f;
line-height: 1.2;
}
.equipo-card-text {
display: block;
font-size: 0.85rem;
color: #92400e;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.equipo-card-item {
padding: 0.8rem 1rem;
}
.equipo-card-icon {
width: 40px;
height: 40px;
}
.equipo-card-icon i {
font-size: 1.2rem;
}
.equipo-card-number {
font-size: 1.1rem;
}
.equipo-card-text {
font-size: 0.75rem;
}
}
/* Grid para soluciones empresariales */
.soluciones-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
margin-top: 0.5rem;
}
/* Tarjeta individual de solución - fondo suave, texto oscuro */
.solucion-card {
display: flex;
align-items: center;
gap: 0.8rem;
background: #f8f8f8;
padding: 0.8rem 1rem;
border-radius: 12px;
border: 1px solid #e8e8e8;
transition: all 0.3s ease;
cursor: pointer;
}
.solucion-card:hover {
transform: translateX(5px);
border-color: #d4d4d4;
background: #fefefe;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.solucion-card i {
font-size: 1.3rem;
color: #b45309;
width: 30px;
text-align: center;
}
.solucion-card span {
font-size: 0.85rem;
font-weight: 500;
color: #2d2a24;
}
/* Responsive */
@media (max-width: 768px) {
.soluciones-grid {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.solucion-card {
padding: 0.7rem 0.9rem;
}
.solucion-card i {
font-size: 1.1rem;
width: 25px;
}
.solucion-card span {
font-size: 0.8rem;
}
}
/* ===== CORRECCIÓN DE ANCLAJE PARA SECCIONES ===== */
html {
scroll-padding-top: 900px; /* Ajusta según la altura de tus headers fijos */
scroll-behavior: smooth;
}
/* Para navegadores más antiguos que no soportan scroll-padding-top */
[id="oracle-section"],
[id="tecnologia-section"],
[id="netsuite-section"],
[id="sap-section"] {
scroll-margin-top: 95px;
}
/* Ajuste responsivo */
@media (max-width: 768px) {
html {
scroll-padding-top: 80px;
}
[id="oracle-section"],
[id="tecnologia-section"],
[id="netsuite-section"],
[id="sap-section"] {
scroll-margin-top: 80px;
}
}
/* ===== ESTILOS BASE DEL MODAL ===== */
.banda2-modal-content {
background: #0f172a;
}
/* ===== TÍTULOS DE SECCIÓN ===== */
.seccion-titulo {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 0.8rem 1rem;
background: #1e293b;
border-radius: 16px;
}
.seccion-titulo-icono {
width: 48px;
height: 48px;
background: #3b82f6;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.seccion-titulo-icono i {
font-size: 1.5rem;
color: white;
}
.seccion-titulo-texto {
flex: 1;
}
.seccion-titulo-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #60a5fa;
background: transparent;
padding: 0;
margin-bottom: 0.2rem;
}
.seccion-titulo-texto h3 {
font-size: 1.2rem;
font-weight: 700;
color: white;
margin: 0;
}
/* ===== TARJETAS DE PROBLEMAS (titulo41) ===== */
.problemas-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.problema-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #1e293b;
padding: 1rem;
border-radius: 16px;
transition: all 0.3s ease;
}
.problema-card:hover {
transform: translateX(6px);
background: #334155;
}
.problema-icono {
width: 44px;
height: 44px;
background: #3b82f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.problema-icono i {
font-size: 1.3rem;
color: white;
}
.problema-info h4 {
font-size: 1rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.3rem 0;
}
.problema-info p {
font-size: 0.8rem;
color: #94a3b8;
line-height: 1.4;
margin: 0;
}
/* ===== KPIs RESULTADOS ===== */
.kpis-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 0.5rem;
}
.kpi-card {
text-align: center;
padding: 1rem 0.5rem;
background: #1e293b;
border-radius: 20px;
transition: all 0.3s ease;
}
.kpi-card:hover {
transform: translateY(-5px);
background: #334155;
}
.kpi-circulo {
width: 70px;
height: 70px;
margin: 0 auto 0.8rem;
background: #3b82f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.kpi-card p {
font-size: 0.85rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.2rem;
}
.kpi-card span {
font-size: 0.65rem;
color: #64748b;
font-weight: 500;
}
/* ===== IMAGEN MODERNA ===== */
.imagen-modern-card {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-bottom: 1.5rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.imagen-modern-card img {
width: 100%;
display: block;
}
.imagen-modern-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 1.2rem 1rem 0.6rem;
text-align: center;
}
.imagen-modern-overlay span {
color: #60a5fa;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 1px;
}
/* ===== INTEGRACIONES GRID (titulo45) ===== */
.integraciones-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
margin-top: 0.5rem;
}
.integracion-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background: #1e293b;
padding: 1rem 0.5rem;
border-radius: 16px;
transition: all 0.3s ease;
cursor: pointer;
text-align: center;
}
.integracion-card:hover {
transform: translateY(-5px);
background: #334155;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.integracion-icono {
width: 48px;
height: 48px;
background: #3b82f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.integracion-icono i {
font-size: 1.5rem;
color: white;
}
.integracion-card span {
font-size: 0.75rem;
font-weight: 600;
color: #94a3b8;
}
/* ===== BENEFICIOS GRID ===== */
.beneficios-grid {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 0.5rem;
}
.beneficio-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #1e293b;
padding: 1rem;
border-radius: 16px;
transition: all 0.3s ease;
}
.beneficio-card:hover {
transform: translateX(6px);
background: #334155;
}
.beneficio-icono {
width: 44px;
height: 44px;
background: #3b82f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.beneficio-icono i {
font-size: 1.3rem;
color: white;
}
.beneficio-info h4 {
font-size: 0.95rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.3rem 0;
}
.beneficio-info p {
font-size: 0.75rem;
color: #94a3b8;
line-height: 1.4;
margin: 0;
}
/* ===== FRASE FINAL INTEGRACIONES ===== */
.frase-final-integraciones {
margin-top: 1.5rem;
text-align: center;
padding: 1rem;
background: #1e293b;
border-radius: 16px;
border-left: 4px solid #3b82f6;
}
.frase-final-integraciones i {
font-size: 1.2rem;
color: #3b82f6;
margin-right: 0.5rem;
}
.frase-final-integraciones p {
display: inline;
font-size: 0.85rem;
font-weight: 600;
color: #94a3b8;
}
/* ===== SEGURIDAD Y COMPLIANCE ===== */
.seguridad-grid {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 0.5rem;
}
.seguridad-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #1e293b;
padding: 1rem;
border-radius: 16px;
transition: all 0.3s ease;
}
.seguridad-card:hover {
transform: translateX(6px);
background: #334155;
}
.seguridad-icono {
width: 44px;
height: 44px;
background: #3b82f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.seguridad-icono i {
font-size: 1.3rem;
color: white;
}
.seguridad-info h4 {
font-size: 0.95rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.3rem 0;
}
.seguridad-info p {
font-size: 0.75rem;
color: #94a3b8;
line-height: 1.4;
margin: 0;
}
.cumplimiento-card {
display: flex;
align-items: center;
gap: 1rem;
background: #1e293b;
padding: 1rem;
border-radius: 16px;
margin-top: 0.5rem;
border-left: 4px solid #3b82f6;
}
.cumplimiento-card i {
font-size: 1.5rem;
color: #3b82f6;
}
.cumplimiento-card p {
font-size: 0.8rem;
color: #94a3b8;
margin: 0;
line-height: 1.4;
}
.caracteristicas-grid {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 0.5rem;
}
.caracteristica-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #1e293b;
padding: 1rem;
border-radius: 16px;
transition: all 0.3s ease;
}
.caracteristica-card:hover {
transform: translateX(6px);
background: #334155;
}
.caracteristica-icono {
width: 44px;
height: 44px;
background: #3b82f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.caracteristica-icono i {
font-size: 1.3rem;
color: white;
}
.caracteristica-info h4 {
font-size: 0.95rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.3rem 0;
}
.caracteristica-info p {
font-size: 0.75rem;
color: #94a3b8;
line-height: 1.4;
margin: 0;
}
.frase-final-seguridad {
margin-top: 1.5rem;
text-align: center;
padding: 1rem;
background: #1e293b;
border-radius: 16px;
border-left: 4px solid #3b82f6;
}
.frase-final-seguridad i {
font-size: 1.2rem;
color: #3b82f6;
margin-right: 0.5rem;
}
.frase-final-seguridad p {
display: inline;
font-size: 0.85rem;
font-weight: 600;
color: #94a3b8;
}
/* ===== MANUFACTURA (titulo42) ===== */
/* Reutiliza .problemas-grid, .problema-card, etc. ya definidos arriba */
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.seccion-titulo {
padding: 0.6rem 1rem;
}
.seccion-titulo-icono {
width: 40px;
height: 40px;
}
.seccion-titulo-icono i {
font-size: 1.2rem;
}
.seccion-titulo-texto h3 {
font-size: 1rem;
}
.kpi-circulo {
width: 55px;
height: 55px;
font-size: 1.1rem;
}
.integraciones-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
}
.integracion-card {
padding: 0.8rem 0.3rem;
}
.integracion-icono {
width: 40px;
height: 40px;
}
.integracion-icono i {
font-size: 1.2rem;
}
.integracion-card span {
font-size: 0.7rem;
}
.problema-card, .beneficio-card, .seguridad-card, .caracteristica-card {
padding: 0.8rem;
}
.problema-icono, .beneficio-icono, .seguridad-icono, .caracteristica-icono {
width: 36px;
height: 36px;
}
.problema-icono i, .beneficio-icono i, .seguridad-icono i, .caracteristica-icono i {
font-size: 1rem;
}
.frase-final-integraciones p, .frase-final-seguridad p {
font-size: 0.75rem;
}
}
/* ===== IA Y AUTOMATIZACIÓN (titulo42) ===== */
/* Grid de automatización */
.ia-automation-grid {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 0.5rem;
}
/* Tarjeta individual de IA */
.ia-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #0f172a;
padding: 1rem;
border-radius: 16px;
transition: all 0.3s ease;
}
.ia-card:hover {
transform: translateX(6px);
background: #1e293b;
}
.ia-icono {
width: 44px;
height: 44px;
background: #2563eb;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ia-icono i {
font-size: 1.3rem;
color: white;
}
.ia-info h4 {
font-size: 0.95rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.3rem 0;
}
.ia-info p {
font-size: 0.75rem;
color: #94a3b8;
line-height: 1.4;
margin: 0;
}
/* Grid de características */
.ia-features-grid {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
}
/* Tarjeta de característica */
.ia-feature-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #0f172a;
padding: 1rem;
border-radius: 16px;
transition: all 0.3s ease;
}
.ia-feature-card:hover {
transform: translateX(6px);
background: #1e293b;
}
.ia-feature-icono {
width: 44px;
height: 44px;
background: #2563eb;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ia-feature-icono i {
font-size: 1.3rem;
color: white;
}
.ia-feature-info h4 {
font-size: 0.95rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.3rem 0;
}
.ia-feature-info p {
font-size: 0.75rem;
color: #94a3b8;
line-height: 1.4;
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.ia-card, .ia-feature-card {
padding: 0.8rem;
}
.ia-icono, .ia-feature-icono {
width: 36px;
height: 36px;
}
.ia-icono i, .ia-feature-icono i {
font-size: 1rem;
}
.ia-info h4, .ia-feature-info h4 {
font-size: 0.85rem;
}
}
/* ===== IA Y AUTOMATIZACIÓN - Estilo corregido ===== */
/* Fondo general del modal más oscuro */
.banda2-modal-content {
background: #0a0f1c;
}
/* Tarjetas de características (ns-feature-card) */
.ns-feature-card {
background: #0f172a;
border-radius: 20px;
padding: 1.2rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
border: 1px solid #1e293b;
position: relative;
}
.ns-feature-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #3b82f6;
}
.ns-feature-card i {
font-size: 1.8rem;
color: #3b82f6;
margin-bottom: 0.8rem;
display: inline-block;
}
.ns-feature-card h4 {
font-size: 1.1rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.5rem 0;
}
.ns-feature-card p {
font-size: 0.8rem;
color: #94a3b8;
line-height: 1.4;
margin: 0;
}
/* Lista del modal (banda2-modal-list) */
.banda2-modal-list {
list-style: none;
padding: 0;
margin: 0;
}
.banda2-modal-list li {
display: flex;
align-items: flex-start;
gap: 0.8rem;
background: #0f172a;
padding: 1rem;
border-radius: 16px;
margin-bottom: 0.8rem;
transition: all 0.3s ease;
}
.banda2-modal-list li:hover {
background: #1e293b;
transform: translateX(5px);
}
.banda2-modal-list li i {
font-size: 1.2rem;
color: #3b82f6;
margin-top: 0.2rem;
min-width: 24px;
}
.banda2-modal-list li strong {
color: #60a5fa;
font-weight: 700;
}
.banda2-modal-list li {
color: #94a3b8;
font-size: 0.85rem;
line-height: 1.4;
}
/* Títulos de sección */
.banda2-modal-section-title {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
padding-bottom: 0.8rem;
border-bottom: 2px solid #1e293b;
}
.banda2-modal-section-title i {
font-size: 1.5rem;
color: #3b82f6;
}
.banda2-modal-section-title h3 {
font-size: 1.2rem;
font-weight: 700;
color: white;
margin: 0;
}
/* Contenedor de imagen - posición relativa para el overlay */
.banda2-modal-image-card {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-top: 1.5rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.banda2-modal-image {
width: 100%;
display: block;
transition: transform 0.3s ease;
}
.banda2-modal-image-card:hover .banda2-modal-image {
transform: scale(1.02);
}
/* Overlay dentro del contenedor */
.banda2-modal-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
border-radius: 0;
pointer-events: none;
}
/* Grid general del modal */
.banda2-modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
/* Asegurar que la columna derecha tenga posición relativa */
.banda2-modal-col {
position: relative;
display: flex;
flex-direction: column;
}
/* Responsive */
@media (max-width: 768px) {
.banda2-modal-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.ns-feature-card {
padding: 1rem;
}
.banda2-modal-list li {
padding: 0.8rem;
}
.banda2-modal-list li i {
font-size: 1rem;
min-width: 20px;
}
}
/* ===== SELECTOR DE IDIOMAS - ESPAÑOL ALEJADO A LA IZQUIERDA ===== */
.language-selector {
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(4px, 1vw, 10px);
background: transparent !important;
border-radius: 50px;
padding: 0;
margin: 0;
}
.language-selector a {
display: inline-flex !important;
align-items: center !important;
gap: clamp(4px, 1vw, 8px) !important;
font-size: clamp(11px, 1.5vw, 13px) !important;
padding: clamp(4px, 0.8vw, 6px) clamp(8px, 1.5vw, 12px) !important;
border-radius: 40px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
position: relative !important;
white-space: nowrap !important;
}
/* Efecto hover */
.language-selector a:hover {
background: rgba(255, 255, 255, 0.15) !important;
transform: translateY(-2px) !important;
}
/* Idioma activo */
.language-selector a.active-lang {
background: rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
font-weight: 600 !important;
}
/* Emojis - tamaño responsivo */
.language-selector a .lang-emoji {
font-size: clamp(16px, 2.5vw, 20px) !important;
display: inline-block !important;
}
/* ESPAÑOL: alejado hacia la izquierda */
.language-selector a:first-child {
position: relative;
margin-right: 12px; /* 👈 SEPARADO: espacio extra a la derecha (aleja del separador) */
}
/* Línea separadora */
.language-selector a:first-child::after {
content: '';
position: absolute;
right: -8px; /* Ajustado para que la línea quede bien */
top: 50%;
transform: translateY(-50%);
width: 1px;
height: clamp(14px, 2.5vw, 20px);
background: rgba(255, 255, 255, 0.5);
}
/* Inglés */
.language-selector a:last-child {
margin-left: -5px;
}
/* ==============================================
HOVER AMARILLO PARA TODOS LOS SUBMENÚS
============================================== */
/* Todos los submenús - mismo estilo base */
.sub-menu li a {
display: flex !important;
align-items: center !important;
width: 100% !important;
padding: 8px 15px !important;
text-align: left !important;
background: transparent !important;
box-shadow: none !important;
color: #ffffff !important;
transition: all 0.2s ease !important;
border-left: 3px solid transparent !important; /* Borde transparente por defecto */
}
/* Hover para TODOS los submenús - borde amarillo */
.sub-menu li a:hover {
border-left: 3px solid #FFD700 !important; /* Borde amarillo a la izquierda */
background: rgba(255, 215, 0, 0.1) !important; /* Fondo amarillo muy tenue */
color: #FFD700 !important; /* Texto amarillo opcional */
}
/* Los iconos también cambian a amarillo en hover */
.sub-menu li a:hover i {
color: #FFD700 !important;
}
/* Mantener los iconos blancos por defecto */
.sub-menu li a i {
color: #ffffff !important;
}
/* ============================================
SECCIÓN BANDA2 - CORREGIDA
Fondo gris claro al hacer hover
Solo contorno amarillo
============================================ */
.banda2-section {
background: rgba(58, 58, 58, 0.5);
padding: 60px 0;
width: 100%;
overflow-x: hidden;
}
/* Todos los botones - ESTILO BASE */
.banda2-tm-nav-link {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 140px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
text-decoration: none;
}
/* HOVER: Fondo gris claro + contorno amarillo */
.banda2-tm-nav-link:hover {
background: rgba(255, 255, 255, 0.15) !important; /* Mismo gris que otras bandas */
border-color: #FFD700 !important; /* Contorno amarillo */
transform: scale(1.02);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
/* Iconos se mantienen blancos (no cambian a amarillo) */
.banda2-tm-nav-link:hover .banda2-tm-nav-icon {
color: white !important;
}
/* Texto se mantiene blanco (no cambia a amarillo) */
.banda2-tm-nav-link:hover .banda2-tm-nav-text {
color: white !important;
}
/* Iconos por defecto */
.banda2-tm-nav-icon {
font-size: 2.2rem;
margin-bottom: 10px;
transition: none;
color: white;
}
/* Texto por defecto */
.banda2-tm-nav-text {
font-size: 0.85rem;
font-weight: 500;
transition: none;
color: white;
}
/* Grid de botones */
.banda2-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.banda2-grid__item {
flex: 0 0 calc(50% - 15px);
margin: 0;
}
@media (max-width: 768px) {
.banda2-grid__item {
flex: 0 0 calc(100% - 15px);
}
}
/* ============================================
SECCIÓN BANDA2 - CORREGIDA
Mismo gris que banda3: rgba(255, 255, 255, 0.15) y rgba(255, 255, 255, 0.25)
Contorno: #F5A425
============================================ */
.banda2-section {
background: rgba(58, 58, 58, 0.5);
padding: 60px 0;
width: 100%;
overflow-x: hidden;
}
/* Botones estilo banda2 */
.banda2-product {
background: transparent;
transition: all 0.3s ease;
text-align: center;
}
/* MISMO GRIS que banda3 al hacer hover en el producto */
.banda2-product:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 10px;
}
.banda2-tm-nav-link {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 140px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
text-decoration: none;
}
/* MISMO GRIS que banda3 + contorno #F5A425 */
.banda2-tm-nav-link:hover {
background: rgba(255, 255, 255, 0.25) !important;
border-color: #F5A425 !important; /* Mismo color que SAP */
transform: scale(1.02);
box-shadow: 0 0 10px rgba(245, 164, 37, 0.2);
}
/* Iconos se mantienen blancos (no cambian a naranja) */
.banda2-tm-nav-link:hover .banda2-tm-nav-icon {
color: white !important;
}
/* Texto se mantiene blanco (no cambia a naranja) */
.banda2-tm-nav-link:hover .banda2-tm-nav-text {
color: white !important;
}
/* Iconos por defecto */
.banda2-tm-nav-icon {
font-size: 2.2rem;
margin-bottom: 10px;
transition: none;
color: white;
}
/* Texto por defecto */
.banda2-tm-nav-text {
font-size: 0.85rem;
font-weight: 500;
transition: none;
color: white;
}
/* Grid de botones */
.banda2-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.banda2-grid__item {
flex: 0 0 calc(50% - 15px);
margin: 0;
}
@media (max-width: 768px) {
.banda2-grid__item {
flex: 0 0 calc(100% - 15px);
}
}
/* ============================================
QUITAR AMARILLO DE LOS SUBMENÚS
Mantener solo el borde izquierdo (sin color)
============================================ */
/* Eliminar el borde amarillo en hover de los submenús */
.sub-menu li a:hover {
border-left: 3px solid transparent !important; /* Borde transparente, sin amarillo */
background: rgba(255, 255, 255, 0.05) !important; /* Fondo muy tenue opcional */
}
/* Asegurar que los iconos NO se pongan amarillos */
.sub-menu li a:hover i {
color: #ffffff !important; /* Se mantienen blancos */
}
/* Asegurar que el texto NO se ponga amarillo */
.sub-menu li a:hover span {
color: #ffffff !important; /* Se mantiene blanco */
}
/* Estado normal de los submenús */
.sub-menu li a {
border-left: 3px solid transparent !important;
}
.sub-menu li a i {
color: #ffffff !important;
}
.sub-menu li a span {
color: #ffffff !important;
}
/* ============================================
MODAL TECNOLÓGICO UNIFICADO - Estilo Imagen
Fondo oscuro #0a0f1c, tarjetas #0f172a
Acentos: Azul #3b82f6, Naranja #f5a425
============================================ */
/* ===== OVERLAY DEL MODAL (Fondo oscuro con blur) ===== */
.banda2-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85) !important;
backdrop-filter: blur(8px);
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.banda2-modal-overlay.active {
display: flex;
opacity: 1;
}
/* ===== CONTENEDOR DEL MODAL (Ventana principal) ===== */
.banda2-modal-container {
width: 90%;
max-width: 1200px;
max-height: 85vh;
background: #0a0f1c !important; /* Fondo oscuro principal */
border-radius: 24px;
overflow: hidden;
position: relative;
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.2);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.banda2-modal-overlay.active .banda2-modal-container {
transform: scale(1);
}
/* ===== BOTÓN CERRAR (X) ===== */
.banda2-modal-close {
position: absolute;
top: 20px;
right: 25px;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.banda2-modal-close:hover {
background: #f5a425;
transform: rotate(90deg);
border-color: #f5a425;
}
.banda2-modal-close i {
color: white;
font-size: 1.2rem;
}
/* ===== HEADER DEL MODAL ===== */
.banda2-modal-header {
padding: 25px 30px;
background: linear-gradient(135deg, #0f172a 0%, #0a0f1c 100%);
border-bottom: 2px solid #3b82f6; /* Línea azul */
}
.banda2-modal-header h2 {
color: #ffffff;
font-size: 1.6rem;
margin: 0;
font-weight: 700;
letter-spacing: -0.3px;
font-family: 'Poppins', sans-serif;
}
.banda2-modal-header p {
color: #94a3b8;
margin: 8px 0 0 0;
font-size: 0.85rem;
font-family: 'Poppins', sans-serif;
}
/* ===== CUERPO DEL MODAL ===== */
.banda2-modal-body {
padding: 30px;
max-height: calc(85vh - 100px);
overflow-y: auto;
color: #e0e0e0;
background: #0a0f1c;
}
/* Scroll personalizado */
.banda2-modal-body::-webkit-scrollbar {
width: 6px;
}
.banda2-modal-body::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.banda2-modal-body::-webkit-scrollbar-thumb {
background: #3b82f6;
border-radius: 3px;
}
/* ===== GRID INTERNO (2 columnas) ===== */
.banda2-modal-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.banda2-modal-col {
flex: 1;
min-width: 250px;
}
/* ===== TÍTULOS DE SECCIÓN ===== */
.banda2-modal-section-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(59, 130, 246, 0.4);
}
.banda2-modal-section-title i {
color: #3b82f6;
font-size: 1.4rem;
}
.banda2-modal-section-title h3 {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== TARJETAS DE CARACTERÍSTICAS (Estilo imagen) ===== */
.ns-feature-card,
.problema-card,
.beneficio-card,
.seguridad-card,
.caracteristica-card,
.ia-card,
.ia-feature-card {
background: #0f172a !important;
border-radius: 20px !important;
padding: 1.2rem !important;
margin-bottom: 1rem !important;
transition: all 0.3s ease !important;
border: 1px solid #1e293b !important;
}
.ns-feature-card:hover,
.problema-card:hover,
.beneficio-card:hover,
.seguridad-card:hover,
.caracteristica-card:hover,
.ia-card:hover,
.ia-feature-card:hover {
background: #1e293b !important;
transform: translateX(5px);
border-color: #3b82f6 !important;
}
.ns-feature-card i,
.problema-icono i,
.beneficio-icono i,
.seguridad-icono i,
.caracteristica-icono i,
.ia-icono i,
.ia-feature-icono i {
font-size: 1.8rem;
color: #3b82f6;
margin-bottom: 0.8rem;
display: inline-block;
}
.ns-feature-card h4,
.problema-info h4,
.beneficio-info h4,
.seguridad-info h4,
.caracteristica-info h4,
.ia-info h4,
.ia-feature-info h4 {
font-size: 1rem;
font-weight: 700;
color: #60a5fa;
margin: 0 0 0.5rem 0;
font-family: 'Poppins', sans-serif;
}
.ns-feature-card p,
.problema-info p,
.beneficio-info p,
.seguridad-info p,
.caracteristica-info p,
.ia-info p,
.ia-feature-info p {
font-size: 0.8rem;
color: #94a3b8;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== LISTAS ESTILO MODERNO ===== */
.banda2-modal-list {
list-style: none;
padding: 0;
margin: 0;
}
.banda2-modal-list li {
display: flex;
align-items: flex-start;
gap: 12px;
background: #0f172a;
padding: 12px 16px;
border-radius: 16px;
margin-bottom: 10px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.banda2-modal-list li:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #3b82f6;
}
.banda2-modal-list li i {
font-size: 1.1rem;
color: #3b82f6;
margin-top: 2px;
min-width: 24px;
}
.banda2-modal-list li strong {
color: #60a5fa;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.banda2-modal-list li span,
.banda2-modal-list li {
color: #94a3b8;
font-size: 0.85rem;
line-height: 1.5;
font-family: 'Poppins', sans-serif;
}
/* ===== BADGES TECNOLÓGICOS ===== */
.banda2-tech-badge,
.ns-badge-container .banda2-tech-badge,
.herramienta-badge,
.netsuite-badge,
.seguridad-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0f172a !important;
border: 1px solid #1e293b !important;
padding: 6px 14px !important;
border-radius: 30px !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
color: #94a3b8 !important;
margin: 4px;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.banda2-tech-badge::before,
.ns-badge-container .banda2-tech-badge::before {
content: "▹";
color: #3b82f6;
font-size: 0.7rem;
}
.banda2-tech-badge:hover,
.ns-badge-container .banda2-tech-badge:hover,
.herramienta-badge:hover,
.netsuite-badge:hover,
.seguridad-badge:hover {
background: #1e293b !important;
border-color: #3b82f6 !important;
color: #ffffff !important;
transform: translateY(-2px);
}
/* ===== CONTENEDOR DE BADGES ===== */
.ns-badge-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
/* ===== TARJETAS DE INTEGRACIÓN (2 columnas) ===== */
.integracion-grid-2cols,
.industria-grid-2cols,
.bi-grid-2cols,
.seguridad-grid-2cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 20px;
}
/* Tarjeta de integración */
.integracion-concept-card,
.industria-capacidad-card,
.bi-indicador-card,
.seguridad-control-card {
background: #0f172a;
border-radius: 16px;
padding: 16px;
border: 1px solid #1e293b;
transition: all 0.3s ease;
}
.integracion-concept-card:hover,
.industria-capacidad-card:hover,
.bi-indicador-card:hover,
.seguridad-control-card:hover {
background: #1e293b;
transform: translateY(-4px);
border-color: #3b82f6;
}
/* Iconos en tarjetas de integración */
.integracion-concept-header i,
.industria-capacidad-icon i,
.bi-indicador-icon i,
.seguridad-control-icon i {
font-size: 1.3rem;
color: #3b82f6;
margin-bottom: 12px;
display: inline-block;
}
.integracion-concept-header h4,
.industria-capacidad-content h4,
.bi-indicador-content h4,
.seguridad-control-content h4 {
color: #60a5fa;
font-size: 0.9rem;
font-weight: 700;
margin: 0 0 8px 0;
font-family: 'Poppins', sans-serif;
}
.integracion-concept-text,
.industria-capacidad-content p,
.bi-indicador-content p,
.seguridad-control-content p {
color: #94a3b8;
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== CAJA DE DESCRIPCIÓN PRINCIPAL ===== */
.bi-descripcion-box,
.seguridad-descripcion-box,
.industria-plataforma-box-small {
background: linear-gradient(135deg, #0f172a, #0a0f1c);
border-radius: 20px;
padding: 20px 24px;
margin-bottom: 25px;
border-left: 4px solid #3b82f6;
border-right: 1px solid #1e293b;
}
.bi-descripcion-box p,
.seguridad-descripcion-box p,
.industria-plataforma-box-small p {
color: #94a3b8;
font-size: 0.85rem;
line-height: 1.6;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.bi-descripcion-box p strong,
.seguridad-descripcion-box p strong {
color: #60a5fa;
}
/* ===== BOTÓN DE ACCIÓN (Entendido) ===== */
.banda2-modal-action {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
text-align: right;
}
.banda2-modal-btn {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border: none;
padding: 10px 28px;
border-radius: 40px;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.banda2-modal-btn:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}
/* ===== ANIMACIÓN GLITCH ===== */
@keyframes banda2-glitch {
0% { text-shadow: -2px 0 #3b82f6, 2px 0 #f5a425; opacity: 0.8; }
50% { text-shadow: 2px 0 #3b82f6, -2px 0 #f5a425; }
100% { text-shadow: none; opacity: 1; }
}
.banda2-glitch-effect {
animation: banda2-glitch 0.5s ease-out;
}
/* ===== CONTENEDOR DE IMAGEN ===== */
.banda2-modal-image-card {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-top: 1rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
border: 1px solid #1e293b;
}
.banda2-modal-image {
width: 100%;
display: block;
transition: transform 0.3s ease;
}
.banda2-modal-image-card:hover .banda2-modal-image {
transform: scale(1.02);
}
.banda2-modal-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
pointer-events: none;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.banda2-modal-grid {
flex-direction: column;
gap: 20px;
}
.integracion-grid-2cols,
.industria-grid-2cols,
.bi-grid-2cols,
.seguridad-grid-2cols {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.banda2-modal-container {
width: 95%;
max-height: 90vh;
}
.banda2-modal-header {
padding: 18px 22px;
}
.banda2-modal-header h2 {
font-size: 1.2rem;
}
.banda2-modal-body {
padding: 20px;
}
.banda2-modal-close {
top: 15px;
right: 15px;
width: 35px;
height: 35px;
}
.ns-feature-card,
.problema-card,
.beneficio-card {
padding: 1rem;
}
.banda2-modal-list li {
padding: 10px 12px;
}
}
/* ===== HOVER PARA IMAGEN DE SAP - MISMO ESTILO QUE OTRAS BANDAS ===== */
/* Contenedor de la imagen */
.banda3-hover-image-card {
position: relative;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
}
/* Imagen base */
.banda3-hover-image {
width: 100%;
display: block;
transition: transform 0.5s ease;
border-radius: 20px;
}
/* Zoom en hover - MISMO QUE OTRAS BANDAS */
.banda3-hover-image-card:hover .banda3-hover-image {
transform: scale(1.05);
}
/* Overlay que aparece en hover */
.banda3-hover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(13, 102, 171, 0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 20px;
}
/* Mostrar overlay en hover */
.banda3-hover-image-card:hover .banda3-hover-overlay {
opacity: 1;
}
/* Contenido del overlay */
.banda3-overlay-content {
text-align: center;
color: white;
padding: 20px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
/* Mostrar contenido en hover */
.banda3-hover-image-card:hover .banda3-overlay-content {
transform: translateY(0);
}
/* Icono dentro del overlay */
.banda3-overlay-content i {
font-size: 2rem;
margin-bottom: 10px;
color: #f5a425;
}
/* Texto dentro del overlay */
.banda3-overlay-content p {
color: white;
font-size: 0.85rem;
margin-bottom: 12px;
}
/* Botón dentro del overlay */
.banda3-overlay-btn {
background-color: #f5a425;
color: #1e1e1e;
padding: 6px 18px;
border-radius: 25px;
font-size: 0.7rem;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.banda3-overlay-btn:hover {
background-color: white;
color: #0d66ab;
}
/* ============================================
ESTILOS PARA SAP S/4HANA MODAL
============================================ */
/* Caja de definición */
.s4hana-definicion-box {
display: flex;
align-items: flex-start;
gap: 20px;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.15), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 25px;
margin-bottom: 30px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.s4hana-definicion-box:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.22), rgba(13, 102, 171, 0.08));
transform: translateY(-2px);
}
.s4hana-definicion-icon {
flex-shrink: 0;
width: 55px;
height: 55px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.s4hana-definicion-icon i {
font-size: 1.8rem;
color: #f5a425;
}
.s4hana-definicion-texto h4 {
color: #f5a425;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
font-family: 'Poppins', sans-serif;
}
.s4hana-definicion-texto p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.s4hana-definicion-texto strong {
color: #f5a425;
}
/* Grid de modelos de implementación (2 columnas) */
.s4hana-modelos-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.s4hana-modelo-card {
background: #0f172a;
border-radius: 18px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.s4hana-modelo-card:hover {
background: #1e293b;
transform: translateY(-4px);
border-color: #f5a425;
}
.s4hana-modelo-card i {
font-size: 2rem;
color: #f5a425;
margin-bottom: 12px;
display: inline-block;
}
.s4hana-modelo-card h4 {
color: #ffffff;
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
font-family: 'Poppins', sans-serif;
}
.s4hana-modelo-card p {
color: #94a3b8;
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Grid de capacidades clave (2 columnas) */
.s4hana-capacidades-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 30px;
}
.s4hana-capacidad-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 16px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.s4hana-capacidad-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.s4hana-capacidad-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.s4hana-capacidad-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.s4hana-capacidad-info h4 {
color: #60a5fa;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.s4hana-capacidad-info p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Grid de beneficios (flex wrap) */
.s4hana-beneficios-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 30px;
}
.s4hana-beneficio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 16px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.s4hana-beneficio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.s4hana-beneficio-card i {
font-size: 1.6rem;
color: #f5a425;
flex-shrink: 0;
width: 45px;
text-align: center;
}
.s4hana-beneficio-card h4 {
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.s4hana-beneficio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Contenedor de imagen */
.s4hana-imagen-container {
margin-top: 15px;
width: 100%;
}
.s4hana-imagen-titulo {
text-align: center;
margin-bottom: 16px;
padding: 12px 15px;
background: linear-gradient(135deg, rgba(13, 102, 171, 0.2), rgba(13, 102, 171, 0.08));
border-radius: 16px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.s4hana-imagen-titulo:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.28), rgba(13, 102, 171, 0.12));
transform: translateY(-2px);
}
.s4hana-imagen-titulo h3 {
color: #f5a425;
font-size: 1rem;
font-weight: 700;
margin-bottom: 5px;
font-family: 'Poppins', sans-serif;
letter-spacing: 0.5px;
}
.s4hana-imagen-titulo h3 i {
margin-right: 8px;
}
.s4hana-imagen-titulo p {
color: #e0e0e0;
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.s4hana-imagen-box {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease;
cursor: pointer;
}
.s4hana-imagen-box:hover {
transform: translateY(-5px);
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}
.s4hana-imagen {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.s4hana-imagen-box:hover .s4hana-imagen {
transform: scale(1.03);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.s4hana-modelos-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.s4hana-capacidades-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.s4hana-beneficios-grid {
grid-template-columns: 1fr;
}
.s4hana-definicion-box {
flex-direction: column;
text-align: center;
align-items: center;
padding: 18px;
}
.s4hana-definicion-icon {
margin-bottom: 10px;
}
}
@media (max-width: 768px) {
.s4hana-definicion-texto p {
font-size: 0.8rem;
}
.s4hana-capacidad-card {
padding: 12px;
}
.s4hana-capacidad-icon {
width: 40px;
height: 40px;
}
.s4hana-capacidad-icon i {
font-size: 1.2rem;
}
.s4hana-beneficio-card {
padding: 12px;
}
.s4hana-beneficio-card i {
font-size: 1.3rem;
width: 35px;
}
}
/* ============================================
ESTILOS PARA SAP BTP (Business Technology Platform)
============================================ */
/* BLOQUE 1: BANNER */
.sap-btp-banner {
display: flex;
align-items: center;
gap: 25px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 24px;
padding: 30px 35px;
margin-bottom: 35px;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(13, 102, 171, 0.3);
}
.sap-btp-banner:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(13, 102, 171, 0.4);
}
.sap-btp-banner-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.sap-btp-banner-icon i {
font-size: 2.5rem;
color: #f5a425;
}
.sap-btp-banner-texto h2 {
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.sap-btp-banner-texto p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 2: INTRODUCCIÓN */
.sap-btp-introduccion {
margin-bottom: 30px;
}
.sap-btp-intro-texto {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.12), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 28px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.sap-btp-intro-texto:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.18), rgba(13, 102, 171, 0.08));
transform: translateX(3px);
}
.sap-btp-intro-texto p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: justify;
}
.sap-btp-intro-texto strong {
color: #f5a425;
font-weight: 700;
}
/* BLOQUE 3: CAPACIDADES GRID */
.sap-btp-capacidades-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.sap-btp-capacidad-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.sap-btp-capacidad-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.sap-btp-capacidad-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.sap-btp-capacidad-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.sap-btp-capacidad-info h4 {
color: #60a5fa;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.sap-btp-capacidad-info p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 4: BENEFICIOS GRID */
.sap-btp-beneficios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.sap-btp-beneficio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 14px 18px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.sap-btp-beneficio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.sap-btp-beneficio-card i {
font-size: 1.5rem;
color: #f5a425;
flex-shrink: 0;
width: 40px;
text-align: center;
}
.sap-btp-beneficio-card h4 {
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.sap-btp-beneficio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.sap-btp-banner {
flex-direction: column;
text-align: center;
padding: 25px 20px;
}
.sap-btp-banner-texto h2 {
font-size: 1.3rem;
}
.sap-btp-banner-texto p {
font-size: 0.85rem;
}
.sap-btp-capacidades-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.sap-btp-beneficios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.sap-btp-banner {
padding: 20px 15px;
}
.sap-btp-banner-icon {
width: 55px;
height: 55px;
}
.sap-btp-banner-icon i {
font-size: 2rem;
}
.sap-btp-banner-texto h2 {
font-size: 1.1rem;
}
.sap-btp-intro-texto {
padding: 16px 18px;
}
.sap-btp-intro-texto p {
font-size: 0.8rem;
}
.sap-btp-capacidad-card {
padding: 12px 15px;
}
.sap-btp-capacidad-icon {
width: 42px;
height: 42px;
}
.sap-btp-capacidad-icon i {
font-size: 1.2rem;
}
.sap-btp-beneficio-card {
padding: 12px 15px;
}
.sap-btp-beneficio-card i {
font-size: 1.3rem;
width: 35px;
}
}
/* ============================================
ESTILOS PARA SAP SUCCESSFACTORS
============================================ */
/* BLOQUE 1: BANNER */
.sf-banner {
display: flex;
align-items: center;
gap: 25px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 24px;
padding: 30px 35px;
margin-bottom: 35px;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(13, 102, 171, 0.3);
}
.sf-banner:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(13, 102, 171, 0.4);
}
.sf-banner-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.sf-banner-icon i {
font-size: 2.5rem;
color: #FF6600;
}
.sf-banner-texto h2 {
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.sf-banner-texto p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 2: INTRODUCCIÓN */
.sf-introduccion {
margin-bottom: 30px;
}
.sf-intro-texto {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.12), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 28px;
border-left: 4px solid #FF6600;
transition: all 0.3s ease;
}
.sf-intro-texto:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.18), rgba(13, 102, 171, 0.08));
transform: translateX(3px);
}
.sf-intro-texto p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: justify;
}
.sf-intro-texto strong {
color: #FF6600;
font-weight: 700;
}
/* BLOQUE 3: CAPACIDADES GRID */
.sf-capacidades-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.sf-capacidad-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.sf-capacidad-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #FF6600;
}
.sf-capacidad-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.sf-capacidad-icon i {
font-size: 1.4rem;
color: #FF6600;
}
.sf-capacidad-info h4 {
color: #60a5fa;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.sf-capacidad-info p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 4: BENEFICIOS GRID */
.sf-beneficios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.sf-beneficio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 14px 18px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.sf-beneficio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #FF6600;
}
.sf-beneficio-card i {
font-size: 1.5rem;
color: #FF6600;
flex-shrink: 0;
width: 40px;
text-align: center;
}
.sf-beneficio-card h4 {
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.sf-beneficio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.sf-banner {
flex-direction: column;
text-align: center;
padding: 25px 20px;
}
.sf-banner-texto h2 {
font-size: 1.3rem;
}
.sf-banner-texto p {
font-size: 0.85rem;
}
.sf-capacidades-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.sf-beneficios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.sf-banner {
padding: 20px 15px;
}
.sf-banner-icon {
width: 55px;
height: 55px;
}
.sf-banner-icon i {
font-size: 2rem;
}
.sf-banner-texto h2 {
font-size: 1.1rem;
}
.sf-intro-texto {
padding: 16px 18px;
}
.sf-intro-texto p {
font-size: 0.8rem;
}
.sf-capacidad-card {
padding: 12px 15px;
}
.sf-capacidad-icon {
width: 42px;
height: 42px;
}
.sf-capacidad-icon i {
font-size: 1.2rem;
}
.sf-beneficio-card {
padding: 12px 15px;
}
.sf-beneficio-card i {
font-size: 1.3rem;
width: 35px;
}
}
/* ============================================
ESTILOS PARA SAP BUSINESS ONE
Usa prefijo sb1- para evitar conflictos
============================================ */
/* BLOQUE 1: BANNER */
.sb1-banner {
display: flex;
align-items: center;
gap: 25px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 24px;
padding: 30px 35px;
margin-bottom: 35px;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(13, 102, 171, 0.3);
}
.sb1-banner:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(13, 102, 171, 0.4);
}
.sb1-banner-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.sb1-banner-icon i {
font-size: 2.5rem;
color: #f5a425;
}
.sb1-banner-texto h2 {
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.sb1-banner-texto p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 2: INTRODUCCIÓN */
.sb1-introduccion {
margin-bottom: 25px;
}
.sb1-intro-texto {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.12), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 28px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.sb1-intro-texto:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.18), rgba(13, 102, 171, 0.08));
transform: translateX(3px);
}
.sb1-intro-texto p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: justify;
}
/* BLOQUE 2B: IDEAL PARA EMPRESAS */
.sb1-ideal {
margin-bottom: 35px;
}
.sb1-ideal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.sb1-ideal-card {
display: flex;
align-items: center;
gap: 12px;
background: rgba(13, 102, 171, 0.1);
border-radius: 12px;
padding: 12px 16px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.sb1-ideal-card:hover {
background: rgba(13, 102, 171, 0.2);
transform: translateX(3px);
}
.sb1-ideal-card i {
font-size: 1.2rem;
color: #f5a425;
width: 30px;
text-align: center;
}
.sb1-ideal-card span {
color: #e0e0e0;
font-size: 0.8rem;
line-height: 1.4;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 3: CAPACIDADES GRID */
.sb1-capacidades-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.sb1-capacidad-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.sb1-capacidad-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.sb1-capacidad-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.sb1-capacidad-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.sb1-capacidad-info h4 {
color: #60a5fa;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.sb1-capacidad-info p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 4: BENEFICIOS GRID */
.sb1-beneficios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.sb1-beneficio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 14px 18px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.sb1-beneficio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.sb1-beneficio-card i {
font-size: 1.5rem;
color: #f5a425;
flex-shrink: 0;
width: 40px;
text-align: center;
}
.sb1-beneficio-card h4 {
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.sb1-beneficio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.sb1-banner {
flex-direction: column;
text-align: center;
padding: 25px 20px;
}
.sb1-banner-texto h2 {
font-size: 1.3rem;
}
.sb1-banner-texto p {
font-size: 0.85rem;
}
.sb1-ideal-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.sb1-capacidades-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.sb1-beneficios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.sb1-banner {
padding: 20px 15px;
}
.sb1-banner-icon {
width: 55px;
height: 55px;
}
.sb1-banner-icon i {
font-size: 2rem;
}
.sb1-banner-texto h2 {
font-size: 1.1rem;
}
.sb1-intro-texto {
padding: 16px 18px;
}
.sb1-intro-texto p {
font-size: 0.8rem;
}
.sb1-ideal-card {
padding: 10px 12px;
}
.sb1-ideal-card i {
font-size: 1rem;
width: 25px;
}
.sb1-ideal-card span {
font-size: 0.75rem;
}
.sb1-capacidad-card {
padding: 12px 15px;
}
.sb1-capacidad-icon {
width: 42px;
height: 42px;
}
.sb1-capacidad-icon i {
font-size: 1.2rem;
}
.sb1-beneficio-card {
padding: 12px 15px;
}
.sb1-beneficio-card i {
font-size: 1.3rem;
width: 35px;
}
}
/* ============================================
ESTILOS PARA SAP ON-PREMISE
Prefijo: op- (On-Premise)
============================================ */
/* BLOQUE 1: BANNER */
.op-banner {
display: flex;
align-items: center;
gap: 25px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 24px;
padding: 30px 35px;
margin-bottom: 35px;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(13, 102, 171, 0.3);
}
.op-banner:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(13, 102, 171, 0.4);
}
.op-banner-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.op-banner-icon i {
font-size: 2.5rem;
color: #f5a425;
}
.op-banner-texto h2 {
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.op-banner-texto p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 2: INTRODUCCIÓN */
.op-introduccion {
margin-bottom: 25px;
}
.op-intro-texto {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.12), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 28px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.op-intro-texto:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.18), rgba(13, 102, 171, 0.08));
transform: translateX(3px);
}
.op-intro-texto p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: justify;
}
.op-intro-texto strong {
color: #f5a425;
font-weight: 700;
}
/* BLOQUE 2B: IDEAL PARA EMPRESAS */
.op-ideal {
margin-bottom: 35px;
}
.op-ideal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.op-ideal-card {
display: flex;
align-items: center;
gap: 12px;
background: rgba(13, 102, 171, 0.1);
border-radius: 12px;
padding: 12px 16px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.op-ideal-card:hover {
background: rgba(13, 102, 171, 0.2);
transform: translateX(3px);
}
.op-ideal-card i {
font-size: 1.2rem;
color: #f5a425;
width: 30px;
text-align: center;
}
.op-ideal-card span {
color: #e0e0e0;
font-size: 0.8rem;
line-height: 1.4;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 3: CAPACIDADES GRID */
.op-capacidades-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.op-capacidad-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.op-capacidad-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.op-capacidad-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.op-capacidad-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.op-capacidad-info h4 {
color: #60a5fa;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.op-capacidad-info p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 4: BENEFICIOS GRID */
.op-beneficios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.op-beneficio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 14px 18px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.op-beneficio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.op-beneficio-card i {
font-size: 1.5rem;
color: #f5a425;
flex-shrink: 0;
width: 40px;
text-align: center;
}
.op-beneficio-card h4 {
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.op-beneficio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.op-banner {
flex-direction: column;
text-align: center;
padding: 25px 20px;
}
.op-banner-texto h2 {
font-size: 1.3rem;
}
.op-banner-texto p {
font-size: 0.85rem;
}
.op-ideal-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.op-capacidades-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.op-beneficios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.op-banner {
padding: 20px 15px;
}
.op-banner-icon {
width: 55px;
height: 55px;
}
.op-banner-icon i {
font-size: 2rem;
}
.op-banner-texto h2 {
font-size: 1.1rem;
}
.op-intro-texto {
padding: 16px 18px;
}
.op-intro-texto p {
font-size: 0.8rem;
}
.op-ideal-card {
padding: 10px 12px;
}
.op-ideal-card i {
font-size: 1rem;
width: 25px;
}
.op-ideal-card span {
font-size: 0.75rem;
}
.op-capacidad-card {
padding: 12px 15px;
}
.op-capacidad-icon {
width: 42px;
height: 42px;
}
.op-capacidad-icon i {
font-size: 1.2rem;
}
.op-beneficio-card {
padding: 12px 15px;
}
.op-beneficio-card i {
font-size: 1.3rem;
width: 35px;
}
}
/* ============================================
ESTILOS PARA SERVICIOS DE MIGRACIÓN
============================================ */
/* Grid de servicios de migración */
.migracion-servicios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
/* Tarjeta de servicio de migración */
.migracion-servicio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.migracion-servicio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.migracion-servicio-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.migracion-servicio-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.migracion-servicio-card h4 {
color: #60a5fa;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.migracion-servicio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Ajuste responsivo */
@media (max-width: 768px) {
.migracion-servicios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.migracion-servicio-card {
padding: 12px 15px;
}
.migracion-servicio-icon {
width: 42px;
height: 42px;
}
.migracion-servicio-icon i {
font-size: 1.2rem;
}
}
/* Grid de servicios de migración */
.migracion-servicios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.migracion-servicio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.migracion-servicio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.migracion-servicio-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.migracion-servicio-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.migracion-servicio-card h4 {
color: #60a5fa;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
}
.migracion-servicio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
}
@media (max-width: 768px) {
.migracion-servicios-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
ESTILOS PARA SOPORTE Y MANTENIMIENTO SAP
============================================ */
/* BLOQUE 1: BANNER */
.soporte-banner {
display: flex;
align-items: center;
gap: 25px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 24px;
padding: 30px 35px;
margin-bottom: 35px;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(13, 102, 171, 0.3);
}
.soporte-banner:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(13, 102, 171, 0.4);
}
.soporte-banner-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.soporte-banner-icon i {
font-size: 2.5rem;
color: #f5a425;
}
.soporte-banner-texto h2 {
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.soporte-banner-texto p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 2: INTRODUCCIÓN */
.soporte-introduccion {
margin-bottom: 30px;
}
.soporte-intro-texto {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.12), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 28px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.soporte-intro-texto:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.18), rgba(13, 102, 171, 0.08));
transform: translateX(3px);
}
.soporte-intro-texto p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: justify;
}
.soporte-intro-texto strong {
color: #f5a425;
}
/* BLOQUE 2B: SERVICIOS ORIENTADOS A */
.soporte-orientado {
margin-bottom: 35px;
}
.soporte-orientado-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.soporte-orientado-card {
display: flex;
align-items: center;
gap: 12px;
background: rgba(13, 102, 171, 0.1);
border-radius: 12px;
padding: 12px 16px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.soporte-orientado-card:hover {
background: rgba(13, 102, 171, 0.2);
transform: translateX(3px);
}
.soporte-orientado-card i {
font-size: 1.2rem;
color: #f5a425;
width: 30px;
text-align: center;
}
.soporte-orientado-card span {
color: #e0e0e0;
font-size: 0.8rem;
line-height: 1.4;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 3: SERVICIOS ESPECIALIZADOS */
.soporte-especializado-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.soporte-especializado-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.soporte-especializado-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.soporte-especializado-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.soporte-especializado-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.soporte-especializado-card h4 {
color: #60a5fa;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.soporte-especializado-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 4: BENEFICIOS */
.soporte-beneficios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.soporte-beneficio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 14px 18px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.soporte-beneficio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.soporte-beneficio-card i {
font-size: 1.5rem;
color: #f5a425;
flex-shrink: 0;
width: 40px;
text-align: center;
}
.soporte-beneficio-card h4 {
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.soporte-beneficio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.soporte-banner {
flex-direction: column;
text-align: center;
padding: 25px 20px;
}
.soporte-banner-texto h2 {
font-size: 1.3rem;
}
.soporte-banner-texto p {
font-size: 0.85rem;
}
.soporte-orientado-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.soporte-especializado-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.soporte-beneficios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.soporte-banner {
padding: 20px 15px;
}
.soporte-banner-icon {
width: 55px;
height: 55px;
}
.soporte-banner-icon i {
font-size: 2rem;
}
.soporte-banner-texto h2 {
font-size: 1.1rem;
}
.soporte-intro-texto {
padding: 16px 18px;
}
.soporte-intro-texto p {
font-size: 0.8rem;
}
.soporte-orientado-card {
padding: 10px 12px;
}
.soporte-orientado-card i {
font-size: 1rem;
width: 25px;
}
.soporte-orientado-card span {
font-size: 0.75rem;
}
.soporte-especializado-card {
padding: 12px 15px;
}
.soporte-especializado-icon {
width: 42px;
height: 42px;
}
.soporte-especializado-icon i {
font-size: 1.2rem;
}
.soporte-beneficio-card {
padding: 12px 15px;
}
.soporte-beneficio-card i {
font-size: 1.3rem;
width: 35px;
}
}
/* ============================================
ESTILOS PARA MIGRACIÓN A SAP S/4HANA CLOUD
============================================ */
/* BLOQUE 1: BANNER */
.migracion-banner {
display: flex;
align-items: center;
gap: 25px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 24px;
padding: 30px 35px;
margin-bottom: 35px;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(13, 102, 171, 0.3);
}
.migracion-banner:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(13, 102, 171, 0.4);
}
.migracion-banner-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.migracion-banner-icon i {
font-size: 2.5rem;
color: #f5a425;
}
.migracion-banner-texto h2 {
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.migracion-banner-texto p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 2: INTRODUCCIÓN */
.migracion-introduccion {
margin-bottom: 30px;
}
.migracion-intro-texto {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.12), rgba(13, 102, 171, 0.05));
border-radius: 20px;
padding: 22px 28px;
border-left: 4px solid #f5a425;
transition: all 0.3s ease;
}
.migracion-intro-texto:hover {
background: linear-gradient(135deg, rgba(13, 102, 171, 0.18), rgba(13, 102, 171, 0.08));
transform: translateX(3px);
}
.migracion-intro-texto p {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.65;
margin: 0;
font-family: 'Poppins', sans-serif;
text-align: justify;
}
/* BLOQUE 3: OPCIONES DE MIGRACIÓN */
.migracion-opciones-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 35px;
}
.migracion-opcion-card {
background: #0f172a;
border-radius: 18px;
padding: 22px 18px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.migracion-opcion-card:hover {
background: #1e293b;
transform: translateY(-5px);
border-color: #f5a425;
}
.migracion-opcion-card i {
font-size: 2.2rem;
color: #f5a425;
margin-bottom: 15px;
display: inline-block;
}
.migracion-opcion-card h4 {
color: #60a5fa;
font-size: 1rem;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.migracion-opcion-card p {
color: #94a3b8;
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 4: SERVICIOS DE MIGRACIÓN */
.migracion-servicios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.migracion-servicio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.migracion-servicio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.migracion-servicio-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.migracion-servicio-icon i {
font-size: 1.4rem;
color: #f5a425;
}
.migracion-servicio-card h4 {
color: #60a5fa;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.migracion-servicio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* BLOQUE 5: BENEFICIOS */
.migracion-beneficios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 35px;
}
.migracion-beneficio-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 16px;
padding: 14px 18px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
}
.migracion-beneficio-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
.migracion-beneficio-card i {
font-size: 1.5rem;
color: #f5a425;
flex-shrink: 0;
width: 40px;
text-align: center;
}
.migracion-beneficio-card h4 {
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.migracion-beneficio-card p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.migracion-banner {
flex-direction: column;
text-align: center;
padding: 25px 20px;
}
.migracion-banner-texto h2 {
font-size: 1.3rem;
}
.migracion-banner-texto p {
font-size: 0.85rem;
}
.migracion-opciones-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.migracion-servicios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.migracion-beneficios-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 768px) {
.migracion-banner {
padding: 20px 15px;
}
.migracion-banner-icon {
width: 55px;
height: 55px;
}
.migracion-banner-icon i {
font-size: 2rem;
}
.migracion-banner-texto h2 {
font-size: 1.1rem;
}
.migracion-intro-texto {
padding: 16px 18px;
}
.migracion-intro-texto p {
font-size: 0.8rem;
}
.migracion-opcion-card {
padding: 16px 14px;
}
.migracion-opcion-card i {
font-size: 1.8rem;
}
.migracion-opcion-card h4 {
font-size: 0.9rem;
}
.migracion-servicio-card {
padding: 12px 15px;
}
.migracion-servicio-icon {
width: 42px;
height: 42px;
}
.migracion-servicio-icon i {
font-size: 1.2rem;
}
.migracion-beneficio-card {
padding: 12px 15px;
}
.migracion-beneficio-card i {
font-size: 1.3rem;
width: 35px;
}
}
/* ============================================
ESTILOS PARA ICONOS EN MODALES NETSUITE
============================================ */
/* Contenedor del icono - círculo azul */
.problema-icono {
flex-shrink: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0D66AB, #0a4d82);
border-radius: 14px;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(13, 102, 171, 0.3);
}
/* Icono dentro del círculo - color naranja */
.problema-icono i {
font-size: 1.5rem !important;
color: #f5a425 !important;
display: block !important;
line-height: 1 !important;
}
/* Hover effect */
.problema-card:hover .problema-icono {
transform: scale(1.05);
background: linear-gradient(135deg, #0a4d82, #0D66AB);
box-shadow: 0 6px 15px rgba(13, 102, 171, 0.4);
}
.problema-card:hover .problema-icono i {
color: #ffffff !important;
transform: scale(1.02);
}
/* Tarjeta completa */
.problema-card {
display: flex;
align-items: center;
gap: 15px;
background: #0f172a;
border-radius: 18px;
padding: 16px 20px;
transition: all 0.3s ease;
border: 1px solid #1e293b;
margin-bottom: 0;
}
.problema-card:hover {
background: #1e293b;
transform: translateX(5px);
border-color: #f5a425;
}
/* Grid para las tarjetas */
.problemas-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 20px;
}
/* Información dentro de la tarjeta */
.problema-info h4 {
color: #60a5fa;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
.problema-info p {
color: #94a3b8;
font-size: 0.7rem;
line-height: 1.4;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* Responsive */
@media (max-width: 992px) {
.problemas-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.problema-icono {
width: 42px;
height: 42px;
}
.problema-icono i {
font-size: 1.2rem !important;
}
.problema-card {
padding: 12px 15px;
}
}
/* ==============================================
ESTILOS PARA SUB-MENU 2 Y SUB-MENU 3 (ANIDADOS)
ICONOS BLANCOS - SIN SOMBRA - TEXTO NEGRO EN HOVER
============================================== */
/* Estilos base para los submenús anidados */
.sub-menu .sub-menu {
position: absolute;
top: 0;
left: 100%;
background: #1a2a3a;
min-width: 260px;
border-radius: 12px;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease;
margin-left: 5px;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
z-index: 1001;
}
/* Estilos específicos para el SUB-MENU 3 */
.sub-menu .sub-menu-3 {
background: #223344;
border-left: 1px solid rgba(245, 164, 37, 0.2);
}
/* Mostrar el submenú anidado al hacer hover */
.sub-menu .has-sub:hover > .sub-menu {
opacity: 1;
visibility: visible;
left: calc(100% + 5px);
}
/* Clase para mostrar a la IZQUIERDA */
.sub-menu .sub-menu.position-left {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 5px;
}
.sub-menu .has-sub:hover > .sub-menu.position-left {
left: auto;
right: calc(100% + 5px);
}
/* Ajuste de los enlaces - texto gris claro por defecto */
.sub-menu .sub-menu li a {
padding: 10px 16px !important;
font-size: 0.75rem !important;
color: #e0e0e0 !important;
white-space: nowrap;
display: flex !important;
align-items: center !important;
transition: all 0.2s ease !important;
}
/* HOVER: texto NEGRO, sin fondo, sin remarcado, SIN SOMBRA */
.sub-menu .sub-menu li a:hover {
background: transparent !important;
color: #000000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* ICONOS BLANCOS - estado normal */
.sub-menu .sub-menu li a i {
font-size: 0.8rem;
color: #ffffff !important;
width: 24px;
margin-right: 10px;
}
/* ICONOS BLANCOS - también en hover (no cambian de color, sin sombra) */
.sub-menu .sub-menu li a:hover i {
color: #ffffff !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Flecha para items con submenú */
.sub-menu .has-sub > a {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.sub-menu .has-sub > a .fa-chevron-right {
transition: transform 0.2s ease;
color: #a0a0a0;
font-size: 10px;
margin-left: 15px;
}
.sub-menu .has-sub:hover > a .fa-chevron-right {
transform: translateX(3px);
color: #ffffff !important;
}
.sub-menu .has-sub > a::after {
display: none !important;
}
/* Garantizar submenús ocultos por defecto */
.sub-menu .sub-menu {
opacity: 0 !important;
visibility: hidden !important;
}
.sub-menu .has-sub:hover > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
}
/* Responsive */
@media (max-width: 992px) {
.sub-menu .sub-menu {
position: static;
top: auto !important;
left: auto;
right: auto;
opacity: 1;
visibility: visible;
display: none;
width: 100%;
margin-left: 0;
margin-top: 5px;
box-shadow: none;
}
.sub-menu .sub-menu-3 {
margin-left: 20px;
width: calc(100% - 20px);
}
.sub-menu .has-sub.active > .sub-menu {
display: block;
}
.sub-menu li a {
white-space: normal;
}
/* HOVER en móvil - texto negro, sin sombra */
.sub-menu .sub-menu li a:hover {
color: #000000 !important;
box-shadow: none !important;
}
.sub-menu .sub-menu li a:hover i {
color: #ffffff !important;
box-shadow: none !important;
}
}
/* ===== ELIMINAR GAP ENTRE MENÚ Y SUBMENÚ ===== */
/* Eliminar cualquier espacio entre el menú padre y el submenú */
.has-sub:hover .sub-menu {
margin-top: 0px !important;
top: 100% !important;
}
/* Eliminar márgenes y paddings que crean separación */
.sub-menu {
margin-top: 0px !important;
padding-top: 0px !important;
}
.sub-menu .sub-menu {
margin-top: 0px !important;
margin-left: 0px !important;
}
/* Asegurar que el área del submenú sea contigua al padre */
.has-sub {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
/* Crear un área de conexión invisible para que el mouse no pierda el hover */
.has-sub::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 10px;
background: transparent;
z-index: 999;
}
/* Para submenús anidados */
.sub-menu .has-sub::after {
bottom: -5px;
height: 10px;
}
/* ==============================================
MENU HAMBURGUESA
============================================== */
/* ===== MENÚ MÓVIL - REGLAS COMPLETAS ===== */
@media (max-width: 992px) {
/* Botón hamburguesa */
.menu-toggle {
display: flex !important;
background: #f5a425;
border: none;
width: 45px;
height: 45px;
border-radius: 8px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
z-index: 9999;
position: relative;
}
.menu-toggle span {
width: 25px;
height: 3px;
background: white;
border-radius: 3px;
transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Contenedor del menú */
.main-nav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/* Menú oculto por defecto */
.main-nav .nav {
display: none !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0a4d82;
flex-direction: column;
padding: 20px;
margin: 0;
border-radius: 0 0 16px 16px;
z-index: 9998;
gap: 5px;
width: 100%;
}
/* Menú visible */
.main-nav .nav.active {
display: flex !important;
}
/* Items del menú */
.main-nav .nav li {
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
.main-nav .nav li a {
display: block;
padding: 12px 16px !important;
font-size: 14px !important;
color: white !important;
background: transparent !important;
}
/* Submenús en móvil */
.has-sub {
position: relative;
}
.has-sub > a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px;
}
.has-sub > a::after {
content: " ▼";
font-size: 10px;
transition: transform 0.3s;
}
.has-sub.active > a::after {
transform: rotate(180deg);
}
.sub-menu {
position: static !important;
display: none !important;
opacity: 1 !important;
visibility: visible !important;
background: rgba(255, 255, 255, 0.15) !important;
margin-top: 8px;
border-radius: 12px;
padding: 8px 0 !important;
width: 100% !important;
box-shadow: none !important;
}
.has-sub.active .sub-menu {
display: block !important;
}
.sub-menu li a {
padding: 8px 16px !important;
font-size: 12px !important;
justify-content: center !important;
}
.sub-menu li a i {
margin-right: 8px;
}
}
/* ============================================
FORZAR COLOR BLANCO EN MENÚS - SOLUCIÓN DEFINITIVA
============================================ */
/* Restablecer color blanco para TODOS los enlaces del menú principal */
.main-nav .nav li a,
.main-nav .nav li a:link,
.main-nav .nav li a:visited,
.main-nav .nav li a:active,
.main-nav .nav li a:focus {
color: #ffffff !important;
background-color: transparent !important;
}
/* Restablecer color blanco para TODOS los enlaces de submenús */
.sub-menu li a,
.sub-menu li a:link,
.sub-menu li a:visited,
.sub-menu li a:active,
.sub-menu li a:focus,
.sub-menu .sub-menu li a,
.sub-menu .sub-menu li a:link,
.sub-menu .sub-menu li a:visited {
color: #ffffff !important;
background-color: transparent !important;
}
/* Iconos en blanco */
.sub-menu li a i,
.main-nav .nav li a i {
color: #ffffff !important;
}
/* SOLO HOVER - cambio TEMPORAL a negro */
.main-nav .nav li a:hover,
.sub-menu li a:hover {
color: #000000 !important;
background-color: rgba(255, 255, 255, 0.15) !important;
}
.main-nav .nav li a:hover i,
.sub-menu li a:hover i {
color: #000000 !important;
}
/* Cuando el mouse SALE, VOLVER A BLANCO inmediatamente */
.main-nav .nav li a:not(:hover),
.sub-menu li a:not(:hover) {
color: #ffffff !important;
background-color: transparent !important;
}
.main-nav .nav li a:not(:hover) i,
.sub-menu li a:not(:hover) i {
color: #ffffff !important;
}
/* Para SAP (banda3) - CORREGIDO: fondos transparentes */
.banda3-section .sub-menu li a,
#sap-section .sub-menu li a {
color: #ffffff !important;
background-color: transparent !important; /* ← CAMBIADO A TRANSPARENTE */
}
.banda3-section .sub-menu li a:hover,
#sap-section .sub-menu li a:hover {
color: #000000 !important;
background-color: transparent !important; /* ← CAMBIADO A TRANSPARENTE */
}
.banda3-section .sub-menu li a:not(:hover),
#sap-section .sub-menu li a:not(:hover) {
color: #ffffff !important;
background-color: #0a4d82 !important;
}
/* Eliminar cualquier estilo que pueda quedar de clases activas no deseadas */
.sub-menu li a.active,
.sub-menu li.active a,
.main-nav .nav li a.active {
color: #ffffff !important;
}
.sub-menu li a.active i,
.sub-menu li.active a i {
color: #ffffff !important;
}
/* ============================================
MODAL TECNOLÓGICO - RESPONSIVO COMPLETO
============================================ */
/* Pantallas grandes (escritorio) */
@media (min-width: 1200px) {
.banda2-modal-container {
width: 85%;
max-width: 1300px;
max-height: 85vh;
}
.banda2-modal-grid {
gap: 40px;
}
.banda2-modal-body {
padding: 35px 40px;
}
}
/* Pantallas medianas (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
.banda2-modal-container {
width: 90%;
max-width: 1100px;
max-height: 85vh;
}
.banda2-modal-grid {
gap: 30px;
}
.banda2-modal-body {
padding: 30px 35px;
}
.banda2-modal-header h2 {
font-size: 1.4rem;
}
.banda2-modal-section-title h3 {
font-size: 1.1rem;
}
}
/* Tablets (768px - 991px) */
@media (max-width: 991px) {
.banda2-modal-container {
width: 95%;
max-width: 95%;
max-height: 90vh;
border-radius: 20px;
}
.banda2-modal-grid {
flex-direction: column;
gap: 25px;
}
.banda2-modal-col {
width: 100%;
min-width: auto;
}
.banda2-modal-body {
padding: 25px;
max-height: calc(90vh - 100px);
}
.banda2-modal-header {
padding: 20px 25px;
}
.banda2-modal-header h2 {
font-size: 1.3rem;
}
.banda2-modal-header p {
font-size: 0.8rem;
}
.banda2-modal-section-title {
margin-bottom: 20px;
padding-bottom: 10px;
}
.banda2-modal-section-title i {
font-size: 1.3rem;
}
.banda2-modal-section-title h3 {
font-size: 1rem;
}
/* Grids de 2 columnas pasan a 1 columna */
.integracion-grid-2cols,
.industria-grid-2cols,
.bi-grid-2cols,
.seguridad-grid-2cols,
.s4hana-capacidades-grid,
.s4hana-beneficios-grid,
.s4hana-modelos-grid,
.sf-capacidades-grid,
.sf-beneficios-grid,
.sb1-capacidades-grid,
.sb1-beneficios-grid,
.op-capacidades-grid,
.op-beneficios-grid,
.problemas-grid,
.kpis-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
/* Tarjetas */
.problema-card,
.beneficio-card,
.seguridad-card,
.ns-feature-card,
.ia-card,
.s4hana-capacidad-card,
.s4hana-beneficio-card,
.sf-capacidad-card,
.sf-beneficio-card,
.sb1-capacidad-card,
.sb1-beneficio-card,
.op-capacidad-card,
.op-beneficio-card {
padding: 14px !important;
}
.problema-icono,
.beneficio-icono,
.seguridad-icono,
.ns-feature-card i,
.ia-icono {
width: 45px !important;
height: 45px !important;
}
.problema-icono i,
.beneficio-icono i,
.seguridad-icono i,
.ns-feature-card i,
.ia-icono i {
font-size: 1.2rem !important;
}
.problema-info h4,
.beneficio-info h4,
.seguridad-info h4,
.ns-feature-card h4,
.ia-info h4 {
font-size: 0.9rem;
}
.problema-info p,
.beneficio-info p,
.seguridad-info p,
.ns-feature-card p,
.ia-info p {
font-size: 0.75rem;
}
/* Imagen dentro del modal */
.banda2-modal-image-card {
margin-top: 10px;
}
/* Botón cerrar más pequeño */
.banda2-modal-close {
width: 35px;
height: 35px;
top: 15px;
right: 15px;
}
.banda2-modal-close i {
font-size: 1rem;
}
/* Badges */
.banda2-tech-badge,
.herramienta-badge,
.netsuite-badge,
.seguridad-badge {
font-size: 0.65rem !important;
padding: 4px 10px !important;
}
}
/* Móviles grandes (576px - 767px) */
@media (max-width: 767px) {
.banda2-modal-container {
width: 98%;
max-height: 92vh;
border-radius: 16px;
}
.banda2-modal-header {
padding: 15px 20px;
}
.banda2-modal-header h2 {
font-size: 1.1rem;
}
.banda2-modal-header p {
font-size: 0.7rem;
}
.banda2-modal-body {
padding: 18px;
max-height: calc(92vh - 80px);
}
/* Scroll personalizado más delgado */
.banda2-modal-body::-webkit-scrollbar {
width: 4px;
}
.banda2-modal-section-title {
gap: 10px;
margin-bottom: 15px;
}
.banda2-modal-section-title i {
font-size: 1.1rem;
}
.banda2-modal-section-title h3 {
font-size: 0.9rem;
}
/* Tarjetas más compactas */
.problema-card,
.beneficio-card,
.seguridad-card,
.ns-feature-card {
padding: 12px !important;
gap: 12px;
}
.problema-icono,
.beneficio-icono,
.seguridad-icono {
width: 38px !important;
height: 38px !important;
}
.problema-icono i,
.beneficio-icono i,
.seguridad-icono i {
font-size: 1rem !important;
}
.problema-info h4,
.beneficio-info h4,
.seguridad-info h4 {
font-size: 0.85rem;
}
.problema-info p,
.beneficio-info p,
.seguridad-info p {
font-size: 0.7rem;
line-height: 1.4;
}
/* Listas */
.banda2-modal-list li {
padding: 8px 12px;
gap: 10px;
}
.banda2-modal-list li i {
font-size: 0.9rem;
min-width: 20px;
}
.banda2-modal-list li strong {
font-size: 0.8rem;
}
.banda2-modal-list li span {
font-size: 0.7rem;
}
/* Botón de acción */
.banda2-modal-btn {
padding: 8px 20px;
font-size: 0.75rem;
}
/* Badges */
.banda2-tech-badge,
.herramienta-badge,
.netsuite-badge,
.seguridad-badge {
font-size: 0.6rem !important;
padding: 3px 8px !important;
}
/* Cajas de descripción */
.bi-descripcion-box,
.seguridad-descripcion-box,
.industria-plataforma-box-small {
padding: 12px 15px;
margin-bottom: 15px;
}
.bi-descripcion-box p,
.seguridad-descripcion-box p,
.industria-plataforma-box-small p {
font-size: 0.7rem;
}
/* Definición S4HANA */
.s4hana-definicion-box {
flex-direction: column;
text-align: center;
padding: 15px;
}
.s4hana-definicion-icon {
margin-bottom: 10px;
}
/* Banners de SAP */
.sap-btp-banner,
.sf-banner,
.sb1-banner,
.op-banner,
.migracion-banner,
.soporte-banner {
flex-direction: column;
text-align: center;
padding: 20px;
}
.sap-btp-banner-icon,
.sf-banner-icon,
.sb1-banner-icon,
.op-banner-icon,
.migracion-banner-icon,
.soporte-banner-icon {
width: 55px;
height: 55px;
}
.sap-btp-banner-icon i,
.sf-banner-icon i,
.sb1-banner-icon i,
.op-banner-icon i,
.migracion-banner-icon i,
.soporte-banner-icon i {
font-size: 1.8rem;
}
.sap-btp-banner-texto h2,
.sf-banner-texto h2,
.sb1-banner-texto h2,
.op-banner-texto h2,
.migracion-banner-texto h2,
.soporte-banner-texto h2 {
font-size: 1rem;
}
.sap-btp-banner-texto p,
.sf-banner-texto p,
.sb1-banner-texto p,
.op-banner-texto p,
.migracion-banner-texto p,
.soporte-banner-texto p {
font-size: 0.75rem;
}
}
/* Móviles pequeños (hasta 575px) */
@media (max-width: 575px) {
.banda2-modal-body {
padding: 15px;
}
.banda2-modal-header h2 {
font-size: 1rem;
}
.banda2-modal-section-title h3 {
font-size: 0.85rem;
}
/* Tarjetas en columna */
.problema-card {
flex-direction: column;
text-align: center;
}
.problema-icono {
margin: 0 auto 10px auto;
}
.beneficio-card {
flex-direction: column;
text-align: center;
}
.beneficio-icono {
margin: 0 auto 10px auto;
}
/* KPIs en móvil */
.kpi-circulo {
width: 50px;
height: 50px;
font-size: 1rem;
}
.kpi-card p {
font-size: 0.7rem;
}
.kpi-card span {
font-size: 0.55rem;
}
/* Listas */
.banda2-modal-list li {
flex-direction: column;
text-align: center;
}
.banda2-modal-list li i {
margin: 0 auto 5px auto;
}
/* Badges container */
.ns-badge-container {
justify-content: center;
}
/* Soluciones grid */
.soluciones-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.solucion-card {
justify-content: center;
}
}
/* Móviles muy pequeños (hasta 400px) */
@media (max-width: 400px) {
.banda2-modal-container {
width: 100%;
max-height: 95vh;
border-radius: 12px;
}
.banda2-modal-header {
padding: 12px 15px;
}
.banda2-modal-header h2 {
font-size: 0.9rem;
}
.banda2-modal-body {
padding: 12px;
}
.banda2-modal-section-title h3 {
font-size: 0.8rem;
}
.banda2-modal-btn {
padding: 6px 15px;
font-size: 0.7rem;
}
.kpi-circulo {
width: 45px;
height: 45px;
font-size: 0.9rem;
}
}
/* Ajustes para landscape (pantalla horizontal en móvil) */
@media (max-width: 900px) and (orientation: landscape) {
.banda2-modal-container {
max-height: 95vh;
}
.banda2-modal-body {
max-height: calc(95vh - 80px);
}
.banda2-modal-grid {
gap: 15px;
}
.problemas-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.banda2-modal-list li {
padding: 6px 10px;
}
}
/* ============================================
MODALES SAP - RESPONSIVO PARA 8 BOTONES
ESPAÑOL E INGLÉS
============================================ */
/* Pantallas grandes (escritorio) */
@media (min-width: 1200px) {
#sapTecnologyModal .banda2-modal-container {
width: 85%;
max-width: 1300px;
max-height: 85vh;
}
#sapTecnologyModal .banda2-modal-grid {
gap: 40px;
}
#sapTecnologyModal .banda2-modal-body {
padding: 35px 40px;
}
/* Banner de SAP */
.sap-btp-banner,
.sf-banner,
.sb1-banner,
.op-banner,
.migracion-banner,
.soporte-banner {
padding: 30px 35px;
}
.sap-btp-banner-texto h2,
.sf-banner-texto h2,
.sb1-banner-texto h2,
.op-banner-texto h2,
.migracion-banner-texto h2,
.soporte-banner-texto h2 {
font-size: 1.6rem;
}
}
/* Pantallas medianas (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
#sapTecnologyModal .banda2-modal-container {
width: 90%;
max-width: 1100px;
max-height: 85vh;
}
#sapTecnologyModal .banda2-modal-grid {
gap: 30px;
}
#sapTecnologyModal .banda2-modal-body {
padding: 30px 35px;
}
#sapTecnologyModal .banda2-modal-header h2 {
font-size: 1.4rem;
}
.sap-btp-banner-texto h2,
.sf-banner-texto h2,
.sb1-banner-texto h2,
.op-banner-texto h2,
.migracion-banner-texto h2,
.soporte-banner-texto h2 {
font-size: 1.3rem;
}
.s4hana-modelos-grid,
.s4hana-capacidades-grid,
.s4hana-beneficios-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
/* Tablets (768px - 991px) */
@media (max-width: 991px) {
#sapTecnologyModal .banda2-modal-container {
width: 95%;
max-width: 95%;
max-height: 90vh;
border-radius: 20px;
}
#sapTecnologyModal .banda2-modal-grid {
flex-direction: column;
gap: 25px;
}
#sapTecnologyModal .banda2-modal-col {
width: 100%;
min-width: auto;
}
#sapTecnologyModal .banda2-modal-body {
padding: 25px;
max-height: calc(90vh - 100px);
}
#sapTecnologyModal .banda2-modal-header {
padding: 20px 25px;
}
#sapTecnologyModal .banda2-modal-header h2 {
font-size: 1.3rem;
}
/* Grids de 2 columnas pasan a 1 columna */
.s4hana-capacidades-grid,
.s4hana-beneficios-grid,
.s4hana-modelos-grid,
.sf-capacidades-grid,
.sf-beneficios-grid,
.sb1-capacidades-grid,
.sb1-beneficios-grid,
.op-capacidades-grid,
.op-beneficios-grid,
.migracion-servicios-grid,
.migracion-beneficios-grid,
.soporte-especializado-grid,
.soporte-beneficios-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
/* Tarjetas - tamaño estándar para tablet */
.s4hana-capacidad-card,
.s4hana-beneficio-card,
.sf-capacidad-card,
.sf-beneficio-card,
.sb1-capacidad-card,
.sb1-beneficio-card,
.op-capacidad-card,
.op-beneficio-card,
.migracion-servicio-card,
.migracion-beneficio-card,
.soporte-especializado-card,
.soporte-beneficio-card {
padding: 14px !important;
}
/* Ajuste para textos largos en inglés */
.s4hana-capacidad-info h4,
.sf-capacidad-info h4,
.sb1-capacidad-info h4,
.op-capacidad-info h4,
.migracion-servicio-card h4,
.soporte-especializado-card h4 {
font-size: 0.85rem !important;
word-break: break-word;
}
.s4hana-capacidad-info p,
.sf-capacidad-info p,
.sb1-capacidad-info p,
.op-capacidad-info p {
font-size: 0.7rem !important;
}
.s4hana-capacidad-icon,
.sf-capacidad-icon,
.sb1-capacidad-icon,
.op-capacidad-icon,
.migracion-servicio-icon,
.soporte-especializado-icon {
width: 45px !important;
height: 45px !important;
}
.s4hana-capacidad-icon i,
.sf-capacidad-icon i,
.sb1-capacidad-icon i,
.op-capacidad-icon i,
.migracion-servicio-icon i,
.soporte-especializado-icon i {
font-size: 1.2rem !important;
}
/* Banner de SAP - versión tablet */
.sap-btp-banner,
.sf-banner,
.sb1-banner,
.op-banner,
.migracion-banner,
.soporte-banner {
flex-direction: column;
text-align: center;
padding: 25px;
}
.sap-btp-banner-icon,
.sf-banner-icon,
.sb1-banner-icon,
.op-banner-icon,
.migracion-banner-icon,
.soporte-banner-icon {
width: 65px;
height: 65px;
margin: 0 auto 15px auto;
}
.sap-btp-banner-icon i,
.sf-banner-icon i,
.sb1-banner-icon i,
.op-banner-icon i,
.migracion-banner-icon i,
.soporte-banner-icon i {
font-size: 2rem;
}
.sap-btp-banner-texto h2,
.sf-banner-texto h2,
.sb1-banner-texto h2,
.op-banner-texto h2,
.migracion-banner-texto h2,
.soporte-banner-texto h2 {
font-size: 1.2rem;
}
/* Definición S4HANA */
.s4hana-definicion-box {
flex-direction: column;
text-align: center;
padding: 18px;
}
.s4hana-definicion-icon {
margin: 0 auto 15px auto;
}
/* Grid de ideales */
.sb1-ideal-grid,
.op-ideal-grid,
.soporte-orientado-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.sb1-ideal-card,
.op-ideal-card,
.soporte-orientado-card {
justify-content: center;
}
}
/* Móviles grandes (576px - 767px) */
@media (max-width: 767px) {
#sapTecnologyModal .banda2-modal-container {
width: 98%;
max-height: 92vh;
border-radius: 16px;
}
#sapTecnologyModal .banda2-modal-header {
padding: 15px 20px;
}
#sapTecnologyModal .banda2-modal-header h2 {
font-size: 1.1rem;
}
#sapTecnologyModal .banda2-modal-header p {
font-size: 0.7rem;
}
#sapTecnologyModal .banda2-modal-body {
padding: 18px;
max-height: calc(92vh - 80px);
}
/* Scroll personalizado más delgado */
#sapTecnologyModal .banda2-modal-body::-webkit-scrollbar {
width: 4px;
}
/* ===== AJUSTES CRÍTICOS PARA INGLÉS ===== */
/* Reducir tamaño de textos largos en inglés */
html[lang="en"] .s4hana-capacidad-info h4,
html[lang="en"] .sf-capacidad-info h4,
html[lang="en"] .sb1-capacidad-info h4,
html[lang="en"] .op-capacidad-info h4,
html[lang="en"] .s4hana-beneficio-card h4,
html[lang="en"] .sf-beneficio-card h4,
html[lang="en"] .sb1-beneficio-card h4,
html[lang="en"] .op-beneficio-card h4,
html[lang="en"] .migracion-servicio-card h4,
html[lang="en"] .migracion-beneficio-card h4,
html[lang="en"] .soporte-especializado-card h4,
html[lang="en"] .soporte-beneficio-card h4 {
font-size: 0.75rem !important;
}
html[lang="en"] .s4hana-capacidad-info p,
html[lang="en"] .sf-capacidad-info p,
html[lang="en"] .sb1-capacidad-info p,
html[lang="en"] .op-capacidad-info p,
html[lang="en"] .s4hana-beneficio-card p,
html[lang="en"] .sf-beneficio-card p,
html[lang="en"] .sb1-beneficio-card p,
html[lang="en"] .op-beneficio-card p {
font-size: 0.65rem !important;
line-height: 1.3 !important;
}
/* Reducir padding en tarjetas para inglés */
html[lang="en"] .s4hana-capacidad-card,
html[lang="en"] .s4hana-beneficio-card,
html[lang="en"] .sf-capacidad-card,
html[lang="en"] .sf-beneficio-card,
html[lang="en"] .sb1-capacidad-card,
html[lang="en"] .sb1-beneficio-card,
html[lang="en"] .op-capacidad-card,
html[lang="en"] .op-beneficio-card {
padding: 10px !important;
gap: 8px !important;
}
/* Tarjetas más compactas */
.s4hana-capacidad-card,
.s4hana-beneficio-card,
.sf-capacidad-card,
.sf-beneficio-card,
.sb1-capacidad-card,
.sb1-beneficio-card,
.op-capacidad-card,
.op-beneficio-card,
.migracion-servicio-card,
.migracion-beneficio-card,
.soporte-especializado-card,
.soporte-beneficio-card {
padding: 12px !important;
gap: 12px;
}
.s4hana-capacidad-icon,
.sf-capacidad-icon,
.sb1-capacidad-icon,
.op-capacidad-icon,
.migracion-servicio-icon,
.soporte-especializado-icon {
width: 40px !important;
height: 40px !important;
}
.s4hana-capacidad-icon i,
.sf-capacidad-icon i,
.sb1-capacidad-icon i,
.op-capacidad-icon i,
.migracion-servicio-icon i,
.soporte-especializado-icon i {
font-size: 1.1rem !important;
}
.s4hana-capacidad-info h4,
.sf-capacidad-info h4,
.sb1-capacidad-info h4,
.op-capacidad-info h4 {
font-size: 0.8rem;
}
.s4hana-capacidad-info p,
.sf-capacidad-info p,
.sb1-capacidad-info p,
.op-capacidad-info p {
font-size: 0.65rem;
}
/* Banner más compacto */
.sap-btp-banner,
.sf-banner,
.sb1-banner,
.op-banner,
.migracion-banner,
.soporte-banner {
padding: 20px;
}
.sap-btp-banner-icon,
.sf-banner-icon,
.sb1-banner-icon,
.op-banner-icon,
.migracion-banner-icon,
.soporte-banner-icon {
width: 55px;
height: 55px;
}
.sap-btp-banner-icon i,
.sf-banner-icon i,
.sb1-banner-icon i,
.op-banner-icon i,
.migracion-banner-icon i,
.soporte-banner-icon i {
font-size: 1.8rem;
}
.sap-btp-banner-texto h2,
.sf-banner-texto h2,
.sb1-banner-texto h2,
.op-banner-texto h2,
.migracion-banner-texto h2,
.soporte-banner-texto h2 {
font-size: 1rem;
}
.sap-btp-banner-texto p,
.sf-banner-texto p,
.sb1-banner-texto p,
.op-banner-texto p,
.migracion-banner-texto p,
.soporte-banner-texto p {
font-size: 0.75rem;
}
/* Imagen S4HANA */
.s4hana-imagen-titulo h3 {
font-size: 0.85rem;
}
.s4hana-imagen-titulo p {
font-size: 0.65rem;
}
/* Botón de acción */
.banda2-modal-btn {
padding: 8px 20px;
font-size: 0.75rem;
}
}
/* Móviles pequeños (hasta 575px) - IMPORTANTE PARA INGLÉS */
@media (max-width: 575px) {
#sapTecnologyModal .banda2-modal-body {
padding: 15px;
}
#sapTecnologyModal .banda2-modal-header h2 {
font-size: 1rem;
}
/* Tarjetas en columna */
.s4hana-capacidad-card,
.sf-capacidad-card,
.sb1-capacidad-card,
.op-capacidad-card,
.migracion-servicio-card,
.soporte-especializado-card {
flex-direction: column;
text-align: center;
}
/* Ajustes específicos para inglés en móvil pequeño */
html[lang="en"] .s4hana-capacidad-card,
html[lang="en"] .sf-capacidad-card,
html[lang="en"] .sb1-capacidad-card,
html[lang="en"] .op-capacidad-card {
padding: 8px !important;
}
html[lang="en"] .s4hana-capacidad-info h4,
html[lang="en"] .sf-capacidad-info h4,
html[lang="en"] .sb1-capacidad-info h4,
html[lang="en"] .op-capacidad-info h4 {
font-size: 0.7rem !important;
}
html[lang="en"] .s4hana-capacidad-info p,
html[lang="en"] .sf-capacidad-info p,
html[lang="en"] .sb1-capacidad-info p,
html[lang="en"] .op-capacidad-info p {
font-size: 0.6rem !important;
}
.s4hana-capacidad-icon,
.sf-capacidad-icon,
.sb1-capacidad-icon,
.op-capacidad-icon,
.migracion-servicio-icon,
.soporte-especializado-icon {
margin: 0 auto 10px auto;
}
.s4hana-beneficio-card,
.sf-beneficio-card,
.sb1-beneficio-card,
.op-beneficio-card,
.migracion-beneficio-card,
.soporte-beneficio-card {
flex-direction: column;
text-align: center;
}
.s4hana-beneficio-card i,
.sf-beneficio-card i,
.sb1-beneficio-card i,
.op-beneficio-card i,
.migracion-beneficio-card i,
.soporte-beneficio-card i {
margin: 0 auto 10px auto;
}
/* Opciones de migración */
.migracion-opciones-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.migracion-opcion-card {
padding: 16px;
}
.migracion-opcion-card i {
font-size: 1.8rem;
}
.migracion-opcion-card h4 {
font-size: 0.9rem;
}
}
/* Móviles muy pequeños (hasta 400px) */
@media (max-width: 400px) {
#sapTecnologyModal .banda2-modal-container {
width: 100%;
max-height: 95vh;
border-radius: 12px;
}
#sapTecnologyModal .banda2-modal-header {
padding: 12px 15px;
}
#sapTecnologyModal .banda2-modal-header h2 {
font-size: 0.9rem;
}
#sapTecnologyModal .banda2-modal-body {
padding: 12px;
}
.banda2-modal-btn {
padding: 6px 15px;
font-size: 0.7rem;
}
/* Ajuste extremo para inglés */
html[lang="en"] .s4hana-capacidad-info h4,
html[lang="en"] .sf-capacidad-info h4,
html[lang="en"] .sb1-capacidad-info h4 {
font-size: 0.65rem !important;
}
.sap-btp-banner-icon,
.sf-banner-icon,
.sb1-banner-icon,
.op-banner-icon,
.migracion-banner-icon,
.soporte-banner-icon {
width: 48px;
height: 48px;
}
.sap-btp-banner-icon i,
.sf-banner-icon i,
.sb1-banner-icon i,
.op-banner-icon i,
.migracion-banner-icon i,
.soporte-banner-icon i {
font-size: 1.5rem;
}
}
/* Ajustes para landscape (pantalla horizontal en móvil) */
@media (max-width: 900px) and (orientation: landscape) {
#sapTecnologyModal .banda2-modal-container {
max-height: 95vh;
}
#sapTecnologyModal .banda2-modal-body {
max-height: calc(95vh - 80px);
}
.s4hana-capacidades-grid,
.sf-capacidades-grid,
.sb1-capacidades-grid,
.op-capacidades-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.s4hana-beneficios-grid,
.sf-beneficios-grid,
.sb1-beneficios-grid,
.op-beneficios-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
/* Ajuste para landscape en inglés */
html[lang="en"] .s4hana-capacidad-info h4,
html[lang="en"] .sf-capacidad-info h4,
html[lang="en"] .sb1-capacidad-info h4 {
font-size: 0.7rem !important;
}
}
/* ============================================
MENÚS DESPLEGABLES - RESPONSIVE MÓVIL
SIN AFECTAR FUNCIONALIDAD DE BOTONES
============================================ */
@media (max-width: 992px) {
/* === BOTÓN HAMBURGUESA === */
.menu-toggle {
display: flex !important;
background: #f5a425;
border: none;
width: 45px;
height: 45px;
border-radius: 8px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
z-index: 9999;
position: relative;
}
.menu-toggle span {
width: 25px;
height: 3px;
background: white;
border-radius: 3px;
transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* === MENÚ PRINCIPAL === */
.main-nav .nav {
display: none !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0a4d82;
flex-direction: column;
padding: 15px;
margin: 0;
border-radius: 0 0 16px 16px;
z-index: 9998;
width: 100%;
max-height: 60vh;
overflow-y: auto;
}
.main-nav .nav.active {
display: flex !important;
}
/* === ITEMS DEL MENÚ === */
.main-nav .nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav .nav li a {
display: block;
padding: 10px 16px !important;
font-size: 14px !important;
color: white !important;
background: transparent !important;
border-radius: 8px;
}
/* === SUBMENÚS DESPLEGABLES (SE ABREN CON CLICK) === */
.has-sub {
position: relative;
}
.has-sub > a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px;
cursor: pointer;
}
/* Flecha indicadora */
.has-sub > a::after {
content: " ▼";
font-size: 10px;
transition: transform 0.3s;
}
.has-sub.active > a::after {
transform: rotate(180deg);
}
/* Submenú oculto por defecto */
.has-sub .sub-menu {
display: none !important;
position: static !important;
background: rgba(255, 255, 255, 0.12) !important;
margin-top: 8px;
border-radius: 12px;
padding: 8px 0 !important;
width: 100% !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Submenú visible cuando el padre tiene clase active */
.has-sub.active .sub-menu {
display: block !important;
}
/* Estilos de los enlaces dentro del submenú */
.sub-menu li a {
padding: 8px 20px !important;
font-size: 13px !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
gap: 10px;
}
/* Submenú de tercer nivel (anidado) */
.sub-menu .has-sub .sub-menu {
margin-left: 15px !important;
width: calc(100% - 15px) !important;
background: rgba(0, 0, 0, 0.2) !important;
}
/* === SCROLL PERSONALIZADO === */
.main-nav .nav::-webkit-scrollbar {
width: 4px;
}
.main-nav .nav::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.main-nav .nav::-webkit-scrollbar-thumb {
background: #f5a425;
border-radius: 4px;
}
}
/* === ESCRITORIO: submenús con hover === */
@media (min-width: 993px) {
.has-sub .sub-menu {
position: absolute;
top: 100%;
left: 0;
display: block;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
background: #0a4d82;
border-radius: 12px;
min-width: 260px;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.has-sub:hover .sub-menu {
opacity: 1;
visibility: visible;
top: 100%;
}
.has-sub > a::after {
display: none;
}
/* Submenús anidados en desktop */
.sub-menu .has-sub .sub-menu {
position: absolute;
top: 0;
left: 100%;
min-width: 240px;
}
.sub-menu .has-sub:hover .sub-menu {
opacity: 1;
visibility: visible;
left: 100%;
}
}
/* === MENÚ PRINCIPAL - COMPORTAMIENTO GENERAL === */
/* Desktop: mostrar menú normal */
@media (min-width: 993px) {
.menu-toggle {
display: none !important;
}
.main-nav .nav {
display: flex !important;
position: relative !important;
}
}
/* Móvil: ocultar menú normal y mostrar hamburguesa */
@media (max-width: 992px) {
.menu-toggle {
display: flex !important;
}
}
/* ============================================
ESTILOS PROFESIONALES PARA TODAS LAS BANDAS
Oracle, Tecnología, NetSuite y SAP
ALINEACIÓN MEJORADA: IZQUIERDA POR DEFECTO
============================================ */
/* ===== PREVENIR SCROLL HORIZONTAL ===== */
html, body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
.banda2-modal-body,
.banda2-modal-container,
.banda2-modal-grid {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* ===== MODALES - CONTENEDOR PRINCIPAL ===== */
.banda2-modal-container {
width: 90% !important;
max-width: 1100px !important;
margin: 0 auto !important;
border-radius: 24px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.banda2-modal-body {
padding: 30px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
max-height: 70vh !important;
flex: 1 !important;
}
.banda2-modal-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 30px !important;
}
.banda2-modal-col {
flex: 1 !important;
min-width: 250px !important;
}
/* ===== BOTÓN "ENTENDIDO" ===== */
.banda2-modal-action {
margin-top: 30px !important;
padding: 20px 15px 25px 15px !important;
text-align: center !important;
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
background: transparent !important;
clear: both !important;
flex-shrink: 0 !important;
}
.banda2-modal-btn {
background: linear-gradient(135deg, #f5a425, #d48a1a) !important;
color: #1a1a1a !important;
border: none !important;
padding: 14px 40px !important;
border-radius: 50px !important;
font-weight: 700 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
box-shadow: 0 4px 15px rgba(245, 164, 37, 0.4) !important;
min-width: 200px !important;
justify-content: center !important;
margin: 0 auto !important;
}
.banda2-modal-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(245, 164, 37, 0.5) !important;
}
/* ============================================
ESTILOS BASE - ALINEACIÓN A LA IZQUIERDA
============================================ */
.banda1-site-header p,
.banda2-site-header p,
.banda3-site-header p,
.banda4-site-header p,
.banda1-info-card p,
.banda2-info-card p,
.banda3-info-card p,
.banda4-info-card p,
.banda2-modal-text p,
.problema-info p,
.beneficio-info p,
.s4hana-definicion-texto p,
.s4hana-capacidad-info p,
.s4hana-modelo-card p,
.sap-btp-banner-texto p,
.sap-btp-intro-texto p,
.sap-btp-capacidad-info p,
.sf-banner-texto p,
.sf-intro-texto p,
.sf-capacidad-info p,
.sb1-banner-texto p,
.sb1-intro-texto p,
.sb1-capacidad-info p,
.op-banner-texto p,
.op-intro-texto p,
.op-capacidad-info p,
.migracion-banner-texto p,
.migracion-intro-texto p,
.migracion-servicio-card p,
.soporte-banner-texto p,
.soporte-intro-texto p,
.soporte-especializado-card p,
.ns-feature-card p,
.ns-enterprise-box p,
.integracion-concept-text,
.industria-capacidad-content p,
.bi-descripcion-box p,
.bi-indicador-content p,
.seguridad-descripcion-box p,
.seguridad-control-content p {
text-align: left !important;
line-height: 1.6 !important;
}
/* ============================================
EXCEPCIÓN 1: Texto justificado profesional
============================================ */
.banda1-site-header p,
.banda2-site-header p,
.banda3-site-header p,
.banda4-site-header p,
.banda2-modal-text p,
.ns-enterprise-box p,
.seguridad-descripcion-box p,
.bi-descripcion-box p,
.industria-capacidad-content p,
.s4hana-definicion-texto p,
.sap-btp-intro-texto p,
.sf-intro-texto p,
.sb1-intro-texto p,
.op-intro-texto p,
.migracion-intro-texto p,
.soporte-intro-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.6 !important;
}
/* ============================================
EXCEPCIÓN 2: Listas con descripciones largas
============================================ */
.banda2-modal-list li,
.bi-capacidades-list li span {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.6 !important;
}
/* ============================================
MEJORA ESPECÍFICA: Texto del Consultor Funcional Oracle
============================================ */
.banda2-modal-text p,
.banda2-modal-col .banda2-modal-text p,
.banda2-modal-grid .banda2-modal-text p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.5px !important;
letter-spacing: normal !important;
line-height: 1.65 !important;
margin-bottom: 15px !important;
}
.banda2-modal-text p:has(strong),
.banda2-modal-text p:has(em) {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.3px !important;
letter-spacing: -0.2px !important;
line-height: 1.6 !important;
}
/* ============================================
RESPONSABILIDADES CLAVE - MEJORA DE JUSTIFICACIÓN
Eliminar espacios vacíos grandes en los recuadros
============================================ */
/* Responsabilidades Clave - ítems de lista dentro de modales */
.banda2-modal-list li,
#tecnologyModal .banda2-modal-list li,
.banda2-section .banda2-modal-list li {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
margin-bottom: 12px !important;
}
/* Responsabilidades Clave - texto dentro de cada ítem */
.banda2-modal-list li span,
.banda2-modal-list li strong {
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* Responsabilidades Clave - íconos mantienen su espacio */
.banda2-modal-list li i {
flex-shrink: 0 !important;
margin-right: 10px !important;
margin-top: 2px !important;
}
/* ============================================
ECOSISTEMA ORACLE CLOUD - AJUSTE DE TEXTO
Desarrollo e Infraestructura, Herramientas y Tecnologías
Justificación suave SIN espacios vacíos grandes
============================================ */
/* Texto de Desarrollo e Infraestructura */
#tecnologyModal .banda2-modal-col p,
.banda2-section .banda2-modal-col p,
.banda2-modal-body .banda2-modal-col p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Tarjetas de capacidad dentro de Ecosistema Oracle Cloud */
#tecnologyModal .s4hana-capacidad-card p,
.banda2-section .s4hana-capacidad-card p,
#tecnologyModal .op-capacidad-card p,
.banda2-section .op-capacidad-card p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* Listas dentro de Ecosistema Oracle Cloud - justificación suave */
#tecnologyModal .banda2-modal-list li,
.banda2-section .banda2-modal-list li {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.3px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Badges tecnológicos dentro de Ecosistema Oracle Cloud */
#tecnologyModal .banda2-tech-badge,
.banda2-section .banda2-tech-badge {
text-align: left !important;
letter-spacing: normal !important;
word-spacing: normal !important;
}
/* Títulos de sección dentro de Ecosistema Oracle Cloud */
#tecnologyModal .banda2-modal-section-title h3,
.banda2-section .banda2-modal-section-title h3,
#tecnologyModal .banda2-modal-section-title h2,
.banda2-section .banda2-modal-section-title h2 {
text-align: left !important;
letter-spacing: normal !important;
}
/* ============================================
IA Y AUTOMATIZACIÓN EMPRESARIAL
FORZAR ALINEACIÓN IZQUIERDA EN TODOS LOS RECUADROS
SuiteAnalytics AI, SuiteFlow, SuiteScript 2.x y más
============================================ */
/* ===== CONTENEDOR PRINCIPAL ===== */
#netsuiteEnterpriseModal .banda2-modal-body,
.banda4-section .banda2-modal-body {
text-align: left !important;
}
/* ===== TARJETAS DE PROBLEMAS EMPRESARIALES ===== */
#netsuiteEnterpriseModal .problema-card,
.banda4-section .problema-card,
.problema-card,
#netsuiteEnterpriseModal .problema-info,
.banda4-section .problema-info,
.problema-info,
#netsuiteEnterpriseModal .problema-info p,
.banda4-section .problema-info p,
.problema-info p,
#netsuiteEnterpriseModal .problema-info h4,
.banda4-section .problema-info h4,
.problema-info h4 {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* ===== TARJETAS DE CARACTERÍSTICAS DE IA ===== */
#netsuiteEnterpriseModal .ia-feature-card,
.banda4-section .ia-feature-card,
.ia-feature-card,
#netsuiteEnterpriseModal .ia-feature-info,
.banda4-section .ia-feature-info,
.ia-feature-info,
#netsuiteEnterpriseModal .ia-feature-info p,
.banda4-section .ia-feature-info p,
.ia-feature-info p,
#netsuiteEnterpriseModal .ia-feature-info h4,
.banda4-section .ia-feature-info h4,
.ia-feature-info h4 {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* ===== TARJETAS ESPECÍFICAS: SuiteAnalytics AI, SuiteFlow, SuiteScript ===== */
#netsuiteEnterpriseModal .ia-feature-card:has(h4:contains("SuiteAnalytics")),
.banda4-section .ia-feature-card:has(h4:contains("SuiteAnalytics")),
#netsuiteEnterpriseModal .ia-feature-card:has(h4:contains("SuiteFlow")),
.banda4-section .ia-feature-card:has(h4:contains("SuiteFlow")),
#netsuiteEnterpriseModal .ia-feature-card:has(h4:contains("SuiteScript")),
.banda4-section .ia-feature-card:has(h4:contains("SuiteScript")) {
text-align: left !important;
}
/* Forzar para todos los títulos dentro de IA */
#netsuiteEnterpriseModal .ia-feature-card h4,
.banda4-section .ia-feature-card h4,
.ia-feature-card h4,
#netsuiteEnterpriseModal .ia-feature-card h5,
.banda4-section .ia-feature-card h5,
.ia-feature-card h5,
#netsuiteEnterpriseModal .ia-feature-card h3,
.banda4-section .ia-feature-card h3,
.ia-feature-card h3 {
text-align: left !important;
text-justify: auto !important;
}
/* Forzar para todos los párrafos dentro de IA */
#netsuiteEnterpriseModal .ia-feature-card p,
.banda4-section .ia-feature-card p,
.ia-feature-card p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* ===== GRID DE AUTOMATIZACIÓN ===== */
#netsuiteEnterpriseModal .ia-automation-grid,
.banda4-section .ia-automation-grid,
.ia-automation-grid,
#netsuiteEnterpriseModal .ia-card,
.banda4-section .ia-card,
.ia-card,
#netsuiteEnterpriseModal .ia-info,
.banda4-section .ia-info,
.ia-info,
#netsuiteEnterpriseModal .ia-info p,
.banda4-section .ia-info p,
.ia-info p,
#netsuiteEnterpriseModal .ia-info h4,
.banda4-section .ia-info h4,
.ia-info h4 {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* ===== TARJETAS DE AUTOMATIZACIÓN FINANCIERA, FORECAST, ETC ===== */
#netsuiteEnterpriseModal .ia-automation-card,
.banda4-section .ia-automation-card,
.ia-automation-card,
#netsuiteEnterpriseModal .automation-card,
.banda4-section .automation-card,
.automation-card {
text-align: left !important;
}
/* ===== CUALQUIER OTRO RECUADRO DENTRO DE IA ===== */
#netsuiteEnterpriseModal [class*="ia-"] p,
.banda4-section [class*="ia-"] p,
[class*="ia-"] p,
#netsuiteEnterpriseModal [class*="automation-"] p,
.banda4-section [class*="automation-"] p,
[class*="automation-"] p,
#netsuiteEnterpriseModal .feature-card p,
.banda4-section .feature-card p,
#netsuiteEnterpriseModal [class*="feature-"] p,
.banda4-section [class*="feature-"] p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* ===== TÍTULOS ESPECÍFICOS DE IA ===== */
#netsuiteEnterpriseModal .ia-feature-card h4,
.banda4-section .ia-feature-card h4,
#netsuiteEnterpriseModal .problema-info h4,
.banda4-section .problema-info h4 {
text-align: left !important;
margin-bottom: 8px !important;
}
/* ===== TEXTO DESCRIPTIVO DE IA ===== */
#netsuiteEnterpriseModal .ia-feature-info p,
.banda4-section .ia-feature-info p {
text-align: left !important;
line-height: 1.5 !important;
}
/* ============================================
METODOLOGÍAS ORACLE - JUSTIFICACIÓN SUAVE
============================================ */
/* Beneficios de metodologías (ítems de lista con descripciones largas) */
.banda2-modal-col .banda2-modal-list li,
.banda2-modal-grid .banda2-modal-list li,
.banda2-modal-body .banda2-modal-list li {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.3px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Párrafos dentro de metodologías - justificados profesionalmente */
.banda2-modal-col .banda2-modal-section-title + p,
.banda2-modal-body .banda2-modal-section-title + p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.3px !important;
letter-spacing: -0.1px !important;
line-height: 1.6 !important;
}
/* Títulos de beneficios (Estructura y trazabilidad, etc.) */
.banda2-modal-col .banda2-modal-list li strong,
.banda2-modal-body .banda2-modal-list li strong {
text-align: left !important;
display: inline-block !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
/* Subtítulos dentro de metodologías (h4) */
.banda2-modal-col h4,
.banda2-modal-body h4 {
text-align: left !important;
text-justify: auto !important;
}
/* ============================================
NETSUITE - MEJORA ESPECÍFICA PARA EVITAR ESPACIOS VACÍOS
============================================ */
/* NetSuite: todos los párrafos dentro del modal - justificación profesional sin espacios vacíos */
#netsuiteEnterpriseModal .banda2-modal-body p,
.banda4-section .banda2-modal-body p,
.netsuite-modal-body p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.8px !important;
letter-spacing: -0.3px !important;
line-height: 1.55 !important;
margin-bottom: 12px !important;
max-width: 100% !important;
word-break: break-word !important;
}
/* NetSuite: elementos específicos con textos largos */
#netsuiteEnterpriseModal .banda2-modal-col p,
.banda4-section .banda2-modal-col p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -1px !important;
letter-spacing: -0.3px !important;
line-height: 1.55 !important;
}
/* NetSuite: cajas de texto descriptivas */
#netsuiteEnterpriseModal .ns-enterprise-box p,
.banda4-section .ns-enterprise-box p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.7px !important;
letter-spacing: -0.2px !important;
line-height: 1.6 !important;
}
/* NetSuite: tarjetas de características */
#netsuiteEnterpriseModal .ns-feature-card p,
.banda4-section .ns-feature-card p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.5px !important;
letter-spacing: -0.2px !important;
line-height: 1.55 !important;
font-size: 0.75rem !important;
}
/* ============================================
TEXTOS QUE NO REQUIEREN JUSTIFICACIÓN
Mantener alineación a la izquierda
============================================ */
/* Texto dentro de badges o contenedores pequeños */
#netsuiteEnterpriseModal .banda4-info-card p,
.banda4-section .banda4-info-card p,
.banda4-info-card p,
.ns-badge-container span,
.banda2-tech-badge,
.herramienta-badge,
.netsuite-badge {
text-align: left !important;
text-justify: auto !important;
}
/* Textos cortos (menos de 3 líneas) - forzar alineación izquierda */
.ns-enterprise-box p:first-child,
.bi-indicador-content p,
.seguridad-control-content p,
.integracion-concept-text,
.industria-capacidad-content p:first-child {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
}
/* Precios, números y métricas - alineación izquierda */
.fact-digit,
.fact-digit-modelos,
.kpi-circulo,
.precio-numero {
text-align: left !important;
text-justify: auto !important;
}
/* Títulos y subtítulos - siempre alineación izquierda */
h1, h2, h3, h4, h5, h6,
.banda2-modal-section-title h2,
.banda2-modal-section-title h3,
.elegir-beneficio-card h4,
.ns-feature-card h4,
.problema-info h4,
.beneficio-info h4 {
text-align: left !important;
text-justify: auto !important;
}
/* Párrafos que contienen solo una línea o texto muy corto */
p:has(br) {
text-align: left !important;
text-justify: auto !important;
}
/* ============================================
INGLÉS - JUSTIFICACIÓN INTELIGENTE
============================================ */
/* NetSuite inglés: ajuste fino */
html[lang="en"] #netsuiteEnterpriseModal .banda2-modal-body p,
html[lang="en"] .banda4-section .banda2-modal-body p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.6px !important;
letter-spacing: -0.2px !important;
line-height: 1.55 !important;
}
/* NetSuite inglés: textos largos */
html[lang="en"] #netsuiteEnterpriseModal .banda2-modal-col p.long-text,
html[lang="en"] .banda4-section .banda2-modal-col p.long-text {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.9px !important;
letter-spacing: -0.25px !important;
line-height: 1.55 !important;
}
/* NetSuite inglés: textos cortos (no justificar) */
html[lang="en"] #netsuiteEnterpriseModal .banda2-modal-col p:has(strong),
html[lang="en"] .banda4-section .banda2-modal-col p:has(strong),
html[lang="en"] .banda2-modal-list li {
text-align: left !important;
word-spacing: normal !important;
}
/* NetSuite inglés: cajas descriptivas */
html[lang="en"] #netsuiteEnterpriseModal .ns-enterprise-box p,
html[lang="en"] .banda4-section .ns-enterprise-box p {
text-align: justify !important;
word-spacing: -0.5px !important;
letter-spacing: -0.15px !important;
}
/* Inglés para metodologías - justificación suave */
html[lang="en"] .banda2-modal-body .banda2-modal-list li {
text-align: justify !important;
word-spacing: -0.2px !important;
}
html[lang="en"] .banda2-modal-body .banda2-modal-list li strong {
text-align: left !important;
word-spacing: normal !important;
}
/* Inglés para Ecosistema Oracle Cloud - ajuste fino */
html[lang="en"] #tecnologyModal .banda2-modal-col p,
html[lang="en"] .banda2-section .banda2-modal-col p {
word-spacing: -0.3px !important;
letter-spacing: -0.1px !important;
}
/* Inglés para Responsabilidades Clave */
html[lang="en"] .banda2-modal-list li {
word-spacing: -0.3px !important;
}
/* Inglés para IA y Automatización - FORZAR ALINEACIÓN IZQUIERDA */
html[lang="en"] #netsuiteEnterpriseModal .problema-info p,
html[lang="en"] .banda4-section .problema-info p,
html[lang="en"] .problema-info p,
html[lang="en"] .ia-feature-info p,
html[lang="en"] .ia-info p,
html[lang="en"] .ia-feature-card,
html[lang="en"] .ia-card,
html[lang="en"] .automation-card p,
html[lang="en"] .ia-feature-card h4 {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
}
/* ============================================
ESTILOS DE LISTAS
============================================ */
.banda2-modal-list {
padding-left: 0 !important;
list-style: none !important;
}
.banda2-modal-list li {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
margin-bottom: 12px !important;
word-break: break-word !important;
}
.banda2-modal-list li i {
flex-shrink: 0 !important;
margin-top: 3px !important;
}
/* ============================================
BENEFICIOS UNIFORMES PARA TODOS LOS BOTONES SAP
============================================ */
.s4hana-beneficios-grid,
.sap-btp-beneficios-grid,
.sf-beneficios-grid,
.sb1-beneficios-grid,
.op-beneficios-grid,
.migracion-beneficios-grid,
.soporte-beneficios-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
}
.s4hana-beneficio-card,
.sap-btp-beneficio-card,
.sf-beneficio-card,
.sb1-beneficio-card,
.op-beneficio-card,
.migracion-beneficio-card,
.soporte-beneficio-card {
background: #0f172a !important;
border-radius: 16px !important;
padding: 20px 15px !important;
text-align: center !important;
transition: all 0.3s ease !important;
border: 1px solid #1e293b !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 130px !important;
height: 100% !important;
width: 100% !important;
}
.s4hana-beneficio-card i,
.sap-btp-beneficio-card i,
.sf-beneficio-card i,
.sb1-beneficio-card i,
.op-beneficio-card i,
.migracion-beneficio-card i,
.soporte-beneficio-card i {
font-size: 1.8rem !important;
color: #f5a425 !important;
margin-bottom: 12px !important;
display: inline-block !important;
}
.s4hana-beneficio-card div,
.sap-btp-beneficio-card div,
.sf-beneficio-card div,
.sb1-beneficio-card div,
.op-beneficio-card div,
.migracion-beneficio-card div,
.soporte-beneficio-card div {
text-align: center !important;
width: 100% !important;
}
.s4hana-beneficio-card strong,
.sap-btp-beneficio-card strong,
.sf-beneficio-card h4,
.sb1-beneficio-card h4,
.op-beneficio-card h4,
.migracion-beneficio-card h4,
.soporte-beneficio-card h4 {
color: #60a5fa !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
display: block !important;
margin-bottom: 6px !important;
text-align: center !important;
line-height: 1.3 !important;
}
.s4hana-beneficio-card span,
.sap-btp-beneficio-card span,
.sf-beneficio-card p,
.sb1-beneficio-card p,
.op-beneficio-card p,
.migracion-beneficio-card p,
.soporte-beneficio-card p {
color: #94a3b8 !important;
font-size: 0.7rem !important;
line-height: 1.4 !important;
display: block !important;
text-align: center !important;
margin: 0 !important;
}
.s4hana-beneficio-card:hover,
.sap-btp-beneficio-card:hover,
.sf-beneficio-card:hover,
.sb1-beneficio-card:hover,
.op-beneficio-card:hover,
.migracion-beneficio-card:hover,
.soporte-beneficio-card:hover {
background: #1e293b !important;
transform: translateY(-4px) !important;
border-color: #f5a425 !important;
}
/* ============================================
CAPACIDADES (alineación izquierda)
============================================ */
.s4hana-capacidad-card,
.sap-btp-capacidad-card,
.sf-capacidad-card,
.sb1-capacidad-card,
.op-capacidad-card {
display: flex !important;
align-items: center !important;
gap: 15px !important;
background: #0f172a !important;
border-radius: 16px !important;
padding: 15px !important;
transition: all 0.3s ease !important;
border: 1px solid #1e293b !important;
}
.s4hana-capacidad-icon,
.sap-btp-capacidad-icon,
.sf-capacidad-icon,
.sb1-capacidad-icon,
.op-capacidad-icon {
flex-shrink: 0 !important;
width: 48px !important;
height: 48px !important;
background: linear-gradient(135deg, #0D66AB, #0a4d82) !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.s4hana-capacidad-icon i,
.sap-btp-capacidad-icon i,
.sf-capacidad-icon i,
.sb1-capacidad-icon i,
.op-capacidad-icon i {
font-size: 1.3rem !important;
color: #f5a425 !important;
}
.s4hana-capacidad-info,
.sap-btp-capacidad-info,
.sf-capacidad-info,
.sb1-capacidad-info,
.op-capacidad-info {
flex: 1 !important;
}
.s4hana-capacidad-info h4,
.sap-btp-capacidad-info h4,
.sf-capacidad-info h4,
.sb1-capacidad-info h4,
.op-capacidad-info h4 {
color: #60a5fa !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
margin-bottom: 4px !important;
text-align: left !important;
}
.s4hana-capacidad-info p,
.sap-btp-capacidad-info p,
.sf-capacidad-info p,
.sb1-capacidad-info p,
.op-capacidad-info p {
color: #94a3b8 !important;
font-size: 0.7rem !important;
line-height: 1.4 !important;
margin: 0 !important;
text-align: left !important;
}
/* ============================================
TÍTULOS DE SECCIÓN
============================================ */
.banda2-modal-section-title {
margin-bottom: 15px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid rgba(245, 164, 37, 0.3) !important;
}
.banda2-modal-section-title h3 {
font-size: 1.1rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
/* ============================================
SECCIÓN "¿POR QUÉ ELEGIR IT GLOBAL SOLUTIONS?"
============================================ */
.elegir-texto-principal p,
.elegir-beneficio-card p,
.elegir-enfoque-texto p,
.elegir-frase-final span,
.elegir-card-principal p {
text-align: left !important;
}
.elegir-texto-principal p,
.elegir-enfoque-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
}
/* Inglés para sección "¿Por qué elegir?" */
html[lang="en"] .elegir-texto-principal p,
html[lang="en"] .elegir-enfoque-texto p {
text-align: left !important;
}
html[lang="en"] .elegir-texto-principal p.long-text,
html[lang="en"] .elegir-enfoque-texto p.long-text {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
}
/* ============================================
NETSUITE - FORMATO PARA APARTADOS INFERIORES
============================================ */
.banda2-modal-col .banda2-modal-section-title + p,
.banda2-modal-col p {
text-align: left !important;
line-height: 1.6 !important;
margin-bottom: 15px !important;
color: #e0e0e0 !important;
font-size: 0.9rem !important;
}
.banda2-modal-col .banda2-modal-section-title + p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.8px !important;
letter-spacing: -0.3px !important;
}
/* Inglés NetSuite */
html[lang="en"] .banda2-modal-col .banda2-modal-section-title + p,
html[lang="en"] .banda2-modal-col p {
text-align: left !important;
}
html[lang="en"] .banda2-modal-col .banda2-modal-section-title + p.long-text {
text-align: justify !important;
word-spacing: -0.6px !important;
}
.banda2-modal-col .banda2-modal-section-title {
margin-top: 20px !important;
margin-bottom: 12px !important;
}
.banda2-modal-col .banda2-modal-section-title h2,
.banda2-modal-col .banda2-modal-section-title h3 {
color: #f5a425 !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
.banda2-modal-col .banda2-modal-image-card {
margin-top: 20px !important;
border-radius: 16px !important;
overflow: hidden !important;
}
.banda2-modal-col .banda2-modal-image-card img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 992px) {
.banda1-row, .banda2-row, .banda3-row, .banda4-row {
flex-direction: column !important;
}
.banda1-col, .banda2-col, .banda3-col, .banda4-col {
max-width: 100% !important;
width: 100% !important;
margin-bottom: 30px !important;
}
.banda1-site-header h1, .banda2-site-header h1, .banda3-site-header h1, .banda4-site-header h1 {
font-size: 1.5rem !important;
text-align: center !important;
}
.banda1-grid, .banda2-grid, .banda3-grid, .banda4-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.banda2-modal-grid {
flex-direction: column !important;
gap: 25px !important;
}
.banda2-modal-body {
padding: 25px !important;
max-height: 70vh !important;
}
.s4hana-beneficios-grid,
.sap-btp-beneficios-grid,
.sf-beneficios-grid,
.sb1-beneficios-grid,
.op-beneficios-grid,
.migracion-beneficios-grid,
.soporte-beneficios-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.banda2-modal-btn {
padding: 12px 35px !important;
font-size: 0.95rem !important;
min-width: 180px !important;
}
.banda2-modal-col p {
font-size: 0.85rem !important;
}
}
@media (max-width: 768px) {
.banda1-grid, .banda2-grid, .banda3-grid, .banda4-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.banda1-tm-nav-link, .banda2-tm-nav-link, .banda3-tm-nav-link, .banda4-tm-nav-link {
height: 110px !important;
padding: 12px !important;
}
.banda1-tm-nav-icon, .banda2-tm-nav-icon, .banda3-tm-nav-icon, .banda4-tm-nav-icon {
font-size: 1.8rem !important;
margin-bottom: 6px !important;
}
.banda1-tm-nav-text, .banda2-tm-nav-text, .banda3-tm-nav-text, .banda4-tm-nav-text {
font-size: 0.7rem !important;
text-align: center !important;
}
.banda1-site-header h1, .banda2-site-header h1, .banda3-site-header h1, .banda4-site-header h1 {
font-size: 1.3rem !important;
}
.banda1-site-header p, .banda2-site-header p, .banda3-site-header p, .banda4-site-header p {
font-size: 0.8rem !important;
line-height: 1.55 !important;
padding: 0 15px !important;
}
.banda2-modal-container {
width: 95% !important;
}
.banda2-modal-body {
padding: 20px !important;
max-height: 65vh !important;
}
.s4hana-beneficios-grid,
.sap-btp-beneficios-grid,
.sf-beneficios-grid,
.sb1-beneficios-grid,
.op-beneficios-grid,
.migracion-beneficios-grid,
.soporte-beneficios-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.s4hana-beneficio-card,
.sap-btp-beneficio-card,
.sf-beneficio-card,
.sb1-beneficio-card,
.op-beneficio-card,
.migracion-beneficio-card,
.soporte-beneficio-card {
flex-direction: row !important;
text-align: left !important;
gap: 15px !important;
padding: 15px !important;
min-height: auto !important;
}
.s4hana-beneficio-card i,
.sap-btp-beneficio-card i,
.sf-beneficio-card i,
.sb1-beneficio-card i,
.op-beneficio-card i,
.migracion-beneficio-card i,
.soporte-beneficio-card i {
font-size: 1.5rem !important;
margin-bottom: 0 !important;
flex-shrink: 0 !important;
}
.s4hana-beneficio-card div,
.sap-btp-beneficio-card div,
.sf-beneficio-card div,
.sb1-beneficio-card div,
.op-beneficio-card div,
.migracion-beneficio-card div,
.soporte-beneficio-card div {
text-align: left !important;
flex: 1 !important;
}
.s4hana-beneficio-card strong,
.sap-btp-beneficio-card strong,
.sf-beneficio-card h4,
.sb1-beneficio-card h4,
.op-beneficio-card h4,
.migracion-beneficio-card h4,
.soporte-beneficio-card h4,
.s4hana-beneficio-card span,
.sap-btp-beneficio-card span,
.sf-beneficio-card p,
.sb1-beneficio-card p,
.op-beneficio-card p,
.migracion-beneficio-card p,
.soporte-beneficio-card p {
text-align: left !important;
}
.s4hana-capacidad-card,
.sap-btp-capacidad-card,
.sf-capacidad-card,
.sb1-capacidad-card,
.op-capacidad-card {
flex-direction: column !important;
text-align: center !important;
}
.s4hana-capacidad-icon,
.sap-btp-capacidad-icon,
.sf-capacidad-icon,
.sb1-capacidad-icon,
.op-capacidad-icon {
margin: 0 auto 10px auto !important;
}
.s4hana-capacidad-info h4,
.sap-btp-capacidad-info h4,
.sf-capacidad-info h4,
.sb1-capacidad-info h4,
.op-capacidad-info h4 {
text-align: center !important;
}
.s4hana-capacidad-info p,
.sap-btp-capacidad-info p,
.sf-capacidad-info p,
.sb1-capacidad-info p,
.op-capacidad-info p {
text-align: center !important;
}
.banda2-modal-action {
margin-top: 20px !important;
padding: 15px 15px 20px 15px !important;
}
.banda2-modal-btn {
padding: 12px 30px !important;
font-size: 0.9rem !important;
min-width: 160px !important;
max-width: 280px !important;
justify-content: center !important;
}
.banda2-modal-col p {
font-size: 0.8rem !important;
line-height: 1.5 !important;
padding: 0 5px !important;
}
.banda2-modal-col .banda2-modal-section-title h2,
.banda2-modal-col .banda2-modal-section-title h3 {
font-size: 0.95rem !important;
}
}
@media (max-width: 480px) {
.banda1-site-header h1, .banda2-site-header h1, .banda3-site-header h1, .banda4-site-header h1 {
font-size: 1.1rem !important;
}
.banda1-site-header p, .banda2-site-header p, .banda3-site-header p, .banda4-site-header p {
font-size: 0.7rem !important;
line-height: 1.5 !important;
}
.banda1-tm-nav-link, .banda2-tm-nav-link, .banda3-tm-nav-link, .banda4-tm-nav-link {
height: 95px !important;
}
.banda1-tm-nav-icon, .banda2-tm-nav-icon, .banda3-tm-nav-icon, .banda4-tm-nav-icon {
font-size: 1.5rem !important;
}
.banda1-tm-nav-text, .banda2-tm-nav-text, .banda3-tm-nav-text, .banda4-tm-nav-text {
font-size: 0.6rem !important;
}
.banda2-modal-body {
padding: 15px !important;
max-height: 60vh !important;
}
.banda2-modal-btn {
padding: 10px 25px !important;
font-size: 0.85rem !important;
min-width: 140px !important;
}
.banda2-modal-col p {
font-size: 0.7rem !important;
line-height: 1.45 !important;
}
.banda2-modal-col .banda2-modal-section-title h2,
.banda2-modal-col .banda2-modal-section-title h3 {
font-size: 0.85rem !important;
}
}
/* ============================================
IMÁGENES
============================================ */
.banda1-hover-image-card img,
.banda2-hover-image-card img,
.banda3-hover-image-card img,
.banda4-hover-image-card img,
.banda2-modal-image {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* ============================================
ESTADÍSTICAS
============================================ */
.banda1-image-stats, .banda2-image-stats, .banda3-image-stats, .banda4-image-stats {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
}
.banda1-stat-item, .banda2-stat-item, .banda3-stat-item, .banda4-stat-item {
flex: 1 1 auto !important;
min-width: 70px !important;
text-align: center !important;
}
/* ============================================
INGLÉS - CONFIGURACIÓN ADICIONAL
============================================ */
@media (max-width: 768px) {
html[lang="en"] .s4hana-beneficios-grid,
html[lang="en"] .sap-btp-beneficios-grid,
html[lang="en"] .sf-beneficios-grid,
html[lang="en"] .sb1-beneficios-grid,
html[lang="en"] .op-beneficios-grid,
html[lang="en"] .migracion-beneficios-grid,
html[lang="en"] .soporte-beneficios-grid {
grid-template-columns: 1fr !important;
}
}
html[lang="en"] .banda2-modal-col p {
text-align: left !important;
line-height: 1.6 !important;
}
@media (max-width: 768px) {
html[lang="en"] .banda2-modal-col p {
font-size: 0.8rem !important;
line-height: 1.5 !important;
}
}
@media (max-width: 480px) {
html[lang="en"] .banda2-modal-col p {
font-size: 0.7rem !important;
line-height: 1.45 !important;
}
}
/* ============================================
CORRECCIÓN DEFINITIVA: 9 RECUADROS IA
Basado en la estructura exacta de tu HTML
============================================ */
/* ===== FUERZA LOS 6 RECUADROS DE LA IZQUIERDA ===== */
.problema-card,
.problema-info,
.problema-card *,
.problema-info * {
text-align: left !important;
}
/* ===== FUERZA LOS 3 RECUADROS DE LA DERECHA ===== */
.problemas-grid .problema-card,
.problemas-grid .problema-info,
.problemas-grid .problema-card *,
.problemas-grid .problema-info * {
text-align: left !important;
}
/* ===== TÍTULOS (h4) ALINEADOS A LA IZQUIERDA ===== */
.problema-card h4,
.problema-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
display: block !important;
}
/* ===== TEXTOS DESCRIPTIVOS (p) ALINEADOS A LA IZQUIERDA ===== */
.problema-card p,
.problema-info p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
display: block !important;
}
/* ===== ELIMINA CUALQUIER JUSTIFICACIÓN EXISTENTE ===== */
.problema-card,
.problema-info,
.problema-card p,
.problema-info p,
.problema-card h4,
.problema-info h4 {
text-align: left !important;
text-align-last: left !important;
}
/* ===== FUERZA DENTRO DEL MODAL COMPLETO ===== */
.banda2-modal-grid .problema-card,
.banda2-modal-grid .problema-info,
.banda2-modal-grid .problema-card p,
.banda2-modal-grid .problema-info p,
.banda2-modal-grid .problema-card h4,
.banda2-modal-grid .problema-info h4 {
text-align: left !important;
}
/* ===== UNIFORMA LA ALTURA DE LOS RECUADROS ===== */
.problema-card {
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
min-height: 85px !important;
height: auto !important;
}
.problema-info {
flex: 1 !important;
}
/* ============================================
SAP S/4HANA - AJUSTE DE TEXTOS
Modelos de implementación y Capacidades clave
Alineación izquierda profesional
============================================ */
/* ===== MODELOS DE IMPLEMENTACIÓN ===== */
/* Tarjetas completas */
.s4hana-modelo-card {
text-align: left !important;
}
/* Títulos de modelos */
.s4hana-modelo-card h4 {
text-align: left !important;
margin-bottom: 8px !important;
font-weight: 700 !important;
}
/* Textos descriptivos de modelos */
.s4hana-modelo-card p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
}
/* ===== CAPACIDADES CLAVE ===== */
/* Cada tarjeta de capacidad */
.s4hana-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
/* Títulos de capacidades */
.s4hana-capacidad-info h4 {
text-align: left !important;
margin-bottom: 4px !important;
font-weight: 700 !important;
}
/* Textos descriptivos de capacidades */
.s4hana-capacidad-info p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* ===== FUERZA DENTRO DEL MODAL SAP ===== */
#sapTecnologyModal .s4hana-modelo-card,
#sapTecnologyModal .s4hana-modelo-card *,
#sapTecnologyModal .s4hana-capacidad-card,
#sapTecnologyModal .s4hana-capacidad-card * {
text-align: left !important;
}
/* ===== AJUSTE PARA QUE SE VEA UNIFORME ===== */
.s4hana-capacidad-info {
flex: 1 !important;
}
.s4hana-modelo-card {
text-align: center !important; /* Esto es para que el contenido esté centrado */
}
/* Si prefieres que los modelos también estén alineados a la izquierda, usa esto: */
.s4hana-modelo-card {
text-align: left !important;
}
/* ============================================
SAP BTP - JUSTIFICACIÓN PROFESIONAL
Elimina espacios vacíos entre palabras
============================================ */
.sap-btp-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.8px !important;
letter-spacing: -0.15px !important;
line-height: 1.5 !important;
word-break: normal !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sap-btp-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.8px !important;
letter-spacing: -0.15px !important;
line-height: 1.5 !important;
}
/* ============================================
SAP BTP - INTRODUCCIÓN JUSTIFICADA
Sin espacios vacíos enormes
============================================ */
.sap-btp-intro-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.6px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sap-btp-intro-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.6px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ============================================
SAP BTP - CAPACIDADES
Alineación izquierda para títulos y textos
============================================ */
/* Cada tarjeta de capacidad */
.sap-btp-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
/* Títulos de las capacidades */
.sap-btp-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
}
/* Textos descriptivos de las capacidades */
.sap-btp-capacidad-info p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Contenedor de la información */
.sap-btp-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sap-btp-capacidad-card,
#sapTecnologyModal .sap-btp-capacidad-info,
#sapTecnologyModal .sap-btp-capacidad-info h4,
#sapTecnologyModal .sap-btp-capacidad-info p {
text-align: left !important;
}
/* ============================================
SAP SUCCESSFACTORS - BANNER
Ligero justificado sin espacios vacíos
============================================ */
.sf-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sf-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ============================================
SAP SUCCESSFACTORS - CAPACIDADES
Alineación izquierda para títulos y textos
============================================ */
/* Cada tarjeta de capacidad */
.sf-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
/* Títulos de las capacidades */
.sf-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
}
/* Textos descriptivos de las capacidades */
.sf-capacidad-info p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Contenedor de la información */
.sf-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sf-capacidad-card,
#sapTecnologyModal .sf-capacidad-info,
#sapTecnologyModal .sf-capacidad-info h4,
#sapTecnologyModal .sf-capacidad-info p {
text-align: left !important;
}
/* ============================================
SAP BUSINESS ONE - BANNER
Ligero justificado sin espacios vacíos
============================================ */
.sb1-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sb1-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ============================================
SAP BUSINESS ONE - CAPACIDADES
Alineación izquierda para títulos y textos
============================================ */
/* Cada tarjeta de capacidad */
.sb1-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
/* Títulos de las capacidades */
.sb1-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
}
/* Textos descriptivos de las capacidades */
.sb1-capacidad-info p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Contenedor de la información */
.sb1-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sb1-capacidad-card,
#sapTecnologyModal .sb1-capacidad-info,
#sapTecnologyModal .sb1-capacidad-info h4,
#sapTecnologyModal .sb1-capacidad-info p {
text-align: left !important;
}
/* ============================================
SAP ON-PREMISE - BANNER
Ligero justificado sin espacios vacíos
============================================ */
.op-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .op-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ============================================
SAP ON-PREMISE - CAPACIDADES
Alineación izquierda para títulos y textos
============================================ */
/* Cada tarjeta de capacidad */
.op-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
/* Títulos de las capacidades */
.op-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
}
/* Textos descriptivos de las capacidades */
.op-capacidad-info p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Contenedor de la información */
.op-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .op-capacidad-card,
#sapTecnologyModal .op-capacidad-info,
#sapTecnologyModal .op-capacidad-info h4,
#sapTecnologyModal .op-capacidad-info p {
text-align: left !important;
}
/* ============================================
SAP ON-PREMISE - IDEAL PARA EMPRESAS
Alineación izquierda para todos los textos
============================================ */
/* Cada tarjeta ideal */
.op-ideal-card {
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Texto de las tarjetas */
.op-ideal-card span {
text-align: left !important;
flex: 1 !important;
}
/* Iconos mantienen su posición */
.op-ideal-card i {
flex-shrink: 0 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .op-ideal-card,
#sapTecnologyModal .op-ideal-card span {
text-align: left !important;
}
/* ============================================
MIGRACIÓN SAP S/4HANA CLOUD - BANNER
Ligero justificado sin espacios vacíos
============================================ */
.migracion-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .migracion-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ============================================
MIGRACIÓN SAP - TODOS LOS TEXTOS A LA IZQUIERDA
Opciones de migración y Servicios
============================================ */
/* ===== OPCIONES DE MIGRACIÓN (Public Cloud / Private Cloud) ===== */
.migracion-opcion-card {
text-align: left !important;
}
.migracion-opcion-card h4 {
text-align: left !important;
margin-bottom: 8px !important;
}
.migracion-opcion-card p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
}
/* ===== SERVICIOS DE MIGRACIÓN ===== */
.migracion-servicio-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
.migracion-servicio-card h4 {
text-align: left !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
}
.migracion-servicio-card p {
text-align: left !important;
text-justify: auto !important;
word-spacing: normal !important;
letter-spacing: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
.migracion-servicio-card div {
flex: 1 !important;
text-align: left !important;
}
/* ===== TÍTULO DE SECCIÓN ===== */
.banda2-modal-section-title {
text-align: left !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .migracion-opcion-card,
#sapTecnologyModal .migracion-opcion-card *,
#sapTecnologyModal .migracion-servicio-card,
#sapTecnologyModal .migracion-servicio-card * {
text-align: left !important;
}
/* ============================================
MIGRACIÓN SAP - OPCIONES DE MIGRACIÓN
Ligero justificado para los textos descriptivos
============================================ */
.migracion-opcion-card p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Títulos centrados o a la izquierda? (los dejo a la izquierda) */
.migracion-opcion-card h4 {
text-align: left !important;
margin-bottom: 8px !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .migracion-opcion-card p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ============================================
SOPORTE Y MANTENIMIENTO SAP - JUSTIFICADO PROFESIONAL
Sin espacios vacíos enormes
============================================ */
.soporte-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.6px !important;
letter-spacing: -0.15px !important;
line-height: 1.55 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .soporte-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.6px !important;
letter-spacing: -0.15px !important;
line-height: 1.55 !important;
}
/* ============================================
SOPORTE SAP - SERVICIOS ORIENTADOS A
Alineación izquierda para todos los textos
============================================ */
/* Cada tarjeta de servicio */
.soporte-orientado-card {
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Texto de las tarjetas */
.soporte-orientado-card span {
text-align: left !important;
flex: 1 !important;
}
/* Iconos mantienen su posición */
.soporte-orientado-card i {
flex-shrink: 0 !important;
}
/* Título de sección a la izquierda */
.banda2-modal-section-title {
text-align: left !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .soporte-orientado-card,
#sapTecnologyModal .soporte-orientado-card span {
text-align: left !important;
}
/* ============================================
INGLÉS - MISMOS ESTILOS QUE ESPAÑOL
Aplicar todos los ajustes al idioma inglés
============================================ */
/* ===== SOPORTE Y MANTENIMIENTO SAP - BANNER (INGLÉS) ===== */
html[lang="en"] .soporte-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -1.2px !important;
letter-spacing: -0.2px !important;
line-height: 1.5 !important;
}
/* ===== SOPORTE SAP - SERVICIOS ORIENTADOS A (INGLÉS) ===== */
html[lang="en"] .soporte-orientado-card {
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
html[lang="en"] .soporte-orientado-card span {
text-align: left !important;
flex: 1 !important;
}
html[lang="en"] .soporte-orientado-card i {
flex-shrink: 0 !important;
}
/* ===== MIGRACIÓN SAP - OPCIONES (INGLÉS) ===== */
html[lang="en"] .migracion-opcion-card p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
html[lang="en"] .migracion-opcion-card h4 {
text-align: left !important;
margin-bottom: 8px !important;
}
/* ===== SAP ON-PREMISE - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .op-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .op-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .op-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .op-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== SAP ON-PREMISE - IDEAL PARA EMPRESAS (INGLÉS) ===== */
html[lang="en"] .op-ideal-card {
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
html[lang="en"] .op-ideal-card span {
text-align: left !important;
flex: 1 !important;
}
html[lang="en"] .op-ideal-card i {
flex-shrink: 0 !important;
}
/* ===== SAP BUSINESS ONE - BANNER (INGLÉS) ===== */
html[lang="en"] .sb1-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ===== SAP BUSINESS ONE - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .sb1-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .sb1-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .sb1-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .sb1-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== SAP SUCCESSFACTORS - BANNER (INGLÉS) ===== */
html[lang="en"] .sf-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ===== SAP SUCCESSFACTORS - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .sf-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .sf-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .sf-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .sf-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== SAP BTP - BANNER (INGLÉS) ===== */
html[lang="en"] .sap-btp-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.8px !important;
letter-spacing: -0.15px !important;
line-height: 1.5 !important;
}
/* ===== SAP BTP - INTRODUCCIÓN (INGLÉS) ===== */
html[lang="en"] .sap-btp-intro-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.5px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ===== SAP BTP - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .sap-btp-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .sap-btp-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .sap-btp-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .sap-btp-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== TÍTULOS DE SECCIÓN (INGLÉS) ===== */
html[lang="en"] .banda2-modal-section-title {
text-align: left !important;
}
/* ===== MIGRACIÓN SAP - SERVICIOS (INGLÉS) ===== */
html[lang="en"] .migracion-servicio-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .migracion-servicio-card h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .migracion-servicio-card p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .migracion-servicio-card div {
flex: 1 !important;
text-align: left !important;
}
/* ============================================
NETSUITE - BADGES DE INTEGRACIONES
Organización profesional y ordenada
============================================ */
/* Contenedor principal de badges */
.ns-badge-container {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
margin: 20px 0 30px 0 !important;
padding: 10px !important;
}
/* Estilo de cada badge */
.banda2-tech-badge {
display: inline-block !important;
background: #0f172a !important;
border: 1px solid #0D66AB !important;
color: #e0e0e0 !important;
padding: 6px 16px !important;
border-radius: 30px !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
text-align: center !important;
white-space: nowrap !important;
transition: all 0.3s ease !important;
cursor: default !important;
}
/* Efecto hover */
.banda2-tech-badge:hover {
background: #0D66AB !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
border-color: #f5a425 !important;
}
/* Para pantallas pequeñas, que los badges se ajusten */
@media (max-width: 768px) {
.ns-badge-container {
gap: 8px !important;
}
.banda2-tech-badge {
padding: 4px 12px !important;
font-size: 0.7rem !important;
white-space: normal !important;
}
}
/* ============================================
SAP S/4HANA - JUSTIFICAR TEXTO DESCRIPTIVO
Selectores amplios para asegurar la justificación
============================================ */
/* Forzar justificación en cualquier párrafo dentro del modal SAP */
#sapTecnologyModal p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Específicamente para el texto dentro de la definición */
.s4hana-definicion-texto p,
.s4hana-definicion-box p,
.s4hana-intro-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* Para cualquier elemento que contenga el texto "ERP inteligente" */
[id*="s4hana"] p,
[class*="s4hana"] p {
text-align: justify !important;
}
/* ============================================
INGLÉS - MISMOS ESTILOS QUE ESPAÑOL
Todos los ajustes aplicados al idioma inglés
============================================ */
/* ===== SAP S/4HANA - TEXTO JUSTIFICADO (INGLÉS) ===== */
html[lang="en"] .s4hana-definicion-texto p,
html[lang="en"] .s4hana-definicion-box p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ===== SOPORTE Y MANTENIMIENTO SAP - BANNER (INGLÉS) ===== */
html[lang="en"] .soporte-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.6px !important;
letter-spacing: -0.15px !important;
line-height: 1.55 !important;
}
/* ===== SOPORTE SAP - SERVICIOS ORIENTADOS A (INGLÉS) ===== */
html[lang="en"] .soporte-orientado-card {
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
html[lang="en"] .soporte-orientado-card span {
text-align: left !important;
flex: 1 !important;
}
html[lang="en"] .soporte-orientado-card i {
flex-shrink: 0 !important;
}
/* ===== MIGRACIÓN SAP - OPCIONES (INGLÉS) ===== */
html[lang="en"] .migracion-opcion-card p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
html[lang="en"] .migracion-opcion-card h4 {
text-align: left !important;
margin-bottom: 8px !important;
}
/* ===== MIGRACIÓN SAP - SERVICIOS (INGLÉS) ===== */
html[lang="en"] .migracion-servicio-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .migracion-servicio-card h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .migracion-servicio-card p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .migracion-servicio-card div {
flex: 1 !important;
text-align: left !important;
}
/* ===== SAP ON-PREMISE - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .op-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .op-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .op-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .op-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== SAP ON-PREMISE - IDEAL PARA EMPRESAS (INGLÉS) ===== */
html[lang="en"] .op-ideal-card {
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
html[lang="en"] .op-ideal-card span {
text-align: left !important;
flex: 1 !important;
}
html[lang="en"] .op-ideal-card i {
flex-shrink: 0 !important;
}
/* ===== SAP BUSINESS ONE - BANNER (INGLÉS) ===== */
html[lang="en"] .sb1-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ===== SAP BUSINESS ONE - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .sb1-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .sb1-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .sb1-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .sb1-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== SAP SUCCESSFACTORS - BANNER (INGLÉS) ===== */
html[lang="en"] .sf-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.4px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ===== SAP SUCCESSFACTORS - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .sf-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .sf-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .sf-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .sf-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== SAP BTP - BANNER (INGLÉS) ===== */
html[lang="en"] .sap-btp-banner-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.8px !important;
letter-spacing: -0.15px !important;
line-height: 1.5 !important;
}
/* ===== SAP BTP - INTRODUCCIÓN (INGLÉS) ===== */
html[lang="en"] .sap-btp-intro-texto p {
text-align: justify !important;
text-justify: inter-word !important;
text-align-last: left !important;
word-spacing: -0.5px !important;
letter-spacing: -0.1px !important;
line-height: 1.55 !important;
}
/* ===== SAP BTP - CAPACIDADES (INGLÉS) ===== */
html[lang="en"] .sap-btp-capacidad-card {
text-align: left !important;
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
}
html[lang="en"] .sap-btp-capacidad-info h4 {
text-align: left !important;
margin-bottom: 6px !important;
}
html[lang="en"] .sap-btp-capacidad-info p {
text-align: left !important;
line-height: 1.5 !important;
}
html[lang="en"] .sap-btp-capacidad-info {
flex: 1 !important;
text-align: left !important;
}
/* ===== TÍTULOS DE SECCIÓN (INGLÉS) ===== */
html[lang="en"] .banda2-modal-section-title {
text-align: left !important;
}
/* ===== NETSUITE - BADGES (INGLÉS) ===== */
html[lang="en"] .ns-badge-container {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}
html[lang="en"] .banda2-tech-badge {
background: #0f172a !important;
border: 1px solid #0D66AB !important;
color: #e0e0e0 !important;
padding: 6px 16px !important;
border-radius: 30px !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
}
html[lang="en"] .banda2-tech-badge:hover {
background: #0D66AB !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
}
/* ============================================
SAP BUSINESS ONE - IDEAL PARA EMPRESAS
Alineación izquierda para todos los textos
============================================ */
.sb1-ideal-card {
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.sb1-ideal-card span {
text-align: left !important;
flex: 1 !important;
}
.sb1-ideal-card i {
flex-shrink: 0 !important;
}
/* Fuerza dentro del modal SAP */
#sapTecnologyModal .sb1-ideal-card,
#sapTecnologyModal .sb1-ideal-card span {
text-align: left !important;
}