/* ════════ Soluções — page-specific styles (moved from block) ════════ */ /* shared rules live in css/style.css */ .anchor-nav { position: sticky; top: 80px; z-index: 900; background: #003300; border-bottom: 1px solid rgba(192,144,32,.15); padding: 0 80px; } .anchor-tab { color: rgba(255,255,255,.55); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 18px 28px; display: inline-block; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; } .anchor-tab:hover { color: rgba(255,255,255,.9); } .anchor-tab.active { color: #C09020; border-bottom-color: #C09020; } .sol-img { flex: 1; min-width: 0; border-radius: 20px; overflow: hidden; position: relative; } .sol-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .sol-img:hover img { transform: scale(1.03); } .feat-item { display: flex; align-items: flex-start; gap: 14px; } @media (max-width: 1000px) { .anchor-tabs { overflow-x: auto; white-space: nowrap; } } @media (max-width: 800px) { #hdr { padding-left: 24px !important; padding-right: 24px !important; } .anchor-nav { padding: 0 24px; } .sol-row { flex-direction: column !important; } .sol-img { min-height: 260px; } .footer-grid { flex-direction: column !important; gap: 48px !important; } section, footer { padding-left: 24px !important; padding-right: 24px !important; } } /* ════════ Component overrides (load after style.css; mirror inline that sat on component elements) ════════ */ /* .btn-gold variants */ .btn-gold--dark { background: #003300; color: #F7F5EF; } /* ════════ Extracted inline styles ════════ */ /* ---- Header ---- */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 80px; padding: 0 80px; transition: background .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } .hdr-scrim { position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: -1; transition: opacity .35s ease; } .hdr-inner { max-width: 1280px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; } .hdr-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .hdr-logo-img { height: 28px; width: auto; display: block; } .desktop-nav-row { display: flex; align-items: center; gap: 30px; } .nav-link-base { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.82); text-decoration: none; } .nav-link-active { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 600; color: #C09020; text-decoration: none; } .desktop-nav-cta { display: flex; } .hdr-cta { background: #C09020; color: #06140B; padding: 10px 22px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; text-decoration: none; } .menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; align-items: center; justify-content: center; } /* ---- Mobile menu ---- */ .mobile-menu { display: none; position: fixed; top: 80px; left: 0; right: 0; z-index: 999; background: rgba(6,20,11,.98); backdrop-filter: blur(20px); padding: 28px 32px; flex-direction: column; gap: 4px; border-bottom: 1px solid rgba(192,144,32,.18); } .mobile-link { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 15px; text-transform: none; letter-spacing: 0; } .mobile-link-active { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 15px; text-transform: none; letter-spacing: 0; color: #C09020; } .mobile-link-last { padding: 14px 0; font-size: 15px; text-transform: none; letter-spacing: 0; } .mobile-cta { margin-top: 20px; text-align: center; } /* ---- Hero interno ---- */ .hero { position: relative; height: 420px; overflow: hidden; display: flex; align-items: center; padding: 80px 80px 0; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,20,11,.92) 0%, rgba(0,51,0,.75) 50%, rgba(6,20,11,.9) 100%); } .hero-topline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #C09020, transparent); } .hero-bottomfade { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, #003300, transparent); } .hero-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; width: 100%; } .breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; animation: fadeInUp .5s ease .1s both; } .breadcrumb-link { font-size: 12px; color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; } .breadcrumb-current { font-size: 12px; color: #C09020; font-weight: 500; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(192,144,32,.11); border: 1px solid rgba(192,144,32,.28); border-radius: 100px; padding: 7px 18px; margin-bottom: 20px; animation: fadeInUp .5s ease .2s both; } .hero-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #C09020; animation: pulseGold 2.2s infinite; flex-shrink: 0; } .hero-badge-label { font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #C09020; } .hero-title { font-family: 'Playfair Display', serif; font-size: clamp(36px,5vw,68px); font-weight: 700; line-height: 1.1; color: #fff; letter-spacing: -.025em; animation: fadeInUp .5s ease .3s both; } .hero-title-em { color: #C09020; font-style: italic; } .hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.62); line-height: 1.7; margin-top: 16px; max-width: 520px; animation: fadeInUp .5s ease .45s both; } /* ---- Anchor nav inner ---- */ .anchor-tabs-inner { max-width: 1280px; margin: 0 auto; display: flex; gap: 0; } /* ---- Solution sections ---- */ .sol-section-light { background: #F7F5EF; padding: 120px 80px; } .sol-section-dark { background: linear-gradient(148deg, #06140B, #003300 100%); padding: 120px 80px; } .container-1280 { max-width: 1280px; margin: 0 auto; } .sol-row-flex { display: flex; gap: 80px; align-items: center; } .sol-content { flex: 1; min-width: 0; } .sol-content-delay { flex: 1; min-width: 0; transition-delay: .18s; } .sol-img-fill { flex: 1; min-height: 480px; } .sol-img-fill-delay { flex: 1; min-height: 480px; transition-delay: .18s; } .sol-img-tag { height: 480px; } .sol-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .sol-eyebrow-line { width: 32px; height: 1px; background: #C09020; } .sol-eyebrow-num { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #C09020; } .sol-h2-dark { font-family: 'Playfair Display', serif; font-size: clamp(28px,3.2vw,48px); font-weight: 700; color: #06140B; line-height: 1.2; margin-bottom: 20px; letter-spacing: -.02em; } .sol-h2-light { font-family: 'Playfair Display', serif; font-size: clamp(28px,3.2vw,48px); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 20px; letter-spacing: -.02em; } .sol-lead-dark { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 32px; } .sol-lead-light { font-size: 16px; color: rgba(255,255,255,.62); line-height: 1.8; margin-bottom: 32px; } .feat-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; } .feat-icon-green { width: 22px; height: 22px; border-radius: 50%; background: rgba(0,51,0,.1); border: 1px solid rgba(0,51,0,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .feat-icon-gold { width: 22px; height: 22px; border-radius: 50%; background: rgba(192,144,32,.12); border: 1px solid rgba(192,144,32,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .feat-title-dark { font-size: 14px; font-weight: 600; color: #06140B; margin-bottom: 2px; } .feat-title-light { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 2px; } .feat-desc-grey { font-size: 13px; color: #888; } .feat-desc-faint { font-size: 13px; color: rgba(255,255,255,.45); } /* ---- Rate badges ---- */ .badge-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; } .badge-green { background: rgba(0,51,0,.08); border: 1px solid rgba(0,51,0,.15); border-radius: 8px; padding: 12px 18px; } .badge-gold { background: rgba(192,144,32,.08); border: 1px solid rgba(192,144,32,.2); border-radius: 8px; padding: 12px 18px; } .badge-gold-strong { background: rgba(192,144,32,.1); border: 1px solid rgba(192,144,32,.2); border-radius: 8px; padding: 12px 18px; } .badge-white { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 12px 18px; } .badge-label-green { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #003300; margin-bottom: 4px; } .badge-label-gold { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #C09020; margin-bottom: 4px; } .badge-label-gold-faint { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(192,144,32,.7); margin-bottom: 4px; } .badge-label-white-faint { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 4px; } .badge-value-green { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #003300; } .badge-value-gold { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #C09020; } .badge-value-white { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; } /* ---- Image overlay cards ---- */ .img-card-75 { position: absolute; bottom: 28px; left: 28px; right: 28px; background: rgba(6,20,11,.75); backdrop-filter: blur(16px); border: 1px solid rgba(192,144,32,.22); border-radius: 12px; padding: 20px 22px; } .img-card-80 { position: absolute; bottom: 28px; left: 28px; right: 28px; background: rgba(6,20,11,.8); backdrop-filter: blur(16px); border: 1px solid rgba(192,144,32,.22); border-radius: 12px; padding: 20px 22px; } .img-card-label { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; } .img-card-value-28 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: #C09020; } .img-card-value-24 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #C09020; } /* ---- CTA final ---- */ .cta-section { background: linear-gradient(148deg, #06140B, #003300 100%); padding: 120px 80px; position: relative; } .cta-topline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(192,144,32,.28), transparent); } .cta-inner { max-width: 880px; margin: 0 auto; text-align: center; } .cta-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 36px; } .cta-divider-line-r { flex: 1; max-width: 80px; height: 1px; background: linear-gradient(to right, transparent, #C09020); } .cta-divider-dot { width: 8px; height: 8px; border-radius: 50%; background: #C09020; } .cta-divider-line-l { flex: 1; max-width: 80px; height: 1px; background: linear-gradient(to left, transparent, #C09020); } .cta-h2 { font-family: 'Playfair Display', serif; font-size: clamp(32px,5vw,64px); font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 24px; letter-spacing: -.03em; } .cta-h2-em { color: #C09020; font-style: italic; } .cta-p { font-size: 17px; color: rgba(255,255,255,.58); line-height: 1.75; margin-bottom: 52px; max-width: 540px; margin-left: auto; margin-right: auto; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---- Footer ---- */ .footer { background: #06140B; border-top: 1px solid rgba(192,144,32,.1); padding: 80px 80px 40px; } .footer-grid-flex { display: flex; gap: 80px; margin-bottom: 64px; } .footer-col-brand { flex: 1.6; min-width: 0; } .footer-col { flex: 1; min-width: 0; } .footer-logo-link { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: 24px; } .footer-logo-img { height: 36px; width: auto; display: block; } .footer-about { font-size: 14px; color: rgba(255,255,255,.3); line-height: 1.8; max-width: 270px; margin-bottom: 32px; } .footer-social-row { display: flex; gap: 10px; } .footer-social { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: border-color .25s; } .footer-heading { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #C09020; margin-bottom: 24px; } .footer-links { display: flex; flex-direction: column; gap: 13px; } .footer-contact-list { display: flex; flex-direction: column; gap: 18px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 12px; } .footer-contact-icon { flex-shrink: 0; margin-top: 2px; } .footer-contact-text { font-size: 14px; color: rgba(255,255,255,.35); line-height: 1.5; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-copy { font-size: 12px; color: rgba(255,255,255,.18); } .footer-legal-row { display: flex; gap: 24px; } .footer-legal-link { font-size: 12px; color: rgba(255,255,255,.18); text-decoration: none; }