.elementor-989 .elementor-element.elementor-element-5dd2e0c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:1em;--padding-bottom:0em;--padding-left:1em;--padding-right:1em;}.elementor-989 .elementor-element.elementor-element-2bc97c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-989 .elementor-element.elementor-element-a580993 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-989 .elementor-element.elementor-element-1cb2ae4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-989 .elementor-element.elementor-element-668e1da > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-6a29fa9 *//* ============================================= */
/* 1. Contact Hero Section (Creative Title Box) */
/* ============================================= */
.ns-contact-hero {
  padding-top: var(--space-xxxl, 100px); 
  padding-bottom: var(--space-xl, 64px); 
  background-color: var(--clr-bg-dark, #1F1F1F); 
  background-size: cover;
  background-position: center center; 
  position: relative;
  min-height: 45vh; 
  display: flex; 
  align-items: flex-end; 
  background-image: url('https://academiademusicaclaroscuro.com/wp-content/uploads/2025/04/claroscuro-concierto1.jpg'); 
}

.ns-contact-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(31, 31, 31, 0.9) 0%, rgba(31, 31, 31, 0.4) 100%); 
  z-index: 1;
}

.ns-contact-hero-container {
  position: relative; 
  z-index: 2;
  width: 100%; 
  padding-left: var(--space-md, 24px); 
  padding-right: var(--space-md, 24px);
}

/* Enhanced Content Box */
.ns-contact-hero-content--enhanced {
  background-color: var(--clr-bg-card, #FFFFFF);
  padding: var(--space-xl, 64px) var(--space-lg, 40px); 
  border-radius: var(--radius-xl, 16px); 
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); 
  text-align: center;
  max-width: 520px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-bottom: calc(-1 * var(--space-lg)); 
  position: relative; 
}

.ns-contact-hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.8rem); 
  line-height: 1.25; 
  color: var(--clr-text-dark, #212529);
  margin: 0; 
  position: relative; /* Needed for positioning pseudo-elements */
  z-index: 1;
  display: inline-block; /* Contain pseudo-elements better */
}

/* Subtle Music Icons (PNGs) Positioned Around Title */
.ns-contact-hero-title::before,
.ns-contact-hero-title::after {
    content: '';
    position: absolute;
    width: 45px; /* Adjust size for PNGs */
    height: 45px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.07; /* Adjust opacity as needed */
    z-index: -1; /* Behind text */
    /* Optional: Apply a filter for slight desaturation/color tint if needed */
    /* filter: grayscale(50%) sepia(30%) brightness(1.1); */ 
}

/* === Piano Icon === */
.ns-contact-hero-title::before {
    background-image: url('https://academiademusicaclaroscuro.com/wp-content/uploads/2025/04/claroscuro-clases-de-piano-cancun.png'); 
    top: -20px; /* Position top-left relative to title */
    left: -55px;
    transform: rotate(-15deg);
}

/* === Acoustic Guitar Icon === */
.ns-contact-hero-title::after {
    background-image: url('https://academiademusicaclaroscuro.com/wp-content/uploads/2025/04/claroscuro-clases-de-guitarra-acustica-cancun.png'); 
    bottom: -15px; /* Position bottom-right relative to title */
    right: -60px;
    transform: rotate(10deg) scaleX(-1); /* Flip horizontally for variation */
}

/* Responsive Hero Adjustments */
@media (max-width: 991px) {
   .ns-contact-hero {
     min-height: 40vh; 
   }
   .ns-contact-hero-content--enhanced {
       max-width: 480px;
   }
   .ns-contact-hero-title::before,
   .ns-contact-hero-title::after {
      width: 35px; height: 35px; /* Slightly smaller icons */
   }
    .ns-contact-hero-title::before { top: -15px; left: -45px; }
    .ns-contact-hero-title::after { bottom: -10px; right: -50px; }
}

