/* ========================================================= ORDEN · Landing · styles.css ========================================================= */ /* ---------- VARIABLES ---------- */ :root { --color-primary: #1A2E4A; /* Azul Profundo */ --color-secondary: #8FB5E8; /* Azul Sereno */ --color-bg: #FFFFFF; /* Blanco Puro */ --color-bg-soft: #F7FAFE; /* Blanco con tinte azul muy sutil */ --color-bg-dolor: #FEF4F4; /* #F87171 al ~8% sobre blanco */ --color-bg-celebra: #F1FCF5; /* #4ADE80 al ~8% sobre blanco */ --color-cta: #4ADE80; /* Verde WhatsApp para botones CTA */ --color-cta-hover: #22C55E; /* Verde un punto más oscuro al hover */ --color-ink: #1A2E4A; --color-ink-soft: #6B7A8F; --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --bot-size: clamp(180px, 28vw, 340px); --bot-top-offset: 13vh; /* Distancia del bot al top del viewport */ --content-gap: 2rem; /* Aire entre bot y texto */ --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } html { scroll-behavior: smooth; scroll-snap-type: y mandatory; } body { font-family: var(--font-sans); font-weight: 400; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 1.2s var(--ease-soft); } /* Fondos por sección (controlados por data-bg en ) */ body[data-bg="soft"] { background-color: var(--color-bg-soft); } body[data-bg="dolor"] { background-color: var(--color-bg-dolor); } body[data-bg="celebra"] { background-color: var(--color-bg-celebra); } /* default (sin atributo) = blanco puro */ /* ---------- BOT FIJO ---------- */ .bot-stage { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: var(--bot-top-offset); pointer-events: none; z-index: 10; } .bot-wrapper { position: relative; width: var(--bot-size); height: var(--bot-size); top: 0; animation: bot-float 6s ease-in-out infinite; } /* float vía `top` (no `transform`) para no pelear con GSAP scale/translate */ @keyframes bot-float { 0%, 100% { top: 0; } 50% { top: -12px; } } .bot-state { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.9s var(--ease-soft); } .bot-state.is-active { opacity: 1; } /* ---------- LAYOUT DE SECCIONES ---------- */ .section { position: relative; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 0 1.5rem; z-index: 1; scroll-snap-align: start; scroll-snap-stop: always; } .section__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; /* Texto justo debajo del bot — el conjunto se ve como bloque centrado */ padding-top: calc(var(--bot-top-offset) + var(--bot-size) + var(--content-gap)); } /* ---------- TIPOGRAFÍA ---------- */ .hero__tagline { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1.75rem; color: var(--color-primary); } .copy { font-family: var(--font-sans); margin: 0 0 1.25rem; line-height: 1.5; color: var(--color-ink); } .copy--lg { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; line-height: 1.35; } .copy--md { font-size: clamp(1.1rem, 1.8vw, 1.4rem); } .copy--sm { font-size: 0.95rem; margin-bottom: 0.5rem; } .copy--muted { color: var(--color-ink-soft); } .quote { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-primary); margin: 0; } /* ---------- BOTONES ---------- */ .btn { display: inline-block; font-family: var(--font-sans); font-weight: 600; color: #fff; background: var(--color-cta); border-radius: 999px; padding: 0.75rem 1.5rem; transition: transform 0.25s var(--ease-soft), background 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft); box-shadow: 0 4px 14px rgba(74, 222, 128, 0.3); } .btn:hover { transform: translateY(-2px); background: var(--color-cta-hover); box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4); } .btn--small { font-size: 0.95rem; padding: 0.7rem 1.4rem; } .btn--medium { font-size: 1.05rem; padding: 0.95rem 1.9rem; } /* ---------- DEMO CHAT WHATSAPP ---------- */ .chat-mockup { margin: 1rem auto 0; max-width: 320px; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; } .chat-bubble { font-family: var(--font-sans); font-size: 0.85rem; padding: 0.45rem 0.8rem; border-radius: 12px; max-width: 85%; width: fit-content; opacity: 0; transform: translateY(6px); line-height: 1.3; } .chat-bubble--user { align-self: flex-end; background: #DCF8C6; color: #1A1A1A; border-bottom-right-radius: 4px; } .chat-bubble--bot { align-self: flex-start; background: #F1F1F1; color: var(--color-primary); border-bottom-left-radius: 4px; } /* ---------- CONTADOR ---------- */ .counter { font-family: var(--font-serif); font-weight: 300; font-size: clamp(3rem, 9vw, 6rem); color: var(--color-primary); letter-spacing: -0.02em; margin: 0 0 1.5rem; line-height: 1; } /* ---------- FOOTER ---------- */ .footer { margin-top: 4rem; font-size: 0.85rem; color: var(--color-ink-soft); letter-spacing: 0.02em; } .footer a { color: var(--color-ink-soft); text-decoration: underline; text-decoration-color: rgba(107, 122, 143, 0.3); text-underline-offset: 3px; transition: color 0.2s var(--ease-soft), text-decoration-color 0.2s var(--ease-soft); } .footer a:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 640px) { :root { --bot-top-offset: 14vh; --content-gap: 2rem; } .section { padding: 0 1.25rem; } } /* ---------- CELEBRACIÓN (Caso Real) ---------- */ .celebration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; } .confetti, .sparkle { position: absolute; top: var(--y, 30vh); left: var(--x, 50%); opacity: 0; } .confetti { width: 6px; height: 12px; background: var(--c, var(--color-secondary)); border-radius: 2px; transform: rotate(var(--r, 0deg)); } .sparkle { font-size: var(--s, 14px); color: #FCD34D; line-height: 1; user-select: none; text-shadow: 0 0 6px rgba(252, 211, 77, 0.4); } .section.is-active .confetti { animation: confetti-float 5s var(--d, 0s) ease-in-out infinite; will-change: transform, opacity; } .section.is-active .sparkle { animation: sparkle-pulse 3s var(--d, 0s) ease-in-out infinite; will-change: transform, opacity; } @keyframes confetti-float { 0% { opacity: 0; transform: translateY(20px) rotate(var(--r, 0deg)); } 15% { opacity: 0.55; } 85% { opacity: 0.55; } 100% { opacity: 0; transform: translateY(-50px) rotate(calc(var(--r, 0deg) + 360deg)); } } @keyframes sparkle-pulse { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 0.7; transform: scale(1) rotate(180deg); } } /* ---------- SUEÑO (Filosófico) ---------- */ .dream { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; } .zee, .moon, .star { position: absolute; top: var(--y, 30vh); left: var(--x, 50%); opacity: 0; } .zee { font-family: var(--font-serif); font-weight: 300; font-style: italic; font-size: var(--s, 32px); color: var(--color-secondary); line-height: 1; text-shadow: 0 0 12px rgba(143, 181, 232, 0.45); } .moon { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset -10px -3px 0 0 var(--color-secondary); transform: rotate(-25deg); filter: drop-shadow(0 0 10px rgba(143, 181, 232, 0.3)); } .star { font-size: var(--s, 12px); color: var(--color-secondary); line-height: 1; font-weight: 700; text-shadow: 0 0 6px rgba(143, 181, 232, 0.4); } .section.is-active .zee { animation: zee-float 4.5s var(--d, 0s) ease-in-out infinite; will-change: transform, opacity; } .section.is-active .moon { animation: moon-glow 4s ease-in-out infinite; } .section.is-active .star { animation: star-twinkle 3.5s var(--d, 0s) ease-in-out infinite; will-change: opacity; } @keyframes zee-float { 0% { opacity: 0; transform: translateY(10px) translateX(0); } 20% { opacity: 0.7; } 80% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-70px) translateX(18px); } } @keyframes moon-glow { 0%, 100% { opacity: 0.55; transform: rotate(-25deg) scale(1); } 50% { opacity: 0.85; transform: rotate(-25deg) scale(1.06); } } @keyframes star-twinkle { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.65; transform: scale(1); } } /* ---------- IDEA (Dolor / Reflexiona) ---------- */ .thinking { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; } .bulb { position: absolute; top: var(--y, 16vh); left: var(--x, 68%); width: 44px; height: 44px; color: #FCD34D; opacity: 0; } .section.is-active .bulb { animation: bulb-glow 3.5s ease-in-out infinite; will-change: opacity, filter; } @keyframes bulb-glow { 0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 6px rgba(252, 211, 77, 0.3)); } 50% { opacity: 0.95; filter: drop-shadow(0 0 16px rgba(252, 211, 77, 0.65)); } } /* ---------- ANIMACIÓN ENTRADA ---------- */ .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================= PÁGINAS LEGALES (privacidad.html, terminos.html) Sin scroll-snap, sin bot fijo. Layout de lectura. ========================================================= */ .legal-page { scroll-snap-type: none; overflow-x: hidden; background: var(--color-bg); } /* La página legal usa sin scroll-snap */ html:has(.legal-page) { scroll-snap-type: none; } .legal-header { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 0; } .legal-back { display: inline-block; font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-ink-soft); transition: color 0.2s var(--ease-soft); } .legal-back:hover { color: var(--color-primary); } .legal { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem 4rem; font-family: var(--font-sans); color: var(--color-ink); line-height: 1.65; } .legal__title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-primary); margin: 0 0 0.5rem; } .legal__updated { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0 0 3rem; } .legal__section { margin-bottom: 2.5rem; } .legal__section h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.005em; color: var(--color-primary); margin: 0 0 0.75rem; } .legal__section p { font-size: 1rem; margin: 0 0 1rem; color: var(--color-ink); } .legal__section ul { margin: 0 0 1rem; padding-left: 1.25rem; } .legal__section li { font-size: 1rem; margin-bottom: 0.5rem; color: var(--color-ink); } .legal__section a, .legal-footer a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(26, 46, 74, 0.25); text-underline-offset: 3px; transition: text-decoration-color 0.2s var(--ease-soft); } .legal__section a:hover, .legal-footer a:hover { text-decoration-color: var(--color-primary); } .legal__section strong { color: var(--color-primary); font-weight: 600; } .legal-footer { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 3rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-ink-soft); border-top: 1px solid rgba(26, 46, 74, 0.08); text-align: center; } @media (max-width: 640px) { .legal { padding: 2rem 1.25rem 3rem; } .legal__title { font-size: 2rem; } .legal__updated { margin-bottom: 2rem; } .legal__section { margin-bottom: 2rem; } }