/* fourSections.css */

/* ------------------------------------------------------------------------ */
/* Animación de entrada */
@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Estado inicial de las tarjetas */
  .fourSection {
    opacity: 0;
    transform: translateY(20px);
  }
  
  /* Clase que dispara la animación */
  .fourSection.animate {
    animation: fadeInUp 0.6s ease forwards;
  }
  
  /* Retrasos progresivos */
  .fourSectionsContainer .fourSection:nth-of-type(1).animate { animation-delay:   0ms; }
  .fourSectionsContainer .fourSection:nth-of-type(2).animate { animation-delay: 150ms; }
  .fourSectionsContainer .fourSection:nth-of-type(3).animate { animation-delay: 300ms; }
  .fourSectionsContainer .fourSection:nth-of-type(4).animate { animation-delay: 450ms; }
  
  /* ------------------------------------------------------------------------ */
  /* Contenedor principal */
  .fourSectionsContainer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto auto;
      gap: 32px 48px;
      margin: 50px 0;
      padding: 0 20px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #333;
  }
  
  /* Tarjeta */
  .fourSection {
      background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
      border-radius: 20px;
      padding: 30px 28px;
      box-shadow:
          0 4px 6px rgba(0,0,0,0.1),
          inset 0 0 15px rgba(255,255,255,0.6);
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;
  }
  
  /* Efecto radial overlay */
  .fourSection::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent 70%);
      pointer-events: none;
      transition: opacity 0.3s ease;
      opacity: 0;
      z-index: 0;
  }
  
  .fourSection:hover::before {
      opacity: 1;
  }
  
  .fourSection:hover {
      transform: translateY(-8px);
      box-shadow:
          0 12px 24px rgba(0,0,0,0.2),
          inset 0 0 20px rgba(255,255,255,0.7);
      border-color: #FDE99F;
      z-index: 1;
  }
  
  /* Título */
  .fourSection_title {
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 18px;
      color: #08376c;
      line-height: 1.3;
      position: relative;
      z-index: 2;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  }
  
  /* Contenido */
  .fourSection_content {
      font-size: 17px;
      line-height: 1.65;
      color: #555;
      position: relative;
      z-index: 2;
  }
  
  .fourSection_content ul {
      padding-left: 20px;
      margin-top: 12px;
  }
  
  .fourSection_content ul li {
      margin-bottom: 8px;
  }
  
  /* Responsive */
  @media (max-width: 900px) {
      .fourSectionsContainer {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          gap: 24px;
          padding: 0 16px;
      }
      
      .fourSection_title {
          font-size: 24px;
      }
      
      .fourSection_content {
          font-size: 15px;
      }
  }