/* ================================================
   DERAGOPYAN CUSTOM STYLES
   Adapted to match www.deragopyan.com aesthetic
   Primary: #CE187C | Secondary: #404040
   Font: Montserrat
   ================================================ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap");

/* ---- CSS Variable Overrides ---- */
:root,
[data-bs-theme="light"] {
  --gk-primary: #CE187C;
  --gk-secondary: #404040;
  --gk-primary-rgb: 206, 24, 124;
  --gk-body-color: #404040;
  --gk-body-font-family: 'Montserrat', sans-serif;
  --gk-link-color: #CE187C;
  --gk-link-hover-color: #404040;
  --gk-border-color: #B1B1B1;
  --gk-gray-300: #B1B1B1;
  --gk-gray-700: #404040;
  --gk-gray-800: #404040;
}

/* ---- Global Font ---- */
*,
*::before,
*::after {
  font-family: 'Montserrat', sans-serif !important;
}

/* ---- Body ---- */
body {
  color: #404040;
  background-color: #FFFFFF;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.6;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4 {
  color: #404040;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.2;
}

/* ---- Navbar ---- */
.navbar,
.navbar-expand,
.navbar-transparent {
  background-color: #F4F4F4 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.navbar .navbar-brand img {
  filter: none !important;
}

/* ---- Primary Color ---- */
.text-primary,
.textderago {
  color: #CE187C !important;
}

/* ---- Links ---- */
a {
  color: #CE187C;
}
a:hover {
  color: #404040;
}

/* Force white text where bg is pink/dark */
.bg-derago a,
.bg-gc a,
.bg-derago .text-white,
.bg-gc .text-white {
  color: #fff !important;
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: #CE187C !important;
  border-color: #CE187C !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
:not(.btn-check) + .btn-primary:active {
  background-color: #404040 !important;
  border-color: #404040 !important;
  color: #fff !important;
}

.btn-primary.rounded-pill {
  border-radius: 50rem !important;
}

.btn-outline-primary {
  color: #404040 !important;
  border-color: #CE187C !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff !important;
  background-color: #CE187C !important;
  border-color: #CE187C !important;
}

/* ---- Hero Section / Banner ---- */
.bg-derago {
  /* Hero container: image will be rendered in ::before so we can filter it without affecting children */
  position: relative;
  overflow: hidden;
  height: auto !important;
  min-height: 40vh;
  display: flex;
  align-items: center;
  color: #fff;
}

/* Background image layer (filtered) — placed behind content */
.bg-derago::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/home-chequeos.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: grayscale(100%) brightness(0.6); /* filtro gris/oscuro muy tenue aplicado solo a la imagen */
  z-index: 0;
  pointer-events: none;
}

/* Ensure hero content sits above the filtered background */
.bg-derago > *,
.bg-derago .container,
.bg-derago .row {
  position: relative;
  z-index: 1;
}

.bg-gc {
  background-color: #CE187C !important;
}

/* ---- Cards ---- */
.card {
  border-radius: 0.75rem !important;
  border: 1px solid #E0E0E0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden;
}

.card.rounded-3 {
  border-radius: 0.75rem !important;
}

.card .card-body {
  border-radius: 0 0 0.75rem 0.75rem;
}

/* Dividers inside 3-col feature card */
.border-end-md {
  border-right: 1px solid #E0E0E0 !important;
}

@media (max-width: 767.98px) {
  .border-end-md {
    border-right: none !important;
  }
  .border-bottom-md-0 {
    border-bottom: none !important;
  }
}

