:root { color-scheme: light; --rose: #fce8f0; --ink: #74252d; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; min-height: 100svh; color: #63383f; background: linear-gradient(180deg, #fff7fa 0%, var(--rose) 46%, #fffafb 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.page { width: min(100% - 36px, 620px); margin-inline: auto; }
.brand { padding: 36px 0 30px; text-align: center; }
.brand picture { display: block; }
.brand img { display: block; width: min(72%, 280px); height: auto; margin-inline: auto; animation: arrive 700ms ease-out both; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.banners { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; }
.banner { display: block; border: 1px solid #6E050D; border-radius: 10px; box-shadow: 0 5px 16px #6e050d1a, 0 2px 5px #6e050d0d; transition: transform 220ms ease, box-shadow 220ms ease; -webkit-tap-highlight-color: transparent; }
.banner picture, .banner img { display: block; width: 100%; }
.banner img { height: auto; border-radius: inherit; }
.banner picture { border-radius: 9px; }
.banners li.entering { animation: arrive 550ms ease-out both; animation-delay: var(--delay, 0ms); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.banner:active { transform: scale(.985); }
.footer { padding: 30px 0 28px; text-align: center; }
.whatsapp { display: inline-flex; min-height: 44px; justify-content: center; align-items: center; gap: 9px; padding: 10px 18px; color: #073b20; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid #25d366; border-radius: 999px; background: #25d366; transition: background 180ms ease, transform 180ms ease; }
.whatsapp svg { flex-shrink: 0; }
.whatsapp:active { transform: scale(.98); }
.footer p { margin: 20px 0 0; font-size: 12px; line-height: 1.7; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) { .banner:hover { transform: translateY(-3px); box-shadow: 0 9px 22px #6e050d26, 0 2px 6px #6e050d12; } .whatsapp:hover { background: #20bd5a; } }
@media (min-width: 768px) { .brand { padding: 44px 0 36px; } .banners { gap: 20px; } .footer { padding-bottom: 36px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .banner:hover, .banner:active, .whatsapp:active { transform: none; } }