/* ============================================
   BANNER HOME 2026 - MODERN HERO SECTION
   ============================================ */

:root {
  --primary-blue: #0066CC;
  --dark-blue: #003B7A;
  --bright-blue: #0052FF;
  --cyan: #00D9FF;
  --light-cyan: #4AFFFF;
  --white: #ffffff;
  --text-dark: #1a1a1a;
  --text-light: rgba(255, 255, 255, 0.95);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.25);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   BANNER CONTAINER
   ============================================ */

.banner-home-2026 {
  position: relative; 
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Sombra SUPERIOR */
.banner-home-2026::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20vh; /* La extensión que pediste */
    background: linear-gradient(to bottom, rgb(10, 22, 40, 0.8) 0%, rgb(10, 22, 40, 0) 90%, rgb(10, 22, 40, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Sombra DERECHA */
.banner-home-2026::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 10vw; /* La extensión que pediste */
    height: 100%;
    background: linear-gradient(to left, rgb(10, 22, 40, 0.8) 0%, rgb(10, 22, 40, 0) 90%, rgb(10, 22, 40, 0) 100%);
    pointer-events: none;
    z-index: 1; /* Un nivel más para que se crucen en la esquina */
}



/* ============================================
   CONTAINER
   ============================================ */

.banner-container {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 120px 40px 80px;
  width: 100%;
}

/* ============================================
   HERO CONTENT
   ============================================ */

.hero-content {
  margin-bottom: 80px;
  animation: fadeInUp 0.8s ease-out;
}

.hero-title h1 {
  font-size: clamp(32px, 4vw, 60px);
  color: var(--white);
  margin-bottom: 24px;
  font-family: "Anek Latin";
  font-style: normal;
  font-weight: 500;
  line-height: 98.851% !important; 
}

.hero-title h2 {
  color: #FFF;
  font-family: "Anek Latin";
  font-size: clamp(16px, 1vw, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 124.894%;
  max-width: 480px;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--light-cyan) 100%);
  color: var(--dark-blue);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.cta-primary:hover::before {
  left: 100%;
}

.cta-primary:hover {
}

/* ============================================
   FEATURE CARDS
   ============================================ */

.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
 
}

.feature-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  width: 100%;
  aspect-ratio: 557/265;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}



.feature-card:hover {
}

/* ============================================
   CARD WITH IMAGE
   ============================================ */

