/* Two views of the same HG site. Brand colors and supplied logos stay intact. */
:root {
  --view-background: #fff;
  --view-text: #172c4f;
  --view-muted: #626263;
  --view-link: #294586;
  --view-border: #dfe5ed;
  color-scheme: light;
}
:root[data-theme="blue"] {
  --view-background: #032575;
  --view-text: #fff;
  --view-muted: #d5e1f3;
  --view-link: #eacb36;
  --view-border: rgba(137,167,209,.35);
  color-scheme: dark;
}
html { scroll-padding-top: var(--nav-offset, 116px); }
body { background: var(--view-background); color: var(--view-text); }
.header-inner { min-height: 100px; gap: 25px; }
.site-header .brand img { width: 144px; border-radius: 7px; }
.desktop-nav { gap: 23px; }
.desktop-nav a { position: relative; text-decoration: none; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  height: 2px;
  border-radius: 2px;
  left: 0;
  right: 0;
  bottom: 5px;
  background: var(--view-link);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="location"]::after { transform: scaleX(1); }
.desktop-nav a[aria-current="location"] { color: var(--view-link); }
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 44px;
  flex-shrink: 0;
  padding: 10px;
  color: var(--view-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
}
.theme-toggle:hover { color: var(--view-text); border-color: var(--view-border); }
.theme-toggle .icon { width: 19px; height: 19px; }
.theme-sun, :root[data-theme="blue"] .theme-moon { display: none; }
:root[data-theme="blue"] .theme-sun { display: block; }
.menu-toggle { min-width: 42px; }
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 8px 32px 20px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border-bottom: 1px solid var(--view-border);
  box-shadow: 0 22px 35px -25px rgba(3,37,117,.4);
}
.mobile-nav a { padding: 13px 12px; min-height: 48px; font-size: 14px; }
.mobile-nav a:hover, .mobile-nav a[aria-current="location"] {
  background: var(--soft);
  color: var(--view-link);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-toggle span { transition: transform .2s; }
.section-heading>p, .about-points p, details p, .contact-card>p { font-size: 14px; }
.service-card p { font-size: 14px; }
.service-link { font-size: 12px; }
summary { font-size: 14px; }
.contact-details>a:not(.phone-link), .contact-details p { font-size: 13px; }
label { font-size: 12px; }
.footer-top>p, .footer-social, .footer-bottom { font-size: 11px; }
.hero-proof { font-size: 11px; }
.insurer-grid { border-radius: 9px; overflow: hidden; }
.insurer-grid li { border-color: #dfe5ed; }

/* Blue view: the two blues from the supplied palette define the surfaces. */
:root[data-theme="blue"] .site-header,
:root[data-theme="blue"] .hero,
:root[data-theme="blue"] .mobile-nav,
:root[data-theme="blue"] .site-footer { background: var(--navy); }
:root[data-theme="blue"] .site-header { border-color: var(--view-border); }
:root[data-theme="blue"] .hero { border-bottom: 1px solid var(--view-border); }
:root[data-theme="blue"] h1,
:root[data-theme="blue"] h2,
:root[data-theme="blue"] .service-card h3,
:root[data-theme="blue"] .contact-card h3 { color: #fff; }
:root[data-theme="blue"] h1 span { color: var(--yellow); }
:root[data-theme="blue"] h1 span::after { background: var(--gold); opacity: .75; }
:root[data-theme="blue"] .eyebrow { color: var(--sky); }
:root[data-theme="blue"] .hero-description,
:root[data-theme="blue"] .hero-proof,
:root[data-theme="blue"] .hero-bottom,
:root[data-theme="blue"] .section-heading>p,
:root[data-theme="blue"] .service-card p,
:root[data-theme="blue"] .service-help,
:root[data-theme="blue"] .about-intro>p:not(.eyebrow),
:root[data-theme="blue"] .about-points p,
:root[data-theme="blue"] details p,
:root[data-theme="blue"] .fine-print,
:root[data-theme="blue"] .contact-card>p,
:root[data-theme="blue"] label span,
:root[data-theme="blue"] .footer-top>p,
:root[data-theme="blue"] .footer-bottom { color: var(--view-muted); }
:root[data-theme="blue"] .text-link,
:root[data-theme="blue"] .hero-bottom a,
:root[data-theme="blue"] .service-link,
:root[data-theme="blue"] .service-help a,
:root[data-theme="blue"] .footer-bottom a { color: var(--yellow); }
:root[data-theme="blue"] .desktop-nav a:hover,
:root[data-theme="blue"] .footer-social a:hover { color: var(--yellow); }
:root[data-theme="blue"] .hero-proof .icon,
:root[data-theme="blue"] .service-icon,
:root[data-theme="blue"] .about-points article>span,
:root[data-theme="blue"] summary span { color: var(--yellow); }
:root[data-theme="blue"] .button-blue { background: var(--yellow); color: var(--navy); }
:root[data-theme="blue"] .button-blue:hover { background: var(--gold); }
:root[data-theme="blue"] .quote-card {
  background: var(--blue);
  border: 1px solid var(--view-border);
  box-shadow: 0 28px 60px -30px rgba(0,0,0,.45);
}
:root[data-theme="blue"] .quote-label,
:root[data-theme="blue"] .quote-steps li>span,
:root[data-theme="blue"] .quote-caption { color: #e2eaf7; }
:root[data-theme="blue"] .quote-icon,
:root[data-theme="blue"] .vehicle-tags span { border-color: #89a7d1; }
:root[data-theme="blue"] .services,
:root[data-theme="blue"] .faq { background: var(--blue); }
:root[data-theme="blue"] .services .eyebrow,
:root[data-theme="blue"] .faq .eyebrow { color: #d5e1f3; }
:root[data-theme="blue"] .service-card { background: var(--navy); border-color: var(--view-border); }
:root[data-theme="blue"] .service-featured { border-top-color: var(--gold); }
:root[data-theme="blue"] .service-card:hover { border-color: var(--sky); }
:root[data-theme="blue"] .hero-proof,
:root[data-theme="blue"] .hero-bottom,
:root[data-theme="blue"] .about-points article,
:root[data-theme="blue"] .faq,
:root[data-theme="blue"] .faq-list details,
:root[data-theme="blue"] .footer-bottom,
:root[data-theme="blue"] .footer-social,
:root[data-theme="blue"] .mobile-nav a { border-color: var(--view-border); }
:root[data-theme="blue"] .insurer-grid { border: 1px solid #dfe5ed; }
:root[data-theme="blue"] .contact-card { background: var(--blue); border: 1px solid var(--view-border); color: #fff; }
:root[data-theme="blue"] select,
:root[data-theme="blue"] textarea { background: var(--navy); color: #fff; border-color: var(--sky); }
:root[data-theme="blue"] textarea::placeholder { color: #c4d2eb; }
:root[data-theme="blue"] .menu-toggle { border-color: var(--view-border); }
:root[data-theme="blue"] .menu-toggle span { background: #fff; }
:root[data-theme="blue"] .mobile-nav a:hover,
:root[data-theme="blue"] .mobile-nav a[aria-current="location"] { background: var(--blue); }
:root[data-theme="blue"] .site-footer { border-top: 1px solid var(--view-border); }
:root[data-theme="blue"] .footer-brand img { border-radius: 7px; }

/* Only the HG frame changes view; SeguroCotizas keeps its own presentation. */
:root[data-theme="blue"] dialog { background: var(--navy); color: #fff; }
:root[data-theme="blue"] .quote-meta { background: var(--blue); border-color: var(--view-border); }
:root[data-theme="blue"] .close-quote { background: var(--blue); color: #fff; border-color: var(--view-border); }
:root[data-theme="blue"] .quote-meta>a,
:root[data-theme="blue"] .quote-footer>a { color: var(--yellow); }
:root[data-theme="blue"] .quote-footer { border-color: var(--view-border); }

@media (max-width:1100px) {
  .header-inner { gap: 18px; }
  .desktop-nav { gap: 17px; }
  .header-actions { gap: 8px; }
  .site-header .brand img { width: 137px; }
}
@media (max-width:850px) {
  .header-inner { min-height: 94px; }
  .hero-proof { font-size: 10px; }
  .section-heading>p, .about-points p, details p, .service-card p, .contact-card>p { font-size: 13px; }
  .footer-top>p { font-size: 11px; }
}
@media (max-width:600px) {
  .header-inner { min-height: 86px; gap: 10px; }
  .site-header .brand img { width: 121px; }
  .header-actions { gap: 6px; }
  .header-actions .button { min-height: 44px; padding: 12px 13px; }
  .header-actions .button .icon { display: none; }
  .theme-toggle { width: 38px; height: 44px; padding: 8px; }
  .theme-toggle .icon { width: 18px; height: 18px; }
  .menu-toggle { width: 42px; height: 44px; padding: 11px; }
  .mobile-nav { padding: 6px 20px 18px; max-height: calc(100dvh - 86px); }
  .hero-description { font-size: 15px; }
  .hero-proof { font-size: 10px; }
  .service-card p { font-size: 12px; }
  .service-link { font-size: 11px; }
  summary { font-size: 13px; }
  .footer-social { gap: 10px; }
  .footer-bottom { font-size: 10px; }
  .quote-footer { font-size: 10px; }
}
@media (max-width:360px) {
  .site-header .brand img { width: 104px; }
  .header-inner { gap: 7px; min-height: 78px; }
  .header-actions { gap: 3px; }
  .header-actions .button { padding: 12px 10px; font-size: 10px; }
  .theme-toggle { width: 34px; }
  .mobile-nav { max-height: calc(100dvh - 78px); }
  .quote-footer { font-size: 9px; }
}
@media (max-width:600px) {
  .insurer-grid img[alt="Seguros Atlas"] { transform: scale(1.65); }
}