/*
Theme Name: Servicio Técnico Pro
Theme URI: https://es.estudio0301.com/
Author: Estudio 0301
Author URI: https://es.estudio0301.com
Description: Theme profesional especializado para empresas de servicios técnicos y reparaciones. Diseñado para maximizar conversiones con landing pages optimizadas para SEO y una estructura orientada a la captación de leads. Incluye plantillas personalizadas para servicios, zonas de cobertura, presupuestos online y sistema de citas. Compatible con WooCommerce para gestión de repuestos y servicios. Optimizado para velocidad de carga con puntuación PageSpeed 90+. Diseño responsive con Bootstrap 5 y microformatos Schema.org para mejor posicionamiento local.
Requires at least: WordPress 6.0
Tested up to: WordPress 6.4
Requires PHP: 7.4
Version: 3.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: servicio-tecnico-pro
*/

/*    G L O B A L S    - - - - - - - - - - -  */
:root {
  --mainblack: #282828;
  --white: #ffff;
  --mainblue: #4c86b6;
  --secondaryblue: #2083d4;
  --callgreen: #3ad26f;
  --mainsilver: #d0d0d0;
  --lightsilver: #e4e4e4;
  --dark: #333333;
  --black: #000;

  /* COLOR MARCAS */
  --aeg: #cf1430;
  --airwell: #085eae;
  --ariston: #e4082b;
  --balay: #007bc3;
  --baxi: #24366e;
  --beko: #0180c9;
  --beretta: #cecd01;
  --bosch: #085eae;
  --candy: #085eae;
  --carrier: #152c73;
  --chaffoteaux: #063678;
  --cointra: #ff7703;
  --corbero: #ff1820;
  --daewoo: #065aa5;
  --daikin: #00a0e4;
  --daitsu: #0aa0af;
  --edesa: #009fe3;
  --electrolux: #001a4d;
  --fagor: #e42313;
  --ferroli: #ff6202;
  --fleck: #026aab;
  --fujitsu: #e7041c;
  --haier: #085aaa;
  --hermann: #dc172c;
  --hiyasu: #019a8d;
  --hisense: #019a9d;
  --hitachi: #c3132f;
  --hoover: #ba2a34;
  --indesit: #0091d0;
  --junkers: #014e9e;
  --lg: #a50d34;
  --manaut: #ff9b33;
  --miele: #8c0014;
  --mitsubishi: #ff141d;
  --mundoclima: #1f4240;
  --neckar: #3c5da8;
  --newpol_b: #013862;
  --newpol_r: #db1729;
  --otsein: #51b1ff;
  --panasonic: #0041c0;
  --protherm: #cc1434;
  --roca: #12263a;
  --samsung: #034ba9;
  --samsung_two: #08b8e7;
  --saunierduval: #cb0c27;
  --sanyo: #d21540;
  --sharp: #e71a04;
  --siemens: #009999;
  --sime: #a1daf8;
  --teka: #c80f2e;
  --toshiba: #e61e1d;
  --vaillant: #02917e;
  --viessmann: #ff3e17;
  --whirlpool: #fdc100;
  --zanussi: #f9e030;
}

.bg-miele {
  background: #ececec;
}

