@import url(../icons/fontawesome-pro-6-and-free/css/all-and-free.min.css);
/*@import url(../icons/iconmind/iconmind.css);*/




html body .font-6  { font-size: 6px;  }
html body .font-7  { font-size: 7px;  }
html body .font-8  { font-size: 8px;  }
html body .font-9  { font-size: 9px;  }
html body .font-10 { font-size: 10px; }
html body .font-11 { font-size: 11px; }
html body .font-12 { font-size: 12px; }
html body .font-13 { font-size: 13px; }
html body .font-14 { font-size: 14px; }
html body .font-15 { font-size: 15px; }
html body .font-16 { font-size: 16px; }
html body .font-17 { font-size: 17px; }
html body .font-18 { font-size: 18px; }
html body .font-19 { font-size: 19px; }
html body .font-20 { font-size: 20px; }
html body .font-21 { font-size: 21px; }
html body .font-22 { font-size: 22px; }
html body .font-23 { font-size: 23px; }
html body .font-24 { font-size: 24px; }
html body .font-25 { font-size: 25px; }
html body .font-26 { font-size: 26px; }
html body .font-27 { font-size: 27px; }
html body .font-28 { font-size: 28px; }
html body .font-29 { font-size: 29px; }
html body .font-30 { font-size: 30px; }
html body .font-31 { font-size: 31px; }
html body .font-32 { font-size: 32px; }
html body .font-33 { font-size: 33px; }
html body .font-34 { font-size: 34px; }
html body .font-35 { font-size: 35px; }
html body .font-36 { font-size: 36px; }
html body .font-37 { font-size: 37px; }
html body .font-38 { font-size: 38px; }
html body .font-39 { font-size: 39px; }
html body .font-40 { font-size: 40px; }
html body .font-42 { font-size: 42px; }
html body .font-44 { font-size: 44px; }
html body .font-45 { font-size: 45px; }
html body .font-46 { font-size: 46px; }
html body .font-48 { font-size: 48px; }
html body .font-50 { font-size: 50px; }
html body .font-55 { font-size: 55px; }
html body .font-60 { font-size: 60px; }
html body .font-65 { font-size: 65px; }
html body .font-70 { font-size: 70px; }


.ml-0{ margin-left: 0 !important; }
.ml-1{ margin-left: .25rem !important; }
.ml-2{ margin-left: .5rem !important; }
.ml-3{ margin-left: 1rem !important; }
.ml-4{ margin-left: 1.5rem !important; }

.mr-0{ margin-right: 0 !important; }
.mr-1{ margin-right: .25rem !important; }
.mr-2{ margin-right: .5rem !important; }
.mr-3{ margin-right: 1rem !important; }
.mr-4{ margin-right: 1.5rem !important; }

.pl-0{ padding-left: 0 !important; }
.pl-1{ padding-left: .25rem !important; }
.pl-2{ padding-left: .5rem !important; }
.pl-3{ padding-left: 1rem !important; }
.pl-4{ padding-left: 1.5rem !important; }

.pr-0{ padding-right: 0 !important; }
.pr-1{ padding-right: .25rem !important; }
.pr-2{ padding-right: .5rem !important; }
.pr-3{ padding-right: 1rem !important; }
.pr-4{ padding-right: 1.5rem !important; }


.pt-5 {  padding-top: 2rem !important; }
.pt-6 {  padding-top: 2.5rem !important; }
.pt-7 {  padding-top: 3rem !important; }
.pt-8 {  padding-top: 3.5rem !important; }
.pt-9 {  padding-top: 4rem !important; }
.pt-10 {  padding-top: 5rem !important; }
.pt-11 {  padding-top: 6rem !important; }
.pt-12 {  padding-top: 7rem !important; }
.pt-13 {  padding-top: 8rem !important; }
.pt-14 {  padding-top: 9rem !important; }
.pt-15 {  padding-top: 10rem !important; }
.pt-16 {  padding-top: 11rem !important; }
.pt-17 {  padding-top: 12rem !important; }
.pt-18 {  padding-top: 13rem !important; }
.pt-19 {  padding-top: 14rem !important; }
.pt-20 {  padding-top: 15rem !important; }

.mt-5 {  margin-top: 2rem !important; }
.mt-6 {  margin-top: 2.5rem !important; }
.mt-7 {  margin-top: 3rem !important; }
.mt-8 {  margin-top: 3.5rem !important; }
.mt-9 {  margin-top: 4rem !important; }
.mt-10 {  margin-top: 5rem !important; }
.mt-11 {  margin-top: 6rem !important; }
.mt-12 {  margin-top: 7rem !important; }
.mt-13 {  margin-top: 8rem !important; }
.mt-14 {  margin-top: 9rem !important; }
.mt-15 {  margin-top: 10rem !important; }
.mt-16 {  margin-top: 11rem !important; }
.mt-17 {  margin-top: 12rem !important; }
.mt-18 {  margin-top: 13rem !important; }
.mt-19 {  margin-top: 14rem !important; }
.mt-20 {  margin-top: 15rem !important; }



