/* ============================================================
   Agency page template (a.html) — same type system as quotebindai.com,
   colors come from each agency (--primary / --accent set by agency-page.js)
   ============================================================ */
:root{
  --primary:#1F3A5F;
  --on-primary:#FFFFFF;
  --accent:#C89A46;
  --paper:#F6F6F2;
  --surface:#FFFFFF;
  --surface-2:#EDEEE8;
  --ink:#14181A;
  --muted:#5B6B66;
  --border:rgba(20,24,26,0.12);
  --font-display:"Newsreader", Georgia, "Times New Roman", serif;
  --font-body:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
[hidden]{ display:none !important; }
.ag-container{ max-width:1100px; margin:0 auto; padding:0 24px; }
.ag-narrow{ max-width:760px; }

.ag-state{ min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; color:var(--muted); }
.ag-state h1{ font-family:var(--font-display); color:var(--ink); font-size:30px; }
.ag-spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--surface-2); border-top-color:var(--primary); animation:ag-spin .9s linear infinite; }
@keyframes ag-spin{ to{ transform:rotate(360deg); } }

/* Nav */
.ag-nav{ position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border); }
.ag-nav-inner{ display:flex; align-items:center; gap:24px; min-height:68px; }
.ag-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--primary); min-width:0; }
.ag-brand img{ height:42px; width:auto; max-width:180px; object-fit:contain; }
.ag-brand span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-nav-links{ display:flex; gap:22px; margin-left:auto; font-size:14.5px; }
.ag-nav-links a{ text-decoration:none; color:var(--muted); }
.ag-nav-links a:hover{ color:var(--ink); }
.ag-nav-cta{ flex-shrink:0; }

/* Buttons */
.ag-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:3px; font-family:var(--font-body); font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .15s ease, filter .15s ease; }
.ag-btn:hover{ filter:brightness(1.08); }
.ag-btn:active{ transform:translateY(1px); }
.ag-btn-primary{ background:var(--primary); color:var(--on-primary); }
.ag-btn-ghost{ background:transparent; color:var(--primary); border-color:var(--primary); }
.ag-btn[disabled]{ opacity:.6; cursor:default; }

/* Hero */
.ag-hero{ background:var(--primary); color:var(--on-primary); padding:84px 0 76px; position:relative; overflow:hidden; }
.ag-hero::after{ content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:var(--accent); opacity:.16; }
.ag-hero .ag-container{ position:relative; z-index:1; }
.ag-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(34px, 5vw, 52px); line-height:1.1; max-width:760px; margin:14px 0 18px; }
.ag-lede{ font-size:18px; opacity:.88; max-width:620px; }
.ag-hero .ag-eyebrow{ color:var(--on-primary); opacity:.8; }
.ag-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.ag-hero .ag-btn-primary{ background:var(--accent); color:#14181A; }
.ag-hero .ag-btn-ghost{ color:var(--on-primary); border-color:currentColor; }

/* Sections */
.ag-section{ padding:76px 0; }
.ag-section-alt{ background:var(--surface); }
.ag-section h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px, 3.4vw, 36px); line-height:1.2; margin:10px 0 28px; }
.ag-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); filter:brightness(.8); }
.ag-muted{ color:var(--muted); }
.ag-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; }
.ag-cards li{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:3px; padding:22px 20px; font-weight:600; font-size:17px; }
.ag-carriers{ margin-top:44px; }
.ag-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.ag-chips li{ background:var(--surface); border:1px solid var(--border); border-radius:40px; padding:8px 16px; font-size:14.5px; }
.ag-about{ font-size:17.5px; line-height:1.7; white-space:pre-line; }

