@charset "UTF-8";
/* Font  */
@font-face {
  font-family: Poppins;
  src: url("../font/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-optical-sizing: auto;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("../font/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-optical-sizing: auto;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("../font/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-optical-sizing: auto;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("../font/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-optical-sizing: auto;
  font-display: swap;
}
/* Variables de Sass */
@keyframes pulse2 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
header.menu {
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: 1000;
  padding-top: 15px;
  /* Logo Desktop */
  /* Menu Desktop */
  /* Toggle Button */
}
@media (min-width: 992px) {
  header.menu .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
  }
}
header.menu .container-fluid {
  max-width: 1600px;
  padding: 0 50px;
}
header.menu .navbar {
  padding: 0;
}
header.menu .logoD {
  max-width: 180px;
  display: block;
}
header.menu .menuD {
  align-items: center;
  margin-top: -30px;
}
header.menu .menuD .nav-item {
  margin-left: 25px;
}
header.menu .menuD .nav-link {
  color: var(--Azul, #0c2340);
  text-align: center;
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 0 8px !important;
  transition: color 0.3s ease;
}
header.menu .menuD .nav-link:hover {
  color: #0c2340; /* Dark Blue */
}
header.menu .navbar-toggler {
  border: none;
  padding: 0;
}
header.menu .navbar-toggler:focus {
  box-shadow: none;
}
header.menu .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230c2340' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media screen and (max-width: 1540px) {
  header.menu .logoD {
    max-width: 110px;
    display: block;
  }
  header.menu .menuD {
    margin-right: 10%;
  }
}
/* Mobile Styles */
@media screen and (max-width: 992px) {
  header.menu {
    padding: 10px 20px;
  }
  header.menu .container-fluid {
    padding: 0 20px;
  }
  header.menu .logoM {
    max-width: 90px;
  }
  header.menu .navbar-collapse {
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* Ensure collapse works without breaking animation */
    /* Ensure visibility when shown or collapsing */
  }
  header.menu .navbar-collapse.collapse:not(.show) {
    display: none;
  }
  header.menu .navbar-collapse.collapsing {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
  }
  header.menu .navbar-collapse .nav-item {
    text-align: center;
    margin-bottom: 15px;
  }
}
/* General & Typography */
html,
body {
  width: 100%;
  overflow-x: hidden;
  background-color: white;
  font-family: "Jost", sans-serif;
}

a {
  text-decoration: none;
}

section {
  padding: 100px 15px;
}

img {
  max-width: 100%;
  width: 100%;
}

h1 {
  color: var(--Azul, #0c2340);
  font-family: Poppins;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 68px; /* 106.25% */
  text-transform: uppercase;
}

.banner p {
  color: var(--Negro, #000);
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 120% */
}

h6 {
  color: var(--Rojo, #c02c31);
  text-align: center;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

h2 {
  color: var(--Azul, #0c2340);
  font-family: Poppins;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px; /* 110% */
}

h4 {
  color: var(--Azul-2, #215682);
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 120% */
}

p {
  color: var(--Negro, #000);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}

/* Global Badge */
.badget-sm {
  color: #e43b36;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: block;
  text-transform: uppercase;
}

/* Buttons */
.btn,
.btnbr,
input.hs-button.primary.large {
  color: var(--Blanco, #fff);
  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 175% */
  letter-spacing: 0.8px;
  border-radius: 53px;
  background: var(--Aqua, #05aca8);
}

.btn:hover,
.btnbr:hover,
input.hs-button.primary.large:hover {
  background-color: var(--Aqua, #05aca8);
  color: #fff;
  opacity: 0.7;
}

.btn img,
.btnbr img,
input.hs-button.primary.large img {
  margin: 4px 0 4px 15px;
  width: 12px;
}

/* Animations */
/* Utility Classes */
.hiddenD,
.hiddenl {
  display: none;
}

.hiddenS {
  display: none;
}

@media screen and (max-width: 1540px) {
  h1 {
    font-size: 56px;
    line-height: 60px;
  }
}
@media screen and (max-width: 992px) {
  .hiddenl {
    display: block;
  }
  .hiddenD {
    display: block;
  }
  .hiddenS {
    display: none;
  }
  h1 {
    font-size: 38px;
    line-height: 42px;
  }
  h2 {
    font-size: 35px;
    line-height: 36px;
  }
}
@media screen and (max-width: 767px) {
  .hiddenD {
    display: block !important;
  }
  .hiddenM {
    display: none;
  }
  .hiddenS {
    display: block;
  }
  h1 {
    font-size: 38px;
    line-height: 42px;
  }
  h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .banner p {
    font-size: 20px;
  }
  .btnbr {
    padding: 8px 20px !important;
    display: block;
    width: -moz-max-content;
    width: max-content;
    font-size: 16px !important;
  }
}
.banner {
  position: relative;
  padding: 150px 0 100px;
  background-image: url("../imagenes/fondoHeader.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden; /* For masking shapes */
}
.banner .container-fluid {
  max-width: 1600px; /* Constraints per mockup width */
  margin: 0 auto;
  padding: 0 50px;
}
.banner .content-col {
  z-index: 2;
  padding-right: 50px;
}
.banner .content-col h1 {
  /* Inherits from _general.scss but ensuring alignment */
  text-align: left;
  margin-bottom: 20px;
}
.banner .content-col p {
  /* Inherits from _general.scss */
  text-align: left;
  max-width: 80%;
  margin-bottom: 60px;
}
.banner .content-col .btnbr {
  /* Inherits _general btn styles */
  padding: 12px 40px;
}
.banner .image-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner .image-col .hexagon-wrapper {
  /* Hexagon Masking Technique */
  width: 100%;
  max-width: 600px;
  position: relative;
}
.banner .image-col .hexagon-wrapper .hexagon-img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 173.20508075688772' xmlns='http://www.w3.org/2000/svg'><path d='M100 0L198.807 57.063V171.141L100 228.205L1.192 171.141V57.063L100 0Z' /></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 173.20508075688772' xmlns='http://www.w3.org/2000/svg'><path d='M100 0L198.807 57.063V171.141L100 228.205L1.192 171.141V57.063L100 0Z' /></svg>");
  /* The above mask image is complex to get right inline. Easier to use clip-path polygon */
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -o-object-fit: cover;
     object-fit: cover;
  /* Aspect ratio for hexagon */
}

/* Responsive */
@media screen and (max-width: 992px) {
  .banner {
    /* Tablet adjustments */
    padding-top: 250px;
    padding-bottom: 250px;
    min-height: auto;
  }
  .banner .content-col {
    padding-right: 15px;
  }
  .banner p {
    max-width: 55% !important;
  }
}
@media screen and (max-width: 768px) {
  .banner {
    text-align: center;
    padding: 100px 15px 250px;
    min-height: 870px;
    background-color: #e4e2e3;
    background-image: url(../imagenes/movil/fondoHeader.jpg);
    background-position: bottom center;
    background-size: contain;
  }
  .banner .container-fluid {
    padding: 0 20px;
  }
  .banner .row {
    flex-direction: column;
  }
  .banner .content-col {
    padding: 0;
    margin-bottom: 40px;
  }
  .banner .content-col h1 {
    /* Hide breaks on mobile if needed, or keep for spacing */
  }
  .banner .content-col h1 br {
    display: none;
  }
  .banner .content-col p {
    text-align: left;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 20px;
  }
  .banner .image-col .hexagon-wrapper {
    max-width: 100%;
  }
  .banner .image-col .hexagon-wrapper .hexagon-img {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
}
.nosotros {
  padding: 150px 0;
  background-color: #fff;
  /* Column Alignment */
}
.nosotros .container {
  max-width: 1440px; /* Mantener consistencia con el ancho máximo */
}
.nosotros .row {
  align-items: center;
}
.nosotros img.nosotros-img {
  border-radius: 20px; /* Rounded corners as seen in mockup */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Subtle shadow if needed, looks clean in mockup but good to have depth */
  width: 100%;
  display: block;
}
.nosotros .cont {
  padding-left: 120px; /* More spacing between image and text */
}
.nosotros .cont h6 {
  text-align: left; /* Override center from general if needed */
  margin-bottom: 30px;
  /* Color and Font inherited from _general.scss h6 */
}
.nosotros .cont h2 {
  /* Inherited from _general.scss h2 */
  margin-bottom: 30px;
}
.nosotros .cont p {
  margin-bottom: 20px;
  text-align: justify; /* Or left, usually left is better for web but mockup looks blocky */
  text-align: left;
}
.nosotros .cont p:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media screen and (max-width: 992px) {
  .nosotros {
    padding: 100px 0;
  }
  .nosotros .container {
    max-width: 700px;
  }
  .nosotros .cont {
    padding-left: 15px;
    margin-top: 40px;
  }
  .nosotros .cont h6 {
    text-align: left;
  }
  .nosotros .cont h2 {
    text-align: left;
  }
  .nosotros .cont h2 br {
    display: none;
  }
  .nosotros .cont p {
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  .nosotros {
    padding: 100px 30px;
  }
  .nosotros .col-lg-6.col-12.mb-5.mb-lg-0 {
    padding: 0;
  }
  .nosotros .nosotros-img {
    margin-bottom: 0;
  }
  .nosotros .cont {
    padding-left: 0;
    margin-top: 20px;
  }
}
.beneficios {
  padding: 100px 0;
  background-color: #fff;
}
.beneficios .container {
  max-width: 1440px;
}
.beneficios h6 {
  margin-bottom: 30px;
}
.beneficios h2 {
  text-align: center;
  margin-bottom: 30px;
}
.beneficios .beneficios-grid {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid #e4e3e3;
  /* The mockup shows lines separating the content. 
     Top and Bottom lines seem to frame the whole grid in one of the views, or maybe just internal lines?
     Looking at Desktop Mockup: There is a horizontal line in the middle, and a vertical line in the middle.
     And Top/Bottom borders?
     Let's reproduce standard grid table borders.
  */
  border: 2px solid #e4e3e3; /* Outer frame? Or just internal? */
  /* Re-evaluating mockup lines.
     Desktop: Looks like a large cross divider.
     Mobile: Dividers between stacked items.
     I'll use a border technique on children.
  */
  border: none;
  border-top: 2px solid #e4e3e3;
  border-bottom: 2px solid #e4e3e3;
}
.beneficios .b-card {
  flex: 0 0 50%; /* 2 columns */
  max-width: 50%;
  display: flex;
  align-items: center; /* Vertically align image and text */
  padding: 60px;
  border-bottom: 2px solid #e4e3e3; /* Default bottom border */
  /* Grid Borders Logic */
}
.beneficios .b-card:nth-child(1), .beneficios .b-card:nth-child(2) {
  /* First row */
}
.beneficios .b-card:nth-child(3), .beneficios .b-card:nth-child(4) {
  /* Second row */
  border-bottom: none; /* No bottom border for last row elements if grid has bottom border */
}
.beneficios .b-card:nth-child(odd) {
  /* Left column */
  border-right: 2px solid #e4e3e3;
}
.beneficios .b-card .img-wrap {
  flex: 0 0 100px; /* Fixed width for icon */
  margin-right: 20px;
}
.beneficios .b-card .img-wrap img {
  width: 100%;
  height: auto;
  max-width: 100px; /* Adjust based on image size */
}
.beneficios .b-card .info-wrap h4 {
  /* Font details inferred or inherited */
  /* general h4 is blue-2. Mockup is dark blue. */
  color: #0c2340; /* #0c2340 from variables */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
  text-align: left;
}
.beneficios .b-card .info-wrap p {
  text-align: left;
}

/* Responsive */
@media screen and (max-width: 992px) {
  .beneficios .b-card {
    padding: 30px;
  }
  .beneficios .b-card .info-wrap h4 {
    font-size: 20px;
  }
  .beneficios .b-card .info-wrap p {
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .beneficios {
    padding: 60px 0;
  }
  .beneficios .beneficios-grid {
    border: none; /* Reset main borders if needed */
    border-top: 2px solid #e4e3e3;
    border-bottom: 2px solid #e4e3e3;
    flex-direction: column;
  }
  .beneficios .b-card {
    flex: 0 0 100%;
    max-width: 100%;
    border-right: none !important; /* No vertical divider in mobile */
    border-bottom: 2px solid #e4e3e3 !important; /* All get bottom border except last */
    padding: 30px 15px;
    flex-direction: column; /* Stack image and text in mobile? Mockup shows side-by-side or stacked?
 Mobile Mockup 480px shows: Image Left, Text Right. Side by Side.
 So I will keep row direction but adjust sizes.
*/
    flex-direction: row;
    align-items: flex-start;
  }
  .beneficios .b-card:last-child {
    border-bottom: none !important;
  }
  .beneficios .b-card .img-wrap {
    margin-bottom: 0;
    margin-right: 15px;
    flex: 0 0 70px; /* Smaller icon */
  }
  .beneficios .b-card .info-wrap h4 {
    font-size: 18px;
  }
}
.contacto {
  padding: 100px 0;
}
.contacto .container-fluid {
  max-width: 1800px;
  padding: 0 40px;
}
.contacto fieldset.form-columns-1 .hs-input {
  width: 100%;
}
.contacto fieldset {
  max-width: 554px;
}
.contacto .hbspt-form .hs-input {
  min-width: 100%;
}
.contacto .actions {
  margin-top: 40px;
}
.contacto .form-container-box {
  background-image: url("../imagenes/fondoContacto.png");
  background-size: cover;
  background-position: center;
  border-radius: 30px;
  padding: 120px 100px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.contacto .form-col {
  z-index: 2;
  padding-left: 60px;
}
.contacto .form-col h2 {
  color: #fff !important;
  text-align: left;
  margin-bottom: 20px;
}
.contacto .form-col p {
  color: #fff;
  text-align: left;
  margin-bottom: 40px;
  max-width: 90%;
}
.contacto .img-col {
  height: 100%;
  position: absolute !important; /* To align absolutely to right bottom */
  right: 0;
  bottom: 0;
  top: 0;
  width: 50%; /* Right half */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none; /* Let clicks pass through if overlaps form? */
}
.contacto .img-col .contact-person-img {
  max-height: 100%; /* Adjust size based on container height */
  width: auto;
  display: block;
  margin-right: 12%;
}

/* HubSpot Form Overrides for Dark Background */
.hbspt-form {
  /* Fix for Phone Number Field - Side by Side */
}
.hbspt-form label {
  color: #fff !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 400;
}
.hbspt-form .hs-input {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  font-family: "Roboto", sans-serif !important;
}
.hbspt-form .hs-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}
.hbspt-form .hs-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}
.hbspt-form .hs-button {
  background-color: #05aca8 !important; /* Teal/Aqua */
  border-radius: 50px !important;
  padding: 12px 40px !important;
  font-family: "Poppins", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none !important;
  /* "QUIERO AVANZAR" button styling */
}
.hbspt-form .hs-fieldtype-phonenumber .input {
  display: flex !important;
  align-items: center;
  width: 100%;
  /* Country Code Select */
  /* Phone Number Input */
}
.hbspt-form .hs-fieldtype-phonenumber .input .hs-input {
  width: auto !important;
  flex-grow: 1;
}
.hbspt-form .hs-fieldtype-phonenumber .input select.hs-input {
  width: 30% !important;
  margin-right: 15px; /* Space between select and input */
  max-width: 120px;
}
.hbspt-form .hs-fieldtype-phonenumber .input input[type=tel].hs-input {
  width: 70% !important;
}

/* Responsive */
@media screen and (max-width: 992px) {
  .contacto .form-container-box {
    padding: 100px 50px 0;
    max-width: 650px;
    margin: 0 auto;
    flex-direction: column;
    background-position: left center;
  }
  .contacto .form-col {
    padding-left: 15px;
    width: 100%;
  }
  .contacto .form-col p {
    max-width: 100%;
  }
  .contacto .img-col {
    position: relative !important;
    width: 100%;
    height: auto;
    justify-content: center;
    margin-top: 40px;
  }
  .contacto .img-col .contact-person-img {
    max-height: 370px;
  }
}
@media screen and (max-width: 768px) {
  .contacto {
    padding: 50px 0;
  }
  .contacto .container-fluid {
    padding: 0 15px;
  }
  .contacto .form-container-box {
    background-image: url("../imagenes/movil/fondoContacto.png");
    background-size: cover;
    background-position: top center;
    border-radius: 20px;
    padding: 100px 40px 0; /* Padding bottom 0 for image flush */
    display: block; /* Stack naturally */
  }
  .contacto .form-col {
    padding: 0;
    text-align: left;
  }
  .contacto .form-col h2,
  .contacto .form-col p {
    text-align: left;
  }
  .contacto .img-col {
    position: relative !important;
    width: 100%;
    margin-top: 30px;
    justify-content: center;
  }
  .contacto .img-col .contact-person-img {
    max-height: 350px;
    margin: 0 auto;
  }
}
.datos {
  padding: 100px 0;
  /* Map Background */
  background-image: url("../imagenes/FondoDatos.png");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  background-color: #fff; /* Fallback for white left side */
}
.datos .container {
  max-width: 1440px;
}
.datos h6 {
  text-align: left;
  margin-bottom: 30px;
}
.datos h2 {
  text-align: left;
  margin-bottom: 50px;
}
.datos .card3 {
  padding-left: 10%;
  margin: 0 auto;
}
.datos .dato-card {
  border-radius: 20px;
  padding: 40px 40px;
  height: 100%; /* Equal height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  min-height: 260px; /* Ensure some height for look */
}
.datos .dato-card.card-red {
  background: #c02c31; /* #C02C31 based on user input, or map to variable */
  /* User said var(--Rojo, #C02C31), I'll check my variables.scss which has #c02c31 as tertiary-color or "Rojo" in general? I should just use the hex or variable. */
  background: #c02c31;
}
.datos .dato-card.card-blue {
  background: #215682; /* User provided hex */
}
.datos .dato-card.card-aqua {
  background: #05aca8; /* User provided hex */
}
.datos .dato-card .icon-hex {
  width: 80px;
  height: 80px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.datos .dato-card .icon-hex img {
  width: 60px; /* Icon size inside hex */
  height: auto;
}
.datos .dato-card .content-box h4 {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  text-align: left; /* Explicitly align left inside card */
}
.datos .dato-card .content-box p {
  color: #fff;
  font-size: 16px;
  margin-bottom: 0;
  text-align: left;
}

/* Responsive */
@media screen and (max-width: 992px) {
  .datos {
    padding: 100px 20px;
    background-size: cover; /* Cover usually better for smaller */
  }
  .datos .card3 {
    padding-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .datos {
    padding: 60px 15px;
    background-image: url("../imagenes/movil/FondoDatos.png");
    background-position: top center;
    background-size: 100% auto; /* Map at top? Or cover? */
    /* Mockup shows map background behind title? */
  }
  .datos h2 {
    margin-bottom: 30px;
  }
  .datos .col-lg-4.col-md-6.mb-4 {
    padding: 0;
  }
  .datos .dato-card {
    display: flex;
    flex-direction: column !important;
  }
  .datos .dato-card {
    margin-bottom: 20px;
    min-height: auto;
    flex-direction: row; /* Maybe stack icon/text or side-by-side? 
   Mockup 3 (Mobile) shows side-by-side? 
   Actually Mobile mockup crop 4 shows stacked cards.
   Let's keep Flex Column for cards themselves unless specifically asked.
   "Resultados que respaldan..." title on top.
   Cards stacked vertically. 
   Card layout: Icon Top, Text Bottom.
*/
    align-items: flex-start;
  }
  .datos .dato-card .icon-hex {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }
  .datos .dato-card .icon-hex img {
    width: 68px;
    height: 60px;
  }
  .datos .dato-card .content-box h4 {
    font-size: 24px;
  }
}
.galeria {
  padding: 150px 0;
  position: relative;
  background-color: #fff; /* Clean background */
  background: #fff;
}
.galeria .container-fluid {
  max-width: 1700px; /* Wider container for gallery */
}
.galeria h2 {
  text-align: center;
  margin-bottom: 20px;
}
.galeria .swiper {
  width: 100%;
  padding-bottom: 50px;
  padding-top: 20px;
  /* Center slides vertically */
}
.galeria .swiper .swiper-wrapper {
  align-items: center;
}
.galeria .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 600px; /* Fixed width for "auto" slides usually, or responsive */
  height: auto;
  opacity: 0.6; /* Inactive State */
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: scale(0.9); /* Slightly smaller */
}
.galeria .swiper-slide img {
  display: block;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.galeria .swiper-slide-active {
  opacity: 1; /* Active State */
  transform: scale(1);
}
.galeria .swiper-pagination-bullet {
  background: #0c2340;
  opacity: 0.5;
}
.galeria .swiper-pagination-bullet-active {
  opacity: 1;
  background: #05aca8;
}

/* Responsive */
@media screen and (max-width: 992px) {
  .galeria .swiper-slide {
    width: 70%; /* Responsive width */
  }
}
@media screen and (max-width: 768px) {
  .galeria {
    padding: 60px 0;
  }
  .galeria h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }
  .galeria .swiper-slide {
    width: 85%; /* Full width mobile */
    opacity: 1 !important; /* Usually on mobile we want full visibility of current, but side ones visible? */
    /* User asked for opacity effect. Let's keep it but ensure active is 1. */
    transform: scale(0.95);
  }
  .galeria .swiper-slide-active {
    transform: scale(1);
  }
}
.diferencial {
  background-color: #0c2340; /* Solid Blue Background */
  padding: 100px 0;
}
.diferencial .container-fluid {
  max-width: 1500px;
  padding: 0 40px;
}
.diferencial .img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.diferencial .img-col img {
  max-width: 100%;
  height: auto;
}
.diferencial .content-col {
  padding-left: 120px;
}
.diferencial .content-col h6 {
  text-align: left;
  margin-bottom: 30px !important;
}
.diferencial .content-col h2 {
  text-align: left;
  margin-bottom: 40px !important;
}
.diferencial .content-col p {
  margin-bottom: 20px;
}
.diferencial .content-col ul.list-diferencial {
  list-style: none;
}
.diferencial .content-col ul.list-diferencial li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
}
.diferencial .content-col ul.list-diferencial li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #fff; /* White bullet */
  font-weight: bold;
}

/* Responsive */
@media screen and (max-width: 992px) {
  .diferencial .container-fluid {
    max-width: 700px;
    margin: 0 auto;
  }
  .diferencial .content-col {
    padding-left: 15px;
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  .diferencial {
    padding: 100px 20px;
  }
  .diferencial .container-fluid {
    padding: 0 15px;
  }
  .diferencial .img-col {
    order: 1; /* Image first? Or Content first? Usually image first or stacked. 
   Let's keep natural order (Image then Content). */
    margin-bottom: 30px;
  }
  .diferencial .img-col img {
    max-width: 100%; /* Don't make it too huge on mobile */
  }
  .diferencial .content-col {
    order: 2;
    padding-left: 0;
    text-align: left;
    margin-top: 0;
  }
}
.video {
  padding: 150px 0;
  background-color: #0c2340; /* Blue Background */
}
.video .container {
  max-width: 1440px;
}
.video h2 {
  text-align: left;
}
.video .video-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Nice shadow */
}
.video .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsive */
@media (max-width: 991px) {
  .video h2 {
    padding-left: 60px;
  }
}
@media (max-width: 767px) {
  .video {
    padding: 60px 0;
  }
  .video h2 {
    text-align: left;
    margin-bottom: 30px;
    padding: 10px;
  }
  .video .video-wrapper {
    border-radius: 15px;
  }
}
.pasos {
  background-color: #0c2340; /* Blue Background */
  padding: 150px 0;
}
.pasos .container {
  max-width: 1280px;
}
.pasos h6 {
  margin-bottom: 30px !important;
}
.pasos h2 {
  margin-bottom: 50px;
}
.pasos .paso-card {
  border-radius: 15px;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Content aligned to bottom */
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
  /* Color Variations */
  /* Heights */
}
.pasos .paso-card:hover {
  transform: translateY(-5px);
}
.pasos .paso-card h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: none; /* User didn't specify uppercase */
}
.pasos .paso-card p {
  margin-bottom: 0;
}
.pasos .paso-card.bg-aqua {
  background-color: #05aca8;
  color: #fff;
}
.pasos .paso-card.bg-aqua h4,
.pasos .paso-card.bg-aqua p {
  color: #fff;
}
.pasos .paso-card.bg-white {
  background-color: #fff;
  color: #1a3a49; /* Dark text for white background */
}
.pasos .paso-card.bg-white h4 {
  color: #05aca8;
}
.pasos .paso-card.bg-white h4 span {
  color: #0c2340;
}
.pasos .paso-card.bg-white h4 {
  color: #05aca8;
}
.pasos .paso-card.bg-white h4 span {
  color: #0c2340;
}
.pasos .paso-card.bg-white p {
  color: #1e2334;
}
.pasos .paso-card.bg-grey {
  background-color: #e4e3e3;
  color: #1a3a49;
}
.pasos .paso-card.bg-grey h4 {
  color: #05aca8;
}
.pasos .paso-card.bg-grey h4 span {
  color: #0c2340;
}
.pasos .paso-card.bg-grey p {
  color: #1e2334;
}
.pasos .paso-card.bg-grey-light {
  /* Using same grey as requested or light variation? User said "Gris #E4E3E3" only. */
  background-color: #e4e3e3;
  color: #1a3a49;
}
.pasos .paso-card.bg-grey-light h4 {
  color: #05aca8;
}
.pasos .paso-card.bg-grey-light p {
  color: #1e2334;
}
.pasos .paso-card.h-large {
  height: 502px;
}
.pasos .paso-card.h-small {
  height: 347px;
}

/* Responsive */
@media (max-width: 991px) {
  .pasos {
    /* Mobile specific overrides */
    /* Heights */
  }
  .pasos .container {
    max-width: 700px;
  }
  .pasos .paso-card.h-large {
    height: 400px;
  }
  .pasos .paso-card.h-small {
    height: 300px;
  }
}
@media (max-width: 767px) {
  .pasos {
    padding: 100px 15px;
  }
  .pasos h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }
  .pasos h2 br {
    display: none;
  }
  .pasos .paso-card {
    min-height: 250px;
  }
}
.site-footer {
  position: relative;
  width: 100%;
  background-image: url("../imagenes/FondoFooter.jpg"); /* Falling back to existing JPG */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.site-footer .container {
  max-width: 1120px;
  margin: 0 auto;
  display: block;
}
.site-footer .footer-content {
  padding: 120px 0;
  background-color: rgba(12, 35, 64, 0.9); /* Blue overlay just in case image needs it, or strictly image */
  /* User image implies dark background. If image is already dark, overlay might not be needed or light. */
  background: transparent; /* Assuming image has the look */
}
.site-footer h2.footer-title {
  text-align: left;
}
.site-footer p.footer-text {
  text-align: left;
}
.site-footer .text-lg-left {
  padding-left: 150px;
}
.site-footer a.btn.btn-aqua.rounded-pill.px-5.py-3.font-weight-bold {
  margin: 0;
  display: block;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 30px !important;
}
@media (min-width: 992px) {
  .site-footer p.footer-text {
    margin: 0; /* Reset auto margin */
  }
}
.site-footer .footer-logo {
  display: none;
}
.site-footer .copyright-strip {
  background-color: #fff;
  color: #000;
  font-size: 14px;
  border-top: 1px solid #ddd;
}

@media (max-width: 767px) {
  .site-footer {
    padding: 50px 0 0;
    background-image: url("../imagenes/movil/FondoFooter.png"); /* User specified mobile path */
    text-align: center;
  }
  .site-footer .text-lg-left {
    padding-left: 0 !important;
  }
  .site-footer .footer-content {
    padding: 60px 20px;
  }
  .site-footer .footer-logo {
    max-width: 150px;
    margin-bottom: 20px;
  }
  .copyright-strip p {
    font-size: 14px;
  }
}/*# sourceMappingURL=styles.css.map */