:root { --ink:#262624; --paper:#f2f0ea; --white:#faf9f6; --accent:#bd7b42; --line:rgba(38,38,36,.2); --serif:"DM Serif Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; } a { color:inherit; text-decoration:none; } .skip-link { position:fixed; z-index:100; top:-60px; left:1rem; background:var(--ink); color:white; padding:.7rem 1rem; } .skip-link:focus { top:1rem; }
.site-header { height:88px; padding:0 clamp(1.25rem,4.5vw,5.5rem); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(242,240,234,.94); position:sticky; z-index:10; top:0; backdrop-filter:blur(12px); } .brand { line-height:1; text-transform:uppercase; letter-spacing:.025em; display:flex; flex-direction:column; gap:5px; } .brand span { font-family:var(--serif); font-size:1.45rem; text-transform:none; letter-spacing:0; } .brand small { font-size:.57rem; font-weight:600; letter-spacing:.16em; } .main-nav { display:flex; gap:2rem; font-size:.78rem; font-weight:500; } .main-nav a { transition:color .2s; } .main-nav a:hover { color:var(--accent); } .header-cta { font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; } .header-cta span { color:var(--accent); font-size:1.1rem; margin-left:.3rem; } .menu-toggle { display:none; border:0; background:none; padding:.5rem; } .menu-toggle span { display:block; height:1px; width:24px; margin:6px 0; background:var(--ink); }
.hero { min-height:calc(100vh - 88px); max-width:1600px; margin:auto; padding:clamp(.75rem,2vw,2rem) clamp(1.25rem,7vw,8.5rem) 3.5rem; display:grid; grid-template-columns:1.08fr .92fr; position:relative; align-items:start; gap:3rem; overflow:hidden; } .hero-copy { max-width:670px; position:relative; z-index:2; } .eyebrow { margin:0 0 1rem; text-transform:uppercase; letter-spacing:.13em; font-size:.67rem; font-weight:600; } .eyebrow span { display:inline-block; height:4px; width:4px; margin:0 .65rem 2px; background:var(--accent); border-radius:50%; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.035em; line-height:.98; } h1 { font-size:clamp(3.5rem,6.6vw,7.2rem); margin:0 0 1.8rem; } h1 em,h2 em { color:var(--accent); font-weight:inherit; } .hero-text { font-size:clamp(1.02rem,1.4vw,1.22rem); max-width:455px; color:#55544f; margin-bottom:2.2rem; } .hero-actions { display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; gap:1.75rem; padding:1.05rem 1.35rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-3px); } .button-dark { background:var(--ink); color:white; } .button span { font-size:1.2rem; color:var(--accent); } .text-link { font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:.35rem; } .text-link span { color:var(--accent); margin-left:.25rem; } .hero-image-wrap { height:min(590px,65vh); position:relative; background:#dedbd3; } .hero-image { width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.75); position:relative; z-index:1; } .hero-accent { position:absolute; z-index:0; background:var(--accent); height:71%; width:50%; right:-12%; top:-4%; } .hero-caption { position:absolute; z-index:2; bottom:-22px; left:-25px; padding:1.2rem 1.4rem; min-width:220px; background:var(--white); display:flex; flex-direction:column; } .hero-caption span { font-family:var(--serif); font-size:1.32rem; } .hero-caption small { font-size:.65rem; color:#74736d; margin-top:.2rem; }
.section { padding:clamp(3.75rem,6.5vw,6.5rem) clamp(1.25rem,7vw,8.5rem); } .section-label { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; font-weight:600; display:flex; gap:1rem; align-items:center; } .section-label span { color:#77756e; } .intro { border-top:1px solid var(--line); } .intro-grid { max-width:1150px; margin:3rem auto 0; display:grid; grid-template-columns:1.1fr .7fr; gap:clamp(3rem,8vw,7rem); } h2 { font-size:clamp(2.7rem,5vw,5rem); margin:0; } .intro-content { padding-top:.5rem; } .intro-content p { color:#5f5d58; font-size:1.05rem; margin-bottom:1.5rem; } .dark-link { margin-top:1.2rem; display:inline-block; }
.areas { background:var(--ink); color:var(--white); } .areas-heading { display:grid; grid-template-columns:.8fr 1.25fr .75fr; gap:3rem; align-items:end; max-width:1400px; margin:auto; } .section-label.light span { color:#aaa79e; } .areas-heading h2 { font-size:clamp(2.8rem,4.8vw,5rem); } .areas-heading p { font-size:.9rem; color:#c5c2ba; max-width:260px; margin-bottom:.45rem; } .area-grid { max-width:1400px; margin:5rem auto 0; border-top:1px solid rgba(255,255,255,.22); display:grid; grid-template-columns:repeat(3,1fr); } .area-card { min-height:285px; position:relative; padding:1.4rem 1.3rem; border-right:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22); transition:background .25s,color .25s; } .area-card:nth-child(3n) { border-right:0; } .area-card:hover { background:var(--accent); } .area-number { color:#bbb8af; font-family:var(--serif); font-size:1rem; } .area-card h3 { position:absolute; left:1.3rem; bottom:1rem; font-family:var(--serif); font-size:clamp(1.85rem,2.6vw,2.7rem); font-weight:400; letter-spacing:-.035em; line-height:.95; margin:0; } .area-card p { position:absolute; left:1.3rem; right:3rem; bottom:5.8rem; margin:0; color:#d2cfc7; font-size:.78rem; } .circle-arrow { position:absolute; top:1.2rem; right:1.2rem; display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.45); border-radius:50%; font-size:1rem; } .area-card:hover .area-number,.area-card:hover p { color:white; }
.feature { display:grid; grid-template-columns:1fr 1fr; padding-top:0; padding-bottom:0; background:#dedbd3; } .feature-image { min-height:560px; margin-left:calc(clamp(1.25rem,7vw,8.5rem) * -1); } .feature-image img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:grayscale(.15) saturate(.8); } .feature-copy { padding:clamp(3.75rem,6vw,6.5rem); max-width:650px; align-self:center; } .orange { color:var(--accent); } .feature-copy h2 { font-size:clamp(3rem,4.5vw,4.8rem); margin-bottom:1.75rem; } .feature-copy > p:not(.eyebrow) { max-width:440px; color:#5b5954; font-size:1.04rem; } .button-outline { color:var(--ink); border:1px solid var(--ink); margin-top:1.1rem; }
.team { background:var(--white); } .team-heading { display:flex; justify-content:space-between; gap:4rem; align-items:start; max-width:1400px; margin:0 auto 3.25rem; } .team-heading h2 { max-width:750px; } .team-grid { max-width:1400px; margin:auto; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1.2rem; } .person-card img { width:100%; aspect-ratio:3 / 2; height:auto; object-fit:cover; object-position:center top; display:block; filter:saturate(.7); } .person-card.arthur img { object-position:center top; } .person-card div { border-top:1px solid var(--ink); margin-top:1rem; padding-top:.8rem; } .person-card h3 { margin:0 0:.2rem; font-family:var(--serif); font-size:1.55rem; font-weight:400; letter-spacing:-.02em; } .person-card p { margin:0; color:#78766e; font-size:.74rem; } .person-card .person-bio { margin-top:.85rem; max-width:33rem; color:#55534e; font-size:.83rem; line-height:1.55; } .person-card .person-role { text-transform:uppercase; letter-spacing:.06em; font-size:.65rem; }
.contact { min-height:500px; padding:clamp(4rem,6.5vw,6.5rem) clamp(1.25rem,7vw,8.5rem); background:#e7e2d8; display:grid; grid-template-columns:1.3fr .7fr; gap:7rem; position:relative; overflow:hidden; } .contact-copy { position:relative; z-index:1; max-width:720px; } .contact h2 { font-size:clamp(3rem,5.5vw,5.7rem); margin-bottom:1.5rem; } .contact-copy > p:not(.eyebrow) { max-width:450px; color:#5e5b55; margin-bottom:2rem; } .contact-info { border-left:1px solid rgba(38,38,36,.25); align-self:end; padding:0 0 .5rem 2rem; position:relative; z-index:1; font-size:.9rem; font-style:normal; } .contact-info p { margin-bottom:1.7rem; } .contact-info a { display:block; margin-top:.55rem; border-bottom:1px solid var(--ink); width:max-content; padding-bottom:.2rem; } .contact-info .map-link { display:inline-flex; align-items:center; gap:.75rem; margin:0 0 1.35rem; padding:.8rem 1rem; border:1px solid var(--ink); color:var(--ink); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transition:background .2s,color .2s; } .contact-info .map-link:hover { background:var(--ink); color:var(--white); } .contact-info .map-link span { color:var(--accent); font-size:1rem; } .contact-pattern { font-family:var(--serif); font-size:38rem; line-height:.6; color:rgba(189,123,66,.12); position:absolute; right:-6rem; top:3rem; transform:rotate(180deg); }
.site-footer { padding:2.1rem clamp(1.25rem,4.5vw,5.5rem); background:var(--ink); color:#e4e0d7; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.67rem; } .site-footer .brand span { font-size:1.15rem; } .site-footer .brand small { font-size:.47rem; } .site-footer > a:last-child { text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid #e4e0d7; padding-bottom:.2rem; }
@media (max-width:850px) { .main-nav,.header-cta { display:none; } .menu-toggle { display:block; } .site-header.menu-open .main-nav { display:flex; position:absolute; left:0; right:0; top:87px; padding:1.5rem 1.25rem 2rem; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:1.1rem; } .hero { grid-template-columns:1fr; min-height:auto; padding-top:0; padding-bottom:2.1rem; } .hero-copy { margin-top:-1rem; } .hero .eyebrow { margin-bottom:.65rem; } .hero h1 { font-size:clamp(3rem,6.8vw,4rem); margin-bottom:.95rem; } .hero-text { margin-bottom:1rem; } .hero-actions { gap:1.3rem; } .hero-image-wrap { height:540px; max-width:580px; width:90%; margin:1rem 0 0 auto; } .intro-grid,.feature,.contact { grid-template-columns:1fr; } .areas-heading { grid-template-columns:1fr; gap:1.4rem; } .area-grid { grid-template-columns:repeat(2,1fr); } .area-card:nth-child(3n) { border-right:1px solid rgba(255,255,255,.22); } .area-card:nth-child(2n) { border-right:0; } .feature { padding-left:0; padding-right:0; } .feature-image { min-height:480px; margin:0; } .feature-copy { padding-left:clamp(1.25rem,7vw,8.5rem); padding-right:clamp(1.25rem,7vw,8.5rem); } .team-heading { flex-direction:column; gap:2.5rem; } .team-grid { grid-template-columns:1fr 1fr; } .person-card.arthur { grid-column:span 2; } .contact { gap:3rem; } }
@media (max-width:540px) { .site-header { height:74px; } .brand span { font-size:1.2rem; } .hero { padding-bottom:3.25rem; } h1 { font-size:3.55rem; } .hero-image-wrap { height:430px; width:94%; } .hero-caption { left:-10px; bottom:-16px; } .section { padding-top:3.5rem; padding-bottom:3.5rem; } .intro-grid { margin-top:2.6rem; gap:2rem; } .area-grid { margin-top:3rem; grid-template-columns:1fr; } .area-card,.area-card:nth-child(3n) { min-height:225px; border-right:0; } .feature-image { min-height:390px; } .team-grid { grid-template-columns:1fr; } .person-card.arthur { grid-column:auto; } .contact { min-height:auto; } .contact-info { border-left:0; border-top:1px solid rgba(38,38,36,.25); padding:1.5rem 0 0; } .site-footer { align-items:flex-start; flex-direction:column; padding-top:2.5rem; padding-bottom:2.5rem; } .site-footer > a:last-child { margin-top:1rem; } }

/* Página de auxílio-acidente */
.benefit-hero { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 88px); background:var(--paper); } .benefit-hero-copy { padding:clamp(1.5rem,3vw,3rem) clamp(1.25rem,7vw,8.5rem) clamp(3rem,6vw,6rem); max-width:800px; align-self:start; } .back-link { display:inline-block; margin-bottom:1.5rem; color:#605e58; font-size:.69rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .back-link:hover,.source-link:hover { color:var(--accent); } .benefit-hero h1 { font-size:clamp(3.8rem,6.2vw,6.8rem); margin-bottom:1.7rem; } .benefit-hero-copy > p:not(.eyebrow) { max-width:540px; margin-bottom:2.25rem; color:#585650; font-size:1.08rem; } .benefit-hero-image { min-height:620px; overflow:hidden; } .benefit-hero-image img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.75); } .benefit-intro { background:var(--white); } .benefit-intro-grid { max-width:1220px; margin:3.25rem auto 0; display:grid; grid-template-columns:1.1fr .8fr; gap:clamp(3rem,10vw,10rem); } .benefit-intro-grid > div p { color:#585650; font-size:1.04rem; } .source-link { display:inline-block; margin-top:1.1rem; border-bottom:1px solid var(--ink); padding-bottom:.3rem; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; } .benefit-signs { padding:clamp(3.75rem,6.5vw,6.5rem) clamp(1.25rem,7vw,8.5rem); background:var(--ink); color:var(--white); } .benefit-signs > h2 { max-width:780px; margin:3rem 0 3.5rem; font-size:clamp(2.8rem,4.8vw,5rem); } .benefit-cards { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.25); } .benefit-cards article { min-height:250px; padding:1.3rem; border-right:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25); } .benefit-cards article:last-child { border-right:0; } .benefit-cards span { color:var(--accent); font-family:var(--serif); } .benefit-cards h3 { margin:4rem 0 .75rem; font-family:var(--serif); font-size:1.8rem; font-weight:400; } .benefit-cards p { max-width:260px; margin:0; color:#cbc7bf; font-size:.84rem; } .benefit-process { background:#e7e2d8; } .benefit-process-grid { max-width:1220px; margin:3rem auto 0; display:grid; grid-template-columns:1fr .9fr; gap:clamp(3rem,10vw,10rem); } .benefit-process-grid ol { margin:0; padding:0; list-style:none; counter-reset:steps; } .benefit-process-grid li { counter-increment:steps; display:grid; grid-template-columns:2.3rem 1fr; gap:1rem; padding:1.25rem 0; border-top:1px solid rgba(38,38,36,.3); } .benefit-process-grid li::before { content:"0" counter(steps); color:var(--accent); font-family:var(--serif); } .benefit-process-grid strong,.benefit-process-grid span { grid-column:2; } .benefit-process-grid strong { margin-bottom:.35rem; font-family:var(--serif); font-size:1.35rem; font-weight:400; } .benefit-process-grid span { color:#595650; font-size:.9rem; } .benefit-docs { padding:clamp(3.75rem,6.5vw,6.5rem) clamp(1.25rem,7vw,8.5rem); display:grid; grid-template-columns:.85fr 1fr .65fr; gap:clamp(2rem,6vw,6rem); background:var(--white); } .benefit-docs h2 { font-size:clamp(2.7rem,4vw,4.3rem); } .benefit-docs ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .benefit-docs li { padding:1rem 0 1rem 1.4rem; border-bottom:1px solid var(--line); position:relative; color:#575550; } .benefit-docs li::before { content:"•" position:absolute; left:0; color:var(--accent); } .benefit-note { align-self:end; margin:0; color:#67645e; font-size:.84rem; } .benefit-faq { background:var(--paper); } .benefit-faq-grid { max-width:1220px; margin:3rem auto 0; display:grid; grid-template-columns:1fr .9fr; gap:clamp(3rem,10vw,10rem); } .faq-list { border-top:1px solid var(--line); } .faq-list details { border-bottom:1px solid var(--line); } .faq-list summary { padding:1.25rem 2rem 1.25rem 0; cursor:pointer; list-style:none; position:relative; font-family:var(--serif); font-size:1.38rem; } .faq-list summary::after { content:"+" position:absolute; right:.15rem; color:var(--accent); } .faq-list details[open] summary::after { content:"−"; } .faq-list p { max-width:600px; padding:0 2rem 1.25rem 0; margin:0; color:#5e5b55; } .benefit-cta { padding:clamp(4rem,7vw,7rem) clamp(1.25rem,7vw,8.5rem); background:var(--accent); color:var(--white); text-align:center; } .benefit-cta .eyebrow { color:var(--ink); } .benefit-cta h2 { max-width:800px; margin:0 auto 1.25rem; font-size:clamp(3rem,5vw,5.3rem); } .benefit-cta h2 em { color:var(--ink); } .benefit-cta > p:not(.eyebrow) { max-width:490px; margin:0 auto 2rem; } .benefit-cta .button { background:var(--ink); } .benefit-cta small { display:block; max-width:600px; margin:2rem auto 0; color:rgba(255,255,255,.76); font-size:.71rem; }
@media (max-width:850px) { .benefit-hero,.benefit-intro-grid,.benefit-process-grid,.benefit-faq-grid { grid-template-columns:1fr; } .benefit-hero-copy { padding-top:.75rem; padding-bottom:3.5rem; } .benefit-hero-image { min-height:480px; } .benefit-cards { grid-template-columns:1fr 1fr; } .benefit-cards article:nth-child(2n) { border-right:0; } .benefit-docs { grid-template-columns:1fr; } .benefit-note { max-width:500px; } }
@media (max-width:540px) { .benefit-hero { min-height:auto; } .benefit-hero h1 { font-size:3.4rem; } .back-link { margin-bottom:3rem; } .benefit-hero-image { min-height:390px; } .benefit-cards { grid-template-columns:1fr; } .benefit-cards article { min-height:0; border-right:0; } .benefit-cards h3 { margin-top:2rem; } .benefit-process-grid,.benefit-faq-grid { gap:2.5rem; } .benefit-docs { gap:2rem; } }