/* Paleta resuelta en config/brands.php. Cargar después de Bootstrap y del tema. */
:root {
  --primary: var(--brand-primary);
  --success: var(--brand-primary);
  --danger: var(--brand-danger);
  --iq-primary: var(--brand-primary);
  --iq-primary-dark: var(--brand-primary-hover);
  --iq-light-primary: var(--brand-soft);
}
body { color: var(--brand-text); background: var(--brand-surface); }
a, .btn-link, .color-title { color: var(--brand-link); }
a:hover, .btn-link:hover { color: var(--brand-primary-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
::selection { color: var(--brand-on-primary); background: var(--brand-primary); }
.contact_nav_container { background: var(--brand-header); }
.contact_nav_container .contact_nav a { color: var(--brand-on-header); }
.contact_nav_container .contact_nav a:hover { text-decoration: underline; }
.overlay { background: rgba(var(--brand-header-rgb), .97); }
.overlay a { color: var(--brand-on-header); }
.overlay a:hover, .overlay a:focus { color: var(--brand-accent-text); background: var(--brand-accent); }
.overlay .menu_btn-style button span { background: var(--brand-on-header); }
.custom_nav-container { gap: 16px; padding: 12px 0; }
.navbar-brand { display: flex; align-items: center; gap: 16px; white-space: normal; }
.navbar-brand span { font-size: clamp(16px, 2vw, 24px); }
.brand-logo { width: 100px; height: 64px; object-fit: contain; }
.sign-in-logo .brand-logo { width: 240px; height: 100px; padding: 8px; background: white; border-radius: 8px; }
.user_option a { margin-right: 0; color: var(--brand-link); }
.hero_area { height: auto; min-height: 0; }
.slider_section {
  flex: none;
  height: clamp(220px, 36vw, 520px);
  background-image: var(--brand-hero-image);
  background-color: var(--brand-hero-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.service_section .box { border-bottom: 4px solid var(--brand-accent); }
.service_section .box:hover { background: var(--brand-primary); }
.service_section .box:hover .detail-box { color: var(--brand-on-primary); }
.btn-primary, .btn-success, .contact_section .contact-form .btn-box button {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-success:hover, .contact_section .contact-form .btn-box button:hover {
  color: var(--brand-accent-text);
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.btn-primary:focus, .btn-success:focus, .btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active {
  color: var(--brand-on-primary);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .3);
}
.btn-primary:disabled, .btn-success:disabled { background: var(--brand-primary); border-color: var(--brand-primary); }
.text-primary, .text-success { color: var(--brand-link) !important; }
.text-danger { color: var(--brand-danger) !important; }
.bg-primary, .bg-success { background-color: var(--brand-primary) !important; }
.border-primary, .border-success { border-color: var(--brand-primary) !important; }
.alert-primary, .alert-success { color: var(--brand-link); background: var(--brand-soft); border-color: var(--brand-border); }
.alert-danger { color: var(--brand-danger); background: var(--brand-danger-soft); }
.alert-danger a { color: var(--brand-danger); text-decoration: underline; }
.btn-danger { background: var(--brand-danger); border-color: var(--brand-danger); }
.btn-danger:hover { background: var(--brand-danger-hover); border-color: var(--brand-danger-hover); }
.form-control:focus, .custom-select:focus, .contact_section .contact-form input:focus,
.contact_section .contact-form select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .2);
}
.custom-control-input:checked ~ .custom-control-label::before { background: var(--brand-primary); border-color: var(--brand-primary); }
.card-header { background: var(--brand-soft); }
.card { border-color: var(--brand-border); }
.page-item.active .page-link { background: var(--brand-primary); border-color: var(--brand-primary); }
.page-link { color: var(--brand-link); }
.info_section { border-top: 4px solid var(--brand-accent); }
.sign-in-page .owl-carousel .owl-nav i:hover { background: var(--brand-primary); }
@media (max-width: 767px) {
  .custom_nav-container { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
  .navbar-brand { flex: 1; margin-right: 0; gap: 10px; }
  .brand-logo { width: 72px; height: 52px; }
  .user_option { flex: 0 0 100%; justify-content: center; }
  .user_option a { font-size: 12px; }
  .slider_section { height: clamp(200px, 55vw, 330px); }
  .service_section .box { margin-bottom: 16px; }
  .contact_section .contact-form .btn-box button { padding: 10px 24px; }
}