@media (max-width: 767px) {
  .ns-contact-hero {
    padding-top: var(--space-xxl, 80px);
    min-height: 35vh; 
  }
  .ns-contact-hero-content--enhanced {
    padding: var(--space-lg, 40px) var(--space-md, 24px); 
    max-width: 90%; 
    margin-bottom: calc(-1 * var(--space-md)); 
  }
   .ns-contact-hero-title {
      font-size: clamp(2rem, 5.5vw, 3rem); 
   }
    .ns-contact-hero-title::before,
    .ns-contact-hero-title::after {
      width: 30px; height: 30px; /* Even smaller icons */
      opacity: 0.06;
   }
    .ns-contact-hero-title::before { top: -10px; left: -35px; }
    .ns-contact-hero-title::after { bottom: -8px; right: -40px;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a580993 *//* ============================================= */
/* 2. Global Container (Applied within sections) */
/* ============================================= */
.ns-contact-container {
  max-width: 1140px; 
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md, 24px); 
  padding-right: var(--space-md, 24px);
}

/* ============================================= */
/* 3. Main Content Section (Two Columns)        */
/* ============================================= */
.ns-contact-main-section {
  padding-top: var(--space-xxxl, 100px); 
  /* Optional: Reduce top padding slightly if hero box overlaps */
  /* padding-top: calc(var(--space-xxxl, 100px) - var(--space-lg)); */ 
  padding-bottom: var(--space-xxxl, 100px); 
  background-color: var(--clr-bg-light, #F8F9FA);
  position: relative; 
  z-index: 1;
}

.ns-contact-columns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: var(--space-xl, 64px); 
  align-items: start; 
}

@media (max-width: 991px) {
  .ns-contact-columns-grid {
    grid-template-columns: 1fr; 
    gap: var(--space-xl, 64px); 
  }
}

.ns-contact-column-left { }
.ns-contact-column-right { }

/* ============================================= */
/* 4. Left Column Content (Intro, WA, Social)   */
/* ============================================= */
.ns-contact-intro-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem); 
  line-height: 1.3;
  color: var(--clr-text-dark, #212529);
  margin-bottom: var(--space-md, 24px);
}

.ns-contact-intro-cta {
  font-family: 'Roboto', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--clr-text-secondary, #6C757D);
  margin-bottom: var(--space-lg, 40px);
}

