body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #fefefe;
  margin: 0;
  padding: 0;
  color: #333;
}

/* Cabecera */
.header {
  background: linear-gradient(135deg, #ad349d, #610b72);
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  position: relative;
  overflow: hidden;
}

/* Decoración con huellitas */
.header::before, .header::after {
  content: "🐾";
  font-size: 4rem;
  position: absolute;
  opacity: 0.15;
}
.header::before {
  top: 10px;
  left: 20px;
  background-color: violet;
}
.header::after {
  bottom: 20px;
  right: 30px;
}

.header-title {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.header-subtitle {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.integrantes {
  background: rgba(255,255,255,0.15);
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.integrantes h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

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

.integrantes li {
  margin: 0.4rem 0;
  font-size: 1rem;
}

/*SECCION INFORMACIÓN FORMATOS*/
 section.evidencia {
      padding: 2rem;
      max-width: 1200px;
      margin: auto;
    }


    .content-block {
      background: #fff;
      border-radius: 1rem;
      border: 2px solid purple;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      transition: transform 0.3s;
    }

    .content-block:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 22px rgba(115, 14, 131, 0.1);
      border-radius: 0px;
    }

    .content-block h3 {
      color: purple;
      margin-bottom: 0.8rem;
    }

    .content-block p {
      margin-bottom: 0.5rem;
      line-height: 1.6;
    }

    /* Listado */
    ul {
      margin: 0;
      padding-left: 1.2rem;
    }

    li {
      margin-bottom: 0.4rem;
    }

    

    /* Responsive */
    @media (max-width: 768px) {
      .evidencia-title {
        font-size: 2rem;
      }
      .content-block {
        padding: 1rem;
      }
    }

    /*TABLA*/
      section.comparacion {
      padding: 2rem;
      max-width: 1100px;
      margin: auto;
    }

    .comparacion-title {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 2rem;
      color: purple;
    }

    .table-wrapper {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    th, td {
      padding: 1rem;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    th {
      background: purple;
      color: #fff;
      font-size: 1.1rem;
      text-align: center;
    }

    td {
      font-size: 0.95rem;
      line-height: 1.5;
    }

    tr:hover td {
      background: #fff8f0;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .comparacion-title {
        font-size: 1.5rem;
      }
      th, td {
        padding: 0.8rem;
        font-size: 0.9rem;
      }
    }

/*SECTION BOTONES*/


.section {
  padding: 2rem;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  color: purple;
  margin-bottom: 2rem;
}

/* Contenedor responsive */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  justify-items: center; /* Centra los items dentro de su celda */
}

/* Tarjetas */
.card {
  background: #fff;
  border-radius: 1rem;
  border: 2px solid purple;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease;
  width: 100%;
  max-width: 320px; /* Mantiene tamaño uniforme */
}

/* Centrar la última card */
.cards-container .card:last-child {
  grid-column: 1 / -1;   /* Hace que ocupe toda la fila */
  justify-self: center;  /* Y se centra */
}


.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 22px rgba(98, 11, 107, 0.1);
}

.card h3 {
  font-size: 1.3rem;
  color: purple;
  margin-bottom: 0.8rem;
}

.card p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #555;
}

/* Botones generales */
.btn {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 2rem;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  color: #fff;
}

/* Estilos por tipo */
.facebook { background: #3b5998; }
.facebook:hover { background: #2d4373; 
  border-radius: 0px;
}

.instagram { background: #e1306c; }
.instagram:hover { background: #b82252; 
  border-radius: 0px;
}

.whatsapp { background: #25d366; }
.whatsapp:hover { background: #1da851; 
border-radius: 0px;
}

.cart { background: #ff9800; }
.cart:hover { background: #e68900; 
border-radius: 0px;
}

.search { background: #03a9f4; }
.search:hover { background: #0288d1; 
border-radius: 0px;
}

.contact { background: #9c27b0; }
.contact:hover { background: #7b1fa2; 
border-radius: 0px;
}

.booking { background: #4caf50; }
.booking:hover { background: #388e3c; 
border-radius: 0px;
}

.buy { background: #f44336; }
.buy:hover { background: #d32f2f; 
border-radius: 0px;
}

.preview { background: #607d8b; }
.preview:hover { background: #455a64; 
border-radius: 0px;
}

.description { background: #795548; }
.description:hover { background: #5d4037; 
border-radius: 0px;
}

.language { background: #009688; }
.language:hover { background: #00796b; 
border-radius: 0px;
}

.send { background: orange; }
.send:hover { background: orangered; 
border-radius: 0px;
}

/* Responsive */
@media (max-width: 768px) {
  .header-title {
    font-size: 2.2rem;
  }
  .header-subtitle {
    font-size: 1.2rem;
  }
  .integrantes {
    width: 90%;
    padding: 1rem;
  }
}