/* ============================================================
NOVO HAIR — GLOBAL.CSS
Variables de diseño, reset y estilos base compartidos
por TODAS las páginas del sitio.
============================================================ */
/* ============================================================
TIPOGRAFÍAS IMPORTADAS EN ESTE PROYECTO
============================================================
Cargadas vía Google Fonts en el de cada página.
CORMORANT GARAMOND
Pesos importados: 300, 400, 500, 600, 700 (+ itálicas)
Uso: Headings (H1, H2, H3) — variable --font-heading
Peso usado en el diseño original (Figma): 400 itálica
INTER
Pesos importados: [DEFINIR cuando armemos el —
el Figma marca Regular/400 para body y Semi Bold/600 para
labels y botones, así que como mínimo necesitamos 400 y 600]
Uso: Body, botones, nav — variable --font-body
Si en algún momento se necesita un peso o estilo que no
está en esta lista, hay que:
1. Agregarlo al de Google Fonts en el de
CADA página que lo use
2. Sumarlo a este comentario para no perder el registro
============================================================ */
/* ============================================================
1. VARIABLES DE DISEÑO (CSS Custom Properties)
Extraídas directo del archivo de Figma (página "00 - Styles")
============================================================ */
:root {
/* --- Colores de marca (confirmados desde Figma) --- */
--color-gold-light: #E1B872;
--color-gold: #CC9229;
--color-brown: #9A784A;
--color-off-white: #F7F7F7;
--color-gray: #9B9A97;
/* --- Colores base adicionales (uso general, no vienen del
Figma como swatch pero se necesitan siempre) --- */
--color-white: #FFFFFF;
--color-black: #1A1A1A;
/* --- Tipografías --- */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Inter', sans-serif;
/* --- Escala tipográfica (tamaños confirmados desde Figma) --- */
--text-h1-size: 72px;
--text-h1-line-height: 78px;
--text-h2-size: 52px;
--text-h2-line-height: 58px;
--text-h3-size: 36px;
--text-h3-line-height: 42px;
--text-body-large-size: 18px;
--text-body-large-line-height: 28px;
--text-body-regular-size: 16px;
--text-body-regular-line-height: 24px;
--text-label-button-size: 14px;
--text-label-button-line-height: 20px;
/* --- Espaciados reutilizables (ajustar si el Figma define
una escala propia al revisar página por página) --- */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 96px;
/* --- Bordes / radios --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
/* --- Contenedor máximo del sitio --- */
--container-max-width: 1400px;
--container-padding: clamp(20px, 6vw, 40px);
/* --- Transiciones reutilizables (ej: header al scrollear) --- */
--transition-fast: 0.2s ease;
--transition-medium: 0.4s ease;
}
@media (max-width: 1024px) {
:root {
--container-padding: 50px;
}
}
/* ============================================================
2. RESET / NORMALIZE BÁSICO
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-body-regular-size);
line-height: var(--text-body-regular-line-height);
color: var(--color-black);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
picture,
video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
}
/* ============================================================
3. TIPOGRAFÍA BASE
============================================================ */
h1, h2, h3 {
font-family: var(--font-heading);
font-style: italic;
font-weight: 400;
color: var(--color-black);
/* letter-spacing: -0.02em; SACAR*/
/* line-height: 0.4; SACAR */
}
h1 {
font-size: var(--text-h1-size);
line-height: var(--text-h1-line-height);
}
h2 {
font-size: var(--text-h2-size);
line-height: var(--text-h2-line-height);
letter-spacing: -0.02em;
line-height: 1;
}
h3 {
font-size: var(--text-h3-size);
line-height: var(--text-h3-line-height);
}
p {
font-family: var(--font-body);
font-size: var(--text-body-regular-size);
line-height: var(--text-body-regular-line-height);
}
.body-large {
font-size: var(--text-body-large-size);
line-height: var(--text-body-large-line-height);
}
.label-button {
font-family: var(--font-body);
font-size: var(--text-label-button-size);
line-height: var(--text-label-button-line-height);
font-weight: 600;
}
/* ============================================================
4. UTILIDADES GENERALES
============================================================ */
.container {
width: 100%;
max-width: var(--container-max-width);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Botón base — variantes puntuales se definen en el CSS
de cada página si hace falta un estilo distinto */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--text-label-button-size);
font-weight: 600;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-primary {
background-color: var(--color-gold);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-brown);
}
/* ============================================================
5. RESPONSIVE — BREAKPOINTS DE REFERENCIA
(mobile-first: los estilos base son mobile,
estos media queries van agrandando)
============================================================
Tablet: min-width: 768px
Desktop: min-width: 1024px
XL: min-width: 1440px
============================================================ */
/* CARRUSEL */
.carousel-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-gold-light);
border-radius: 50%;
font-size: 18px;
font-weight: 700;
line-height: 1;
padding-bottom: 3px;
color: var(--color-gold-light);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.carousel-arrow:hover {
background-color: var(--color-gold-light);
color: var(--color-white);
}