:root {
  --rosa: #ff4d8d;
  --rosa-suave: #ff85a2;
  --morado: #601a9e;

  --fondo: #fc82dd;
  --card: #ffffff;
  --texto: #1a1a2e;
  --gris: #555;
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

/* HEADER */
header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 20px;
  text-align: center;
  z-index: 1000;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* NAV */
nav {
  margin-bottom: 10px;
}

nav a {
  color: var(--rosa);
  margin: 0 12px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

nav a:hover {
  color: var(--morado);
}

/* TITULO */
h1 {
  background: linear-gradient(45deg, var(--rosa), var(--morado));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* BUSCADOR */
.search-box input {
  background: linear-gradient(45deg, #ff4d8d, #7b2cbf);
  color: white;
  padding: 10px;
  width: 260px;
  border-radius: 20px;
  border: none;
  outline: none;
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 77, 141, 0.7);
}
.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* RESULTADOS */
.search-results {
  position: absolute;
  background: #e65db1;
  width: 260px;
  left: 50%;
  transform: translateX(-50%);
  top: 45px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 10;
}

.search-results a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #df88c9;
}

.search-results a:hover {
  background: var(--rosa);
}

/* HERO */
.hero {
  position: relative;
  min-height: 400px;
  padding: 20px 0;
  margin: 40px auto;
  width: 90%;
  background: var(--rosa);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* SLIDER */
.slider {
  height: 280px;
  position: relative;
  z-index: 2;
  margin-top: 40px;
  background: transparent;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.slider a {
  position: absolute;
  top: 50%;
  transition: 
    transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.6s ease;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

/* CARRUSEL */
.center {
  width: 460px;
  height: 300px;
  left: 50%;
  transform: translate(-50%, -60%) scale(1.05);
  z-index: 5;
}

.left1 {
  width: 300px;
  height: 200px;
  left: 50%;
  transform: translate(-50%, -50%) translateX(460px) scale(0.9);
  opacity: 0.8;
}

.right1 {
  width: 300px;
  height: 200px;
  left: 50%;
 transform: translate(-50%, -50%) translateX(-460px) scale(0.9);
  opacity: 0.8;
}

.left2 {
  width: 220px;
  height: 150px;
  left: 50%;
  transform: translate(-50%, -50%) translateX(-600px) scale(0.7);
  opacity: 0.5;
}

.right2 {
  width: 220px;
  height: 150px;
  left: 50%;
  transform: translate(-50%, -50%) translateX(600px) scale(0.7);
  opacity: 0.5;
}

/* BOTONES */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 28px;
  padding: 12px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: 0.3s;
}

.prev:hover, .next:hover {
  background: var(--rosa);
}

.prev { left: 15px; }
.next { right: 15px; }

/* HERO TEXTO */
.hero-text {
  text-align: center;
  padding: 30px 20px;
  background: #111;
}

.hero-text h2 {
  color: var(--rosa);
}

.hero-text p {
  color: white;
  font-weight: 500;
}

/* SECCIONES */
.news {
  padding: 40px 20px;
}

.news h2 {
  text-align: center;
  color: var(--morado);
}

/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* CARDS */
.card {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(184, 120, 240, 0.2);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card h3 {
  margin: 10px 0;
  color: var(--morado);
}

.card p {
  padding: 0 10px 15px;
  font-size: 14px;
  color: var(--gris);
}

/* FOOTER */
footer {
  text-align: center;
  padding: 20px;
  background: #000;
  color: white;
}

/* RESPONSIVE */
@media (max-width: 768px) {

  /* HERO (fondo rosado) */
  .hero {
    min-height: 260px;
    padding: 20px 0;
    margin: 20px auto;
  }

  /* SLIDER */
  .slider {
    height: 200px;
    margin-top: 20px;
  }

  /* IMAGEN CENTRAL */
  .center {
    width: 200px;
    height: 140px;
    transform: translate(-50%, -50%) scale(1.05);
  }

  /* LADOS */
  .left1 {
    width: 140px;
    height: 100px;
    transform: translate(-50%, -50%) translateX(-180px) scale(0.9);
    opacity: 0.8;
  }

  .right1 {
    width: 140px;
    height: 100px;
    transform: translate(-50%, -50%) translateX(180px) scale(0.9);
    opacity: 0.8;
  }

  /* EXTREMOS OCULTOS */
  .left2,
  .right2 {
    display: none;
  }

  /* BOTONES */
  .prev, .next {
    font-size: 22px;
    padding: 8px;
  }

  /* BUSCADOR */
  .search-box input {
    width: 90%;
    font-size: 14px;
  }

  /* RESULTADOS BUSCADOR */
  .search-results {
    width: 90%;
  }

  /* TEXTO HERO */
  .hero-text h2 {
    font-size: 20px;
  }

  .hero-text p {
    font-size: 14px;
  }

  /* SECCIONES */
  .news {
    padding: 30px 15px;
  }

  /* GRID → UNA COLUMNA */
  .grid {
    grid-template-columns: 1fr;
  }

  /* CARDS */
  .card img {
    height: 180px;
  }

  .card h3 {
    font-size: 16px;
  }

  .card p {
    font-size: 13px;
  }

}