@charset "UTF-8";
/* line 1, app/assets/stylesheets/landing/landing-style.css */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
}

/* line 11, app/assets/stylesheets/landing/landing-style.css */
* {
  box-sizing: border-box;
}

/***************** UTILITIES **********************/
/* line 17, app/assets/stylesheets/landing/landing-style.css */
.z-1 {
  z-index: 1;
}

/* line 21, app/assets/stylesheets/landing/landing-style.css */
.container-sm {
  width: 65%;
  margin: 0 auto;
}

/* line 26, app/assets/stylesheets/landing/landing-style.css */
.container-m {
  width: 80%;
  margin: 0 auto;
  max-width: 1100;
}

/* line 32, app/assets/stylesheets/landing/landing-style.css */
.container-lg {
  width: 90%;
  margin: 0 auto;
}

/* line 37, app/assets/stylesheets/landing/landing-style.css */
.montserrat-400 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
}

/* line 42, app/assets/stylesheets/landing/landing-style.css */
.montserrat-700 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
}

/* line 47, app/assets/stylesheets/landing/landing-style.css */
.roboto-400 {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
}

/* line 52, app/assets/stylesheets/landing/landing-style.css */
.roboto-700 {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
}

/* line 57, app/assets/stylesheets/landing/landing-style.css */
.s-gap {
  gap: 20px;
}

/* line 61, app/assets/stylesheets/landing/landing-style.css */
.m-gap {
  gap: 50px;
}

/* line 65, app/assets/stylesheets/landing/landing-style.css */
.l-gap {
  gap: 80px;
}

/* line 69, app/assets/stylesheets/landing/landing-style.css */
.gap-sm {
  gap: 20px;
}

/* line 73, app/assets/stylesheets/landing/landing-style.css */
.gap-m {
  gap: 50px;
}

/* line 77, app/assets/stylesheets/landing/landing-style.css */
.gap-lg {
  gap: 80px;
}

/* line 81, app/assets/stylesheets/landing/landing-style.css */
.mt-n-s {
  margin-top: -10px;
}

/* line 85, app/assets/stylesheets/landing/landing-style.css */
.mt-n-m {
  margin-top: -50px;
}

/* line 89, app/assets/stylesheets/landing/landing-style.css */
.mt-n-lg {
  margin-top: -200px;
}

/* line 93, app/assets/stylesheets/landing/landing-style.css */
.text-center {
  text-align: center;
}

/* line 97, app/assets/stylesheets/landing/landing-style.css */
.inline-block {
  display: inline-block;
}

/* line 101, app/assets/stylesheets/landing/landing-style.css */
.mostrar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* line 107, app/assets/stylesheets/landing/landing-style.css */
.mb-1 {
  margin-bottom: 10%;
}

/* line 111, app/assets/stylesheets/landing/landing-style.css */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* line 118, app/assets/stylesheets/landing/landing-style.css */
.display-flex {
  display: flex;
  align-items: center;
}

/* line 123, app/assets/stylesheets/landing/landing-style.css */
.my-1 {
  margin: 10px 0px;
}

/* line 127, app/assets/stylesheets/landing/landing-style.css */
.mt-10px {
  margin-top: 10px;
}

/***************** UTILITIES END**********************/
/* line 133, app/assets/stylesheets/landing/landing-style.css */
h1 {
  color: #03EBFA;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 47px;
}

/* line 140, app/assets/stylesheets/landing/landing-style.css */
a {
  color: #ffffff;
  text-decoration: none;
}

/* line 145, app/assets/stylesheets/landing/landing-style.css */
button {
  padding: 5px 19px;
  cursor: pointer;
  border-radius: 14px;
  background-color: transparent;
  height: 34px;
  width: 190px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
}

/* line 159, app/assets/stylesheets/landing/landing-style.css */
button:hover {
  background-color: #ffffff1a;
}

/* line 163, app/assets/stylesheets/landing/landing-style.css */
.btn-primary {
  border: 2px solid;
  border-color: #03EBFA;
  color: #03EBFA;
}

/* line 169, app/assets/stylesheets/landing/landing-style.css */
.btn-secondary {
  border: none;
  background-color: #0DCDD9;
  color: #ffffff;
}

/* line 175, app/assets/stylesheets/landing/landing-style.css */
.btn-lg {
  font-family: 'Roboto';
  font-size: 1.3em;
  font-weight: 500;
  background-color: #156772;
  border: none;
  color: #ffffff;
  width: 320px;
  height: 70px;
  text-decoration: none;
  border-radius: 32px;
}

