/* Font  */
@font-face {
  font-family: "Argentum Sans";
  src: url("../font/ArgentumSans-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Argentum Sans";
  src: url("../font/ArgentumSans-Medium.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 500;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Argentum Sans";
  src: url("../font/ArgentumSans-Bold.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Argentum Sans";
  src: url("../font/ArgentumSans-ExtraBold.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 800;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Lobster";
  src: url("../font/Lobster-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
/* Variables de Sass */
@keyframes pulse2 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
/* Menu Styles */
div.menu {
  position: relative;
  top: 0;
  width: 100%;
  background-color: transparent; /* White header bar */
  z-index: 9999;
  padding: 10px 0;
  /* Header Logo */
  /* Hamburger Icon */
  /* Full Screen Overlay Menu */
}
div.menu .container-fluid {
  padding: 0 30px;
}
div.menu .logoH {
  max-width: 120px;
  display: block;
}
div.menu .hamburger {
  display: inline-block;
  padding: 0;
  cursor: pointer;
  z-index: 10002; /* Above menu overlay */
  position: relative;
  float: right; /* Ensure it stays right */
}
div.menu .hamburger ._layer {
  background: #000; /* Black bars */
  width: 30px;
  height: 3px;
  margin: 5px 0;
  transition: all 0.3s ease;
}
div.menu .hamburger.is-active {
  position: fixed;
  right: 30px;
  top: 25px;
  /* Transform to X */
}
div.menu .hamburger.is-active ._layer {
  background: #000;
}
div.menu .hamburger.is-active .-top {
  transform: translateY(8px) rotate(45deg);
}
div.menu .hamburger.is-active .-mid {
  opacity: 0;
}
div.menu .hamburger.is-active .-bottom {
  transform: translateY(-8px) rotate(-45deg);
}
div.menu .menuppal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff; /* White Background Overlay */
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Logo inside Menu */
}
div.menu .menuppal.is_active {
  transform: translateY(0);
}
div.menu .menuppal .logo-menu {
  max-width: 100px; /* Smaller logo inside menu */
  margin-bottom: 40px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}
div.menu .menuppal ul {
  list-style: none;
  padding: 0;
  text-align: center;
}
div.menu .menuppal ul li {
  margin: 30px 0;
}
div.menu .menuppal ul li a {
  color: #c1332d; /* Red Links */
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: "Argentum Sans", sans-serif;
}
div.menu .menuppal ul li a:hover {
  color: #000;
  transform: scale(1.1);
  display: inline-block;
}

/* Response adjustments if needed */
@media screen and (max-width: 992px) {
  div.menu .container-fluid {
    padding: 0 15px;
  }
}
@media screen and (max-width: 767px) {
  div.menu .menuppal ul li a {
    font-size: 18px;
  }
}
html,
body {
  width: 100%;
  overflow-x: hidden !important;
}

section {
  padding: 100px 0;
}

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

p b {
  font-weight: 700;
}

h1 {
  color: var(--Blanco, #fff);
  font-family: "Argentum Sans";
  font-size: 60px;
  font-style: normal;
  font-weight: 800;
  line-height: 64px; /* 100% */
}
h1 .span1 {
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
}
h1 .span2 {
  font-size: 96px;
  font-weight: 800;
  line-height: 84px;
}

.banner p {
  color: var(--Blanco, #fff);
  font-family: "Argentum Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

h2 {
  color: var(--Rojo, #c1332d);
  font-family: "Argentum Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: uppercase;
}
h2 b {
  font-weight: 800;
}

h2.Grande {
  color: var(--Rojo, #c1332d);
  text-align: center;
  font-family: "Argentum Sans";
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 52px; /* 108.333% */
}
h2.Grande b {
  font-weight: 800;
}

h4 {
  color: var(--Blanco, #fff);
  font-family: "Argentum Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 28px; /* 116.667% */
}

p {
  color: var(--Negro, #000);
  font-family: "Argentum Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.btn,
.btnbr,
input.hs-button.primary.large,
a.btn.btnbr {
  padding: 16px 40px;
  border-radius: 83px;
  background: var(--Rosado, #fdece4);
  color: var(--Negro, #000);
  font-family: "Argentum Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  width: -moz-max-content;
  width: max-content;
}
.btn:hover,
.btnbr:hover,
input.hs-button.primary.large:hover,
a.btn.btnbr:hover {
  opacity: 0.5;
}

a {
  text-decoration: none;
}

.hiddenD {
  display: none;
}

.swiper {
  padding-bottom: 50px;
}

.swiper-button-next,
.swiper-button-prev {
  position: relative;
  width: auto;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

@media screen and (max-width: 992px) {
  .hiddenDL {
    display: block;
  }
  .hiddenD {
    display: none;
  }
  h1 {
    font-size: 35px;
    line-height: normal;
  }
  h1 span {
    display: block;
  }
  h1 .span1 {
    font-size: 20px;
  }
  h1 .span2 {
    font-size: 50px;
    line-height: normal;
  }
  h2 {
    font-size: 23px;
    line-height: 30px;
  }
  h2.Grande {
    text-align: center;
    font-size: 35px;
    line-height: 43px;
  }
}
@media screen and (max-width: 767px) {
  .hiddenD {
    display: block;
  }
  .hiddenM {
    display: none !important;
  }
  h1 {
    font-size: 34px;
  }
  h2 {
    font-size: 20px;
    line-height: 28px;
  }
  h2.Grande {
    text-align: center;
    font-size: 30px;
    line-height: 39px;
    padding-top: 60px;
  }
}
/* Banda Leno Marquee */
.logopass-container {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  padding: 0;
  margin: 0;
  line-height: 0;
}
.logopass-container .logopass-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: scrollBanda 10s linear infinite;
}
.logopass-container .logopass-track img {
  height: auto;
  max-width: none;
  display: block;
}

@keyframes scrollBanda {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}
.cenefa {
  display: none;
}

section.banner {
  background-image: url("../imagenes/FondoHeader.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  /* User says background has cenefa, so we might need less padding or different alignment */
  padding: 0px 0 0px;
  position: relative;
  background-color: #c1332d;
  overflow: hidden; /* To clip the huge burger if necessary */
  height: 100vh; /* Force full viewport height for impact */
  min-height: 940px;
  display: flex;
  align-items: center;
  overflow: visible;
  /* Left col image (Burger) */
}
section.banner .img-banner {
  width: 96%;
  max-width: none;
  display: block;
  margin-left: 0%;
  animation: float 6s ease-in-out infinite;
  position: relative;
  z-index: 999;
  top: -20px;
}
section.banner .cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: left;
  padding-left: 130px; /* Separation from the burger */
  z-index: 2;
}
section.banner h1 {
  text-align: left;
  margin-bottom: 30px;
}
section.banner p {
  text-align: left;
  color: #fff;
  margin-bottom: 30px;
  max-width: 80%;
}
section.banner .btnbr {
  margin: 0;
}
section.banner figure {
  margin: 0;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@media screen and (max-width: 1540px) {
  section.banner .cont {
    padding-left: 40px;
  }
}
@media screen and (max-width: 992px) {
  section.banner {
    padding: 0px 0 0px;
    height: 70vh;
    min-height: 600px;
  }
  section.banner .cont {
    padding-left: 0px;
  }
  section.banner p {
    max-width: 90%;
  }
}
@media screen and (max-width: 767px) {
  section.banner {
    background-image: url(../imagenes/movil/header.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0px 15px 0px;
    height: 100vh;
    min-height: 1100px;
  }
  section.banner .img-banner {
    width: 100%;
    max-width: 80%;
    margin: 0 auto 30px;
  }
  section.banner .img-banner {
    width: 130%;
    max-width: 100%;
    margin: 0;
    margin-left: -20px;
    width: 360px;
    margin-top: -170px;
  }
}
.bg2 {
  background-image: url("../imagenes/back1.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

section.nosotros {
  padding: 100px 0;
  position: relative;
}
section.nosotros .container {
  max-width: 1450px;
}
section.nosotros img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
section.nosotros .cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: flex-start;
  text-align: left;
}
section.nosotros h2 {
  margin-bottom: 30px;
  color: #c1332d; /* Ensure Red color */
}
section.nosotros p {
  margin-bottom: 20px;
  max-width: 80%;
}

@media screen and (max-width: 992px) {
  section.nosotros {
    padding: 150px 15px 100px;
  }
  section.nosotros .cont {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  section.nosotros {
    padding: 150px 15px 80px;
  }
  section.nosotros img {
    max-width: 100%;
    margin-bottom: 30px;
  }
  section.nosotros p {
    max-width: 100%;
  }
  .bg2 {
    background-image: url("../imagenes/movil/back1.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
section.beneficios {
  padding: 100px 15px 200px;
  background-color: #fff;
}
section.beneficios .container {
  max-width: 1700px;
}
section.beneficios h2 {
  text-align: center;
  margin-bottom: 60px;
  color: #c1332d;
  text-transform: none;
}
section.beneficios h2 b {
  font-weight: 800;
}
section.beneficios .cardbene {
  background-color: #c1332d; /* Red background */
  height: 100%;
  display: flex;
  flex-direction: column;
}
section.beneficios .cardbene figure {
  margin: 0;
  width: 100%;
  overflow: hidden;
}
section.beneficios .cardbene figure img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
section.beneficios .cardbene .txt {
  padding: 40px;
  color: #fff;
  flex-grow: 1;
}
section.beneficios .cardbene .txt h4 {
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 15px;
  line-height: 1.2;
}
section.beneficios .cardbene .txt p {
  color: #fff;
  line-height: normal;
  margin: 0;
}

@media screen and (max-width: 992px) {
  section.beneficios h2 {
    font-size: 32px !important;
    line-height: 40px !important;
  }
  section.beneficios .cardbenecol {
    margin-bottom: 20px;
  }
  section.beneficios .cardbene {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  section.beneficios {
    padding: 50px 15px;
  }
  section.beneficios h2 {
    font-size: 32px !important;
  }
  section.beneficios .cardbene .txt {
    padding: 30px;
    color: #fff;
    flex-grow: 1;
  }
}
section.form {
  padding: 170px 0;
  background-image: url("../imagenes/FondoContacto.jpg"); /* New background */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  /* Input styling - Minimal layout */
  /* Submit button custom styling */
  /* HubSpot Overrides for layout */
  /* Layout adjustments for HubSpot columns if possible via CSS */
}
section.form h2 {
  text-align: center;
  margin-bottom: 20px;
}
section.form p {
  text-align: center;
  margin-bottom: 50px;
}
section.form .contForm {
  max-width: 560px;
  margin: 0 auto;
  /* Background is already in section */
}
section.form form {
  max-width: 900px;
  padding: 0;
  margin: 0 auto;
}
section.form form .hs-input {
  width: 100% !important;
}
section.form button,
section.form input,
section.form optgroup,
section.form select,
section.form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000;
  padding: 5px 0 8px;
  border-radius: 0;
  color: #000;
  font-family: "Argentum Sans", sans-serif;
  font-size: 16px;
}
section.form button::-moz-placeholder, section.form input::-moz-placeholder, section.form optgroup::-moz-placeholder, section.form select::-moz-placeholder, section.form textarea::-moz-placeholder {
  color: #666;
}
section.form button::placeholder,
section.form input::placeholder,
section.form optgroup::placeholder,
section.form select::placeholder,
section.form textarea::placeholder {
  color: #666;
}
section.form .hs-form-field {
  margin-bottom: 30px;
}
section.form input.hs-button.primary.large {
  margin: 40px auto 0 !important;
  padding: 12px 50px;
  display: block;
  border-radius: 83px; /* Rounded button like others */
  background: #c1332d !important; /* Forces Red background */
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 800;
  border: none;
  width: auto !important; /* Let it size to content */
}
section.form input.hs-button.primary.large:hover {
  opacity: 0.8;
}
section.form .hs-form-field > label {
  display: none; /* Hide labels if using placeholders, or style them? Design shows "Nombre*" as text */
}
section.form fieldset {
  max-width: 100%;
}
section.form .hs-firstname,
section.form .hs-lastname {
  width: 48% !important;
  display: inline-block;
  box-sizing: border-box;
}
section.form .hs-lastname {
  margin-left: 4%;
}

@media screen and (max-width: 992px) {
  section.form {
    padding: 100px 15px;
  }
}
@media screen and (max-width: 767px) {
  section.form {
    background-image: url(../imagenes/movil/contacto.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 150px 15px;
  }
  section.form .hs-firstname,
  section.form .hs-lastname {
    width: 100% !important;
    margin-left: 0;
  }
}
section.datos {
  background-color: #c1332d; /* Red background */
  padding: 150px 0;
}
section.datos .container {
  max-width: 1200px;
}
section.datos .row {
  align-items: center;
}
section.datos .cont {
  color: #fff;
}
section.datos .cont h6 {
  color: #fff;
}
section.datos .cont h2 {
  color: #fff;
  text-align: left;
  margin-bottom: 50px;
  text-transform: uppercase;
}
section.datos .cont .item-dato {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  max-width: 400px;
}
section.datos .cont .item-dato img {
  width: 100px;
  margin-right: 30px;
  flex-shrink: 0;
}
section.datos .cont .item-dato .txt {
  text-align: left;
}
section.datos .cont .item-dato .txt h4 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 5px;
  text-transform: uppercase;
}
section.datos .cont .item-dato .txt p {
  color: #fff;
  margin: 0;
  line-height: normal;
}
section.datos .main-img {
  margin: 0;
  height: 100%;
}
section.datos .main-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.linea1 figure {
  margin: 0 0 -2px;
}

@media screen and (max-width: 992px) {
  section.datos {
    padding: 90px 0;
  }
  section.datos .cont {
    padding: 50px 15px;
    text-align: left;
  }
  section.datos .cont h2 {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px) {
  section.datos {
    padding: 100px 15px;
  }
  section.datos h2 {
    font-size: 22px !important;
  }
  section.datos h2 br {
    display: none;
  }
  section.datos .col-md-6 {
    order: 1; /* Text first on mobile? Or Image? Design says nothing, usually content first */
  }
  section.datos .p-0 {
    /* Image column */
  }
  section.datos .cont {
    padding: 50px 15px;
  }
  section.datos .cont .item-dato .txt h4 {
    font-size: 19px;
  }
}
section.galeria {
  padding: 0;
  position: relative;
  width: 100%;
}
section.galeria .gallery-container {
  position: relative;
  width: 100%;
}
section.galeria .text-overlay {
  position: absolute;
  bottom: 160px;
  left: 5%;
  z-index: 10;
  pointer-events: none; /* Let clicks pass through to slider if needed */
}
section.galeria .text-overlay h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Improve readability */
  margin: 0;
}
section.galeria .mySwiper3 {
  width: 100%;
  height: auto;
}
section.galeria .mySwiper3 .swiper-slide {
  width: 100%;
}
section.galeria .mySwiper3 .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  /* Max height restriction if user wants it confined? 
     Design shows full strip. Let's assume auto height based on image aspect ratio?
     Or fixed height to ensure consistency? 
     Let's try fixed height like a hero slider */
  max-height: 600px;
}
section.galeria .mySwiper3 .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}
section.galeria .mySwiper3 .swiper-pagination-bullet-active {
  background: #c1332d;
  opacity: 1;
}
section.galeria .swiper {
  padding-bottom: 0;
}
section.galeria .swiper-pagination {
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  left: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  bottom: auto; /* Reset default bottom positioning */
}
section.galeria .swiper-pagination .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
  width: 12px;
  height: 12px;
  margin: 5px 0 !important; /* Force margin overrides */
}
section.galeria .swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
  transform: scale(1.2);
}

/* Closing section.galeria */
@media screen and (max-width: 992px) {
  section.galeria .text-overlay {
    bottom: 50px;
  }
  section.galeria .text-overlay h2 {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px) {
  section.galeria .text-overlay {
    bottom: 30px;
  }
  section.galeria .text-overlay h2 {
    font-size: 24px;
  }
  section.galeria .mySwiper3 .swiper-slide img {
    max-height: 400px;
  }
}
section.distintivo {
  padding: 100px 0;
}
section.distintivo .container {
  /* max-width is handled by bootstrap usually, removing custom restriction or keeping it large */
  max-width: 1450px;
}
section.distintivo .row {
  align-items: center;
}
section.distintivo img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
section.distintivo .cont {
  padding-right: 5%; /* Spacing between text and image */
}
section.distintivo .cont h2 {
  color: #c1332d; /* Red color based on design */
  margin-bottom: 30px;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
}
section.distintivo .cont p {
  color: #000; /* Dark text */
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: left;
  max-width: 90%;
}
section.distintivo .cont p b {
  font-weight: 700;
}

@media screen and (max-width: 992px) {
  section.distintivo {
    padding: 100px 15px;
  }
  section.distintivo h2 {
    font-size: 24px !important;
    line-height: 28px;
  }
  section.distintivo img {
    margin-top: 40px;
  }
}
section.video {
  padding: 150px 0;
  min-height: 800px;
  background-image: url("../imagenes/FondoVideo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Video Placeholder Styles */
}
section.video .video-content {
  text-align: center;
}
section.video .video-content h2 {
  color: var(--Rojo, #c1332d);
  text-align: center;
  font-family: "Argentum Sans";
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 52px; /* 108.333% */
  text-transform: uppercase;
  margin-bottom: 60px;
}
section.video .video-content h2 b {
  font-weight: 800;
}
section.video .video-placeholder {
  width: 100%;
  max-width: 1120px;
  height: 700px;
  background-color: #000;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* Play Button (Pure CSS Triangle) */
}
section.video .video-placeholder .play-button {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 40px solid #fff;
  transition: transform 0.3s ease;
}
section.video .video-placeholder:hover .play-button {
  transform: scale(1.1);
  border-left-color: #c1332d;
}

@media screen and (max-width: 992px) {
  section.video {
    padding: 60px 15px;
    min-height: auto;
  }
  section.video .video-placeholder {
    width: 100%;
    height: 300px;
  }
  section.video h2 {
    font-size: 28px !important;
  }
}
@media screen and (max-width: 992px) {
  section.video {
    padding: 100px 15px 150px;
    min-height: auto;
  }
  section.video h2 {
    font-size: 28px !important;
    line-height: 32px !important;
  }
}
section.pasos {
  padding: 100px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
  background-image: url(../imagenes/pasos.png);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: 87% 0;
  border-radius: 20px;
  margin: 60px 0;
  /* Slider Container */
  /* Card Styles matching Screenshot (White/Glass look) */
  /* Background Image on Right handled by pseudo-element */
  /* Navigation Buttons - Red Circles */
}
section.pasos .container-fluid {
  padding: 0;
}
section.pasos h2 {
  font-style: normal;
  line-height: normal;
  margin-bottom: 40px;
  text-transform: uppercase;
  padding-left: 25%;
  margin-bottom: 70px;
}
section.pasos .row {
  align-items: center;
  margin-right: 0;
}
section.pasos .swiper {
  padding-bottom: 50px;
  padding-left: 20px; /* Offset for aesthetic */
}
section.pasos .swiper-slide {
  height: auto; /* Allow auto height */
}
section.pasos .cardPasos {
  border-radius: 0; /* Square/Rectangular cards */
  background: rgba(255, 255, 255, 0.9); /* White glass */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  padding: 30px;
  min-height: 350px;
  position: relative;
  border-left: 1px solid #c1332d; /* Separator line suggestion */
  border-right: 1px solid #c1332d; /* Separator line suggestion */
  /* Number Styling */
}
section.pasos .cardPasos span.number,
section.pasos .cardPasos span {
  /* Targeting span or span.number */
  color: var(--Rojo, #c1332d);
  font-family: Lobster;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 104.167% */
  margin-bottom: 30px;
  display: block;
}
section.pasos .cardPasos .conte {
  display: block;
  height: auto;
  padding: 0;
}
section.pasos .cardPasos h4 {
  color: var(--negro, #000);
  font-family: "Argentum Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}
section.pasos .cardPasos p {
  color: #333; /* Dark text */
  font-family: "Argentum Sans";
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
section.pasos .bntslider {
  position: static; /* Natural flow in the left column */
  margin-top: 40px;
  margin-left: 13%;
  z-index: 10;
  display: flex;
  gap: 15px;
}

@media screen and (max-width: 992px) {
  section.pasos {
    padding-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 300px;
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
  }
  section.pasos .container-fluid {
    padding: 20px 2px 130px;
  }
  section.pasos .cont {
    padding-left: 7%;
  }
  section.pasos h2 {
    margin-bottom: 50px;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  section.pasos {
    padding-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 100px;
    background-position: center 80%;
    background-size: 90%;
    background-repeat: no-repeat;
  }
  h2 {
    font-size: 24px !important;
    line-height: 28px !important;
    padding-left: 17px !important;
  }
  section.pasos .swiper {
    padding-bottom: 50px;
    padding-left: 0px;
    max-width: 85%;
  }
}
.bannerFooter {
  padding: 120px 0;
  background-image: url("../imagenes/FondoFooter.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
  display: flex;
  align-items: center;
}
.bannerFooter .content-footer {
  text-align: left; /* Text aligns left based on screenshot layout (although centered commonly, image suggests left block) - Actually screenshot shows text on LEFT and Logo on RIGHT. */
  /* But looking closer at recent screenshot, text is Left-Aligned relative to the container but visually it looks somewhat centered vertically. */
}
.bannerFooter .content-footer h2 {
  color: #fff; /* White text on red bg */
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 20px;
  text-align: left;
}
.bannerFooter .content-footer p {
  color: #fff;
  font-size: 16px;
  margin-bottom: 30px;
  text-align: left;
  font-family: "Argentum Sans", sans-serif;
}
.bannerFooter .content-footer a.btnbr {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 800;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  background-image: none; /* Resetting previous gradient */
}
.bannerFooter .content-footer a.btnbr:hover {
  background-color: #333;
  color: #fff;
}

footer {
  background-color: #fff; /* White strip as per screenshot */
  padding: 20px 0;
}
footer p {
  background-color: transparent;
  text-align: center;
  color: #000; /* Black text */
  margin: 0;
  font-family: "Argentum Sans", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

@media screen and (max-width: 992px) {
  .bannerFooter {
    padding: 100px 15px 230px;
    background-image: url(../imagenes/movil/footer.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: center left;
    /* Adjust background if needed on mobile to show logo or just cover */
    background-position: center left;
  }
  .bannerFooter .content-footer h2,
  .bannerFooter .content-footer p {
    text-align: left;
    padding: 0 !important;
  }
}/*# sourceMappingURL=styles.css.map */