.img-1x1 {
   
    height: auto;
    aspect-ratio: 1 / 1;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}
.img-3x2 {
   
    height: auto;
    aspect-ratio: 3 / 2;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}
.img-4x3 {
   
    height: auto;
    aspect-ratio: 4 / 3;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}
.img-5x3 {
   
    height: auto;
    aspect-ratio: 5 / 3;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}
.img-3x1 {
   
    height: auto;
    aspect-ratio: 3 / 1;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}
.img-2x3 {
   
    height: auto;
    aspect-ratio: 2 / 3;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}
.img-3x4 {
   
    height: auto;
    aspect-ratio: 3 / 4;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}
.img-3x5 {
   
    height: auto;
    aspect-ratio: 3 / 5;
    width: 100%;
    background-color: var(--white);
    object-fit: contain;
    object-position: 50% 50%;
    vertical-align: middle;
    border-style: none;
}

.img-responsive {
  width: 100%;
  height: auto;
  display: inline-block;
}

.bg-cover {
  background-size: cover;
  min-height: 200px;
  object-fit: cover;
}

.bg-center{
  background-position: center center;
}
.bg-no-repeat{
  background-repeat: no-repeat;
}



.hover_ico:hover{
  opacity: 0.8;
}


.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}
.embed-responsive::before{display:block;content:""}
.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}
.embed-responsive-21by9::before{padding-top:42.857143%}
.embed-responsive-16by9::before{padding-top:56.25%}
.embed-responsive-4by3::before{padding-top:75%}
.embed-responsive-1by1::before{padding-top:100%}


.clearfix {
  content: "";
  display: block;
  clear: both;
}

/*
.txt_e:hover{

  outline: 2px dashed var(--clr-red);
  outline-offset: -1px;

}
*/


/* ═══════════════════════════════════════════════════════════
   TEC-METAL · Capa de identidad visual (industrial / moderno)
   Solo var() de variables.css. No se tocan default.css ni temas.
   ═══════════════════════════════════════════════════════════ */

/* Tipografía: Rajdhani (técnica) en titulares + Inter en cuerpo */
html body,
html body p,
html body .lead,
html body input,
html body textarea,
html body select,
html body button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .word-rotator-words b,
html body .tm-title,
html body .header-nav-main nav > ul > li > a {
  font-family: 'Rajdhani', 'Inter', sans-serif;
  letter-spacing: .01em;
}
html body h1, html body h2, html body h3 { text-transform: uppercase; }

/* Logo angular → esquinas rectas en toda la UI */
html body .btn,
html body .card,
html body .featured-box,
html body .thumb-info,
html body .form-control,
html body .nav-pills > li > a,
html body .tm-card,
html body .tm-chip,
html body img.tm-shot {
  border-radius: 0 !important;
}

/* Acentos de marca */
.tm-kicker {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--secondary);
  font-size: .82rem;
  margin-bottom: .6rem;
}
.tm-kicker::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  background: var(--secondary);
  vertical-align: middle;
  margin-right: .65rem;
  position: relative;
  top: -3px;
}
.tm-rule {
  width: 70px;
  height: 4px;
  background: var(--secondary);
  border: 0;
  opacity: 1;
  margin: 1rem 0 1.6rem;
}
.text-center .tm-rule { margin-left: auto; margin-right: auto; }

/* Hero / banner */
.tm-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.tm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(var(--primary-d3-rgb), .92) 0%, rgba(var(--primary-rgb), .72) 55%, rgba(var(--primary-rgb), .35) 100%);
}
.tm-hero > .container { position: relative; z-index: 2; }
.tm-hero h2 { line-height: 1.05; }

/* Tarjetas de servicio */
.tm-card {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  background: var(--dark);
  color: var(--white);
}
.tm-card img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  transition: transform .6s ease, opacity .4s ease;
  opacity: .82;
}
.tm-card:hover img { transform: scale(1.08); opacity: .55; }
.tm-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.5rem;
  background: linear-gradient(to top, rgba(var(--primary-d3-rgb), .96), rgba(var(--primary-d3-rgb), 0));
}
.tm-card-body h4 {
  color: var(--white);
  margin: 0 0 .35rem;
  font-size: 1.25rem;
}
.tm-card-body .tm-more {
  color: var(--secondary-l1);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tm-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 4px;
  background: var(--secondary);
  transition: width .4s ease;
  z-index: 3;
}
.tm-card:hover::before { width: 100%; }