/* Quote form */
.ag-quote-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; }
.ag-quote-grid h2{ margin-bottom:16px; }
.ag-call-box{ margin-top:32px; padding:22px; border:1px dashed var(--border); border-radius:4px; background:var(--surface); }
.ag-call-box h3{ font-size:17px; margin-bottom:6px; }
.ag-call-box .ag-btn{ margin-top:14px; }
.ag-form{ background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:28px; }
.ag-field{ margin-bottom:16px; flex:1; min-width:0; }
.ag-field-row{ display:flex; gap:14px; }
.ag-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.ag-optional{ font-weight:400; color:var(--muted); }
.ag-field input, .ag-field select, .ag-field textarea{ width:100%; padding:11px 12px; border:1px solid rgba(20,24,26,0.22); border-radius:3px; font:inherit; font-size:15px; background:#fff; color:var(--ink); }
.ag-field textarea{ resize:vertical; }
.ag-field input:focus, .ag-field select:focus, .ag-field textarea:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.ag-hint{ font-size:12.5px; color:var(--muted); margin:-4px 0 14px; }
.ag-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:16px; cursor:pointer; }
.ag-consent input{ margin-top:3px; accent-color:var(--primary); flex-shrink:0; }
.ag-submit{ width:100%; }
.ag-form-msg{ font-size:14px; margin-top:14px; }
.ag-form-msg.ok{ color:#2F6E52; }
.ag-form-msg.error{ color:#A4432A; }

/* Contact */
.ag-contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; }
.ag-contact-list li, .ag-hours li{ padding:10px 0; border-top:1px solid var(--border); font-size:15.5px; }
.ag-contact-list li:first-child, .ag-hours li:first-child{ border-top:none; }
.ag-contact-list .k{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.ag-contact-list a{ color:var(--primary); font-weight:600; }
.ag-hours{ margin-top:10px; }

/* Footer */
.ag-footer{ background:#12171B; color:#C9CFCB; padding:34px 0 40px; font-size:14px; }
.ag-footer p + p{ margin-top:8px; }
.ag-footer-small{ font-size:12.5px; color:#8E9994; }
.ag-footer a{ color:#C9CFCB; }

/* Modals */
.ag-modal{ position:fixed; inset:0; z-index:60; background:rgba(10,15,20,0.55); display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; overflow-y:auto; }
.ag-modal-card{ position:relative; background:var(--surface); border-radius:4px; width:100%; max-width:520px; padding:32px 28px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.ag-modal-card h2{ font-family:var(--font-display); font-size:26px; margin-bottom:10px; }
.ag-modal-card .ag-muted{ margin-bottom:18px; }
.ag-modal-close{ position:absolute; top:10px; right:14px; background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:var(--muted); }
.ag-privacy{ max-width:720px; }
.ag-privacy h3{ font-size:16px; margin:20px 0 6px; }
.ag-privacy p{ font-size:14.5px; color:#2B3230; line-height:1.65; }

/* Chat */
.ag-chat{ position:fixed; right:24px; bottom:24px; z-index:50; }
.ag-chat-toggle{ width:58px; height:58px; border-radius:50%; border:none; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.25); margin-left:auto; }
.ag-chat-panel{ position:absolute; right:0; bottom:72px; width:360px; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 18px 50px rgba(0,0,0,.22); overflow:hidden; display:flex; flex-direction:column; }
.ag-chat-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--primary); color:var(--on-primary); }
.ag-chat-title{ font-weight:600; font-size:14.5px; }
.ag-chat-sub{ font-size:11.5px; opacity:.8; font-family:var(--font-mono); }
.ag-chat-close{ background:none; border:none; color:inherit; font-size:24px; cursor:pointer; line-height:1; }
.ag-chat-body{ height:340px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--paper); }
.ag-msg{ max-width:85%; padding:10px 13px; border-radius:12px; font-size:14px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; }
.ag-msg-bot{ background:var(--surface); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:3px; }
.ag-msg-user{ background:var(--primary); color:var(--on-primary); align-self:flex-end; border-bottom-right-radius:3px; }
.ag-chips-row{ display:flex; flex-wrap:wrap; gap:8px; }
.ag-chips-row button{ background:var(--surface); border:1px solid var(--primary); color:var(--primary); border-radius:20px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.ag-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px; }
.ag-typing span{ width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.5; animation:ag-dot 1s infinite; }
.ag-typing span:nth-child(2){ animation-delay:.15s; } .ag-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ag-dot{ 50%{ opacity:1; transform:translateY(-3px); } }
.ag-chat-form{ display:flex; border-top:1px solid var(--border); }
.ag-chat-form input{ flex:1; border:none; padding:13px 14px; font:inherit; font-size:14px; min-width:0; }
.ag-chat-form input:focus{ outline:none; }
.ag-chat-send{ border:none; background:none; color:var(--primary); font-size:18px; padding:0 16px; cursor:pointer; }
.ag-chat-note{ font-size:11px; color:var(--muted); padding:6px 14px 10px; line-height:1.4; }

/* "Just a link" layout: shorter page */
body.opcion-enlace .ag-hero{ padding:64px 0 56px; }

/* Embedded in another website (qb-widget.js iframe): only the chat, full size */
body.ag-embed{ background:transparent; }
body.ag-embed .ag-nav, body.ag-embed main, body.ag-embed .ag-footer, body.ag-embed .ag-chat-toggle{ display:none !important; }
body.ag-embed .ag-chat{ position:static; }
body.ag-embed .ag-chat-panel{ position:fixed; inset:0; width:auto; border:none; border-radius:0; box-shadow:none; }
body.ag-embed .ag-chat-body{ height:auto; flex:1; }
body.ag-embed .ag-modal{ padding:12px; }
.ag-embed-back{ display:none; background:none; border:none; color:var(--primary); font:inherit; font-weight:600; font-size:14px; padding:0; margin-bottom:16px; cursor:pointer; }
body.ag-embed.ag-show-quote main{ display:block !important; position:fixed; inset:0; z-index:40; overflow-y:auto; background:var(--paper); }
body.ag-embed.ag-show-quote main > section:not(#quote){ display:none !important; }
body.ag-embed.ag-show-quote .ag-embed-back{ display:inline-block; }
body.ag-embed #quote{ padding:24px 0; }
body.ag-embed .ag-quote-grid{ grid-template-columns:1fr; gap:18px; }
body.ag-embed .ag-quote-grid h2{ font-size:24px; margin:6px 0 8px; }
body.ag-embed .ag-call-box{ margin-top:14px; padding:14px; }
body.ag-embed .ag-field-row{ flex-direction:column; gap:0; }

@media (max-width: 820px){
  .ag-nav-links{ display:none; }
  .ag-nav-inner{ justify-content:space-between; }
  .ag-quote-grid, .ag-contact-grid{ grid-template-columns:1fr; gap:28px; }
  .ag-field-row{ flex-direction:column; gap:0; }
  .ag-hero{ padding:60px 0 54px; }
  .ag-section{ padding:56px 0; }
  .ag-chat{ right:16px; bottom:16px; }
  .ag-chat-panel{ width:calc(100vw - 32px); }
  .ag-chat-body{ height:300px; }
}
@media (max-width: 420px){
  .ag-container{ padding:0 16px; }
  .ag-nav-cta{ padding:10px 14px; font-size:14px; }
  .ag-brand{ font-size:18px; }
  .ag-form{ padding:22px 18px; }
}

/* Demo agency (QuoteBind Demo Agency, Module 33 "demo": true) */
.ag-demo-banner{ background:#14181A; color:#FFFFFF; font-size:14px; line-height:1.5; padding:10px 0; }
.ag-demo-banner a{ color:#FFFFFF; font-weight:600; }
.ag-demo-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.ag-demo-card{ background:var(--paper); border:1px solid var(--border); border-top:4px solid var(--primary); border-radius:3px; padding:24px 22px; }
.ag-demo-card h3{ font-size:18px; margin-bottom:8px; }
.ag-demo-card p{ color:var(--muted); font-size:15px; margin-bottom:10px; }
.ag-demo-card .ag-btn{ margin:4px 0 10px; }
.ag-demo-number{ display:inline-block; font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--primary); text-decoration:none; margin-bottom:10px; }
.ag-demo-list{ list-style:disc; padding-left:18px; font-size:15px; margin-bottom:10px; }
.ag-demo-list li{ margin-bottom:4px; }
.ag-demo-card p.ag-demo-note{ font-size:13px; margin:0; }