/*
=================================================================
DAJ AUTOMATIZACIÓN E INGENIERÍA — Estilos Principales
Versión 2.0 — Estética Porsche / Editorial Premium
css/styles.css
ÍNDICE
──────────────────────────────────────────────────────────────
1. Variables CSS ← EMPIEZA AQUÍ para cambiar paleta/fuentes
2. Reset y Base
3. Tipografía global
4. Contenedor y utilidades
5. Header / Navegación (transparente → sólido en scroll)
6. Botones (estilo Porsche minimal)
7. Sección Hero (100 vh, video/imagen de fondo)
8. Sección Split (imagen ½ + texto ½)
9. Secciones genéricas (claro / oscuro)
10. Lista numerada estilo editorial
11. Página Inicio — bloques específicos
12. Página Nosotros
13. Página Servicios
14. Página Industrias
15. Página Tecnologías
16. Página Capacitación
17. Página Proyectos
18. Página Contacto
19. Footer
20. Botón flotante WhatsApp
21. Animaciones y scroll
22. Media Queries — Responsive
=================================================================
*/
/* =============================================
1. VARIABLES CSS
─────────────────────────────────────────────
Para cambiar toda la paleta, edita solo
las variables de la paleta ACTIVA.
Para activar Ferrari: copia sus valores sobre
los de Porsche y comenta el bloque Porsche.
============================================= */
:root {
/* === PALETA PORSCHE (activa) ===
Inspiración: porsche.com — blanco puro, negro
profundo y rojo D5001C como acento único. */
--color-fondo: #FFFFFF; /* fondo claro principal */
--color-fondo-oscuro: #0E0E12; /* secciones oscuras / hero */
--color-texto: #0A0A0A; /* texto sobre fondo claro */
--color-texto-claro: #FFFFFF; /* texto sobre fondo oscuro */
--color-acento: #D5001C; /* rojo Porsche — solo CTAs clave */
--color-gris: #6B6B6B; /* texto secundario / descripciones */
--color-linea: #E5E5E5; /* bordes y separadores sutiles */
/* === PALETA FERRARI (alternativa — para activar:
pega estos valores sobre los de Porsche arriba) ===
--color-fondo: #FFFFFF;
--color-fondo-oscuro: #0B0B0B;
--color-texto: #1A1A1A;
--color-texto-claro: #FFFFFF;
--color-acento: #FF2800; rojo Ferrari
--color-secundario: #FFF200; amarillo Ferrari (acento alt.)
--color-gris: #666666;
--color-linea: #E8E8E8;
*/
/* ─── TIPOGRAFÍA ───────────────────────────────────
Para cambiar la fuente de títulos, reemplaza
'Sora' por otra fuente de Google Fonts y actualiza
el en el de cada página HTML.
Para cambiar la fuente de cuerpo, reemplaza 'Inter'.
─────────────────────────────────────────────────── */
--fuente-titulo: 'Sora', sans-serif; /* Titulares — geométrica, moderna */
--fuente-cuerpo: 'Inter', sans-serif; /* Cuerpo y UI */
/* ─── ESCALA TIPOGRÁFICA ─── */
--t-etq: .68rem; /* Etiquetas all-caps */
--t-sm: .875rem; /* 14px */
--t-base: 1rem; /* 16px */
--t-md: 1.125rem; /* 18px */
--t-lg: 1.25rem; /* 20px */
--t-xl: 1.5rem; /* 24px */
--t-2xl: 2rem; /* 32px */
--t-3xl: 2.75rem; /* 44px */
--t-4xl: 3.5rem; /* 56px */
--t-5xl: 5rem; /* 80px */
--t-6xl: 7rem; /* 112px */
/* ─── LAYOUT ─── */
--ancho-max: 1320px; /* Ancho máximo del contenedor */
--padding-cont: 2rem; /* Padding lateral del contenedor */
--nav-alto: 72px; /* Altura de la barra de navegación */
/* ─── ESPACIADO ─── */
--s-1: .5rem;
--s-2: 1rem;
--s-3: 1.5rem;
--s-4: 2rem;
--s-6: 3rem;
--s-8: 4rem;
--s-12: 6rem;
--s-16: 8rem;
--s-20: 10rem;
/* ─── TRANSICIONES ─── */
--trans: .35s cubic-bezier(.4, 0, .2, 1);
--trans-r: .22s ease;
}
/* =============================================
2. RESET Y BASE
============================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--fuente-cuerpo);
font-size: var(--t-base);
font-weight: 300;
color: var(--color-texto);
background: var(--color-fondo);
line-height: 1.75;
overflow-x: hidden;
/* Sin padding-top: el hero tapa el nav transparente */
}
/* Páginas sin hero a pantalla completa */
body.sin-hero {
padding-top: var(--nav-alto);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
}
video {
display: block;
}
/* =============================================
3. TIPOGRAFÍA GLOBAL
============================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fuente-titulo);
font-weight: 300;
line-height: 1.08;
letter-spacing: -.03em;
color: inherit;
}
/* Etiqueta pequeña estilo Porsche: — TEXTO EN MAYÚSCULA */
.etq {
display: inline-flex;
align-items: center;
gap: .65rem;
font-family: var(--fuente-cuerpo);
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--color-acento);
}
.etq::before {
content: '';
display: inline-block;
width: 28px;
height: 1.5px;
background: currentColor;
flex-shrink: 0;
}
/* Etiqueta sobre fondo oscuro */
.etq-claro {
color: rgba(255,255,255,.55);
}
.etq-claro::before {
background: rgba(255,255,255,.35);
}
/* Título nivel 1 — hero */
.t1 {
font-family: var(--fuente-titulo);
font-size: clamp(3rem, 7.5vw, var(--t-6xl));
font-weight: 200;
letter-spacing: -.04em;
line-height: 1.02;
}
/* Título nivel 2 — sección */
.t2 {
font-family: var(--fuente-titulo);
font-size: clamp(2rem, 4.5vw, var(--t-5xl));
font-weight: 300;
letter-spacing: -.035em;
line-height: 1.06;
}
/* Título nivel 3 — subsección */
.t3 {
font-family: var(--fuente-titulo);
font-size: clamp(1.5rem, 3vw, var(--t-3xl));
font-weight: 400;
letter-spacing: -.025em;
line-height: 1.15;
}
/* Subtítulo / descripción */
.sub {
font-size: clamp(var(--t-base), 1.4vw, var(--t-md));
font-weight: 300;
color: var(--color-gris);
line-height: 1.8;
max-width: 560px;
}
/* Subtítulo sobre oscuro */
.sub-claro {
color: rgba(255,255,255,.65);
}
/* Separador rojo */
.sep-rojo {
width: 40px;
height: 2px;
background: var(--color-acento);
margin: var(--s-3) 0;
}
/* Separador sobre oscuro (blanco) */
.sep-blanco {
background: rgba(255,255,255,.35);
}
/* Cita en grande */
.cita-grande {
font-family: var(--fuente-titulo);
font-size: clamp(1.5rem, 3.5vw, 3.25rem);
font-weight: 200;
letter-spacing: -.03em;
line-height: 1.3;
color: var(--color-texto-claro);
}
/* =============================================
4. CONTENEDOR Y UTILIDADES
============================================= */
.contenedor {
max-width: var(--ancho-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--padding-cont);
padding-right: var(--padding-cont);
}
/* Centrado vertical y horizontal */
.flex-centro {
display: flex;
align-items: center;
justify-content: center;
}
/* Grids genéricos */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-4);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-3);
}
/* =============================================
5. HEADER / NAVEGACIÓN
Empieza transparente sobre el hero y se
vuelve sólido blanco al hacer scroll.
La clase "scrolled" la añade js/main.js.
============================================= */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--nav-alto);
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
/* Estado con scroll — fondo blanco */
.header.scrolled {
background: rgba(255, 255, 255, .97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-linea);
box-shadow: 0 1px 20px rgba(0,0,0,.06);
}
/* Nav wrapper */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
/* ── Logo ── */
.nav-logo {
display: flex;
align-items: center;
gap: var(--s-1);
text-decoration: none;
flex-shrink: 0;
}
/* Siglas — cuadrado con acento */
.logo-siglas {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: var(--color-acento);
color: #fff;
font-family: var(--fuente-titulo);
font-weight: 700;
font-size: .65rem;
letter-spacing: .05em;
flex-shrink: 0;
}
.logo-texto {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-nombre {
font-family: var(--fuente-titulo);
font-weight: 700;
font-size: var(--t-md);
letter-spacing: .04em;
/* Blanco sobre hero, oscuro al scrollear */
color: #fff;
transition: color var(--trans);
}
.logo-subtitulo {
font-size: .58rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
transition: color var(--trans);
}
/* Cuando el nav está sólido */
.header.scrolled .logo-nombre { color: var(--color-texto); }
.header.scrolled .logo-subtitulo { color: var(--color-gris); }
/* ── Menú desktop ── */
.nav-menu {
display: flex;
align-items: center;
gap: .1rem;
}
.nav-link {
display: inline-block;
padding: .45rem .85rem;
font-size: var(--t-sm);
font-weight: 400;
color: rgba(255,255,255,.9);
letter-spacing: .02em;
transition: color var(--trans-r), background var(--trans-r);
white-space: nowrap;
border-radius: 2px;
}
.nav-link:hover {
color: #fff;
background: rgba(255,255,255,.1);
}
/* Activo — lo marca js/main.js */
.nav-link.activo {
color: #fff;
border-bottom: 1.5px solid #fff;
}
/* Al hacer scroll — links oscuros */
.header.scrolled .nav-link {
color: var(--color-texto);
}
.header.scrolled .nav-link:hover {
color: var(--color-acento);
background: transparent;
}
.header.scrolled .nav-link.activo {
color: var(--color-acento);
border-bottom-color: var(--color-acento);
}
/* Enlace CTA "Contacto" */
.nav-link-cta {
background: var(--color-acento) !important;
color: #fff !important;
padding: .45rem 1.1rem !important;
letter-spacing: .04em;
font-weight: 600;
}
.nav-link-cta:hover {
background: #b0001a !important;
color: #fff !important;
}
/* ── Botón hamburguesa (móvil) ── */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 22px;
height: 1.5px;
background: #fff;
transition: transform var(--trans), opacity var(--trans), background var(--trans);
transform-origin: center;
}
.header.scrolled .nav-toggle span { background: var(--color-texto); }
.nav-toggle.abierto span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.abierto span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.abierto span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* =============================================
6. BOTONES — Estilo Porsche minimal
============================================= */
.btn {
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .8rem 2rem;
font-family: var(--fuente-cuerpo);
font-size: var(--t-sm);
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--trans-r);
border: 1.5px solid transparent;
white-space: nowrap;
text-decoration: none;
line-height: 1;
}
/* Botón rojo sólido (Porsche) */
.btn-rojo {
background: var(--color-acento);
color: #fff;
border-color: var(--color-acento);
}
.btn-rojo:hover {
background: #b0001a;
border-color: #b0001a;
transform: translateY(-1px);
}
/* Botón blanco sólido (sobre oscuro) */
.btn-blanco {
background: #fff;
color: var(--color-texto);
border-color: #fff;
}
.btn-blanco:hover {
background: var(--color-linea);
border-color: var(--color-linea);
}
/* Botón contorno blanco (sobre oscuro/hero) */
.btn-borde-blanco {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,.6);
}
.btn-borde-blanco:hover {
border-color: #fff;
background: rgba(255,255,255,.07);
}
/* Botón contorno oscuro (sobre claro) */
.btn-borde {
background: transparent;
color: var(--color-texto);
border-color: var(--color-linea);
}
.btn-borde:hover {
border-color: var(--color-texto);
}
/* Botón de texto con flecha */
.btn-texto {
background: none;
border: none;
padding: 0;
color: var(--color-texto);
font-size: var(--t-sm);
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: .5rem;
cursor: pointer;
transition: gap var(--trans-r), color var(--trans-r);
text-decoration: none;
}
.btn-texto:hover { gap: .85rem; color: var(--color-acento); }
.btn-texto-claro {
color: rgba(255,255,255,.8);
}
.btn-texto-claro:hover { color: #fff; }
/* =============================================
7. SECCIÓN HERO — 100 vh con video/imagen
============================================= */
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
display: flex;
align-items: flex-end; /* Contenido alineado abajo */
overflow: hidden;
background: var(--color-fondo-oscuro);
}
/* Video de fondo */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Imagen de fondo (fallback o directa) */
.hero-imagen {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Overlay oscuro sobre video/imagen para legibilidad del texto */
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(14, 14, 18, .85) 0%,
rgba(14, 14, 18, .45) 50%,
rgba(14, 14, 18, .2) 100%
);
z-index: 1;
}
/* Contenido sobre el video */
.hero-contenido {
position: relative;
z-index: 2;
padding-bottom: var(--s-16);
width: 100%;
color: #fff;
}
.hero-inner {
max-width: 780px;
}
.hero-inner .etq {
margin-bottom: var(--s-3);
color: rgba(255,255,255,.55);
}
.hero-inner .etq::before {
background: rgba(255,255,255,.35);
}
.hero-inner .t1 {
color: #fff;
margin-bottom: var(--s-3);
}
.hero-inner .sub {
color: rgba(255,255,255,.7);
margin-bottom: var(--s-6);
max-width: 500px;
}
.hero-botones {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
align-items: center;
}
/* Indicador de scroll */
.hero-scroll {
position: absolute;
bottom: var(--s-6);
right: var(--s-4);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
color: rgba(255,255,255,.5);
font-size: var(--t-etq);
letter-spacing: .15em;
text-transform: uppercase;
}
.hero-scroll-linea {
width: 1px;
height: 40px;
background: rgba(255,255,255,.3);
animation: crecer-linea 1.5s ease-in-out infinite;
}
@keyframes crecer-linea {
0%, 100% { transform: scaleY(.3); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
}
/* =============================================
8. SECCIÓN SPLIT — imagen ½ + texto ½
Uso: dos columnas a pantalla completa.
La imagen ocupa el 55%, el texto el 45%.
============================================= */
.sec-split {
display: grid;
grid-template-columns: 55% 45%;
min-height: 100vh;
}
/* Variante invertida: texto izquierda, imagen derecha */
.sec-split.inv {
grid-template-columns: 45% 55%;
}
/* Contenedor de la imagen */
.split-media {
position: relative;
overflow: hidden;
}
.split-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .8s cubic-bezier(.25, .46, .45, .94);
}
.sec-split:hover .split-media img {
transform: scale(1.03);
}
/* Contenedor del texto */
.split-texto {
display: flex;
align-items: center;
padding: var(--s-16) var(--s-12);
}
/* Variante oscura */
.split-texto.osc {
background: var(--color-fondo-oscuro);
color: var(--color-texto-claro);
}
/* Variante clara */
.split-texto.cla {
background: var(--color-fondo);
color: var(--color-texto);
}
/* Variante gris muy suave */
.split-texto.gris {
background: #F7F7F7;
color: var(--color-texto);
}
.split-texto-inner {
max-width: 480px;
}
.split-texto.osc .sep-rojo { background: rgba(255,255,255,.3); }
/* =============================================
9. SECCIONES GENÉRICAS
============================================= */
/* Sección estándar con padding generoso */
.sec {
padding: var(--s-16) 0;
}
/* Variante más corta */
.sec-md {
padding: var(--s-12) 0;
}
/* Variante pantalla completa */
.sec-pantalla {
min-height: 100vh;
display: flex;
align-items: center;
padding: var(--s-16) 0;
}
/* Fondo oscuro */
.sec-osc {
background: var(--color-fondo-oscuro);
color: var(--color-texto-claro);
}
.sec-osc .sub { color: rgba(255,255,255,.6); }
.sec-osc .t2 { color: #fff; }
.sec-osc .t3 { color: #fff; }
/* Fondo claro (blanco) */
.sec-cla {
background: var(--color-fondo);
color: var(--color-texto);
}
/* Fondo gris suave */
.sec-gris {
background: #F7F7F7;
color: var(--color-texto);
}
/* Cabecera de sección — etiqueta + título + separador */
.sec-cab {
margin-bottom: var(--s-8);
}
.sec-cab .etq { margin-bottom: var(--s-2); }
.sec-cab .t2 { margin-bottom: 0; }
/* Cabecera centrada */
.sec-cab.centrado {
text-align: center;
}
.sec-cab.centrado .sep-rojo,
.sec-cab.centrado .sep-blanco {
margin-left: auto;
margin-right: auto;
}
.sec-cab.centrado .sub {
margin-left: auto;
margin-right: auto;
}
/* Franja fina (separador entre secciones) */
.franja-linea {
border-top: 1px solid var(--color-linea);
}
/* =============================================
10. LISTA NUMERADA ESTILO EDITORIAL
Cada ítem: número pequeño + título + desc
============================================= */
.lista-p {
display: flex;
flex-direction: column;
}
.lista-p-item {
display: grid;
grid-template-columns: 3rem 1fr;
gap: var(--s-4);
padding: var(--s-4) 0;
border-top: 1px solid var(--color-linea);
align-items: start;
transition: background var(--trans-r);
}
.lista-p-item:last-child {
border-bottom: 1px solid var(--color-linea);
}
.lista-p.osc .lista-p-item {
border-color: rgba(255,255,255,.1);
}
.lista-p-num {
font-family: var(--fuente-titulo);
font-size: var(--t-etq);
font-weight: 600;
color: var(--color-acento);
letter-spacing: .1em;
padding-top: .3rem;
}
.lista-p-titulo {
font-family: var(--fuente-titulo);
font-size: clamp(var(--t-lg), 2vw, var(--t-xl));
font-weight: 400;
margin-bottom: .4rem;
letter-spacing: -.02em;
}
.lista-p-desc {
font-size: var(--t-sm);
color: var(--color-gris);
line-height: 1.75;
}
.lista-p.osc .lista-p-titulo { color: #fff; }
.lista-p.osc .lista-p-desc { color: rgba(255,255,255,.55); }
/* Lista de checks (detalle de servicio) */
.lista-checks {
display: flex;
flex-direction: column;
gap: var(--s-2);
margin-top: var(--s-3);
}
.lista-check-item {
display: flex;
align-items: flex-start;
gap: var(--s-2);
font-size: var(--t-sm);
line-height: 1.7;
color: rgba(255,255,255,.7);
}
.lista-check-item::before {
content: '—';
color: var(--color-acento);
flex-shrink: 0;
font-size: var(--t-sm);
margin-top: .05rem;
}
.lista-checks.osc-cla .lista-check-item { color: var(--color-gris); }
.lista-checks.osc-cla .lista-check-item::before { color: var(--color-acento); }
/* =============================================
11. PÁGINA INICIO — bloques específicos
============================================= */
/* Stats / números clave */
.stats-fila {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.stat-item {
padding: var(--s-8) var(--s-6);
border-right: 1px solid rgba(255,255,255,.1);
text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-num {
font-family: var(--fuente-titulo);
font-size: var(--t-4xl);
font-weight: 200;
letter-spacing: -.04em;
color: #fff;
line-height: 1;
margin-bottom: .4rem;
}
.stat-label {
font-size: var(--t-etq);
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
font-weight: 400;
}
/* Franja de logos */
.logos-franja {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-2);
padding: var(--s-6) 0;
}
.logo-badge {
display: inline-flex;
align-items: center;
padding: .5rem 1.1rem;
border: 1px solid var(--color-linea);
font-size: var(--t-sm);
font-weight: 500;
color: var(--color-gris);
letter-spacing: .04em;
transition: all var(--trans-r);
font-family: var(--fuente-titulo);
}
.logo-badge:hover {
border-color: var(--color-texto);
color: var(--color-texto);
}
/* Sección CTA grande */
.sec-cta {
min-height: 80vh;
display: flex;
align-items: center;
background: var(--color-fondo-oscuro);
padding: var(--s-16) 0;
}
.cta-titulo {
font-family: var(--fuente-titulo);
font-size: clamp(2.5rem, 6vw, 6rem);
font-weight: 200;
letter-spacing: -.04em;
line-height: 1.05;
color: #fff;
margin-bottom: var(--s-4);
}
.cta-botones {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-top: var(--s-6);
}
/* =============================================
12. PÁGINA NOSOTROS
============================================= */
/* Cita central */
.sec-cita {
background: var(--color-fondo-oscuro);
min-height: 70vh;
display: flex;
align-items: center;
padding: var(--s-16) 0;
text-align: center;
}
.sec-cita .cita-grande {
max-width: 900px;
margin: 0 auto;
position: relative;
}
.cita-comilla {
display: block;
font-family: var(--fuente-titulo);
font-size: 6rem;
font-weight: 200;
line-height: 1;
color: var(--color-acento);
opacity: .3;
margin-bottom: var(--s-2);
}
/* Tarjeta de valor */
.valor-item {
display: flex;
gap: var(--s-3);
padding: var(--s-4) 0;
border-top: 1px solid var(--color-linea);
align-items: flex-start;
}
.valor-item:last-child { border-bottom: 1px solid var(--color-linea); }
.valor-num {
font-family: var(--fuente-titulo);
font-size: var(--t-etq);
font-weight: 600;
color: var(--color-acento);
letter-spacing: .1em;
padding-top: .25rem;
flex-shrink: 0;
width: 2.5rem;
}
.valor-titulo {
font-family: var(--fuente-titulo);
font-size: var(--t-lg);
font-weight: 400;
margin-bottom: .3rem;
}
.valor-desc {
font-size: var(--t-sm);
color: var(--color-gris);
line-height: 1.75;
}
/* =============================================
13. PÁGINA SERVICIOS
============================================= */
/* Nota de aviso */
.nota-aviso {
display: flex;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
border: 1px solid rgba(255,180,0,.25);
background: rgba(255,180,0,.05);
font-size: var(--t-sm);
color: rgba(255,200,80,.85);
line-height: 1.7;
margin-bottom: var(--s-4);
}
.nota-aviso svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: .1rem;
stroke: rgba(255,200,80,.8);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =============================================
14. PÁGINA INDUSTRIAS
============================================= */
/* Grid de industrias (2x2) */
.industrias-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.ind-card {
position: relative;
min-height: 60vh;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.ind-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.ind-card:hover img { transform: scale(1.05); }
.ind-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(14,14,18,.9) 0%, rgba(14,14,18,.3) 60%, transparent 100%);
transition: background var(--trans);
}
.ind-card:hover .ind-overlay {
background: linear-gradient(to top, rgba(14,14,18,.95) 0%, rgba(14,14,18,.4) 70%, transparent 100%);
}
.ind-cuerpo {
position: relative;
z-index: 1;
padding: var(--s-8) var(--s-6);
width: 100%;
}
.ind-nombre {
font-family: var(--fuente-titulo);
font-size: var(--t-3xl);
font-weight: 300;
color: #fff;
letter-spacing: -.03em;
margin-bottom: .5rem;
}
.ind-desc {
font-size: var(--t-sm);
color: rgba(255,255,255,.7);
line-height: 1.7;
max-width: 380px;
margin-bottom: var(--s-3);
}
.ind-tags {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.ind-tag {
padding: .25rem .75rem;
border: 1px solid rgba(255,255,255,.25);
font-size: .68rem;
font-weight: 500;
color: rgba(255,255,255,.75);
letter-spacing: .07em;
text-transform: uppercase;
transition: border-color var(--trans-r), color var(--trans-r);
}
.ind-card:hover .ind-tag {
border-color: rgba(255,255,255,.5);
color: #fff;
}
/* =============================================
15. PÁGINA TECNOLOGÍAS
============================================= */
.tech-cat-bloque {
padding: var(--s-8) 0;
border-top: 1px solid var(--color-linea);
}
.tech-cat-titulo {
font-family: var(--fuente-titulo);
font-size: var(--t-lg);
font-weight: 400;
color: var(--color-texto);
letter-spacing: -.02em;
margin-bottom: var(--s-4);
display: flex;
align-items: center;
gap: var(--s-2);
}
.tech-cat-titulo svg {
width: 18px;
height: 18px;
stroke: var(--color-acento);
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.tech-marca-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1px;
background: var(--color-linea);
border: 1px solid var(--color-linea);
}
.tech-marca-item {
padding: var(--s-4) var(--s-3);
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-1);
text-align: center;
transition: background var(--trans-r);
}
.tech-marca-item:hover { background: #F7F7F7; }
/* Placeholder del logo — reemplaza este div por 
*/
.tech-logo-ph {
width: 70px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--fuente-titulo);
font-size: .6rem;
font-weight: 700;
color: var(--color-gris);
letter-spacing: .04em;
text-align: center;
line-height: 1.3;
border: 1px dashed var(--color-linea);
}
.tech-marca-nombre {
font-family: var(--fuente-titulo);
font-size: var(--t-sm);
font-weight: 500;
color: var(--color-texto);
}
.tech-marca-rol {
font-size: var(--t-etq);
color: var(--color-gris);
letter-spacing: .06em;
text-transform: uppercase;
}
/* Aviso de no distribución */
.aviso-tech {
display: flex;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
border: 1px solid var(--color-linea);
background: #F7F7F7;
font-size: var(--t-sm);
color: var(--color-gris);
line-height: 1.7;
margin-bottom: var(--s-8);
}
.aviso-tech svg {
width: 16px;
height: 16px;
stroke: var(--color-gris);
fill: none;
flex-shrink: 0;
margin-top: .1rem;
}
/* =============================================
16. PÁGINA CAPACITACIÓN
============================================= */
.cursos-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--color-linea);
margin-bottom: var(--s-8);
overflow-x: auto;
}
.tab-btn {
padding: .85rem 1.75rem;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-family: var(--fuente-cuerpo);
font-size: var(--t-sm);
font-weight: 500;
letter-spacing: .05em;
color: var(--color-gris);
cursor: pointer;
transition: all var(--trans-r);
white-space: nowrap;
}
.tab-btn:hover { color: var(--color-texto); }
.tab-btn.activo {
color: var(--color-texto);
border-bottom-color: var(--color-acento);
}
.cursos-panel { display: none; }
.cursos-panel.activo { display: block; }
/* Grid de cursos */
.cursos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1px;
background: var(--color-linea);
border: 1px solid var(--color-linea);
}
.curso-card {
background: var(--color-fondo);
display: flex;
flex-direction: column;
transition: background var(--trans-r);
}
.curso-card:hover { background: #F7F7F7; }
.curso-cabecera {
padding: var(--s-4);
border-bottom: 1px solid var(--color-linea);
}
.curso-nivel {
display: inline-block;
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--color-acento);
margin-bottom: var(--s-2);
}
.curso-nombre {
font-family: var(--fuente-titulo);
font-size: var(--t-xl);
font-weight: 400;
color: var(--color-texto);
letter-spacing: -.025em;
line-height: 1.2;
}
.curso-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--color-linea);
}
.curso-meta-item {
padding: var(--s-3) var(--s-3);
border-right: 1px solid var(--color-linea);
text-align: center;
}
.curso-meta-item:last-child { border-right: none; }
.curso-meta-label {
display: block;
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--color-gris);
margin-bottom: .3rem;
}
.curso-meta-valor {
font-size: var(--t-sm);
font-weight: 500;
color: var(--color-texto);
}
.curso-cuerpo {
padding: var(--s-4);
flex: 1;
}
.curso-sec-titulo {
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--color-acento);
margin-bottom: var(--s-2);
}
.curso-temario {
display: flex;
flex-direction: column;
gap: .5rem;
}
.curso-tema {
font-size: var(--t-sm);
color: var(--color-gris);
line-height: 1.6;
display: flex;
gap: .6rem;
}
.curso-tema::before {
content: '—';
color: var(--color-acento);
flex-shrink: 0;
}
.curso-pie {
padding: var(--s-3) var(--s-4);
border-top: 1px solid var(--color-linea);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-2);
}
.curso-constancia {
font-size: var(--t-sm);
color: var(--color-gris);
display: flex;
align-items: center;
gap: .4rem;
}
.curso-constancia svg {
width: 13px;
height: 13px;
stroke: var(--color-acento);
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
}
/* =============================================
17. PÁGINA PROYECTOS
============================================= */
.proyectos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1px;
background: var(--color-linea);
border: 1px solid var(--color-linea);
}
.proy-card {
background: var(--color-fondo);
display: flex;
flex-direction: column;
transition: background var(--trans-r);
}
.proy-card:hover { background: #F7F7F7; }
/* Imagen del proyecto — reemplaza por ![]()
*/
.proy-imagen {
height: 200px;
position: relative;
overflow: hidden;
}
.proy-imagen img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.proy-card:hover .proy-imagen img { transform: scale(1.04); }
.proy-industria {
position: absolute;
top: var(--s-2);
right: var(--s-2);
padding: .25rem .75rem;
background: rgba(255,255,255,.92);
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-texto);
}
.proy-cuerpo {
padding: var(--s-4);
display: flex;
flex-direction: column;
gap: var(--s-3);
flex: 1;
}
.proy-nombre {
font-family: var(--fuente-titulo);
font-size: var(--t-xl);
font-weight: 400;
color: var(--color-texto);
letter-spacing: -.025em;
line-height: 1.2;
}
.proy-bloque {
display: flex;
flex-direction: column;
gap: .3rem;
}
.proy-etq {
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--color-acento);
}
.proy-val {
font-size: var(--t-sm);
color: var(--color-gris);
line-height: 1.7;
}
.proy-resultado {
font-size: var(--t-sm);
font-weight: 500;
color: var(--color-texto);
padding: var(--s-2) var(--s-3);
border-left: 2px solid var(--color-acento);
background: #F7F7F7;
line-height: 1.6;
}
.proy-tags {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.proy-tag {
padding: .25rem .7rem;
border: 1px solid var(--color-linea);
font-size: var(--t-etq);
font-weight: 500;
color: var(--color-gris);
letter-spacing: .06em;
text-transform: uppercase;
}
/* =============================================
18. PÁGINA CONTACTO
============================================= */
.contacto-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: var(--s-12);
align-items: start;
}
.form-p {
/* Formulario estilo Porsche — mínimo, sin card */
}
.form-titulo {
font-family: var(--fuente-titulo);
font-size: var(--t-3xl);
font-weight: 300;
letter-spacing: -.03em;
margin-bottom: .4rem;
color: var(--color-texto);
}
.form-subtitulo {
font-size: var(--t-sm);
color: var(--color-gris);
margin-bottom: var(--s-6);
}
.form-grupo {
margin-bottom: var(--s-3);
}
.form-grupo.doble {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
.form-label {
display: block;
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--color-gris);
margin-bottom: .5rem;
}
.form-input,
.form-textarea {
width: 100%;
padding: .85rem 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--color-linea);
color: var(--color-texto);
font-size: var(--t-base);
font-weight: 300;
outline: none;
transition: border-color var(--trans-r);
border-radius: 0;
-webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: rgba(0,0,0,.25);
}
.form-input:focus,
.form-textarea:focus {
border-bottom-color: var(--color-texto);
}
.form-textarea {
min-height: 120px;
resize: none;
}
/* Select estilizado */
select.form-input {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6B6B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .5rem center;
padding-right: 1.5rem;
}
.form-privacidad {
font-size: var(--t-sm);
color: var(--color-gris);
margin-top: var(--s-3);
line-height: 1.6;
}
/* Mensaje de éxito del formulario */
.form-exito {
display: none;
flex-direction: column;
align-items: flex-start;
gap: var(--s-2);
padding: var(--s-6) 0;
}
.form-exito.visible { display: flex; }
.form-exito svg {
width: 56px;
height: 56px;
stroke: var(--color-acento);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.form-exito-titulo {
font-family: var(--fuente-titulo);
font-size: var(--t-3xl);
font-weight: 300;
letter-spacing: -.03em;
color: var(--color-texto);
}
/* Panel de info de contacto */
.info-ct {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
/* WhatsApp prominente */
.wa-ct {
padding: var(--s-6);
background: var(--color-fondo-oscuro);
color: #fff;
}
.wa-ct-titulo {
font-family: var(--fuente-titulo);
font-size: var(--t-2xl);
font-weight: 300;
letter-spacing: -.025em;
margin-bottom: var(--s-1);
color: #fff;
}
.wa-ct-num {
font-family: var(--fuente-titulo);
font-size: var(--t-3xl);
font-weight: 200;
letter-spacing: -.03em;
color: #25d366;
line-height: 1.1;
margin-bottom: var(--s-2);
}
.wa-ct-desc {
font-size: var(--t-sm);
color: rgba(255,255,255,.55);
margin-bottom: var(--s-4);
line-height: 1.7;
}
/* Dato de contacto */
.dato-ct {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) 0;
border-bottom: 1px solid var(--color-linea);
}
.dato-ct:first-of-type { border-top: 1px solid var(--color-linea); }
.dato-ct svg {
width: 18px;
height: 18px;
stroke: var(--color-acento);
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.dato-ct-label {
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--color-gris);
display: block;
margin-bottom: .2rem;
}
.dato-ct-valor {
font-size: var(--t-base);
font-weight: 400;
color: var(--color-texto);
}
.dato-ct-valor a { transition: color var(--trans-r); }
.dato-ct-valor a:hover { color: var(--color-acento); }
/* FAQ */
.faq-item {
padding: var(--s-4) 0;
border-top: 1px solid var(--color-linea);
}
.faq-item:last-child { border-bottom: 1px solid var(--color-linea); }
.faq-preg {
font-family: var(--fuente-titulo);
font-size: var(--t-lg);
font-weight: 400;
color: var(--color-texto);
margin-bottom: .5rem;
letter-spacing: -.02em;
}
.faq-resp {
font-size: var(--t-sm);
color: var(--color-gris);
line-height: 1.75;
}
/* =============================================
19. FOOTER
============================================= */
.footer {
background: var(--color-fondo-oscuro);
padding: var(--s-12) 0 var(--s-6);
color: rgba(255,255,255,.65);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: var(--s-8);
padding-bottom: var(--s-8);
border-bottom: 1px solid rgba(255,255,255,.08);
margin-bottom: var(--s-4);
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--s-1);
margin-bottom: var(--s-3);
}
.footer-logo-nombre {
font-family: var(--fuente-titulo);
font-size: var(--t-md);
font-weight: 700;
letter-spacing: .04em;
color: #fff;
}
.footer-logo-sub {
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
}
.footer-desc {
font-size: var(--t-sm);
line-height: 1.75;
color: rgba(255,255,255,.5);
}
.footer-titulo {
font-size: var(--t-etq);
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: #fff;
margin-bottom: var(--s-3);
}
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col ul li a {
font-size: var(--t-sm);
color: rgba(255,255,255,.5);
transition: color var(--trans-r);
}
.footer-col ul li a:hover { color: #fff; }
.footer-ct-items {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.footer-ct-item {
display: flex;
align-items: center;
gap: .6rem;
}
.footer-ct-item svg {
width: 13px;
height: 13px;
stroke: var(--color-acento);
fill: none;
stroke-width: 2;
stroke-linecap: round;
flex-shrink: 0;
}
.footer-ct-item span {
font-size: var(--t-sm);
color: rgba(255,255,255,.5);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-2);
}
.footer-bottom p {
font-size: var(--t-sm);
color: rgba(255,255,255,.35);
}
/* =============================================
20. BOTÓN FLOTANTE WHATSAPP
============================================= */
.wa-flotante {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 900;
display: flex;
align-items: center;
width: 54px;
height: 54px;
background: #25d366;
border-radius: 0;
overflow: hidden;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
text-decoration: none;
box-shadow: 0 4px 20px rgba(37, 211, 102, .35);
}
.wa-flotante:hover {
width: auto;
padding: 0 1.25rem 0 0;
box-shadow: 0 4px 28px rgba(37, 211, 102, .5);
}
.wa-flotante-icono {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wa-flotante-icono svg {
width: 26px;
height: 26px;
fill: #fff;
}
.wa-flotante-texto {
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
opacity: 0;
transform: translateX(-6px);
transition: all .25s ease;
}
.wa-flotante:hover .wa-flotante-texto {
opacity: 1;
transform: translateX(0);
}
/* =============================================
21. ANIMACIONES Y SCROLL
============================================= */
/* Fade + slide hacia arriba */
.anim-subir {
opacity: 0;
transform: translateY(28px);
transition: opacity .65s ease, transform .65s ease;
}
/* Solo fade */
.anim-aparecer {
opacity: 0;
transition: opacity .75s ease;
}
/* Delays para animar grupos de elementos en cascada */
.anim-delay-1 { transition-delay: .1s; }
.anim-delay-2 { transition-delay: .2s; }
.anim-delay-3 { transition-delay: .3s; }
.anim-delay-4 { transition-delay: .4s; }
.anim-delay-5 { transition-delay: .5s; }
/* Estado activo — activado por IntersectionObserver en main.js */
.anim-subir.visible,
.anim-aparecer.visible {
opacity: 1;
transform: translateY(0);
}
/* =============================================
22. MEDIA QUERIES — RESPONSIVE
============================================= */
/* Tablet */
@media (max-width: 1024px) {
:root {
--padding-cont: 1.5rem;
--s-16: 6rem;
--s-20: 8rem;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand { grid-column: 1 / -1; }
.sec-split,
.sec-split.inv {
grid-template-columns: 1fr;
min-height: auto;
}
.split-media {
height: 50vh;
min-height: 300px;
}
.split-texto {
padding: var(--s-12) var(--s-8);
}
.contacto-grid { grid-template-columns: 1fr; }
.industrias-grid { grid-template-columns: 1fr; }
.stats-fila { grid-template-columns: repeat(2, 1fr); }
.stat-item:nth-child(2) { border-right: none; }
.stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.1); }
.stat-item:nth-child(4) { border-right: none; border-top: 1px solid rgba(255,255,255,.1); }
}
/* Menú hamburguesa */
@media (max-width: 900px) {
.nav-toggle { display: flex; }
.nav-menu {
display: none;
position: fixed;
inset: var(--nav-alto) 0 0 0;
background: rgba(14, 14, 18, .98);
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: var(--s-8);
gap: .25rem;
z-index: 999;
overflow-y: auto;
}
.nav-menu.abierto { display: flex; }
.nav-link {
font-size: var(--t-lg);
color: rgba(255,255,255,.85);
padding: .85rem 2rem;
width: 100%;
max-width: 300px;
text-align: center;
}
.nav-link:hover { background: rgba(255,255,255,.07); }
.nav-link-cta { margin-top: var(--s-2); }
/* Sin scroll: las páginas con hero no necesitan padding */
.header.scrolled .nav-link { color: rgba(255,255,255,.85); }
}
/* Móvil */
@media (max-width: 768px) {
:root {
--padding-cont: 1.25rem;
--s-12: 4rem;
--s-16: 5rem;
}
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.hero { min-height: 100svh; }
.hero-botones { flex-direction: column; align-items: flex-start; }
.hero-botones .btn { width: 100%; justify-content: center; }
.sec-pantalla { min-height: auto; }
.stats-fila { grid-template-columns: 1fr 1fr; }
.industrias-grid { grid-template-columns: 1fr; }
.form-grupo.doble { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.cursos-grid { grid-template-columns: 1fr; }
.proyectos-grid { grid-template-columns: 1fr; }
.cta-botones { flex-direction: column; }
.cta-botones .btn { justify-content: center; }
.wa-flotante {
bottom: 1.25rem;
right: 1.25rem;
}
}
/* Móvil pequeño */
@media (max-width: 480px) {
:root { --nav-alto: 64px; }
.split-texto { padding: var(--s-8) var(--padding-cont); }
.ind-cuerpo { padding: var(--s-6) var(--s-4); }
}