/* ===================================================================
   ESTILOS PARA FIWEEX CATÁLOGO RESTAURANTE - SECCIÓN 1
   =================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;700;800&display=swap');

   /* ===================================================================
      VARIABLES CSS
      =================================================================== */
   
   :root {
     --color-primary-lilac: #957AFB;
     --bg-black: #000000;
     --text-white: #ffffff;
     --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
   }
   
   /* ===================================================================
      ESTILOS GENERALES
      =================================================================== */
   
   .bloque_normal {
     display: block;
     text-align: center;
   }
   
   .fondo_gradient {
     background: linear-gradient(180deg, var(--bg-black) 0%, #1a0a2e 65%, var(--color-primary-lilac) 100%);
     border-bottom-left-radius: 65px;
     border-bottom-right-radius: 65px;
     color: var(--text-white);
   }
   
   .seccion-1-container {
     margin-top: 12em;
   }
   
   /* ===================================================================
      ESTILOS DE TEXTO
      =================================================================== */
   
   h1 {
     font-size: 50px;
     font-weight: 300;
     margin-bottom: 20px;
     line-height: 1.2;
     animation: fadeInUp 1s ease 0.2s both;
     color: var(--text-white);
   }
   
   h1 .h1-subtitle {
     font-size: 0.7em;
     display: block;
     font-weight: 400;
   }
   
   h1 .h1-subtitle-container {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 8px;
   }
   
   h1 .h1-subtitle .highlightable-text {
     display: inline-block;
     border-radius: 30px;
     padding: 8px 25px 0px 25px;
     position: relative;
     z-index: 2;
     font-weight: 700;
   }
   
   h1 .h1-subtitle .highlight-slider {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     border-radius: 30px;
     background: #957AFB;
     border: 1px solid #957AFB;
     z-index: 1;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .subtitle {
     font-size: 18px;
     color: var(--text-white);
     max-width: 900px;
     margin: 0 auto 30px;
     line-height: 1.2;
     font-weight: 300;
     animation: fadeInUp 1s ease 0.4s both;
   }
   
   .subtitle span {
     color: var(--color-primary-lilac);
     font-weight: 500;
   }
   
   /* ===================================================================
      BOTONES
      =================================================================== */
   
   .buttons {
     display: flex;
     gap: 20px;
     justify-content: center;
     animation: fadeInUp 1s ease 0.6s both;
   }
   
   .btn {
     padding: 12px 40px 10px 40px;
     border-radius: 30px;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     display: inline-block;
   }
   
   .btn-primary {
     background: var(--color-primary-lilac);
     border: 2px solid var(--color-primary-lilac);
     color: var(--text-white);
     outline: none;
   }
   
   .btn-primary:hover {
     background: transparent;
     color: var(--text-white);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
     text-decoration: none;
     border-color: var(--color-primary-lilac);
   }
   
   .btn-primary:active,
   .btn-primary:visited {
     text-decoration: none;
   }
   
   .btn-primary:focus,
   .btn-primary.focus {
     color: #fff;
     background-color: transparent;
     border-color: transparent;
     outline: none;
     box-shadow: 0 0 0 3px rgba(149, 122, 251, 0.4);
   }
   
   .btn-secondary {
     background: transparent;
     border: 2px solid #957AFB;
     color: #fff;
     outline: none;
   }
   
   a.btn-secondary,
   a.btn-secondary:link {
     color: #fff;
   }
   
   .btn-secondary:hover,
   a.btn-secondary:hover {
     background: #957AFB;
     color: white !important;
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
     text-decoration: none;
   }
   
   .btn-secondary:active,
   .btn-secondary:visited,
   a.btn-secondary:active,
   a.btn-secondary:visited {
     color: #fff !important;
     text-decoration: none;
   }
   
   .btn-secondary:focus,
   .btn-secondary.focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(149, 122, 251, 0.4);
   }
   
   /* ===================================================================
      CONTENEDOR DE IMÁGENES
      =================================================================== */
   
   .mockup-container {
     position: relative;
     height: 650px;
     animation: fadeIn 1.5s ease 0.8s both;
     margin-top: 2.5em;
   }
   
   .center-image {
     position: absolute;
     left: 50%;
     top: 0;
     transform: translateX(-50%);
     animation: float 5s ease-in-out infinite;
     overflow: hidden;
     z-index: 2;
     pointer-events: none;
   }
   
   .hero_img_sec1 {
     width: 48%;
     margin-top: 1.5em;
     height: auto;
   }
   
   /* ===================================================================
      ANIMACIONES
      =================================================================== */
   
   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(10px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(30px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes float {
     0%,
     100% {
       transform: translateX(-50%) translateY(0px);
     }
     50% {
       transform: translateX(-50%) translateY(-20px);
     }
   }
   
   /* ===================================================================
      SECCIÓN 2 - HERO CON CONTADOR
      =================================================================== */
   /* Contenedor general de la sección */
   .hero-whatsapp-section {
    padding: 130px 0 40px;
    text-align: center;
}

/* --- 1. TÍTULO SUPERIOR (MORADO) --- */
.top-brand {
    color: #957AFB; /* Morado principal */
    font-size: 3.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

/* --- 2. TÍTULO PRINCIPAL (BLANCO) --- */
.hero-title {
    font-size: 2.7rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.3;
    max-width: 900px;
    padding: 0 20px;
    margin: 0 auto 40px;
}

/* Parte morada dentro del título principal */
.hero-title span {
    color: #957AFB;
}

/* --- 3. IMAGEN CENTRAL --- */
.main-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.chat-img {
    max-width: 90%;
    width: 850px;
    height: auto;
    display: block;
}

/* --- 4. FOOTER (WHATSAPP) --- */
.footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-text {
    font-size: 1.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

/* Círculo del icono de WhatsApp */
.wa-icon-circle {
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

/* Icono SVG para que se vea perfecto */
.wa-icon-circle svg {
    fill: #ffffff;
    width: 20px;
    height: 20px;
}

/* --- RESPONSIVE (CELULARES) --- */
@media (max-width: 768px) {
    .hero-whatsapp-section { padding: 60px 0 30px; margin-bottom: 60px; }
    .top-brand { font-size: 2.0rem; margin-bottom: 16px; }
    .hero-title { font-size: 1.6rem; }
    .footer-text { font-size: 0.9rem; text-align: center; }
    .footer-cta { flex-direction: column; gap: 10px; }
}


   .seccion_normal_2 {
     padding: 10em 0em;
   }
   
   .seccion_normal_2_1 {
     background-color: #161616;
     padding: 12em 0em;
   }
   
   .seccion_normal_2_1 .btn {
     border-radius: 20px !important;
   }
   
   .seccion-2-container {
     padding: 4rem 2rem;
   }
   
   .hero-container-sec2 {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: center;
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
   }
   /*28-01*/
   /* --- IMAGEN Y SOMBRA --- */
   .image-wrapper-sec2 {
     flex: 0.75;
     min-width: 200px;
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     animation: slideInLeftSec2 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
     z-index: 1;
     will-change: transform;
     perspective: 1000px;
   }
   
   .phone-img-sec2 {
     width: 55%;
     height: auto;
     z-index: 2;
     animation: sway3DSec2 6s ease-in-out infinite;
     transform-style: preserve-3d;
   }
   
   /* --- SOMBRA AUMENTADA --- */
   .phone-shadow-sec2 {
     width: 80%;
     height: 35px;
     background: radial-gradient(ellipse at center, #957AFB 40%, transparent 70%);
     border-radius: 50%;
     filter: blur(12px);
     opacity: 0.6;
     margin-top: 30px;
     z-index: 1;
     animation: shadowSwaySec2 6s ease-in-out infinite;
   }
   
   /* --- TEXTOS --- */
   .content-wrapper-sec2 {
     flex: 1;
     min-width: 300px;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     text-align: left;
     align-items: flex-start;
   }
   
   .pop-in-sec2 {
     opacity: 0;
     animation: popInUpSec2 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   }
   
   .small-title-sec2 {
     font-size: 2.5rem;
     text-transform: uppercase;
     animation-delay: 0.2s;
     color: var(--text-white);
     font-weight: normal;
   }
   
   .big-number-sec2 {
     font-size: 5rem;
     color: #957AFB;
     line-height: 1.1;
     margin: 0.5rem 0;
     animation: scaleInSec2 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     animation-delay: 0.4s;
     opacity: 0;
     font-variant-numeric: tabular-nums;
     font-feature-settings: "tnum";
     white-space: nowrap;
   }
   
   .big-number-sec2 span {
     color: #957AFB;
   }
   
   .counter-span-sec2 {
     display: inline-block;
     min-width: 140px;
     text-align: left;
   }
   
   .description-sec2 {
     font-size: 2.5rem;
     line-height: 1.5;
     text-transform: uppercase;
     animation-delay: 0.6s;
     color: var(--text-white);
   }
   
   .badge-sec2 {
     background-color: #957AFB;
     color: white;
     padding: 1rem 2rem 0.5rem 2rem;
     border-radius: 50px;
     font-size: 2rem;
     width: fit-content;
     margin-top: 1rem;
     text-transform: uppercase;
     box-shadow: 0 4px 15px rgba(140, 124, 255, 0.4);
     animation: popInUpSec2 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, pulseSec2 2s infinite 2s;
     animation-delay: 0.8s;
     opacity: 0;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
   }
   
   .badge-sec2:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 8px 25px rgba(140, 124, 255, 0.6);
   }
   
   /* --- ANIMACIONES SECCIÓN 2 --- */
   @keyframes sway3DSec2 {
     0%, 100% {
       transform: rotateY(-5deg) rotateX(2deg) translateY(0);
     }
     50% {
       transform: rotateY(5deg) rotateX(-2deg) translateY(-10px);
     }
   }
   
   @keyframes shadowSwaySec2 {
     0%, 100% {
       transform: translateX(10px) scale(1);
       opacity: 0.5;
     }
     50% {
       transform: translateX(-10px) scale(0.9);
       opacity: 0.4;
     }
   }
   
   @keyframes popInUpSec2 {
     0% { opacity: 0; transform: translateY(40px) scale(0.9); }
     100% { opacity: 1; transform: translateY(0) scale(1); }
   }
   
   @keyframes scaleInSec2 {
     0% { opacity: 0; transform: scale(0.5); }
     100% { opacity: 1; transform: scale(1); }
   }
   
   @keyframes slideInLeftSec2 {
     from { opacity: 0; transform: translateX(-80px); }
     to { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes pulseSec2 {
     0% { box-shadow: 0 0 0 0 rgba(140, 124, 255, 0.7); }
     70% { box-shadow: 0 0 0 15px rgba(140, 124, 255, 0); }
     100% { box-shadow: 0 0 0 0 rgba(140, 124, 255, 0); }
   }
   
   @media (max-width: 768px) {
     .hero-container-sec2 {
       flex-direction: column;
       gap: 3rem;
     }
     .content-wrapper-sec2 {
       text-align: center;
       align-items: center;
     }
     .big-number-sec2 {
       font-size: 2.8rem;
     }
     .counter-span-sec2 {
       min-width: 140px;
     }
     .image-wrapper-sec2 {
       order: -1;
     }
     .phone-img-sec2 {
       width: 280px;
     }
     .phone-shadow-sec2 {
       width: 220px;
       height: 25px;
     }
   }
   
   @media (min-width: 769px) and (max-width: 1024px) {
     .counter-span-sec2 {
       min-width: 160px;
     }
   }
   
   /* ===================================================================
      SECCIÓN 3 - TARJETAS CON EFECTO SPOTLIGHT
      =================================================================== */
   
   .seccion_normal_3 {
     padding-bottom: 10em;
   }
   
   .seccion-3-container {
     padding: 15rem 8rem 4rem 8rem;
   }
   
   .main-sec3 {
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
   }
   
   /* --- GRID SYSTEM PERSONALIZADO --- */
   .cards-sec3 {
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     grid-template-rows: auto auto;
     gap: 1.5rem;
     width: 100%;
     padding-top: 20px;
   }
   
   /* --- TARJETA BASE --- */
   .card-sec3 {
     --spotlight-color: 255, 255, 255;
     
     background-color: #0d0d0d;
     border-radius: 24px;
     position: relative;
     cursor: pointer;
     display: flex;
     padding: 3rem 2.5rem;
     overflow: visible;
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 0 35px 8px rgba(var(--spotlight-color), 0.35);
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   }
   
   /* --- LAYOUT Y SUPERPOSICIÓN --- */
   
   .card-top-right-sec3 {
     grid-column: 3 / -1;
     grid-row: 1;
     min-height: 180px;
     z-index: 1;
   }
   
   .card-left-sec3 {
     grid-column: 1 / 5;
     grid-row: 2;
     margin-top: -80px;
     z-index: 10;
     min-height: 380px;
     align-items: center;
   }
   
   .card-bottom-right-sec3 {
     grid-column: 5 / -1;
     grid-row: 2;
     min-height: 250px;
     z-index: 2;
   }
   
   /* --- EFECTO SPOTLIGHT --- */
   
   .card-sec3::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: inherit;
     padding: 1px;
     background: radial-gradient(
       600px circle at var(--mouse-x) var(--mouse-y),
       rgba(var(--spotlight-color), 1),
       rgba(var(--spotlight-color), 0.3) 30%,
       transparent 50%
     );
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask-composite: exclude;
     opacity: 0;
     transition: opacity 0.5s;
     pointer-events: none;
     z-index: 2;
   }
   
   .card-sec3::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     background: radial-gradient(
       500px circle at var(--mouse-x) var(--mouse-y),
       rgba(var(--spotlight-color), 0.4),
       rgba(var(--spotlight-color), 0.2) 25%,
       transparent 45%
     );
     opacity: 0;
     transition: opacity 0.5s;
     z-index: 1;
     pointer-events: none;
   }
   
   .cards-sec3:hover .card-sec3::before,
   .cards-sec3:hover .card-sec3::after {
     opacity: 1;
   }
   
   .card-sec3:hover {
     transform: translateY(-5px);
     box-shadow: 0 0 45px 12px rgba(var(--spotlight-color), 0.5);
     border-color: rgba(var(--spotlight-color), 0.3);
   }
   
   /* --- CONTENIDO --- */
   .card-content-sec3 {
     position: relative;
     z-index: 20;
     display: flex;
     width: 100%;
     height: 100%;
   }
   
   .card-text-sec3 {
     font-size: 2.2rem;
     line-height: 1.5;
     color: #ccc;
     transition: color 0.3s;
     text-align: left;
   }
   
   .card-sec3:hover .card-text-sec3 {
     color: #fff;
   }
   
   .card-left-sec3 .card-content-sec3 {
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
     text-align: right;
     gap: 2rem;
     position: relative;
   }
   
   .card-left-sec3 .icon-box-sec3 {
     position: absolute;
     top: 0;
     right: 0;
     margin: 0;
   }
   
   .card-left-sec3 .card-text-sec3 {
     margin-top: 4em;
     text-align: right;
   }
   
   .card-top-right-sec3 .card-content-sec3 {
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 2rem;
   }
   
   .card-bottom-right-sec3 .card-content-sec3 {
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 2rem;
   }
   
   .card-bottom-right-sec3 .icon-box-sec3 {
     order: 1;
   }
   
   .card-bottom-right-sec3 .card-text-sec3 {
     order: 2;
     text-align: center;
   }
   
   /* --- ICONOS --- */
   .icon-box-sec3 {
     width: 90px;
     height: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     background-color: #141414;
     border: 1px solid #2a2a2a;
     border-radius: 16px;
     transition: all 0.3s ease;
   }
   
   .icon-box-sec3 svg {
     width: 32px;
     height: 32px;
     stroke: #888;
     transition: all 0.3s ease;
   }
   
   .icon-sec3 {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
   
   .card-sec3:hover .icon-box-sec3 {
     border-color: rgba(var(--spotlight-color), 1);
     background-color: rgba(var(--spotlight-color), 0.1);
     box-shadow: 0 0 20px rgba(var(--spotlight-color), 0.3);
   }
   
   .card-sec3:hover .icon-box-sec3 svg {
     stroke: rgb(var(--spotlight-color));
     filter: drop-shadow(0 0 8px rgba(var(--spotlight-color), 0.6));
   }
   
   /* --- RESPONSIVE SECCIÓN 3 --- */
   @media (max-width: 900px) {
     .cards-sec3 {
       grid-template-columns: 1fr;
       gap: 2rem;
     }
     
     .card-top-right-sec3,
     .card-left-sec3,
     .card-bottom-right-sec3 {
       grid-column: auto;
       grid-row: auto;
       min-height: auto;
       margin-top: 0;
     }
     
     .card-left-sec3 .card-content-sec3,
     .card-top-right-sec3 .card-content-sec3,
     .card-bottom-right-sec3 .card-content-sec3 {
       flex-direction: column;
       text-align: center;
       gap: 1.5rem;
     }
   }
   
   /* ===================================================================
      SECCIÓN 4 - CÓMO FUNCIONA
      =================================================================== */
   
   .seccion-4-container {
     width: 100%;
     max-width: 1000px;
     margin-top: 90px;
     padding: 4rem 2rem;
   }
   
   .seccion_normal_4 {
     padding-bottom: 10em;
     background-color: #161616;
   }
   
   /* --- CABECERA --- */
   .header-sec4 {
     display: flex;
     align-items: flex-end;
     gap: 1.5rem;
     margin-bottom: 3rem;
     flex-wrap: wrap;
     opacity: 0;
     animation: fadeInSec4 1s ease-out forwards;
     text-align: left;
   }
   
   .title-block-sec4 h2 {
     font-size: 5rem;
     line-height: 0.9;
     color: var(--color-primary-lilac);
     text-transform: uppercase;
   }
   
   .subtitle-block-sec4 {
     padding-bottom: 0.5rem;
     opacity: 0;
     transform: translateX(100px);
     transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
   }
   
   .subtitle-block-sec4.animate-in {
     opacity: 1;
     transform: translateX(0);
   }
   
   .subtitle-block-sec4 p {
     font-size: 1.75rem;
     color: var(--text-white);
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1.2;
   }
   
   /* --- LISTA DE PASOS --- */
   .steps-list-sec4 {
     display: flex;
     flex-direction: column;
   }
   
   .step-item-sec4 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 3rem 0;
     border-top: 1px solid #333333;
     opacity: 0;
     transform: translateY(20px);
     animation: slideUpSec4 0.8s ease-out forwards;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .step-item-sec4:nth-child(1) {
     animation-delay: 0.2s;
   }
   
   .step-item-sec4:nth-child(2) {
     animation-delay: 0.4s;
   }
   
   .step-item-sec4:nth-child(3) {
     animation-delay: 0.6s;
     border-bottom: 1px solid #333333;
   }
   
   .step-item-sec4:hover {
     transform: translateY(0) scale(1.02) !important;
   }
   
   .step-item-sec4:hover .icon-svg-sec4 {
     transform: scale(1.15);
   }
   
   .step-item-sec4:hover .step-text-sec4 {
     transform: scale(1.08);
   }
   
   /* --- ESTILOS COMUNES DE ICONOS --- */
   .icon-wrapper-sec4 {
     width: 65px;
     height: 65px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     overflow: visible;
     padding: 10px;
   }
   
   .icon-svg-sec4 {
     width: 100%;
     height: 100%;
     stroke: var(--color-primary-lilac);
     stroke-width: 1.5;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
     filter: drop-shadow(0 0 8px rgba(149, 122, 251, 0.5));
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .step-text-sec4 {
     text-align: right;
     font-size: 1.5rem;
     max-width: 600px;
     line-height: 1.4;
     color: #eeeeee;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: right center;
   }
   
   /* --- ANIMACIONES DE ICONOS --- */
   
   .arrow-up-sec4 {
     animation: uploadMoveSec4 2s infinite ease-in-out;
   }
   
   .calendar-group-sec4 {
     transform-origin: top center;
     animation: pendulumSec4 3s infinite ease-in-out;
   }
   
   .check-circle-sec4 {
     transform-origin: 18px 18px;
     animation: pulseCheckSec4 3s infinite ease-in-out;
   }
   
   .whatsapp-icon-sec4 {
     stroke: none !important;
     fill: var(--color-primary-lilac) !important;
     transform-origin: bottom right;
     animation: ringSec4 4s infinite ease-in-out;
   }
   
   /* --- KEYFRAMES SECCIÓN 4 --- */
   @keyframes fadeInSec4 {
     to {
       opacity: 1;
     }
   }
   
   @keyframes slideUpSec4 {
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes uploadMoveSec4 {
     0% {
       transform: translateY(0);
       opacity: 1;
     }
     50% {
       transform: translateY(-5px);
       opacity: 1;
     }
     51% {
       transform: translateY(5px);
       opacity: 0;
     }
     100% {
       transform: translateY(0);
       opacity: 1;
     }
   }
   
   @keyframes pendulumSec4 {
     0% {
       transform: rotate(0deg);
     }
     25% {
       transform: rotate(3deg);
     }
     75% {
       transform: rotate(-3deg);
     }
     100% {
       transform: rotate(0deg);
     }
   }
   
   @keyframes pulseCheckSec4 {
     0%, 100% {
       transform: scale(1);
     }
     50% {
       transform: scale(1.15);
       stroke: #fff;
     }
   }
   
   @keyframes ringSec4 {
     0% {
       transform: rotate(0);
     }
     5% {
       transform: rotate(10deg);
     }
     10% {
       transform: rotate(-10deg);
     }
     15% {
       transform: rotate(10deg);
     }
     20% {
       transform: rotate(0);
     }
     100% {
       transform: rotate(0);
     }
   }
   
   /* --- RESPONSIVE SECCIÓN 4 --- */
   @media (max-width: 768px) {
     .header-sec4 {
       flex-direction: column;
       gap: 1rem;
     }
     
     .title-block-sec4 h2 {
       font-size: 3rem;
     }
     
     .step-item-sec4 {
       flex-direction: column;
       gap: 1.5rem;
       align-items: flex-start;
     }
     
     .step-text-sec4 {
       text-align: left;
       font-size: 1.1rem;
     }
   }
   
   /* ===================================================================
      SECCIÓN 5 - CARRUSEL DE PASOS DEL PEDIDO
      =================================================================== */
   
   .seccion_normal_5 {
     padding: 5em 0;
     background-color: #0d0d0d;
     color: #ffffff;
   }
   
   .seccion-5-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem;
   }
   
   .main-title-sec5 {
     font-size: 3rem;
     font-weight: 800;
     color: var(--color-primary-lilac);
     text-transform: uppercase;
     text-align: center;
     text-shadow: 0 0 20px rgba(149, 122, 251, 0.3);
   }
   
   /* --- LAYOUT --- */
   .carousel-container-sec5 {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2rem;
     width: 100%;
     max-width: 1200px;
     min-height: 550px;
   }
   
   /* PANELES LATERALES */
   .side-panel-sec5 {
     flex: 1;
     flex-basis: 0; 
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-width: 250px;
     height: 100%;
     transition: opacity 0.3s ease;
   }
   
   .side-panel-sec5.left-panel-sec5 { 
     text-align: right; 
     align-items: flex-end; 
   }
   
   .side-panel-sec5.right-panel-sec5 { 
     text-align: left; 
     align-items: flex-start; 
     opacity: 0; 
     pointer-events: none; 
   }
   
   .side-panel-sec5.right-panel-sec5.visible-sec5 { 
     opacity: 1; 
     pointer-events: all; 
   }
   
   /* TEXTO */
   .info-text-sec5 {
     font-size: 1.8rem;
     line-height: 1.4;
     max-width: 350px;
     opacity: 0;
     transition: opacity 0.3s ease;
     color: #ffffff;
   }
   
   .info-text-sec5 b { 
     color: #fff; 
     font-weight: 700; 
   }
   
   .info-text-sec5 a {
     color: #fff; 
     text-decoration: underline; 
     text-decoration-color: var(--color-primary-lilac);
     transition: all 0.3s ease;
     cursor: pointer;
   }
   
   .info-text-sec5 a:hover {
     color: var(--color-primary-lilac);
     text-decoration-color: var(--color-primary-lilac);
   }
   
   /* CENTRO: Quitamos el overflow hidden de aquí */
   .center-stage-sec5 {
     flex: 0 0 auto;
     display: flex;
     gap: 1rem; /* Reducimos un poco el gap porque el wrapper nuevo tiene padding */
     align-items: flex-end;
     position: relative;
     overflow: visible; /* ¡IMPORTANTE! Esto permite que el botón crezca */
   }
   
   /* NUEVA CLASE PARA LA MÁSCARA */
   .phone-mask-sec5 {
     overflow: hidden; /* Aquí se recorta la animación de slide */
     
     /* Agregamos padding para que la sombra (box-shadow) del celular no se corte */
     padding: 40px 0px; 
     /* Usamos margen negativo para compensar el padding y no descuadrar el diseño */
     margin: -40px 0; 
     
     /* Aseguramos que la máscara respete el borde inferior */
     display: flex;
     align-items: flex-end;
   }
   
   .phone-mockup-sec5 {
     width: 300px;
     height: auto;
     border-radius: 40px;
     /* Transición base */
     transition: transform 0.3s ease-out, opacity 0.3s ease;
     transform: translateX(0); 
     opacity: 1;
     display: block;
   }
   
   /* --- ANIMACIONES PARA IR HACIA ADELANTE (NEXT) --- */
   /* La imagen actual se va a la izquierda */
   .slide-out-to-left {
     transform: translateX(-100px) !important;
     opacity: 0 !important;
   }
   /* La nueva imagen espera en la derecha */
   .prepare-from-right {
     transition: none !important;
     transform: translateX(100px) !important;
     opacity: 0 !important;
   }
   
   /* --- ANIMACIONES PARA IR HACIA ATRÁS (PREV) --- */
   /* La imagen actual se va a la derecha */
   .slide-out-to-right {
     transform: translateX(100px) !important;
     opacity: 0 !important;
   }
   /* La nueva imagen espera en la izquierda */
   .prepare-from-left {
     transition: none !important;
     transform: translateX(-100px) !important;
     opacity: 0 !important;
   }
   
   /* FLECHAS */
   .arrow-btn-sec5 {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     width: 55px;
     height: 55px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     color: var(--color-primary-lilac);
     margin-bottom: 20px;
   }
   
   /* Estado Hover Normal */
   .arrow-btn-sec5:hover:not(.disabled-sec5) {
     background: var(--color-primary-lilac);
     color: white;
     border-color: var(--color-primary-lilac);
     transform: scale(1.1);
     box-shadow: 0 0 15px rgba(149, 122, 251, 0.6);
   }
   
   .arrow-btn-sec5 svg { 
     width: 28px; 
     height: 28px; 
     stroke-width: 2; 
   }
   
   /* --- ESTADO DESHABILITADO --- */
   .arrow-btn-sec5.disabled-sec5 {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   /* BOTONES DERECHOS */
   .section-label-sec5 {
     color: var(--color-primary-lilac);
     margin-bottom: 2.5rem;
     font-weight: 600;
     letter-spacing: 1px;
     font-size: 1.6rem;
     text-transform: uppercase;
   }
   
   .option-btn-sec5 {
     background: transparent;
     border: 1px solid #333333;
     color: #fff;
     padding: 12px 25px;
     border-radius: 30px;
     margin-bottom: 12px;
     width: 100%;
     max-width: 275px;
     cursor: pointer;
     font-family: 'Touche', sans-serif;
     font-weight: 400;
     font-size: 1.5rem;
     transition: all 0.3s ease;
     text-align: center;
   }
   
   .option-btn-sec5:hover { 
     border-color: var(--color-primary-lilac); 
     background: rgba(149, 122, 251, 0.15); 
   }
   
   .option-btn-sec5.active-opt-sec5 {
     background-color: var(--color-primary-lilac);
     border-color: var(--color-primary-lilac);
     color: white;
     box-shadow: 0 0 15px rgba(149, 122, 251, 0.5);
   }
   
   /* BOTONES DE FLECHA VERTICAL (PASO 3) */
   .arrow-btn-vertical-sec5 {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     width: 55px;
     height: 55px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     color: var(--color-primary-lilac);
     margin: 0 auto 20px auto;
   }
   
   .arrow-btn-vertical-sec5:hover:not(.disabled-sec5) {
     background: var(--color-primary-lilac);
     color: white;
     border-color: var(--color-primary-lilac);
     transform: scale(1.1);
     box-shadow: 0 0 15px rgba(149, 122, 251, 0.6);
   }
   
   .arrow-btn-vertical-sec5 svg {
     width: 28px;
     height: 28px;
     stroke-width: 2;
   }
   
   .arrow-btn-vertical-sec5.disabled-sec5 {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   /* --- CINTA INFERIOR --- */
   .ribbon-wrapper-sec5 {
     width: 100%;
     max-width: 1000px;
     margin: 0rem auto 0;
     position: relative;
     overflow: hidden;
     border-top: 2px solid #333333;
     mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
     -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
   }
   
   .steps-ribbon-sec5 {
     display: flex;
     gap: 0;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scrollbar-width: none; 
     -ms-overflow-style: none;
     padding-left: 50%;
     padding-right: 50%;
     padding-top: 30px; 
     align-items: flex-start; 
     border-bottom: 2px solid #333333;
   }
   
   .steps-ribbon-sec5::-webkit-scrollbar { 
     display: none; 
   }
   
   .step-indicator-sec5 {
     flex: 0 0 260px;
     text-align: center;
     opacity: 0.3;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     cursor: pointer;
     position: relative;
     padding: 0 15px;
     transform-origin: bottom center;
     padding-bottom: 30px; 
   }
   
   .step-indicator-sec5.active-sec5 {
     opacity: 1;
     transform: scale(1.15); 
   }
   
   .step-title-sec5 {
     font-size: 2rem;
     font-weight: 800;
     margin-bottom: 0.5rem;
     color: #fff;
     line-height: 1.2;
   }
   
   .step-indicator-sec5.active-sec5 .step-title-sec5 {
     color: var(--color-primary-lilac) !important;
   }
   
   .step-desc-sec5 {
     font-size: 1rem;
     color: #fff;
     line-height: 1.3;
     white-space: normal; 
   }
   
   /* --- RESPONSIVE SECCIÓN 5 --- */
   @media (max-width: 950px) {
     .main-title-sec5 {
       font-size: 2rem;
     }
   
     .carousel-container-sec5 { 
       flex-direction: column; 
       gap: 2rem; 
       min-height: auto;
     }
   
     .center-stage-sec5 { 
       order: 1; 
       align-items: center; 
     }
   
     .side-panel-sec5.left-panel-sec5 { 
       order: 2; 
       text-align: center; 
       align-items: center; 
       height: auto; 
     }
   
     .side-panel-sec5.right-panel-sec5 { 
       order: 3; 
       text-align: center; 
       align-items: center; 
       height: auto; 
     }
   
     .ribbon-wrapper-sec5 { 
       mask-image: none; 
       -webkit-mask-image: none; 
     }
   
     .steps-ribbon-sec5 { 
       padding: 40px 20px 20px 20px; 
       align-items: flex-start; 
     }
   
     .step-indicator-sec5 { 
       transform-origin: center top; 
       padding-bottom: 0; 
     }
   
     .phone-mockup-sec5 {
       width: 280px;
     }
   }
   
   /* ===================================================================
      SECCIÓN 6 - CONFIGURACIÓN DEL COSTO DEL DELIVERY
      =================================================================== */
   
   .seccion_normal_6 {
     padding: 8em 0em;
     overflow: hidden;
     background: #957AFB;
   }
   
   .seccion-6-container {
     padding: 0;
     max-width: 100%;
   }
   
   /* --- CONTENEDOR PRINCIPAL --- */
   .delivery-section-sec6 {
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding: 4rem 0rem;
     color: white;
     position: relative;
   }
   
   /* Efecto de fondo sutil (Círculos decorativos) */
   .delivery-section-sec6::before {
     content: '';
     position: absolute;
     top: -10%;
     left: -10%;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
     z-index: 0;
   }
   
   /* --- LADO IZQUIERDO: TEXTO --- */
   .delivery-text-content-sec6 {
     flex: 1;
     max-width: 500px;
     z-index: 2;
   }
   
   /* Regla anterior comentada: .icon-delivery-sec6 svg */
   .icon-delivery-sec6 img {
     width: 100px; /* Ajusta este tamaño según tu PNG */
     height: auto;
     margin-bottom: 2rem;
     display: block;
     /* Animación de entrada deslizante que se repite cada 4 segundos */
     animation: slideInMotoSec6 4s ease-out infinite;
   }
   
   /* Si tu PNG es oscuro y el fondo es oscuro, quizás quieras agregarle un filtro de brillo */
   /* .icon-delivery-sec6 img { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); } */
   
   .delivery-title-sec6 {
     font-size: 2.5rem;
     line-height: 1;
     margin-bottom: 1.5rem;
     text-transform: uppercase;
     text-align: left;
   }
   
   .light-text-sec6 {
     font-weight: 300;
   }
   
   .highlight-text-sec6 {
     font-weight: 550;
     background: #000;
     color: #fff;
     padding: 8px 15px 5px 15px;
     display: inline-block;
     margin: 10px 0;
     border-radius: 30px;
   }
   
   
   /* --- LADO DERECHO: CELULARES (GRID/FLEX) --- */
   .delivery-phones-container-sec6 {
     flex: 2;
     display: flex;
     justify-content: center;
     z-index: 2;
     perspective: 1000px;
   }
   
   /* --- TARJETA DE CELULAR INDIVIDUAL --- */
   .phone-card-sec6 {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 280px;
     text-align: center;
     animation: floatPhoneSec6 6s ease-in-out infinite;
     animation-delay: var(--delay-sec6);
     transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
     transform-origin: center bottom;
     position: relative;
   }
   
   .phone-label-sec6 {
     font-size: 2rem;
     font-weight: 800;
     margin-bottom: 1.5rem;
     text-transform: uppercase;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     font-style: italic !important;
     color: #000 !important;
   }
   
   .phone-mockup-wrapper-sec6 {
     transition: all 0.5s ease;
     width: 100%;
   }
   
   .phone-img-sec6 {
     width: 90%;
     height: auto;
     display: block;
   }
   
   .phone-caption-sec6 {
     margin-top: 1.5rem;
     font-size: 1.4rem;
     max-width: 250px;
   }
   
   /* --- EFECTOS HOVER (FOCUS MODE) --- */
   .delivery-phones-container-sec6:hover .phone-card-sec6 {
     filter: blur(4px) grayscale(0.6);
     opacity: 0.6;
     transform: scale(0.9);
   }
   
   .delivery-phones-container-sec6 .phone-card-sec6:hover {
     filter: blur(0) grayscale(0);
     opacity: 1;
     z-index: 10;
     transform: scale(1.1) translateY(-20px);
   }
   
   .delivery-phones-container-sec6 .phone-card-sec6:hover .phone-mockup-wrapper-sec6 {
     border-color: var(--color-primary-lilac);
     box-shadow: 
       0 0 30px rgba(149, 122, 251, 0.6),
       0 0 0 2px var(--color-primary-lilac);
   }
   
   /* --- KEYFRAMES (ANIMACIONES AUTOMÁTICAS) --- */
   @keyframes floatPhoneSec6 {
     0%, 100% {
       transform: translateY(0px);
     }
     50% {
       transform: translateY(-20px);
     }
   }
   
   /* ===================================================================
      SECCIÓN 6 MÓVIL - CARRUSEL
      =================================================================== */
   
   /* Ocultar carrusel en desktop */
   .carousel-mobile-sec6 {
     display: none;
   }
   
   /* Estilos del carrusel móvil */
   @media screen and (max-width: 767px) {
     /* Ocultar versión desktop */
     .delivery-phones-container-sec6 {
       display: none;
     }
     
     /* Mostrar carrusel móvil */
     .carousel-mobile-sec6 {
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       width: 100%;
       max-width: 100%;
       margin-top: 2rem;
       padding: 0 1rem;
     }
     
     /* Centrar textos en móvil */
     .delivery-text-content-sec6 {
       text-align: center;
       max-width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
     }
     
     .icon-delivery-sec6 {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
     }
     
     .icon-delivery-sec6 img {
       width: 80px !important;
       height: auto;
       margin-bottom: 1.5rem;
     }
     
     .delivery-title-sec6 {
       text-align: center;
       font-size: 1.8rem !important;
       line-height: 1.2;
       width: 100%;
     }
     
     /* Contenedor del carrusel */
     .carousel-content-sec6-mobile {
       position: relative;
       width: 100%;
       max-width: 280px;
       overflow: hidden;
     }
     
     /* Slides del carrusel */
     .carousel-slide-sec6-mobile {
       display: none;
       flex-direction: column;
       align-items: center;
       text-align: center;
       width: 100%;
       opacity: 0;
       transform: translateX(100%);
       transition: opacity 0.5s ease, transform 0.5s ease;
     }
     
     .carousel-slide-sec6-mobile.active-slide-sec6-mobile {
       display: flex;
       opacity: 1;
       transform: translateX(0);
     }
     
     /* Label del teléfono */
     .phone-label-sec6-mobile {
       font-size: 1.2rem;
       font-weight: 800;
       margin-bottom: 1rem;
       text-transform: uppercase;
       text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       font-style: italic !important;
       color: #000 !important;
     }
     
     /* Wrapper de la imagen */
     .phone-mockup-wrapper-sec6-mobile {
       width: 100%;
       max-width: 200px;
       margin: 0 auto;
     }
     
     /* Imagen del teléfono */
     .phone-img-sec6-mobile {
       width: 100%;
       height: auto;
       display: block;
     }
     
     /* Descripción */
     .phone-caption-sec6-mobile {
       margin-top: 1rem;
       font-size: 1.2rem;
       max-width: 250px;
       margin-left: auto;
       margin-right: auto;
       line-height: 1.4;
     }
     
     /* Flechas de navegación */
     .carousel-arrow-sec6-mobile {
       background: rgba(255, 255, 255, 0.8);
       border: 1px solid rgba(255, 255, 255, 0.9);
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: var(--color-primary-lilac);
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 10;
       flex-shrink: 0;
     }
     
     .carousel-arrow-sec6-mobile:hover:not(.disabled-sec6-mobile) {
       background: rgba(255, 255, 255, 0.9);
       border-color: rgba(255, 255, 255, 1);
     }
     
     .carousel-arrow-sec6-mobile svg {
       width: 20px;
       height: 20px;
       stroke-width: 2;
     }
     
     .carousel-arrow-left-sec6-mobile {
       left: 0.5rem;
     }
     
     .carousel-arrow-right-sec6-mobile {
       right: 0.5rem;
     }
     
     .carousel-arrow-sec6-mobile.disabled-sec6-mobile {
       opacity: 0.3;
       cursor: not-allowed;
       pointer-events: none;
     }
   }
   
   @keyframes slideInMotoSec6 {
     0% {
       transform: translateX(-100px);
       opacity: 0;
     }
     25% {
       transform: translateX(0);
       opacity: 1;
     }
     100% {
       transform: translateX(0);
       opacity: 1;
     }
   }
   
   /* --- RESPONSIVE SECCIÓN 6 --- */
   @media (max-width: 1100px) {
     .delivery-section-sec6 {
       flex-direction: column;
       padding: 2rem;
       text-align: center;
     }
     
     .delivery-text-content-sec6 {
       margin-bottom: 3rem;
       align-items: center;
       display: flex;
       flex-direction: column;
     }
   
     .delivery-phones-container-sec6 {
       flex-direction: column;
       gap: 4rem;
     }
     
     .delivery-phones-container-sec6:hover .phone-card-sec6 {
       filter: none;
       opacity: 1;
       transform: none;
     }
     
     .phone-card-sec6 {
       width: 100%;
       max-width: 320px;
     }
   }
   
   /* ===================================================================
      SECCIÓN 7 - WHATSAPP DELIVERY / UBICACIÓN INTEGRADA
      =================================================================== */
   
   .whatsapp-delivery-section-sec7 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   .whatsapp-delivery-section-sec7 {
     font-family: 'Arial', sans-serif;
     background: radial-gradient(circle at center center, #2d1b69 0%, #000000 40%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 15% 20px 5% 20px;
     color: white;
   }
   
   .whatsapp-delivery-section-sec7 .wds-title-container-sec7 {
     text-align: center;
     width: 100%;
   }
   
   .whatsapp-delivery-section-sec7 .wds-container-sec7 {
     display: flex;
     gap: 25px;
     align-items: flex-start;
     max-width: 1200px;
     width: 100%;
   }
   
   .whatsapp-delivery-section-sec7 .wds-left-section-sec7 {
     flex: 1;
     margin-top: 10%;
     text-align: right;
   }
   
   .whatsapp-delivery-section-sec7 .wds-title-sec7 {
     font-size: 42px;
     font-weight: bold;
     color: #957AFB;
     margin-bottom: 70px;
     font-family: 'Touche', sans-serif;
   }
   
   .whatsapp-delivery-section-sec7 .wds-subtitle-sec7 {
     font-size: 20px;
     line-height: 1.6;
     color: #ffffff;
     max-width: 350px;
     font-family: 'Touche', sans-serif;
     text-align: right;
   }
   
   .whatsapp-delivery-section-sec7 .wds-phone-mockup-sec7 {
     width: 280px;
     height: 560px;
     border-radius: 40px;
     overflow: visible;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .whatsapp-delivery-section-sec7 .wds-phone-screen-sec7 {
     width: 100%;
     height: 100%;
     display: none;
     align-items: center;
     justify-content: center;
   }
   
   .whatsapp-delivery-section-sec7 .wds-phone-screen-sec7.active-sec7 {
     display: flex;
   }
   
   .whatsapp-delivery-section-sec7 .wds-phone-screen-sec7 img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 40px;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
   }
   
   .whatsapp-delivery-section-sec7 .wds-right-section-sec7 {
     flex: 1;
     margin-top: 20%;
   }
   
   .whatsapp-delivery-section-sec7 .wds-steps-container-sec7 {
     display: flex;
     gap: 15px;
     margin-bottom: 30px;
   }
   
   .whatsapp-delivery-section-sec7 .wds-step-sec7 {
     font-size: 16px;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s;
   }
   
   .whatsapp-delivery-section-sec7 .wds-step-sec7:hover {
     transform: scale(1.1);
   }
   
   .whatsapp-delivery-section-sec7 .wds-step-sec7.active-sec7 {
     background: white;
     color: #000;
     border-color: white;
     animation: scaleStepSec7 0.5s ease-in-out;
   }
   
   @keyframes scaleStepSec7 {
     0% {
       transform: scale(1);
     }
     50% {
       transform: scale(1.15);
     }
     100% {
       transform: scale(1);
     }
   }
   
   .whatsapp-delivery-section-sec7 .wds-step-description-sec7 {
     font-size: 18px;
     line-height: 1.6;
     max-width: 350px;
     margin-bottom: 20px;
     font-family: 'Touche', sans-serif;
     text-align: left;
   }
   
   .whatsapp-delivery-section-sec7 .wds-step-number-sec7 {
     color: #fff;
     margin-right: 5px;  
     font-family: 'Touche', sans-serif;
   }
   
   .whatsapp-delivery-section-sec7 .wds-step-content-sec7 {
     display: none;
   }
   
   .whatsapp-delivery-section-sec7 .wds-step-content-sec7.active-sec7 {
     display: block;
   }
   
   .whatsapp-delivery-section-sec7 .wds-buttons-container-sec7 {
     display: flex;
     flex-direction: column;
     gap: 12px;
     max-width: 180px;
   }
   
   .whatsapp-delivery-section-sec7 .wds-option-button-sec7 {
     padding: 14px 24px;
     border-radius: 15px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s;
     text-align: center;
     font-family: 'Touche', sans-serif;
   }
   
   .whatsapp-delivery-section-sec7 .wds-option-button-sec7.active-sec7 {
     background: white;
     border: 1px solid white;
     color: #957AFB;
     font-family: 'Touche', sans-serif;
   }
   
   .whatsapp-delivery-section-sec7 .wds-option-button-sec7.inactive-sec7 {
     background: transparent;
     border: 1px solid white;
     color: white;
     font-family: 'Touche', sans-serif;
   }
   
   .whatsapp-delivery-section-sec7 .wds-subtitle-sec7 span {
     color: #957AFB;
   }
   
   /* --- RESPONSIVE SECCIÓN 7 --- */
   @media (max-width: 1100px) {
     .whatsapp-delivery-section-sec7 .wds-container-sec7 {
       flex-direction: column;
       align-items: center;
     }
     
     .whatsapp-delivery-section-sec7 .wds-left-section-sec7,
     .whatsapp-delivery-section-sec7 .wds-right-section-sec7 {
       margin-top: 0;
       text-align: center;
     }
     
     .whatsapp-delivery-section-sec7 .wds-subtitle-sec7 {
       text-align: center;
       max-width: 100%;
     }
   }
   
   /* ===================================================================
      SECCIÓN 7 MÓVIL - UBICACIÓN INTEGRADA
      =================================================================== */
   
   .seccion_normal_7_mobile {
     display: none;
   }
   
   .wds-mobile-section-sec7 {
     padding: 30% 0;
     background: #000;
   }
   
   .wds-mobile-title-wrapper-sec7 {
     text-align: center;
     margin-bottom: 0.5em;
     padding: 0 15px;
   }
   
   .wds-mobile-title-sec7 {
     font-size: 22px;
     font-weight: bold;
     color: #957AFB;
     margin: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   
   .wds-mobile-title-sec7 .fa-map-marker {
     color: #EA4335;
     font-size: 30px !important;
     margin-top: -7px;
     margin-left: 10px;
   }
   
   .wds-mobile-subtitle-wrapper-sec7 {
     text-align: center;
     margin-bottom: 2em;
     padding: 0 15px;
   }
   
   .wds-mobile-subtitle-sec7 {
     font-size: 14px;
     color: #ffffff;
     margin: 0;
     line-height: 1.4;
   }
   
   .highlight-maps-sec7 {
     color: #957AFB;
   }
   
   .wds-mobile-phone-dots-container-sec7 {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin-bottom: 1.5em;
     padding: 0 15px;
   }
   
   .wds-mobile-phone-sec7 {
     max-width: 180px;
     aspect-ratio: 1 / 2;
     position: relative;
   }
   
   .wds-mobile-phone-img-sec7 {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .wds-mobile-steps-sec7 {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .wds-mobile-step-sec7 {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     cursor: pointer;
     font-size: 14px;
     transition: all 0.3s;
   }
   
   .wds-mobile-step-sec7.active-sec7-mobile {
     background: white;
     color: #000;
     border: none;
   }
   
   .wds-mobile-step-sec7:not(.active-sec7-mobile) {
     background: rgba(255, 255, 255, 0.2);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.3);
   }
   
   .wds-mobile-step-sec7:not(.active-sec7-mobile):hover {
     transform: scale(1.1);
   }
   
   .wds-mobile-content-wrapper-sec7 {
     text-align: center;
     padding: 0 15px;
   }
   
   .wds-mobile-content-sec7 {
     display: none;
   }
   
   .wds-mobile-content-sec7.active-sec7-mobile {
     display: block;
   }
   
   .wds-step-description-sec7 {
     font-size: 13px;
     color: #ffffff;
     line-height: 1.5;
     margin-bottom: 1em;
   }
   
   .step-number-sec7 {
     color: #fff;
     font-weight: normal;
   }
   
   .wds-mobile-buttons-sec7 {
     display: flex;
     flex-direction: column;
     gap: 8px;
     max-width: 140px;
     margin: 0 auto;
   }
   
   .wds-mobile-button-sec7 {
     padding: 10px 18px 6px 18px;
     border-radius: 12px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s;
     text-align: center;
     border: 1px solid white;
   }
   
   .wds-mobile-button-sec7.active-sec7-mobile {
     background: white;
     color: #957AFB;
   }
   
   .wds-mobile-button-sec7:not(.active-sec7-mobile) {
     background: transparent;
     color: white;
   }
   
   @keyframes scaleMobileStepSec7 {
     0% { transform: scale(1); }
     50% { transform: scale(1.15); }
     100% { transform: scale(1); }
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_7 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_7_mobile {
       display: block; /* Mostrar versión móvil */
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_7_mobile {
       display: none;
     }
     
     .seccion_normal_7 {
       display: block;
     }
   }


   /* --- AJUSTES PARA MÓVILES (Pantallas menores a 768px) --- */
@media (max-width: 768px) {
    
  /* 1. Reducimos la altura del escenario para que no ocupe tanto */
  .ptn-3d-stage {
      height: 400px; 
  }

  /* 2. Hacemos la imagen un poco más chica que en desktop (230px -> 180px) */
  .ptn-3d-img {
      width: 180px; 
  }

  /* 3. Ajustamos las distancias para que quepan en la pantalla vertical */
  
  /* PREVIA (Izquierda): La acercamos mucho más (ej. -130px) */
  .ptn-3d-img.prev {
      transform: translateX(-130px) scale(0.75);
  }

  /* SIGUIENTE (Derecha): La acercamos mucho más (ej. 130px) */
  .ptn-3d-img.next {
      transform: translateX(130px) scale(0.75);
  }
  
  /* Ajustamos los botones para que no estorben */
  .ptn-3d-arrow-btn {
      width: 40px;
      height: 40px;
  }
  
  #ptnBtnPrev { left: 5px; }
  #ptnBtnNext { right: 5px; }
}
   
   /* ===================================================================
      SECCIÓN 8 - CHAT SECTION / BASE DE DATOS Y CAMPAÑAS
      =================================================================== */
   .seccion_normal_8{
     padding: 10em 0em;
   }
   
   .chat-section-sec8 {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 2rem; 
     box-sizing: border-box;
   }
   
   /* --- SVG DE FONDO --- */
   .wave-svg-container-sec8 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1; 
     pointer-events: none;
   }
   
   .wave-path-sec8 {
     fill: none;
     stroke: #fff;
     stroke-width: 2;
     stroke-linecap: round;
     filter: drop-shadow(0 0 3px rgba(149, 122, 251, 0.5));
     transition: d 0.1s ease-out; 
   }
   
   /* --- CONTENEDOR GRID --- */
   .content-wrapper-sec8 {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: 1fr auto 1fr; 
     gap: 2rem;
     width: 100%;
     max-width: 1300px;
   }
   
   /* --- TEXTO IZQUIERDO (Arriba / Start) --- */
   .left-col-sec8 {
     text-align: right;
     padding-right: 20px;
     align-self: start; 
     margin-top: 50px; 
   }
   
   .text-small-sec8 {
     font-size: 2.2rem;
     font-weight: 300;
     line-height: 1.2;
     display: block;
     margin-bottom: 5px;
     color: #ffffff;
     font-family: 'Touche', sans-serif;
   }
   
   /* Texto pequeño izquierdo con márgenes */
   .left-col-sec8 .text-small-sec8:first-child {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
   }
   
   /* Texto pequeño derecho */
   #targetRightSec8 {
     margin-top: 20px;
   }
   
   .text-big-sec8 {
     font-size: 3rem;
     font-weight: 800;
     line-height: 1;
     color: var(--color-primary-lilac);
     text-transform: uppercase;
     text-shadow: 0 0 25px rgba(149, 122, 251, 0.3);
     display: block;
     font-family: 'Touche', sans-serif;
   }
   
   /* BASE DE DATOS - primer text-big en left-col */
   .left-col-sec8 .text-big-sec8:first-of-type {
     margin-top: 0.5em;
   }
   
   /* CAMPAÑAS MASIVAS - primer text-big en right-title */
   .right-title-sec8 .text-big-sec8:first-child {
     margin-top: 0.5em;
   }
   
   /* POR WHATSAPP - último text-big en right-title */
   .right-title-sec8 .text-big-sec8:last-child {
     margin-bottom: 0.5em;
   }
   
   /* Icono de WhatsApp SVG */
   .whatsapp-icon-sec8 {
     display: inline-block;
     vertical-align: -0.15em;
     margin-left: 8px;
     width: 36px;
     height: 36px;
     fill: #fff;
     filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
     animation: wobbleSec8 3s ease-in-out infinite;
     transform-origin: center center;
   }
   
   @keyframes wobbleSec8 {
     0%, 100% {
       transform: rotate(0deg);
     }
     15% {
       transform: rotate(-5deg);
     }
     30% {
       transform: rotate(5deg);
     }
     45% {
       transform: rotate(-3deg);
     }
     60% {
       transform: rotate(3deg);
     }
     75% {
       transform: rotate(-1deg);
     }
     90% {
       transform: rotate(1deg);
     }
   }
   
   /* --- CELULAR CENTRAL (Centro) --- */
   .phone-col-sec8 {
     position: relative;
     display: flex;
     justify-content: center;
     align-self: center;
   }
   
   .phone-chat-img-sec8 {
     width: 290px; 
     max-width: 90vw; 
     height: auto;
     border-radius: 45px;
     box-shadow: 0 0 80px rgba(149, 122, 251, 0.15);
     animation: floatPhoneSec8 6s ease-in-out infinite; 
     z-index: 10;
   }
   
   /* --- TEXTO DERECHO (Abajo / End) --- */
   .right-col-sec8 {
     text-align: left;
     padding-left: 20px;
     align-self: end; 
     margin-bottom: 20px; 
   }
   
   .right-title-sec8 {
     margin-bottom: 0;
     display: flex;
     flex-direction: column;
   }
   
   .right-title-sec8 .text-big-sec8:first-child {
     margin-bottom: 0;
   }
   
   .text-desc-sec8 {
     font-size: 2.2rem;
     font-weight: 300;
     margin-bottom: 25px;
     display: block;
     color: #ffffff;
     font-family: 'Touche', sans-serif;
   }

   /* Contenedor para centrar el botón */
.contenedor-boton-centro {
  width: 100%;
  display: flex;       /* Activa el modelo flexible */
  justify-content: center; /* Centra horizontalmente */
  margin-top: 20px;    /* Un poco de espacio entre la imagen y el botón */
}
   
   /* BOTÓN */
    

   .btn-empezar-campanas {
    margin-top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #0a090a;
    color: white;
    text-decoration: none;
    padding: 12px 60px 8px 60px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 2rem;
    text-transform: uppercase;
    box-shadow: 0 5px 20px rgba(15, 15, 15, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Touche', sans-serif;
   }

   
   
   .btn-empezar-campanas:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(8, 8, 8, 0.6);
     text-decoration: none;
     color: white;
   }
   
   /* Puntos de anclaje para JS */
   #targetLeftSec8 { display: inline-block; position: relative; }
   #targetRightSec8 { display: inline-block; position: relative; }
   
   @keyframes floatPhoneSec8 {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-15px); }
   }
   
   /* RESPONSIVE SECCIÓN 8 */
   @media (max-width: 1024px) {
     .content-wrapper-sec8 {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto auto;
       text-align: center;
       gap: 3rem;
       min-height: auto;
     }
     
     .left-col-sec8 { 
       text-align: center; 
       padding-right: 0; 
       order: 1; 
       align-self: center; 
       margin-top: 0;
     }
     
     .phone-col-sec8 { 
       order: 2; 
       align-self: center;
     }
     
     .right-col-sec8 { 
       text-align: center; 
       padding-left: 0; 
       order: 3; 
       align-self: center;
       margin-bottom: 0;
     }
     
     .wave-svg-container-sec8 { opacity: 0.2; }
     .text-big-sec8 { font-size: 2rem; }
     .phone-chat-img-sec8 { width: 260px; }
   }

   /* ===================================================================
      SECCIÓN 7 Carrusel de imagnes
      =================================================================== */
/* --- CONFIGURACIÓN GENERAL DE LA SECCIÓN --- */
.ptn-3d-section-wrapper {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif; /* Asegúrate de importar esta fuente o Touche */
  width: 100%;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin-bottom: 80px;
}

/* --- TITULARES --- */
.ptn-3d-header {
  text-align: center;
  margin-bottom: 40px; 
  padding: 0 20px;
  z-index: 10;
}

.ptn-3d-title {
  font-size: 3.8rem; /* Ajustado para que no sea gigante */
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0 0 20px rgba(149, 122, 251, 0.4);
  color: #957AFB;
  margin-top: 70px;
}

.ptn-3d-subtitle {
  font-size: 1.9rem;
  color: #ffffff;
  font-weight: 300;
  margin-top: -1px;
  opacity: 0.9;
}

/* --- CONTENEDOR DEL SLIDER --- */
.ptn-3d-gallery-container {
  width: 100%;
  max-width: 1400px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Importante: para que los botones absolutos se posicionen respecto a esto */
}

/* --- ESCENARIO 3D --- */
.ptn-3d-stage {
  width: 100%;
  height: 600px; /* Altura fija para centrar verticalmente */
  position: relative;
  perspective: 1500px; /* Profundidad 3D */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible; /* Permitir que las sombras se vean */
}

/* --- LAS IMÁGENES --- */
.ptn-3d-img {
  position: absolute;
  width: 230px; /* Ancho fijo para controlar mejor el diseño (aprox tamaño celular) */
  height: auto;
  object-fit: contain;
  border-radius: 30px; /* Bordes redondeados del celular */
  
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Estado inicial (oculto) */
  opacity: 0;
  z-index: 0;
  transform: translateX(0) scale(0.6);
}

/* ESTADO: ACTIVA (CENTRO) */
.ptn-3d-img.active {
  opacity: 1;
  z-index: 10;
  transform: translateX(0) scale(1.1); /* Un poco más grande para destacar */
  filter: blur(0px) brightness(1);
}

/* ESTADO: PREVIA (IZQUIERDA) */
.ptn-3d-img.prev {
  opacity: 0.5;
  z-index: 5;
  /* Mueve la imagen 350px a la izquierda y la reduce */
  transform: translateX(-250px) scale(0.85); 
  filter: blur(3px) brightness(0.6); /* Efecto borroso y oscuro */
  cursor: pointer;
}

/* ESTADO: SIGUIENTE (DERECHA) */
.ptn-3d-img.next {
  opacity: 0.5;
  z-index: 5;
  /* Mueve la imagen 350px a la derecha y la reduce */
  transform: translateX(250px) scale(0.85);
  filter: blur(3px) brightness(0.6);
  cursor: pointer;
}

.ptn-3d-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  /* 1. MINIMALISMO VISUAL (Casi invisible) */
  background: transparent; /* Sin fondo de caja */
  border: none;            /* Sin bordes */
  color: #957AFB;
  
  /* 2. UX: ÁREA DE CLIC GENEROSA (Hit Box) */
  /* Aunque la flecha es fina, el botón ocupa espacio invisible para que el dedo acierte siempre */
  width: 60px; 
  height: 100px; /* Alto vertical para facilitar el toque con el pulgar */
  
  /* 3. TIPOGRAFÍA */
  font-size: 3rem; /* Flecha grande y delgada */
  font-weight: 100; /* Lo más fino posible */
  
  cursor: pointer;
  z-index: 100;
  
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
  /* Sombra suave al texto para que se vea sobre cualquier fondo (blanco o negro) */
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- FEEDBACK VISUAL (Hover en Desktop) --- */
.ptn-3d-arrow-btn:hover {
  color: #957AFB; /* Se ilumina con tu color lila al pasar el mouse */
  transform: translateY(-50%) scale(1.1); /* Pequeño zoom */
}


/* Ubicación Desktop */
#ptnBtnPrev { left: 14%; }
#ptnBtnNext { right: 14%; }


@media (min-width: 769px) and (max-width: 1180px) {
  /* Pegados a los bordes para no tapar el contenido */
#ptnBtnPrev { left: 0; justify-content: flex-start; padding-left: 10px; }
#ptnBtnNext { right: 0; justify-content: flex-end; padding-right: 10px; }
}


/* --- AJUSTES DEFINITIVOS PARA MÓVILES (Efecto 3D Pequeño) --- */

@media (max-width: 768px) {
  .ptn-3d-campanas {
    font-size: 1.8rem;
  }

  /* 1. Reducir drásticamente la altura del escenario */
  /* Necesitamos menos altura porque las imágenes serán más chicas */
  .ptn-3d-stage {
      height: 350px; 
  }

  .ptn-3d-header {
    margin-top: -5px;
  }

  /* 2. Definir un tamaño base MUCHO más pequeño para los celulares */
  .ptn-3d-img {
      width: 178px; /* Ancho base pequeño (en desktop es 320px) */
  }

  /* 3. Ajustar la imagen central activa */
  .ptn-3d-img.active {
      /* La escalamos un poquito desde la base de 150px */
      transform: translateX(0) scale(1.1); 
      /* Reducimos el resplandor para que no manche tanto en pantalla chica */
  }

  /* 4. Configurar las laterales para que se vean PEQUEÑAS y CERCA */
  .ptn-3d-img.prev, .ptn-3d-img.next {
      opacity: 0.5; /* Aseguramos que sean visibles */
      pointer-events: auto; /* Permitimos click */
      filter: blur(2px) brightness(0.7); /* Un poco menos de blur para que se distingan en pequeño */
  }

  /* PREVIA (Izquierda): La movemos solo 100px a la izquierda y la achicamos al 75% */
  .ptn-3d-img.prev {
      transform: translateX(-100px) scale(0.75);
  }

  /* SIGUIENTE (Derecha): La movemos solo 100px a la derecha y la achicamos al 75% */
  .ptn-3d-img.next {
      transform: translateX(100px) scale(0.75);
  }

  /* 5. Ajustes estéticos de textos y botones para acompañar el tamaño */
  .ptn-3d-title {
      font-size: 2.3rem; /* Título más pequeño */
      margin-bottom: 5px;
  }
  .ptn-3d-subtitle {
      font-size: 1.3rem;
      margin-top: 5px;
      margin-bottom: 30px;
  }

  .ptn-3d-arrow-btn {
    /* En móvil aumentamos la opacidad porque no hay "hover" */
    color: #957AFB; 
    font-size: 2.5rem; /* Un poco más chico visualmente */
    height: 80px; /* Área de toque cómoda */
    width: 50px;
}

.ptn-3d-arrow-btn:hover {
  color: #957AFB; /* Se ilumina con tu color lila al pasar el mouse */
}

/* Pegados a los bordes para no tapar el contenido */
#ptnBtnPrev { left: 0; justify-content: flex-start; padding-left: 10px; }
#ptnBtnNext { right: 0; justify-content: flex-end; padding-right: 10px; }
}




   
   
   /* ===================================================================
      SECCIÓN 8 MÓVIL - CHAT SECTION / BASE DE DATOS Y CAMPAÑAS
      =================================================================== */
   
   .seccion_normal_8_mobile {
     display: none;
     padding: 8em 0em;
   }
   
   .chat-section-sec8-mobile {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 1rem; 
     box-sizing: border-box;
   }
   
   /* --- CONTENEDOR VERTICAL MÓVIL --- */
   .content-wrapper-sec8-mobile {
     position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     gap: 2rem;
   }
   
   /* --- TEXTO IZQUIERDO MÓVIL (Centrado) --- */
   .left-col-sec8-mobile {
     text-align: center;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   .text-small-sec8-mobile {
     font-size: 1.6rem;
     font-weight: 300;
     line-height: 1.2;
     display: block;
     margin-bottom: 0.5em;
     color: #ffffff;
     font-family: 'Touche', sans-serif;
   }
   
   .text-big-sec8-mobile {
     font-size: 2rem;
     font-weight: 800;
     line-height: 1;
     color: var(--color-primary-lilac);
     text-transform: uppercase;
     text-shadow: 0 0 12px rgba(149, 122, 251, 0.3);
     display: block;
     font-family: 'Touche', sans-serif;
   }
   
   .left-col-sec8-mobile .text-big-sec8-mobile:first-of-type {
     margin-top: 0.5em;
   }
   
   /* --- CELULAR CENTRAL MÓVIL (Debajo del texto izquierdo) --- */
   .phone-col-sec8-mobile {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
   }
   
   .phone-chat-img-sec8-mobile {
     width: 150px; 
     max-width: 45vw; 
     height: auto;
     border-radius: 22px;
     box-shadow: 0 0 40px rgba(149, 122, 251, 0.15);
     border: 2px solid #1a1a1a;
     animation: floatPhoneSec8Mobile 6s ease-in-out infinite; 
     background: #000; 
     z-index: 10;
   }
   
   @keyframes floatPhoneSec8Mobile {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-8px); }
   }
   
   /* --- TEXTO DERECHO MÓVIL (Centrado, debajo de la imagen) --- */
   .right-col-sec8-mobile {
     text-align: center;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   #targetRightSec8Mobile {
     margin-top: 0;
     margin-bottom: 0.5em;
   }
   
   .right-title-sec8-mobile {
     margin-bottom: 0.5em;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   .right-title-sec8-mobile .text-big-sec8-mobile:first-child {
     margin-top: 0.5em;
     margin-bottom: 0;
   }
   
   .right-title-sec8-mobile .text-big-sec8-mobile:last-child {
     margin-bottom: 0.5em;
   }
   
   /* Icono de WhatsApp SVG Móvil */
   .whatsapp-icon-sec8-mobile {
     display: inline-block;
     vertical-align: -0.15em;
     margin-left: 4px;
     width: 18px;
     height: 18px;
     fill: #fff;
     filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
     animation: wobbleSec8Mobile 3s ease-in-out infinite;
     transform-origin: center center;
   }
   
   @keyframes wobbleSec8Mobile {
     0%, 100% {
       transform: rotate(0deg);
     }
     15% {
       transform: rotate(-5deg);
     }
     30% {
       transform: rotate(5deg);
     }
     45% {
       transform: rotate(-3deg);
     }
     60% {
       transform: rotate(3deg);
     }
     75% {
       transform: rotate(-1deg);
     }
     90% {
       transform: rotate(1deg);
     }
   }
   
   .text-desc-sec8-mobile {
     font-size: 1.5rem;
     font-weight: 300;
     margin-bottom: 1em;
     display: block;
     color: #ffffff;
     font-family: 'Touche', sans-serif;
   }
   
    /* Fuerza la disposición vertical: Contenido arriba, botón abajo */
  .layout-vertical {
    display: flex;
    flex-direction: column; /* Apila los hijos verticalmente */
    align-items: center;    /* Centra los hijos horizontalmente */
    width: 100%;            /* Ocupa todo el ancho disponible */
    position: relative;
    z-index: 2;             /* Asegura que quede por encima del fondo/olas */
  }

  /* Ajuste de seguridad para el contenedor del botón */
  .contenedor-boton-centro {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px; /* Separación de la imagen/columnas */
  }

   /* BOTÓN MÓVIL */
   .btn-empezar-campanas-mobile {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background-color: #0a090a;
     color: white;
     text-decoration: none;
     padding: 7px 30px 4px 30px;
     border-radius: 25px;
     font-weight: 800;
     font-size: 1.5rem;
     text-transform: uppercase;
     box-shadow: 0 5px 20px rgba(15, 15, 15, 0.4);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     font-family: 'Touche', sans-serif;
     margin-top: -20px;
   }
   
   .btn-empezar-campanas-mobile:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 20px rgba(15, 15, 15, 0.4);
     text-decoration: none;
     color: white;
   }
   
   /* Puntos de anclaje para JS Móvil */
   #targetLeftSec8Mobile { display: inline-block; position: relative; }
   #targetRightSec8Mobile { display: inline-block; position: relative; }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_8 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_8_mobile {
       display: block; /* Mostrar versión móvil */
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_8_mobile {
       display: none;
     }
     
     .seccion_normal_8 {
       display: block;
     }
   }
   
   /* ===================================================================
      SECCIÓN 9 - IMPULSAMOS TU NEGOCIO
      =================================================================== */
   
   .seccion_normal_9 {
     position: relative;
     padding: 9.9em 0em 0em 0em;
     margin-bottom: 0;
     background: #000;
   }
   
   .seccion-9-container {
     padding: 0 2em 0 2em;
     margin-bottom: 0;
   }
   
   /* Estilos para la versión desktop de la sección 9 */
   .seccion_normal_9 .seccion9-movil-content {
     text-align: center;
     margin-bottom: 4em;
   }
   
   .seccion_normal_9 .seccion9-movil-title {
     color: #fff;
     font-size: 3.5rem !important;
     line-height: 1.4;
     display: block;
   }
   
   .seccion_normal_9 .seccion9-movil-title-bold {
     color: #957AFB !important;
   }
   
   .seccion_normal_9 .seccion9-movil-button-row {
     text-align: center;
     margin-top: 4em;
     margin-bottom: 0;
     padding-bottom: 0;
   }
   
   .seccion_normal_9 .seccion9-movil-btn_empezar {
     border-bottom: none !important;
     border: 1px solid #957AFB !important;
     background: #000 !important;
     padding: 30px 60px 25px 60px !important;
     border-top-left-radius: 30px !important;
     border-top-right-radius: 30px !important;
     border-bottom-left-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
     color: #957AFB !important;
     font-size: 20px !important;
     cursor: pointer;
     width: auto;
     display: inline-block;
     margin-bottom: 0;
     transition: all 0.3s ease;
   }
   
   .seccion_normal_9 .seccion9-movil-btn_empezar:hover {
     background: #957AFB;
     color: #000;
     transform: translateY(-2px);
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength {
     display: inline-flex;
     align-items: flex-end;
     justify-content: flex-end;
     width: auto;
     height: 250px !important;
     padding: 8px;
     margin: 60px auto;
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength span {
     display: inline-block;
     width: 50px !important;
     margin-left: 6px;
     transform-origin: bottom;
     background-color: #957AFB;
     border-radius: 8px;
     animation-name: seccion9-signal-animate-fluid;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
     animation-duration: 2.5s;
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength .bar-1-sec9 {
     height: calc(100% / 6 * 1);
     animation-delay: 0.2s;
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength .bar-2-sec9 {
     height: calc(100% / 6 * 2);
     animation-delay: 0.4s;
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength .bar-3-sec9 {
     height: calc(100% / 6 * 3);
     animation-delay: 0.6s;
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength .bar-4-sec9 {
     height: calc(100% / 6 * 4);
     animation-delay: 0.8s;
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength .bar-5-sec9 {
     height: calc(100% / 6 * 5);
     animation-delay: 1s;
   }
   
   .seccion_normal_9 .seccion9-movil-icon__signal-strength .bar-6-sec9 {
     height: 100%;
     animation-delay: 1.2s;
   }
   
   /* Animación de las barras de señal desktop */
   @keyframes seccion9-signal-animate-fluid {
     0% {
       opacity: 0.2;
       transform: scaleY(0.05);
     }
     50% {
       opacity: 1;
       transform: scaleY(1);
     }
     100% {
       opacity: 1;
       transform: scaleY(1);
     }
   }
   
   /* ===================================================================
      SECCIÓN 9 MÓVIL - IMPULSAMOS TU NEGOCIO
      =================================================================== */
   
   .seccion_normal_9_mobile {
     display: none;
     position: relative;
     padding: 3em 0em 0em 0em;
     margin-bottom: 0;
     padding-bottom: 0;
     background: #000;
   }
   
   .seccion9-movil-container {
     padding: 0 1em 0 1em;
     margin-bottom: 0;
     padding-bottom: 0;
   }
   
   /* Estilos móviles - solo se aplican dentro de .seccion_normal_9_mobile */
   .seccion_normal_9_mobile .seccion9-movil-content {
     text-align: center;
     margin-bottom: 2em;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-title {
     color: #fff;
     font-size: 2.2rem !important;
     line-height: 1.4;
     display: block;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-title-bold {
     color: #957AFB;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-button-row {
     text-align: center;
     margin-top: 2em;
     margin-bottom: 0;
     padding-bottom: 0;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-btn_empezar {
     border-bottom: none !important;
     border: 1px solid #957AFB;
     background: #000;
     padding: 24px 40px 20px 40px !important;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     color: #957AFB;
     font-size: 14px !important;
     cursor: pointer;
     width: auto;
     display: inline-block;
     margin-bottom: 0;
     transition: all 0.3s ease;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-btn_empezar:hover {
     background: #957AFB;
     color: #000;
     transform: translateY(-2px);
   }
   
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength {
     display: inline-flex;
     align-items: flex-end;
     justify-content: flex-end;
     width: auto;
     height: 160px !important;
     padding: 4px;
     margin: 40px auto;
   }
   
   /* Estilo base para todas las barras de señal móvil */
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength span {
     display: inline-block;
     width: 30px !important;
     margin-left: 3px;
     transform-origin: bottom;
     background-color: #957AFB;
     border-radius: 4px;
     animation-name: seccion9-signal-animate-fluid-mobile;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
     animation-duration: 2.5s;
   }
   
   /* Alturas y delays para las barras móviles */
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength .bar-1-sec9-mobile {
     height: calc(100% / 6 * 1);
     animation-delay: 0.2s;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength .bar-2-sec9-mobile {
     height: calc(100% / 6 * 2);
     animation-delay: 0.4s;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength .bar-3-sec9-mobile {
     height: calc(100% / 6 * 3);
     animation-delay: 0.6s;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength .bar-4-sec9-mobile {
     height: calc(100% / 6 * 4);
     animation-delay: 0.8s;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength .bar-5-sec9-mobile {
     height: calc(100% / 6 * 5);
     animation-delay: 1s;
   }
   
   .seccion_normal_9_mobile .seccion9-movil-icon__signal-strength .bar-6-sec9-mobile {
     height: 100%;
     animation-delay: 1.2s;
   }
   
   /* Animación de las barras de señal móvil */
   @keyframes seccion9-signal-animate-fluid-mobile {
     0% {
       opacity: 0.2;
       transform: scaleY(0.05);
     }
     50% {
       opacity: 1;
       transform: scaleY(1);
     }
     100% {
       opacity: 1;
       transform: scaleY(1);
     }
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_9 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_9_mobile {
       display: block; /* Mostrar versión móvil */
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_9_mobile {
       display: none;
     }
     
     .seccion_normal_9 {
       display: block;
     }
   }
   
   /* ===================================================================
      SECCIÓN 7.1 - PANEL DE CONTROL
      =================================================================== */
   
   /* Contenedor principal del panel */
   .panel-control-sec7_1 {
     background: #957AFB;
     border-radius: 85px;
   padding: 3em 6em 5em 6em;
     margin-top: 15em;
     margin-bottom: 10em;
   }
   
   /* Título del panel */
   .panel-title-wrapper-sec7_1 {
     text-align: center;
     margin-top: 4em;
   }
   
   .panel-title-sec7_1 {
     font-size: 33px;
     color: #fff;
   }
   
   /* Contenedor de contenido del panel */
   .panel-content-sec7_1 {
     margin-top: 4em;
     color: #957AFB;
     margin-bottom: 2em;
     text-align: center;
     background: #fff;
     border-radius: 45px;
     padding-top: 2em;
   }
   
   .panel-content-sec7_1 .col-md-12:first-child {
     margin-bottom: 1.5em;
   }
   
   .panel-content-sec7_1 .col-md-12:nth-child(2) {
     margin-bottom: 4em;
   }
   
   .panel-content-sec7_1 .col-md-12 span {
     font-size: 24px;
   }
   
   /* Contenedor de video */
   .video-container-sec7_1 {
     width: 90%;
     max-width: 1024px;
     height: auto;
     aspect-ratio: 16 / 9;
     overflow: hidden;
     border-radius: 15px;
     margin: 0 auto;
     display: block;
     margin-bottom: 5em;
     position: relative;
   }
   
   .video-container-sec7_1 iframe,
   .video-container-sec7_1 .youtube-iframe-sec7_1 {
     width: 100%;
     height: 100%;
     border: none;
     border-radius: 15px;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
   }
   
   /* Placeholder del video (lazy loading) */
   .video-placeholder-sec7_1 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 15px;
     overflow: hidden;
     background: #000;
   }
   
   .video-thumbnail-sec7_1 {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .video-play-button-sec7_1 {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: none;
     border: none;
     cursor: pointer;
     padding: 0;
     transition: transform 0.3s ease, opacity 0.3s ease;
     z-index: 2;
   }
   
   .video-play-button-sec7_1:hover {
     transform: translate(-50%, -50%) scale(1.1);
   }
   
   .video-play-button-sec7_1:active {
     transform: translate(-50%, -50%) scale(0.95);
   }
   
   .video-placeholder-sec7_1:hover .video-thumbnail-sec7_1 {
     opacity: 0.8;
     transition: opacity 0.3s ease;
   }
   
   /* Filas de contenido */
   .row-sec7_1 {
     margin-bottom: 5em;
   }
   
   .row-sec7_1-bottom {
     margin-bottom: 10em;
   }
   
   /* Título de sección de catálogo */
   .catalogo-title-wrapper-sec7_1 {
     text-align: center;
     margin-top: 5%;
   }
   
   .catalogo-title-sec7_1 {
     color: #957AFB;
     font-size: 24px;
   }
   
   /* Columna izquierda con lista */
   .col-list-sec7_1 {
     display: inline-block;
     margin-top: 12%;
   }
   
   /* Items de lista con viñetas - Top 10 */
   .opacidad_blanca_paso1-sec7_1,
   .opacidad_blanca_paso2-sec7_1,
   .opacidad_blanca_paso3-sec7_1 {
     text-align: left;
   }
   
   .opacidad_blanca_paso2-sec7_1,
   .opacidad_blanca_paso3-sec7_1 {
     margin-top: 20px;
   }
   
   .opacidad_blanca_paso1-sec7_1 .list-item-wrapper-sec7_1,
   .opacidad_blanca_paso2-sec7_1 .list-item-wrapper-sec7_1,
   .opacidad_blanca_paso3-sec7_1 .list-item-wrapper-sec7_1 {
     display: flex;
     align-items: flex-start;
   }
   
   /* Items de lista con viñetas - Administrar */
   .opacidad_blanca_administrar_paso1-sec7_1,
   .opacidad_blanca_administrar_paso2-sec7_1,
   .opacidad_blanca_administrar_paso3-sec7_1 {
     text-align: left;
   }
   
   .opacidad_blanca_administrar_paso2-sec7_1,
   .opacidad_blanca_administrar_paso3-sec7_1 {
     margin-top: 20px;
   }
   
   .opacidad_blanca_administrar_paso1-sec7_1 .list-item-wrapper-sec7_1,
   .opacidad_blanca_administrar_paso2-sec7_1 .list-item-wrapper-sec7_1,
   .opacidad_blanca_administrar_paso3-sec7_1 .list-item-wrapper-sec7_1 {
     display: flex;
     align-items: flex-start;
   }
   
   .list-bullet-sec7_1 {
     color: #957AFB;
     font-size: 16px;
     margin-right: 8px;
     line-height: 1.2;
   }
   
   .list-text-sec7_1 {
     line-height: 1.2;
     color: #957AFB;
     font-size: 12px;
   }
   
   /* Contenedor de botones */
   .buttons-container-sec7_1 {
     margin-top: 2em;
     text-align: center;
   }
   
   /* Botones de navegación */
   .btn-nav-sec7_1 {
     color: #957AFB;
     font-size: 11px;
   }
   
   .btn-nav-sec7_1 + .btn-nav-sec7_1 {
     margin-left: 10px;
   }
   
   .btn-nav-sec7_1 i {
     color: #957AFB;
     font-size: 11px;
   }
   
   .btn-nav-sec7_1 .fa-long-arrow-left {
     padding-right: 4px;
   }
   
   .btn-nav-sec7_1 .fa-long-arrow-right {
     padding-left: 4px;
   }
   
   /* Imágenes Top 10 */
   .img_top10_paso1-sec7_1,
   .img_top10_paso2-sec7_1,
   .img_top10_paso3-sec7_1 {
     height: 360px;
     overflow: hidden;
     position: relative;
     opacity: 1;
     transform: scale(1);
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .img_top10_paso2-sec7_1,
   .img_top10_paso3-sec7_1 {
     display: none;
   }
   
   .img_top10_paso1-sec7_1 img,
   .img_top10_paso2-sec7_1 img,
   .img_top10_paso3-sec7_1 img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
   
   /* Columna derecha administrar */
   .col-admin-sec7_1 {
     margin-top: 5%;
   }
   
   /* Imágenes administrar productos */
   .img_administrar_productos_paso1-sec7_1,
   .img_administrar_productos_paso2-sec7_1,
   .img_administrar_productos_paso3-sec7_1 {
     height: 350px;
     overflow: hidden;
     position: relative;
     opacity: 1;
     transform: scale(1);
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .img_administrar_productos_paso2-sec7_1,
   .img_administrar_productos_paso3-sec7_1 {
     display: none;
   }
   
   .img_administrar_productos_paso1-sec7_1 img,
   .img_administrar_productos_paso2-sec7_1 img,
   .img_administrar_productos_paso3-sec7_1 img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
   
   /* Opacidad blanca */
   .opacidad_blanca-sec7_1 {
     opacity: 0.4;
     background: white;
   }
   
   /* ===================================================================
      SECCIÓN 7.1 MÓVIL - PANEL DE CONTROL
      =================================================================== */
   
   .seccion_normal_7_1_mobile {
     display: none;
   }
   
   .panel-control-sec7_1-mobile {
     background: #957AFB;
     border-radius: 30px;
     padding: 2em 1.5em 3em 1.5em;
     margin-top: 3em;
     margin-bottom: 3em;
   }
   
   .panel-title-wrapper-sec7_1-mobile {
     text-align: center;
     margin-top: 1.5em;
   }
   
   .panel-title-sec7_1-mobile {
     font-size: 1.4rem;
     color: #fff;
   }
   
   .panel-content-sec7_1-mobile {
     margin-top: 1.5em;
     color: #957AFB;
     margin-bottom: 1em;
     text-align: center;
     background: #fff;
     border-radius: 20px;
     padding: 2em 1.5em;
   }
   
   .panel-description-sec7_1-mobile {
     margin-bottom: 1.5em;
   }
   
   .panel-description-sec7_1-mobile span {
     font-size: 1rem;
     line-height: 1.4;
   }
   
   .video-container-sec7_1-mobile {
     width: 100%;
     height: auto;
     aspect-ratio: 16 / 9;
     overflow: hidden;
     border-radius: 10px;
     margin: 0 auto 2em auto;
     display: block;
     position: relative;
   }
   
   .video-container-sec7_1-mobile iframe,
   .video-container-sec7_1-mobile .youtube-iframe-sec7_1-mobile {
     width: 100%;
     height: 100%;
     border: none;
     border-radius: 10px;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
   }
   
   .video-placeholder-sec7_1-mobile {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     overflow: hidden;
     background: #000;
   }
   
   .video-thumbnail-sec7_1-mobile {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .video-play-button-sec7_1-mobile {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: none;
     border: none;
     cursor: pointer;
     padding: 0;
     transition: transform 0.3s ease, opacity 0.3s ease;
     z-index: 2;
   }
   
   .video-play-button-sec7_1-mobile:hover {
     transform: translate(-50%, -50%) scale(1.1);
   }
   
   .catalogo-section-sec7_1-mobile {
     margin-bottom: 2em;
   }
   
   .catalogo-title-wrapper-sec7_1-mobile {
     text-align: center;
     margin-top: 1em;
     margin-bottom: 1em;
   }
   
   .catalogo-title-sec7_1-mobile {
     color: #957AFB;
     font-size: 1rem;
     line-height: 1.3;
   }
   
   .col-list-sec7_1-mobile {
     margin-top: 1em;
     margin-bottom: 1em;
   }
   
   .opacidad_blanca_paso1-sec7_1-mobile,
   .opacidad_blanca_paso2-sec7_1-mobile,
   .opacidad_blanca_paso3-sec7_1-mobile {
     text-align: left;
     margin-bottom: 0.8em;
   }
   
   .opacidad_blanca_paso2-sec7_1-mobile,
   .opacidad_blanca_paso3-sec7_1-mobile {
     margin-top: 0.8em;
   }
   
   .list-item-wrapper-sec7_1-mobile {
     display: flex;
     align-items: flex-start;
   }
   
   .list-bullet-sec7_1-mobile {
     color: #957AFB;
     font-size: 10px;
     margin-right: 6px;
     line-height: 1.2;
   }
   
   .list-text-sec7_1-mobile {
     line-height: 1.2;
     color: #957AFB;
     font-size: 0.85rem;
   }
   
   .buttons-container-sec7_1-mobile {
     margin-top: 1em;
     text-align: center;
     display: flex;
     gap: 0.5em;
     justify-content: center;
   }
   
   .btn-nav-sec7_1-mobile {
     color: #957AFB;
     font-size: 8px;
     padding: 0.4em 0.8em;
     border: 1px solid #957AFB;
     background: transparent;
     border-radius: 5px;
   }
   
   .btn-nav-sec7_1-mobile i {
     color: #957AFB;
     font-size: 8px;
   }
   
   .btn-nav-sec7_1-mobile .fa-long-arrow-left {
     padding-right: 3px;
   }
   
   .btn-nav-sec7_1-mobile .fa-long-arrow-right {
     padding-left: 3px;
   }
   
   .col-img-sec7_1-mobile {
     margin-top: 1em;
     margin-bottom: 1em;
   }
   
   .img_top10_paso1-sec7_1-mobile,
   .img_top10_paso2-sec7_1-mobile,
   .img_top10_paso3-sec7_1-mobile {
     height: 180px;
     overflow: hidden;
     position: relative;
     opacity: 1;
     transform: scale(1);
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .img_top10_paso2-sec7_1-mobile,
   .img_top10_paso3-sec7_1-mobile {
     display: none;
   }
   
   .img_top10_paso1-sec7_1-mobile img,
   .img_top10_paso2-sec7_1-mobile img,
   .img_top10_paso3-sec7_1-mobile img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
   
   .administrar-section-sec7_1-mobile {
     margin-top: 2em;
   }
   
   .col-img-admin-sec7_1-mobile {
     margin-bottom: 1em;
   }
   
   .img_administrar_productos_paso1-sec7_1-mobile,
   .img_administrar_productos_paso2-sec7_1-mobile,
   .img_administrar_productos_paso3-sec7_1-mobile {
     height: 175px;
     overflow: hidden;
     position: relative;
     opacity: 1;
     transform: scale(1);
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .img_administrar_productos_paso2-sec7_1-mobile,
   .img_administrar_productos_paso3-sec7_1-mobile {
     display: none;
   }
   
   .img_administrar_productos_paso1-sec7_1-mobile img,
   .img_administrar_productos_paso2-sec7_1-mobile img,
   .img_administrar_productos_paso3-sec7_1-mobile img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
   
   .col-admin-sec7_1-mobile {
     margin-top: 1em;
   }
   
   .opacidad_blanca_administrar_paso1-sec7_1-mobile,
   .opacidad_blanca_administrar_paso2-sec7_1-mobile,
   .opacidad_blanca_administrar_paso3-sec7_1-mobile {
     text-align: left;
     margin-bottom: 0.8em;
   }
   
   .opacidad_blanca_administrar_paso2-sec7_1-mobile,
   .opacidad_blanca_administrar_paso3-sec7_1-mobile {
     margin-top: 0.8em;
   }
   
   .opacidad_blanca-sec7_1-mobile {
     opacity: 0.4;
     background: white;
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_7_1 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_7_1_mobile {
       display: block; /* Mostrar versión móvil */
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_7_1_mobile {
       display: none;
     }
     
     .seccion_normal_7_1 {
       display: block;
     }
   }
   
   /* Estilos responsive para sección 7.1 */
   @media screen and (max-width: 767px) {
     .panel-control-sec7_1 {
       padding-left: 2em !important;
       padding-right: 2em !important;
       margin-top: 5em !important;
       margin-bottom: 5em !important;
     }
     
     .video-container-sec7_1 {
       width: 90%;
       max-width: 380px;
       height: auto;
       aspect-ratio: 16 / 9;
     }
     
     .video-container-sec7_1 iframe {
       width: 100%;
       height: 100%;
     }
     
     .video-play-button-sec7_1 svg {
       width: 60px;
       height: 60px;
     }
   }
   
   /* ===================================================================
      SECCIÓN 1 MÓVIL - VERSIÓN RESPONSIVE
      =================================================================== */
   
   .seccion_normal_1_movil {
     display: none; /* Oculto por defecto, se muestra solo en móvil */
   }
   
   .seccion-1-movil-container {
     padding: 2em 1em 8em 1em;
     margin-top: 4em;
   }
   
   .seccion1-movil-content {
     text-align: center;
     margin-bottom: 2em;
   }
   
   .seccion1-movil-title {
     font-size: 28px;
     font-weight: 300;
     margin-bottom: 20px;
     line-height: 1.3;
     color: var(--text-white);
   }
   
   .seccion1-movil-title .h1-subtitle-movil {
     font-size: 0.55em;
     display: block;
     font-weight: 400;
     margin-top: 0.5em;
     white-space: nowrap;
   }
   
   .seccion1-movil-title .h1-subtitle-container-movil {
     position: relative;
     display: inline-flex;
     flex-wrap: nowrap;
     align-items: center;
     justify-content: center;
     gap: 4px;
     white-space: nowrap;
   }
   
   .seccion1-movil-title .highlightable-text-movil {
     display: inline-block;
     border-radius: 20px;
     padding: 8px 14px 6px 14px;
     position: relative;
     z-index: 2;
     font-weight: 700;
     font-size: 1.5rem;
     white-space: nowrap;
   }
   
   .seccion1-movil-title .highlight-slider-movil {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     border-radius: 20px;
     background: #957AFB;
     border: 1px solid #957AFB;
     z-index: 1;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .subtitle-movil {
     font-size: 14px;
     color: var(--text-white);
     max-width: 100%;
     margin: 0 auto 25px;
     line-height: 1.4;
     font-weight: 300;
     padding: 0 1em;
   }
   
   .subtitle-movil span {
     color: var(--color-primary-lilac);
     font-weight: 500;
   }
   
   .buttons-movil {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     align-items: center;
     padding: 0 1em;
     margin-bottom: 2em;
   }
   
   .btn-movil {
     flex: 1;
     min-width: 140px;
     max-width: 180px;
     padding: 10px 20px;
     font-size: 12px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     transform: none !important;
     box-shadow: none !important;
   }
   
   /* Desactivar animaciones hover en botones móviles */
   .btn-movil:hover,
   .btn-movil:active,
   .btn-movil:focus {
     transform: none !important;
     box-shadow: none !important;
   }
   
   .btn-primary.btn-movil:hover {
     background: var(--color-primary-lilac) !important;
     color: var(--text-white) !important;
     transform: none !important;
     box-shadow: none !important;
   }
   
   .btn-secondary.btn-movil:hover {
     background: transparent !important;
     color: #fff !important;
     transform: none !important;
     box-shadow: none !important;
   }
   
   .mockup-container-movil {
     position: relative;
     height: auto;
     margin-top: 2em;
     padding: 0 1em;
   }
   
   .center-image-movil {
     position: relative;
     left: auto;
     top: 3em;
     transform: none;
     width: 100%;
     max-width: 100%;
     height: auto;
     display: block;
     margin: 0 auto;
   }
   
   .hero_img_sec1_movil {
     width: 100%;
     max-width: 400px;
     margin: 0 auto;
     animation: floatMobile 5s ease-in-out infinite;
     height: auto;
   }
   
   @keyframes floatMobile {
     0%,
     100% {
       transform: translateY(0px);
     }
     50% {
       transform: translateY(-20px);
     }
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_1 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_1_movil {
       display: block; /* Mostrar versión móvil */
     }
     
     /* Eliminar border-radius de fondo_gradient en responsive */
     .seccion_normal_1_movil.fondo_gradient {
       border-bottom-left-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
       border-radius: 0 !important;
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_1_movil {
       display: none;
     }
     
     .seccion_normal_1 {
       display: block;
     }
   }
   
   /* ===================================================================
      SECCIÓN 2 MÓVIL - VERSIÓN RESPONSIVE
      =================================================================== */
   
   .seccion_normal_2_mobile {
     display: none; /* Oculto por defecto, se muestra solo en móvil */
   }
   
   .seccion-2-container-mobile {
     padding: 10em 1em;
   }
   
   .hero-container-sec2-mobile {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2rem;
     text-align: center;
   }
   
   .content-wrapper-sec2-mobile {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: center;
     text-align: center;
     width: 100%;
   }
   
   .small-title-sec2-mobile {
     font-size: 1.4rem;
     color: var(--text-white);
     margin-bottom: 0.5rem;
     font-weight: 700;
   }
   
   .big-number-sec2-mobile {
     font-size: 3rem;
     color: var(--color-primary-lilac);
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 0.5rem;
     margin: 0px;
   }
   
   .counter-span-sec2-mobile {
     display: inline-block;
     color: var(--color-primary-lilac);
     font-weight: 800;
     min-width: 120px;
     text-align: center;
   }
   
   .description-sec2-mobile {
     font-size: 14px;
     color: var(--text-white);
     line-height: 1.4;
     margin-bottom: 0.5rem;
     max-width: 100%;
   }
   
   .badge-sec2-mobile {
     background-color: #957AFB;
     color: white;
     padding: 0.8rem 1.5rem 0.4rem 1.5rem;
     border-radius: 50px;
     font-size: 1.2rem;
     width: fit-content;
     margin-top: 1rem;
     text-transform: uppercase;
     box-shadow: 0 4px 15px rgba(140, 124, 255, 0.4);
     animation: popInUpSec2Mobile 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, pulseSec2Mobile 2s infinite 2s;
     animation-delay: 0.8s;
     opacity: 0;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
   }
   
   .image-wrapper-sec2-mobile {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     margin-top: 1rem;
   }
   
   .phone-img-sec2-mobile {
     width: 60%;
     max-width: 280px;
     height: auto;
     z-index: 2;
     animation: sway3DSec2Mobile 6s ease-in-out infinite;
     transform-style: preserve-3d;
   }
   
   .phone-shadow-sec2-mobile {
     position: absolute;
     bottom: -20px;
     left: 50%;
     transform: translateX(-50%);
     width: 60%;
     max-width: 220px;
     height: 25px;
     background: radial-gradient(ellipse at center, #957AFB 40%, transparent 70%);
     border-radius: 50%;
     filter: blur(12px);
     opacity: 0.6;
     z-index: 1;
     animation: shadowSwaySec2Mobile 6s ease-in-out infinite;
   }
   
   @keyframes sway3DSec2Mobile {
     0%, 100% {
       transform: rotateY(-5deg) rotateX(2deg) translateY(0);
     }
     50% {
       transform: rotateY(5deg) rotateX(-2deg) translateY(-10px);
     }
   }
   
   @keyframes popInUpSec2Mobile {
     from {
       opacity: 0;
       transform: translateY(20px) scale(0.8);
     }
     to {
       opacity: 1;
       transform: translateY(0) scale(1);
     }
   }
   
   @keyframes pulseSec2Mobile {
     0% { box-shadow: 0 0 0 0 rgba(140, 124, 255, 0.7); }
     70% { box-shadow: 0 0 0 15px rgba(140, 124, 255, 0); }
     100% { box-shadow: 0 0 0 0 rgba(140, 124, 255, 0); }
   }
   
   @keyframes shadowSwaySec2Mobile {
     0%, 100% {
       transform: translateX(-50%) scaleX(1) scaleY(1);
       opacity: 0.6;
     }
     50% {
       transform: translateX(-50%) scaleX(1.2) scaleY(0.8);
       opacity: 0.4;
     }
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_2 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_2_mobile {
       display: block; /* Mostrar versión móvil */
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_2_mobile {
       display: none;
     }
     
     .seccion_normal_2 {
       display: block;
     }
   }
   
   /* ===================================================================
      SECCIÓN 3 MÓVIL - VERSIÓN RESPONSIVE
      =================================================================== */
   
   .seccion_normal_3_mobile {
     display: none; /* Oculto por defecto, se muestra solo en móvil */
   }
   
   .seccion-3-container-mobile {
     padding: 2em 1em 10em 1em;
   }
   
   .main-sec3-mobile {
     width: 100%;
   }
   
   .cards-sec3-mobile {
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     grid-template-rows: auto auto;
     gap: 0.8rem;
     width: 100%;
     padding-top: 10px;
   }
   
   /* --- TARJETA BASE MÓVIL --- */
   .card-sec3-mobile {
     --spotlight-color: 255, 255, 255;
     
     background-color: #0d0d0d;
     border-radius: 12px;
     position: relative;
     cursor: pointer;
     display: flex;
     padding: 1rem;
     overflow: visible;
     border: 1px solid rgba(255, 255, 255, 0.05);
     box-shadow: 0 0 20px 4px rgba(var(--spotlight-color), 0.35);
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   }
   
   /* --- LAYOUT Y SUPERPOSICIÓN MÓVIL --- */
   
   .card-top-right-sec3-mobile {
     grid-column: 3 / -1;
     grid-row: 1;
     min-height: 90px;
     z-index: 1;
   }
   
   .card-left-sec3-mobile {
     grid-column: 1 / 5;
     grid-row: 2;
     margin-top: -40px;
     z-index: 10;
     min-height: 190px;
     align-items: center;
   }
   
   .card-bottom-right-sec3-mobile {
     grid-column: 5 / -1;
     grid-row: 2;
     min-height: 125px;
     z-index: 2;
   }
   
   /* --- EFECTO SPOTLIGHT MÓVIL --- */
   
   .card-sec3-mobile::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: inherit;
     padding: 1px;
     background: radial-gradient(
       300px circle at var(--mouse-x) var(--mouse-y),
       rgba(var(--spotlight-color), 1),
       rgba(var(--spotlight-color), 0.3) 30%,
       transparent 50%
     );
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask-composite: exclude;
     opacity: 0;
     transition: opacity 0.5s;
     pointer-events: none;
     z-index: 2;
   }
   
   .card-sec3-mobile::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     background: radial-gradient(
       250px circle at var(--mouse-x) var(--mouse-y),
       rgba(var(--spotlight-color), 0.4),
       rgba(var(--spotlight-color), 0.2) 25%,
       transparent 45%
     );
     opacity: 0;
     transition: opacity 0.5s;
     z-index: 1;
     pointer-events: none;
   }
   
   .cards-sec3-mobile:hover .card-sec3-mobile::before,
   .cards-sec3-mobile:hover .card-sec3-mobile::after {
     opacity: 1;
   }
   
   .card-sec3-mobile:hover {
     transform: translateY(-3px);
     box-shadow: 0 0 25px 6px rgba(var(--spotlight-color), 0.5);
     border-color: rgba(var(--spotlight-color), 0.3);
   }
   
   /* --- CONTENIDO MÓVIL --- */
   .card-content-sec3-mobile {
     position: relative;
     z-index: 20;
     display: flex;
     width: 100%;
     height: 100%;
   }
   
   .card-text-sec3-mobile {
     font-size: 0.9rem;
     line-height: 1.5;
     color: #ccc;
     transition: color 0.3s;
     text-align: left;
   }
   
   .card-sec3-mobile:hover .card-text-sec3-mobile {
     color: #fff;
   }
   
   .card-left-sec3-mobile .card-content-sec3-mobile {
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
     text-align: right;
     gap: 1rem;
     position: relative;
   }
   
   .card-left-sec3-mobile .icon-box-sec3-mobile {
     position: absolute;
     top: 0;
     right: 0;
     margin: 0;
   }
   
   .card-left-sec3-mobile .card-text-sec3-mobile {
     margin-top: 4em;
     text-align: right;
   }
   
   .card-top-right-sec3-mobile .card-content-sec3-mobile {
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 1rem;
   }
   
   .card-bottom-right-sec3-mobile .card-content-sec3-mobile {
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 1rem;
   }
   
   .card-bottom-right-sec3-mobile .icon-box-sec3-mobile {
     order: 1;
   }
   
   .card-bottom-right-sec3-mobile .card-text-sec3-mobile {
     order: 2;
     text-align: center;
   }
   
   /* --- ICONOS MÓVIL --- */
   .icon-box-sec3-mobile {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     background-color: #141414;
     border: 1px solid #2a2a2a;
     border-radius: 8px;
     transition: all 0.3s ease;
   }
   
   .icon-sec3-mobile {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
   
   .card-sec3-mobile:hover .icon-box-sec3-mobile {
     border-color: rgba(var(--spotlight-color), 1);
     background-color: rgba(var(--spotlight-color), 0.1);
     box-shadow: 0 0 10px rgba(var(--spotlight-color), 0.3);
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_3 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_3_mobile {
       display: block; /* Mostrar versión móvil */
       padding: 0;
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_3_mobile {
       display: none;
     }
     
     .seccion_normal_3 {
       display: block;
     }
   }
   
   /* ===================================================================
      SECCIÓN 4 MÓVIL - VERSIÓN RESPONSIVE
      =================================================================== */
   
   .seccion_normal_4_mobile {
     display: none; /* Oculto por defecto, se muestra solo en móvil */
   }
   
   .seccion-4-container-mobile {
     padding: 2em 1em 10em 1em;
     margin-top: 30px;
   }
   
   .header-sec4-mobile {
     display: flex;
     align-items: flex-end;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
     opacity: 0;
     animation: fadeInSec4Mobile 1s ease-out forwards;
     text-align: left;
   }
   
   .title-block-sec4-mobile h2 {
     font-size: 2.5rem;
     line-height: 0.9;
     color: var(--color-primary-lilac);
     text-transform: uppercase;
   }
   
   .subtitle-block-sec4-mobile {
     padding-bottom: 0.25rem;
     opacity: 0;
     transform: translateX(50px);
     transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
   }
   
   .subtitle-block-sec4-mobile.animate-in {
     opacity: 1;
     transform: translateX(0);
   }
   
   .subtitle-block-sec4-mobile p {
     font-size: 0.875rem;
     color: var(--text-white);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     line-height: 1.2;
   }
   
   /* --- LISTA DE PASOS MÓVIL --- */
   .steps-list-sec4-mobile {
     display: flex;
     flex-direction: column;
   }
   
   .step-item-sec4-mobile {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem 0;
     border-top: 1px solid #333333;
     opacity: 0;
     transform: translateY(20px);
     animation: slideUpSec4Mobile 0.8s ease-out forwards;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .step-item-sec4-mobile:nth-child(1) {
     animation-delay: 0.2s;
   }
   
   .step-item-sec4-mobile:nth-child(2) {
     animation-delay: 0.4s;
   }
   
   .step-item-sec4-mobile:nth-child(3) {
     animation-delay: 0.6s;
     border-bottom: 1px solid #333333;
   }
   
   .step-item-sec4-mobile:hover {
     transform: translateY(0) scale(1.02) !important;
   }
   
   .step-item-sec4-mobile:hover .icon-svg-sec4-mobile {
     transform: scale(1.15);
   }
   
   .step-item-sec4-mobile:hover .step-text-sec4-mobile {
     transform: scale(1.08);
   }
   
   /* --- ESTILOS COMUNES DE ICONOS MÓVIL --- */
   .icon-wrapper-sec4-mobile {
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     overflow: visible;
     padding: 5px;
   }
   
   .icon-svg-sec4-mobile {
     width: 100%;
     height: 100%;
     stroke: var(--color-primary-lilac);
     stroke-width: 1.5;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
     filter: drop-shadow(0 0 4px rgba(149, 122, 251, 0.5));
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .step-text-sec4-mobile {
     text-align: right;
     font-size: 1rem;
     max-width: 300px;
     line-height: 1.4;
     color: #eeeeee;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: right center;
   }
   
   /* --- ANIMACIONES DE ICONOS MÓVIL --- */
   
   .arrow-up-sec4-mobile {
     animation: uploadMoveSec4Mobile 2s infinite ease-in-out;
   }
   
   .calendar-group-sec4-mobile {
     transform-origin: top center;
     animation: pendulumSec4Mobile 3s infinite ease-in-out;
   }
   
   .check-circle-sec4-mobile {
     transform-origin: 18px 18px;
     animation: pulseCheckSec4Mobile 3s infinite ease-in-out;
   }
   
   .whatsapp-icon-sec4-mobile {
     stroke: none !important;
     fill: var(--color-primary-lilac) !important;
     transform-origin: bottom right;
     animation: ringSec4Mobile 4s infinite ease-in-out;
   }
   
   /* --- KEYFRAMES SECCIÓN 4 MÓVIL --- */
   @keyframes fadeInSec4Mobile {
     to {
       opacity: 1;
     }
   }
   
   @keyframes slideUpSec4Mobile {
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes uploadMoveSec4Mobile {
     0% {
       transform: translateY(0);
       opacity: 1;
     }
     50% {
       transform: translateY(-5px);
       opacity: 1;
     }
     51% {
       transform: translateY(5px);
       opacity: 0;
     }
     100% {
       transform: translateY(0);
       opacity: 1;
     }
   }
   
   @keyframes pendulumSec4Mobile {
     0% {
       transform: rotate(0deg);
     }
     25% {
       transform: rotate(3deg);
     }
     75% {
       transform: rotate(-3deg);
     }
     100% {
       transform: rotate(0deg);
     }
   }
   
   @keyframes pulseCheckSec4Mobile {
     0%, 100% {
       transform: scale(1);
     }
     50% {
       transform: scale(1.15);
       stroke: #fff;
     }
   }
   
   @keyframes ringSec4Mobile {
     0% {
       transform: rotate(0);
     }
     5% {
       transform: rotate(10deg);
     }
     10% {
       transform: rotate(-10deg);
     }
     15% {
       transform: rotate(10deg);
     }
     20% {
       transform: rotate(0);
     }
     100% {
       transform: rotate(0);
     }
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_4 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_4_mobile {
       display: block; /* Mostrar versión móvil */
       background-color: #161616;
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_4_mobile {
       display: none;
     }
     
     .seccion_normal_4 {
       display: block;
     }
   }
   
   /* ===================================================================
      SECCIÓN 5 MÓVIL - VERSIÓN RESPONSIVE
      =================================================================== */
   
   .seccion_normal_5_mobile {
     display: none; /* Oculto por defecto, se muestra solo en móvil */
   }
   
   .seccion-5-container-mobile {
     padding: 2em 1em 10em 1em;
   }
   
   .main-title-sec5-mobile {
     font-size: 1.5rem;
     text-align: center;
     color: var(--color-primary-lilac);
     margin-bottom: 4rem;
     font-weight: 800;
     text-transform: uppercase;
   }
   
   .carousel-container-sec5-mobile {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 1rem;
     width: 100%;
     min-height: 300px;
     flex-direction: row;
   }
   
   /* CENTRO: Imagen a la izquierda 50% */
   .center-stage-sec5-mobile {
     flex: 0 0 50%;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     align-items: center;
     justify-content: flex-start;
     position: relative;
     overflow: visible;
   }
   
   .arrows-container-sec5-mobile {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     align-items: center;
     justify-content: center;
     width: 100%;
     margin-top: 0.5rem;
   }
   
   .phone-mask-sec5-mobile {
     overflow: hidden;
     padding: 0;
     margin: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
   }
   
   .phone-mockup-sec5-mobile {
     width: 100%;
     max-width: 150px;
     height: auto;
     border-radius: 20px;
     transition: transform 0.3s ease-out, opacity 0.3s ease;
     transform: translateX(0);
     opacity: 1;
     display: block;
   }
   
   /* ANIMACIONES MÓVIL */
   .slide-out-to-left-mobile {
     transform: translateX(-50px) !important;
     opacity: 0 !important;
   }
   
   .prepare-from-right-mobile {
     transition: none !important;
     transform: translateX(50px) !important;
     opacity: 0 !important;
   }
   
   .slide-out-to-right-mobile {
     transform: translateX(50px) !important;
     opacity: 0 !important;
   }
   
   .prepare-from-left-mobile {
     transition: none !important;
     transform: translateX(-50px) !important;
     opacity: 0 !important;
   }
   
   /* FLECHAS MÓVIL */
   .arrow-btn-sec5-mobile {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     width: 35px;
     height: 35px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     color: var(--color-primary-lilac);
     margin: 0;
     flex-shrink: 0;
   }
   
   .arrow-btn-sec5-mobile:hover:not(.disabled-sec5-mobile) {
     background: var(--color-primary-lilac);
     color: white;
     border-color: var(--color-primary-lilac);
     transform: scale(1.1);
     box-shadow: 0 0 10px rgba(149, 122, 251, 0.6);
   }
   
   .arrow-btn-sec5-mobile svg {
     width: 18px;
     height: 18px;
     stroke-width: 2;
   }
   
   .arrow-btn-sec5-mobile.disabled-sec5-mobile {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   /* PANEL DERECHO: Botones a la derecha 50% */
   .side-panel-sec5-mobile {
     flex: 0 0 50%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     min-width: 0;
     height: 100%;
     transition: opacity 0.3s ease;
   }
   
   .text-wrapper-sec5-mobile {
     text-align: left;
     align-items: flex-start;
     margin-bottom: 1rem;
     width: 100%;
   }
   
   .side-panel-sec5-mobile.right-panel-sec5-mobile {
     text-align: left;
     align-items: flex-start;
     opacity: 0;
     pointer-events: none;
   }
   
   .side-panel-sec5-mobile.right-panel-sec5-mobile.visible-sec5-mobile {
     opacity: 1;
     pointer-events: all;
   }
   
   /* TEXTO MÓVIL */
   .info-text-sec5-mobile {
     font-size: 0.9rem;
     line-height: 1.4;
     max-width: 100%;
     opacity: 0;
     transition: opacity 0.3s ease;
     color: #ffffff;
     margin-bottom: 1rem;
   }
   
   .info-text-sec5-mobile b {
     color: #fff;
     font-weight: 700;
   }
   
   .info-text-sec5-mobile a {
     color: #fff;
     text-decoration: underline;
     text-decoration-color: var(--color-primary-lilac);
     transition: all 0.3s ease;
     cursor: pointer;
   }
   
   .info-text-sec5-mobile a:hover {
     color: var(--color-primary-lilac);
     text-decoration-color: var(--color-primary-lilac);
   }
   
   /* BOTONES DERECHOS MÓVIL */
   .section-label-sec5-mobile {
     color: var(--color-primary-lilac);
     margin-bottom: 1.2rem;
     font-weight: 600;
     letter-spacing: 0.5px;
     font-size: 0.8rem;
     text-transform: uppercase;
   }
   
   .option-btn-sec5-mobile {
     background: transparent;
     border: 1px solid #333333;
     color: #fff;
     padding: 8px 15px;
     border-radius: 20px;
     margin-bottom: 8px;
     width: 100%;
     max-width: 100%;
     cursor: pointer;
     font-family: 'Touche', sans-serif;
     font-weight: 400;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     text-align: center;
   }
   
   .option-btn-sec5-mobile:hover {
     border-color: var(--color-primary-lilac);
     background: rgba(149, 122, 251, 0.15);
   }
   
   .option-btn-sec5-mobile.active-opt-sec5-mobile {
     background-color: var(--color-primary-lilac);
     border-color: var(--color-primary-lilac);
     color: white;
     box-shadow: 0 0 10px rgba(149, 122, 251, 0.5);
   }
   
   /* BOTONES DE FLECHA VERTICAL MÓVIL */
   .arrow-btn-vertical-sec5-mobile {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     width: 35px;
     height: 35px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     color: var(--color-primary-lilac);
     margin: 0 auto 15px auto;
   }
   
   .arrow-btn-vertical-sec5-mobile:hover:not(.disabled-sec5-mobile) {
     background: var(--color-primary-lilac);
     color: white;
     border-color: var(--color-primary-lilac);
     transform: scale(1.1);
     box-shadow: 0 0 10px rgba(149, 122, 251, 0.6);
   }
   
   .arrow-btn-vertical-sec5-mobile svg {
     width: 18px;
     height: 18px;
     stroke-width: 2;
   }
   
   .arrow-btn-vertical-sec5-mobile.disabled-sec5-mobile {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   /* CINTA INFERIOR MÓVIL */
   .ribbon-wrapper-sec5-mobile {
     width: 100%;
     max-width: 100%;
     margin: 1rem auto 0;
     position: relative;
     overflow: hidden;
     border-top: 1px solid #333333;
     mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
     -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
   }
   
   .steps-ribbon-sec5-mobile {
     display: flex;
     gap: 0;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scrollbar-width: none;
     -ms-overflow-style: none;
     padding-left: 50%;
     padding-right: 50%;
     padding-top: 15px;
     align-items: flex-start;
     border-bottom: 1px solid #333333;
   }
   
   .steps-ribbon-sec5-mobile::-webkit-scrollbar {
     display: none;
   }
   
   .step-indicator-sec5-mobile {
     flex: 0 0 130px;
     text-align: center;
     opacity: 0.3;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     cursor: pointer;
     position: relative;
     padding: 0 8px;
     transform-origin: bottom center;
     padding-bottom: 15px;
   }
   
   .step-indicator-sec5-mobile.active-sec5-mobile {
     opacity: 1;
     transform: scale(1.15);
   }
   
   .step-title-sec5-mobile {
     font-size: 1rem;
     font-weight: 800;
     margin-bottom: 0.25rem;
     color: #fff;
     line-height: 1.2;
   }
   
   .step-indicator-sec5-mobile.active-sec5-mobile .step-title-sec5-mobile {
     color: var(--color-primary-lilac) !important;
   }
   
   .step-desc-sec5-mobile {
     font-size: 0.7rem;
     color: #999;
     line-height: 1.3;
   }
   
   .step-indicator-sec5-mobile.active-sec5-mobile .step-desc-sec5-mobile {
     color: #ccc !important;
   }
   
   /* Mostrar versión móvil solo en pantallas pequeñas */
   @media screen and (max-width: 767px) {
     .seccion_normal_5 {
       display: none; /* Ocultar versión desktop */
     }
     
     .seccion_normal_5_mobile {
       display: block; /* Mostrar versión móvil */
     }
   }
   
   /* Ocultar versión móvil en pantallas grandes */
   @media screen and (min-width: 768px) {
     .seccion_normal_5_mobile {
       display: none;
     }
     
     .seccion_normal_5 {
       display: block;
     }
   }
   
   /* Estilos responsive para nav-toggle */
   @media screen and (max-width: 767px) {
     .nav-toggle {
       width: 45px !important;
       height: 45px !important;
     }
     
     .nav-toggle svg {
       width: 45px !important;
       height: 45px !important;
     }
   
     .nav-close {
       width: 40px !important;
       height: 40px !important;
     }
     
     /* Eliminar espacio entre sección 9 móvil y footer */
     .seccion_normal_9_mobile {
       margin-bottom: 0 !important;
       padding-bottom: 0 !important;
     }
     
     .seccion9-movil-container {
       margin-bottom: 0 !important;
       padding-bottom: 0 !important;
     }
     
     .seccion9-movil-button-row {
       margin-bottom: 0 !important;
       padding-bottom: 0 !important;
     }
     
     .seccion9-movil-btn_empezar {
       margin-bottom: 0 !important;
     }
     
     /* Eliminar espacio superior del footer cuando viene después de sección 9 móvil */
     .seccion_normal_9_mobile + #footer,
     .seccion_normal_9_mobile + .footer {
       margin-top: 0 !important;
       padding-top: 0 !important;
     }
     
     #footer.footer {
       margin-top: 0 !important;
     }
     
     #footer .row:first-child {
       margin-top: 0 !important;
       top: 0 !important;
     }
   }
   
   /* Efecto hover transform scale para sección de clientes */
   .seccion_normal_2_1 .hover01 {
     overflow: visible !important;
     display: block !important;
     padding: 10px !important;
   }
   
   .seccion_normal_2_1 .hover01 img {
     min-width: 207px !important;
     max-width: 207px !important;
     margin-bottom: 30px !important;
     -webkit-transform: scale(1) !important;
     transform: scale(1) !important;
     -webkit-transition: transform .3s ease-in-out !important;
     transition: transform .3s ease-in-out !important;
     display: block !important;
     border-radius: 25px;
   }
   
   .seccion_normal_2_1 .hover01:hover img {
     -webkit-transform: scale(1.1) !important;
     transform: scale(1.1) !important;
   }
   
   /* ===================================================================
      SECCIÓN 2.2 MÓVIL (CATÁLOGO DE MARCAS)
      =================================================================== */
   
   /* Aseguramos que el contenedor se muestre en móviles (ajusta el media query según tu necesidad) */
   .seccion_normal_2_2_mobile {
     display: none; /* Se mostrará con media query en móviles */
     padding: 4em 0;
     background-color: #161616; /* Color de fondo igual a la sección desktop */
   }
   
   /* Contenedor de las filas */
   .seccion_normal_2_2_mobile .container-fluid {
     padding: 0 10px; /* Padding lateral pequeño para aprovechar pantalla */
   }
   
   /* Estilo para CADA FILA (div) */
   .seccion_normal_2_2_mobile .container-fluid > div {
     display: flex;
     justify-content: center; /* Esto centra los elementos (clave para la fila de 2) */
     align-items: flex-start;
     gap: 10px; /* Espacio entre imágenes */
     margin-bottom: 20px; /* Espacio entre la fila 1 y la fila 2 */
   }
   
   /* Estilo para CADA ITEM (hover01) */
   .seccion_normal_2_2_mobile .hover01 {
     /* Cálculo: 100% / 3 = 33.33%
        Restamos un poco (7px) para compensar el 'gap' y evitar que bajen de línea 
     */
     flex: 0 0 calc(33.333% - 7px);
     max-width: calc(33.333% - 7px);
     
     display: flex;
     flex-direction: column;
     align-items: center;
     overflow: visible !important;
     padding: 0 !important;
   }
   
   /* Estilos de la IMAGEN */
   .seccion_normal_2_2_mobile .hover01 img {
     width: 100% !important;
     height: auto !important;
     object-fit: contain;
     margin-bottom: 10px !important;
     border-radius: 15px; /* Ajuste de radio para móvil */
     display: block !important;
     
     /* Animación suave al cargar */
     transition: transform 0.3s ease;
   }
   
   /* Efecto Hover (opcional en móvil) */
   .seccion_normal_2_2_mobile .hover01:active img {
     transform: scale(0.95);
   }
   
   /* Estilos del BOTÓN */
   .seccion_normal_2_2_mobile .btn.conocer_mas_instagram {
     width: 100%;
     padding: 6px 2px; /* Padding reducido para que quepa el texto */
     font-size: 9px; /* Fuente más pequeña para que entre en 3 columnas */
     white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
     border-radius: 15px;
   }
   
   /* Responsive extra pequeño (iPhone SE, Galaxy Fold) */
   @media (max-width: 360px) {
     .seccion_normal_2_2_mobile .btn.conocer_mas_instagram {
       font-size: 8px;
       padding: 4px 0px;
     }
   }
   
   /* Media query para mostrar mobile y ocultar desktop en pantallas pequeñas */
   @media (max-width: 768px) {
     .seccion_normal_2_1 {
       display: none !important;
     }
     .seccion_normal_2_2_mobile {
       display: block !important;
     }
   }
   
  /* Media query para ocultar mobile y mostrar desktop en pantallas grandes */
  @media (min-width: 769px) {
    .seccion_normal_2_1 {
      display: block !important;
    }
    .seccion_normal_2_2_mobile {
      display: none !important;
    }
  }
  
  /* ===================================================================
     NUEVO ICONO DE LISTA (CATEGORÍAS) - DESKTOP Y MÓVIL
     =================================================================== */

  /* Estilo base para quitar bordes y añadir relleno solido (Lila) */
  .list-icon-custom {
    stroke: none !important;
    fill: var(--color-primary-lilac) !important;
  }

  /* Animación de las barras (Efecto de expansión/carga) */
  .list-bar {
    transform-origin: left center;
    animation: listBarAnimate 2.5s infinite ease-in-out;
  }

  /* Retrasos para efecto cascada en las barras */
  .list-bar:nth-of-type(1) { animation-delay: 0s; }
  .list-bar:nth-of-type(2) { animation-delay: 0.2s; }
  .list-bar:nth-of-type(3) { animation-delay: 0.4s; }

  /* Animación de los puntos (Palpitación) */
  .list-dot {
    transform-origin: center;
    animation: listDotAnimate 2.5s infinite ease-in-out;
  }

  /* Hover Desktop: Acelerar animación o escalar */
  .step-item-sec4:hover .list-bar,
  .step-item-sec4-mobile:hover .list-bar {
    animation-duration: 1.5s; /* Se mueve más rápido al pasar el mouse */
  }

  /* --- KEYFRAMES --- */

  @keyframes listBarAnimate {
    0% { transform: scaleX(0.7); opacity: 0.8; }
    50% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0.7); opacity: 0.8; }
  }

  @keyframes listDotAnimate {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.7; }
  }