.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card:hover .card-image img {
  /* transform: scale(1.1); */
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* ============================================
   CARD CONTENT
   ============================================ */

.card-content p{
}


/* .card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 12px;
}

.card-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
} */

/* ============================================
   AI CARD
   ============================================ */

.card-ai {
  background: linear-gradient(135deg, rgba(74, 255, 255, 0.15) 0%, rgba(0, 217, 255, 0.1) 100%);
}

.ai-icon-container {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ai-icon-container::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(74, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse 3s ease-in-out infinite;
}

.ai-icon {
  width: 120px;
  height: 120px;
  color: var(--cyan);
  position: relative;
  z-index: 1;
  animation: rotate 20s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   INTEGRATIONS CARD
   ============================================ */

.card-integrations {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.integration-mockup {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mockup-window {
  width: 100%;
  max-width: 280px;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition);
}

.feature-card:hover .mockup-window {
  transform: scale(1.05);
}

.mockup-header {
  background: #F5F5F5;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #E0E0E0;
}

.mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #DDD;
}

.mockup-dot:nth-child(1) {
  background: #FF5F56;
}

.mockup-dot:nth-child(2) {
  background: #FFBD2E;
}

.mockup-dot:nth-child(3) {
  background: #27C93F;
}

.mockup-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mockup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideIn 0.5s ease-out backwards;
}

.mockup-item:nth-child(1) { animation-delay: 0.1s; }
.mockup-item:nth-child(2) { animation-delay: 0.2s; }
.mockup-item:nth-child(3) { animation-delay: 0.3s; }
.mockup-item:nth-child(4) { animation-delay: 0.4s; }

.item-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}

.item-bar {
  height: 8px;
  background: linear-gradient(90deg, #E0E0E0 0%, #F5F5F5 100%);
  border-radius: 4px;
  transition: var(--transition);
}

.feature-card:hover .item-bar {
  background: linear-gradient(90deg, var(--cyan) 0%, var(--light-cyan) 100%);
}

/* ============================================
   SECTOR SHOWCASE SECTION
   ============================================ */

.sector-showcase {
  padding-top: 60px;
}

.sector-header {
  margin-bottom: 60px;
}
.sector-header h2 {
  color: #FFF;
  font-family: "Anek Latin";
  font-size: clamp(32px, 4vw, 60px);
  font-style: normal;
  font-weight: 500;
  line-height: 98.851%;
}
.sector-header p {
  color: #FFF;
  margin-top: 5px;
  font-family: "Anek Latin";
  font-size: clamp(20px, 1.2vw, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 98.851%;
  font-stretch: 125%;
}

.sector-title {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.2;
}

.sector-subtitle {
  font-size: clamp(14px, 1.5vw, 18px);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* ============================================
   SECTOR CONTENT GRID
   ============================================ */

.inner-sector-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 60px;
}
.sector-content-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sector-info-minicards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sector-info-minicards > div{
  flex: 1;
}

/* Tab Panel System */
.sector-tab-panel {
  display: none;
  animation: fadeInUp 0.5s ease-out;
}

.sector-tab-panel.active {
  display: grid;
}

/* Diagram Background */
.diagram-background {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-background img {
  object-fit: cover;
  width: 100%;
  height: 100% !important;
}


/* ============================================
   GROWTH CARD
   ============================================ */

.growth-card {
  overflow: hidden;
  position: relative;
  height: 100%;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2) 0%, rgba(74, 255, 255, 0.1) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: var(--transition);
}

.growth-card:hover {
  border-color: rgba(0, 217, 255, 0.4);
}
.growth-header{
  z-index: 1;
}
.growth-header h3 {
  color: #000;
font-family: "Anek Latin";
font-size: clamp(24px, 1.5vw, 28px);
font-style: normal;
font-weight: 500;
margin-bottom: 1rem;
line-height: 90%; /* 30.6px */
}
.growth-header p {
  color: #000;
font-family: "Anek Latin";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 124.894%;
}
.growth-header p em{
  font-size: 12px;
  font-weight: 600;
}
.growth-header p strong {
  font-size: 16px;
  color: #000;
font-family: "Anek Latin";
font-style: normal;
font-weight: 500;
margin-bottom: 0.75rem;
line-height: 124.894%; /* 24.979px */
}


/* ============================================
   GROWTH DIAGRAM (Bubble Chart)
   ============================================ */

.growth-diagram {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bubble {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: var(--transition);
  cursor: pointer;
}

.bubble-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: pulse 3s ease-in-out infinite;
}

.bubble-center svg circle:last-of-type {
  animation: rotateCircle 10s linear infinite;
}

@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
    transform-origin: center;
  }
  to {
    transform: rotate(360deg);
    transform-origin: center;
  }
}

.bubble-1 {
  top: 15%;
  left: 15%;
}

.bubble-2 {
  top: 15%;
  right: 15%;
}

.bubble-3 {
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
}

.bubble:not(.bubble-center) {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.bubble:not(.bubble-center):hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--cyan);
  transform: scale(1.1);
}

.bubble-icon {
  font-size: 28px;
  line-height: 1;
}

.bubble-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  text-align: center;
}

/* ============================================
   GROWTH CTA
   ============================================ */

.growth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  border-radius: 4px;
  transition: var(--transition);
  text-align: center;
  width: fit-content;
  z-index: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

/* .growth-cta:hover {
  background: var(--cyan);
  color: var(--dark-blue);
} */

/* ============================================
   PROFESSIONAL IMAGE
   ============================================ */

.professional-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}

.professional-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: var(--transition);
}

.professional-image:hover img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* ============================================
   INFO CARD
   ============================================ */

.info-card {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.9) 0%, rgba(255, 107, 53, 0.7) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 16px;
  transition: var(--transition);
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 120% 120%;
  aspect-ratio: 342/191;

}




.info-content {
  z-index: 1;
  width: 75%;
  display: flex;
  align-items: center;
}
.info-card:not(:has(.info-stats)) .info-content{
    width: 100%;
}

