/* ============================================================
   Mekanus Producciones — refresh de tipografía, iconografía y UX
   Se carga DESPUÉS de main.css: solo sobrescribe, no reemplaza.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Poppins:wght@300;400;500&display=swap");

:root{
  --mk-orange: #F53900;
  --mk-orange-2: #FF6A2B;
  --mk-ink: #F5F5F3;
}

/* ---------- Barra de navegación (compartida por todas las páginas) ---------- */

.kmel-nav{
  background: black;
  padding: 1rem 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: 'Poppins', sans-serif;
}
.kmel-nav-container{
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.kmel-logo{
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}
.kmel-menu-toggle{
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}
.kmel-nav-links{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.kmel-nav-links li a{
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  transition: color 0.3s ease;
}
.kmel-nav-links li a:hover{
  color: var(--mk-orange);
}
.kmel-nav-links .offcanvas__social{
  display: flex;
}
.kmel-nav-links .offcanvas__social .ms-footer-social{
  display: flex;
  gap: 12px;
}
.kmel-nav-links .offcanvas__social a{
  color: #fff;
  font-size: .85rem;
  letter-spacing: .04em;
}
.kmel-nav-links .offcanvas__social a:hover{
  color: var(--mk-orange);
}
@media (max-width: 768px){
  .kmel-menu-toggle{
    display: block;
  }
  .kmel-nav-links{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: none;
    margin-top: 1rem;
    gap: 1rem;
  }
  .kmel-nav-links.kmel-show{
    display: flex;
  }
  .kmel-nav-links li{
    text-align: left;
  }
}

/* ---------- Tipografía ---------- */

body{
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6,
.ms-banner2-title,
.ms-find-musician-title,
.section__title,
.ms-footer2-title{
  font-family: 'Manrope', sans-serif;
  text-transform: none;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Hero H1: es el título gigante decorativo (marca de agua) del tema.
   La plantilla la trae enorme (330px en desktop); se reduce un poco
   en cada breakpoint para que siga siendo grande pero no domine todo. */
h1.ms-banner2-title{
  font-weight: 200;
  letter-spacing: -0.02em;
  font-size: 240px !important;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px){
  h1.ms-banner2-title{
    font-size: 190px !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px){
  h1.ms-banner2-title{
    font-size: 150px !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px){
  h1.ms-banner2-title{
    font-size: 100px !important;
  }
}
@media (max-width: 575px){
  h1.ms-banner2-title{
    font-size: 56px !important;
  }
}

.ms-find-musician-title{
  font-weight: 200;
  letter-spacing: -0.02em;
}
.ms-find-musician-title .ms-text-{
  font-weight: 500;
}

.section__title{
  font-weight: 300;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
}
.section__title .animated-underline{
  font-weight: 500;
}

p, li, span, a{
  font-weight: 300;
}

/* La plantilla pone text-transform:capitalize en casi todo, lo que en
   español convierte frases en "Cada Palabra En Mayúscula". Se desactiva
   en formularios y texto corrido; los títulos ya quedaron sin esto arriba. */
.nice-select,
.nice-select .current,
.nice-select .list,
.nice-select .option,
select,
option,
input,
textarea,
p,
.ms-tm2-text,
.section-title__tagline,
.ms-find-musician-title span,
[class*="ms-text-"],
.ms-footer2-contact li a[href^="mailto:"],
.ms-footer2-contact li a[href^="http"]{
  text-transform: none;
}

/* ---------- Iconos SVG custom (reemplazan flaticon genérico) ---------- */

.mk-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.mk-icon svg{
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Iconos de contacto — círculo con trazo fino, sin genérico Font Awesome */
.ms-footer2-contact li .mk-icon,
.ms-round-icon .mk-icon{
  color: var(--mk-orange);
}

/* ---------- Refinamiento visual menor ---------- */

.whatsapp-float img{
  filter: none;
}

/* ---------- Franja de clientes: sin tarjeta, logos sueltos, más juntos, loop continuo ---------- */

.ms-popular-active{
  overflow: hidden;
}
.ms-popular-active .swiper-wrapper{
  transition-timing-function: linear !important;
}
.ms-popular-active .swiper-slide{
  width: auto !important;
}
.ms-popular-active .ms-popular__thumb{
  border-radius: 0;
  cursor: default;
  background: none;
  width: 90px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ms-popular-active .ms-popular__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(0.9) brightness(1.4);
  opacity: 0.55;
  transition: filter .4s cubic-bezier(.16,1,.3,1), opacity .4s cubic-bezier(.16,1,.3,1);
}
.ms-popular-active .ms-popular__thumb:hover img{
  filter: none;
  opacity: 1;
}
/* los enlaces de esta franja no llevan a ningún sitio: se elimina el overlay/flecha heredado de la plantilla */
.ms-popular-active .ms-popular__link,
.ms-popular-active .ms-popular-overlay{
  display: none !important;
}

/* ---------- Mapa con tinte oscuro acorde al resto del sitio ---------- */

.mk-map{
  line-height: 0;
  background: #0d0d0d;
}
.mk-map iframe{
  filter: grayscale(1) invert(92%) contrast(83%);
  display: block;
}

/* ---------- Tarjetas de "Nuestros Servicios": título a la izquierda + icono grande de línea fina ---------- */

#servicios .ms-event2-top,
#servicios .section__title-wrapper{
  text-align: left;
}
#servicios .section__title .animated-underline{
  margin: 0;
}
#servicios .ms-event2-item{
  height: 100%;
  padding: 34px 32px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
#servicios .ms-event2-item:hover{
  border-color: var(--mk-orange);
}
.mk-service-icon{
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  color: var(--mk-orange);
}
.mk-service-icon .mk-icon{
  width: 100%;
  height: 100%;
}
.mk-service-icon .mk-icon svg{
  stroke-width: 1.25;
}
#servicios .ms-event-title{
  font-size: 19px;
  letter-spacing: -0.01em;
}
#servicios .ms-event-text{
  color: var(--clr-text-5);
  line-height: 1.7;
}

a{
  transition: color .25s cubic-bezier(.16,1,.3,1), opacity .25s cubic-bezier(.16,1,.3,1);
}

/* ---------- Accesibilidad: la plantilla quita el outline de foco en
   enlaces, botones e inputs sin poner nada en su lugar. Se restaura
   un anillo de foco visible solo para navegación por teclado. ---------- */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nice-select:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--mk-orange) !important;
  outline-offset: 2px !important;
}

