@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --color-primary: #27457e;
  --color-primary-hover: #061243;
  --color-secondary: #232323;
  --color-white: #FFF;
  --color-gray: #EEE;
  --color-gray2: #9c9c9c;
  --color-red: #A5192B;
  --color-red-hover: #770C19;
  --color-req: #F00;
  --color-blue: #1976d2;
}

body, html {margin: 0;padding: 0;width: 100%;color: var(--color-secondary);font-size: 15px;min-height: 100%;background-color: var(--color-white);scroll-behavior: smooth;font-weight: 400;}
* {font-family: 'Open Sans', sans-serif;box-sizing: border-box;}
a {text-decoration: none;transition: .3s;color: var(--color-red);}
h2, h3, h4 {font-weight: 700;color: var(--color-primary);}
h2 {font-size: 30px;}
h3 {font-size: 23px;}
h4 {font-size: 20px;}
li::marker {color: var(--color-red);font-weight: 700;font-size: 30px;}

#preloader {position: fixed;top:0; left:0;right:0; bottom:0;background: var(--color-white);z-index: 100000;}
#loader {width: 50px;height: 50px;position: absolute;left:50%; top:50%;background: url(../images/loader.gif) no-repeat center 0;margin:-25px 0 0 -25px;}

.topBar {background-color: var(--color-primary);padding: 0;color: var(--color-white);}
.topBar a {color:var(--color-white);text-decoration: none;padding: 8px 10px;display: flex;align-items: center;}
.topBar a:hover {background: rgba(255,255,255, .1);}
.topBar .redes svg {width: 20px;}
.topBar .redes svg path {fill: var(--color-white);}

header {position: sticky;top:0;width: 100%;background-color: var(--color-white);box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);padding: 10px;z-index: 5;}
header nav {display: none;}
header nav .item {font-size: 15px;font-weight: 800;padding: 8px 20px;text-decoration: none;position: relative;color: var(--color-primary);display: inline-flex;gap:5px;align-items: center;cursor: pointer;}
header nav .item::after {content: '';position: absolute;top: 0;left: 0;bottom:0;right:0;transition: .3s;background-color: var(--color-gray);z-index: -1;transform: scale(0);opacity: 0;border-radius: 30px;}
header nav .item.active::after,
header nav .item:hover::after {transform: scale(1);opacity: 1;}
header nav .item svg {width: 15px;transition: .3s;}

header nav .item .submenu {position: absolute;width: 170px;background-color: var(--color-white);border-radius: 10px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);top:110%;right: 25px;overflow: hidden;opacity: 0;visibility: hidden;transition: .1s;transform: translateY(-10px);}
header nav .item .submenu a {font-weight: 400;border-bottom: 1px solid var(--color-gray);padding: 10px 20px;color: var(--color-secondary);display: block;transition: .3s;font-size: 16px;}
header nav .item .submenu a:last-child {border-bottom: none;}
header nav .item .submenu a:hover {background-color: var(--color-gray);}

header nav .item:hover .submenu {visibility: visible;opacity: 1;transform: translateY(0);}
header nav .item:hover svg {transform: rotate(180deg);}

.slide_bottom_menu {position: relative;display: flex;box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);margin-bottom: 40px;flex-wrap: wrap;}
.slide_bottom_menu a {flex-basis: 50%;flex-grow: 1;flex-shrink: 1;background-color: var(--color-white);padding: 15px 10px;text-align: center;color: var(--color-primary);font-size: 16px;position: relative;font-weight: 400;border-right: 1px solid var(--color-gray);border-bottom: 1px solid var(--color-gray);display: flex;align-items: center;justify-content: center;}
.slide_bottom_menu a:last-child {border-right: none;}
.slide_bottom_menu a:hover {background-color: var(--color-gray);}

