/* =====================================================
   CDR MODERN - Record Label Design System
   Inspired by: Def Jam, XL Recordings, Sub Pop
   ===================================================== */

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,900;1,700&family=DM+Mono:wght@400;500&display=swap');

/* --- CSS VARIABLES --- */
:root {
  --cdr-black:    #050505;
  --cdr-dark:     #0f0f0f;
  --cdr-surface:  #161616;
  --cdr-border:   #222222;
  --cdr-red:      #E63946;
  --cdr-red-dim:  #b32d38;
  --cdr-gold:     #D4A843;
  --cdr-white:    #F5F5F5;
  --cdr-muted:    #888888;
  --cdr-font-head: 'Barlow Condensed', sans-serif;
  --cdr-font-body: 'Space Grotesk', sans-serif;
  --cdr-font-mono: 'DM Mono', monospace;
}

/* =====================================================
   GLOBAL RESET / BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body,
.ast-container,
#page {
  background-color: var(--cdr-black) !important;
  color: var(--cdr-white) !important;
  font-family: var(--cdr-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* =====================================================
   HEADER / NAVEGACIÓN
   ===================================================== */
#masthead,
.ast-primary-header-bar,
.site-header,
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
  background-color: rgba(5, 5, 5, 0.96) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--cdr-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Logo */
.ast-logo-title-inline,
.site-title a,
.ast-site-title a {
  color: var(--cdr-white) !important;
  font-family: var(--cdr-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
}

.custom-logo {
  filter: brightness(0) invert(1) !important;
}

/* Navigation Links */
.main-navigation a,
.main-header-menu a,
.main-header-bar-navigation a,
.ast-builder-menu a {
  color: var(--cdr-muted) !important;
  font-family: var(--cdr-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
}

.main-navigation a:hover,
.main-header-menu .menu-item:hover > a,
.main-header-bar-navigation .menu-item:hover > a {
  color: var(--cdr-white) !important;
}

/* Mobile menu button */
.ast-mobile-menu-trigger-fill,
.ast-button-wrap .ast-mobile-svg,
button.menu-toggle {
  background: transparent !important;
  border: 1px solid var(--cdr-border) !important;
  color: var(--cdr-white) !important;
  fill: var(--cdr-white) !important;
}

.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-header-wrap .ast-mobile-header-content {
  background-color: var(--cdr-dark) !important;
  border-right: 1px solid var(--cdr-border) !important;
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.elementor-section:first-of-type,
section[data-id]:first-child {
  position: relative;
}

/* Hero text overrides */
.elementor-widget-heading h1,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--cdr-font-head) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 0.92 !important;
  color: var(--cdr-white) !important;
}

/* ALL headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
  font-family: var(--cdr-font-head) !important;
  font-weight: 700 !important;
  color: var(--cdr-white) !important;
  letter-spacing: -0.01em !important;
}

/* Eyebrow labels (uppercase small text) */
.elementor-heading-title[style*="letter-spacing"],
.elementor-widget-text-editor p:first-child {
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--cdr-red) !important;
}

/* =====================================================
   ELEMENTOR SECTIONS
   ===================================================== */

/* Base section dark styling */
.elementor-section,
.elementor-top-section {
  background-color: var(--cdr-black) !important;
}

/* Alternate section bg */
.elementor-section:nth-child(even) .elementor-container {
  /* subtle differentiation */
}

/* Sections with light backgrounds → force dark */
.elementor-section[data-settings*="background_color"],
.elementor-element[data-settings*="background_color"] {
  background-color: var(--cdr-dark) !important;
}

