/* --- ESTILOS GENERALES Y RESET --- */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

  body {
      margin: 0;
      font-family: 'Montserrat', sans-serif;
      background-color: #f0f0f0;
  }

  .hero-container {
      width: 100%;
      text-align: center;
  }

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

  /* --- PARTE 1: FRANJA SUPERIOR CON LOGO --- */
  .hero-part-1 {
      background-color: #eb628C;
      padding: 10px 0;
  }

  .hero-part-1 .logo {
      max-width: 250px;
  }

  /* --- PARTE 2: SECCIÓN PRINCIPAL --- */
  .hero-part-2 {
      background-color: #f42967;
      color: white;
      padding: 50px 20px;
  }

  .hero-part-2 h1 {
      font-size: 2.8em;
      font-weight: 900;
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .hero-part-2 h2 {
      font-size: 1.5em;
      font-weight: 400;
      margin: 10px 0 40px 0;
  }

  .content-columns {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
  }

  .column-left {
      flex: 1;
      max-width: 400px;
  }

  .column-left .logo {
      max-width: 150px;
      margin-bottom: 20px;
  }

  .column-right {
      flex: 1;
      max-width: 500px;
      text-align: left;
  }

  .column-right p {
      font-size: 1.2em;
      line-height: 1.6;
  }

  .benefits-list {
      list-style: none;
      padding: 0;
      margin: 20px 0 30px 0;
  }

  .benefits-list li {
      font-size: 1.1em;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
  }

  .benefits-list .check-icon {
      margin-right: 15px;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
  }

  .cta-button {
      background-color: white;
      color: #f42967;
      border: none;
      border-radius: 50px;
      padding: 18px 40px;
      font-size: 1.2em;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-decoration: none;
  }

  .cta-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }

  /* --- PARTE 3: FRANJA INFERIOR CON BENEFICIOS --- */
  .hero-part-3 {
      background-color: #eb628C;
      padding: 40px 15px;
      /* Menos padding lateral para móvil */
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: nowrap;
      /* Evita que los items se rompan en varias líneas en móvil */
      gap: 15px;
      /* Reducimos el espacio entre items */
  }

  .feature-item {
      display: flex;
      flex-direction: column;
      /* Cambia a columna por defecto */
      align-items: center;
      color: white;
      text-align: center;
      flex: 1;
      /* Permite que los 3 items ocupen el mismo espacio */
      max-width: 350px;
  }

  .feature-icon-wrapper {
      width: 60px;
      /* Reducimos el tamaño en móvil */
      height: 60px;
      border-radius: 50%;
      border: 2px solid white;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      margin-bottom: 15px;
  }

  .feature-item svg {
      width: 65%;
      height: 65%;
      fill: currentColor;
  }

  .feature-text h3 {
      font-size: 1em;
      margin: 0 0 5px 0;
      font-weight: 700;
  }

  .feature-text p {
      font-size: 0.9em;
      margin: 0;
      font-weight: 400;
      line-height: 1.4;
  }

  /* --- RESPONSIVE DESIGN --- */
  @media (max-width: 768px) {
      .hero-part-2 h1 {
          font-size: 1.8em;
      }

      .hero-part-2 h2 {
          font-size: 1em;
      }

      .content-columns {
          flex-direction: column;
      }

      /* INVERTIR COLUMNAS */
      .column-right {
          order: 1;
          /* La columna derecha ahora es la primera */
          text-align: center;
      }

      .column-left {
          order: 2;
          /* La columna izquierda ahora es la segunda */
      }

      /* OCULTAR LOGO SECUNDARIO */
      .column-left .logo {
          display: none;
      }

      .benefits-list li {
          justify-content: flex-start;
          text-align: left;
      }
      .cta-button {
          padding: 10px;
          font-size: 16px;
      }
      .hero-part-2 p{
          font: 14px;
      }
  }

  /* Estilos para desktop en la sección 3 */
  @media (min-width: 769px) {
      .hero-part-3 {
          gap: 30px;
          padding: 40px 20px;
      }

      .feature-item {
          flex-direction: row;
          /* Vuelve a fila en desktop */
          text-align: left;
      }

      .feature-icon-wrapper {
          width: 80px;
          /* Tamaño original en desktop */
          height: 80px;
          margin-bottom: 0;
          margin-right: 20px;
      }

      .feature-text h3 {
          font-size: 1.1em;
      }
  }

  /* ============================================= */
  /* === ESTILOS PARA LA SEGUNDA SECCIÓN NUEVA === */
  /* ============================================= */

  .section-2-wrapper {
      background-color: #ffffff;
      padding: 60px 20px;
  }

  /* --- Sub-sección 1: ¿Qué es el Reto? --- */
  .challenge-intro {
      /*background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 245, 1) 100%);*/
      padding: 50px;
      border-radius: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto 60px auto;
  }

  .challenge-intro-image {
      flex: 1;
      min-width: 300px;
  }

  .challenge-intro-text {
      flex: 1.5;
      min-width: 300px;
  }

  .section-title {
      font-size: 2.5em;
      font-weight: 600;
      color: #f42967;
      /* Rosa oscuro */
      margin-bottom: 25px;
      text-align: center;
  }

  .text-box {
      background-color: #ffffff;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      max-width: 500px;
      margin: 0 auto;
  }

  .text-box p {
      text-align: center;
      font-size: 1.1em;
      line-height: 1.7;
      margin: 0 0 15px 0;
      color: #555;
  }

  .text-box p:last-child {
      margin-bottom: 0;
  }

  /* --- Sub-sección 2: Nuestros Pilares --- */
  .pillars-section {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
  }

  .pillars-section .section-title {
      text-align: center;
      margin-bottom: 40px;
  }

  .pillars-grid-wrapper {
      display: flex;
      flex-direction: column;
      gap: 50px;
  }

  .pillars-main-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      order: 1;
      /* Van primero */
  }

  .pillar-item {
      text-align: center;
  }

  .pillar-icon {
      width: 70px;
      height: 70px;
      margin-bottom: 15px;
      color: #f42967;
      /* Color rosa para SVG */
  }

  .pillar-item h3 {
      font-size: 1.4em;
      font-weight: 700;
      color: #f42967;
      /* Color rosa para títulos */
      margin: 0 0 10px 0;
  }

  .pillar-item p {
      font-size: 1em;
      line-height: 1.6;
      color: #666;
      margin: 0;
  }

  

  /* --- Responsive para la Segunda Sección --- */
  @media (max-width: 992px) {
      .pillars-main-features {
          grid-template-columns: 1fr;
          /* Un pilar por fila */
          order: 2;
          /* Aparece después del pilar "Tú" y la app */
      }

  }

  @media (max-width: 768px) {
      .challenge-intro {
          padding: 20px;
          flex-direction: column;
      }

      .section-title {
          font-size: 2em;
          text-align: center;
      }

      .pillars-grid-wrapper {
          flex-direction: column;
      }

      .pillars-main-features {
          order: 2;
      }

      .pillars-secondary-feature {
          order: 1;
          /* App y "Tú" van primero */
      }

      .app-image-container {
          order: 1;
          /* Imagen de la App primero */
          margin-bottom: 30px;
      }

      .pillars-main-features,
      .you-feature {
          order: 2;
          /* Los 4 features juntos, uno debajo del otro */
      }

      .text-box p {
          font-size: 13px;
      }
  }


  /* ============================================= */
  /* === SECCIÓN 3: QUÉ ENCONTRARÁS ================ */
  /* ============================================= */
  .what-you-get-section {
      padding: 60px 20px;
      background-color: #f8f9fa;
      /* Un gris muy claro para diferenciar */
  }

  .what-you-get-section .container {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
  }

  .what-you-get-section .section-title {
      text-align: center;
      margin-bottom: 50px;
  }

  /* --- Layout de Escritorio con CSS Grid --- */
  .features-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr 1fr;
      /* 3 columnas: izq, centro, der */
      grid-template-rows: auto auto;
      /* 2 filas para los textos laterales */
      gap: 30px;
      align-items: center;
  }

  .feature-box {
      text-align: left;
      padding: 20px;
  }

  .feature-box h3 {
      font-size: 1.4em;
      color: #f42967;
      /* Color rosa */
      margin: 0 0 10px 0;
  }

  .feature-box p {
      font-size: 1em;
      line-height: 1.6;
      color: #555;
      margin: 0;
  }

  /* Posicionamiento explícito de cada elemento en la grilla */
  .feature-box-1 {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      text-align: right;
  }

  .feature-box-2 {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      text-align: right;
  }

  .feature-image {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
  }
  .feature-image img{
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

  }

  .feature-box-3 {
      grid-column: 3 / 4;
      grid-row: 1 / 2;
  }

  .feature-box-4 {
      grid-column: 3 / 4;
      grid-row: 2 / 3;
  }

  .feature-box-5 {
      grid-column: 1 / 4;
      /* El texto inferior ocupa las 3 columnas */
      grid-row: 3 / 4;
      text-align: center;
      max-width: 800px;
      margin: 20px auto 0 auto;
  }

  /* --- Responsive para la Sección 3 --- */
  @media (max-width: 992px) {
      .features-grid {
          display: flex;
          flex-direction: column;
          /* Cambiamos a Flexbox en móvil */
          gap: 25px;
      }

      .feature-box,
      .feature-box-1,
      .feature-box-2 {
          text-align: center;
          /* Centramos todo el texto en móvil */
      }

      /* Reordenamos los elementos para la vista móvil */
      .feature-image {
          order: 1;
      }

      .feature-box-1 {
          order: 2;
      }

      .feature-box-2 {
          order: 3;
      }

      .feature-box-3 {
          order: 4;
      }

      .feature-box-4 {
          order: 5;
      }

      .feature-box-5 {
          order: 6;
      }
  }



  /* ============================================= */
  /* === SECCIÓN 4: ÚNETE AL RETO ================== */
  /* ============================================= */
  .join-section {
      padding: 80px 20px;
      background-color: #ffffff;
      position: relative;
      /* Necesario para las líneas delimitadoras */
  }

  /* Línea rosa superior */
  .join-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      max-width: 400px;
      height: 4px;
      background-color: #eb628C;
      /* Rosa claro */
      border-radius: 0 0 10px 10px;
  }

  /* Línea rosa inferior */
  .join-section::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      max-width: 400px;
      height: 4px;
      background-color: #eb628C;
      /* Rosa claro */
      border-radius: 10px 10px 0 0;
  }

  .join-section .container {
      max-width: 1200px;
      margin: 0 auto;
  }

  .join-section .section-title {
      text-align: center;
      margin-bottom: 50px;
  }

  .join-content-wrapper {
      display: flex;
      align-items: center;
      gap: 50px;
  }

  .join-image {
      flex: 1;
      min-width: 300px;
  }

  .join-text {
      flex: 1.2;
      /* Damos un poco más de espacio al texto */
      min-width: 300px;
  }

  .join-text h3 {
      font-size: 1.3em;
      font-weight: 400;
      line-height: 1.6;
      color: #333;
      margin: 0 0 30px 0;
      font-style: italic;
  }

  .guarantee-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .guarantee-list li {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 20px;
      font-size: 1.05em;
      line-height: 1.7;
      color: #555;
  }

  .guarantee-list .list-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background-color: #f42967;
      /* Rosa oscuro */
      color: white;
      font-weight: 700;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
  }

  /* --- Responsive para la Sección 4 --- */
  @media (max-width: 768px) {
      .join-content-wrapper {
          flex-direction: column;
          /* Apila imagen y texto */
          gap: 30px;
      }

      .join-text h3 {
          text-align: center;
      }
  }

  /* --- Bloque de Pago Seguro --- */
  .secure-payment-block {
      margin-top: 40px;
      /* Espacio desde la lista superior */
      text-align: center;
      /* Centra el título y la imagen */
  }

  .secure-payment-block h3 {
      color: #f42967;
      /* Color rosa */
      font-size: 1.6em;
      font-weight: 700;
      margin-bottom: 15px;
  }

  .secure-payment-block img {
      max-width: 350px;
      /* Ajusta el tamaño máximo de la imagen de pagos */
      width: 100%;
  }

  /* ============================================= */
  /* === SECCIÓN 5: GALERÍA DE IMÁGENES =========== */
  /* ============================================= */
  .image-gallery-section {
      padding: 60px 20px;
      background-color: #f8f9fa;
      /* Un gris muy claro para diferenciar */
  }

  .image-gallery-section .container {
      max-width: 1200px;
      margin: 0 auto;
  }

  .image-gallery-section .section-title {
      text-align: center;
      margin-bottom: 50px;
  }

  .gallery-grid {
      display: grid;
      /* Móvil: 2 columnas por defecto */
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
  }

  .gallery-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Asegura que la imagen cubra el espacio sin deformarse */

      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .gallery-image:hover {
      transform: translateY(-5px) scale(1.03);

  }

  /* --- Responsive para la Galería (Escritorio) --- */
  @media (min-width: 769px) {
      .gallery-grid {
          /* Escritorio: 4 columnas */
          grid-template-columns: repeat(4, 1fr);
          gap: 30px;
      }
  }

  /* ============================================= */
  /* === SECCIÓN 6: TESTIMONIOS ================== */
  /* ============================================= */
  .testimonials-section {
      padding: 60px 20px;
      background-color: #ffffff;
  }

  .testimonials-section .section-title {
      text-align: center;
      margin-bottom: 50px;
  }

  .testimonial-desktop {
      max-width: 100%;
      margin: 0 auto;
      display: block;
  }


  /* ============================================= */
  /* === SECCIÓN 7: CONTACTO POR WHATSAPP ========= */
  /* ============================================= */
  .whatsapp-cta-section {
      background: linear-gradient(135deg, #f42967 0%, #eb628C 100%);
      color: white;
      padding: 80px 20px;
      text-align: center;
  }

  .whatsapp-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 20px;
  }

  .whatsapp-cta-section h2 {
      font-size: 2.5em;
      font-weight: 900;
      margin: 0 0 15px 0;
  }

  .whatsapp-cta-section p {
      font-size: 1.2em;
      line-height: 1.7;
      max-width: 700px;
      margin: 0 auto 40px auto;
      opacity: 0.95;
  }

  .whatsapp-button {
      display: inline-block;
      background-color: white;
      color: #f42967;
      font-size: 1.2em;
      font-weight: 700;
      text-decoration: none;
      padding: 18px 45px;
      border-radius: 50px;
      text-transform: uppercase;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .whatsapp-button:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  /* --- Responsive para la Sección 7 --- */
  @media (max-width: 768px) {
      .whatsapp-cta-section h2 {
          font-size: 2em;
      }

      .whatsapp-cta-section p {
          font-size: 1.1em;
      }
  }


  /* ============================================= */
  /* === SECCIÓN 8: PREGUNTAS FRECUENTES (FAQ) ==== */
  /* ============================================= */
  .faq-section {
      padding: 80px 20px;
      background-color: #f8f9fa;
  }

  .faq-section .section-title {
      text-align: center;
      margin-bottom: 50px;
  }

  .faq-accordion {
      max-width: 800px;
      margin: 0 auto;
  }

  .faq-item {
      background-color: #ffffff;
      margin-bottom: 10px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      overflow: hidden;
  }

  .faq-question {
      width: 100%;
      background-color: transparent;
      border: none;
      padding: 20px 25px;
      font-family: 'Montserrat', sans-serif;
      font-size: 1.1em;
      font-weight: 700;
      color: #333;
      text-align: left;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background-color 0.3s ease;
  }

  .faq-question:hover {
      background-color: #fdf2f5;
  }

  .faq-question::after {
      content: '+';
      font-size: 1.8em;
      color: #f42967;
      transition: transform 0.3s ease;
  }

  .faq-question.active::after {
      content: '−';
      transform: rotate(180deg);
  }

  .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-out;
      background-color: #ffffff;
  }

  .faq-answer-content {
      padding: 0 25px 25px 25px;
      font-size: 1em;
      line-height: 1.7;
      color: #555;
  }


  /* ============================================= */
  /* === FOOTER ================================== */
  /* ============================================= */
  .site-footer {
      background-color: #2c2c2c;
      color: #a0a0a0;
      padding: 40px 20px;
      text-align: center;
  }

  .footer-content {
      margin-bottom: 20px;
  }

  .footer-logo {
      max-width: 150px;
      margin-bottom: 20px;
      filter: brightness(0) invert(1);
      /* Pasa el logo a blanco */
  }

  .social-icons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
  }

  .social-icons a {
      color: #ffffff;
      width: 24px;
      /* Ajuste de tamaño */
      height: 24px;
      display: inline-block;
      transition: color 0.3s ease, transform 0.3s ease;
  }

  .social-icons a:hover {
      color: #eb628C;
      transform: translateY(-3px);
  }

  .footer-bottom {
      border-top: 1px solid #444;
      padding-top: 20px;
      font-size: 0.9em;
  }

  .footer-bottom p {
      margin: 5px 0;
  }

  .footer-bottom a {
      color: #a0a0a0;
      text-decoration: none;
      transition: color 0.3s ease;
  }

  .footer-bottom a:hover {
      color: #ffffff;
  }