/* Global: images never exceed container */
img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.main_content-row-0-force-full-width-section > .row-fluid {padding: 0px !important;}
body {
  background: linear-gradient(
    90deg,
    rgba(225, 222, 255, 0.1),
    rgba(225, 222, 255, 0.04)
  );
}
/* Hero Section */
.hero-section-home {
 
  padding-top: 2.5rem;
    padding-right: 5rem;
    padding-bottom: 3rem;
    padding-left: 5rem;
  display: flex;
  justify-content: center;

}

.hero-container {
  max-width: 1300px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 4rem !important;
  width: 100% !important;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

h1.hero-title,
.hero-title {
  font-size: 2.75rem !important;
  line-height: 1.2 !important;
  color: var(--core-black) !important;
  font-family: "Familjen Grotesk", sans-serif !important;
}
h1.hero-title.headline,
.hero-title.headline {
  color: var(--dark-purple) !important;
  font-weight: 400 !important;
}
.hero-paragraph {
  font-size: 1.1rem !important;
  color: var(--core-black) !important;
  line-height: 1.6 !important;
  font-family: "Inter", sans-serif !important;
}

.hero-ctas {
  display: flex;
  gap: 0.5rem;
  
}

.btn-primary {
  padding: 0.6rem 1.75rem;
  border-radius: 8px;
  background-color: var(--mora-blue);
  color: white;
  font-family: "inter", sans-serif;
font-weight: 550;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--dark-purple);
}

.btn-secondary {
font-weight: 550;
  padding: 0.6rem 1.75rem;
  border-radius: 8px;
  border: 2px solid var(--mora-blue);
  color: var(--mora-blue);
  font-family: "inter", sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--mora-blue);
  color: white;
}

/* Image Placeholder */
.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-placeholder {
  width: 100%;
  max-width: 500px;
  height: 400px;
  background-color: var(--off-white);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-grey);
  font-family: "Helvetica Now Display", sans-serif;
}
.mora-blue {
  color: var(--mora-blue);
}
.hero-list {

  list-style-type: disc;
  padding-left: 1.5rem;
  font-family: "inter", sans-serif;
  color: var(--core-black);
}

.hero-list li {
font-size: 1rem;

}
.hero-description {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-content {
    align-items: center;
  }
  .hero-image {
    flex: 1;
    display: none !important;
    justify-content: center;
    align-items: center;
  }
  .hero-section-home {
    padding: 0.5rem 16px 2rem !important;
  }
  .hero-container {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  .image-module {
    display: none !important;
  }
  .hero-title {
    text-wrap: balance;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
  }
  .hero-paragraph {
    font-size: 18px !important;
  }
  .hero-ctas {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Client Logo Section */
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.client-logo-section {

  
  display: flex;
  justify-content: center;
}

.client-logo-card {

  border-radius: 0rem 0rem 1rem 1rem;
  padding: 1.5rem 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  

  /
}

.client-logo-title {
  font-size: 1rem !important;
  opacity: 0.3;
  font-weight: 600 !important;
  text-align: center !important;
  color: var(--core-black) !important;
  font-family: "Inter", sans-serif !important;
}

/* Grid: 6 columns on desktop */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.logo-item img {
  max-height: 60px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.logo-item img:hover {
  opacity: 1;
  filter: none;
}

/* Carrusel para mobile */
.logo-carousel {
  display: none;
  overflow: hidden;
  width: 100%;
  padding: 0rem 0;
}

.logo-carousel-track {
  display: inline-flex;
  animation: scrollLogos 25s linear infinite;
  gap: 2rem;
}

.logo-carousel-track img {
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.logo-carousel-track img:hover {
  opacity: 1;
  filter: none;
}

/* Animaciones */
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Tablets: 4 columnas */
@media (max-width: 1024px) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* Mobile: carrusel y ajustes */
@media (max-width: 600px) {
  .client-logo-section {

    padding: 0rem;
  }

  .logo-grid-section {
    display: none;
  }

  .logo-carousel {
    display: block;
  }

  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .logo-item img {
    max-height: 48px;
  }

  .client-logo-card {
    padding: 1rem 1.25rem;
  }

  .client-logo-title {
    font-size: 0.875rem;
  }
}

/*------------------------------------*/



/* TAB SECTION GENERAL STYLES */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  font-family: "STIX Two Text", serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  font-style: italic !important;
  color: var(--mora-blue) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.cta-link:hover {
  color: var(--dark-purple);
}

.cta-link .chevron {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.cta-link:hover .chevron {
  transform: translateX(1px);
}
.dnd-section h2 {
  font-family: "Familjen Grotesk", sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--dark-purple) !important;
  margin-bottom: 2rem !important;
  line-height: 1.2 !important;
}

h2.section-title,
.section-title {
  margin-top: 8rem !important;
  font-family: "Familjen Grotesk", sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--dark-purple) !important;
  margin-bottom: 2rem !important;
  line-height: 1.2 !important;
}
.crehana-content {
width: 100%
 opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: none;
}

.crehana-content.active {
 display: block;
  opacity: 1;
}

.tabs-container {
overflow: visible;
    margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 0;
  background: transparent;
  
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-bottom: none;
}

.tab-button {
background-color: #F4f4F4;
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 18px 28px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--core-black);
  cursor: pointer;
  transition: all 0.3s ease;
 
  position: relative;
}

.tab-button.active {
background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--strategic-purple);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
  z-index: 2;
}








/* BOX */
.crehana-box {
   border-radius: 0px 20px 20px 20px;
  padding: 3rem 2rem;
  background-color: #ffffff;
/* Sombra más marcada */
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.07);
width: 100%;
  max-width: 1200px; /* o el valor que uses como layout estándar */
  transition: background-color 0.3s ease;
}


/* HEADER */
.crehana-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.crehana-header-left {
  flex: 1;
}

.crehana-header-right {
padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.crehana-header-title {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--highlight-gradient);
  font-size:1rem;
  font-weight: 500;
  font-family: "STIX Two Text", serif;
  font-style: italic;
  color: var(--core-black);
  text-align: center;
}


.crehana-custom-title {
  font-family: 'Familjen Grotesk', sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  text-align: left !important;
  line-height: 1.3 !important;
  color: var(--dark-purple) !important;
}

.crehana-custom-description {
  color: var(--core-black) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 160% !important;
  text-wrap: balance;
}

/* FEATURES */
.crehana-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
 
}

.feature-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-icon-small {
min-width: 24px;
  max-height: 24px;
  max-width: 24px;
  max-height: 24px;
}

