{"version":3,"file":"Index-43896bc9.js","sources":["../../assets/img/tree.svg","../../assets/img/certificate.svg","../../assets/img/ejercicios.png","../../assets/img/foro-de-soporte.png","../../assets/img/actualizaciones-constantes.png","../../components/ui/molecules/Cta.vue","../../pages/Index.vue"],"sourcesContent":["export default \"__VITE_ASSET__057cdb06__\"","export default \"__VITE_ASSET__5d071a2f__\"","export default \"__VITE_ASSET__44aae3b1__\"","export default \"__VITE_ASSET__529b4fff__\"","export default \"__VITE_ASSET__bccdc6d2__\"","<script setup lang=\"ts\">\nimport { defineProps, ref, defineEmits } from \"vue\";\n\nimport Pill from \"@/components/ui/atoms/Pill.vue\";\nimport PillContainer from \"@/components/ui/atoms/PillContainer.vue\";\n\nconst animate = ref(false);\n\ninterface Props {\n  text?: string;\n}\n\nconst emits = defineEmits([\"click\"]);\ndefineProps<Props>();\n\nconst handleClick = () => {\n  animate.value = true;\n  setTimeout(() => {\n    animate.value = false;\n    emits(\"click\");\n  }, 240);\n};\n</script>\n\n<template>\n  <PillContainer\n    tag=\"div\"\n    theme=\"accent\"\n    relaxed\n    shape=\"round\"\n    :class=\"['button-cta']\"\n    @click=\"handleClick()\"\n  >\n    <Pill\n      tag=\"div\"\n      size=\"medium\"\n      theme=\"dark\"\n      shape=\"round\"\n      :class=\"['button-cta__arrow-container', { clicked: animate }]\"\n    >\n      <div class=\"button-cta__arrow\" />\n    </Pill>\n    <div class=\"pill pill--transparent button-cta__text\">\n      <span>{{ text }}</span>\n    </div>\n  </PillContainer>\n</template>\n\n<style lang=\"scss\" scoped>\n@use \"@/styles/settings/vars\";\n\n.button-cta {\n  position: relative;\n  align-items: center;\n  cursor: pointer;\n  width: max-content;\n\n  &__arrow-container {\n    padding: 0.75em 1.5em;\n    position: absolute;\n    width: 120px;\n    margin: 0;\n    align-self: center;\n    transition: width 0.3s ease-out;\n  }\n\n  &__arrow {\n    background-image: url(\"@img/icons/arrow.svg\");\n    background-repeat: no-repeat;\n    background-size: auto 100%;\n    background-position: right bottom;\n    width: 100%;\n    height: 1em;\n  }\n\n  &__text {\n    margin-left: 140px;\n    text-align: left;\n  }\n\n  &__text span {\n    font-size: 1.5em;\n    font-weight: 600;\n    line-height: 1.1em;\n  }\n\n  &:hover {\n    .button-cta__arrow-container {\n      width: 140px;\n      transition: width 0.3s ease-in-out;\n    }\n  }\n\n  &:active .button-cta__arrow-container,\n  & .button-cta__arrow-container.clicked {\n    width: calc(100% - 8px);\n    transition: width 0.3s ease-in-out;\n  }\n}\n\n@media (max-width: 1024px) {\n  .button-cta {\n    &__arrow-container {\n      padding: 0.75em 1.5em;\n      width: 100px;\n    }\n\n    &__text {\n      margin-left: 120px;\n    }\n\n    &__text span {\n      font-size: 1em;\n      font-weight: 600;\n      line-height: calc(1em + 4px);\n    }\n\n    &:hover {\n      .button-cta__arrow-container {\n        width: 120px;\n      }\n    }\n\n    &:active .button-cta__arrow-container,\n    & .button-cta__arrow-container.clicked {\n      width: calc(100% - 8px);\n      transition: width 0.3s ease-in-out;\n    }\n  }\n}\n\n@media (max-width: 600px) {\n  .button-cta {\n    &__arrow-container {\n      padding: 0.75em 1.5em;\n      width: 90px;\n    }\n\n    &:hover {\n      .button-cta__arrow-container {\n        width: 110px;\n      }\n    }\n\n    &__text {\n      margin-left: 100px;\n    }\n\n    &:active .button-cta__arrow-container,\n    & .button-cta__arrow-container.clicked {\n      width: calc(100% - 8px);\n      transition: width 0.3s ease-in-out;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { defineProps, ref } from \"vue\";\n\nimport aniA1 from \"@img/ani_a_1.svg\";\nimport aniB1 from \"@img/ani_b_1.svg\";\nimport aniB2 from \"@img/ani_b_2.svg\";\nimport aniB3 from \"@img/ani_b_3.svg\";\nimport aniB4 from \"@img/ani_b_4.svg\";\nimport aniC1 from \"@img/ani_c_1.svg\";\nimport aniC2 from \"@img/ani_c_2.svg\";\nimport aniC3 from \"@img/ani_c_3.svg\";\nimport aniC4 from \"@img/ani_c_4.svg\";\nimport aniC5 from \"@img/ani_c_5.svg\";\nimport aniC6 from \"@img/ani_c_6.svg\";\n\nimport Modal from \"@/components/common/Modal.vue\";\nimport Reviews from \"@/components/common/Reviews.vue\";\nimport Block from \"@/components/ui/atoms/Block.vue\";\nimport BlockContainer from \"@/components/ui/atoms/BlockContainer.vue\";\nimport Btn from \"@/components/ui/atoms/Btn.vue\";\nimport MasterBlock from \"@/components/ui/atoms/MasterBlock.vue\";\nimport Pill from \"@/components/ui/atoms/Pill.vue\";\nimport PillContainer from \"@/components/ui/atoms/PillContainer.vue\";\nimport CourseCard from \"@/components/ui/molecules/CourseCard.vue\";\nimport Cta from \"@/components/ui/molecules/Cta.vue\";\nimport FullVideo from \"@/components/ui/molecules/FullVideo.vue\";\nimport PackCard from \"@/components/ui/molecules/PackCard.vue\";\nimport ProductPriceCard from \"@/components/ui/molecules/ProductPriceCard.vue\";\nimport MainLayout from \"@/layouts/MainLayout.vue\";\nimport type { ProductPrice } from \"@/shared/checkoutTypes\";\nimport type {\n  Course,\n  Project,\n  Review,\n  Specialization,\n  SubjectPack,\n} from \"@/shared/explorerTypes\";\nimport \"@/styles/tools/_froala.scss\";\nimport { resolveUrl } from \"@/utils/urls\";\n\ninterface Props {\n  lastCourses: Course[];\n  topCourses: Course[];\n  specializations: Specialization[];\n  reviews: Review[];\n  projects: Project[];\n  productPrices: ProductPrice[];\n  packs: SubjectPack[];\n}\n\nconst props = defineProps<Props>();\n\nconst previewVideo = \"https://cdn.mastermind.ac/public/mastermind-video-banner-v2.mp4\";\nconst fullScreenVideo = \"https://cdn.mastermind.ac/public/mastermind-video-v2.mp4\";\n\nconst isFullScreenVideo = ref(false);\nconst currentCourses = ref(props.lastCourses);\nconst isShowedTop = ref(false);\nconst showSpecialization = ref(false);\nconst currentSpecialization = ref<Specialization | null>(null);\nconst blockContainerRef = ref(null);\n\nconst showFullVideo = () => {\n  isFullScreenVideo.value = true;\n};\n\nconst faqList = [\n  {\n    id: 1,\n    question: \"¿Qué es Mastermind y qué cursos ofrecemos?\",\n    answer:\n      \"<p>Bienvenido a una forma de aprender que no entiende de tiempo o espacio, Mastermind es una escuela de tecnología 100% online donde encontrarás cursos sobre desarrollo de software e informática. Puedes aprender desde programación web hasta hacking ético o montaje y reparación de PC.</p>\",\n  },\n  {\n    id: 2,\n    question: \"¿De qué forma puedes comprar nuestros cursos?\",\n    answer: `<p>En Mastermind, ofrecemos diferentes opciones para que elijas la que mejor se adapte a ti:</p>\n      <ul>\n        <li><b>Suscripción:</b> Accede a todos los cursos de nuestra plataforma con una suscripción flexible en tres planes distintos, mensual, trimestral (ahora más con un pago cada tres meses), y anual. Tienes control total, cancela tu suscripción cuando quieras (aunque nos daría mucha pena). </li>\n        <li><b>Compra un solo curso:</b> Si solo te interesa un curso en particular, puedes comprarlo de forma independiente y acceder a él sin necesidad de suscripción. Por ejemplo, si solo quieres aprender HTML y CSS, puedes adquirir el curso directamente y será tuyo para siempre.</li>\n        <li><b>Packs de cursos:</b> Agrupamos cursos relacionados en packs temáticos para que aprendas de manera más estructurada y con un descuento especial. Al comprar un pack, los cursos incluidos serán tuyos para siempre, sin necesidad de pagar más en el futuro. Ejemplo: Pack \"Introducción a la Programación\", con cursos esenciales para empezar desde cero.</li>\n      </ul>`,\n  },\n  {\n    id: 3,\n    question: \"¿Qué está incluido en tu compra?\",\n    answer: `Con cualquiera de las tres opciones anteriores obtienes:\n      <ul>\n        <li>Acceso al curso, pack o todos los cursos (según lo que compres)</li>\n        <li>Ejercicios y proyectos corregidos por nuestros profes</li>\n        <li>¿Te ayudamos? Soporte para todas tus dudas en cada clase, tu pregunta  y nosotros la resolvemos.</li>\n        <li>Itinerarios guiados (para suscripciones) que te ayudan a no perderte. </li>\n        <li>Certificado cuando termines y apruebes el curso </li>\n      </ul>`,\n  },\n  {\n    id: 4,\n    question: \"¿Qué métodos de pago aceptamos?\",\n    answer:\n      \"<p>Aceptamos la mayoría de métodos de pago: tarjetas de crédito, débito, prepago y PayPal. Recuerda que el cambio de moneda es automático, aunque el precio esté en euros puedes comprar desde cualquier parte del mundo. ¡Fácil y rápido!</p>\",\n  },\n  {\n    id: 5,\n    question: \"¿Cuándo recibo mi certificado?\",\n    answer:\n      \"<p>Una vez que hayas <b>completado el curso al 100%</b> y hayas <b>aprobado</b> el proyecto final, ¡recibirás tu certificado automáticamente! Es ideal para enriquecer tu currículum y mostrar las habilidades aprendidas. Este certificado no es un título oficial, pero sí refleja el esfuerzo y aprendizaje logrado en el campo de estudio que decidas formarte.</p>\",\n  },\n  {\n    id: 6,\n    question: \"¿Qué hago si tengo problemas para acceder a mi curso o a la escuela?\",\n    answer:\n      \"<p>¡No te preocupes! Solo escríbenos y te ayudaremos a resolverlo enseguida. Utiliza el chat de la plataforma o escribe a soporte@mastermind.ac. Nuestro horario de atención es de lunes a viernes de 09:00 a 18:00 (UCT+1). </p>\",\n  },\n  {\n    id: 7,\n    question: \"¿Puedo cancelar mi suscripción en cualquier momento?\",\n    answer:\n      \"<p>Sí, puedes cancelar cuando quieras, en tu perfil de usuario tienes todo preparado para ser completamente autónomo gestionando tu suscripción. No hay ataduras, aunque esperamos que te quedes con nosotros mucho tiempo.</p>\",\n  },\n  {\n    id: 8,\n    question: \"¿Tienes más dudas?\",\n    answer: \"<p>Escríbenos al chat o al email y las resolveremos encantados.</p>\",\n  },\n];\n\nconst openFaqs = ref<number[]>([]);\n\nconst toggleFaq = (id: number) => {\n  const index = openFaqs.value.indexOf(id);\n  if (index === -1) {\n    openFaqs.value.push(id);\n    return;\n  }\n  openFaqs.value.splice(index, 1);\n};\n\nconst changeSpecialization = (specialization: Specialization) => {\n  showSpecialization.value = true;\n  currentSpecialization.value = specialization;\n};\n</script>\n\n<template>\n  <MainLayout>\n    <MasterBlock theme=\"off-black\" :class=\"['video-banner-container']\">\n      <div class=\"video-banner\">\n        <video :src=\"previewVideo\" class=\"video-class\" autoplay loop muted playsinline />\n        <div class=\"content-overlay container\">\n          <h1>The challenging tech school</h1>\n          <h2>Aprende tecnología a tu ritmo, desde cero, haciendo proyectos.</h2>\n          <Cta text=\"Reproducir Video\" @click=\"showFullVideo\" />\n        </div>\n        <div class=\"video-overlay\" />\n      </div>\n      <FullVideo\n        :is-visible=\"isFullScreenVideo\"\n        :src=\"fullScreenVideo\"\n        @close=\"isFullScreenVideo = false\"\n      />\n    </MasterBlock>\n\n    <MasterBlock theme=\"iron\">\n      <div class=\"container\">\n        <div class=\"container__header\">\n          <PillContainer theme=\"dark\" shape=\"round\" relaxed>\n            <Btn\n              id=\"questionAnswersBtn\"\n              shape=\"round\"\n              theme=\"iron-bold\"\n              :class=\"[{ 'pill--active-bold': !isShowedTop }]\"\n              @click=\"\n                () => {\n                  currentCourses = props.lastCourses;\n                  isShowedTop = false;\n                  blockContainerRef.resetScroll();\n                }\n              \"\n            >\n              Últimos cursos\n            </Btn>\n            <Btn\n              shape=\"round\"\n              theme=\"iron-bold\"\n              :class=\"[{ 'pill--active-bold': isShowedTop }]\"\n              @click=\"\n                () => {\n                  currentCourses = props.topCourses;\n                  isShowedTop = true;\n                  blockContainerRef.resetScroll();\n                }\n              \"\n            >\n              Top Valorados\n            </Btn>\n          </PillContainer>\n        </div>\n        <BlockContainer behaviour=\"scroll\" theme=\"iron\" ref=\"blockContainerRef\">\n          <CourseCard\n            v-for=\"course in currentCourses\"\n            :key=\"course.id\"\n            :course=\"course\"\n            light\n          />\n          <Block theme=\"smoke\" tag=\"article\" class=\"subject-more\">\n            <p class=\"size-xl no-margin-bottom\">¿BUSCAS ALGO EN CONCRETO?</p>\n            <Btn\n              tag=\"a\"\n              :href=\"resolveUrl('course_list')\"\n              shape=\"round\"\n              theme=\"active-bold\"\n              class=\"sizeplus\"\n            >\n              Ver todos los cursos\n            </Btn>\n          </Block>\n        </BlockContainer>\n      </div>\n    </MasterBlock>\n\n    <MasterBlock theme=\"off-black\" :class=\"['tree-explorer']\">\n      <div class=\"container\">\n        <Pill theme=\"dark\" :class=\"['tree-explorer__heading']\">\n          <span class=\"size-xl ff-apparat-medium\">Nuestro árbol de habilidades</span>\n        </Pill>\n        <div class=\"tree-explorer__img\">\n          <img src=\"@img/tree.svg\" alt=\"Explorador de cursos\" />\n        </div>\n        <Block theme=\"off-white\" :class=\"['tree-explorer__card']\">\n          <p class=\"no-margin-top\">\n            Es como un árbol real, pero en lugar de crecer hojas y ramas, crecen\n            habilidades.\n          </p>\n          <p>\n            Empiezas por el tronco, que son las\n            <strong>habilidades</strong>\n            más básicas, como programación desde cero. Desde ahí, las ramas son\n            <strong>diferentes caminos</strong>\n            que puedes seguir para desarrollarte en algo más avanzado.\n          </p>\n          <Btn\n            tag=\"a\"\n            :href=\"resolveUrl('tree_show', 'desarrollo')\"\n            theme=\"active-bold\"\n            shape=\"round\"\n          >\n            Ver el ARBOL\n          </Btn>\n        </Block>\n      </div>\n    </MasterBlock>\n\n    <MasterBlock theme=\"smoke\" v-if=\"specializations.length > 0\">\n      <div class=\"container container--padding\">\n        <div class=\"container__header\">\n          <h2 id=\"especializaciones\">Aprende una profesión</h2>\n        </div>\n        <BlockContainer theme=\"smoke\" behaviour=\"scroll\" class=\"specialization-container\">\n          <Block\n            v-for=\"specialization in specializations\"\n            :key=\"specialization.id\"\n            :class=\"['specialization']\"\n            @click=\"changeSpecialization(specialization)\"\n          >\n            <div class=\"specialization__img\">\n              <img :src=\"specialization.image\" alt=\"Specialization\" />\n            </div>\n            <div class=\"specialization__info\">\n              <h3 v-html=\"specialization.name\" class=\"no-margin-bottom\" />\n            </div>\n          </Block>\n        </BlockContainer>\n      </div>\n      <Modal\n        v-if=\"currentSpecialization\"\n        :title=\"`Camino profesional: ${currentSpecialization.name}`\"\n        :show=\"showSpecialization\"\n        @close=\"showSpecialization = false\"\n        class=\"specialization-modal\"\n      >\n        <template #body>\n          <div class=\"modal-content\">\n            <Block theme=\"off-black\" class=\"spec-image\">\n              <img :src=\"currentSpecialization.image\" alt=\"Specialization\" />\n            </Block>\n            <div class=\"spec-info\">\n              <div class=\"spec-info__text\">\n                <div v-html=\"currentSpecialization.description\" class=\"froala-content\" />\n              </div>\n            </div>\n          </div>\n        </template>\n        <template #footer>\n          <PillContainer full-width on-right class=\"show-spec\">\n            <Btn\n              tag=\"a\"\n              :href=\"\n                resolveUrl(\n                  'specialization_show',\n                  currentSpecialization.branch_slug,\n                  currentSpecialization.slug,\n                )\n              \"\n              shape=\"round\"\n              theme=\"dark-bold\"\n            >\n              Ver especialización\n            </Btn>\n          </PillContainer>\n        </template>\n      </Modal>\n    </MasterBlock>\n\n    <MasterBlock theme=\"iron\" v-if=\"false\">\n      <div class=\"container\">\n        <div class=\"container__header\">\n          <h2>Nuestro método de aprendizaje</h2>\n        </div>\n        <BlockContainer theme=\"iron\" class=\"method_item\">\n          <Block theme=\"off-white\">\n            <div class=\"item\">\n              <div id=\"ani_a\">\n                <object id=\"ani_a_1\" type=\"image/svg+xml\" :data=\"aniA1\" />\n              </div>\n            </div>\n            <h3>1. Aprender conceptos</h3>\n            <span>clave, entenderlos de la forma más fácil</span>\n          </Block>\n          <Block theme=\"off-white\" class=\"method_item\">\n            <div class=\"item\">\n              <div id=\"ani_b\">\n                <object id=\"ani_b_3\" type=\"image/svg+xml\" :data=\"aniB3\" />\n                <object id=\"ani_b_1\" type=\"image/svg+xml\" :data=\"aniB1\" />\n                <!-- Pistola -->\n                <object id=\"ani_b_2\" type=\"image/svg+xml\" :data=\"aniB2\" />\n                <!-- Rayo -->\n                <object id=\"ani_b_4\" type=\"image/svg+xml\" :data=\"aniB4\" />\n              </div>\n            </div>\n            <h3>2. Practicarlos con ejercicios</h3>\n            <span>que te permitan comprenderlos</span>\n          </Block>\n          <Block theme=\"off-white\" class=\"method_item\">\n            <div class=\"item\">\n              <div id=\"ani_c\">\n                <!-- UFO izquierda -->\n                <object id=\"ani_c_4\" type=\"image/svg+xml\" :data=\"aniC4\" />\n                <!-- Rayo izquierda -->\n                <object id=\"ani_c_6\" type=\"image/svg+xml\" :data=\"aniC6\" />\n                <!-- Ciudad -->\n                <object id=\"ani_c_1\" type=\"image/svg+xml\" :data=\"aniC1\" />\n                <!-- Rayo derecha -->\n                <object id=\"ani_c_2\" type=\"image/svg+xml\" :data=\"aniC2\" />\n                <!-- UFO derecha -->\n                <object id=\"ani_c_3\" type=\"image/svg+xml\" :data=\"aniC3\" />\n                <!-- Cajas -->\n                <object id=\"ani_c_5\" type=\"image/svg+xml\" :data=\"aniC5\" />\n              </div>\n            </div>\n            <h3>3. Crear aplicaciones y proyectos</h3>\n            <span>donde verás como se aplican en el mundo real</span>\n          </Block>\n        </BlockContainer>\n      </div>\n    </MasterBlock>\n\n    <MasterBlock theme=\"dust\">\n      <div class=\"container\">\n        <div class=\"container__header\" id=\"certificate-header\">\n          <h2 class=\"ff-apparat-medium\">Aprende, Practica,</h2>\n          <Pill theme=\"active\" wireframe>\n            <span class=\"ff-apparat-medium\">Certifícate</span>\n          </Pill>\n        </div>\n\n        <div class=\"certificate\">\n          <div class=\"certificate__img\">\n            <img src=\"@img/certificate.svg\" alt=\"Certificado\" />\n          </div>\n          <div class=\"certificate__text\">\n            <h2 class=\"size-xl\">DE MAESTROS EXPERIMENTADOS, APRENDICES AVENTAJADOS</h2>\n            <p>\n              Como escuela especializada, entendemos que el aprendizaje no termina en las\n              clases. Nos enfocamos en brindarte las habilidades prácticas que necesitas\n              para destacarte en el mundo laboral y para transformar tus pasiones en\n              logros. Aquí, cada proyecto es una oportunidad de mostrar tu talento y\n              construir un futuro prometedor, por eso te entregamos un certificado que\n              demuestra todo lo aprendido y el trabajo hecho en cada curso.\n            </p>\n          </div>\n        </div>\n      </div>\n    </MasterBlock>\n\n    <MasterBlock theme=\"off-white\">\n      <section class=\"container\">\n        <div class=\"container__header\">\n          <h2>Soporte siempre y cuando lo necesites</h2>\n        </div>\n        <div class=\"perks-container\">\n          <BlockContainer\n            behaviour=\"stripes\"\n            theme=\"off-white\"\n            class=\"perks-container__row\"\n          >\n            <Block class=\"perk-item\">\n              <img src=\"@img/ejercicios.png\" alt=\"Acceso total\" />\n              <div class=\"perk-item__text\">\n                <h3 class=\"size-l\">EJERCICIOS CORREGIDOS POR PROFESORES</h3>\n                <p class=\"no-margin-bottom\">\n                  Recibe retroalimentación real en cada ejercicio, revisado por nuestros\n                  expertos docentes.\n                </p>\n              </div>\n            </Block>\n            <Block class=\"perk-item\">\n              <img src=\"@img/foro-de-soporte.png\" alt=\"Acceso total\" />\n              <div class=\"perk-item__text\">\n                <h3 class=\"size-l\">Resolvemos tus dudas en cada clase</h3>\n                <p class=\"no-margin-bottom\">\n                  Comparte tus dudas y obtén respuestas de nuestros expertos y de la\n                  comunidad.\n                </p>\n              </div>\n            </Block>\n            <Block class=\"perk-item\">\n              <img\n                src=\"../assets/img/actualizaciones-constantes.png\"\n                alt=\"Acceso total\"\n              />\n              <div class=\"perk-item__text\">\n                <h3 class=\"size-l\">ACTUALIZACIONES FRECUENTES DE CONTENIDO</h3>\n                <p class=\"no-margin-bottom\">\n                  Revisamos y mejoramos el contenido de forma constante para estar al día.\n                </p>\n              </div>\n            </Block>\n          </BlockContainer>\n        </div>\n      </section>\n    </MasterBlock>\n\n    <MasterBlock theme=\"off-black\" :class=\"['pricing']\">\n      <div class=\"container\">\n        <div class=\"container__header\">\n          <h2>Suscríbete y accede a todo nuestro contenido</h2>\n        </div>\n        <BlockContainer behaviour=\"stripes\" :class=\"['pricing-container']\">\n          <ProductPriceCard\n            v-for=\"productPrice in productPrices\"\n            :productPrice=\"productPrice\"\n            :class=\"['price-card']\"\n            :key=\"productPrice.id\"\n          />\n        </BlockContainer>\n        <div class=\"pricing__perks\">\n          <h3>¿QUÉ INCLUYE LA SUSCRIPCIÓN?</h3>\n          <ul>\n            <li>Acceso a más de 70 cursos sobre tecnología</li>\n            <li>Ejercicios y proyectos corregidos por profesores reales</li>\n            <li>Soporte personalizado por parte de nuestros profesores</li>\n            <li>Itinerario de aprendizaje guiado</li>\n            <li>\n              Acceso a foro privado en cada curso para resolver dudas y compartir\n              experiencias\n            </li>\n            <li>Certificados por superar cada curso</li>\n          </ul>\n        </div>\n      </div>\n    </MasterBlock>\n\n    <MasterBlock theme=\"off-white\" :class=\"['packs']\" v-if=\"false\">\n      <section class=\"container\">\n        <div class=\"container__header\">\n          <h2>¿Estás interesado en algo específico?</h2>\n        </div>\n        <BlockContainer theme=\"off-white\">\n          <PackCard :pack=\"pack\" v-for=\"pack in packs\" :key=\"pack.id\" />\n          <Block theme=\"dust\" class=\"packs__more\">\n            <h3>¿No has encontrado lo que buscas?</h3>\n            <p>Accede a nuestro catálogo completo</p>\n            <Btn\n              tag=\"a\"\n              :href=\"resolveUrl('pack_list')\"\n              theme=\"active-bold\"\n              shape=\"round\"\n              class=\"sizeplus\"\n            >\n              Explorar nuestros packs\n            </Btn>\n          </Block>\n        </BlockContainer>\n        <div class=\"packs__cta\">\n          <Btn\n            tag=\"a\"\n            :href=\"resolveUrl('pack_list')\"\n            theme=\"active-bold\"\n            shape=\"round\"\n            class=\"sizeplus\"\n          >\n            Explora nuestros packs\n          </Btn>\n        </div>\n      </section>\n    </MasterBlock>\n\n    <MasterBlock theme=\"shadow\">\n      <div class=\"container\" id=\"preguntas\">\n        <div class=\"container__header\">\n          <h2>Preguntas frecuentes</h2>\n        </div>\n        <Block theme=\"clear\">\n          <Block\n            @click=\"toggleFaq(faq.id)\"\n            theme=\"off-white\"\n            class=\"faq-container\"\n            v-for=\"faq in faqList\"\n            :key=\"faq.id\"\n          >\n            <div class=\"faq__question\">\n              <h4>{{ faq.question }}</h4>\n              <span v-if=\"!openFaqs.includes(faq.id)\">\n                <img src=\"@img/icons/collapse-open.svg\" alt=\"Capítulo expandido\" />\n              </span>\n              <span v-else>\n                <img src=\"@img/icons/collapse-close.svg\" alt=\"Capítulo cerrado\" />\n              </span>\n            </div>\n            <div class=\"faq__answer\" v-if=\"openFaqs.includes(faq.id)\">\n              <div v-html=\"faq.answer\" />\n            </div>\n          </Block>\n        </Block>\n      </div>\n    </MasterBlock>\n\n    <MasterBlock theme=\"off-white\">\n      <section class=\"container\">\n        <div class=\"container__header\">\n          <h2>¿QUE DICEN NUESTROS ALUMNOS?</h2>\n        </div>\n        <Reviews :reviews=\"reviews\" show-subject />\n      </section>\n    </MasterBlock>\n  </MainLayout>\n</template>\n\n<style scoped lang=\"scss\">\n@use \"@/styles/settings/vars\";\n\n.video-banner-container {\n  height: calc(90vh - 60px);\n  overflow: hidden;\n}\n\n.video-banner {\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n}\n\n.video-class {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.container {\n  margin: 0 auto;\n  position: relative;\n}\n\n.video-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 5;\n}\n\n@media only screen and (max-width: 768px) {\n  .video-banner-container {\n    height: calc(80vh - 60px);\n  }\n}\n\n.content-overlay {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  text-align: left;\n  z-index: 10;\n  padding: 0 1em;\n\n  h1,\n  h2 {\n    max-width: 800px;\n  }\n\n  h2 {\n    text-transform: none;\n  }\n}\n\n.switch-courses {\n  margin-bottom: 2em;\n}\n\n.subject-more {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 1em;\n  min-width: 600px;\n  max-width: 800px;\n\n  @media (max-width: 600px) {\n    min-width: 85%;\n    max-width: 85%;\n    text-align: center;\n    p {\n      margin-bottom: 0.5em;\n    }\n  }\n\n  p {\n    font-weight: bold;\n    text-transform: uppercase;\n  }\n}\n\n.specialization-container {\n  .specialization {\n    display: flex;\n    flex-direction: column;\n    min-width: 25%;\n    justify-content: space-between;\n    background-color: #1b1d22;\n    gap: 1em;\n    cursor: pointer;\n\n    @media (width < 600px) {\n      max-width: 100%;\n      min-width: 70%;\n    }\n\n    p {\n      margin-bottom: 0;\n    }\n\n    .specialization__img {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: 200px;\n      overflow: hidden;\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n    }\n\n    .specialization__info {\n      h3 {\n        text-transform: uppercase;\n        overflow-wrap: break-word;\n      }\n\n      p {\n        color: vars.$smoke;\n      }\n    }\n  }\n}\n\n.tree-explorer {\n  background-image: url(\"../assets/img/tree-background.svg\");\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n\n  @media (width < 600px) {\n  }\n\n  &__heading {\n    position: absolute;\n    top: 2em;\n\n    @media (width < 600px) {\n      top: 0;\n      position: inherit;\n      width: inherit;\n    }\n  }\n\n  &__img {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    img {\n      width: 110%;\n      height: auto;\n\n      @media (width < 1024px) {\n        width: 100%;\n      }\n    }\n  }\n\n  &__card {\n    position: absolute;\n    max-width: 280px;\n    margin-bottom: 0;\n    bottom: 2em;\n\n    @media (width < 1024px) {\n      bottom: 0;\n      position: inherit;\n    }\n  }\n}\n\n.perks-container {\n  .perk-item {\n    &__text {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n\n      h3 {\n        flex-grow: 1;\n        text-transform: uppercase;\n      }\n\n      p {\n        margin: 0;\n        align-self: flex-end;\n      }\n    }\n\n    img {\n      max-width: 100%;\n      margin: 0 auto 1em;\n    }\n  }\n}\n\n#certificate-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n\n  h2 {\n    margin-bottom: 0;\n    font-size: 44px;\n\n    @media (max-width: 1024px) {\n      font-size: 32px;\n    }\n\n    @media (max-width: 768px) {\n      font-size: 24px;\n    }\n\n    @media (max-width: 600px) {\n      font-size: 20px;\n    }\n  }\n\n  .pill {\n    padding: 0.5em;\n\n    span {\n      font-size: 44px;\n      line-height: 1;\n\n      @media (max-width: 1024px) {\n        font-size: 32px;\n      }\n\n      @media (max-width: 768px) {\n        font-size: 24px;\n      }\n\n      @media (max-width: 600px) {\n        font-size: 20px;\n      }\n    }\n  }\n}\n\n.certificate {\n  padding-top: 1em;\n  display: grid;\n  grid-template-columns: 2.5fr 1fr;\n  gap: 1em;\n\n  @media (width < 1024px) {\n    grid-template-columns: 1fr;\n  }\n\n  &__img {\n    img {\n      width: 100%;\n    }\n  }\n\n  &__text {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    h2 {\n      margin-bottom: 0;\n    }\n\n    p {\n      margin-bottom: 0;\n    }\n  }\n}\n\n.faq-container {\n  .faq__question {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n\n    h4 {\n      margin: 0;\n      text-transform: uppercase;\n    }\n\n    img {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  .faq__answer {\n    padding-top: 1em;\n\n    :deep(ul) {\n      margin-bottom: 0;\n    }\n\n    :deep(li:not(:last-child)) {\n      margin-bottom: 0.5em;\n    }\n\n    :deep(p:first-child) {\n      margin-top: 0;\n    }\n\n    :deep(p:last-child) {\n      margin-bottom: 0;\n    }\n  }\n}\n\n.pricing {\n  &__perks {\n    margin-top: 2em;\n\n    ul {\n      margin-bottom: 0;\n    }\n  }\n}\n\n.packs {\n  &__more {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    h3 {\n      margin-bottom: 0;\n    }\n\n    .btn-action--generic {\n      margin-top: 1em;\n    }\n  }\n\n  &__cta {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 2em;\n  }\n}\n\n.specialization-modal {\n  display: flex;\n  flex-direction: column;\n\n  .modal-content {\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 1em;\n\n    @media (max-width: 1024px) {\n      grid-template-columns: 1fr;\n      gap: 1em;\n    }\n\n    .spec-image {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: max-content;\n\n      img {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        height: 240px;\n        overflow: hidden;\n      }\n    }\n\n    .spec-info {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n    }\n  }\n}\n\n.method_item {\n  h3 {\n    margin: 2em 0 0 0;\n  }\n}\n\n// Animation\n\n/* Nueva clase .item para agrupar cada div y su texto */\n.item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Estilos comunes para ani_a, ani_b y ani_c */\n#ani_a,\n#ani_b,\n#ani_c {\n  position: relative;\n  width: 300px; /* Mismo ancho para todos */\n  height: 450px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* Estilos específicos para ani_a */\n#ani_a_1 {\n  animation: rotateSlow 10s ease-in-out infinite alternate;\n  width: 70%;\n}\n\n/* Animación para ani_a */\n@keyframes rotateSlow {\n  0% {\n    transform: rotate(0deg) translateY(0);\n  }\n  50% {\n    transform: rotate(6deg) translateY(-20px);\n  }\n  100% {\n    transform: rotate(-15deg) translateY(0);\n  }\n}\n\n/* Estilos comunes para los objetos dentro de ani_b y ani_c */\n#ani_b object,\n#ani_c object {\n  position: absolute;\n}\n\n/* Estilos específicos para ani_b */\n\n/* Posiciones y tamaños para elementos de ani_b */\n#ani_b_1 {\n  width: 50%;\n  top: 0;\n  left: 51px;\n  transform-origin: top left;\n  animation: rotacionBrazo 4s ease-in-out alternate infinite;\n}\n\n#ani_b_2 {\n  width: 35%;\n  top: 240px;\n  left: 190px;\n  animation: flotacionSutil 4s alternate infinite;\n}\n\n#ani_b_3 {\n  width: 60%;\n  top: 90px;\n  left: 0;\n  transform-origin: top right;\n  animation: rotacionCaja 4s ease-in-out alternate infinite;\n}\n\n#ani_b_4 {\n  width: 15%;\n  top: 212px;\n  left: 148px;\n  opacity: 0;\n  animation: fadeInAnimation 4s alternate infinite;\n}\n\n/* Animaciones para ani_b */\n@keyframes flotacionSutil {\n  0% {\n    transform: translate(0, 0);\n  }\n  20% {\n    transform: translate(2px, -2px);\n  }\n  60% {\n    transform: translate(-2px, 1px);\n  }\n  80%,\n  100% {\n    transform: translate(0, 0);\n  }\n}\n\n@keyframes fadeInAnimation {\n  0%,\n  80% {\n    opacity: 0;\n  }\n  85%,\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes rotacionCaja {\n  0% {\n    transform: rotate(-4deg) translateY(-30px) translateX(19px);\n  }\n  75%,\n  100% {\n    transform: rotate(-19deg) translateY(-6px) translateX(0px);\n  }\n}\n\n@keyframes rotacionBrazo {\n  0% {\n    transform: rotate(-10deg);\n  }\n  75%,\n  100% {\n    transform: rotate(2deg);\n  }\n}\n\n/* Posiciones y tamaños para elementos de ani_c */\n#ani_c_1 {\n  width: 50%; /* La ciudad ocupa la mitad del ancho */\n  top: 0;\n  left: 30%;\n}\n\n#ani_c_2 {\n  width: 35%;\n  top: 217px;\n  left: 138px;\n  transform-origin: top right;\n  animation: ufoFloatRay 7s ease-in-out infinite;\n}\n\n#ani_c_3 {\n  width: 15%;\n  top: 200px;\n  left: 220px;\n  animation: ufoFloat 7s ease-in-out infinite;\n}\n\n#ani_c_4 {\n  width: 7%;\n  top: 50px;\n  left: 70px;\n  animation: ufoFloatReverse 5s ease-in-out infinite;\n}\n\n#ani_c_5 {\n  width: 60%;\n  top: 295px;\n  left: 20px;\n}\n\n#ani_c_6 {\n  width: 16%;\n  top: 60px;\n  left: 81px;\n  opacity: 1;\n  transform-origin: top left;\n  animation: ufoFloatReverseRay 5s ease-in-out infinite;\n}\n\n/* Animaciones para ani_c */\n@keyframes ufoFloat {\n  0%,\n  100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-15px);\n  }\n}\n\n@keyframes ufoFloatReverse {\n  0%,\n  100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(15px);\n  }\n}\n\n@keyframes ufoFloatRay {\n  0%,\n  100% {\n    transform: translateY(0) rotate(-10deg);\n  }\n  0%,\n  10% {\n    opacity: 0;\n  }\n  20%,\n  80% {\n    opacity: 1;\n  }\n  90%,\n  100% {\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(-15px);\n  }\n}\n\n@keyframes ufoFloatReverseRay {\n  0%,\n  100% {\n    transform: translateY(0) rotate(-10deg);\n  }\n  0%,\n  10% {\n    opacity: 0;\n  }\n  20%,\n  80% {\n    opacity: 1;\n  }\n  90%,\n  100% {\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(15px);\n  }\n}\n\n@keyframes rayFadeIn {\n  0%,\n  70% {\n    opacity: 0;\n  }\n  75%,\n  100% {\n    opacity: 1;\n  }\n}\n</style>\n"],"names":["_imports_0","_imports_1","_imports_2","_imports_3","_imports_4","animate","ref","emits","__emit","handleClick","previewVideo","fullScreenVideo","props","__props","isFullScreenVideo","currentCourses","isShowedTop","showSpecialization","currentSpecialization","blockContainerRef","showFullVideo","faqList","openFaqs","toggleFaq","id","index","changeSpecialization","specialization"],"mappings":"snCAAA,MAAeA,EAAA,+CCAAC,EAAA,sDCAAC,EAAA,qDCAAC,GAAA,0DCAAC,GAAA,gSCMT,MAAAC,EAAUC,EAAI,EAAK,EAMnBC,EAAQC,EAGRC,EAAc,IAAM,CACxBJ,EAAQ,MAAQ,GAChB,WAAW,IAAM,CACfA,EAAQ,MAAQ,GAChBE,EAAM,OAAO,GACZ,GAAG,CAAA,svJCgCFG,GAAe,kEACfC,GAAkB,kMAHxB,MAAMC,EAAQC,EAKRC,EAAoBR,EAAI,EAAK,EAC7BS,EAAiBT,EAAIM,EAAM,WAAW,EACtCI,EAAcV,EAAI,EAAK,EACvBW,EAAqBX,EAAI,EAAK,EAC9BY,EAAwBZ,EAA2B,IAAI,EACvDa,EAAoBb,EAAI,IAAI,EAE5Bc,EAAgB,IAAM,CAC1BN,EAAkB,MAAQ,EAAA,EAGtBO,EAAU,CACd,CACE,GAAI,EACJ,SAAU,6CACV,OACE,kSACJ,EACA,CACE,GAAI,EACJ,SAAU,gDACV,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAMV,EACA,CACE,GAAI,EACJ,SAAU,mCACV,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQV,EACA,CACE,GAAI,EACJ,SAAU,kCACV,OACE,gPACJ,EACA,CACE,GAAI,EACJ,SAAU,iCACV,OACE,yWACJ,EACA,CACE,GAAI,EACJ,SAAU,uEACV,OACE,mOACJ,EACA,CACE,GAAI,EACJ,SAAU,uDACV,OACE,iOACJ,EACA,CACE,GAAI,EACJ,SAAU,qBACV,OAAQ,qEACV,CAAA,EAGIC,EAAWhB,EAAc,CAAA,CAAE,EAE3BiB,EAAaC,GAAe,CAChC,MAAMC,EAAQH,EAAS,MAAM,QAAQE,CAAE,EACvC,GAAIC,IAAU,GAAI,CACPH,EAAA,MAAM,KAAKE,CAAE,EACtB,MACF,CACSF,EAAA,MAAM,OAAOG,EAAO,CAAC,CAAA,EAG1BC,EAAwBC,GAAmC,CAC/DV,EAAmB,MAAQ,GAC3BC,EAAsB,MAAQS,CAAA"}