/* line 188, app/assets/stylesheets/landing/landing-style.css */
.btn-lg:hover {
  background-color: #156772e6;
}

/*NAVBAR */
/* line 193, app/assets/stylesheets/landing/landing-style.css */
.navbar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 6;
}

/* line 202, app/assets/stylesheets/landing/landing-style.css */
.menu {
  padding-left: 4%;
  padding-right: 4%;
}

/* line 207, app/assets/stylesheets/landing/landing-style.css */
.navbar-elements {
  list-style: none;
  gap: 50px;
}

/* line 212, app/assets/stylesheets/landing/landing-style.css */
.navbar a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* line 219, app/assets/stylesheets/landing/landing-style.css */
.logo {
  color: #ffffff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 25px;
}

/* line 225, app/assets/stylesheets/landing/landing-style.css */
.negra {
  font-weight: 700;
}

/* line 229, app/assets/stylesheets/landing/landing-style.css */
.negrita {
  font-weight: 700;
  color: #4AADBA;
}

/* Hero */
/* line 236, app/assets/stylesheets/landing/landing-style.css */
.hero {
  width: 100%;
  height: 820px;
  display: flex;
  justify-content: left;
  align-items: center;
}

/* line 244, app/assets/stylesheets/landing/landing-style.css */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 820px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}

/* line 254, app/assets/stylesheets/landing/landing-style.css */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 820px;
  z-index: 1;
  background: rgba(6, 62, 56, 0.61);
}

/* line 264, app/assets/stylesheets/landing/landing-style.css */
.hero-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 820px;
  background-color: rgba(51, 215, 228, 0.2);
  z-index: 2;
}

/* line 275, app/assets/stylesheets/landing/landing-style.css */
.hero-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 820px;
  background: linear-gradient(to bottom, #ecedf10d 0%, #ecedf11a 50%, #ecedf199 80%, #ecedf1cc 90%, #ecedf1e6 94%, #ecedf1ff 100%);
  z-index: 3;
}

/* line 294, app/assets/stylesheets/landing/landing-style.css */
.hero-content {
  width: 700px;
  z-index: 4;
  margin: 120px 0 200px 150px;
  text-align: left;
}

/* line 301, app/assets/stylesheets/landing/landing-style.css */
.hero-content h1 {
  font-size: 3em;
  line-height: 61px;
  margin-top: 2.8em;
  margin-bottom: 0.4em;
}

/* line 308, app/assets/stylesheets/landing/landing-style.css */
.hero-content p {
  margin-right: 100px;
  font-size: 28px;
  line-height: 46px;
  margin-bottom: 60px;
  font-family: 'Roboto', 'Montserrat', Arial, sans-serif;
  font-weight: 300;
  color: #ECEDF1;
}

/************************TABS**********************************/
/* line 320, app/assets/stylesheets/landing/landing-style.css */
.seccion {
  background-color: #ECEDF1;
  padding-top: 10px;
  padding-bottom: 100px;
}

/* line 326, app/assets/stylesheets/landing/landing-style.css */
.wrapper {
  width: 75%;
  margin: 0 auto;
}

/* line 331, app/assets/stylesheets/landing/landing-style.css */
.tablinks {
  width: 100%;
  text-align: left;
  font-family: 'Montserrat';
  font-weight: 400;
}

/* Style the tab
.tab {

}
*/
/* Style the buttons that are used to open the tab content */
/* line 345, app/assets/stylesheets/landing/landing-style.css */
.tab button {
  float: left;
  border: none;
  outline: none;
  border-radius: 0%;
  cursor: pointer;
  transition: 0.3s;
  height: 6em;
  color: #454545;
  border-bottom: 2px solid #828282;
}

/* Change background color of buttons on hover */
/* line 358, app/assets/stylesheets/landing/landing-style.css */
.tab button:hover {
  font-weight: 700;
}

/* Create an active/current tablink class */
/* line 363, app/assets/stylesheets/landing/landing-style.css */
.tab button.active {
  border-bottom: 9px solid #0DCDD9;
  font-weight: 700;
}

/* Style the tab content */
/* line 369, app/assets/stylesheets/landing/landing-style.css */
.tabcontent {
  /* display: none; */
  border-top: none;
  margin-top: 85px;
}

/* line 375, app/assets/stylesheets/landing/landing-style.css */
.seccion .wrapper .tabcontent.hide {
  display: none;
}

/* line 379, app/assets/stylesheets/landing/landing-style.css */
.tabcontent img {
  width: 100%;
}