/* White/light backgrounds → dark */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: rgba(255, 255, 255"],
[style*="background-color: #f"],
.elementor-background-color {
  background-color: var(--cdr-dark) !important;
}

/* =====================================================
   BODY TEXT / PARAGRAPHS
   ===================================================== */
p,
.elementor-widget-text-editor,
.elementor-text-editor,
body {
  font-family: var(--cdr-font-body) !important;
  color: var(--cdr-muted) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

.elementor-widget-text-editor a,
a {
  color: var(--cdr-red) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

a:hover { opacity: 0.8 !important; }

/* =====================================================
   DIVIDERS
   ===================================================== */
.elementor-divider-separator {
  border-color: var(--cdr-border) !important;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.elementor-button,
.wp-block-button__link,
.ast-button,
input[type="submit"],
button[type="submit"] {
  background: var(--cdr-red) !important;
  color: var(--cdr-white) !important;
  font-family: var(--cdr-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 14px 32px !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  cursor: pointer !important;
}

.elementor-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--cdr-red-dim) !important;
  transform: translateY(-1px) !important;
}

/* Outline variant */
.elementor-button.elementor-size-sm,
.elementor-button-link {
  background: transparent !important;
  border: 1px solid var(--cdr-border) !important;
  color: var(--cdr-white) !important;
}

.elementor-button.elementor-size-sm:hover {
  border-color: var(--cdr-white) !important;
}

/* =====================================================
   IMAGES
   ===================================================== */
.elementor-widget-image img,
.wp-post-image,
img.attachment-thumbnail {
  border-radius: 3px !important;
  transition: transform 0.4s ease, filter 0.3s ease !important;
  filter: grayscale(15%) !important;
}

.elementor-widget-image img:hover {
  transform: scale(1.02) !important;
  filter: grayscale(0%) !important;
}

/* =====================================================
   ICON LIST (menu items in hero)
   ===================================================== */
.elementor-icon-list-item a,
.elementor-icon-list-text {
  color: var(--cdr-muted) !important;
  font-family: var(--cdr-font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  transition: color 0.2s ease !important;
}

.elementor-icon-list-item:hover a,
.elementor-icon-list-item:hover .elementor-icon-list-text {
  color: var(--cdr-white) !important;
}

.elementor-icon-list-icon svg,
.elementor-icon-list-icon i {
  color: var(--cdr-red) !important;
  fill: var(--cdr-red) !important;
}

/* =====================================================
   TESTIMONIAL / QUOTE
   ===================================================== */
.elementor-testimonial-content,
blockquote,
.wp-block-quote p {
  font-family: var(--cdr-font-head) !important;
  font-style: italic !important;
  font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
  font-weight: 600 !important;
  color: var(--cdr-white) !important;
  line-height: 1.3 !important;
}

.elementor-testimonial-name {
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--cdr-red) !important;
}

/* =====================================================
   SOCIAL ICONS
   ===================================================== */
.elementor-social-icon,
.ast-builder-social-element svg,
.ast-builder-social-element path {
  color: var(--cdr-muted) !important;
  fill: var(--cdr-muted) !important;
  transition: fill 0.2s ease, color 0.2s ease !important;
}

.elementor-social-icon:hover,
.ast-builder-social-element:hover svg,
.ast-builder-social-element:hover path {
  fill: var(--cdr-white) !important;
  color: var(--cdr-white) !important;
}

/* =====================================================
   CONTACT FORM
   ===================================================== */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  background: var(--cdr-surface) !important;
  border: 1px solid var(--cdr-border) !important;
  border-radius: 2px !important;
  color: var(--cdr-white) !important;
  font-family: var(--cdr-font-body) !important;
  font-size: 0.9rem !important;
  padding: 14px 16px !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
input:focus, textarea:focus {
  border-color: var(--cdr-red) !important;
  outline: none !important;
}

.wpforms-field label,
label {
  color: var(--cdr-muted) !important;
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer,
#colophon,
.ast-footer-main-container,
footer[itemtype*="WPFooter"] {
  background-color: var(--cdr-dark) !important;
  border-top: 1px solid var(--cdr-border) !important;
  color: var(--cdr-muted) !important;
}

.ast-footer-copyright,
.site-footer .ast-container,
footer p,
footer span,
footer a {
  color: var(--cdr-muted) !important;
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
}

footer a:hover { color: var(--cdr-white) !important; }

/* Footer menus */
.footer-widget-area,
.ast-footer-widget-area {
  background: var(--cdr-dark) !important;
}

.widget-title,
.footer-widget .widget-title {
  font-family: var(--cdr-font-head) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--cdr-white) !important;
  border-bottom: 1px solid var(--cdr-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

/* =====================================================
   SPECIAL ACCENTS
   ===================================================== */

/* Red left border accent on headings */
.elementor-widget-heading:not(.elementor-widget-heading:first-child) h2::before,
.elementor-widget-heading h3::before {
  content: '' !important;
  display: block !important;
  width: 32px !important;
  height: 3px !important;
  background: var(--cdr-red) !important;
  margin-bottom: 16px !important;
}

/* Noise grain overlay on hero */
.elementor-section:first-child::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.06 !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cdr-black); }
::-webkit-scrollbar-thumb { background: var(--cdr-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cdr-muted); }

/* =====================================================
   MUSIC GENRE SECTION (numbered/tagged sections)
   ===================================================== */
.elementor-col-50 .elementor-widget-heading h3,
.elementor-col-33 .elementor-widget-heading h3 {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

/* Tag pills */
.elementor-widget-text-editor strong {
  background: var(--cdr-surface) !important;
  border: 1px solid var(--cdr-border) !important;
  color: var(--cdr-muted) !important;
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  display: inline-block !important;
  margin: 2px !important;
}

/* =====================================================
   SECTION SEPARATORS
   ===================================================== */
.elementor-section + .elementor-section {
  border-top: 1px solid var(--cdr-border) !important;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes cdr-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.elementor-widget {
  animation: cdr-fade-up 0.5s ease both;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
  h1, .elementor-heading-title[class*="elementor-size-xxl"] {
    font-size: clamp(2.8rem, 12vw, 5rem) !important;
  }

  .elementor-section,
  .elementor-top-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =====================================================
   CDR MODERN - REFINEMENTS v1.1
   Fix: remove uppercase from body text, improve readability
   ===================================================== */

/* Body text - NO uppercase, readable */
p,
.elementor-widget-text-editor p,
.elementor-text-editor p,
.elementor-widget-text-editor,
.elementor-text-editor {
  text-transform: none !important;
  font-family: var(--cdr-font-body) !important;
  color: rgba(245,245,245,0.65) !important;
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Bold text in paragraphs */
.elementor-widget-text-editor p strong,
.elementor-widget-text-editor strong {
  background: var(--cdr-surface) !important;
  border: 1px solid var(--cdr-border) !important;
  color: var(--cdr-white) !important;
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

/* Headings - bold condensed ALL CAPS */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--cdr-font-head) !important;
  font-weight: 900 !important;
  color: var(--cdr-white) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
}

h2.elementor-heading-title { font-size: clamp(2.5rem, 7vw, 5rem) !important; }
h3.elementor-heading-title { font-size: clamp(1.8rem, 5vw, 3.5rem) !important; }
h4.elementor-heading-title { font-size: clamp(1.2rem, 3vw, 2rem) !important; }

/* Small label headings (eyebrow text like NUESTRO FUNDADOR) */
.elementor-heading-title[style*="12px"],
.elementor-heading-title[style*="font-size: 12"],
.elementor-heading-title[style*="font-size:12"] {
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  color: var(--cdr-red) !important;
  font-family: var(--cdr-font-mono) !important;
  font-weight: 500 !important;
}

/* Fix the teal/blue background sections → dark */
.elementor-section[data-settings],
section.elementor-section {
  background-color: var(--cdr-black) !important;
}

/* Testimonial block improvement */
.elementor-testimonial-wrapper {
  background: var(--cdr-surface) !important;
  border: 1px solid var(--cdr-border) !important;
  border-radius: 4px !important;
  padding: 40px !important;
}

.elementor-testimonial-content {
  font-family: var(--cdr-font-head) !important;
  font-style: italic !important;
  font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
  font-weight: 600 !important;
  color: var(--cdr-white) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}

.elementor-testimonial-name {
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--cdr-red) !important;
  margin-top: 24px !important;
}

.elementor-testimonial-job {
  color: var(--cdr-muted) !important;
  font-family: var(--cdr-font-mono) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* Divider lines */
.elementor-widget-heading::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--cdr-red);
  margin-bottom: 12px;
}

/* Section inner padding */
.elementor-section > .elementor-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
}

@media (max-width: 768px) {
  .elementor-section > .elementor-container {
    padding: 48px 20px !important;
  }
}

/* Header stays sticky and clean */
#masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 1px 0 var(--cdr-border) !important;
}

/* Hide admin bar top margin */
html.logged-in.admin-bar #page {
  margin-top: 0 !important;
}

/* Social icons sidebar (hero) */
.elementor-widget-social-icons .elementor-social-icon {
  background: transparent !important;
  border: 1px solid var(--cdr-border) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.elementor-widget-social-icons .elementor-social-icon:hover {
  background: var(--cdr-red) !important;
  border-color: var(--cdr-red) !important;
}

.elementor-widget-social-icons .elementor-social-icon i,
.elementor-widget-social-icons .elementor-social-icon svg {
  color: var(--cdr-muted) !important;
  fill: var(--cdr-muted) !important;
  font-size: 0.8rem !important;
}

.elementor-widget-social-icons .elementor-social-icon:hover i,
.elementor-widget-social-icons .elementor-social-icon:hover svg {
  color: var(--cdr-white) !important;
  fill: var(--cdr-white) !important;
}

/* Image widget border */
.elementor-widget-image .elementor-image {
  position: relative !important;
}

.elementor-widget-image .elementor-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid rgba(230,57,70,0.3) !important;
  pointer-events: none !important;
  border-radius: 3px !important;
}

/* Music icon decoration */
.elementor-icon i,
.elementor-icon svg {
  color: var(--cdr-red) !important;
  fill: var(--cdr-red) !important;
}