/* ============================================================ STREAM Digital Studio — stylesheet Dark theme by default. [data-theme="light"] on flips to the light mood. Estratto dal prototipo di design (hi-fi). ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --black: #07090E; --dark: #0D1117; --surface: #141921; --surface2: #1C2333; --border: #252D3D; --text-muted: #5C6B82; --text-secondary: #8A97AA; --text-primary: #E8EDF3; --white: #F4F7FA; --teal: #00C9BE; --teal-2: #006FF5; --teal-dim: rgba(0, 201, 190, 0.13); --teal-mid: rgba(0, 201, 190, 0.33); --amber: #F5A623; --amber-dim: rgba(245, 166, 35, 0.10); --nav-bg: rgba(7, 9, 14, 0.82); --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.4); --radius: 12px; --radius-lg: 20px; --radius-xl: 28px; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --maxw: 1120px; color-scheme: dark; } /* ─── LIGHT MOOD ─── */ [data-theme="light"] { --black: #F6F8FB; --dark: #FFFFFF; --surface: #FFFFFF; --surface2: #F0F4F9; --border: #E3E9F1; --text-muted: #8090A6; --text-secondary: #51607A; --text-primary: #1B2334; --white: #0A1220; --teal: #009E96; --teal-2: #0061E0; --teal-dim: rgba(0, 158, 150, 0.10); --teal-mid: rgba(0, 158, 150, 0.32); --amber: #BC7400; --amber-dim: rgba(188, 116, 0, 0.10); --nav-bg: rgba(255, 255, 255, 0.82); --shadow-card: 0 18px 50px rgba(17, 34, 64, 0.10); color-scheme: light; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--black); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; line-height: 1.15; } a { color: inherit; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--dark); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } /* brand logo (tintable mask, theme-aware) */ /* Logo orizzontale (ratio ~2.27:1): casella proporzionata così riempie lo spazio. */ .brand-logo{display:block;background-color:var(--white);-webkit-mask:url('/assets/logo.png') left center/contain no-repeat;mask:url('/assets/logo.png') left center/contain no-repeat;} .nav-logo .brand-logo{height:44px;width:100px;} .footer-brand .brand-logo{height:52px;width:118px;} /* ─── NAV ─── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: border-color var(--transition), background var(--transition); } nav.scrolled { border-bottom-color: var(--border); } .nav-logo { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 10px; } .nav-logo-mark { width: 30px; height: 30px; background: linear-gradient(135deg, var(--teal), var(--teal-2)); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; } .nav-logo-mark svg { width: 16px; height: 16px; display: block; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 8px; transition: color var(--transition), background var(--transition); } .nav-links a:hover { color: var(--white); background: var(--surface2); } .nav-cta { background: var(--teal) !important; color: #04201E !important; font-weight: 600 !important; padding: 8px 18px !important; } .nav-cta:hover { filter: brightness(1.08); } /* theme toggle (sostituisce il pannello Tweaks del prototipo) */ .theme-toggle { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text-secondary); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .theme-toggle:hover { color: var(--teal); border-color: var(--teal-mid); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } .nav-right { display: flex; align-items: center; gap: 10px; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border: none; background: none; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: var(--transition); } .mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: var(--dark); border-bottom: 1px solid var(--border); padding: 16px 24px 20px; z-index: 99; flex-direction: column; gap: 2px; } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--text-secondary); text-decoration: none; font-size: 16px; font-weight: 500; padding: 13px 0; border-bottom: 1px solid var(--border); transition: color var(--transition); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a:hover { color: var(--teal); } /* ─── HERO ─── */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 128px 24px 80px; position: relative; overflow: hidden; } .hero-mesh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .mesh-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 12s ease-in-out infinite alternate; } .orb1 { width: 600px; height: 600px; top: -120px; left: -150px; background: radial-gradient(circle, rgba(0,201,190,0.18) 0%, transparent 70%); animation-duration: 14s; } .orb2 { width: 520px; height: 520px; top: 18%; right: -120px; background: radial-gradient(circle, rgba(0,111,245,0.14) 0%, transparent 70%); animation-duration: 10s; animation-delay: -4s; } .orb3 { width: 420px; height: 420px; bottom: -40px; left: 38%; background: radial-gradient(circle, rgba(245,166,35,0.09) 0%, transparent 70%); animation-duration: 16s; animation-delay: -8s; } @keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(40px,-30px) scale(1.08); } } .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.35; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%); } .hero-inner { position: relative; z-index: 1; max-width: 860px; width: 100%; display: flex; flex-direction: column; align-items: center; } .hero-visual { display: none; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 6px 16px 6px 10px; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 32px; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .hero h1 { font-size: clamp(48px, 8vw, 88px); font-weight: 700; color: var(--white); margin-bottom: 24px; letter-spacing: -0.035em; } .hero h1 .grad { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-sub { font-size: clamp(17px, 2.5vw, 21px); color: var(--text-secondary); max-width: 580px; margin: 0 auto 40px; line-height: 1.65; } .hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: 10px; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: 'Inter', sans-serif; transition: background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .btn-primary { background: var(--teal); color: #04201E; } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,201,190,0.3); } .btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover { background: var(--surface2); border-color: var(--text-muted); transform: translateY(-2px); } .hero-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .trust-pill { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); } .trust-pill svg { color: var(--teal); flex-shrink: 0; } /* Hero variation: SPLIT layout */ [data-hero="split"] .hero { text-align: left; } [data-hero="split"] .hero-inner { max-width: var(--maxw); flex-direction: row; align-items: center; gap: 56px; } [data-hero="split"] .hero-copy { flex: 1; min-width: 0; } [data-hero="split"] .hero-sub { margin-left: 0; } [data-hero="split"] .hero-buttons, [data-hero="split"] .hero-trust { justify-content: flex-start; } [data-hero="split"] .hero-visual { display: block; flex: 0 0 42%; max-width: 440px; } @media (max-width: 880px) { [data-hero="split"] .hero-inner { flex-direction: column; align-items: flex-start; } [data-hero="split"] .hero-visual { display: none; } } /* Hero background variations */ [data-herobg="grid"] .hero-mesh { display: none; } [data-herobg="solid"] .hero-mesh { display: none; } [data-herobg="solid"] .hero::before { display: none; } [data-herobg="aurora"] .orb1 { background: radial-gradient(circle, rgba(0,201,190,0.28) 0%, transparent 70%); width: 720px; height: 720px; } [data-herobg="aurora"] .orb2 { background: radial-gradient(circle, rgba(0,111,245,0.24) 0%, transparent 70%); width: 640px; height: 640px; } [data-herobg="aurora"] .orb3 { background: radial-gradient(circle, rgba(155,89,245,0.16) 0%, transparent 70%); } [data-herobg="aurora"] .hero::before { opacity: 0.15; } /* Hero device mockup (for split layout) */ .hero-device { background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); } .hero-device-bar { height: 34px; background: var(--surface); display: flex; align-items: center; padding: 0 14px; gap: 6px; border-bottom: 1px solid var(--border); } .hero-device-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; } .hero-device-bar i:nth-child(1) { background: #FF5F56; } .hero-device-bar i:nth-child(2) { background: #FFBD2E; } .hero-device-bar i:nth-child(3) { background: #27C93F; } .hero-device-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .hd-line { height: 12px; border-radius: 6px; background: var(--border); } .hd-line.title { height: 18px; width: 70%; background: linear-gradient(90deg, var(--teal), var(--teal-2)); opacity: 0.8; } .hd-line.s { width: 55%; } .hd-line.m { width: 80%; } .hd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } .hd-tile { height: 64px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); } .hd-tile.accent { background: var(--teal-dim); border-color: var(--teal-mid); } /* ─── SECTION SHARED ─── */ section { padding: 96px 24px; } .container { max-width: var(--maxw); margin: 0 auto; } .section-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .section-title { font-size: clamp(30px, 4vw, 48px); font-weight: 700; color: var(--white); margin-bottom: 16px; } .section-sub { font-size: 17px; color: var(--text-secondary); max-width: 540px; line-height: 1.65; } .section-header { margin-bottom: 56px; } #services { background: var(--dark); } /* ─── PRICING CARDS ─── */ .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .service-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--teal), var(--teal-2)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .service-card:hover { border-color: var(--teal-mid); transform: translateY(-4px); box-shadow: var(--shadow-card); } .service-card:hover::before { transform: scaleX(1); } .service-card.featured { border-color: var(--teal-mid); background: linear-gradient(160deg, var(--surface) 0%, var(--teal-dim) 100%); } .card-badge { display: inline-block; background: var(--teal-dim); color: var(--teal); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 16px; } .card-badge.amber { background: var(--amber-dim); color: var(--amber); } .card-price { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 4px; letter-spacing: -0.03em; } .card-price span { font-size: 17px; color: var(--text-muted); font-weight: 400; } .card-name { font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 6px; } .card-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; } .card-divider { height: 1px; background: var(--border); margin-bottom: 20px; } .card-features { list-style: none; display: flex; flex-direction: column; gap: 10px; } .card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-secondary); line-height: 1.4; } .check-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--teal); } .card-cta { display: block; width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-primary); font-size: 14px; font-weight: 600; padding: 11px; border-radius: 8px; text-align: center; text-decoration: none; cursor: pointer; margin-top: 24px; transition: background var(--transition), border-color var(--transition), color var(--transition); } .card-cta:hover { background: var(--teal); border-color: var(--teal); color: #04201E; } .card-cta.primary { background: var(--teal); border-color: var(--teal); color: #04201E; } .card-cta.primary:hover { filter: brightness(1.08); } .content-section { margin-top: 80px; } .content-title { font-size: 24px; font-weight: 700; color: var(--white); margin-bottom: 24px; } /* Setup fees */ .setup-section { margin-top: 80px; } .setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; } .setup-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .setup-card h4 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; } .setup-price { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: var(--amber); margin-bottom: 8px; } .setup-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .setup-note { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; font-size: 14px; color: var(--text-muted); line-height: 1.6; } .setup-note strong { color: var(--text-secondary); } .pricing-cards .service-card{display:flex;flex-direction:column} .pricing-cards .service-card .card-cta{margin-top:auto} .pricing-cards .service-card > *:has(+ .card-cta){margin-bottom:12px} .content-section .service-card{display:flex;flex-direction:column} .content-section .service-card .card-cta{margin-top:auto} .content-section .service-card > *:has(+ .card-cta){margin-bottom:12px} .content-section .services-grid{grid-template-columns:repeat(2,1fr)} @media (max-width:760px){ .content-section .services-grid{grid-template-columns:1fr} } .pricing-cards .services-grid{grid-template-columns:repeat(3,1fr)} @media (max-width:880px){ .pricing-cards .services-grid{grid-template-columns:1fr} .pricing-cards .service-card{grid-column:auto !important} } /* ─── PRICING TABLE (variation) ─── */ [data-pricing="cards"] .pricing-table-section { display: none; } [data-pricing="table"] .pricing-cards { display: none; } .pricing-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } .pricing-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--surface); } .pricing-table th { background: var(--surface); padding: 22px 20px 18px; text-align: center; font-family: 'Space Grotesk', sans-serif; border-bottom: 1px solid var(--border); vertical-align: bottom; } .pricing-table th:first-child { text-align: left; min-width: 200px; } .pth-name { font-size: 14px; font-weight: 700; color: var(--white); display: block; margin-bottom: 4px; } .pth-price { font-size: 26px; font-weight: 700; color: var(--white); letter-spacing: -0.03em; } .pricing-table th.featured { border-top: 2px solid var(--teal); background: var(--teal-dim); } .pricing-table th.featured .pth-name { color: var(--teal); } .pricing-table td { padding: 14px 20px; text-align: center; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border); } .pricing-table td.featured { background: var(--teal-dim); } .pricing-table tr:last-child td { border-bottom: none; } .pricing-table td:first-child { text-align: left; color: var(--text-primary); font-weight: 500; } .pricing-table .section-row td { background: var(--surface2); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 9px 20px; } .chk { color: var(--teal); font-size: 15px; font-weight: 700; } .dash { color: var(--border); font-size: 18px; } /* ─── PROCESS ─── */ #process { background: var(--black); } .process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 8px; } .process-step { position: relative; text-align: center; padding: 0 14px; } .process-step::before { content: ''; position: absolute; top: 24px; left: 50%; right: -50%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--border)); z-index: 0; } .process-step:last-child::before { display: none; } .step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: var(--white); margin: 0 auto 18px; position: relative; z-index: 1; transition: border-color var(--transition), background var(--transition), color var(--transition); } .process-step:hover .step-num { border-color: var(--teal); background: var(--teal-dim); color: var(--teal); } .step-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 6px; font-family: 'Space Grotesk', sans-serif; } .step-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; } /* ─── PORTFOLIO ─── */ #portfolio { background: var(--dark); } .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .portfolio-card { border-radius: var(--radius); overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 16/10; background: var(--surface); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition); } .portfolio-card:hover { transform: scale(1.012); box-shadow: 0 16px 48px rgba(0,0,0,0.5); } .pf-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#0A0F1A;display:block} .port-visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .port-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%); display: flex; align-items: flex-end; padding: 16px 18px; transition: background var(--transition); } .portfolio-card:hover .port-overlay { background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.9) 100%); } .port-info { width: 100%; } .port-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 3px; } .port-title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; } .port-desc { font-size: 12px; color: rgba(255,255,255,0.6); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .portfolio-card:hover .port-desc { max-height: 60px; } .mock-line { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.07); } .mock-line.short { width: 60%; } /* ── portfolio showcases (class-based) ── */ .portfolio-card.pf-bg-stream{background:#F0EBE0} .portfolio-card.pf-bg-sport{background:linear-gradient(135deg,#0D2418 0%,#133820 50%,#0A1E12 100%)} .portfolio-card.pf-bg-cultura{background:linear-gradient(135deg,#2A1200 0%,#3D1A00 50%,#2A1200 100%)} .portfolio-card.pf-bg-community{background:linear-gradient(135deg,#001833 0%,#002448 50%,#001833 100%)} .portfolio-card.pf-bg-landing{background:linear-gradient(135deg,#0A0F1A 0%,#0D1421 50%,#080C14 100%)} .port-overlay.warm{background:linear-gradient(180deg,transparent 35%,rgba(20,15,8,0.9) 100%)} .port-overlay.tanaw{background:linear-gradient(180deg,transparent 30%,rgba(20,18,10,0.92) 100%)} .port-tag.gold{color:#F5C430} .pf-center{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px} .pf-tile{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:12px} .pf-tile.teal{background:rgba(0,201,190,.12);border:1px solid rgba(0,201,190,.25)} .pf-tile.amber{background:rgba(245,166,35,.15);border:1px solid rgba(245,166,35,.3)} .pf-box{background:rgba(255,255,255,.06);border-radius:8px;padding:12px;width:150px} .pf-box .mock-line{margin:0 auto 6px} .pf-box .mock-line:last-child{margin-bottom:0;height:6px} /* ─── TESTIMONIALS ─── */ #testimonials { background: var(--black); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .testimonial-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: border-color var(--transition), transform var(--transition); position: relative; } .testimonial-card:hover { border-color: var(--teal-mid); transform: translateY(-3px); } .stars { display: flex; gap: 3px; margin-bottom: 14px; } .star { color: #F5C430; font-size: 14px; } .testimonial-quote { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 20px; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .author-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; color: #04201E; background: linear-gradient(135deg, var(--teal), var(--teal-2)); } .author-avatar.b { background: linear-gradient(135deg, var(--teal-2), #9B59F5); color: #fff; } .author-avatar.c { background: linear-gradient(135deg, var(--amber), #F5C430); color: #2A1A00; } .author-name { font-size: 14px; font-weight: 600; color: var(--white); } .author-role { font-size: 12px; color: var(--text-muted); margin-top: 1px; } /* ─── ABOUT ─── */ #about { background: var(--dark); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .about-features { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .about-feature { display: flex; gap: 16px; align-items: flex-start; } .feature-icon-wrap { width: 40px; height: 40px; border-radius: 10px; background: var(--teal-dim); border: 1px solid var(--teal-mid); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--teal); } .about-feature h4 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 3px; } .about-feature p { font-size: 14px; color: var(--text-muted); line-height: 1.55; } .team-cards { display: flex; flex-direction: column; gap: 16px; } .team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; gap: 20px; align-items: flex-start; transition: border-color var(--transition); } .team-card:hover { border-color: var(--teal-mid); } .team-photo { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden; } .team-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .team-name { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 3px; } .team-role { font-size: 13px; color: var(--teal); font-weight: 500; margin-bottom: 8px; } .team-tags { display: flex; flex-wrap: wrap; gap: 6px; } .team-tag { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: 12px; color: var(--text-muted); } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 40px; border: 1px solid var(--border); } .stat-item { background: var(--surface); padding: 24px; text-align: center; } .stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; color: var(--white); letter-spacing: -0.03em; } .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ─── PREVENTIVO (quote builder) ─── */ #preventivo { background: var(--black); } .quote-builder { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } .quote-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; } .quote-group + .quote-group { margin-top: 28px; } .quote-options { display: flex; flex-direction: column; gap: 8px; } .quote-option { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color var(--transition), background var(--transition); user-select: none; } .quote-option:hover { border-color: var(--teal-mid); } .quote-option.selected { border-color: var(--teal); background: var(--teal-dim); } .quote-opt-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--teal); } .quote-option.selected .quote-opt-icon { background: var(--teal-dim); border-color: var(--teal-mid); } .quote-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .quote-opt-label { font-size: 14px; font-weight: 600; color: var(--white); } .quote-opt-sub { font-size: 12px; color: var(--text-muted); } .quote-opt-price { font-size: 15px; font-weight: 700; color: var(--teal); font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; } .quote-summary { background: var(--surface); border: 1px solid var(--teal-mid); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 88px; } .quote-summary h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .quote-total { font-family: 'Space Grotesk', sans-serif; font-size: 42px; font-weight: 700; color: var(--white); letter-spacing: -0.03em; line-height: 1; } .quote-total small { font-size: 15px; color: var(--text-muted); font-weight: 400; } .quote-items-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 18px 0; min-height: 24px; } .quote-items-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-secondary); } .quote-items-list li span:last-child { color: var(--white); font-weight: 500; white-space: nowrap; } .quote-empty { font-size: 13px; color: var(--text-muted); font-style: italic; } .quote-divider { height: 1px; background: var(--border); margin: 16px 0; } /* ─── FAQ ─── */ #faq { background: var(--dark); } .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition); } .faq-item.open { border-color: var(--teal-mid); } .faq-question { width: 100%; background: none; border: none; padding: 20px 24px; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 600; color: var(--white); font-family: 'Space Grotesk', sans-serif; transition: color var(--transition); } .faq-question:hover { color: var(--teal); } .faq-icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-muted); transition: transform 0.3s ease, border-color var(--transition), color var(--transition); line-height: 1; } .faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--teal); color: var(--teal); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.2s; font-size: 14px; color: var(--text-secondary); line-height: 1.7; padding: 0 24px; } .faq-item.open .faq-answer { max-height: 320px; padding: 0 24px 20px; } /* ─── CONTACT ─── */ #contact { background: var(--black); } .contact-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .contact-left h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: var(--white); margin-bottom: 16px; line-height: 1.2; } .contact-left p { font-size: 16px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 32px; } .contact-meta { display: flex; flex-direction: column; gap: 14px; } .contact-item { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-secondary); } .contact-item-icon { width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--teal); flex-shrink: 0; } .contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 36px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-group:last-of-type { margin-bottom: 0; } .form-group label { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .form-group input, .form-group select, .form-group textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text-primary); outline: none; transition: border-color var(--transition); width: 100%; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--teal); } .form-group textarea { resize: vertical; min-height: 110px; } .form-error { font-size: 12px; color: #FF6B6B; margin-top: 2px; } .form-group input.is-invalid, .form-group textarea.is-invalid, .form-group select.is-invalid { border-color: #FF6B6B; } .form-submit { width: 100%; background: var(--teal); color: #04201E; font-size: 15px; font-weight: 600; padding: 14px; border-radius: 9px; border: none; cursor: pointer; margin-top: 20px; transition: filter var(--transition), transform var(--transition), box-shadow var(--transition); font-family: 'Inter', sans-serif; } .form-submit:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,201,190,0.3); } .form-success { display: none; text-align: center; padding: 40px 24px; } .form-success.show { display: block; } .form-success .fs-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--teal-dim); border: 1px solid var(--teal-mid); color: var(--teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .form-success h3 { color: var(--white); font-size: 20px; margin-bottom: 8px; } .form-success p { color: var(--text-secondary); font-size: 14px; } /* ─── FOOTER ─── */ footer { background: var(--dark); border-top: 1px solid var(--border); padding: 48px 24px 36px; } .footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .footer-brand { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--white); text-decoration: none; margin-bottom: 12px; } .footer-tagline { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 320px; } .footer-col { display: flex; flex-direction: column; } .footer-col h5 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 14px; } .footer-col a { display: block; font-size: 14px; color: var(--text-muted); text-decoration: none; padding: 5px 0; transition: color var(--transition); } .footer-col a:hover { color: var(--teal); } .footer-bottom { max-width: var(--maxw); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 12px; color: var(--text-muted); } .footer-socials { display: flex; gap: 8px; } .footer-socials a { width: 34px; height: 34px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: color var(--transition), border-color var(--transition); } .footer-socials a:hover { color: var(--teal); border-color: var(--teal-mid); } /* ─── COOKIE BANNER ─── */ #cookieBanner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--surface); border-top: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); } #cookieBanner.visible { transform: translateY(0); } #cookieBanner p { font-size: 13px; color: var(--text-secondary); flex: 1; min-width: 220px; line-height: 1.55; } #cookieBanner a { color: var(--teal); text-decoration: underline; cursor: pointer; } .cookie-btns { display: flex; gap: 8px; flex-shrink: 0; } .cookie-accept { background: var(--teal); color: #04201E; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 8px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; transition: filter var(--transition); } .cookie-accept:hover { filter: brightness(1.08); } .cookie-decline { background: transparent; color: var(--text-muted); font-size: 13px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; font-family: 'Inter', sans-serif; transition: color var(--transition); } .cookie-decline:hover { color: var(--white); } /* ─── WHATSAPP FLOAT ─── */ #waFloat { position: fixed; bottom: 28px; right: 24px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } #waBubble { background: #25D366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform var(--transition), box-shadow var(--transition); animation: waPulse 3s ease-in-out infinite; } #waBubble:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,0.5); animation: none; } @keyframes waPulse { 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); } 50% { box-shadow: 0 4px 32px rgba(37,211,102,0.7), 0 0 0 8px rgba(37,211,102,0.1); } } #waTooltip { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; } #waFloat:hover #waTooltip { opacity: 1; transform: translateX(0); } /* ─── PRIVACY MODAL ─── */ #privacyModal { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 20px; } #privacyModal.open { display: flex; } .privacy-box { background: var(--dark); border: 1px solid var(--border); border-radius: var(--radius-xl); max-width: 680px; width: 100%; max-height: 82vh; overflow-y: auto; padding: 40px; position: relative; } .privacy-box h2 { font-size: 24px; font-weight: 700; color: var(--white); margin-bottom: 8px; } .privacy-box h3 { font-size: 16px; font-weight: 600; color: var(--white); margin: 24px 0 8px; } .privacy-box p, .privacy-box li { font-size: 14px; color: var(--text-secondary); line-height: 1.7; } .privacy-box ul { padding-left: 20px; margin-top: 6px; } .privacy-close { position: absolute; top: 22px; right: 22px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; transition: color var(--transition); } .privacy-close:hover { color: var(--white); } /* ─── REVEAL ─── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ─── RESPONSIVE ─── */ @media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .contact-wrap { grid-template-columns: 1fr; gap: 40px; } .quote-builder { grid-template-columns: 1fr; } .quote-summary { position: static; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .portfolio-grid { gap: 12px; } } @media (max-width: 760px) { .nav-links { display: none; } .hamburger { display: flex; } section { padding: 72px 20px; } .form-row { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } .portfolio-card { aspect-ratio: 16/9; } .process-steps { grid-template-columns: 1fr; gap: 20px; } .process-step::before { display: none; } .footer-inner { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .setup-grid { grid-template-columns: 1fr; } .stat-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .mesh-orb { animation: none; } .reveal { transition: none; opacity: 1; transform: none; } #waBubble { animation: none; } } /* team avatars (gradient initials, fallback) */ .team-photo.a { display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:#04201E; background: linear-gradient(135deg, var(--teal), var(--teal-2)); } .team-photo.b { display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:#fff; background: linear-gradient(135deg, var(--teal-2), #9B59F5); }