.home_services {display: flex;gap:30px;margin-bottom: 50px;flex-wrap: wrap;}
.home_services .service {flex-basis: 0;flex-grow: 1;flex-shrink: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;gap:10px;background: linear-gradient(183deg, rgba(18,48,168,1) 0%, rgba(6,16,59,1) 100%);min-height: 170px;padding: 20px;text-align: center;border-radius: 10px;min-width: 230px;}
.home_services .service p {font-weight: 700;text-transform: uppercase;color: var(--color-white);margin: 0;font-size: 20px;transition: .3s;}
.home_services .service img {transition: .3s;transform: scale(.7);}
.home_services .service:hover {transform: scale(1.05);}
.home_services .service:hover img {transform: scale(1) rotateY(180deg);transform-style: preserve-3d;}
.home_services .service:hover p {transform: scale(.8);}

.home_sucursales {display: flex;gap: 30px;}
.home_sucursales .maps {flex-grow: 1;flex-shrink: 1;}
.home_sucursales .maps iframe {width: 100%;height: 100%;border-radius: 10px;}
.home_sucursales .card {flex-basis: 40%;flex-shrink: 0;flex-grow: 0;text-align: center;}

.home_blog_container {display: flex;justify-content: center;gap: 20px;padding: 10px;flex-wrap: wrap;}
.home_blog_container figure {width: 270px;border-radius: 10px;background-color: var(--color-white);box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);overflow: hidden;margin: 0;}
.home_blog_container figure .title {font-weight: 700;font-size: 18px;padding: 0 20px 10px;color: var(--color-primary);line-height: 1.2;max-height: 64px;overflow: hidden;}
.home_blog_container figure p {padding: 0 20px;margin: 0;text-overflow: ellipsis;max-height: 80px;overflow: hidden;}
.home_blog_container figure .action {padding: 20px;text-align: right;}
.home_blog_container figure .action a:hover {text-decoration: underline;}
.home_blog_container figure .date_blog {padding: 10px 20px;}

footer {background-color: var(--color-primary);padding: 40px 0 10px;color: var(--color-white);font-size: 16px;}
footer .links_container {width: 50%;flex-wrap: wrap;}
footer a {color: var(--color-white);}
footer .column {width: 300px;flex-shrink: 0;}
footer .column p {display: flex;align-items: flex-start;gap: 10px;text-align: left;}
footer .column p svg {flex-basis: 17px;flex-shrink: 0;flex-grow: 0;margin-top: 2px;}
footer .column p svg path {fill: var(--color-white);}
footer .column a {display: block;margin: 5px 0;}
footer .column li a:hover {text-decoration: underline;}
footer .column li {list-style: none;}
footer .column ul {padding: 0;}
footer .footer_bottom {border-top: 1px solid var(--color-white);width: 100%;}
footer .footer_bottom p {text-align: center;}
footer .footer_bottom a {text-decoration: underline;}

footer .social_media {display: flex!important;align-items: center;justify-content: space-between;width: 90%;margin: 0;}
footer .social_media a {width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;position: relative;}
footer .social_media a::before {content:'';z-index: 0;position: absolute;width: 100%;height: 100%;border-radius: 50%;background: rgba(255, 255, 255, .1);transition: .3s;transform: scale(0);}
footer .social_media a:hover::before {transform: scale(1);}
footer .social_media a svg {width: 30px;}
footer .social_media a svg path {fill: var(--color-white);}

.about_us {padding-bottom: 50px;}
.about_us img {border: 8px solid var(--color-white);box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);margin: 25px}
.about_us img.first {float: left;margin-right: 60px;}
.about_us img.second {float: right;margin-left: 60px;}
.about_us h2 {margin: 50px 0 30px;}
.about_us p, 
.about_us ul li {font-size: 20px;line-height: 1.5;text-align: justify;}

.our_services {display: flex;gap: 20px;flex-wrap: wrap;padding-bottom: 80px;}
.our_services .service {border-radius: 10px;width: 100%;max-width: 350px; flex-shrink: 0;flex-grow: 0;padding: 20px;border: 1px solid var(--color-gray);transition: .3s;}
.our_services .service .name {font-weight: 700;font-size: 20px;padding: 20px 0;color: var(--color-primary);text-transform: uppercase;}
.our_services .service p {margin: 0;color: var(--color-secondary);}
.our_services .service:hover {transform: scale(1.05);}

