:root{                               /* variables globales del CSS (pueden usarse en todo el documento) */
  --bg: #020101;                     /* color de fondo principal de la web */
  --fg: #979393;                     /* color del texto principal */
  --max: 960px;                      /* ancho máximo del contenido */
  --pad: clamp(20px, 4vw, 56px);     /* padding adaptable según tamaño de pantalla */
  --gap: clamp(12px, 2vw, 20px);     /* espacio adaptable entre elementos */
}



*{ box-sizing: border-box; }         /* hace que padding y border se incluyan dentro del tamaño del elemento */

body{
  margin: 0;                         /* elimina el margen por defecto del navegador */
  font-family: 'Courier Prime', monospace; /* tipografía principal */
  background: var(--bg);             /* fondo usando la variable --bg */
  color: var(--fg);                  /* color del texto usando la variable --fg */
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--pad);
}

.manifest{
  margin: 0 0 40px 0;                  /* espacio debajo del texto */
  font-size: clamp(22px, 3vw, 30px);   /* tamaño adaptable */
  line-height: 1.15;                   /* altura entre líneas */
  font-weight: 700;                    /* grosor */
  text-align: center;                  /* centra el texto */
}

.cta{
  display: flex;                     /* coloca los elementos en línea horizontal */
  flex-wrap: wrap;                   /* permite que pasen a otra línea si no caben */
  gap: 10px;                         /* espacio entre botones */
  margin-top: 6px;                   /* margen superior */
}

.btn{
  display: inline-block;             /* permite aplicar padding y tamaño */
  padding: 10px 14px;                /* espacio interior del botón */
  border: 2px solid rgba(118, 116, 116, 0.297); /* borde del botón con transparencia */
  color: var(--fg);                  /* color del texto */
  text-decoration: none;             /* elimina subrayado del enlace */
  font-weight: 700;                  /* texto en negrita */
  background: rgba(0,0,0,.06);       /* fondo muy suave */
}

.btn:hover{ 
  background: rgba(0,0,0,.12);       /* cambia ligeramente el fondo al pasar el ratón */
}

.hero-video{
  margin: 40px 0 60px 0;                /* margen arriba y abajo */
  display: flex;                        /* usa flexbox */
  justify-content: center;              /* centra el video horizontalmente */
}

.hero-video video{
  width: 100%;                          /* ocupa todo el ancho disponible */
  max-width: 1100px;                    /* limita el ancho máximo */
  height: 70vh;                         /* altura del 70% de la pantalla */
  object-fit: cover;                    /* recorta video para llenar el espacio */
  border: 2px solid rgba(0,0,0,.4);     /* borde oscuro */
}



.header-inner{
  max-width:1200px;                     /* ancho máximo del header */
  margin:0 auto;                        /* centra el contenido */
  padding:10px 30px;                    /* espacio interior */

  display:flex;                         /* usa flexbox */
  align-items:center;                   /* alinea verticalmente */
  justify-content:space-between;        /* separa logo y menú */
  gap:30px;                             /* espacio entre elementos */
}

.logo img{
  height:70px;                          /* altura del logo */
}

.site-title{
  color: #020101;                       /* color del título */
  flex:1;                               /* ocupa el espacio central */
  text-align:center;                    /* centra el texto */
  font-size:18px;                       /* tamaño de letra */
  font-weight:700;                      /* grosor de texto */
  letter-spacing:1px;                   /* separación entre letras */
}

.main-nav{
  display:flex;                         /* coloca enlaces en línea */
  gap:30px;                             /* espacio entre enlaces */
}

.main-nav a{
  color:black;                          /* color del texto */
  text-decoration:none;                 /* elimina subrayado */
  font-weight:bold;                     /* texto en negrita */
  font-size:16px;                       /* tamaño de letra */
}

.presentacion{
max-width:900px;      /* limita el ancho del texto */
margin:120px auto;    /* espacio arriba y abajo + centrado */
text-align:center;    /* texto centrado */
font-size:20px;       /* tamaño de texto */
line-height:1.6;      /* separación entre líneas */
}

.servicios{
display:grid;                       /* sistema de columnas */
grid-template-columns:repeat(3,1fr); /* tres columnas */
gap:60px;                            /* espacio entre columnas */
max-width:1000px;                    /* ancho máximo */
margin:120px auto;                   /* separación vertical */
text-align:center;
}

.servicio h3{
font-size:20px;
margin-bottom:10px;
}

.servicio p{
opacity:.7;
}

.galeria{
display:flex;          /* coloca las imágenes en fila */
justify-content:center; /* centra las imágenes */
gap:20px;              /* espacio entre ellas */
margin-top:40px;
}

.galeria img{
width:180px;           /* ancho de la imagen */
height:180px;          /* alto de la imagen */
object-fit:cover;      /* recorta la imagen para llenar el cuadro */
border:2px solid rgba(255,255,255,.2);
}

/* centra el título "Proyectos visuales" */
.proyectos h1{
text-align:center;
}

/* centra el botón "Ver proyectos" */
.proyectos .btn{
display:block;        /* hace que el botón ocupe su propia línea */
width:fit-content;    /* el ancho se adapta al texto */
margin:30px auto;     /* lo centra horizontalmente */
}

/* centra el título "Colaboraciones" */
.colaboracion h1{
text-align:center;
}

/* centra el texto de colaboración */
.colaboracion p{
text-align:center;
max-width:700px;      /* evita que el texto sea demasiado ancho */
margin:0 auto;        /* centra el bloque */
}

/* centra el botón "Contactar" */
.colaboracion .btn{
display:block;
width:fit-content;
margin:30px auto;
}

.video-presentacion{
display:flex;              /* usa flexbox */
justify-content:center;    /* centra el vídeo horizontalmente */
margin:80px auto 100px;    /* espacio arriba y abajo */
}

.video-presentacion video{
width:600px;               /* ancho del vídeo */
max-width:100%;            /* evita que se salga en pantallas pequeñas */
height:500px;              /* alto fijo rectangular */
object-fit:cover;          /* recorta sin deformar */
border:2px solid rgba(255,255,255,.15); /* borde sutil */
}

.servicio-img{
width:100%;              /* ocupa el ancho de la columna */
height:220px;            /* altura fija */
object-fit:cover;        /* recorta sin deformar */
margin:20px 0;           /* espacio arriba y abajo */
border:2px solid rgba(255,255,255,.15); /* borde sutil */
}