/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* ==== variables (:root) ==== */
:root {
  /* marca */
  --color-primario: #E8530A;
  --color-primario-hover: #ff6a26;

  /* fondos */
  --color-negro: #000;
  --color-fondo: #0C0C0C;
  --color-fondo-2: #161616;
  --color-fondo-3: #222;

  /* bordes */
  --color-borde: #2a2a2a;
  --color-borde-claro: #4a4a4a;

  /* textos */
  --color-blanco: #fff;
  --color-titulo: #F0EDE8;
  --color-texto: #C0BDB7;
  --color-texto-claro: #cfcfcf;

  /* overlays */
  --overlay-hero: rgba(0, 0, 0, .45);

  /* tipografias */
  --fuente-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fuente-texto: "Barlow Condensed", "Arial Narrow", sans-serif;
}

/* ==== fuentes (precargadas en header.php) ==== */
@font-face {
  font-family: "Barlow Condensed";
  src: url(./assets/fonts/BarlowCondensed-Light.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url(./assets/fonts/BarlowCondensed-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url(./assets/fonts/BarlowCondensed-ExtraBold.woff2) format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==== globales (tipografia, botones, tarjetas, hero, header/menu) ==== */
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-weight: 300;
  line-height: 1.7;
}

a {
  color: var(--color-primario);
}

a:hover {
  color: var(--color-primario-hover);
}

:focus-visible {
  outline: .125rem solid var(--color-primario);
  outline-offset: .125rem;
}

/* tipografia */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--fuente-titulo);
  color: var(--color-titulo);
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

.h1,
h1 {
  font-size: 1rem;
  text-transform: uppercase;
}

.h2,
h2 {
  font-size: 1.3rem;
  line-height: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-primario);
}

.h3,
h3 {}

.lead {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--color-blanco);
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: clamp(2rem, 5vw, 3rem);
  position: relative;
}

.lead::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: .1875rem;
  margin-top: 1rem;
  background-color: var(--color-primario);
}

.lead strong {
  font-weight: 700;
  color: var(--color-primario);
}

.display-4 {
  font-size: 1.8rem;
  color: var(--color-titulo);
}

.display-3 {
  font-size: 2.2rem;
}

.antetitulo {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--fuente-titulo);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primario);
}

.destacado {
  color: var(--color-primario);
}

/* botones */
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-family: var(--fuente-titulo);
  --bs-btn-font-size: .8125rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 0;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: normal;
}

.btn-primary {
  --bs-btn-color: var(--color-blanco);
  --bs-btn-bg: var(--color-primario);
  --bs-btn-border-color: var(--color-primario);
  --bs-btn-hover-color: var(--color-blanco);
  --bs-btn-hover-bg: var(--color-primario-hover);
  --bs-btn-hover-border-color: var(--color-primario-hover);
  --bs-btn-active-color: var(--color-blanco);
  --bs-btn-active-bg: var(--color-primario-hover);
  --bs-btn-active-border-color: var(--color-primario-hover);
}

.btn-secondary {
  --bs-btn-color: var(--color-blanco);
  --bs-btn-bg: rgba(0, 0, 0, .35);
  --bs-btn-border-color: var(--color-borde-claro);
  --bs-btn-hover-color: var(--color-negro);
  --bs-btn-hover-bg: var(--color-blanco);
  --bs-btn-hover-border-color: var(--color-blanco);
  --bs-btn-active-color: var(--color-negro);
  --bs-btn-active-bg: var(--color-blanco);
  --bs-btn-active-border-color: var(--color-blanco);
}

.btn-white {
  --bs-btn-color: var(--color-negro);
  --bs-btn-bg: var(--color-blanco);
  --bs-btn-border-color: var(--color-blanco);
  --bs-btn-hover-color: var(--color-blanco);
  --bs-btn-hover-bg: var(--color-primario);
  --bs-btn-hover-border-color: var(--color-primario);
}

.btn-primary-outline {
  --bs-btn-color: var(--color-primario);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-primario);
  --bs-btn-hover-color: var(--color-blanco);
  --bs-btn-hover-bg: var(--color-primario);
  --bs-btn-hover-border-color: var(--color-primario);
}

/* hero */
.hero {
  position: relative;
  background-color: var(--color-negro);
  background-size: cover;
  background-position: center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}

.hero>* {
  position: relative;
  z-index: 1;
}

/* header / menu */
#masthead {
  background-color: var(--color-negro);
}

#masthead .navbar-brand img {
  max-height: 2.75rem;
  width: auto;
}

.navbar .nav-item:not(:last-child) {
  border-bottom: 1px solid var(--color-borde-claro);
}

.navbar .nav-link {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-blanco);
  padding: .75rem;
  font-size: 1.6rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  background-color: var(--color-fondo-3);
}


.navbar .nav-link.active,
.navbar .current-menu-ancestor>.nav-link {
  color: var(--color-primario);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: .125rem;
  text-underline-offset: .375rem;
}

/* menu movil (offcanvas) */
#masthead .offcanvas {
  background-color: var(--color-negro);
  color: var(--color-blanco);
}

#masthead .offcanvas .btn-close {
  filter: invert(1);
}



#masthead .offcanvas .dropdown-menu {
  padding-left: 1rem;
  border: 0;
  background-color: transparent;
}

/* ==== pagina: inicio ==== */
.inicio .hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - 4rem);
  padding: 5rem 0;
}

.inicio .hero .h1 {
  margin-bottom: 1.5rem;
}

.inicio .hero .lead {
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: clamp(4rem, 8.5vw, 5.75rem);
  margin-bottom: 2rem;
}

