:root{
  --negro:#0f0f10; --carb:#17181a; --gris:#f5f5f7; --blanco:#ffffff;
  --rojo:#D72638; --azul:#0F62FE; --dorado:#C9A227; --borde:#24262b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Montserrat,Arial,Helvetica,sans-serif;background:var(--gris);color:#222;line-height:1.5}
a{color:inherit;text-decoration:none}

header{
  background:#0b0c0d;
  color:var(--blanco);
  position:relative;
  top:0;
  left:0;
  padding:1.5rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
  box-shadow:0 2px 10px rgba(0,0,0,0.4);
}
header h1{margin:0;font-size:2rem;font-weight:700;letter-spacing:.6px}
header p{margin:.25rem 0 0;font-style:italic;color:var(--dorado);font-size:.9rem;}

.header-buttons a{
  color:#fff;
  background:var(--rojo);
  padding:.6rem 1.2rem;
  border-radius:8px;
  margin-left:1rem;
  font-weight:600;
  transition:background .3s;
}
.header-buttons a:hover{background:#b51d2d;}

.hero{
  position:relative;
  color:#fff;
  min-height:52vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden
}
.hero video{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0.45;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.6))
}

.after-hero{
  background:#111;
  color:#fff;
  text-align:center;
  padding:2.5rem 1rem;
}
.after-hero h2{margin:0 0 1rem;font-size:2rem;letter-spacing:.5px}
.after-hero p{margin:0 auto;max-width:800px;font-size:1.05rem;line-height:1.6;opacity:.95}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:62vh
}
.section{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#fff;
  padding:2rem;
  overflow:hidden
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  transition:transform .5s ease, opacity .5s ease
}
.section::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  transition:background .35s ease
}
.inner{
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.section h2{
  font-size:2rem;
  margin:0;
  background:rgba(0,0,0,.45);
  padding:.5rem 1rem;
  border-radius:10px;
  display:inline-block
}
.section a{
  display:inline-block;
  margin-top:1rem;
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:1rem 1.35rem;
  border-radius:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.2);
  width:280px;
  text-align:center;
}

.section:hover::before{transform:scale(1.06)}
.artistas::before{
  background:url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4') center/cover no-repeat
}
.produccion::before{
  background:url('https://images.unsplash.com/photo-1518972559570-7cc1309f3229') center/cover no-repeat
}

.produccion h2 span.slogan,
.artistas h2 span.slogan {
  display:block;
  font-style:italic;
  font-size:1rem;
  color:var(--dorado);
  margin-top:0.3rem;
}

section.block{padding:3rem 1.25rem}
.container{max-width:1100px;margin:auto}
h3.section-title{margin:0 0 1.1rem;font-size:1.9rem;color:#111}

.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem
}
.card{
  background:var(--blanco);
  border:1px solid #ececf0;
  border-radius:16px;
  padding:1.25rem;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition:transform .2s ease
}
.card:hover{transform:translateY(-4px)}
.card h4{margin:.1rem 0;color:var(--rojo)}
.card p{margin:.4rem 0 0;color:#3c3c3c}

.contact{
  background:linear-gradient(180deg,#0f0f11,#191b1f);
  color:#fff;
  text-align:center;
  padding:3rem 1.25rem;
  border-top:1px solid #1f2024;
  border-bottom:1px solid #1f2024
}
.contact .container{max-width:700px}
form{display:grid;gap:.8rem}
input,textarea{
  padding:1rem;
  border-radius:12px;
  border:1px solid #2a2c31;
  background:#0f0f0f;
  color:#fff
}
button{
  padding:1rem 1.2rem;
  border:none;
  border-radius:12px;
  background:var(--rojo);
  color:#fff;
  font-weight:700;
  cursor:pointer
}

footer{
  background:#1b1c20;
  color:#f0f0f0
}
.foot-top{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  padding:1.25rem
}
.foot-box h5{
  margin:.2rem 0 .4rem;
  font-size:1rem;
  color:#e7e7e7
}
.foot-box p,
.foot-box a{
  font-size:.95rem;
  color:#cfcfcf
}
.foot-bottom{
  border-top:1px solid #2a2c31;
  text-align:center;
  padding:1rem;
  font-size:.9rem
}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .hero{min-height:46vh}
  header h1{font-size:1.8rem}
  .header-buttons{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
  }
  .header-buttons a{margin:.3rem 0;}
}