/*
Theme Name: Mis Denuncias
Theme URI: https://misdenuncias.cl
Author: Mis Denuncias
Author URI: https://misdenuncias.cl
Description: Tema WordPress a medida para Mis Denuncias, construido con Bootstrap 5. Incluye header y footer personalizados.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: mis-denuncias
*/

/* =========================================================
   Fuentes propias (self-hosted)
   Estructura real de carpetas (assets/fonts/):
   - Helvetica-Font/  (Helvetica, Helvetica-Bold, Helvetica-Oblique,
     Helvetica-BoldOblique, helvetica-light-*, helvetica-compressed-*,
     helvetica-rounded-bold-*, todos en .ttf)
   - Manrope/  (Manrope-ExtraLight, Manrope-Light, Manrope-Regular,
     Manrope-Medium, Manrope-SemiBold, Manrope-Bold, Manrope-ExtraBold, en .ttf)
   - EncodeSans/, InclusiveSans/, FuturaNowHeadline/, SFPro/, Inter/
     (agrégalas cuando tengas los archivos; ajusta nombres/extensión si difieren)
   ========================================================= */

@font-face {
  font-family: "Encode Sans";
  src:
    url("assets/fonts/EncodeSans/EncodeSans-Regular.ttf") format("ttf"),
    url("assets/fonts/EncodeSans/EncodeSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Encode Sans";
  src:
    url("assets/fonts/EncodeSans/EncodeSans-Medium.ttf") format("ttf"),
    url("assets/fonts/EncodeSans/EncodeSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Encode Sans";
  src:
    url("assets/fonts/EncodeSans/EncodeSans-SemiBold.ttf") format("ttf"),
    url("assets/fonts/EncodeSans/EncodeSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Encode Sans";
  src:
    url("assets/fonts/EncodeSans/EncodeSans-Bold.ttf") format("ttf"),
    url("assets/fonts/EncodeSans/EncodeSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope/Manrope-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope/Manrope-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inclusive Sans";
  src:
    url("assets/fonts/InclusiveSans/InclusiveSans-Regular.ttf")
      format("ttf"),
    url("assets/fonts/InclusiveSans/InclusiveSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inclusive Sans";
  src:
    url("assets/fonts/InclusiveSans/InclusiveSans-Medium.ttf") format("ttf"),
    url("assets/fonts/InclusiveSans/InclusiveSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inclusive Sans";
  src:
    url("assets/fonts/InclusiveSans/InclusiveSans-Bold.ttf") format("ttf"),
    url("assets/fonts/InclusiveSans/InclusiveSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src:
    url("assets/fonts/FuturaNowHeadline/FuturaNowHeadline-Regular.ttf")
      format("ttf"),
    url("assets/fonts/FuturaNowHeadline/FuturaNowHeadline-Regular.woff")
      format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Now Headline";
  src:
    url("assets/fonts/FuturaNowHeadline/FuturaNowHeadline-Medium.ttf")
      format("ttf"),
    url("assets/fonts/FuturaNowHeadline/FuturaNowHeadline-Medium.woff")
      format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura Now Headline";
  src:
    url("assets/fonts/FuturaNowHeadline/FuturaNowHeadline-Bold.ttf")
      format("ttf"),
    url("assets/fonts/FuturaNowHeadline/FuturaNowHeadline-Bold.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("assets/fonts/Helvetica-Font/helvetica-light-587ebe5a59211.ttf")
    format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("assets/fonts/Helvetica-Font/Helvetica.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("assets/fonts/Helvetica-Font/Helvetica-Oblique.ttf")
    format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("assets/fonts/Helvetica-Font/Helvetica-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("assets/fonts/Helvetica-Font/Helvetica-BoldOblique.ttf")
    format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Variantes especiales de Helvetica: usar como familias propias */
@font-face {
  font-family: "Helvetica Compressed";
  src: url("assets/fonts/Helvetica-Font/helvetica-compressed-5871d14b6903a.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Rounded";
  src: url("assets/fonts/Helvetica-Font/helvetica-rounded-bold-5871d05ead8de.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src:
    url("assets/fonts/Inter/Inter-Regular.ttf") format("ttf"),
    url("assets/fonts/Inter/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src:
    url("assets/fonts/Inter/Inter-Medium.ttf") format("ttf"),
    url("assets/fonts/Inter/Inter-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src:
    url("assets/fonts/Inter/Inter-SemiBold.ttf") format("ttf"),
    url("assets/fonts/Inter/Inter-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src:
    url("assets/fonts/Inter/Inter-Bold.ttf") format("ttf"),
    url("assets/fonts/Inter/Inter-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --md-blue: #0354de;
  --md-blue-dark: #0341ad;
  --md-purple: #7c3aed;
  --md-dark: #0a0f2c;

  /* Fuentes individuales, disponibles para usar por separado */
  --font-encode-sans: "Encode Sans", sans-serif;
  --font-manrope: "Manrope", sans-serif;
  --font-inclusive-sans: "Inclusive Sans", sans-serif;
  --font-futura-now-headline: "Futura Now Headline", sans-serif;
  --font-helvetica: "Helvetica", Arial, sans-serif;
  --font-sf-pro: "SF Pro", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Stack por defecto: prueba cada fuente en orden y cae en la siguiente si falta */
  --font-default:
    "Encode Sans", "Manrope", "Inclusive Sans", "Futura Now Headline",
    "Helvetica", "SF Pro", "Inter", Arial, sans-serif;
}

/* Clases utilitarias para asignar una tipografía puntual */
.font-encode-sans {
  font-family: var(--font-encode-sans);
}
.font-manrope {
  font-family: var(--font-manrope);
}
.font-inclusive-sans {
  font-family: var(--font-inclusive-sans);
}
.font-futura-now-headline {
  font-family: var(--font-futura-now-headline);
}
.font-helvetica {
  font-family: var(--font-helvetica);
}
.font-sf-pro {
  font-family: var(--font-sf-pro);
}
.font-inter {
  font-family: var(--font-inter);
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--md-dark);
}

a {
  text-decoration: none;
}

/* ===== Header ===== */
.md-topbar {
  height: 4px;
  background: linear-gradient(90deg, var(--md-purple), var(--md-blue));
}

.md-header {
  background: #ffffff;
  padding: 21px 0;
}

.md-header .navbar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--md-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.md-header .navbar-brand .md-logo-text,
.md-footer .navbar-brand .md-logo-text {
  line-height: 1.15;
}

/* Logo subido por el usuario (imagen normal o vía Personalizar > Identidad del sitio) */
.md-header .navbar-brand .md-logo-img,
.md-footer .navbar-brand .md-logo-img,
.md-header .md-custom-logo img,
.md-footer .md-custom-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}

.md-header .md-custom-logo,
.md-footer .md-custom-logo {
  display: flex;
  align-items: center;
}

.md-header .md-custom-logo .custom-logo-link,
.md-footer .md-custom-logo .custom-logo-link {
  display: block;
}

.md-footer .navbar-brand {
  margin-bottom: 1rem;
}

.md-header .navbar-brand .md-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--md-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.md-header .nav-link {
  font-family: Manrope;
  font-weight: 700;
  font-style: Bold;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 40px;
  letter-spacing: 0px;
  color: #000000;
}

.md-header .nav-link:hover {
  color: var(--md-blue);
}

.md-header .dropdown-toggle::after {
  vertical-align: 0.15em;
}

.md-header .dropdown-menu {
  border: none;
  border-radius: 14px;
  padding: 0.5rem 0 0;
  margin-top: 0.75rem;
  min-width: 220px;
  box-shadow: 0 12px 30px rgba(10, 15, 44, 0.15);
  overflow: hidden;
}

.md-header .dropdown-item {
  padding: 0.85rem 1.25rem;
  font-weight: 500;
  color: var(--md-dark);
  border-bottom: 1px solid #eef0f6;
}

.md-header .dropdown-menu li:last-of-type .dropdown-item {
  border-bottom: none;
}

.md-header .dropdown-item:hover,
.md-header .dropdown-item:focus,
.md-header .dropdown-item.active {
  background: var(--md-blue);
  color: #ffffff;
}

.md-btn-demo {
  background: var(--md-blue);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  border: none;
  transition: background 0.2s ease;
}

.md-btn-demo:hover {
  background: var(--md-blue-dark);
  color: #fff !important;
}

/* ===== Footer ===== */
.md-footer {
  background: var(--md-blue);
  color: #ffffff;
  padding: 3rem 0 2rem;
}

.md-footer .navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 27px;
}

.md-footer .md-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--md-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.md-footer h6 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: Manrope;
  font-weight: 600;
  font-style: SemiBold;
  font-size: Body/Size Medium;
  leading-trim: NONE;
  line-height: 140%;
  letter-spacing: 0%;
  vertical-align: middle;
}

.md-footer .footer-phone {
  color: #ffffff;
  font-weight: 600;
}

.md-footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.md-footer ul li {
  margin-bottom: 4px;
}

.md-footer ul li a {
  color: #fff;
  font-family: Helvetica;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 150%;
  letter-spacing: 0%;
  vertical-align: middle;
}

.md-footer ul li a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.md-footer .md-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.md-footer .md-social a {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  text-decoration: none;
}
.md-footer .md-social a:hover {
  text-decoration: none;
}
.md-footer .md-social a i {
  font-size: 20px;
}
.container-max-1000 {
  max-width: 1100px !important;
  padding: 0 !important;
}

/* =========================================================
   1. Cambio de flecha Dropdown por un icono SVG personalizado
   ========================================================= */

/* Agregar el SVG dinámicamente mediante máscara o fondo */
.md-header .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Espaciado entre el texto y la flecha */
}

.md-header .dropdown-toggle::after {
  display: inline-block !important;
  content: "" !important;
  width: 12px; /* Ajusta el ancho según tu diseño */
  height: 12px; /* Ajusta el alto según tu diseño */
  margin-left: 0.4em;
  vertical-align: middle;

  /* Eliminar el triángulo por defecto de Bootstrap */
  border: none !important;

  /* Cargar tu SVG como máscara */
  -webkit-mask-image: url("assets/img/dropdown.svg");
  mask-image: url("assets/img/dropdown.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  /* Color de la flecha (Hereda el color del texto del enlace) */
  background-color: currentColor;

  /* Transición suave por si quieres animarla */
  transition: transform 0.2s ease-in-out;
}

/* Opcional: Rotar la flecha 180° cuando el menú esté desplegado */
.md-header .dropdown-toggle.show::after {
  transform: rotate(180deg);
}

/* (Opcional) Rotar la flecha hacia arriba al pasar el cursor */
.md-header .dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* =========================================================
   2. Activar desplegable (Dropdown) con Hover solo en Escritorio
   ========================================================= */
@media (min-width: 992px) {
  /* Mostrar el menú cuando el cursor pasa sobre el contenedor del dropdown */
  .md-header .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0; /* Elimina el retraso por margen */
    animation: mdFadeIn 0.2s ease-in-out;
  }

  /* Animación opcional de entrada suave */
  @keyframes mdFadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.header-menu-gap {
  gap: 57px;
}
.btn-azul a {
  color: #fff !important;
  font-family: Manrope !important;
  font-weight: 700 !important;
  font-style: Bold !important;
  font-size: 17px !important;
  leading-trim: NONE !important;
  line-height: 22px !important;
  letter-spacing: -0.43px !important;
  color: #ffff !important;
  background-color: #0354de !important;
  border-radius: 47px !important;
  padding: 14px 20px !important;
  border: 1px solid #0354de;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease !important;
}
.btn-azul a:hover {
  border: 1px solid #e2e2e2;
  color: #fff !important;
  background-color: #000000 !important;
}
.md-footer-columns {
  columns: 2;
  column-gap: 1.5rem;
  -webkit-column-gap: 1.5rem;
}

.md-footer-columns li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
@media (max-width: 575.98px) {
  .md-footer-columns {
    columns: 1;
  }
}