/* Base — Regalos Bakanos: reset, tipografía, utilidades Las fuentes se cargan con en el (ver scripts/templates/layout.js): un @import aquí encadenaba una descarga en serie (CSS → luego fuente) y retrasaba el primer render. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; /* compensa el header fijo al hacer anchor-scroll */ /* Red de seguridad contra scroll horizontal en móvil. Se aplica también en (no solo en ) porque en varios navegadores móviles overflow-x en body no evita el arrastre lateral con el dedo si el desborde nace más arriba en el árbol. */ overflow-x: hidden; max-width: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; max-width: 100%; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } svg { width: 1em; height: 1em; flex-shrink: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 var(--space-3); color: var(--color-ink); text-wrap: balance; /* evita líneas huérfanas en títulos de 2-3 líneas */ } h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; font-weight: 800; } h2 { font-size: var(--fs-2xl); letter-spacing: -0.015em; } h3 { font-size: var(--fs-xl); } p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--color-primary-light); color: var(--color-primary-dark); } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } /* ── Layout utilitario ── */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); } @media (max-width: 640px) { .container { padding-inline: var(--space-4); } } .section { padding-block: var(--space-10); } @media (max-width: 768px) { .section { padding-block: var(--space-8); } } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } /* Pastilla de bienvenida al tope del home — pequeña, centrada, responsiva y a todo color (degradado de marca con texto blanco) para que nunca se lea como texto negro. */ .welcome-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); max-width: 100%; } .welcome-badge svg { width: 14px; height: 14px; flex-shrink: 0; color: #fff; } @media (max-width: 480px) { .welcome-badge { font-size: 0.65rem; padding: var(--space-1) var(--space-4); text-align: center; } } .hero-conteo-productos { margin-top: var(--space-3); font-size: var(--fs-lg); color: var(--color-text-secondary); } .hero-conteo-productos strong { color: var(--color-primary); font-size: 1.3em; font-family: var(--font-display); } .section-head .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); } .section-head h1, .section-head h2 { margin: 0; } .section-head p { margin: var(--space-2) 0 0; max-width: 46ch; } .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; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: #fff; padding: var(--space-3) var(--space-5); z-index: var(--z-toast); border-radius: 0 0 var(--radius-md) 0; } .skip-link:focus { left: 0; } .text-center { text-align: center; } .visually-hide-empty:empty { display: none; } .lazy-img { background: var(--color-bg-soft); }