/* ==========================================================================
COCO'S — Base
Reset ligero + estilos globales de tipografía y layout. Consume los
tokens definidos en variables.css. No contiene estilos de componentes
(eso vive en components.css) ni overrides de color por categoría
(pages.css).
========================================================================== */
/* -- Fuentes -------------------------------------------------------------
Baloo 2 (display, bubble) + Nunito (body). Se cargan aquí por
simplicidad; para producción es preferible mover esto a un + en el de cada
página (evita el parpadeo de fuente y bloquea menos el render). */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* -- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
min-height: 100vh;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--fs-body-md);
font-weight: var(--fw-regular);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
ul,
ol {
list-style: none;
}
/* -- Tipografía ------------------------------------------------------------
Los títulos usan la fuente display en mayúsculas con el look "bubble"
grueso y compacto que se ve en los mockups. */
h1,
h2,
h3,
.font-display {
font-family: var(--font-display);
font-weight: var(--fw-bold);
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
}
h1 {
font-size: var(--fs-display-xl);
}
h2 {
font-size: var(--fs-display-lg);
}
h3 {
font-size: var(--fs-display-md);
}
p {
color: var(--color-ink-soft);
font-size: var(--fs-body-md);
}
/* Subtítulo de introducción bajo el H1 (ej. "Sabores fríos, toppings...") */
.lede {
font-size: var(--fs-body-lg);
color: var(--color-ink-soft);
text-align: center;
max-width: 34ch;
margin-inline: auto;
}
/* -- Layout ------------------------------------------------------------- */
.page {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: var(--space-7) var(--space-5) var(--space-9);
}
.container {
width: 100%;
max-width: var(--container-max);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.background-shape {
position: absolute;
border-radius: 20%;
z-index: -1;
}
.background-shape--orange {
width: 150px;
height: 110px;
background: var(--color-helados-title);
top: 10rem;
left: -4rem;
}
.background-shape--mint {
width: 150px;
height: 150px;
background: var(--color-accent-mint);
bottom: 43rem;
right: 0;
transform: translateX(4rem);
}
.page {
overflow: clip;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: var(--space-7) var(--space-5) var(--space-9);
position: relative;
}
.text-center {
text-align: center;
}
.stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
background: var(--color-bebidas-soft);
padding: var(--space-4);
border-radius: var(--radius-card-md);
}
/* -- Accesibilidad ---------------------------------------------------------
Foco visible consistente para navegación por teclado. */
a:focus-visible,
button:focus-visible {
outline: 3px solid var(--color-ink);
outline-offset: 3px;
border-radius: var(--radius-card-sm);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}