/* =====================
      REVEAL (scroll animations)
      ===================== */
.reveal {
     opacity:0;
     transform: translateY(20px) scale(.99);
     transition: opacity 600ms cubic-bezier(.4,.2,.2,1), transform 600ms cubic-bezier(.4,.2,.2,1);
     will-change: opacity, transform;
}
.reveal.in-view {
     opacity:1;
     transform: translateY(0) scale(1);
}
/* Variables globales del diseño de la aplicación */
:root {
  --main-bg: linear-gradient(135deg, #092e50, #413574, #092e50);
  --main-bg-light: rgba(255, 255, 255, 0.03);
  --main-card: rgba(255, 255, 255, 0.03);
  --main-over-card: rgba(71, 59, 117, 0.9);
  --main-border: #22304a;
  --main-text: #fff;
  --main-accent: #6a4ff7;
  --main-accent-hover: #8a6ff9;
  --input-bg: #8a6ff9;
  --input-border: #22304a;
  --input-text: #fff;
  --success-bg: #e6f7e6;
  --success-text: #207520;
  --radius-card: 14px;
  --shadow-card: 0 4px 12px rgba(0,0,0,0.3);
  --font-main: 'Inter', sans-serif;
}

/* --- Panel expandible/modal Logística & Transporte --- */
.logistica-modal-bg {
     display: none;
     position: fixed;
     z-index: 9999;
     top: 0; left: 0; right: 0; bottom: 0;
     background: rgba(36, 44, 62, 0.92);
     justify-content: center;
     align-items: center;
     transition: opacity 0.3s;
}
.logistica-modal-bg.active {
     display: flex;
}
.logistica-modal-panel {
     background: var(--main-over-card);
     color: var(--main-text);
     border-radius: 24px;
     box-shadow: var(--shadow-card);
     border: 1px solid var(--main-border);
     max-width: 700px;
     width: 95vw;
     padding: 2.5rem 2rem 2rem 2rem;
     position: relative;
     overflow-y: auto;
     animation: fadeSlideIn 0.7s cubic-bezier(.4,2,.6,1);
}
.logistica-modal-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 2rem;
}
.logistica-modal-icon {
     margin-bottom: 1rem;
}
.logistica-modal-title {
     font-size: 1.35rem;
     font-weight: 700;
     color: var(--main-accent);
     text-align: center;
     margin-bottom: 0.5rem;
}
.logistica-modal-subtitle {
     font-size: 1.08rem;
     color: var(--main-accent-hover);
     text-align: center;
     margin-bottom: 1rem;
}
.logistica-modal-content {
     display: flex;
     flex-direction: column;
     gap: 2rem;
}
.logistica-modal-section {
     background: rgba(127, 138, 160, 0.08);
     border-radius: 12px;
     padding: 1.2rem 1rem;
     margin-bottom: 0.5rem;
     box-shadow: 0 2px 8px 0 rgba(36,44,62,0.10);
     opacity: 0;
     transform: translateY(30px);
     animation: fadeInSection 0.8s forwards;
}
.logistica-modal-section-title {
     font-weight: 600;
     color: var(--main-accent);
     font-size: 1.08rem;
     margin-bottom: 0.3rem;
}
.logistica-modal-section-text {
     color: var(--main-text);
     font-size: 0.98rem;
}
.close-logistica-modal {
     position: absolute;
     top: 18px;
     right: 24px;
     background: #222;
     color: #fff;
     border: none;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     font-size: 1.5rem;
     cursor: pointer;
     z-index: 2;
     opacity: 0.85;
     transition: background 0.2s;
}
.close-logistica-modal:hover {
     background: #444;
}
@keyframes fadeSlideIn {
     0% { opacity: 0; transform: translateY(60px) scale(0.98); }
     100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeInSection {
     0% { opacity: 0; transform: translateY(30px); }
     100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-slide {
     animation: fadeSlideIn 0.7s cubic-bezier(.4,2,.6,1);
}
.animate-fade {
     animation: fadeInSection 0.8s forwards;
}
@media (max-width: 800px) {
     .logistica-modal-panel {
          max-width: 98vw;
          padding: 1.2rem 0.5rem 1.2rem 0.5rem;
     }
}
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Inter', sans-serif;
}

body {
     background: var(--main-bg);
     color: var(--main-text);
     line-height: 1.6;
     font-family: var(--font-main);
}

nav {
     background-color: transparent;
     padding: 1rem 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
}

nav .logo {
     color: #9A84F6;
     font-size: 1.5rem;
     font-weight: bold;
}

nav ul {
     list-style: none;
     display: flex;
     gap: 1.5rem;
}

nav ul li a {
     color: #FFFFFF;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s;
}

nav ul li a:hover {
     color: #9A84F6;
}

header {
     padding: 4rem 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
}

@media (min-width: 768px) {
     header {
     flex-direction: column;
     align-items: center;
     text-align: center;
     }
     .hero-content {
     margin-bottom: 8rem;
     }
}
@media (min-width: 1024px) {
     header {
     flex-direction: row;
     justify-content: space-around;
     text-align: left;
     align-items: center;
     }
     .hero-content {
     margin-bottom: 0;
     margin-top: 5rem;

     }
}

.hero-content {
     max-width: 600px;
}

@media (max-width: 1400px) {
     .hero-content {
     max-width: 440px;
     }
}

@media (max-width: 1100px) {
     .hero-content {
     max-width: 340px;
     margin-bottom: 2rem;
     }
     .hero-image { 
     margin-bottom: 2rem;
     }
}

header h1 {
     font-size: 2.8rem;
     color: #ececec;
}

header p {
     font-size: 1.2rem;
     margin-top: 1rem;
     color: #B1B1C7;
}

.cta-button {
     background-color: #684BDB;
     color: white;
     padding: 1rem 2rem;
     border: none;
     border-radius: 8px;
     margin-top: 2rem;
     font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.3s;
}

.cta-button:hover {
     background-color: #7F5AF0;
}

.hero-image {
     position: relative;
     width: 320px;
     height: 320px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0;
     margin-top: 2rem;
}

.hero-image img {
     position: absolute;
     top: 50%;
     left: 50%;
     max-width: 300px;
     max-height: 600px;
     width: 100%;
     height: auto;
     object-fit: contain;
     border-radius: 1rem;
     opacity: 0;
     z-index: 1;
     transform: translate(-50%, -50%) scale(0.7);
     filter: blur(2px) brightness(0.8);
     transition: 
     transform 0.7s cubic-bezier(.4,2,.6,1), 
     opacity 0.7s cubic-bezier(.4,2,.6,1),
     filter 0.7s cubic-bezier(.4,2,.6,1),
     z-index 0s;
}

.hero-image img.center {
     opacity: 1;
     z-index: 3;
     transform: translate(-50%, -50%) scale(1);
     filter: none;
}

.hero-image img.left {
     opacity: 1;
     z-index: 2;
     transform: translate(-120%, -50%) scale(0.7);
     filter: blur(2px) brightness(0.7);
}

.hero-image img.right {
     opacity: 1;
     z-index: 2;
     transform: translate(20%, -50%) scale(0.7);
     filter: blur(2px) brightness(0.7);
}

.hero-image img:not(.center):not(.left):not(.right) {
     opacity: 0;
     z-index: 1;
}

@media (max-width: 600px) {
     .hero-image {
     width: 100vw;
     height: 220px;
     cursor: pointer;
     }
     .hero-image img,
     .hero-image img.center {
     max-width: 140px;
     max-height: 220px;
     }
}

.hero-image-modal-bg {
     display: none;
     position: fixed;
     z-index: 9999;
     top: 0; left: 0; right: 0; bottom: 0;
     background: rgba(20,20,30,0.92);
     justify-content: center;
     align-items: center;
     transition: opacity 0.3s;
}
.hero-image-modal-bg.active {
     display: flex;
}
.hero-image-modal {
     position: relative;
     background: transparent;
     border-radius: 1.5rem;
     padding: 0;
     box-shadow: 0 8px 32px 0 rgba(0,0,0,0.25);
     max-width: 95vw;
     max-height: 90vh;
     width: 95vw;
     height: 70vw;
     min-height: 320px;
     min-width: 220px;
     display: flex;
     align-items: center;
     justify-content: center;
}
.hero-image-modal .hero-image {
     width: 100vw;
     height: 70vw;
     max-width: 500px;
     max-height: 90vh;
     margin: 0;
     z-index: 1;
}
.hero-image-modal .hero-image img,
.hero-image-modal .hero-image img.center {
     max-width: 350px;
     max-height: 90vh;
}
.hero-image-modal .close-modal-btn {
     position: absolute;
     top: 10px;
     right: 16px;
     background: #222;
     color: #fff;
     border: none;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     font-size: 1.5rem;
     cursor: pointer;
     z-index: 2;
     opacity: 0.85;
     transition: background 0.2s;
}
.hero-image-modal .close-modal-btn:hover {
     background: #444;
}

.section {
     padding: 4rem 2rem;
     text-align: center;
}

.section h2 {
     color: #9A84F6;
     margin-bottom: 2rem;
     font-size: 2.5rem;
}

.benefits-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
}

