/* ==========================================================================
base.css: Auto Summit premium
Reset moderno + fuentes + tipografia base + utilidades minimas.
Depende de tokens.css (cargar tokens.css ANTES que este archivo).
========================================================================== */
/* --- Fuentes Google (preconnect va en el de cada pagina) --- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* --------------------------------------------------------------------------
Preload hints (ART-DIRECTION seccion 3, punto LCP). Cada pagina copia estos
al , ANTES de las hojas de estilo, para acelerar el LCP:
1) Fuente del titular (Space Grotesk 700), evita el reflow del display:
2) Imagen de hero de la pagina, sin lazy y con prioridad alta:
y en el ![]()
del hero: fetchpriority="high" (nunca loading="lazy").
Presupuesto: menos de 1MB transferido por pagina. Preferir variantes
-1024x768 de WordPress si existen, no el original de 4000px.
-------------------------------------------------------------------------- */
/* ==========================================================================
Reset moderno
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
tab-size: 4;
}
body {
min-height: 100vh;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
table {
border-collapse: collapse;
width: 100%;
}
:target {
scroll-margin-top: 100px;
}
/* ==========================================================================
Tipografia base
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
}
h1 {
font-size: var(--fs-h1);
line-height: 1.05;
}
h2 {
font-size: var(--fs-h2);
}
h3 {
font-size: var(--fs-h3);
font-weight: 600;
}
h4 {
font-size: var(--fs-h4);
font-weight: 600;
letter-spacing: -0.01em;
}
h5 {
font-size: var(--fs-h5);
font-weight: 600;
letter-spacing: -0.01em;
}
h6 {
font-size: var(--fs-h6);
font-weight: 600;
letter-spacing: 0;
}
/* Titular hero: mayor tamano y tracking mas cerrado */
.display {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-display);
line-height: 1.02;
letter-spacing: -0.03em;
}
/* Display de hero de la direccion "dark showroom" (ART-DIRECTION sello 2):
escala editorial gigante, una sola palabra naranja (.hl). Modificador para
no alterar el .display base que ya usan otras piezas. */
.display--hero {
font-size: clamp(44px, 7vw, 96px);
line-height: 0.98;
letter-spacing: -0.03em;
}
p {
font-size: var(--fs-body);
line-height: 1.55;
color: var(--ink-2);
}
.lead {
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--ink-2);
}
strong,
b {
font-weight: 600;
}
/* Enfasis de una palabra por titulo (regla de oro del naranja) */
.hl {
color: var(--orange-deep);
}
.on-navy .hl,
.hl--on-navy {
color: var(--orange);
}
/* --- Numeros y datos tecnicos: JetBrains Mono, tabular --- */
.num,
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
}
/* ==========================================================================
Superficies claras vs sobre navy
========================================================================== */
.on-navy {
color: var(--on-navy);
background: var(--navy);
}
.on-navy h1,
.on-navy h2,
.on-navy h3,
.on-navy h4,
.on-navy h5,
.on-navy h6 {
color: var(--on-navy);
}
.on-navy p,
.on-navy .lead {
color: var(--on-navy-72);
}
/* ==========================================================================
Utilidades minimas
========================================================================== */
/* Contenedor central */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow {
max-width: 820px;
}
.container--wide {
max-width: 1360px;
}
/* Seccion con padding vertical responsivo */
.section {
padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.section--tight {
padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}
/* Eyebrow / label */
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-eyebrow);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--orange-deep);
}
/* Eyebrow sobre navy: pill con tinte naranja */
.on-navy .eyebrow,
.eyebrow--pill {
color: var(--orange);
background: var(--orange-tint-10);
padding: 0.4em 0.9em;
border-radius: var(--r-pill);
letter-spacing: 0.18em;
}
/* Numeracion editorial de seccion (ART-DIRECTION sello 2): "01 /" en mono
naranja sobre el titulo de cada seccion, como una revista.
Uso: 01 o data-num="01" en el contenedor. */
.section-num {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--orange-deep);
}
.section-num::after {
content: "/";
color: var(--ink-3);
}
.on-navy .section-num {
color: var(--orange);
}
.on-navy .section-num::after {
color: var(--on-navy-50);
}
/* Grid helpers */
.grid {
display: grid;
gap: var(--space-6);
}
.grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
grid-template-columns: repeat(4, 1fr);
}
/* Auto-fit: cards que se acomodan solas (min 280px) */
.grid--cards {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 900px) {
.grid--3,
.grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.grid--2,
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
}
/* Flex helpers puntuales */
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
.stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Alineacion de texto */
.text-center {
text-align: center;
}
/* Anchos de medida legible */
.measure {
max-width: 60ch;
}
.measure--tight {
max-width: 46ch;
}
.mx-auto {
margin-inline: auto;
}
/* Visualmente oculto pero accesible */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Skip link
========================================================================== */
.skip-link {
position: absolute;
left: var(--space-4);
top: -100px;
z-index: var(--z-toast);
padding: 0.75rem 1.25rem;
background: var(--orange);
color: var(--navy);
font-family: var(--font-display);
font-weight: 600;
border-radius: var(--r-sm);
box-shadow: var(--shadow-2);
transition: top var(--t-fast);
}
.skip-link:focus {
top: var(--space-4);
}
/* ==========================================================================
Focus visible global (ring naranja)
========================================================================== */
:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 2px;
border-radius: 4px;
}
/* Elementos que ya definen su propio ring no reciben doble outline */
.btn:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 2px;
}
/* Seleccion de texto */
::selection {
background: var(--orange);
color: var(--navy);
}
/* ==========================================================================
Grain: textura de ruido sutil sobre superficies navy (ART-DIRECTION sello 3)
SVG feTurbulence inline como data-uri, opacity .03. Aplicar .grain a una
superficie navy (hero, franja industrial): agrega profundidad sin peso.
La textura no captura eventos (pointer-events: none) y va bajo el contenido.
========================================================================== */
.grain {
position: relative;
isolation: isolate;
}
.grain::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}