:root {
      --primary-color: #0d6efd;
      --success-color: #25d366;
      --dark-color: #1a1a2e;
      --light-bg: #f8f9fa;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      overflow-x: hidden;
    }

    .hero-section {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
      background-size: cover;
      opacity: 0.3;
    }

    .hero-title {
      font-size: 2.8rem;
      font-weight: 800;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
      animation: fadeInDown 1s ease-out;
    }

    .hero-subtitle {
      font-size: 1.5rem;
      font-weight: 300;
      margin-bottom: 30px;
      animation: fadeInUp 1s ease-out 0.3s both;
    }

    .hero-text {
      font-size: 1.1rem;
      line-height: 1.8;
      animation: fadeIn 1s ease-out 0.6s both;
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .form-card {
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      padding: 30px;
      transform: translateY(0);
      transition: transform 0.3s ease;
      border: 2px solid rgba(255,255,255,0.8);
    }

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

    .form-card h3 {
      color: var(--dark-color);
      font-weight: 700;
      margin-bottom: 25px;
    }

    .product-image {
      max-height: 350px;
      width: auto;
      filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }

    
.problems-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

    .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 60px;
      color: var(--dark-color);
      position: relative;
      padding-bottom: 20px;
    }





.problem-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

    .problem-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    }

    .problem-icon {
      font-size: 3rem;
      margin-bottom: 20px;
      display: block;
    }

    .problem-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: var(--dark-color);
    }

  .problem-description,
.solution-text {
  text-align: justify;       /* Justifica el texto */
  text-justify: inter-word;  /* Distribuye los espacios entre palabras */
  margin: 0 auto;            /* Centra el bloque dentro del contenedor */
  max-width: 90%;            /* Evita que se vea muy ancho */
  line-height: 1.6;          /* Mejora la legibilidad */
}

.problem-title {
  text-align: center;        /* Centra el título */
  font-weight: 700;
  margin-bottom: 15px;
}

.solution-text strong {
  display: block;
  text-align: center;        /* Centra el texto fuerte (frase inicial) */
  margin-bottom: 5px;
}
.solution-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00538f;
  color: white;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 20px;
  text-align: center;
  width: fit-content;
  margin: 25px auto 10px auto; /* centrado horizontal y separación uniforme */
  min-width: 180px; /* tamaño uniforme para todas */
}


    .form-control, .form-select {
      border-radius: 10px;
      border: 2px solid #e0e0e0;
      padding: 12px 15px;
      transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    .cta-section {
      background: linear-gradient(135deg, #68d4ff 0%, #2abfe1 100%);
      padding: 5px 0;
      color: white;
      text-align: center;
    }

    .cta-button {
      font-size: 1.3rem;
      padding: 18px 50px;
      border-radius: 50px;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .badge-experience {
      background: rgba(255,255,255,0.2);
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 0.95rem;
      display: inline-block;
      margin-bottom: 20px;
    }

    @media (max-width: 768px) {
      .hero-title {
        font-size: 2rem;
      }
      .hero-subtitle {
        font-size: 1.2rem;
      }
      .section-title {
        font-size: 1.8rem;
      }
      .product-image {
        max-height: 250px;
      }
    }






.problem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.ts-logo {
  height: 40px;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn svg {
 
  transition: transform 0.2s ease;
}

.icon-btn:hover svg {
  transform: scale(1.15);
}

.icon-search,
.icon-cash,
.icon-watch {
  width: 28px;
  height: 28px;
  fill: currentColor;
  color: #333;
  transition: color 0.2s ease;
}

.icon-btn:hover svg {
  color: #0b7;
}

/* Ajustes responsive */
@media (max-width: 768px) {
  .problem-header {
    min-height: 50px;
    padding: 0 6px;
  }

  .ts-logo {
    max-width: 70px;
  }

  .icon-search,
  .icon-cash,
  .icon-watch {
    width: 24px;
    height: 24px;
  }
}








/* SVG lupa — escala con el contenedor */
.icon-search {
  width: 28px;
  height: 28px;
  fill: currentColor; /* hereda color del texto */
  color: #333;         /* color por defecto */
}

/* Efecto hover (opcional) */
.icon-btn:hover .icon-search {
  color: #0b7; /* ajusta a tu paleta */
}

/* Para pantallas pequeñas: reducir logo si hace falta */
@media (max-width: 480px) {
  .ts-logo { max-width: 64px; }
  .icon-search { width: 24px; height: 24px; }
}

/* SVG lupa — escala con el contenedor */
.icon-watch {
  width: 28px;
  height: 28px;
  fill: currentColor; /* hereda color del texto */
  color: #333;         /* color por defecto */
}

/* Efecto hover (opcional) */
.icon-btn:hover .icon-watch {
  color: #0b7; /* ajusta a tu paleta */
}

/* Para pantallas pequeñas: reducir logo si hace falta */
@media (max-width: 480px) {
  .ts-logo { max-width: 64px; }
  .icon-watch { width: 24px; height: 24px; }
}
/* SVG lupa — escala con el contenedor */
.icon-cash {
  width: 28px;
  height: 28px;
  fill: currentColor; /* hereda color del texto */
  color: #333;         /* color por defecto */
}

/* Efecto hover (opcional) */
.icon-btn:hover .icon-cash {
  color: #0b7; /* ajusta a tu paleta */
}

/* Para pantallas pequeñas: reducir logo si hace falta */
@media (max-width: 480px) {
  .ts-logo { max-width: 64px; }
  .icon-cash { width: 24px; height: 24px; }
}



.problem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 12px;
}

.ts-logo {
  max-width: 80px;
  height: auto;
  display: block;
}

.icon-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.icon-search {
  width: 28px;
  height: 28px;
  fill: currentColor;
  color: #333;
}

.icon-btn:hover .icon-search {
  color: #0b7;
}

@media (max-width: 480px) {
  .ts-logo { max-width: 64px; }
  .icon-search { width: 24px; height: 24px; }
}



.icon-cash {
  width: 42px;
  height: 42px;
  fill: currentColor;
  color: #333;
}
.icon-btn:hover .icon-cash {
  color: #0b7;
}
@media (max-width: 480px) {
  .ts-logo { max-width: 64px; }
  .icon-cash { width: 24px; height: 24px; }
}


.icon-watch {
  width: 36px;
  height: 36px;
  fill: currentColor;
  color: #333;
}

.icon-btn:hover .icon-watch {
  color: #0b7;
}

@media (max-width: 480px) {
  .ts-logo { max-width: 64px; }
  .icon-watch { width: 24px; height: 24px; }
}