/* Survivor — marketing & legal site. "Luto Naranja" design language (from the social-media brand manual): mourning black + party orange over bone paper; Anton shouts the headlines, Permanent Marker scribbles the jokes, Archivo does the small print, and Times only ever appears inside an esquela. No build, no dependencies. */ /* The Google Fonts stylesheet is linked from each page's , not @import-ed here: an @import cannot start downloading until this file has itself been fetched and parsed, which serialises two round trips in front of the first paint and costs real LCP. The link starts both in parallel. */ :root { /* Core palette */ --luto: #17120e; /* mourning black (warm) */ --luto-2: #221a14; /* raised surfaces on black */ --luto-3: #2c221a; /* borders on black */ --hueso: #f5efe4; /* esquela paper */ --hueso-2: #fbf7f1; /* page ground */ --naranja: #f97316; /* the brand, the party */ --naranja-osc: #ea580c; --naranja-claro: #fb8b38; --sangre: #e11d48; /* eliminations only */ --melocoton: #f8bc91; /* fiambre skin */ --vivo: #10b981; /* survival, tiny doses */ --tinta: #1b1410; /* ink on paper */ --tinta-2: #5c4f43; --mudo: #8a7a6b; --hueso-mudo: #c9b8a6; /* muted text on black */ --linea: #e3d7c8; /* hairlines on paper */ /* Type */ --display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; --marker: "Permanent Marker", "Bradley Hand", "Segoe Print", cursive; --body: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --serif: "Times New Roman", Georgia, serif; /* esquelas only */ --radius: 18px; --radius-sm: 12px; --shadow: 0 6px 24px -12px rgba(27, 20, 16, 0.35); --max-width: 1080px; /* Legacy aliases (older pages reference these) */ --sunset: linear-gradient(135deg, #fb8b38 0%, #f97316 55%, #ea580c 100%); --primary-50: #fff7ed; --primary-100: #ffedd5; --primary-300: #fdba74; --primary-500: #f97316; --primary-600: #ea580c; --primary-700: #c2410c; --primary-900: #7c2d12; --success: #10b981; --danger: #e11d48; --ink: #1b1410; --stone-700: #44403c; --stone-600: #5c4f43; --stone-400: #8a7a6b; --stone-200: #e3d7c8; --stone-100: #f3ebe0; --stone-50: #fbf7f1; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body); color: var(--tinta); background: var(--hueso-2); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--naranja-osc); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; } .marker { font-family: var(--marker); } /* ───── Header (always mourning black) ───── */ .site-header { position: sticky; top: 0; z-index: 10; background: rgba(23, 18, 14, 0.92); backdrop-filter: saturate(160%) blur(12px); border-bottom: 3px solid var(--naranja); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--hueso); } .brand:hover { text-decoration: none; color: var(--naranja-claro); } .brand .brand-logo { border-radius: 7px; } .site-nav { display: flex; gap: 22px; align-items: center; } .site-nav a { color: var(--hueso-mudo); font-weight: 600; font-size: 0.92rem; } .site-nav a:hover { color: var(--naranja-claro); text-decoration: none; } /* Language switcher — compact dropdown (native
/, no JS). */ .lang-switch { position: relative; } .lang-switch summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--luto-3); border-radius: 8px; padding: 4px 10px; font-size: 0.8rem; font-weight: 700; color: var(--hueso-mudo); letter-spacing: 0.06em; transition: border-color 0.2s ease, color 0.2s ease; } .lang-switch summary::-webkit-details-marker { display: none; } .lang-switch summary::after { content: "▾"; font-size: 0.6rem; opacity: 0.8; } .lang-switch:hover summary, .lang-switch[open] summary { border-color: var(--naranja); color: var(--naranja-claro); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; display: flex; flex-direction: column; min-width: 168px; background: var(--luto-2); border: 1px solid var(--luto-3); border-radius: 12px; padding: 6px; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6); z-index: 30; } .lang-menu a { padding: 8px 10px; border-radius: 7px; font-size: 0.85rem; font-weight: 600; color: var(--hueso-mudo); } .lang-menu a:hover { background: var(--luto-3); color: var(--hueso); text-decoration: none; } /* ───── Hero (mourning black) ───── */ .hero { background: var(--luto); color: var(--hueso); padding: 88px 0 0; overflow: hidden; } .hero .eyebrow { color: var(--naranja); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; animation: fadeUp 0.7s ease both; } .hero h1 { font-size: clamp(3rem, 9vw, 7rem); color: var(--hueso); max-width: 14ch; text-wrap: balance; animation: fadeUp 0.7s ease 0.08s both; } .hero h1 .naranja { color: var(--naranja); } .hero .lead { max-width: 44ch; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--hueso-mudo); margin-top: 22px; animation: fadeUp 0.7s ease 0.16s both; } .hero .lead strong { color: var(--hueso); } .hero .scrawl { display: inline-block; font-family: var(--marker); color: var(--melocoton); font-size: clamp(1.15rem, 2.4vw, 1.5rem); transform: rotate(-2deg); margin-top: 16px; animation: fadeUp 0.7s ease 0.24s both; } .hero .store-badges { justify-content: flex-start; animation: fadeUp 0.7s ease 0.32s both; } .hero .open-app { margin-top: 14px; font-size: 0.95rem; color: var(--hueso-mudo); animation: fadeUp 0.7s ease 0.36s both; } .hero .open-app a { color: var(--naranja-claro); font-weight: 700; } /* The fallen, and the one still standing */ .fiambres-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 3vw, 40px); margin-top: 56px; } .fiambres-row svg { display: block; height: clamp(64px, 11vw, 120px); width: auto; } .x-eye { opacity: 0; animation: xin 0.3s ease forwards; } .fiambres-row svg:nth-child(1) .x-eye { animation-delay: 0.5s; } .fiambres-row svg:nth-child(2) .x-eye { animation-delay: 0.8s; } .fiambres-row svg:nth-child(4) .x-eye { animation-delay: 1.1s; } .fiambres-row svg:nth-child(5) .x-eye { animation-delay: 1.4s; } @keyframes xin { to { opacity: 1; } } .campo { height: 6px; background: var(--naranja); border-radius: 6px 6px 0 0; } /* ───── Store badges ───── */ .store-badges { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 12px; background: var(--hueso); color: var(--luto); padding: 11px 22px; border-radius: var(--radius-sm); box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease; } .store-badge svg { width: 24px; height: 24px; fill: currentColor; flex: none; } .store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .store-badge .sb-text small { font-size: 0.68rem; font-weight: 600; opacity: 0.65; letter-spacing: 0.02em; } .store-badge .sb-text b { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.01em; } .store-badge:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 14px 30px -12px rgba(249, 115, 22, 0.55); } .store-badge.soon { opacity: 0.55; pointer-events: none; } /* On paper/orange grounds, badges go black */ .band .store-badge, .cta .store-badge { background: var(--luto); color: var(--hueso); } /* The web build is the one you can play right now, so it wears the brand colour. On the orange CTA ground it falls back to black, or it would disappear. */ .store-badge.web { background: var(--naranja); color: var(--luto); } .band .store-badge.web, .cta .store-badge.web { background: var(--luto); color: var(--hueso); } /* The globe is drawn with strokes, unlike the two solid store marks. */ .store-badge.web svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } /* ───── Bands (page sections) ───── */ .band { padding: 88px 0; } .band.luto { background: var(--luto); color: var(--hueso); } .band.papel { background: var(--hueso-2); } .band-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--naranja); border-top: 3px solid currentColor; display: table; padding-top: 10px; margin-bottom: 10px; } .band.papel .band-eyebrow { border-top-color: var(--tinta); color: var(--naranja-osc); } .band h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.95; font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 14px; text-wrap: balance; } .band .band-sub { color: var(--tinta-2); max-width: 58ch; margin-bottom: 44px; font-size: 1.05rem; } .band.luto .band-sub { color: var(--hueso-mudo); } /* ───── How to play ───── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .step { background: #fff; border: 1px solid var(--linea); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform 0.22s ease; } .step:hover { transform: translateY(-5px); } .step .num { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--naranja); display: block; margin-bottom: 12px; } .step h3 { font-size: 1.05rem; margin-bottom: 6px; } .step p { color: var(--tinta-2); font-size: 0.95rem; } .step.regla { background: var(--luto); border-color: var(--luto); color: var(--hueso); } .step.regla .num { color: var(--sangre); } .step.regla p { color: var(--hueso-mudo); } /* Hazard tape ("golden rule" motif) */ .tape { display: inline-block; background: repeating-linear-gradient(45deg, var(--naranja) 0 16px, var(--luto) 16px 32px); color: var(--hueso-2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); border-radius: 4px; transform: rotate(-1deg); padding: 8px 16px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; } /* ───── Game modes ───── */ .modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; } .modo { background: var(--luto-2); border: 1px solid var(--luto-3); border-radius: var(--radius); padding: 30px; transition: transform 0.22s ease; } .modo:hover { transform: translateY(-5px); } .modo .tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--naranja-claro); margin-bottom: 12px; } .modo h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; margin-bottom: 10px; } .modo p { color: var(--hueso-mudo); font-size: 0.98rem; } .modo p strong { color: var(--hueso); } .modo.extremo { border: 2px solid var(--naranja); position: relative; } .modo.extremo .sello { position: absolute; top: -16px; right: 20px; background: var(--naranja); color: var(--luto); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; transform: rotate(2deg); } /* ───── Features ───── */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } .feature { background: #fff; border: 1px solid var(--linea); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform 0.22s ease; } .feature:hover { transform: translateY(-4px); } .feature .icon { font-size: 1.4rem; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--hueso); margin-bottom: 14px; } .feature h3 { font-size: 1rem; margin-bottom: 4px; } .feature p { color: var(--tinta-2); font-size: 0.92rem; } /* ───── Esquela (obituary card — always paper, serif allowed here only) ───── */ .esquela-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; } .esquela { background: var(--hueso); color: var(--tinta); font-family: var(--serif); width: min(420px, 100%); border-radius: 6px; padding: 18px; box-shadow: 0 14px 40px -18px rgba(27, 20, 16, 0.5); transform: rotate(-1deg); } .esquela .marco { border: 3px double var(--tinta); outline: 1px solid var(--tinta); outline-offset: 3px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px; gap: 5px; } .esquela .cruz { font-size: 2rem; line-height: 1; color: var(--sangre); font-weight: 700; } .esquela .anios { font-size: 0.78rem; letter-spacing: 0.18em; } .esquela .nombre { font-size: 1.3rem; font-weight: 700; margin: 2px 0; } .esquela .causa { font-size: 0.92rem; font-style: italic; max-width: 30ch; margin: 5px 0; } .esquela .firma { font-size: 0.78rem; margin-top: 6px; color: var(--tinta-2); } .esquela .brandline { font-family: var(--display); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--naranja-osc); margin-top: 10px; } .esquela-nota { font-family: var(--marker); color: var(--naranja-osc); font-size: 1.15rem; transform: rotate(-1.5deg); text-align: center; } /* ───── Final CTA (party orange) ───── */ .cta { background: var(--naranja); color: var(--luto); padding: 88px 0; text-align: center; } .cta h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.95; font-size: clamp(2.6rem, 7vw, 5rem); text-wrap: balance; } .cta p { margin: 16px auto 0; max-width: 52ch; font-weight: 600; } .cta .store-badges { justify-content: center; } /* ───── Legal / prose pages (esquela paper, quiet) ───── */ .prose { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; } .prose h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 2.4rem; line-height: 1; margin-bottom: 8px; } .prose .updated { color: var(--mudo); font-size: 0.9rem; margin-bottom: 40px; } .prose h2 { font-size: 1.2rem; margin: 36px 0 10px; } .prose p, .prose li { color: var(--tinta-2); font-size: 0.98rem; } .prose ul { padding-left: 22px; margin: 10px 0; } .prose .notice { background: var(--hueso); border: 1px solid var(--linea); border-left: 4px solid var(--naranja); border-radius: var(--radius-sm); padding: 16px 20px; margin: 24px 0; } .prose .notice p { color: var(--tinta); margin: 0; } .prose table { width: 100%; border-collapse: collapse; margin: 18px 0; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); } .prose th { color: var(--tinta); background: var(--hueso-2); } /* FAQ / edge cases — still a quiet prose page, but scannable enough to use mid-match. */ .faq-page { max-width: 840px; } .faq-page > .eyebrow { color: var(--naranja-osc); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; } .faq-page h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); } .faq-page h1 .naranja { color: var(--naranja-osc); } .faq-intro { max-width: 66ch; font-size: 1.08rem !important; margin-top: 20px; } .faq-index { display: flex; flex-wrap: wrap; gap: 9px; margin: 30px 0 46px; } .faq-index a { border: 1px solid var(--linea); border-radius: 999px; background: var(--hueso); padding: 7px 13px; color: var(--tinta-2); font-size: 0.86rem; font-weight: 700; } .faq-index a:hover { border-color: var(--naranja); color: var(--naranja-osc); text-decoration: none; } .faq-section { scroll-margin-top: 88px; margin-top: 52px; } .faq-section h2 { font-family: var(--display); font-size: 1.65rem; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 3px solid var(--naranja); padding-bottom: 9px; margin-bottom: 14px; } .faq-section details { border-bottom: 1px solid var(--linea); } .faq-section summary { position: relative; cursor: pointer; list-style: none; padding: 18px 42px 18px 0; color: var(--tinta); font-weight: 800; } .faq-section summary::-webkit-details-marker { display: none; } .faq-section summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--naranja-osc); font-size: 1.55rem; font-weight: 400; } .faq-section details[open] summary::after { content: "−"; } .faq-section details > div { padding: 0 34px 18px 0; } .faq-section details p + p { margin-top: 10px; } .faq-example { background: var(--luto); color: var(--hueso); border-radius: var(--radius-sm); margin-top: 24px; padding: 20px; } .faq-example strong { color: var(--naranja-claro); text-transform: uppercase; letter-spacing: 0.08em; } .faq-example p { color: var(--hueso-mudo); margin-top: 6px; } .faq-help { margin-top: 52px !important; } /* ───── Footer ───── */ .site-footer { background: var(--luto); color: var(--hueso-mudo); border-top: 3px solid var(--naranja); padding: 44px 0 40px; font-size: 0.9rem; } .site-footer .container { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; } .site-footer a { color: var(--hueso); } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .footer-scrawl { font-family: var(--marker); color: var(--naranja-claro); transform: rotate(-1deg); } /* ───── Video (the promo pieces embedded in the landing) ───── Every clip carries Spanish voice-over or captions, so none of them autoplays: they start paused, with native controls and a poster, and `preload="none"` keeps the megabytes off the page until someone actually presses play. */ .video-stage { background: var(--luto); border: 1px solid var(--luto-3); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .band.papel .video-stage { border-color: var(--linea); } .video-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--luto); } /* A phone-shaped clip pinned to phone width; taller than that and it eats the page. */ .video-stage.vertical { max-width: 300px; margin: 0 auto; } .video-stage.vertical video { aspect-ratio: 9 / 16; } .video-caption { margin-top: 12px; font-size: 0.88rem; color: var(--tinta-2); max-width: 62ch; } .band.luto .video-caption { color: var(--hueso-mudo); } /* Vertical clip beside its text; stacks on narrow screens. */ .video-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 48px); align-items: center; } .video-split .video-copy h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; } .video-split .video-copy p { color: var(--hueso-mudo); margin-bottom: 12px; } .band.papel .video-split .video-copy p { color: var(--tinta-2); } .video-split .video-copy .scrawl { display: inline-block; font-family: var(--marker); color: var(--naranja-claro); font-size: 1.15rem; transform: rotate(-1.5deg); } @media (max-width: 720px) { .video-split { grid-template-columns: 1fr; } } /* ───── Featured season promotion ───── */ .promo-live { background: var(--luto); padding: 28px 0; color: var(--hueso); } .promo-live-card { border: 2px solid var(--naranja); border-radius: var(--radius); padding: clamp(22px, 4vw, 42px); background: radial-gradient(circle at 85% 0%, rgba(249,115,22,.22), transparent 38%), #211a15; box-shadow: 0 24px 70px rgba(0,0,0,.32); } .promo-live-card h2 { font-family: var(--display); font-size: clamp(2rem, 5vw, 4rem); line-height: .98; } .promo-live-copy > p:not(.eyebrow) { color: var(--hueso-mudo); margin-top: 12px; } .promo-live-copy .promo-legal { font-size: .86rem; } .promo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 18px; } .promo-stats > div { padding: 16px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm); } .promo-stats dt { color: var(--hueso-mudo); font-size: .82rem; font-weight: 700; text-transform: uppercase; } .promo-stats dd { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 3rem); color: var(--naranja-claro); } .promo-stats small { color: var(--hueso-mudo); } .promo-progress { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); } .promo-progress span { display: block; width: 0; height: 100%; background: var(--naranja); transition: width .45s ease; } .promo-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 22px; } .promo-actions .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; border-radius: var(--radius-sm); background: var(--naranja); color: var(--luto); font-weight: 800; box-shadow: var(--shadow); } .promo-actions .btn-primary:hover { transform: translateY(-2px); text-decoration: none; } .promo-actions .btn-primary[aria-disabled="true"] { opacity: .58; pointer-events: none; } .promo-actions a:not(.btn-primary) { color: var(--hueso); font-weight: 700; text-decoration: underline; } .promo-live.is-closed .promo-progress span { background: var(--hueso-mudo); } .promo-live.is-stale #promoStatus::after { content: " · dato temporalmente desactualizado"; color: var(--naranja-claro); } @media (max-width: 720px) { .promo-stats { grid-template-columns: 1fr; } .promo-actions .btn-primary { width: 100%; text-align: center; } } /* ───── Brand / sponsorship pitch ───── */ .marcas { display: grid; gap: 26px; } .marcas .marca-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .btn-marca { display: inline-flex; align-items: center; gap: 10px; background: var(--naranja); color: var(--luto); font-weight: 800; padding: 12px 24px; border-radius: var(--radius-sm); box-shadow: var(--shadow); transition: transform 0.18s ease; } .btn-marca:hover { transform: translateY(-3px); text-decoration: none; } /* ───── FAQ (native
, no JS — the answers are in the HTML either way, which is what search engines and the FAQPage schema read) ───── */ .faq { display: grid; gap: 12px; max-width: 820px; } .faq-item { background: #fff; border: 1px solid var(--linea); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; } .faq-item[open] { border-color: var(--naranja); } .faq-item summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--naranja); flex: none; transition: transform 0.2s ease; } /* Rotating the plus into a cross avoids swapping glyphs, which would shift the icon around as the font's dash and plus have different metrics. */ .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:hover { color: var(--naranja-osc); } .faq-item p { color: var(--tinta-2); padding: 0 22px 20px; font-size: 0.97rem; max-width: 66ch; } .faq-item p + p { padding-top: 0; margin-top: -8px; } .faq-item a { color: var(--naranja-osc); font-weight: 700; } /* ───── Motion ───── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Scroll-reveal: the hidden start state only applies when reveal.js is active (html.reveal-ready). Without JS, content is fully visible. */ html.reveal-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; } html.reveal-ready .reveal.in { opacity: 1; transform: none; } /* Gentle cascade for grids. */ .steps .step:nth-child(2), .features .feature:nth-child(2), .modos .modo:nth-child(2) { transition-delay: 0.06s; } .steps .step:nth-child(3), .features .feature:nth-child(3) { transition-delay: 0.12s; } .steps .step:nth-child(4), .features .feature:nth-child(4) { transition-delay: 0.18s; } @media (max-width: 640px) { .hero { padding: 60px 0 0; } .band, .cta { padding: 60px 0; } .site-nav { gap: 12px; font-size: 0.85rem; } .site-nav a.nav-hide-sm { display: none; } } /* Respect users who prefer less motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html.reveal-ready .reveal { opacity: 1; transform: none; } .x-eye { opacity: 1; } }