/* ================================================================
   WEBHOSTING MX — MODERN DESIGN OVERRIDE
   Cargado después de main.min.css para sobrescribir estilos visuales
   Preserva: Bootstrap, Swiper, Select2, jQuery plugins, SVG loader
   Rediseña: tipografía, colores, nav, footer, botones, componentes
   ================================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Design Tokens (override Crumina variables) ── */
:root {
  /* Brand palette */
  --brand-blue:          #1a56db;
  --brand-blue-dark:     #1340b5;
  --brand-blue-light:    #2563eb;
  --brand-lime:          #22c55e;
  --brand-lime-dark:     #16a34a;

  /* Crumina variable overrides */
  --primary-accent-color:        #1a56db;
  --primary-accent-color--darken: #1340b5;
  --blue-themes:         #1a56db;
  --blue-themes--darken: #1340b5;
  --lime-themes:         #22c55e;
  --lime-themes--darken: #16a34a;
  --green-themes:        #22c55e;
  --green-themes--darken: #16a34a;
  --dark-themes:         #0f172a;
  --dark-themes--darken: #020617;
  --red-themes:          #ef4444;
  --red-themes--darken:  #dc2626;
  --orange-themes:       #f97316;
  --orange-themes--darken: #ea6c10;
  --yellow-themes:       #f59e0b;
  --yellow-themes--darken: #d97706;
  --grey-themes:         #f1f5f9;
  --grey-themes--darken: #e2e8f0;

  /* Typography */
  --font-family-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body-font-size:      16px;
  --body-font-weight:    400;
  --base-line-height:    1.6;
  --body-letter-spacing: -0.01em;
  --body-font-color:     #334155;
  --heading-color:       #0f172a;

  /* Heading sizes */
  --h1-font-size: 52px;
  --h2-font-size: 40px;
  --h3-font-size: 32px;
  --h4-font-size: 26px;
  --h5-font-size: 22px;
  --h6-font-size: 18px;
  --h-font-weight: 800;
  --h-margin-bottom: 16px;

  /* Link & input */
  --link-color:         #1a56db;
  --border-grey-color:  #e2e8f0;
  --input-grey-bg:      #f8fafc;
  --icon-color:         #64748b;
  --light-grey:         #94a3b8;

  /* Footer */
  --footer-link-color:  #94a3b8;
  --footer-text-color:  #64748b;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
  --shadow-blue: 0 8px 28px rgba(26,86,219,.28);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* ================================================================
   1. BASE RESET & TYPOGRAPHY
   ================================================================ */
html, body {
  font-family: var(--font-family-body) !important;
  color: var(--body-font-color) !important;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-body) !important;
  font-weight: var(--h-font-weight) !important;
  color: var(--heading-color) !important;
  letter-spacing: -0.03em;
  line-height: 1.18;
}

h1, .h1 { font-size: clamp(32px, 5vw, var(--h1-font-size)) !important; }
h2, .h2 { font-size: clamp(26px, 4vw, var(--h2-font-size)) !important; }
h3, .h3 { font-size: clamp(22px, 3vw, var(--h3-font-size)) !important; }
h4, .h4 { font-size: clamp(18px, 2.5vw, var(--h4-font-size)) !important; }
h5, .h5 { font-size: clamp(16px, 2vw, var(--h5-font-size)) !important; }

a { color: var(--link-color); transition: color .2s ease; }
a:hover { color: var(--brand-blue-dark); text-decoration: none; }

p { line-height: 1.7; color: var(--body-font-color); }

strong, .weight-bold { font-weight: 700; }

/* ================================================================
   2. NAVIGATION — Complete redesign
   ================================================================ */

