/* ===================================================================
   Atlântico Automóveis — FICTIONAL demo dealership by Postual
   Distinct automotive aesthetic (ocean blue / near-black), Inter.
   =================================================================== */
:root {
    --d-bg: #0b0e13;
    --d-surface: #141922;
    --d-surface-2: #1b212c;
    --d-line: #262e3a;
    --d-text: #eef1f6;
    --d-muted: #98a3b3;
    --d-accent: #2f9fe0;
    --d-accent-2: #1f6fb2;
    --d-gold: #e6b566;
    --d-radius: 14px;
}
* , *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Inter',-apple-system,sans-serif;
    background:var(--d-bg); color:var(--d-text);
    -webkit-font-smoothing:antialiased; line-height:1.5;
    padding-top:0;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ===== DEMO RIBBON (permanent, every page) ===== */
.demo-ribbon { display:none; }
.demo-ribbon strong { font-weight:800; }
.demo-ribbon a { text-decoration:underline; }

/* ===== NAV ===== */
.d-nav {
    position:sticky; top:0; z-index:150;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; background:rgba(11,14,19,0.86); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--d-line);
}
.d-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; }
.d-logo .mark { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--d-accent),var(--d-accent-2)); display:flex; align-items:center; justify-content:center; }
.d-logo .mark svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; }
.d-logo span { color:var(--d-accent); }
.d-nav-links { display:flex; gap:26px; align-items:center; }
.d-nav-links a { font-size:0.85rem; color:var(--d-muted); font-weight:500; }
.d-nav-links a:hover, .d-nav-links a.active { color:var(--d-text); }
.d-nav-links .d-phone { color:var(--d-accent); font-weight:700; }
@media(max-width:760px){
    .d-nav { flex-wrap:wrap; padding:12px 18px; row-gap:10px; }
    .d-nav-links { width:100%; order:2; justify-content:space-between; gap:6px; }
    .d-nav-links a { font-size:0.8rem; }
}