.info-content h3{
  line-height: 1;
  font-size: 13px;
  color: #FFF;
  margin-bottom: 10px;
}
.mini-caso-title p,
.info-content p{
color: #FFF;
font-family: "Anek Latin";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 125%;
margin-bottom: 0.75rem;
}
.mini-caso-title p{
  margin-bottom: 0px;
}
.mini-caso-title p strong,
.info-content p strong{
color: #FFF;
font-family: "Anek Latin";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 106%;
}
.mini-caso-title p,
.mini-caso-title p strong{
  color: #000;
}
.info-text {
  font-size: 15px;
  color: var(--white);
  line-height: 1.7;
  margin: 0;
}

/* ============================================
   INFO STATS
   ============================================ */

.info-stats {
  display: flex;
  z-index: 1;
}

.stat-item {
  display: flex;
  align-items: center;
}



.stat-icon {
  flex-shrink: 0;
}
.stat-icon img{
    aspect-ratio: 1 / 1;
    height: auto;
    height: 110% !important;
    width: auto;
    max-width: 200px !important;
    position: absolute;
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
}

.stat-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 4px 0;
}

.stat-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* ============================================
   SECTOR NAVIGATION
   ============================================ */

.sector-navigation {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.sector-nav-btn {
  background-color: transparent !important;
  color: #FFF;
  text-align: center;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 500;
  line-height: 98.851%;
  padding: 5px 12px;
  min-width: max-content;
  display: flex;
  align-items: center;
  height: 30px;
  font-stretch: 125%;
}



.sector-nav-btn.active {
  color: #FFF;
  border-radius: 30px;
  border: 1px solid #FFF;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

/* ============================================
   ANIMATIONS
   ============================================ */


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
  .banner-container {
    padding: 100px 32px 60px;
  }
  .sector-content-right {
  grid-template-columns: 1fr;
}
  .feature-cards {
    gap: 20px;
  }
  .professional-image {
   display: none;
  }
}

@media (max-width: 1024px) {
  .feature-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-card {
    display: flex;
  }

  .card-image,
  .ai-icon-container,
  .integration-mockup {
    height: 100%;
    min-height: 180px;
  }

 
}

@media (max-width: 768px) {
  .banner-home-2026 {
    min-height: auto;
    padding: 80px 0 60px;
  }

  .banner-container {
    padding: 60px 0px 40px;
  }

  .hero-content {
    margin-bottom: 60px;
    padding-left: 1rem;
    padding-right: 1rem;
  }



  .cta-primary {
    width: 100%;
    padding: 14px 32px;
  }

  

  .card-image,
  .ai-icon-container,
  .integration-mockup {
    height: 160px;
    min-height: 160px;
  }

  /* Sector showcase responsive */
  .sector-showcase {
    margin-top: 60px;
    padding-top: 40px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .sector-header {
    margin-bottom: 40px;
  }

  .sector-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  

  

  .sector-navigation {
    overflow-x: auto;
    justify-content: flex-start;
  }
  .sector-navigation::-webkit-scrollbar {
    display: none;
  }
  
}

@media (max-width: 480px) {
  



  .card-title {
    font-size: 16px;
  }

  .card-description {
    font-size: 13px;
  }

  .shape-1,
  .shape-2,
  .shape-3 {
    filter: blur(60px);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.feature-card:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .banner-home-2026 {
    background: white;
    color: black;
  }

  .bg-shape {
    display: none;
  }

  .feature-card {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
}

/* ============================================
   MINI SLIDER DE CASOS DE ÉXITO
   ============================================ */

.minislide-caso-de-exito {
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.67) 0%, rgba(255, 255, 255, 0.67) 100%);
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
}

.casos-slider-wrapper {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

.casos-slider-track {
  display: flex;
  gap: 16px;
  padding: 5px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-caso-card {
  border-radius: 21px;
  overflow: hidden;
  flex: 0 0 calc(40% - 8px);
  box-shadow: 0px 2.8px 4.4px 0px #0002407A;
}

.mini-caso-card-inner {
  position: relative;
  
  
  aspect-ratio: 370 / 221;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.3s ease;
  
}

.mini-caso-card-inner:hover {
  transform: scale(1.05);
}

.mini-caso-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.mini-caso-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.mini-caso-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.mini-caso-logo {
  display: flex;
  align-items: flex-start;
}

.mini-caso-logo img {
  max-width: 90px !important;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.mini-caso-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 50px;
  width: fit-content;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.mini-caso-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.mini-caso-tipo {
  color: #fff;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 500;
  white-space: nowrap;
}

.mini-caso-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.mini-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.mini-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
}

.mini-slider-dot:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.2);
}

.mini-slider-dot.active {
  background: linear-gradient(90deg, #00D9FF 0%, #00FF94 100%);
  width: 24px;
  border-radius: 4px;
}

/* Responsive para el mini-slider */
@media (max-width: 768px) {
  .mini-caso-card {
    min-width: auto;
  }

  .mini-caso-content {
    padding: 16px;
  }

  .mini-caso-logo img {
    max-width: 100px;
    max-height: 35px;
  }

  .mini-caso-info {
    padding: 5px 10px;
  }



  .mini-slider-dots {
    margin-top: 16px;
  }
}

/* ============================================================
   R60 · 29-oct-2026 · Bloque traido desde el <style> del module.html.

   Estaba dentro de un scope_css, que HubSpot reescribe acotando cada
   selector a la instancia: "#hs_cos_wrapper_widget_xxx .hero-content h2".
   Aqui no existe esa reescritura, asi que cada selector lleva el prefijo
   .banner-home-2026, la clase propia del contenedor.

   NO es opcional. Estas clases las comparten otros modulos del tema:
     .hero-content   -> 5 modulos
     .card-content   -> 5 modulos
     .image-animate  -> 2 modulos
   Sin el prefijo, estas reglas se les aplicarian a todos ellos.

   Dos salvedades del prefijado:
   - .banner-home-2026 se deja tal cual donde ya aparecia: prefijarla
     consigo misma (.x .x) no casaria con nada.
   - El @keyframes va sin tocar: su nombre es global y no es un selector.
     Ojo, "animateImage" tambien lo define Text Gracias 2026.module; ya
     chocaban antes de este cambio, no es algo que introduzca R60.

   Sobre la especificidad: estas reglas pasan de valer (1,1,x) por el ID
   que ponia scope_css a valer (0,2,x). Se comprobo regla por regla que
   ninguna de las 25 del fichero que tocan estas mismas clases declare la
   misma propiedad con mas peso, y se midieron 25 elementos de la home a
   1366 y a 390 px, antes y despues, con la version original subida para
   la toma de referencia. Si se anaden reglas nuevas mas arriba en este
   fichero, tenerlo en cuenta.

   Los dos colores del boton los pone el editor: siguen en el module.html
   como variables, y aqui solo se consumen.
   ============================================================ */

.banner-home-2026 .hero-content h2 {
        margin-top: 1rem;
        font-weight: 400;
}

.banner-home-2026 .hero-content h2 em {
        font-weight: 600;
}

.banner-home-2026 .enlace-top {
        margin-top: 1rem;
}

.banner-home-2026 .enlace-top a {
        font-weight: 500;
        display: inline-block;
        font-size: 18px;
        padding: 8px 20px;
        box-shadow: 0px 4px 11.2px 0px #15E9FF7D;
        background-color: var(--hero-cta-bg);
        color: var(--hero-cta-color);
}

.banner-home-2026 .card-image {
        position: absolute;
        inset: 0;
        z-index: -1;
        height: auto;
}

.banner-home-2026 .card-image img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
}

.banner-home-2026 .card-content {
        display: flex;
        align-items: center;
        padding: 2rem;
        height: 100%;
}

.banner-home-2026 .card-content p {
        font-size: 16px;
        margin-bottom: 10px;
        color: #ffffff;
        font-family: "Anek Latin";
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
}

.banner-home-2026 .card-content p:last-child {
        margin-bottom: 0;
}

.banner-home-2026 .card-content p strong {
        font-weight: 400;
        font-size: 18px;
        font-stretch: 110%;
}

.banner-home-2026 .card-content:has(.image-icon-right) {
        padding-right: 0;
}

.banner-home-2026 .card-content > div:nth-of-type(1) {
        width: 75%;
}

.banner-home-2026 .image-animate img {
          height: 100% !important;
          object-fit: cover;
          width: 100% !important;
}

.banner-home-2026 .image-animate {
          position: absolute;
          top: -25vh;
          right: -15vw;
          width: 40vw;
          animation: animateImage 20s linear infinite;
}

@media (max-width: 1500px) and (min-width: 1200px) {
.banner-home-2026 /* .image-animate {
            top: -15vh;
            right: -10vw;
            width: 30vw;
}

*/
}

@media (max-width: 1200px) and (min-width: 768px) {
.banner-home-2026 /* .image-animate {
            top: -15vh;
            right: -10vw;
            width: 30vw;
}

*/
}

/* Ocultar título mobile por defecto (solo visible en mobile) */

.banner-home-2026 .sector-showcase-mobile-title {
        display: none;
}

@media (max-width: 767px) {
.banner-home-2026 .image-animate {
          position: absolute;
          top: 5vh;
          right: -60vw;
          width: 150vw;
          animation: animateImage 20s linear infinite;
}

.banner-home-2026 .hero-title h1 {
          font-size: 34px;
}

.banner-home-2026 .card-content {
          display: flex;
          align-items: center;
          padding: 1.5rem;
}

.banner-home-2026 .feature-cards {
          overflow: scroll;
          padding-left: 1rem !important;
          padding-right: 1rem !important;
}

.banner-home-2026 .feature-card .card-content {
          padding: 15px;
}

.banner-home-2026 .feature-card {
          min-width: 80vw;
}

.banner-home-2026 .feature-card .image-icon {
          width: 80px;
}

.banner-home-2026 .feature-card .image-icon img {
          width: 100%;
          height: 100%;
          object-fit: cover;
}

.banner-home-2026 .feature-card p {
          font-size: 14px;
}

.banner-home-2026 .feature-card p strong {
          font-size: 16px;
}

/* Configurar flexbox en .sector-showcase para reordenar elementos */

.banner-home-2026 .sector-showcase {
          display: flex;
          flex-direction: column;
          margin-top: 0px;
}

.banner-home-2026 .sector-showcase > h2,
.banner-home-2026 .sector-showcase >div:not(.sector-navigation) {
           margin-left: 1rem;
          margin-right: 1rem;
}

.banner-home-2026 .sector-navigation {
          padding-left: 1rem !important;
          padding-right: 1rem !important;
          margin-left: 0;
          margin-right: 0;
}

/* Mostrar título mobile y posicionarlo primero */

.banner-home-2026 .sector-showcase-mobile-title {
          display: block;
          color: #FFF;
          font-family: "Anek Latin";
          font-size: 33px;
          font-style: normal;
          font-weight: 500;
          line-height: 98.851%;
          margin-bottom: 1.5rem;
          order: 1;
}

.banner-home-2026 .banner-container,
.banner-home-2026 {
          padding-bottom: 0px !important;
}

/* Navegación en segundo lugar (sticky) */

.banner-home-2026 .sector-navigation {
          padding: 1rem 0;
          margin-bottom: 1.5rem;
          order: 2;
}

/* Contenido de sectores en tercer lugar */

.banner-home-2026 .sector-content {
          order: 3;
}

/* Ocultar .sector-header en mobile */

.banner-home-2026 .sector-header {
          display: none;
}

.banner-home-2026 .inner-sector-content {
          grid-template-columns: 1fr;
}
}

@keyframes animateImage {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

.banner-home-2026 .feature-cards {
        display: flex;
        width: auto;
        padding: 1rem 0px;
}

.banner-home-2026 .feature-cards::-webkit-scrollbar { display: none;
}

/* Estilos para feature-card como enlace */

.banner-home-2026 a.feature-card {
        color: inherit;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-home-2026 a.feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 217, 255, 0.3);
}

.banner-home-2026 a.feature-card:active {
        transform: translateY(-2px);
}

/* Ocultar slider de casos de éxito si no hay casos para ese sector */

.banner-home-2026 .minislide-caso-de-exito:not(:has(.mini-caso-card)) {
        display: none;
}