body {
        background-color: #000000;
        color: #ffffff;
    }

    .story-section p {
        color: #ffffff;
    }

    h2 {
        color: #ffffff;
    }

    .impact-section {
        background: linear-gradient(145deg, #222222 0%, #333333 100%);
    }

    .stat-card {
        background: #2a2a2a;
        color: #ffffff;
    }

    .stat-text {
        color: #cccccc;
    }

    .achievement-highlight {
        background: #2a2a2a;
        color: #ffffff;
    }

    .highlight-content p {
        color: #cccccc;
    }

    .mission-section p, 
    .method-section p {
        color: #ffffff;
    }

    .header {
      background-color: #000000;
      padding: 10px 0;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .logo {
      display: block;
      text-align: center;
      padding: 5px 0;
    }

    .logo img {
      max-height: 60px;
      width: auto;
      display: block;
      vertical-align: middle;
      filter: brightness(1.2);
      margin: 0 auto;
      opacity: 1;
      visibility: visible;
      z-index: 1001;
    }

    .header a {
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      font-family: 'Poppins', sans-serif;
      font-size: 16.38px;
      padding: 0 8px;
      transition: color 0.3s ease;
    }

    .header a:hover {
      color: #ff0000;
    }

    .header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      gap: 6px;
    }

    .header-logo {
      max-height: 60px;
      width: auto;
      display: block;
      margin: 0 auto;
      object-fit: contain;
      padding: 5px;
      filter: brightness(1);
    }

    /* Estilos para la sección de historia */
    .story-section {
      padding: 40px 0;
      max-width: 900px;
      margin: 0 auto;
    }

    .story-section p {
      font-size: 18px;
      line-height: 1.8;
      margin-bottom: 25px;
      text-align: justify;
    }

    /* Estilos para los títulos */
    h2 {
      font-size: 36px;
      margin-bottom: 40px;
      position: relative;
      padding-bottom: 15px;
    }

    h2:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background-color: #ff0000;
    }

    /* Estilos para la sección de impacto */
    .impact-section {
      padding: 60px 40px;
      border-radius: 20px;
      margin: 60px 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .impact-title {
      font-size: 32px;
      text-align: center;
      margin-bottom: 50px;
      font-weight: 600;
      position: relative;
    }

    .impact-title:after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #ff0000, #ff6666);
    }

    /* Estilos para las tarjetas de estadísticas */
    .stat-card {
      padding: 30px 20px;
      border-radius: 15px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin-bottom: 30px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }

    .stat-icon {
      font-size: 40px;
      color: #ff0000;
      margin-bottom: 20px;
    }

    .stat-number {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 10px;
      background: linear-gradient(90deg, #ff0000, #ff6666);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .stat-text {
      font-size: 16px;
      line-height: 1.4;
    }

    /* Estilos para el destacado */
    .achievement-highlight {
      padding: 30px;
      margin-top: 50px;
      position: relative;
      border-left: 5px solid #ff0000;
    }

    .highlight-content {
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .highlight-icon {
      font-size: 30px;
      color: #ff0000;
      flex-shrink: 0;
    }

    .highlight-content p {
      margin: 0;
      font-size: 16px;
      line-height: 1.6;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .impact-section {
        padding: 40px 20px;
      }

      .stat-card {
        margin-bottom: 20px;
      }

      .highlight-content {
        flex-direction: column;
        text-align: center;
      }

      .highlight-icon {
        margin-bottom: 15px;
      }
    }

    /* Estilos para las imágenes */
    .why-images-section {
      margin: 60px 0;
    }

    .why-image-container {
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
      border: 2px solid #ff0000;
    }

    .why-image-container:hover {
      transform: translateY(-5px);
      border-color: #ff6666;
    }

    .image-overlay {
      background: rgba(0,0,0,0.7);
      padding: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      transition: all 0.3s ease;
    }

    .image-overlay h3 {
      font-size: 18px;
      margin: 0;
    }

    /* Nuevo estilo para el contenedor de historia con imagen */
    .story-container {
      display: flex;
      align-items: flex-start;
      gap: 40px;
      margin: 40px 0;
      width: 105%;
      margin-left: -1%;
    }

    .story-image {
      flex: 0 0 30%;
      max-width: 30%;
    }

    .story-image img {
      width: 100%;
      height: auto;
    }

    .story-content {
      flex: 0 0 64%;
      max-width: 64%;
    }

    @media (max-width: 768px) {
      .story-container {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
      }
      
      .story-image,
      .story-content {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }

    /* Estilos para la sección principal */
    .single-page {
      background-color: #000000;
      padding: 40px 0;
    }

    .container[data-aos="fade-up"] {
      background-color: #000000;
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    /* Estilos para la tira de imágenes horizontal */
    .horizontal-images {
      width: 100%;
      overflow: hidden;
      margin: 40px 0;
    }

    .image-strip {
      display: flex;
      width: 100%;
    }

    .image-strip img {
      flex: 1;
      width: calc(100% / 6);
      height: 200px; /* Ajusta esta altura según necesites */
      object-fit: cover;
      display: block;
    }

    @media (max-width: 768px) {
      .image-strip {
        flex-wrap: wrap;
      }
      
      .image-strip img {
        width: calc(100% / 3);
        height: 150px;
      }
    }

    /* Estilos para la imagen de portada y texto superpuesto */
    .image-container {
      position: relative;
      width: 100%;
      margin: 40px 0;
    }

    .image-container img {
      width: 100%;
      height: auto;
      display: block;
    }

    .overlay-text {
      position: absolute;
      left: 50%;
      top: 90%;  /* Posicionado 40% más abajo del centro */
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .overlay-text span {
      color: white;
      font-size: 48px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      letter-spacing: 4px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    .overlay-text i {
      color: white;
      font-size: 36px;
      animation: bounce 2s infinite;
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-20px);
      }
      60% {
        transform: translateY(-10px);
      }
    }

    /* Ajuste para el contenido debajo del header fijo */
    .full-width-image {
      margin-top: 0px;  /* Espacio para el header fijo */
    }

    /* Contenedor del logo */
    .col-4.text-center {
      position: relative;
      z-index: 1002;
      background-color: transparent;
    }


    .portfolio-info {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
      }
  
      .portfolio-info h4 a {
        color: #ffffff;
      }
  
      .portfolio-info p {
        color: #cccccc;
      }
  
      .fill-btn {
        background-color: #ff0000;
        color: #ffffff;
      }
  
      .add-to-cart-btn {
        background-color: #000000;  /* Fondo negro */
        color: #ffffff;  /* Letra blanca */
        width: 160px;
        letter-spacing: 0.5px;
        border: 1px solid #ff0000;  /* Mantener el borde rojo */
      }
  
      /* Estilos para los botones */
      .project-btn {
          display: flex;
          flex-direction: row;
          gap: 10px;
          width: 100%;
          padding: 15px 0 0 0;  /* Quitamos padding lateral */
          justify-content: center;
          border-top: 1px solid #444444;  /* Línea separadora */
          margin-top: 10px;
      }
  
      .fill-btn, .add-to-cart-btn {
          padding: 10px 20px;
          border-radius: 5px;
          text-align: center;
          text-decoration: none;
          font-weight: 500;
          transition: all 0.3s ease;
          border: none;
          cursor: pointer;
          white-space: nowrap;
          font-size: 14px;
      }
  
      .fill-btn {
          background-color: #ff0000;
          color: white;
          width: 120px;
      }
  
      .add-to-cart-btn:hover {
          background-color: #333333;  /* Un negro más claro al pasar el mouse */
          color: #ffffff;  /* Mantener la letra blanca */
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
      }
  
      /* Estilo para el contenedor de cada item */
      .portfolio-wrap {
          background: linear-gradient(180deg,
              #ff0000 0%,          /* Rojo en la parte superior */
              #e60000 20%,         /* Rojo ligeramente más oscuro */
              #cc0000 30%,         /* Continúa oscureciendo */
              #990000 40%,         /* Rojo más oscuro */
              #660000 45%,         /* Rojo muy oscuro */
              #333333 50%,         /* Comienza la transición al gris */
              #333333 100%         /* Gris en la parte inferior */
          );
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 20px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
          border: none;
          overflow: hidden;
          position: relative;
          transition: all 0.3s ease;
      }
  
      /* Efecto hover para el contenedor */
      .portfolio-wrap:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(255, 0, 0, 0.2);  /* Volvemos a la sombra roja para mantener la coherencia */
      }
  
      /* Ajustes para la imagen */
      .portfolio-wrap img {
          width: 100%;
          height: auto;
          border-radius: 15px;           /* Puntas redondeadas para la imagen */
          margin-bottom: 15px;
          transition: all 0.3s ease;
      }
  
      /* Mantener los estilos existentes de los botones pero ajustar el border-radius */
      .fill-btn, .add-to-cart-btn {
          border-radius: 10px;           /* Puntas más redondeadas para los botones */
          /* ... resto de los estilos de botones ... */
      }
  
      /* Ajuste del contenedor de botones */
      .project-btn {
          border-top: 1px solid rgba(255, 255, 255, 0.1);  /* Línea separadora más sutil */
          /* ... resto de los estilos del contenedor de botones ... */
      }
  
      /* Agregar estos nuevos estilos */
      .portfolio-wrap {
          position: relative;
      }
  
      /* Modificar los estilos de la notificación */
      .hover-message {
          display: none;  /* Mantener oculto por defecto */
          position: absolute;
          top: 20px;
          left: 50%;
          transform: translateX(-50%);
          background-color: rgba(0, 0, 0, 0.9);
          color: white;
          padding: 15px;
          border-radius: 8px;
          text-align: center;
          font-size: 16px;
          font-weight: 500;
          z-index: 10;
          width: 90%;
          border: 2px solid #ff0000;
          box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
          cursor: pointer;
          text-decoration: none;
          pointer-events: none;  /* Evita que el hover se active en la notificación */
      }
  
      /* Mostrar la notificación solo cuando el mouse está sobre el contenedor */
      .portfolio-wrap.special-hover:hover .hover-message {
          display: block;
          pointer-events: auto;  /* Permite hacer clic en la notificación cuando es visible */
      }
  
      /* Efecto hover para la notificación */
      .hover-message:hover {
          background-color: rgba(255, 0, 0, 0.9);
          transition: background-color 0.3s ease;
      }
  
      /* Mantener la animación */
      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateX(-50%) translateY(-10px);
          }
          to {
              opacity: 1;
              transform: translateX(-50%) translateY(0);
          }
      }
  
      /* Opcional: Agregar una animación suave para el mensaje */
      .hover-message {
          animation: fadeIn 0.3s ease-in-out;
      }
  
      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateX(-50%) translateY(-10px);
          }
          to {
              opacity: 1;
              transform: translateX(-50%) translateY(0);
          }
      }
  
      /* Nuevos estilos para el modal */
      .modal {
          background-color: rgba(0, 0, 0, 0.9);
      }
  
      .modal-content {
          background-color: #000000;
          color: #ffffff;
          border: 2px solid #ff0000;
          border-radius: 15px;
          box-shadow: 0 0 30px rgba(255, 0, 0, 0.2);
      }
  
      .modal-header {
          border-bottom: 1px solid #333;
          padding: 1.5rem;
          background-color: #000000;
          border-radius: 13px 13px 0 0;
      }
  
      .modal-header .close,
      .modal-header .btn-close,
      .close-cart {
          display: none !important;
      }
  
      .modal-body {
          padding: 1.5rem;
      }
  
      .modal-footer {
          border-top: 1px solid #333;
          padding: 1.5rem;
          flex-direction: column;
          gap: 1rem;
          background-color: #000000;
          border-radius: 0 0 13px 13px;
      }
  
      .total-price {
          width: 100%;
          text-align: right;
          font-size: 1.4rem;
          color: #ff0000;
          font-weight: 700;
          margin-bottom: 1rem;
      }
  
      .btn-proceder {
          width: 100%;
          padding: 1rem;
          background-color: #ff0000;
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 1.1rem;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: 600;
          transition: all 0.3s ease;
      }
  
      .btn-proceder:hover {
          background-color: #cc0000;
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
      }
  
      .remove-item {
          background: none;
          border: none;
          color: #ff0000;
          font-size: 1.2rem;
          cursor: pointer;
          transition: all 0.3s ease;
      }
  
      .remove-item:hover {
          color: #cc0000;
          transform: scale(1.1);
      }
  
      /* Estilos para el carrito lateral */
      .cart-modal {
          position: fixed;
          top: 0;
          right: -400px;
          width: 100%;
          max-width: 400px;
          height: 100%;
          background-color: #000000;
          z-index: 1000;
          display: none;
          box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
          transition: right 0.3s ease;
      }
  
      .cart-modal-content {
          background-color: #000000;
          height: 100%;
          color: #ffffff;
          border-left: 1px solid #ff0000;
      }
  
      .cart-header {
          background-color: #000000;
          padding: 1.5rem;
          border-bottom: 1px solid #333;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
  
      .cart-header h3 {
          color: #ff0000;
          margin: 0;
          font-size: 1.5rem;
          font-weight: 600;
      }
  
      .cart-close {
          color: #ff0000;
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          padding: 0;
          line-height: 1;
          transition: all 0.3s ease;
      }
  
      .cart-close:hover {
          color: #cc0000;
          transform: scale(1.1);
      }
  
      .cart-items {
          padding: 1.5rem;
          max-height: calc(100vh - 200px);
          overflow-y: auto;
      }
  
      .cart-items::-webkit-scrollbar {
          width: 8px;
      }
  
      .cart-items::-webkit-scrollbar-track {
          background: #111111;
      }
  
      .cart-items::-webkit-scrollbar-thumb {
          background: #ff0000;
          border-radius: 4px;
      }
  
      .cart-total {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 1.5rem;
          background-color: #000000;
          border-top: 1px solid #333;
      }
  
      .cart-total h4 {
          color: #ff0000;
          font-size: 1.4rem;
          margin-bottom: 1rem;
          text-align: right;
      }
  
      .checkout-btn {
          width: 100%;
          padding: 1rem;
          background-color: #ff0000;
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 1.1rem;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: 600;
          transition: all 0.3s ease;
      }
  
      .checkout-btn:hover {
          background-color: #cc0000;
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
      }
  
      /* Estilos para la corona y mensaje conveniente */
      .crown-badge {
          position: absolute;
          top: -25px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          z-index: 2;
      }
  
      .crown-icon {
          color: #ffd700;
          font-size: 2rem;
          text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
          margin-bottom: 5px;
      }
  
      .crown-text {
          background-color: #ffd700;
          color: #000000;
          padding: 3px 10px;
          border-radius: 12px;
          font-size: 0.8rem;
          font-weight: bold;
          text-transform: uppercase;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
  
      /* Ajustar el contenedor para la corona */
      .portfolio-wrap.with-crown {
          margin-top: 40px;
      }
  
      /* Nuevos estilos para los items del carrito dentro del modal */
      .cart-item {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 10px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          margin-bottom: 5px;
          position: relative;
      }
  
      .cart-item:after {
          content: '';
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(
              to right,
              transparent,
              rgba(255, 255, 255, 0.5),
              transparent
          );
      }
  
      .cart-item-image {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          object-fit: cover;
      }
  
      .cart-item-details {
          flex: 1;
      }
  
      .cart-item-name {
          font-size: 0.9rem;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 5px;
      }
  
      .cart-item-price {
          font-size: 0.85rem;
          color: #ff0000;
          font-weight: 500;
      }
  
      /* Estilos para los controles de cantidad */
      .quantity-controls {
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(255, 0, 0, 0.1);
          padding: 5px;
          border-radius: 20px;
          width: fit-content;
      }
  
      .quantity-btn {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          border: none;
          background: #ff0000;
          color: white;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
      }
  
      .quantity-btn:hover {
          background: #cc0000;
          transform: scale(1.1);
      }
  
      .quantity-input {
          width: 35px;
          text-align: center;
          border: none;
          background: transparent;
          color: white;
          font-size: 0.9rem;
          padding: 0;
          margin: 0;
      }
  
      .quantity-input::-webkit-inner-spin-button,
      .quantity-input::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }
  
      /* Ajustes para el botón de eliminar */
      .remove-item {
          padding: 5px;
          font-size: 1rem;
          color: rgba(255, 0, 0, 0.7);
          transition: all 0.3s ease;
      }
  
      .remove-item:hover {
          color: #ff0000;
          transform: scale(1.1);
      }
  
      /* Ajustes para el contenedor del carrito */
      .cart-items {
          padding: 1rem;
          max-height: calc(100vh - 250px);
          overflow-y: auto;
      }
  
      .cart-items::-webkit-scrollbar {
          width: 5px;
      }
  
      .cart-items::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.1);
          border-radius: 5px;
      }
  
      .cart-items::-webkit-scrollbar-thumb {
          background: #ff0000;
          border-radius: 5px;
      }
  
      /* Ajustes para el total y botón de proceder */
      .cart-total {
          padding: 1rem;
          border-top: 1px solid rgba(255, 0, 0, 0.2);
      }
  
      .total-price {
          font-size: 1.2rem;
          
          margin-bottom: 0.8rem;
      }
  
      /* Estilos para el botón de eliminar */
      .delete-item {
          background: none;
          border: none;
          color: #ff0000;
          padding: 5px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .delete-item:hover {
          color: #cc0000;
          transform: scale(1.1);
      }
  
      .delete-item i {
          font-size: 1.2rem;
      }
  
      /* Ajustes para el layout del item del carrito */
      .cart-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          margin-bottom: 5px;
          position: relative;
      }
  
      .cart-item:after {
          content: '';
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(
              to right,
              transparent,
              rgba(255, 255, 255, 0.5),
              transparent
          );
      }
  
      .cart-item-details {
          display: flex;
          align-items: center;
          gap: 15px;
          flex: 1;
      }
  
      .cart-item-thumbnail img {
          width: 60px;
          height: 60px;
          border-radius: 8px;
          object-fit: cover;
      }
  
      .cart-item-controls {
          display: flex;
          align-items: center;
          gap: 15px;
      }
  
      .cart-item-info h4 {
          font-size: 1rem;
          margin: 0 0 5px 0;
          color: #ffffff;
      }
  
      .cart-item-info p {
          font-size: 0.9rem;
          color: #ff0000;
          margin: 0;
      }
  
      .item-total {
          font-size: 1rem;
          color: #ff0000;
          font-weight: 600;
          margin: 0;
          min-width: 80px;
          text-align: right;
      }
  
      /* Estilos para el modal de confirmación */
      .confirmation-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.8);
          z-index: 1100;
          justify-content: center;
          align-items: center;
      }
  
      .confirmation-modal-content {
          background: #000000;
          padding: 30px;
          border-radius: 10px;
          max-width: 500px;
          width: 90%;
          border: 1px solid #ff0000;
          color: white;
      }
  
      .confirmation-header {
          text-align: center;
          margin-bottom: 20px;
          position: relative;
      }
  
      .close-confirmation {
          position: absolute;
          top: -10px;
          right: -10px;
          background: none;
          border: none;
          color: #ff0000;
          font-size: 24px;
          cursor: pointer;
      }
  
      .option-personal, .option-gift {
          margin: 20px 0;
          padding: 15px;
          border: 1px solid rgba(255, 0, 0, 0.3);
          border-radius: 5px;
      }
  
      .email-input-container {
          display: flex;
          gap: 10px;
          margin-top: 10px;
      }
  
      #beneficiary-email {
          flex: 1;
          padding: 8px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid #ff0000;
          border-radius: 4px;
          color: white;
      }
  
      .start-btn, .send-email-btn {
          background: #ff0000;
          color: white;
          border: none;
          padding: 8px 15px;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s ease;
      }
  
      .start-btn:hover, .send-email-btn:hover {
          background: #cc0000;
          transform: translateY(-2px);
      }
  
      /* Ocultar completamente el modal de Bootstrap */
      .modal-backdrop,
      .modal-backdrop.show,
      .modal.fade {
          display: none !important;
          opacity: 0 !important;
          visibility: hidden !important;
          pointer-events: none !important;
      }
  
      /* Asegurarse de que el body no se modifique */
      body {
          overflow: auto !important;
          padding-right: 0 !important;
      }
  
      /* Asegurarse de que el carrito lateral sea el único visible */
      .cart-modal {
          z-index: 9999;
      }
  
      .alert-container {
          width: 100%;
          max-width: 800px;
          margin: 0 auto;
      }
  
      .custom-alert {
          background: linear-gradient(135deg, #ff0000, #cc0000);
          color: white;
          padding: 20px;
          border-radius: 15px;
          text-align: center;
          font-size: 1.2rem;
          font-weight: 500;
          box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          animation: alertPulse 2s infinite;
      }
  
      .custom-alert i {
          font-size: 1.4rem;
          margin-right: 10px;
      }
  
      @keyframes alertPulse {
          0% {
              box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
          }
          50% {
              box-shadow: 0 4px 25px rgba(255, 0, 0, 0.5);
          }
          100% {
              box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
          }
      }
  
      .counter-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          background: linear-gradient(135deg, #ff0000, #cc0000);
          border-radius: 15px;
          color: white;
          box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
          animation: counterPulse 2s infinite;
      }
  
      .counter-box {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 10px;
      }
  
      .counter-label {
          font-size: 1rem;
          text-transform: uppercase;
          letter-spacing: 1px;
      }
  
      @keyframes counterPulse {
          0% {
              box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
          }
          50% {
              box-shadow: 0 4px 25px rgba(255, 0, 0, 0.5);
          }
          100% {
              box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
          }
      }
  
      /* Estilo para el precio */
      .price-tag {
          text-align: center;
          color: #ffffff;
          font-size: 1.5rem;
          font-weight: 600;
          margin: 10px 0;
          padding: 5px;
          background: rgba(255, 0, 0, 0.1);
          border-radius: 5px;
          border: 1px solid rgba(255, 0, 0, 0.3);
      }
  
      /* Modificar el estilo existente del discount-badge para hacerlo más llamativo */
      .discount-badge {
          position: absolute;
          top: 20px;
          right: 20px;
          background: linear-gradient(45deg, #ff0000, #cc0000);
          color: white;
          padding: 8px 15px;
          border-radius: 25px;
          font-weight: bold;
          font-size: 1rem;
          z-index: 2;
          box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
          transform: rotate(10deg);
          animation: float 3s ease-in-out infinite;
      }
  
      @keyframes float {
          0% {
              transform: rotate(10deg) translateY(0px);
          }
          50% {
              transform: rotate(10deg) translateY(-5px);
          }
          100% {
              transform: rotate(10deg) translateY(0px);
          }
      }




      .price-curso-tag {
        background: linear-gradient(45deg, #ff0000, #cc0000);
        color: white;
        padding: 8px 15px;
        border-radius: 10px;
        font-size: 1.4rem;
        font-weight: 600;
        display: inline-block;
        box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2);
        margin: 10px auto;
        animation: subtle-glow 2s infinite;
        position: relative;
        text-align: center;
        width: auto;
        min-width: 120px;
    }

    .price-curso-tag::before {
        font-size: 0.7rem;
        position: absolute;
        top: -8px;
        right: 5px;
        background: #ff0000;
        padding: 2px 6px;
        border-radius: 8px;
        font-weight: 500;
    }

    .cotizar-btn {
        background-color: #ff0000;
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2);
      }
  
      .cotizar-btn:hover {
        background-color: #ffffff;
        color: #ff0000;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3);
      }

      .testimonial-card {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        padding: 25px;
        width: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(255, 0, 0, 0.2);
    }

    .testimonial-content {
        color: #ffffff;
    }

    .quote-icon {
        color: #ff0000;
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .testimonial-author h5 {
        color: #ff0000;
        margin-bottom: 5px;
    }

    .testimonial-author span {
        color: rgba(255, 255, 255, 0.7);
    }

    .testimonial-author-card h5 {
        color: #ff0000;
        margin-bottom: 5px;
    }

    .testimonial-author-card span {
        color: rgba(255, 255, 255, 0.7);
    }

    .testimonial-author-card {
        border-top: 2px solid #ff0000;
        padding-top: 15px;
    }

    .btn-testimonial {
        background-color: #ff0000;
        color: #ffffff;
        border: none;
        padding: 12px 25px;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .btn-testimonial:hover {
        background-color: #ffffff;
        color: #ff0000;
        transform: scale(1.05);
    }

    /* Estilos para el modal */
    .modal-content {
        background-color: #1a1a1a;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .modal-header {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    .text-danger {
        color: #ff0000 !important;
    }

    /* Ajustes para la sección de testimonios */
    .testimonials-section {
        padding: 80px 0;
    }

    .testimonials-section h2 {
        font-size: 2.5rem;
        margin-bottom: 50px;
        text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.3);
    }