/* line 383, app/assets/stylesheets/landing/landing-style.css */
.bottom-border {
  position: absolute;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #828282;
  z-index: 0;
}

/* line 391, app/assets/stylesheets/landing/landing-style.css */
.tab.adjustment {
  position: relative;
}

/* Oculto en desktop (los 4 tabs entran en una sola fila, no hay nada que
   deslizar ahí) — se muestra solo en mobile, ver @media más abajo. */
/* line 397, app/assets/stylesheets/landing/landing-style.css */
.tab-scroll-hint {
  display: none;
}

@media screen and (min-width: 1440px) {
  /* line 402, app/assets/stylesheets/landing/landing-style.css */
  .tab.adjustment {
    gap: 6%;
  }
}

/************************TABS END**********************************/
/************************SECCION2**********************************/
/* line 411, app/assets/stylesheets/landing/landing-style.css */
.numeros-bg {
  position: relative;
  padding-top: 10%;
  padding-bottom: 1%;
}

/* line 417, app/assets/stylesheets/landing/landing-style.css */
.section-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -5;
  -o-object-fit: cover;
     object-fit: cover;
}

/* line 427, app/assets/stylesheets/landing/landing-style.css */
.section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -3;
  background: linear-gradient(to bottom, #03EBFAa6 0%, #08a8b2a6 50%, #03848ca6 100%);
}

/* line 442, app/assets/stylesheets/landing/landing-style.css */
.section-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #ecedf100 0%, #ecedf1 60%, #ecedf1 100%);
  z-index: -2;
}

/* line 458, app/assets/stylesheets/landing/landing-style.css */
.numeros {
  justify-content: center;
}

/* line 462, app/assets/stylesheets/landing/landing-style.css */
.numeros > div:nth-child(1) {
  padding-right: 150px;
  border-right: 2px solid #7EEDF4;
  height: 120px;
}

/* line 468, app/assets/stylesheets/landing/landing-style.css */
.numeros > div:nth-child(2) {
  padding-left: 80px;
  border-left: 2px solid #7EEDF4;
  height: 120px;
}

/* line 474, app/assets/stylesheets/landing/landing-style.css */
.numeros h1 {
  font-size: 95px;
  font-weight: 700;
  line-height: 114px;
  color: #7EEDF4;
}

/* line 481, app/assets/stylesheets/landing/landing-style.css */
.numeros h4 {
  font-size: 29px;
  line-height: 35px;
  color: #ffffff;
  font-weight: 500;
}

/* line 488, app/assets/stylesheets/landing/landing-style.css */
.img-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 494, app/assets/stylesheets/landing/landing-style.css */
.img-div h3 {
  font-family: 'Montserrat';
  font-size: 30px;
  font-weight: 700;
  color: #0DCDD9;
  margin-bottom: 10px;
}

/* line 502, app/assets/stylesheets/landing/landing-style.css */
.img-div h4 {
  margin-top: 0px;
  font-family: 'Roboto';
  font-size: 20px;
  font-weight: 500;
  color: #454545;
}

/* line 510, app/assets/stylesheets/landing/landing-style.css */
.img-div p {
  font-family: 'Roboto';
  font-size: 18px;
  font-weight: 300;
  color: #454545;
}

/* line 517, app/assets/stylesheets/landing/landing-style.css */
.icon-text {
  display: flex;
  gap: 10px;
  justify-content: left;
  align-items: center;
  margin-top: -7px;
}

/************************SECCION2 END**********************************/
/************************SECCION3**********************************/
/* line 529, app/assets/stylesheets/landing/landing-style.css */
.use-cases {
  margin-top: 0px;
  padding: 8% 5% 10% 5%;
  padding-bottom: 10%;
  background-color: #ECEDF1;
}

/* line 536, app/assets/stylesheets/landing/landing-style.css */
.cards {
  display: flex;
  justify-content: center;
  gap: 35px;
}

/* line 542, app/assets/stylesheets/landing/landing-style.css */
.use-cases h2,
h3 {
  font-weight: 700;
  font-family: 'Montserrat', Arial, monospace;
}

/* line 548, app/assets/stylesheets/landing/landing-style.css */
.use-cases h2 {
  color: #828282;
  font-size: 26px;
  margin-left: 5%;
  margin-bottom: 40px;
}

/* line 555, app/assets/stylesheets/landing/landing-style.css */
.use-cases h3 {
  color: #03848C;
  font-size: 18px;
  line-height: 25px;
}