/* Top contact bar */
.header-contact {
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  padding: 8px 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.header-contact a {
  color: #e2e8f0;
  text-decoration: none;
  transition: color .2s;
}
.header-contact a:hover { color: #38bdf8; }
.header-contact .contact-sep { margin: 0 16px; color: #334155; }
.header-contact img { vertical-align: middle; margin-right: 5px; filter: brightness(1.8); }

/* Nav bar */
#navigation.site-header,
#navigation.navigation {
  background: rgba(15,23,42,0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
}

/* Logo */
.navigation-logo img {
  max-height: 38px !important;
  width: auto;
  filter: brightness(1.05);
}

/* Nav links */
.navigation-link {
  font-family: var(--font-family-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  letter-spacing: 0.01em;
  padding: 24px 14px !important;
  transition: color .2s ease !important;
  position: relative;
}
.navigation-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 2px;
  background: var(--brand-blue);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform .25s ease;
}
.navigation-item:hover > .navigation-link,
.navigation-item:hover > .navigation-link::after,
.navigation-link:hover {
  color: #fff !important;
}
.navigation-item:hover > .navigation-link::after { transform: scaleX(1); }

/* Dropdown */
.navigation-dropdown {
  background: #1e293b !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
  min-width: 210px !important;
  padding: 8px 0 !important;
  top: calc(100% + 4px) !important;
  overflow: hidden;
}
.navigation-dropdown-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  padding: 10px 20px !important;
  transition: all .2s ease !important;
  display: block;
}
.navigation-dropdown-link:hover {
  color: #fff !important;
  background: rgba(26,86,219,.25) !important;
  padding-left: 26px !important;
}

/* Nav CTA buttons */
.navigation-additional-menu .crumina-button.button--blue,
.navigation-additional-menu .crumina-button.button--green {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  border-radius: 8px !important;
  letter-spacing: 0.02em;
}
.navigation-additional-menu .button--blue {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  color: #e2e8f0 !important;
}
.navigation-additional-menu .button--blue:hover {
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}
.navigation-additional-menu .button--green {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--shadow-blue);
}
.navigation-additional-menu .button--green:hover {
  background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(26,86,219,.35) !important;
}

/* Hamburger */
.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  background-color: #e2e8f0 !important;
}

/* ================================================================
   3. BUTTONS — Complete redesign
   ================================================================ */
.crumina-button {
  font-family: var(--font-family-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm) !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.crumina-button::after { display: none !important; }

.crumina-button:hover {
  transform: translateY(-2px) !important;
}

/* Blue */
.crumina-button.button--blue,
.button--blue {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(26,86,219,.35) !important;
}
.button--blue:hover {
  background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)) !important;
  box-shadow: 0 8px 24px rgba(26,86,219,.45) !important;
  color: #fff !important;
}

/* Red */
.crumina-button.button--red,
.button--red {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(239,68,68,.35) !important;
}
.button--red:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  box-shadow: 0 8px 24px rgba(239,68,68,.45) !important;
}

/* Lime / Green */
.crumina-button.button--lime,
.button--lime {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(34,197,94,.35) !important;
}
.button--lime:hover {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  box-shadow: 0 8px 24px rgba(34,197,94,.45) !important;
}

/* Dark */
.crumina-button.button--dark,
.button--dark {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.25) !important;
}
.button--dark:hover {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #fff !important;
}

/* Orange */
.crumina-button.button--orange,
.button--orange {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.3) !important;
}

/* Yellow */
.crumina-button.button--yellow,
.button--yellow {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(245,158,11,.3) !important;
}

/* Primary */
.crumina-button.button--primary,
.button--primary {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)) !important;
  color: #fff !important;
}

/* Sizes */
.button--xs { padding: 8px 18px !important; font-size: 12px !important; }
.button--s  { padding: 10px 22px !important; font-size: 13px !important; }
.button--l  { padding: 14px 30px !important; font-size: 15px !important; }
.button--xl { padding: 16px 36px !important; font-size: 16px !important; }
.button--xxl { padding: 18px 44px !important; font-size: 17px !important; }

/* ================================================================
   4. HERO / SLIDER
   ================================================================ */