.title_services {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 10px;}

.search_service_cont {position: relative;width: 100%;max-width: 320px;display: none;}
.search_service_cont input {border: 1px solid var(--color-gray2);padding: 10px 30px 10px 15px;border-radius: 20px;width: 100%;outline: none;transition: .3s;}
.search_service_cont input:focus {border-color: var(--color-secondary);}
.search_service_cont input:focus + svg {fill: var(--color-secondary);}
.search_service_cont svg {width: 16px;fill: var(--color-gray2);position: absolute;top: 12px;right: 12px;pointer-events: none;}

.filtro {display: none!important;}

.services_preloader {text-align: center;padding: 20px 20px 70px;display: flex;align-items: center;justify-content: center;gap: 15px;}

.checkups_container {position: relative;margin-bottom: 70px;display: flex;gap: 40px;flex-wrap: wrap;}
.checkups_container img {flex-basis: 350px;flex-shrink: 0;flex-grow: 0;border-radius: 10px;}
.checkups_container .description {flex-grow: 1;flex-shrink: 1;display: flex;flex-direction: column;justify-content: space-between;min-width: 250px;}
.checkups_container .description h3 {font-weight: 18px;font-weight: 700;color: var(--color-primary);margin: 0 0 25px;}
.checkups_container .description ul li {font-size: 18px;}
.checkups_container .description .price {color: var(--color-primary);margin-top: 20px;font-weight: 700;font-size: 18px;display: none;}

.tecnologias_container {position: relative;display: flex;gap: 40px;margin-bottom: 20px;flex-wrap: wrap;}
.tecnologias_container img {flex-shrink: 0;flex-grow: 0;border-radius: 10px;}
.tecnologias_container .description {flex-shrink: 1;flex-grow: 1;}
.tecnologias_container .description h4:first-child {margin-top: 0;}
.tecnologias_container .description p, 
.tecnologias_container .description ul li {font-size: 20px;line-height: 1.5;text-align: justify;}

.contact_container {position: relative;display: flex;gap: 10px;padding-bottom: 30px;margin: 0 auto;max-width: 900px;flex-wrap: wrap;}
.contact_container .column {flex-shrink: 0;flex-grow: 1;flex-shrink: 1;padding: 20px 0;min-width: 230px;}
.contact_container p {display: flex;padding: 10px 0;gap:10px;margin:5px 0;font-size: 18px;align-items: flex-start;}
.contact_container p svg {width: 20px;margin-top: 3px;}
.contact_container p svg path {fill: var(--color-primary);}

.contact_container.jobs {max-width: 1100px;}
.contact_container.billing {max-width: 550px;}
.contact_container.billing .column:nth-child(1) {flex-basis: 100%;}

.jobs-image {box-shadow: 15px 15px 0 var(--color-red);border-radius: 10px;margin: 0 15px 15px 0;}

.blog_principal {display: flex;margin-bottom: 50px;flex-wrap: wrap;}
.blog_principal img {flex-shrink: 0;flex-grow: 0;border-radius: 10px;box-shadow: 2px 2px 7px rgba(0, 0, 0, .2);}
.blog_principal .column {flex-grow: 1;padding: 20px 0;}
.blog_principal .column .title {font-weight: 900;font-size: 30px;margin-bottom: 20px;}
.blog_principal .column p {font-size: 18px;}
.blog_principal .column .action {padding: 20px;text-align: right;}
.blog_principal .column .action a:hover {text-decoration: underline;}

.blog-lecture {max-width: 900px;padding-bottom: 50px;}
.blog-lecture p {line-height: 1.5;font-size: 20px;margin: 25px 0;text-align: justify;}

.date_blog {padding: 10px 0;color: var(--color-gray2);font-size: 13px;}