/* line 561, app/assets/stylesheets/landing/landing-style.css */
.use-cases p {
  color: #828282;
  font-size: 17px;
  line-height: 27px;
  font-weight: 300;
  font-family: 'Roboto', Arial, monospace;
}

/* line 569, app/assets/stylesheets/landing/landing-style.css */
.use-cases-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 15px 35px;
  box-shadow: #9b9fb233 0px 5px 15px;
  width: 600px !important;
}

/* line 577, app/assets/stylesheets/landing/landing-style.css */
.use-cases-card-title {
  height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/************************SECCION3 END**********************************/
/************************SECCION4**********************************/
/* line 588, app/assets/stylesheets/landing/landing-style.css */
.clientes {
  padding: 8% 5% 8% 5%;
  background-color: #03848c;
}

/* line 593, app/assets/stylesheets/landing/landing-style.css */
.clientes p {
  font-weight: 500;
  font-family: 'Montserrat', Arial, monospace;
  line-height: 38px;
  font-size: 24px;
  color: #ffffff;
  margin-right: 12%;
}

/* line 602, app/assets/stylesheets/landing/landing-style.css */
.clientes img {
  max-height: 90px;
  max-width: 150px;
}

/************************SECCION4 END**********************************/
/*************FOOTER****************/
/* line 611, app/assets/stylesheets/landing/landing-style.css */
.footer {
  background: linear-gradient(to right, #333333 0%, #555454 100%);
  padding: 30px 40px;
}

/* line 616, app/assets/stylesheets/landing/landing-style.css */
.footer a {
  display: block;
  margin-bottom: 20px;
  color: #E0E0E0;
  font-family: 'Roboto';
  font-weight: 400;
}

/* line 624, app/assets/stylesheets/landing/landing-style.css */
.footer .container-lg .mostrar-flex {
  border-bottom: 2px solid #828282CC;
}

/* line 628, app/assets/stylesheets/landing/landing-style.css */
.footer p {
  color: #FFFFFF66;
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
}

/* Mobile — toda la página nació solo para desktop (un único @media arriba,
   min-width:1440px, para agrandar el gap de los tabs), con anchos/márgenes/
   tamaños de fuente fijos en px por todos lados (hero-content 700px+margin-
   left:150px, .numeros h1 a 95px, cards de use-cases a 600px !important,
   imagen de "Interfaz Intuitiva" a 800px por inline style, etc.) — en un
   celular real (~390px) esto desborda horizontalmente y corta contenido,
   confirmado en vivo (reportado por el usuario). Los overrides de acá no
   tocan el layout de escritorio (nada arriba de este bloque cambia). */
@media (max-width: 767px) {
  /* Navbar: los 2 links de texto ("Inicio"/"Funciones Plataforma", en
     .l-gap) más los 2 botones (en .s-gap) con gap:80px/20px no entran en
     390px — se ocultan los links de texto (quedan igual accesibles desde el
     footer) y los botones se achican del tamaño fijo de escritorio
     (190x34px) a uno que se ajusta al contenido. */
  /* line 650, app/assets/stylesheets/landing/landing-style.css */
  .navbar-elements > .l-gap {
    display: none;
  }
  /* <ul class="navbar-elements"> sin list-style trae el padding-left:40px
     por default del navegador igual (list-style:none no lo quita) —
     silencioso pero se comía 40px reales del poco ancho disponible. */
  /* line 657, app/assets/stylesheets/landing/landing-style.css */
  .navbar-elements {
    padding: 0;
    margin: 16px 0;
  }
  /* line 662, app/assets/stylesheets/landing/landing-style.css */
  .menu {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  /* line 667, app/assets/stylesheets/landing/landing-style.css */
  .logo {
    font-size: 14px;
  }
  /* line 671, app/assets/stylesheets/landing/landing-style.css */
  .navbar button {
    width: auto;
    height: auto;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  /* line 679, app/assets/stylesheets/landing/landing-style.css */
  .navbar .s-gap {
    gap: 6px;
  }
  /* Hero */
  /* line 684, app/assets/stylesheets/landing/landing-style.css */
  .hero-content {
    width: auto;
    flex: 1 1 auto;
    margin: 110px 20px 40px;
  }
  /* line 690, app/assets/stylesheets/landing/landing-style.css */
  .hero-content h1 {
    font-size: 1.9em;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: .5em;
  }
  /* line 697, app/assets/stylesheets/landing/landing-style.css */
  .hero-content p {
    margin-right: 0;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
  }
  /* line 704, app/assets/stylesheets/landing/landing-style.css */
  .btn-lg {
    width: 100%;
    max-width: 320px;
    height: 56px;
    font-size: 1em;
  }
  /* Tabs (Centralización de documentos / Seguimiento / Gestión / Manejo) —
     con 4 botones de 2 líneas cada uno, en vez de apretarlos (flex-shrink
     los deja ilegibles) pasan a una fila con scroll horizontal, mismo
     criterio que el riel de pasos del wizard v2 (.breadcrumb-v2). */
  /* line 715, app/assets/stylesheets/landing/landing-style.css */
  .tab.mostrar-flex.adjustment {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 24px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  /* line 723, app/assets/stylesheets/landing/landing-style.css */
  .tab.mostrar-flex.adjustment::-webkit-scrollbar {
    display: none;
  }
  /* Nota: se probó un degradado fijo en el borde derecho (::after,
     z-index por encima del texto) para insinuar que hay más tabs fuera
     de vista, pero al hacer scroll (a mano o con el scrollIntoView de
     abajo) cualquier tab puede terminar posicionado justo bajo ese
     degradado — incluido el tab activo, que quedaba con el texto
     "difuminado"/ilegible (reportado por el usuario, con captura). Un
     overlay que apaga contenido no sirve cuando ese contenido puede ser
     el importante. Se sacó; el hint de texto de abajo + que el 4to tab
     se vea cortado a la mitad ya avisan que hay más para deslizar. */
  /* line 737, app/assets/stylesheets/landing/landing-style.css */
  .tab-scroll-hint {
    display: block;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 11px;
    color: #828282;
    text-align: right;
    margin: 6px 0 0;
  }
  /* line 746, app/assets/stylesheets/landing/landing-style.css */
  .tablinks {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px;
    padding: 0 2px;
  }
  /* Números (+80 Proyectos / +25 Empresas): los separadores con
     padding/border fijos (150px/80px) y el h1 a 95px no entran en mobile —
     pasan a apilarse en vez de ir lado a lado. */
  /* line 757, app/assets/stylesheets/landing/landing-style.css */
  .numeros {
    flex-direction: column;
    gap: 24px;
  }
  /* line 762, app/assets/stylesheets/landing/landing-style.css */
  .numeros > div:nth-child(1),
.numeros > div:nth-child(2) {
    padding: 0;
    border: none;
    height: auto;
  }
  /* line 769, app/assets/stylesheets/landing/landing-style.css */
  .numeros h1 {
    font-size: 52px;
    line-height: 1.2;
  }
  /* line 774, app/assets/stylesheets/landing/landing-style.css */
  .numeros h4 {
    font-size: 18px;
    line-height: 1.3;
  }
  /* "Interfaz Intuitiva": imagen + texto lado a lado, la imagen fuerza
     800px vía inline style (más específico que una regla externa sin
     !important) — se apilan y la imagen pasa a 100% del ancho real. */
  /* line 782, app/assets/stylesheets/landing/landing-style.css */
  .img-div {
    flex-direction: column;
    gap: 16px;
  }
  /* line 787, app/assets/stylesheets/landing/landing-style.css */
  .img-div .center {
    width: 100% !important;
    height: auto !important;
  }
  /* Use cases: 3 tarjetas de 600px !important lado a lado — se apilan y
     cada una pasa a ocupar el ancho real disponible. */
  /* line 794, app/assets/stylesheets/landing/landing-style.css */
  .cards {
    flex-direction: column;
    gap: 20px;
  }
  /* line 799, app/assets/stylesheets/landing/landing-style.css */
  .use-cases-card {
    width: 100% !important;
  }
  /* line 803, app/assets/stylesheets/landing/landing-style.css */
  .use-cases-card-title {
    height: auto !important;
    min-height: 72px;
  }
  /* Clientes: párrafo + 3 logos en una fila con margin-right:12% en el
     texto — se apilan y se centran. */
  /* line 810, app/assets/stylesheets/landing/landing-style.css */
  .clientes .container-m.mostrar-flex {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  /* line 816, app/assets/stylesheets/landing/landing-style.css */
  .clientes p {
    margin-right: 0;
  }
  /* Footer: "Iniciar Sesión"/"Registrarse" (2 links) al lado de "Inicio"/
     "Funciones plataforma"/"Contáctanos" (3 links) en 2 columnas — con
     distinta cantidad de items quedan desalineadas fila por fila y el
     orden de lectura salta de una columna a la otra (reportado por el
     usuario). Se apilan en 1 columna: primero el grupo de cuenta, después
     el de navegación. */
  /* line 826, app/assets/stylesheets/landing/landing-style.css */
  .footer .container-lg .mostrar-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* Main */
/* line 3, app/assets/stylesheets/landing/login-style.css */
.login {
  width: 100%;
  height: 910px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 11, app/assets/stylesheets/landing/login-style.css */
.login-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -10;
}

/* line 21, app/assets/stylesheets/landing/login-style.css */
.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  z-index: -9;
  background: rgba(6, 62, 56, 0.61);
}

/* line 31, app/assets/stylesheets/landing/login-style.css */
.login-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  background-color: rgba(51, 215, 228, 0.2);
  z-index: -8;
}

/* line 42, app/assets/stylesheets/landing/login-style.css */
.login-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  background-color: #0000001A;
  z-index: -7;
}

/* line 53, app/assets/stylesheets/landing/login-style.css */
.login-content {
  width: 800px;
  z-index: 100;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 62, app/assets/stylesheets/landing/login-style.css */
.login-content input {
  width: 400px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.25);
  border: none;
  color: #ffffff;
  font-family: 'Roboto';
  font-size: 18px;
  border-radius: 8px;
  padding-left: 20px;
  margin-bottom: 15px;
}

/* line 75, app/assets/stylesheets/landing/login-style.css */
.login-content input:focus {
  background-color: #ffffff66;
  border-color: #ffffff;
  border: 2px solid #ffffff;
}

/* line 81, app/assets/stylesheets/landing/login-style.css */
.login-content input::-moz-placeholder {
  color: #ffffff;
  opacity: 1;
}
.login-content input::placeholder {
  color: #ffffff;
  opacity: 1;
}

/* line 86, app/assets/stylesheets/landing/login-style.css */
.login-content input::-ms-input-placeholder {
  color: #ffffff;
  opacity: 1;
}

/* line 91, app/assets/stylesheets/landing/login-style.css */
.login-content button,
.login-content input[type="submit"] {
  width: 400px;
  height: 40px;
  border-radius: 8px;
  font-family: 'Roboto';
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  background-color: #0DCDD9;
  border: none;
}

/* line 104, app/assets/stylesheets/landing/login-style.css */
.login-content button:hover {
  width: 400px;
  height: 40px;
  border-radius: 8px;
  font-family: 'Roboto';
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  background-color: #0DCDD9B3;
}

/* line 115, app/assets/stylesheets/landing/login-style.css */
.separador {
  width: 100%;
  height: 1px;
  background-color: #E6E6E6;
}

/* line 121, app/assets/stylesheets/landing/login-style.css */
.separador-texto {
  width: 100px;
  color: #ffffff;
  font-family: 'Roboto';
  white-space: nowrap;
}

/* line 128, app/assets/stylesheets/landing/login-style.css */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 135px;
  width: 400px;
  height: 40px;
  border-radius: 8px;
  background-color: #EEEEEE !important;
}

/* line 139, app/assets/stylesheets/landing/login-style.css */
.btn-google p {
  font-family: 'Roboto';
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  margin: 0px !important;
}

/* line 147, app/assets/stylesheets/landing/login-style.css */
.btn-google img {
  width: 20px;
  height: 20px;
}

/* CONTACTO */
/* line 156, app/assets/stylesheets/landing/login-style.css */
.login {
  width: 100%;
  height: 910px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 164, app/assets/stylesheets/landing/login-style.css */
.login-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -10;
}

/* line 174, app/assets/stylesheets/landing/login-style.css */
.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  z-index: -9;
  background: rgba(6, 62, 56, 0.61);
}

/* line 184, app/assets/stylesheets/landing/login-style.css */
.login-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  background-color: rgba(51, 215, 228, 0.2);
  z-index: -8;
}

/* line 195, app/assets/stylesheets/landing/login-style.css */
.login-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  background-color: #0000001A;
  z-index: -7;
}

