/* ============================================
   INICIO — estilos específicos de index.html
   ============================================ */

.hero {
  position: relative;
  z-index: 1;
  padding: 4rem 0 3rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero-text { animation: fadeSlideUp 0.7s ease both; }

.hero-eyebrow-icons {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--coral-dark);
}

.hero .tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--teal);
  margin-bottom: 1.4rem;
}

.hero .lead {
  max-width: 46ch;
  font-size: 1.05rem;
}

/* Collage principal del hero: fotos superpuestas y giradas */
.hero-collage {
  position: relative;
  height: 380px;
  animation: fadeSlideUp 0.9s ease both;
  animation-delay: 0.1s;
}

.hero-collage img {
  position: absolute;
  width: 46%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 8px solid var(--cream-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-collage img:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.03);
  box-shadow: var(--shadow-hover);
  z-index: 5;
}

.hero-collage img:nth-child(1) { top: 0; left: 4%; transform: rotate(-6deg); }
.hero-collage img:nth-child(2) { top: 10%; right: 0; transform: rotate(5deg); }
.hero-collage img:nth-child(3) { bottom: 0; left: 20%; transform: rotate(3deg); z-index: 2; }

/* ---------- SECCIÓN "ALGUNAS FOTOS" ---------- */
.preview-section {
  padding: 3rem 0;
  position: relative;
  z-index: 1;
}

.preview-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink);
  text-align: center;
  margin-bottom: 0.3rem;
}

.preview-section .lead {
  text-align: center;
  margin: 0 auto 2rem;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.preview-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 6px solid var(--cream-card);
}

.preview-grid figure:nth-child(odd) { transform: rotate(-2deg); }
.preview-grid figure:nth-child(even) { transform: rotate(2deg); }

.preview-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.preview-grid figure:hover img { transform: scale(1.08); }

.preview-grid figure:hover {
  transform: rotate(0deg) translateY(-4px);
}

/* ---------- CTA final ---------- */
.home-cta {
  text-align: center;
  padding: 3rem 0 4rem;
  position: relative;
  z-index: 1;
}

.home-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-collage { height: 300px; margin-top: 1rem; }
  .preview-grid { grid-template-columns: repeat(2, 1fr); }
}