/* Font  */
@font-face {
  font-family: "Numans";
  src: url("../font/Numans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Reddit Mono";
  src: url("../font/RedditMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "Reddit Mono";
  src: url("../font/RedditMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  text-rendering: optimizeLegibility;
}
/* Variables de Sass */
@keyframes pulse2 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
/* Header Styles - Tanaka */
header.menu {
  background-color: transparent;
  position: absolute; /* Overlay on banner */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
}
header.menu .container-fluid {
  max-width: 1520px; /* Wider container for menu */
  padding: 0 40px;
}

.navbar {
  padding: 0;
}

.logoD {
  max-width: 200px; /* Adjust logo size */
  height: auto;
  display: block;
}

.navbar-nav {
  width: 100%;
}

.nav-link {
  color: #fff !important;
  font-size: 13px;
  font-weight: 300; /* Light weight as per "premium" feel */
  text-transform: capitalize;
  letter-spacing: 1.5px;
  padding: 10px 15px !important;
  font-family: "Numans", sans-serif; /* Ensuring sleek font */
}
.nav-link:hover {
  opacity: 0.7;
}

.logo-container {
  padding: 0 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile Toggler */
.navbar-toggler {
  border: none;
  outline: none;
  padding: 0;
}
.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='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.logoM {
  max-height: 40px;
}

@media (max-width: 1200px) {
  .nav-link {
    font-size: 12px;
    padding: 10px 10px !important;
  }
}
@media (max-width: 991px) {
  header.menu {
    padding: 15px 0;
    background-color: transparent; /* Keep transparent */
  }
  header.menu .container-fluid {
    padding: 0 20px;
  }
  header.menu button.navbar-toggler {
    /* Standard toggler interaction */
    padding: 5px;
    z-index: 20;
  }
  /* Mobile Menu Dropdown */
  .navbar-collapse {
    background-color: #000; /* Dark background for dropdown */
    padding: 40px 20px;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Hide by default handled by Bootstrap collapse */
    /* Transition fix for smooth open */
  }
  .navbar-collapse.show {
    display: flex;
  }
  .nav-item {
    text-align: center;
    margin-bottom: 20px;
  }
  .nav-link {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
  }
  /* Center Mobile Logo */
  .navbar-brand.d-lg-none {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    margin: 0;
  }
  /* Keep Toggler on the Right */
  .navbar-toggler {
    margin-left: auto;
    z-index: 1001;
  }
}
html,
body {
  width: 100%;
  overflow-x: hidden;
  background-color: #000;
  font-family: "Jost", sans-serif;
}

a {
  text-decoration: none;
}

section {
  padding: 100px 15px;
}

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

h1 {
  color: var(--Beige, #f3ece0);
  text-align: right;
  font-family: Numans;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 52px; /* 108.333% */
  letter-spacing: -4.8px;
  text-transform: uppercase;
}

.banner h2 {
  color: var(--Beige, #f3ece0);
  font-family: Numans;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 42px; /* 105% */
  letter-spacing: -4px;
  text-transform: uppercase;
}

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

h2 {
  color: var(--Beige, #f3ece0);
  font-family: Numans;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 42px; /* 105% */
  letter-spacing: -4px;
  text-transform: uppercase;
}

h4 {
  color: var(--Beige, #f3ece0);
  font-family: Numans;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 110% */
  letter-spacing: -2px;
  text-transform: uppercase;
}

p {
  color: var(--Blanco, #fff);
  font-family: "Reddit Mono";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.btn,
.btnbr,
input.hs-button.primary.large {
  border-radius: 0;
  padding: 8px 30px;
  max-width: -moz-max-content;
  max-width: max-content;
  margin: 30px auto;
  border: 0;
  border: 1px solid var(--Blanco, #fff);
  color: var(--Blanco, #fff);
  font-family: Numans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.btn:hover,
.btnbr:hover,
input.hs-button.primary.large:hover {
  background-color: #fff;
  color: #0060ab;
  opacity: 0.7;
}

.hiddenD,
.hiddenl {
  display: none;
}

.hiddenS {
  display: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

@media screen and (max-width: 992px) {
  .hiddenl {
    display: block;
  }
  .hiddenD {
    display: block;
  }
  .hiddenS {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .hiddenD {
    display: block !important;
  }
  .hiddenM {
    display: none;
  }
  .hiddenS {
    display: block;
  }
  h1 {
    font-size: 35px;
    line-height: 38px; /* 108.333% */
  }
  .banner h2 {
    font-size: 32px;
    line-height: 34px; /* 105% */
    text-align: left;
  }
  .banner p {
    font-size: 18px;
    line-height: normal;
  }
  h2 {
    font-size: 28px;
    line-height: 32px; /* 105% */
  }
  h2 br {
    display: none;
  }
  h4 {
    font-size: 20px;
    line-height: 22px; /* 110% */
  }
  p {
    font-size: 16px;
    line-height: normal;
  }
  .btn,
  .btnbr,
  input.hs-button.primary.large {
    font-size: 16px;
    line-height: normal;
  }
}
/* Banner Styles - Tanaka */
.banner {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 110vh; /* Full screen height */
  background-image: url(../imagenes/fondoheader.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end; /* Mobile fallback if flex container */
  padding-bottom: 80px;
  /* Remove old pseudo elements if they exist in styles.css but were here */
}
.banner .row {
  height: 105%;
}
.banner h1 {
  /* Already defined in _general.scss */
  /* Overrides if specific to banner instance */
  margin-bottom: 0;
}
.banner h2 {
  /* Already defined in _general.scss */
  margin-bottom: 10px;
}
.banner .textbanner {
  text-align: left;
  padding-left: 150px;
}
.banner p {
  /* Already defined in _general.scss */
  max-width: 600px; /* Limit line length for readability */
}
.banner .btnbr {
  margin-top: 0;
  margin-bottom: 0;
  /* Style inherited from _general, ensure specific banner tweaks here */
}
.banner::before, .banner::after {
  display: none;
}

@media (max-width: 991px) {
  .banner {
    background-image: url(../imagenes/movil/fondoheader.jpg);
    background-position: center top;
    height: 130vh; /* Maintain full height on mobile */
  }
  .banner .container-fluid {
    max-width: 640px;
  }
  .banner .textbanner {
    padding-left: 0;
  }
  .banner .row {
    padding-bottom: 100px !important; /* Move content up slightly on mobile */
    align-content: flex-end;
  }
}
@media (max-width: 767px) {
  .banner h1 {
    margin-bottom: 20px;
  }
  .banner p {
    margin-bottom: 30px;
    font-size: 16px;
  }
  .banner .btnbr {
    width: 100%;
    max-width: 300px;
  }
  .banner {
    height: 120vh;
    padding: 20px;
    padding-bottom: 20px;
  }
  .banner .textbanner {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Nosotros Section Styles - Tanaka */
.nosotros {
  background-color: #000;
  padding: 0;
  position: relative;
  padding: 150px 0;
  /* Adjust padding for the content wrapper */
}
.nosotros .container {
  max-width: 1450px;
}
.nosotros .row {
  margin: 0;
}
.nosotros .object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 500px; /* Reduced from 100vh to avoid being too huge */
}
.nosotros h2 {
  /* Inherits from _general.scss */
  text-align: left;
  color: var(--Beige, #f3ece0);
  margin-bottom: 30px;
}
.nosotros img {
  max-width: 90%;
}
.nosotros .vertical-line {
  width: 1px;
  /* Custom dynamic height based on text, but min-height to show */
  background: #5b6920; /* #5B6920 */
  flex-shrink: 0;
  margin-right: 70px; /* Space between line and text */
  margin-left: 50px;
}
.nosotros p {
  color: #fff;
  text-align: left;
}
.nosotros .content-wrapper {
  max-width: 700px;
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

@media (max-width: 991px) {
  .nosotros .object-fit-cover {
    min-height: 300px; /* Reduced height on mobile */
    height: auto;
  }
  .nosotros .container {
    max-width: 680px;
  }
  .nosotros .content-wrapper {
    padding-left: 0 !important;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 0 !important;
  }
  .nosotros h2 {
    margin-bottom: 20px;
  }
  .nosotros .vertical-line {
    display: block; /* Show line on mobile */
    margin-right: 20px; /* Reduced margin */
    margin-left: 0;
    min-height: 50px; /* Ensure height */
  }
  .nosotros .d-flex {
    display: flex !important; /* Restore flex for line + text */
  }
}
@media (max-width: 767px) {
  .nosotros {
    padding: 100px 15px;
    padding-bottom: 50px;
  }
  .nosotros img {
    max-width: 100%;
  }
  .nosotros h2 {
    margin-bottom: 30px;
  }
}
/* Beneficios Section Styles - Tanaka */
.beneficios {
  background-color: #000; /* User confirmed black background behind transparent image */
  background-image: url(../imagenes/fondogradientesBeneficios.png);
  background-size: cover; /* Ensure it covers full width */
  background-position: center;
  background-repeat: no-repeat;
  padding: 180px 0 200px; /* Reduced from 100px to avoid "alargado" look */
  margin: 0;
  position: relative;
  width: 100%; /* Explicitly ensure full width */
  /* Ensure text colors from general or overrides */
}
.beneficios .container {
  max-width: 1450px;
}
.beneficios h2 {
  text-align: left;
  color: var(--Beige, #f3ece0);
  margin-bottom: 0;
}
.beneficios .cardbr {
  padding-right: 2%;
  padding-left: 0;
}
.beneficios h4 {
  color: var(--Beige, #f3ece0);
  text-align: left;
}
.beneficios .separator-line {
  width: 100%;
  max-width: 404px; /* Figma spec */
  height: 1px;
  background: var(--Beige, #f3ece0);
}
.beneficios p {
  color: #fff;
  text-align: left;
  max-width: 400px; /* Limit width for readability */
}
.beneficios .title-wrapper {
  /* Extra padding or alignment if needed */
}

@media (max-width: 991px) {
  .beneficios {
    background-color: #000;
    background-image: url(../imagenes/movil/fondogradientes.png);
    padding: 100px 0; /* Reduced padding */
    /* Swiper specific styles */
  }
  .beneficios .container {
    max-width: 680px;
  }
  .beneficios h2 {
    margin-bottom: 40px;
    padding: 0 20px;
  }
  .beneficios .swiper {
    padding: 0 20px 40px; /* Bottom padding for pagination */
    width: 100%;
  }
  .beneficios .swiper-slide {
    height: auto;
    /* Flex layout if needed, or default block */
  }
  .beneficios .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
  }
  .beneficios .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--Beige, #f3ece0);
  }
  .beneficios .separator-line {
    width: 100%; /* Full width on mobile card */
  }
  .beneficios p {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .beneficios {
    padding: 50px 15px 100px;
  }
  .beneficios h2 {
    font-size: 28px;
  }
  .beneficios .container {
    padding: 0;
  }
}
/* Contacto / Form Styles - Tanaka */
.contacto {
  background-color: #fff;
  padding: 0 !important; /* Override global section padding */
}
.contacto .bg-beige {
  background-color: var(--Beige, #f3ece0);
  min-height: 100vh; /* Ensure full height */
}
.contacto .contact-img {
  height: 100vh;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.contacto h2 {
  text-align: left;
  color: #5b6920; /* Green text */
}
.contacto .description-text {
  color: #333; /* Dark text for description */
  max-width: 500px;
}
.contacto .hs-input.hs-fieldtype-intl-phone {
  border-bottom: 0;
}

/* HubSpot Form Customization */
.hbspt-form {
  max-width: 600px; /* Limit form width */
  /* Inputs as lines */
  /* Submit Button */
  /* 2 Column Layout for Name/Lastname etc */
}
.hbspt-form .hs-form-field {
  margin-bottom: 10px; /* Compact margin */
}
.hbspt-form .hs-form-field label {
  display: block;
  color: #000;
  font-size: 11px; /* Compact font */
  font-weight: 600;
  margin-bottom: 2px;
}
.hbspt-form .hs-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #000; /* Black line */
  border-radius: 0;
  padding: 10px 0; /* Compact padding */
  color: #000;
  font-size: 13px;
  outline: none;
  box-shadow: none;
  min-height: 30px;
}
.hbspt-form .hs-input::-moz-placeholder {
  color: #000;
  opacity: 0.6;
}
.hbspt-form .hs-input::placeholder {
  color: #000;
  opacity: 0.6;
}
.hbspt-form .hs-input:focus {
  border-bottom-color: #5b6920;
}
.hbspt-form .hs-button.primary {
  background: transparent;
  border: 1px solid #5b6920 !important; /* Green border */
  color: #5b6920 !important;
  padding: 10px 50px !important; /* Compact button */
  margin-top: 15px; /* Compact margin */
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 0;
  width: auto; /* Or 100% if preferred */
  display: inline-block;
  font-family: "Numans", sans-serif; /* Match theme font if needed */
}
.hbspt-form .hs-button.primary:hover {
  background-color: #5b6920 !important;
  color: #fff !important;
}
.hbspt-form .fieldset {
  max-width: 100% !important;
}

@media (max-width: 991px) {
  .contacto .contact-img {
    height: 300px; /* Reduced height on mobile */
    min-height: auto;
  }
  .contacto .form-wrapper {
    max-width: 500px;
    margin: 0 auto;
  }
  .contacto .bg-beige {
    min-height: auto; /* Allow auto height on mobile */
    padding: 40px 0;
  }
  .contacto h2 {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .contacto .form-wrapper {
    max-width: 320px;
    margin: 0 auto;
  }
}
/* Datos Section Styles - Tanaka */
.datos {
  background-color: #000;
  padding: 150px 0;
  position: relative;
  overflow: hidden;
}
.datos .container {
  max-width: 1480px;
}
.datos h2 {
  text-align: left;
  color: var(--Beige, #f3ece0);
  margin-bottom: 30px; /* Matched with HTML mb-3 roughly */
  font-size: 36px;
}
.datos .dato-card {
  background-color: #1d0f14;
  padding: 30px 40px;
  width: 100%;
  max-width: 500px;
  /* Box shadow for "effect"? */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  margin-left: 2%;
  min-height: 130px;
  max-width: 410px;
}
.datos .dato-card.dato-card2 {
  margin-left: 20%;
}
.datos .number {
  font-family: Numans;
  font-size: 50px;
  color: #fff;
  line-height: 1;
  font-weight: 400;
  min-width: 60px; /* Ensure spacing */
  margin-right: 25px;
  min-width: 70px;
}
.datos .text {
  color: #fff;
  text-align: left;
}

@media (max-width: 991px) {
  .datos {
    padding: 100px 0;
  }
  .datos .container {
    max-width: 680px;
  }
  .datos h2 {
    text-align: center;
    margin-bottom: 30px;
  }
  .datos .img-fluid {
    margin-bottom: 40px;
  }
  .datos .dato-card {
    margin-left: 0 !important; /* Reset indentation */
    align-self: center !important; /* Reset diagonal alignment */
    padding: 30px 30px;
    max-width: 100%;
    margin-bottom: 20px;
    max-width: 500px;
    margin: 40px auto !important;
  }
  .datos .number {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .datos .dato-card {
    max-width: 320px;
  }
  .datos .number {
    margin-right: 11px;
  }
}
/* Galeria Section Styles - Tanaka */
.galeria {
  position: relative;
  height: 100vh; /* Full viewport height */
  width: 100%;
  overflow: hidden;
  padding: 0;
  /* Swiper Background */
  /* Content Overlay */
}
.galeria .mySwiperGaleria {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.galeria .mySwiperGaleria .swiper-slide {
  position: relative;
}
.galeria .mySwiperGaleria .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.galeria .mySwiperGaleria .swiper-slide .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.galeria .galeria-content {
  position: relative;
  z-index: 10;
  height: 100%;
  width: 94%;
  pointer-events: none; /* Let clicks pass through to swiper if needed, but buttons need pointer-events auto */
  /* Matching the reference image style: Vertical line + Text block? 
     Ref image: "Descubre los espacios..." indentation. 
     I'll add a border-left to the description wrapper if desired. */
}
.galeria .galeria-content .row {
  margin: 0;
}
.galeria .galeria-content .text-content,
.galeria .galeria-content .nav-buttons,
.galeria .galeria-content .galeria-prev,
.galeria .galeria-content .galeria-next {
  pointer-events: auto;
  cursor: pointer;
}
.galeria .galeria-content h2 {
  text-align: left;
}
.galeria .galeria-content .brbr {
  position: relative;
  margin-left: 150px;
}
.galeria .galeria-content .separator-line-vertical {
  width: 2px;
  height: 40px;
  background-color: var(--Beige, #f3ece0); /* Or Green/Gold depending on theme */
  margin: 0;
  display: block; /* Adjust if needed */
  /* Actually, looking at image, it might be a small line beside the text or just indentation. 
     User asked for "like this", image shows text left. I'll use a border-left on paragraph or similar if needed. 
     For now, simple div line. */
  border-left: 1px solid var(--Beige, #f3ece0);
  height: 50px;
  width: 0;
  margin-bottom: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  display: none; /* Hiding for now unless specifically requested style matches */
  padding-left: 20% !important;
}
.galeria .galeria-content .description {
  max-width: 500px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 20px;
  margin-top: 20px;
}
.galeria .galeria-content .nav-icon {
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.3s;
}
.galeria .galeria-content .nav-icon:hover {
  transform: scale(1.1);
}

@media (max-width: 991px) {
  .galeria {
    height: 100vh; /* Full height on mobile as per image */
  }
  .galeria .galeria-content {
    padding-bottom: 0; /* Remove padding to let flex align-items-end work */
  }
  .galeria .galeria-content .row {
    padding-bottom: 100px !important; /* Add padding to row instead to space text from bottom edge/buttons */
    align-items: flex-end !important; /* Ensure bottom alignment */
    display: flex;
    align-content: flex-end;
  }
  .galeria .galeria-content .brbr {
    margin-left: 10px;
  }
  .galeria .galeria-content h2 {
    text-align: left; /* Left align */
    margin-bottom: 20px;
    padding-left: 20px; /* Add some left padding for mobile gutter */
  }
  .galeria .galeria-content .text-content {
    text-align: left; /* Left align */
    padding-left: 0 !important;
    margin-bottom: 0;
  }
  .galeria .galeria-content .description {
    margin: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.5); /* Visible line */
    padding-left: 20px; /* Space from line */
    text-align: left;
    max-width: 85%; /* Slightly wider */
    margin-left: 20px; /* Align with title padding */
  }
  .galeria .galeria-content .nav-buttons {
    text-align: right; /* Align buttons to right */
    padding-right: 20px !important;
    position: absolute;
    bottom: 40px; /* Lower position */
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    pointer-events: none; /* Container pass-through */
    z-index: 20;
  }
  .galeria .galeria-content .nav-buttons .galeria-prev,
  .galeria .galeria-content .nav-buttons .galeria-next {
    pointer-events: auto; /* Buttons clickable */
    margin-left: 15px; /* Spacing between buttons */
    margin-right: 0 !important; /* Reset */
  }
}
@media (max-width: 767px) {
  .galeria .galeria-content {
    width: 100%;
  }
  .galeria .galeria-content h2 {
    padding-left: 0px;
  }
  .galeria .galeria-content .description {
    margin-left: 0px;
  }
  .galeria .galeria-content .nav-icon {
    width: 35px;
    height: 35px;
  }
}
/* Diferencial Section Styles - Tanaka */
.diferencial {
  padding: 200px 0;
  background-color: #000;
  /* Desktop Background */
  background-image: url(../imagenes/fondogradientesDiferencial.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.diferencial .container {
  max-width: 1450px;
  margin: 0 auto;
}
.diferencial .diferencial-img {
  max-width: 100%;
  height: auto;
  /* Optional: add box-shadow or specific styling if needed to match "floating" look */
}
.diferencial .diferencial-content {
  margin-left: 150px;
}
.diferencial .diferencial-content .description-intro {
  max-width: 500px;
}
.diferencial .diferencial-content .list-diferencial li {
  margin-bottom: 15px;
}
.diferencial .diferencial-content .closing-text {
  max-width: 500px;
}

@media (max-width: 991px) {
  .diferencial .container {
    max-width: 680px;
  }
  .diferencial .diferencial-content {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .diferencial {
    padding: 60px 15px;
    /* Mobile Background */
    background-image: url(../imagenes/movil/fondogradientes.png);
    background-position: top center;
  }
  .diferencial .row {
    flex-direction: column; /* Ensure image on top */
  }
  .diferencial .diferencial-img {
    margin-bottom: 40px;
    max-width: 80%; /* Adjust size for mobile */
  }
  .diferencial .diferencial-content {
    text-align: left; /* Keep text left aligned or center? Image suggests left aligned text block */
    padding-left: 0 !important;
  }
  .diferencial .diferencial-content h2 {
    margin-bottom: 30px;
  }
}
/* Video Section Styles - Tanaka */
.video {
  padding: 100px 0;
  background-color: #000;
}
.video h2 {
  color: #fff;
  margin-bottom: 30px;
}
.video .video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Optional constraint for better aesthetic */
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  /* box-shadow? */
}
.video iframe {
  width: 100%;
  height: 650px; /* Adjust height/ratio */
  display: block;
}

@media (max-width: 991px) {
  .video {
    padding: 60px 0;
  }
  .video h2 {
    padding: 0 15px;
    margin: 0;
  }
  .video iframe {
    height: 400px;
  }
}
/* Pasos Section Styles - Tanaka */
.pasos {
  padding: 360px 0 450px;
  background-color: #000; /* Fallback */
  /* Desktop Background */
  background-image: url(../imagenes/fondopasos.png);
  background-size: contain; /* User requested contain */
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  /* Ensure height is sufficient for background to show fully */
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.pasos .container {
  max-width: 1150px;
}
.pasos h2 {
  text-align: left;
}
.pasos .swiper-slide {
  /* Ensure slide takes up space appropriately */
  height: auto;
}
.pasos .justify-content-center {
  justify-content: center !important;
  gap: 20px;
}
.pasos .step-card {
  padding: 40px;
  border: 2px solid var(--Verde, #5b6920);
  background-color: rgba(20, 10, 10, 0.6); /* Slightly dark transparent bg */
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px); /* Optional: glass effect */
  width: 100%;
  max-width: 550px; /* Limit width */
  margin: 0 auto; /* Center in slide if needed */
}
.pasos .step-card .step-number {
  font-family: Numans;
  font-size: 50px;
  color: #fff;
  line-height: 1;
  margin-right: 30px;
  padding: 20px 0;
}
.pasos .step-card .step-content h4 {
  text-align: left;
}
.pasos .step-card .step-content p {
  text-align: left;
  font-weight: 300;
}
.pasos .nav-icon {
  width: 40px;
  height: 40px;
  transition: transform 0.2s;
}
.pasos .pasos-prev:hover .nav-icon,
.pasos .pasos-next:hover .nav-icon {
  transform: scale(1.1);
}

@media (max-width: 1540px) {
  .pasos .pasos {
    background-position: 50% 30%;
  }
}
@media (max-width: 991px) {
  .pasos {
    padding: 360px 0 130px;
    min-height: auto;
    background-image: url(../imagenes/movil/fondopasos.png);
    background-size: cover;
    background-position: top center;
  }
  .pasos .container {
    max-width: 580px;
  }
  .pasos h2 {
    margin-bottom: 40px;
  }
  .pasos .step-card {
    padding: 34px 30px 20px; /* Adjust padding */
    flex-direction: row !important; /* Force side-by-side */
    align-items: center; /* Vertically center */
    justify-content: center; /* Center content block relative to card */
    text-align: left;
    border: 2px solid var(--Verde, #5b6920); /* Ensure border visible */
    background-color: #140a0a; /* Ensure dark bg */
    min-height: 180px; /* Fixed height for uniformity */
    height: 100%; /* Fill slide height if swiper autoHeight is off */
    display: flex; /* Ensure flex is active */
  }
  .pasos .step-card .step-number {
    font-size: 50px; /* Keep large number */
    margin-bottom: 0;
    margin-right: 20px; /* Space between number and text */
    padding: 0;
    line-height: 1;
  }
  .pasos .step-card .step-content h4 {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
  }
  .pasos .step-card .step-content p {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
  }
  .pasos .pasos-nav {
    justify-content: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
@media (max-width: 767px) {
  .pasos {
    padding: 230px 15px 230px;
  }
  .pasos h2 {
    margin-bottom: 0;
  }
  .pasos .step-card {
    padding: 34px 15px 15px;
    min-height: auto;
  }
  .pasos .step-card .step-number {
    font-size: 30px;
    margin-right: 10px;
  }
}
/* Footer Styles - Tanaka */
.site-footer {
  background-color: #f3efe6; /* Beige background from image */
  position: relative;
  /* overflow: hidden; Removed to allow plate to overlap strip */
}
.site-footer .container {
  max-width: 1450px;
}
.site-footer .footer-top {
  padding-top: 80px;
  padding-bottom: 0; /* No bottom padding, plate sits on strip */
  position: relative;
  z-index: 10; /* Ensure top part acts as layer above strip */
}
.site-footer .footer-cta-title {
  font-family: Numans;
  color: #5b6920; /* Olive Green approx */
  font-size: 40px;
  letter-spacing: -1px;
  line-height: 1;
  position: relative;
  z-index: 2;
  text-align: left;
}
.site-footer .footer-cta-title span {
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  text-align: right;
  display: block;
}
.site-footer .plate-wrapper {
  position: relative;
  z-index: 20; /* Higher than strip */
  margin-bottom: -90px; /* Increase negative margin for better overlap */
}
.site-footer .brtext {
  padding-left: 150px;
}
.site-footer .footer-plate-img {
  max-width: 120%;
  width: 750px; /* Adjust size */
  height: auto;
  display: block;
  margin: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}
.site-footer .footer-info {
  position: relative;
  z-index: 5;
}
.site-footer .footer-logo {
  max-width: 250px;
  height: auto;
  margin: 0;
  display: block;
}
.site-footer .footer-description {
  font-family: "Reddit Mono";
  font-size: 14px;
  color: #000;
  line-height: 1.5;
  margin: 0; /* Center on mobile, left on desktop via flex */
  text-align: left;
  margin: 0 !important;
}
.site-footer .btn-outline-tanaka {
  border: 1px solid #4a5d23;
  color: #4a5d23;
  padding: 12px 30px;
  font-family: Numans;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 0;
  background: transparent;
  transition: all 0.3s ease;
  margin: 30px 0;
  display: block;
}
.site-footer .btn-outline-tanaka:hover {
  background-color: #4a5d23;
  color: #fff;
}
.site-footer .copyright-strip {
  background-color: #000;
  padding: 40px 0; /* Tall enough to accommodate the overlap visually if needed */
  position: relative;
  z-index: 1; /* Below the plate */
}
.site-footer .copyright-strip .copyright-text {
  font-family: "Reddit Mono";
  font-size: 12px;
  opacity: 0.8;
  letter-spacing: 1px;
  text-align: right;
}

@media (max-width: 991px) {
  .site-footer {
    margin-top: 40px;
    /* Layout adjustment: Plate might need to be below text on mobile? 
       User image shows desktop. Mobile usually differs. 
       Current HTML puts plate left (top) and content right (bottom). 
       We might want to swap visually if desired, but sticking to HTML order for now.
    */
  }
  .site-footer .container {
    max-width: 680px;
  }
  .site-footer .brtext {
    padding-left: 30px;
  }
  .site-footer .footer-cta-title {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 25px;
  }
  .site-footer .footer-cta-title span {
    font-size: 24px;
  }
  .site-footer .plate-wrapper {
    margin-bottom: -40px; /* Less overlap on mobile */
  }
  .site-footer .footer-plate-img {
    width: 100%;
  }
  .site-footer .footer-info {
    padding-bottom: 40px; /* Add space before strip on mobile layout if stacked */
    padding-top: 40px;
  }
  .site-footer .copyright-strip {
    padding: 20px 0;
    text-align: center !important;
  }
  .site-footer .footer-logo {
    max-width: 200px;
  }
}/*# sourceMappingURL=styles.css.map */