/* line 206, app/assets/stylesheets/landing/login-style.css */
.contacto-content {
  width: 1200px;
  z-index: 100;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* line 215, app/assets/stylesheets/landing/login-style.css */
.contacto-title {
  width: 340px;
  padding-top: 116px;
  padding-bottom: 240px;
}

/* line 221, app/assets/stylesheets/landing/login-style.css */
.contacto-content h2 {
  color: #03EBFA;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 40px;
}

/* line 228, app/assets/stylesheets/landing/login-style.css */
.contacto-content p {
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 23px;
  line-height: 155%;
}

/* line 236, app/assets/stylesheets/landing/login-style.css */
.contact-form {
  background-color: #ffffff33;
  width: 720px;
  border-radius: 16px;
  padding: 55px 55px 60px 55px;
}

/* line 243, app/assets/stylesheets/landing/login-style.css */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

/* line 249, app/assets/stylesheets/landing/login-style.css */
.contact-form label {
  font-family: 'Roboto';
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  display: block;
}

/* line 258, app/assets/stylesheets/landing/login-style.css */
.contact-form input, textarea {
  background-color: #ffffff66;
  border: none;
  color: #ffffff !important;
  font-family: 'Roboto';
  font-size: 18px;
  border-radius: 8px;
  padding-left: 20px;
  margin-top: 10px;
}

/* line 269, app/assets/stylesheets/landing/login-style.css */
.contact-form input {
  width: 294px;
  height: 45px;
}

/* line 274, app/assets/stylesheets/landing/login-style.css */
.contact-form textarea {
  width: 100%;
  height: 125px;
  resize: none;
  padding-top: 15px;
}

/* line 281, app/assets/stylesheets/landing/login-style.css */
.contacto-content button {
  width: 160px;
  height: 40px;
  border-radius: 8px;
  font-family: 'Roboto';
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  background-color: #03EBFA80;
  border: none;
  display: block;
  align-self: self-end;
}

/* line 295, app/assets/stylesheets/landing/login-style.css */
.contacto-content button:hover {
  background-color: #03EBFAB3;
}

/* line 299, app/assets/stylesheets/landing/login-style.css */
.container-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}