/* HERO SECTION */
.hero-home {
  position: relative;
  width: 100%;
  height: 80vh !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line-home {
  min-height: 5vh;

  h3 {
    font-size: 2.5rem;
  }
}
.hero {
  position: relative;
  width: 100%;
  height: 60vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-overlay {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}
/* SUB HERO SECTION */
.sub-hero {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0;
}
.sub-hero-video {
  position: relative;
  overflow: hidden;
  height: 300px;
}
.sub-hero-video video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.sub-hero-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.text-content h2 {
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.text-content p {
  font-size: 1rem;
  line-height: 1.5;
}

/* ASIDE BRAND SECTION */
.aside-brand {
  position: sticky;
  top: 50px;
  z-index: 10;
  height: fit-content;
  padding: 1em;
}
.aside-brand form label {
  font-size: 0.9rem;
  text-align: start;
}
.aside-brand .phone {
  font-size: 1.6rem !important;
}
.aside-brand .btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  text-transform: uppercase;
}
.aside-brand .btn-success {
  color: white;
}
.aside-brand .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}
.aside-brand .btn-danger i {
  margin-right: 10px;
  font-size: 1.3rem;
  vertical-align: middle;
}
.aside-brand .featured-image img {
  border-radius: 8px;
}

/* CIRCLES SECTION */
.responsive-circles-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.circle-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.circle-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.circle-text,
.circle-image {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle-text {
  background-color: #282828;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 1rem;
  margin-right: -1em;
  line-height: 1.2;
  z-index: 10;
  opacity: 0.8;

  h2 {
    font-size: 1.7rem;
  }
}

.rounded-text,
.rounded-image {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.circle-image {
  margin-left: -1em;
  z-index: 2;
}
.circle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.color-bar {
  display: flex;
  height: 10px;
  width: 100%;
}

.color {
  flex: 1;
}
.color.red {
  background-color: #b22222;
}
.color.dark-red {
  background-color: #ff0000;
}
.color.purple {
  background-color: #800080;
}
.color.dark-blue {
  background-color: #000080;
}
.color.blue {
  background-color: #1e90ff;
}
.color.teal {
  background-color: #20b2aa;
}
.color.green {
  background-color: #32cd32;
}

/* SERVICES SECTION */
.services-section {
  margin: 2rem 0;
}
h4 {
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
}
.services-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.service-btn {
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.service-btn i {
  font-size: 1.2rem;
}
.service-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
.sub-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 30vh;
}
.sub-hero-video,
.sub-hero-text {
  display: flex;
  flex: 1;
  height: 370px;
}
.sub-hero-video video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.sub-hero-text {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}
.custom-card-footer {
  padding: 0.5rem;
  background-color: #282828;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  border-top: 0.5em solid #ff6600;

  p {
    margin: 0;
    color: white;
  }
}
.non-custom-card-footer {
  border-top: none;
  background-color: #d0d0d0;

  p {
    margin: 0;
    color: #282828;
  }
}
.latest-junkers-section {
  background-color: #d9d9d9;
  padding: 2rem;
  border-radius: 8px;
}
.latest-junkers-section h2 {
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.latest-junkers-section h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.latest-junkers-section p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.latest-junkers-section .btn {
  background-color: #0078d4; /* Azul */
  border-color: #0078d4;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  transition: all 0.3s ease;
}
.latest-junkers-section .btn:hover {
  background-color: #005bb5;
  border-color: #005bb5;
  color: #fff;
}

.pages-grid {
  .card-brand {
    border: none !important;
    h3 {
      text-align: center !important;
    }
  }
}

.box-repair-items {
  h3 {
    font-size: 1rem !important;
  }
  a {
    color: darkslategrey !important;
    text-align: center !important;
  }
  img {
    width: 10em !important;
    height: auto !important;
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  /* HERO */
  .latest-junkers-section h2 {
    font-size: 1.5rem;
  }
	
	.hero-home{
		height: 50vh !important
	}

  .latest-junkers-section h3 {
    font-size: 1.3rem;
  }

  .latest-junkers-section p {
    font-size: 0.9rem;
  }

  .latest-junkers-section .btn {
    font-size: 0.9rem;
    padding: 0.5rem 1.5rem;
  }
  .hero {
    height: 40vh;
    margin-top: 3rem !important;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  /* SUB HERO */
  .sub-hero-video {
    height: 100%;
  }

  .sub-hero-text {
    padding: 2rem;
  }

  .text-content h2 {
    font-size: 2rem;
  }

  .text-content p {
    font-size: 1.1rem;
  }

  /* CIRCLES */
  .circle-text,
  .circle-image {
    width: 250px;
    height: 250px;
  }

  .circle-text {
    font-size: 1.2rem;
  }

  /* SERVICES */
  .service-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
  /* HERO */
  .hero-title {
    font-size: 1.5rem;
  }
  .circle-right {
    justify-content: center;
  }
  .circle-left {
    justify-content: center;
  }
  .line-home {
    min-height: 5vh;

    h3 {
      font-size: 1.2rem;
    }
  }
  .box-repair-items {
    h3 {
      font-size: 0.7rem !important;
      text-align: center;
    }
    a {
      color: darkslategrey !important;
      text-align: center !important;
    }
    img {
      width: 5em !important;
      height: auto !important;
    }
  }
}