.feature-title-line {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--core-black) !important;
  opacity: 75%;
  line-height: 1.5 !important;
}

.crehana-features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.feature-box {
flex: 1 0 0;
  align-self: stretch;
  padding: 24px;
  border-radius: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: left;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);

}

.feature-icon {
  max-width: 50px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.crehana-feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--core-black);
  text-align: left;
  width: 100%;
}

.crehana-feature-description {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  color: var(--core-black);
  text-wrap: balance;
}

/* MOBILE STYLES */
@media only screen and (max-width: 768px) {

.crehana-header-right {
padding: 16px;
 
}
  .tabs-container {
padding-left: 16px;
padding-right: 16px;
overflow: visible;
    background: none;
    box-shadow: none;
    border-radius: 0;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .tab-button {
    background-color: #fff;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 100%;
    text-align: left;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
  }

  .tab-button::after {
    content: '+';
    font-size: 20px;
    color: var(--core-black);
    position: absolute;
    right: 20px;
  }

  .tab-button.active::after {
margin-bottom:0px !important;
    content: '-';
  }
.tab-button.active {
margin-bottom:0px !important;
    content: '-';
  }
  .crehana-content {
    display: none;
    padding: 0px;
    margin-bottom: 10px;
    opacity: 1;
  }

  .crehana-content.active {
    display: block;
  }

  .crehana-box {
width: 100%;
    background-color: transparent;
    border: none;
    padding: 0;
  }

  .crehana-custom-title {
    font-size: 24px;
  }

  .crehana-custom-description {
    font-size: 16px;
  }

  .crehana-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .crehana-header-left {
    display: none;
  }

  .progress-box {
    display: none;
  }

  .crehana-header-title {
    font-size: 12px;
    text-align: left;
  }

  .crehana-features {
    flex-direction: column;
    gap: 15px;
  }

  .feature-box {
    padding: 24px;
    gap: 6px;
  }

  .feature-icon {
    max-width: 40px;
  }

  .crehana-feature-title {
    font-size: 20px;
  }

  .crehana-feature-description {
    font-size: 16px;
    color: #555;
  }

  .cta-link {
    font-size: 16px !important;
  }
}

/*hana-ai-section*/
.hana-ai-section {
  padding: 40px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 10rem auto;

  
}

@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

.hana-ai-header {
  text-align: center;
  margin-bottom: 2rem;
}

h2.hana-ai-title,
.hana-ai-title {
  font-family: "Familjen Grotesk", sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  color: var(--core-black) !important;
  line-height: 1.2 !important;
}

.hana-ai-subtitle {
  text-align: center !important;
  font-family: "Inter", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--dark-purple) !important;
  line-height: 1.6 !important;
  margin-top: 0.7rem !important;
}

.hana-ai-features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 100% !important;
  overflow: hidden !important;
}

.hana-ai-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  max-height: 380px;
  max-width: 100% !important;
  overflow: hidden !important;
}

.hana-ai-card {
  gap: 1rem;
  flex: 1;
  border: 0.2px solid #dbdbdb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden !important;
  min-height: 0;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.hana-ai-card.metricas {
  background: var(--off-white);
}


.hana-ai-card.retroalimentacion {
    background: var(--off-white);
}


.hana-ai-card.hana-data {
    background: var(--off-white);
}


.hana-ai-card.monitoreo {
  background: var(--off-white);
  border: 1px solid transparent;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(270deg, var(--invisible-tech), transparent, var(--mora-blue));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 200% 200%;
  animation: borderFlow 3s linear infinite alternate;
}

@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.hana-ai-card-title {
  font-family: "Familjen Grotesk", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
}

.hana-ai-card-description {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--core-black) !important;
  line-height: 160% !important;
}
.hana-ai-card-description-resources {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--core-black) !important;
  line-height: 160% !important;
}

.hana-ai-card-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  border-radius: 8px;
  object-fit: cover !important;
  object-position: top !important;
  margin: auto 0 0 0;
  flex-shrink: 0;
  display: block;
}

/* Estilo final de sección con fonts diferenciadas */
.succes-custom-description{
  margin: 1rem 0px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #050823 !important;
  line-height: 150% !important;
}
.hana-ai-section-end {
  justify-self: flex-end;
    text-align: center;
    margin-top: 1.5rem;
    font-size: 1rem;
    color: var(--dark-purple);
}

.hana-ai-section-end span.inter {
  font-family: "Inter", sans-serif;
}

.stix-highlight {
  font-family: "STIX Two Text", serif;
  font-style: italic;
  background: var(--highlight-gradient-right);
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  display: inline-block;
  margin-left: 0.3rem;
}

@media (max-width: 768px) {
.stix-highlight {
  font-size:16px;
}
.hana-ai-section {
  margin-left:12px;
  margin-right:12px;
  padding: 12px;
  overflow: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  }
  .hana-ai-title {

    font-size: 1.75rem;
margin-bottom: 1rem !important;
  }

  .hana-ai-subtitle {

        text-wrap: balance;
    font-size: 16px;
  }

  .hana-ai-card {
    padding: 1.25rem;
    height: auto;
  }

  .hana-ai-row {
    flex-direction: column !important;
    max-height: none !important;
  }

  /* Override inline flex-basis on cards */
  .hana-ai-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hana-ai-card-image {
    display: none !important;
  }

  .hana-ai-card-title {
text-align: center !important;
    font-size: 1.125rem;
  }

  .hana-ai-card-description {
margin-bottom: 8px;
text-align: center !important;
    font-size: 0.95rem;
  }

  .hana-ai-section-end {
    font-size: 1.125rem;
  }
}

/* Seccion Historias de exito */
.historiasDeExitoTittle{
  font-size: 1.3rem !important;
  font-family: "Familjen Grotesk", sans-serif !important;
  font-weight: 500 !important;
}
.company-logo{
    border-radius: 1rem;

    width: 364px;
    height: 446px;
}
.success-stories-section {
max-width: 1200px;
margin: 10rem auto;
    position: relative;
  }

  .title-container {
    text-align: center;
    margin-bottom: 20px;
  }

 h2.success-title,
 .success-title {
    text-wrap: balance;
    font-family: "Familjen Grotesk", sans-serif !important;
    font-size: 36px !important;
    font-weight: 600 !important;
    line-height: 44px !important;
    text-align: center !important;
    color: #050823 !important;
}

