@font-face {
  font-family: "Poppins-Regular";
  src: url("fonts/poppins/Poppins-Regular.ttf"); }
@font-face {
  font-family: "Poppins-SemiBold";
  src: url("fonts/poppins/Poppins-SemiBold.ttf"); }
@font-face {
  font-family: "Poppins-Medium";
  src: url("fonts/poppins/Poppins-Medium.ttf"); }
@font-face {
  font-family: "Poppins-Black";
  src: url("fonts/poppins/Poppins-Black.ttf"); }
@font-face {
  font-family: "Poppins-Bold";
  src: url("fonts/poppins/Poppins-Bold.ttf"); }
@font-face {
  font-family: "Poppins-ExtraBoldItalic";
  src: url("fonts/poppins/Poppins-ExtraBoldItalic.ttf"); }
@keyframes slideLeftRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}
@keyframes slideRightLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/* --- VARIABLES Y RESET --- */
:root {
    --purple: #5C2D91;
    --purple-dark: #3a1c5e;
    --teal: #00BFB3;
    --yellow: #FDC82F;
    --orange: #FF7F00;
    --dark-bg: #222;
    --text-main: #333;
    --white: #fff;
    --font-head: 'Poppins-SemiBold', sans-serif;
    --font-body: 'Poppins-Regular', sans-serif;
}

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

html{
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-body);
    color: var(--text-main);
    line-height: 1.6;
    background-color: #f4f4f4;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

/* Contenedor fluido con ancho máximo para escritorio */
.container {
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tipografía */
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; }
.text-center { text-align: center; }
.section-pad { padding: 60px 0; }
.section-title { text-align: center; color: var(--purple); font-size: 2rem; margin-bottom: 40px; }
.section-title.white { color: var(--white); }

/* --- HEADER --- */
.main-header {
    background: #222;
    background: url('./img/fondo01.png') center center/cover no-repeat;
    padding: 4px 0 26px;
    color: var(--teal);
}
.header-content { display: flex; justify-content: center; }
.logo-carc {
    background: #222;
    background: url('./img/fondo05-2.webp') center center/cover no-repeat;
    padding: 100px 0;
    color: var(--teal);
    display: flex; justify-content: center;
}
.logo-carc h1 { font-size: 3rem; text-align: center; margin-bottom: 20px; }
.logo-carc img { max-width: 70%; margin: 0 auto;}
.header-content { display: flex; justify-content: center; }
.logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    font-weight: bold;
    line-height: 1.2;
}
.logo h1{ font-size: 5rem; color: white; margin-bottom: 10px; }
.logo-link {
    display: flex;
    align-items: center;
}
.logo-link img {
    width: 100%;
    height: auto;
    margin: 0;
}
.logo-link-aporte {
    width: min(260px, 32vw);
}
.logo-link-wakeup {
    width: min(210px, 26vw);
    justify-content: flex-end;
}
.logo i { font-size: 2rem; }

/* --- HERO SECTION --- */
.hero {
    background: linear-gradient(135deg, var(--teal) 0%, #009aa6 100%);
    padding: 0; /* Full width color */
}

.hero-grid {
    display: flex;
    flex-direction: column; /* Mobile first: Columna */
}

.hero-image, .pain-image{ max-width: 40%;}
.hero-image {
    display: flex;
    align-self: stretch;
    align-items: flex-end;
}
.pain-image {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
}
.hero-image img {
    margin-top: auto;
}
.pain-image img {
    margin-top: auto;
}
.hero-image img { width: 100%; object-fit: cover; }

.hero-text {
    padding: 40px 20px;
    color: white;
    text-align: center;
}

#hero{
    background: url("./img/fondo02.png") center center/cover no-repeat;
}
#pain-points{background: url("./img/fondo03.png") center center/cover no-repeat;}
.green-background{ background: url("./img/fondo02.png") center center/cover no-repeat; }
.purple-background{ background: url("./img/fondo03.png") center center/cover no-repeat; }
.nacha-background{ background: url("./img/fondo-nacha.png") center center/contain; }