/* Recuperar contraseña */
/* line 307, app/assets/stylesheets/landing/login-style.css */
.contrasena-content {
  width: 1200px;
  background-color: #ffffff1f;
  z-index: 100;
  text-align: left;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 110px 110px 155px 110px;
}

/* line 319, app/assets/stylesheets/landing/login-style.css */
.contrasena-title {
  width: 375px;
}

/* line 323, app/assets/stylesheets/landing/login-style.css */
.contrasena-content h2 {
  color: #03EBFA;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 40px;
}

/* line 330, app/assets/stylesheets/landing/login-style.css */
.contrasena-content p {
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 21px;
  line-height: 155%;
  margin-top: 0px;
}

/* line 339, app/assets/stylesheets/landing/login-style.css */
.contrasena-form {
  background-color: #ffffff42;
  width: 610px;
  border-radius: 16px;
  padding: 65px 90px;
}

/* line 346, app/assets/stylesheets/landing/login-style.css */
.contrasena-form p {
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 155%;
  margin-top: 0px;
  margin-bottom: 35px;
}

/* line 356, app/assets/stylesheets/landing/login-style.css */
.contrasena-form input {
  background-color: #ffffff40;
  width: 430px;
  height: 40px;
  border: none;
  color: #ffffff !important;
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  border-radius: 8px;
  padding-left: 20px;
  margin-bottom: 18px;
  box-sizing: border-box;
}