@media (min-width: 900px) {
     .benefits-cards {
     grid-template-columns: repeat(3, 1fr);
     }
}

.benefit-card {
     background: var(--main-card);
     border-radius: var(--radius-card);
     box-shadow: var(--shadow-card);
     border: 1px solid var(--main-border);
     color: var(--main-text);
     text-align: left;
     display: flex;
     flex-direction: column;
     gap: 2rem;
     position: relative;
     min-height: 320px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     align-items: flex-start;
     padding: 20px 24px;
     transition: transform 0.3s, box-shadow 0.3s;
}

.use-case-card {
           background: var(--main-card);
           border-radius: var(--radius-card);
           box-shadow: var(--shadow-card);
           border: 1px solid var(--main-border);
           color: var(--main-text);
           text-align: left;
           display: flex;
           flex-direction: row;
           gap: 2rem;
           position: relative;
           min-height: 320px;
           width: 100%;
           max-width: 100%;
           margin-left: auto;
           margin-right: auto;
           align-items: flex-start;
           padding: 20px 24px;
           transition: transform 0.3s, box-shadow 0.3s;
}

@media (max-width: 900px) {
     .use-case-card {
          flex-direction: column;
          gap: 1.2rem;
          min-height: unset;
          padding: 16px 10px;
          align-items: flex-start;
     }
}

