/* ============== Conprev — Vanilla CSS ============== */ :root { --azul: #1E3357; --azul-escuro: #0a0f1a; --azul-medio: #121b2e; --laranja: #EF7D00; --laranja-claro: #FFB266; --bg: #ffffff; --texto: #1E3357; --muted: #6b7280; --borda: #e5e7eb; --cinza-bg: #f8f9fb; --textura: url('../assets/textura-elegante.jpg'); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 20px 40px -10px rgba(0,0,0,0.15); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--texto); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } /* ============== Header ============== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 4rem; max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width:640px){ .site-header .bar{padding:0 1.5rem} } @media (min-width:1024px){ .site-header .bar{padding:0 2rem} } .site-header .logo img { height: 2.5rem; width: auto; } @media (min-width:640px){ .site-header .logo img{ height:3rem; } } .nav-desktop { display: none; align-items: center; gap: 1.5rem; } @media (min-width:768px){ .nav-desktop{ display:flex; } } .nav-desktop a { color: var(--azul); font-size: 0.875rem; font-weight: 500; transition: opacity .2s; } .nav-desktop a:hover { opacity: .8; } .nav-desktop a.active { color: var(--laranja); font-weight: 600; } .nav-desktop .cta { background: var(--laranja); color:#fff; padding: 0.5rem 1rem; border-radius: 0.375rem; } .nav-desktop .cta:hover { color:#fff; opacity: .9; } .has-dropdown { position: relative; } .has-dropdown > a { display: inline-flex; align-items: center; gap: .25rem; } .has-dropdown .caret { width: .85rem; height: .85rem; } .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .75rem; width: 14rem; background: #fff; border: 1px solid var(--borda); border-radius: .5rem; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; overflow: hidden; } .has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; } .dropdown-menu a { display: block; padding: .75rem 1rem; font-size: .875rem; } .dropdown-menu a:hover { background: #f9fafb; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; background: none; border: 0; color: var(--azul); } @media (min-width:768px){ .menu-toggle{ display:none; } } .nav-mobile { display: none; border-top: 1px solid var(--borda); background:#fff; padding: 1rem; } .nav-mobile.open { display: block; } .nav-mobile a, .nav-mobile button.sub { display: block; width: 100%; text-align: left; padding: .5rem 0; font-size: .875rem; color: var(--azul); background: none; font-weight: 500; border: 0; border-bottom: 1px solid #f0f0f0; } .nav-mobile button.sub svg { width: 26px; } .nav-mobile .sublinks { padding-left: .75rem; border-left: 1px solid var(--borda); margin: .25rem 0 .5rem .25rem; display:none; } .nav-mobile .sublinks.open { display:block; } .nav-mobile .cta { display:block; margin-top:.5rem; padding:.5rem 1rem; background: var(--laranja); color:#fff !important; text-align:center; border-radius: .375rem; } /* ============== Buttons ============== */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: .375rem; font-size: .875rem; font-weight: 600; transition: opacity .2s, background-color .2s, color .2s, transform .2s; border: 0; cursor: pointer; } .btn-primary { background: var(--laranja); color: #fff; } .btn-primary:hover { opacity: .9; color: #fff; } .btn-azul { background: var(--azul); color: #fff; } .btn-azul:hover { opacity: 0.9; color: var(--laranja); } .btn-outline-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); } .btn-outline-white:hover { background: rgba(255,255,255,0.1); color: #fff; } .btn-outline-azul { background: transparent; color: var(--azul); border: 2px solid var(--azul); } .btn-outline-azul:hover { background: var(--azul); color: #fff; } .btn .arrow { width: 1rem; height: 1rem; } /* ============== Hero rotating ============== */ .hero-slider { position: relative; width: 100%; min-height: 78vh; background: var(--azul); overflow: hidden; } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slide img { width:100%; height:100%; object-fit: cover; } .slide .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,51,87,0.92) 0%, rgba(30,51,87,0.75) 45%, rgba(30,51,87,0.35) 100%); } .hero-slider .content { position: relative; min-height: 78vh; max-width: 80rem; margin: 0 auto; display: flex; align-items: center; padding: 6rem 1rem; } @media (min-width:640px){ .hero-slider .content{ padding: 8rem 1.5rem; } } @media (min-width:1024px){ .hero-slider .content{ padding: 8rem 2rem; } } .hero-text { max-width: 38rem; } .eyebrow { display: inline-block; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fff; background: var(--laranja); } .hero-text h1 { color:#fff; font-size: 2.25rem; font-weight: 800; line-height: 1.1; margin: 1.25rem 0 0; } @media (min-width:640px){ .hero-text h1{ font-size: 3rem; } } @media (min-width:1024px){ .hero-text h1{ font-size: 3.75rem; } } .hero-text h1 .highlight, .hero-text h1 span { color: var(--laranja); } .hero-text p { color: rgba(255,255,255,0.85); font-size: 1.125rem; margin-top: 1.5rem; max-width: 36rem; } .hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: 0; color:#fff; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display:inline-flex; align-items:center; justify-content:center; backdrop-filter: blur(8px); z-index: 10; transition: background .2s; } .slider-nav:hover { background: rgba(255,255,255,0.3); } .slider-prev { left: .75rem; } .slider-next { right: .75rem; } @media (min-width:640px){ .slider-prev{ left: 1.5rem; } .slider-next{ right: 1.5rem; } } .slider-dots { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 10; } .slider-dots button { height: .5rem; width: .625rem; border:0; border-radius: 9999px; background: rgba(255,255,255,0.5); transition: all .2s; cursor: pointer; } .slider-dots button.active { width: 1.75rem; background: var(--laranja); } /* ============== Generic Hero (other pages) ============== */ .page-hero { position: relative; width: 100%; overflow: hidden; background: var(--azul); display: flex; align-items: center; min-height: 420px; } @media (min-width:640px){ .page-hero{ min-height: 520px; } } @media (min-width:1024px){ .page-hero{ min-height: 600px; } } .page-hero .bg { position: absolute; inset: 0; } .page-hero .bg img { width:100%; height:100%; object-fit: cover; opacity: .3; } .page-hero .grad { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,15,26,0.92) 0%, rgba(30,51,87,0.85) 55%, rgba(239,125,0,0.45) 100%); } .page-hero .dim { position: absolute; inset: 0; background: rgba(0,0,0,0.3); } @media (min-width:640px){ .page-hero .dim{ background: rgba(0,0,0,0.2); } } .page-hero .inner { position: relative; width: 100%; max-width: 64rem; margin: 0 auto; padding: 5rem 1rem; text-align: center; } @media (min-width:640px){ .page-hero .inner{ padding: 7rem 1.5rem; } } @media (min-width:1024px){ .page-hero .inner{ padding: 8rem 2rem; } } .page-hero h1 { color: #fff; font-size: 1.875rem; font-weight: 800; line-height: 1.1; margin: 1.25rem 0 0; text-shadow: 0 2px 6px rgba(0,0,0,0.3); } @media (min-width:640px){ .page-hero h1{ font-size: 3rem; } } @media (min-width:1024px){ .page-hero h1{ font-size: 3.75rem; } } .page-hero p { color: rgba(255,255,255,0.95); margin: 1.5rem auto 0; max-width: 42rem; font-size: 1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.2); } @media (min-width:640px){ .page-hero p{ font-size: 1.125rem; } } .page-hero .highlight { color: var(--laranja-claro); } /* page hero simpler (FAQ, Midia) */ .simple-hero { background: var(--azul); padding: 4rem 1rem; text-align: center; color: #fff; } .simple-hero h1 { font-size: 2.25rem; font-weight: 800; margin: 1rem 0 .75rem; } @media (min-width:640px){ .simple-hero h1{ font-size: 3rem; } } .simple-hero p { color: rgba(255,255,255,0.8); max-width: 42rem; margin: 0 auto; } /* ============== Sections ============== */ section { padding: 0; } .section { padding: 4rem 0; } .section-lg { padding: 5rem 0; } .section-tight { padding: 4rem 0; } .tag { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--laranja); } h2.section-title { color: var(--azul); font-size: 1.875rem; font-weight: 800; margin: .75rem 0 0; line-height: 1.15; } @media (min-width:640px){ h2.section-title{ font-size: 2.25rem; } } .section-intro { color: var(--muted); margin-top: .75rem; line-height: 1.6; } .textura-bg { background-image: linear-gradient(rgba(250,248,243,.82), rgba(250,248,243,.82)), var(--textura); background-size: cover; background-position: center; } /* Two-column split */ .split { display: grid; gap: 3rem; align-items: center; } @media (min-width:1024px){ .split{ grid-template-columns: 1fr 1fr; } } .split .img-frame { position: relative; } .split .img-frame .blob { position: absolute; width: 10rem; height: 10rem; border-radius: 1rem; display: none; } @media (min-width:1024px){ .split .img-frame .blob{ display:block; } } .split .img-frame .blob.tl { top:-1rem; left:-1rem; background: var(--laranja); } .split .img-frame .blob.br { bottom:-1rem; right:-1rem; background: var(--azul); } .split .img-frame img { position: relative; z-index: 1; height: 420px; width:100%; object-fit: cover; border-radius: 1rem; box-shadow: var(--shadow-lg); } .check-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; } .check-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; color: var(--azul); } .check-list .check { color: var(--laranja); flex: 0 0 1.25rem; margin-top: .15rem; } /* Services cards (home) */ .service-grid { display: grid; gap: 1.5rem; margin-top: 3rem; } @media (min-width:640px){ .service-grid{ grid-template-columns: 1fr 1fr; } } .service-card { background:#fff; border:1px solid var(--borda); border-radius: 1rem; overflow:hidden; transition: transform .3s, box-shadow .3s; box-shadow: var(--shadow-sm); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .service-card .img-wrap { position: relative; height: 14rem; overflow: hidden; } .service-card .img-wrap img { width:100%; height:100%; object-fit: cover; transition: transform .7s; } .service-card:hover .img-wrap img { transform: scale(1.1); } .service-card .img-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,51,87,0) 30%, rgba(30,51,87,0.85) 100%); } .service-card .icon-badge { position: absolute; top: 1.25rem; left: 1.25rem; width: 3rem; height: 3rem; background: var(--laranja); color: #fff; display: inline-flex; align-items:center; justify-content:center; border-radius: .75rem; box-shadow: var(--shadow-md); } .service-card h3 { position: absolute; bottom: 1rem; left: 1.25rem; right: 1.25rem; color:#fff; font-size: 1.25rem; font-weight: 600; margin: 0; } .service-card .body { padding: 1.5rem; } .service-card .body p { color: var(--muted); font-size: .875rem; margin: 0; line-height: 1.6; } .service-card .saiba-mais { display: inline-block; margin-top: 1rem; color: var(--laranja); font-size: .875rem; font-weight: 600; width: 160px; } .service-card .saiba-mais svg { width: 20px; } /* Reasons */ .reasons-grid { display: grid; gap: 1.5rem; margin-top: 3rem; } @media (min-width:640px){ .reasons-grid{ grid-template-columns: 1fr 1fr; } } @media (min-width:1024px){ .reasons-grid{ grid-template-columns: repeat(4,1fr); } } .reason-card { background:#fff; border:1px solid var(--borda); border-radius: .75rem; padding: 1.5rem; transition: transform .2s, box-shadow .2s; } .reason-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .reason-card .ico { display: inline-flex; align-items:center; justify-content:center; width: 2.5rem; height: 2.5rem; background: var(--laranja); color: #fff; border-radius: .5rem; } .reason-card h3 { color: var(--azul); font-size: 1rem; font-weight: 600; margin: 1rem 0 .5rem; } .reason-card p { color: var(--muted); font-size: .875rem; margin: 0; } /* Numbers */ .numbers { margin-top: 3rem; padding: 2rem; background:#fff; border:1px solid var(--borda); border-radius: 1rem; display: grid; gap: 1.5rem; } @media (min-width:640px){ .numbers{ grid-template-columns: repeat(4,1fr); } } .numbers .stat { text-align: center; } .numbers .stat .n { color: var(--laranja); font-size: 2.25rem; font-weight: 800; } .numbers .stat .l { color: var(--muted); font-size: .875rem; margin-top: .5rem; } /* Gallery (home portfolio) */ .gallery { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: 1fr 1fr; } @media (min-width:768px){ .gallery{ grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr); } } .gallery .tile { position: relative; overflow: hidden; border-radius: 1rem; border: 0; padding: 0; background: none; } .gallery .tile img { width:100%; height: 12rem; object-fit: cover; transition: transform .5s; } @media (min-width:768px){ .gallery .tile img{ height:100%; } } .gallery .tile:hover img { transform: scale(1.1); } .gallery .tile::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,0); transition: background .3s; } .gallery .tile:hover::after { background: rgba(0,0,0,0.25); } @media (min-width:768px){ .gallery .tile.featured { grid-column: span 2; grid-row: span 2; } .gallery .tile.featured img { max-height: 810px; } } /* Clients grid */ .clients-grid { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: 1fr 1fr; } @media (min-width:640px){ .clients-grid{ grid-template-columns: repeat(3,1fr); } } @media (min-width:1024px){ .clients-grid{ grid-template-columns: repeat(4,1fr); } } .client-logo { background: #fff; border:1px solid var(--borda); border-radius: .75rem; padding: 1.25rem; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; } .client-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .client-logo svg { height: 5rem; width: 4rem; } .client-logo .name { color: var(--azul); margin-top: .75rem; font-size: .75rem; font-weight: 600; text-align: center; line-height: 1.2; } /* Depoimento (home) */ .testimonial { position: relative; background:#fff; border:1px solid var(--borda); border-radius: 1.5rem; padding: 2.5rem; box-shadow: var(--shadow-sm); overflow:hidden; } @media (min-width:768px){ .testimonial{ padding: 3.5rem; } } .testimonial .quote-icon { position: absolute; top: 2rem; right: 2rem; width: 6rem; height: 6rem; color: var(--azul); opacity: .1; } .testimonial blockquote { color: var(--azul); font-size: 1.25rem; font-weight: 500; margin: 1rem 0 0; line-height: 1.5; } @media (min-width:640px){ .testimonial blockquote{ font-size: 1.5rem; } } .testimonial cite { display: block; margin-top: 1.5rem; font-style: normal; } .testimonial cite .author { font-size: .875rem; font-weight: 600; color: var(--azul); } .testimonial cite .role { font-size: .75rem; color: var(--muted); } /* CTA banner with image */ .cta-banner { position: relative; overflow: hidden; padding: 6rem 1rem; } .cta-banner > img { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; } .cta-banner .grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,51,87,0.95) 0%, rgba(30,51,87,0.80) 100%); } .cta-banner .inner { position: relative; max-width: 64rem; margin: 0 auto; text-align: center; } .cta-banner h2 { color:#fff; font-size: 1.875rem; font-weight: 800; } @media (min-width:640px){ .cta-banner h2{ font-size: 2.25rem; } } .cta-banner p { color: rgba(255,255,255,0.85); max-width: 36rem; margin: 1rem auto 0; } .cta-banner .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } /* Timeline (sobre) */ .timeline { list-style: none; margin: 2rem 0 0; padding-left: 1.5rem; border-left: 2px solid var(--laranja); display: grid; gap: 1.5rem; } .timeline li { position: relative; } .timeline li::before { content: "•"; position: absolute; left: -2.05rem; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--laranja); color:#fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; } .timeline .year { color: var(--laranja); font-size: .85rem; font-weight: 700; } .timeline .t { color: var(--azul); font-weight: 600; } .timeline .d { color: var(--muted); font-size: .875rem; } /* Diferenciais */ .diferenciais-grid { display: grid; gap: 1.5rem; margin-top: 3rem; grid-template-columns: 1fr; } @media (min-width:768px){ .diferenciais-grid{ grid-template-columns: 1fr 1fr; } } @media (min-width:1024px){ .diferenciais-grid{ grid-template-columns: repeat(3,1fr); } } .diferencial-card { background:#fff; border:1px solid var(--borda); border-radius: .75rem; padding: 1.5rem; transition: transform .2s, box-shadow .2s; } .diferencial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .diferencial-card .ico { display:inline-flex; align-items:center; justify-content:center; width: 3rem; height: 3rem; border-radius: .5rem; background: var(--azul); color:#fff; } .diferencial-card h3 { color: var(--azul); margin: 1rem 0 .5rem; font-size: 1.125rem; } .diferencial-card p { color: var(--muted); font-size: .875rem; margin: 0; line-height: 1.6; } /* Equipe banner stats */ .equipe-banner { position: relative; overflow: hidden; padding: 6rem 1rem; } .equipe-banner > img { position: absolute; inset:0; width:100%; height:100%; object-fit: cover; } .equipe-banner .grad { position: absolute; inset:0; background: linear-gradient(90deg, rgba(30,51,87,0.92) 0%, rgba(30,51,87,0.55) 100%); } .equipe-banner .inner { position: relative; max-width: 80rem; margin: 0 auto; } .equipe-banner h2 { color:#fff; font-size: 1.875rem; font-weight: 800; margin-top: .75rem; max-width: 36rem; } @media (min-width:640px){ .equipe-banner h2{ font-size: 2.25rem; } } .equipe-banner .stats { margin-top: 2rem; display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; max-width: 36rem; } .equipe-banner .stats .n { color:#fff; font-size: 1.875rem; font-weight: 800; } .equipe-banner .stats .l { color: rgba(255,255,255,0.7); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; } /* Servicos page - alternating blocks */ .svc-blocks { display: grid; gap: 6rem; } .svc-block { display: grid; gap: 2.5rem; align-items: center; } @media (min-width:1024px){ .svc-block{ grid-template-columns: 1fr 1fr; gap: 4rem; } } @media (min-width:1024px){ .svc-block.rev .text-side { grid-column: 1; grid-row: 1; } .svc-block.rev .img-side { grid-column: 2; grid-row: 1; } } .svc-block .img-side { position: relative; } .svc-block .img-side .frame { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow-lg); } .svc-block .img-side .frame img { aspect-ratio: 4/3; width:100%; object-fit: cover; transition: transform .7s; } .svc-block .img-side .frame:hover img { transform: scale(1.05); } .svc-block .img-side .float-tag { position: absolute; bottom: -1rem; left: 1.5rem; background: var(--laranja); color:#fff; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; display: none; } @media (min-width:1024px){ .svc-block .img-side .float-tag{ display:block; } } .svc-block .icon-row { display: flex; align-items: center; gap: .75rem; } .svc-block .icon-row .ico { width: 3rem; height: 3rem; background: var(--azul); color:#fff; border-radius:.5rem; display:inline-flex; align-items:center; justify-content:center; } .svc-block h2 { color: var(--azul); font-size: 1.875rem; line-height: 1.2; margin: 1rem 0 0; } .svc-block .intro { color: var(--muted); margin-top: 1rem; line-height: 1.6; } .svc-block .subtitle { color: var(--azul); font-size: .875rem; font-weight: 600; margin-top: 1.5rem; } .svc-block .items { margin: .75rem 0 0; display:grid; gap: .5rem; list-style: none; padding: 0; } @media (min-width:640px){ .svc-block .items{ grid-template-columns: 1fr 1fr; } } .svc-block .items li { color: var(--muted); font-size: .875rem; display: flex; gap: .5rem; } .svc-block .items li .check { color: var(--laranja); flex: 0 0 1rem; margin-top: .15rem; width:1rem; height: 1rem; } .svc-block .pillars { background: #fff; border-bottom: 1px solid var(--borda); } .svc-block .cta-row { margin-top: 2rem; } .pillars-row { background: #fff; border-bottom: 1px solid var(--borda); } .pillars-row .pgrid { display:grid; gap:1px; background: #e5e7eb; grid-template-columns: 1fr; max-width: 80rem; margin: 0 auto; } @media (min-width:640px){ .pillars-row .pgrid{ grid-template-columns: repeat(4,1fr); } } .pillars-row .pgrid .cell { background:#fff; padding: 2rem 1.5rem; text-align:center; } .pillars-row .pgrid .cell .n { color: var(--laranja); font-size: 1.875rem; font-weight: 800; } .pillars-row .pgrid .cell .l { color: var(--muted); font-size: .875rem; margin-top: .25rem; } /* Clientes page */ .estados-grid { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: 1fr 1fr; } @media (min-width:640px){ .estados-grid{ grid-template-columns: repeat(4,1fr); } } @media (min-width:1024px){ .estados-grid{ grid-template-columns: repeat(8,1fr); } } .estado-card { background:#fff; border:1px solid var(--borda); padding: 1.25rem; border-radius: .75rem; text-align: center; box-shadow: var(--shadow-sm); } .estado-card .uf { color: var(--azul); font-size: 1.5rem; font-weight: 800; } .estado-card .qt { color: var(--laranja); font-size: .875rem; font-weight: 600; margin-top: .25rem; } .estado-card .lbl { color: var(--muted); font-size: .75rem; } .stats-row { display: grid; gap: 1.5rem; margin: 3rem 0; padding: 2rem; background:#fff; border:1px solid var(--borda); border-radius: 1rem; } @media (min-width:640px){ .stats-row{ grid-template-columns: repeat(3,1fr); } } .stats-row .stat { display: flex; flex-direction: column; align-items: center; text-align:center; } .stats-row .stat .icon { color: var(--laranja); width: 2rem; height: 2rem; } .stats-row .stat .n { color: var(--azul); font-size: 2.25rem; font-weight: 800; margin-top: .75rem; } .stats-row .stat .l { color: var(--muted); font-size: .875rem; margin-top: .5rem; } /* Contato page */ .contato-grid { display: grid; gap: 3rem; margin: 4rem 0; } @media (min-width:1024px){ .contato-grid{ grid-template-columns: 1fr 1fr; } } .contact-list { margin-top: 2rem; display: grid; gap: 1rem; } .contact-list .row { display: flex; gap: .75rem; align-items: flex-start; } .contact-list .row svg { color: var(--laranja); flex: 0 0 1.25rem; margin-top: .25rem; } .contact-list .row .lbl { color: var(--azul); font-weight: 500; } .contact-list .row .v { color: var(--muted); font-size: .875rem; } .note-box { margin-top: 2.5rem; border-left: 4px solid var(--laranja); background: var(--cinza-bg); padding: 1.5rem; border-radius: .75rem; } .note-box h3 { color: var(--azul); margin: 0 0 .5rem; font-size: 1rem; } .note-box p { color: var(--muted); font-size: .875rem; margin: 0; line-height: 1.6; } .form-card { background:#fff; border:1px solid var(--borda); border-radius: .75rem; padding: 2rem; height: fit-content; } .form-row { display: grid; gap: 1rem; } .form-row.two { grid-template-columns: 1fr; } @media (min-width:640px){ .form-row.two{ grid-template-columns: 1fr 1fr; } } .form-card label { display:block; color: var(--azul); font-size: .875rem; font-weight: 500; } .form-card input, .form-card select, .form-card textarea { margin-top: .25rem; width:100%; border:1px solid var(--borda); padding: .5rem .75rem; border-radius: .375rem; font-size: .875rem; font-family: inherit; } .form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: 0; border-color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja); } .form-card .field { margin-bottom: 1rem; } .form-card .submit { width:100%; margin-top: .5rem; padding: .65rem 1rem; background: var(--laranja); color:#fff; border:0; border-radius: .375rem; font-weight: 600; cursor:pointer; } .form-card .submit:hover { opacity: .9; } /* FAQ */ details.faq-item { background: #fff; border: 1px solid var(--borda); border-radius: .75rem; padding: 1rem 1.5rem; transition: box-shadow .2s; } details.faq-item[open] { box-shadow: var(--shadow-sm); } details.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--azul); font-weight: 500; cursor: pointer; padding: .25rem 0; } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item summary .chev { transition: transform .2s; width: 1.25rem; height: 1.25rem; } details.faq-item[open] summary .chev { transform: rotate(180deg); } details.faq-item p { margin: .75rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.6; } .faq-list { display: grid; gap: 1rem; } /* Midia tabs */ .midia-tabs { position: sticky; top: 4rem; z-index: 30; background: #fff; border-bottom: 1px solid var(--borda); } .midia-tabs .row { max-width: 80rem; margin: 0 auto; display: flex; gap: .5rem; padding: 0 1rem; overflow-x: auto; } .midia-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; padding: 1rem; font-size: .875rem; font-weight: 500; color: var(--azul); border-bottom: 2px solid transparent; transition: opacity .2s; width: 32%; } .midia-tabs a:hover { opacity: .8; } .midia-tabs a.active { color: var(--laranja); border-color: var(--laranja); font-weight: 600; } .midia-cards { display: grid; gap: 1.5rem; padding: 4rem 0; } @media (min-width:768px){ .midia-cards{ grid-template-columns: repeat(3,1fr); } } .midia-card { background:#fff; border:1px solid var(--borda); border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; display: block; } .midia-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .midia-card .ico { width: 3rem; height: 3rem; display:inline-flex; align-items:center; justify-content:center; border-radius: .75rem; background: rgba(239,125,0,0.1); color: var(--laranja); } .midia-card h2 { color: var(--azul); font-size: 1.25rem; margin: 1rem 0 .5rem; } .midia-card p { color: var(--muted); font-size: .875rem; margin: 0; } /* Galerias index */ .galeria-block { margin-bottom: 5rem; } .galeria-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; } .galeria-head h2 { color: var(--azul); font-size: 1.5rem; margin: 0; } @media (min-width:640px){ .galeria-head h2{ font-size: 1.875rem; } } .galeria-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; color: var(--muted); font-size: .75rem; } .galeria-meta span { display: inline-flex; align-items: center; gap: .25rem; } .galeria-meta svg { color: var(--laranja); width: .875rem; height: .875rem; } .gallery-4 { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: 1fr 1fr; } @media (min-width:768px){ .gallery-4{ grid-template-columns: repeat(4,1fr); } } .gallery-4 .tile, .gallery-event .tile { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: .75rem; border: 0; padding: 0; background: none; cursor: pointer; } .gallery-4 .tile img, .gallery-event .tile img { width:100%; height:100%; object-fit: cover; transition: transform .5s; } .gallery-4 .tile:hover img, .gallery-event .tile:hover img { transform: scale(1.1); } .gallery-4 .tile::after, .gallery-event .tile::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,0); transition: background .3s; } .gallery-4 .tile:hover::after, .gallery-event .tile:hover::after { background: rgba(0,0,0,0.25); } .gallery-event { display:grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; } @media (min-width:640px){ .gallery-event{ grid-template-columns: repeat(3,1fr); } } @media (min-width:1024px){ .gallery-event{ grid-template-columns: repeat(4,1fr); } } .gallery-event .tile .legenda { position: absolute; inset: auto 0 0 0; padding: .75rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color:#fff; font-size: .75rem; text-align: left; transform: translateY(100%); transition: transform .3s; } .gallery-event .tile:hover .legenda { transform: translateY(0); } /* Depoimentos page */ .depoimentos-grid { display: grid; gap: 1.5rem; padding: 4rem 0; } @media (min-width:768px){ .depoimentos-grid{ grid-template-columns: 1fr 1fr; } } @media (min-width:1024px){ .depoimentos-grid{ grid-template-columns: repeat(3,1fr); } } .depoimento-card { position: relative; background:#fff; border:1px solid var(--borda); border-radius: 1rem; padding: 1.75rem; box-shadow: var(--shadow-sm); display:flex; flex-direction: column; } .depoimento-card .qi { position: absolute; right: 1.25rem; top: 1.25rem; width: 2.5rem; height: 2.5rem; color: var(--azul); opacity: .1; } .depoimento-card blockquote { margin: 0; color: var(--azul); line-height: 1.6; } .depoimento-card figcaption { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--borda); display:flex; gap: .75rem; align-items: center; } .depoimento-card .author { color: var(--azul); font-size: .875rem; font-weight: 600; } .depoimento-card .role { color: var(--muted); font-size: .75rem; } /* Premiação */ .premios-grid { display: grid; gap: 1.5rem; padding: 4rem 0; } @media (min-width:768px){ .premios-grid{ grid-template-columns: 1fr 1fr; } } .premio-card { background:#fff; border:1px solid var(--borda); border-radius: 1rem; padding: 1.5rem; display:flex; gap: 1.25rem; box-shadow: var(--shadow-sm); transition: transform .2s; } .premio-card:hover { transform: translateY(-2px); } .premio-card .ico { width: 3.5rem; height: 3.5rem; flex-shrink:0; background: rgba(239,125,0,0.1); color: var(--laranja); border-radius: .75rem; display:inline-flex; align-items: center; justify-content: center; } .premio-card .ano { color: var(--laranja); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; } .premio-card h3 { color: var(--azul); font-size: 1.125rem; margin: .25rem 0; } .premio-card .ent { color: var(--muted); font-size: .875rem; margin: 0; } /* Voltar link */ .back-link { display:inline-flex; align-items:center; gap:.5rem; color: var(--laranja); font-size: .875rem; font-weight: 600; } .back-link:hover { opacity: .8; } /* ============== Footer ============== */ .site-footer { position: relative; overflow: hidden; background: linear-gradient(135deg, #0a0f1a 0%, #121b2e 40%, #1a263d 100%); color: #fff; } .site-footer .inner { max-width: 80rem; margin: 0 auto; padding: 4rem 1rem; } @media (min-width:640px){ .site-footer .inner{ padding: 4rem 1.5rem; } } .footer-grid { display: grid; gap: 2.5rem; } @media (min-width:768px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (min-width:1024px){ .footer-grid{ grid-template-columns: 5fr 2fr 2fr 3fr; } } .footer-grid img.logo { height: 3.5rem; width: auto; } .footer-grid .brand p { color: rgba(255,255,255,0.6); font-size: .875rem; max-width: 22rem; margin: 1.25rem 0 0; } .social { margin-top: 1.5rem; display: flex; gap: .75rem; } .social a { width:2.5rem; height:2.5rem; border-radius:9999px; border:1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); display:inline-flex; align-items:center; justify-content:center; color: rgba(255,255,255,0.7); transition: all .2s; } .social a:hover { border-color: rgba(239,125,0,0.5); background: rgba(239,125,0,0.1); color: var(--laranja); } .footer-grid h4 { color: var(--laranja); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; margin: 0; } .footer-grid ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem; } .footer-grid ul a, .footer-grid ul li { color: rgba(255,255,255,0.6); font-size: .875rem; transition: color .2s; } .footer-grid ul a:hover { color: #fff; } .contact-foot li { display:flex; align-items:flex-start; gap: .75rem; } .contact-foot li svg { color: var(--laranja); width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .15rem; } .contact-foot .lbl { color: rgba(255,255,255,0.9); font-weight: 500; font-size: .875rem; } .contact-foot .sub { color: rgba(255,255,255,0.4); font-size: .75rem; } .units { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.1); } .units h4 { color: var(--laranja); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; margin: 0; } .units-grid { margin-top: 1.5rem; display: grid; gap: 1.25rem; } @media (min-width:768px){ .units-grid{ grid-template-columns: repeat(3,1fr); } } .unit-card { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius: .75rem; padding: 1.25rem; transition: all .2s; } .unit-card:hover { border-color: rgba(239,125,0,0.3); background: rgba(255,255,255,0.06); } .unit-card .head { display:flex; align-items: center; gap: .5rem; } .unit-card .head svg { color: var(--laranja); width: 1rem; height: 1rem; } .unit-card .head .name { color: #fff; font-weight: 600; font-size: .875rem; } .unit-card .lines { color: rgba(255,255,255,0.5); font-size: .875rem; margin: .75rem 0; line-height: 1.6; } .unit-card .lines p { margin: 0; } .unit-card .phone { display: flex; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); font-weight: 500; font-size: .875rem; } .unit-card .phone svg { color: var(--laranja); width: .875rem; height: .875rem; } .bottom-bar { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); display:flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; } @media (min-width:640px){ .bottom-bar{ flex-direction: row; } } .bottom-bar p { color: rgba(255,255,255,0.4); font-size: .75rem; margin: 0; text-align: center; } .bottom-bar .links { display:flex; gap: 1.5rem; } .bottom-bar .links a { color: rgba(255,255,255,0.4); font-size: .75rem; transition: color .2s; } .bottom-bar .links a:hover { color: rgba(255,255,255,0.7); } /* ============== Lightbox ============== */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; } .lightbox img { max-width: 92vw; max-height: 85vh; object-fit: contain; } .lightbox .caption { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.5); padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; } .lightbox .close, .lightbox .prev, .lightbox .next { position: absolute; background: rgba(255,255,255,0.15); color:#fff; border:0; border-radius:9999px; width: 3rem; height: 3rem; display:inline-flex; align-items:center; justify-content:center; transition: background .2s; } .lightbox .close:hover, .lightbox .prev:hover, .lightbox .next:hover { background: rgba(255,255,255,0.3); } .lightbox .close { top: 1.5rem; right: 1.5rem; } .lightbox .prev { left: 1.5rem; top: 50%; transform: translateY(-50%); } .lightbox .next { right: 1.5rem; top: 50%; transform: translateY(-50%); } /* utilities */ .text-center { text-align: center; } .max-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; } .max-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; } .muted { color: var(--muted); } .azul { color: var(--azul); } .laranja { color: var(--laranja); } /* ============== Bootstrap 5 Integration ============== */ /* Map brand tokens onto Bootstrap CSS variables so all Bootstrap components (buttons, alerts, links, focus rings, forms, etc.) inherit the Conprev palette automatically. */ :root { --bs-primary: var(--laranja); --bs-primary-rgb: 239, 125, 0; --bs-secondary: var(--azul); --bs-secondary-rgb: 30, 51, 87; --bs-link-color: var(--azul); --bs-link-color-rgb: 30, 51, 87; --bs-link-hover-color: var(--laranja); --bs-link-hover-color-rgb: 239, 125, 0; --bs-body-color: var(--texto); --bs-body-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-border-color: var(--borda); --bs-border-radius: .375rem; } /* Ensure our custom .container keeps a single 80rem max-width regardless of Bootstrap's responsive container rules. */ .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 80rem; } /* Re-assert our brand .btn-primary over Bootstrap's blue. */ .btn-primary, .btn-primary:focus, .btn-primary:active { background: var(--laranja) !important; border-color: var(--laranja) !important; color:#fff !important; } .btn-primary:hover { background: var(--laranja) !important; border-color: var(--laranja) !important; opacity:.9; } .btn-secondary, .btn-secondary:focus, .btn-secondary:active { background: var(--azul) !important; border-color: var(--azul) !important; color:#fff !important; } /* Bootstrap resets list-style on