.crumina-main-slider,
.crumina-module-slider {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f2244 100%);
}

.swiper-slide {
  background: transparent !important;
}

/* Backgrounds: replace old png backgrounds with modern gradients */
.stunning-header-bg1,
.stunning-header-bg2,
.stunning-header-bg3,
.stunning-header-bg4,
.stunning-header-bg5,
.stunning-header-bg6,
.stunning-header-bg7,
.stunning-header-bg8,
.stunning-header-bg9,
.stunning-header-bg10,
.stunning-header-bg11,
.stunning-header-bg12,
.stunning-header-bg13 {
  background-image: none !important;
}
.stunning-header-bg1 { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #1340b5 100%) !important; }
.stunning-header-bg2 { background: linear-gradient(135deg, #0c1832 0%, #1a3a6e 60%, #0d2b5e 100%) !important; }
.stunning-header-bg3 { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f2a4a 100%) !important; }
.stunning-header-bg4 { background: linear-gradient(135deg, #1340b5 0%, #1a56db 60%, #2563eb 100%) !important; }
.stunning-header-bg5 { background: linear-gradient(135deg, #0c1832 0%, #0f2a4a 60%, #14366b 100%) !important; }
.stunning-header-bg6 { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; }
.stunning-header-bg7 { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; }
.stunning-header-bg8 { background: linear-gradient(135deg, #14366b 0%, #1a56db 100%) !important; }
.stunning-header-bg9 { background: linear-gradient(135deg, #0c1832 0%, #1e3a5f 100%) !important; }
.stunning-header-bg10 { background: linear-gradient(135deg, #0f172a 0%, #1340b5 100%) !important; }
.stunning-header-bg11 { background: linear-gradient(135deg, #1e293b 0%, #1a56db 100%) !important; }
.stunning-header-bg12 { background: linear-gradient(135deg, #0f2a4a 0%, #2563eb 100%) !important; }
.stunning-header-bg13 { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; }

.crumina-stunning-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f2244 100%) !important;
}

/* Slider text */
.slider-content-title {
  font-family: var(--font-family-body) !important;
  font-size: clamp(26px, 4vw, 46px) !important;
  font-weight: 800 !important;
  color: #f0f9ff !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}
.slider-content-title a { color: #93c5fd !important; }
.slider-content-title a:hover { color: #bfdbfe !important; }

.slider-content-text {
  font-size: 17px !important;
  color: #94a3b8 !important;
  line-height: 1.7 !important;
}
.slider-content-text a { color: #93c5fd !important; }

/* Slider nav tabs */
.slides-item {
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  transition: all .2s ease !important;
}
.slides-item-primary { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)) !important; }
.slides-item-red     { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.slides-item-orange  { background: linear-gradient(135deg, #f97316, #ea580c) !important; }
.slides-item-yellow  { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.slides-item-blue    { background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)) !important; }
.slides-item-lime    { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.slides-item:hover   { transform: translateY(-2px); opacity: .9; }

/* Page hero titles */
.page-title {
  font-family: var(--font-family-body) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #f0f9ff !important;
}
.page-text { color: #94a3b8 !important; }
.page-category-item { color: #38bdf8 !important; font-weight: 700 !important; }

/* ================================================================
   5. SECTION BACKGROUNDS
   ================================================================ */
.bg-grey { background: #f8fafc !important; }
.bg-black { background: #020617 !important; }
.bg-yellow-themes { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; }
.bg-lime-themes   { background: linear-gradient(135deg, #0f172a 0%, #14366b 100%) !important; }
.bg-blue-themes   { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)) !important; }

/* ================================================================
   6. PRICING TABLES
   ================================================================ */
.crumina-pricing-tables-item {
  border-radius: var(--radius-lg) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  overflow: hidden;
  background: #fff !important;
}
.crumina-pricing-tables-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Border bottom style (homepage service cards) */
.pricing-tables-item-border-bottom {
  border-radius: var(--radius-md) !important;
  border: 1px solid #e2e8f0 !important;
  transition: transform .3s, box-shadow .3s !important;
}
.pricing-tables-item-border-bottom:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}
.pricing-tables-item-border-bottom .bg-layer {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* Color variants */
.pricing-red    .bg-layer { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.pricing-primary .bg-layer { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)) !important; }
.pricing-blue   .bg-layer { background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)) !important; }
.pricing-orange .bg-layer { background: linear-gradient(135deg, #f97316, #ea580c) !important; }
.pricing-yellow .bg-layer { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }

.pricing-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--heading-color) !important;
}
.pricing-description { color: #64748b !important; font-size: 14px !important; }

.rate { color: var(--heading-color) !important; font-weight: 800 !important; }
.rate .price {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--brand-blue) !important;
  letter-spacing: -0.04em;
}
.h1.rate .price { font-size: 42px !important; }

.pricing-onsale { font-size: 12px !important; color: #64748b !important; }
.pricing-onsale--with-bg {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 1px 8px !important;
  font-weight: 700 !important;
}
.pricing-recommended {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light)) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Pricing table list items */
.pricing-tables-position .position-item {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
}
.pricing-tables-position .position-item .font-weight-bold { color: #0f172a; }

.pricing-tables-position li {
  border-bottom: 1px dashed #f1f5f9 !important;
  padding: 7px 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
}

/* ================================================================
   7. INFO BOXES
   ================================================================ */
.crumina-info-box {
  transition: transform .3s ease !important;
}
.crumina-info-box:hover { transform: translateY(-4px); }

.info-box-title {
  font-weight: 800 !important;
  color: var(--heading-color) !important;
  font-size: 18px !important;
}
.info-box-text { color: #64748b !important; line-height: 1.7 !important; }
.info-box-text a { color: var(--brand-blue) !important; }
.info-box-text a:hover { color: var(--brand-blue-dark) !important; }

/* ================================================================
   8. ACCORDION
   ================================================================ */
.crumina-accordion .card {
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 10px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}
.crumina-accordion .card-header {
  background: #fff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 0 !important;
}
.crumina-accordion .btn-link {
  font-family: var(--font-family-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--heading-color) !important;
  padding: 18px 24px !important;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none !important;
}
.crumina-accordion .btn-link:hover { color: var(--brand-blue) !important; }
.crumina-accordion .card-body {
  padding: 16px 24px 20px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  background: #fafbfc !important;
}
.crumina-accordion .card-body a { color: var(--brand-blue) !important; }

/* ================================================================
   9. TESTIMONIALS
   ================================================================ */
.crumina-testimonial-item {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-md) !important;
  padding: 28px !important;
  transition: transform .3s, box-shadow .3s !important;
}
.crumina-testimonial-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.testimonial-text {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  font-weight: 400 !important;
}
.testimonial-text a { color: var(--brand-blue) !important; font-weight: 700 !important; }
.author-name { font-weight: 700 !important; color: var(--heading-color) !important; }
.author-company { font-size: 12px !important; color: #94a3b8 !important; }

/* ================================================================
   10. TABS
   ================================================================ */
.nav-tabs .nav-link {
  font-family: var(--font-family-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #64748b !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 18px !important;
  border: none !important;
  transition: all .2s !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--brand-blue) !important;
  background: #eff6ff !important;
}
.nav-tabs .nav-link.active { font-weight: 700 !important; }

.tab-content h5 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
}
.tab-content p { color: #475569 !important; }
.tab-content a { color: var(--brand-blue) !important; }

/* ================================================================
   11. DOMAIN LIST
   ================================================================ */
.domain-list { display: flex; flex-wrap: wrap; gap: 10px !important; margin-top: 16px !important; }
.domain-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 18px !important;
  box-shadow: var(--shadow-sm) !important;
  min-width: 120px;
  transition: all .2s !important;
}
.domain-list-item:hover {
  border-color: var(--brand-blue) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}
.domain-list-item-name {
  font-size: 18px !important;
  font-weight: 800 !important;
}
.domain-list-item-price {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  margin-left: 8px;
}
.c-blue      { color: var(--brand-blue) !important; }
.c-blue-dark { color: var(--brand-blue-dark) !important; }
.c-primary   { color: var(--brand-blue) !important; }
.c-lime      { color: #22c55e !important; }
.c-orange    { color: #f97316 !important; }
.c-yellow    { color: #f59e0b !important; }
.c-dark      { color: #0f172a !important; }
.c-light-grey { color: #64748b !important; }

/* ================================================================
   12. FAQ BLOCKS
   ================================================================ */
.crumina-faqs-block {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  padding: 22px 26px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .2s !important;
}
.crumina-faqs-block:hover { box-shadow: var(--shadow-md) !important; }
.crumina-faqs-block h6 {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--heading-color) !important;
  margin-bottom: 10px !important;
}
.crumina-faqs-block p { color: #475569 !important; font-size: 14px !important; }

/* ================================================================
   13. LISTS
   ================================================================ */
.list--standard li {
  color: #475569 !important;
  font-size: 15px !important;
  padding: 5px 0 !important;
}
.list--standard a { color: var(--brand-blue) !important; }
.list--standard svg.crumina-icon { fill: var(--brand-blue) !important; }

/* ================================================================
   14. BREADCRUMBS
   ================================================================ */
.crumina-breadcrumbs {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 0 !important;
}
.breadcrumbs-link {
  color: var(--brand-blue) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.breadcrumbs-item.active {
  color: #64748b !important;
  font-size: 13px !important;
}
.breadcrumbs-item::after { color: #94a3b8 !important; }

/* ================================================================
   15. FORMS & INPUTS
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="search"],
.form-control,
.select2-container--default .select2-selection--single {
  font-family: var(--font-family-body) !important;
  font-size: 15px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  background: #f8fafc !important;
  color: var(--heading-color) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
input:focus,
.form-control:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,86,219,.12) !important;
  outline: none !important;
  background: #fff !important;
}
input::placeholder { color: #94a3b8 !important; }

/* Toggle / pricing switcher */
.tgl span {
  background: #e2e8f0 !important;
  border-radius: 20px !important;
}
.input-checkbox:checked + span {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light)) !important;
}

/* ================================================================
   16. FOOTER
   ================================================================ */
#site-footer.footer {
  background: #0a0f1c !important;
}
.footer.footer--dark {
  background: #0a0f1c !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
.footer-content {
  padding: 72px 0 40px !important;
  background: #0a0f1c !important;
}

.widget-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #e2e8f0 !important;
  margin-bottom: 20px !important;
}
.widget_links ul li a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  transition: all .2s !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 !important;
}
.widget_links ul li a:hover {
  color: #e2e8f0 !important;
  padding-left: 4px !important;
}
.widget_links ul li svg.crumina-icon {
  fill: #334155 !important;
  width: 10px !important;
  height: 10px !important;
  transition: fill .2s;
}
.widget_links ul li a:hover svg.crumina-icon { fill: var(--brand-blue) !important; }

.w-info p {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  margin-top: 14px !important;
}

/* Socials */
.socials { display: flex; gap: 8px; margin-top: 16px !important; }
.socials li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #1e293b !important;
  border-radius: 8px;
  transition: all .2s !important;
  border: 1px solid rgba(255,255,255,.06);
}
.socials li a:hover {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  transform: translateY(-2px);
}
.socials li a img { filter: brightness(1.5); width: 16px !important; }

/* Footer payment bar */
section[data-pgc-define="metodos-pago"] {
  background: #0f172a !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
section[data-pgc-define="metodos-pago"] h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
}
section[data-pgc-define="metodos-pago"] p { font-size: 13px !important; }
section[data-pgc-define="metodos-pago"] a { color: #93c5fd !important; }
section[data-pgc-define="metodos-pago"] img { max-height: 36px; filter: brightness(.9) contrast(1.1); }

/* Sub footer */
.sub-footer {
  background: #020617 !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  padding: 20px 0 !important;
}
.sub-footer .copyright,
.sub-footer .copyright span,
.sub-footer .copyright a {
  font-size: 12px !important;
  color: #334155 !important;
}
.sub-footer .copyright a:hover { color: #64748b !important; }

/* Back to top */
.back-to-top {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light)) !important;
  border-radius: 10px !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: var(--shadow-blue) !important;
  transition: all .25s !important;
}
.back-to-top:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(26,86,219,.4) !important;
}
.back-to-top svg { fill: #fff !important; }

/* ================================================================
   17. INFO ICONS / TOOLTIPS
   ================================================================ */
.info-icon {
  background: #e2e8f0 !important;
  color: #475569 !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  display: inline-block !important;
  text-align: center !important;
  cursor: pointer;
}
.info-icon--yellow { background: #fef3c7 !important; color: #92400e !important; }
.info-icon--bg-green { background: #dcfce7 !important; color: #166534 !important; }

/* ================================================================
   18. SECTION SPACING
   ================================================================ */
.large-section-padding { padding: 90px 0 !important; }
.medium-section-padding { padding: 60px 0 !important; }
.small-section-padding { padding: 40px 0 !important; }
.pt120 { padding-top: 90px !important; }
.pb120 { padding-bottom: 90px !important; }

/* ================================================================
   19. SWIPER NAVIGATION
   ================================================================ */
.swiper-btn-prev,
.swiper-btn-next {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(10px);
  transition: all .2s !important;
}
.swiper-btn-prev:hover,
.swiper-btn-next:hover {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}
.swiper-btn-prev svg,
.swiper-btn-next svg { fill: #fff !important; }

.swiper-pagination-bullet {
  background: rgba(255,255,255,.3) !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background: var(--brand-blue) !important;
  transform: scale(1.3);
}

/* ================================================================
   20. MISC UTILITIES
   ================================================================ */
.main-content-wrapper { overflow-x: hidden; }

/* Block border gradient (tabs section) */
.block-border-linear-gradient-top,
.block-border-linear-gradient-bottom {
  background: linear-gradient(90deg, transparent, var(--brand-blue), transparent) !important;
  height: 1px !important;
}
.block-border-linear-gradient-left,
.block-border-linear-gradient-right {
  background: linear-gradient(180deg, transparent, var(--brand-blue), transparent) !important;
  width: 1px !important;
}

/* Universal btn wrapper spacing */
.universal-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Preloader */
#page-preloader {
  background: #0f172a !important;
}
.page-preloader-inner::before,
.page-preloader-inner::after {
  border-color: var(--brand-blue) transparent transparent transparent !important;
}

/* Avatar circles */
.avatar img {
  border-radius: 50% !important;
  border: 3px solid #e2e8f0 !important;
}

/* Features items (hero badges) */
.crumina-features-item .features-item-title { color: #e2e8f0 !important; font-weight: 700 !important; font-size: 13px !important; }

/* ================================================================
   21. RESPONSIVE ADJUSTMENTS
   ================================================================ */
@media (max-width: 992px) {
  .header-contact { display: none; }
  #navigation .navigation-body {
    background: #0f172a !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  .navigation-link { padding: 14px 20px !important; }
  .navigation-dropdown { position: static !important; box-shadow: none !important; border: none !important; background: rgba(0,0,0,.2) !important; }
  .large-section-padding { padding: 60px 0 !important; }
}

@media (max-width: 768px) {
  :root {
    --h1-font-size: 34px;
    --h2-font-size: 28px;
  }
  .slider-content-title { font-size: 24px !important; }
  .large-section-padding { padding: 48px 0 !important; }
  .domain-list { flex-direction: column; }
  .domain-list-item { width: 100%; }
}