@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');
/* ==========================================================================
CTA - CAPA DE ESTILO MODERNO (moderno.css)
--------------------------------------------------------------------------
Se carga DESPUES de style.css y solo reescribe apariencia:
colores, tipografia, sombras, radios, espaciados y microinteracciones.
No cambia el HTML ni la logica ASP. Para desactivarlo, basta con
comentar la linea de la pagina.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS DE DISENO
-------------------------------------------------------------------------- */
:root {
/* Marca */
--cta-blue: #0c5adb;
--cta-blue-600: #0a4fc2;
--cta-blue-700: #0a3f9c;
--cta-navy: #071b45;
--cta-navy-2: #0b2a63;
--cta-sky: #4c8bf4;
--cta-cyan: #22b8ea;
/* Neutros */
--cta-ink: #0f1b33;
--cta-body: #4d5b73;
--cta-muted: #64728c;
--cta-line: #e5eaf2;
--cta-surface: #ffffff;
--cta-soft: #f4f7fc;
--cta-soft-2: #eaf0fb;
/* Gradientes */
--cta-grad: linear-gradient(135deg, #0c5adb 0%, #2f7bf0 55%, #22b8ea 100%);
--cta-grad-dark: linear-gradient(120deg, #071b45 0%, #0b2a63 55%, #0c3f96 100%);
/* Radios */
--cta-r-sm: 10px;
--cta-r: 16px;
--cta-r-lg: 22px;
--cta-r-pill: 999px;
/* Sombras */
--cta-sh-sm: 0 2px 8px rgba(15, 27, 51, .06);
--cta-sh: 0 10px 30px rgba(15, 27, 51, .08);
--cta-sh-lg: 0 22px 50px rgba(15, 27, 51, .13);
--cta-sh-blue: 0 18px 38px rgba(12, 90, 219, .22);
--cta-ease: cubic-bezier(.22, .8, .3, 1);
}
/* --------------------------------------------------------------------------
2. BASE Y TIPOGRAFIA
-------------------------------------------------------------------------- */
body {
font-family: 'Inter', 'Muli', -apple-system, "Segoe UI", Roboto, sans-serif;
color: var(--cta-body);
font-size: 16.5px;
line-height: 1.75;
letter-spacing: -.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--cta-surface);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Plus Jakarta Sans', 'Inter', 'Muli', sans-serif;
color: var(--cta-ink);
letter-spacing: -.02em;
line-height: 1.18;
}
h1 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; }
h2 { font-size: clamp(27px, 3.2vw, 42px); font-weight: 800; }
h3 { font-size: clamp(21px, 2vw, 26px); font-weight: 700; }
h4 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; }
h5 { font-size: 18px; font-weight: 700; }
h6 { font-size: 15px; font-weight: 700; }
p { color: var(--cta-body); }
a { color: var(--cta-blue); transition: color .25s var(--cta-ease); }
a:hover { color: var(--cta-blue-700); text-decoration: none; }
img { max-width: 100%; height: auto; }
::selection { background: rgba(12, 90, 219, .16); color: var(--cta-ink); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid rgba(12, 90, 219, .35);
outline-offset: 2px;
border-radius: 6px;
}
html { scroll-behavior: smooth; }
@media (min-width: 1400px) {
.container { max-width: 1240px; }
}
/* Fondos de seccion mas suaves */
.bg_color2 { background: var(--cta-soft); }
.bg_color3 { background: var(--cta-soft); }
/* --------------------------------------------------------------------------
3. BARRA SUPERIOR (email / telefonos / redes)
-------------------------------------------------------------------------- */
.header_top_menu.bg_color,
.header_top_menu {
background: var(--cta-grad-dark);
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.header_top_menu_address_inner ul li a,
.header_top_menu_icon_inner ul li a {
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, .88);
letter-spacing: .01em;
padding: 3px 0;
display: inline-block;
}
.header_top_menu_address_inner ul li a:hover,
.header_top_menu_icon_inner ul li a:hover { color: #fff; }
.header_top_menu_address_inner ul li a i {
color: var(--cta-cyan);
font-size: 14px;
margin-right: 7px;
}
/* Iconos sociales: unos son tipografia y la X es una imagen, asi que
se centran con flex y se igualan de tamano para que no bailen. */
.header_top_menu_icon_inner ul li { vertical-align: middle; }
.header_top_menu_icon_inner ul li a {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, .10);
margin: 0 3px;
transition: all .25s var(--cta-ease);
}
.header_top_menu_icon_inner ul li a:hover {
background: var(--cta-blue);
transform: translateY(-2px);
}
.header_top_menu_icon_inner ul li a i { line-height: 1; }
.header_top_menu_icon_inner ul li a img {
display: block;
width: 13px;
height: 13px;
max-width: none;
object-fit: contain;
vertical-align: middle;
filter: brightness(0) invert(1);
}
/* El icono cuadrado de YouTube desentona con el resto: se usa la
version con el triangulo de reproduccion */
.header_top_menu_icon_inner .fa-youtube::before,
.follow-company-icon .fa-youtube::before { content: "\f16a"; }
/* --------------------------------------------------------------------------
4. CABECERA Y MENU PRINCIPAL
-------------------------------------------------------------------------- */
.techno_nav_manu {
background: rgba(255, 255, 255, .92);
-webkit-backdrop-filter: saturate(160%) blur(12px);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--cta-line);
transition: all .35s var(--cta-ease);
}
/* Logo: alto fijo y centrado vertical, para que mantenga el mismo
tamano en estado normal y al hacer scroll. Ojo: en sticky el tema
sustituye la imagen con `content: url(...)` sobre el propio ,
asi que hay que dimensionar tambien el enlace. */
.techno_nav_manu .row { align-items: center; }
.techno_nav_manu .logo {
display: flex;
align-items: center;
min-height: 90px;
}
.techno_nav_manu .logo_img {
display: inline-flex;
align-items: center;
line-height: 0;
transition: all .35s var(--cta-ease);
}
.techno_nav_manu .logo_img img {
height: 78px;
max-height: none;
width: auto;
transition: all .35s var(--cta-ease);
}
.techno_menu > ul > li > a {
color: var(--cta-ink);
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
font-size: 15.5px;
font-weight: 700 !important;
margin: 33px 9px;
padding: 6px 2px;
letter-spacing: -.01em;
}
/* Subrayado animado */
.techno_menu > ul > li > a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
height: 2px;
width: 0;
border-radius: 2px;
background: var(--cta-grad);
transition: width .3s var(--cta-ease);
}
.techno_menu > ul > li:hover > a::after,
.techno_menu > ul > li.current > a::after { width: 100%; }
.techno_menu > ul > li:hover > a,
.techno_menu > ul > li.current > a { color: var(--cta-blue); }
/* Estado sticky: navy con desenfoque */
.techno_nav_manu.sticky {
background: linear-gradient(120deg, rgba(7, 27, 69, .96), rgba(11, 47, 122, .96)) !important;
-webkit-backdrop-filter: saturate(160%) blur(14px);
backdrop-filter: saturate(160%) blur(14px);
box-shadow: 0 10px 30px rgba(7, 27, 69, .18);
border-bottom-color: transparent;
}
.techno_nav_manu.sticky .techno_menu > ul > li > a { color: #fff; }
.techno_nav_manu.sticky .techno_menu > ul > li:hover > a,
.techno_nav_manu.sticky .techno_menu > ul > li.current > a { color: var(--cta-cyan); }
.techno_nav_manu.sticky .logo { min-height: 72px; }
.techno_nav_manu.sticky .logo_img img { height: 60px; }
/* En sticky el pasa a ser elemento reemplazado (content: url) */
.techno_nav_manu.sticky .logo_img {
height: 60px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.techno_nav_manu.sticky .techno_menu > ul > li > a { margin-top: 24px; margin-bottom: 24px; }
/* Submenus */
.techno_menu ul .sub-menu {
width: 268px;
padding: 10px;
background: #fff;
border-top: 0;
border-radius: var(--cta-r);
box-shadow: 0 18px 44px rgba(15, 27, 51, .16);
top: 118%;
transform: translateY(6px);
transition: opacity .22s var(--cta-ease), transform .22s var(--cta-ease), visibility .22s;
}
.techno_menu ul li:hover > .sub-menu {
top: 100%;
transform: translateY(0);
}
.techno_menu ul .sub-menu li a {
padding: 10px 14px;
border-radius: var(--cta-r-sm);
font-size: 14.5px;
font-weight: 500;
color: var(--cta-body) !important;
transition: all .18s var(--cta-ease);
}
.techno_menu ul .sub-menu li:hover > a,
.techno_menu ul .sub-menu .sub-menu li:hover > a {
background: var(--cta-soft-2);
color: var(--cta-blue) !important;
padding-left: 20px;
}
.techno_menu ul .sub-menu .sub-menu {
border-radius: var(--cta-r);
padding: 10px;
}
/* --------------------------------------------------------------------------
5. MENU MOVIL (meanmenu)
-------------------------------------------------------------------------- */
/* Barra clara: el logo del sitio es azul oscuro y debe leerse sobre ella */
.mobile-menu-area,
.mean-container .mean-bar {
background: #fff;
box-shadow: 0 2px 12px rgba(15, 27, 51, .07);
}
.mean-container a.meanmenu-reveal { color: var(--cta-ink); padding: 16px 16px 12px; }
.mean-container a.meanmenu-reveal span { background: var(--cta-navy); border-radius: 2px; }
.mean-container .mean-nav { background: #fff; box-shadow: var(--cta-sh); }
.mean-container .mean-nav ul li a {
color: var(--cta-ink);
font-weight: 600;
border-top-color: var(--cta-line);
padding: 13px 6%;
}
.mean-container .mean-nav ul li a:hover {
background: var(--cta-soft-2);
color: var(--cta-blue);
}
.mean-container .mean-nav ul li a.mean-expand { color: var(--cta-blue); font-weight: 400; }
/* --------------------------------------------------------------------------
6. SLIDER / HERO
-------------------------------------------------------------------------- */
.slider_area {
position: relative;
overflow: hidden;
}
.slider_area.slider4 { height: clamp(460px, 64vh, 680px); }
/* Velo degradado para que el texto siempre se lea */
.slider_list .slider_area::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(7, 20, 45, .80) 0%, rgba(7, 20, 45, .55) 42%, rgba(7, 20, 45, .08) 75%, rgba(7, 20, 45, 0) 100%);
z-index: 1;
pointer-events: none;
}
.slider_list .slider_area > .container { position: relative; z-index: 2; }
/* Tarjeta de texto (sobrescribe el style inline del ASP) */
.slider_text_inner {
background: linear-gradient(135deg, rgba(9, 22, 48, .62), rgba(9, 22, 48, .38)) !important;
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .16) !important;
border-radius: var(--cta-r-lg) !important;
padding: 26px 28px !important;
box-shadow: 0 24px 60px rgba(3, 12, 30, .38);
display: block !important;
}
.slider_text_inner h5 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(21px, 2.6vw, 33px) !important;
font-weight: 800;
line-height: 1.22;
letter-spacing: -.02em;
color: #fff !important;
margin: 0;
}
.slider_button { margin-top: 18px; }
.slider_button .button a { margin-bottom: 10px; }
/* Flechas del carrusel.
El tema ya dibuja el circulo sobre el icono , asi que el
contenedor .owl-prev / .owl-next debe quedarse transparente
(si no, salen dos fondos superpuestos). */
.slider_list .owl-nav div,
.slider_list.owl-carousel .owl-nav button {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
width: auto;
height: auto;
line-height: 0;
padding: 0 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.slider_list .owl-prev i,
.slider_list .owl-next i {
width: 52px;
height: 52px;
line-height: 49px;
font-size: 17px;
text-align: center;
border-radius: 50%;
background: rgba(12, 22, 45, .28);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
border: 1.5px solid rgba(255, 255, 255, .55);
box-shadow: 0 8px 24px rgba(3, 12, 30, .22);
color: #fff;
transition: all .25s var(--cta-ease);
}
.slider_list .owl-prev:hover i,
.slider_list .owl-next:hover i {
background: var(--cta-blue);
border-color: var(--cta-blue);
box-shadow: var(--cta-sh-blue);
}
/* Puntos de los carruseles */
.owl-dots { text-align: center; margin-top: 22px; }
.owl-dots .owl-dot span {
width: 9px !important;
height: 9px !important;
background: #c8d3e6 !important;
border-radius: 50% !important;
transition: all .25s var(--cta-ease);
}
.owl-dots .owl-dot.active span {
width: 30px !important;
border-radius: var(--cta-r-pill) !important;
background: var(--cta-grad) !important;
}
/* --------------------------------------------------------------------------
7. BOTONES
-------------------------------------------------------------------------- */
.button a {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
background: var(--cta-grad);
background-size: 160% 100%;
background-position: 0 0;
border-radius: var(--cta-r-pill);
padding: 14px 30px;
font-size: 16px;
font-weight: 700;
letter-spacing: -.01em;
box-shadow: var(--cta-sh-blue);
transition: transform .28s var(--cta-ease), box-shadow .28s var(--cta-ease), background-position .5s var(--cta-ease);
}
.button a:hover {
transform: translateY(-3px);
background-position: 100% 0;
box-shadow: 0 22px 44px rgba(12, 90, 219, .32);
color: #fff;
}
/* Neutraliza el barrido oblicuo antiguo */
.button a::before { display: none !important; }
.button a i { margin-left: 8px; transition: transform .28s var(--cta-ease); }
.button a:hover i { transform: translateX(4px); }
.button.two a { padding: 13px 28px; }
/* Boton secundario (el "active" del tema).
Por defecto en version clara, que es el caso mas habitual; la
version de cristal se reserva para los fondos oscuros. */
.button .active {
background: rgba(12, 90, 219, .06);
border: 1.5px solid rgba(12, 90, 219, .35);
color: var(--cta-blue);
box-shadow: none;
margin-left: 14px;
}
.button .active:hover {
background: var(--cta-blue);
border-color: var(--cta-blue);
color: #fff;
box-shadow: var(--cta-sh-blue);
}
/* Sobre fondo oscuro: cristal blanco */
.slider_area .button .active,
.call_do_action.bg_before .button .active,
.bg_color4 .button .active,
.footer_middle_area .button .active {
background: rgba(255, 255, 255, .10);
border: 1.5px solid rgba(255, 255, 255, .55);
color: #fff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.slider_area .button .active:hover,
.call_do_action.bg_before .button .active:hover,
.bg_color4 .button .active:hover,
.footer_middle_area .button .active:hover {
background: #fff;
color: var(--cta-blue);
border-color: #fff;
box-shadow: 0 16px 34px rgba(3, 12, 30, .25);
}
.button.three a {
background: #fff;
color: var(--cta-blue);
box-shadow: 0 16px 34px rgba(3, 12, 30, .22);
}
.button.three a:hover { color: var(--cta-blue-700); }
.button.style-four a {
background: transparent;
border: 2px solid var(--cta-blue);
color: var(--cta-blue);
box-shadow: none;
}
.button.style-four a:hover { background: var(--cta-blue); color: #fff; }
/* Secciones claras: el boton secundario necesita borde azul */
.bg_color2 .button .active,
.white_bg .button .active {
border-color: rgba(12, 90, 219, .35);
background: rgba(12, 90, 219, .06);
color: var(--cta-blue);
}
.bg_color2 .button .active:hover,
.white_bg .button .active:hover {
background: var(--cta-blue);
color: #fff;
border-color: var(--cta-blue);
}
/* --------------------------------------------------------------------------
8. TITULOS DE SECCION
-------------------------------------------------------------------------- */
.section_sub_title h6 {
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12.5px !important;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cta-blue) !important;
background: rgba(12, 90, 219, .08);
border: 1px solid rgba(12, 90, 219, .14);
border-radius: var(--cta-r-pill);
padding: 6px 16px;
}
.section_title.white .section_sub_title h6 {
color: #fff !important;
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .22);
}
.section_main_title h1,
.section_main_title h2 { letter-spacing: -.025em; }
.section_main_title h1 span,
.section_main_title h2 span { color: var(--cta-blue); }
.section_main_title p {
margin-top: 16px;
font-size: 17px;
color: var(--cta-muted);
max-width: 780px;
}
.text_center .section_main_title p { margin-left: auto; margin-right: auto; }
/* Sobre fondos oscuros el parrafo debe seguir legible */
.section_title.white .section_main_title p,
.section_title.white .section_content_text p,
.call_do_action.bg_before .section_main_title p { color: rgba(255, 255, 255, .82); }
.section_content_text p { font-size: 17px; }
/* Barra decorativa */
.em_bar { background: transparent; height: auto; }
.em_bar_bg {
height: 5px;
width: 88px;
border-radius: var(--cta-r-pill);
background: linear-gradient(90deg, #0c5adb 0%, #2f7bf0 60%, #22b8ea 100%);
box-shadow: 0 4px 12px rgba(12, 90, 219, .28);
margin: 18px auto;
}
.section_title.white .em_bar_bg {
background: linear-gradient(90deg, #ffffff 0%, #7fd4f5 100%);
box-shadow: none;
}
.em_bar_bg::before { display: none; }
.text_left .em_bar_bg { margin-left: 0; }
/* --------------------------------------------------------------------------
9. TARJETAS DE SERVICIO
-------------------------------------------------------------------------- */
.service_style_three {
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
position: relative;
overflow: hidden;
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease), border-color .35s var(--cta-ease);
}
/* Tarjetas de igual altura SIN comerse el margen inferior del tema
(mb-5). Se estira la tarjeta dentro de su columna en vez de darle
height:100%, que sumaba su propio margen y pegaba las dos filas. */
.row > [class*="col-"]:has(> .service_style_three) {
display: flex;
padding-bottom: 18px;
}
.row > [class*="col-"]:has(> .service_style_three) > .service_style_three {
width: 100%;
}
.service_area .service_style_three { padding-bottom: 30px; }
.service_style_three::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 0;
background: var(--cta-grad);
transition: width .45s var(--cta-ease);
}
.service_style_three:hover {
border: 1px solid rgba(12, 90, 219, .28);
transform: translateY(-8px);
box-shadow: var(--cta-sh-lg);
}
.service_style_three:hover::after { width: 100%; }
.service_style_three_icon i {
width: 82px;
height: 82px;
line-height: 82px;
font-size: 30px;
border-radius: 26px;
background: var(--cta-grad);
box-shadow: 0 14px 28px rgba(12, 90, 219, .28);
transition: transform .4s var(--cta-ease);
}
.service_style_three:hover .service_style_three_icon i {
transform: translateY(-4px) rotate(-6deg);
}
.service_style_three_title h4 { font-size: 21px; }
.service_style_three:hover .service_style_three_title h4 { color: var(--cta-blue); }
.service_style_three_text p { font-size: 16px; color: var(--cta-muted); }
/* El tema saca este boton 28px fuera de la tarjeta (margin negativo);
con las esquinas redondeadas y overflow oculto quedaba cortado. */
.service_style_three_bt_icon {
margin-bottom: 0;
padding-top: 22px !important;
}
.service_style_three_bt_icon a {
width: 52px;
height: 52px;
line-height: 48px;
border: 2px solid var(--cta-line);
color: var(--cta-blue);
box-shadow: var(--cta-sh-sm);
transition: all .3s var(--cta-ease);
}
.service_style_three:hover .service_style_three_bt_icon a {
background: var(--cta-grad);
border-color: transparent;
color: #fff;
box-shadow: var(--cta-sh-blue);
}
/* Servicios numerados de las paginas interiores */
.service_style_two {
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r);
padding: 26px;
box-shadow: var(--cta-sh-sm);
transition: transform .3s var(--cta-ease), box-shadow .3s var(--cta-ease), border-color .3s var(--cta-ease);
}
.service_style_two:hover {
transform: translateY(-5px);
box-shadow: var(--cta-sh);
border-color: rgba(12, 90, 219, .25);
}
.service_style_two_number h1,
.service_style_two_number h2,
.service_style_two_number span {
background: var(--cta-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Tarjetas informativas centradas (catalogo, informatica, internet,
aplicaciones, tienda...). El tema las rellenaba de azul al pasar el
raton; aqui se sigue el mismo patron que el resto: elevacion, borde
azul y la pastilla del icono rellenandose con el degradado. */
.row > [class*="col-"]:has(> .service_style_four) { display: flex; }
.row > [class*="col-"]:has(> .service_style_four) > .service_style_four { width: 100%; }
.service_style_four {
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
padding-bottom: 28px !important;
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease), border-color .35s var(--cta-ease);
}
.service_style_four:hover {
background: #fff;
transform: translateY(-6px);
border-color: rgba(12, 90, 219, .28);
box-shadow: var(--cta-sh-lg);
}
.service_style_four_icon {
display: flex;
justify-content: center;
}
.service_style_four_icon i {
width: 72px;
height: 72px;
line-height: 70px;
text-align: center;
font-size: 28px !important;
border-radius: 50%;
color: var(--cta-blue);
background: rgba(12, 90, 219, .08);
border: 1px solid rgba(12, 90, 219, .12);
transition: all .35s var(--cta-ease);
}
.service_style_four:hover .service_style_four_icon i {
background: var(--cta-grad);
border-color: transparent;
color: #fff;
box-shadow: 0 12px 24px rgba(12, 90, 219, .26);
transform: translateY(-3px);
}
.service_style_four_title h4 { font-size: 20px; color: var(--cta-ink); }
.service_style_four:hover .service_style_four_title h4 { color: var(--cta-blue); }
.service_style_four_text p,
.service_style_four:hover .service_style_four_text p {
font-size: 15.5px;
color: var(--cta-muted);
}
/* Banner informativo del catalogo */
.pg-ver_catalogo .service_area img.img-fluid {
border-radius: var(--cta-r);
box-shadow: var(--cta-sh-sm);
}
/* Tarjetas de aplicaciones desarrolladas (portada) */
.about_area .service_style_three .about_skill_thumb img {
border-radius: var(--cta-r) !important;
box-shadow: var(--cta-sh);
transition: transform .45s var(--cta-ease);
}
.about_area .service_style_three:hover .about_skill_thumb img { transform: scale(1.02); }
/* --------------------------------------------------------------------------
9 bis. GAMING.ASP - bloque de 4 servicios
Misma familia visual que el resto (tarjeta blanca, radio 22, sombra
suave, icono con degradado de marca), pero con la composicion en
horizontal: icono a la izquierda y contenido a la derecha.
El icono se inyecta por CSS, sin tocar el HTML de la pagina.
-------------------------------------------------------------------------- */
.pg-gaming .row > [class*="col-"]:has(> .service_style_five) { display: flex; }
.pg-gaming .row > [class*="col-"]:has(> .service_style_five) > .service_style_five { width: 100%; }
.pg-gaming .service_style_five {
position: relative;
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
padding: 32px 32px 32px 116px !important;
overflow: hidden;
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease), border-color .35s var(--cta-ease);
}
.pg-gaming .service_style_five::before {
content: "\f11b";
font-family: 'FontAwesome';
position: absolute;
left: 30px;
top: 32px;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 25px;
color: #fff;
border-radius: 20px;
background: var(--cta-grad);
box-shadow: 0 12px 26px rgba(12, 90, 219, .26);
transition: transform .4s var(--cta-ease);
}
/* Un icono por tarjeta: mando, teclado, monitor y portatil */
.pg-gaming .row > [class*="col-"]:nth-child(2) .service_style_five::before { content: "\f11c"; }
.pg-gaming .row > [class*="col-"]:nth-child(3) .service_style_five::before { content: "\f108"; }
.pg-gaming .row > [class*="col-"]:nth-child(4) .service_style_five::before { content: "\f109"; }
/* Linea de acento inferior que se despliega al pasar el raton */
.pg-gaming .service_style_five::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: var(--cta-grad);
transition: width .45s var(--cta-ease);
}
.pg-gaming .service_style_five:hover {
transform: translateY(-6px);
border-color: rgba(12, 90, 219, .28);
box-shadow: var(--cta-sh-lg);
}
.pg-gaming .service_style_five:hover::after { width: 100%; }
.pg-gaming .service_style_five:hover::before { transform: translateY(-3px) rotate(-6deg); }
.pg-gaming .service_style_five_title { margin-bottom: 12px !important; }
.pg-gaming .service_style_five_title h4 {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
margin-top: 0;
color: var(--cta-ink);
transition: color .3s var(--cta-ease);
}
.pg-gaming .service_style_five:hover .service_style_five_title h4 { color: var(--cta-blue); }
.pg-gaming .service_style_five_text p { font-size: 15.5px; color: var(--cta-muted); margin-bottom: 0; }
@media (max-width: 575px) {
.pg-gaming .service_style_five { padding: 100px 24px 28px !important; }
.pg-gaming .service_style_five::before { left: 24px; top: 28px; }
}
/* --------------------------------------------------------------------------
9 ter. LISTADOS DE "QUE INCLUYE" (webbasica, webprofesional, tiendaonline)
Fichas compactas en horizontal con el icono en una pastilla azul
suave que se rellena con el degradado al pasar el raton. Mismo
sistema de color y radios, composicion mas ligera que las tarjetas
de servicio para que se lean como un listado.
-------------------------------------------------------------------------- */
.row > [class*="col-"]:has(> .service_style_seven) { display: flex; }
.row > [class*="col-"]:has(> .service_style_seven) > .service_style_seven { width: 100%; }
.service_style_seven {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 22px !important;
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r);
box-shadow: var(--cta-sh-sm);
transition: transform .3s var(--cta-ease), box-shadow .3s var(--cta-ease), border-color .3s var(--cta-ease);
}
.service_style_seven:hover {
transform: translateY(-4px);
border-color: rgba(12, 90, 219, .28);
box-shadow: var(--cta-sh);
}
/* Pastilla del icono */
.service_style_seven_icon {
float: none;
flex: 0 0 auto;
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: rgba(12, 90, 219, .08);
border: 1px solid rgba(12, 90, 219, .12);
margin-right: 0 !important;
transition: all .3s var(--cta-ease);
}
.service_style_seven_icon i {
font-size: 21px !important;
margin-top: 0 !important;
color: var(--cta-blue);
line-height: 1;
transition: color .3s var(--cta-ease);
}
.service_style_seven:hover .service_style_seven_icon {
background: var(--cta-grad);
border-color: transparent;
box-shadow: 0 10px 20px rgba(12, 90, 219, .26);
}
.service_style_seven:hover .service_style_seven_icon i { color: #fff; }
.service_style_seven_content { overflow: visible; }
.service_style_seven_title { padding-bottom: 2px !important; }
.service_style_seven_title h4 {
font-size: 17.5px;
font-weight: 700;
line-height: 1.3;
margin-top: 0;
color: var(--cta-ink);
transition: color .3s var(--cta-ease);
}
.service_style_seven:hover .service_style_seven_title h4 { color: var(--cta-blue); }
.service_style_seven_text p {
font-size: 15px;
line-height: 1.55;
color: var(--cta-muted);
margin-bottom: 0;
}
@media (max-width: 400px) {
.service_style_seven { gap: 14px; padding: 18px !important; }
.service_style_seven_icon { width: 46px; height: 46px; border-radius: 14px; }
}
/* --------------------------------------------------------------------------
9 quater. ZONAGAMING.ASP - video de fondo general en bucle
Capa fija por detras de todo (z-index negativo): asoma en las
secciones sin fondo propio. El panel blanco desaparece y cada
producto conserva su recuadro claro.
-------------------------------------------------------------------------- */
.cta-video-fondo {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
/* fotograma del propio video: respaldo en movil y mientras carga */
background: #060f24 url(../images/fondo-gaming-poster.jpg) center center / cover no-repeat;
pointer-events: none;
}
.cta-video-fondo video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Velo oscuro: mantiene el neon controlado y da contraste al contenido */
.cta-video-fondo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4, 10, 26, .62) 0%, rgba(4, 10, 26, .74) 100%);
}
/* Fuera el fondo de la seccion y el panel blanco: manda el video */
.pg-zonagaming .about_area { background: none !important; }
.pg-zonagaming .about_area > .container {
background: transparent !important;
box-shadow: none;
}
/* Texto sobre el video: en blanco */
.pg-zonagaming .about_area .heading_experience_title h2,
.pg-zonagaming .about_area .heading_experience_text p,
.pg-zonagaming .about_area > .container > .row > [class*="col-"] > .single_about_content h2 {
color: #fff;
text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}
/* Cada producto en su recuadro blanco, para que se funda con el fondo
blanco de la foto del producto */
.pg-zonagaming .service_style_three {
background: #ffffff;
border-color: rgba(255, 255, 255, .25);
box-shadow: 0 18px 40px rgba(2, 8, 23, .38);
}
.pg-zonagaming .service_style_three .section_main_title h2,
.pg-zonagaming .service_style_three .section_main_title h2 span,
.pg-zonagaming .service_style_three h4,
.pg-zonagaming .service_style_three p {
color: #11161f;
text-shadow: none;
}
/* Marcas: los logos son oscuros y sobre el video no se leian, asi que
el carrusel va sobre un panel blanco redondeado */
.pg-zonagaming .brand_list {
background: #ffffff;
border-radius: var(--cta-r-lg);
box-shadow: 0 18px 40px rgba(2, 8, 23, .38);
padding: 26px 18px 12px !important;
margin: 34px 0 0;
}
.pg-zonagaming .brand_list .single_brand {
margin-top: 0 !important;
margin-bottom: 10px !important;
}
.pg-zonagaming .single_brand_thumb img {
filter: none;
opacity: 1;
}
.pg-zonagaming .brand_list .owl-dots { margin-top: 6px; }
/* En movil no se descarga el video: se queda el fotograma */
@media (max-width: 767px) {
.cta-video-fondo video { display: none; }
}
/* Si el usuario pide menos movimiento, tampoco se reproduce */
@media (prefers-reduced-motion: reduce) {
.cta-video-fondo video { display: none; }
}
/* --------------------------------------------------------------------------
10. PRODUCTOS (carrusel) Y MARCAS
-------------------------------------------------------------------------- */
.single_team_style_three {
background: #fff !important;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
overflow: hidden;
margin: 6px;
padding: 12px 12px 4px;
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease), border-color .35s var(--cta-ease);
}
.single_team_style_three:hover {
transform: translateY(-6px);
box-shadow: var(--cta-sh-lg);
border-color: rgba(12, 90, 219, .25);
}
.single_team_style_three_thumb {
background: var(--cta-soft);
border-radius: var(--cta-r);
overflow: hidden;
}
.single_team_style_three_thumb img {
border: 0 !important;
border-radius: var(--cta-r);
padding: 10px;
transition: transform .45s var(--cta-ease);
}
.single_team_style_three:hover .single_team_style_three_thumb img { transform: scale(1.04); }
.single_team_style_three_content h4 {
font-size: 16.5px !important;
font-weight: 700;
line-height: 1.4;
color: var(--cta-ink);
}
.single_team_style_three_content h5 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800 !important;
color: var(--cta-blue) !important;
padding-bottom: 12px;
}
/* Logos de marcas. Los originales son de 196x118 px, asi que 104 de
alto los agranda sin llegar a escalarlos por encima de su tamano. */
.single_brand_thumb img {
height: 104px;
max-height: none;
width: auto;
max-width: 100%;
object-fit: contain;
filter: grayscale(100%);
opacity: .72;
transition: all .3s var(--cta-ease);
}
.single_brand_thumb img:hover {
filter: grayscale(0);
opacity: 1;
transform: scale(1.05);
}
/* --------------------------------------------------------------------------
11. PORTFOLIO
-------------------------------------------------------------------------- */
.single_team {
border-radius: var(--cta-r-lg);
overflow: hidden;
box-shadow: var(--cta-sh-sm);
background: #fff;
border: 1px solid var(--cta-line);
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease);
}
.single_team:hover {
transform: translateY(-8px);
box-shadow: var(--cta-sh-lg);
}
.single_team_thumb { overflow: hidden; }
.single_team_thumb img {
border: 0 !important;
width: 100%;
transition: transform .6s var(--cta-ease);
}
.single_team:hover .single_team_thumb img { transform: scale(1.06); }
.single_team_content { padding: 20px 22px; }
.single_team_content h4 { font-size: 19px; }
.single_team_content span {
display: inline-block;
margin-top: 4px;
font-size: 14px;
font-weight: 600;
color: var(--cta-blue);
}
/* --------------------------------------------------------------------------
11 bis. PORTFOLIO.ASP - galeria de trabajos
El tema ocultaba el nombre hasta pasar el raton. Aqui el titulo va
siempre visible sobre un velo degradado, con boton circular para
abrir la web y las capturas recortadas a una misma proporcion para
que la rejilla quede regular.
Acotado a .pg-portfolio: .single_portfolio se usa en otras paginas.
-------------------------------------------------------------------------- */
.pg-portfolio .single_portfolio {
position: relative;
border-radius: var(--cta-r-lg);
overflow: hidden;
background: #fff;
box-shadow: var(--cta-sh-sm);
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease);
}
.pg-portfolio .single_portfolio:hover {
transform: translateY(-8px);
box-shadow: var(--cta-sh-lg);
}
/* Anula el borde negro fino que viene en el atributo style */
.pg-portfolio .single_portfolio_inner {
border: 0 !important;
border-radius: var(--cta-r-lg);
overflow: hidden;
position: relative;
display: block;
}
/* Velo degradado permanente para que el nombre se lea siempre */
.pg-portfolio .single_portfolio_inner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(6, 16, 38, .90) 0%, rgba(6, 16, 38, .55) 20%, rgba(6, 16, 38, .05) 44%, rgba(6, 16, 38, 0) 60%);
transition: opacity .35s var(--cta-ease);
pointer-events: none;
}
.pg-portfolio .single_portfolio:hover .single_portfolio_inner::after { opacity: .92; }
/* Capturas a proporcion fija: rejilla regular */
.pg-portfolio .single_portfolio_thumb {
aspect-ratio: 4 / 3;
overflow: hidden;
transform: none !important;
}
.pg-portfolio .single_portfolio_thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform .8s var(--cta-ease);
}
.pg-portfolio .single_portfolio:hover .single_portfolio_thumb img { transform: scale(1.06); }
/* Barra inferior con el nombre y el boton */
.pg-portfolio .single_portfolio_content,
.pg-portfolio .single_portfolio:hover .single_portfolio_content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
background: transparent;
border-radius: 0;
padding: 20px 22px;
margin: 0;
display: flex;
align-items: center;
gap: 14px;
text-align: left;
z-index: 2;
}
.pg-portfolio .single_portfolio_content_inner {
flex: 1 1 auto;
text-align: left;
min-width: 0;
}
.pg-portfolio .single_portfolio_content_inner h2 { font-size: 18px; line-height: 1.3; }
.pg-portfolio .single_portfolio_content_inner h2 a {
color: #fff;
font-weight: 700;
text-shadow: 0 2px 10px rgba(3, 12, 30, .5);
}
.pg-portfolio .single_portfolio_icon {
order: 2;
flex: 0 0 auto;
padding-bottom: 0;
}
.pg-portfolio .single_portfolio_icon i {
width: 44px;
height: 44px;
line-height: 44px;
border-radius: 50%;
font-size: 16px;
color: #fff;
background: rgba(255, 255, 255, .16);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1.5px solid rgba(255, 255, 255, .5);
transition: all .3s var(--cta-ease);
}
.pg-portfolio .single_portfolio:hover .single_portfolio_icon i {
background: var(--cta-grad);
border-color: transparent;
box-shadow: var(--cta-sh-blue);
}
/* --------------------------------------------------------------------------
11 quater. VER_CATALOGO.ASP - rejilla de productos
La imagen y el bloque de titulo/precio son hermanos sueltos dentro de
la columna; moderno.js los envuelve en .cta-card-producto y aqui se
les da forma de ficha de producto.
-------------------------------------------------------------------------- */
.pg-ver_catalogo .cta-card-producto {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
overflow: hidden;
box-shadow: var(--cta-sh-sm);
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease), border-color .35s var(--cta-ease);
}
.pg-ver_catalogo .cta-card-producto:hover {
transform: translateY(-6px);
border-color: rgba(12, 90, 219, .28);
box-shadow: var(--cta-sh-lg);
}
.pg-ver_catalogo .cta-card-producto .single_portfolio {
margin: 0 !important;
padding: 0 !important;
background: var(--cta-soft);
border-radius: 0;
box-shadow: none;
}
.pg-ver_catalogo .single_portfolio_inner { border: 0 !important; }
.pg-ver_catalogo .single_portfolio_thumb { transform: none !important; overflow: hidden; }
.pg-ver_catalogo .single_portfolio_thumb img {
width: 100%;
height: 250px !important;
object-fit: contain !important;
padding: 16px;
background: #fff;
border: 0 !important;
transition: transform .5s var(--cta-ease);
}
.pg-ver_catalogo .cta-card-producto:hover .single_portfolio_thumb img { transform: scale(1.05); }
/* Bloque de titulo y precio */
.pg-ver_catalogo .cta-card-producto > div[align="center"] {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 16px 18px 20px !important;
border-top: 1px solid var(--cta-line);
}
.pg-ver_catalogo .cta-card-producto > div[align="center"] br { display: none; }
.pg-ver_catalogo .cta-card-producto b {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 46px;
font-size: 16px !important;
font-weight: 700;
line-height: 1.45;
}
.pg-ver_catalogo .cta-card-producto b a {
color: var(--cta-ink);
transition: color .25s var(--cta-ease);
}
.pg-ver_catalogo .cta-card-producto:hover b a { color: var(--cta-blue); }
.pg-ver_catalogo .cta-card-producto h3 {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px dashed var(--cta-line);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 21px;
font-weight: 800;
color: var(--cta-blue);
}
/* --------------------------------------------------------------------------
11 quinquies. DETALLE_CATALOGO.ASP - ficha de producto
El HTML pone titulo y precio encima y la foto debajo. Con flex se
recolocan en dos columnas (foto a la izquierda, datos a la derecha)
dentro de una tarjeta, sin tocar el ASP.
-------------------------------------------------------------------------- */
/* Nota: el HTML pone la descripcion en una columna a ancho completo
DESPUES de la barra lateral, por lo que tenia que esperar a que
esta terminara y dejaba un hueco enorme. moderno.js la mueve dentro
de la columna del producto para que suba junto a la ficha. */
/* Ficha: nombre arriba a todo el ancho, foto a la izquierda y a la
derecha el precio y el boton de imprimir (moderno.js saca el h1 del
bloque de texto y trae el boton desde la barra lateral). */
.pg-detalle_catalogo .blog_details {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 4px 34px;
align-items: start;
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
padding: 28px;
}
.pg-detalle_catalogo .blog_details > h1 {
grid-column: 1 / -1;
padding-bottom: 20px;
margin-bottom: 6px;
border-bottom: 1px solid var(--cta-line);
}
.pg-detalle_catalogo .blog_details .blog_dtl_thumb {
grid-column: 1;
grid-row: 2;
min-width: 0;
background: var(--cta-soft);
border: 1px solid var(--cta-line);
border-radius: var(--cta-r);
overflow: hidden;
}
.pg-detalle_catalogo .blog_details .blog_dtl_content {
grid-column: 2;
grid-row: 2;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
align-items: stretch;
padding: 0 !important;
/* el tema le pone sombra y fondo pensando en el pie de un articulo */
background: transparent;
box-shadow: none !important;
border-radius: 0;
}
.pg-detalle_catalogo .blog_details .blog_dtl_content .button.two { margin: 0; }
.pg-detalle_catalogo .blog_details .blog_dtl_content .button.two a {
display: block;
text-align: center;
margin-left: 0;
}
@media (max-width: 767px) {
.pg-detalle_catalogo .blog_details { grid-template-columns: minmax(0, 1fr); }
/* OJO CON grid-row. Antes aqui solo se reiniciaba grid-column, y los dos
bloques se quedaban con el "grid-row: 2" de la version de escritorio.
En una rejilla de una sola columna eso los coloca en la MISMA celda,
superpuestos: la foto quedaba encima y tapaba el precio. Por eso "en
movil el precio no aparece, como si estuviera detras". */
.pg-detalle_catalogo .blog_details .blog_dtl_thumb,
.pg-detalle_catalogo .blog_details .blog_dtl_content {
grid-column: 1;
grid-row: auto;
}
}
.pg-detalle_catalogo .blog_details .single_portfolio,
.pg-detalle_catalogo .blog_details .single_portfolio_inner {
border: 0 !important;
margin: 0 !important;
background: transparent;
box-shadow: none;
}
.pg-detalle_catalogo .blog_details .single_portfolio_thumb { transform: none !important; }
.pg-detalle_catalogo .blog_details .single_portfolio_thumb img {
width: 100%;
height: 420px;
object-fit: contain;
background: #fff;
padding: 18px;
transition: transform .5s var(--cta-ease);
}
.pg-detalle_catalogo .blog_details .single_portfolio_thumb a:hover img { transform: scale(1.04); }
/* Titulo y precio */
.pg-detalle_catalogo .blog_details h1 {
font-size: clamp(23px, 2.2vw, 30px);
line-height: 1.25;
color: var(--cta-ink);
margin: 0 0 18px;
}
/* Precio: sin fondo, solo tipografia y color */
.pg-detalle_catalogo .blog_details h2 {
padding: 4px 0 0 !important;
margin: 0;
display: block;
font-size: clamp(30px, 3vw, 42px) !important;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.02em;
color: var(--cta-blue) !important;
background: none;
border: 0;
box-shadow: none;
}
.pg-detalle_catalogo .blog_details h2 span {
display: block;
position: relative;
z-index: 1;
font-size: 12.5px !important;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--cta-muted) !important;
margin-bottom: 6px;
}
/* Galeria de imagenes adicionales */
.pg-detalle_catalogo .col-md-4 .blog_dtl_thumb {
border: 1px solid var(--cta-line);
border-radius: var(--cta-r);
overflow: hidden;
background: #fff;
margin-bottom: 24px;
transition: transform .3s var(--cta-ease), box-shadow .3s var(--cta-ease), border-color .3s var(--cta-ease);
}
.pg-detalle_catalogo .col-md-4 .blog_dtl_thumb:hover {
transform: translateY(-4px);
border-color: rgba(12, 90, 219, .28);
box-shadow: var(--cta-sh);
}
.pg-detalle_catalogo .col-md-4 .single_portfolio_thumb img {
width: 100%;
height: 210px;
object-fit: contain;
padding: 12px;
background: #fff;
}
/* Descripcion */
.pg-detalle_catalogo .col-lg-12 > .blog_dtl_content {
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
padding: 28px 30px !important;
margin-top: 30px;
}
.pg-detalle_catalogo .col-lg-12 > .blog_dtl_content p { font-size: 16.5px; }
.pg-detalle_catalogo iframe { max-width: 100%; border-radius: var(--cta-r); }
/* Ficheros adjuntos */
.pg-detalle_catalogo .col-lg-12 > .blog_dtl_content font b {
display: inline-block;
font-size: 17px;
color: var(--cta-ink);
margin-bottom: 14px;
}
.pg-detalle_catalogo .col-lg-12 > .blog_dtl_content a[title="Descargar"] {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--cta-soft);
border: 1px solid var(--cta-line);
border-radius: var(--cta-r);
padding: 10px 18px 10px 12px;
margin-bottom: 10px;
color: var(--cta-ink);
transition: all .25s var(--cta-ease);
}
.pg-detalle_catalogo .col-lg-12 > .blog_dtl_content a[title="Descargar"]:hover {
background: #fff;
border-color: rgba(12, 90, 219, .3);
box-shadow: var(--cta-sh-sm);
color: var(--cta-blue);
transform: translateY(-2px);
}
.pg-detalle_catalogo .col-lg-12 > .blog_dtl_content a[title="Descargar"] img {
width: 34px !important;
height: 34px !important;
}
/* Barra lateral */
.pg-detalle_catalogo .blog-left-side .widget_categories {
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
padding: 22px 24px;
margin-bottom: 24px;
}
.pg-detalle_catalogo .widget-title {
color: var(--cta-ink);
font-size: 19px;
font-weight: 800;
padding-bottom: 14px;
margin-bottom: 8px;
border-bottom: 2px solid var(--cta-line);
}
.pg-detalle_catalogo .widget_categories ul { list-style: none; padding: 0; margin: 0; }
.pg-detalle_catalogo .widget_categories ul li {
border-bottom: 1px solid var(--cta-line);
}
.pg-detalle_catalogo .widget_categories ul li:last-child { border-bottom: 0; }
.pg-detalle_catalogo .widget_categories ul li a {
display: block;
padding: 11px 4px 11px 20px;
position: relative;
font-size: 15.5px;
font-weight: 600;
color: var(--cta-body);
transition: all .25s var(--cta-ease);
}
/* El icono del listado es de video; se cambia por una flecha */
.pg-detalle_catalogo .widget_categories ul li a i { display: none; }
.pg-detalle_catalogo .widget_categories ul li a::before {
content: "\f105";
font-family: 'FontAwesome';
position: absolute;
left: 2px;
color: var(--cta-blue);
transition: transform .25s var(--cta-ease);
}
.pg-detalle_catalogo .widget_categories ul li a:hover {
color: var(--cta-blue);
padding-left: 26px;
}
.pg-detalle_catalogo .blog-left-side > a img {
border-radius: var(--cta-r);
box-shadow: var(--cta-sh-sm);
}
/* --------------------------------------------------------------------------
11 ter. FILTRO POR CATEGORIAS Y PAGINACION
(portfolio.asp, ver_catalogo.asp y noticias.asp)
-------------------------------------------------------------------------- */
.portfolio_nav { margin-bottom: 22px; }
.portfolio_menu ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0;
padding: 0;
}
/* El tema ya pinta una caja sobre el propio (fondo, relleno y
letter-spacing). Se neutraliza para que la pildora sea solo el . */
.portfolio_nav ul li,
.portfolio_menu ul li,
.portfolio_nav ul li:hover,
.portfolio_nav ul li.current_menu_item {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
letter-spacing: normal !important;
font-size: inherit;
line-height: normal;
}
.portfolio_menu ul li a {
letter-spacing: -.01em;
padding: 9px 20px !important;
font-size: 13.5px !important;
font-weight: 600;
text-transform: none;
color: var(--cta-body) !important;
background: #fff;
border: 1px solid var(--cta-line) !important;
border-radius: var(--cta-r-pill);
box-shadow: var(--cta-sh-sm);
transition: all .25s var(--cta-ease);
}
.portfolio_menu ul li a::before { display: none !important; }
.portfolio_menu ul li a:hover,
.portfolio_menu ul li.current_menu_item a {
color: #fff !important;
background: var(--cta-grad);
border-color: transparent !important;
box-shadow: var(--cta-sh-blue);
transform: translateY(-2px);
}
/* Ojo: el tambien lleva la clase page-numbers, asi que las
pildoras se aplican solo a los enlaces y al numero actual. */
.paginations ul.page-numbers {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
}
.paginations ul.page-numbers li { display: inline-block; margin: 0; }
.paginations .page-dots {
min-width: 26px;
line-height: 44px;
text-align: center;
color: var(--cta-muted);
font-weight: 700;
letter-spacing: 1px;
}
.paginations a.page-numbers,
.paginations span.page-numbers {
display: inline-block;
min-width: 44px;
height: 44px;
line-height: 42px;
padding: 0 12px;
border-radius: var(--cta-r-pill);
background: #fff;
border: 1px solid var(--cta-line);
color: var(--cta-body);
font-weight: 700;
font-size: 15px;
box-shadow: var(--cta-sh-sm);
transition: all .25s var(--cta-ease);
}
.paginations a.page-numbers:hover {
color: #fff;
background: var(--cta-grad);
border-color: transparent;
box-shadow: var(--cta-sh-blue);
transform: translateY(-2px);
}
.paginations span.page-numbers.current {
color: #fff;
background: var(--cta-grad);
border-color: transparent;
box-shadow: var(--cta-sh-blue);
}
/* --------------------------------------------------------------------------
12. LOGOS DE CLIENTES
-------------------------------------------------------------------------- */
.clientes_area .cliente_logo {
border-radius: var(--cta-r);
border: 1px solid var(--cta-line);
box-shadow: var(--cta-sh-sm);
transition: transform .3s var(--cta-ease), box-shadow .3s var(--cta-ease), border-color .3s var(--cta-ease);
}
.clientes_area .cliente_logo img { opacity: .72; }
.clientes_area .cliente_logo:hover {
transform: translateY(-6px);
box-shadow: var(--cta-sh);
border-color: rgba(12, 90, 219, .28);
}
.clientes_area .cliente_logo:hover img { opacity: 1; }
.clientes_area .cliente_logo[data-title]:hover::after {
background: var(--cta-ink);
border-radius: var(--cta-r-sm);
box-shadow: var(--cta-sh);
}
/* --------------------------------------------------------------------------
13. BLOG / NOTICIAS
-------------------------------------------------------------------------- */
.single_blog {
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
background: #fff;
box-shadow: var(--cta-sh-sm);
transition: transform .35s var(--cta-ease), box-shadow .35s var(--cta-ease), border-color .35s var(--cta-ease);
}
/* Igualar alturas sin comerse el margen inferior de la plantilla
(mismo criterio que en las tarjetas de servicio). */
.row > [class*="col-"]:has(> .single_blog) {
display: flex;
padding-bottom: 18px;
}
.row > [class*="col-"]:has(> .single_blog) > .single_blog {
width: 100%;
display: flex;
flex-direction: column;
}
.row > [class*="col-"]:has(> .single_blog) > .single_blog .single_blog_content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
/* El enlace "Ver noticia" queda anclado abajo en todas las tarjetas */
.row > [class*="col-"]:has(> .single_blog) .blog_page_button { margin-top: auto; }
.single_blog:hover {
transform: translateY(-8px);
border-color: rgba(12, 90, 219, .22);
box-shadow: var(--cta-sh-lg);
}
.single_blog_thumb { overflow: hidden; }
.single_blog_thumb img {
width: 100% !important;
transition: transform .6s var(--cta-ease);
}
.single_blog:hover .single_blog_thumb img { transform: scale(1.06); }
.blog_page_title h3 { font-size: 19.5px; line-height: 1.35; }
.blog_page_title a { color: var(--cta-ink); }
.single_blog:hover .blog_page_title a { color: var(--cta-blue); }
.blog_description p { font-size: 15.5px; color: var(--cta-muted); }
.blog_page_button a {
font-weight: 700;
color: var(--cta-blue);
font-size: 14.5px;
}
.blog_page_button a i { transition: transform .3s var(--cta-ease); }
.blog_page_button a:hover i { transform: translateX(5px); }
/* --------------------------------------------------------------------------
14. LLAMADAS A LA ACCION / VIDEO
-------------------------------------------------------------------------- */
.call_do_action.bg_before::before {
background: linear-gradient(105deg, rgba(7, 20, 45, .88) 0%, rgba(10, 45, 110, .72) 50%, rgba(12, 90, 219, .45) 100%);
}
.video-icon a.video-vemo-icon {
width: 78px;
height: 78px;
line-height: 78px;
border-radius: 50%;
display: inline-block;
text-align: center;
background: #fff;
color: var(--cta-blue);
font-size: 24px;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
animation: ctaPulse 2.6s infinite;
transition: transform .3s var(--cta-ease);
}
.video-icon a.video-vemo-icon:hover { transform: scale(1.08); }
@keyframes ctaPulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
70% { box-shadow: 0 0 0 24px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.phone_number h5 {
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 22px;
color: var(--cta-blue) !important;
background: rgba(12, 90, 219, .08);
border-radius: var(--cta-r-pill);
padding: 8px 20px;
}
.acction_thumb img { filter: drop-shadow(0 22px 40px rgba(15, 27, 51, .18)); }
/* --------------------------------------------------------------------------
15. MIGA DE PAN (paginas interiores)
-------------------------------------------------------------------------- */
.breatcome_area {
height: 260px;
background-attachment: scroll;
}
.breatcome_area::before {
background: linear-gradient(100deg, rgba(7, 20, 45, .92) 0%, rgba(11, 47, 122, .80) 55%, rgba(12, 90, 219, .58) 100%);
}
.breatcome_title { position: relative; z-index: 2; }
/* El tema solo pone en blanco el h2, y la mayoria de paginas lo
suplen con un color en linea en el h1. Aqui se cubren todos los
casos para que ninguna quede con el titulo oscuro sobre el fondo. */
.breatcome_title_inner h1,
.breatcome_title_inner h2,
.breatcome_title_inner h3,
.breatcome_title_inner h4,
.breatcome_title_inner p {
color: #fff;
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
text-shadow: 0 2px 18px rgba(3, 12, 30, .35);
}
.breatcome_title_inner p { font-size: 17px; font-weight: 500; }
.breatcome_content ul {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 18px;
margin-top: 10px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--cta-r-pill);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.breatcome_content ul li,
.breatcome_content ul li a,
.breatcome_content ul li span,
.breatcome_content ul li i { color: rgba(255, 255, 255, .9); font-size: 14px; }
.breatcome_content ul li a:hover { color: var(--cta-cyan); }
/* --------------------------------------------------------------------------
16. PIE DE PAGINA
-------------------------------------------------------------------------- */
.footer_middle_area {
background: linear-gradient(135deg, #061633 0%, #0a2450 52%, #0d2f6b 100%);
position: relative;
}
/* Linea azul superior del pie */
.footer_middle_area > div[style*="height:1px"] {
background: var(--cta-grad) !important;
height: 3px !important;
}
/* Ojo: el tema trae la variante .style_three pensada para pie claro
(textos en #232323). Al oscurecer el pie hay que reescribir esos
colores con la misma o mayor especificidad. */
.footer_middle_area p,
.footer_middle_area.style_three .company-info-desc p,
.footer_middle_area.style_three .footer-social-info p { color: rgba(255, 255, 255, .76); }
.footer_middle_area.style_three .company-info-desc p { font-size: 15.5px; }
/* --- Banda clara superior: logos, descripcion y resenas --------------
La primera fila del pie va sobre fondo gris muy claro a todo el
ancho; el resto del pie se queda en azul noche. El velo se pinta
con un pseudo-elemento que se sale del contenedor. */
.footer_middle_area > .container > .row:first-child {
position: relative;
padding-bottom: 30px;
}
/* Franja blanca a todo el ancho: logos, descripcion y resenas */
.footer_middle_area > .container > .row:first-child::before {
content: "";
position: absolute;
top: -35px; /* cubre el padding-top del contenedor */
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: #ffffff;
z-index: 0;
}
.footer_middle_area > .container > .row:first-child > * {
position: relative;
z-index: 1;
}
/* Mas aire al empezar la zona azul */
.footer_middle_area > .container > .row:nth-child(2) {
padding-top: 50px !important;
padding-bottom: 10px;
}
/* El widget de resenas trae su propio fondo: se deja transparente
para que se vea el blanco de la franja. */
.footer_middle_area .ti-widget,
.footer_middle_area .ti-widget-container,
.footer_middle_area [class*="ti-widget"] {
background: transparent !important;
}
/* Sobre la banda clara el texto vuelve a ser oscuro */
.footer_middle_area.style_three > .container > .row:first-child .company-info-desc p {
color: var(--cta-body);
}
/* Y los logos ya no necesitan la placa blanca */
.footer_middle_area .footer-bottom-logo {
display: inline-flex;
align-items: center;
gap: 24px;
background: transparent;
box-shadow: none;
border-radius: 0;
padding: 0 !important;
margin-bottom: 0;
}
.footer_middle_area .footer-bottom-logo img {
max-height: 56px;
width: auto;
margin: 0 !important;
}
.footer_middle_area .menu li,
.footer_middle_area #menu-quick-link li { list-style: none; margin-bottom: 8px; }
.footer_middle_area.style_three .menu-quick-link-container ul li a,
.footer_middle_area .menu li a,
.footer_middle_area #menu-quick-link li a {
color: rgba(255, 255, 255, .78);
font-size: 15px;
font-weight: 500;
transition: all .25s var(--cta-ease);
display: inline-block;
}
.footer_middle_area.style_three .menu-quick-link-container ul li a:hover,
.footer_middle_area .menu li a:hover,
.footer_middle_area #menu-quick-link li a:hover {
color: #fff;
transform: translateX(4px);
}
.footer_middle_area.style_three .menu-quick-link-container ul li a:before {
background: var(--cta-cyan);
}
.footer_middle_area.style_three .footer-social-info p span,
.footer_middle_area .footer-social-info p span[style] {
color: var(--cta-cyan) !important;
font-weight: 700 !important;
}
.footer_middle_area .footer-social-info p a,
.footer_middle_area .footer-social-info p a[style] { color: rgba(255, 255, 255, .88) !important; }
.footer_middle_area .footer-social-info p a:hover { color: var(--cta-cyan) !important; }
.footer_middle_area.style_three .follow-company-text a p { color: rgba(255, 255, 255, .76); }
.footer_middle_area.style_three .follow-company-text a p:hover { color: #fff; }
.footer_middle_area .follow-company-icon a {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 15px;
border-radius: 50%;
background: rgba(255, 255, 255, .10);
color: #fff;
margin: 0 4px;
}
.footer_middle_area .follow-company-icon a:hover {
background: var(--cta-blue);
color: #fff;
transform: translateY(-3px);
}
.footer_middle_area .follow-company-icon a i { line-height: 1; }
/* El logo de X del pie es la version azul oscuro y sobre el fondo
navy no se veia: se fuerza a blanco como el resto de iconos. */
.footer_middle_area .follow-company-icon a img {
display: block;
width: 14px;
height: 14px;
max-width: none;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* Franja inferior (sobrescribe el gris inline) */
.footer_middle_area > div[style*="ededed"],
.footer_middle_area > div[style*="EDEDED"] {
background: rgba(3, 11, 28, .55) !important;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-bottom { border-top: 0; }
.footer_middle_area.style_three .footer-bottom-content-copy p,
.footer_middle_area.style_three .footer-bottom-right-text {
color: rgba(255, 255, 255, .68);
font-size: 14.5px;
}
.footer_middle_area.style_three .footer-bottom-right-text a { color: #fff; }
.footer_middle_area.style_three .footer-bottom-right-text a:hover { color: var(--cta-cyan); }
.footer_middle_area.style_three .footer-bottom-right-text .absod::before { background: rgba(255, 255, 255, .35); }
/* Bloque SEO de palabras clave: discreto */
.footer_middle_area .row > .col-lg-12 > p[style*="12px"] {
color: rgba(255, 255, 255, .34) !important;
font-size: 11.5px !important;
line-height: 1.6 !important;
border-top: 1px solid rgba(255, 255, 255, .08);
padding-top: 16px;
}
/* --------------------------------------------------------------------------
16 bis. CONTACTO.ASP / MEINTERESA.ASP
Tarjetas de datos con icono propio (el HTML repite el mismo icono de
globo en las tres, se sustituye desde CSS) y formulario dentro de una
tarjeta con la imagen a sangre.
-------------------------------------------------------------------------- */
.single_contact_address_two {
display: flex;
align-items: center;
gap: 18px;
height: 100%;
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh-sm);
padding: 24px 26px;
margin-bottom: 26px;
transition: transform .3s var(--cta-ease), box-shadow .3s var(--cta-ease), border-color .3s var(--cta-ease);
}
.single_contact_address_two:hover {
transform: translateY(-5px);
border-color: rgba(12, 90, 219, .28);
box-shadow: var(--cta-sh);
}
.single_contact_address_two_icon { flex: 0 0 auto; }
.single_contact_address_two_icon .icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background: var(--cta-grad);
box-shadow: 0 12px 24px rgba(12, 90, 219, .26);
transition: transform .35s var(--cta-ease);
}
.single_contact_address_two:hover .single_contact_address_two_icon .icon {
transform: translateY(-3px) rotate(-6deg);
}
/* Las tres tarjetas traen el mismo icono de globo: se oculta y se
pone uno distinto en cada una (direccion, email y telefono). */
.single_contact_address_two_icon .icon i { display: none; }
.single_contact_address_two_icon .icon::before {
font-family: 'FontAwesome';
content: "\f041";
color: #fff;
font-size: 24px;
line-height: 1;
}
.contact_address_area .row > [class*="col-"]:nth-child(2) .single_contact_address_two_icon .icon::before { content: "\f0e0"; }
.contact_address_area .row > [class*="col-"]:nth-child(3) .single_contact_address_two_icon .icon::before { content: "\f095"; }
.single_contact_address_two_content { min-width: 0; }
.single_contact_address_two_content span {
display: block;
order: -1;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cta-muted);
margin-bottom: 4px;
}
.single_contact_address_two_content h4 {
font-size: 17px;
line-height: 1.45;
color: var(--cta-ink);
margin: 0;
}
/* Tarjeta del formulario */
.contact_sm_area .cnt_box {
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh);
overflow: hidden;
margin: 0;
}
.contact_sm_area .single_contact_rt_thumb { height: 100%; }
.contact_sm_area .single_contact_rt_thumb img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
}
.contact_sm_area .quote_wrapper { padding: 10px 34px 24px 10px; }
.contact_sm_area .quote_wrapper form { padding-top: 10px !important; }
.contact_sm_area .form_box input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--cta-blue);
vertical-align: -3px;
margin-right: 6px;
}
.contact_sm_area .quote_btn button {
background: var(--cta-grad);
color: #fff;
border: 0;
border-radius: var(--cta-r-pill);
padding: 14px 42px;
font-weight: 700;
font-size: 16px;
box-shadow: var(--cta-sh-blue);
transition: transform .28s var(--cta-ease), box-shadow .28s var(--cta-ease);
}
.contact_sm_area .quote_btn button:hover {
background: var(--cta-grad);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(12, 90, 219, .3);
}
/* Texto legal: legible pero discreto */
.contact_sm_area .cnt_box > [class*="col-"]:last-child p {
font-size: 11.5px !important;
line-height: 1.6 !important;
color: var(--cta-muted);
background: var(--cta-soft);
border-top: 1px solid var(--cta-line);
padding: 18px 26px;
margin: 0;
}
.contact_sm_area .cnt_box > [class*="col-"]:last-child { padding: 0 !important; }
@media (max-width: 991px) {
.contact_sm_area .single_contact_rt_thumb img { min-height: 260px; }
.contact_sm_area .quote_wrapper { padding: 24px; }
}
/* --------------------------------------------------------------------------
17. FORMULARIOS
-------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-sm);
padding: 12px 16px;
font-size: 15.5px;
color: var(--cta-ink);
background: #fff;
transition: border-color .25s var(--cta-ease), box-shadow .25s var(--cta-ease);
max-width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
border-color: var(--cta-blue);
box-shadow: 0 0 0 4px rgba(12, 90, 219, .12);
outline: none;
}
input[type="submit"],
button[type="submit"],
.btn-primary {
background: var(--cta-grad);
border: 0;
border-radius: var(--cta-r-pill);
color: #fff;
font-weight: 700;
padding: 13px 30px;
box-shadow: var(--cta-sh-blue);
transition: transform .28s var(--cta-ease), box-shadow .28s var(--cta-ease);
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(12, 90, 219, .3);
}
/* --------------------------------------------------------------------------
18. BOTONES FLOTANTES
-------------------------------------------------------------------------- */
#whatsapp {
bottom: 22px !important;
left: 22px !important;
line-height: 0;
}
#whatsapp img {
width: 58px;
height: 58px;
border-radius: 50%;
box-shadow: 0 12px 30px rgba(37, 211, 102, .42);
transition: transform .3s var(--cta-ease);
}
#whatsapp:hover img { transform: scale(1.08) translateY(-2px); }
#scrollUp {
right: 22px;
bottom: 22px;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
border-radius: 50%;
background: var(--cta-grad) !important;
color: #fff !important;
font-size: 20px;
box-shadow: var(--cta-sh-blue);
border: 0;
transition: transform .3s var(--cta-ease);
}
#scrollUp:hover { transform: translateY(-4px); }
/* --------------------------------------------------------------------------
19. APARICION AL HACER SCROLL
-------------------------------------------------------------------------- */
.cta-reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s var(--cta-ease), transform .7s var(--cta-ease);
will-change: opacity, transform;
}
.cta-reveal.is-visible { opacity: 1; transform: none; }
/* --------------------------------------------------------------------------
20. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.slider_area.slider4 { height: clamp(400px, 68vh, 520px); }
.slider_text_inner { padding: 20px !important; }
.section_main_title p { font-size: 16px; }
.breatcome_area { height: 200px; }
.footer_middle_area .footer-bottom-right-text,
.footer_middle_area .footer-bottom-content-copy p { text-align: center; }
.footer_middle_area .footer-bottom-right-text { text-align: center; margin-top: 6px; }
}
@media (max-width: 767px) {
body { font-size: 16px; }
.header_top_menu_address_inner ul li a { margin-right: 10px; font-size: 12.5px; }
.header_top_menu_icon_inner ul { text-align: center; }
.button a { padding: 12px 24px; font-size: 15px; }
.button .active { margin-left: 0; margin-top: 10px; }
.service_style_three { padding-left: 20px !important; padding-right: 20px !important; }
.text_center .section_content_text p { width: 100%; }
#whatsapp img { width: 52px; height: 52px; }
}
/* --------------------------------------------------------------------------
21. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.cta-reveal { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
22 bis. IMPRIMIR.ASP - hoja de producto
-------------------------------------------------------------------------- */
.pg-imprimir { background: #eef3fa; }
.pg-imprimir .blog-details-area { padding: 34px 0 !important; background: transparent; }
/* La pagina se comporta como una hoja */
.pg-imprimir .container {
max-width: 920px;
background: #fff;
border: 1px solid var(--cta-line);
border-radius: var(--cta-r-lg);
box-shadow: var(--cta-sh);
padding: 0 34px 34px;
overflow: hidden;
}
/* Cabecera corporativa a sangre */
.pg-imprimir .col-md-12 > img:first-child {
width: calc(100% + 68px);
margin: 0 -34px 26px;
max-width: none;
display: block;
}
/* Nombre arriba, foto a la izquierda y precio a la derecha: asi el
precio cae siempre en la primera pagina (moderno.js lo sube, porque
en el HTML va detras de la descripcion). */
.pg-imprimir .blog_details {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 0 26px;
align-items: start;
padding: 0;
border: 0;
box-shadow: none;
}
.pg-imprimir .blog_details > h1 {
grid-column: 1 / -1;
padding-bottom: 16px;
margin-bottom: 18px;
border-bottom: 1px solid var(--cta-line);
}
.pg-imprimir .blog_details > .blog_dtl_thumb {
grid-column: 1;
grid-row: 2;
}
.pg-imprimir .blog_details > .blog_dtl_content {
grid-column: 2;
grid-row: 2;
padding: 0 !important;
box-shadow: none !important;
background: none;
/* por delante de la caja de la imagen pase lo que pase */
position: relative;
z-index: 2;
}
.pg-imprimir .blog_details > .blog_dtl_content h2 {
margin: 0;
padding: 0 !important;
border: 0;
}
.pg-imprimir h1 {
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.25;
color: var(--cta-ink);
margin: 0;
padding-right: 150px; /* deja hueco al boton */
}
/* Boton de imprimir arriba a la derecha, solo en pantalla */
.pg-imprimir .blog_details > .button.two {
position: absolute;
top: 0;
right: 0;
margin: 0;
}
.pg-imprimir .blog_details > .button.two a { margin-left: 0; }
/* Imagen principal */
.pg-imprimir .blog_dtl_thumb {
background: var(--cta-soft);
border: 1px solid var(--cta-line);
border-radius: var(--cta-r);
padding: 18px;
margin-bottom: 24px;
}
.pg-imprimir .blog_dtl_thumb img { max-height: 340px; object-fit: contain; }
/* Descripcion y precio */
.pg-imprimir .blog_dtl_content { box-shadow: none !important; padding: 0 !important; }
.pg-imprimir .blog_dtl_content p { font-size: 15.5px; }
.pg-imprimir .blog_dtl_content h2 {
padding: 16px 0 0 !important;
margin: 18px 0 0;
border-top: 2px solid var(--cta-line);
font-size: 34px !important;
font-weight: 800;
color: var(--cta-blue) !important;
}
.pg-imprimir .blog_dtl_content h2 span {
font-size: 13px !important;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cta-muted) !important;
display: block;
margin-bottom: 4px;
}
/* Miniaturas adicionales */
.pg-imprimir .col-md-4 .blog_dtl_thumb { padding: 10px; margin-bottom: 16px; }
.pg-imprimir .col-md-4 .blog_dtl_thumb img { max-height: 150px; width: 100%; object-fit: contain; }
/* Avisos legales del producto */
.pg-imprimir .service_style_four {
padding: 20px 22px !important;
border-radius: var(--cta-r);
box-shadow: none;
background: var(--cta-soft);
}
.pg-imprimir .service_style_four:hover { transform: none; box-shadow: none; }
.pg-imprimir .service_style_four_title h4 { font-size: 17px; }
.pg-imprimir .service_style_four_text p { font-size: 14px; }
.pg-imprimir .service_style_four_text p br { display: none; }
.pg-imprimir .img-fluid { border-radius: var(--cta-r); margin-top: 10px; }
/* Membrete que solo aparece al imprimir (lo inserta moderno.js) */
.cta-print-head { display: none; }
/* --------------------------------------------------------------------------
22. IMPRESION
-------------------------------------------------------------------------- */
@page {
size: A4;
margin: 12mm;
}
@media print {
.header_top_menu,
.techno_nav_manu,
.mobile-menu-area,
#whatsapp,
#scrollUp { display: none !important; }
body {
color: #000;
background: #fff !important;
font-size: 11pt;
}
/* Que salgan los colores corporativos y no solo texto negro */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
a { text-decoration: none !important; }
img { max-width: 100% !important; }
/* Hoja de producto */
.pg-imprimir { background: #fff !important; }
.pg-imprimir .blog-details-area { padding: 0 !important; }
.pg-imprimir .container {
max-width: 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.pg-imprimir .col-md-12 > img:first-child {
width: 100% !important;
margin: 0 0 14px !important;
}
/* El boton no debe imprimirse */
.pg-imprimir .button,
.pg-imprimir .button.two { display: none !important; }
.pg-imprimir h1 { padding-right: 0 !important; font-size: 20pt; }
.pg-imprimir .blog_dtl_content h2 { font-size: 22pt !important; }
.pg-imprimir .blog_dtl_thumb img { max-height: 90mm !important; }
/* Evita cortes feos entre paginas */
.pg-imprimir .blog_dtl_thumb,
.pg-imprimir .service_style_four,
.pg-imprimir .col-md-4 { break-inside: avoid; page-break-inside: avoid; }
.pg-imprimir .service_style_four {
background: #fff !important;
border: 1px solid #ccc !important;
}
/* ----------------------------------------------------------------
Ficha de producto impresa desde la propia pagina
(detalle_catalogo.asp), sin pasar por la ventana emergente.
---------------------------------------------------------------- */
.pg-detalle_catalogo .breatcome_area,
.pg-detalle_catalogo .sidebar-right,
.pg-detalle_catalogo .service_area,
.pg-detalle_catalogo .call_do_action,
.pg-detalle_catalogo .footer_middle_area,
.pg-detalle_catalogo .button { display: none !important; }
.cta-print-head {
display: block !important;
margin-bottom: 14px;
}
.cta-print-head img { width: 100%; height: auto; }
.pg-detalle_catalogo .blog-details-area { padding: 0 !important; }
.pg-detalle_catalogo .container { max-width: 100% !important; width: 100% !important; }
.pg-detalle_catalogo .col-lg-8 {
max-width: 100% !important;
flex: 0 0 100% !important;
padding: 0 !important;
}
/* Nada de CSS Grid al imprimir: Chrome descoloca y superpone los
elementos de la rejilla al paginar, y la caja de la foto acababa
tapando el precio. En papel se apila: nombre, precio y foto. */
.pg-detalle_catalogo .blog_details,
.pg-imprimir .blog_details {
display: block !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.pg-detalle_catalogo .blog_details > h1,
.pg-imprimir .blog_details > h1 { display: block; }
.pg-detalle_catalogo .blog_details .blog_dtl_content,
.pg-imprimir .blog_details > .blog_dtl_content {
display: block !important;
width: auto !important;
margin: 0 0 6mm !important;
}
.pg-detalle_catalogo .blog_details h2,
.pg-imprimir .blog_details > .blog_dtl_content h2 {
display: block !important;
color: #0c5adb !important;
font-size: 22pt !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
break-inside: avoid;
page-break-inside: avoid;
}
.pg-detalle_catalogo .blog_details h2 span,
.pg-imprimir .blog_details > .blog_dtl_content h2 span {
display: block !important;
color: #555 !important;
font-size: 10pt !important;
}
.pg-detalle_catalogo .blog_details .blog_dtl_thumb,
.pg-imprimir .blog_details > .blog_dtl_thumb {
display: block !important;
width: auto !important;
break-inside: avoid;
page-break-inside: avoid;
}
.pg-detalle_catalogo .blog_details > h1 { font-size: 19pt; padding-bottom: 10px; }
.pg-detalle_catalogo .blog_details .blog_dtl_thumb {
background: #fff !important;
border: 1px solid #ddd !important;
}
.pg-detalle_catalogo .blog_details .single_portfolio_thumb img {
height: 80mm !important;
padding: 4mm !important;
}
.pg-detalle_catalogo .blog_details h2 { font-size: 24pt !important; }
.pg-detalle_catalogo .col-lg-12 > .blog_dtl_content {
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 8mm 0 0 !important;
margin-top: 6mm !important;
border-top: 1px solid #ddd !important;
}
.pg-detalle_catalogo .col-md-4 .blog_dtl_thumb { break-inside: avoid; page-break-inside: avoid; }
.pg-detalle_catalogo .col-md-4 .single_portfolio_thumb img { height: 40mm !important; }
}
/* ---------------------------------------------------------------------------
pg-imprimir en pantallas pequenas
Faltaba por completo. La ficha se quedaba a dos columnas tambien en el
movil: el precio caia en una columna de poco mas de cien pixeles y no habia
forma de leerlo. Aqui se pasa a una sola columna, con la foto arriba y el
texto debajo, y se quita el hueco que el titulo reserva para el boton.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
.pg-imprimir .blog_details {
grid-template-columns: minmax(0, 1fr);
gap: 18px 0;
}
.pg-imprimir .blog_details > .blog_dtl_thumb,
.pg-imprimir .blog_details > .blog_dtl_content {
grid-column: 1;
grid-row: auto;
}
/* El hueco era para el boton de imprimir, que en movil va debajo. */
.pg-imprimir h1 { padding-right: 0; }
}