/* Fuentes: Clash Display vía Fontshare, Inter vía Google Fonts. Cargadas en de cada página; este archivo solo define variables. */ :root { /* ── Fondos ─────────────────────────── */ --bg: #FFF4E8; --bg-white: #FFFFFF; --bg-soft: #FFFAF3; /* ── Tinta ──────────────────────────── */ --ink: #1A1410; --ink-2: #6A5A4A; --ink-3: #8A7A6A; /* ── Acento principal (único coral, WCAG AA: 4.98:1 sobre crema) ── */ --coral: #C4361B; --coral-texto: #C4361B; /* ── Acentos decorativos (solo formas, nunca texto) ── */ --yellow: #FFD84D; --lila: #9B8AFB; --turquoise: #4ECDC4; /* ── Bordes ─────────────────────────── */ --border: #F0E0CD; /* ── Forma ───────────────────────────── */ --r-card: 16px; --r-pill: 100px; /* ── Tipografía ─────────────────────── */ --f-display: 'Clash Display', system-ui, sans-serif; /* titulares y cifras grandes */ --f-sans: 'Inter', system-ui, -apple-system, sans-serif; /* cuerpo e interfaz */ /* ── Layout ─────────────────────────── */ --max-w: 1200px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-py: clamp(4rem, 8vw, 7rem); --nav-h: 76px; } /* ═══════════════════════════════════════════════════════════════ global.html — the institutional page, and the footer line that leads to it. These rules live in tokens.css on purpose. tokens.css is the one stylesheet that every page carrying the site footer loads, on all four country sites; v3-styles.css and v3-pages.css are not. Put here, the footer line is styled everywhere with a single file per repo instead of one edit per page. Everything is written against the existing variables, so each country keeps its own palette without any per-brand override. ═══════════════════════════════════════════════════════════════ */ /* ── The line in the footer ──────────────────────────────────── */ /* The width is written out here instead of borrowing the .container class, because the blog articles do not load v3-styles.css and so have no .container: their own site-chrome.css spells the same measurements into .footer-inner and .footer-bottom-inner by hand. Copying that keeps the line aligned with the copyright underneath it on both kinds of page. text-decoration is stated for the same reason — the reset that removes it also lives in v3-styles.css. */ .footer-global { width: 100%; max-width: var(--max-w); margin: 0 auto 1rem; padding-inline: var(--gutter); padding-bottom: 1rem; border-bottom: 0.5px solid var(--border); } .footer-global-link { display: inline-flex; align-items: baseline; gap: 0.4em; font-size: 0.8125rem; color: var(--ink-3); text-decoration: none; transition: color 0.15s; } .footer-global-link:hover { color: var(--ink); } .footer-global-link .fg-go { font-weight: 600; color: var(--coral-texto); white-space: nowrap; } /* ── The page itself ─────────────────────────────────────────── */ .gl-page { background: var(--bg); } .gl-hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); background: var(--bg); } .gl-eyebrow { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-texto); margin-bottom: 1rem; } .gl-h1 { font-family: var(--f-display); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; color: var(--ink); margin-bottom: 1.5rem; } .gl-lead { font-size: 1.0625rem; color: var(--ink-2); line-height: 1.75; max-width: 62ch; } .gl-section { padding-block: clamp(3rem, 6vw, 5rem); border-top: 0.5px solid var(--border); } .gl-section--soft { background: var(--bg-soft); } .gl-h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 0.625rem; } .gl-h3 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.5rem; } .gl-sub { font-size: 0.9375rem; color: var(--ink-3); line-height: 1.7; max-width: 60ch; margin-bottom: 2rem; } /* ── The four brands ─────────────────────────────────────────── */ .gl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .gl-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem 1.375rem 1.375rem; background: var(--bg-white, #fff); border: 0.5px solid var(--border); border-radius: var(--r-card); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .gl-card:hover { border-color: rgba(26, 20, 16, 0.16); box-shadow: 0 4px 20px rgba(26, 20, 16, 0.06); transform: translateY(-2px); } .gl-card.is-here { background: var(--bg-soft); border-color: var(--coral-texto); } .gl-card.is-here:hover { transform: none; box-shadow: none; } .gl-code { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3); } .gl-name { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; } .gl-meta { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.5; margin-bottom: 0.75rem; } /* Two lines: the call to action, and under it the address itself, so the visitor can see where the link goes before clicking it. */ .gl-visit { margin-top: auto; display: flex; flex-direction: column; text-decoration: none; transition: opacity 0.15s; } .gl-visit:hover { opacity: 0.75; } .gl-visit-go { font-size: 0.875rem; font-weight: 600; color: var(--coral-texto); white-space: nowrap; } .gl-domain { font-size: 0.75rem; font-weight: 400; color: var(--ink-3); margin-top: 0.15rem; } .gl-here { margin-top: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-texto); } /* ── Why four brands ─────────────────────────────────────────── */ .gl-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; } .gl-why-item { display: flex; flex-direction: column; gap: 0.5rem; } .gl-why-num { font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: var(--coral); letter-spacing: -0.04em; line-height: 1; opacity: 0.28; } .gl-why-item h3 { font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .gl-why-item p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.7; } /* ── Company and contact ─────────────────────────────────────── */ .gl-legal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } .gl-legal .gl-sub { margin-bottom: 1rem; } .gl-company { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.8; } .gl-company strong { color: var(--ink); font-weight: 600; } .gl-mails { display: flex; flex-direction: column; gap: 0.6rem; } .gl-mails a { font-size: 0.9375rem; font-weight: 600; color: var(--coral-texto); transition: opacity 0.15s; } .gl-mails a:hover { opacity: 0.75; } .gl-mail-brand { font-size: 0.8125rem; color: var(--ink-3); } @media (max-width: 900px) { .gl-grid { grid-template-columns: repeat(2, 1fr); } .gl-why { grid-template-columns: 1fr; gap: 1.75rem; } .gl-legal-wrap { grid-template-columns: 1fr; } } @media (max-width: 520px) { .gl-grid { grid-template-columns: 1fr; } }