/*
 * fixes.css — KE Construcciones
 * Correciones globales centralizadas. Cargado ULTIMO en todos los HTML.
 */

/* ==========================================================
   1. COTIZADOR: Boton "Enviar al formulario" visible en fondo oscuro
   ========================================================== */

/* Las clases ke-btn--ghost dentro del cotizador (fondo oscuro) deben ser blancas */
.ke-calc .ke-btn--ghost,
.ke-calc__result .ke-btn--ghost,
section.ke-calc .ke-btn--ghost {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.ke-calc .ke-btn--ghost:hover,
.ke-calc__result .ke-btn--ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* cx-btn--ghost en secciones oscuras */
.ke-calc .cx-btn--ghost,
.cx-section--dark .cx-btn--ghost {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}


/* ==========================================================
   2. DESKTOP: cx-dropdown__panel posicion absoluta (NO estatica)
   ========================================================== */

/* Asegura que en desktop el dropdown sea absoluto y no estatico */
@media (min-width: 761px) {
  .cx-dropdown__panel {
    position: absolute !important;
    display: none !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    pointer-events: none !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(15, 20, 30, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    min-width: 200px !important;
    z-index: 200 !important;
  }
  .cx-dropdown.is-open .cx-dropdown__panel {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  .cx-dropdown__panel a {
    color: rgba(15, 20, 30, 0.88) !important;
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  .cx-dropdown__panel a:hover {
    background: rgba(255, 98, 0, 0.07) !important;
    color: #ff6200 !important;
  }
}


/* ==========================================================
   3. MOBIL (cx-nav pages): Menu dark, links BLANCOS
   ========================================================== */

@media (max-width: 760px) {
  /* Mostrar burger */
  .cx-burger {
    display: flex !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .cx-burger span {
    background: rgba(15, 20, 30, 0.85) !important;
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
  }

  /* Menu container: fondo muy oscuro */
  .cx-nav .cx-menu,
  #cx-menu {
    background: rgba(10, 14, 32, 0.99) !important;
    border: 1px solid rgba(255, 98, 0, 0.2) !important;
  }

  /* TODOS los links: blancos */
  .cx-nav .cx-menu .cx-link,
  #cx-menu .cx-link,
  #cx-menu > a,
  #cx-menu > button {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
  }
  .cx-nav .cx-menu .cx-link:hover,
  #cx-menu .cx-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
  .cx-nav .cx-menu .cx-link.is-active,
  #cx-menu .cx-link.is-active {
    color: #fff !important;
    background: rgba(255, 98, 0, 0.22) !important;
  }

  /* Dropdown panel: fondo oscuro, texto blanco */
  .cx-nav .cx-menu .cx-dropdown__panel,
  #cx-menu .cx-dropdown__panel {
    position: static !important;
    background: rgba(6, 10, 24, 0.99) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    display: none !important;
    margin-top: 4px !important;
    padding: 6px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .cx-nav .cx-menu .cx-dropdown.is-open .cx-dropdown__panel,
  #cx-menu .cx-dropdown.is-open .cx-dropdown__panel {
    display: block !important;
  }

  /* Sub-links: blancos */
  .cx-nav .cx-menu .cx-dropdown__panel a,
  #cx-menu .cx-dropdown__panel a {
    color: rgba(255, 255, 255, 0.88) !important;
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: transparent !important;
  }
  .cx-nav .cx-menu .cx-dropdown__panel a:hover,
  #cx-menu .cx-dropdown__panel a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }

  /* CTA Cotizar */
  .cx-nav .cx-menu .cx-cta,
  #cx-menu .cx-cta {
    text-align: center !important;
    display: block !important;
    margin: 4px 0 !important;
  }
}


/* ==========================================================
   4. INDEX (index.html): Mobile menu oscuro + Logo a la derecha
   ========================================================== */

