/* Importar íconos de librería de Bootstrap */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* General */

html {
  scroll-behavior: smooth;
}

body {
  padding-top: 130px; /* 32px top-bar + ~100px navbar */
}

.logo {
    width: 170px;
    height: auto;
}
* { 
    font-family: 'Reddit Sans', Arial, Helvetica, sans-serif;
}

.literata {
    font-family: 'Literata', 'Reddit Sans', Arial, Helvetica, sans-serif;
    font-weight: 600;
}


/* ++++++++++++++++++++++++++++++++++++++ Top bar ++++++++++++++++++++++++++++++++++++++ */

.top-bar {
  font-size: 0.875rem;
  z-index: 1031; /* Más alto que navbar si no se usa fixed */
} 

.nav-item .p-top {
    border: none !important;
}

.nav-link .p-top{
    border: none !important;
    margin: 4px;
    text-transform: uppercase;
    font-size: 11px;
    opacity: .3;
    letter-spacing: 0.05rem;
    color: #2e2e2e;

}

.nav-link.p-top:hover {
    color:#2e2e2e;
    opacity: 1;
}

.nav-link.p-top.active {
    background-color: none;
    opacity: 1;
 }

 a.nav-link.p-top.active {
    background-color: #fff !important;
    color: #2e2e2e !important;
    opacity: 1;
 }


/* ++++++++++++++++++++++++++++++++++++++ Nav ++++++++++++++++++++++++++++++++++++++ */


.p-nav .nav-link{
    border-radius: 20px;
}

.nav-link {
    border: 1px solid #2e2e2e;
    margin: 4px;
    text-transform: uppercase;
    font-size: 12px;
    opacity: .3;
    letter-spacing: 0.05rem;
    color: #2e2e2e;

}

.nav-link:hover {
    color:#2e2e2e;
    opacity: 1;
}

.nav-link.active {
    background-color: none;
    opacity: 1;
 }

 a.nav-link.active {
    background-color: #fff !important;
    color: #2e2e2e !important;
    opacity: 1;
 }

 /* Redes sociales */

 .nav-link.rrss{
    border: 1px solid #2e2e2e;
    margin: 4px;
    text-transform: uppercase;
    font-size: 12px;
    opacity: .75;
    letter-spacing: 0.05rem;
    color: #fff !important;
    background-color: #2e2e2e;
    padding: 8px 11px;

}

.nav-link.rrss:hover {
    color:#fff !important;
    opacity: 1;
}

.nav-link.rrss.active {
    background-color: none;
    opacity: 1;
 }

 a.nav-link.rrss.active {
    background-color: #2e2e2e !important;
    color: #fff !important;
    opacity: 1;
 }

 .bi-linkedin {
    color: #fff;
 }

  .bi-instragram {
    color: #fff;
 }

/* ++++++++++++++++++++++++++++++++++++++ Hero ++++++++++++++++++++++++++++++++++++++ */

h1.p-text { 
    font-size: xx-large;
}

h2.p-llamado { 
    font-weight: 600;
    font-size: 62px;
    line-height: 62px;
}

