/* ========================================================================== Grupo Salvar Vidas - styles.css -------------------------------------------------------------------------- EDITE AQUI: 1) Textos principais: index.html e páginas legais 2) WhatsApp oficial: index.html, contato.html e script.js 3) Links sociais: index.html, contato.html e rodapé compartilhado 4) Imagens: pasta /assets/images/ 5) Futuras versões internacionais: crie /en/index.html e /es/index.html, depois adicione hreflang no ========================================================================== */ :root{ --bg: #f6f8f6; --bg-soft: #eef4ef; --surface: rgba(255,255,255,.92); --surface-strong: #ffffff; --ink: #102118; --ink-soft: #4b5f54; --line: #dbe5de; --line-strong: #c6d4c9; --primary: #0f6b4b; --primary-strong: #0b5138; --primary-soft: #17845d; --accent: #d9b25a; --dark: #0d1712; --dark-soft: #173124; --success: #1f7a55; --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px; --shadow: 0 20px 60px rgba(16, 33, 24, .08); --shadow-soft: 0 12px 32px rgba(16, 33, 24, .06); --container: 1180px; --transition: 180ms ease; } *, *::before, *::after{box-sizing:border-box} html{ scroll-behavior:smooth; } body{ margin:0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background: radial-gradient(circle at top left, rgba(23,132,93,.08), transparent 30%), radial-gradient(circle at top right, rgba(217,178,90,.08), transparent 22%), var(--bg); line-height:1.7; } img{ display:block; max-width:100%; height:auto; } a{ color:var(--primary); text-decoration:none; } a:hover{text-decoration:none} button, input, textarea{ font:inherit; } button{ cursor:pointer; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:3px solid rgba(24,132,93,.35); outline-offset:3px; } .container{ width:min(calc(100% - 32px), var(--container)); margin-inline:auto; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--primary); } .section{ padding:84px 0; } .section-soft{ background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(238,244,239,.9)); border-top:1px solid rgba(198,212,201,.45); border-bottom:1px solid rgba(198,212,201,.45); } .section-dark{ background: radial-gradient(circle at top left, rgba(23,132,93,.25), transparent 22%), linear-gradient(135deg, #0e1b15, #12231b 60%, #102018); color:#eef5ef; } .section-heading{ max-width:760px; margin:0 auto 42px; text-align:center; } .section-heading.left{ text-align:left; margin-inline:0; } .section-heading h2, .simple-hero h1, .not-found-card h1{ margin:16px 0 14px; line-height:1.1; letter-spacing:-.04em; font-size:clamp(2rem, 4vw, 3.35rem); } .section-heading p, .simple-hero p, .hero-lead{ margin:0; color:var(--ink-soft); font-size:1.03rem; } .section-heading-dark p, .section-heading-dark .eyebrow{ color:#c4d6ca; } .site-header{ position:sticky; top:0; z-index:80; background:rgba(246,248,246,.82); backdrop-filter:blur(16px); border-bottom:1px solid rgba(198,212,201,.42); } .header-shell{ min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:flex; align-items:center; gap:14px; color:var(--ink); min-width:0; } .brand img{ width:56px; height:56px; border-radius:18px; box-shadow:var(--shadow-soft); background:#fff; } .brand-text{ display:flex; flex-direction:column; min-width:0; } .brand-text strong{ font-size:1rem; line-height:1.15; letter-spacing:-.02em; } .brand-text small{ color:var(--ink-soft); font-size:.78rem; } .main-nav{ display:flex; align-items:center; gap:22px; } .main-nav a{ color:var(--ink-soft); font-weight:600; } .main-nav a:hover{ color:var(--primary); } .nav-cta{ margin-left:8px; } .nav-toggle{ display:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .nav-toggle span{ width:20px; height:2px; background:var(--ink); border-radius:999px; } .hero-section{ padding:56px 0 64px; } .hero-grid{ display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); gap:36px; align-items:center; } .hero-copy h1{ font-size:clamp(2.2rem, 4vw, 4.25rem); line-height:1.03; margin:16px 0 18px; letter-spacing:-.055em; max-width:15ch; } .hero-support{ margin:18px 0 0; color:var(--primary-strong); font-weight:700; } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 20px; } .hero-trust{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; color:var(--ink-soft); } .hero-trust li{ display:flex; align-items:flex-start; gap:10px; } .card-glass, .media-card, .feature-card, .solution-card, .social-card, .contact-form, .contact-panel, .legal-card, .not-found-card, .trust-card, .simple-hero{ background:var(--surface); border:1px solid rgba(198,212,201,.5); box-shadow:var(--shadow); border-radius:var(--radius-lg); } .hero-media{ position:relative; overflow:hidden; min-height:540px; } .hero-media img{ width:100%; height:100%; object-fit:cover; } .hero-media-overlay{ position:absolute; left:22px; right:22px; bottom:22px; padding:18px 18px 16px; border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(12,27,20,.76)); color:#fff; backdrop-filter:blur(10px); } .hero-media-overlay strong{ display:block; font-size:1.02rem; margin-bottom:6px; } .authority-grid, .solutions-grid, .social-grid{ display:grid; gap:18px; } .authority-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } .feature-card{ padding:24px; } .feature-card img{ width:28px; height:28px; margin-bottom:16px; } .feature-card h3, .solution-card h3, .info-block h3, .trust-card h3, .legal-card h2{ margin:0 0 10px; line-height:1.2; letter-spacing:-.03em; } .feature-card p, .solution-card p, .trust-card p, .info-block p, .legal-card p, .legal-card li, .contact-panel p{ margin:0; color:var(--ink-soft); } .split-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.9fr); gap:32px; align-items:center; } .split-grid.reverse{ grid-template-columns:minmax(340px,.9fr) minmax(0,1fr); } .media-card{ overflow:hidden; } .media-card img{ width:100%; height:100%; object-fit:cover; } .media-card-tall{ min-height:560px; } .inline-note{ margin-top:18px; padding:14px 16px; border-radius:16px; background:#fff; border:1px solid var(--line); display:inline-flex; align-items:center; gap:10px; color:var(--ink-soft); font-weight:600; } .solutions-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } .solution-card{ padding:24px; display:flex; flex-direction:column; gap:14px; } .solution-card a{ margin-top:auto; font-weight:700; } .coverage-layout{ display:grid; grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr); gap:22px; align-items:start; } .coverage-copy{ position:sticky; top:106px; } .check-list, .contact-list, .legal-list, .footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:12px; } .check-list li, .contact-list li{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); } .check-list li::before{ content:""; width:20px; height:20px; flex:0 0 auto; margin-top:2px; background:url("assets/icons/check-circle.svg") center/contain no-repeat; } .coverage-gallery{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } .mini-media-card{ overflow:hidden; border-radius:20px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-soft); aspect-ratio: 1 / .8; } .mini-media-card img{ width:100%; height:100%; object-fit:cover; } .info-block{ padding:18px 0; border-bottom:1px solid var(--line); } .legal-alert{ margin:22px 0; padding:16px 18px; border-radius:18px; background:rgba(217,178,90,.13); border:1px solid rgba(217,178,90,.28); color:#5d4a1a; font-weight:600; } .trust-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; } .trust-card{ overflow:hidden; } .trust-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .trust-card div{ padding:22px; } .content-hub{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; } .content-hub a{ display:inline-flex; align-items:center; padding:13px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:700; box-shadow:var(--shadow-soft); } .social-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } .social-card{ padding:24px; display:flex; flex-direction:column; gap:10px; color:var(--ink); } .social-card img{ width:24px; height:24px; } .social-card span{ color:var(--ink-soft); } .contact-layout{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:22px; align-items:start; } .contact-panel, .contact-form, .legal-card, .not-found-card, .simple-hero{ padding:28px; } .contact-main-cta{ margin:8px 0 18px; } .contact-list li img{ width:18px; height:18px; } .form-row{ display:grid; gap:8px; margin-bottom:14px; } .form-row label{ font-weight:700; color:var(--ink); } .form-row input, .form-row textarea{ width:100%; border:1px solid var(--line-strong); border-radius:16px; background:#fff; padding:15px 16px; color:var(--ink); } .form-row textarea{ resize:vertical; min-height:140px; } .form-note, .form-feedback{ margin:14px 0 0; color:var(--ink-soft); font-size:.95rem; } .faq-list{ max-width:900px; margin-inline:auto; display:grid; gap:12px; } .faq-list details{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px 20px; box-shadow:var(--shadow-soft); } .faq-list summary{ cursor:pointer; list-style:none; font-weight:800; line-height:1.35; position:relative; padding-right:28px; } .faq-list summary::-webkit-details-marker{ display:none; } .faq-list summary::after{ content:"+"; position:absolute; right:0; top:0; color:var(--primary); font-size:1.2rem; } .faq-list details[open] summary::after{ content:"–"; } .faq-list p{ color:var(--ink-soft); margin:12px 0 0; } .site-footer{ padding:38px 0 20px; background:var(--dark); color:#e8f1ea; } .footer-grid{ display:grid; grid-template-columns:1.2fr .9fr .9fr .9fr; gap:20px; } .footer-logo{ background:#fff; border-radius:18px; } .footer-copy{ margin:14px 0 0; } .footer-copy-soft{ color:#b8cbbe; } .footer-grid h3{ margin:0 0 12px; letter-spacing:-.02em; } .footer-links a, .footer-links span{ color:#cde3d5; } .footer-bottom{ display:flex; justify-content:space-between; gap:20px; padding-top:22px; margin-top:22px; border-top:1px solid rgba(255,255,255,.08); color:#b8cbbe; font-size:.95rem; } .button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:999px; font-weight:800; border:1px solid transparent; transition:transform var(--transition), box-shadow var(--transition), background var(--transition); } .button:hover{ transform:translateY(-1px); } .button-primary{ background:linear-gradient(135deg, var(--primary), var(--primary-soft)); color:#f7fffa; box-shadow:0 16px 36px rgba(15,107,75,.2); } .button-primary:hover{ box-shadow:0 20px 42px rgba(15,107,75,.28); } .button-secondary{ background:#fff; color:var(--primary); border-color:var(--line-strong); box-shadow:var(--shadow-soft); } .button-block{ width:100%; } .simple-page-main{ min-height:70vh; } .simple-hero{ margin-top:26px; padding:28px; } .breadcrumb{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--ink-soft); font-weight:600; } .legal-layout{ display:grid; gap:22px; } .legal-card h2{ margin-top:0; } .legal-card h2 + p{ margin-bottom:16px; } .not-found-main{ min-height:70vh; display:grid; place-items:center; } .not-found-card{ max-width:760px; margin:0 auto; text-align:center; } .floating-whatsapp{ position:fixed; right:18px; bottom:22px; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #24c768, #0f6b4b); box-shadow:0 18px 40px rgba(15,107,75,.25); z-index:95; } .floating-whatsapp img{ width:26px; height:26px; filter:brightness(0) invert(1); } .mobile-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(13,23,18,.88); backdrop-filter:blur(12px); } .mobile-sticky-cta a{ display:flex; align-items:center; justify-content:center; min-height:50px; background:linear-gradient(135deg, var(--primary), var(--primary-soft)); border-radius:999px; color:#fff; font-weight:800; } @media (max-width: 1120px){ .authority-grid, .trust-grid, .social-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .solutions-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 920px){ .main-nav{ position:absolute; top:82px; left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); } .main-nav.is-open{display:flex} .main-nav a{ padding:14px 10px; border-bottom:1px solid var(--line); } .main-nav a:last-child{border-bottom:0} .nav-toggle{display:flex} .hero-grid, .split-grid, .split-grid.reverse, .coverage-layout, .contact-layout{ grid-template-columns:1fr; } .coverage-copy{ position:static; } .hero-media{ min-height:420px; } } @media (max-width: 700px){ .section{ padding:68px 0; } .hero-copy h1{ max-width:none; } .authority-grid, .solutions-grid, .coverage-gallery, .trust-grid, .social-grid, .footer-grid, .footer-bottom{ grid-template-columns:1fr; } .footer-bottom{ display:grid; } .brand-text small{ display:none; } .hero-actions{ display:grid; grid-template-columns:1fr; } .button{ width:100%; } .mobile-sticky-cta{ display:block; } .floating-whatsapp{ bottom:86px; } }