:root{
--size-h2:1.6rem;
}
html,
body {
width: 100%;
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Hanken Grotesk", sans-serif;
}
/* =========================================================
Tipografía global actualizada
========================================================= */
body {
font-size: 1rem;
}
h3 {
font-size:1.15rem;
}
h2 {
font-size: var(--size-h2);
}
h1 {
font-size: 2.4rem;
}
/* =========================================================
Corrección definitiva tipografía global
========================================================= */
html body h1,
html body .hero-title,
html body .section-title {
font-size: 2.4rem;
}
html body h2 {
font-size: var(--size-h2);
}
html body h3 {
font-size:1.15rem;
}
/* =========================================================
Menu
========================================================= */
.menu-link {
display: block;
padding: 0.6rem 1.5rem;
font-size: 14px;
color: #191c1e;
transition: 0.2s;
}
.menu-link:hover {
background: #f2f4f6;
color: #a04100;
}
.menu-title {
font-weight: 800;
color: #000f27;
font-size: 14px;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #c4c6cf;
}
.mega-link {
display: block;
font-size: 14px;
color: #44474e;
padding: 0.25rem 0;
transition: 0.2s;
}
.mega-link:hover {
color: #a04100;
transform: translateX(2px);
}
.mobile-link {
display: block;
padding: 1rem 0;
border-bottom: 1px solid #e0e3e5;
color: #000f27;
font-weight: 700;
}
.feature-pill {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
padding: 0.75rem 1rem;
color: #ffffff;
font-size: 14px;
text-align: center;
}
.hero-check {
display: flex;
gap: 0.75rem;
align-items: flex-start;
color: #d6e3ff;
font-size: 14px;
line-height: 1.5;
}
.hero-check .material-symbols-outlined {
color: #ffb693;
font-size: 20px;
margin-top: 1px;
}
.hero-check p {
margin-top: -5px;
}
.stat-card {
background: #ffffff;
border: 1px solid #c4c6cf;
border-radius: 0.75rem;
padding: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 8px 20px rgba(11, 36, 71, 0.04);
}
.stat-card strong {
display: block;
color: #000f27;
font-weight: 800;
}
.stat-card span:not(.material-symbols-outlined) {
color: #44474e;
font-size: 14px;
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: 999px;
background: #0b2447;
color: #ffb693;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.section-kicker {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #a04100;
font-weight: 800;
}
.value-card {
background: #f7f9fb;
border: 1px solid #c4c6cf;
border-radius: 0.75rem;
padding: 1.5rem;
}
.value-card .material-symbols-outlined {
color: #fe6b00;
font-size: 32px;
margin-bottom: 1rem;
}
.value-card h3 {
color: #000f27;
font-size: 18px;
font-weight: 800;
margin-bottom: 0.5rem;
}
.value-card p {
color: #44474e;
font-size: 14px;
line-height: 1.6;
}
.industry-card {
position: relative;
height: 260px;
overflow: hidden;
border-radius: 0.75rem;
border: 1px solid #c4c6cf;
box-shadow: 0 8px 24px rgba(11, 36, 71, 0.08);
}
.industry-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
}
.industry-card:hover img {
transform: scale(1.06);
}
.industry-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 15, 39, 0.92), rgba(0, 15, 39, 0.25), transparent);
}
.industry-card div {
position: absolute;
z-index: 1;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
}
.industry-card h3 {
color: #ffffff;
font-size: 18px;
font-weight: 800;
margin-bottom: 0.25rem;
}
.industry-card p {
color: #d6e3ff;
font-size: 14px;
}
.service-card {
background: #ffffff;
border: 1px solid #c4c6cf;
border-radius: 0.75rem;
padding: 2rem;
transition: 0.25s;
min-height: 240px;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(11, 36, 71, 0.12);
}
.service-card .material-symbols-outlined {
color: #fe6b00;
font-size: 38px;
margin-bottom: 1.25rem;
}
.service-card h3 {
color: #000f27;
font-weight: 800;
font-size: 18px;
margin-bottom: 0.75rem;
}
.service-card p {
color: #44474e;
font-size: 14px;
line-height: 1.6;
margin-bottom: 1.25rem;
}
.service-card a {
color: #a04100;
font-size: 14px;
font-weight: 800;
}
.product-card {
background: #ffffff;
border: 1px solid #c4c6cf;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 8px 24px rgba(11, 36, 71, 0.06);
transition: 0.25s;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(11, 36, 71, 0.12);
}
.product-card img {
height: 220px;
width: 100%;
object-fit: cover;
}
.product-card div {
padding: 1.5rem;
}
.product-card span:first-child {
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.08em;
}
.product-card h3 {
color: #000f27;
font-size: 20px;
font-weight: 800;
margin: 0.5rem 0;
}
.product-card p {
color: #44474e;
font-size: 14px;
line-height: 1.6;
margin-bottom: 1rem;
}
.product-card ul {
margin: 0 0 1.25rem 0;
padding-left: 1rem;
color: #44474e;
font-size: 13px;
line-height: 1.7;
}
.product-card li::marker {
color: #fe6b00;
}
.product-card a {
color: #a04100;
font-weight: 800;
font-size: 14px;
display: flex;
align-items: center;
gap: 0.25rem;
}
.product-card a .material-symbols-outlined {
font-size: 16px;
}
.brand-card {
border: 1px solid #c4c6cf;
background: #f7f9fb;
border-radius: 0.75rem;
padding: 1.25rem;
color: #000f27;
font-weight: 900;
letter-spacing: -0.02em;
transition: 0.25s;
}
.brand-card:hover {
border-color: #fe6b00;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(11, 36, 71, 0.08);
}
.contact-row {
display: flex;
gap: 0.75rem;
align-items: center;
color: #d6e3ff;
}
.contact-row .material-symbols-outlined {
color: #ffb693;
}
.contact-row a {
color: #ffffff;
font-weight: 700;
}
.contact-row p {
margin-top: 0;
margin-bottom: 0;
}
.contact-form {
background: #ffffff;
color: #191c1e;
border-radius: 0.75rem;
padding: 1.5rem;
display: grid;
gap: 1rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.contact-form label {
display: block;
font-size: 13px;
font-weight: 800;
color: #000f27;
margin-bottom: 0.35rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
border: 1px solid #c4c6cf;
border-radius: 0.5rem;
padding: 0.6rem 0.6rem;
font-family: "Hanken Grotesk", sans-serif;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: #fe6b00;
box-shadow: 0 0 0 3px rgba(254, 107, 0, 0.15);
}
.contact-submit {
display: block;
text-align: center;
background: #fe6b00;
color: #ffffff;
font-weight: 800;
padding: 1rem;
border-radius: 0.5rem;
}
/* =========================================================
MEJORAS VISUALES 1-5
Solo CSS: espaciado, profundidad, microinteracciones,
hero premium y cards refinadas.
No modifica contenido, HTML, header.
========================================================= */
/* 1. Mejor espaciado vertical */
main section,
section {
scroll-margin-top: 96px;
}
.section-container,
section.section-container {
padding-top: clamp(5.5rem, 8vw, 7.5rem);
padding-bottom: clamp(5.5rem, 8vw, 7.5rem);
}
.section-header {
margin-bottom: clamp(3.5rem, 5vw, 5rem);
}
.section-header h2 {
margin-bottom: 1rem;
}
.section-header p {
margin-top: 1.15rem;
}
/* 2. Más profundidad visual */
.service-card,
.product-card,
.card,
.stat-card,
.brand-card,
.value-card,
.contact-form {
border-color: rgba(15, 23, 42, 0.10);
box-shadow:
0 16px 40px rgba(0, 15, 39, 0.07),
0 4px 12px rgba(0, 15, 39, 0.04);
}
.service-card,
.product-card,
.card,
.stat-card {
background:
linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.96));
}
/* 3. Microinteracciones */
a,
button,
.service-card,
.product-card,
.card,
.stat-card,
.brand-card,
.value-card {
transition:
transform 220ms ease,
box-shadow 220ms ease,
border-color 220ms ease,
background-color 220ms ease,
color 220ms ease,
opacity 220ms ease;
}
.service-card:hover,
.product-card:hover,
.card:hover,
.stat-card:hover,
.brand-card:hover,
.value-card:hover {
transform: translateY(-5px);
border-color: rgba(254, 107, 0, 0.28);
box-shadow:
0 24px 55px rgba(0, 15, 39, 0.12),
0 8px 20px rgba(0, 15, 39, 0.06);
}
.product-card img,
.industry-card img {
transition: transform 650ms ease, filter 650ms ease;
}
.product-card:hover img,
.industry-card:hover img {
transform: scale(1.045);
filter: saturate(1.05) contrast(1.03);
}
.btn-primary:hover,
.btn-secondary:hover,
.header-cta:hover,
.contact-submit:hover {
transform: translateY(-2px);
}
/* 4. Hero más premium */
.hero-section,
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
}
.hero-section::before,
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(circle at 18% 28%, rgba(254, 107, 0, 0.16), transparent 28%),
radial-gradient(circle at 78% 22%, rgba(177, 199, 243, 0.13), transparent 30%),
linear-gradient(135deg, rgba(0, 15, 39, 0.18), transparent 45%);
}
.hero-section::after,
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.14;
background-image:
linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: linear-gradient(to right, rgba(0,0,0,0.7), transparent 72%);
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge,
.badge {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 10px 30px rgba(0,0,0,0.16);
backdrop-filter: blur(8px);
}
.btn-primary,
.btn-secondary {
box-shadow: 0 14px 30px rgba(0, 15, 39, 0.16);
}
.btn-secondary {
backdrop-filter: blur(8px);
}
/* 5. Cards más refinadas */
.service-card,
.product-card,
.card {
border-radius: 1.1rem;
}
.service-card,
.card {
padding: clamp(1.75rem, 3vw, 2.25rem);
}
.product-card {
overflow: hidden;
}
.product-card div {
padding: clamp(1.5rem, 2.5vw, 1.9rem);
}
.service-card h3,
.product-card h3,
.card h3,
.stat-card h3 {
letter-spacing: -0.035em;
}
.service-card p,
.product-card p,
.card p,
.stat-card p {
color: #44474e;
}
/* Mobile polish visual only */
@media (max-width: 768px) {
.section-container,
section.section-container,
.section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
.section-header {
margin-bottom: 3rem;
}
.service-card,
.product-card,
.card,
.stat-card {
border-radius: 0.95rem;
}
.hero-section::after,
.hero::after {
opacity: 0.08;
background-size: 42px 42px;
}
}
/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
.service-card:hover,
.product-card:hover,
.card:hover,
.stat-card:hover,
.brand-card:hover,
.value-card:hover,
.product-card:hover img,
.industry-card:hover img {
transform: none;
}
}
/* =========================================================
MEJORAS 2-4
2. Imágenes no reales con dirección visual industrial
3. Identidad industrial propia
4. Motion design profesional
Solo mejora visual. No altera textos, menú.
========================================================= */
/* 2. Tratamiento visual para imágenes placeholder */
img {
image-rendering: auto;
}
.product-card img,
.industry-card img,
.service-card img {
background: #0b2447;
}
.product-card,
.industry-card,
.service-card,
.card {
position: relative;
}
/* 3. Identidad industrial: grids, líneas técnicas y señalización */
main {
position: relative;
overflow: hidden;
}
main::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
opacity: 0.035;
background-image:
linear-gradient(rgba(0,15,39,0.55) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,15,39,0.55) 1px, transparent 1px);
background-size: 44px 44px;
}
.section-header,
.hero-copy,
.hero-content > div,
.service-card,
.product-card,
.card,
.stat-card {
position: relative;
}
.section-header::after {
content: "";
display: block;
width: 72px;
height: 3px;
margin: 1.35rem auto 0;
border-radius: 999px;
background: linear-gradient(90deg, #fe6b00, rgba(254,107,0,0));
}
.service-card::before,
.product-card::before,
.card::before,
.stat-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(135deg, rgba(254,107,0,0.12), transparent 32%),
linear-gradient(315deg, rgba(11,36,71,0.08), transparent 38%);
opacity: 0;
transition: opacity 260ms ease;
}
.service-card:hover::before,
.product-card:hover::before,
.card:hover::before,
.stat-card:hover::before {
opacity: 1;
}
.service-card::after,
.card::after,
.stat-card::after {
content: "";
position: absolute;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
pointer-events: none;
opacity: 0.14;
background:
linear-gradient(90deg, #000f27 2px, transparent 2px),
linear-gradient(#000f27 2px, transparent 2px);
background-size: 10px 10px;
mask-image: radial-gradient(circle, black 46%, transparent 48%);
}
/* Hero: apariencia más técnica sin cambiar contenido */
.hero,
.hero-section {
background-blend-mode: overlay, normal;
}
.hero-copy::before,
.hero-content > div::before {
content: "";
position: absolute;
left: -28px;
top: -28px;
width: 120px;
height: 120px;
border-left: 2px solid rgba(254,107,0,0.6);
border-top: 2px solid rgba(254,107,0,0.6);
opacity: 0.7;
pointer-events: none;
}
.hero-copy::after,
.hero-content > div::after {
content: "";
position: absolute;
right: 8%;
bottom: -42px;
width: 180px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(254,107,0,0.85), transparent);
pointer-events: none;
}
/* 4. Motion design profesional */
.reveal-on-scroll {
opacity: 0;
transform: translateY(28px);
transition:
opacity 700ms ease,
transform 700ms cubic-bezier(.2,.8,.2,1);
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-on-scroll.reveal-delay-1 {
transition-delay: 90ms;
}
.reveal-on-scroll.reveal-delay-2 {
transition-delay: 160ms;
}
.reveal-on-scroll.reveal-delay-3 {
transition-delay: 230ms;
}
.hero h1,
.hero-section h1 {
animation: heroTitleReveal 850ms cubic-bezier(.2,.8,.2,1) both;
}
.hero p,
.hero-section p {
animation: heroTextReveal 900ms cubic-bezier(.2,.8,.2,1) 120ms both;
}
.hero-buttons,
.hero-section .hero-buttons {
animation: heroTextReveal 900ms cubic-bezier(.2,.8,.2,1) 220ms both;
}
@keyframes heroTitleReveal {
from {
opacity: 0;
transform: translateY(24px);
filter: blur(6px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes heroTextReveal {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.section-header::after {
margin-left: 0;
margin-right: 0;
}
.hero-copy::before,
.hero-content > div::before,
.hero-copy::after,
.hero-content > div::after {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll,
.reveal-on-scroll.is-visible,
.hero h1,
.hero-section h1,
.hero p,
.hero-section p,
.hero-buttons,
.hero-section .hero-buttons {
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
}
/* =========================================================
MEJORAS 1-4
1. Preparación sin CDN si el proyecto no lo requiere
2. Optimización visual de imágenes
3. Navbar premium
4. Mega menú enterprise
No cambia textos ni estructura de contenido.
========================================================= */
/* 1. Base optimizada para producción */
:root {
--nav-height: 76px;
--nav-bg: rgba(255,255,255,0.88);
--nav-border: rgba(15, 23, 42, 0.10);
--industrial-primary: #000f27;
--industrial-accent: #fe6b00;
--industrial-muted: #44474e;
}
/* 2. Imágenes: mejor render, proporción y transición */
img {
max-width: 100%;
height: auto;
}
.product-card img,
.industry-card img,
.service-card img {
object-fit: cover;
transform-origin: center;
will-change: transform;
}
.product-card img[loading="lazy"],
.industry-card img[loading="lazy"],
.service-card img[loading="lazy"] {
background:
linear-gradient(135deg, rgba(0,15,39,0.96), rgba(11,36,71,0.92)),
radial-gradient(circle at 30% 25%, rgba(254,107,0,.25), transparent 35%);
}
/* 3. Navbar premium */
.header {
background: var(--nav-bg);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
border-bottom: 1px solid var(--nav-border);
box-shadow: 0 10px 30px rgba(0, 15, 39, 0.045);
}
.header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(254,107,0,.45), transparent);
opacity: .55;
pointer-events: none;
}
.logo-wrapper,
.logo {
position: relative;
}
.logo-wrapper::after,
.logo::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 34px;
height: 2px;
border-radius: 999px;
background: var(--industrial-accent);
opacity: .85;
}
.desktop-nav a,
nav.desktop-nav a {
position: relative;
}
.desktop-nav a::after,
nav.desktop-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.45rem;
height: 2px;
border-radius: 999px;
background: var(--industrial-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms ease;
}
.desktop-nav a:hover::after,
nav.desktop-nav a:hover::after {
transform: scaleX(1);
}
.header-cta {
box-shadow: 0 12px 26px rgba(254,107,0,0.20);
}
/* Navbar al hacer scroll */
body.has-scrolled .header {
background: rgba(255,255,255,0.96);
box-shadow: 0 16px 42px rgba(0, 15, 39, 0.10);
}
/* 4. Mega menú enterprise: sirve para dropdowns existentes sin alterar HTML */
.group > div[class*="absolute"],
.mega-menu,
.dropdown-menu {
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,251,.96)) !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
box-shadow:
0 30px 70px rgba(0, 15, 39, 0.18),
0 8px 20px rgba(0, 15, 39, 0.08) !important;
overflow: hidden;
}
.group > div[class*="absolute"]::before,
.mega-menu::before,
.dropdown-menu::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 14% 0%, rgba(254,107,0,.12), transparent 28%),
linear-gradient(90deg, rgba(0,15,39,.035) 1px, transparent 1px),
linear-gradient(rgba(0,15,39,.035) 1px, transparent 1px);
background-size: auto, 38px 38px, 38px 38px;
}
.menu-title,
.group h4 {
display: flex;
align-items: center;
gap: .55rem;
position: relative;
}
.menu-title::before,
.group h4::before {
content: "";
width: .55rem;
height: .55rem;
border-radius: 999px;
background: var(--industrial-accent);
box-shadow: 0 0 0 4px rgba(254,107,0,.12);
flex: 0 0 auto;
}
.menu-link,
.mega-link,
.group > div[class*="absolute"] a {
position: relative;
border-radius: .5rem;
}
.menu-link:hover,
.mega-link:hover,
.group > div[class*="absolute"] a:hover {
background: rgba(254,107,0,0.075) !important;
color: #a04100 !important;
}
/* Mobile navbar polish without changing content */
.mobile-nav,
#mobile-menu {
background: rgba(255,255,255,0.98);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.mobile-nav a,
#mobile-menu a {
position: relative;
}
.mobile-nav a::before,
#mobile-menu a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 2px;
background: var(--industrial-accent);
transform: translateY(-50%);
transition: width 220ms ease;
}
.mobile-nav a:hover::before,
#mobile-menu a:hover::before {
width: 18px;
}
@media (max-width: 768px) {
.logo-wrapper::after,
.logo::after {
display: none;
}
}
/* =========================================================
AJUSTE SOLICITADO
Base: versión anterior buena.
- Títulos de sección: 50% más grandes.
- Nombre/label de sección: 25% más grande.
No modifica contenido, menú ni HTML.
========================================================= */
/* Nombre de sección: Servicios, Productos, etc. */
.section-kicker,
.section-label,
.kicker,
.eyebrow {
font-size: 125%;
}
/* Títulos principales de cada sección */
.section-header h2 {
font-size: 150%;
}
/* Si alguna sección usa h2 fuera de .section-header */
main section > .container > h2,
main section h2.section-title {
font-size: 150%;
}
/* Mantener proporción en móviles */
@media (max-width: 768px) {
.section-kicker,
.section-label,
.kicker,
.eyebrow {
font-size: 115%;
}
.section-header h2,
main section > .container > h2,
main section h2.section-title {
font-size: 140%;
}
}
/* =========================================================
TÍTULOS DE SECCIÓN EN BOLD
========================================================= */
.section-header h2,
main section > .container > h2,
main section h2.section-title {
font-weight: 900 !important;
}
/* =========================================================
FIX REAL BOLD PARA TITULOS DE SECCION
========================================================= */
.section-header h2,
main section > .container > h2,
main section h2.section-title,
section h2 {
font-weight: 900 !important;
font-variation-settings: "wght" 900 !important;
letter-spacing: -0.01em !important;
}
/* Refuerzo visual enterprise */
.section-header h2{
text-shadow:
0 1px 0 rgba(255,255,255,0.25),
0 2px 10px rgba(0,15,39,0.04);
}
/* =========================================================
MEJORA RESPONSIVE PREMIUM
Solo mejora adaptación móvil/tablet.
No modifica contenido, menú ni estructura HTML.
========================================================= */
/* Tablet */
@media (max-width: 1024px) {
.container {
width: min(100% - 40px, 960px);
}
.hero,
.hero-section {
min-height: 760px;
}
.hero-content {
min-height: 760px;
align-items: center;
}
.hero-copy,
.hero-content > div {
max-width: 760px;
}
.hero p,
.hero-section p {
max-width: 680px;
font-size: 1.08rem;
}
.section-container,
.section {
padding-top: 5.5rem;
padding-bottom: 5.5rem;
}
}
/* Mobile general */
@media (max-width: 768px) {
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
.container {
width: min(100% - 32px, 100%);
}
/* Header móvil */
.top-bar,
.topbar {
display: none !important;
}
.header-content,
.nav {
min-height: 72px;
padding-top: 0.85rem;
padding-bottom: 0.85rem;
gap: 1rem;
}
.logo-wrapper,
.logo {
font-size: 1.04rem;
line-height: 1.1;
max-width: 68%;
}
.logo-wrapper img {
height: 40px;
}
.mobile-menu-btn,
.menu-btn,
#menu-toggle {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(15,23,42,0.14);
border-radius: 0.7rem;
background: rgba(255,255,255,0.84);
}
.mobile-nav,
#mobile-menu {
padding: 0.6rem 1rem 1rem;
border-top: 1px solid rgba(15,23,42,0.10);
box-shadow: 0 18px 36px rgba(0,15,39,0.10);
}
.mobile-nav a,
#mobile-menu a {
padding: 1rem 0 1rem 1.35rem;
font-size: 1rem;
line-height: 1.2;
}
/* Hero móvil */
.hero,
.hero-section {
min-height: auto;
padding-top: 5.5rem;
padding-bottom: 5.5rem;
background-position: center;
}
.hero-content,
.hero-section .hero-content {
min-height: auto;
align-items: center;
}
.hero-copy,
.hero-content > div {
max-width: 100%;
}
.hero-badge,
.badge {
font-size: 0.68rem;
line-height: 1.35;
padding: 0.5rem 0.8rem;
margin-bottom: 1.15rem;
max-width: 100%;
}
.hero h1,
.hero-section h1 {
font-size: clamp(2.45rem, 8vw, 3.45rem);
line-height: 1.02;
letter-spacing: -0.05em;
max-width: 100%;
}
.hero p,
.hero-section p {
font-size: 1.02rem;
line-height: 1.7;
margin-top: 1.25rem;
max-width: 100%;
}
.hero-buttons,
.hero-section .hero-buttons,
.buttons,
.cta-actions {
flex-direction: column;
width: 100%;
gap: 0.85rem;
}
.btn-primary,
.btn-secondary,
.contact-submit {
width: 100%;
min-height: 52px;
padding: 0.95rem 1rem;
text-align: center;
}
/* Secciones */
.section-container,
.section,
section.section-container {
padding-top: 4.25rem;
padding-bottom: 4.25rem;
}
.section-header {
text-align: left;
margin-bottom: 2.8rem;
}
.section-header::after {
margin-left: 0;
margin-right: 0;
}
.section-kicker,
.section-label,
.kicker,
.eyebrow {
font-size: 0.88rem !important;
line-height: 1.3;
}
.section-header h2,
main section > .container > h2,
main section h2.section-title,
section h2 {
font-size: var(--size-h2);
line-height: 1.02 !important;
letter-spacing: 0.01em !important;
max-width: 100%;
}
.section-header p {
margin-left: 0;
margin-right: 0;
font-size: 1rem;
line-height: 1.75;
}
.service-card,
.product-card,
.card,
.stat-card,
.brand-card,
.value-card {
border-radius: 0.95rem;
}
.service-card,
.card,
.stat-card,
.value-card {
padding: 1.35rem;
}
.service-card h3,
.product-card h3,
.card h3,
.stat-card h3 {
font-size: 1.28rem;
line-height: 1.18;
}
.service-card p,
.product-card p,
.card p,
.stat-card p {
font-size: 0.98rem;
line-height: 1.72;
}
.product-card img,
.industry-card img {
height: 220px;
}
.product-card div {
padding: 1.35rem;
}
/* Contacto */
.contact-form {
padding: 1.2rem;
border-radius: 1rem;
}
.contact-row {
align-items: flex-start;
}
}
/* Mobile pequeño */
@media (max-width: 420px) {
.container {
width: min(100% - 24px, 100%);
}
.hero,
.hero-section {
padding-top: 4.5rem;
padding-bottom: 4.75rem;
}
.section-header h2,
main section > .container > h2,
main section h2.section-title,
section h2 {
font-size: clamp(2rem, 12vw, 2.7rem) !important;
}
.section-container,
.section,
section.section-container {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
.product-card img,
.industry-card img {
height: 200px;
}
.btn-primary,
.btn-secondary,
.contact-submit {
font-size: 0.74rem;
letter-spacing: 0.045em;
}
}
/* Botones convertidos en enlaces */
.button-link{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
}
/* =========================================================
Ventanas generadas
========================================================= */
.generated-body {
background: #f7f9fb;
color: #191c1e;
}
.generated-container {
width: min(1280px, calc(100% - 32px));
margin-inline: auto;
}
.generated-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(15,23,42,0.10);
}
.generated-nav {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.generated-logo {
color: #000f27;
text-decoration: none;
font-size:1.15rem;
font-weight: 900;
letter-spacing: -0.035em;
}
.generated-nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.generated-nav-links a {
color: #44474e;
text-decoration: none;
font-weight: 700;
}
.generated-cta {
background: #fe6b00;
color: #fff;
text-decoration: none;
padding: .85rem 1.2rem;
border-radius: .55rem;
font-family: "JetBrains Mono", monospace;
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.generated-hero {
position: relative;
overflow: hidden;
padding: clamp(5rem, 8vw, 7rem) 0;
background:
radial-gradient(circle at 14% 20%, rgba(254,107,0,0.16), transparent 30%),
linear-gradient(135deg, #ffffff, #f2f4f6);
border-bottom: 1px solid #c4c6cf;
}
.generated-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: .08;
background-image:
linear-gradient(rgba(0,15,39,.35) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,15,39,.35) 1px, transparent 1px);
background-size: 48px 48px;
}
.generated-hero .generated-container {
position: relative;
z-index: 1;
}
.generated-kicker {
display: inline-flex;
margin-bottom: 1.2rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .9rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.generated-hero h1 {
margin: 0;
max-width: 850px;
color: #000f27;
font-size: clamp(3rem, 5.4vw, 5rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.055em;
}
.generated-hero p {
max-width: 760px;
margin: 1.4rem 0 0;
color: #44474e;
font-size: 1.12rem;
line-height: 1.75;
}
.generated-page-section {
padding: clamp(4rem, 7vw, 6rem) 0;
}
.generated-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.generated-card {
position: relative;
padding: 2rem;
border-radius: 1.1rem;
border: 1px solid rgba(15,23,42,.10);
background: #fff;
box-shadow:
0 16px 40px rgba(0,15,39,.07),
0 4px 12px rgba(0,15,39,.04);
}
.generated-card-wide {
max-width: 760px;
}
.generated-card-icon {
display: inline-flex;
color: #fe6b00;
margin-bottom: 1rem;
}
.generated-card h2 {
margin: 0;
color: #000f27;
font-size: 1.45rem;
line-height: 1.15;
font-weight: 900;
letter-spacing: -.035em;
}
.generated-card p {
color: #44474e;
line-height: 1.75;
}
.generated-card a {
display: inline-flex;
margin-top: 1rem;
color: #a04100;
font-weight: 800;
text-decoration: none;
}
@media(max-width: 900px) {
.generated-nav-links,
.generated-cta {
display: none;
}
.generated-grid {
grid-template-columns: 1fr;
}
.generated-hero h1 {
font-size: clamp(2.35rem, 12vw, 3.3rem);
}
}
/* =========================================================
Ventanas internas con header compartidos
========================================================= */
.generated-body {
background: #f7f9fb;
color: #191c1e;
}
.generated-container {
width: min(1280px, calc(100% - 32px));
margin-inline: auto;
}
.generated-hero {
position: relative;
overflow: hidden;
padding: clamp(5rem, 8vw, 7rem) 0;
background:
radial-gradient(circle at 14% 20%, rgba(254,107,0,0.16), transparent 30%),
linear-gradient(135deg, #ffffff, #f2f4f6);
border-bottom: 1px solid #c4c6cf;
}
.generated-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: .08;
pointer-events: none;
background-image:
linear-gradient(rgba(0,15,39,.35) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,15,39,.35) 1px, transparent 1px);
background-size: 48px 48px;
}
.generated-hero .generated-container {
position: relative;
z-index: 1;
}
.generated-kicker {
display: inline-flex;
margin-bottom: 1.2rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .9rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.generated-hero h1 {
margin: 0;
max-width: 850px;
color: #000f27;
font-size: clamp(3rem, 5.4vw, 5rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.055em;
}
.generated-hero p {
max-width: 760px;
margin: 1.4rem 0 0;
color: #44474e;
font-size: 1.12rem;
line-height: 1.75;
}
.generated-page-section {
padding: clamp(4rem, 7vw, 6rem) 0;
}
.generated-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.generated-card {
position: relative;
padding: 2rem;
border-radius: 1.1rem;
border: 1px solid rgba(15,23,42,.10);
background: #fff;
box-shadow:
0 16px 40px rgba(0,15,39,.07),
0 4px 12px rgba(0,15,39,.04);
}
.generated-card-icon {
display: inline-flex;
color: #fe6b00;
margin-bottom: 1rem;
}
.generated-card h2 {
margin: 0;
color: #000f27;
font-size: 1.45rem;
line-height: 1.15;
font-weight: 900;
letter-spacing: -.035em;
}
.generated-card p {
color: #44474e;
line-height: 1.75;
}
.generated-card a {
display: inline-flex;
margin-top: 1rem;
color: #a04100;
font-weight: 800;
text-decoration: none;
}
@media(max-width: 900px) {
.generated-grid {
grid-template-columns: 1fr;
}
.generated-hero h1 {
font-size: clamp(2.35rem, 12vw, 3.3rem);
}
}
/* ===== FIX HEADER POSITION ===== */
#header-container{
display:block;
width:100%;
position:relative;
z-index:9999;
}
.generated-body{
display:flex;
flex-direction:column;
min-height:100vh;
}
.generated-main{
flex:1;
width:100%;
}
/* =========================================================
Ventanas internas para todos los items del menú
========================================================= */
#header-container {
display: block;
width: 100%;
position: relative;
z-index: 9999;
}
.generated-body {
background: #f7f9fb;
color: #191c1e;
}
.generated-main {
flex: 1;
width: 100%;
}
.generated-container {
width: min(1280px, calc(100% - 32px));
margin-inline: auto;
}
.generated-hero {
position: relative;
overflow: hidden;
padding: clamp(5rem, 8vw, 7rem) 0;
background:
radial-gradient(circle at 14% 20%, rgba(254,107,0,0.16), transparent 30%),
linear-gradient(135deg, #ffffff, #f2f4f6);
border-bottom: 1px solid #c4c6cf;
}
.generated-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: .08;
pointer-events: none;
background-image:
linear-gradient(rgba(0,15,39,.35) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,15,39,.35) 1px, transparent 1px);
background-size: 48px 48px;
}
.generated-hero .generated-container {
position: relative;
z-index: 1;
}
.generated-kicker {
display: inline-flex;
margin-bottom: 1.2rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .9rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.generated-hero h1 {
margin: 0;
max-width: 880px;
color: #000f27;
font-size: clamp(3rem, 5.4vw, 5rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.055em;
}
.generated-hero p {
max-width: 780px;
margin: 1.4rem 0 0;
color: #44474e;
font-size: 1.12rem;
line-height: 1.75;
}
.generated-page-section {
padding: clamp(4rem, 7vw, 6rem) 0;
}
.generated-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.generated-card {
position: relative;
padding: 2rem;
border-radius: 1.1rem;
border: 1px solid rgba(15,23,42,.10);
background: #fff;
box-shadow:
0 16px 40px rgba(0,15,39,.07),
0 4px 12px rgba(0,15,39,.04);
}
.generated-card-icon {
display: inline-flex;
color: #fe6b00;
margin-bottom: 1rem;
}
.generated-card h2 {
margin: 0;
color: #000f27;
font-size: 1.45rem;
line-height: 1.15;
font-weight: 900;
letter-spacing: -.035em;
}
.generated-card p {
color: #44474e;
line-height: 1.75;
}
.generated-card a {
display: inline-flex;
margin-top: 1rem;
color: #a04100;
font-weight: 800;
text-decoration: none;
}
@media(max-width: 900px) {
.generated-grid {
grid-template-columns: 1fr;
}
.generated-hero h1 {
font-size: clamp(2.35rem, 12vw, 3.3rem);
}
}
/* =========================================================
Floating WhatsApp Button
========================================================= */
.floating-whatsapp {
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 9999;
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #ffffff;
background: #25D366;
box-shadow:
0 16px 36px rgba(0,15,39,.22),
0 8px 18px rgba(37,211,102,.28);
transition:
transform 220ms ease,
box-shadow 220ms ease,
filter 220ms ease;
}
.floating-whatsapp::before {
content: "";
position: absolute;
inset: -7px;
border-radius: inherit;
border: 1px solid rgba(37,211,102,.38);
opacity: .85;
}
.floating-whatsapp svg {
width: 34px;
height: 34px;
}
.floating-whatsapp:hover {
transform: translateY(-4px) scale(1.04);
filter: brightness(1.03);
box-shadow:
0 22px 46px rgba(0,15,39,.26),
0 10px 24px rgba(37,211,102,.36);
}
@media (max-width: 768px) {
.floating-whatsapp {
right: 1rem;
bottom: 1rem;
width: 56px;
height: 56px;
}
.floating-whatsapp svg {
width: 30px;
height: 30px;
}
}
/* =========================================================
Refinamiento uniforme: Aplicaciones, Servicios y Productos
========================================================= */
/* Navegación rápida */
.page-quick-nav {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.0rem;
}
.page-quick-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: .55rem .9rem;
border: 1px solid rgba(255,255,255,.20);
border-radius: 999px;
background: rgba(255,255,255,.08);
color: #d6e3ff;
text-decoration: none;
font-family: "JetBrains Mono", monospace;
font-size: .72rem;
line-height: 1.2;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
backdrop-filter: blur(8px);
transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.page-quick-nav a:hover {
background: rgba(254,107,0,.24);
color: #ffffff;
transform: translateY(-2px);
}
/* =========================================================
Rediseño criterio: cards Servicios y Productos
========================================================= */
.svc-product-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(15,23,42,.10);
border-radius: 1.2rem;
background: #ffffff;
box-shadow:
0 16px 40px rgba(0,15,39,.07),
0 4px 12px rgba(0,15,39,.04);
transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.svc-product-card:hover {
transform: translateY(-5px);
border-color: rgba(254,107,0,.32);
box-shadow:
0 26px 60px rgba(0,15,39,.13),
0 8px 20px rgba(0,15,39,.06);
}
.svc-card-link {
position: absolute;
inset: 0;
z-index: 8;
}
.svc-featured {
display: grid;
grid-template-columns: .95fr 1.05fr;
min-height: 430px;
}
.svc-tall {
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
}
.svc-compact {
min-height: 305px;
padding: 1.65rem;
display: flex;
flex-direction: column;
}
.svc-dark {
min-height: 345px;
display: flex;
align-items: center;
background: #000f27;
color: #ffffff;
}
.svc-dark > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: .28;
object-fit: cover;
filter: grayscale(1);
}
.svc-horizontal {
min-height: 305px;
display: grid;
grid-template-columns: 1.25fr .75fr;
background:
radial-gradient(circle at 90% 10%, rgba(254,107,0,.10), transparent 30%),
#ffffff;
}
.svc-card-media {
min-height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(254,107,0,.18), transparent 35%),
linear-gradient(135deg, #000f27, #0b2447);
overflow: hidden;
}
.svc-card-media img,
.svc-dark > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 800ms ease, filter 800ms ease;
}
.svc-product-card:hover .svc-card-media img,
.svc-product-card:hover.svc-dark > img {
transform: scale(1.055);
filter: saturate(1.08) contrast(1.04);
}
.svc-card-body {
position: relative;
z-index: 2;
padding: 1.85rem;
display: flex;
flex-direction: column;
}
.svc-dark .svc-card-body {
max-width: 650px;
padding: 2.25rem;
}
.svc-kicker {
display: block;
margin-bottom: .7rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .74rem;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.svc-dark .svc-kicker {
color: #ffb693;
}
.svc-product-card h3 {
margin: 0 0 .85rem;
color: #000f27;
font-size: clamp(1.45rem, 2.1vw, 2rem);
line-height: 1.08;
font-weight: 900;
letter-spacing: -.045em;
}
.svc-dark h3 {
color: #ffffff;
font-size: clamp(2rem, 3.8vw, 3rem);
}
.svc-product-card p {
margin: 0;
color: #44474e;
line-height: 1.76;
}
.svc-dark p {
color: #d6e3ff;
}
.svc-tags {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin-top: 1.35rem;
}
.svc-tags span {
padding: .45rem .65rem;
border-radius: 999px;
background: #f2f4f6;
color: #000f27;
font-family: "JetBrains Mono", monospace;
font-size: .66rem;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
.svc-dark .svc-tags span {
background: rgba(255,255,255,.12);
color: #ffffff;
}
.svc-list {
margin: 1.25rem 0 0;
padding: 1rem 0 0;
list-style: none;
display: grid;
gap: .55rem;
border-top: 1px solid rgba(15,23,42,.12);
}
.svc-list li {
color: #44474e;
font-size: .95rem;
}
.svc-list li::before {
content: "✓";
color: #fe6b00;
font-weight: 900;
margin-right: .45rem;
}
.svc-card-action {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-top: auto;
padding-top: 1.4rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .74rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.svc-card-action .material-symbols-outlined {
font-size: 1rem;
}
.svc-icon {
width: 56px;
height: 56px;
display: grid;
place-items: center;
margin-bottom: 1.3rem;
border-radius: 1rem;
background: #0b2447;
color: #ffb693;
}
.svc-icon .material-symbols-outlined {
font-size: 2rem;
font-variation-settings: "FILL" 1;
}
.svc-side-panel {
min-height: 100%;
display: grid;
place-items: center;
gap: .8rem;
padding: 2rem;
text-align: center;
background:
radial-gradient(circle at 20% 20%, rgba(254,107,0,.18), transparent 35%),
linear-gradient(135deg, #000f27, #0b2447);
color: #ffffff;
}
.svc-side-panel .material-symbols-outlined {
color: #ffb693;
font-size: 3rem;
font-variation-settings: "FILL" 1;
}
.svc-side-panel strong {
font-size: 1.1rem;
font-weight: 900;
letter-spacing: -.02em;
}
@media (max-width: 1024px) {
.svc-featured,
.svc-horizontal {
grid-template-columns: 1fr;
}
.svc-card-media,
.svc-side-panel {
min-height: 250px;
}
}
@media (max-width: 768px) {
.svc-product-card,
.svc-featured,
.svc-tall,
.svc-compact,
.svc-dark,
.svc-horizontal {
min-height: auto;
border-radius: .95rem;
}
.svc-compact {
padding: 1.35rem;
}
.svc-card-body,
.svc-dark .svc-card-body {
padding: 1.35rem;
}
.svc-card-media,
.svc-side-panel {
min-height: 220px;
}
}
/* Card principal hero */
.svc-featured {
grid-template-columns: 1.08fr .92fr;
min-height: 500px;
}
/* Cards altas más compactas */
.svc-tall {
min-height: 500px;
justify-content: space-between;
}
/* Cards compactas mejor proporcionadas */
.svc-compact {
min-height: 280px;
padding: 1.85rem;
}
/* Cards oscuras más cinematográficas */
.svc-dark {
min-height: 380px;
align-items: flex-end;
}
.svc-dark .svc-card-body {
max-width: 720px;
}
/* Horizontal más elegante */
.svc-horizontal {
grid-template-columns: 1.4fr .6fr;
min-height: 280px;
}
/* Imágenes */
.svc-card-media {
min-height: 100%;
}
.svc-card-media img {
object-position: center center;
}
/* Tipografía */
.svc-product-card h3 {
font-size: clamp(1.55rem, 2vw, 2.25rem);
margin-bottom: 1rem;
}
.svc-dark h3 {
font-size: clamp(2.2rem, 4vw, 3.5rem);
}
.svc-product-card p {
font-size: 1rem;
line-height: 1.82;
}
/* Compact cards con mejor jerarquía */
.svc-compact h3 {
font-size: 1.6rem;
}
.svc-compact p {
margin-top: .2rem;
}
/* Separación de badges */
.svc-tags {
gap: .65rem;
margin-top: 1.5rem;
}
/* Más presencia al lateral técnico */
.svc-side-panel {
position: relative;
overflow: hidden;
}
.svc-side-panel::before {
content: "";
position: absolute;
inset: 0;
opacity: .10;
background-image:
linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
background-size: 34px 34px;
}
.svc-side-panel strong {
position: relative;
z-index: 1;
font-size:1.15rem;
}
.svc-side-panel .material-symbols-outlined {
position: relative;
z-index: 1;
font-size: 3.4rem;
}
/* Hover más sutil */
.svc-product-card:hover {
transform: translateY(-4px);
}
/* Desktop XL */
@media (min-width: 1440px) {
.svc-featured {
min-height: 420px;
}
.svc-tall {
min-height: 420px;
}
.svc-dark {
min-height: 420px;
}
.svc-horizontal {
min-height: 320px;
}
}
/* Tablet */
@media (max-width: 1100px) {
.svc-featured,
.svc-horizontal {
grid-template-columns: 1fr;
}
.svc-featured {
min-height: auto;
}
.svc-tall {
min-height: auto;
}
.svc-dark {
min-height: 340px;
}
.svc-horizontal {
min-height: auto;
}
.svc-side-panel {
min-height: 220px;
}
}
/* Mobile */
@media (max-width: 768px) {
.svc-product-card,
.svc-featured,
.svc-tall,
.svc-dark,
.svc-horizontal,
.svc-compact {
min-height: auto !important;
border-radius: 1rem;
}
.svc-card-body {
padding: 1.4rem;
}
.svc-compact {
padding: 1.4rem;
}
.svc-product-card h3 {
font-size: 1.5rem;
}
.svc-dark h3 {
font-size: 2rem;
}
.svc-card-media,
.svc-side-panel {
min-height: 220px;
}
}
/* =========================================================
Rediseño editorial final de cards Servicios / Productos
========================================================= */
.redesigned-grid {
align-items: stretch;
gap: 1.6rem !important;
}
.new-card {
position: relative;
overflow: hidden;
border-radius: 1.25rem;
border: 1px solid rgba(15,23,42,.10);
background: #ffffff;
box-shadow: 0 18px 42px rgba(0,15,39,.075), 0 4px 12px rgba(0,15,39,.04);
transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.new-card:hover {
transform: translateY(-5px);
border-color: rgba(254,107,0,.32);
box-shadow: 0 28px 64px rgba(0,15,39,.14), 0 8px 20px rgba(0,15,39,.06);
}
.new-card-link {
position: absolute;
inset: 0;
z-index: 9;
}
.new-card span {
display: block;
margin-bottom: .7rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .72rem;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.new-card h3 {
margin: 0 0 .85rem;
color: #000f27;
font-size: clamp(1.55rem, 2.3vw, 2.35rem);
line-height: 1.05;
font-weight: 900;
letter-spacing: -.05em;
}
.new-card p {
margin: 0;
color: #44474e;
line-height: 1.78;
font-size: 1rem;
}
.new-card-hero {
display: grid;
grid-template-rows: 260px 1fr;
min-height: 580px;
}
.new-card-media {
overflow: hidden;
background: radial-gradient(circle at 20% 20%, rgba(254,107,0,.18), transparent 34%), linear-gradient(135deg, #000f27, #0b2447);
}
.new-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 850ms ease, filter 850ms ease;
}
.new-card:hover .new-card-media img {
transform: scale(1.055);
filter: saturate(1.08) contrast(1.04);
}
.new-card-content {
padding: 2rem;
}
.new-tags {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin-top: 1.4rem;
}
.new-tags b {
padding: .48rem .7rem;
border-radius: 999px;
background: #f2f4f6;
color: #000f27;
font-family: "JetBrains Mono", monospace;
font-size: .66rem;
letter-spacing: .05em;
text-transform: uppercase;
}
.new-card-stack {
min-height: 280px;
padding: 1.7rem;
display: flex;
flex-direction: column;
}
.new-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 1.25rem;
border-radius: 1rem;
color: #ffb693;
background: #0b2447;
}
.new-icon .material-symbols-outlined {
font-size: 2rem;
font-variation-settings: "FILL" 1;
}
.new-card-wide {
min-height: 330px;
display: grid;
grid-template-columns: 1.35fr .65fr;
}
.new-card-wide .new-card-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.new-card-media.side {
min-height: 100%;
}
.new-card-mini {
min-height: 330px;
padding: 1.85rem;
display: flex;
flex-direction: column;
justify-content: space-between;
background: radial-gradient(circle at 90% 10%, rgba(254,107,0,.10), transparent 30%), #ffffff;
}
.new-action {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-top: 1.4rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .74rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.new-action .material-symbols-outlined {
font-size: 1rem;
}
.new-card-banner {
min-height: 260px;
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
padding: 2.2rem;
background: radial-gradient(circle at 85% 15%, rgba(254,107,0,.14), transparent 30%), linear-gradient(135deg, #ffffff, #f2f4f6);
}
.new-card-banner p {
max-width: 720px;
}
.new-banner-metrics {
min-width: 320px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .75rem;
}
.new-banner-metrics strong,
.new-banner-metrics small {
display: block;
text-align: center;
}
.new-banner-metrics strong {
padding-top: 1rem;
color: #fe6b00;
font-size: 2rem;
font-weight: 900;
line-height: 1;
}
.new-banner-metrics small {
padding: .35rem .5rem 1rem;
color: #000f27;
font-family: "JetBrains Mono", monospace;
font-size: .65rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.new-banner-metrics > * {
background: rgba(255,255,255,.75);
}
@media (max-width: 1024px) {
.new-card-wide,
.new-card-banner {
grid-template-columns: 1fr;
}
.new-card-hero {
min-height: auto;
}
.new-banner-metrics {
min-width: 0;
}
}
@media (max-width: 768px) {
.redesigned-grid {
gap: 1.15rem !important;
}
.new-card {
border-radius: 1rem;
}
.new-card-hero {
grid-template-rows: 220px auto;
}
.new-card-content,
.new-card-mini,
.new-card-stack,
.new-card-banner {
padding: 1.4rem;
}
.new-card h3 {
font-size: 1.55rem;
}
.new-banner-metrics {
grid-template-columns: 1fr;
}
}
/* =========================================================
Modern cards redesign v3
========================================================= */
.modern-grid {
gap: 1.5rem !important;
align-items: stretch;
}
.modern-card {
position: relative;
overflow: hidden;
border-radius: 1.2rem;
background: #ffffff;
border: 1px solid rgba(15,23,42,.08);
box-shadow:
0 16px 36px rgba(0,15,39,.06),
0 4px 10px rgba(0,15,39,.04);
transition:
transform 220ms ease,
box-shadow 220ms ease,
border-color 220ms ease;
}
.modern-card:hover {
transform: translateY(-4px);
border-color: rgba(254,107,0,.26);
box-shadow:
0 24px 52px rgba(0,15,39,.12),
0 8px 18px rgba(0,15,39,.05);
}
.modern-link {
position: absolute;
inset: 0;
z-index: 5;
}
.modern-card span {
display: block;
margin-bottom: .65rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .72rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.modern-card h3 {
margin: 0 0 .8rem;
color: #000f27;
font-size: clamp(1.5rem, 2vw, 2.3rem);
line-height: 1.06;
font-weight: 900;
letter-spacing: -.045em;
}
.modern-card p {
margin: 0;
color: #44474e;
line-height: 1.78;
}
.modern-primary {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.modern-media {
background:
radial-gradient(circle at 20% 20%, rgba(254,107,0,.18), transparent 35%),
linear-gradient(135deg, #000f27, #0b2447);
}
.modern-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms ease;
}
.modern-card:hover .modern-media img,
.modern-card:hover.modern-dark > img {
transform: scale(1.04);
}
.modern-content {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.modern-pills {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin-top: 1.4rem;
}
.modern-pills b {
padding: .48rem .7rem;
border-radius: 999px;
background: #f2f4f6;
color: #000f27;
font-family: "JetBrains Mono", monospace;
font-size: .64rem;
letter-spacing: .05em;
text-transform: uppercase;
}
.modern-side {
min-height: 420px;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.modern-inline {
min-height: 230px;
padding: 1.7rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.modern-inline-head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.modern-icon {
width: 60px;
height: 60px;
display: grid;
place-items: center;
border-radius: 1rem;
background: #0b2447;
color: #ffb693;
flex-shrink: 0;
}
.modern-icon.small {
width: 52px;
height: 52px;
}
.modern-icon .material-symbols-outlined {
font-size: 2rem;
font-variation-settings: "FILL" 1;
}
.modern-dark {
min-height: 360px;
background: #000f27;
}
.modern-dark > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .28;
}
.modern-overlay {
position: relative;
z-index: 2;
padding: 2.2rem;
max-width: 640px;
}
.modern-overlay span {
color: #ffb693;
}
.modern-overlay h3,
.modern-overlay p {
color: #ffffff;
}
.modern-stats {
min-height: 360px;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
radial-gradient(circle at 85% 10%, rgba(254,107,0,.12), transparent 28%),
linear-gradient(135deg, #ffffff, #f2f4f6);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .8rem;
margin-top: 2rem;
}
.stats-grid div {
padding: 1rem .6rem;
border-radius: 1rem;
background: rgba(255,255,255,.72);
text-align: center;
}
.stats-grid strong {
display: block;
color: #fe6b00;
font-size: 1.8rem;
line-height: 1;
font-weight: 900;
}
.stats-grid small {
display: block;
margin-top: .4rem;
color: #000f27;
font-family: "JetBrains Mono", monospace;
font-size: .62rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
@media (max-width: 1024px) {
.modern-primary {
grid-template-columns: 1fr;
}
.modern-primary,
.modern-side {
min-height: auto;
}
}
@media (max-width: 768px) {
.modern-grid {
gap: 1.1rem !important;
}
.modern-card {
border-radius: 1rem;
}
.modern-primary {
min-height: auto;
}
.modern-media {
min-height: 220px;
}
.modern-content,
.modern-side,
.modern-inline,
.modern-overlay,
.modern-stats {
padding: 1.4rem;
}
.modern-card h3 {
font-size: 1.55rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
Rediseño moderno completo Servicios / Productos
========================================================= */
.modern-layout-page{background:linear-gradient(180deg,#f7f9fb 0%,#fff 45%,#f2f4f6 100%);overflow:hidden}
.ml-hero{position:relative;overflow:hidden;background:#000f27;color:#fff}
.ml-hero-bg{position:absolute;inset:0;z-index:0}
.ml-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.ml-hero-bg div{position:absolute;inset:0;background:linear-gradient(90deg,#0b2447 0%,rgba(11,36,71,.92) 48%,rgba(11,36,71,.55))}
.ml-hero:after{content:"";position:absolute;inset:0;z-index:1;opacity:.12;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to right,#000,transparent 82%)}
.ml-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);gap:clamp(2rem,5vw,4rem);align-items:center;padding-top:clamp(5.5rem,8vw,7.5rem);padding-bottom:clamp(5.5rem,8vw,7.5rem)}
.ml-hero-copy{display:flex;flex-direction:column;gap:1.6rem;max-width:780px}
.ml-eyebrow{display:block;color:#ffb693;font-family:"JetBrains Mono",monospace;font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.ml-hero h1{margin:0;color:#fff;font-size:clamp(3.3rem,6vw,6rem);line-height:.92;font-weight:900;letter-spacing:-.065em}
.ml-hero h1 em{font-style:normal;color:#ffb693}
.ml-hero p{margin:0;max-width:680px;color:#d6e3ff;font-size:1.16rem;line-height:1.75}
.ml-actions,.ml-quick{display:flex;flex-wrap:wrap;gap:1rem}
.ml-primary,.ml-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:1rem 1.45rem;border-radius:.7rem;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ml-primary{background:#fe6b00;color:#fff;box-shadow:0 16px 32px rgba(254,107,0,.24)}
.ml-secondary{border:1px solid rgba(255,255,255,.35);color:#fff}
.ml-quick a{padding:.55rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#d6e3ff;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ml-hero-panel{border:1px solid rgba(255,255,255,.12);border-radius:1.35rem;background:rgba(255,255,255,.07);backdrop-filter:blur(14px);padding:1rem;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.ml-panel-grid{display:grid;grid-template-columns:1fr;gap:.85rem}
.ml-panel-grid div{padding:1.25rem;border-radius:1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.ml-panel-grid strong{display:block;color:#ffb693;font-size:2.2rem;line-height:1;font-weight:900}
.ml-panel-grid span{display:block;margin-top:.55rem;color:#d6e3ff}
.ml-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:end;padding-top:clamp(4.5rem,7vw,6rem);padding-bottom:2.5rem}
.ml-intro h2{margin:.65rem 0 0;color:#000f27;font-size:clamp(2.5rem,4.8vw,4.4rem);line-height:.98;font-weight:900;letter-spacing:-.06em}
.ml-intro p{margin:0;color:#44474e;font-size:1.08rem;line-height:1.78}
.ml-cards-section{padding-bottom:clamp(5rem,8vw,7rem)}
.ml-cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;align-items:stretch}
.ml-card{position:relative;overflow:hidden;border-radius:1.25rem;border:1px solid rgba(15,23,42,.1);background:#fff;box-shadow:0 18px 42px rgba(0,15,39,.075),0 4px 12px rgba(0,15,39,.04);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.ml-card:hover{transform:translateY(-5px);border-color:rgba(254,107,0,.32);box-shadow:0 28px 64px rgba(0,15,39,.14),0 8px 20px rgba(0,15,39,.06)}
.ml-link{position:absolute;inset:0;z-index:8}
.ml-feature{grid-column:span 7;display:grid;grid-template-rows:260px auto}
.ml-feature .ml-media{background:#0b2447}.ml-media img{width:100%;height:100%;object-fit:cover}
.ml-content{padding:2rem;position:relative;z-index:2}
.ml-card span{display:block;margin-bottom:.7rem;color:#a04100;font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.ml-card h3{margin:0 0 .85rem;color:#000f27;font-size:clamp(1.55rem,2.4vw,2.45rem);line-height:1.05;font-weight:900;letter-spacing:-.05em}
.ml-card p{margin:0;color:#44474e;line-height:1.78}
.ml-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}.ml-tags b{padding:.48rem .7rem;border-radius:999px;background:#f2f4f6;color:#000f27;font-family:"JetBrains Mono",monospace;font-size:.65rem;text-transform:uppercase}
.ml-compact{grid-column:span 5;padding:1.8rem;display:flex;flex-direction:column;justify-content:center;min-height:260px}
.ml-icon{width:56px;height:56px;border-radius:1rem;background:#0b2447;color:#ffb693;display:grid;place-items:center;margin-bottom:1.1rem}.ml-icon .material-symbols-outlined{font-size:2rem;font-variation-settings:"FILL" 1}
.ml-dark{grid-column:span 7;min-height:360px;background:#000f27;display:flex;align-items:flex-end}
.ml-dark>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}.ml-dark .ml-content{max-width:680px}.ml-dark span{color:#ffb693}.ml-dark h3,.ml-dark p{color:#fff}.ml-dark p{color:#d6e3ff}
.ml-process{grid-column:span 5;padding:2rem;background:radial-gradient(circle at 85% 10%,rgba(254,107,0,.12),transparent 28%),linear-gradient(135deg,#fff,#f2f4f6)}
.ml-process ul{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem}.ml-process li{padding:.8rem 1rem;border-radius:.85rem;background:rgba(255,255,255,.76);color:#000f27;font-weight:700}.ml-process li:before{content:"✓";color:#fe6b00;margin-right:.5rem;font-weight:900}
.ml-cta{padding:clamp(4.5rem,7vw,6rem) 0;background:#fff;border-top:1px solid rgba(15,23,42,.1);text-align:center}
.ml-cta h2{margin:0 auto 1rem;max-width:780px;color:#000f27;font-size:clamp(2.4rem,4.8vw,4rem);line-height:1;font-weight:900;letter-spacing:-.05em}
.ml-cta p{max-width:720px;margin:0 auto 2rem;color:#44474e;line-height:1.75}.ml-cta a{display:inline-flex;padding:1rem 1.5rem;border-radius:.7rem;background:#fe6b00;color:#fff;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:.78rem;font-weight:900;text-transform:uppercase}
@media(max-width:1024px){.ml-hero-grid,.ml-intro{grid-template-columns:1fr}.ml-feature,.ml-compact,.ml-dark,.ml-process{grid-column:span 12}.ml-hero-panel{max-width:520px}.ml-panel-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.ml-hero-grid{padding-top:4.5rem;padding-bottom:4.5rem}.ml-hero h1{font-size:clamp(2.6rem,13vw,3.7rem)}.ml-panel-grid{grid-template-columns:1fr}.ml-quick{display:grid;grid-template-columns:1fr 1fr}.ml-quick a{text-align:center}.ml-intro{padding-top:4rem}.ml-card{border-radius:1rem}.ml-feature{grid-template-rows:220px auto}.ml-content,.ml-compact,.ml-process{padding:1.4rem}}
@media(max-width:480px){.ml-quick{grid-template-columns:1fr}.ml-actions a{width:100%}}
/* =========================================================
Cards tipo sección: imagen + descripción alternada
========================================================= */
.ml-cards {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1.75rem !important;
}
.section-card {
position: relative;
display: grid;
grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
min-height: 360px;
overflow: hidden;
border-radius: 1.25rem;
border: 1px solid rgba(15, 23, 42, .10);
background: #ffffff;
box-shadow:
0 18px 42px rgba(0, 15, 39, .075),
0 4px 12px rgba(0, 15, 39, .04);
transition:
transform 240ms ease,
box-shadow 240ms ease,
border-color 240ms ease;
}
.section-card:hover {
transform: translateY(-5px);
border-color: rgba(254, 107, 0, .32);
box-shadow:
0 28px 64px rgba(0, 15, 39, .14),
0 8px 20px rgba(0, 15, 39, .06);
}
.section-card-reverse {
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}
.section-card-reverse .section-card-media {
order: 2;
}
.section-card-reverse .section-card-content {
order: 1;
}
.section-card-link {
position: absolute;
inset: 0;
z-index: 8;
}
.section-card-media {
position: relative;
min-height: 100%;
overflow: hidden;
background:
radial-gradient(circle at 20% 20%, rgba(254, 107, 0, .18), transparent 35%),
linear-gradient(135deg, #000f27, #0b2447);
}
.section-card-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(135deg, rgba(0, 15, 39, .12), transparent 55%),
linear-gradient(0deg, rgba(0, 15, 39, .18), transparent 45%);
}
.section-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 850ms ease,
filter 850ms ease;
}
.section-card:hover .section-card-media img {
transform: scale(1.055);
filter: saturate(1.08) contrast(1.04);
}
.section-card-content {
position: relative;
z-index: 2;
padding: clamp(2rem, 4vw, 3rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.section-card-content::before {
content: "";
position: absolute;
inset: 0;
opacity: .045;
pointer-events: none;
background-image:
linear-gradient(rgba(0,15,39,.55) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,15,39,.55) 1px, transparent 1px);
background-size: 44px 44px;
}
.section-card-content > * {
position: relative;
z-index: 1;
}
.section-card-content span {
display: block;
margin-bottom: .7rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .74rem;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.section-card-content h3 {
margin: 0 0 1rem;
max-width: 680px;
color: #000f27;
font-size: clamp(2rem, 4vw, 3.55rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.06em;
}
.section-card-content p {
max-width: 700px;
margin: 0;
color: #44474e;
font-size: 1.08rem;
line-height: 1.78;
}
.section-card-tags {
display: flex;
flex-wrap: wrap;
gap: .65rem;
margin-top: 1.6rem;
}
.section-card-tags b {
padding: .5rem .75rem;
border-radius: 999px;
background: #f2f4f6;
color: #000f27;
font-family: "JetBrains Mono", monospace;
font-size: .68rem;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
.section-card-action {
display: inline-flex;
align-items: center;
gap: .4rem;
width: fit-content;
margin-top: 2rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .76rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.section-card-action .material-symbols-outlined {
font-size: 1.1rem;
}
@media (max-width: 1024px) {
.section-card,
.section-card-reverse {
grid-template-columns: 1fr;
}
.section-card-reverse .section-card-media,
.section-card-reverse .section-card-content {
order: initial;
}
.section-card-media {
min-height: 300px;
}
}
@media (max-width: 768px) {
.ml-cards {
gap: 1.2rem !important;
}
.section-card {
min-height: auto;
border-radius: 1rem;
}
.section-card-media {
min-height: 220px;
}
.section-card-content {
padding: 1.45rem;
}
.section-card-content h3 {
font-size: clamp(1.75rem, 9vw, 2.4rem);
}
.section-card-content p {
font-size: 1rem;
}
}
/* =========================================================
Hero estilo Aplicaciones + mejora tipográfica
========================================================= */
.app-style-hero {
isolation: isolate;
}
.app-style-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .14;
background-image:
linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: linear-gradient(to right, rgba(0,0,0,.75), transparent 76%);
}
.app-style-hero > .relative {
position: relative;
z-index: 2;
}
.app-hero-quick {
margin-top: .2rem;
}
/* Mejora tipográfica de contenido */
.section-card-content h3 {
font-size: clamp(2.15rem, 4.2vw, 3.8rem) !important;
line-height: .95 !important;
letter-spacing: -.065em !important;
}
.section-card-content p {
font-size: clamp(1rem, 1.15vw, 1.15rem);
line-height: 1.82;
color: #3f444b;
}
.section-card-content span {
font-size: .76rem;
}
.section-card-tags b {
font-size: .68rem;
}
/* Introducción de sección */
.ml-intro h2 {
font-size: clamp(2.6rem, 5vw, 4.6rem) !important;
letter-spacing: -.065em !important;
}
.ml-intro p {
font-size: clamp(1.02rem, 1.2vw, 1.16rem);
line-height: 1.82;
}
/* Mejor balance en cards tipo sección */
.section-card {
min-height: 390px;
}
.section-card-content {
padding: clamp(2.15rem, 4vw, 3.35rem);
}
@media (max-width: 1024px) {
.section-card {
min-height: auto;
}
}
@media (max-width: 768px) {
.section-card-content h3 {
font-size: clamp(1.8rem, 10vw, 2.55rem) !important;
}
.section-card-content {
padding: 1.55rem;
}
}
/* =========================================================
Layout referencia Mantenimiento para aplicaciones individuales
========================================================= */
.maintenance-reference-page {
background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 48%, #f2f4f6 100%);
overflow: hidden;
}
.maintenance-ref-hero {
position: relative;
overflow: hidden;
background: #000f27;
color: #ffffff;
}
.maintenance-ref-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.maintenance-ref-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .22;
}
.maintenance-ref-bg div {
position: absolute;
inset: 0;
background: linear-gradient(90deg, #0b2447 0%, rgba(11,36,71,.92) 50%, rgba(11,36,71,.58));
}
.maintenance-ref-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .12;
background-image:
linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: linear-gradient(to right, #000, transparent 82%);
}
.maintenance-ref-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
padding-top: clamp(5.5rem, 8vw, 7.5rem);
padding-bottom: clamp(5.5rem, 8vw, 7.5rem);
}
.maintenance-ref-copy {
display: flex;
flex-direction: column;
gap: 1.55rem;
max-width: 780px;
}
.maintenance-ref-copy span,
.maintenance-ref-heading span,
.maintenance-ref-feature-content span,
.maintenance-ref-card span {
color: #ffb693;
font-family: "JetBrains Mono", monospace;
font-size: .78rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.maintenance-ref-copy h1 {
margin: 0;
color: #ffffff;
font-size: clamp(3.1rem, 6vw, 5.7rem);
line-height: .94;
font-weight: 900;
letter-spacing: -.07em;
}
.maintenance-ref-copy p {
margin: 0;
max-width: 700px;
color: #d6e3ff;
font-size: 1.16rem;
line-height: 1.78;
}
.maintenance-ref-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.maintenance-ref-actions a,
.maintenance-ref-cta a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 1rem 1.45rem;
border-radius: .7rem;
text-decoration: none;
font-family: "JetBrains Mono", monospace;
font-size: .78rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.maintenance-ref-actions a:first-child,
.maintenance-ref-cta a {
background: #fe6b00;
color: #ffffff;
box-shadow: 0 16px 32px rgba(254,107,0,.24);
}
.maintenance-ref-actions a:last-child {
border: 1px solid rgba(255,255,255,.35);
color: #ffffff;
}
.maintenance-ref-card {
position: relative;
overflow: hidden;
min-height: 430px;
border-radius: 1.35rem;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 28px 70px rgba(0,15,39,.28);
background: #0b2447;
}
.maintenance-ref-card img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .9;
}
.maintenance-ref-card div {
position: absolute;
left: 1rem;
right: 1rem;
bottom: 1rem;
padding: 1rem;
border-radius: .9rem;
background: rgba(0,15,39,.66);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.08);
}
.maintenance-ref-card strong {
display: block;
margin-top: .35rem;
color: #ffffff;
font-size: 1.35rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.04em;
}
.maintenance-ref-overview {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 2rem;
align-items: end;
padding-top: clamp(5rem, 8vw, 7rem);
padding-bottom: 2.5rem;
}
.maintenance-ref-heading h2 {
margin: .75rem 0 0;
color: #000f27;
font-size: clamp(2.3rem, 4.8vw, 4.1rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.065em;
}
.maintenance-ref-overview > p {
margin: 0;
color: #44474e;
font-size: 1.08rem;
line-height: 1.82;
}
.maintenance-ref-content {
padding-bottom: clamp(5rem, 8vw, 7rem);
}
.maintenance-ref-feature {
display: grid;
grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
overflow: hidden;
border-radius: 1.25rem;
border: 1px solid rgba(15,23,42,.10);
background: #ffffff;
box-shadow: 0 18px 42px rgba(0,15,39,.075), 0 4px 12px rgba(0,15,39,.04);
margin-bottom: 1.5rem;
}
.maintenance-ref-feature-media {
min-height: 360px;
background: #0b2447;
}
.maintenance-ref-feature-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.maintenance-ref-feature-content {
padding: clamp(2rem, 4vw, 3rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.maintenance-ref-feature-content h2 {
margin: 0 0 1rem;
color: #000f27;
font-size: clamp(2rem, 4vw, 3.45rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.065em;
}
.maintenance-ref-feature-content p {
color: #44474e;
font-size: 1.08rem;
line-height: 1.82;
}
.maintenance-ref-tags {
display: flex;
flex-wrap: wrap;
gap: .65rem;
margin-top: 1.5rem;
}
.maintenance-ref-tags b {
padding: .5rem .75rem;
border-radius: 999px;
background: #f2f4f6;
color: #000f27;
font-family: "JetBrains Mono", monospace;
font-size: .68rem;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
.maintenance-ref-grid-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.35rem;
}
.maintenance-ref-grid-cards article {
padding: 1.65rem;
border-radius: 1.15rem;
border: 1px solid rgba(15,23,42,.10);
background: #ffffff;
box-shadow: 0 16px 40px rgba(0,15,39,.07), 0 4px 12px rgba(0,15,39,.04);
}
.maintenance-ref-grid-cards article > span {
width: 54px;
height: 54px;
display: grid;
place-items: center;
margin-bottom: 1.25rem;
border-radius: .95rem;
background: #0b2447;
color: #ffb693;
font-size: 2rem;
font-variation-settings: "FILL" 1;
}
.maintenance-ref-grid-cards h2 {
margin: 0 0 1rem;
color: #000f27;
font-size: 1.45rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.045em;
}
.maintenance-ref-grid-cards ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: .75rem;
}
.maintenance-ref-grid-cards li {
display: flex;
align-items: flex-start;
gap: .55rem;
color: #44474e;
line-height: 1.55;
}
.maintenance-ref-grid-cards li .material-symbols-outlined {
color: #fe6b00;
font-size: 1.1rem;
line-height: 1.3;
font-variation-settings: "FILL" 1;
}
.maintenance-ref-cta {
padding: clamp(4.5rem, 7vw, 6rem) 0;
background: #ffffff;
border-top: 1px solid rgba(15,23,42,.10);
text-align: center;
}
.maintenance-ref-cta h2 {
max-width: 800px;
margin: 0 auto 1rem;
color: #000f27;
font-size: clamp(2.2rem, 4.6vw, 3.8rem);
line-height: 1;
font-weight: 900;
letter-spacing: -.06em;
}
.maintenance-ref-cta p {
max-width: 720px;
margin: 0 auto 2rem;
color: #44474e;
line-height: 1.75;
}
@media (max-width: 1024px) {
.maintenance-ref-grid,
.maintenance-ref-overview,
.maintenance-ref-feature,
.maintenance-ref-grid-cards {
grid-template-columns: 1fr;
}
.maintenance-ref-card {
min-height: 320px;
}
}
@media (max-width: 768px) {
.maintenance-ref-copy h1 {
font-size: clamp(2.5rem, 13vw, 3.7rem);
}
.maintenance-ref-actions a {
width: 100%;
}
.maintenance-ref-card,
.maintenance-ref-feature {
border-radius: 1rem;
}
.maintenance-ref-card,
.maintenance-ref-feature-media {
min-height: 240px;
}
.maintenance-ref-feature-content,
.maintenance-ref-grid-cards article {
padding: 1.45rem;
}
}
/* =========================================================
Menú móvil global
========================================================= */
.mobile-menu-panel {
display: none;
width: 100%;
background:
radial-gradient(circle at 12% 12%, rgba(254,107,0,.12), transparent 32%),
linear-gradient(135deg, #000f27, #0b2447);
border-top: 1px solid rgba(255,255,255,.10);
box-shadow: 0 22px 44px rgba(0,15,39,.28);
}
.mobile-menu-panel.is-open {
display: block;
}
.mobile-menu-content {
display: grid;
gap: .35rem;
padding: 1rem 1rem 1.25rem;
}
.mobile-menu-content a {
display: flex;
align-items: center;
min-height: 48px;
padding: .85rem 1rem;
border-radius: .75rem;
color: #ffffff;
text-decoration: none;
font-weight: 800;
letter-spacing: -.015em;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
}
.mobile-menu-content a:hover {
background: rgba(254,107,0,.22);
}
.mobile-menu-content .mobile-menu-cta {
margin-top: .5rem;
justify-content: center;
background: #fe6b00;
border-color: #fe6b00;
color: #ffffff;
font-family: "JetBrains Mono", monospace;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
}
body.mobile-menu-open {
overflow-x: hidden;
}
@media (min-width: 768px) {
.mobile-menu-panel {
display: none !important;
}
}
/* =========================================================
Icono WhatsApp unificado
========================================================= */
.fa-whatsapp {
font-size: 1.15em;
line-height: 1;
}
/* =========================================================
WhatsApp flotante verde - fallback SVG
========================================================= */
.floating-whatsapp-fixed,
a.floating-whatsapp-fixed {
position: fixed !important;
right: 22px !important;
bottom: 22px !important;
z-index: 9999 !important;
width: 58px !important;
height: 58px !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
background: #25D366 !important;
color: #ffffff !important;
text-decoration: none !important;
box-shadow: 0 16px 34px rgba(37, 211, 102, .36), 0 6px 14px rgba(0, 15, 39, .18) !important;
transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease !important;
}
.floating-whatsapp-fixed:hover {
transform: translateY(-3px) scale(1.04) !important;
background: #20bd5a !important;
box-shadow: 0 20px 42px rgba(37, 211, 102, .44), 0 8px 18px rgba(0, 15, 39, .2) !important;
}
.floating-whatsapp-fixed .floating-whatsapp-icon,
.floating-whatsapp-fixed svg {
width: 34px !important;
height: 34px !important;
display: block !important;
fill: currentColor !important;
}
@media (max-width: 768px) {
.floating-whatsapp-fixed,
a.floating-whatsapp-fixed {
right: 16px !important;
bottom: 16px !important;
width: 54px !important;
height: 54px !important;
}
.floating-whatsapp-fixed .floating-whatsapp-icon,
.floating-whatsapp-fixed svg {
width: 31px !important;
height: 31px !important;
}
}
/* =========================================================
Botón flotante WhatsApp - mismo diseño página inicio
========================================================= */
.floating-whatsapp-home {
position: fixed !important;
right: 2rem !important;
bottom: 2rem !important;
background: #25D366 !important;
color: #ffffff !important;
padding: 1rem !important;
border-radius: 999px !important;
box-shadow: 0 10px 25px rgba(0,0,0,.18) !important;
z-index: 50 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform .3s ease !important;
text-decoration: none !important;
}
.floating-whatsapp-home:hover {
transform: scale(1.1) !important;
}
.floating-whatsapp-home svg {
width: 28px !important;
height: 28px !important;
display: block !important;
fill: currentColor !important;
}
/* Dropdowns / mega menú siempre encima */
.mega-menu,
.dropdown-menu,
.mobile-menu,
nav [class*="dropdown"],
nav [class*="mega"] {
z-index: 10000 !important;
}
/* =========================================================
Header / menú por encima del Hero
========================================================= */
#main-nav-wrapper,
#main-nav-wrapper > *,
#header-container,
#header-container > *,
header,
nav {
position: relative;
z-index: 9999 !important;
}
#main-nav-wrapper {
isolation: isolate;
}
.cat-item-desc-carousel,
.hero,
.hero-section,
.main-carousel,
section[class*="hero"],
section[class*="carousel"] {
position: relative;
z-index: 1 !important;
}
/* =========================================================
Global navigation stacking fix
========================================================= */
#main-nav-wrapper,
#header-container,
.header,
header {
position: sticky;
top: 0;
z-index: 99999;
}
.group > div[class*="absolute"],
.mega-menu,
.dropdown-menu,
#mobile-menu,
.mobile-nav {
z-index: 100000 !important;
}
.comm-cat-page .relative.bg-primary-container,
.comm-cat-page .comm-cat-clean-hero-grid,
.comm-cat-page .comm-cat-hero-image-panel,
.cat-item-desc-page .cat-item-desc-carousel {
position: relative;
z-index: 1;
}
/* =========================================================
Tailwind migration - Phase 1
========================================================= */
.comm-py-24{padding-top:2.4rem;padding-bottom:2.4rem}
.comm-py-20{padding-top:2rem;padding-bottom:2rem}
.comm-py-16{padding-top:1.6rem;padding-bottom:1.6rem}
.comm-px-mobile{padding-left:16px;padding-right:16px}
.comm-px-desktop{padding-left:64px;padding-right:64px}
.comm-container-max{max-width:1280px}
.comm-mx-auto{margin-left:auto;margin-right:auto}
.comm-w-full{width:100%}
.comm-gap-4{gap:1rem}
.comm-gap-6{gap:1.5rem}
.comm-gap-8{gap:2rem}
@media (max-width:768px){
.comm-px-desktop{padding-left:16px;padding-right:16px}
.comm-py-24{padding-top:3rem;padding-bottom:3rem}
.comm-py-20{padding-top:2.2rem;padding-bottom:2.2rem}
.comm-py-16{padding-top:1.5rem;padding-bottom:1.5rem}
}
/* =========================================================
Tailwind migration - Phase 2: Typography
========================================================= */
.comm-font-bold{font-weight:700}
.comm-font-semibold{font-weight:600}
.comm-font-extrabold{font-weight:800}
.comm-font-black{font-weight:900}
.comm-text-white{color:#ffffff}
.comm-text-primary{color:#000f27}
.comm-text-secondary{color:#a04100}
.comm-text-on-surface{color:#191c1e}
.comm-text-on-surface-variant{color:#44474e}
.comm-text-on-primary{color:#ffffff}
.comm-text-on-primary-container{color:#d6e3ff}
.comm-text-on-secondary{color:#ffffff}
.comm-text-center{text-align:center}
.comm-text-left{text-align:left}
.comm-text-right{text-align:right}
.comm-leading-tight{line-height:1.1}
.comm-leading-snug{line-height:1.25}
.comm-leading-normal{line-height:1.5}
.comm-leading-relaxed{line-height:1.75}
.comm-uppercase{text-transform:uppercase}
.comm-tracking-wide{letter-spacing:.025em}
.comm-tracking-wider{letter-spacing:.05em}
.comm-tracking-tight{letter-spacing:-.025em}
.comm-font-body-md,
.comm-font-body-sm,
.comm-font-body-lg,
.comm-font-headline-md,
.comm-font-headline-sm{font-family:"Hanken Grotesk",system-ui,sans-serif}
.comm-font-label-caps{font-family:"JetBrains Mono",ui-monospace,monospace}
.comm-text-body-sm{font-size:14px;line-height:18px}
.comm-text-body-md{font-size:16px;line-height:21px;margin:10px 0px 10px}
.comm-text-body-lg{font-size:18px;line-height:24px}
.comm-text-headline-sm{font-size:20px;line-height:27px}
.comm-text-headline-md{font-size:28px;line-height:35px;margin:10px 0px 10px}
.comm-text-label-caps{font-size:12px;line-height:16px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
/* =========================================================
Tailwind migration - Phase 3: Layout safe
========================================================= */
.comm-block{display:block}.comm-inline-block{display:inline-block}.comm-hidden{display:none}.comm-flex{display:flex}.comm-inline-flex{display:inline-flex}.comm-grid{display:grid}
.comm-items-start{align-items:flex-start}.comm-items-center{align-items:center}.comm-items-end{align-items:flex-end}.comm-items-stretch{align-items:stretch}
.comm-justify-start{justify-content:flex-start}.comm-justify-center{justify-content:center}.comm-justify-end{justify-content:flex-end}.comm-justify-between{justify-content:space-between}
.comm-flex-col{flex-direction:column}.comm-flex-row{flex-direction:row}.comm-flex-wrap{flex-wrap:wrap}.comm-flex-nowrap{flex-wrap:nowrap}.comm-flex-grow{flex-grow:1}.comm-flex-shrink-0{flex-shrink:0}
.comm-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.comm-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.comm-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.comm-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:640px){.comm-sm-block{display:block}.comm-sm-hidden{display:none}}
@media (min-width:768px){.comm-md-block{display:block}.comm-md-hidden{display:none}.comm-md-flex{display:flex}.comm-md-grid{display:grid}.comm-md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.comm-md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.comm-lg-block{display:block}.comm-lg-hidden{display:none}.comm-lg-flex{display:flex}.comm-lg-grid{display:grid}.comm-lg-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.comm-lg-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.comm-lg-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* =========================================================
Hero Tailwind Independence Layer
========================================================= */
.hero,
.hero-section,
.comm-cat-hero,
.cat-item-desc-carousel,
.nosotros-hero{
position:relative;
width:100%;
overflow:hidden;
}
.hero .flex,
.hero-section .flex,
.comm-cat-hero .flex,
.cat-item-desc-carousel .flex,
.nosotros-hero .flex{
display:flex;
}
.hero .grid,
.hero-section .grid,
.comm-cat-hero .grid,
.cat-item-desc-carousel .grid,
.nosotros-hero .grid{
display:grid;
}
.hero .items-center,
.hero-section .items-center,
.comm-cat-hero .items-center,
.cat-item-desc-carousel .items-center,
.nosotros-hero .items-center{
align-items:center;
}
.hero .justify-center,
.hero-section .justify-center,
.comm-cat-hero .justify-center,
.cat-item-desc-carousel .justify-center,
.nosotros-hero .justify-center{
justify-content:center;
}
.hero .justify-between,
.hero-section .justify-between,
.comm-cat-hero .justify-between,
.cat-item-desc-carousel .justify-between,
.nosotros-hero .justify-between{
justify-content:space-between;
}
.hero .w-full,
.hero-section .w-full,
.comm-cat-hero .w-full,
.cat-item-desc-carousel .w-full,
.nosotros-hero .w-full{
width:100%;
}
.hero .h-full,
.hero-section .h-full,
.comm-cat-hero .h-full,
.cat-item-desc-carousel .h-full,
.nosotros-hero .h-full{
height:100%;
}
.hero .absolute,
.hero-section .absolute,
.comm-cat-hero .absolute,
.cat-item-desc-carousel .absolute,
.nosotros-hero .absolute{
position:absolute;
}
.hero .relative,
.hero-section .relative,
.comm-cat-hero .relative,
.cat-item-desc-carousel .relative,
.nosotros-hero .relative{
position:relative;
}
.hero .inset-0,
.hero-section .inset-0,
.comm-cat-hero .inset-0,
.cat-item-desc-carousel .inset-0,
.nosotros-hero .inset-0{
inset:0;
}
.hero .mx-auto,
.hero-section .mx-auto,
.comm-cat-hero .mx-auto,
.cat-item-desc-carousel .mx-auto,
.nosotros-hero .mx-auto{
margin-left:auto;
margin-right:auto;
}
.hero .max-w-container-max,
.hero-section .max-w-container-max,
.comm-cat-hero .max-w-container-max,
.cat-item-desc-carousel .max-w-container-max,
.nosotros-hero .max-w-container-max{
max-width:1280px;
}
.hero .px-margin-mobile,
.hero-section .px-margin-mobile,
.comm-cat-hero .px-margin-mobile,
.cat-item-desc-carousel .px-margin-mobile,
.nosotros-hero .px-margin-mobile{
padding-left:16px;
padding-right:16px;
}
@media (min-width:768px){
.hero .md\:px-margin-desktop,
.hero-section .md\:px-margin-desktop,
.comm-cat-hero .md\:px-margin-desktop,
.cat-item-desc-carousel .md\:px-margin-desktop,
.nosotros-hero .md\:px-margin-desktop{
padding-left:64px;
padding-right:64px;
}
.hero .md\:grid-cols-2,
.hero-section .md\:grid-cols-2,
.comm-cat-hero .md\:grid-cols-2,
.cat-item-desc-carousel .md\:grid-cols-2,
.nosotros-hero .md\:grid-cols-2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hero .md\:flex,
.hero-section .md\:flex,
.comm-cat-hero .md\:flex,
.cat-item-desc-carousel .md\:flex,
.nosotros-hero .md\:flex{
display:flex;
}
.hero .md\:block,
.hero-section .md\:block,
.comm-cat-hero .md\:block,
.cat-item-desc-carousel .md\:block,
.nosotros-hero .md\:block{
display:block;
}
}
.hero .text-white,
.hero-section .text-white,
.comm-cat-hero .text-white,
.cat-item-desc-carousel .text-white,
.nosotros-hero .text-white,
.hero .text-on-primary,
.hero-section .text-on-primary,
.comm-cat-hero .text-on-primary,
.cat-item-desc-carousel .text-on-primary,
.nosotros-hero .text-on-primary{
color:#fff;
}
.hero .text-center,
.hero-section .text-center,
.comm-cat-hero .text-center,
.cat-item-desc-carousel .text-center,
.nosotros-hero .text-center{
text-align:center;
}
.hero .font-bold,
.hero-section .font-bold,
.comm-cat-hero .font-bold,
.cat-item-desc-carousel .font-bold,
.nosotros-hero .font-bold{
font-weight:700;
}
.hero .leading-tight,
.hero-section .leading-tight,
.comm-cat-hero .leading-tight,
.cat-item-desc-carousel .leading-tight,
.nosotros-hero .leading-tight{
line-height:1.1;
}
/* =========================================================
Header sticky + Products mega menu fix
========================================================= */
#main-nav-wrapper {
position: sticky;
top: 0;
z-index: 99999;
}
#main-nav-wrapper header,
#header-container {
position: relative;
z-index: 99999;
}
.header-products-mega {
position: absolute;
left: 50%;
top: 100%;
width: min(860px, calc(100vw - 32px));
transform: translateX(-50%);
z-index: 60;
}
.header-products-mega.comm-grid,
.header-products-mega.grid {
display: grid;
}
.header-products-mega.comm-grid-cols-3,
.header-products-mega.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.header-products-mega.comm-gap-8,
.header-products-mega.gap-8 {
gap: 2rem;
}
@media (max-width: 1024px) {
.header-products-mega {
left: auto;
right: 0;
transform: none;
width: min(760px, calc(100vw - 32px));
}
}
/* =========================================================
Header CTA visibility fix
Corrige comm-hidden + sm:flex sin tocar layout general.
========================================================= */
@media (min-width: 640px) {
#main-nav-wrapper .sm\:flex,
#header-container .sm\:flex,
header .sm\:flex {
display: flex !important;
}
#main-nav-wrapper .sm\:inline-block,
#header-container .sm\:inline-block,
header .sm\:inline-block {
display: inline-block !important;
}
}
@media (min-width:1024px){
.lg\:grid-cols-12{
grid-template-columns:repeat(12,minmax(0,1fr)) !important;
}
.lg\:col-span-7{
grid-column:span 7 / span 7 !important;
}
.lg\:col-span-5{
grid-column:span 5 / span 5 !important;
}
}
/* =========================================================
card carousel styles
========================================================= */
.comm-item-card-page-related-section {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
background: linear-gradient(180deg, #ffffff, #f7f9fb);
}
.comm-item-card-overview-section {
padding: 2rem 0;
background:
radial-gradient(circle at 90% 12%, rgba(254,107,0,.08), transparent 26%),
linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
}
.comm-item-card-overview-body {
padding: 0.5rem clamp(0.5rem, 1.0vw, 2rem) 0.5rem;
font-family: "Hanken Grotesk", sans-serif;
font-size: 14px;
}
.comm-item-card-overview-card {
overflow: hidden;
border-radius: 1.35rem;
border: 1px solid rgba(15, 23, 42, .10);
background: #ffffff;
box-shadow:
0 18px 42px rgba(0, 15, 39, .075),
0 4px 12px rgba(0, 15, 39, .04);
}
/* =======================================================*/
.comm-item-card-overview-header {
padding: 1.1rem clamp(1.5rem, 3vw, 2rem) .9rem;
border-bottom: 1px solid rgba(15, 23, 42, .10);
background:
radial-gradient(circle at 85% 10%, rgba(254, 107, 0, .10), transparent 28%),
linear-gradient(135deg, #ffffff, #f2f4f6);
}
.comm-item-card-overview-header span {
display: block;
margin-bottom: .5rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .68rem;
font-weight: 900;
letter-spacing: .105em;
text-transform: uppercase;
}
.comm-item-card-overview-header h2 {
margin: 0 0 .55rem !important;
}
.comm-item-card-overview-header p {
max-width: 760px;
margin: 0;
color: #44474e;
}
/* =======================================================*/
.comm-item-card-s3-cards-carousel{
position:relative;
width:100%;
margin-top:0rem;
}
.comm-item-card-s3-cards-viewport{
overflow:hidden;
width:100%;
}
.comm-item-card-s3-cards-track{
display:flex;
gap:1.5rem;
transition:transform .45s ease;
will-change:transform;
margin-top: 1.0rem;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/* =======================================================*/
.comm-item-card {
position: relative;
flex: 0 0 calc((100% - 2.5rem) / 3);
overflow: hidden;
border-radius: 1.15rem;
border: 1px solid rgba(15,23,42,.10);
background:
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
box-shadow:
0 12px 28px rgba(0,15,39,.07),
0 4px 9px rgba(0,15,39,.04);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.comm-item-card:hover {
transform: translateY(-4px);
border-color: rgba(254,107,0,.32);
box-shadow:
0 18px 40px rgba(0,15,39,.12),
0 6px 14px rgba(0,15,39,.05);
}
.comm-item-card > a {
position: absolute;
inset: 0;
z-index: 5;
}
.comm-item-card img {
width: 100%;
height: 220px;
object-fit: cover;
background: #0b2447;
transition: transform 650ms ease, filter 650ms ease;
}
.comm-item-card:hover img {
transform: scale(1.045);
filter: saturate(1.05) contrast(1.03);
transition: transform 650ms ease, filter 650ms ease;
}
.comm-item-card div {
padding: 1.35rem;
}
.comm-item-card span {
display: block;
margin-bottom: .55rem;
color: #a04100;
font-family: "JetBrains Mono", monospace;
font-size: .68rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.comm-item-card h3 {
color: #000f27;
font-size: 20px;
font-weight: 800;
margin: 0.5rem 0;
}
.comm-item-card p {
color: #44474e;
font-size: 14px;
line-height: 1.6;
margin-bottom: 1rem;
}
.comm-item-card ul {
margin: 0 0 1.25rem 0;
padding-left: 1rem;
color: #44474e;
font-size: 13px;
line-height: 1.7;
}
.comm-item-card li::marker {
color: #fe6b00;
}
.comm-item-card a {
color: #a04100;
font-weight: 800;
font-size: 14px;
display: flex;
align-items: center;
gap: 0.25rem;
}
.comm-item-card a .material-symbols-outlined {
font-size: 16px;
}
/* =======================================================*/
.comm-item-card-s3-cards-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border:none;
border-radius:999px;
background:#111827;
color:#fff;
cursor:pointer;
z-index:5;
display:flex;
align-items:center;
justify-content:center;
}
.comm-item-card-s3-cards-prev{
left:-10px;
}
.comm-item-card-s3-cards-next{
right:-10px;
}
.comm-item-card-s3-cards-arrow:disabled{
opacity:.4;
cursor:not-allowed;
}
/* =======================================================*/
@media (max-width: 1024px) {
.comm-item-card {
flex-basis: calc((100% - 1.25rem) / 2);
}
}
@media (max-width: 768px) {
.comm-item-card-overview-card {
border-radius: 1rem;
}
.comm-item-card {
flex-basis: 100%;
width: 100%;
}
.comm-item-card img {
height: 180px;
}
}