a, button, .button, [role="button"], .kmel-menu-toggle,
.sidebar__toggle, .offcanvas__close button{
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce){
  *{
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ---------- Tarjetas de video ---------- */

.ms-app-right video{
  border-radius: 16px;
  overflow: hidden;
  display: block;
}

/* ---------- Cotizador: sin rosa de la plantilla, menos redondeado ---------- */

.ms-banner__from-inner{
  border-radius: 14px;
}
.ms-banner__form-select{
  border-radius: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px){
  .ms-banner__form-select{
    border-radius: 10px;
  }
}
.ms-white-bg{
  color: var(--mk-ink);
  border-radius: 10px;
  border: 1px solid transparent;
}
.ms-white-bg:hover{
  background: var(--mk-orange);
  color: #fff;
}

/* ---------- Preloader moderno: anillo girando + logo con pulso ---------- */

.mk-loader{
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-loader__ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.mk-loader__track{
  fill: none;
  stroke: rgba(245, 57, 0, 0.15);
  stroke-width: 3;
}
.mk-loader__arc{
  fill: none;
  stroke: var(--mk-orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 245;
  transform-origin: 60px 60px;
  animation: mk-spin 1.4s cubic-bezier(.65,0,.35,1) infinite;
}
.mk-loader__logo{
  width: 64px;
  height: auto;
  animation: mk-pulse 1.8s ease-in-out infinite;
}

@keyframes mk-spin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes mk-pulse{
  0%, 100% { opacity: .55; transform: scale(0.94); }
  50%      { opacity: 1;   transform: scale(1); }
}

#preloader{
  transition: opacity .4s ease-out;
}

@media (prefers-reduced-motion: reduce){
  .mk-loader__arc,
  .mk-loader__logo{
    animation: none !important;
  }
  .mk-loader__logo{
    opacity: 1;
  }
}