/*--------------------------------------------------------------
# CLAUDIO NOVILLO / cnproducciones
--------------------------------------------------------------*/    
body{margin:0; font-family:Arial,sans-serif; background:#000; color:#fff; background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)), url('https://xn--lacompaera-z9a.com/Advert/hero-bg.jpg'); background-size:cover; background-attachment:fixed; background-position:center;}


  
#header{position:fixed; top:0; width:100%; z-index:999; background:rgba(0,0,0,0.40); backdrop-filter:blur(4px)}
#header .container{display:flex; justify-content:center; padding:10px 0}
    
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  text-transform: uppercase;
  font-size: 0.7em;}

.nav-menu li {margin: 0 25px;}
.nav-menu a {color: #dedede;  text-decoration: none;  font-weight: bold;}
.nav-menu a:hover { color:#72B9BB;}

#hero{text-align:center; padding:85px 25px}
.hero-container{margin-top:60px; max-width:800px; margin-left:auto; margin-right:auto}

/* H1 - Bienvenidos */
#hero .hero-container h1{font-style: italic;
  font-size:2.7em;
  font-weight:600;
  letter-spacing:4px;
  color:#fff;
opacity:0.8;  
margin:20px 0 8px 0;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
}

/* H2 - Buena Música... */
#hero .hero-container h2{color:cecece; text-transform:uppercase; font-size:0.8em; font-weight:400; letter-spacing:1px; margin:0 0 25px 0; line-height:1.4; opacity:0.6; }

.section-title{text-align:center; font-size:1em; font-weight:400; letter-spacing: 5px; color:#168ABB; margin-bottom:1em; text-transform: uppercase; opacity:0.6;}

.section-title-divider{width:60px; height:3px; background:#f0c040; margin:0 auto 15px auto}

#cajon-adverize{text-align:center; padding:10px 0}

.image-grid{display:grid; grid-template-columns:repeat(4, 250px); gap:8px; justify-content:center; align-items:center}
.image-grid div{width:260px; height:280px; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.25); border-radius:8px; padding:5px}
.image-grid img{max-width:100%; max-height:100%; border:2px solid rgba(255,255,255,0.2); border-radius:6px; transition:transform 0.3s}
.image-grid img:hover{transform:scale(1.08); border-color:#f0c040; filter: grayscale(80%);}
.service-container{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:25px; padding:10px 0}
.service_column{display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.25); border-radius:6px; padding:8px}
.service_column img{max-width:100%; height:auto}

#contact{text-align:center; padding:30px 15px}
.contact-row{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:40px; max-width:1100px; margin:20px auto 0}
.logo-contact{flex-shrink:0} 
.logo-contact img, #logocompa{width:180px !important; max-width:100% !important; height:auto !important; border:2px solid rgba(255,255,255,0.2); border-radius:8px; object-fit:contain}

.info{text-align:left; min-width:280px;}
.info p{margin:12px 0; display:flex; align-items:center; line-height:1.4}
.info, .info p{ opacity:1 !important; font-size:0.95em !important; color:#dedede !important; text-shadow:none !important;  font-weight:300 !important; }
.orang{color:#D6BE85; font-weight:bold; font-size:1em !important;}


.enlaces-bloque {
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin: 40px 0;
  padding: 20px 0;
  text-align: center;
}

.enlaces-footer {list-style: none;
  display: flex; justify-content: center;
  gap: 40px;  margin: 0; padding: 0;
}

.enlaces-footer li { margin: 0;}

.enlaces-footer img { width: 100px;  height: auto;  transition: transform 0.3s ease, opacity 0.3s ease;}

.enlaces-footer img:hover {transform: scale(1.1); opacity: 0.8;}



#footer {
 background: rgba(255,255,255,0.08); /* un poco más claro que 0.15 sobre negro */
  text-align: center;
  padding: 20px 10px;
  margin-top: 30px;}

#footer .copyright { color: #FFFFFF;
   text-align: center;
  margin-top: 1em;
  padding: 10px 20px;
  font-size: 0.8em;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: block;
}

#footer .copyright a {
  color: #BBE9FB;
  text-decoration: none;
  font-weight: bold;
}
#footer .copyright a:hover {
  color:#90F993; 
  font-weight: 700;
  text-decoration: none;
}

 @media(max-width:768px){
  /* HEADER */
  #header .container{padding:8px 0}
  .nav-menu{font-size:0.6em; gap:5px}
  .nav-menu li{margin:0 10px}

  /* HERO */
  #hero{padding:70px 15px 25px 15px}
  .hero-container{margin-top:40px}
  #hero .hero-container h1{font-size:1.6em; letter-spacing:2px}
  #hero .hero-container h2{font-size:0.95em; padding:0 10px}
  #hero .hero-container > img{width:260px !important; height:auto !important}

  /* PLAYER - pasa a columna en celular */
  .compa-player{flex-direction:column; padding:15px; gap:12px; max-width:95%}
  .compa-play-row{width:100%; justify-content:center}
  .compa-vu{display:none} /* en celular sacamos las barritas para que no se desborde */

  /* PUBLICIDADES */

  .image-grid{
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 340px;
    margin: 0 auto;
  }
  .image-grid div{
    width: 100%;
    height: auto;
    min-height: 180px;
    padding: 12px;
  }

  /* APP Y QR */
  .service-container{gap:15px}
  .service_column{width:90%}

  /* CONTACTO */
  .contact-row{flex-direction:column; gap:20px}
  .info{text-align:center; min-width:auto}
  .info p{justify-content:center}

  /* FOOTER */
  #footer .copyright{font-size:0.7em}
}