.hero-text h1 { font-size: 2rem; margin-bottom: 20px; text-align: right; }
.highlight { background: var(--purple); padding: 0 5px; }
.pill { background: var(--yellow); color: #000; padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 10px; display: inline-block; }

/* --- Intro section --- */
#intro{ font-size: 1.7em; line-height: 1.4; }
#intro .container{ max-width: 1100px; }
#intro h2{ font-size: 2.8rem; margin-bottom: 0; }

/* --- Explica-curso section --- */
#explica-curso{ color: white; font-size: 2rem; font-weight: 600; padding: 7rem 0; }
#explica-curso .container{ max-width: 1100px; }

/* --- Includes section --- */
.includes .container{ display: flex; flex-direction: column; align-items: center; }
.includes h2{ color: var(--teal); font-size: 3rem; }

/* --- Historias section --- */
#historias{ padding: 4rem 0; }
#historias h2{ color: white; font-size: 3rem; margin-bottom: 0;}
#historias .arrow-down{ color: var(--teal) !important; }

/* --- Testimonios section --- */
#testimonios{ padding: 4rem 0; }
#testimonios p{ font-size: 2rem; font-weight: 600; line-height: 1.2; }
#testimonios .container{ display: flex; gap: 20px; flex-direction: row; align-items: center; justify-content: space-between;}
#testimonios .point{max-width: 90px;}
#testimonios .left-column{ max-width: 60%; text-align: left;}
#testimonios .right-column{ max-width: 25%; text-align: right;}

/* --- Comparison section --- */
.comparison{ padding: 6rem 0 11rem !important; }
.comparison h2{ font-size: 3rem; margin-bottom: 0; }
.comparison .ticks{ max-width: 40px; }
.comparison li{ font-size: 1.3rem !important; font-weight: 600; }

/* --- Por-que-funciona section --- */
#por-que-funciona{ padding: 6rem 0 11rem !important; }
#por-que-funciona h2{ color: var(--teal); font-size: 3rem; margin-bottom: 0; }
#por-que-funciona p{ font-size: 2rem; font-weight: 600; }
#por-que-funciona span{ color: var(--purple); padding: 0 5px; font-family: "Poppins-Bold"; }

/* --- Formula-sencilla section --- */
#formula-sencilla{ padding: 6rem 0 11rem !important; }
#formula-sencilla h2{ color: white; font-size: 3rem; margin-bottom: 0; }

/* --- Formula-imagen section --- */
#formula-imagen{ padding: 4rem 0 11rem !important; text-align: center;}
#formula-imagen h2{ color: var(--teal); font-size: 3rem; margin-bottom: 0; }
#formula-imagen span{ color: white; }

/* --- Nacha-background section --- */
.nacha-background{ padding: 35rem 0 11rem !important; text-align: center;}
.nacha-background h2{ color: white; font-size: 3rem; margin-bottom: 0; }

/* --- Conoce-nacha section --- */
#conoce-nacha{ padding: 6rem 0 11rem !important; text-align: center; }
#conoce-nacha h2{ color: var(--teal); font-size: 3rem; margin-bottom: 0; }
#conoce-nacha p{ font-size: 1.5rem; font-weight: 600; }

/* --- Lo-que-ganaras section --- */
#lo-que-ganaras{ padding: 6rem 0 11rem !important; text-align: center; }
#lo-que-ganaras .container{ max-width: 1100px; }
#lo-que-ganaras .ganaras-grid{ display: flex; flex-direction: row; gap: 40px; align-items: center; }
#lo-que-ganaras h2{ color: var(--teal); font-size: 3rem; margin-bottom: 0; }
#lo-que-ganaras img{ max-width: 80px;}
#lo-que-ganaras p{ font-size: 1.7rem; font-weight: 600; }

/* --- Benefits section --- */
.benefits{ padding: 6rem 0 11rem !important; text-align: center; }
.benefits .container{ max-width: 800px; }
.benefits h2{ color: white; font-size: 3rem; margin-bottom: 0; }

/* --- Oferta section --- */
.final-offer{ padding: 6rem 0 11rem !important; text-align: center; }
.final-offer .container{ max-width: 1100px; }
.final-offer h2{ color: black; font-size: 3rem; margin-bottom: 1rem; }
.final-offer h2 strong{ color: var(--purple); padding: 0 5px; font-family: "Poppins-Bold"; }
.final-offer h3{ color: var(--teal); font-size: 2.2rem; margin-bottom: 1rem; text-align: left; }
.final-offer p{ font-size: 1.7rem; font-weight: 600; }
.final-offer li{ font-size: 1.4rem; font-weight: 600; text-align: left; }
.final-offer img{ max-width: 110px; margin: 2% 0 0 -1%; }

/* --- Solo-un-curso section --- */
#solo-un-curso{ padding: 6rem 0 11rem !important; text-align: center; }
#solo-un-curso .container{ max-width: 1100px; }
#solo-un-curso h2{ color: white; font-size: 3rem; margin-bottom: 0; }
#solo-un-curso h2 span{ color: var(--teal); }
#solo-un-curso .arrow-down{ color: white !important; }

/* --- Todo-cambia section --- */
#todo-cambia{ padding: 6rem 0 11rem !important; text-align: center; }
#todo-cambia .container{ max-width: 900px; }
#todo-cambia p{ font-size: 1.7rem; font-weight: 600; }

/* --- Accede-desde-cualquier-lugar section --- */
#accede-desde-cualquier-lugar{ padding: 6rem 0 11rem !important; text-align: center; }
#accede-desde-cualquier-lugar .container{ max-width: 1100px; display: flex; align-items: center; justify-content: center; }
#accede-desde-cualquier-lugar h2{ color: white; font-size: 3rem; margin-bottom: 0; }
.arrow-left{ color: var(--teal) !important; }
.arrow-right{ color: var(--teal) !important; }

/* --- Curso-online section --- */
#curso-online{ padding: 6rem 0 11rem !important; text-align: center; }
#curso-online .container{ max-width: 1920px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
#curso-online p{ font-size: 1.7rem; font-weight: 600; margin-bottom: 2rem; }

/* --- Para-ti section --- */
#para-ti{ padding: 6rem 0 11rem !important; text-align: center; }
#para-ti .container{ max-width: 1100px; display: flex; justify-content: center; flex-direction: column; }
#para-ti h2{ color: var(--teal); font-size: 3rem; margin-bottom: 0; }
#para-ti img{ max-width: 80px;}
#para-ti p{ font-size: 1.7rem; font-weight: 600; text-align: left; }
#para-ti .ganaras-grid{ display: flex; flex-direction: row; gap: 40px; align-items: center; }

/* --- Piensalo section --- */
#piensalo{ padding: 6rem 0 11rem !important; text-align: center; }
#piensalo .container{ max-width: 1100px; }
#piensalo h2{ color: white; font-size: 4rem; margin-bottom: 0; }

/* --- Garantia section --- */
#garantia{ padding: 6rem 0 0 !important; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#garantia .container{ max-width: 1100px; }
#garantia img{ max-width: 500px; display: inline; }
#garantia p{ font-size: 1.7rem; font-weight: 600; }
#garantia h2.purple-text2{ color: var(--purple); font-size: 4rem; margin: 4rem 0; }
#garantia h2.purple-text{ color: var(--purple); font-size: 5rem; line-height: 100%; margin-bottom: 0; font-family: 'Poppins-ExtraBoldItalic'; }
#garantia h2.teal-text{ color: var(--teal); font-size: 5rem; line-height: 100%; margin-bottom: 0; font-family: 'Poppins-ExtraBoldItalic'; }


/* --- ESTILOS DEL SEPARADOR SUPERPUESTO --- */

/* 1. Resetear el contenedor interno */
/* Forzamos al container de Bootstrap/propio a que no tenga límites ni padding para esta sección */
.separator .container {
    width: 100% !important;
    overflow-x: clip;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. La sección del separador */
.separator {
    /* 1. Lo hacemos "flotar" para que no empuje contenido extra */
    position: relative;
    z-index: 20; /* Muy importante: por encima del Hero y del contenido siguiente */
    
    /* 2. EL TRUCO: Margen negativo en porcentaje */
    /* Esto sube la imagen proporcionalmente al ancho de la pantalla.
       Ajusta el valor (-5%, -8%, -10%) dependiendo de qué tan alta sea tu imagen real. */
    margin-top: -13%; 
    
    /* 3. Eliminamos cualquier espacio fantasma */
    width: 100%;
    line-height: 0;
    font-size: 0;
    
    /* 4. Aseguramos que no interfiera con clicks si tapa algo importante */
    pointer-events: none;
    background: transparent; /* Asegura que no tenga fondo de color */
}

/* Forzamos al contenedor interno a no tener relleno */
.separator .container {
    width: 100% !important;
    max-width: 200% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.separator img {
    max-width: 200%;
    width: 122%;       /* Ancho total */
    height: auto;      /* Altura automática */
    display: block;    /* Elimina espacios inline */
    transform: translateY(46%) translateX(-7%);
    
    /* OPCIONAL: Si tu imagen es muy alta y tiene mucho blanco abajo, 
       puedes recortar visualmente un poco usando esto: */
    /* transform: translateY(1px); */
}

/* --- BOTONES --- */
.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: transform 0.2s;
    border: none;
    cursor: pointer;
}
.btn:hover { transform: scale(1.05); }
.btn-primary { background: var(--purple); color: white; border: 2px solid white; }
.btn-secondary { background: var(--purple); color: white; width: 100%; max-width: 400px; box-shadow: 0 5px 0 var(--purple-dark); }
.pulse { animation: pulse 2s infinite; }

.floating-cart-cta {
    background: none;
    border: none;
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 150px;
    max-width: calc(100vw - 48px);
    max-height: 150px;
    padding: 0;
    z-index: 900;
    border-radius: 50%;
    font-family: var(--font-body);
    background: #FFFFFF;
    border: 4px solid #00aa9e;
}

    .floating-cart-cta img {
        width: 100%;
        max-width: 150px;
        max-height: 150px;
        height: auto;
        display: block;
        filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
    }

.floating-cart-cta i {
    font-size: 1.1rem;
}

.floating-cart-cta span {
    line-height: 1;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* --- PAIN POINTS (BURBUJA) --- */
.pain-points { background: #fff; }
.pain-grid { display: flex; flex-direction: column; align-items: center; }

.bubble-box {
    background: var(--purple);
    color: white;
    padding: 30px;
    border-radius: 30px;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}
.bubble-tail {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: var(--purple) transparent;
}

/* --- TEXTURA DARK & VIDEO --- */
.dark-intro, .dark-texture {
    background: url('./img/fondo01.png') center center/cover no-repeat;
    color: #ddd;
    padding: 60px 0;
}
.teal-text { color: var(--teal); margin: 20px 0; font-size: 1.4rem; }
.arrow-down { font-size: 2rem; color: var(--yellow); margin-bottom: 20px; animation: bounce 2s infinite; }
.arrow-left { font-size: 2rem; color: var(--yellow); animation: slideLeftRight 1.2s alternate infinite; }
.arrow-right { font-size: 2rem; color: var(--yellow); animation: slideRightLeft 1.2s alternate infinite; }


.video-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    border: 5px solid var(--teal);
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
}
.play-btn {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; color: white; z-index: 2;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* --- INCLUDES (GRID) --- */
.includes{
    background: url("./img/fondo04.png") center center/cover no-repeat;
}
.features-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 columna */
    gap: 20px;
    margin-bottom: 40px;
}
.feature-card {
    border: 2px solid #eee;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    background: white;
}
.feature-card .icon { font-size: 2.5rem; color: var(--purple); margin-bottom: 15px; }

.price-box {
    background: #eefbff;
    border: 2px dashed var(--teal);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}
.price { font-size: 3.5rem; font-weight: 900; color: var(--teal); margin: 10px 0; }

/* --- COMPARISON --- */
.comparison-grid {
    display: flex;
    flex-direction: column; /* Mobile */
    gap: 30px;
}
.col-bad ul, .col-good ul { list-style: none; }
.col-bad li, .col-good li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 15px;
}
.col-bad i { color: #ff5555; font-size: 1.5rem; }
.col-good i { color: #55ff55; font-size: 1.5rem; }
.orange { color: var(--orange); } .green { color: var(--teal); }

/* --- METHODOLOGY --- */
.methodology { background: var(--purple); color: white; }
.steps-container {
    display: flex;
    flex-direction: column; /* Mobile */
    align-items: center;
    gap: 20px;
}
.circle-img {
    width: 120px; height: 120px;
    border-radius: 50%; border: 4px solid white;
    overflow: hidden; margin: 0 auto 10px;
}
.connector { color: rgba(255,255,255,0.3); font-size: 2rem; transform: rotate(90deg); /* Flecha abajo en móvil */ }

/* --- INSTRUCTOR --- */
.instructor-flex { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.inst-img img { border-radius: 20px; border: 5px solid var(--teal); }
.inst-info h3 { color: var(--purple); margin-bottom: 15px; }
.credentials { list-style: none; margin-top: 15px; }
.credentials li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.credentials i { color: var(--teal); }

/* --- UPSELL CARD --- */
.upsell-card {
    background: white;
    color: #333;
    max-width: 500px;
    margin: 30px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 3px solid var(--yellow);
}
.upsell-header { background: #333; color: var(--yellow); padding: 15px; }
.upsell-body { padding: 30px; }
.big-price { font-size: 4rem; font-weight: 900; color: var(--teal); line-height: 1; margin: 20px 0; }
.big-price small { display: block; font-size: 1rem; color: #666; font-weight: normal; }
.btn-cta-large {
    background: var(--orange); color: white; font-size: 1.3rem; padding: 15px 30px;
    border: none; border-radius: 50px; width: 100%; font-weight: bold; cursor: pointer;
    border-bottom: 5px solid #cc6600;
}
.btn-cta-large:active { transform: translateY(4px); border-bottom: none; }

/* footer */
footer { background: #111; color: #666; text-align: center; padding: 20px; font-size: 0.8rem; }


/* =========================================
   MEDIA QUERIES (LA MAGIA RESPONSIVE)
   ========================================= */

@media (min-width: 768px) {
    /* Tablet y Escritorio */
    
    .hero-grid {
        flex-direction: row-reverse; /* Imagen derecha, texto izquierda */
        align-items: center;
        width: 85%;
        max-width: none;
    }
    .hero-text { text-align: left; padding: 80px; text-align: right; }
    .hero-text h1 { font-size: 2.2rem; }
    
    .pain-grid {
        flex-direction: row;
        gap: 40px;
        width: 85%;
        max-width: none;
    }
    .bubble-box { text-align: left; margin-bottom: 0; }
    .bubble-tail { 
        left: -20px; bottom: 50%; transform: translateY(50%);
        border-width: 20px 20px 20px 0; /* Flecha apunta a la izquierda */
        border-color: transparent var(--purple) transparent transparent;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }

    .comparison-grid {
        flex-direction: row; /* Lado a lado */
        justify-content: center;
        gap: 60px;
    }

    .steps-container {
        flex-direction: row; /* Horizontal */
        justify-content: center;
        align-items: flex-start;
    }
    .connector { transform: rotate(0deg); margin-top: 50px; }

    .instructor-flex {
        flex-direction: row;
        align-items: flex-start;
    }
    .inst-img { flex: 1; }
    .inst-info { flex: 2; }

    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* EL FONDO OSCURO (Overlay) */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se mantiene fijo en la pantalla al hacer scroll */
    z-index: 1000; /* Asegura que esté por encima de TODO */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita scroll si el contenido es muy largo */
    background-color: rgba(0,0,0,0.6); /* Color negro con transparencia */
    
    /* Para centrar el contenido usando Flexbox */
    justify-content: center;
    align-items: center;
}

/* LA CAJA DEL CONTENIDO */
.modal-content {
    padding: 0;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra elegante */
    width: 90%; /* Ancho en móviles */
    max-width: 700px; /* Ancho máximo en escritorio */
    
    /* Animación de entrada */
    animation: slideDown 0.4s ease-out;
    position: relative;
}

/* BOTÓN DE CERRAR (X) */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 15px;
    margin-top: 5px;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* ESTILOS INTERNOS (Opcional) */
.modal-header, .modal-body, .modal-footer {
    padding: 20px;
}
.modal-header {
    border-bottom: none;
}
.modal-footer {
    border-top: 1px solid #eee;
    text-align: right;
}
.modal-body{padding: 2% 10%;}
.modal-dialog, div#fieldset{background: url('./img/fondo03.webp') center center/cover no-repeat;border-radius: 50px;}
.formBackground{border-radius: 50px; border: 4px solid white; width: fit-content; padding: 0.5em; color: white;}
#registration-form2 legend, div#fieldset legend{text-align: center; width: 100%; padding: 30px 0px 0px 0px; border-radius: 3px 3px 0 0; color: white; font-size: 1.5em; font-weight: bold;}
div#fieldset{ padding: 2% 10%; border: 4px solid #00bfb3; width: 75%; margin: 0 auto; }
#registration-form input[type=text],#registration-form input[type=number],#registration-form input[type=email], #registration-form2 input[type=text],#registration-form2 input[type=number],#registration-form2 input[type=email], div#fieldset input[type=text],div#fieldset input[type=number],div#fieldset input[type=email] { padding: 15px 20px; border-radius: 1px; margin:5px auto; background-color:#FFF; border: 1px solid silver; color: black; -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); box-shadow: inset 0 1px 5px rgba(0,0,0,0.2), 0 1px rgba(255,255,255,.8); width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition:background-color .5s ease; -moz-transition:background-color .5s ease; -o-transition:background-color .5s ease; -ms-transition:background-color .5s ease; transition:background-color .5s ease; font-family: 'Poppins-Regular', sans-serif; }
#registration-form input#btnSubmit,#registration-form2 input#btnSubmit, div#fieldset input#btnSubmit { text-transform:uppercase; outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; background-color: #0a81b4; padding: 10px; color: white; border-radius: 3px; font-size: 1.5em; font-weight: bold; margin-top: 5px; cursor: pointer; position:relative; border-radius: 20px; top:0; background: linear-gradient(transparent, transparent) padding-box, linear-gradient(to right, rgba(243, 176, 61, 1) 0%, rgba(102, 180, 71, 1) 50%, rgba(14, 141, 212, 1) 100%) border-box; border: none; font-family: 'Poppins-Regular', sans-serif; }

div.fieldset #sendingMessage{ font-size: 3em; color: white; margin-top: 0.5em; }

.testimonios-carousel-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 2rem 0;
  overflow: hidden;
}

.testimonios-carousel {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.carousel-viewport {
  overflow: hidden;
  width: 100%;
}

#testimoniosCarousel .carousel-viewport {
  touch-action: pan-y;
}

#testimoniosCarousel .carousel-track {
  user-select: none;
  -webkit-user-drag: none;
}

.carousel-track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}

.carousel-slide {
    flex: 0 0 calc(100% / 3);
  padding: 0.5rem;
  box-sizing: border-box;
}

.carousel-slide img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

#fieldset p, .checkbox-container {
    font-size: 1em;
    font-weight: 400;
    color: white;
    text-align: left;
    margin-top: 20px;
}

.checkbox-container {
    margin-top: 18px;
}

.checkbox-label {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: 14px;
    cursor: pointer;
    color: white;
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin: 2px 0 0;
    border: 3px solid #73f5f2;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #e8ffff 100%);
    box-shadow: 0 0 0 2px rgba(0, 191, 179, 0.12), 0 6px 14px rgba(0, 0, 0, 0.18);
    display: grid;
    place-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(0, 191, 179, 0.18), 0 10px 18px rgba(0, 0, 0, 0.22);
}

.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

.checkbox-label input[type="checkbox"]:checked {
    background: linear-gradient(180deg, #ffffff 0%, #d6fffc 100%);
    border-color: #00bfb3;
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: "";
    width: 7px;
    height: 13px;
    border-right: 3px solid #2b8d86;
    border-bottom: 3px solid #2b8d86;
    transform: rotate(45deg) translate(-1px, -1px);
}

.checkbox-text {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: white;
}

#fieldset h3{color: white; margin-top: 2em;}
#fieldset a{color: var(--teal); text-decoration: underline;}


/* ANIMACIÓN */
@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 en fila para escritorio grande */
    }
}

@media screen and (max-width: 500px) {
    .mobile{display:initial;}
    .desktop{display:none !important;}
    .logo h1{ font-size: 3rem; }
    .logo {
        gap: 16px;
    }
    .logo-link-aporte {
        width: 48%;
    }
    .logo-link-wakeup {
        width: 38%;
    }
    .main-header{ padding: 15px 0 15px; }
    .logo-carc{padding: 34px 0;}
    .logo-carc h1{ font-size: 2rem; }
    .hero-text h1 { font-size: 2.6rem; text-align: center; }
    .hero-text a{ font-size: 1.3rem; }
    #intro h2{ font-size: 3.2rem; }
    #intro strong{ font-size: 120%; }
    #explica-curso{ padding: 3rem 0; }
    .includes h2{ line-height: 102%; text-align: center; }
    #historias{ padding: 2rem 0; }
    #historias h2{ font-size: 2.5rem; }
    .arrow-down{ margin-bottom: 0; }
    #testimonios .left-column{ max-width: 100%; }
    #testimonios .right-column{ display: none; }
    #testimonios .point{ margin-left: -1rem; }
    #testimonios p{ margin-bottom: 1rem; }
    .comparison{ padding: 2rem 0 2rem !important; }
    .comparison h2{ line-height: 100%; margin-bottom: 2rem; }
    .comparison li{ font-size: 1.5rem !important; line-height: 120%; }
    #por-que-funciona{ padding: 2rem 0 3rem !important; }
    #por-que-funciona h2{ line-height: 120%; margin-bottom: 3rem; }
    #formula-sencilla{ padding: 3rem 0 3rem !important; }
    #formula-imagen{ padding: 3rem 0 4rem !important; }
    #formula-imagen h2{ line-height: 120%; }
    .nacha-background{ padding: 18rem 0 4rem !important; }
    #conoce-nacha{ padding: 2rem 0 4rem !important; }
    #conoce-nacha p{ font-size: 1.5rem; }
    #lo-que-ganaras{ padding: 2rem 0 3rem !important; }
    #lo-que-ganaras h2{ line-height: 120%; margin-bottom: 2rem; }
    #lo-que-ganaras .ganaras-grid{ gap: 10px; margin-bottom: 2rem; }
    #lo-que-ganaras p{ text-align: left; }
    .benefits{ padding: 2rem 0 2rem !important; }
    .benefits h2{ margin-bottom: 2rem; line-height: 120%; }
    .final-offer{ padding: 2rem 0 3rem !important; }
    .final-offer h2{ line-height: 120%; margin-bottom: 2rem; }
    .final-offer li{ margin-left: 1.5rem; }
    #solo-un-curso{ padding: 2rem 0 3rem !important; }
    #solo-un-curso h2{ line-height: 120%; margin-bottom: 2rem; }
    #todo-cambia{ padding: 2rem 0 3rem !important; }
    #accede-desde-cualquier-lugar{ padding: 2rem 0 3rem !important; }
    #accede-desde-cualquier-lugar h2{ line-height: 120%; margin-bottom: 2rem; }
    #curso-online{ padding: 2rem 0 0 !important; }
    #para-ti{ padding: 2rem 0 3rem !important; }
    #para-ti h2{ line-height: 120%; margin-bottom: 2rem; }
    #para-ti img{ max-width: 60px; }
    #para-ti .ganaras-grid{ gap: 0px; margin-bottom: 2rem; }
    #para-ti p{ font-size: 1.4rem; }
    #piensalo{ padding: 2rem 0 4rem !important; }
    #piensalo h2{ font-size: 4rem; }
    #garantia{ padding: 3rem 0 0 !important; }
    #garantia h2.purple-text2{ font-size: 3rem; margin: 2rem 0; line-height: 120%; }
    #garantia img{ max-width: 100%; }
    #garantia h2.teal-text{ font-size: 3rem; line-height: 120%; }
    #garantia h2.purple-text{ font-size: 3rem; line-height: 120%; }
    .hero-image, .pain-image{ max-width: 100%; }

    .carousel-slide {
        flex: 0 0 100%;
    }

    .carousel-slide img {
        height: auto;
    }
    .testimonios-carousel { width: 100%;
    }

    .floating-cart-cta {
        right: 16px;
        bottom: 16px;
        width: clamp(88px, 24vw, 110px);
        max-width: calc(100vw - 32px);
        max-height: clamp(88px, 24vw, 110px);
        padding: 0;
        gap: 0;
    }

    .floating-cart-cta img {
        max-width: clamp(88px, 24vw, 110px);
        max-height: clamp(88px, 24vw, 110px);
    }

    .floating-cart-cta span {
        display: none;
    }

    .floating-cart-cta i {
        font-size: 1.4rem;
    }

    .checkbox-label {
        grid-template-columns: 24px 1fr;
        gap: 12px;
    }

    .checkbox-label input[type="checkbox"] {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    .checkbox-text {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    div#fieldset{ width: 100%;}
}

@media screen and (min-width: 501px){
    .mobile{display:none !important;}
    .modal-dialog {max-width: 700px !important;}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}