.highlight-text {
    color: #4B22F4; /* Color diferente a partir de +3 años */
}

  .story-card-container {
    flex: 1;
    position: relative;
  }

  .success-stories-container {
    display: flex;
    align-items: stretch;
    gap: 20px;
    height: 100%;
  }

  .navigation-buttons {
    display: flex;
    align-items: center;
  }

  .nav-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
  }

  .story-card-wrapper {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    height: 100%;
  }

  .story-card {

    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    transition: transform 0.5s ease-in-out;
    max-width: 100%;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    margin-left: 42px;
    margin-right: 42px;
    margin-top: 2rem;
    height: 100%;
  }
  .story-content {
    max-width: 60%;
    padding: 24px;
  }

  .badge-container {
    margin-top: 24px;
    margin-bottom: 10px;
  }

  .badge {
    border-radius: 60px;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    margin-right: 5px;
  }

  .aprendizaje-badge {
    background: #0096D6;
  }
  .clima-badge {
    background: #6F4EF6;
}

  .banco-badge {
    color: #000;
    background: #E3E4E5;
  }

  .fundacion-badge {
    color: #000;
    background: #E3E4E5;
  }

  .universidad-badge {
    background: #8A2BE2;
  }

  .story-quote {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    color: #050823 !important;
    font-feature-settings: 'ss02' on;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 150% !important;
  }

  .author-details {
    font-size: 14px;
    color: #555;
margin-bottom:12px;
  }

  .author-name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-family: "Inter", sans-serif !important;
    display: block;
    color: var(--core-black) !important;
  }

  .author-role {
    display: block;
  }

  .story-link {
    color: #181B32 !important;
    font-feature-settings: 'ss02' on;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    text-decoration-line: underline;
    margin-top: 10px;
    margin-bottom: 24px;
    display: inline-block;
  }
.indicator-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.logo-indicator {
    margin: 0;
    padding: 0;
}

.indicator-logo {
    width: 210px; /* Aumentamos el tamaño de los logos */
    margin: 0; /* Sin espacio entre los logos */
    opacity: 0.50; /* Opacidad inicial para los logos no seleccionados */
    transition: opacity 0.3s ease; /* Transición suave de opacidad */
}

.indicator-logo.active {

    opacity: 1; /* Opacidad total para el logo seleccionado */
}
/* Estilos para pantallas móviles */
@media (max-width: 768px) {
.success-stories-section {

margin-left: 16px;
    
  }
  .badge-container{
  margin-top:0px;
  }
  .success-title {
    font-size: 24px;
    line-height: 32px;
  }

  .highlight-text {
    color: #4B22F4;
    font-size: 22px;
  }

  .story-card-container {
    flex: 1;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    scroll-behavior: smooth;
    padding: 0 20px;
  }

  .success-stories-container {
    display: flex;
    gap: 20px;
    height: auto;
    width: 900px;
    flex-wrap: nowrap;
  }

  .story-card-wrapper {
    flex: 0 0 35%; /* Manteniendo el ancho estrecho de las tarjetas */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alineamos el contenido a la parte superior */
    position: relative;
    height: auto;
    scroll-snap-align: start;
  }

  .story-card {
    flex-direction: column;
    max-width: 100%;
    width: 100%; /* Mantiene un ancho consistente en todas las tarjetas */
    margin: 0;
    padding: 24px; /* Padding consistente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    align-items: flex-start; /* Alineamos el contenido a la izquierda */
    background-color: #fff;
  }

  .story-content {
    max-width: 100%;
    padding: 0px; /* Padding consistente */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* Reducción del espacio entre elementos */
  }

  /* Ocultamos la imagen principal de cada tarjeta */
  .story-card img {
    display: none;
  }

  /* Ocultamos los botones de navegación en mobile */
  .nav-button {
    display: none;
  }

  /* Ocultamos los indicadores en mobile */
  .indicator-section {
    display: none;
  }

  /* Mostramos los logos dentro de las tarjetas con un tamaño aún mayor */
  .story-card[data-company="supervielle"]::before,
  .story-card[data-company="banco-hipotecario"]::before,
  .story-card[data-company="davivienda"]::before,
  .story-card[data-company="fundacion-leer"]::before {
   display: block;
  width: 180px;
  height: 70px;
  margin-bottom: 8px;
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  }

  /* Asignamos la imagen de fondo correspondiente a cada tarjeta */
  .story-card[data-company="supervielle"]::before {
    background-image: url('https://23946686.fs1.hubspotusercontent-na1.net/hubfs/23946686/Supervielle_logo14%201.png');
  }

  .story-card[data-company="banco-hipotecario"]::before {
    background-image: url('https://23946686.fs1.hubspotusercontent-na1.net/hubfs/23946686/1200px-Logo_Banco_Hipotecario%201.png');
  }

  .story-card[data-company="davivienda"]::before {
    background-image: url('https://23946686.fs1.hubspotusercontent-na1.net/hubfs/23946686/image%203.png');
 }

  .story-card[data-company="fundacion-leer"]::before {
    background-image: url("https://23946686.fs1.hubspotusercontent-na1.net/hubfs/23946686/Fundacion%20Leer%20tranparente%201.png");
 }
}

/* Módulo: Soporte dedicado */
.dedicated-support-section {

  max-width: 1200px;
  margin: 10rem auto;
  padding: 0 2rem;
}

h2.dedicated-title,
.dedicated-title {
  text-align: center !important;
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  color: var(--core-black) !important;
  margin-bottom: 3rem !important;
  font-family: "Familjen Grotesk", sans-serif !important;
  font-weight: 400 !important;
}

.dedicated-title .special-text {
  color: var(--strategic-purple);
  font-family: "STIX Two Text", serif;
  font-style: italic;
}

.dedicated-content {
margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.dedicated-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  flex: 1;
}

.dedicated-step-box {
  background-color: #fff;
padding: 16px 16px;
border-radius: 1rem;
border: 1px solid transparent;
background-image: 
  linear-gradient(#fff, #fff), /* true white background */
  linear-gradient(135deg, var(--invisible-tech), transparent, var(--mora-blue));
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);

}

.step-header {
  width: 2rem;
  height: 2rem;
  background-color:var(--off-white);
  color: var(--dark-purple);
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 8px;
margin-right:8px;
  border-radius: 0.5rem;

  border: 2px solid transparent;
}

h3.list-title,
.list-title {
  font-family: "Familjen Grotesk", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.25rem !important;
  color: var(--core-black) !important;
  line-height: 1.4 !important;
}
h3.list-title-resources,
.list-title-resources {
  font-family: "Familjen Grotesk", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  margin-bottom: 0rem !important;
  color: var(--core-black) !important;
  line-height: 1.4 !important;
}

.dedicated-step-box p {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  color: var(--core-black) !important;
  line-height: 1.6 !important;
}

