:root {
    --primary-color: #000000;
    --hover-color: #242424;
    --accent-color: #0071FF;
    --text-color: #c9c9c9;
    --novo-color: #5e5fee;
}

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

body {
    font-family: "Instrument Sans", sans-serif;
    line-height: 1.6;
    color: #ffffff;
    background-color: #000000;
}

nav {
    background-color: var(--primary-color);
    max-width: 1200px;
    margin: 0 auto 0;
    align-items: center;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

nav .logo{
    margin-right: auto;
}

nav a {
    display: flex;
    text-decoration: none;
    color: var(--text-color);
    padding: 1em 2em;
    transition: background-color 150ms ease;
}

nav a:hover {
    background-color: var(--hover-color);
}

nav a.active-link {
    border-color: 2px solid var(--novo-color);
}

nav a.contacto-link {
    font-weight: bold;
    color: var(--primary-color);
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
}

#open-sidebar-button {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    margin-left: auto;
    cursor: pointer;
}

#close-sidebar-button {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    cursor: pointer;
}

#overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    inset: 0;
    z-index: 9;
    display: none;
}

img {
    width: 100%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ==========================================
   HEADER Y NAVEGACIÓN
   ========================================== */

.logo img {
    width: 12em;
    height: auto;
}

/* ==========================================
   BOTONES
   ========================================== */
.btn {
    display: inline-block;
    padding: min(0.8em,8%);
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
    font-weight: 550;
    transition: all 0.3s;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    cursor: pointer;
    border: none;
}

.btn-primary {
    /*background-color: #667eea;*/
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
    color: #000000;
}

.btn-primary:hover {
    background-color: #5568d3;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: #667eea;
    border: 2px solid #667eea;
}

.btn-secondary:hover {
    background-color: #667eea;
    color: #fff;
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
    text-align: center;
}

/* ==========================================
   HERO SECTIONS
   ========================================== */
.hero, .page-hero {
    padding: 3em 2rem 3em;
    background:#000000;
    color: white;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content-main {
    padding: min(1em,8%);
    width: 1010px;
    flex-shrink: 1;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.hero-content {
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
}

.hero-logo {
    max-width: 300px;
    margin-bottom: 2rem;
}

/*Texto con color degradado*/
.hero h1, .page-hero h1 {
    text-align: left;
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.hero p, .page-hero p {
    text-align: left;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-bottom: 2rem;
    line-height: 1.8;
}

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

/* Solution-specific heroes */
.solution-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    text-align: left;
}

.solution-hero .hero-content {
    max-width: none;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-bottom: 1rem;
    font-weight: 600;
}

.hero-subtitle {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem) !important;
    font-weight: 600;
    margin-bottom: 1rem !important;
}

.hero-description {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em) !important;
    opacity: 0.95;
}

.hero-visual img {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.hero-decoration {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 35%;
}

.hero-decoration img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 10/9;
    object-fit: cover;
}
/* ==========================================
   PROBLEM/SOLUTION SECTIONS
   ========================================== */
.problem-solution {
    background-color: #000000;
}

.two-col-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.col-content h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin-bottom: 1.5rem;
    color: #667eea;
}

.challenge-list, .solution-list {
    list-style: none;
    padding-left: 0;
}

.challenge-list li {
    padding: 0.8rem 0 0.8rem 2rem;
    position: relative;
    border-left: 3px solid #ff6b6b;
    margin-bottom: 0.5rem;
}

.challenge-list li:before {
    content: "❌";
    position: absolute;
    left: 0.5rem;
}

.solution-list li {
    padding: 0.8rem 0 0.8rem 2rem;
    position: relative;
    border-left: 3px solid #51cf66;
    margin-bottom: 0.5rem;
}

.solution-list li:before {
    content: "✅";
    position: absolute;
    left: 0.5rem;
}

/* ==========================================
   SECTIONS GENERALES
   ========================================== */

   /* ==========================================
   SOLUCIONES GRID
   ========================================== */
.soluciones-section {
    background-color: #000000;
    margin-bottom: 6rem;
}

.soluciones-content-main {
    padding: min(1em,8%);
    width: 1010px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-text {
    text-align: center;
    margin-bottom: 4rem;
}

.intro-text h2 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 1rem;
}

.intro-text p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em) ;
    color: #666;
}

.soluciones-grid {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.solucion-card {
    background: transparent;
    max-width: 300px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s;
    text-align: center;
}

.solucion-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
}

.card-image {
    max-width: 300px;
    margin: 0 auto 1em;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s;
}

.solucion-card:hover .card-image img {
    transform: scale(1.1);
}

.card-content {
    padding: 2rem;
}

