/* ==========================================================
Montoya — Limpieza de Tuberías · Tokens de marca
Fuente única: Manual de marca Montoya (Design System).
Cargar ANTES de styles.css.
Fuentes (poner en ):
========================================================== */
:root {
/* Marca (fijos) */
--amarillo: #FFC20E;
--on-amarillo: #121410;
--tinta: #121410;
--crema: #F5F3EA;
--verde-gota: #2BB24C;
/* Tema claro (por defecto) */
--surface: #F5F3EA;
--surface-raised: #FFFFFF;
--line: #DEDBCB;
--ink: #121410;
--ink-muted: #5E6157;
--amarillo-suave: #FFF1C4;
--verde-profundo: #1E7A34;
--accion-whatsapp: #1E7A34;
--on-accion-whatsapp: #FFFFFF;
--alerta: #B3261E;
--link: var(--verde-profundo);
--shadow-card: 0 1px 2px rgba(18,20,16,.08), 0 4px 16px rgba(18,20,16,.06);
/* Tipografía */
--font-display: "Archivo", "Arial Black", sans-serif;
--font-body: "Barlow", system-ui, sans-serif;
--font-label: "Barlow Condensed", "Arial Narrow", sans-serif;
--fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem); /* 36 → 56 */
--fs-h1: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); /* 30 → 40 */
--fs-h2: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); /* 24 → 30 */
--fs-h3: 1.375rem; /* 22 */
--fs-telefono: clamp(1.75rem, 1.5rem + 1vw, 2rem); /* 28 → 32 */
--fs-body-lg: 1.1875rem; /* 19 */
--fs-body: 1.0625rem; /* 17 */
--fs-small: .9375rem; /* 15 */
--fs-label: .875rem; /* 14 */
--fs-label-sm: .75rem; /* 12 */
/* Espaciado (4 px) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
/* Radios */
--radius-sm: 6px; --radius-md: 12px; --radius-lg: 22px; --radius-pill: 999px;
--container: 1180px;
--measure: 65ch;
}
/* Tema oscuro opcional: activar con */
[data-theme="oscuro"] {
--surface: #121410;
--surface-raised: #1C1F19;
--line: #2E322A;
--ink: #F5F3EA;
--ink-muted: #A9AC9F;
--amarillo-suave: #3A300A;
--verde-profundo: #2BB24C;
--accion-whatsapp: #2BB24C;
--on-accion-whatsapp: #121410;
--alerta: #FF8A80;
--shadow-card: none;
color-scheme: dark;
}
/* ---------- Base ---------- */
body {
margin: 0;
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
}
h1, h2, h3, .display {
font-family: var(--font-display);
font-stretch: 125%;
font-weight: 800;
text-wrap: balance;
margin: 0;
}
.display { font-size: var(--fs-display); line-height: 1; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; }
p { max-width: var(--measure); }
a { color: var(--link); text-underline-offset: .2em; }
.lead { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-muted); }
.label, .eyebrow {
font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
font-size: var(--fs-label); letter-spacing: .12em; line-height: 1.2;
}
.telefono {
font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
font-size: var(--fs-telefono); line-height: 1; font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
/* ---------- Componentes ---------- */
.btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
border: 2px solid transparent; text-decoration: none; cursor: pointer;
font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
font-size: var(--fs-label); letter-spacing: .12em;
}
.btn--primario { background: var(--amarillo); color: var(--on-amarillo); }
.btn--primario:hover { filter: brightness(.95); }
.btn--whatsapp { background: var(--accion-whatsapp); color: var(--on-accion-whatsapp); }
.btn--secundario { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--flotante {
position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
border-radius: var(--radius-pill); z-index: 50;
}
.tarjeta-servicio {
background: var(--surface-raised); border-radius: var(--radius-md);
padding: var(--space-5); display: grid; gap: var(--space-3);
transition: box-shadow .2s ease;
}
.tarjeta-servicio:hover { box-shadow: var(--shadow-card); }
.tarjeta-servicio__icono {
width: 48px; height: 48px; border-radius: 50%;
display: grid; place-items: center; background: var(--amarillo); color: var(--on-amarillo);
}
.banda-oscura { background: var(--tinta); color: var(--crema); }
.banda-oscura .telefono { color: var(--amarillo); }
.insignia {
display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
font-size: var(--fs-label-sm); letter-spacing: .14em;
background: var(--amarillo-suave); color: var(--ink);
}
.banda-oscura .insignia { background: transparent; color: var(--verde-gota); border: 1px solid var(--verde-gota); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }