@charset "UTF-8";
/** COLORES **/
@import url("https://fonts.googleapis.com/css?family=Play:700");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
/** GENERALES **/
html, body {
  font-family: 'Source Sans Pro', sans-serif;
  height: 100va;
  width: 100%;
}

.titulos {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  color: white;
}
.aqua {
  color: #28c8c2 !important;
}

.azul-s24 {
  color: #3d5992;
}

a.cta-s24,
input.cta-s24 {
  display: inline-block;
  background: #142959;
  color: #fff;
  border-radius: 20px;
  padding: 5px 15px !important;
  text-transform: uppercase;
  transition: .2s all ease-in-out;
  -webkit-transition: .2s all ease-in-out;
  -moz-transition: .2s all ease-in-out;
  -o-transition: .2s all ease-in-out;
}

a.cta-s24:hover, a.cta-s24:active, a.cta-s24:focus,
input.cta-s24:hover,
input.cta-s24:active,
input.cta-s24:focus {
  color: #fff;
  background-color: #3d5992 !important;
  text-decoration: none;
}
/* FOOTER */
footer {
  background: #0B1732;
  color: #fff;
  padding: 50px 0;
}

footer a {
  color: #fff;
  text-decoration: none;
  transition: .2s all ease-in-out;
  -webkit-transition: .2s all ease-in-out;
  -moz-transition: .2s all ease-in-out;
  -o-transition: .2s all ease-in-out;
}

footer a:hover, footer a:focus, footer a:active {
  color: #636b75;
  text-decoration: none;
}

.content {
  padding: 120px 0;
  text-align: center;
  color: #142959;
  background-size: cover !important;
}

.content.empresa {
    position: relative;
    background: url(../imgs/empresabg.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.empresa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #142959B2; /* Azul al 70% de opacidad */
    z-index: 1;
}

.empresa > * {
    position: relative;
    z-index: 2;
}

.valores .valor-card {
  border-radius: 20px;
  height: 280px;
  padding: 30px;
  color: white;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.valor-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.valor-card .icono-valor {
  font-size: 3rem;
  margin-bottom: 15px;
}

.valor-card .descripcion {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  margin-top: 10px;
}

.valor-card:hover .descripcion {
  opacity: 1;
}

/* Gradientes diferentes */
.valor-card.bg1 {
  background: linear-gradient(135deg, #439bbd, #1bcedf);
}

.valor-card.bg2 {
  background: linear-gradient(135deg, #439bbd, #1bcedf);
}

.valor-card.bg3 {
  background: linear-gradient(135deg,#439bbd, #1bcedf);
}

.valor-card.bg4 {
  background: linear-gradient(135deg, #439bbd, #1bcedf);
}

.valor-card.bg1:hover {
  background: linear-gradient(135deg, #080b4e, #1bcedf);
}

.valor-card.bg2:hover {
  background: linear-gradient(135deg, #f27121, #e0e0e0);
}

.valor-card.bg3:hover {
  background: linear-gradient(135deg, #1bcedf, #080b4e);
}

.valor-card.bg4:hover {
  background: linear-gradient(135deg, #cccccc, #f27121);
}


/** DISTRIBUIDOR **/
.distribuidor {
    position: relative;
    background: url(../imgs/distribuidorbg.jpg) no-repeat;
    background-position: center 60%; 
    overflow: hidden;
    /*background-size: cover;*/
}
.distribuidor::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3f5891b2; /* Azul al 70% de opacidad */
    z-index: 1;
}

.distribuidor > * {
    position: relative;
    z-index: 2;
}

/** CONTACTO **/
.contacto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 360px; /* o el valor que estés usando */
    position: relative;
    background: url(../imgs/contactobg.jpg) no-repeat;
    background-position: 90% center;
    background-size: 60%;
    overflow: hidden;
}
.contacto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3f5891b2; /* Azul al 70% de opacidad */
    z-index: 1;
}

.contacto > * {
    position: relative;
    z-index: 2;
}
#map {
  min-height: 400px;
}

.map-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.content.servicios {
    background-image: url(../imgs/serviciosbg.jpg);
    background-size: cover;
    background-position:bottom center;
    background-repeat: no-repeat;
  }

.content.servicioBasico {
  color: #fff !important;
  background: url(../imgs/serviciobasico.jpg) no-repeat top center;
}

.content.servicioAlarm {
  color: #fff !important;
  background: url(../imgs/servicioAlarm.jpg) no-repeat top center;
}

.content.serviciosAdicionales {
  color: #fff !important;
  background: url(../imgs/servicioadicional.jpg) no-repeat top center;
}

.content.videoVerificacion {
  color: #fff !important;
  background: url(../imgs/videoverificacion.jpg) no-repeat top center;
}

#video {
  text-align: center;
  padding: 110px 0;
  color: #fff;
  /*background: #636b75;*/
  background: url(../imgs/video-bg.jpg) no-repeat center bottom;
  background-size: cover;
}

#video h1 {
  font-weight: 400 !important;
  margin: 10px 0 0;
}

#video .hi-icon-wrap {
  text-align: center;
  margin: 0 auto;
  padding: 2em 0 3em;
}

.sin-borde{
  border: 0 !important;
}

#video .hi-icon {
  display: inline-block;
  font-size: 0px;
  cursor: pointer;
  margin: 0 30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #fff;
  -webkit-transition: box-shadow 0.2s;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

#video .hi-icon img {
  margin: 20px 0 0 10px;
}

#video .hi-icon:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  top: 0;
  left: 0;
  padding: 0;
  -webkit-box-shadow: 0 0 0 3px #fff;
          box-shadow: 0 0 0 3px #fff;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
}

#video .hi-icon:before {
  font-family: 'ecoicon';
  font-size: 48px;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}

#video .hi-icon:hover:after {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  opacity: 0.5;
}

#video .hi-icon:hover {
  -webkit-box-shadow: 0 0 0 10px white;
          box-shadow: 0 0 0 10px white;
  color: #fff;
}

.main-cta-s24 {
  padding: 40px 0 30px;
  background: #0B1732;
  color: #fff;
}

.main-cta-s24 .cta-s24 {
  float: right;
  padding: 10px 20px !important;
  margin-top: -10px;
  background: #28c8c2;
}

.main-cta-s24 .cta-s24:hover {
  background: #3d5992 !important;
}

.main-cta-s24 #cta-asesoramiento-container {
  color: #1d3343;
}

.main-cta-s24 #cta-asesoramiento-container .cta-s24 {
  text-transform: uppercase;
  color: #fff;
  border-radius: 20px;
  float: right;
  padding: 10px 20px !important;
  margin-top: -10px;
  background: #142959;
}

.main-cta-s24 #cta-asesoramiento-container .cta-s24:hover {
  background: #3d5992 !important;
}

.secondary-cta-s24 {
  padding: 40px 0 30px;
  background: #1d3343;
  color: #fff;
  text-align: center;
}

.secondary-cta-s24 .cta-s24 {
  text-transform: uppercase;
  color: #fff;
  border-radius: 20px;
  padding: 10px 20px !important;
  margin: 10px 5px;
  background: #28c8c2;
  min-width: 160px;
}

.secondary-cta-s24 .cta-s24:hover {
  background: #3d5992 !important;
}

.secondary-cta-s24 #cta-subircv,
.secondary-cta-s24 #cta-seaadministador {
  color: #1d3343;
  text-align: left;
}

.secondary-cta-s24 #cta-subircv .cta-s24,
.secondary-cta-s24 #cta-seaadministador .cta-s24 {
  text-transform: uppercase;
  color: #fff;
  border-radius: 20px;
  float: right;
  padding: 10px 20px !important;
  margin-top: -10px;
  background: #142959;
}

.secondary-cta-s24 #cta-subircv .cta-s24:hover,
.secondary-cta-s24 #cta-seaadministador .cta-s24:hover {
  background: #3d5992 !important;
}

@media (max-width: 1199px) {
  .main-cta-s24 {
    text-align: center;
  }
  .main-cta-s24 span {
    display: block;
  }
  .main-cta-s24 .cta-s24 {
    float: none;
    display: inline-block;
    margin: 5px 0;
  }
}

/** NAVEGACIÓN **/
#formRegister .modal-body {
  min-height: 250px !important;
}

#formRegister .modal-footer .btn-default {
  border-radius: 15px;
}

#mainnav-s24 {
  background: #f8f9fa;
}

#mainnav-s24 .navbar.navbar-s24 {
  height: 80px;
  letter-spacing: 0.5px;
  color: #636b75;
}

#mainnav-s24 .navbar.navbar-s24 #selectRegister.btn {
  border: none;
  background-color: transparent;
  color: #28c8c2;
  text-transform: uppercase;
  padding-top: 8px;
}

#mainnav-s24 .navbar.navbar-s24 #selectRegister.btn:hover, #mainnav-s24 .navbar.navbar-s24 #selectRegister.btn:active, #mainnav-s24 .navbar.navbar-s24 #selectRegister.btn:focus {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

#mainnav-s24 .navbar.navbar-s24 .dropdown-menu a:hover, #mainnav-s24 .navbar.navbar-s24 .dropdown-menu a:active, #mainnav-s24 .navbar.navbar-s24 .dropdown-menu a:focus {
  background: #28c8c2;
  color: #fff !important;
}

@media (max-width: 990px) {
  #mainnav-s24 .navbar.navbar-s24 .modal {
    text-align: left !important;
  }
  #mainnav-s24 .navbar.navbar-s24 .navbar-collapse {
    z-index: 15000 !important;
    background-color: #f8f9fa !important;
    text-align: center;
  }
  #mainnav-s24 .navbar.navbar-s24 .navbar-collapse li {
    border-bottom: solid thin #eee;
    padding: 10px 0;
  }
}

#mainnav-s24 .navbar.navbar-s24 a {
  color: #142959 !important;
  text-transform: uppercase;
  padding-left: 15px;
  padding-right: 15px;
  transition: .2s all ease-in-out;
  -webkit-transition: .2s all ease-in-out;
  -moz-transition: .2s all ease-in-out;
  -o-transition: .2s all ease-in-out;
}

#mainnav-s24 .navbar.navbar-s24 a:hover, #mainnav-s24 .navbar.navbar-s24 a:active, #mainnav-s24 .navbar.navbar-s24 a:focus {
  color: #3d5992 !important;
}

#mainnav-s24 .navbar.navbar-s24 .regWarning {
  letter-spacing: 0;
  font-size: 14px;
  line-height: 100%;
}

#mainnav-s24 .navbar.navbar-s24 .regWarning a {
  text-transform: none;
  padding: 0;
  /*text-decoration: underline;*/
}

#mainnav-s24 .navbar.navbar-s24 .modal .nav-item {
  margin: 5px 0;
  width: 50%;
  font-size: 10px;
}

#mainnav-s24 .navbar.navbar-s24 .modal .nav-item .nav-link {
  background: #f4f4f4;
}

#mainnav-s24 .navbar.navbar-s24 .modal .nav-item .nav-link.active {
  background: #142959;
  color: #fff !important;
}

#mainnav-s24 .navbar.navbar-s24 .modal .sessionFields {
  padding-top: 20px !important;
  padding-bottom: 10px !important;
}

#mainnav-s24 .navbar.navbar-s24 .modal .sessionFields .tooltip-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  background: #142959;
  color: #fff;
  margin-left: 5px;
}

#mainnav-s24 .navbar.navbar-s24 .modal .sessionFields .tooltip-btn:hover {
  background: #3d5992;
}

#mainnav-s24 .navbar.navbar-s24 .modal .modal-footer ul .renewPass {
  font-size: 14px;
  text-transform: none;
}

#mainnav-s24 .navbar.navbar-s24 .modal .goBack,
#mainnav-s24 .navbar.navbar-s24 .modal .renewPass {
  text-transform: none;
  font-size: 14px;
  cursor: pointer;
}

#mainnav-s24 .navbar.navbar-s24 .modal .forgotPass,
#mainnav-s24 .navbar.navbar-s24 .modal .changePass {
  display: none;
}

#mainnav-s24 .navbar.navbar-s24 .cta-s24 {
  display: inline-block;
  margin: 3px 0;
  /*background: #142959;*/
  background: #f47964;
  color: #fff !important;
  border-radius: 20px;
  padding: 5px 15px;
  transition: .2s all ease-in-out;
  -webkit-transition: .2s all ease-in-out;
  -moz-transition: .2s all ease-in-out;
  -o-transition: .2s all ease-in-out;
}

#mainnav-s24 .navbar.navbar-s24 .cta-s24:hover, #mainnav-s24 .navbar.navbar-s24 .cta-s24:active, #mainnav-s24 .navbar.navbar-s24 .cta-s24:focus {
  color: #fff !important;
  background: #1a70a2 !important;
  /*background: #3d5992 !important;*/
}

@media (max-width: 400px) {
  .modal .nav-item {
    width: 100% !important;
  }
}

.sesion-input {
  margin: 5px 0 10px;
}

@media (max-width: 1199px) {
  #mainnav-s24 .navbar.navbar-s24 .navbar-collapse {
    z-index: 15000 !important;
    background-color: #f8f9fa !important;
    text-align: center;
  }
  #mainnav-s24 .navbar.navbar-s24 .navbar-collapse li {
    border-bottom: solid thin #eee;
    padding: 10px 0;
  }
  #mainnav-s24 .navbar.navbar-s24 .login-q {
    display: inline-block;
    font-size: 12px;
    padding: 0 15px;
    margin: 0 0 0 5px;
  }
}

.section {
  padding: 90px 0;
}

.section.bg-blanco {
  background: #fff;
}

.section.bg-gris {
  background: #f4f4f4;
  padding-bottom: 2rem; 
}
.servicios-tabs {
  margin-bottom: 0;
  padding-bottom: 0;
}

.servicios-tabs .col-auto {
  margin-bottom: 0 !important;
}

.section h2 {
  color: #142959;
}

.section .img-container {
  text-align: center;
}

/** HOME **/
.s24-review {
  color: #636b75;
  text-align: center;
  /*background: url(../imgs/logo.min.png) no-repeat center;*/
}

.s24-review .v-line {
  border-left: #f4f4f4 solid thin;
  height: 100px;
  display: inline-block;
  top: 0;
  margin: 0 auto !important;
}

.s24-review .review-content {
  padding: 30px 0;
}

.servicios-list {
  text-align: center;
  background: #f8f9fa;
  color: #636b75;
  padding: 60px;
  color: #636b75;
}

.servicios-list .servicios-title {
  color: #636b75;
  display: inline-block;
  margin: 0 0 30px;
}

.servicios-list h3 {
  margin: 20px 0;
}

.servicios-list .hi-icon {
  display: inline-block;
  font-size: 0px;
  cursor: pointer;
  margin: 0 30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #fff;
  -webkit-transition: box-shadow 0.2s;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

.servicios-list .hi-icon img {
  margin: 17px 0 0 1px;
}

.servicios-list .hi-icon:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  top: 0;
  left: 0;
  padding: 0;
  -webkit-box-shadow: 0 0 0 3px #636b75;
          box-shadow: 0 0 0 3px #636b75;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
}

.servicios-list .hi-icon:before {
  font-family: 'ecoicon';
  font-size: 48px;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}

.servicios-list .hi-icon:hover:after {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  opacity: 0.5;
}

.servicios-list .hi-icon:hover {
  -webkit-box-shadow: 0 0 0 10px #142959;
          box-shadow: 0 0 0 10px #142959;
  color: #fff;
}

.app-ad {
  background: #273d4e;
  background: linear-gradient(45deg, #273d4e 0%, #1e2a39 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#273d4e', endColorstr='#1e2a39',GradientType=1 );
  padding: 60px 0;
  color: #fff;
}

.app-ad strong {
  color: #28c8c2;
}

.app-ad h3 {
  margin: 20px 0;
}

.app-download {
  padding: 70px 0;
  color: #636b75;
}

/** EMPRESA **/
.l-bordered-container {
  border-left: solid thin #636b75;
}

@media (max-width: 767px) {
  .l-bordered-container {
    padding-top: 25px;
    border-top: solid thin #636b75 !important;
    border-left: none !important;
  }
}

/** ALARM **/
.alarm {
  background: url(../imgs/login-alarm.png) center no-repeat;
  background-size: cover;
}

.blanco-leche{
  background: RGB(255,255,255,0.7);
}

.color-alarm{
  background-color: #e4701e !important;
}

.botonPagAlarm {
  color: #e4701e !important;
  background-color: #f1f1f1 !important;
}

/** APLICACIONES **/
.aplicaciones {
    position: relative;
    background: url(../imgs/aplicacionesbg.jpg) no-repeat center;
    background-size: cover;
    overflow: hidden;
    min-height: 300px;
}

.aplicaciones::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3f5891b2; /* Azul al 40% */
    z-index: 1;
}

/* Asegurate de que el contenido de .aplicaciones esté por encima del filtro */
.aplicaciones > * {
    position: relative;
    z-index: 2;
}

.aplicacionDetail {
  padding: 70px 0;
}

.app-ad-dealer {
  background: #273d4e;
  background: linear-gradient(45deg, #273d4e 0%, #1e2a39 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#273d4e', endColorstr='#1e2a39',GradientType=1 );
  padding: 60px 0;
  color: #fff;
}

.app-ad-dealer strong {
  color: #28c8c2;
}

.app-ad-dealer h3 {
  margin: 20px 0;
}

.dealerDesc {
  padding: 0 20px;
  margin: 15px 0;
}

.dealerDesc h5 {
  color: #28c8c2;
}

.play-BMU {
  font-family: 'Play', sans-serif;
}

.raleway-bold {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
}

.app-ad-bmu {
  background: #f1f1f1;
  background: linear-gradient(45deg, #eee 0%, #DDE5ED 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#DDE5ED',GradientType=1 );
  padding: 60px 0;
}

.app-ad-bmu strong {
  color: #28c8c2;
}

.app-ad-bmu h3 {
  margin: 20px 0;
}

/** CONTACTO **/
.input-container {
  margin: 10px 0 10px;
}

.faq-link {
  display: block;
  padding: 20px;
  margin: 20px 0 !important;
  border-radius: 5px;
  background: #f8f9fa;
  border: #eee solid medium;
}

.faq-link .azul-s24 {
  color: #3d5992;
}

form.bg-logo {
  background: url(../imgs/logo.min.png) no-repeat center;
}

form input.cta-s24 {
  margin: 15px 0;
}

#map {
  height: 400px;
}

/** FAQS **/
.question {
  margin: 20px 0;
  padding: 20px;
  border-radius: 5px;
  background: #142959;
  color: #fff;
  border: #636b75 solid medium;
}
/*# sourceMappingURL=.map */

/* ----------  Layout general  ---------- */
.row{
    display:flex;             /* iguala la altura de las columnas */
    flex-wrap:wrap;
    margin:0;
}

/* ----------  Cada cuadrícula  ---------- */
.section{
    position:relative;
    flex:1;                   /* las dos mitades de cada fila ocupan el mismo ancho */
    min-height:320px;         /* altura fija para los cuatro bloques */
    padding:40px 30px;
    background:#fff;
    overflow:hidden;          /* oculta la línea mientras se mueve */
    transition:
        transform .4s ease,
        background-color .4s ease;
}

/* variedad de fondos */
.bg-gris   {background:#f4f4f4;}
.bg-blanco {background:#ffffff;}

/* zoom + cambio de fondo */
.section:hover{
    transform:scale(1.02);
    background:#f5fafa;       /* ajusta a gusto */
}

/* ----------  Centrado perfecto del contenido  ---------- */
.section > [class*="col-"]{   /* apunta al div interno .col-md-6.offset-md-3 */
    display:flex;
    flex-direction:column;
    justify-content:center;   /* centra verticalmente */
    align-items:center;       /* centra horizontalmente */
    height:100%;
    text-align:center;
}

/* --------  SVG que dibuja el borde animado  -------- */
.border-svg{
    position:absolute;
    inset:0;                           /* top:0; right:0; bottom:0; left:0 */
    width:100%;
    height:100%;
    pointer-events:none;               /* no interfiere con el mouse */
    z-index:2;
}

.border-svg rect{
    fill:none;
    stroke:#28c8ca;
    stroke-width:1;                    /* grosor fijo */
    stroke-dasharray:400;              /* 400 = perímetro del viewBox 100×100 */
    stroke-dashoffset:400;             /* parte “sin dibujar” al inicio */
    transition:stroke-dashoffset 1s linear;   /* velocidad del dibujo */
}

/* Cuando el cursor está sobre el bloque, el borde se “dibuja” */
.section:hover .border-svg rect{
    stroke-dashoffset:0;
}

/* --------  Tipografía y centrado del texto interno  -------- */
.section p.h4{
    margin:0;
    line-height:1.4;
}
/* Contenedor con overflow oculto */
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 150px; /* Ajustalo al alto de tus imágenes */
}

/* Línea horizontal que se mueve */
.slider-track {
    display: flex;
    animation: scrollSlider 35s linear infinite;
    min-width: 200%;
}

/* Cada imagen */
.slider-track img {
    height: 80px;
    width: auto;
    object-fit: contain;
    margin-right: 40px;
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Efecto de desvanecimiento en los bordes */
.slider-container::before,
.slider-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.slider-container::before {
    left: 0;
    background: linear-gradient(to right, white 0%, transparent 100%);
}

.slider-container::after {
    right: 0;
    background: linear-gradient(to left, white 0%, transparent 100%);
}

/* Animación de desplazamiento horizontal */
@keyframes scrollSlider {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.slider-container:hover .slider-track {
    animation-play-state: paused;
}
.slider-track img {
    transition: transform 0.4s ease, opacity 0.5s ease;
}

.slider-track img:hover {
    transform: scale(1.08);
    z-index: 2; /* Evita que se vea por debajo de otros */
}

.titulo-marcas {
  background: rgba(0, 255, 255, 0.1); /* Aqua suave */
  border: 2px solid rgba(0, 255, 255, 0.3);
  padding: 10px 10px;
  border-radius: 10px;
  color: #49d8d8; /* Aqua */
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 30px auto 30px auto;
}
.titulo-marcas::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(0, 255, 255, 0.2),
    transparent
  );
  transform: rotate(0deg);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}

.titulo-marcas:hover {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
  color: white;
  background: rgba(0, 255, 255, 0.2);
}

.titulo-marcas:hover::after {
  opacity: 1;
  transform: rotate(25deg);
}

.full-app-section {
  background-color: #f9f9f9;
}

.titulo-marcas {
  text-align: center;
  font-size: 0.85rem;                /* achica el texto */
  font-weight: bold;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3); /* borde más fino */
  border-radius: 10px;               /* menos redondeado */
  padding: 8px 16px;                 /* menos espacio interno */
  display: inline-block;
  margin: 0 auto;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.2); /* sombra más sutil */
  transition: 0.4s;
}
.titulo-marcas:hover {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.img-icono {
  max-width: 100%;
  width: 160px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-app-img {
  max-width: 260px;
  width: 100%;
}

.hover-zoom:hover {
  transform: scale(1.08);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.titulo-con-flechas {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 10px;
}

.titulo-con-flechas .flecha {
  font-size: 1.8rem;
  color: #f47964;
  transition: transform 0.3s ease;
}

.titulo-con-flechas .flecha.izquierda:hover {
  transform: translateX(-5px);
}

.titulo-con-flechas .flecha.derecha:hover {
  transform: translateX(5px);
}

.titulo-apps {
  margin: 0;
}

@media (max-width: 768px) {
  .parrafos-apps {
    flex-direction: column;
    text-align: center;
  }
}

.app-card {
  position: relative;
  height: 200px;
  background-color: #e0e0e0;
  border-radius: 15px;
  padding: 10px;
  overflow: hidden;
  transition: background 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.app-card:hover {
  background: linear-gradient(135deg, #004080, #00d4ff);
  color: white;
}

.app-name {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 5px;
  z-index: 2;
}

.app-logo {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 70px;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.app-description {
  position: absolute;
  top: 50px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 5px;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.app-card:hover .app-logo {
  opacity: 0;
}

.app-card:hover .app-description {
  opacity: 1;
}