/* ===================================================================== Nosotros — sistema visual Paleta pastel cálida, tipografía suave, movimiento discreto. ===================================================================== */ :root { color-scheme: light; /* --- superficies --- */ --cream: #FFF8F3; --cream-deep: #FDEEE4; --paper: #FFFFFF; --paper-warm: #FFFDFB; /* --- tinta --- */ --ink: #4B3A44; --ink-2: #7C6874; --ink-3: #A99AA3; --line: rgba(75, 58, 68, .10); --line-2: rgba(75, 58, 68, .06); /* --- pasteles --- */ --blush: #FFD9E1; --blush-soft: #FFF0F3; --blush-ink: #DE6E97; --lilac: #E6DBFF; --lilac-soft: #F5F0FF; --lilac-ink: #8C6AD8; --mint: #CFF2E3; --mint-soft: #EEFBF5; --mint-ink: #3FA486; --sky: #D4E9FF; --sky-soft: #EFF7FF; --sky-ink: #5991D4; --butter: #FFEEC4; --butter-soft: #FFFAEC; --butter-ink: #C9931F; --peach: #FFDECB; --peach-soft: #FFF4ED; --peach-ink: #DF8551; /* acento activo: lo cambia el tema de cada persona */ --accent: var(--blush); --accent-soft: var(--blush-soft); --accent-ink: var(--blush-ink); /* --- radios --- */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px; /* --- sombras --- */ --sh-1: 0 1px 2px rgba(122, 80, 100, .04), 0 3px 12px rgba(122, 80, 100, .05); --sh-2: 0 2px 6px rgba(122, 80, 100, .05), 0 12px 32px -14px rgba(122, 80, 100, .28); --sh-3: 0 4px 10px rgba(122, 80, 100, .06), 0 28px 60px -22px rgba(122, 80, 100, .34); --sh-in: inset 0 1px 0 rgba(255, 255, 255, .8); /* --- ritmo --- */ --gap: 16px; /* El contenido se mide en porcentaje de la pantalla, no en píxeles fijos. --gutter es el aire mínimo contra los bordes. */ --maxw: 100%; --gutter: 18px; /* --- curvas --- */ --ease: cubic-bezier(.22, .61, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); } /* Temas por persona (se aplica en ) */ body[data-theme="lilac"] { --accent: var(--lilac); --accent-soft: var(--lilac-soft); --accent-ink: var(--lilac-ink); } body[data-theme="sky"] { --accent: var(--sky); --accent-soft: var(--sky-soft); --accent-ink: var(--sky-ink); } body[data-theme="mint"] { --accent: var(--mint); --accent-soft: var(--mint-soft); --accent-ink: var(--mint-ink); } body[data-theme="blush"] { --accent: var(--blush); --accent-soft: var(--blush-soft); --accent-ink: var(--blush-ink); } body[data-theme="peach"] { --accent: var(--peach); --accent-soft: var(--peach-soft); --accent-ink: var(--peach-ink); } body[data-theme="butter"] { --accent: var(--butter); --accent-soft: var(--butter-soft); --accent-ink: var(--butter-ink); } /* ===================================================================== Reset ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-size: 16px; } body { margin: 0; min-height: 100svh; font-family: 'Quicksand', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.55; color: var(--ink); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); text-underline-offset: 3px; } [hidden] { display: none !important; } ::selection { background: var(--accent); color: var(--ink); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-ink) 55%, transparent); outline-offset: 3px; border-radius: 6px; } /* ===================================================================== Fondo vivo: manchas de color que respiran ===================================================================== */ .blobs { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; filter: blur(60px); } .blob { position: absolute; display: block; border-radius: 50%; opacity: .72; will-change: transform; } .blob--1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: var(--blush); animation: drift-a 34s var(--ease) infinite alternate; } .blob--2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 6vmax; background: var(--lilac); animation: drift-b 41s var(--ease) infinite alternate; } .blob--3 { width: 38vmax; height: 38vmax; left: 4vmax; bottom: -16vmax; background: var(--butter); animation: drift-c 47s var(--ease) infinite alternate; } .blob--4 { width: 34vmax; height: 34vmax; right: -8vmax; bottom: -10vmax; background: var(--mint); animation: drift-a 39s var(--ease) infinite alternate-reverse; } @keyframes drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vmax, 5vmax, 0) scale(1.12); } } @keyframes drift-b { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-7vmax, 7vmax, 0) scale(.94); } } @keyframes drift-c { from { transform: translate3d(0,0,0) scale(.96); } to { transform: translate3d(5vmax, -6vmax, 0) scale(1.14); } } /* Velo que separa el fondo del contenido */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,.14) 48%, transparent 78%), linear-gradient(180deg, rgba(255,248,243,.30), rgba(255,248,243,.66)); pointer-events: none; } .sparkles { position: fixed; inset: 0; z-index: 60; pointer-events: none; } /* ===================================================================== Tipografía ===================================================================== */ .display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-variation-settings: 'opsz' 90, 'SOFT' 40; letter-spacing: -.015em; line-height: 1.1; margin: 0; } .hand { font-family: 'Shantell Sans', 'Quicksand', cursive; font-weight: 600; font-size: 1.02em; line-height: 1.3; } .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .muted { color: var(--ink-2); } .tiny { font-size: .82rem; } /* ===================================================================== Botones ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem; color: var(--ink); background: var(--paper); box-shadow: var(--sh-1), var(--sh-in); transition: transform .18s var(--spring), box-shadow .24s var(--ease), background .24s var(--ease); -webkit-tap-highlight-color: transparent; } .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2), var(--sh-in); } .btn:active { transform: translateY(0) scale(.96); } .btn--primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--paper))); color: color-mix(in srgb, var(--accent-ink) 55%, var(--ink)); } .btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); } .btn--ghost:hover { background: var(--paper); } .btn--sm { padding: 8px 15px; font-size: .84rem; } .btn--icon { padding: 0; width: 40px; height: 40px; border-radius: 50%; } .btn--danger { color: var(--blush-ink); } .btn[disabled] { opacity: .5; pointer-events: none; } /* ===================================================================== Campos ===================================================================== */ .field { display: grid; gap: 7px; } .field > label { font-size: .82rem; font-weight: 700; color: var(--ink-2); padding-left: 4px; } .input, .textarea, .select { width: 100%; border: 0; appearance: none; padding: 13px 16px; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line), var(--sh-in); font-weight: 500; transition: box-shadow .22s var(--ease), transform .22s var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--ink-3); font-weight: 500; } .input:focus, .textarea:focus, .select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink), 0 0 0 5px var(--accent-soft); } .textarea { resize: vertical; min-height: 96px; line-height: 1.6; } .select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* ===================================================================== Portada / clave ===================================================================== */ .gate { min-height: 100svh; display: grid; place-items: center; padding: 32px 20px calc(32px + env(safe-area-inset-bottom)); } .gate__card { width: min(440px, 100%); padding: 40px 30px 34px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--sh-3), var(--sh-in); text-align: center; animation: gate-in .9s var(--spring) both; } @keyframes gate-in { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } } .gate__seal { width: 74px; height: 74px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 2rem; border-radius: 50%; background: linear-gradient(140deg, var(--blush), var(--lilac)); box-shadow: 0 12px 26px -12px var(--blush-ink); animation: beat 2.6s var(--ease) infinite; } @keyframes beat { 0%, 72%, 100% { transform: scale(1); } 76% { transform: scale(1.14); } 82% { transform: scale(1.02); } 88% { transform: scale(1.09); } } .gate__title { font-size: clamp(2rem, 9vw, 2.7rem); margin-bottom: 6px; } .gate__sub { color: var(--ink-2); margin: 0 0 26px; font-size: .95rem; } .gate__who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .who { padding: 18px 10px 15px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 2px var(--line), var(--sh-1); display: grid; gap: 6px; justify-items: center; transition: transform .22s var(--spring), box-shadow .24s var(--ease); } .who:hover { transform: translateY(-3px); } .who:active { transform: scale(.96); } .who__emoji { font-size: 1.9rem; transition: transform .3s var(--spring); } .who:hover .who__emoji { transform: scale(1.16) rotate(-8deg); } .who__name { font-weight: 700; font-size: .95rem; } .who[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2.5px var(--accent-ink), 0 10px 24px -14px var(--accent-ink); } .gate__error { min-height: 22px; font-size: .86rem; font-weight: 700; color: var(--blush-ink); margin: 12px 0 0; } .shake { animation: shake .42s var(--ease); } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } /* ===================================================================== Estructura de la app ===================================================================== */ .shell { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } .topbar { position: sticky; top: 0; z-index: 40; padding: 10px 0; background: color-mix(in srgb, var(--cream) 78%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid var(--line-2); } .topbar__row { width: var(--bar, var(--maxw)); max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; } .brand { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em; line-height: 1; order: 1; margin-right: auto; transition: opacity .2s var(--ease); } .brand:hover { opacity: .7; } /* --- la carita de cada persona: emoji o foto --- */ .face { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); overflow: hidden; } img.face { object-fit: cover; box-shadow: 0 0 0 2px var(--accent); } .face--xs { width: 22px; height: 22px; font-size: .8rem; box-shadow: inset 0 0 0 1.5px var(--accent); } img.face--xs { box-shadow: 0 0 0 1.5px var(--accent); } /* --- el botón de "yo" en la barra de arriba --- */ .me { order: 2; display: flex; align-items: center; gap: 9px; padding: 4px 15px 4px 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 72%, transparent); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: transform .2s var(--spring), box-shadow .24s var(--ease); } .me:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh-1); } .me:active { transform: scale(.96); } .me__name { font-weight: 700; font-size: .88rem; white-space: nowrap; } /* --- navegación en píldoras --- */ .nav { order: 3; flex-basis: 100%; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .nav::-webkit-scrollbar { display: none; } /* El difuminado de los bordes sólo aparece si la fila de verdad no cabe: cuando cabe entera no hay nada que insinuar y no se corta nada. */ .nav--scrolls { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); } .nav__item { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--r-pill); font-size: .87rem; font-weight: 700; color: var(--ink-2); background: color-mix(in srgb, var(--paper) 70%, transparent); box-shadow: inset 0 0 0 1.5px var(--line-2); white-space: nowrap; transition: transform .2s var(--spring), color .2s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease); } .nav__item:hover { transform: translateY(-2px); color: var(--ink); } .nav__item[aria-current="page"] { color: color-mix(in srgb, var(--accent-ink) 88%, var(--ink)); background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent), var(--sh-1); } /* --- páginas --- */ .page { width: var(--maxw); max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; padding: 26px 0 0; animation: page-in .5s var(--ease) both; } @keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .page__head { margin-bottom: 22px; } .page__title { font-size: clamp(1.7rem, 6vw, 2.3rem); margin: 4px 0 6px; } .page__lead { color: var(--ink-2); margin: 0; max-width: 52ch; font-size: .95rem; } .section { margin-bottom: 34px; } .section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .section__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.12rem; margin: 0; margin-right: auto; } /* ===================================================================== Tarjetas ===================================================================== */ .card { position: relative; padding: 20px; border-radius: var(--r-lg); background: var(--paper-warm); box-shadow: var(--sh-1), var(--sh-in); transition: transform .28s var(--spring), box-shadow .3s var(--ease); } .card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-2), var(--sh-in); } .card--tint { background: var(--accent-soft); } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); } .grid--facts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .spacer { margin-left: auto; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 700; background: var(--accent-soft); color: color-mix(in srgb, var(--accent-ink) 62%, var(--ink)); box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--accent) 70%, transparent); } .chip--blush { background: var(--blush-soft); color: var(--blush-ink); box-shadow: inset 0 0 0 1.2px var(--blush); } .chip--lilac { background: var(--lilac-soft); color: var(--lilac-ink); box-shadow: inset 0 0 0 1.2px var(--lilac); } .chip--mint { background: var(--mint-soft); color: var(--mint-ink); box-shadow: inset 0 0 0 1.2px var(--mint); } .chip--sky { background: var(--sky-soft); color: var(--sky-ink); box-shadow: inset 0 0 0 1.2px var(--sky); } .chip--butter { background: var(--butter-soft); color: var(--butter-ink); box-shadow: inset 0 0 0 1.2px var(--butter); } .chip--peach { background: var(--peach-soft); color: var(--peach-ink); box-shadow: inset 0 0 0 1.2px var(--peach); } /* ===================================================================== Vacíos ===================================================================== */ .empty { padding: 40px 24px; border-radius: var(--r-lg); text-align: center; background: color-mix(in srgb, var(--paper) 55%, transparent); box-shadow: inset 0 0 0 2px var(--line-2); } .empty__emoji { font-size: 2.3rem; display: block; margin-bottom: 10px; animation: bob 3.4s var(--ease) infinite; } .empty__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.15rem; margin: 0 0 6px; } .empty__text { color: var(--ink-2); margin: 0 auto 18px; max-width: 34ch; font-size: .9rem; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } } /* ===================================================================== Entrada escalonada ===================================================================== */ .reveal { opacity: 0; transform: translateY(16px); } .reveal.is-in { animation: reveal .62s var(--ease) both; animation-delay: var(--d, 0ms); } @keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ===================================================================== Avisos flotantes ===================================================================== */ .toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px)); } .toast { padding: 11px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--cream); font-size: .88rem; font-weight: 600; box-shadow: var(--sh-3); animation: toast-in .42s var(--spring) both; } .toast--out { animation: toast-out .3s var(--ease) both; } .toast--bad { background: var(--blush-ink); } @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.95); } } /* ===================================================================== Hoja modal ===================================================================== */ .sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(75, 58, 68, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; align-items: end; justify-items: center; animation: fade-in .28s var(--ease) both; overscroll-behavior: contain; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .sheet { width: min(520px, 100%); max-height: 92svh; overflow-y: auto; padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--paper); box-shadow: var(--sh-3); animation: sheet-in .46s var(--spring) both; overscroll-behavior: contain; } @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } } .sheet__grab { width: 42px; height: 4px; border-radius: var(--r-pill); background: var(--line); margin: 6px auto 14px; } .sheet__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.28rem; margin: 0 0 4px; } .sheet__lead { color: var(--ink-2); font-size: .9rem; margin: 0 0 18px; } .sheet__form { display: grid; gap: 14px; } .sheet__actions { display: flex; gap: 10px; margin-top: 6px; } .sheet__actions .btn { flex: 1; } @media (min-width: 640px) { .sheet-backdrop { align-items: center; padding: 24px; } .sheet { border-radius: var(--r-xl); animation-name: sheet-in-center; } @keyframes sheet-in-center { from { opacity: 0; transform: translateY(28px) scale(.95); } to { opacity: 1; transform: none; } } } /* ===================================================================== Movimiento reducido ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .sparkles { display: none; } } /* ===================================================================== Inicio — contador y cuenta regresiva ===================================================================== */ .hero { position: relative; overflow: hidden; padding: 34px 24px 30px; border-radius: var(--r-xl); text-align: center; background: linear-gradient(150deg, var(--blush-soft), var(--lilac-soft) 55%, var(--butter-soft)); box-shadow: var(--sh-2), var(--sh-in); } .hero__names { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(1.9rem, 8vw, 2.9rem); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 4px; } .hero__amp { color: var(--blush-ink); font-style: italic; font-weight: 400; padding: 0 .12em; } .hero__since { color: var(--ink-2); font-size: .9rem; margin: 0 0 22px; } .counter { display: flex; align-items: flex-end; justify-content: center; gap: 4px; } .counter__num { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(3.4rem, 17vw, 5.6rem); line-height: .9; letter-spacing: -.04em; display: inline-flex; } /* El degradado va en cada dígito: como el dígito se anima con transform, el recorte de texto del contenedor no lo alcanzaría. */ .counter__digit { display: inline-block; background: linear-gradient(140deg, var(--blush-ink), var(--lilac-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop-digit .55s var(--spring) both; animation-delay: var(--d, 0ms); } @keyframes pop-digit { from { opacity: 0; transform: translateY(.35em) rotate(-8deg) scale(.7); } to { opacity: 1; transform: none; } } .counter__unit { padding-left: 12px; font-weight: 700; font-size: 1rem; color: var(--ink-2); padding-bottom: .5em; } .hero__breakdown { margin: 16px 0 0; color: var(--ink-2); font-size: .88rem; } .hero__hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero__heart { position: absolute; bottom: -30px; font-size: 1rem; opacity: 0; animation: float-up var(--dur, 9s) linear infinite; animation-delay: var(--d, 0s); } @keyframes float-up { 0% { opacity: 0; transform: translateY(0) scale(.6) rotate(0deg); } 12% { opacity: .75; } 85% { opacity: .5; } 100% { opacity: 0; transform: translateY(-46vh) scale(1.1) rotate(22deg); } } /* --- cuenta regresiva --- */ .countdown { display: flex; align-items: center; gap: 16px; } .countdown__badge { flex: none; width: 68px; padding: 10px 4px; border-radius: var(--r-md); display: grid; justify-items: center; gap: 1px; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent); } .countdown__n { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--accent-ink); } .countdown__n--today { font-size: 1.15rem; } .countdown__unit { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .countdown__meta { display: grid; gap: 3px; min-width: 0; } .countdown__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.02rem; line-height: 1.25; } .countdown__when { font-size: .82rem; color: var(--ink-2); } .ring { --p: 0; width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: conic-gradient(var(--accent-ink) calc(var(--p) * 1%), var(--line-2) 0); transition: --p 1s var(--ease); } .ring::after { content: ''; position: absolute; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-warm); } .ring > * { position: relative; } /* --- ánimo del día --- */ .moods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .mood { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 18px 14px; } .mood__face { font-size: 2.4rem; line-height: 1; transition: transform .32s var(--spring); } .mood:hover .mood__face { transform: scale(1.12) rotate(6deg); } .mood__who { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .88rem; } .mood__note { font-size: .84rem; color: var(--ink-2); } .mood-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; } .mood-picker__opt { aspect-ratio: 1; display: grid; place-items: center; font-size: 1.6rem; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: transform .22s var(--spring), box-shadow .22s var(--ease); } .mood-picker__opt:hover { transform: translateY(-3px) scale(1.06); } .mood-picker__opt[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2.5px var(--accent-ink); transform: scale(1.06); } /* ===================================================================== Fichas de cada uno ===================================================================== */ .people-switch { display: flex; gap: 5px; padding: 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 72%, transparent); box-shadow: inset 0 0 0 1.5px var(--line-2); margin-bottom: 20px; } .people-switch__opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: .9rem; color: var(--ink-2); transition: background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease); } /* Con tres opciones en una pantalla angosta el texto se parte en dos líneas: acá se aprieta lo justo para que cada una quepa en una sola. */ @media (max-width: 479px) { .people-switch { gap: 4px; padding: 4px; } .people-switch__opt { padding: 8px 8px; font-size: .84rem; gap: 5px; } } .people-switch__opt[aria-pressed="false"] { opacity: .62; } .people-switch__opt[aria-pressed="false"]:hover { opacity: 1; } .people-switch__opt[aria-pressed="true"] { background: linear-gradient(140deg, var(--tint, var(--accent)), color-mix(in srgb, var(--tint, var(--accent)) 45%, var(--paper))); color: color-mix(in srgb, var(--tint-ink, var(--accent-ink)) 62%, var(--ink)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint-ink, var(--accent-ink)) 34%, transparent), 0 8px 18px -9px var(--tint-ink, var(--accent-ink)); transform: scale(1.015); } .people-switch__opt[aria-pressed="true"] .face { background: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint-ink, var(--accent-ink)) 45%, transparent); } .fact { display: grid; gap: 6px; text-align: left; width: 100%; padding: 17px 18px; min-height: 108px; align-content: start; } .fact__top { display: flex; align-items: center; gap: 8px; } .fact__emoji { font-size: 1.15rem; transition: transform .32s var(--spring); } .fact:hover .fact__emoji { transform: scale(1.2) rotate(-10deg); } .fact__label { font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; } .fact__value { font-family: 'Shantell Sans', cursive; font-weight: 600; font-size: 1.08rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; } .fact__value--empty { font-family: 'Quicksand', sans-serif; font-size: .88rem; font-weight: 600; color: var(--ink-3); } .fact--mine { background: var(--accent-soft); } .fact__asked { margin-top: 3px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } /* Pregunta que hizo la otra persona y todavía espera respuesta. */ .fact--pending { background: var(--butter-soft); box-shadow: inset 0 0 0 2px var(--butter), var(--sh-1); } .fact--pending .fact__asked { color: var(--butter-ink); } .fact--pending .fact__value--empty { color: var(--butter-ink); } .fact--mine::after { content: '✎'; position: absolute; top: 14px; right: 15px; font-size: .85rem; color: var(--accent-ink); opacity: 0; transition: opacity .24s var(--ease), transform .24s var(--spring); transform: translateY(-3px); } .fact--mine:hover::after { opacity: .8; transform: none; } .swatch { display: inline-block; vertical-align: -4px; margin-right: 6px; width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.08), var(--sh-1); } /* ===================================================================== Regalos ===================================================================== */ .gift { display: grid; gap: 10px; padding: 0; overflow: hidden; } .gift__photo { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--accent-soft); } .gift__body { display: grid; gap: 8px; padding: 0 18px 18px; } .gift__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.05rem; margin: 0; } .gift__note { font-size: .87rem; color: var(--ink-2); margin: 0; } .gift--done { opacity: .6; } .gift--done .gift__title { text-decoration: line-through; } .hearts-rating { display: inline-flex; gap: 2px; font-size: .8rem; letter-spacing: 1px; } .secret { border-radius: var(--r-sm); padding: 9px 13px; font-size: .82rem; font-weight: 700; background: var(--butter-soft); color: var(--butter-ink); box-shadow: inset 0 0 0 1.5px var(--butter); display: flex; align-items: center; gap: 7px; } /* ===================================================================== Recuerdos (galería polaroid) ===================================================================== */ /* Rejilla, no columnas: así se llenan de izquierda a derecha y todas quedan del mismo ancho, ocupando el espacio disponible. */ .polas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--gap); align-items: start; } .slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; align-items: start; } .pola { padding: 13px 13px 16px; border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--sh-2); transition: transform .34s var(--spring), box-shadow .34s var(--ease); transform: rotate(var(--tilt, 0deg)); cursor: zoom-in; width: 100%; text-align: left; } .pola:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: var(--sh-3); z-index: 2; } .pola__img { width: 100%; border-radius: 7px; background: linear-gradient(140deg, var(--blush-soft), var(--lilac-soft)); aspect-ratio: 4 / 5; object-fit: cover; } .pola__cap { padding: 12px 4px 2px; display: grid; gap: 3px; } .pola__title { font-family: 'Shantell Sans', cursive; font-weight: 600; font-size: 1.02rem; line-height: 1.3; } .pola__date { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(58, 44, 52, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; padding: 22px; animation: fade-in .3s var(--ease) both; } .lightbox__inner { max-width: 640px; width: 100%; display: grid; gap: 14px; justify-items: center; animation: sheet-in-center .5s var(--spring) both; } @keyframes sheet-in-center { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } .lightbox__img { max-height: 66svh; width: auto; border-radius: var(--r-md); box-shadow: var(--sh-3); } .lightbox__cap { color: #fff; text-align: center; display: grid; gap: 4px; } .lightbox__title { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; } .lightbox__note { opacity: .82; font-size: .9rem; max-width: 46ch; } /* --- subir foto --- */ .dropzone { display: grid; place-items: center; gap: 6px; padding: 26px 18px; border-radius: var(--r-md); background: var(--accent-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-ink) 30%, transparent); text-align: center; font-size: .88rem; font-weight: 700; color: color-mix(in srgb, var(--accent-ink) 62%, var(--ink)); transition: transform .24s var(--spring), box-shadow .24s var(--ease); cursor: pointer; position: relative; overflow: hidden; } .dropzone:hover { transform: translateY(-2px); } .dropzone__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dropzone__emoji { font-size: 1.7rem; } .dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* ===================================================================== Línea de tiempo ===================================================================== */ .timeline { position: relative; display: grid; gap: 18px; padding-left: 34px; } .timeline::before { content: ''; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2.5px; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--blush), var(--lilac), var(--mint)); } .tl { position: relative; } .tl::before { content: attr(data-emoji); position: absolute; left: -34px; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; font-size: .9rem; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px var(--cream), var(--sh-1); transition: transform .3s var(--spring); } .tl:hover::before { transform: scale(1.18) rotate(-8deg); } .tl__date, .tl__title { display: block; } .tl__date { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-ink); } .tl__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.06rem; margin: 3px 0 4px; } .tl__note { font-size: .88rem; color: var(--ink-2); margin: 0; } /* ===================================================================== Cartitas ===================================================================== */ .letter { position: relative; display: grid; gap: 9px; padding: 20px; min-height: 150px; align-content: start; background: linear-gradient(155deg, var(--butter-soft), var(--paper) 70%); overflow: hidden; text-align: left; width: 100%; } .letter::after { content: ''; position: absolute; right: -26px; top: -26px; width: 76px; height: 76px; border-radius: 50%; background: var(--butter); opacity: .5; transition: transform .5s var(--spring); } .letter:hover::after { transform: scale(1.3); } .letter__seal { font-size: 1.7rem; transition: transform .4s var(--spring); } .letter:hover .letter__seal { transform: scale(1.14) rotate(-10deg); } .letter__title { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.05rem; margin: 0; position: relative; } .letter__from { font-size: .8rem; color: var(--ink-2); } .letter--locked { background: linear-gradient(155deg, var(--lilac-soft), var(--paper) 70%); } .letter--locked::after { background: var(--lilac); } .letter--locked .letter__title { color: var(--ink-3); } .letter-open { padding: 26px 24px; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--butter-soft), var(--paper) 60%); box-shadow: inset 0 0 0 1.5px var(--butter); animation: unfold .7s var(--spring) both; transform-origin: top center; } @keyframes unfold { from { opacity: 0; transform: perspective(700px) rotateX(-72deg); } to { opacity: 1; transform: none; } } .letter-open__body { font-family: 'Shantell Sans', cursive; font-weight: 400; font-size: 1.06rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } /* ===================================================================== Planes ===================================================================== */ .plan-row { display: flex; align-items: center; gap: 4px; padding: 0 10px 0 0; overflow: hidden; } .plan { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; text-align: left; flex: 1; min-width: 0; border-radius: var(--r-lg); transition: background .24s var(--ease); } .plan:hover { background: var(--accent-soft); } .plan__edit { flex: none; font-size: .9rem; color: var(--accent-ink); background: var(--accent-soft); box-shadow: none; opacity: .8; transition: opacity .24s var(--ease), transform .24s var(--spring), color .24s var(--ease); } .plan__edit svg { width: 16px; height: 16px; } .plan__edit:hover { opacity: 1; color: var(--accent-ink); transform: scale(1.1); box-shadow: none; } .plan__box { flex: none; width: 25px; height: 25px; margin-top: 1px; border-radius: 9px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); transition: background .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--spring); } .plan__box svg { width: 15px; height: 15px; } .plan__box path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .38s var(--ease); } .plan-row.plan--done .plan__box { background: var(--mint-ink); box-shadow: inset 0 0 0 2px var(--mint-ink); transform: scale(1.04); } .plan-row.plan--done .plan__box path { stroke-dashoffset: 0; } .plan__body { display: grid; gap: 2px; } .plan__title { font-weight: 700; transition: color .3s var(--ease); } .plan-row.plan--done .plan__title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--mint-ink); } .plan__note { font-size: .84rem; color: var(--ink-2); } .progress { height: 9px; border-radius: var(--r-pill); background: var(--line-2); overflow: hidden; } .progress__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--mint-ink), var(--sky-ink)); width: 0; transition: width .9s var(--spring); } /* ===================================================================== Frasco de razones ===================================================================== */ .jar { position: relative; display: grid; place-items: center; gap: 16px; padding: 34px 24px; border-radius: var(--r-xl); text-align: center; background: linear-gradient(165deg, var(--mint-soft), var(--sky-soft) 60%, var(--lilac-soft)); box-shadow: var(--sh-2), var(--sh-in); overflow: hidden; } .jar__glass { font-size: 3.4rem; transition: transform .4s var(--spring); } .jar:hover .jar__glass { transform: rotate(-7deg) scale(1.06); } .jar__shake { animation: jar-shake .6s var(--ease); } @keyframes jar-shake { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-12deg) scale(1.06); } 45% { transform: rotate(11deg) scale(1.06); } 70% { transform: rotate(-6deg) scale(1.03); } } .jar__note { min-height: 76px; display: grid; place-items: center; width: min(420px, 100%); padding: 20px 22px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--sh-1); font-family: 'Shantell Sans', cursive; font-weight: 600; font-size: 1.12rem; line-height: 1.5; color: var(--ink); } .jar__note--new { animation: slip .58s var(--spring) both; } @keyframes slip { from { opacity: 0; transform: translateY(-16px) rotate(-3deg) scale(.9); } to { opacity: 1; transform: none; } } .slip { padding: 15px 17px; border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--sh-1); font-family: 'Shantell Sans', cursive; font-weight: 500; font-size: .96rem; line-height: 1.5; transform: rotate(var(--tilt, 0deg)); transition: transform .3s var(--spring); text-align: left; width: 100%; } .slip:hover { transform: rotate(0) translateY(-3px); } /* ===================================================================== Playlist ===================================================================== */ .song { display: flex; align-items: center; gap: 13px; padding: 13px 16px; text-align: left; width: 100%; } .song__disc { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: radial-gradient(circle at 50% 50%, var(--paper) 0 16%, var(--accent) 17%, color-mix(in srgb, var(--accent-ink) 55%, var(--accent)) 100%); box-shadow: var(--sh-1); animation: spin 7s linear infinite paused; } .song:hover .song__disc { animation-play-state: running; } @keyframes spin { to { transform: rotate(360deg); } } .song__meta { display: grid; gap: 1px; min-width: 0; margin-right: auto; } .song__title { font-weight: 700; overflow-wrap: anywhere; } .song__artist { font-size: .83rem; color: var(--ink-2); overflow-wrap: anywhere; } .song .btn { flex: none; white-space: nowrap; } /* ===================================================================== Ajustes ===================================================================== */ .setting { display: flex; align-items: center; gap: 12px; padding: 15px 17px; } .setting__meta { display: grid; gap: 1px; margin-right: auto; } .setting__title { font-weight: 700; font-size: .93rem; } .setting__note { font-size: .82rem; color: var(--ink-2); } /* ===================================================================== Finanzas ===================================================================== */ .finance-hero { display: grid; gap: 24px; justify-items: center; padding: 30px 24px; border-radius: var(--r-xl); background: linear-gradient(155deg, var(--mint-soft), var(--sky-soft) 55%, var(--lilac-soft)); box-shadow: var(--sh-2), var(--sh-in); } .finance-hero__ring { position: relative; display: grid; place-items: center; } .donut { width: 148px; height: 148px; transform: rotate(-90deg); } .donut__track { fill: none; stroke: rgba(75, 58, 68, .09); stroke-width: 12; } .donut__fill { fill: none; stroke: var(--mint-ink); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); } .finance-hero__pct { position: absolute; display: grid; justify-items: center; line-height: 1; } .finance-hero__pct b { font-family: 'Fraunces', Georgia, serif; font-size: 1.9rem; font-weight: 700; color: var(--ink); } .finance-hero__pct small { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; } .finance-hero__numbers { display: grid; gap: 18px; width: 100%; } .figure { display: grid; gap: 3px; align-content: start; } .figure__label { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .figure__value { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.28rem; letter-spacing: -.02em; overflow-wrap: anywhere; } .figure__value--good { color: var(--mint-ink); } .figure--big .figure__value { font-size: 2.05rem; } .figure__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* --- tarjeta de deuda --- */ .debt { display: grid; gap: 9px; align-content: start; } .debt__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .debt__title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.1rem; margin-right: auto; } .debt__lender { font-size: .82rem; color: var(--ink-2); margin-top: -6px; } .debt__figures { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .debt__left { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.55rem; letter-spacing: -.02em; } .debt__of { font-size: .84rem; color: var(--ink-3); } .debt__meta { font-size: .82rem; color: var(--ink-2); margin: 0; } .debt__note { font-size: .84rem; color: var(--ink-2); margin: 0; font-style: italic; } .debt--paid { background: var(--mint-soft); } .debt--paid .debt__left { color: var(--mint-ink); } .debt--paid .progress__fill { background: var(--mint-ink); } /* --- abonos --- */ .payment { display: flex; align-items: center; gap: 14px; padding: 13px 17px; text-align: left; width: 100%; } .payment__amount { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.02rem; color: var(--mint-ink); flex: none; } .payment__meta { display: grid; gap: 1px; min-width: 0; } .payment__debt { font-weight: 700; font-size: .9rem; } @media (min-width: 720px) { .finance-hero { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 34px; padding: 34px 34px; } .donut { width: 172px; height: 172px; } } /* ===================================================================== Firma ===================================================================== */ .signature { font-family: 'Shantell Sans', cursive; font-weight: 400; font-size: 1.02rem; line-height: 1.6; text-align: center; color: var(--ink-2); margin: 40px auto 0; max-width: 34ch; } .signature__name { display: block; font-weight: 700; font-size: 1.16rem; color: var(--accent-ink); } /* ===================================================================== Anchos grandes ===================================================================== */ @media (min-width: 720px) { :root { --maxw: 92%; --bar: 92%; --gutter: 26px; --gap: 18px; } .polas { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } .moods { grid-template-columns: repeat(2, 1fr); } } /* Pantallas de computador: el contenido ocupa la mayor parte del ancho y además crece, en vez de quedar chiquito en el medio. */ /* Computador: marca, secciones y "yo" comparten una sola línea. */ @media (min-width: 1000px) { .topbar__row { flex-wrap: nowrap; gap: 16px; } .brand { font-size: 1.62rem; margin-right: 0; } .nav { order: 2; flex: 1 1 auto; flex-basis: auto; min-width: 0; justify-content: center; gap: 5px; padding: 0; scroll-snap-type: none; } .nav__item { font-size: .8rem; padding: 7px 10px; gap: 4px; } .me { order: 3; flex: none; } .nav { gap: 4px; } /* Sin emojis en las píldoras: es lo que hace que las once secciones quepan enteras en una línea. En el celular sí se conservan, porque ahí la fila se desliza igual y el emoji ayuda a encontrar la sección de un vistazo. */ .nav__item > span[aria-hidden] { display: none; } } /* Pantalla de computador angosta: el nombre propio cede lo que falta. */ @media (min-width: 1000px) and (max-width: 1399px) { .me__name { display: none; } .me { padding: 4px; } .brand { font-size: 1.35rem; } } @media (min-width: 1080px) { html { font-size: 17px; } /* Dos bloques cortos comparten la fila en vez de estirarse solos. */ .cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 1.6); align-items: start; } .cols > .section { margin-bottom: 0; } :root { --maxw: 82%; --bar: 90%; --gutter: 32px; --gap: 22px; } .page { padding-top: 36px; } .grid--2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--facts { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); } .polas { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); } .slips { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); } .fact { min-height: 132px; padding: 21px 22px; } .card { padding: 24px; } /* El frasco no se queda perdido en el medio de una fila muy ancha. */ .jar { padding: 40px 24px; gap: 20px; } .jar__glass { font-size: 4.4rem; } .jar__note { font-size: 1.2rem; padding: 24px 26px; } } @media (min-width: 1500px) { html { font-size: 18px; } :root { --maxw: 76%; --bar: 90%; } .polas { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }