/*
Theme Name: Wired IT Theme
Author: Wired IT
Author URI: https://www.wiredit.mx/
Description: Template Wired IT 2022
Version: 1.0
*/

/* Fonts */
/*
@font-face{font-family: 'Nombre_Font';src: url('../fonts/Nombre_Font.eot');src: url('../fonts/Nombre_Font.eot?#iefix') format('embedded-opentype'),url('../fonts/Nombre_Font.woff2') format('woff2'),url('../fonts/Nombre_Font.woff') format('woff'),url('../fonts/Nombre_Font.ttf') format('truetype'),url('../fonts/Nombre_Font.svg#Nombre_Font') format('svg');font-weight: normal;font-style: normal;}
*/
@font-face {
    font-family: 'GillSans';
    src: url('/wp-content/themes/wiredit/fonts/gillsan-bold.eot');
    src: url('/wp-content/themes/wiredit/fonts/gillsan-bold.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/wiredit/fonts/gillsan-bold.woff2') format('woff2'),
         url('/wp-content/themes/wiredit/fonts/gillsan-bold.woff') format('woff'),
         url('/wp-content/themes/wiredit/fonts/gillsan-bold.ttf')  format('truetype'),
         url('/wp-content/themes/wiredit/fonts/gillsan-bold.svg#GillSans-Bold') format('svg');
  font-weight:700;
  font-display:swap;
}
@font-face {
    font-family: 'GillSans';
    src: url('/wp-content/themes/wiredit/fonts/GillSans-Light.eot');
    src: url('/wp-content/themes/wiredit/fonts/GillSans-Light.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/wiredit/fonts/GillSans-Light.woff2') format('woff2'),
         url('/wp-content/themes/wiredit/fonts/GillSans-Light.woff') format('woff'),
         url('/wp-content/themes/wiredit/fonts/GillSans-Light.ttf')  format('truetype'),
         url('/wp-content/themes/wiredit/fonts/GillSans-Light.svg#GillSans-Light') format('svg');
  font-weight:300;
  font-display:swap;
}
@font-face {
    font-family: 'GillSans';
    src: url('/wp-content/themes/wiredit/fonts/GillSans.eot');
    src: url('/wp-content/themes/wiredit/fonts/GillSans.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/wiredit/fonts/GillSans.woff2') format('woff2'),
         url('/wp-content/themes/wiredit/fonts/GillSans.woff') format('woff'),
         url('/wp-content/themes/wiredit/fonts/GillSans.ttf')  format('truetype'),
         url('/wp-content/themes/wiredit/fonts/GillSans.svg#GillSans') format('svg');
  font-weight:400;
  font-display:swap;
}

/* Generic */
:root {
  --main-color: #d02c2f;
  --second-color: #0d6efd;
}
body{font-size: 1rem;font-family: 'GillSans', sans-serif;font-weight:400;}
.h1, h1{font-size: 2.2rem;}
.h2, h2{font-size: 2rem;}
.h3, h3{font-size: 1.4rem;}
.h4, h4{font-size: 1.1rem;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: .5rem;font-weight:700;}
a, a:hover{text-decoration:none;cursor:pointer;}
address{margin-bottom: .5rem;font-weight: 400;}
dl, ol, ul {margin-bottom: 0;}
.main-color{color: var(--main-color);}
.second-color{color: var(--second-color);}
.generic-border{border-radius: 3px 3px 3px 3px;-moz-border-radius: 3px 3px 3px 3px;-webkit-border-radius: 3px 3px 3px 3px;}
.btn-main{background:transparent;border-radius: 0;padding:10px 15px;font-weight:700;border:solid 2px var(--main-color);color:var(--main-color);transition:.5s all;line-height: 1;}
.btn-main:hover{color:var(--main-color);}
.btn-second{background:var(--main-color);border-radius: 0;padding:10px 15px;font-weight:700;border:unset;color:white !important;padding-top: 13px;}
.section{padding-top:50px;padding-bottom:50px;}
.text-justify{text-align: justify;}
.object-fit-cover{object-fit: cover;}
select:invalid, select option[value=""] {color: #7F878E;}
img.object-fit-cover { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; }
img.object-fit-cover:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }

