/* public_html/styles.css
============================================
Tema dark REAL (default) + Light via data-theme
- Default: dark (sem atributo ou data-theme="dark")
- Light:
Crop inteligente CTA (object-position X):
- Desktop: 55%
- Tablet: 65%
- Mobile: 82%
============================================ */
/* =========================
Tokens (DEFAULT = DARK)
========================= */
:root{
--accent:#ff7a00;
--bg:#0f1012;
--bg-2:#15171a;
--surface:#14161a;
--surface-2:#1a1d22;
--surface-3:#20242b;
--text:#f5f7fa;
--muted:rgba(245,247,250,0.72);
--border:rgba(255,255,255,0.08);
--radius:12px;
--radius-lg:16px;
--container:1100px;
--gap:1.25rem;
--shadow-sm:0 2px 18px rgba(0,0,0,0.35);
--shadow-md:0 10px 30px rgba(0,0,0,0.38);
--shadow-lg:0 18px 50px rgba(0,0,0,0.42);
--shadow-accent:0 4px 16px rgba(255,122,0,0.25);
--ease:cubic-bezier(0.4, 0, 0.2, 1);
--t:0.3s var(--ease);
--focus:0 0 0 4px rgba(255,122,0,0.22);
--header-bg:rgba(20,22,26,0.78);
--header-bg-scrolled:rgba(20,22,26,0.90);
--header-text:var(--text);
--card-bg:var(--surface-2);
--card-text:var(--text);
--footer-bg:var(--surface);
--footer-text:var(--text);
--input-bg:rgba(255,255,255,0.04);
--input-border:var(--border);
--input-text:var(--text);
--placeholder:rgba(245,247,250,0.45);
--wa-bg:var(--surface-2);
--wa-text:var(--text);
/* CTA crop intelligent X position (desktop default) */
--cta-pos-x:55%;
font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* =========================
Tokens (LIGHT via data-theme)
========================= */
:root[data-theme="light"]{
--bg:#181818;
--bg-2:#222;
--surface:#ffffff;
--surface-2:#ffffff;
--surface-3:#f6f6f6;
/* Base page text in your light layout is still mostly white-on-dark bg sections.
Keep --text/--muted as you had. Cards/header/footer define their own via vars below. */
--text:#ffffff;
--muted:#bdbdbd;
--border:rgba(0,0,0,0.08);
--shadow-sm:0 2px 16px rgba(0,0,0,0.08);
--shadow-md:0 6px 24px rgba(24,24,24,0.10);
--shadow-lg:0 10px 30px rgba(24,24,24,0.18);
--focus:0 0 0 4px rgba(255,122,0,0.18);
--header-bg:rgba(255,255,255,0.95);
--header-bg-scrolled:rgba(255,255,255,0.98);
--header-text:#000;
--card-bg:#fff;
--card-text:#000;
--footer-bg:#fff;
--footer-text:#000;
--input-bg:#fff;
--input-border:rgba(0,0,0,0.14);
--input-text:#000;
--placeholder:rgba(0,0,0,0.38);
--wa-bg:#fff;
--wa-text:#000;
--cta-pos-x:55%;
}
/* =========================
Reset / Base
========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
padding-top:64px;
}
a{ color:inherit; }
.container{
max-width:var(--container);
margin:0 auto;
padding:2rem;
}
/* Prevent overflow from images */
img{
max-width:100%;
height:auto;
display:block;
}
/* Focus visibility */
:focus{
outline:none;
box-shadow:var(--focus);
outline-offset:2px;
}
/* Accessibility helpers */
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
/* =========================
Media / Icons
========================= */
.hero-img{
width:100%;
max-width:340px;
margin-bottom:1.2rem;
border-radius:12px;
box-shadow:0 6px 24px rgba(24,24,24,0.18);
}
ion-icon{
font-size:24px;
vertical-align:middle;
}
.icon-img{
display:inline-block;
width:28px;
height:28px;
object-fit:contain;
margin-right:.5em;
vertical-align:-6px;
}
/* =========================
Buttons
========================= */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
padding:0.875rem 1.5rem;
border-radius:10px;
text-decoration:none;
border:0;
cursor:pointer;
font-weight:600;
font-size:1rem;
transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
font-family:inherit;
}
.btn.primary{
background:linear-gradient(135deg, var(--accent), #ff9933);
color:#fff;
box-shadow:0 4px 12px rgba(255,122,0,0.3);
}
.btn.primary:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(255,122,0,0.4);
}
.btn.ghost{
background:transparent;
color:var(--accent);
border:2px solid var(--accent);
}
.btn.ghost:hover{
background:rgba(255,122,0,0.1);
transform:translateY(-2px);
}
/* =========================
Header / Nav
========================= */
.site-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background:var(--header-bg);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:var(--shadow-sm);
border-bottom:1px solid var(--border);
transition:all var(--t);
}
.site-header.nav-open{ z-index:1002; }
.site-header.scrolled{
background:var(--header-bg-scrolled);
box-shadow:var(--shadow-md);
}
.site-header .container{
padding:0 1.25rem;
height:72px;
display:flex;
align-items:center;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:1.5rem;
width:100%;
}
.logo{
display:flex;
align-items:center;
gap:0.75rem;
font-weight:700;
color:var(--header-text);
text-decoration:none;
transition:transform var(--t);
}
.logo:hover{ transform:scale(1.02); }
.logo-text{
font-size:1.1rem;
font-weight:700;
letter-spacing:-0.5px;
}
.site-logo{
height:40px;
display:inline-block;
vertical-align:middle;
transition:transform var(--t);
}
.logo:hover .site-logo{ transform:rotate(-5deg); }
.nav-list{
list-style:none;
margin:0;
padding:0;
display:flex;
gap:0.5rem;
align-items:center;
flex-shrink:1;
}
.nav-list a{
color:var(--header-text);
text-decoration:none;
font-size:0.95rem;
font-weight:500;
padding:0.5rem 1rem;
border-radius:8px;
white-space:nowrap;
transition:all var(--t);
position:relative;
}
.nav-list a:hover{
color:var(--accent);
background:rgba(255,122,0,0.10);
}
.nav-list a::after{
content:'';
position:absolute;
bottom:4px;
left:50%;
transform:translateX(-50%) scaleX(0);
width:80%;
height:2px;
background:var(--accent);
border-radius:2px;
transition:transform var(--t);
}
.nav-list a:hover::after{
transform:translateX(-50%) scaleX(1);
}
.header-actions{
display:flex;
align-items:center;
gap:1rem;
}
.cta-whatsapp{
background:linear-gradient(135deg, var(--accent), #ff9933);
color:#fff;
padding:0.6rem 1.25rem;
border-radius:10px;
text-decoration:none;
font-weight:600;
font-size:0.95rem;
display:inline-flex;
align-items:center;
gap:0.5rem;
height:44px;
box-shadow:0 10px 26px rgba(0,0,0,0.25);
transition:all var(--t);
}
.cta-whatsapp:hover{
transform:translateY(-2px);
box-shadow:0 16px 38px rgba(0,0,0,0.28);
}
.cta-whatsapp ion-icon{ font-size:20px; }
/* Hamburger */
.nav-toggle{
display:none;
background:rgba(255,255,255,0.06);
border:0;
width:48px;
height:48px;
border-radius:12px;
cursor:pointer;
color:var(--header-text);
position:relative;
transition:all var(--t);
align-items:center;
justify-content:center;
}
.nav-toggle:hover{ background:rgba(255,255,255,0.10); }
:root[data-theme="light"] .nav-toggle{
background:rgba(0,0,0,0.04);
}
:root[data-theme="light"] .nav-toggle:hover{
background:rgba(0,0,0,0.08);
}
.nav-toggle ion-icon{
font-size:28px;
position:absolute;
transition:all var(--t);
}
.nav-toggle .icon-open{ opacity:1; transform:rotate(0deg) scale(1); }
.nav-toggle .icon-close{ opacity:0; transform:rotate(90deg) scale(0.8); }
.site-header.nav-open .nav-toggle .icon-open{
opacity:0;
transform:rotate(-90deg) scale(0.8);
}
.site-header.nav-open .nav-toggle .icon-close{
opacity:1;
transform:rotate(0deg) scale(1);
}
.site-header.nav-open .nav-toggle{
background:var(--accent);
color:#fff;
}
/* Mobile menu */
.mobile-menu{
position:fixed;
top:64px;
left:0;
right:0;
bottom:0;
background:var(--surface);
transform:translateX(-100%);
transition:transform var(--t);
z-index:1003;
overflow-y:auto;
display:none;
border-top:1px solid var(--border);
}
.mobile-menu.active{ transform:translateX(0); }
.mobile-nav{
display:flex;
flex-direction:column;
padding:1.5rem 1rem;
gap:0.75rem;
}
.mobile-nav-item{
display:block;
color:var(--header-text);
text-decoration:none;
padding:1rem 1.25rem;
font-size:1.1rem;
font-weight:500;
border-radius:12px;
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
transition:all var(--t);
}
:root[data-theme="light"] .mobile-nav-item{
background:rgba(0,0,0,0.02);
}
.mobile-nav-item:hover,
.mobile-nav-item:active{
background:rgba(255,122,0,0.12);
border-color:rgba(255,122,0,0.35);
color:var(--accent);
}
/* Overlay */
.nav-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.5);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
opacity:0;
pointer-events:none;
transition:opacity var(--t);
z-index:1002;
}
.nav-overlay.active{
opacity:1;
pointer-events:auto;
}
/* =========================
Hero
========================= */
.hero{ padding:3rem 0; }
.hero-inner{
display:grid;
grid-template-columns:1fr 360px;
gap:2rem;
align-items:center;
}
.hero h1{
font-size:clamp(1.6rem,3.6vw,2.4rem);
margin:0 0 .6rem;
}
.hero p{
color:var(--muted);
margin:0 0 1rem;
}
.hero-ctas{
display:flex;
gap:.75rem;
flex-wrap:wrap;
}
.hero-note{ margin-top:12px; }
/* =========================
Generic Card / Layout
========================= */
.card{
background:linear-gradient(180deg, rgba(255,122,0,0.08), rgba(255,255,255,0.01));
padding:1.2rem;
border-radius:var(--radius);
box-shadow:0 6px 20px rgba(24,24,24,0.6);
}
.lede{
color:var(--muted);
margin-bottom:2rem;
font-size:1.1rem;
}
.grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.5rem;
}
/* =========================
Services
========================= */
.services{ padding:2.5rem 0; }
.service{
background:rgba(255,255,255,0.03);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--border);
padding:2rem;
border-radius:16px;
transition:all var(--t);
position:relative;
overflow:hidden;
}
.service::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg, var(--accent), #ff9933);
opacity:0;
transition:opacity var(--t);
}
.service:hover{
transform:translateY(-4px);
box-shadow:0 12px 40px rgba(255,122,0,0.15);
border-color:rgba(255,122,0,0.3);
}
.service:hover::before{ opacity:1; }
.service-icon{
width:56px;
height:56px;
background:linear-gradient(135deg, var(--accent), #ff9933);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:1.25rem;
box-shadow:var(--shadow-accent);
}
.service-icon ion-icon{
font-size:32px;
color:#fff;
}
.service h3{
margin:0 0 0.75rem 0;
font-size:1.25rem;
color:var(--text);
}
.service p{
margin:0;
color:var(--muted);
line-height:1.6;
}
/* =========================
Sectors
========================= */
.sectors{ padding:2rem 0; }
.sectors-list{ display:flex; flex-wrap:wrap; gap:.75rem; }
.sector{
background:var(--accent);
border-radius:999px;
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
text-decoration:none;
cursor:pointer;
border:0;
min-width:150px;
height:44px;
padding:0 1.25rem;
font-weight:500;
transition:all var(--t);
box-shadow:0 2px 8px rgba(255,122,0,0.3);
}
.sector ion-icon{ font-size:22px; }
.sector:hover{
background:linear-gradient(135deg, var(--accent), #ff9933);
transform:translateY(-2px);
box-shadow:0 4px 16px rgba(255,122,0,0.4);
}
.note{ color:var(--accent); margin-top:.75rem; }
/* =========================
Offer / Proof / Lead
========================= */
.offer,
.social-proof,
.lead{ padding:72px 0; }
.offer-grid,
.proof-grid{
display:grid;
gap:18px;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.offer-card,
.proof-card,
.lead-form{
border-radius:16px;
padding:18px;
background:var(--card-bg);
box-shadow:var(--shadow-md);
color:var(--card-text);
border:1px solid var(--border);
}
.offer-card{ position:relative; overflow:hidden; }
.offer-card.muted{
background:color-mix(in srgb, var(--card-bg) 78%, transparent);
}
.offer-ctas,
.proof-cta{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:14px;
}
.checklist,
.steps{
margin:12px 0 0;
padding-left:18px;
}
.proof-head{
display:flex;
gap:12px;
align-items:center;
margin-bottom:10px;
}
.proof-avatar{
width:40px;
height:40px;
border-radius:12px;
display:grid;
place-items:center;
background:rgba(255,255,255,0.06);
}
:root[data-theme="light"] .proof-avatar{
background:rgba(0,0,0,0.06);
}
.proof-quote{ margin:10px 0; }
.lead-inner{
display:grid;
gap:22px;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
align-items:start;
}
/* CTA inside card: responsive, no overflow */
.offer-card .offer-media{
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
border-radius:14px;
margin-bottom:14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
}
:root[data-theme="light"] .offer-card .offer-media{
background:transparent;
}
.offer-card .offer-media > img{
width:100%;
height:100%;
object-fit:cover;
}
/* Crop inteligente: controla X via token */
.offer-card--primary .offer-media > img{
object-position: var(--cta-pos-x) 50%;
}
/* Figura (sem imagem externa) */
.offer-figure{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
}
.offer-figure-badge{
width:44px;
height:44px;
border-radius:14px;
display:grid;
place-items:center;
background:rgba(255,122,0,0.16);
box-shadow:0 10px 26px rgba(24,24,24,0.12);
}
.offer-figure-badge ion-icon{ font-size:22px; }
.offer-figure-lines{
flex:1;
display:grid;
gap:7px;
}
.offer-figure-lines span{
height:10px;
border-radius:999px;
background:rgba(255,255,255,0.10);
}
:root[data-theme="light"] .offer-figure-lines span{
background:rgba(0,0,0,0.08);
}
/* Lista com bolinhas */
.steps-list{
list-style:none;
padding:0;
margin:12px 0 0;
display:grid;
gap:10px;
}
.steps-list li{
position:relative;
padding-left:18px;
line-height:1.4;
}
.steps-list li::before{
content:"";
width:10px;
height:10px;
border-radius:999px;
position:absolute;
left:0;
top:0.35em;
background:rgba(255,122,0,0.95);
box-shadow:0 0 0 4px rgba(255,122,0,0.18);
}
/* Destaque */
.focus-callout{
margin-top:14px;
padding:12px;
border-radius:14px;
display:flex;
align-items:center;
gap:10px;
background:rgba(255,122,0,0.12);
border:1px solid rgba(255,122,0,0.28);
}
.focus-dot{
width:10px;
height:10px;
border-radius:999px;
background:rgba(255,122,0,0.95);
box-shadow:0 0 0 5px rgba(255,122,0,0.18);
}
/* =========================
Lead form UI
========================= */
.lead-form{
border-radius:18px;
padding:22px;
box-shadow:var(--shadow-lg);
}
.lead-form-ui .hp-field{
position:absolute;
left:-9999px;
width:1px;
height:1px;
opacity:0;
}
.lead-form-ui .form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px 16px;
margin-top:6px;
}
.lead-form-ui .field{
display:flex;
flex-direction:column;
gap:8px;
}
.lead-form-ui .field-full{ grid-column:1 / -1; }
.lead-form-ui label{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
font-size:0.95rem;
color:var(--card-text);
}
.lead-form-ui input,
.lead-form-ui select,
.lead-form-ui textarea{
width:100%;
display:block;
box-sizing:border-box;
border-radius:12px;
border:1px solid var(--input-border);
padding:12px;
font-size:1rem;
outline:none;
background:var(--input-bg);
color:var(--input-text);
}
.lead-form-ui input::placeholder,
.lead-form-ui textarea::placeholder{
color:var(--placeholder);
}
.lead-form-ui textarea{
resize:vertical;
min-height:110px;
}
.lead-form-ui input:focus,
.lead-form-ui select:focus,
.lead-form-ui textarea:focus{
border-color:rgba(255,122,0,0.55);
box-shadow:var(--focus);
}
.lead-form-ui .lead-actions{
margin-top:14px;
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:center;
}
.lead-form-ui .lead-actions .btn{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
}
.lead-form-ui .form-feedback{ margin-top:10px; }
.lead-form-ui .form-meta{ margin-top:10px; }
/* =========================
Contact
========================= */
.contact{ padding:2.5rem 0; }
.contact-inner{
display:grid;
grid-template-columns:1fr 380px;
gap:2.5rem;
align-items:start;
}
.contact-form{
background:rgba(255,255,255,0.03);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--border);
padding:2rem;
border-radius:16px;
}
.contact-form h2{ margin-top:0; }
.contact-form label{
display:flex;
align-items:center;
gap:0.5rem;
margin-top:1.25rem;
margin-bottom:0.5rem;
font-size:0.95rem;
font-weight:500;
color:var(--text);
}
.contact-form label ion-icon{
font-size:20px;
color:var(--accent);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:0.875rem 1rem;
border-radius:10px;
border:1px solid var(--border);
background:rgba(255,255,255,0.04);
color:var(--text);
font-family:inherit;
font-size:1rem;
transition:all var(--t);
}
:root[data-theme="light"] .contact-form input,
:root[data-theme="light"] .contact-form select,
:root[data-theme="light"] .contact-form textarea{
background:rgba(255,255,255,0.05);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
outline:none;
border-color:rgba(255,122,0,0.55);
background:rgba(255,255,255,0.06);
box-shadow:0 0 0 3px rgba(255,122,0,0.12);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
color:rgba(255,255,255,0.45);
}
.contact-form select option{
background:var(--surface-2);
color:var(--text);
}
.contact-form textarea{
resize:vertical;
min-height:120px;
}
.form-actions{
display:flex;
gap:0.75rem;
margin-top:1.5rem;
flex-wrap:wrap;
}
.small{ font-size:0.85rem; }
.contact-info{
background:rgba(255,255,255,0.02);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid var(--border);
padding:2rem;
border-radius:16px;
}
.contact-info h3{
margin-top:0;
margin-bottom:1.5rem;
color:var(--text);
font-size:1.4rem;
}
.contact-item{
display:flex;
align-items:flex-start;
gap:1rem;
margin-bottom:1.5rem;
padding:1rem;
background:rgba(255,255,255,0.02);
border-radius:12px;
transition:all var(--t);
}
.contact-item:hover{
background:rgba(255,255,255,0.05);
transform:translateX(4px);
}
.contact-icon{
width:44px;
height:44px;
min-width:44px;
background:linear-gradient(135deg, var(--accent), #ff9933);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 12px rgba(255,122,0,0.25);
}
.contact-icon ion-icon{
font-size:24px;
color:#fff;
}
.contact-text{
display:flex;
flex-direction:column;
gap:0.25rem;
}
.contact-label{
font-size:0.8rem;
text-transform:uppercase;
letter-spacing:0.5px;
color:var(--accent);
font-weight:600;
}
.contact-text a{
color:var(--text);
text-decoration:none;
font-weight:500;
transition:color var(--t);
}
.contact-text a:hover{ color:var(--accent); }
.contact-text span:not(.contact-label){
color:var(--muted);
font-size:0.95rem;
}
#formFeedback{
margin-top:1rem;
padding:0.875rem 1rem;
border-radius:8px;
font-weight:500;
}
/* =========================
Footer
========================= */
.site-footer{
background:var(--footer-bg);
color:var(--footer-text);
border-top:1px solid var(--border);
padding:1rem 0;
margin-top:2rem;
}
.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
}
.footer-nav{
list-style:none;
display:flex;
gap:.75rem;
margin:0;
padding:0;
}
.footer-nav a{
color:var(--footer-text);
text-decoration:none;
}
.footer-nav a:hover{
color:var(--accent);
}
/* =========================
Floating WhatsApp
========================= */
.wa-float{
position:fixed;
right:16px;
bottom:16px;
z-index:50;
display:inline-flex;
gap:10px;
align-items:center;
padding:12px 14px;
border-radius:999px;
box-shadow:var(--shadow-lg);
text-decoration:none;
background:var(--wa-bg);
color:var(--wa-text);
border:1px solid var(--border);
}
.wa-float span{ font-weight:600; }
/* =========================
Animations
========================= */
@keyframes slideDown{
from{ opacity:0; transform:translateY(-20px); }
to{ opacity:1; transform:translateY(0); }
}
/* =========================
Responsive + Crop Inteligente
========================= */
@media (max-width:900px){
.hero-inner{ grid-template-columns:1fr; }
.hero-visual{ order:-1; }
.grid{ grid-template-columns:1fr; }
.service{ padding:1.5rem; }
.service-icon{ width:48px; height:48px; }
.service-icon ion-icon{ font-size:28px; }
.contact-inner{ grid-template-columns:1fr; }
.contact-form,
.contact-info{ padding:1.5rem; }
.footer-inner{ flex-direction:column; gap:.5rem; }
.sectors-list{ flex-direction:column; gap:.5rem; }
.sector{ min-width:100%; height:48px; }
.site-header .container{ height:64px; padding:0 1rem; }
.logo-text{ font-size:1rem; }
.site-logo{ height:36px; }
.nav-toggle{ display:inline-flex; }
/* Tablet crop */
:root{ --cta-pos-x:65%; }
}
@media (max-width:768px){
#mainNav{ display:none; }
.mobile-menu{ display:block; }
.cta-whatsapp{
padding:0.5rem 1rem;
height:40px;
font-size:0.9rem;
}
}
@media (max-width:720px){
.lead-form-ui .form-grid{ grid-template-columns:1fr; }
.lead-form-ui .lead-actions .btn{ width:100%; }
/* Mobile crop */
:root{ --cta-pos-x:82%; }
}
/* =========================
FIX OVERFLOW (Grid) + CTA crop + Mobile zoom
Cole no FINAL do styles.css
========================= */
/* (A) Corrige overflow clássico em Grid/Flex */
.offer-grid > .offer-card,
.proof-grid > .proof-card,
.lead-inner > .lead-form{
min-width: 0; /* <-- ESSENCIAL */
}
/* (B) Trava qualquer mídia dentro de card */
.offer-card .offer-media{
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: 14px;
margin-bottom: 14px;
/* use aspect ratio (melhor que height fixa) */
aspect-ratio: 16 / 9;
}
/* (C) Imagem sempre dentro do container */
.offer-card .offer-media > img{
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
/* desktop default */
object-position: 55% 50%;
transform: none;
}
/* (D) Tablet crop */
@media (max-width: 900px){
.offer-card .offer-media > img{
object-position: 65% 50%;
}
}
/* (E) Mobile crop + zoom leve (só na imagem) */
@media (max-width: 720px){
.offer-card .offer-media > img{
object-position: 82% 50%;
transform: scale(1.03);
transform-origin: 82% 50%;
}
}
/* =========================
FIX: CTA media + LeadForm override forte
Cole no FINAL do styles.css
========================= */
/* CTA container: nunca estoura e fica bonito mesmo se a imagem falhar */
.offer-card,
.offer-grid > .offer-card{
min-width: 0;
}
.offer-card .offer-media{
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: 14px;
margin-bottom: 14px;
/* mantém o card consistente */
aspect-ratio: 16 / 9;
/* fallback visual quando a imagem não carrega */
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
display: grid;
place-items: center;
}
:root[data-theme="light"] .offer-card .offer-media{
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.offer-card .offer-media > img{
width: 100%;
height: 100%;
max-width: 100%;
display: block;
object-fit: cover;
/* crop inteligente desktop */
object-position: 55% 50%;
transform: none;
}
/* Tablet crop */
@media (max-width: 900px){
.offer-card .offer-media > img{
object-position: 65% 50%;
}
}
/* Mobile crop + zoom leve (só na imagem) */
@media (max-width: 720px){
.offer-card .offer-media > img{
object-position: 82% 50%;
transform: scale(1.03);
transform-origin: 82% 50%;
}
}
/* =========================
Lead form: override forte (volta a ficar alinhado)
========================= */
#leadForm.lead-form-ui{
width: 100%;
}
#leadForm.lead-form-ui .form-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px 16px !important;
}
#leadForm.lead-form-ui .field{
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#leadForm.lead-form-ui .field-full{
grid-column: 1 / -1 !important;
}
#leadForm.lead-form-ui input,
#leadForm.lead-form-ui select,
#leadForm.lead-form-ui textarea{
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border-radius: 12px !important;
padding: 12px !important;
font-size: 1rem !important;
border: 1px solid rgba(255,255,255,0.12) !important;
background: rgba(255,255,255,0.04) !important;
color: var(--text) !important;
}
:root[data-theme="light"] #leadForm.lead-form-ui input,
:root[data-theme="light"] #leadForm.lead-form-ui select,
:root[data-theme="light"] #leadForm.lead-form-ui textarea{
border: 1px solid rgba(0,0,0,0.14) !important;
background: #fff !important;
color: #000 !important;
}
#leadForm.lead-form-ui input:focus,
#leadForm.lead-form-ui select:focus,
#leadForm.lead-form-ui textarea:focus{
border-color: rgba(255,122,0,0.65) !important;
box-shadow: 0 0 0 4px rgba(255,122,0,0.22) !important;
}
@media (max-width: 720px){
#leadForm.lead-form-ui .form-grid{
grid-template-columns: 1fr !important;
}
#leadForm.lead-form-ui .lead-actions .btn{
width: 100% !important;
}
}
/* =========================
FIX: LeadForm