@media (max-width: 600px) {
     .use-case-card {
          padding: 10px 2px;
          border-radius: 10px;
          gap: 0.7rem;
     }
}

.use-case-card .use-case-icon {
     width: 48px;
     height: 48px;
     margin-bottom: 10px;
     align-self: flex-start;
}
.use-case-card .use-case-title {
     font-size: 1.3rem;
     font-weight: 700;
     margin-bottom: 10px;
     color: #fff;
}
.use-case-features {
           display: flex;
           flex-direction: row;
           margin-top: 10px;
           min-width: 230px;
           max-width: 750px;
           margin-bottom: 30px;
           align-items: center;
           justify-content: center;
           gap: 3rem;
}
.use-case-feature {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           background: rgba(255,255,255,0.07);
           border-radius: 8px;
           padding: 10px 12px;
           gap: 0.3rem;
           min-width: 350px !important;
           height: 300px;
}

@media (max-width: 900px) {
     .use-case-features {
          flex-direction: column;
          gap: 1.2rem;
          align-items: stretch;
          max-width: 100%;
     }
     .use-case-feature {
          min-width: unset !important;
          width: 100%;
          height: auto;
          padding: 10px 8px;
     }
}

@media (max-width: 600px) {
     .use-case-features {
          gap: 0.7rem;
          margin-bottom: 18px;
     }
     .use-case-feature {
          padding: 8px 4px;
          border-radius: 7px;
     }
}
.use-case-feature .feature-icon {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
     margin-bottom: 2px;
}
.use-case-feature .feature-title {
     font-weight: 600;
     font-size: 1rem;
     color: #fff;
     margin-bottom: 2px;
}
.use-case-feature .feature-desc {
     font-size: 0.97rem;
     color: #f3f3fa;
     margin-left: 0;
}

.benefit-card:hover,
.use-case-card:hover {
     transform: translateY(-5px) scale(1.03);
     box-shadow: 0 8px 32px 0 rgba(104,75,219,0.18);
}

.benefit-card img,
.use-case-card img {
     width: 40px;
     height: 40px;
     margin-bottom: 20px;
     filter: drop-shadow(0 2px 8px rgba(154,132,246,0.15));
}

.benefit-title,
.use-case-card h3 {
     font-size: 1.2rem;
     font-weight: 600;
     color: #fff;
     margin-bottom: 10px;
     letter-spacing: 0.01em;
     text-shadow: 0 2px 8px rgba(104,75,219,0.10);
}

.benefit-description,
.use-case-card p {
     font-size: 0.95rem;
     color: #f3f3fa;
     text-shadow: 0 1px 4px rgba(104,75,219,0.08);
}

iframe {
     width: 100%;
     max-width: 800px;
     height: 450px;
     border: none;
     border-radius: 12px;
     margin-top: 2rem;
}

.screenshots {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     justify-content: center;
     margin-top: 2rem;
}

.screenshots img {
     max-width: 300px;
     border-radius: 12px;
}

.use-cases {
     background-color: transparent;
     padding: 80px 20px;
     text-align: center;
}

.use-cases .container {
     max-width: 1200px;
     margin: 0 auto;
}

.use-cases h2 {
     font-size: 2.5rem;
     color: #9A84F6;
     margin-bottom: 10px;
}

.use-cases .subtitle {
     font-size: 1.2rem;
     color: #B1B1C7;
     margin-bottom: 50px;
}

.use-cases-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
}

     /* Tabs de casos de uso */
/* Layout para lista y card */
.use-cases-flex-layout {
     display: flex;
     gap: 32px;
     justify-content: center;
     align-items: flex-start;
     margin-top: 30px;
}
.use-cases-list {
     list-style: none;
     padding: 0;
     margin: 0;
     min-width: 220px;
     background: none;
     border-radius: 12px;
     box-shadow: none;
     display: flex;
     flex-direction: column;
     gap: 6px;
}
.use-cases-list li {
     color: #fff;
     font-size: 1.08rem;
     font-weight: 600;
     padding: 12px 18px;
     border-radius: 8px;
     cursor: pointer;
     transition: background 0.2s, color 0.2s;
     background: none;
     border: none;
     outline: none;
}
.use-cases-list li.active {
     color: #9A84F6;
     background: rgba(154,132,246,0.08);
}
.use-cases-list li:hover:not(.active) {
     color: #B1B1C7;
     background: rgba(154,132,246,0.04);
}
.use-cases-card-container {
     flex: 1;
     min-width: 320px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
}
.use-cases-tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     margin-bottom: 40px;
     background: none;
     border: none;
}
.use-cases-tabs .tab {
     background: none;
     color: #fff;
     border: none;
     font-size: 1.08rem;
     font-weight: 600;
     padding: 10px 22px;
     border-radius: 8px;
     cursor: pointer;
     transition: color 0.2s, background 0.2s;
     outline: none;
}
.use-cases-tabs .tab.active {
     color: #9A84F6;
     background: none;
     border-bottom: 2px solid #9A84F6;
}
.use-cases-tabs .tab:hover:not(.active) {
     color: #B1B1C7;
     background: none;
}

