/** * Sorteador Focus — identidad visual propia dentro del ecosistema FOCUS PLUS. * Reusa la tipografía de marca (Samsung Sharp Sans) para que se sienta "de Focus", pero suma un * acento dorado propio (el color del premio/ganador) sobre la base violeta del resto del * ecosistema — diferenciado sin desentonar. Spec 2026-08-29: "identidad propia, reconocible y * diferenciada", fondos tecnológicos, glow controlado, profundidad, microinteracciones. */ @font-face { font-family: "Samsung Sharp Sans"; src: url("../fonts/samsungsharpsans.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Samsung Sharp Sans"; src: url("../fonts/samsungsharpsans-medium.otf") format("opentype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Samsung Sharp Sans"; src: url("../fonts/samsungsharpsans-bold.otf") format("opentype"); font-weight: 700; font-display: swap; } :root { --sf-bg: #f5f6f9; --sf-surface: #ffffff; --sf-surface-2: #eef0f5; --sf-border: #e1e4ec; --sf-text: #14151c; --sf-text-muted: #62687a; --sf-violet: #6d28d9; --sf-violet-rgb: 109, 40, 217; --sf-gold: #b8790a; --sf-gold-rgb: 184, 121, 10; --sf-teal: #0891b2; --sf-success: #12a878; --sf-danger: #c22b3f; --sf-radius-sm: 8px; --sf-radius-md: 14px; --sf-radius-lg: 22px; --sf-shadow: 0 1px 2px rgba(20,21,28,.06), 0 10px 30px rgba(20,21,28,.06); --sf-hero-heading: #141414; /* pedido de Marcos, 2026-08-30 — no el negro frío de --sf-text */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sf-bg: #0a0a10; --sf-surface: #14141d; --sf-surface-2: #1b1b27; --sf-border: #292937; --sf-text: #f2f0fa; --sf-text-muted: #9591ae; --sf-violet: #a78bfa; --sf-violet-rgb: 167, 139, 250; --sf-gold: #f2b632; --sf-gold-rgb: 242, 182, 50; --sf-teal: #22d3ee; --sf-success: #2fe0a8; --sf-danger: #ff6b7f; --sf-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45); --sf-hero-heading: var(--sf-text); /* sobre fondo oscuro, el tono cálido oscuro es ilegible */ color-scheme: dark; } } :root[data-theme="dark"] { --sf-bg: #0a0a10; --sf-surface: #14141d; --sf-surface-2: #1b1b27; --sf-border: #292937; --sf-text: #f2f0fa; --sf-text-muted: #9591ae; --sf-violet: #a78bfa; --sf-violet-rgb: 167, 139, 250; --sf-gold: #f2b632; --sf-gold-rgb: 242, 182, 50; --sf-teal: #22d3ee; --sf-success: #2fe0a8; --sf-danger: #ff6b7f; --sf-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45); --sf-hero-heading: var(--sf-text); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--sf-bg); color: var(--sf-text); font-family: "Samsung Sharp Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Degradado decorativo del hero de la landing — vive en el body (no en el hero-card) para que se difumine hacia la sección siguiente sin un borde/corte visible, en vez de quedar recortado al alto exacto de una caja. Anclado en px desde arriba (no %) para no desparramarse por toda la altura de una página larga. Scope: solo landing.php (ver ). */ body.sf-landing-page { position: relative; overflow-x: hidden; } /* por los .sf-peek que bleedean un poco afuera del wrap */ body.sf-landing-page::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1100px; z-index: 0; pointer-events: none; background: radial-gradient(900px 520px at 15% -40px, rgba(var(--sf-violet-rgb), .20), transparent 60%), radial-gradient(700px 460px at 100% 20px, rgba(var(--sf-gold-rgb), .16), transparent 60%), radial-gradient(900px 650px at 50% 560px, rgba(var(--sf-violet-rgb), .12), transparent 65%); } body.sf-landing-page > * { position: relative; z-index: 1; } h1, h2, h3, h4 { font-weight: 700; margin: 0; text-wrap: balance; } button { font-family: inherit; } a { color: var(--sf-violet); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--sf-gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .sf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---------- Páginas legales (Términos / Privacidad) — pedido de Marcos, 2026-08-30 ---------- */ .sf-legal-header { padding: 28px 0 8px; } .sf-legal-header .sf-hero-card__brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; } .sf-legal-header .sf-hero-card__brand img { height: 22px; } .sf-legal { max-width: 760px; margin: 0 auto; padding: 20px 0 70px; } .sf-legal h1 { font-size: clamp(26px, 4vw, 34px); margin-bottom: 6px; } .sf-legal .sf-legal-updated { color: var(--sf-text-muted); font-size: 13px; margin-bottom: 28px; } .sf-legal .sf-card { padding: clamp(20px, 4vw, 36px); } .sf-legal h2 { font-size: 18px; margin: 28px 0 10px; } .sf-legal h2:first-child { margin-top: 0; } .sf-legal p, .sf-legal li { color: var(--sf-text-muted); font-size: 14.5px; line-height: 1.7; } .sf-legal ul { margin: 8px 0; padding-left: 20px; } .sf-legal li + li { margin-top: 4px; } .sf-legal strong { color: var(--sf-text); } .sf-legal a { text-decoration: underline; text-underline-offset: 2px; } /* ---------- Header público ---------- */ .sf-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: color-mix(in srgb, var(--sf-bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sf-border); } .sf-header__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; } .sf-header__brand img { height: 26px; } .sf-tag { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-gold); border: 1px solid rgba(var(--sf-gold-rgb), .35); border-radius: 999px; padding: 2px 8px; font-weight: 600; } .sf-header__nav { display: flex; align-items: center; gap: 10px; } /* ---------- Avatar / menú de usuario — mismo patrón que ERP/Marketing/DOOH/Agente ---------- */ .fp-user-menu { position: relative; } .fp-user-menu__avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sf-border); background: var(--sf-surface-2); color: var(--sf-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; padding: 0; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; } .fp-user-menu__avatar svg { width: 18px; height: 18px; } .fp-user-menu__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .fp-user-menu__avatar:hover { border-color: var(--sf-violet); color: var(--sf-text); box-shadow: 0 0 0 3px rgba(var(--sf-violet-rgb), .15); } .fp-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 300; min-width: 210px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); box-shadow: var(--sf-shadow); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .fp-header-menu--open .fp-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .fp-dropdown__header { padding: 10px 12px; border-bottom: 1px solid var(--sf-border); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; } .fp-dropdown__header strong { font-size: 13.5px; color: var(--sf-text); } .fp-dropdown__header span { font-size: 11.5px; color: var(--sf-text-muted); } .fp-dropdown__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: none; background: none; color: var(--sf-text); font-size: 13px; font-family: inherit; text-align: left; cursor: pointer; border-radius: var(--sf-radius-sm); transition: background-color .12s ease; text-decoration: none; } .fp-dropdown__item:hover { background: var(--sf-surface-2); text-decoration: none; } .fp-dropdown__item--danger { color: var(--sf-danger); } /* ---------- Botones ---------- */ .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--sf-radius-sm); padding: 12px 22px; font-weight: 700; font-size: 14px; cursor: pointer; background: linear-gradient(135deg, var(--sf-violet), color-mix(in srgb, var(--sf-violet) 65%, #3b0ea3)); color: #fff; box-shadow: 0 6px 20px rgba(var(--sf-violet-rgb), .35); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .sf-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(var(--sf-violet-rgb), .45); filter: brightness(1.05); text-decoration: none; } .sf-btn:active { transform: translateY(0); } .sf-btn--gold { background: linear-gradient(135deg, #ffe29a, #f2b632 45%, #d99a1b); box-shadow: 0 6px 20px rgba(var(--sf-gold-rgb), .35); color: #241a00; } .sf-btn--gold:hover { box-shadow: 0 10px 28px rgba(var(--sf-gold-rgb), .45); } .sf-btn--ghost { background: transparent; color: var(--sf-text); box-shadow: none; border: 1px solid var(--sf-border); } .sf-btn--ghost:hover { border-color: var(--sf-violet); box-shadow: none; transform: none; background: rgba(var(--sf-violet-rgb), .06); } .sf-btn--block { width: 100%; } /* Degradado violeta — mismo color que la palabra "Sorteador" del header + una versión apenas más clara, mismo criterio del botón dorado (pedido de Marcos, 2026-08-30). */ .sf-btn--violet { background: linear-gradient(135deg, var(--sf-violet), color-mix(in srgb, var(--sf-violet) 80%, white)); box-shadow: 0 6px 20px rgba(var(--sf-violet-rgb), .35); color: #fff; } .sf-btn--violet:hover { box-shadow: 0 10px 28px rgba(var(--sf-violet-rgb), .45); } /* Botones del hero — puntas un poco más redondeadas que el resto del sitio. */ .sf-hero-card__actions .sf-btn { border-radius: 14px; } .sf-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* ---------- Cards ---------- */ .sf-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); padding: 24px; box-shadow: var(--sf-shadow); } /* ---------- Landing: pasos ---------- */ .sf-steps { position: relative; padding: 60px 0; } /* el gutter horizontal ya lo da .sf-wrap adentro */ .sf-steps--peek-right { padding-bottom: 110px; } /* más aire antes de "Preguntas frecuentes" */ #preguntas { padding-bottom: 110px; } /* más aire antes del footer */ /* Mascota asomando por el lateral de cada sección, activada al entrar en pantalla (scroll) vía sectionPeek.js — alterna izquierda/derecha/izquierda entre las 3 secciones (pedido de Marcos, 2026-08-30). Oculta en pantallas angostas para no pisar el contenido. */ .sf-peek { position: absolute; top: 50%; z-index: 1; pointer-events: none; width: clamp(225px, 19.5vw, 345px); height: auto; opacity: 0; transition: opacity 3s ease, transform 3s cubic-bezier(.16, 1, .3, 1); } .sf-peek--left { left: 48px; transform: translateY(-50%) translateX(-60px); } .sf-peek--right { right: 48px; transform: translateY(-50%) translateX(60px); } .sf-peek.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); } @media (prefers-reduced-motion: reduce) { .sf-peek { transition: none; } } .sf-peek__img { display: block; width: 100%; height: auto; position: relative; z-index: 1; } /* Sombra de piso — mismo criterio que el trío del hero (elipse propia, no drop-shadow siguiendo la silueta, que se ve pegada a la espalda en vez de leerse como apoyo real). */ .sf-peek::after { /* bottom: 6.5% porque el recorte trae ~6.5-7% de aire transparente debajo de los pies en las 3 imágenes (medido con canvas) — con bottom:0 la sombra quedaba pegada al borde del PNG, no a los pies reales, y se veía como si el personaje estuviera flotando. */ content: ''; position: absolute; left: 10%; right: 10%; bottom: 6.5%; height: 4.5%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .15) 55%, transparent 75%); filter: blur(5px); z-index: 0; } /* Mascota chica individual, en flujo normal (no position:absolute como .sf-peek) — para slots tipo "personaje de apoyo al costado" dentro de una card/columna, ej. show.php. Mismo cálculo de sombra que .sf-peek (mismos recortes, mismo ~6.5% de aire debajo de los pies). Rotación de varios personajes con crossfade (pedido de Marcos, 2026-08-30) — cuando tiene más de una imagen, quedan apiladas absolute/inset:0 dentro de un contenedor con aspect-ratio fijo (los 3 peeks comparten el mismo recorte, por eso el mismo aspect-ratio les queda bien a los tres) y mascotCarousel.js va alternando la clase .is-active para el fundido. Con una sola imagen (el caso de antes) sigue funcionando igual, sin JS. */ .sf-side-mascot { position: relative; } .sf-side-mascot--carousel { aspect-ratio: 3 / 5; } .sf-side-mascot img { display: block; width: 100%; height: auto; position: relative; z-index: 1; } .sf-side-mascot--carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; transform-origin: bottom center; /* el scale() por imagen (ver show.php) achica desde los pies, nunca desde arriba */ opacity: 0; transition: opacity 3s ease-in-out; /* fundido fino — la duración real la fija mascotCarousel.js inline */ } .sf-side-mascot--carousel img.is-active { opacity: 1; } .sf-side-mascot::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 6.5%; height: 4.5%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .15) 55%, transparent 75%); filter: blur(5px); z-index: 0; } @media (prefers-reduced-motion: reduce) { .sf-side-mascot--carousel img { transition: none; } } /* ---------- Planes (panel) — pedido de Marcos, 2026-08-30 ---------- */ .sf-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; align-items: stretch; } @media (max-width: 900px) { .sf-pricing-grid { grid-template-columns: 1fr; } } .sf-pricing-card { position: relative; display: flex; flex-direction: column; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 28px 24px; box-shadow: var(--sf-shadow); } .sf-pricing-card--featured { border-color: rgba(var(--sf-violet-rgb), .5); box-shadow: 0 14px 40px rgba(var(--sf-violet-rgb), .22), var(--sf-shadow); } @media (min-width: 901px) { .sf-pricing-card--featured { transform: translateY(-8px); } } .sf-pricing-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--sf-violet), color-mix(in srgb, var(--sf-violet) 80%, white)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(var(--sf-violet-rgb), .35); white-space: nowrap; } .sf-pricing-card h3 { font-size: 19px; margin-bottom: 4px; } .sf-pricing-card__tagline { color: var(--sf-text-muted); font-size: 13px; margin-bottom: 18px; min-height: 34px; } .sf-pricing-card__price { font-family: "Outfit", "Samsung Sharp Sans", sans-serif; font-size: 34px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .sf-pricing-card__price span { font-size: 14px; font-weight: 500; color: var(--sf-text-muted); } .sf-pricing-card__price-note { font-size: 12px; color: var(--sf-text-muted); margin-bottom: 22px; } .sf-pricing-card__list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; } .sf-pricing-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; } .sf-pricing-card__list li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .sf-pricing-card__list li.is-included svg { color: var(--sf-success); } .sf-pricing-card__list li.is-excluded { color: var(--sf-text-muted); } .sf-pricing-card__list li.is-excluded svg { color: var(--sf-text-muted); opacity: .6; } /* Dos botones (mensual/anual) en vez de uno solo, para los planes pagos — pedido de Marcos, 2026-08-30 (integración real de Mercado Pago). */ .sf-pricing-card__cta { display: flex; flex-direction: column; gap: 8px; } /* Pregunta obligatoria "¿Necesitás Factura C?" dentro de cada form de checkout — pedido de Marcos, 2026-08-30. Reusa .sf-check tal cual para las dos opciones (radio, no checkbox — la clase ya es genérica, ver nota en /estilo). */ .sf-pricing-card__invoice-question { margin: 4px 0 10px; } .sf-pricing-card__invoice-label { font-size: 11.5px; font-weight: 600; color: var(--sf-text-muted); margin: 0 0 6px; } .sf-pricing-card__invoice-question .sf-check { margin-bottom: 6px; padding: 8px 10px; } /* Espacio RESERVADO de verdad (no "el margen que sobre") para que el gato nunca pise el contenido — empuja la columna de texto/tarjetas hacia adentro de ese lado, en vez de depender de que la pantalla sea lo bastante ancha por casualidad. Como el contenido se corre hacia el lado contrario a la mascota, el título de esa sección se justifica hacia ese mismo lado. */ @media (min-width: 1100px) { /* El padding reservado usa la MISMA fórmula que el ancho del gato (clamp 225px/19.5vw/345px) + su offset (12px) + un respiro (24px) — así queda siempre ajustado al tamaño real del gato en cada ancho de pantalla, sin la franja de espacio vacío que quedaba con un valor fijo. */ .sf-steps--peek-left .sf-wrap { padding-left: calc(48px + clamp(225px, 19.5vw, 345px) + 24px); } .sf-steps--peek-right .sf-wrap { padding-right: calc(48px + clamp(225px, 19.5vw, 345px) + 24px); } .sf-steps--peek-left .sf-section-title { text-align: right; } .sf-steps--peek-right .sf-section-title { text-align: left; } /* El ícono del kicker acompaña al lado hacia el que se justifica el título: título a la derecha → ícono a la derecha (después de la etiqueta); título a la izquierda → ícono a la izquierda (orden normal, sin invertir). Pedido de Marcos, 2026-08-30. */ .sf-steps--peek-left .sf-kicker { flex-direction: row-reverse; } } @media (max-width: 1099px) { .sf-peek { display: none; } } .sf-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 34px; } .sf-step { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); padding: 26px 22px; box-shadow: var(--sf-shadow); transition: transform .18s ease, border-color .18s ease; } .sf-step:hover { transform: translateY(-3px); border-color: rgba(var(--sf-violet-rgb), .35); } .sf-step__n { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; margin-bottom: 14px; color: var(--sf-violet); background: rgba(var(--sf-violet-rgb), .12); } .sf-step__n svg { width: 18px; height: 18px; } .sf-step h3 { font-size: 16px; margin-bottom: 6px; } .sf-step p { margin: 0; color: var(--sf-text-muted); font-size: 13.8px; } /* Kicker con ícono arriba del título de sección — mismo lenguaje visual que el eyebrow del hero y los íconos de la marquesina, para que los 3 bloques no se sientan "tirados ahí nomás". */ .sf-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-violet); margin-bottom: 14px; } .sf-kicker__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--sf-violet-rgb), .12); } .sf-kicker__icon svg { width: 14px; height: 14px; } .sf-section-title { text-align: center; } .sf-section-title h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; } .sf-section-title p { color: var(--sf-text-muted); margin-top: 4px; line-height: 1.3; } .sf-footer { padding: 0; border-top: 1px solid var(--sf-border); } .sf-footer__inner { max-width: 1280px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sf-footer__brand { display: flex; align-items: center; gap: 10px; } .sf-footer__mark { height: 26px; width: auto; } .sf-footer__text { display: flex; flex-direction: column; line-height: 1.3; } .sf-footer__line1 { font-size: 13px; font-weight: 700; color: var(--sf-text); } .sf-footer__line2 { font-size: 11px; color: var(--sf-text-muted); } .sf-footer__meta { display: flex; align-items: center; gap: 16px; font-size: 11.5px; color: var(--sf-text-muted); } .sf-footer__social { display: flex; align-items: center; gap: 12px; } .sf-footer__social a { color: var(--sf-text-muted); display: inline-flex; transition: color .15s ease; } .sf-footer__social a:hover { color: var(--sf-violet); } .sf-footer__social svg { width: 17px; height: 17px; } /* Franja legal — disclaimer de no afiliación con Meta (requisito de la plataforma de Instagram) + links a Términos/Privacidad, pedido de Marcos 2026-08-30. Separada del bloque de marca de arriba por un borde tenue, texto chico, siempre visible pero sin competir con el resto. */ .sf-footer__legal { max-width: 1280px; margin: 0 auto; padding: 12px 24px 20px; border-top: 1px solid var(--sf-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--sf-text-muted); line-height: 1.5; } .sf-footer__legal-links { display: flex; gap: 6px; white-space: nowrap; } .sf-footer__legal-links a { color: var(--sf-text-muted); text-decoration: underline; text-underline-offset: 2px; } .sf-footer__legal-links a:hover { color: var(--sf-violet); } /* ---------- Auth forms ---------- */ .sf-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 20px; position: relative; } /* Login/registro llevan el mismo pie de página que el resto del sitio — envueltos en .sf-auth-page (columna, altura completa) para que el shell se quede con el espacio restante y el footer quede pegado abajo, en vez de competir por los mismos 100vh (pedido de Marcos, 2026-08-30, ver skill /estilo — sigue sin scroll). Las otras pantallas de auth (olvidé contraseña, restablecer, verificación) no lo usan y siguen con el .sf-auth-shell de siempre. */ .sf-auth-page { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* las mascotas bleedean con left/right negativo — mismo criterio que .sf-landing-page */ .sf-auth-page .sf-auth-shell { min-height: 0; flex: 1; padding: 16px 20px; } .sf-auth-page .sf-footer__inner { padding: 12px 24px; } .sf-auth-shell::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(700px 420px at 50% -10%, rgba(var(--sf-violet-rgb), .14), transparent 60%); } .sf-auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; } /* Registro — más ancho que el resto de los formularios de auth (más campos, aprovecha widescreen en desktop con .sf-field-row de a 2 columnas; en mobile sigue apilado). */ .sf-auth-card--wide { max-width: 620px; } /* Mascotas a los costados del registro (pedido de Marcos, 2026-08-30) — mismo criterio de sombra de apoyo que el resto del sitio (elipse ::after, bottom calibrado por imagen, no drop-shadow siguiendo la silueta). Se ocultan en pantallas angostas, igual que los .sf-peek de la landing, para no pisar la card del formulario. */ .sf-auth-mascot { position: absolute; bottom: 6px; z-index: 0; pointer-events: none; height: clamp(320px, 44vw, 500px); } /* El recorte de la izquierda trae bastante aire transparente a los costados (el gato sentado sobre la caja no ocupa todo el ancho del lienzo), así que con el mismo offset que el de la derecha el personaje quedaba pisando la card ancha del registro — se corre más hacia afuera. Corrección final de Marcos (2026-08-30, dos mockups): primero pegadas al borde (0px de aire), después "más adentro todavía" — quedó con ~70px de aire libre entre el borde de pantalla y el contenido visible de cada mascota, simétrico en ambos lados. El +70px envuelve el mismo clamp de antes (que ya resolvía la diferencia de padding transparente entre los dos recortes) para no perder ese ajuste. */ .sf-auth-mascot--left { left: calc(clamp(-95px, -6vw, -47px) + 70px); } /* Registro usa la card ancha (--wide, 620px) — con el mismo offset que login, el personaje de la izquierda quedaba pisando la card (la caja/tómbola por debajo del formulario). Se corre más hacia afuera solo en esta pantalla, sin tocar el offset de /login (pedido de Marcos, 2026-08-30: "una puede ser mover el personaje de la izquierda un poco a la izquierda para centrar"). */ /* El offset negativo de arriba (-29px extra) sacaba al personaje del viewport (la cola quedaba recortada por el overflow-x:hidden de .sf-auth-page) — la card ancha simplemente no deja suficiente aire para el mismo tamaño que en /login. Se resuelve con un poco menos de alto (no con más corrimiento), volviendo al mismo offset "pegado al borde con 70px de aire" que ya es seguro, para que la imagen completa (incluida la cola) quede siempre dentro de la pantalla. */ .sf-auth-shell:has(.sf-auth-card--wide) .sf-auth-mascot--left { height: clamp(230px, 34vw, 365px); left: calc(clamp(-95px, -6vw, -47px) + 70px); } .sf-auth-mascot--right { right: calc(clamp(-20px, -1.5vw, 0px) + 70px); } .sf-auth-mascot img { display: block; height: 100%; width: auto; position: relative; z-index: 1; } .sf-auth-mascot::after { content: ''; position: absolute; left: 15%; right: 15%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .15) 55%, transparent 75%); filter: blur(5px); z-index: 0; } /* bottom/height medidos con canvas (ver nota de sombras de apoyo en el skill /estilo): el recorte de la derecha (personaje parado) trae ~2% de aire debajo de los pies; el de la izquierda (sentado sobre la caja) trae ~7.3%, porque la base de la caja es más angosta que el lienzo completo del PNG. */ .sf-auth-mascot--right::after { bottom: 2%; height: 3%; } .sf-auth-mascot--left::after { bottom: 7.3%; height: 4.5%; } @media (max-width: 1099px) { .sf-auth-mascot { display: none; } } /* Entrada con desplazamiento lateral + aparición progresiva (pedido de Marcos, 2026-08-30, /login y /registro) — cada personaje entra desde SU lado hacia la posición final (izquierda: de izquierda a derecha; derecha: de derecha a izquierda), nunca al revés cruzando el centro. La posición final la sigue dando `left`/`right` de arriba — la animación solo agrega el offset de entrada vía transform, así que nunca hay que tocar los dos valores en simultáneo. */ /* Delays escalonados: izquierda arranca al segundo 1, derecha al segundo 2 — así la izquierda entra 1 segundo antes que la derecha, y la derecha "entra a los 2 segundos" en términos absolutos (pedido de Marcos, 2026-08-30). Duraciones distintas a propósito (4s / 6s), no un error de tipeo. */ .sf-auth-mascot--left { opacity: 0; animation: sfAuthMascotLeft 2s ease 1s forwards; } .sf-auth-mascot--right { opacity: 0; animation: sfAuthMascotRight 4s ease 2s forwards; } @keyframes sfAuthMascotLeft { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } } @keyframes sfAuthMascotRight { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .sf-auth-mascot--left, .sf-auth-mascot--right { animation: none; opacity: 1; } } .sf-auth-card__logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 10px; font-weight: 700; } .sf-auth-card__logo img { height: 24px; } .sf-auth-card h1 { font-size: 20px; text-align: center; margin-bottom: 4px; } .sf-auth-card p.sub { text-align: center; color: var(--sf-text-muted); font-size: 13px; margin: 0 0 12px; } /* Login/registro tienen que entrar enteros en la pantalla sin scroll (bloque completo, incluido el link de pie "¿Ya tenés/no tenés cuenta?") — todo lo de acá abajo son recortes chicos de espaciado sobre el mismo .sf-card/.sf-field/.sf-check compartidos, sin tocarlos globalmente (pedido de Marcos, 2026-08-30, ver skill /estilo). */ .sf-auth-card .sf-card { padding: 18px; } .sf-auth-card .sf-field { margin-bottom: 12px; } .sf-auth-card .sf-check { padding: 4px 10px; margin-bottom: 2px; } /* El margin-top de 3px del checkbox global está calibrado para el font-size de 15.5px que usa el resto del sitio — acá adentro el texto de .sf-check corre más chico (12.8px, line-height 17.9px), así que ese mismo margin-top deja el checkbox ~2px más abajo que el centro real del texto. Recalibrado para este contexto puntual, no se toca el valor global. */ .sf-auth-card .sf-check input { margin-top: 1px; } .sf-field { margin-bottom: 16px; } .sf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .sf-field-row { grid-template-columns: 1fr; } } /* Perfil — dos columnas para aprovechar el ancho (pedido de Marcos, 2026-08-30: "que resuelva todo en una sola pantalla sin scroll"), en vez de una columna angosta flotando en el medio. */ .sf-profile-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; } @media (max-width: 760px) { .sf-profile-grid { grid-template-columns: 1fr; } } /* "Mi perfil" un poco más chico y más arriba — menos padding superior de la página y título más compacto (pedido de Marcos, 2026-08-30). */ .sf-profile-page { padding-top: 16px; } .sf-profile-page .sf-dash-greeting { margin-bottom: 18px; } .sf-profile-page .sf-dash-greeting h1 { font-size: 21px; } .sf-card--danger { border-color: var(--sf-danger) !important; } .sf-card--danger__title { color: var(--sf-danger); margin-bottom: 8px; font-size: 16px; } .sf-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--sf-text-muted); } .sf-field input[type="text"], .sf-field input[type="email"], .sf-field input[type="password"], .sf-field input[type="number"], .sf-field input[type="datetime-local"], .sf-field select { width: 100%; padding: 12px 14px; border-radius: var(--sf-radius-sm); border: 1px solid var(--sf-border); background: var(--sf-surface-2); color: var(--sf-text); font-size: 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .sf-field input:hover, .sf-field select:hover { border-color: rgba(var(--sf-violet-rgb), .4); } .sf-field input:focus, .sf-field select:focus { outline: none; border-color: var(--sf-violet); box-shadow: 0 0 0 3px rgba(var(--sf-violet-rgb), .15); background: var(--sf-surface); } /* Checklist — cada regla es una fila seleccionable, no un checkbox suelto con texto al lado. */ .sf-check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.8px; color: var(--sf-text-muted); line-height: 1.4; padding: 10px 12px; border-radius: var(--sf-radius-sm); margin-bottom: 8px; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease; } .sf-check:hover { background: var(--sf-surface-2); } .sf-check:has(input:checked) { background: rgba(var(--sf-violet-rgb), .08); border-color: rgba(var(--sf-violet-rgb), .25); } .sf-check input { margin-top: 3px; accent-color: var(--sf-violet); width: 16px; height: 16px; flex-shrink: 0; } /* Ícono de ojo para mostrar/ocultar contraseña — mismo patrón que Marketing/ERP/DOOH/Agente/Hub (clases fp-* reusadas tal cual, solo las variables de color son las --sf-* propias). */ .fp-password-wrap { position: relative; } .fp-password-wrap input { padding-right: 40px; } .fp-password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--sf-text-muted); cursor: pointer; border-radius: var(--sf-radius-sm); transition: color .15s ease; } .fp-password-toggle:hover { color: var(--sf-text); } .fp-password-toggle svg { width: 18px; height: 18px; } .fp-icon-eye-off[hidden] { display: none; } /* Páginas de "wizard" de un sorteo (nuevo / importar / ejecutar / resultado) — centradas en la pantalla con ancho generoso, no una columna angosta perdida arriba a la izquierda de una pantalla ancha (pedido de Marcos, 2026-08-30: "aprovechá el widescreen", "centrar en eje Y"). */ .sf-wizard-page { min-height: calc(100vh - 180px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; } /* Encabezado del wizard con botón "Volver al panel" a la derecha del título — reusable en cualquier paso del flujo de un sorteo (pedido de Marcos, 2026-08-30). */ .sf-wizard-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%; margin-bottom: 8px; } .sf-wizard-page__head .sf-dash-greeting { text-align: left; margin-bottom: 0; } .sf-wizard-page .sf-dash-greeting { text-align: center; } /* Reglas — grid de 2 columnas en desktop (el bloque más largo ocupa el ancho completo). */ /* Requisitos al lado de Ganadores/Exclusiones, no arriba — "todo apilado lateralmente, no para abajo" (pedido de Marcos, 2026-08-30). Ganadores+Exclusiones comparten la columna derecha porque son cortas — apilarlas ENTRE ELLAS es inevitable (y esperado), lo que no se puede es apilar el conjunto completo contra Requisitos. */ .sf-rules-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; } .sf-rules-grid > .sf-card { height: 100%; } .sf-rules-grid__side { display: flex; flex-direction: column; gap: 20px; } @media (max-width: 900px) { .sf-rules-grid { grid-template-columns: 1fr; } } /* Ejecutar sorteo — estadísticas a la izquierda, botón de acción a la derecha en desktop. */ .sf-execute-layout { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; text-align: left; } .sf-execute-layout__stats { flex: 1 1 380px; } .sf-execute-layout__action { flex: 1 1 320px; max-width: 380px; text-align: center; } @media (max-width: 760px) { .sf-execute-layout { text-align: center; } } .sf-auth-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; } .sf-auth-foot { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--sf-text-muted); } .sf-alert { padding: 12px 16px; border-radius: var(--sf-radius-sm); font-size: 13.5px; margin-bottom: 18px; border: 1px solid transparent; } .sf-alert--error { background: color-mix(in srgb, var(--sf-danger) 12%, transparent); color: var(--sf-danger); border-color: color-mix(in srgb, var(--sf-danger) 30%, transparent); } .sf-alert--success { background: color-mix(in srgb, var(--sf-success) 12%, transparent); color: var(--sf-success); border-color: color-mix(in srgb, var(--sf-success) 30%, transparent); } /* ---------- Dashboard ---------- */ .sf-dash-shell { min-height: 100vh; } .sf-dash-main { padding: 32px 24px 80px; } .sf-dash-greeting { margin-bottom: 28px; } .sf-dash-greeting h1 { font-size: 24px; } .sf-dash-greeting p { color: var(--sf-text-muted); margin-top: 3px; } /* Encabezado del panel en dos columnas (mockup de Marcos, 2026-08-30): nombre a la izquierda, kicker + descripción a la derecha. */ .sf-dash-greeting--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .sf-dash-greeting__right { text-align: right; } @media (max-width: 640px) { .sf-dash-greeting--split { flex-direction: column; } .sf-dash-greeting__right { text-align: left; } } .sf-cta-card { border-radius: var(--sf-radius-lg); padding: 36px; margin-bottom: 28px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(var(--sf-violet-rgb),.16), rgba(var(--sf-gold-rgb),.10)); border: 1px solid rgba(var(--sf-violet-rgb), .25); } .sf-cta-card h2 { font-size: 22px; margin-bottom: 8px; } .sf-cta-card p { color: var(--sf-text-muted); margin: 0 0 20px; max-width: 46ch; } /* Con imagen (cuando exista assets/img/dashboard-cta.png) — texto a la izquierda, arte a la derecha, mismo lenguaje del hero de la landing (texto + mascota lado a lado). */ .sf-cta-card--with-art { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .sf-cta-card__body { flex: 1 1 280px; } .sf-cta-card__art-wrap { position: relative; flex: 0 1 420px; width: clamp(220px, 32vw, 420px); } .sf-cta-card__art { width: 100%; height: auto; max-height: 200px; object-fit: contain; display: block; position: relative; z-index: 1; } /* Sombra de apoyo — mismo patrón documentado en el skill /estilo (elipse ancha y suave, bottom medido con canvas: este recorte trae 4.62% de aire transparente debajo de los pies). */ .sf-cta-card__art-wrap::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 4.62%; height: 6%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .15) 55%, transparent 75%); filter: blur(4px); z-index: 0; } @media (max-width: 640px) { .sf-cta-card__art-wrap { display: none; } } .sf-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; } .sf-stat-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--sf-violet-rgb), .12); color: var(--sf-violet); margin-bottom: 10px; } .sf-stat-card__icon svg { width: 16px; height: 16px; } .sf-stat-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); padding: 18px 20px; box-shadow: var(--sf-shadow); } .sf-stat-card__label { font-size: 12px; color: var(--sf-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .sf-stat-card__value { font-size: 26px; font-weight: 700; margin-top: 6px; } .sf-stat-card__sub { font-size: 12.5px; color: var(--sf-text-muted); margin-top: 4px; } .sf-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .sf-badge--warn { background: rgba(var(--sf-gold-rgb), .14); color: var(--sf-gold); } .sf-badge--good { background: color-mix(in srgb, var(--sf-success) 14%, transparent); color: var(--sf-success); } .sf-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sf-empty { text-align: center; padding: 40px 20px; color: var(--sf-text-muted); background: var(--sf-surface); border: 1px dashed var(--sf-border); border-radius: var(--sf-radius-md); } /* ---------- Vista previa de publicación + importación ---------- */ .sf-media-card { display: flex; gap: 18px; } .sf-media-card__thumb { width: 96px; height: 96px; border-radius: var(--sf-radius-sm); object-fit: cover; background: var(--sf-surface-2); flex-shrink: 0; } .sf-media-card__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); font-size: 11px; text-align: center; padding: 8px; } .sf-media-card__body { min-width: 0; } .sf-media-card__caption { font-size: 13.5px; color: var(--sf-text-muted); margin: 4px 0 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sf-media-card__meta { font-size: 12px; color: var(--sf-text-muted); display: flex; gap: 12px; flex-wrap: wrap; } .sf-progress-bar { height: 8px; border-radius: 999px; background: var(--sf-surface-2); overflow: hidden; margin: 14px 0 8px; position: relative; } /* Brillo que recorre la barra mientras importa — motion sutil, se apaga solo cuando el fill llega a 100% porque en ese punto no hay barra vacía por delante que "recorrer". */ .sf-progress-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); width: 40%; animation: sfProgressSheen 1.6s ease-in-out infinite; } @keyframes sfProgressSheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .sf-progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--sf-violet), var(--sf-gold)); width: 0%; transition: width .3s ease; position: relative; z-index: 1; } .sf-import-status { font-size: 13px; color: var(--sf-text-muted); } /* ---------- Glass/glow — pasos del flujo de sorteo (más "moderno", pedido de Marcos 2026-08-30): translúcido + blur + glow violeta sutil, mismo lenguaje del glow del hero pero aplicado a cards de contenido. Nuevo patrón reusable — documentado acá para no reinventarlo en otra pantalla: sumar .sf-card--glass a cualquier .sf-card que quiera este tratamiento. ---------- */ .sf-card--glass { position: relative; overflow: hidden; background: color-mix(in srgb, var(--sf-surface) 70%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in srgb, var(--sf-violet) 28%, var(--sf-border)); box-shadow: 0 10px 34px rgba(var(--sf-violet-rgb), .14), var(--sf-shadow); } .sf-card--glass::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px 220px at 12% -12%, rgba(var(--sf-violet-rgb), .16), transparent 60%); } .sf-card--glass > * { position: relative; z-index: 1; } /* Motion de entrada — fade + rise reusando el keyframe sfRise ya definido para el hero. */ .sf-fade-rise { opacity: 0; animation: sfRise .6s ease forwards; } .sf-fade-rise--d1 { animation-delay: .08s; } .sf-fade-rise--d2 { animation-delay: .16s; } @media (prefers-reduced-motion: reduce) { .sf-fade-rise { animation: none; opacity: 1; } .sf-progress-bar::after { animation: none; display: none; } } .sf-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); box-shadow: var(--sf-shadow); } .sf-list-row + .sf-list-row { margin-top: 10px; } /* "Mis sorteos" se sentía tosco/grandote — todo un cambio apenas hacia abajo en escala, no un rediseño (pedido de Marcos, 2026-08-30). */ .sf-giveaways-list .sf-dash-greeting h1 { font-size: 21px; } .sf-giveaways-list .sf-list-row { padding: 13px 18px; } .sf-giveaways-list .sf-list-row strong { font-size: 14px; } .sf-giveaways-list .sf-list-row .sf-btn--ghost { padding: 9px 16px; font-size: 12.5px; } /* ============================================================================ LANDING — hero premium con nav flotante + marquee (2026-08-30) Adaptación en CSS/JS puro (sin React/Tailwind/Motion — el proyecto no usa build ni npm) de un lenguaje visual que Marcos trajo de referencia: hero grande de esquinas muy redondeadas, nav flotante tipo píldora con blur superpuesto al hero, entrada con fade+slide, scroller de marquee infinito con máscara en los bordes. El contenido (headline, chips del marquee) es 100% propio de Sorteador Focus — nada de logos ajenos ni video de stock de otro producto. ========================================================================= */ .sf-display { font-family: "Outfit", "Samsung Sharp Sans", "Segoe UI", system-ui, sans-serif; } .sf-landing-wrap { max-width: 1400px; margin: 0 auto; padding: 20px clamp(14px, 3vw, 28px) 0; } /* El hero ya NO es una tarjeta delimitada ni está acotado al mismo ancho que el resto del contenido (pedido de Marcos, 2026-08-30) — la sección exterior es widescreen (100% del viewport), y adentro un wrapper centra el contenido a un ancho legible. El degradado decorativo vive en body::before (ver más abajo, scope .sf-landing-page) para que llegue a la sección siguiente sin un corte brusco — no está recortado al alto de esta caja. */ .sf-hero-section { width: 100%; } .sf-hero-card { position: relative; max-width: 1400px; margin: 0 auto; padding: 22px clamp(20px, 4vw, 48px) 56px; } .sf-hero-card__topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 68px; /* espacio extra pedido por Marcos para centrar mejor el hero */ } .sf-hero-card__brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; } .sf-hero-card__brand img { height: 22px; } /* Menú unificado — reemplaza al nav flotante de antes; todo vive en la misma línea del header. */ .sf-hero-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .sf-hero-nav__link { font-size: 13.5px; font-weight: 600; color: var(--sf-text-muted); white-space: nowrap; } .sf-hero-nav__link:hover { color: var(--sf-text); text-decoration: none; } .sf-btn--sm { padding: 9px 16px; font-size: 12.5px; } @media (max-width: 640px) { .sf-hero-nav { gap: 8px; } .sf-hero-nav__link { display: none; } .sf-btn--sm { padding: 7px 12px; font-size: 11.5px; } } /* Cuerpo del hero — texto a la izquierda, mascota a la derecha, en fila (sin cajas absolutas). */ .sf-hero-card__body { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .sf-hero-card__content { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; align-items: flex-start; } .sf-hero-card__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--sf-gold); letter-spacing: .04em; margin-bottom: 20px; opacity: 0; animation: sfRise .7s ease forwards; } .sf-hero-card__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-gold); box-shadow: 0 0 0 4px rgba(var(--sf-gold-rgb), .18); } .sf-hero-card h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.05; letter-spacing: -.01em; font-weight: 600; color: var(--sf-hero-heading); max-width: 16ch; opacity: 0; animation: sfRise .8s ease forwards; animation-delay: .08s; } /* Degradado estilo Instagram (violeta -> magenta -> naranja -> amarillo), pedido de Marcos. Global (no solo el h1 del hero) para reusarlo tal cual en los títulos de sección — mismo patrón, sin inventar una variante nueva. */ .accent { background: linear-gradient(90deg, #7024c4, #b52d8f 25%, #e0316f 45%, #f7623e 70%, #fbc02d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .sf-hero-card p.sub { font-size: 15.5px; color: var(--sf-text-muted); margin: 20px 0 0; max-width: 46ch; line-height: 1.6; opacity: 0; animation: sfRise .8s ease forwards; animation-delay: .16s; } /* Vista previa pública sin login, en franja ancha entre la marquesina y "Cómo funciona" (pedido de Marcos, 2026-08-30 — el hero vuelve a ser solo título+subtítulo+acciones, esta franja aprovecha el ancho completo del contenedor). Copy a la izquierda, input+botón a la derecha en una sola fila en desktop; se apila en mobile. Reusa .sf-card--glass/.sf-field/.sf-kicker, nada de estilo nuevo inventado salvo el layout de fila. */ .sf-preview-band { padding: 0 0 8px; } .sf-preview-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: 30px clamp(20px, 4vw, 44px); transition: opacity .35s ease, transform .35s ease; } /* Al mostrar el resultado, la barra de copy+input se desvanece (nunca queda apilada arriba del resultado) — pedido de Marcos, 2026-08-30. --hiding dispara la transición, --hidden la saca del flujo una vez terminada (así el resultado ocupa exactamente el mismo lugar). */ .sf-preview-band__inner--hiding { opacity: 0; transform: translateY(-6px); pointer-events: none; } .sf-preview-band__inner--hidden { display: none; } .sf-preview-band__copy { flex: 1 1 240px; min-width: 220px; } .sf-preview-band__copy .sf-kicker { margin-bottom: 8px; } .sf-preview-band__copy h2 { font-size: clamp(20px, 2.3vw, 25px); font-weight: 600; color: var(--sf-hero-heading); } .sf-preview-band__form { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 460px; min-width: 280px; max-width: 620px; } .sf-preview-band__form .sf-field { flex: 1; margin-bottom: 0; } @media (max-width: 640px) { .sf-preview-band__form { flex-direction: column; width: 100%; } .sf-preview-band__form .sf-btn { width: 100%; } } .sf-preview-band__result { position: relative; } .sf-preview-band__result:empty { display: none; } /* El resultado entra estilizado al mismo ancho completo que ocupaba la barra de input (mismo padding/proporciones que .sf-preview-band__inner) — no un cuadrito chico aparte. */ .sf-preview-result { position: relative; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; text-align: left; padding: 28px clamp(20px, 4vw, 44px); animation: sfRise .5s ease forwards; } /* Burbujas de "engagement" saliendo del posteo — pedido de Marcos, 2026-08-30, movimiento lento tipo soplado. Puramente decorativo (íconos genéricos, no avatares reales — ver linkPreview.js). Cuelga de .sf-preview-band__result (el contenedor, NO la card) porque .sf-card--glass trae overflow:hidden para su glow — clipearía las burbujas justo donde más tienen que verse. */ .sf-bubble-layer { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 4; } .sf-bubble { position: absolute; transform: translate(-50%, -50%); transform-origin: center; line-height: 1; user-select: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); animation-name: sfBubbleFloat; animation-timing-function: ease-out; animation-fill-mode: forwards; } @keyframes sfBubbleFloat { 0% { transform: translate(-50%, -50%) translate(0, 0) scale(.4); opacity: 0; } 12% { opacity: 1; } 30% { transform: translate(-50%, -50%) translate(calc(var(--bx) * .3 + 10px), calc(var(--by) * .3)) scale(.8); } 55% { transform: translate(-50%, -50%) translate(calc(var(--bx) * .55 - 12px), calc(var(--by) * .55)) scale(.95); } 80% { opacity: .85; transform: translate(-50%, -50%) translate(calc(var(--bx) * .8 + 8px), calc(var(--by) * .8)) scale(1.05); } 100% { transform: translate(-50%, -50%) translate(var(--bx), var(--by)) scale(1.1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sf-bubble-layer { display: none; } } .sf-preview-result__thumb-wrap { position: relative; flex-shrink: 0; } .sf-preview-result__thumb { display: block; width: 80px; height: 80px; border-radius: var(--sf-radius-sm); object-fit: cover; } /* Badge de comentarios estilo AppSorteos, superpuesto en la esquina de la miniatura — pedido de Marcos, 2026-08-30, sale del og:description real (ver linkPreview.js). */ .sf-preview-result__badge { position: absolute; right: -8px; bottom: -8px; padding: 3px 8px; border-radius: 999px; background: var(--sf-violet); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: var(--sf-shadow); border: 2px solid var(--sf-surface); } .sf-preview-result__body { flex: 1 1 240px; min-width: 200px; } .sf-preview-result .sf-btn { flex-shrink: 0; } @media (max-width: 640px) { .sf-preview-result .sf-btn { width: 100%; } } .sf-preview-result p { margin: 5px 0 12px; color: var(--sf-text-muted); font-size: 13px; line-height: 1.4; } .sf-preview-result strong { font-size: 14.5px; } .sf-preview-result__author { margin: 3px 0 0; font-size: 12.5px; font-weight: 600; color: var(--sf-violet); } .sf-hero-card__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; opacity: 0; animation: sfRise .8s ease forwards; animation-delay: .24s; } /* Trío de mascota — al lado del texto, no debajo (pedido de Marcos, 2026-08-30). Entrada con fade+rise y, encima, un flotado sutil continuo en loop para que se sienta viva sin depender de un video. La sombra es una elipse de piso (::after), no drop-shadow sobre la imagen — eso seguía la silueta entera y quedaba pegado a la espalda en vez de leerse como apoyo en el piso. */ .sf-hero-card__trio-wrap { position: relative; flex: 1 1 460px; max-width: 560px; width: 100%; } .sf-hero-card__trio-wrap::after { /* bottom: 3.6% — medido con canvas, el recorte trae esa proporción de aire transparente debajo de los pies/la caja/la tómbola (ver nota de sombras de apoyo en el skill /estilo). */ content: ''; position: absolute; left: 4%; right: 4%; bottom: 3.6%; height: 6.5%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .28) 50%, transparent 78%); filter: blur(2.5px); z-index: 0; } .sf-hero-card__trio { position: relative; z-index: 1; display: block; width: 100%; height: auto; transform-origin: bottom center; /* el zoom crece desde los pies, nunca se despega del piso */ opacity: 0; animation: sfRiseTrio 1s ease forwards, sfZoomTrio 8s ease-in-out infinite; animation-delay: .3s, 1.3s; /* el zoom arranca recién cuando termina la entrada */ } @keyframes sfRiseTrio { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Zoom in/out muy progresivo e imperceptible — nunca traslada en Y (eso se leía como que el personaje flota, contradiciendo la sombra de apoyo por contacto). */ @keyframes sfZoomTrio { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } } @keyframes sfRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .sf-hero-card__eyebrow, .sf-hero-card h1, .sf-hero-card p.sub, .sf-hero-card__actions, .sf-hero-card__trio { animation: none !important; opacity: 1 !important; } } @media (max-width: 760px) { .sf-hero-card__trio-wrap { display: none; } } /* Marquee infinito, en CSS puro, pausa en hover, máscara en los bordes */ .sf-marquee { padding: 10px 0 46px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .sf-marquee__track { display: flex; gap: 14px; width: max-content; animation: sfMarquee 34s linear infinite; } .sf-marquee:hover .sf-marquee__track { animation-play-state: paused; } @keyframes sfMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .sf-marquee__track { animation: none; } } .sf-marquee__chip { position: relative; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; border-radius: 999px; background: var(--sf-surface); border: 1px solid var(--sf-border); box-shadow: var(--sf-shadow); font-size: 13px; font-weight: 600; color: var(--sf-text); white-space: nowrap; } .sf-marquee__chip .icon { display: inline-flex; flex-shrink: 0; color: var(--sf-violet); } .sf-marquee__chip .icon svg { width: 18px; height: 18px; }