.form_container {position: relative;}
.cont_form {padding: 15px;position: relative;}
.form_control {padding: 12px 20px;border: 1px solid var(--color-gray);border-radius: 7px;outline: none;width: 100%;transition: .3s;}
.form_control:focus {border-color: var(--color-secondary);}

.cont_form.icon .form_control {padding-right: 40px;}

.form_control.required {border-color: var(--color-req);}
.required-tag {color: var(--color-req);font-size: 12px;padding: 5px;display: none;}

.help_button {position: absolute;top: 23px;right: 23px;width: 27px;height: 27px;background-color: var(--color-primary);border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: .3s;}
.help_button:hover {background-color: var(--color-primary-hover);}
.help_button svg {width: 15px;fill: var(--color-white);}

#mapa {position: relative;}
#mapa iframe {pointer-events: none;}
#mapa .over {position: absolute;transition: .3s;width: 100%;height: 100%;background: rgba(0, 0, 0, .8);color: var(--color-white);display: flex;align-items: center;justify-content: center;opacity: 0;z-index: 2;left: 0;top: 0;font-size: 18px;pointer-events: none;}
#mapa:hover .over {opacity: 1;}
#mapa.home {border-radius: 10px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .1);overflow: hidden;padding: 0;}

#mapa.active iframe {pointer-events: auto;}
#mapa.active .over {display: none;}

.tabs_cont {position: relative;margin: 0 0 50px;}
.tabs_header {position: sticky;display: flex;top:83px;background-color: var(--color-white);z-index: 3;}
.tabs_header .tab {position: relative;padding:5px;display: flex;align-items: center;justify-content: center;height: 80px;flex-grow: 1;text-align: center;cursor: pointer;
  font-size: 14px;border-bottom: 4px solid var(--color-gray);transition: .3s;}
.tabs_header .tab strong {z-index: 1;display: none;}
.tabs_header .tab span {font-weight: 700;}
.tabs_header .tab::after {content: '';position: absolute;background-color: var(--color-gray);transition: .3s;z-index: 0;transform: scale(0);width: 100%;height: 100%;opacity: 0;}
.tabs_header .tab:hover::after {transform: scale(1.0);opacity: 1;}
.tabs_header .tab.active {color: var(--color-blue);border-color: var(--color-blue);}

.tabs_body {position: relative;}
.tabs_body .box_info {padding: 30px 20px;display: none;align-items: flex-start;gap:50px;justify-content: center;flex-wrap: wrap;}
.tabs_body .box_info.active {display: flex;}
.tabs_body .box_info h2 {width: 100%;margin: 0;}

.sucursal_cont {display: flex;width: 100%;gap:20px;flex-direction: column;}
.sucursal_cont img {flex-shrink: 0;flex-grow: 0;border-radius: 10px;}
.sucursal_cont .desc {flex-grow: 1;padding: 10px;font-size: 20px;}
.sucursal_cont .desc .address {font-weight: 300;font-size: 16px;}
.sucursal_cont .desc .horario {display: block;padding-top: 10px;color: var(--color-blue);font-size: 16px;}
.sucursal_cont .line {padding-top: 10px;display: flex;gap: 10px;align-items: center;text-decoration: none;color: var(--color-secondary);font-size: 16px;}
.sucursal_cont .line svg {width: 15px;fill: var(--color-secondary);}

.politics_cont {font-size: 20px;line-height: 2;padding-bottom: 60px;}

/* estilos splide carrusel */
#image-carousel {padding-left:60px;margin-bottom: 40px;}
#image-carousel img {border-radius: 10px;}
#image-carousel .splide__pagination {display: none;}