/* Sección oscura industrial */
html body .tm-section-dark,
html body section.tm-section-dark {
  background-color: var(--primary-d3) !important;
  background-image: linear-gradient(135deg, rgba(var(--black-rgb), .25) 0%, transparent 60%) !important;
  color: var(--white) !important;
}
html body .tm-section-dark h1, html body .tm-section-dark h2,
html body .tm-section-dark h3, html body .tm-section-dark h4,
html body .tm-section-dark h5, html body .tm-section-dark p,
html body .tm-section-dark span, html body .tm-section-dark li,
html body .tm-section-dark .tm-label { color: var(--white) !important; }
html body .tm-section-dark .tm-num { color: var(--secondary) !important; }
html body .tm-section-dark .tm-kicker { color: var(--secondary) !important; }

/* Contadores / cifras */
.tm-stat .tm-num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--secondary);
}
.tm-stat .tm-label {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  color: var(--white);
  opacity: .85;
}

/* Triple C */
.tm-cval {
  text-align: center;
  padding: 2.2rem 1.4rem;
  background: var(--white);
  border-top: 4px solid var(--secondary);
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.tm-cval:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(var(--primary-rgb), .15); }
.tm-cval i {
  font-size: 2.6rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.tm-cval h4 { font-size: 1.35rem; color: var(--primary); }

/* CTA franja */
html body .tm-cta,
html body section.tm-cta {
  background-color: var(--secondary) !important;
  background-image: none !important;
  color: var(--primary-d5) !important;
}
html body .tm-cta h1, html body .tm-cta h2,
html body .tm-cta h3, html body .tm-cta h4,
html body .tm-cta p, html body .tm-cta span {
  color: var(--primary-d5) !important;
  opacity: 1 !important;
}
html body .tm-cta .btn-dark {
  background: var(--primary-d3) !important;
  border-color: var(--primary-d3) !important;
  color: var(--white) !important;
}
html body .tm-cta .btn-dark:hover {
  background: var(--primary-d5) !important;
  border-color: var(--primary-d5) !important;
}

/* Contenido enriquecido de servicios/noticias: ritmo tipográfico */
html body .tm-richtext > :first-child { margin-top: 0 !important; }
html body .tm-richtext h2,
html body .tm-richtext h3,
html body .tm-richtext h4 {
  font-family: 'Rajdhani', sans-serif;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-top: 2.6rem !important;
  margin-bottom: .85rem !important;
  line-height: 1.2;
}
html body .tm-richtext h2 { font-size: 1.7rem; }
html body .tm-richtext h3 { font-size: 1.45rem; }
html body .tm-richtext h4 { font-size: 1.2rem; }
html body .tm-richtext h2 + ul,
html body .tm-richtext h3 + ul,
html body .tm-richtext h3 + p,
html body .tm-richtext h2 + p { margin-top: 0; }
html body .tm-richtext p { margin: 0 0 1.05rem; line-height: 1.8; }
html body .tm-richtext ul { margin: 0 0 1.4rem; padding-left: 1.25rem; }
html body .tm-richtext li { margin-bottom: .45rem; line-height: 1.6; }
html body .tm-richtext .lead {
  font-size: 1.18rem; font-weight: 500; color: var(--primary-d2);
  text-transform: none; font-family: 'Inter', sans-serif;
  margin: 0 0 1.6rem !important;
}
html body .tm-richtext div { margin-bottom: .35rem; }

/* Galería de proyecto */
.tm-gallery a { display:block; overflow:hidden; background: var(--quaternary-d3); }
.tm-gallery img {
  width: 100%; height: 240px; object-fit: cover;
  transition: transform .6s ease;
}
.tm-gallery a:hover img { transform: scale(1.1); }

/* Footer: todo el texto en blanco */
html body #footer,
html body #footer p,
html body #footer span,
html body #footer li,
html body #footer h5,
html body #footer strong,
html body #footer a,
html body #footer .footer-copyright,
html body #footer .footer-copyright a,
html body #footer .contact-details a {
  color: var(--white) !important;
  opacity: 1 !important;
}
html body #footer h5 {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body #footer a:hover,
html body #footer .footer-copyright a:hover {
  color: var(--secondary) !important;
}
html body #footer .footer-copyright {
  border-top: 1px solid rgba(var(--white-rgb), .12);
}

/* Page-header: se mantiene el gris por defecto del tema (bg-color-light-scale-1) */

/* Botón de teléfono del hero: texto e icono en blanco */
html body .tm-hero .btn-outline.btn-light,
html body .tm-hero .btn-outline.btn-light i,
html body .tm-hero .btn-outline.btn-light:visited {
  color: var(--white) !important;
  border-color: var(--white) !important;
}
html body .tm-hero .btn-outline.btn-light:hover,
html body .tm-hero .btn-outline.btn-light:hover i {
  background-color: var(--white) !important;
  color: var(--primary-d3) !important;
}

@media (max-width: 991px){
  .tm-hero { min-height: 70vh; }
  .tm-card img { height: 230px; }
}