/** * VibeLocal — Base * ============================================================================ * * Fuentes, reset y tipografía base. * * TODO ESTÁ BAJO `.vl-redesign`, A PROPÓSITO. * style.css (1.788 líneas de parches a Elementor, el dashboard y GeoDirectory) * se sigue cargando en todo el sitio y no se puede tocar todavía. Si este reset * fuera global, contaminaría el dashboard y las páginas de Elementor que aún * están vivas. El scope hace que el rediseño sea reversible: se quita la clase * del y el sitio vuelve exactamente a como estaba. * * La clase la pone vl_redesign_body_class() en inc/redesign-bootstrap.php. */ /* ══ FUENTES ═══════════════════════════════════════════════════════════════ * Autoalojadas, no CDN de Google: es un sitio español y servir las fuentes * desde Google transfiere la IP del visitante a un tercero sin base legal * (el caso de Múnich de 2022). Además ahorra una conexión en la ruta crítica. * Variables las tres, así que un fichero cubre todos los pesos. * ------------------------------------------------------------------------- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* * League Spartan — sólo el titular del hero. * * La pidió el cliente el 03/09/2026 con el mockup delante: «(To Next?) League * Spartan font». Es una grotesca geométrica de caja alta muy cerrada, que es lo * que le da al «to next?» ese aire de cartel; Plus Jakarta, la del resto del * sitio, es más redonda y ahí se quedaba blanda. * * NO SUSTITUYE A LA DISPLAY. Se queda en el hero y en ningún sitio más: cambiar * la tipografía de todos los titulares del sitio es otra decisión, más grande, * y no es la que se pidió. * * Servida desde el propio dominio como las otras tres, con sus dos subconjuntos * y su `unicode-range`. Es fuente variable 400-900, así que un solo fichero por * subconjunto cubre todos los pesos. */ @font-face { font-family: 'League Spartan'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/league-spartan-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'League Spartan'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/league-spartan-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/yellowtail-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/yellowtail-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ══ RESET ═════════════════════════════════════════════════════════════════ */ .vl-redesign *, .vl-redesign *::before, .vl-redesign *::after { box-sizing: border-box; } body.vl-redesign { margin: 0; background: var(--vl-bg); color: var(--vl-text-body); font-family: var(--vl-font-ui); font-size: var(--vl-text-base); line-height: var(--vl-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Deja sitio a la bottom-nav fija. En >=1024px la nav desaparece y esto se anula más abajo. */ padding-bottom: calc(var(--vl-bottom-nav-h) + env(safe-area-inset-bottom, 0px)); } /* * El reset va envuelto en `:where()` a propósito: así tiene especificidad CERO * y cualquier clase de componente le gana sin pelear. * * Escrito como `.vl-redesign p { margin: 0 }` (0,1,1) el reset le ganaba a * `.vl-section__note { margin-block-end: … }` (0,1,0) y todos los márgenes de * los componentes se venían abajo en silencio. Es el fallo clásico de mezclar * selectores de elemento y de clase, y sólo se ve cuando ya has maquetado tres * pantallas y no cuadra ninguna. */ :where(.vl-redesign) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; } :where(.vl-redesign) :where(ul, ol) { margin: 0; padding: 0; } :where(.vl-redesign) :where(li) { list-style: none; } :where(.vl-redesign) :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; } :where(.vl-redesign) :where(input, button, textarea, select) { font: inherit; color: inherit; } :where(.vl-redesign) :where(button) { background: none; border: 0; padding: 0; cursor: pointer; } :where(.vl-redesign) :where(a) { color: var(--vl-action); text-decoration: none; } :where(.vl-redesign) :where(a:hover) { color: var(--vl-action-hover); text-decoration: underline; } /* ══ TIPOGRAFÍA ════════════════════════════════════════════════════════════ */ :where(.vl-redesign) :where(h1, h2, h3, h4) { font-family: var(--vl-font-display); font-weight: var(--vl-fw-bold); line-height: var(--vl-leading-tight); letter-spacing: var(--vl-tracking-tight); color: var(--vl-text); text-wrap: balance; } :where(.vl-redesign) :where(h1) { font-size: var(--vl-text-4xl); } :where(.vl-redesign) :where(h2) { font-size: var(--vl-text-2xl); } :where(.vl-redesign) :where(h3) { font-size: var(--vl-text-xl); } :where(.vl-redesign) :where(h4) { font-size: var(--vl-text-lg); line-height: var(--vl-leading-snug); } :where(.vl-redesign) :where(p) { text-wrap: pretty; } /* Cifras alineadas en columna: horarios, distancias, precios, contadores. Es la razón por la que Inter está en el sistema. */ .vl-redesign .vl-tnum, .vl-redesign time, .vl-redesign [data-vl-figure] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ── Roles de texto reutilizables ─────────────────────────────────────────── */ .vl-overline { font-family: var(--vl-font-ui); font-size: var(--vl-text-2xs); font-weight: var(--vl-fw-bold); letter-spacing: var(--vl-tracking-wide); text-transform: uppercase; color: var(--vl-text-muted); } .vl-lede { font-size: var(--vl-text-lg); line-height: var(--vl-leading-relaxed); color: var(--vl-text-body); max-width: var(--vl-container-text); } .vl-meta { font-size: var(--vl-text-sm); color: var(--vl-text-muted); } .vl-fineprint { font-size: var(--vl-text-xs); color: var(--vl-text-faint); } /* La palabra manuscrita del hero. Una por página. `overflow-wrap` y el padding evitan que los remates del script se corten. */ .vl-script { font-family: var(--vl-font-script); font-size: var(--vl-text-script); font-weight: var(--vl-fw-regular); line-height: 0.92; letter-spacing: 0; padding-inline: 0.08em; text-wrap: nowrap; } /* ══ LAYOUT ════════════════════════════════════════════════════════════════ */ .vl-container { width: 100%; max-width: var(--vl-container); margin-inline: auto; padding-inline: var(--vl-gutter); } .vl-stack > * + * { margin-block-start: var(--vl-space-4); } .vl-section { padding-block: var(--vl-space-8); } /* ══ ACCESIBILIDAD ═════════════════════════════════════════════════════════ */ .vl-redesign :focus-visible { outline: 3px solid var(--vl-focus); outline-offset: 2px; border-radius: var(--vl-radius-sm); } /* Visible solo para lectores de pantalla. */ .vl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Salto al contenido: aparece al tabular. */ .vl-skip-link { position: absolute; top: var(--vl-space-2); left: var(--vl-space-2); z-index: var(--vl-z-modal); padding: var(--vl-space-3) var(--vl-space-4); background: var(--vl-white); color: var(--vl-action); font-weight: var(--vl-fw-semibold); border-radius: var(--vl-radius-md); box-shadow: var(--vl-shadow-lg); transform: translateY(-150%); } .vl-skip-link:focus { transform: translateY(0); } @media (prefers-reduced-motion: no-preference) { .vl-skip-link { transition: transform var(--vl-duration) var(--vl-ease); } } /* ══ ESCRITORIO ════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { body.vl-redesign { padding-bottom: 0; /* la bottom-nav desaparece */ } }