h2.p-llamado > mark {
    display: inline;
    background-image: linear-gradient(to top, #ff896e00 0%, #ff896e00 15%, #FF896E 16%, #FF896E 50%, #ff896e00 51%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 100%;
    font-weight: 600;
    font-size: 62px;
    line-height: 62px;
    animation: highlightSlide 1s ease-out forwards;
}

@keyframes highlightSlide {
    0% {
        background-size: 100% 0%;
    }
    100% {
        background-size: 100% 100%;
    }
}

mark {
    background-color: #ff896e00;
}

.p-pad5 {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.bg-texto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11rem;
  color: #00000006;
  font-weight: 200;
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  text-align: right;
  line-height: 9rem;
}

.bg-texto > p {
    margin: 0;
}

/* ++++++++++++++++++++++++++++++++++++++ Portafolio ++++++++++++++++++++++++++++++++++++++ */

.bg-portafolio {
    background-color: #eff1f4;
}

h2.p-port-llamado {
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
}

/* Imágenes */

.collage-container {
    height: 400px; /* Ajusta según tu diseño */
}

.img-portafolio {
    position: absolute;
    width: 350px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 1s ease;
}

.img-portafolio:hover {
    transform: scale(1.05);
    z-index: 5;
}

.img-1 {
    top: 80px;
    left: 20%;
    z-index: 3;
}

.img-2 {
    top: -20px;
    left: 0;
    z-index: 2;
}

.img-3 {
    top: 160px;
    left: 40%;
    z-index: 1;
}

/* ++++++++++++++++++++++++++++++++++++++ Servicios ++++++++++++++++++++++++++++++++++++++ */

.p-card {
    border: none;
    padding: 20px;
}

.card-titulo {
    position: relative;
    padding: 6px 0;
    margin: 12px 0;
}

.card-titulo::after {
    content: "";
    position: absolute;
    width: 40px;
    border: 1px solid #2e2e2e;
}

/* Corregir altura de columnas */

.row-equal-height .col {
  display: flex;
}

.row-equal-height .card {
  flex-grow: 1;
}

/* Corregir indicadores */
.carousel-indicators > button.p-boton {
    background-color: #2e2e2e;
    opacity: 0.5;
}

.carousel-indicators > button.p-boton.active {
    opacity: 1;
}

/* Corregir altura de carrusel */
.carousel-inner.h-desktop {
    height: 380px;
}

.carousel-inner.h-mobile {
    height: 280px;
}

/* ++++++++++++++++++++++++++++++++++++++ Clientes ++++++++++++++++++++++++++++++++++++++ */

.bg-p-oscuro {
    background-color: #2e2e2e;
}

.p-titulo-seccion {
    position: relative;
    padding: 6px 0;
    margin: 12px 0;
    color: #eff1f4;
}

.p-titulo-seccion::after {
    content: "";
    position: absolute;
    width: 40px;
    border: 1px solid #eff1f4;
    margin-left: -20px;
}

/* Logos Clientes */
.clientes {
  max-height: 40px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.clientes:hover {
  opacity: 1;
}

.clientes-1 {
  max-height: 30px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.clientes-1:hover {
  opacity: 1;
}

.clientes-2 {
  max-height: 80px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.clientes-2:hover {
  opacity: 1;
}

/* Carrusel clientes */

.carousel-clientes-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.carousel-clientes {
  display: flex;
  align-items: center;
  animation: scrollClientes 40s linear infinite;
  will-change: transform;
}

.carousel-clientes img.clientes, .carousel-clientes img.clientes-1, .carousel-clientes img.clientes-2{
  height: 60px;
  margin: 0 30px;
  flex-shrink: 0;
}

@keyframes scrollClientes {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Responsive pausa para pantallas pequeñas */
@media (max-width: 768px) {
  .carousel-clientes {
    animation-duration: 40s;
  }
}

/* ++++++++++++++++++++++++++++++++++++++ Contacto ++++++++++++++++++++++++++++++++++++++ */

.p-contacto {
    text-decoration: none;
    color: #2e2e2e60;
}

.p-form {
    font-size: 14px !important;
}

.img-form {
    width: 100px;
}

/* Input formulario */

.p-form > div > input {
    font-size: 14px !important;
    border-radius: 3px;
    border: none;
    background-color: #eff1f4;
    padding-top: 10px;
    padding-bottom: 10px;
}

.p-form > div > textarea {
    font-size: 14px !important;
    border-radius: 3px;
    border: none;
    background-color: #eff1f4;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Botón formulario */

.p-form > button {
    width: 100%;
    text-align: center;
    background-color: #2e2e2e;
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid #2e2e2e;
    padding-top: 10px; 
    padding-bottom: 10px; 
    transition: background-color 1s ease;
}

.p-form > button:hover {
    background-color: #000;
    border: 1px solid #000;
}

.p-form > button:active {
    background-color: #000;
    border: 1px solid #000;
}

.p-form > button:focus {
    background-color: #000;
    border: 1px solid #000;
}

/* ++++++++++++++++++++++++++++++++++++++ Footer ++++++++++++++++++++++++++++++++++++++ */

.logo-footer {
    width: 120px;
    height: auto;
}

.p-footer {
    text-align: right;
    font-size: 13px;
    color: #2e2e2e60;
}

.p-footer > p {
    margin: 0;
}

/* ++++++++++++++++++++++++++++++++++++++ Blog ++++++++++++++++++++++++++++++++++++++ */

a.btn.btn-primary.p-boton {
    text-align: center;
    background-color: #2e2e2e;
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid #2e2e2e;
    padding-top: 10px; 
    padding-bottom: 10px; 
    transition: background-color 1s ease;
}

a.btn.btn-primary.p-boton:hover {
    background-color: #000;
    border: 1px solid #000;
}

.valores {
    width: 30%;
    border-radius: 35px;
    font-size: 14px;
    color:#2e2e2e;
    opacity: 0.75;
    background-color: none;
    border: 1px solid #2e2e2e;
    padding: 8px 0;
    text-transform: uppercase;
    margin: 0 1.5%;
}

.mt-2 {
    margin-top: 2rem !important;
}