/* Header */
header .navbar-brand{max-width: 16rem;display: block;margin-right: auto;margin-left: unset;}
header .contact-information li{margin-bottom: 4px;}
header .contact-information li a{color: var(--main-color);}

/* Footer */
footer #footer-bottom{background-color:#262626;color:#fff;padding-top: 20px;padding-bottom: 20px;border-top: 2px solid #343A40;}
footer #footer-bottom span,
footer #footer-bottom a:hover,
footer #footer-bottom a,
footer #footer-bottom p{color:white;}

/* Slider o Banner Principal  */
#home{position:relative;}
#home #banner-slider-principal img{min-height: 500px;object-fit: cover;}
#home .carousel-indicators{z-index: 99;}
#home #contacto-header{position: absolute;right: 0;display: flex;align-items: center;justify-content: center;top: 0;bottom: 0;left:0;z-index:2;}
#home #contacto-header h3{color:white;font-size: 30px;}
#home #contacto-header .box-contact{padding:20px;background-color:rgba(0, 0, 0, 0.36);border-radius:10px;}

/* Breadcrumb */
#breadcrumb { background: #fbfbfb; padding: 10px 0;     /* Agregar espacio arriba y abajo */ border-bottom: 1px solid #ddd;     /* Agregar una línea inferior */ }
#breadcrumb ul { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center; }
#breadcrumb ul span { display: inline; margin-right: 5px; font-size: 14px; color: #555; }
#breadcrumb ul a { color: var(--main-color); text-decoration: none; }
#breadcrumb ul a:hover { text-decoration: underline; }

/* General Form */
/* Visualmente si funciona pero no se va con el formato en el form, esto en JQuery y POST
.sendmail_form input[type="text"]{text-transform:capitalize;}
.sendmail_form input[type="email"]{text-transform:lowercase;}
*/
::-webkit-input-placeholder { /* WebKit browsers */text-transform:none;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */text-transform:none;}
::-moz-placeholder { /* Mozilla Firefox 19+ */text-transform:none;}
:-ms-input-placeholder { /* Internet Explorer 10+ */text-transform:none;}
::placeholder { /* Recent browsers */text-transform:none;}
.sendmail_form span{color:red;}
.sendmail_form .sendmail_legend{font-size:.8rem;}
.sendmail_form .sendmail_ajax_loader{display:none;}
.sendmail_form .sendmail_result{display:none;margin-bottom:0px}
.sendmail_form { position: relative; }
.form-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);     /* fondo oscuro */ z-index: 9999; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(2px); border-radius: 10px; }
.form-overlay-content { text-align: center; font-size: 1.5rem; color: #ffffff; font-weight: bold; display: flex; flex-direction: column; align-items: center; }
.spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.2); border-top: 4px solid #0d6efd;     /* azul Bootstrap por default */ border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.sidebar-sticky {position: sticky;top: 100px;align-self: flex-start;}
.form-overlay[style*="display: none"] {
  pointer-events: none;
}

/* Social Media */
#redes-sociales ul{list-style:none;padding-left:0px;margin-bottom:0px;}
#redes-sociales li{display:inline;}