/* Imagen a la derecha */
.dedicated-image {
  flex: 1;
  max-width: 640px;
}

.dedicated-image img {
  width: 100%;
  max-width: 100% !important;
  height: auto;
  border-radius: 1rem;
  display: block;
  margin: 0 auto;
}



/* Responsive */
@media (max-width: 768px) {
  .dedicated-image{
display: none;
}
  .dedicated-support-section {
    padding: 2rem 1rem;
  }

  .dedicated-title {
 
    font-size: 1.75rem;
  
  }

  .dedicated-content {

    flex-direction: column;
    gap: 2rem;
  }

  .list-title {
font-size: 20px !important;
margin-bottom: 1rem !important;
    font-size: 1rem;
  }

  .step-header {
    width: 2rem;
    height: 2rem;
    font-size: 16px;
  }

  .dedicated-step-box p {
    font-size: 16px;
  }
}


/* recursos */
 .resources-section{
margin: 10rem auto;
max-width: 1200px;
   justify-self: center;
}


.unique-resources-module {
 
place-self: center;
    display: flex;
    flex-direction: column;
   max-width: 1200px;
    width: 100%; /* Ancho del módulo */
}

.unique-resource-container {
    margin-top:2rem;
    display: flex;
    height: min-content;
}

.unique-resource-card {
    background-color: #ffffff; /* Fondo blanco para tarjetas */
    border-radius: 16px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 20px;
    display: flex;
}

.vertical {
    font-weight: 600;
    flex-direction: column;
 border: 1px solid transparent;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(270deg, var(--mora-blue), transparent, var(--mora-blue));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 400% 400%;
    animation: borderFlow 6s linear infinite;
    width: 560px; /* Ancho de la tarjeta vertical */
}

.unique-resource-cards {
    display: flex;
    flex-direction: column; /* Colocar tarjetas horizontales en columna */
    flex-grow: 1; /* Permitir que la columna de tarjetas horizontales ocupe el espacio restante */

}

.horizontal {
font-weight: 600;
    align-items: center;
    display: flex;
    height: fit-content; /* Altura de la tarjeta horizontal */
    width: 100%; /* Ancho completo */
}

.horizontal .unique-card-header {

    margin-right: 12px; /* Espacio entre imagen y contenido */
}

.unique-author-image {
    border-radius: 16px; /* Esquinas redondeadas */
   
}

.unique-card-content {
gap: 0.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.unique-badge-container {
    display: flex;
    gap: 12px;
    margin: 0px !important;
}

.unique-badge {
    padding: 6px 9px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 40px;
    color: #F7F8FA;
}

/* Colores específicos para cada badge */
.unique-badge.blog {
    background-color: #00C77E; /* Color para Blog */
}

.unique-badge.podcast {
    background-color: #6F4EF6; /* Color para Podcast */
}

.unique-badge.descargables {
    background-color: #049BFF; /* Color para Descargables */
}
.unique-badge.destacado {
    background-color: #4B22F4; /* Color para Destacado */
}

/* Color del CTA link */
.unique-card-link {
    color: #4B22F4;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.unique-card-link:hover {
    color: #5a54d1;
}



.unique-card-title {
    color: #000 !important;
    font-family: "Familjen Grotesk", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    margin: 10px 0 !important;
}

.unique-card-description {
    color: #333 !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 10px !important;
}

.unique-card-link {
    color: #4B22F4;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.unique-card-link:hover {
    color: #5a54d1;
}
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@media (max-width: 768px) {
    .unique-resources-module {
        flex: 1;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    scroll-behavior: smooth;
    padding: 0 20px;
gap: 0px;
    }

    .unique-resource-container {
        padding: 16px;
        display: flex;
        flex-direction: row;
        gap: 0px;
        height: auto;
        overflow-x: auto;

        scroll-snap-type: x mandatory;
    }

    .unique-resource-card {
        min-width: 300px;
        height: 400px !important; /* Altura fija para todas las tarjetas en mobile */
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alinear todo a la izquierda */
        justify-content: flex-start; /* Alinear todo al top */
    }

    .vertical{
     
        width: 300px;
        height: max-content; /* Mantener la altura de las tarjetas */
        flex-direction: column;
    }

    .horizontal {
        width: 300px;
        height: 100%; /* Mantener la altura de las tarjetas */
        flex-direction: column;
    }

    .unique-card-header {
        display: none; /* Ocultar imágenes en la versión móvil */
    }

    .unique-card-title {
        font-size: 16px;
        line-height: 22px;
        text-align: left; /* Alinear el título a la izquierda */
        margin-bottom: 10px; /* Espacio bajo el título */
    }

    .unique-card-description {
        font-size: 14px;
        line-height: 20px;
        text-align: left; /* Alinear descripción a la izquierda */
        margin-bottom: 10px;
    }

    .unique-badge-container {
        display: flex;
        gap: 8px;
        justify-content: flex-start; /* Alinear las badges a la izquierda */
        margin-bottom: 16px; /* Espacio entre las badges y el contenido */
    }

    .unique-badge {
        padding: 6px 9px;
    font-size: 12px;
        line-height: 18px;
        border-radius: 40px;
        background-color: #4B22F4;
        color: #F7F8FA;
    }

    .unique-card-link {
        text-align: left; /* Alinear enlace a la izquierda */
        margin-top: auto; /* Posicionar el enlace al final de la tarjeta */
    }

    .unique-resource-cards {
        display: flex;
        flex-direction: row;
        gap: 0px;
    }
}


/* Estilos generales para el contenedor */
  .container-cierre {

        padding: 40px;
  
    border-radius: 15px;
    
    max-width: 1200px;
margin: 10rem auto;
   
  }

  .content-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Espaciado de 10px entre los elementos */
  }

  /* Estilos para el título principal */
.subtitle{
  font-size: 18px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  color: var(--core-black) !important;
  line-height: 1.5 !important;
  text-wrap: balance;
}
.main-title {
  position: relative;
  z-index: 0;
  overflow: hidden;

  /* Fondo translúcido */
  background-color: rgba(214, 253, 106, 0.08);

  /* Borde animado tipo glassmorphism */
  border: 2px solid transparent;
  background-image:
    linear-gradient(135deg, rgba(214, 253, 106, 0.6), transparent, var(--off-white)),
    linear-gradient(135deg, var(--invisible-tech), var(--off-white), var(--invisible-tech));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 300% 300%;
  background-position: 0% 50%;

  /* Animaciones suaves */
  animation: 
    borderFlow 3s ease-in-out infinite alternate;
   

  /* Glow fuerte */
  box-shadow:
    0 0 20px rgba(var(--invisible-tech-rgb), 1),
    0 0 60px rgba(var(--invisible-tech-rgb), 1),
    0 0 100px rgba(var(--invisible-tech-rgb), 1);

  /* Estética general */
  border-radius: 99rem;
  transform-style: preserve-3d;
  perspective: 1000px;

  /* Texto */
  padding: 12px 42px;
  color: var(--dark-purple) !important;
  font-family: "Familjen Grotesk", sans-serif !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 120% !important;
  letter-spacing: -0.96px;
}