@media (max-width: 768px) {

  /* TOPBAR: Solo idioma y telefonos */
  .topbar {
    display: flex !important;
    padding: 2px 14px !important;
    gap: 8px !important;
    justify-content: flex-start !important; /* Movemos textos un poco a la izq o centro */
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    background: rgba(248, 249, 252, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(15, 20, 30, 0.1) !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }
  .topbar__right {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* NAV: Logo a la derecha */
  .nav {
    top: 36px !important;
    background: rgba(255,255,255,0.98) !important;
    height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    justify-content: flex-end !important; /* LOGO A LA DERECHA */
    align-items: center !important;
    border-bottom: 1px solid rgba(15,20,30,0.06) !important;
    z-index: 400 !important;
  }
  .brand { margin-right: 0 !important; }

  /* BURGER: 3 lineas a la izquierda */
  .burger {
    display: flex !important;
    position: fixed !important;
    top: 50px !important; /* Mitad del nav: 36 + 14 */
    left: 16px !important; /* ICONO A LA IZQUIERDA */
    z-index: 450 !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 40px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .burger span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background: #1a1d26 !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    margin: 0 !important;
  }
  .burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; }
  .burger.is-open span:nth-child(2) { opacity: 0 !important; }
  .burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; }

  /* MENU CERRADO: siempre fuera de pantalla */
  #menu:not([data-open="true"]) {
    transform: translateY(-100vh) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* MENU ABIERTO: dark navy igual a la tercera captura */
  #menu[data-open="true"] {
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 110px !important;
    left: 14px !important;
    right: 14px !important;
    border-radius: 22px !important;
    padding: 16px 16px !important;
    background: rgba(10, 14, 32, 0.99) !important;
    border: 1px solid rgba(255, 98, 0, 0.2) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
    display: block !important;
    z-index: 500 !important;
  }

  /* LINKS: BLANCOS */
  #menu .link,
  #menu a.link,
  #menu button.link {
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 1.15rem !important;
    margin-bottom: 2px !important;
  }
  #menu .link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* DROPDOWN BTN (Servicios) */
  #menu .dropdown__btn {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    outline: none !important;
    border: none !important;
  }
  #menu .dropdown__btn svg { stroke: #fff !important; fill: transparent !important; width: 18px !important; }

  /* DROPDOWN PANEL: fondo dark navy/negro */
  #menu .dropdown__panel {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 8px 12px !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: none !important;
  }
  .dropdown.is-open .dropdown__panel,
  #menu .dropdown.is-open .dropdown__panel {
    display: block !important;
  }
  
  #menu .dropdown__panel a,
  html body #menu .dropdown .dropdown__panel a {
    color: rgba(255, 255, 255, 0.82) !important;
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: transparent !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }
  
  /* Link de CONSTRUCCIONES resaltado (como en la 3ra imagen) */
  #menu .dropdown__panel a[href="construcciones.html"] {
    background: rgba(60, 25, 10, 0.95) !important; /* Dark brown/orange */
    border: 1px solid rgba(255,98,0,0.3) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  #menu .dropdown__panel a:hover,
  html body #menu .dropdown .dropdown__panel a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }

  /* BOTON COTIZAR visible */
  #menu .cta {
    display: block !important;
    background: #ff6200 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    margin-top: 16px !important;
    font-size: 1.1rem !important;
  }

  /* Remove outlline */
  #menu *:focus,
  #menu *:focus-visible { outline: none !important; box-shadow: none !important; }

  /* Hero padding */
  .hero { padding-top: 140px !important; }
}

/* ==========================================================
   5. [REMOVED] 
   ========================================================== */
  .topbar__right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Pills de telefono compactos */
  .topbar .pill {
    padding: 3px 9px !important;
    font-size: 0.73rem !important;
  }

  /* Botones de idioma visibles */
  .topbar .lang-switch,
  .topbar .langSwitch {
    display: flex !important;
    gap: 3px !important;
  }

  /* El nav baja para quedar debajo del topbar (topbar = 36px de alto) */
  .nav {
    top: 36px !important;
  }

  /* El nav bar debe tener fondo blanco visible y texto oscuro */
  .nav {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(14px) !important;
  }

  /* Hero del index: siempre fondo oscuro, texto blanco, padding ajustado para topbar+nav */
  .hero {
    background: #0b0f1e !important;
    padding-top: 130px !important;
  }
  .hero * {
    color: #fff !important;
  }
  .hero .h1,
  .hero .lead,
  .hero .badge,
  .hero p {
    color: #fff !important;
  }
}



/* ==========================================================
   6. Otros errores visuales conocidos
   ========================================================== */

/* cx-btn--ghost siempre visible en fondos oscuros del hero */
.cx-hero .cx-btn--ghost,
.cx-hero .cx-actions .cx-btn--ghost {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.cx-hero .cx-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* cx-btn--primary: siempre texto blanco */
.cx-btn--primary,
button.cx-btn--primary,
a.cx-btn--primary {
  color: #fff !important;
}

/* cx-section--alt: texto siempre oscuro (fondo claro) */
.cx-section--alt,
.cx-section--alt .cx-h2,
.cx-section--alt .cx-sub,
.cx-section--alt p,
.cx-section--alt li {
  color: #0f141e !important;
}

/* Secciones oscuras: texto siempre blanco */
.ke-calc,
.ke-calc .ke-calc__step-text,
.ke-calc .ke-calc__result-label,
.ke-calc .ke-calc__result-range,
.ke-calc .ke-calc__result-disclaimer,
.ke-calc h2,
.ke-calc p {
  color: rgba(255, 255, 255, 0.92) !important;
}