/* line 371, app/assets/stylesheets/landing/login-style.css */
textarea:focus,
input:focus {
  background-color: #03EBFA1f;
  border: 2px solid #03EBFA;
  outline: none;
}

/* line 378, app/assets/stylesheets/landing/login-style.css */
.contrasena-row {
  display: flex;
  justify-content: space-between;
}

/* line 383, app/assets/stylesheets/landing/login-style.css */
.contrasena-form .contrasena-row button,
.contrasena-form .contrasena-row a {
  width: 205px;
  height: 40px;
  border-radius: 8px;
  font-family: 'Roboto';
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  background-color: #03EBFA80;
  border: none;
}

/* line 396, app/assets/stylesheets/landing/login-style.css */
.contrasena-form .contrasena-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* line 402, app/assets/stylesheets/landing/login-style.css */
.contrasena-form .contrasena-row button:hover {
  background-color: #0D464F;
}

/* line 406, app/assets/stylesheets/landing/login-style.css */
.contrasena-form .contrasena-row a:hover {
  background-color: #0D464F;
}

/* line 410, app/assets/stylesheets/landing/login-style.css */
.login-content input[type="submit"]:hover {
  background-color: #91DFE5BD;
  cursor: pointer;
}

/* Mobile — mismo problema que landing-style.css: anchos fijos en px
   (.login-content 800px, inputs/botones 400px, .btn-google con gap:135px,
   .contacto-content/.contrasena-content 1200px, etc.) sin ningún @media,
   desbordan en un celular real (reportado por el usuario). Login/
   recuperar contraseña/contacto comparten el mismo layout "landing" (ver
   app/views/layouts/landing.html.erb), así que se arreglan juntos acá. */