.card-content h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.card-content p {
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ==========================================
   EXPERIENCIAS SECTIONS
   ========================================== */
.pregunta-experiencias {
    padding: min(5em,8%);
    background-color: #120336;
    margin: 0 auto 3rem;
    max-width: 1200px;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pregunta-experiencias h2 {
    text-align: center;
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.experiencias {
    padding: min(5em,8%);
    background-color: #000000;
    text-align: center;
}

.experiencias h2 {
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-bottom: 3rem;
    color: #333;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    background: rgb(0, 0, 0);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-10px);
}

.stat-number {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.stat-card h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.stat-card p {
    color: #ffffff;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
}

/* ==========================================
   VENTAJAS SECTION
   ========================================== */
.ventajas {
    padding: 50px 2rem;
    max-width: 1200px;
    background-color: #000000;
    margin: 0 auto 1em;
}

.ventajas h2 {
    text-align: center;
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.ventajas-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.ventajas-intro p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    line-height: 1.8;
    color: #ffffff;
}

.ventajas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.ventaja-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background-color: transparent;
    border-radius: 10px;
    transition: all 0.3s;
}

.ventaja-item:hover {
    background: #667eea;
    color: white;
    transform: scale(1.05);
}

.ventaja-item .numero {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    font-weight: 700;
    color: #667eea;
    min-width: 50px;
}

.ventaja-item:hover .numero {
    color: white;
}

.ventaja-item h3 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
}

.ventajas-image {
    max-width: 1100px;
    margin: 1em;
}

.ventajas-image img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================
   COMO HACEMOS SECTION / FALTA
   ========================================== */
.como-hacemos {
    padding: min(5em,8%);
    max-width: 1100px;
    margin: 0 auto 1em;
    flex-shrink: 1;
    min-width: 200px;
    /*margin: 0 auto 3rem;*/
    background: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.como-hacemos h2 {
    text-align: center;
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-bottom: 2rem;
}

.como-hacemos-contenedor {
    max-width: 1010px;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.como-hacemos-content {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.como-hacemos-content ol {
    max-width: 450px;
    background-color: #190041;
    border: 0.1px solid white;
    padding-right: 1;
    padding-left: 3em;
    padding-top: 1;
    padding-bottom: 1rem;

}

.como-hacemos-content ol li {
    border-left: 2px;
    display: list-item;
    font-weight: bold;
    margin-top: 0.5rem;
    margin-right: 3rem;
}

.como-hacemos-content h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.como-hacemos-content p {
    margin-right: 1em;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    line-height: 1.5rem;
    color: #ffffff;
}

.como-hacemos-decoration {
    max-width: 400px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.como-hacemos-decoration img {
    max-width: 100%;
    height: auto;
    object-fit:cover;
}


/* ==========================================
   INDUSTRIAS SECTION
   ========================================== */
.industrias {
    padding: 80px 2rem;
    background-color: #190041;
    margin: auto;
}

.industrias h2 {
    text-align: center;
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.industrias-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    color: #ffffff;
    line-height: 1.8;
}

.intro-text {
    text-align: center;
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #c285ff 30%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.industrias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.industria-card {
    background: transparent;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    text-align: center;
}

.industria-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.industria-card h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin-bottom: 1rem;
    color: #ffffff;
}

.industria-card p {
    color: #ffffff;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    line-height: 1.6;
}

/* ==========================================
   CLIENTES SECTION
   ========================================== */
.clientes {
    padding: min(2em,8%);
    margin: 0 auto 3rem;
    max-width: 1100px;
    min-width: 200px;
    background-color: #000000;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.clientes h2 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 3rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.clientes-image {
    padding: 0px 1rem 0px;
    justify-content: center;
    align-items: center;
}

.clientes-image img {
    max-width: 100%;
    height: auto;
    
    object-fit: cover;
}

/* ==========================================
   CTA
   ========================================== */
.cta {
    padding: min(1em,8%);
    background: #190041;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-container {
    padding: min(1em,8%);
    max-width: 1200px;
    min-width: 200px;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.cta-container-derecha {
    width: 600px;
    margin: 2em;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cta-main {
    padding: min(5em,8%);
    background: #190041;
    text-align: center;
    color: white;
}

.cta-cafe-virtual {
    padding: 80px 2rem;
    max-width: 1100px;
    margin: 0 auto 1em;
    background: #000000;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-cafe-virtual-frame {
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    padding-top: 75%;
}

.cta-cafe-virtual-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.cta-content {
    padding: min(1em,8%);    
    flex-shrink: 1;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.cta h2 {
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin: 1rem;
    /*margin-top: 2rem;
    margin-bottom: 1.5rem;
    max-width: 550px;*/
    line-height: 1.4;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cta p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin: 1rem;
    /*margin-bottom: 2rem;
    max-width: 550px;*/
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.cta-main h2 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 1.5rem;
    justify-content: center;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cta-main p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.cta-cafe-virtual h2 {
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    text-align: center;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cta-cafe-virtual p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.8;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;
}

.cta-solution-img {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.cta-solution-img img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    aspect-ratio:2/3;
    object-fit: cover;
}

/* ==========================================
   QUOTE SECTION
   ========================================== */
/*.quote-section {
    padding: 80px 2rem;
    background-color: #190041;
    text-align: center;
}*/

.quote-section {
    max-width: 900px;
    margin: 0 auto 3rem;
    margin-top: 3rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.quote-section p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.quote-image {
    max-width: 400px;    
}

.quote-image img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

/* ==========================================
   PROCESS & TIMELINE
   ========================================== */
.process-section, .metodologia-section {
    background-color: #f9f9f9;
}

.process-timeline, .metodologia-timeline {
    max-width: 800px;
    margin: 0 auto;
}

.process-step, .timeline-item {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

.step-number, .timeline-marker {
    min-width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: 700;
}

.process-step h3, .timeline-content h3 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    margin-bottom: 0.5rem;
    color: #667eea;
}

.process-step p, .timeline-content p {
    color: #666;
    line-height: 1.6;
}

/* ==========================================
   CONCEPTO PAGE ESPECÍFICO
   ========================================== */
.page-concept {
    padding: 20px 1rem 10px;
    text-align: center;
    background:#000000;
    color: white;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-concept h1 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
}
.page-concept p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
}

.concept-content {
    width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
}

.isotipo-novo-concepto {
    padding: 30px 1em 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.isotipo-novo-concepto img {
    max-width: 300px;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.concepto-principal {
    padding: min(1em,8%);
    background-color: #000000;
    max-width: 1200px;
    min-width: 200px;
    margin-top: 1rem;
    margin: 0 auto 1em;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.concepto-principal p {
    text-align: center;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    font-weight: bold;
}

.concepto-intro {
    text-align: center;
    margin-bottom: 4rem;
}

.concepto-intro h2 {
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-bottom: 1.5rem;
}

.concepto-intro .lead {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    color: #666;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
}

.concepto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center;
    gap: 2em;
}

.concepto-block {
    max-width: 400px;
    min-width: 300px;
    /*padding: 2.5rem;*/
    position: relative;
    /*padding-top: 4rem;*/
    text-align: center;
    justify-content: center;
    align-items: center;
}

.concepto-block p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    font-weight: 100;
}

.card-img-concepto {
    overflow: hidden;
}

.card-img-concepto img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
}

.card-content-concepto {
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto 3rem;
    text-align: center;
}

.card-content-concepto h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin-bottom: 1rem;
    color: #ffffff;
}

.card-content-concepto p {
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.cta-buttons-concepto {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 6rem;
}
        
.filosofia-section {
    padding: 60px 2rem 30px;
    max-width: 1200;
    background-color: #120336;
    flex-shrink: 1;
    justify-content: center;
    text-align: center;
}

.filosofia-introduction {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.filosofia-introduction p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: bold;
    line-height: 1.5;    
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.filosofia-content {
    max-width: 1000px;
    gap: 3rem;
    margin: 0 auto 1em;
    justify-content: center;
    align-items: center;
}

.isotipo-mis-vis {
    margin: 3em;
}

.isotipo-mis-vis img {
    max-width: 500px;
    width: 100%;
    height: auto;
    aspect-ratio: 8/2;
    object-fit: cover;
    object-position: center;
}

.filosofia-text h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin: 2rem 0 1rem;
    color: #667eea;
}

.filosofia-text h3:first-child {
    margin-top: 0;
}

.filosofia-text p {
    color: #ffffff;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.filosofia-visual img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.filosofia-grid {    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
}

.modelo-card img{
    margin-top: 5rem;
    width: 100%;
    height:auto;
    aspect-ratio: 6/4;
    object-fit: cover;
}

.filosofia-card {
    background: transparent;
    padding: 0px 3em 0px;
    text-align: center;
}

.filosofia-card h3 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.filosofia-card p {
    color: #ffffff;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    line-height: 1.6;
}

.mision-vision-section {
    padding: 20px 3rem 20px;
    background-color: #120336;
}

.mision-vision-container {
    max-width: 1000px;
    margin: 0 auto 3rem;
    text-align: center;
    align-items: center;
}

.mision-vision-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.mision-vision-img {
    padding: min(1em, 8%);
    min-width: 250px;
    margin: 3em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30%;
}

.mision-vision-img img {
    width: 90%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.mision-vision-content h3 {
    text-align: left;
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.mision-vision-content p {
    text-align: left;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    max-width: 500px;
    margin-bottom: 1rem;
    color: white;
}

.diferenciadores-section {
    padding: 50px 3rem 20px;
    background-color: #000000;
}

.diferenciador-container{ 
    max-width: 1000px;
    margin: 0 auto 3rem;
    text-align: center;
    justify-content: center;
}

.diferenciador-container h2 { 
    text-align: center;
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.diferenciador-muckup {
    height: 500px;
    overflow: hidden;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.diferenciador-muckup img {
    width: 100%;
    height: 100%;
    object-position: right;
}

.diferenciador-container p { 
    text-align: center;
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: bold;
    max-width: 1000px;
    margin-bottom: 1rem;
    color: white;
}

.diferenciadores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.diferenciador-card {
    text-align: center;
    padding: 2rem;
    background: transparent;
    border-radius: 15px;
    transition: all 0.3s;
}

.diferenciador-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}

.diferenciador-icon {
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-bottom: 1rem;
}

.diferenciador-card h3 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    margin-bottom: 0.8rem;
    color: #ffffff;
}

.cta-cafe-virtual-section {
    padding: 30px 3rem 30px;
    background-color: #120336;
}

.cta-cafe-virtual-concepto {    
    max-width: 1000px;
    margin: 0 auto 3rem;
    text-align: center;
    justify-content: center;
}

.cta-cafe-virtual-concepto h2 {
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    max-width: 1000px;
    line-height: 1.4;
    text-align: center;
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cta-cafe-virtual-concepto p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 550px;
    text-align: center;
    line-height: 1.8;
}

.newsletter-concepto-section {
    padding: 80px 3rem 60px;
    background-image: url('assets/Nebula---31.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.newsletter-concepto-content {
    max-width: 1000px;
    margin: 0 auto 3rem;
    text-align: center;
    justify-content: center;
}

.newsletter-concepto-content img {
    border-radius: 15px;
}

.btn-newsletter {
    display: inline-block;
    padding: 1px 1px;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 550;
    transition: all 0.3s;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    cursor: pointer;
    border: none;
}

.btn-secondary-newsletter {
    background-color: transparent;
    color: #667eea;
    border: 1px solid transparent;
}

.btn-secondary-newsletter:hover {
    background: linear-gradient(135deg, #c285ff 15%, #89f1ff 80%);;
    color: #fff;
    transform: translateY(-1.5px);
}

/* ==========================================
   PROXIMAMENTE / COMING SOON
   ========================================== */
.coming-soon-section {
    padding: 60px 3rem 60px;
    background-image: url('assets/fondo plantilla.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.coming-soon-content {
    padding: 80px 3rem 30px;
    padding: min(1em, 8%);
    max-width: 1200px;
    margin: 0 auto 3rem;
    text-align: center;
    justify-content: center;
}

.coming-soon-icon {
    margin-bottom: 2rem;
}

.coming-soon-icon img {
    max-width: 200px;
    opacity: 0.9;
}

.coming-soon-content h1 {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.coming-soon-content h2 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.coming-soon-content h3 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.coming-soon-content h4 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-bottom: 1rem;
    color: white;
}

.coming-soon-content p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    text-align: left;
    margin: 0 auto 1rem;
    justify-content: center;
    max-width: 900px;
}

.coming-soon-content .subtitle {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    opacity: 0.95;
    margin-bottom: 3rem;
}

.vanguard-technology {
    padding: 30px 1rem 0px;
    max-width: 1050px;
    margin: 0 auto 3rem;
    text-align: left;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.vanguard-technology h3 {
    margin-left: 1rem;
}

.tec-va-content {
    padding: min(1em,8%);
    width: 500px;
}

.tec-va-box {
    padding: 10px 1.5rem 10px;
    max-width: 500px;
    background-color: #333;
    border-radius: 9px;
    margin: 1rem;
}

.tec-va-box h4 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    line-height: 45px;
}

.tec-va-img {
    margin: 0.5em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10%;
}

.tec-va-img img {
    width: 100%;
    height:auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.countdown-container {
    padding: 20px 1rem 30px;
    max-width: 1000px;
    margin: 0 auto 1rem;
    margin-top: -1rem;
    margin-bottom: -1;
    text-align: center;
    justify-content: center;
}

.countdown-text {
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 3rem;
}

.cta-blog {
    padding: 10px 1rem 10px;
    background: transparent;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
}

/* ==========================================
   CONTACT PAGE
   ========================================== */
.contact-intro-section {
    padding: 120px 0rem 0px;
    max-width: 1100px;
    margin: 0em auto 1em;
    text-align: center;
    background:#000000;
    color: white;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-intro-section h1 {
    text-align: left;
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.contact-intro-section p {
    text-align: left;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.contact-section {
    padding: 50px 1rem 40px;
    background-color: #0d0326;
}

.contact-section-title h2 {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    margin: 0 auto 1rem;
    text-align: center;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.contact-content {
    padding: min(1em, 8%);
    margin: 0 auto 1rem;
    width: 1100px;
    min-width: 200px;
    text-align: left;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3em;
}

.contact-intro {
    padding: min(1em, 8%);
    width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
}

.contact-buttons {
    display: flex;
    gap: 1rem;
    justify-content: left;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.contact-decoration {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.contact-decoration img {
    width: 100%;
    height:auto;
    aspect-ratio: 4/5;
    object-fit: cover;
}

/*INICIO GRID*/

.contact-grid-margin {
    margin-bottom: 0rem;
}

.contacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto 1rem;
    margin-bottom: -2rem;
}

.contacto-item {
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background-color: transparent;
    border-radius: 10px;
    transition: all 0.3s;
}

.contacto-item:hover {
    background: transparent;
    color: white;
    transform: scale(1.05);
}

.contacto-item .numero {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    min-width: 50px;
}

.contacto-item:hover .numero {
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;;
}

.contacto-item h2 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    line-height: 30px;
}

.contacto-item p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-top: 0.8rem;
}

/*FIN GRID*/

.contact-info-container {
    max-width: 1100px;
    margin: 0 auto 1rem;
    text-align: center;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-info-card {
    padding: min(1em,8%);
    padding: 2rem;
    width: 1010px;
    min-width: 200px;
    border-radius: 15px;
    text-align: center;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.contact-info-card h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    margin-bottom: 1.5rem;
    color: #667eea;
}

.info-item {
    padding: 20px 1.5em 20px;
    background-color: #333;
    border-radius: 3px;
    width: 420px;
    height: 260px;
    margin: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-icon {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    min-width: 40px;
}

.info-content h4 {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin-bottom: 0.3rem;
    color: #ffffff;
}

.info-content p {
    color: #ffffff;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin: 1rem;
}

.info-content a {
    color: #000000;
    text-decoration: none;
}

.info-content a:hover {
    text-decoration: underline;
}

.contacto-formulario {
    padding: 0px 0rem 0px;
    max-width: 1100px;
    margin: 0 auto 1rem;
    text-align: center;
    justify-content: left;
}

.contacto-formulario h3 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    margin-top: -2rem;
}

.contacto-formulario p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin: 1.5rem;
}

.llamado-accion-section {
    padding: 60px 3rem 20px;
    background-color: #000000;
}

.llamado-accion-content {
    padding: 0px 0rem 0px;
    max-width: 1100px;
    margin: 0 auto 1rem;
    text-align: left;
    justify-content: center;
}

.llamado-accion-content h2 {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    text-align: center;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.llamado-accion-content h3 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    line-height: 30px;
    margin: 1rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.llamado-accion-content p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    margin: 1.5rem;
}

.llamado-accion-box {
    padding: 10px 3rem 10px;
    background-color: #97b8ff;
    max-width: 1000px;
    border-radius: 3px;
    margin: 0 auto 1rem;
    text-align: center;
    justify-content: center;
}

.llamado-accion-box h3 {
    color: #000000;
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
}

.llamado-accion-box p {
    color: #000000;
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em) ;
    font-weight: bold;
}

/*INICIO GRID*/

.llamado-accion-grid {
    padding: 30px 2rem 10px;
    background-color: #000000;
    text-align: center;
    justify-content: center;
}

.llamado-accion-grid h3 {
    color: white;
}

.llamado-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto 1rem;
}

.llamado-stat-card {
    background: transparent;
    padding: 10px 1rem 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.llamado-stat-card:hover {
    transform: translateY(-5px);
}

.llamado-stat-number {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.llamado-stat-card h3 {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.llamado-stat-card p {
    color: #ffffff;
}

/*FIN GRID*/

/* ==========================================
   PRODUCTOS
   ========================================== */


/*section 1*/


.producto-section-1 {
    padding: min(1em, 8%);
    padding: 30px 2rem 10px;
    background-color: black;
    max-width: 1200px;
    flex-shrink: 1;
    margin: 0 auto 3rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.producto-section-1 h1 {
    max-width: 1100px;
    min-width: 200px;
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    margin: 2rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.producto-intro {
    max-width: 1100px;
    margin: 0 auto 3rem;
    margin: 1rem;
    justify-content: center;
    align-items: center;
}

.producto-section-1 video {
    width: 70%;
    height: auto;
    object-fit: cover;
}

.producto-intro p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
}

.producto-intro-contenedor {
    padding: min(1em, 8%);
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.producto-intro-texto {
    max-width: 500px;
}

.producto-intro-texto h2 {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    line-height: 5rem;
    margin: 2rem;
}

.producto-intro-img {
    max-width: 500px;
    margin-left: 1rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 20%;
}

.producto-intro-img img {
    width: 90%;
    height:auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.producto-intro-do {
    max-width: 1200px;
    margin: 0 auto 3rem;
    margin: 1rem;
    text-align: center;
    justify-content: center;
}

.producto-intro-do h2 {
    margin: 1rem;
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    text-align: center;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}


/*section 2*/


.producto-section-2 {
    padding: min(1em, 8%);
    padding: 0px 0rem 0px;
    background-color: #120336;
    max-width: 1200px;
    margin: 0 auto 3rem;
    flex-shrink: 1;
    display: flex;
    /*flex-wrap: wrap;*/
    text-align: center;
    justify-content: center;
    align-items: center;
}

.producto-advantage {
    padding: 40px 2em 30px;
    width: 900px;
    min-width: 200px;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.producto-advantage h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;    
    text-align: center;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.producto-advantage-intro {
    min-width: 200px;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.producto-advantage-intro p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    text-align: left;
    margin-top: 0rem;
    margin-left: 3rem;
    margin-right: 3rem;
}

.producto-advantage-title {
    padding: min(1em, 8%);
    max-width: 900px;
    min-width: 200px;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 2em;
}

.producto-advantage-title-img {
    height: 200px;
    width: 200px;
    margin-top: 1rem;
    justify-content: center;
}

.producto-advantage-title-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.producto-advantage-title-text {
    max-width: 500px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.producto-advantage-title-text h2 {
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    text-align: left;
    line-height: 4rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.producto-advantage-grid {
    margin: 1em;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.columna1 {
    width: 260px;
    align-items: start;
}

.columna2 {
    width: 260px;
    align-items: start;
}

.producto-advantage-card {
    padding: 30px 2rem 0px;
    border-top: 1px #3172ff;
}   

.producto-advantage-card h3{
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.563rem);
    text-align: left;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.producto-advantage-card p{
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    text-align: left;
}

.producto-columnas {
    max-width: 300px;
    min-width: 240px;
    margin-top: 1em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 20%;
}

.producto-columnas img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.producto-advantage-img-right {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.producto-advantage-img-right img {
    width: 100%;
    height:1100px;
    object-fit: cover;
    object-position: center;
}


/*section 3*/


.producto-section-3 {
    padding: 10px 3rem 10px;
    background-color: black;
}

.producto-real {
    padding: min(1em,8%);
    max-width: 1200px;
    margin: 0 auto 1em;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.producto-real-title {
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 2em;
}

.producto-real-title-left {
    max-width: 450px;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10%;
}

.producto-real-title-left img {
    width: 250px;
    height: 150px;
}

.producto-real-title-left h2 {
    padding: 1rem;
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    text-align: center;
    line-height: 4.5rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.producto-real-title-right {
    max-width: 500px;
    margin: 1em;
}

.producto-real-title-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.producto-rentabilidad {
    max-width: 1000px;
    margin: 1rem;
    text-align: center;
    justify-content: center;
}

.producto-rentabilidad p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: bold;
    text-align: center;
}

.producto-imagen-podcast {
    max-width: 700px;
    margin: 1em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.producto-imagen-podcast img {
    width: 100%;
    height:auto;
    object-fit: cover;
}

.producto-tecnologia-rendimiento {
    padding: 30px 3rem 10px;
    max-width: 1200px;
    margin: 0 auto 3rem;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.producto-tecnologia-rendimiento h3 {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 9px;
    background-color: #97b8ff;
    color: #000000;
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.563rem);
    text-align: center;
}

.producto-real-grid {
    margin: 2em;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.producto-real-card {
    width: 200px;
    height: 300px;
    display: inline-block;
    padding: 25px 1em 20px;
    border-radius: 9px;
    background-color: #3172ff;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.producto-real-card h4 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.563rem);
    margin: 0.8rem;
    margin-bottom: 0.4rem;
    line-height: 30px;
}

.producto-real-card p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    line-height: 30px;
}

.producto-real-card img {
    width: 40%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/*section 4*/


.producto-section-4 {
    padding: 30px 3rem 30px;
    background-color: #120336;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.sin-novo {
    padding: min(1em,8%);
    max-width: 1100px;
    min-width: 200px;
    margin: 0 auto 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.sin-novo h2 {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    line-height: 4.5rem;
    text-align: center;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.sin-novo p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: bold;
    text-align: left;
}

.hoteleria-icon {
    max-width: 300px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.hoteleria-icon img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.sin-novo-grid {
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.sin-novo-card1 {
    width: 300px;
    display: inline-block;
    border-radius: 9px;
    background-color: transparent;
    color: #ffffff;
    text-align: center;
}

.sin-novo-card1 h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    text-align: right;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.sin-novo-card1 p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: lighter;
    text-align: right;
}

.sin-novo-card2 {
    width: 300px;
    display: inline-block;
    padding: 20px 1rem 40px;
    border-radius: 9px;
    background-color: transparent;
    color: #ffffff;
    text-align: center;
}

.sin-novo-card2 h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    text-align: left;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.sin-novo-card2 p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: lighter;
    text-align: left;
}

.sin-novo-diagrama {
    width: 300px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.sin-novo-diagrama img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.no-novo {
    padding: 0px 0rem 0px;
    max-width: 1200px;
    margin: 0 auto 3rem;
    background-color: #450707;
    text-align: center;
    justify-content: center;
}

.no-novo h2 {
    padding: 15px 40px;
    border-radius: 9px; 
    color: #faa1a1;
    font-size: clamp(2.188rem, 1.953rem + 1.88vw, 3.125rem);
    text-align: center;
}

.no-novo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 1em;
}

.no-novo-grid-clmna1 p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    font-weight: bold;
    margin: 2rem;
    margin-right: 0rem;
    text-align: right;
}

.no-novo-grid-clmna3 p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    font-weight: bold;
    margin: 1rem;
    margin-left: 0rem;
    text-align: left;
}


/*section 5*/


.producto-section-5 {
    padding: 40px 3rem 20px;
    background-color: #000000;
    max-width: 1200px;
    margin: 0 auto 0;
    text-align: center;
    justify-content: center;
}

.novo-spaces {
    padding: min(1em,8%);
    max-width: 1100px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.novo-spaces-intro {
    max-width: 1050px;
    margin: 0 auto 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1em;
}

.novo-spaces-intro-img {
    max-width: 500px;
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.novo-spaces-intro-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.novo-spaces-intro h2 {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    line-height: 80px;
    margin: 1rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.novo-spaces-intro p {
    padding: 1rem;
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
}

.novo-spaces-intro-video {
    padding: 0px 1rem 0px;
    margin: 1rem;
    justify-content: center;
    align-items: center;
}

.novo-spaces-intro-video video {
    width: 100%;
    height: auto;
    border-radius: 9px;
}

.novo-spaces-beneficio {
    max-width: 1100px;
    min-width: 200px;
    margin: 0 auto 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
}

.novo-spaces-beneficio h2 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    line-height: 50px;
    margin: 1rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.diagrama-beneficio {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
}

.novo-spaces-beneficio-up {
    padding: 10px 2em 10px;
    max-width: 1000px;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    /*margin-left: 14.2rem;
    gap: 14rem;*/
    justify-content: right;
    justify-items: center;
    align-items: center;
    gap: 9em;
}

.nsb-up1 {
    display: inline-block;
    padding: 0px 1rem 0px;
    border-radius: 9px;
    background-color: transparent;
    color: #ffffff;
    text-align: center;
    max-width: 250px;
    min-width: 200px;
}

.nsb-up2 {
    display: inline-block;
    padding: 0px 1rem 0px;
    border-radius: 9px;
    background-color: transparent;
    color: #ffffff;
    text-align: center;
    max-width: 250px;
    min-width: 200px;
}

.novo-spaces-beneficio-down {
    padding: 10px 2rem 10px;
    display: flex;
    flex-wrap: wrap;
    /*margin-right: 14.2rem;
    gap: 15rem;*/
    justify-content: left;
    justify-items: center;
    align-items: center;
    gap: 9em;
}

.nsb {
    display: inline-block;
    padding: 0px 1rem 0px;
    border-radius: 9px;
    background-color: transparent;
    color: #ffffff;
    text-align: center;
    max-width: 250px;
    min-width: 200px;
}

.nsb h3 {
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
}

.nsb p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
}

.engranajes-img {
    max-width: 900px;
    min-width: 200px;
    margin: 1em;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.engranajes-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3/1;
}

.integracion-novo-spaces {
    padding: 0px 0rem 0px;
    max-width: 1000px;
    margin: 0 auto 3rem;
    background-color: #183a13;
    text-align: center;
    justify-content: center;
}

.integracion-novo-spaces h2 {
    padding: 15px 40px;
    border-radius: 9px;
    margin: 1rem;
    color: #ffffff;
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    line-height: auto;
    text-align: center;
}

.integracion-novo-spaces-vid {
    padding: 0px 1rem 0px;
    margin: 1rem;
    justify-content: center;
    align-items: center;
}

.integracion-novo-spaces-vid video {
    width: 100%;
    height: auto;
    border-radius: 9px;
}

.experiencia-novo-spaces h2 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    line-height: 50px;
    margin: 2rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.novo-spaces-ruta {
    max-width: 1000px;
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.novo-spaces-ruta img {
    width: 100%;
    height:auto;
    object-position: center;
}

.novo-spaces-ruta-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.nsr-cuadro {
    max-width: 320px;
    border: 3px solid #afcbf8;
    padding: 20px 2rem 20px;
    background-color: transparent;
    border-radius: 8px;
    margin: 10px auto;
    
}

.nsr-cuadro p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.5rem);
    font-weight: bold;
}


/*section 6*/


.producto-section-6 {
    padding: min(1em,8%);
    padding: 40px 1rem 40px;
    background-color: #120336;
    max-width: 1200px;
    margin: 0 auto 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.producto-section-6 h2 {
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    line-height: 50px;
    margin: 1em;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.producto-section-6 p {
    padding: 2rem;
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: bold;
}

.novo-metrics {
    margin: 1em;
    max-width: 750px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.novo-metrics img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.novo-metrics-intro {
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.novo-metric-dashboard {
    max-width: 500px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.novo-metric-dashboard img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.novo-metrics-intro-text {
    max-width: 500px;
}

.novo-metrics-intro-text h2 {
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    line-height: 70px;
    margin: 0em;
}

.novo-metrics-secuencia {
    max-width: 1000px;
    margin: 1rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.novo-metrics-secuencia img {
    width: 100%;
    height: auto;
    object-fit: cover;

}


/*section 7*/


.producto-section-7 {
    padding: min(1em, 8%);
    padding: 20px 2rem 20px;
    background-color: #07070c;
    max-width: 1200px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.novo-high-tech {
    max-width: 1100px;
    margin: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;    
}

.novo-high-tech h2 {
    max-width: 800px;
    font-size: clamp(2.813rem, 2.563rem + 2vw, 4.063rem);
    line-height: auto;
    margin: 2rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.novo-high-tech p {
    max-width: 800px;
    margin: 1em;
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: bold;
}

.novo-high-tech-mockup {
    max-width: 800px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.novo-high-tech-mockup img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.novo-high-tech-cadena {
    max-width: 900px;
    margin: 2em;
    justify-content: center;
}

.novo-high-tech-cadena img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/*section 8*/

/*cta-cafe-virtual-section*/

/*section 9*/


.producto-section-9 {
    padding: 20px 2rem 20px;
    background-color: #000000;
    max-width: 1200px;
    margin: 0 auto 3rem;
    display: flex;
    text-align: center;
    justify-content: center;
}

.novo-future-img-left {
    overflow: hidden;
    text-align: center;
    justify-content: center;
}

.novo-future-img-left img {
    width: 100%;
    height:1180px;
    object-fit: cover;
    object-position: center;
}

.novo-future {
    padding: 50px 3rem 0px;
    max-width: 1000px;
    margin: 0 auto 3em;
    text-align: center;
    justify-content: center;
}

.novo-future h2 {
    padding: 2rem;
    font-size: clamp(1.875rem, 1.788rem + 0.7vw, 2.313rem);
    line-height: 50px;
    margin: 1rem;
    background: linear-gradient(135deg, #c285ff 20%, #89f1ff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.novo-future h3 {
    padding: 15px 40px;
    border-radius: 9px;
    margin: 0 auto 3rem;
    background-color: #183a13;
    color: #ffffff;
    font-size: clamp(1.25rem, 1.172rem + 0.63vw, 1.6rem);
    line-height: 35px;
    text-align: center;
}

.novo-future-logo {
    overflow: hidden;
    text-align: center;
    justify-content: center;
}

.novo-future-logo img {
    width: 45%;
    height:auto;
    object-fit: cover;
    object-position: center;
}

.novo-future-grid {
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.novo-future-card {
    display: inline-block;
    width: 300px;
    padding: 20px 1rem 40px;
    margin: 1rem;
    border-radius: 9px;
    background-color: transparent;
    color: #ffffff;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.novo-future-card img{
    width: 25%;
    height:auto;
    object-fit: cover;
    object-position: center;
}

.novo-future-card p {
    font-size: clamp(0.938rem, 0.813rem + 1vw, 1.563rem);
    font-weight: bold;
}

/* ==========================================
   FOOTER
   ========================================== */
.main-footer {
    background-color: #000000;
    color: white;
    padding: min(5em,8%);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo {
    text-align: center;
    margin-bottom: 3rem;
}

.footer-logo img {
    max-width: 250px;
}

.footer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-column h3 {
    font-size: clamp(1.238rem, 0.813rem + 1vw, 1.5rem);
    margin-bottom: 1rem;
    text-align: center;
    background: linear-gradient(135deg, #c285ff 0%, #89f1ff 30%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.footer-column p {
    font-size: clamp(0.8rem,  0.813rem + 1vw, 1.1em);
    text-align: center;
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: #667eea;
}

.footer-decoration {
    text-align: center;
    margin-bottom: 2rem 0;
}

.footer-decoration img {
    max-width: 200px;
    opacity: 1;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9rem;
    margin-bottom: 3rem;
}

.social-links a {
    display: inline-block;
    transition: transform 0.3s;
}

.social-links a:hover {
    transform: scale(1.1);
}

.social-links img {
    width: 70px;
    height: 70px;
}

.footer-copyright {
    text-align: center;
    padding-top: 1rem;
    color: #fafafa;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    #open-sidebar-button, #close-sidebar-button {
        display: block;
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: min(15em, 100%);
        z-index: 10;
        border-left: 1px solid var(--hover-color);
        transition: right 300ms ease-out;
    }

    nav.show {
        right: 0;
    }

    nav.show ~ #overlay {
        display: block;
    }

    nav ul {
        width: 100%;
        flex-direction: column;
    }

    nav a {
        width: 100%;
        padding-left: 2.5em;
    }

    nav a.active-link {
        border-bottom: none;
    }

    .logo img {
    width: 9em;
    height: auto;
}

    nav .nav-menu{
        margin-right: unset;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .experiencias h2,
    .ventajas h2,
    .industrias h2,
    .clientes h2,
    .cta h2 {
        font-size: 1.8rem;
    }

    .stat-number {
        font-size: 3rem;
    }

    .quote-section blockquote {
        font-size: 1.3rem;
    }

    .footer-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body {
        flex-wrap: wrap;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .stats-grid,
    .ventajas-grid,
    .industrias-grid {
        grid-template-columns: 1fr;
    }

    .btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}