/* boton whatsapp */
.whatsapp_button {position: fixed;bottom: 15px;right: 15px;border-radius: 50%;background-color: #15732e;display: flex;align-items: center;box-shadow: 0 0 5px rgba(0, 0, 0, .5);transition: .3s;z-index: 7;width: 70px;height: 70px;justify-content: center;cursor: pointer;}
.whatsapp_button svg {width: 35px;fill: var(--color-white);}
.whatsapp_button:hover {background-color: #08541a;transform: scale(1.02);}

.whatsapp_button .message {padding: 10px 20px;border-radius: 30px;color: #fff;background-color: #4caf50;position: absolute;right: -10px;bottom: 110%;pointer-events: none;white-space: nowrap;font-size: 16px;opacity: 0;visibility: hidden;transform: translateY(20px);transition: .5s;}

.whatsapp_submenu {position: fixed;right: 85px;bottom: 85px;background-color: #4caf50;border-radius: 10px;padding: 5px 20px 20px;box-shadow: 2px 2px 8px rgba(0, 0, 0, .5);width: 220px;opacity: 0;visibility: hidden;transform: translateY(20px);transition: .5s;z-index: 7;}
.whatsapp_submenu h3 {font-size: 16px;font-weight: 700;color: var(--color-white);}
.whatsapp_submenu h4 {margin: 15px 0 0;font-weight: 600;color: var(--color-white);;font-size: 16px;}
.whatsapp_submenu a {color: var(--color-white);;padding: 10px;display: flex;transition: .3s;border-radius: 10px;align-items: center;gap: 5px;}
.whatsapp_submenu a:hover {background-color: #15732e;}
.whatsapp_submenu .close_button {position: absolute;top: 8px;right: 8px;width: 18px;height: 18px;cursor: pointer;}
.whatsapp_submenu .close_button:before,
.whatsapp_submenu .close_button:after {content: '';position: absolute;width: 100%;height: 2px;background-color: var(--color-white);left: 0;top: 50%;transform: rotate(45deg);}
.whatsapp_submenu .close_button:after {transform: rotate(-45deg);}

.overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0);z-index: 6;display: none;}

.whatsapp_button .message.open,
.whatsapp_submenu.open {opacity: 1;visibility: visible;transform: translateY(0);}

/* boton volver */
.back_button {margin-right: 10px;}
.back_button svg {width: 25px;}
.back_button svg path {fill: var(--color-primary);}

/* Accordion */
.accordion {position: relative;padding-bottom: 80px;}
.accordion .item {position: relative;border-radius: 10px;box-shadow: 2px 2px 5px rgba(0, 0, 0, .08);background-color: var(--color-white);overflow: hidden;margin-bottom: 20px;}
.accordion .item .name {position: relative;padding: 15px 35px 15px 20px;cursor: pointer;transition: .3s;font-size: 18px;}
.accordion .item .name:hover {background-color: var(--color-gray);}
.accordion .item .name svg {width: 25px;transition: .3s;position: absolute;top: 16px;right: 10px;}
.accordion .item .name.active svg {transform: rotate(180deg);}
.accordion .item .info {padding: 20px;display: none;}

.accordion .item .name.active {background-color: var(--color-primary);color: var(--color-white);}
.accordion .item .name.active path {fill: var(--color-white);}

.btn-burger {height: 56px;overflow: hidden;position: relative;text-indent: 100%;white-space: nowrap;width: 44px;padding: 0;z-index: 8;transition: all 0.3s;cursor: pointer;}
.btn-burger span {background-color: var(--color-secondary);bottom: auto;display: inline-block;height: 4px;left: 50%;position: absolute;right: auto;top: 50%;width: 25px;z-index: 10;transform: translateX(-50%) translateY(-50%);border-radius: 5px;}
.btn-burger span:before,
.btn-burger span:after {width: 100%;border-radius: 5px;}
.btn-burger span:before, .btn-burger span:after {background-color: var(--color-secondary);content: "";height: 100%;position: absolute;right: 0;top: 0;transform: translateZ(0);backface-visibility: hidden;transition: transform 0.3s;}
.btn-burger span:before {transform: translateY(-8px) rotate(0deg);}
.btn-burger span:after {transform: translateY(8px) rotate(0deg);}
.btn-burger.close-nav span {background: rgba(255, 255, 255, 0);}
.btn-burger.close-nav span:before {transform: translateY(0) rotate(45deg);width: 28px;background: #fff;}
.btn-burger.close-nav span:after {transform: translateY(0) rotate(-45deg);background: #fff;}

.menu-responsive {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color:var(--color-primary);margin: 0;width: 100%;padding: 100px 50px;z-index: 7;overflow-y: auto;display: none;}
.menu-responsive .item {display: block;color: var(--color-white);padding: 0 20px;margin: 30px 0;text-align: center;text-decoration: none;font-size: 25px;}
.menu-responsive .item svg {width: 20px;transition: .3s;transition: .3s;}
.menu-responsive .item svg path {fill: var(--color-white);}

.menu-responsive .item .submenu {padding: 0 20px;height: 0;overflow: hidden;transition: .3s;}
.menu-responsive .item:hover .submenu {height: auto;padding: 20px;}
.menu-responsive .item:hover svg {transform: rotate(180deg);}

.menu-responsive .close-button {width: 30px;position: fixed;z-index: 8;top: 25px;right: 25px;}
.menu-responsive .close-button path {fill: var(--color-white);}

/* comun styles */
section {margin: 0 auto;width: 100%;max-width: 1300px;padding: 0 10px;}

.flex {display: flex;}
.end {justify-content: flex-end;}
.separate {justify-content: space-between;}
.vcenter {align-items: center;}
.hcenter {justify-content: center;}

.flexwrap {flex-wrap: wrap;}
.gap-40 {gap: 40px;}

.margin-bottom-40 {margin-bottom: 40px;}

.text-center {text-align: center;}
.text-right {text-align: right;}

.card {flex-shrink: 1;flex-grow: 1;background-color: var(--color-white);border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, .15);padding: 20px 40px;}
.buttons-container {padding: 20px;}

.btn {display: inline-flex;align-items: center;height: 50px;justify-content: center;border-radius: 10px;min-width: 120px;border: 1px solid;outline: none;font-size: 16px;font-weight: 700;text-align: center;cursor: pointer;transition: .3s;text-transform: uppercase;margin-bottom: 15px;padding: 0 20px;}
.btn.primary {background-color: var(--color-primary);color: var(--color-white);border-color: var(--color-primary);}
.btn.primary:hover {background-color: var(--color-primary-hover);}
.btn.secondary {background-color: var(--color-red);color: var(--color-white);border-color: var(--color-red);}
.btn.secondary:hover {background-color: var(--color-red-hover);border-color: var(--color-red-hover);}

.btn.full {width: 100%;}
.btn.small {height: 35px;font-weight: 14px;}

.btn svg {width: 22px;}
.btn svg path {fill: var(--color-white);}

.btn.rounded {border-radius: 50px;}

.btn.adpb {height: auto;}

.modal_alert_container {position: fixed;overflow-y: auto;background: rgba(0, 0, 0, .6);padding: 20px;top: 0;bottom: 0;left: 0;right: 0;display: none;z-index: 5}
.modal_alert {width: 100%;max-width: 350px;background-color: var(--color-white);padding: 20px;border-radius: 20px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);text-align: center;margin: 10% auto 0;position: relative;}
.modal_alert .icon {width: 110px;fill: var(--color-red);}
.modal_alert .buttons_container {padding-bottom: 0; display: flex;align-items: center;justify-content: center;gap:10px;}
.modal_alert .close_button {position: absolute;top: 10px;right: 10px;outline: none;border: none;cursor: pointer;background: none;}
.modal_alert .close_button svg {width: 25px;fill: var(--color-secondary);}

.modal_alert_container.image .modal_alert {max-width: 600px;margin-top: 30px;}



/* Estilos de la sección del video */
.video-section {position: relative; background-color: #dfe8f9; padding: 10px 10px 30px; text-align: center; margin-bottom: 30px;}

.section-description {max-width: 800px; margin: 0 auto 40px; font-size: 16px;}

.video-container {position: relative; width: 100%; max-width: 900px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);transition: .3s;}

.video-container:hover {transform: scale(1.05);}

.video-link {position: relative; display: block; cursor: pointer;}

.video-thumbnail {width: 100%; height: auto; display: block;}

.video-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; transition: background 0.3s ease;}

.video-link:hover .video-overlay {background: rgba(0, 0, 0, 0.6);}

.play-button {width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease;}

.video-link:hover .play-button {transform: scale(1.1);}

.play-button svg {fill: var(--primary-color); width: 40px; height: 40px;}

/* Estilos del Lightbox generado dinámicamente */
.video-lightbox {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s linear;}

.video-lightbox.active {visibility: visible; opacity: 1;}

.lightbox-content {position: relative; width: 90%; max-width: 900px; background: #000; border-radius: 8px; overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease;}

.video-lightbox.active .lightbox-content {transform: scale(1);}

.lightbox-content video {width: 100%; height: auto; display: block;}

.close-button {position: absolute; top: 15px; right: 25px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10; transition: color 0.2s ease;}
.close-button:hover {color: #aaa;}

.popup_content {position: fixed;background: rgba(0, 0, 0, .8);top: 0;bottom: 0;left: 0;right: 0;overflow-y: auto;padding: 30px 10px;}


/* Estilos iniciales del modal: oculto por defecto */
.modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease;}

/* Clases para mostrar el modal */
.modal.activo {visibility: visible; opacity: 1;}

/* Estilo del fondo negro */
.modal-fondo {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); cursor: pointer;}

/* Contenido del modal (la imagen y botón X) */
.modal-contenido {position: relative; max-width: 90%; max-height: 90%; background: var(--color-white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); z-index: 1001; transform: scale(0.8); transition: transform 0.3s ease;}

/* Escala a 1 al estar activo para la transición de entrada/salida */
.modal.activo .modal-contenido {transform: scale(1);}

/* Estilo de la imagen */
.imagen-popup {display: block; max-width: 100%; max-height: 80vh;}

/* Botón de cierre "X" */
.cerrarBtn {position: absolute; top: 5px; right: 15px; font-size: 40px; font-weight: 400; color: var(--color-white); cursor: pointer; z-index: 1002; transition: color 0.2s;}


/* responsive */

@media screen and (min-width: 768px) {

  h2 {font-size: 40px;}
  h3 {font-size: 30px;}
  h4 {font-size: 22px;}

  .slide_bottom_menu {flex-wrap: nowrap;}
  .slide_bottom_menu a {font-size: 18px;font-weight: 700;}

  .tabs_header .tab {font-size: 18px;}
  .tabs_header .tab strong {display: block;}
  .tabs_header .tab span {display: none;}
  .tabs_body .box_info h2 {display: none;}
  footer .links_container {flex-wrap: nowrap;}
  footer .social_media {margin: 0 auto;}

  .sucursal_cont {display: flex;max-width: 470px;align-items: flex-start;flex-direction: row;}
  
  .accordion .item .name {font-weight: 700;font-size: 20px;}

  .contact_container {flex-wrap: nowrap;}
  .contact_container .column:nth-child(1) {flex-shrink: 0;flex-grow: 0;flex-basis: 400px;}

  .checkups_container {flex-wrap: nowrap;}

  .whatsapp_button {bottom: 30px;}
  .whatsapp_button .message {right: 110%;top: 0;bottom: unset;}

}

@media screen and (min-width: 1024px) {

  .btn-burger {display: none;}
  header nav {display: flex;}
  .home_services {flex-wrap: nowrap;gap: 10px;}
  .tecnologias_container {flex-wrap: nowrap;}
  .contact_container .column {padding: 20px;}

  .blog_principal {flex-wrap: nowrap;gap:40px}
  .blog_principal .column {padding: 20px 30px;}
  .blog_principal .column .title {font-size: 40px;}

}

@media screen and (min-width: 1200px) {

  header nav .item {font-size: 19px;}
  .tabs_header {top:125px;}

}

@media screen and (min-width: 1024px) {

  header {padding: 20px 10px;}
  header nav .item {font-size: 18px;}

}