/* ---- Accordion ---- */
/* Outer accordion items */
div.border.p-3.rounded-3.mb-2 {
  border-color: #E0E0E0 !important;
  border-radius: 0.5rem !important;
  background-color: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

div.border.p-3.rounded-3.mb-2:hover {
  border-color: #CE187C !important;
  box-shadow: 0 2px 8px rgba(206, 24, 124, 0.08) !important;
}

/* Accordion parent links */
.accordion a.text-inherit,
.accordion-flush a.text-inherit {
  color: #404040 !important;
  font-weight: 600;
  text-decoration: none;
}

.accordion a.text-inherit:hover,
.accordion a.text-inherit[aria-expanded="true"] {
  color: #CE187C !important;
}

/* Collapse toggle icon */
.collapse-toggle {
  color: #CE187C !important;
}

/* ---- Form Controls ---- */
.form-control,
.form-select {
  border-color: #B1B1B1;
  border-radius: 6px;
  color: #404040;
}

.form-control:focus,
.form-select:focus {
  border-color: #CE187C !important;
  box-shadow: 0 0 0 0.2rem rgba(206, 24, 124, 0.15) !important;
}

.form-control::placeholder {
  color: #B1B1B1;
}

.form-label {
  color: #404040;
  font-weight: 500;
}

.form-check-input:checked {
  background-color: #CE187C !important;
  border-color: #CE187C !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(206, 24, 124, 0.15) !important;
}

/* ---- Dropdown ---- */
.dropdown-menu {
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.dropdown-item {
  color: #404040 !important;
  font-weight: 400;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #CE187C !important;
  background-color: #FAFAFA !important;
}

/* ---- Lead text ---- */
.lead {
  color: #747474;
  font-weight: 400;
}

/* ---- Heading section divider ---- */
.mb-8 .lead {
  color: #747474;
}

/* ---- Section Titles ---- */
.h1.fw-semibold, h2.fw-semibold {
  color: #404040;
}

/* ---- Footer ---- */
footer.footer {
  background-color: #EEEEEE !important;
  border-top: 1px solid #D0D0D0 !important;
}

/* Override text-white inside footer to dark colors */
footer.footer .text-white,
footer.footer p.text-white,
footer.footer span.text-white,
footer.footer li,
footer.footer li a {
  color: #747474 !important;
}

footer.footer h3,
footer.footer h3.text-white,
footer.footer h3.fw-bold {
  color: #404040 !important;
}

footer.footer a.text-white {
  color: #747474 !important;
  text-decoration: none;
}

footer.footer a.text-white:hover {
  color: #CE187C !important;
}

footer.footer .border-top {
  border-top-color: #D0D0D0 !important;
}

/* Footer logo: remove invert filter so it shows in color on light bg */
footer.footer .logo-inverse {
  filter: none !important;
}

/* Footer copyright */
footer.footer .row.align-items-center span,
footer.footer #copyright2 {
  color: #747474 !important;
}

/* Footer social icons */
footer.footer a .bi {
  color: #747474 !important;
  transition: color 0.2s ease;
}

/* Remove hover color change for icons: keep same color on hover */
footer.footer a:hover .bi {
  color: #747474 !important;
}

/* Footer social buttons styled as magenta rounded squares with white icons */
footer.footer .footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #CE187C;
  color: #ffffff !important;
  text-decoration: none;
}

footer.footer .footer-social-btn .bi {
  color: #ffffff !important;
  font-size: 14px;
  line-height: 1;
}

/* Disable visual change on social buttons hover: keep same background and icon color */
footer.footer .footer-social-btn:hover {
  background-color: #CE187C; /* same as normal */
  color: #ffffff !important;
}

/* Group adjustments: more gap and slightly lower position */
.footer-social-group {
  gap: 14px; /* increase space between icons */
  margin-top: 0.6rem; /* nudge icons a bit lower */
  display: inline-flex;
}

/* ---- bg-light overrides ---- */
.bg-light {
  background-color: #EEEEEE !important;
}

/* ---- Shadows ---- */
.shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* ---- Feather icons color ---- */
.feather.text-primary {
  stroke: #CE187C !important;
}

/* ---- Borders ---- */
.border {
  border-color: #E0E0E0 !important;
}

.border-top {
  border-top-color: #E0E0E0 !important;
}

/* ---- FAQ Arrow SVG ---- */
.faq-arrow {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
  color: var(--gk-primary);
}

/* Rotate arrow when the trigger is expanded (Bootstrap removes the 'collapsed' class when open) */
a[data-bs-toggle="collapse"] .faq-arrow {
  transform: rotate(0deg);
}
a[data-bs-toggle="collapse"]:not(.collapsed) .faq-arrow {
  transform: rotate(180deg);
}

/* Utility: force arrow up when markup needs it */
.faq-arrow.rotated {
  transform: rotate(180deg) !important;
}


.border-bottom {
  border-bottom-color: #E0E0E0 !important;
}