.inicio .hero .lead strong {
  color: var(--color-primario);
  display: block;
}

/* sobre nosotros */
.inicio .sobre {
  background-color: var(--color-fondo);
}

.inicio .sobre img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.inicio .sobre-texto {
  padding: 3.5rem 1rem;
}

.inicio .sobre-contenido {
  max-width: 36rem;
  font-size: 1.0625rem;
}

/* clientes */
.inicio .clientes {
  padding: 4rem 0;
  background-color: var(--color-fondo);
}

.inicio .clientes-intro {
  font-size: 1rem;
}

.inicio .clientes-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-borde);
  border-left: 1px solid var(--color-borde);
  background-color: var(--color-fondo-3);
}

.inicio .clientes-lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: .75rem 1rem;
  border-right: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
  background-color: var(--color-fondo);
  font-family: var(--fuente-titulo);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-texto);
  overflow-wrap: anywhere;
}

/* cta */
.inicio .cta {
  padding: 4rem 0;
  border-top: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
  background-color: var(--color-fondo-2);
}


/*---Servicios---*/


.listado-servicios .card {
  border: none;
  background-color: transparent;
  height: 100%;
  position: relative;
}

.listado-servicios .card::after {
  position: absolute;
  content: '';
  width: 105%;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background-color: var(--color-borde);
  bottom: 0;
}

.listado-servicios .nav-tabs {
  background-color: var(--color-borde);
}

.listado-servicios .card .h3 {
  text-transform: uppercase;
  color: var(--color-blanco);
  font-size: 1.5rem;
  position: relative;
}

.listado-servicios .nav-tabs .nav-link {
  color: var(--color-blanco);
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 0;
}

.listado-servicios .nav-tabs .nav-link.active {
  border: 0;
  color: var(--color-primario);
  box-shadow: inset 0px -3px 0px 0px var(--color-primario);
  -webkit-box-shadow: inset 0px -3px 0px 0px var(--color-primario);
  background-color: transparent;
}



#servicios-tabContent .col-lg-6 .row.gy-4 {
  counter-reset: contador-servicios;
}


#servicios-tabContent .card .h3::before {
  counter-increment: contador-servicios;
  content: counter(contador-servicios, decimal-leading-zero) ". ";
  color: var(--color-primario);
  font-size: 1rem;
  font-weight: 300;
  margin-right: .25rem;
}

#servicios-tabContent .card p {
  color: var(--color-texto);
}

/*--Contacto--*/
.contacto .modos-contacto-lista {
  margin: 0;
}

.contacto .modos-contacto-lista .icono-box {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-texto);

}

.contacto .modos-contacto-lista .contacto-etiqueta {
  font-size: .8125rem;
  color: var(--color-blanco);
}

.contacto .modos-contacto-lista .contacto-enlace {
  color: var(--color-primario);
}

.field-wrap .pikaday__container,
.field-wrap .pikaday__display,
.field-wrap select,
.field-wrap textarea,
.field-wrap>div input {

  background-color: var(--color-texto);
  border: 0;
  padding: .5rem;
}

.field-wrap input[type=submit] {
  background-color: var(--color-primario);
  border: 0;
  padding: .5rem;
  color: var(--color-blanco);
  text-transform: uppercase;
  font-weight: 700;
}

.field-wrap input[type=submit]:hover {
  background-color: var(--color-primario-hover);

}

/*--formulario--*/
.nf-field-label label {
  text-transform: uppercase;
  font-weight: 300 !important;
  color: var(--color-texto-claro);
}

.nf-field-container {
  margin-bottom: 0 !important;
}

/*---404---*/
.error-404 h1 {
  font-size: clamp(8rem, 14vw, 10rem);
  color: var(--color-primario);
  font-weight: 700;
}

.error-404 h1 span {
  font-size: clamp(1rem, 2vw, 2rem);
  color: var(--color-blanco);
  display: block;
  font-weight: 300;
}

/*---Footer---*/

footer.site-footer {
  background-color: #000;
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--color-borde-claro);
}

footer.site-footer a {
  text-decoration: none;
}

/* ==== MEDIA QUERIES ==== */
@media (min-width: 576px) {

  /* inicio */
  .inicio .sobre-texto {
    padding: 4rem 2rem;
  }
}

@media (min-width: 768px) {

  /* inicio */
  .inicio .clientes {
    padding: 5rem 0;
  }

  .inicio .cta {
    padding: 5rem 0;
  }

  .nf-form-content nf-fields-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .nf-form-content nf-fields-wrap>*:nth-child(5),
  .nf-form-content nf-fields-wrap>*:nth-child(6),
  .nf-form-content nf-fields-wrap>*:nth-child(7) {
    grid-column: 2 span;
  }
}

@media (min-width: 992px) {

  /* header / menu */
  #masthead .offcanvas {
    background-color: transparent;
  }

  .navbar .nav-item:not(:last-child) {
    border: none;
  }

  #masthead .offcanvas .nav-link {
    font-size: 1rem;
    padding: .5rem 1rem;
  }


  /* inicio */
  .inicio .hero {
    min-height: calc(100svh - 4.5rem);
  }

  .inicio .sobre-img {
    aspect-ratio: auto;
    min-height: 30rem;
  }

  .inicio .sobre-texto {
    padding: 5rem 3rem 5rem 6rem;
  }

  .inicio .clientes {
    padding: 6rem 0;
  }
}

@media (min-width: 1200px) {

  /* inicio */
  .inicio .clientes-lista>li {
    width: calc(100% / 7);
  }
}