/* ===== BUTTONS ===== */
.d-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:50px; font-size:0.88rem; font-weight:700; cursor:pointer; border:none; transition:all .25s; }
.d-btn-primary { background:linear-gradient(135deg,var(--d-accent),var(--d-accent-2)); color:#fff; }
.d-btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.d-btn-ghost { background:transparent; border:1px solid var(--d-line); color:var(--d-text); }
.d-btn-ghost:hover { border-color:var(--d-accent); }
.d-btn-wa { background:#25D366; color:#06331b; }
.d-btn-wa:hover { filter:brightness(1.05); }

/* ===== LAYOUT ===== */
.d-wrap { max-width:1140px; margin:0 auto; padding:0 28px; }
.d-section { padding:72px 0; }
.d-eyebrow { font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--d-accent); margin-bottom:12px; }
.d-h2 { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:10px; }
.d-sub { color:var(--d-muted); max-width:560px; }

/* ===== HERO ===== */
.d-hero { position:relative; padding:88px 0 72px; background:radial-gradient(120% 120% at 80% 0%, rgba(47,159,224,0.18), transparent 55%), linear-gradient(180deg,#0d121a,#0b0e13); border-bottom:1px solid var(--d-line); }
.d-hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.d-hero h1 { font-size:clamp(2rem,4.4vw,3.2rem); font-weight:900; line-height:1.05; letter-spacing:-0.03em; margin-bottom:18px; }
.d-hero h1 em { font-style:normal; color:var(--d-accent); }
.d-hero p { color:var(--d-muted); font-size:1.05rem; max-width:480px; margin-bottom:26px; }
.d-hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.d-hero-badges { display:flex; gap:22px; margin-top:28px; flex-wrap:wrap; }
.d-hero-badges div { font-size:0.8rem; color:var(--d-muted); }
.d-hero-badges strong { display:block; font-size:1.25rem; color:var(--d-text); font-weight:800; }
@media(max-width:860px){ .d-hero-grid{ grid-template-columns:1fr; } }

/* ===== CAR PHOTO (self-contained placeholder) ===== */
.car-photo { position:relative; aspect-ratio:16/10; border-radius:var(--d-radius); overflow:hidden;
    background:linear-gradient(135deg,#1b2430,#10151d); display:flex; align-items:center; justify-content:center; border:1px solid var(--d-line); }
.car-photo.big { aspect-ratio:16/10; }
.car-photo svg { width:60%; height:60%; opacity:0.22; stroke:var(--d-accent); fill:none; stroke-width:1; }
/* Real photo sits on top of the SVG fallback: if the image fails to load, the SVG shows through. */
.car-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.car-photo .ph-tag { display:none; }
.car-photo .price-tag { position:absolute; z-index:2; bottom:12px; right:12px; background:var(--d-accent); color:#04121d; font-weight:800; font-size:1rem; padding:6px 14px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,0.35); }

/* ===== INVENTORY GRID ===== */
.inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.car-card { background:var(--d-surface); border:1px solid var(--d-line); border-radius:var(--d-radius); overflow:hidden; transition:all .25s; }
.car-card:hover { transform:translateY(-4px); border-color:var(--d-accent); }
.car-card .car-body { padding:18px 18px 20px; }
.car-card h3 { font-size:1.02rem; font-weight:700; margin-bottom:4px; }
.car-card .car-price { font-size:1.35rem; font-weight:900; color:var(--d-accent); margin:8px 0 12px; letter-spacing:-0.02em; }
.car-specs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.car-specs span { font-size:0.72rem; color:var(--d-muted); background:var(--d-surface-2); border:1px solid var(--d-line); padding:4px 10px; border-radius:20px; }
.car-card .d-btn { width:100%; justify-content:center; }

/* ===== FILTER BAR ===== */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.filter-bar button { font-size:0.8rem; font-weight:600; color:var(--d-muted); background:var(--d-surface); border:1px solid var(--d-line); padding:8px 16px; border-radius:50px; cursor:pointer; }
.filter-bar button.active { background:var(--d-accent); color:#04121d; border-color:var(--d-accent); }

/* ===== VEHICLE PAGE ===== */
.veh-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; }
.veh-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.veh-thumbs .car-photo { aspect-ratio:4/3; }
.veh-thumbs .car-photo svg { width:70%; height:70%; }
.veh-info h1 { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
.veh-price { font-size:2.2rem; font-weight:900; color:var(--d-accent); letter-spacing:-0.03em; margin:6px 0 20px; }
.spec-table { width:100%; border-collapse:collapse; margin-bottom:22px; }
.spec-table td { padding:11px 0; border-bottom:1px solid var(--d-line); font-size:0.88rem; }
.spec-table td:first-child { color:var(--d-muted); }
.spec-table td:last-child { text-align:right; font-weight:600; }
.veh-cta { display:flex; flex-direction:column; gap:10px; }
.veh-cta .d-btn { width:100%; justify-content:center; }
@media(max-width:860px){ .veh-grid{ grid-template-columns:1fr; } }

/* ===== FORMS ===== */
.d-form { display:flex; flex-direction:column; gap:16px; max-width:560px; }
.d-form.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:640px; }
.d-form .fg { display:flex; flex-direction:column; }
.d-form .fg.full { grid-column:1 / -1; }
.d-form label { font-size:0.82rem; font-weight:600; margin-bottom:7px; color:var(--d-text); }
.d-form input, .d-form select, .d-form textarea { padding:13px 16px; border-radius:10px; border:1px solid var(--d-line); background:var(--d-surface); color:var(--d-text); font-family:inherit; font-size:0.88rem; }
.d-form input:focus, .d-form select:focus, .d-form textarea:focus { outline:none; border-color:var(--d-accent); }
.d-form textarea { min-height:110px; resize:vertical; }
.d-consent { display:flex; gap:9px; align-items:flex-start; font-size:0.76rem; color:var(--d-muted); line-height:1.5; }
.d-consent input { width:16px; height:16px; margin-top:2px; accent-color:var(--d-accent); flex-shrink:0; }
.d-note { background:rgba(47,159,224,0.09); border:1px solid rgba(47,159,224,0.25); border-radius:10px; padding:14px 16px; font-size:0.82rem; color:var(--d-muted); }

/* ===== TRUST STRIP ===== */
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-strip .ts { background:var(--d-surface); border:1px solid var(--d-line); border-radius:12px; padding:22px 18px; text-align:center; }
.trust-strip .ts svg { width:26px; height:26px; stroke:var(--d-accent); fill:none; stroke-width:1.7; margin-bottom:10px; }
.trust-strip .ts h4 { font-size:0.9rem; font-weight:700; margin-bottom:4px; }
.trust-strip .ts p { font-size:0.76rem; color:var(--d-muted); }
@media(max-width:760px){ .trust-strip{ grid-template-columns:1fr 1fr; } .d-form.two{ grid-template-columns:1fr; } }

/* ===== FOOTER ===== */
.d-footer { border-top:1px solid var(--d-line); padding:40px 0; margin-top:20px; }
.d-footer .d-wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.d-footer p { font-size:0.78rem; color:var(--d-muted); }
.d-footer .made { font-size:0.76rem; }
.d-footer .made a { color:var(--d-accent); font-weight:600; }

/* ===== WHATSAPP FLOAT ===== */
.d-wa-float { position:fixed; bottom:24px; right:24px; width:54px; height:54px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(37,211,102,0.35); z-index:160; }
.d-wa-float svg { width:28px; height:28px; fill:#fff; }