/* ═══════════════════════════════════════════════════════════════ Wine2Water — css/base.css Variables de color y tipografía, reset, idiomas y utilidades. → Para cambiar un color en TODO el sitio, cámbialo aquí una vez. ═══════════════════════════════════════════════════════════════ */ :root { /* Paleta del sitio */ --vino-fondo: #2A0912; /* fondo general oscuro */ --vino: #3D0D18; /* vino oscuro (texto de botones, fondo contacto) */ --vino-medio: #6B1E2E; /* titulares sobre fondo claro */ --granate: #8B3045; /* extremo "vino" de las líneas decorativas */ --dorado: #C9A84C; /* acento principal */ --dorado-claro: #E8C97A; /* acento al pasar el ratón */ --agua: #3A8FAA; /* extremo "agua" de las líneas decorativas */ --agua-oscura: #1A5F7A; /* titulares "agua" sobre fondo claro */ --agua-profunda: #0D3D52; /* ola más profunda de la portada */ --crema: #F7F2EB; /* texto principal sobre fondo oscuro */ --papel: #FBF8F3; /* fondo de la ficha clara */ --tinta: #2C1A10; /* texto sobre fondo claro */ --marron: #7A6455; /* texto secundario sobre fondo claro */ /* Tipografías (los @font-face están en fuentes.css) */ --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Sitio oscuro: los controles nativos (desplegables, barras de scroll…) se dibujan también en oscuro */ color-scheme: dark; } body { margin: 0; font-family: var(--sans); background: var(--vino-fondo); color: var(--crema); overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--dorado-claro); } a:hover { color: var(--dorado); } /* ---------- Idiomas (ES / EN / FR / PT / IT) ---------- Cada texto se escribe cinco veces, un por idioma: HolaHello… Solo se muestra el del idioma activo. El idioma activo lo fija js/idioma.js en . */ .en, .fr, .pt, .it { display: none; } html[data-lang="es"] .en, html[data-lang="es"] .fr, html[data-lang="es"] .pt, html[data-lang="es"] .it { display: none; } html[data-lang="en"] .es { display: none; } html[data-lang="en"] .en { display: revert; } html[data-lang="fr"] .es { display: none; } html[data-lang="fr"] .fr { display: revert; } html[data-lang="pt"] .es { display: none; } html[data-lang="pt"] .pt { display: revert; } html[data-lang="it"] .es { display: none; } html[data-lang="it"] .it { display: revert; } /* ---------- Animaciones ---------- */ @keyframes aparecer { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ---------- Utilidades ---------- */ /* Rótulo pequeño en mayúsculas doradas que precede a los títulos */ .etiqueta { display: block; margin: 0 0 1.2rem; font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--dorado); } /* Texto "hueco": solo el contorno dorado */ .trazo { color: transparent; -webkit-text-stroke: 1px var(--dorado-claro); } /* Nota pequeña y atenuada, centrada */ .nota { text-align: center; margin: 2.5rem auto 0; max-width: 560px; font-size: 0.82rem; line-height: 1.7; color: rgba(247, 242, 235, 0.5); }