/* Carousel tags (chips) */
.use-cases-carousel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
.use-cases-carousel-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     justify-content: center;
     margin-bottom: 18px;
     margin-bottom: 1em;
}
.carousel-tag {
     background: var(--main-bg-light);
     color: #fff;
  border: 1px solid var(--main-accent-hover);
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  outline: none;
}
.carousel-tag.active,
.carousel-tag:focus {
     background: var(--main-accent);
     color: #fff;
     border: 1.5px solid var(--main-accent);
}
.carousel-tag:hover:not(.active) {
     background: var(--main-accent-hover);
     color: #fff;
}

/* Carousel container */
.use-cases-carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2rem auto;
}
.carousel-arrow {
  background: var(--main-bg-light);
  color: var(--main-accent);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.carousel-arrow:hover {
  background: var(--main-accent);
  color: #fff;
}
.use-cases-carousel {
     display: flex;
     flex-direction: row;
     overflow-x: auto;
     scroll-behavior: smooth;
     gap: 1.5rem;
     width: 100%;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
     padding-bottom: 8px;
}

@media (max-width: 900px) {
     .use-cases-carousel {
          gap: 0.7rem;
          max-width: 100vw;
          padding-left: 2px;
          padding-right: 2px;
     }
}

@media (max-width: 600px) {
     .use-cases-carousel {
          gap: 0.4rem;
          padding-left: 0;
          padding-right: 0;
     }
}
.use-cases-carousel::-webkit-scrollbar {
  display: none;
}
@media (max-width: 700px) {
  .use-cases-carousel {
    gap: 0.7rem;
  }
  .use-cases-carousel-container {
    max-width: 100vw;
  }
  .carousel-tag {
    font-size: 0.85rem;
    padding: 5px 10px;
  }
}

footer {
     background-color: #1E1E2E;
     padding: 2rem;
     text-align: center;
     color: #B1B1C7;
}

footer a {
     color: #9A84F6;
     margin: 0 1rem;
     text-decoration: none;
}

.main-container {
     max-width: 1900px;
     margin: 0 auto;
     padding: 0 16px;
}

.hamburger {
     display: none;
     flex-direction: column;
     justify-content: center;
     width: 36px;
     height: 36px;
     background: none;
     border: none;
     cursor: pointer;
     z-index: 1001;
}
.hamburger span {
     display: block;
     width: 28px;
     height: 4px;
     margin: 4px auto;
     background: #fff;
     border-radius: 2px;
     transition: all 0.3s;
}
@media (max-width: 800px) {
     nav ul {
     position: fixed;
     top: 0;
     right: 0;
     height: 100vh;
     width: 220px;
     background: transparent;
     flex-direction: column;
     align-items: flex-start;
     padding: 80px 24px 24px 24px;
     gap: 1.5rem;
     transform: translateX(100%);
     transition: transform 0.3s;
     z-index: 1000;
     box-shadow: -2px 0 16px rgba(0,0,0,0.15);
     }
     nav ul.open {
     transform: translateX(0);
     }
     .hamburger {
     display: flex;
     }
}

/* Fondo degradado animado con blobs para las primeras 3 secciones */
.background-blobs {
     position: fixed;
     top: 0; left: 0; width: 100vw; height: 1200px;
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
}
.background-blobs svg {
     position: absolute;
     filter: blur(32px);
     opacity: 0.45;
     animation: blobMove 18s ease-in-out infinite alternate;
}
.background-blobs .blob1 {
     top: -180px; left: -180px; width: 600px; height: 600px;
     animation-delay: 0s;
}
.background-blobs .blob2 {
     top: 400px; right: -200px; width: 500px; height: 500px;
     animation-delay: 4s;
}
.background-blobs .blob3 {
     top: 800px; left: 60vw; width: 400px; height: 400px;
     animation-delay: 8s;
}
@keyframes blobMove {
     0%   { transform: scale(1) translateY(0) rotate(0deg);}
     50%  { transform: scale(1.15) translateY(40px) rotate(10deg);}
     100% { transform: scale(1) translateY(-20px) rotate(-8deg);}
}
/* Eleva el contenido sobre los blobs */
.main-container, nav, header, section.section {
     position: relative;
     z-index: 1;
}