/* Enhanced WA Button Style */
.ns-contact-wa-button--enhanced {
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  padding: var(--space-md, 24px) var(--space-lg, 40px); 
  font-size: 1.05rem; 
  font-weight: 600; 
  font-family: 'Poppins', sans-serif; 
  color: var(--clr-cta-text-light, #FFFFFF); 
  text-decoration: none;
  border-radius: var(--radius-lg, 12px); 
  box-shadow: var(--shadow-sm, 0 4px 15px rgba(0,0,0,0.05)), 0 2px 4px rgba(0,0,0,0.05) inset; 
  background-color: var(--clr-accent-primary, #0D6E7A); 
  background-image: linear-gradient(to bottom, hsl(188, 82%, 30%), hsl(188, 82%, 24%)); 
  border: none; 
  transition: all 0.3s var(--timing-function-smooth, cubic-bezier(0.25, 0.8, 0.25, 1));
  cursor: pointer;
  margin-bottom: var(--space-xl, 64px); /* Add margin below button before social */
}

.ns-contact-wa-button--enhanced:hover {
  background-image: linear-gradient(to bottom, hsl(188, 82%, 28%), hsl(188, 82%, 22%)); 
  transform: translateY(-3px) scale(1.02); 
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0,0,0,0.1)), 0 1px 2px rgba(0,0,0,0.05) inset; 
  color: var(--clr-cta-text-light, #FFFFFF); 
}
.ns-contact-wa-button--enhanced:active {
   transform: translateY(-1px) scale(0.99);
   box-shadow: var(--shadow-sm, 0 4px 15px rgba(0,0,0,0.05)), 0 3px 6px rgba(0,0,0,0.1) inset; 
}

.ns-contact-wa-button--enhanced i {
  margin-right: var(--space-sm, 16px); 
  font-size: 1.1em; 
}

/* Social Media Styles (Now in Left Column) */
.ns-contact-social-media {
  /* margin-top already handled by button margin-bottom */
  padding-top: var(--space-md, 24px); 
  border-top: 1px solid var(--clr-border-light, #E0E0E0); 
}

.ns-contact-social-heading {
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   font-size: 1rem;
   color: var(--clr-text-dark, #212529);
   margin-bottom: var(--space-sm, 16px);
}

.ns-contact-social-list {
  display: flex;
  align-items: center;
  gap: var(--space-md, 24px); 
}

.ns-contact-social-link {
  display: inline-flex;
  color: var(--clr-text-secondary, #6C757D); 
  font-size: 1.1rem; 
  transition: color 0.3s ease, transform 0.3s ease;
}

.ns-contact-social-link:hover,
.ns-contact-social-link:focus-visible {
  color: var(--clr-accent-primary, #0D6E7A); 
  transform: scale(1.1);
  outline: none;
}
.ns-contact-social-link:focus-visible {
  outline: 2px solid var(--clr-accent-tertiary, #FD7E14);
  outline-offset: 3px;
  border-radius: 50%; 
}


/* ============================================= */
/* 5. Right Column Content (Details Only)       */
/* ============================================= */
.ns-contact-pretitle {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--clr-accent-primary, #0D6E7A); 
  margin-bottom: var(--space-xs, 8px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ns-contact-block-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 2.5rem); 
  line-height: 1.3;
  color: var(--clr-text-dark, #212529);
  margin-bottom: var(--space-md, 24px);
}

.ns-contact-block-text {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--clr-text-secondary, #6C757D);
  margin-bottom: var(--space-lg, 40px);
}

/* Details Grid */
.ns-contact-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); 
  gap: var(--space-md, 24px); 
  /* Removed bottom margin as it's the last element */
  /* margin-bottom: var(--space-lg, 40px); */ 
}

.ns-contact-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 16px); 
  background-color: transparent; 
  padding: 0; 
  border-radius: 0;
  box-shadow: none;
  border: none;
  transition: none; 
}

.ns-contact-detail-icon-wrapper {
  flex-shrink: 0;
  width: 50px; 
  height: 50px;
  background-color: var(--clr-accent-primary, #0D6E7A); 
  border-radius: var(--radius-md, 8px); 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.ns-contact-detail-item:hover .ns-contact-detail-icon-wrapper {
    background-color: var(--clr-text-dark, #212529); 
}

.ns-contact-detail-icon-wrapper i {
  color: var(--clr-bg-card, #FFFFFF); 
  font-size: 1.4rem; 
}

.ns-contact-detail-text {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
}

.ns-contact-detail-text strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem; 
  color: var(--clr-text-dark, #212529);
  margin-bottom: 2px; 
}

.ns-contact-detail-text span,
.ns-contact-detail-text a span { 
  font-size: 0.9rem; 
  color: var(--clr-text-secondary, #6C757D);
}

.ns-contact-info-link { 
  text-decoration: none;
  color: inherit; 
  transition: color 0.3s ease;
}

.ns-contact-info-link:hover span,
.ns-contact-info-link:focus-visible span {
  color: var(--clr-accent-primary, #0D6E7A); 
}
.ns-contact-info-link:focus-visible {
   outline: 2px solid var(--clr-accent-tertiary, #FD7E14);
   outline-offset: 2px;
   border-radius: var(--radius-sm, 6px);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-668e1da *//* ============================================= */
/* 6. Maps Section                              */
/* ============================================= */
.ns-contact-maps-section {
  padding: var(--space-xxxl, 100px) 0;
  background-color: var(--clr-bg-card, #FFFFFF); /* White background for maps */
  position: relative; /* Good practice for sections */
  z-index: 1; /* Ensure it's above hero overlap if used */
}

/* Container class is assumed to be global or defined earlier */
/* .ns-contact-container { ... } */

.ns-section-heading.ns-contact-maps-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem); 
  line-height: 1.3;
  color: var(--clr-text-dark, #212529);
  text-align: center;
  margin-bottom: var(--space-xl, 64px); 
}

.ns-contact-maps-grid {
  display: grid;
  /* Responsive grid, ensures maps don't get too small */
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); 
  gap: var(--space-xl, 64px); /* Gap between maps */
}

.ns-contact-map-instance {
  /* Container for each map + its heading */
}

.ns-contact-map-instance-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600; 
  font-size: 1.3rem; /* Heading for each map */
  color: var(--clr-text-dark, #212529);
  margin-bottom: var(--space-md, 24px);
  text-align: center;
}

.ns-contact-map {
  width: 100%;
  height: 400px; /* Default height for the map */
  border-radius: var(--radius-lg, 12px); /* Rounded corners */
  overflow: hidden; /* Ensure iframe respects border-radius */
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0,0,0,0.08)); /* Subtle shadow */
  border: 1px solid var(--clr-border-light, #E0E0E0); /* Optional subtle border */
}

.ns-contact-map iframe {
  display: block; /* Remove extra space below iframe */
  width: 100%;
  height: 100%;
  border: 0; /* Remove iframe default border */
}/* End custom CSS */