/* Borde animado suave (ida y vuelta) */
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Zoom tipo latido (suave) */
@keyframes  {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.01);
  }
}

  /* Estilos para el botón CTA */
  .cta-button {
background-color: #4B22F4;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
font-family: "inter", sans-serif;
  font-size: 16px; /* Tamaño de fuente actualizado */
  font-weight: 600; /* Peso de fuente actualizado */
  padding: 1em 2.5em; /* Aumentamos el padding */
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  flex-shrink: 0; /* Hacer que abrace el texto */
}
.cta-button:hover {
background-color: #3a1bca;
  transform: scale(1.02);
}

  /* Estilos para la calificación de Capterra */
  .rating {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rating img {
    width:100px;
    margin-right: 8px;
  }

  /* Responsiveness */
  @media (max-width: 768px) {
/* Estilos generales para el contenedor */
  .container-cierre {
padding: 16px; 
        margin-left:16px;
margin-right: 16px;
  }

    .main-title {
padding: 8px; 
      font-size: 32px;
font-weight: 500;
    }
.rating img {
    width:100px;
    margin-right: 8px;
  }
  }

/*IMG CARROUSEL*/
/* General module styling */
.image-module {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 45%;
  max-width: 45%;
  position: relative;
}

.top-images {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.img-1,
.img-2,
.img-3 {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  position: relative; /* Cada imagen necesita ser relative */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover effect: Incrementa el tamaño de manera más sutil y realza el shadow */
.img-1:hover,
.img-2:hover,
.img-3:hover {
  transform: scale(1.02);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
}

/* Pill styling */
.pill {
color: var(--dark-purple);
  position: absolute;
  border-radius: 60px;
  display: inline-flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0; /* Inicialmente invisible */
  transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
border: 0px solid transparent;
    background-image: linear-gradient(var(--off-white), var(--off-white)), linear-gradient(270deg, var(--invisible-tech), transparent, var(--invisible-tech));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 400% 400%;
    animation: borderFlow 3s linear infinite;
}

/* Mostrar las pastillas al hacer hover sobre las imágenes */
.image-left-1:hover .pill-clima,
.image-right-2:hover .pill-administra,
.bottom-image-3:hover .pill-aprendizaje,
.bottom-image-3:hover .pill-desempeno {
  opacity: 1;
}

/* Posicionar las pastillas */

/* Clima pill slightly outside Image 1 */
.pill-clima {
  top: -20px;
  left: -20px;
}

/* Administra pill slightly outside Image 2 */
.pill-administra {
  top: -20px;
  right: -20px;
}

/* Aprendizaje pill slightly outside Image 3 */
.pill-aprendizaje {
  bottom: -20px;
  left: -20px;
}

/* Ajuste de posición de la pastilla Desempeño en la esquina superior derecha de Imagen 3 */
.bottom-image-3 {
  position: relative; /* La imagen 3 será el contenedor relativo */
}

.pill-desempeno {
  top: -10px; /* Posicionada dentro de la imagen */
  right: -10px; /* Ajustada a la esquina superior derecha de la imagen */
  position: absolute;
}



/* Responsive design for tablet */
@media (max-width: 768px) {
 .image-module {display: none;}
  .top-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .img-1,
  .img-2,
  .img-3 {
    width: 100%;
  }
}

/* Responsive design for mobile */
@media (max-width: 480px) {
  .top-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .img-1,
  .img-2,
  .img-3 {
    width: 100%;
    height: auto;
  }
}

/* =========================================================
   CREHANA 2025 — FLOATING VIDEO + CTA MODULE (CSS ARREGLADO)
   • Tokens de color y tipografía Inter
   • Glassmorphism sutil para el wrapper
   • Botón de cierre accesible
   • Diseño responsive (desktop / mobile)
========================================================= */

/* ---- 1) TOKENS DE COLOR ---- */
:root {
  --mora-blue: #4822F4;
  --dark-purple: #140058;
  --strategic-purple: #6556FF;
  --invisible-tech: #D6FD6A;
  --core-black: #262626;
  --light-grey: #777777;
  --off-white: #F7F7F7;

  --highlight-gradient: linear-gradient(to left, var(--invisible-tech), transparent);
}

/* ---- 2) TIPOGRAFÍA ---- */
html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--core-black);
  background-color: #ffffff;
}

/* ============================================================
   9) MOBILE — CONSOLIDATED TITLE OVERRIDES
   Smaller section titles on mobile (≤768px)
============================================================ */
@media (max-width: 768px) {
  /* Section: "Activa el potencial..." */
  h2.section-title,
  .section-title {
    font-size: 1.5rem !important;
    margin-top: 4rem !important;
    line-height: 1.25 !important;
  }

  /* Section: "Toma decisiones con inteligencia" */
  h2.hana-ai-title,
  .hana-ai-title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  /* Section: "+1.200 clientes llevan +3 años" */
  h2.success-title,
  .success-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  /* Section: "Un equipo dedicado acompañándote" */
  h2.dedicated-title,
  .dedicated-title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  /* Section: "Recursos construidos para ayudarte" */
  .unique-resources-module h2,
  .unique-resources-module .dedicated-title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  /* Closing CTA: "Tu equipo merece lo mejor" */
  .main-title {
    font-size: 1.5rem !important;
    padding: 8px 20px !important;
  }

  /* Tab content titles */
  .crehana-custom-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  /* Subtitle under section titles */
  .hana-ai-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* Reduce massive desktop margins (10rem → 3rem) */
  .hana-ai-section,
  .success-stories-section,
  .dedicated-support-section,
  .container-cierre {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  /* Resources section */
  .unique-resources-module {
    padding: 0 16px !important;
  }
}

/* CREHANA PAY POPUP START */
/* ===== POPUP CREHANA PAY ===== */
  #cp-popup{
    --cp-bg:#03140a;
    --cp-lime:#d1f86a;
    --cp-white:#ffffff;
    --cp-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --cp-display:"Familjen Grotesk","Inter",system-ui,sans-serif;
    --cp-serif:"STIX Two Text",Georgia,"Times New Roman",serif;
    position:fixed;inset:0;z-index:2147483000;
    display:none;align-items:center;justify-content:center;
    padding:16px;box-sizing:border-box;
    font-family:var(--cp-sans);color:var(--cp-white);
    text-align:left;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  }
  #cp-popup.cp-open{display:flex}
  #cp-popup *{box-sizing:border-box}
  #cp-popup .cp-overlay{position:absolute;inset:0;background:rgba(8,18,8,.68);opacity:0;transition:opacity .35s ease}
  #cp-popup.cp-show .cp-overlay{opacity:1}

  #cp-popup .cp-card{
    position:relative;width:100%;max-width:880px;max-height:calc(100vh - 56px);overflow:hidden auto;
    background:
      radial-gradient(62% 74% at 94% 4%,rgba(222,252,140,.55) 0%,rgba(222,252,140,0) 70%),
      radial-gradient(56% 66% at 72% 106%,rgba(190,238,96,.42) 0%,rgba(190,238,96,0) 72%),
      linear-gradient(115deg,#0d1f10 0%,#16301a 36%,#2c5223 66%,#5d8a2c 100%);
    border-radius:24px;
    box-shadow:0 24px 70px rgba(20,0,88,.26),0 18px 56px rgba(0,0,0,.22);
    transform:translateY(16px) scale(.97);opacity:0;
    transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
    outline:none;text-align:left;
  }
  #cp-popup.cp-show .cp-card{transform:none;opacity:1}

  /* Look del keyvisual: luz cálida en diagonal + grano fino sobre el degradado */
  #cp-popup .cp-card::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      linear-gradient(112deg,rgba(0,0,0,0) 46%,rgba(209,248,106,.13) 54%,rgba(0,0,0,0) 63%),
      linear-gradient(112deg,rgba(0,0,0,0) 66%,rgba(209,248,106,.08) 71%,rgba(0,0,0,0) 78%);
  }
  #cp-popup .cp-card::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  #cp-popup .cp-close{
    position:absolute;top:14px;right:14px;z-index:5;width:34px;height:34px;aspect-ratio:1/1;border-radius:999px;
    padding:0;min-width:0;min-height:0;overflow:hidden;
    border:1px solid rgba(255,255,255,.28);background:rgba(3,20,10,.4);color:rgba(255,255,255,.76);font-size:0;line-height:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:background .2s,border-color .2s,box-shadow .2s;
  }
  #cp-popup .cp-close::before,#cp-popup .cp-close::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.35px;border-radius:999px;background:currentColor;opacity:.52;transform-origin:center}
  #cp-popup .cp-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  #cp-popup .cp-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
  #cp-popup .cp-close:hover{background:rgba(255,255,255,.22);color:rgba(255,255,255,.9)}
  #cp-popup .cp-close:hover::before,#cp-popup .cp-close:hover::after{opacity:.7}
  #cp-popup .cp-close:focus-visible,#cp-popup .cp-btn:focus-visible{outline:3px solid var(--cp-lime);outline-offset:3px}

  /* ===== ESCALA TIPOGRÁFICA (una sola familia de tamaños, 4 niveles) =====
     Oferta 32 · Descripción 17 · Claims 15 · Apoyo/legal 12–13
     Espaciado en múltiplos de 8: 8 · 16 · 24 · 32                         */
  #cp-popup .cp-copy{
    position:relative;z-index:2;width:52%;min-height:500px;
    padding:48px 0 56px 48px;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  }

  /* Nivel 1 · Identidad: etiqueta + logo */
  #cp-popup .cp-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
  #cp-popup .cp-tag{
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(209,248,106,.14);border:1px solid rgba(209,248,106,.4);color:#e6ffa6;
    font-family:var(--cp-sans)!important;font-weight:700;font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;
    padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px);
  }
  #cp-popup .cp-logo{height:22px!important;width:auto!important;display:block;max-width:132px!important}

  /* Nivel 2 · Qué es */
  #cp-popup .cp-sub{margin:0 0 22px;font-family:var(--cp-sans)!important;font-size:15.5px;line-height:1.3;font-weight:400;color:rgba(255,255,255,.88);text-align:left}
  #cp-popup .cp-sub b{font-weight:600;color:#fff}

  /* Nivel 3 · Claims: una línea cada uno, lo clave en negrita */
  #cp-popup .cp-claims{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;max-width:390px}
  #cp-popup .cp-claims li{display:flex;gap:8px;align-items:center;font-family:var(--cp-sans)!important;font-size:12.7px;line-height:1.26;font-weight:400;color:rgba(255,255,255,.78);text-align:left}
  #cp-popup .cp-claims li span{display:block;padding-top:0}
  #cp-popup .cp-claims li b{font-weight:600;color:#fff}
  #cp-popup .cp-claims svg{flex:0 0 16px;width:16px;height:16px;margin-top:0}

  /* Nivel 4 · Oferta + CTA, separados de lo anterior por una línea fina */
  #cp-popup .cp-offer{width:100%;max-width:370px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
  #cp-popup h2{margin:0 0 16px;font-family:var(--cp-display)!important;font-size:clamp(21px,2.15vw,25px);line-height:1.13;font-weight:400!important;letter-spacing:-.015em;text-wrap:balance;text-align:left!important}
  #cp-popup h2 em{font-family:var(--cp-serif)!important;font-style:italic;font-weight:400!important;color:var(--cp-lime);letter-spacing:0;white-space:nowrap}

  #cp-popup .cp-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    background:var(--cp-lime);color:#140058;
    font-family:var(--cp-sans)!important;font-weight:700;font-size:14px;line-height:1.1;text-align:center;text-decoration:none;
    min-height:40px;padding:10px 18px;border-radius:9px;transition:transform .2s,box-shadow .2s,background .2s;
  }
  #cp-popup .cp-btn:hover{transform:translateY(-2px);background:#e0ff86;box-shadow:0 10px 28px rgba(209,248,106,.3)}
  #cp-popup .cp-btn svg{width:15px;height:15px;flex:0 0 15px;display:block}
  #cp-popup .cp-legal{position:absolute;z-index:4;right:32px;bottom:22px;margin:0;font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.62);white-space:nowrap;text-align:right}

  /* ===== PLATAFORMA EN CRISTAL (glassmorphism + capas en perspectiva) =====
     3 capturas reales apiladas con profundidad; marcos de vidrio esmerilado sobre el fondo */
  #cp-popup .cp-stage-wrap{position:absolute;z-index:3;right:-28px;top:50%;margin-top:-210px;width:560px;height:420px;pointer-events:none;transform:translateY(8px) scale(.78);transform-origin:50% 50%}
  #cp-popup .cp-stage{position:absolute;inset:0;perspective:1700px;perspective-origin:30% 40%}
  #cp-popup .cp-stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(13deg) rotateY(-22deg) rotateZ(4deg)}

  #cp-popup .cp-glassframe{
    position:absolute;border-radius:16px;padding:3px;
    background:linear-gradient(135deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 55%,rgba(255,255,255,.12) 100%);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
    box-shadow:0 30px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.38);
  }
  #cp-popup .cp-glassframe img{display:block;width:100%;height:auto;border-radius:13px}
  #cp-popup .cp-glassframe::after{ /* brillo diagonal muy suave */
    content:"";position:absolute;inset:3px;border-radius:13px;pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 28%);
  }
  #cp-popup .cp-l-back{width:410px;left:130px;top:0;transform:translateZ(-170px);opacity:.8;filter:saturate(1.1) brightness(.92)}
  #cp-popup .cp-l-mid{width:446px;left:80px;top:66px;transform:translateZ(-85px);opacity:.93}
  #cp-popup .cp-l-front{width:486px;left:24px;top:140px;transform:translateZ(0)}

  /* fichas flotantes de cristal (datos reales de la pantalla) */
  #cp-popup .cp-chip{
    position:absolute;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;color:#140058;font-size:11px;line-height:1.22;white-space:nowrap;
    background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.52));
    border:1px solid rgba(255,255,255,.85);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:0 18px 34px rgba(0,20,8,.4),inset 0 1px 0 rgba(255,255,255,.7);
  }
  #cp-popup .cp-chip b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
  #cp-popup .cp-chip small{display:block;font-size:10px;opacity:.85}
  #cp-popup .cp-dot{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#d1f86a;display:flex;align-items:center;justify-content:center}
  #cp-popup .cp-dot svg{width:12px;height:12px}
  #cp-popup .cp-chip-a{right:56px;top:14px;transform:translateZ(70px)}
  #cp-popup .cp-chip-b{right:14px;top:212px;transform:translateZ(90px)}
  #cp-popup .cp-chip-c{left:96px;bottom:34px;transform:translateZ(70px)}
  @keyframes cp-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
  #cp-popup .cp-chip-a{animation:cp-float 6s ease-in-out infinite}
  #cp-popup .cp-chip-b{animation:cp-float 7s ease-in-out -2s infinite}
  #cp-popup .cp-chip-c{animation:cp-float 6.5s ease-in-out -4s infinite}

  /* resplandor verde detrás de la plataforma para que el cristal tenga qué desenfocar */
  #cp-popup .cp-glow{position:absolute;z-index:1;right:-70px;top:50%;margin-top:-190px;width:540px;height:380px;pointer-events:none;
    background:radial-gradient(closest-side,rgba(214,250,120,.42),rgba(214,250,120,0));}

  
  /* ===== CLARO · paleta de campaña: fondo verde limón + violeta #140058 + lima #d1f86a ===== */
  #cp-popup.cp-light{--cp-ink:#140058;--cp-accent:#4b22f4}
  #cp-popup.cp-light .cp-card{
    background:
      radial-gradient(70% 80% at 62% 0%,rgba(209,248,106,.55) 0%,rgba(209,248,106,0) 70%),
      url("data:image/webp;base64,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") center/cover no-repeat,
      #e6f8b9;
    color:var(--cp-ink);
  }
  #cp-popup.cp-light .cp-card::before{background:linear-gradient(112deg,rgba(255,255,255,0) 46%,rgba(255,255,255,.30) 54%,rgba(255,255,255,0) 63%)}
  #cp-popup.cp-light .cp-card::after{opacity:.05;mix-blend-mode:multiply}
  #cp-popup.cp-light .cp-close{background:rgba(20,0,88,.07);border-color:rgba(20,0,88,.18);color:rgba(20,0,88,.62);backdrop-filter:none;box-shadow:0 8px 22px rgba(20,0,88,.08)}
  #cp-popup.cp-light .cp-close:hover{background:rgba(20,0,88,.12);border-color:rgba(20,0,88,.24);color:rgba(20,0,88,.78)}
  #cp-popup.cp-light .cp-close:focus-visible,#cp-popup.cp-light .cp-btn:focus-visible{outline-color:var(--cp-ink)}
  #cp-popup.cp-light .cp-tag{background:#d1f86a;border-color:#d1f86a;color:var(--cp-ink);backdrop-filter:none}
  #cp-popup.cp-light .cp-sub{color:rgba(20,0,88,.82)}
  #cp-popup.cp-light .cp-sub b,#cp-popup.cp-light .cp-claims li b{color:var(--cp-ink)}
  #cp-popup.cp-light .cp-claims li{color:rgba(20,0,88,.76)}
  #cp-popup.cp-light .cp-claims svg circle{fill:var(--cp-ink)}
  #cp-popup.cp-light .cp-claims svg path{stroke:#d1f86a}
  #cp-popup.cp-light .cp-offer{border-top-color:rgba(20,0,88,.16)}
  #cp-popup.cp-light h2 em{color:var(--cp-accent)}
  #cp-popup.cp-light .cp-btn{background:var(--cp-ink);color:#ffffff}
  #cp-popup.cp-light .cp-btn:hover{background:#24008a;box-shadow:0 10px 28px rgba(20,0,88,.28)}
  #cp-popup.cp-light .cp-legal{color:rgba(20,0,88,.6)}
  #cp-popup.cp-light .cp-glow{background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0))}
  #cp-popup.cp-light .cp-glassframe{border-color:rgba(255,255,255,.75);background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.26));box-shadow:0 26px 50px rgba(20,0,88,.16),inset 0 1px 0 rgba(255,255,255,.9)}
  #cp-popup.cp-light .cp-chip{color:var(--cp-ink);box-shadow:0 16px 30px rgba(20,0,88,.16),inset 0 1px 0 rgba(255,255,255,.7)}
  #cp-popup.cp-light .cp-overlay{background:rgba(20,0,88,.45)}

  @media (max-height:660px) and (min-width:821px){
    #cp-popup .cp-copy{min-height:0;padding-top:40px;padding-bottom:52px}
    #cp-popup .cp-top{margin-bottom:20px}
    #cp-popup .cp-sub{margin-bottom:20px}
    #cp-popup .cp-claims{margin-bottom:24px;gap:10px}
    #cp-popup .cp-offer{padding-top:22px}
    #cp-popup h2{margin-bottom:20px}
  }

  /* móvil: layout compacto, visual arriba y CTA visible sin cortar */
  @media (max-width:820px){
    #cp-popup{align-items:center;justify-content:center;padding:12px;min-height:100dvh}
    #cp-popup .cp-overlay{background:rgba(20,0,88,.52)}
    #cp-popup .cp-card{width:min(calc(100vw - 24px),372px);max-height:calc(100dvh - 24px);border-radius:20px;display:flex;flex-direction:column;overflow:hidden auto;-webkit-overflow-scrolling:touch}
    #cp-popup .cp-close{top:9px;right:9px;width:30px;height:30px;background:rgba(255,255,255,.84);border-color:rgba(20,0,88,.12)}
    #cp-popup .cp-close::before,#cp-popup .cp-close::after{width:11px;height:1.25px}
    #cp-popup .cp-stage-wrap{position:relative;right:auto;top:auto;bottom:auto;order:0;flex:0 0 auto;width:100%;height:138px;margin:0;overflow:hidden;pointer-events:none;transform:none;border-radius:20px 20px 0 0}
    #cp-popup .cp-stage-wrap .cp-stage{position:absolute;inset:auto;left:50%;top:-2px;width:650px;height:520px;transform:translateX(-49%) scale(.36);transform-origin:50% 0}
    #cp-popup .cp-glow,#cp-popup .cp-chip{display:none}
    #cp-popup .cp-copy{width:100%;min-height:0;padding:14px 18px 16px;margin-top:0;justify-content:flex-start;order:1;flex:0 0 auto}
    #cp-popup .cp-top{gap:9px;margin-bottom:10px}
    #cp-popup .cp-tag{font-size:9.5px;padding:4px 9px;letter-spacing:.07em}
    #cp-popup .cp-logo{height:19px!important;width:auto!important;max-width:126px!important}
    #cp-popup .cp-sub{font-size:14px;line-height:1.3;margin:0 0 18px}
    #cp-popup .cp-claims{margin:0 0 14px;gap:7px;max-width:none}
    #cp-popup .cp-claims li{font-size:11.8px;line-height:1.24;gap:7px;align-items:center}
    #cp-popup .cp-claims svg{flex-basis:14px;width:14px;height:14px;margin-top:0}
    #cp-popup .cp-offer{max-width:none;padding-top:12px}
    #cp-popup h2{font-size:clamp(18px,5.1vw,20px);line-height:1.12;margin-bottom:12px}
    #cp-popup .cp-btn{width:100%;min-height:40px;padding:10px 14px;border-radius:9px;font-size:13.5px}
    #cp-popup .cp-legal{position:static;order:2;flex:0 0 auto;white-space:normal;text-align:center;padding:0 18px 14px;font-size:10px;line-height:1.32}
  }

  @media (max-width:820px) and (max-height:700px){
    #cp-popup .cp-stage-wrap{height:116px}
    #cp-popup .cp-stage-wrap .cp-stage{top:-8px;transform:translateX(-50%) scale(.31)}
    #cp-popup .cp-copy{padding:12px 16px 14px}
    #cp-popup .cp-sub{margin-bottom:15px}
    #cp-popup .cp-claims{gap:6px;margin-bottom:12px}
    #cp-popup .cp-legal{padding-bottom:12px}
  }

  @media (max-width:380px){
    #cp-popup{padding:8px}
    #cp-popup .cp-card{width:min(calc(100vw - 16px),356px);max-height:calc(100dvh - 16px);border-radius:18px}
    #cp-popup .cp-stage-wrap{height:128px;border-radius:18px 18px 0 0}
    #cp-popup .cp-stage-wrap .cp-stage{top:-4px;transform:translateX(-50%) scale(.33)}
    #cp-popup .cp-copy{padding-left:16px;padding-right:16px}
    #cp-popup .cp-sub{font-size:13.6px}
    #cp-popup .cp-claims li{font-size:11.5px}
    #cp-popup h2{font-size:18px}
    #cp-popup .cp-legal{padding-left:16px;padding-right:16px}
  }

  /* Refuerzo contra estilos globales de HubSpot/tema: bloquea tipografías/tamaños del popup en Mac/Windows */
  #cp-popup #cp-title{
    display:block!important;width:100%!important;margin:0 0 16px!important;margin-left:0!important;margin-right:auto!important;
    font-family:var(--cp-display)!important;font-size:clamp(21px,2.15vw,25px)!important;line-height:1.13!important;font-weight:400!important;
    letter-spacing:-.015em!important;text-align:left!important;
  }
  #cp-popup #cp-title em{font-family:var(--cp-serif)!important;font-size:1em!important;line-height:inherit!important;font-weight:400!important;text-align:left!important}
  #cp-popup #cp-desc{font-family:var(--cp-sans)!important;font-size:15.5px!important;line-height:1.3!important;margin:0 0 22px!important;text-align:left!important}
  #cp-popup .cp-claims{margin:0 0 20px!important;gap:8px!important}
  #cp-popup .cp-claims li{font-family:var(--cp-sans)!important;font-size:12.7px!important;line-height:1.26!important;align-items:center!important;text-align:left!important}
  #cp-popup .cp-claims svg{width:16px!important;height:16px!important;flex-basis:16px!important}
  #cp-popup .cp-tag{font-family:var(--cp-sans)!important;font-size:10px!important;line-height:1!important}
  #cp-popup .cp-btn{font-family:var(--cp-sans)!important;font-size:14px!important;line-height:1.1!important}
  #cp-popup .cp-logo{height:22px!important;max-width:132px!important}

  @media (max-width:820px){
    #cp-popup #cp-title{font-size:clamp(18px,5.1vw,20px)!important;line-height:1.12!important;margin-bottom:12px!important}
    #cp-popup #cp-desc{font-size:14px!important;line-height:1.3!important;margin-bottom:18px!important}
    #cp-popup .cp-claims li{font-size:11.8px!important;line-height:1.24!important}
    #cp-popup .cp-claims svg{width:14px!important;height:14px!important;flex-basis:14px!important}
    #cp-popup .cp-logo{height:19px!important;max-width:126px!important}
    #cp-popup .cp-btn{font-size:13.5px!important}
  }

  @media (max-width:380px){
    #cp-popup #cp-title{font-size:18px!important}
    #cp-popup #cp-desc{font-size:13.6px!important}
    #cp-popup .cp-claims li{font-size:11.5px!important}
  }

  @media (prefers-reduced-motion:reduce){
    #cp-popup .cp-overlay,#cp-popup .cp-card,#cp-popup .cp-btn{transition:none}
    #cp-popup .cp-chip{animation:none!important}
  }
/* CREHANA PAY POPUP END */