@media (max-width: 767px) {
  /* height:auto (con min-height para no perder el alto "hero" del login
     simple, que sigue centrado): con height:910px fijo, si el contenido
     real (ej. el formulario de Contacto, más alto que eso en mobile)
     desborda la caja, el footer arranca igual justo en el borde de los
     910px del documento y queda superpuesto con la cola del formulario
     que sobresale visualmente — confirmado en vivo. */
  /* line 428, app/assets/stylesheets/landing/login-style.css */
  .login {
    height: auto;
    min-height: 910px;
    padding: 110px 20px 40px;
  }
  /* line 434, app/assets/stylesheets/landing/login-style.css */
  .login-content {
    width: 100%;
  }
  /* line 438, app/assets/stylesheets/landing/login-style.css */
  .login-content input,
.login-content button,
.login-content input[type="submit"] {
    width: 100%;
  }
  /* line 444, app/assets/stylesheets/landing/login-style.css */
  .btn-google {
    width: 100%;
    gap: 10px;
  }
  /* Contacto: el contenido apilado (título+form) es más alto que el
     área disponible dentro de los 910px fijos de <main class="login">
     (align-items:center, ver arriba) — centrado verticalmente eso hacía
     que se saliera por arriba y tapara el navbar (confirmado en vivo).
     align-self:flex-start lo ancla arriba en vez de centrarlo. */
  /* line 454, app/assets/stylesheets/landing/login-style.css */
  .contacto-content {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: 24px;
    padding: 0 20px 40px;
  }
  /* line 463, app/assets/stylesheets/landing/login-style.css */
  .contacto-title {
    width: 100%;
    padding: 0;
  }
  /* line 468, app/assets/stylesheets/landing/login-style.css */
  .contact-form {
    width: 100%;
    padding: 28px 20px;
    box-sizing: border-box;
  }
  /* line 474, app/assets/stylesheets/landing/login-style.css */
  .form-row {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }
  /* line 480, app/assets/stylesheets/landing/login-style.css */
  .contact-form input {
    width: 100%;
    box-sizing: border-box;
  }
  /* Recuperar contraseña: mismo criterio que .contacto-content arriba
     (align-self:flex-start, sin duplicar el padding-top que ya pone
     .login). */
  /* line 488, app/assets/stylesheets/landing/login-style.css */
  .contrasena-content {
    width: 100%;
    flex-direction: column;
    align-self: flex-start;
    padding: 0 20px 40px;
    box-sizing: border-box;
  }
  /* line 496, app/assets/stylesheets/landing/login-style.css */
  .contrasena-title {
    width: 100%;
  }
  /* line 500, app/assets/stylesheets/landing/login-style.css */
  .contrasena-form {
    width: 100%;
    padding: 28px 20px;
    box-sizing: border-box;
  }
  /* line 506, app/assets/stylesheets/landing/login-style.css */
  .contrasena-form input {
    width: 100%;
    box-sizing: border-box;
  }
  /* line 511, app/assets/stylesheets/landing/login-style.css */
  .contrasena-row {
    flex-direction: column;
    gap: 12px;
  }
  /* line 516, app/assets/stylesheets/landing/login-style.css */
  .contrasena-row button,
.contrasena-row a {
    width: 100%;
  }
}

/* Legibilidad del formulario de login: el fondo es un video con partículas
   claras, así que el texto blanco (enlaces, aviso de reCAPTCHA, mensajes de
   error) se perdía encima. Se apoya el formulario sobre una tarjeta
   translúcida con blur. */
/* line 525, app/assets/stylesheets/landing/login-style.css */
.login-content > div {
  width: 464px;
  box-sizing: border-box;
  padding: 28px 32px;
  border-radius: 16px;
  background: rgba(3, 38, 42, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* line 535, app/assets/stylesheets/landing/login-style.css */
.login-content a,
.login-content p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* line 540, app/assets/stylesheets/landing/login-style.css */
.login-flash {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ff8a8a;
  background: rgba(120, 20, 20, 0.45);
  color: #ffffff;
  font-family: 'Roboto';
  font-size: 14px;
  line-height: 140%;
}

/* line 552, app/assets/stylesheets/landing/login-style.css */
.login-flash--notice {
  border-color: #0DCDD9;
  background: rgba(7, 90, 96, 0.5);
}

@media (max-width: 767px) {
  /* line 558, app/assets/stylesheets/landing/login-style.css */
  .login-content > div {
    width: 100%;
    padding: 24px 20px;
  }
}