@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Poppins&display=swap");

/* Guia de peso de fuentes:
Regular (400)
Bold (700)
Extra bold (800)
Italic regular (1,400) */

/* --- ESTILOS GLOBALES Y RESET --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #e1e4e1;
  color: #261201;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: "Archivo Black", sans-serif;
  font-weight: normal;
}

h2 {
  letter-spacing: -3.6px;
}

p {
  line-height: 1.6;
}

.separator {
  width: 80px;
  height: 4px;
  background-color: #ed3f1c;
  margin: 1px auto 2rem;
}

/* --- HEADER Y NAVEGACIÓN --- */
header {
  padding: 13px;
  background-color: #ed3f1c;
}

.navbar a {
  color: #e1e4e1;
  font-family: "Archivo Black", sans-serif;
}

#logo {
  width: 60px;
  height: 60px;
  background: url(./recursos/imagenes/logo-01.svg);
  background-size: cover;
  font-size: 0;
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: 1;
}

/* --- CARRUSEL --- */
.carousel-item {
  position: relative;
}

.carousel-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(38, 18, 1, 0.2);
}

.carousel-indicators [data-bs-target] {
  background-color: #ffffff;
  opacity: 0.5;
}

.carousel-indicators .active {
  background-color: #ed3f1c;
  opacity: 1;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ed3f1c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 1 6 6-6 6'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ed3f1c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 1 4 7l6 6'/%3e%3c/svg%3e");
}

/* --- SECCIÓN SERVICIOS (PASTILLAS) --- */
.h2-servicios {
  font-size: 36px;
}

.pildora {
  background-color: #aab7bf;
  color: #261201;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pildora:hover {
  background-color: #ed3f1c;
  color: #fff;
  transform: scale(1.05);
}

.pildora .btn-dark {
  background-color: #aab7bf;
  border-color: #aab7bf;
}

.pildora .btn-dark:hover {
  background-color: #e1e4e1;
  border-color: #e1e4e1;
}

/* --- SECCIÓN PORTFOLIO --- */
.proyecto {
  background-color: #aab7bf;
  color: #261201;
  transition: all 0.3s ease;
  cursor: pointer;
}

.proyecto:hover {
  background-color: #ed3f1c;
  color: #fff;
  transform: scale(1.05);
}

.proyecto img {
  display: block;
  height: 160px;
  object-fit: cover;
}

.proyecto .btn-dark {
  background-color: #aab7bf;
  border-color: #aab7bf;
}

.proyecto .btn-dark:hover {
  background-color: #e1e4e1;
  border-color: #e1e4e1;
}

/* --- SECCIÓN VIDEO --- */
#video {
  position: relative;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(38, 18, 1, 0.4);
  z-index: 3;
}

/* --- SECCIÓN FORMULARIO --- */
form input,
form textarea,
form button {
  font-family: "Poppins", sans-serif;
}

.btn-primary {
  background-color: #ed3f1c;
  border-color: #ed3f1c;
}

.btn-primary:hover {
  background-color: #c33218;
  border-color: #c33218;
}

/* --- FOOTER --- */
footer {
  background-color: #261201;
  color: #e1e4e1;
}

footer a {
  color: #e1e4e1;
  text-decoration: none;
}

footer a:hover {
  color: #ed3f1c;
}

/* --- MEDIA QUERIES --- */
@media (min-width: 768px) {
  .h2-servicios {
    font-size: 60px;
  }

  .proyecto img {
    height: 200px;
  }
}