/* Geist se carga desde el de cada HTML vía
+ (ver plantilla de cada página) en vez de
@import, para evitar el hop de red extra que bloquea el render. */
/* =========================================================
VARIABLES — Sistema de Diseño Alta Group
========================================================= */
:root {
/* Colores base */
--color-light: #D9D9D9; /* Gris claro */
--color-dark: #1F1F1F; /* Oscuro — Textos/Títulos */
--color-gray: #4B5563; /* Gris medio — Párrafos */
--color-primary: #D31212; /* Rojo Alta — Acentos/Botones */
--color-white: #FFFFFF;
/* Excepción visual pedida por el cliente para las tarjetas de datos del Home */
--color-card-accent: #D0E5FF;
--color-footer-dark: #8F8F8F;
/* Tipografía (Geist) */
--font-main: "Geist", Arial, sans-serif;
--font-heading: "Geist", Arial, sans-serif;
/* Fluida: clamp(mínimo, preferido, máximo) — escala sin romper mobile */
--type-title-size: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); /* Títulos de sección: 32px → 60px, ExtraBold */
--type-subtitle-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); /* Subtítulos: 24px → 40px, SemiBold */
--type-body-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); /* Texto/Links: 16px → 20px, Medium */
--type-tracking: 0.1em;
--container-width: 1480px;
--header-height: 90px;
--radius: 0;
--transition: 0.3s ease;
}
/* =========================================================
RESET Y TIPOGRAFÍA BASE
========================================================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
font-family: var(--font-main);
color: var(--color-dark);
line-height: 1.5;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: 1.2;
letter-spacing: var(--type-tracking);
color: var(--color-dark);
word-break: normal;
overflow-wrap: break-word;
}
h1, h2 { font-size: var(--type-title-size); font-weight: 800; text-transform: uppercase; } /* ExtraBold */
h2 { margin-bottom: 1.5rem; }
h3, h4 { font-size: var(--type-subtitle-size); font-weight: 500; } /* SemiBold */
p, li {
font-family: var(--font-main);
font-size: var(--type-body-size);
font-weight: 500; /* Medium */
letter-spacing: var(--type-tracking);
color: var(--color-gray);
word-break: normal;
overflow-wrap: break-word;
}
.text-primary { color: var(--color-primary); }
.container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
section { padding: 60px 0; }
/* =========================================================
BOTONES
========================================================= */
.btn {
display: inline-flex; align-items: center; padding: 14px 32px;
border-radius: var(--radius); font-family: var(--font-main);
font-weight: 600; letter-spacing: var(--type-tracking);
text-align: center; transition: background var(--transition), transform var(--transition), filter var(--transition);
}
.btn--primary { background: var(--color-primary); color: var(--color-white); border-radius: 20px; }
.btn--primary:hover { filter: brightness(0.9); transform: translateY(-2px); }
.btn--small { padding: 10px 22px; font-size: 0.8rem; }
/* Botón de descarga del PDF de presentación — transversal (Nosotros y el
hub de Servicios lo usan ambos), por eso vive acá y no repetido en cada
CSS de página. */
.btn-pdf-download {
display: inline-flex;
align-items: stretch;
background: var(--color-primary);
color: var(--color-white);
border-radius: 4px;
overflow: hidden;
transition: filter var(--transition), transform var(--transition);
}
.btn-pdf-download:hover,
.btn-pdf-download:focus-visible {
filter: brightness(0.92);
transform: translateY(-2px);
}
.btn-pdf-download__badge {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 20px;
background: rgba(0, 0, 0, 0.18);
font-weight: 800;
font-size: 0.9rem;
letter-spacing: 0.04em;
}
.btn-pdf-download__label {
display: flex;
align-items: center;
padding: 16px 28px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.btn-pdf-download__icon {
display: flex;
align-items: center;
padding: 0 24px;
}
.btn-pdf-download__icon svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
.btn-pdf-download__badge { padding: 14px 14px; }
.btn-pdf-download__label { padding: 14px 16px; font-size: 0.85rem; }
.btn-pdf-download__icon { padding: 0 16px; }
}
@media (max-width: 400px) {
.btn-pdf-download__badge { padding: 12px 12px; }
.btn-pdf-download__label { padding: 12px 14px; font-size: 0.8rem; }
.btn-pdf-download__icon { padding: 0 14px; }
}
.section-kicker {
display: block; margin-bottom: 25px; color: var(--color-primary);
font-size: 1.2rem; font-weight: 600; letter-spacing: 0.15em;
text-transform: uppercase; text-align: center;
}
/* =========================================================
CTA FINAL (componente transversal — Home, hub de Servicios
y fichas de detalle de servicio)
========================================================= */
.final-cta { padding: 0; }
.final-cta__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; min-height: 410px; }
.final-cta__text { padding: clamp(32px, 8vw, 75px) clamp(20px, 4vw, 30px) clamp(32px, 7vw, 70px) clamp(20px, 6vw, 70px); }
.final-cta__text h2 { max-width: 700px; overflow-wrap: break-word; }
.final-cta__text p { max-width: 520px; margin-bottom: 3vh; }
.final-cta__image { position: relative; min-height: 410px; overflow: hidden; background: var(--color-white); }
.final-cta__image img:first-child { display: none; }
.final-cta__brush { position: absolute; top: 8%; right: 26%; height: 84%; width: auto; }
.final-cta__grid > * { min-width: 0; }
/* =========================================================
HEADER — transparente y absoluto sobre el Hero (diseño
original: el logo/topbar viven acá y se van con el scroll,
nunca se ocultan ni quedan fijos — eso rompía la estética).
La navegación que SÍ queda fija con hide-on-scroll-down /
show-on-scroll-up es el