/* =========================================================================== CIAO CIELO OS — Propuesta v1 (interactive long-form experience) Brand: celeste #78b0d9, secondary palette tints, Bree Serif + Inter + Caveat. Convention: vanilla CSS, no preprocessor, mobile-first. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* primary brand */ --cc-celeste: #78b0d9; --cc-celeste-soft: #c8e0ee; --cc-celeste-glow: #a4c7e3; --cc-celeste-deep: #4a85b0; --cc-celeste-dark: #2c5a78; --cc-celeste-bg: #eaf3fa; --cc-black: #1d1d1b; /* secondary palette (etiquetas) — used for pillar tints */ --cc-mostaza: #e8b455; --cc-mostaza-soft: #f7e5b8; --cc-menta: #8fcfa8; --cc-menta-soft: #d6efe0; --cc-salmon: #e89682; --cc-salmon-soft: #f7d9cf; --cc-lima: #bcd06a; --cc-lima-soft: #e6efc8; /* neutrals */ --bg: #faf8f3; --bg-warm: #f3ede0; --bg-card: #ffffff; --text: #1d1d1b; --text-muted: #6b6b66; --text-soft: #9a9a92; --border: #e5e0d4; --border-strong: #c8c2b0; /* type */ --font-display: 'Bree Serif', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-script: 'Caveat', 'Bradley Hand', cursive; /* layout */ --content-w: 980px; --content-narrow: 720px; --nav-h: 64px; /* motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } html, body { margin: 0; padding: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: var(--cc-celeste-deep); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--cc-celeste); } .caveat { font-family: var(--font-script); font-weight: 700; } /* =========================================================================== AMBIENT — sky gradient that shifts with time of day =========================================================================== */ .ambience { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; transition: filter 1.5s var(--ease); } .ambience__sky { position: absolute; inset: 0; transition: background 2s var(--ease); } /* Time-of-day variants on */ html[data-tod="dawn"] .ambience__sky { background: radial-gradient(ellipse 1400px 800px at 70% -20%, #f6c794, transparent 60%), radial-gradient(ellipse 1100px 600px at 30% 110%, #c8e0ee, transparent 70%), linear-gradient(180deg, #f9d8b8 0%, #ead2c8 35%, #c8e0ee 70%, #faf8f3 100%); } html[data-tod="day"] .ambience__sky { background: radial-gradient(ellipse 1400px 800px at 80% -10%, rgba(120,176,217,0.4), transparent 60%), radial-gradient(ellipse 1100px 600px at 20% 110%, rgba(243,237,224,0.7), transparent 70%), linear-gradient(180deg, #d4e8f5 0%, #eaf3fa 50%, #faf8f3 100%); } html[data-tod="dusk"] .ambience__sky { background: radial-gradient(ellipse 1400px 800px at 70% 0%, #e89682, transparent 55%), radial-gradient(ellipse 1100px 600px at 30% 110%, #5a93b8, transparent 70%), linear-gradient(180deg, #d49b8a 0%, #b9819f 30%, #5a7da0 65%, #2c5a78 100%); } html[data-tod="night"] .ambience__sky { background: radial-gradient(ellipse 1400px 800px at 70% -20%, #4a85b0, transparent 60%), linear-gradient(180deg, #14283c 0%, #1e3a55 40%, #2c5a78 80%, #3a6e8e 100%); } html[data-tod="night"] body { color: #1d1d1b; } .ambience__cloud { position: absolute; width: 700px; height: 240px; background: radial-gradient(ellipse, rgba(255,255,255,0.7), transparent 70%); filter: blur(45px); opacity: 0.55; animation: drift 80s var(--ease) infinite; will-change: transform; } .ambience__cloud--a { top: 5%; left: -15%; } .ambience__cloud--b { top: 50%; right: -15%; animation-delay: -40s; } .ambience__cloud--c { top: 75%; left: 35%; animation-delay: -20s; opacity: 0.35; } html[data-tod="night"] .ambience__cloud { opacity: 0.18; } @keyframes drift { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(120px) translateY(-30px); } } .ambience__grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: multiply; } /* =========================================================================== FORTUNE — first-load quote =========================================================================== */ .fortune { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(250, 248, 243, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); pointer-events: none; opacity: 1; transition: opacity 1s var(--ease); text-align: center; padding: 32px; } .fortune.is-fading { opacity: 0; } .fortune.is-gone { display: none; } .fortune__quote { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); line-height: 1.25; color: var(--cc-black); margin: 0 0 16px; max-width: 680px; font-style: italic; opacity: 0; animation: fortuneIn 1.2s var(--ease) 0.3s forwards; } .fortune__attr { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; opacity: 0; animation: fortuneIn 1.2s var(--ease) 0.7s forwards; } @keyframes fortuneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* =========================================================================== NAV =========================================================================== */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(250, 248, 243, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } html[data-tod="night"] .nav { background: rgba(20, 40, 60, 0.78); border-bottom-color: rgba(120, 176, 217, 0.2); } .nav__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: var(--cc-celeste); transition: width 0.05s linear; } .nav__inner { height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav__brand img { width: 36px; height: 36px; object-fit: contain; } .nav__brand-name { display: block; font-family: var(--font-display); font-size: 17px; color: var(--cc-black); line-height: 1; } html[data-tod="night"] .nav__brand-name { color: #faf8f3; } .nav__brand-sub { display: block; font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; } .nav__links { display: flex; gap: 18px; flex: 1; justify-content: center; } .nav__links a { font-size: 14px; font-weight: 500; color: var(--text-muted); padding: 6px 4px; border-bottom: 2px solid transparent; transition: all .15s var(--ease); } .nav__links a:hover { color: var(--cc-celeste-deep); border-bottom-color: var(--cc-celeste-soft); } html[data-tod="night"] .nav__links a { color: #c8e0ee; } html[data-tod="night"] .nav__links a:hover { color: #faf8f3; } .lang-toggle { display: flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; } .lang-toggle__btn { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); cursor: pointer; transition: all .2s var(--ease); display: inline-flex; align-items: center; gap: 5px; } .lang-toggle__btn.is-active { background: var(--cc-celeste); color: white; box-shadow: 0 1px 4px rgba(120,176,217,0.4); } /* =========================================================================== HERO =========================================================================== */ .hero { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; padding: 60px 24px 80px; position: relative; } .hero__inner { max-width: var(--content-w); margin: 0 auto; text-align: center; } .hero__eyebrow { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc-celeste-deep); font-weight: 600; margin: 0 0 24px; opacity: 0; animation: fadeUp 1s var(--ease) 0.4s forwards; } .hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 9vw, 112px); line-height: 1; margin: 0 0 32px; color: var(--cc-black); } html[data-tod="night"] .hero__title { color: #faf8f3; } .hero__title-script { display: block; font-size: 0.5em; color: var(--cc-celeste-deep); margin-bottom: -12px; opacity: 0; animation: fadeUp 1s var(--ease) 0.6s forwards; } .hero__title-bold { display: block; letter-spacing: -0.015em; opacity: 0; animation: fadeUp 1.2s var(--ease) 0.8s forwards; } .hero__lede { font-size: clamp(17px, 2vw, 22px); line-height: 1.55; max-width: 680px; margin: 0 auto 36px; color: var(--text); opacity: 0; animation: fadeUp 1s var(--ease) 1.1s forwards; } html[data-tod="night"] .hero__lede { color: #d4e8f5; } .hero__meta { font-size: 14px; color: var(--text-muted); margin-bottom: 48px; opacity: 0; animation: fadeUp 1s var(--ease) 1.4s forwards; } html[data-tod="night"] .hero__meta { color: #a4c7e3; } .hero__meta strong { color: var(--cc-celeste-deep); } .hero__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; background: var(--cc-celeste); color: white !important; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; box-shadow: 0 4px 24px rgba(120, 176, 217, 0.4); transition: all .25s var(--ease); opacity: 0; animation: fadeUp 1s var(--ease) 1.7s forwards; } .hero__cta:hover { background: var(--cc-celeste-deep); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(120, 176, 217, 0.5); color: white !important; } .hero__cta-arrow { animation: bounce 2s ease-in-out infinite; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* =========================================================================== BLOCK — common section pattern =========================================================================== */ .block { padding: 100px 24px; position: relative; } .block__inner { max-width: var(--content-w); margin: 0 auto; } .block__eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc-celeste-deep); font-weight: 700; margin: 0 0 14px; } .block__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -0.01em; color: var(--cc-black); margin: 0 0 16px; max-width: 880px; } html[data-tod="night"] .block__title { color: #faf8f3; } .block__sub { font-size: 17px; color: var(--text-muted); max-width: 640px; margin: 0 0 40px; } html[data-tod="night"] .block__sub { color: #c8e0ee; } .block__big { font-size: clamp(20px, 2.5vw, 28px); line-height: 1.45; font-weight: 300; color: var(--text); max-width: 780px; } html[data-tod="night"] .block__big { color: #faf8f3; } .lede-big { font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px); line-height: 1.4; color: var(--cc-black); max-width: 880px; margin: 0; } html[data-tod="night"] .lede-big { color: #faf8f3; } .block--sumario { padding-top: 60px; } /* =========================================================================== QUOTE STACK =========================================================================== */ .quote-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; } .quote-card { margin: 0; padding: 28px; background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.03); transition: all .25s var(--ease); } .quote-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(120, 176, 217, 0.12); border-color: var(--cc-celeste-soft); } .quote-card blockquote { margin: 0 0 16px; font-family: var(--font-display); font-size: 19px; line-height: 1.45; color: var(--cc-black); position: relative; } .quote-card blockquote::before { content: '"'; position: absolute; top: -16px; left: -8px; font-size: 64px; font-family: var(--font-display); color: var(--cc-celeste); opacity: 0.3; line-height: 1; } .quote-card figcaption { font-size: 13px; color: var(--text-muted); letter-spacing: 0.04em; font-weight: 600; } .quote-card--accent { background: var(--cc-celeste-bg); border-color: var(--cc-celeste); } .quote-card--accent blockquote { color: var(--cc-celeste-dark); } /* =========================================================================== VISION — 4 alternating beat-rows · IntersectionObserver fade-in =========================================================================== */ .block--vision { padding-top: 80px; padding-bottom: 80px; } .vision__intro { text-align: center; max-width: 720px; margin: 0 auto; } .vision__intro .block__title { margin-left: auto; margin-right: auto; } .vision-rows { max-width: 1180px; margin: 64px auto 0; display: flex; flex-direction: column; gap: 88px; padding: 0 24px; } .vision-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .vision-row.is-visible { opacity: 1; transform: translateY(0); } /* alternating layout: art-right keeps copy on left, art-left flips */ .vision-row--art-left .vision-row__art { order: 1; } .vision-row--art-left .vision-row__copy { order: 2; } .vision-row__art { height: 460px; display: flex; align-items: center; justify-content: center; position: relative; } .vision-row__time { font-size: 24px; color: var(--cc-celeste-deep); margin: 0 0 18px; line-height: 1; } .vision-row__beat { font-size: 19px; line-height: 1.6; color: var(--text); margin: 0; } html[data-tod="night"] .vision-row__beat { color: #faf8f3; } .vision__close-wrap { text-align: center; margin-top: 80px; padding: 0 24px; } .vision__close { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 38px); color: var(--cc-celeste-deep); margin: 0; } .vision__close strong { font-weight: 400; } /* Scene visuals — now positioned naturally inside their rows */ .scene { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Scene 0 — totem */ .scene__totem { width: 280px; height: 360px; background: linear-gradient(180deg, #1d1d1b 0%, #2a2a28 100%); border-radius: 18px; padding: 22px; box-shadow: 0 30px 60px rgba(0,0,0,0.18), inset 0 0 40px rgba(120,176,217,0.1); display: flex; flex-direction: column; gap: 10px; } .totem-screen { flex: 1; background: var(--bg); border-radius: 10px; padding: 24px 18px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .totem-screen::before { content: '🍦'; position: absolute; top: 14px; right: 18px; font-size: 28px; opacity: 0.6; } .totem-line { height: 14px; background: linear-gradient(90deg, var(--cc-celeste-soft), var(--cc-celeste)); border-radius: 4px; width: 80%; animation: shimmer 2.4s ease-in-out infinite; } .totem-line--short { width: 50%; animation-delay: 0.4s; } .totem-suggest { margin-top: auto; padding: 14px; background: var(--cc-celeste-bg); border-radius: 10px; border: 2px dashed var(--cc-celeste); font-size: 22px; color: var(--cc-celeste-deep); text-align: center; } @keyframes shimmer { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } } /* Scene 1 — phone */ .scene__phone { width: 240px; height: 420px; background: #1d1d1b; border-radius: 28px; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.2); } .phone-frame { width: 100%; height: 100%; background: var(--bg); border-radius: 18px; display: flex; flex-direction: column; padding: 16px; gap: 12px; overflow: hidden; position: relative; } .phone-reel { flex: 1; background: linear-gradient(180deg, var(--cc-celeste) 0%, var(--cc-celeste-deep) 60%, #1d1d1b 100%); border-radius: 12px; position: relative; overflow: hidden; } .phone-reel::before { content: '🎥 reel · ciaocielo.heladeria'; position: absolute; bottom: 12px; left: 12px; font-size: 11px; color: white; font-weight: 500; } .phone-buy { background: var(--cc-celeste); color: white; border: 0; padding: 12px; border-radius: 10px; font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(120,176,217,0.5); } 50% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(120,176,217,0); } } /* Scene 2 — chat */ .scene__chat { width: 320px; background: var(--bg-card); border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 10px; } .msg { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; max-width: 78%; animation: msgIn .4s var(--ease) backwards; } .msg--in { background: var(--bg-warm); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; } .msg--out { background: var(--cc-celeste); color: white; align-self: flex-end; border-bottom-right-radius: 4px; animation-delay: 0.5s; } .msg--quote { display: flex; flex-direction: column; gap: 4px; font-size: 13px; background: var(--cc-celeste-deep); animation-delay: 1s; max-width: 90%; } .msg--quote strong { font-size: 14px; margin-bottom: 4px; } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Scene 3 — dashboard */ .scene__dashboard { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; width: 360px; height: 280px; } .dash-card { background: var(--bg-card); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-top: 3px solid var(--cc-celeste); } .dash-card:nth-child(1) { grid-row: 1 / 3; } .dash-card--small { padding: 14px; } .dash-label { font-size: 10px; letter-spacing: 0.16em; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; } .dash-num { font-family: var(--font-display); font-size: 28px; color: var(--cc-celeste-deep); line-height: 1; margin-bottom: 4px; } .dash-card:nth-child(1) .dash-num { font-size: 36px; } .dash-meta { font-size: 12px; color: var(--cc-menta); font-weight: 600; } .dash-text { font-family: var(--font-display); font-size: 22px; color: var(--cc-celeste-deep); } /* Vision row art — clip oversized scenes inside their cell */ .vision-row__art { overflow: hidden; } .scene { position: relative; } /* Mobile vision rows — single column, art always above copy */ @media (max-width: 900px) { .vision-rows { gap: 60px; } .vision-row { grid-template-columns: 1fr; gap: 24px; } .vision-row--art-left .vision-row__art, .vision-row--art-right .vision-row__art { order: 1; } .vision-row--art-left .vision-row__copy, .vision-row--art-right .vision-row__copy { order: 2; } .vision-row__art { height: 380px; } .vision-row__beat { font-size: 17px; } } /* =========================================================================== PILLARS — expandable cards =========================================================================== */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; margin-top: 32px; } .pillar { background: var(--bg-card); border-radius: 18px; padding: 32px; cursor: pointer; position: relative; overflow: hidden; transition: all .35s var(--ease); border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.03); } .pillar::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: var(--cc-celeste); transition: width .35s var(--ease); } .pillar--mostaza::before { background: var(--cc-mostaza); } .pillar--menta::before { background: var(--cc-menta); } .pillar--salmon::before { background: var(--cc-salmon); } .pillar--lima::before { background: var(--cc-lima); } .pillar:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(120, 176, 217, 0.15); } .pillar.is-open::before { width: 100%; opacity: 0.06; } .pillar.is-open { box-shadow: 0 24px 60px rgba(120, 176, 217, 0.2); } .pillar__num { font-family: var(--font-display); font-size: 56px; color: var(--cc-celeste-soft); line-height: 1; position: absolute; top: 20px; right: 28px; transition: color .35s var(--ease); } .pillar--mostaza .pillar__num { color: var(--cc-mostaza-soft); } .pillar--menta .pillar__num { color: var(--cc-menta-soft); } .pillar--salmon .pillar__num { color: var(--cc-salmon-soft); } .pillar--lima .pillar__num { color: var(--cc-lima-soft); } .pillar__title { font-family: var(--font-display); font-size: 28px; margin: 0 0 8px; color: var(--cc-black); } .pillar__teaser { font-size: 16px; color: var(--text-muted); margin: 0 0 18px; max-width: 80%; } .pillar__more { font-size: 13px; font-weight: 700; color: var(--cc-celeste-deep); letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; transition: gap .25s var(--ease); } .pillar:hover .pillar__more { gap: 10px; } .pillar__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .35s var(--ease), margin .35s var(--ease); } .pillar.is-open .pillar__body { max-height: 800px; opacity: 1; margin-top: 24px; } .pillar__body ul { padding-left: 20px; margin: 0 0 18px; } .pillar__body li { margin: 8px 0; line-height: 1.5; font-size: 15.5px; } .pillar__body li::marker { color: var(--cc-celeste); } .pillar__math { margin: 18px 0 0; padding: 14px 16px; background: var(--cc-celeste-bg); border-radius: 10px; font-size: 15px; border-left: 3px solid var(--cc-celeste); } .pillar--mostaza .pillar__math { background: var(--cc-mostaza-soft); border-left-color: var(--cc-mostaza); } .pillar--menta .pillar__math { background: var(--cc-menta-soft); border-left-color: var(--cc-menta); } .pillar--salmon .pillar__math { background: var(--cc-salmon-soft); border-left-color: var(--cc-salmon); } .pillar--lima .pillar__math { background: var(--cc-lima-soft); border-left-color: var(--cc-lima); } /* =========================================================================== ENGINE — AI layer + live demo =========================================================================== */ .block--engine { background: linear-gradient(180deg, transparent 0%, var(--cc-celeste-bg) 100%); } html[data-tod="night"] .block--engine { background: linear-gradient(180deg, transparent, rgba(74, 133, 176, 0.2)); } .engine-grid { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .engine-grid li { background: var(--bg-card); border-radius: 12px; padding: 20px; border: 1px solid var(--border); transition: all .25s var(--ease); } .engine-grid li:hover { border-color: var(--cc-celeste); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(120, 176, 217, 0.15); } .engine-grid strong { display: block; font-family: var(--font-display); font-size: 19px; color: var(--cc-celeste-deep); margin-bottom: 6px; } .engine-grid span { font-size: 14px; color: var(--text-muted); line-height: 1.5; } .ai-demo { background: var(--bg-card); border-radius: 20px; padding: 36px; box-shadow: 0 20px 60px rgba(120, 176, 217, 0.18); border: 2px solid var(--cc-celeste-soft); margin-top: 32px; } .ai-demo__eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc-celeste); font-weight: 700; margin: 0 0 12px; } .ai-demo__title { font-family: var(--font-display); font-size: 26px; color: var(--cc-black); margin: 0 0 6px; } .ai-demo__sub { font-size: 15px; color: var(--text-muted); margin: 0 0 24px; } .ai-demo__form { display: flex; gap: 10px; flex-wrap: wrap; } .ai-demo__input { flex: 1; min-width: 240px; padding: 14px 18px; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 15px; background: var(--bg); color: var(--text); transition: border-color .2s var(--ease); } .ai-demo__input:focus { outline: 0; border-color: var(--cc-celeste); box-shadow: 0 0 0 3px rgba(120, 176, 217, 0.15); } .ai-demo__btn { padding: 14px 24px; background: var(--cc-celeste); color: white; border: 0; border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s var(--ease); } .ai-demo__btn:hover { background: var(--cc-celeste-deep); } .ai-demo__btn:disabled { opacity: 0.7; cursor: not-allowed; } .ai-demo__btn-arrow { transition: transform .2s var(--ease); } .ai-demo__btn:hover .ai-demo__btn-arrow { transform: translateX(2px); } .ai-demo__result { margin-top: 28px; padding: 24px; background: var(--bg); border-radius: 12px; border-left: 3px solid var(--cc-celeste); animation: fadeUp .5s var(--ease); } .ai-demo__result-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-celeste-deep); font-weight: 700; margin: 0 0 12px; } .ai-demo__result blockquote { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--cc-black); } .ai-demo__hint { font-size: 12px; color: var(--text-muted); margin-top: 16px; font-family: var(--font-script); font-size: 18px; } /* =========================================================================== CHART =========================================================================== */ .block--chart { background: var(--bg-warm); } .chart-wrap { position: relative; background: var(--bg-card); padding: 28px; border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); margin-top: 32px; } .chart-wrap canvas { width: 100% !important; height: auto !important; max-height: 380px; } .chart-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; font-size: 13px; color: var(--text-muted); align-items: center; } .chart-legend__dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: -16px; vertical-align: middle; } .chart-legend__dot--actual { background: var(--cc-celeste-deep); } .chart-legend__dot--projection { background: var(--cc-celeste); } /* =========================================================================== CALENDAR — timeline =========================================================================== */ .timeline { list-style: none; padding: 0; margin: 32px 0 0; position: relative; display: flex; flex-direction: column; gap: 16px; } .timeline::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--cc-celeste-soft) 0%, var(--cc-celeste-deep) 100%); } .phase { display: grid; grid-template-columns: 60px 140px 1fr; align-items: center; gap: 20px; padding: 18px 22px; background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border); margin-left: 0; position: relative; transition: all .25s var(--ease); } .phase:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(120, 176, 217, 0.12); border-color: var(--cc-celeste-soft); } .phase__num { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cc-celeste); color: white; font-family: var(--font-display); font-size: 24px; flex-shrink: 0; position: relative; z-index: 1; } .phase__when { font-size: 13px; color: var(--cc-celeste-deep); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .phase__name { display: block; font-family: var(--font-display); font-size: 22px; color: var(--cc-black); } .phase__what { font-size: 14.5px; color: var(--text-muted); line-height: 1.5; } .phase--deadline { background: linear-gradient(90deg, var(--cc-salmon-soft), var(--bg-card)); border-color: var(--cc-salmon); } .phase--deadline .phase__num { background: var(--cc-salmon); } .phase--deadline .phase__when { color: var(--cc-salmon); } @media (max-width: 700px) { .phase { grid-template-columns: 50px 1fr; gap: 14px; } .phase__when { grid-column: 2; } .phase__name, .phase__what { grid-column: 2; } .timeline::before { left: 25px; } } /* =========================================================================== LOCALES =========================================================================== */ .locales { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 32px; } .locales__map { background: var(--bg-card); border-radius: 18px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); } .locales-svg { width: 100%; height: auto; } .pin { cursor: pointer; transition: transform .25s var(--ease-spring); } .pin:hover { transform: scale(1.15); } .pin.is-active .pin__dot { fill: var(--cc-celeste-deep); animation: pinPulse 1.6s ease-in-out infinite; } .pin__dot { fill: var(--cc-celeste); filter: drop-shadow(0 4px 8px rgba(120,176,217,0.4)); } .pin__dot--seasonal { fill: var(--cc-mostaza); } .pin__core { fill: white; } .pin__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--cc-black); } @keyframes pinPulse { 0%, 100% { transform-box: fill-box; transform-origin: center; transform: scale(1); } 50% { transform-box: fill-box; transform-origin: center; transform: scale(1.15); } } .locales__details { display: flex; flex-direction: column; gap: 12px; } .locale-card { padding: 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: all .25s var(--ease); } .locale-card.is-active { border-color: var(--cc-celeste); box-shadow: 0 8px 24px rgba(120, 176, 217, 0.18); transform: translateX(-4px); } .locale-card h4 { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; color: var(--cc-black); } .locale-card__city { font-size: 13px; color: var(--cc-celeste-deep); font-weight: 600; letter-spacing: 0.04em; margin: 0 0 14px; } .locale-card ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13.5px; color: var(--text); } .locale-card li strong { color: var(--text-muted); font-weight: 600; } @media (max-width: 800px) { .locales { grid-template-columns: 1fr; } } /* photo strip */ .photo-strip { margin-top: 32px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .photo-strip__img { flex: 0 0 auto; width: 260px; height: 320px; object-fit: cover; border-radius: 12px; scroll-snap-align: start; box-shadow: 0 6px 20px rgba(0,0,0,0.1); transition: transform .3s var(--ease); } .photo-strip__img:hover { transform: scale(1.02); } /* =========================================================================== COTIZAR DEMO =========================================================================== */ .block--cotizar { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); } .cotizar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; background: var(--bg-card); padding: 28px; border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.04); } .cotizar label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; } .cotizar input { padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none; background: var(--bg); color: var(--text); } .cotizar input:focus { outline: 0; border-color: var(--cc-celeste); box-shadow: 0 0 0 3px rgba(120, 176, 217, 0.15); } .cotizar__btn { grid-column: 1 / -1; padding: 16px; background: var(--cc-celeste); color: white; border: 0; border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s var(--ease); } .cotizar__btn:hover { background: var(--cc-celeste-deep); } .cotizar__btn:disabled { opacity: 0.7; cursor: not-allowed; } .cotizar__result { margin-top: 24px; padding: 24px; background: var(--bg-card); border-radius: 14px; border-left: 3px solid var(--cc-celeste); box-shadow: 0 8px 24px rgba(120, 176, 217, 0.1); animation: fadeUp .5s var(--ease); } .cotizar__result-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-celeste-deep); font-weight: 700; margin: 0 0 12px; } .cotizar__result pre { font-family: var(--font-body); font-size: 15px; line-height: 1.6; white-space: pre-wrap; color: var(--cc-black); margin: 0; } @media (max-width: 700px) { .cotizar { grid-template-columns: 1fr; } } /* =========================================================================== CUTS =========================================================================== */ .cuts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; } .cuts li { padding: 22px 26px; background: var(--bg-card); border-radius: 12px; border-left: 3px solid var(--cc-salmon); } .cuts strong { display: block; font-family: var(--font-display); font-size: 20px; margin-bottom: 6px; color: var(--cc-black); text-decoration: line-through; text-decoration-color: var(--cc-salmon); text-decoration-thickness: 2px; } .cuts span { font-size: 15px; color: var(--text-muted); line-height: 1.55; } /* =========================================================================== TEAM =========================================================================== */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 32px 0; } .team-card { background: var(--bg-card); padding: 24px; border-radius: 14px; border: 1px solid var(--border); text-align: center; transition: all .25s var(--ease); } .team-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(120, 176, 217, 0.15); } .team-card__role { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; } .team-card__name { display: block; font-family: var(--font-display); font-size: 26px; color: var(--cc-celeste-deep); } .team-sub { font-size: 14px; color: var(--text-muted); font-style: italic; max-width: 720px; } /* =========================================================================== MONEY =========================================================================== */ .block--money { background: var(--cc-celeste-bg); text-align: center; } .block--money .block__inner { max-width: var(--content-narrow); } /* =========================================================================== NEXT STEPS =========================================================================== */ .next-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; counter-reset: step; } .next-steps li { display: flex; align-items: center; gap: 20px; padding: 22px 28px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); font-size: 17px; transition: all .25s var(--ease); } .next-steps li:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(120, 176, 217, 0.1); border-color: var(--cc-celeste-soft); } .next-num { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--cc-celeste); color: white; border-radius: 50%; font-family: var(--font-display); font-size: 20px; } .next-text { color: var(--text); } html[data-tod="night"] .next-text { color: #faf8f3; } .next-close { margin-top: 40px; font-size: 18px; line-height: 1.6; color: var(--text); max-width: 720px; font-style: italic; } .next-close strong { font-style: normal; color: var(--cc-celeste-deep); font-size: 20px; display: block; margin-bottom: 8px; } /* =========================================================================== FOOTER =========================================================================== */ .footer { padding: 80px 24px 60px; text-align: center; background: var(--cc-celeste-bg); border-top: 1px solid var(--cc-celeste-soft); position: relative; overflow: hidden; } .footer__inner { max-width: 720px; margin: 0 auto; } .footer__sign { font-size: 56px; color: var(--cc-celeste-deep); margin: 0 0 8px; display: inline-block; transform: rotate(-2deg); } .footer__tagline { font-size: 18px; color: var(--text); margin: 0 0 36px; font-family: var(--font-display); font-style: italic; } .footer__attribution { font-size: 13.5px; color: var(--text-muted); letter-spacing: 0.02em; margin: 0 0 20px; line-height: 1.55; } .footer__kraion { color: var(--cc-celeste-deep); font-weight: 600; text-decoration: none; border-bottom: 1px dashed rgba(74, 133, 176, 0.35); transition: color .2s var(--ease), border-color .2s var(--ease); } .footer__kraion:hover { color: var(--cc-celeste); border-bottom-color: var(--cc-celeste); } .footer__heart-link { text-decoration: none; display: inline-block; transition: transform .25s var(--ease-spring); vertical-align: -1px; } .footer__heart-link:hover { transform: scale(1.25); } .footer__heart { display: inline-block; font-size: 16px; margin: 0 2px; animation: heartbeat 2.5s ease-in-out infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(1); } 30% { transform: scale(1.12); } 40% { transform: scale(1); } } .footer__portal a { font-size: 14px; color: var(--cc-celeste-deep); letter-spacing: 0.03em; font-weight: 600; } /* =========================================================================== KONAMI overlay =========================================================================== */ .konami { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 40, 60, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; padding: 24px; } .konami[hidden] { display: none; } .konami__inner { background: var(--bg); border-radius: 24px; padding: 56px 44px; max-width: 480px; text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,0.3); animation: konamiIn .6s var(--ease-spring); } @keyframes konamiIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .konami__quote { font-family: var(--font-display); font-size: 24px; color: var(--cc-celeste-deep); margin: 0 0 18px; } .konami__body { font-family: var(--font-script); font-size: 28px; line-height: 1.4; color: var(--cc-black); margin: 0 0 22px; } .konami__sign { font-family: var(--font-display); font-size: 18px; color: var(--cc-celeste); margin: 0 0 28px; } .konami__close { background: var(--cc-celeste); color: white; border: 0; padding: 10px 24px; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } /* =========================================================================== CONFETTI =========================================================================== */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; } .confetti__heart { position: absolute; font-size: 24px; user-select: none; animation: confettiFall 3s linear forwards; opacity: 0; } @keyframes confettiFall { 0% { opacity: 0; transform: translate(var(--x0), 0vh) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0.6; transform: translate(var(--x1), 110vh) rotate(var(--rot)); } } /* =========================================================================== RESPONSIVE =========================================================================== */ @media (max-width: 900px) { .nav__links { display: none; } .vision__sticky { grid-template-columns: 1fr; } .pillars { grid-template-columns: 1fr; } } @media (max-width: 600px) { .block { padding: 60px 18px; } .hero { padding: 40px 18px 60px; } .ai-demo, .cotizar, .pillar { padding: 22px; } .quote-stack { grid-template-columns: 1fr; } .nav__brand-sub { display: none; } }