/* ---- Responsive hero button ---- */
@media (max-width: 767.98px) {
  .responsive-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile: replace bg-derago image with solid color to match footer */
@media (max-width: 767.98px) {
  .bg-derago::before {
    display: none !important;
  }
  .bg-derago {
    background-image: none !important;
    background-color: #EEEEEE !important; /* same as footer */
  }
  /* Ensure hero text remains readable on light footer-like background */
  .bg-derago .text-white,
  .bg-derago h1,
  .bg-derago h2,
  .bg-derago p,
  .bg-derago .lead {
    color: #404040 !important;
  }
}

/* ---- Smooth hover transitions ---- */
a,
.btn {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ================================
   FOOTER — Deragopyan style
   ================================ */

footer.footer {
  background-color: #EEEEEE !important;
  border-top: 1px solid #D0D0D0 !important;
}

/* Schedule section titles (bold small labels) */
.footer-schedule-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #404040 !important;
  margin-bottom: 2px;
}

/* Schedule body text */
.footer-schedule-text {
  font-size: 0.78rem;
  color: #747474 !important;
  line-height: 1.45;
}

/* Column headings */
.footer-col-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #404040 !important;
  margin-bottom: 0.75rem;
}

/* Footer links */
.footer-link {
  color: #747474 !important;
  font-size: 0.88rem;
  text-decoration: none;
  display: block;
  margin-bottom: 0.4rem;
}

/* ---- Custom gradient backgrounds for form and FAQ ---- */
.form-bg {
  /* Use a slightly stronger light gray to separate the form from background (no gradient) */
  background: #e6e6e6 !important;
  border: none !important;
}

.form-bg .card-body {
  background: transparent !important;
}

.faq-bg {
  background: #e6e6e6 !important;
}

/* Ensure readable text on the gradient */
.form-bg, .faq-bg {
  color: #404040 !important;
}

/* ---- Sedes cards ---- */
.sedes-row {
  margin-bottom: 2.5rem;
}
.sede-card {
  border: 1px solid var(--gk-primary) !important; /* use primary color #CE187C and force override */
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  background: #fff;
}
.sede-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  transform: translateY(-6px);
}
.sede-card .sede-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.sede-card .card-body {
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.sede-card h5 {
  margin-bottom: 0.15rem;
  font-weight: 700;
  color: #404040;
}
.sede-card p.sede-address {
  margin-bottom: 0.75rem;
  color: #747474;
  font-size: 0.95rem;
}

.sede-card p.sede-offer {
  margin: 0;
  padding-top: 0.6rem;
  color: #6b6b6b;
  font-size: 0.92rem;
  font-weight: 400; /* normal by default; emphasize only the percent */
}

/* Strong span for the percentage/offer label */
.sede-offer-strong {
  font-weight: 700;
}

/* Divider between address and offer */
.sede-divider {
  border: 0;
  border-top: 1px solid rgba(var(--gk-primary-rgb), 0.18);
  width: 80%;
  margin: 0.8rem auto;
}


.footer-link:hover {
  color: #CE187C !important;
}

/* Social icon buttons — magenta rounded squares (override previous circular style) */
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #CE187C;
  color: #fff !important;
  font-size: 0.9rem;
  text-decoration: none;
  transition: none;
}

.footer-social-btn i,
.footer-social-btn svg,
.footer-social-btn .bi {
  color: #fff !important;
  fill: #fff !important;
  font-size: 14px;
}

.footer-social-btn:hover {
  background-color: #CE187C; /* keep same color on hover */
  color: #fff !important;
}

.footer-social-btn:hover i,
.footer-social-btn:hover svg,
.footer-social-btn:hover .bi {
  color: #fff !important;
  fill: #fff !important;
}

/* Force dropdown menus to open downward: place menu below the toggle */
.dropdown.show > .dropdown-menu {
  position: absolute;
  top: calc(100% + 0.4rem) !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1060;
}

/* QR label */
.footer-qr-label {
  font-size: 0.65rem;
  color: #747474 !important;
  line-height: 1.3;
  margin-bottom: 0;
}

/* Footer logo — show in color (no invert) */
footer.footer img.footer-logo {
  filter: none !important;
}

/* Footer bottom copyright */
footer.footer .footer-copyright {
  font-size: 0.8rem;
  color: #747474 !important;
}

/* Override any lingering text-white in footer */
footer.footer *,
footer.footer a,
footer.footer p,
footer.footer span,
footer.footer li {
  color: inherit;
}

footer.footer .border-top {
  border-top-color: #D0D0D0 !important;
}