/* Chat */
.chat-whatsapp{position:fixed; width:60px; height:60px; bottom:27px; right:27px; color:#FFF; border-radius:50px; text-align:center; z-index:999;}
.chat-facebook{position:fixed; width:60px; height:60px; bottom:123px; right:27px; color:#FFF; border-radius:50px; text-align:center; z-index:999;}
.my-chat{margin-top:22px;}

/* Social */
#fixed-social{position: fixed;right: 0;top: 50%;z-index: 9;transform: translateY(-50%);}
#fixed-social ul{list-style: none;padding: 0;}
#fixed-social ul li{margin: 10px;}
#fixed-social ul li a{padding: 10px;background: #3B5998;width: 80px;height: 80px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color:white;font-size: 20px;}

/* Services */
#services h1 { margin-bottom: 2rem; position: relative; font-size: 36px;     /* Tamaño de fuente mejorado */ font-weight: 700;     /* Más grueso */ text-transform: uppercase;     /* Texto en mayúsculas */ letter-spacing: 1px;     /* Espaciado entre letras */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);}
#services h1:after { position: absolute; content: ""; bottom: -10px; left: 0; background: var(--main-color); width: 70px; height: 4px; }
#services h3 { margin-bottom: 1rem; font-size: 28px;     /* Tamaño de fuente mejorado */ font-weight: 600;     /* Más grueso */ }
#services ul { list-style: none; padding-left: 0; margin-bottom: 0; }
#services ul li { margin-bottom: 8px; position: relative; padding-left: 25px;     /* Espacio aumentado para el icono */ font-size: 18px;     /* Tamaño de fuente mejorado */ line-height: 1.5;     /* Mejor legibilidad */ }
#services ul li.round:before { position: absolute; content: ""; border: solid 3px var(--main-color); background-color: transparent; width: 12px; height: 12px; left: 0; top: 50%; transform: translateY(-50%);     /* Centra el icono verticalmente */ border-radius: 50%;     /* Hace que el borde sea circular */ transition: 0.5s all; }
#services ul li.check:before { position: absolute; content: "\2713"; color: green; background-color: transparent; width: 18px; height: 18px; left: 0; top: 50%; transform: translateY(-50%);     /* Centra el icono verticalmente */ }
#services .section:last-child { background: #f2f2f2; padding: 60px 0;     /* Más espacio arriba y abajo */ }
#services .img-fluid { border-radius: 10px;     /* Bordes redondeados */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);     /* Sombra */ transition: transform 0.3s, box-shadow 0.3s;     /* Transiciones suaves */ }
#services .img-fluid:hover { transform: scale(1.05);     /* Aumento de tamaño en hover */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);     /* Sombra más intensa en hover */ }
#services .btn-second { display: inline-block; padding: 15px 30px;     /* Padding para un botón más grande */ font-size: 18px;     /* Tamaño de fuente más grande */ font-weight: bold; color: white; background-color: var(--main-color);     /* Color de fondo principal */ border: none; border-radius: 30px;     /* Bordes redondeados */ text-transform: uppercase;     /* Texto en mayúsculas */ letter-spacing: 1px;     /* Espaciado entre letras */ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;     /* Transiciones suaves */ text-decoration: none;     /* Sin subrayado */ }
#services .btn-second:hover { /* Fondo más oscuro en hover */ transform: translateY(-3px);     /* Levanta el botón en hover */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);     /* Sombra en hover */ }
#services .btn-second:active { /* Fondo aún más oscuro en active */ transform: translateY(0);     /* Resetea la elevación */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);     /* Sombra en active */ }

/* Contacto */
#contact {background:linear-gradient(to bottom right, #f0f0f0 25%, transparent 25%),linear-gradient(to top left, #000000 25%, transparent 25%);background-blend-mode: screen; /* Combina los gradientes */color: white;padding: 60px 0;}
#contact h2 { font-weight: 700; color: var(--main-color); margin-bottom: 20px; font-size: 36px;     /* Tamaño de fuente mejorado */ text-transform: uppercase;     /* Texto en mayúsculas */ letter-spacing: 1px;     /* Espaciado entre letras */  }
#contact h3 { font-weight: 600; color: black; margin-bottom: 20px; font-size: 28px;     /* Tamaño de fuente mejorado */ text-transform: uppercase;     /* Texto en mayúsculas */ letter-spacing: 1px;     /* Espaciado entre letras */ }
#contact .information ul { list-style: none; padding-left: 0; margin-bottom: 0; }
#contact .information ul li { display: flex; align-items: center;     /* Centrar verticalmente */ margin-bottom: 8px; position: relative; padding-left: 30px;     /* Espacio para el icono */ font-size: 18px;     /* Tamaño de fuente mejorado */ line-height: 1.5;     /* Mejor legibilidad */ color: black;}
#contact .information ul li i { margin-right: 10px;     /* Espacio entre el icono y el texto */ font-size: 20px;     /* Tamaño del icono */ color: var(--main-color);     /* Color del icono */ }
#contact .information ul li a { color: black; font-weight: 300; text-decoration: none;     /* Sin subrayado */ transition: color 0.3s;     /* Transición suave para el color */ font-weight: 400;}
#contact .information ul li a:hover { color: var(--main-color);     /* Cambiar color en hover */ }
#contact .information ul li a i { font-style: normal; color: var(--main-color);     /* Color de los iconos */ }
#contact iframe { width: 100% !important; margin-top: 1rem !important; }

/* Sección Principal */
#page h1 { font-size: 2.5rem; color: var(--main-color); margin-top: 20px; }
#page p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
#page ul { list-style: none; padding-left: 0; margin-bottom: 2rem; }
#page ul li { padding-left: 20px; position: relative; margin-bottom: 10px; }
#page ul li::before { content: '•'; color: var(--main-color); position: absolute; left: 0; top: 0; }

/* Botón de Aplicación */
#page .btn { display: inline-block; padding: 15px 30px; font-size: 18px; font-weight: bold; color: white; background-color: var(--main-color); border: none; border-radius: 30px; text-transform: uppercase; letter-spacing: 1px; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; text-decoration: none; text-align: center; margin-top: 20px; }
#page .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
#page .btn:active { transform: translateY(0); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

/* Empleos internos */
#empleos-internos {background:linear-gradient(to bottom right, #000000 25%, transparent 25%),linear-gradient(to top left, #f0f0f0 25%, transparent 25%);background-blend-mode: screen; /* Combina los gradientes */padding: 60px 0;}
#empleos-internos h1 { margin-bottom: 2rem; position: relative; font-size: 36px;     /* Tamaño de fuente mejorado */ font-weight: 700;     /* Más grueso */ text-transform: uppercase;     /* Texto en mayúsculas */ letter-spacing: 1px;     /* Espaciado entre letras */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); text-align: left;}
#empleos-internos h1:after { position: absolute; content: ""; bottom: -10px; left: 0; background: var(--main-color); width: 70px; height: 4px; }
#empleos-internos h3 { margin-bottom: 1rem; font-size: 28px;     /* Tamaño de fuente mejorado */ font-weight: 600;     /* Más grueso */ }
#empleos-internos ul { list-style: none; padding-left: 0; margin-bottom: 0; }
#empleos-internos ul li { margin-bottom: 8px; position: relative; padding-left: 25px;     /* Espacio aumentado para el icono */ font-size: 18px;     /* Tamaño de fuente mejorado */ line-height: 1.5;     /* Mejor legibilidad */ }
#empleos-internos ul li.round:before { position: absolute; content: ""; border: solid 3px var(--main-color); background-color: transparent; width: 12px; height: 12px; left: 0; top: 50%; transform: translateY(-50%);     /* Centra el icono verticalmente */ border-radius: 50%;     /* Hace que el borde sea circular */ transition: 0.5s all; }
#empleos-internos ul li.check:before { position: absolute; content: "\2713"; color: green; background-color: transparent; width: 18px; height: 18px; left: 0; top: 50%; transform: translateY(-50%);     /* Centra el icono verticalmente */ }
#empleos-internos .img-fluid { border-radius: 10px;     /* Bordes redondeados */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);     /* Sombra */ transition: transform 0.3s, box-shadow 0.3s;     /* Transiciones suaves */ }
#empleos-internos .img-fluid:hover { transform: scale(1.05);     /* Aumento de tamaño en hover */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);     /* Sombra más intensa en hover */ }
#empleos-internos .btn-second { display: inline-block; padding: 15px 30px;     /* Padding para un botón más grande */ font-size: 18px;     /* Tamaño de fuente más grande */ font-weight: bold; color: white; background-color: var(--main-color);     /* Color de fondo principal */ border: none; border-radius: 30px;     /* Bordes redondeados */ text-transform: uppercase;     /* Texto en mayúsculas */ letter-spacing: 1px;     /* Espaciado entre letras */ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;     /* Transiciones suaves */ text-decoration: none;     /* Sin subrayado */ }
#empleos-internos .btn-second:hover { transform: translateY(-3px);     /* Levanta el botón en hover */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);     /* Sombra en hover */ }
#empleos-internos .btn-second:active { transform: translateY(0);     /* Resetea la elevación */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);     /* Sombra en active */ }

/* Top header */
#top-header { background-color: #1e1e1e; }
#top-header .top-header-inner { min-height: 42px; }
#top-header a { text-decoration: none; }
#top-header .top-header-item { font-size: 16px; font-weight: 500; color: #fff; white-space: nowrap; }
#top-header .top-header-item i { font-size: 16px; color: #fff; flex-shrink: 0; }
#top-header .top-header-item:hover { color: #ccc; }

/* Navbar */
#navbar { background-color: #fff; border-bottom: 1px solid #e5e5e5; }
#navbar .nav-link { font-size: 16px; font-weight: 500; color: #000; padding-left: 1.2rem; padding-right: 1.2rem; }
#navbar .nav-link:hover { color: var(--main-color); }
#navbar .btn-aplica { background-color: #25D366; color: #fff; font-size: 16px; font-weight: 600; border: none; border-radius: 50px; padding: 8px 22px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#navbar .btn-aplica i { font-size: 17px; }
#navbar .btn-aplica:hover { transition: .5s ease all;transform: scale(1.05); }

/* Empleos */
#empleos-page { background: #F8F9FA; min-height: 80vh; padding: 40px 0 60px; }
#empleos-sidebar h2 { font-size: 32px; font-weight: 400; color: #111; line-height: 1.2; margin-bottom: 12px; }
#empleos-sidebar .sidebar-desc { font-size: 20px; font-weight: 400; color: #000; margin-bottom: 20px; }
#empleos-sidebar .search-wrap { display: flex; margin-bottom: 24px; }
#empleos-sidebar .search-wrap input { border: 1.5px solid var(--main-color); border-right: none; border-radius: 8px 0 0 8px; padding: 10px 14px; font-size: 16px; flex: 1; outline: none; background: #fff; color: #222; }
#empleos-sidebar .search-wrap input::placeholder { color: #aaa; }
#empleos-sidebar .search-wrap button { background: var(--main-color); border: none; border-radius: 0 8px 8px 0; padding: 0 18px; color: #fff; font-size: 16px; cursor: pointer; }
#empleos-sidebar .search-wrap button:hover { background: #a93226; }
#empleos-sidebar .filter-title { font-size: 20px; font-weight: 500; color: #000; margin-bottom: 12px; }
#empleos-sidebar .filter-check { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
#empleos-sidebar .filter-check input[type="checkbox"] { accent-color: var(--main-color); width: 18px; height: 18px; cursor: pointer; }
#empleos-sidebar .filter-check label { font-size: 16px; font-weight: 400; color: #000; cursor: pointer; }
#empleos-sidebar .btn-filtrar { background: var(--main-color); color: #fff; font-weight: 700; border: none; border-radius: 8px; padding: 7px 20px; font-size: 16px; margin-top: 8px; cursor: pointer; gap: 7px;display: inline-flex;align-items: center;}
#empleos-sidebar .btn-filtrar:hover { background: #a93226; }
#empleos-list .vacante-card { background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; padding: 24px; margin-bottom: 16px; transition: box-shadow .2s; }
#empleos-list .vacante-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.10); }
#empleos-list .vacante-card h3 { font-size: 24px; font-weight: 400; color: #000; margin-bottom: 6px; }
#empleos-list .vacante-card .vacante-loc { font-size: 16px; font-weight: 500; color: #6C757D; display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
#empleos-list .vacante-card .vacante-loc i { color: #6C757D; font-size: 16px; }
#empleos-list .vacante-card p { font-size: 16px; font-weight: 400; color: #000; line-height: 1.6; margin-bottom: 14px; }
#empleos-list .btn-ver { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--main-color); border: 1.5px solid var(--main-color); border-radius: 10px; padding: 7px 18px; text-decoration: none; transition: background .2s, color .2s; }
#empleos-list .btn-ver:hover { background: var(--main-color); color: #fff; }
#empleos-list .no-results { font-size: 24px; color: #888; padding: 24px 0; }

/* Paginador */
#empleos-list .paginador,
#empleos-single .paginador {margin-top: 16px;}
#empleos-list .pag-item,
#empleos-single .pag-item {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 10px;border: 1.5px solid var(--main-color);color: var(--main-color);font-size: 0.9rem;font-weight: 600;text-decoration: none;transition: background .15s, color .15s;cursor: pointer;}
#empleos-list .pag-item:hover,
#empleos-single .pag-item:hover {background: var(--main-color);color: #fff;}
#empleos-list .pag-item.pag-active,
#empleos-single .pag-item.pag-active {background: var(--main-color);color: #fff;border-color: var(--main-color);pointer-events: none;}
#empleos-list .pag-item.pag-dots,
#empleos-single .pag-item.pag-dots {border: none;color: #aaa;cursor: default;}
#empleos-list .pag-item.pag-dots:hover,
#empleos-single .pag-item.pag-dots:hover {background: transparent;color: #aaa;}
/* Banner */
#empleos-banner {background-image: url('/wp-content/themes/wiredit/images/banners/ciudad_fondo.webp');background-size: cover;background-position: center;min-height: 380px;display: flex;align-items: center;justify-content: center;}
#empleos-banner .banner-overlay {width: 100%;padding: 80px 0;}
#empleos-banner .banner-content h1 {color: #fff;font-size: 32px;font-weight: 600;line-height: 1.2;margin-bottom: 18px;}
#empleos-banner .banner-content p {color: #fff;font-size: 20px;font-weight: 400;margin-bottom: 28px}
#empleos-banner .banner-search {max-width: 650px;margin: auto;display: flex;}
#empleos-banner .banner-search input {flex: 1;border: 1px solid var(--main-color);padding: 12px 20px;border-radius: 10px 0 0 10px;font-size: 16px;outline: none;background: #FBFBFBCC;}
#empleos-banner .banner-search button {width: 70px;border: none;background: var(--main-color);color: #fff;border-radius: 0 10px 10px 0;font-size: 18px;}
#empleos-single {background: #F8F9FA;padding: 50px 0 70px;}

/* Cards */
#empleos-single .vacante-card {background: #fff;border-radius: 14px;border: 1px solid #E5E5E5;padding: 30px;margin-bottom: 20px;transition: .25s;}
#empleos-single .vacante-card:hover {box-shadow: 0 5px 20px rgba(0,0,0,.08);}
#empleos-single .vacante-card h3 {font-size: 24px;color: #000;font-weight: 600;margin-bottom: 10px;font-weight: 400;}
#empleos-single .vacante-loc {color: #6C757D;display: flex;align-items: center;gap: 7px;margin-bottom: 14px;font-size: 16px;font-weight: 500;}
#empleos-single .vacante-card p {font-size: 16px;font-weight: 400;line-height: 1.7;color: #000;margin-bottom: 18px;}
#empleos-single .btn-ver {display: inline-flex;align-items: center;gap: 8px;padding: 7px 15px;border: 1px solid var(--main-color);border-radius: 12px;color: var(--main-color);text-decoration: none;font-size: 16px;font-weight: 700;transition: .2s;}
#empleos-single .btn-ver:hover {background: var(--main-color);color: #fff;transform: translateY(0);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

/* Empleos detalle */
#detalle .hero {position: relative;height: 400px;overflow: hidden;border-radius: 10px;}
#detalle .hero img {width: 100%;height: 100%;object-fit: cover;}
#detalle .hero-band {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(30, 30, 30, 0.78);padding: 14px 24px;}
#detalle .hero-title {color: #fff;font-size: 40px;font-weight: 600;margin: 0;}
#detalle .card {border: none;border-radius: 10px;box-shadow: 0 1px 6px rgba(0,0,0,.08);}
#detalle .titulo {font-size: 32px;font-weight: 500;color: #000;border-bottom: none;margin-bottom: 1rem;}
#detalle .titulo img {margin-bottom: 10px;}
#detalle .meta-row {font-size: 16px;color: #282828;margin-bottom: .75rem;}
#detalle .meta-row i {margin-right: 7px;}
#detalle .hero-descripcion-puesto {font-size: 16px;font-weight: 400;color: #000;}
#detalle .beneficios-wysiwyg ul {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
#detalle .beneficios-wysiwyg ul li {display: flex;align-items: flex-start;margin-bottom: 5px;padding-right: 12px;box-sizing: border-box;}
#detalle .beneficios-wysiwyg ul li::before {content: "\f058";font-family: "Font Awesome 6 Free";font-weight: 900;font-size: .95rem;color: #D02C2F;flex-shrink: 0;min-width: 34px;display: flex;align-items: center;justify-content: center;}
#detalle .beneficios-wysiwyg ul li strong {font-size: .9rem;font-weight: 600;display: block;margin-bottom: 2px;color: #222;}
#detalle .beneficios-wysiwyg ul li p {font-size: .82rem;color: #000;margin: 0;}
#detalle .detalle-wysiwyg ul {list-style: none;padding: 0;margin: 0;}
#detalle .detalle-wysiwyg ul li {display: flex;align-items: flex-start;gap: 10px;font-size: 16px;font-weight: 400;color: #000;margin-bottom: 3px;}
#detalle .detalle-wysiwyg ul li::before {content: "\f00c";font-family: "Font Awesome 6 Free";font-weight: 900;color: #D02C2F;flex-shrink: 0;margin-top: 2px;}
#detalle .btn-whatsapp{background: #25D366;color: #fff;font-weight: 700;border: none;border-radius: 6px;padding: 10px 20px;font-size: 16px;width: 100%;display: inline-flex;align-items: center;justify-content: center;gap: 9px;line-height: 1;}
#detalle .btn-whatsapp i{font-size: 16px;position: relative;}
#detalle .btn-whatsapp span{display: flex;align-items: center;}
#detalle .btn-whatsapp:hover {transform: scale(1.05);}
#detalle .btn-ver-ofertas{background: var(--main-color);color: #fff;font-weight: 700;border: none;border-radius: 6px;padding: 10px 20px;font-size: 16px;width: 100%;display: inline-flex;align-items: center;justify-content: center;gap: 9px;line-height: 1;}
#detalle .btn-ver-ofertas i{font-size: 16px;position: relative;}
#detalle .btn-ver-ofertas:hover {transform: scale(1.05);}
#detalle .sub-title {font-size: 16px;font-weight: 700;color: #fff;margin-bottom: 12px;}
#detalle .sub-title strong {display: block;font-size: 16px;font-weight: 700;color: #fff;}
/* #detalle .form-control,
#detalle .form-select {border-radius: 6px;font-size: .85rem;border: 1px solid #ddd;color: #212529;margin-bottom: 8px;} */
#detalle .btn-enviar {background: #D02C2F;color: #fff;border: none;border-radius: 6px;padding: 10px;font-size: 16px;font-weight: 700;width: 100%;display: flex;align-items: center;justify-content: center;gap: 8px;transition: .5s ease all;gap: 7px;display: inline-flex;}
#detalle .btn-enviar:hover {transform: scale(1.05);}
#detalle .wpcf7 input.btn-enviar:hover {transform: scale(1.05);}
.sidebar-header h5 {color: #fff;font-size: 20px;font-weight: 700;text-align: center;}
.sidebar-header p {color: #fff;font-size: 16px;font-weight: 500;text-align: center;}

/* Footer */
#footer-cta { background-color: #262626; padding: 60px 0; }
#footer-cta h4 { font-size: 28px; font-weight: 600; color: #fff; margin-bottom: 16px; }
#footer-cta .footer-desc { font-size: 16px; font-weight: 400; color: #fff; margin-bottom: 28px; line-height: 1.7; }
#footer-cta .footer-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
#footer-cta .footer-item i { color: #fff; font-size: 16px; flex-shrink: 0; margin-top: 2px; }
#footer-cta .footer-item a { font-size: 16px; font-weight: 500; color: #ddd; line-height: 1.6; text-decoration: none !important; }
#footer-cta .footer-item a:hover { color: #fff; text-decoration: underline; }
#footer-cta .footer-item span { font-size: 16px; font-weight: 500; color: #ddd; line-height: 1.6; }
#footer-cta .map-wrap { border-radius: 7px; overflow: hidden; height: 340px; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
#footer-cta .map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 991.98px) { #footer-cta .map-wrap { height: 350px !important; margin-top: 32px; } #footer-cta h4 { font-size: 24px !important; } #footer-cta .footer-desc { font-size: 16px !important; } #footer-cta .footer-item a {font-size: 16px !important;} }
@media (max-width: 575.98px) { #footer-cta { padding: 40px 0; } #footer-cta .map-wrap { height: 220px; } }

/* Reportes */
#reportes{padding-top:20px;}

/* Nieve */
#snow-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 9999;overflow: hidden;}
.snowflake {position: absolute;top: -50px;font-size: 1rem;color: white;opacity: 0.8;animation: fall linear infinite;}
@keyframes fall {
  0% {
      transform: translateY(-100px);
      opacity: 1;
  }
  100% {
      transform: translateY(100vh);
      opacity: 0;
  }
}

/* Contenedor de corazones */
#hearts-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.heart { position: absolute; top: -50px; font-size: 1rem; color: red; opacity: 0.9; animation: fall linear infinite; }
@keyframes fall {
  0% {
      transform: translateY(-100px) rotate(0deg);
      opacity: 1;
  }
  100% {
      transform: translateY(100vh) rotate(360deg);
      opacity: 0;
  }
}

/*REFERENCIA PARA LAS MEDIDAS https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/*MEDIA QUERY GENERICO QUE PUEDE APLICAR PARA TODOS LOS CELULARES*/
@media screen and (max-width: 1399px){

}
@media screen and (max-width: 1199px){

}
@media screen and (max-width: 991px){
  /* Menu */
  header .navbar-brand{margin-left: auto;margin-bottom: 1rem;}
}
@media screen and (max-width: 767px){
    /* Slider o Banner Principal  */
    #home #banner-slider-principal img{min-height: auto;object-fit: cover;}
    #home #contacto-header{position: relative;margin-top: 2rem;}
    #home #contacto-header .box-contact{background-color: rgb(0, 0, 0);}

    #contact {background:linear-gradient(to bottom right, #f0f0f0 15%, transparent 15%),linear-gradient(to top left, #000000 15%, transparent 15%);background-blend-mode: screen; /* Combina los gradientes */color: white;padding: 60px 0;}

    #empleos-internos {background:linear-gradient(to bottom right, #000000 15%, transparent 15%),linear-gradient(to top left, #f0f0f0 25%, transparent 25%);background-blend-mode: screen; /* Combina los gradientes */padding: 0;}

    #top-header .top-header-inner { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
    #top-header .top-header-item { font-size: 15px !important; white-space: normal !important; align-items: flex-start !important; }
    #top-header .top-header-item i { margin-top: 2px; }

    #navbar .navbar-collapse { border-top: 1px solid #e5e5e5; margin-top: 8px; padding-top: 8px; }
    #navbar .nav-link { padding-left: 0; padding-right: 0; }
    #navbar .btn-aplica { margin-top: 10px; width: 100%; justify-content: center; }

    #empleos-sidebar { margin-bottom: 28px; } #empleos-sidebar h2 { font-size: 32px;max-width: 300px; }
    #empleos-page { padding: 24px 0 40px; }

    #empleos-banner {min-height: 320px;}
    #empleos-banner .banner-content h1 {font-size: 24px !important;}
    #empleos-banner .banner-content p {font-size: 16px !important;}
    #empleos-single .vacante-card {padding: 22px;}
    #empleos-single .vacante-card h3 {font-size: 28px;}

    #detalle .hero-title {font-size: 24px !important;}
    #detalle .titulo {font-size: 24px !important;}

    .sidebar-sticky {position: static;}

    .mobile-center {text-align: center;}
    .navbar-light .navbar-toggler-icon {filter: brightness(0);}
    .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;}
}
@media screen and (max-width: 575px){

}