/* ========================================================================== homepage.css — Arremate Toguchi — Seções abaixo da dobra Os estilos do hero ficam em homepage-critical.css (inlinado no ). Este arquivo é carregado de forma assíncrona (não render-blocking). ========================================================================== */ /* -------------------------------------------------------------------------- Modalidades -------------------------------------------------------------------------- */ .hp-modalidades { padding-block: var(--at-section-gap); background: var(--at-bg); } .hp-modalidades__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; } .hp-modalidades__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hp-modalidades__card { display: flex; flex-direction: column; padding: 40px 36px 36px; background: var(--at-white); border: 1.5px solid var(--at-stone); border-radius: var(--at-radius-xl); text-decoration: none; position: relative; overflow: hidden; box-shadow: var(--at-shadow-xs); transition: box-shadow var(--at-dur) var(--at-ease), border-color var(--at-dur) var(--at-ease), transform var(--at-dur) var(--at-ease); } .hp-modalidades__card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--at-gold), var(--at-gold-light)); transform: scaleX(0); transform-origin: left; transition: transform var(--at-dur) var(--at-ease); } .hp-modalidades__card:hover { box-shadow: var(--at-shadow-md); border-color: var(--at-gold-border); transform: translateY(-5px); } .hp-modalidades__card:hover::after { transform: scaleX(1); } /* Watermark number */ .hp-modalidades__card-num { position: absolute; top: -12px; right: 20px; font-family: var(--at-font-display); font-size: 7.5rem; font-weight: 700; color: var(--at-stone); line-height: 1; letter-spacing: -.06em; pointer-events: none; user-select: none; transition: color var(--at-dur); } .hp-modalidades__card:hover .hp-modalidades__card-num { color: var(--at-gold-border); } .hp-modalidades__card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; position: relative; z-index: 1; } .hp-modalidades__card-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--at-radius-md); background: var(--at-gold-subtle); border: 1px solid var(--at-gold-border); color: var(--at-gold); transition: background var(--at-dur), color var(--at-dur), border-color var(--at-dur); } .hp-modalidades__card:hover .hp-modalidades__card-icon { background: var(--at-gold); color: #fff; border-color: var(--at-gold); } .hp-modalidades__card-tag { font-size: .625rem; font-weight: 800; color: var(--at-ink-40); text-transform: uppercase; letter-spacing: .12em; background: var(--at-cream-dark); padding: 4px 10px; border-radius: var(--at-radius-full); border: 1px solid var(--at-stone); margin-top: 4px; } .hp-modalidades__card-title { font-family: var(--at-font-display); font-size: 1.5rem; font-weight: 700; color: var(--at-text); letter-spacing: -.025em; margin-bottom: 12px; line-height: 1.15; position: relative; z-index: 1; } .hp-modalidades__card-desc { font-size: .9rem; color: var(--at-text-muted); line-height: 1.72; flex: 1; margin-bottom: 28px; position: relative; z-index: 1; } .hp-modalidades__card-link { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 700; color: var(--at-gold); position: relative; z-index: 1; transition: gap var(--at-dur-fast), color var(--at-dur-fast); } .hp-modalidades__card:hover .hp-modalidades__card-link { gap: 13px; color: var(--at-gold-dark); } /* -------------------------------------------------------------------------- Como funciona (Steps) — números grandes -------------------------------------------------------------------------- */ .hp-steps { background: var(--at-ink-90); padding-block: var(--at-section-gap); position: relative; overflow: hidden; } .hp-steps::before { content: ''; position: absolute; top: -20%; right: -5%; width: 600px; height: 600px; border-radius: var(--at-radius-full); background: radial-gradient(circle, rgba(200,132,26,.06) 0%, transparent 60%); pointer-events: none; } .hp-steps__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 72px; position: relative; z-index: 1; flex-wrap: wrap; } .hp-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; z-index: 1; } .hp-steps__item { padding: 0 40px 0 36px; border-left: 1px solid rgba(255,255,255,.06); } .hp-steps__item:first-child { padding-left: 0; border-left: none; } .hp-steps__item:last-child { padding-right: 0; } /* Número grande como elemento principal */ .hp-steps__num { display: block; font-family: var(--at-font-display); font-size: 3.75rem; font-weight: 700; color: var(--at-gold); line-height: 1; letter-spacing: -.05em; margin-bottom: 20px; } .hp-steps__num::after { content: ''; display: block; width: 24px; height: 2px; background: linear-gradient(90deg, var(--at-gold), transparent); margin-top: 10px; border-radius: 2px; } .hp-steps__title { font-size: 1.0625rem; font-weight: 700; color: var(--at-white); margin-bottom: 12px; letter-spacing: -.015em; line-height: 1.3; } .hp-steps__desc { font-size: .875rem; color: rgba(255,255,255,.36); line-height: 1.75; } /* -------------------------------------------------------------------------- Destaques -------------------------------------------------------------------------- */ .hp-destaques { padding-block: var(--at-section-gap); background: var(--at-cream); } .hp-destaques__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .hp-destaques__cta { margin-top: 52px; text-align: center; } /* Abas por estado */ .hp-destaques__tabs { display: flex; gap: 8px; margin-bottom: 44px; flex-wrap: wrap; } .hp-destaques__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: var(--at-radius-full); font-size: .875rem; font-weight: 600; color: var(--at-text-muted); background: var(--at-white); border: 1.5px solid var(--at-stone); text-decoration: none; transition: border-color var(--at-dur-fast), color var(--at-dur-fast), background var(--at-dur-fast), box-shadow var(--at-dur-fast); } .hp-destaques__tab:hover { border-color: var(--at-gold-border); color: var(--at-gold); background: var(--at-gold-subtle); } .hp-destaques__tab.is-active { background: var(--at-ink); color: var(--at-white); border-color: var(--at-ink); box-shadow: var(--at-shadow-sm); } .hp-destaques__tab-count { font-size: .6875rem; font-weight: 700; padding: 2px 8px; border-radius: var(--at-radius-full); background: rgba(255,255,255,.15); color: inherit; opacity: .75; } .hp-destaques__tab.is-active .hp-destaques__tab-count { background: rgba(255,255,255,.12); opacity: 1; } /* Cards grid — garante 3 colunas na homepage */ .hp-destaques .at-grid { grid-template-columns: repeat(3, 1fr); } /* -------------------------------------------------------------------------- Regiões — chips de cidades agrupadas por macrorregião -------------------------------------------------------------------------- */ .hp-regioes { padding-block: var(--at-section-gap); background: var(--at-bg); border-top: 1px solid var(--at-stone); } .hp-regioes__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; flex-wrap: wrap; } /* Bloco de cada macrorregião */ .hp-regioes__bloco { margin-bottom: 44px; } .hp-regioes__bloco:last-child { margin-bottom: 0; } .hp-regioes__bloco-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--at-stone); flex-wrap: wrap; } .hp-regioes__bloco-title { font-family: var(--at-font-display); font-size: 1.25rem; font-weight: 700; color: var(--at-text); letter-spacing: -.025em; line-height: 1.2; margin-bottom: 5px; } .hp-regioes__bloco-desc { font-size: .8125rem; color: var(--at-text-light); margin: 0; } .hp-regioes__bloco-link { font-size: .875rem; font-weight: 700; color: var(--at-gold); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color var(--at-dur-fast), gap var(--at-dur-fast); display: inline-flex; align-items: center; gap: 4px; } .hp-regioes__bloco-link:hover { color: var(--at-gold-dark); } /* Grade de chips */ .hp-regioes__chips { display: flex; flex-wrap: wrap; gap: 10px; } .hp-regioes__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 18px; background: var(--at-white); border: 1.5px solid var(--at-stone); border-radius: var(--at-radius-full); text-decoration: none; transition: border-color var(--at-dur-fast), background var(--at-dur-fast), box-shadow var(--at-dur-fast), transform var(--at-dur-fast); } .hp-regioes__chip:hover { border-color: var(--at-gold-border); background: var(--at-gold-subtle); box-shadow: 0 2px 8px rgba(200,132,26,.12); transform: translateY(-1px); } .hp-regioes__chip-nome { font-size: .875rem; font-weight: 600; color: var(--at-text); transition: color var(--at-dur-fast); } .hp-regioes__chip:hover .hp-regioes__chip-nome { color: var(--at-gold-dark); } .hp-regioes__chip-count { font-size: .6875rem; font-weight: 700; color: var(--at-text-light); background: var(--at-cream-dark); border: 1px solid var(--at-stone); border-radius: var(--at-radius-full); padding: 2px 9px; line-height: 1.6; transition: background var(--at-dur-fast), color var(--at-dur-fast), border-color var(--at-dur-fast); } .hp-regioes__chip:hover .hp-regioes__chip-count { background: var(--at-gold-subtle); color: var(--at-gold-dark); border-color: var(--at-gold-border); } /* -------------------------------------------------------------------------- Trust -------------------------------------------------------------------------- */ .hp-trust { background: var(--at-ink); padding-block: var(--at-section-gap); position: relative; overflow: hidden; } .hp-trust::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(200,132,26,.06) 0%, transparent 70%); pointer-events: none; } .hp-trust__intro { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 72px; position: relative; z-index: 1; } .hp-trust__intro .at-section__label { justify-content: center; } .hp-trust__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .hp-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 32px; border-right: 1px solid rgba(255,255,255,.07); } .hp-trust__item:last-child { border-right: none; } .hp-trust__num { font-family: var(--at-font-display); font-size: clamp(2.75rem, 4.5vw, 4rem); font-weight: 700; color: var(--at-white); display: block; line-height: 1; margin-bottom: 14px; letter-spacing: -.04em; } .hp-trust__line { width: 28px; height: 2px; background: linear-gradient(90deg, var(--at-gold), transparent); margin: 0 auto 14px; border-radius: 2px; flex-shrink: 0; } .hp-trust__label { font-size: .8125rem; color: rgba(255,255,255,.36); line-height: 1.6; max-width: 155px; } /* -------------------------------------------------------------------------- Newsletter -------------------------------------------------------------------------- */ .hp-newsletter { background: var(--at-bg); border-top: 1px solid var(--at-stone); padding-block: var(--at-section-gap); } .hp-newsletter__inner { display: grid; grid-template-columns: 1fr 440px; gap: 80px; align-items: center; } .hp-newsletter__title { font-family: var(--at-font-display); font-size: clamp(1.875rem, 3.5vw, 2.875rem); font-weight: 700; color: var(--at-text); letter-spacing: -.03em; line-height: 1.07; margin-bottom: 16px; } .hp-newsletter__title em { font-style: normal; color: var(--at-gold); } .hp-newsletter__desc { color: var(--at-text-muted); font-size: .9375rem; line-height: 1.72; margin-bottom: 28px; max-width: 420px; } .hp-newsletter__benefits { display: flex; flex-direction: column; gap: 11px; list-style: none; } .hp-newsletter__benefits li { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--at-text-muted); font-weight: 500; } .hp-newsletter__benefits li svg { color: var(--at-gold); flex-shrink: 0; background: var(--at-gold-subtle); border-radius: 50%; padding: 2px; width: 18px; height: 18px; } /* Form wrap */ .hp-newsletter__form-wrap { background: var(--at-white); border: 1.5px solid var(--at-stone); border-radius: var(--at-radius-xl); padding: 40px 36px; box-shadow: var(--at-shadow-sm); } .hp-newsletter__form-title { font-family: var(--at-font-display); font-size: 1.375rem; font-weight: 700; color: var(--at-text); letter-spacing: -.02em; margin-bottom: 4px; } .hp-newsletter__form-sub { font-size: .8125rem; color: var(--at-text-light); margin-bottom: 24px; } .hp-newsletter__form-wrap .at-newsletter-form--stack { margin-bottom: 14px; } .hp-newsletter__form-wrap .at-newsletter-form--stack .at-newsletter-form__nome { padding: 14px 18px; font-size: .9375rem; } .hp-newsletter__form-wrap .at-newsletter-form--stack .at-newsletter-form__row { border-radius: var(--at-radius-md); } .hp-newsletter__form-wrap .at-newsletter-form--stack input[type="email"] { padding: 14px 18px; font-size: .9375rem; } .hp-newsletter__form-wrap .at-newsletter-form--stack button { padding: 14px 22px; font-size: .875rem; } .hp-newsletter__trust { display: flex; align-items: center; gap: 7px; font-size: .6875rem; color: var(--at-text-light); margin-top: 12px; } .hp-newsletter__trust svg { flex-shrink: 0; } /* ── Segmented newsletter form ── */ .at-newsletter-form--segmented .at-newsletter-form__selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .at-newsletter-form--segmented .at-newsletter-form__field { display: flex; flex-direction: column; gap: 5px; } .at-newsletter-form__field-lbl { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--at-text-light); } .at-newsletter-form__select { -webkit-appearance: none; appearance: none; width: 100%; padding: 12px 34px 12px 14px; font-size: .9rem; font-family: inherit; color: var(--at-text); background-color: var(--at-cream); background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a6e60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; border: 1.5px solid var(--at-stone); border-radius: var(--at-radius-sm); cursor: pointer; transition: border-color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .at-newsletter-form__select:focus { outline: none; border-color: var(--at-gold); box-shadow: 0 0 0 3px var(--at-gold-subtle); } .at-newsletter-form__select:disabled { opacity: .45; cursor: not-allowed; } .at-newsletter-form--segmented .at-newsletter-form__nome { margin-bottom: 10px; } /* Success/error feedback messages */ .at-newsletter-msg { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--at-radius-sm); font-size: .875rem; font-weight: 600; line-height: 1.4; margin-bottom: 4px; } .at-newsletter-msg--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .at-newsletter-msg--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } .at-newsletter-msg--info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; } .at-newsletter-msg svg { flex-shrink: 0; } @media (max-width: 480px) { .at-newsletter-form--segmented .at-newsletter-form__selects { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .hp-faq { padding-block: var(--at-section-gap); background: var(--at-cream); border-top: 1px solid var(--at-stone); } .hp-faq__header { text-align: center; max-width: 600px; margin-inline: auto; margin-bottom: 72px; } .hp-faq__header .at-section__label { justify-content: center; } .hp-faq__inner { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: start; } /* Accordion */ .hp-faq__list { display: flex; flex-direction: column; } .hp-faq__item { border-bottom: 1px solid var(--at-stone); } .hp-faq__item:first-child { border-top: 1px solid var(--at-stone); } .hp-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; text-align: left; font-size: .9375rem; font-weight: 600; color: var(--at-text); cursor: pointer; background: none; border: none; letter-spacing: -.008em; line-height: 1.45; transition: color var(--at-dur-fast); } .hp-faq__question:hover { color: var(--at-gold); } .hp-faq__question[aria-expanded="true"] { color: var(--at-gold); } .hp-faq__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--at-radius-full); border: 1.5px solid var(--at-stone-dark); display: flex; align-items: center; justify-content: center; color: var(--at-text-muted); background: var(--at-white); transition: transform var(--at-dur) var(--at-ease), background var(--at-dur-fast), border-color var(--at-dur-fast), color var(--at-dur-fast); } .hp-faq__question[aria-expanded="true"] .hp-faq__icon { transform: rotate(180deg); background: var(--at-gold); border-color: var(--at-gold); color: #fff; } .hp-faq__answer { padding: 0 0 22px; } .hp-faq__answer[hidden] { display: none; } .hp-faq__answer p { font-size: .9375rem; color: var(--at-text-muted); line-height: 1.8; margin: 0; } /* Aside card */ .hp-faq__aside { position: sticky; top: calc(var(--at-header-h) + 32px); } .hp-faq__aside-card { background: var(--at-ink-90); border-radius: var(--at-radius-xl); padding: 40px 36px; border: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; } .hp-faq__aside-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 340px; height: 340px; border-radius: var(--at-radius-full); background: radial-gradient(circle, rgba(200,132,26,.08) 0%, transparent 65%); pointer-events: none; } .hp-faq__aside-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--at-radius-md); background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.2); color: #25d366; margin-bottom: 22px; position: relative; } .hp-faq__aside-title { font-family: var(--at-font-display); font-size: 1.5rem; font-weight: 700; color: var(--at-white); letter-spacing: -.025em; margin-bottom: 10px; position: relative; } .hp-faq__aside-desc { font-size: .875rem; color: rgba(255,255,255,.4); line-height: 1.72; margin-bottom: 28px; position: relative; } .hp-faq__aside-card .at-btn--whatsapp { position: relative; width: 100%; justify-content: center; padding: 14px 22px; } .hp-faq__aside-meta { display: flex; align-items: center; gap: 7px; font-size: .6875rem; color: rgba(255,255,255,.25); margin-top: 14px; position: relative; } .hp-faq__aside-meta svg { flex-shrink: 0; color: var(--at-gold); } /* -------------------------------------------------------------------------- Animated counter -------------------------------------------------------------------------- */ .at-contador { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Responsive — 1100px -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .hp-steps__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 0; } .hp-steps__item { padding: 0 32px 0 28px; } .hp-steps__item:first-child { padding-left: 0; } .hp-steps__item:nth-child(odd) { border-left: none; } .hp-newsletter__inner { grid-template-columns: 1fr 380px; gap: 60px; } } /* -------------------------------------------------------------------------- Responsive — 900px (seções abaixo da dobra) -------------------------------------------------------------------------- */ @media (max-width: 900px) { .hp-modalidades__grid { grid-template-columns: 1fr; gap: 16px; } .hp-modalidades__card { padding: 32px 28px; } .hp-modalidades__card-num { font-size: 5.5rem; } .hp-modalidades__header { flex-direction: column; align-items: flex-start; gap: 20px; } .hp-regioes__header { flex-direction: column; align-items: flex-start; gap: 16px; } .hp-regioes__bloco-header { flex-direction: column; align-items: flex-start; gap: 8px; } .hp-trust__grid { grid-template-columns: repeat(2, 1fr); } .hp-trust__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); } .hp-trust__item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07); } .hp-trust__item:nth-last-child(-n+2) { border-bottom: none; } .hp-faq__inner { grid-template-columns: 1fr; gap: 52px; } .hp-faq__aside { position: static; } .hp-newsletter__inner { grid-template-columns: 1fr; gap: 40px; } .hp-steps__header { flex-direction: column; gap: 24px; } .hp-steps__grid { grid-template-columns: 1fr 1fr; } .hp-steps__item { padding: 0 24px; border-left: 1px solid rgba(255,255,255,.06); } .hp-steps__item:first-child, .hp-steps__item:nth-child(odd) { border-left: none; padding-left: 0; } .hp-destaques__header { flex-direction: column; align-items: flex-start; gap: 20px; } .hp-destaques .at-grid { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- Responsive — 640px (seções abaixo da dobra) -------------------------------------------------------------------------- */ @media (max-width: 640px) { .hp-steps__grid { grid-template-columns: 1fr; gap: 32px; } .hp-steps__item { padding: 0; border-left: none !important; } .hp-steps__num { font-size: 3rem; } .hp-trust__num { font-size: 2.5rem; } .hp-newsletter__form-wrap { padding: 28px 22px; } .hp-trust__grid { grid-template-columns: 1fr 1fr; } .hp-destaques .at-grid { grid-template-columns: 1fr; } .hp-destaques__tabs { gap: 6px; } .hp-destaques__tab { font-size: .8125rem; padding: 8px 14px; } .hp-regioes__chip { padding: 8px 13px 8px 15px; } .hp-regioes__chip-nome { font-size: .8125rem; } }