body {
      background: linear-gradient(180deg, #f8f9fc 0%, #e9f2ff 100%);
      padding-bottom: 3rem;
    }

    header {
      background: linear-gradient(135deg, #ecbacf, #a72727);
      text-align: center;
      color: #fff;
      padding: 4rem 2rem 3rem;
      border-bottom: 5px solid #a72727;
      animation: fadeInHeader 1s ease-in-out;
    }

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

    header h1 {
      font-family: "Poppins", sans-serif;
      font-size: 2.5rem;
      margin-bottom: 1rem;
      line-height: 1.3;
    }

    main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2rem;
    }

    section {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      padding: 2rem;
      margin-bottom: 3rem;
      animation: fadeInUp 0.6s ease forwards;
    }

    section h2 {
      text-transform: uppercase;
      font-family: "Poppins", sans-serif;
      text-align: center;
      font-size: 1.6rem;
      color: #a72727;
      margin-bottom: 1.5rem;
      position: relative;
    }

    section h2::after {
      content: "";
      width: 70px;
      height: 4px;
      background: #ff758c;
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 4px;
    }

    section ul {
      list-style: none;
      padding: 0;
      margin-top: 1.5rem;
      line-height: 1.8;
      font-size: 1rem;
    }

    section ul li {
      background: #f8f9fc;
      border-left: 5px solid #a72727;
      margin-bottom: 0.8rem;
      padding: 0.8rem 1rem;
      border-radius: 8px;
      transition: 0.3s;
    }

    section ul li:hover {
      background: #fff5f8;
      transform: translateX(5px);
    }

    img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      margin-bottom: 1.2rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    img:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .img-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    hr {
      border: none;
      height: 3px;
      background: linear-gradient(90deg, transparent, #a72727, transparent);
      margin: 3rem auto;
      width: 80%;
      border-radius: 2px;
    }

    footer {
      text-align: center;
      color: #555;
      font-size: 0.9rem;
      padding: 2rem;
    }

    /* Animación de fadeInUp (ya existe en style.css pero se asegura aquí) */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      header h1 {
        font-size: 2rem;
      }
      section {
        padding: 1.5rem;
      }
    }