/* ================== INDEX (solo home) ================== */

/* HERO */
.hero-full{
  position:relative;

  /* En móvil, vh a veces rompe; lo controlamos abajo con media query */
  min-height: min(82vh, 760px);

  display:flex;
  align-items:center;
  overflow:hidden;

  border-radius:18px;
  margin:28px auto;
  padding:40px 0;
}

.hero-full::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../imagenes/fondo.png') center/cover no-repeat;
  filter:saturate(95%) contrast(1.02) brightness(0.62);
  transform:scale(1.02);
  z-index:0;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(11,59,46,.28), rgba(3,18,11,.42));
  mix-blend-mode:multiply;
}

/* ✅ IMPORTANTE: min-width:0 evita que el grid “reviente” en móvil */
.hero-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap:32px;
  align-items:center;

  padding:48px;
  min-width:0;
}

.hero-copy{ min-width:0; }

.hero-copy h2{
  color:#fff;
  margin:0 0 12px;
  font-size:clamp(22px, 3.2vw, 32px);
  line-height:1.1;
  font-weight:800;
  font-family:'Playfair Display',serif;
  text-shadow:0 6px 22px rgba(0,0,0,.4);
}

.lead{
  color:rgba(255,255,255,.9);
  margin:0 0 18px;
  font-size:clamp(14px, 1.3vw, 16px);
  line-height:1.6;
}

/* ✅ Botones: en desktop se acomodan, en móvil se van a columna */
.hero-ctas{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}

/* ✅ Esto evita que por “boost” el texto cause cosas raras */
.hero-ctas .btn{
  white-space: normal;     /* deja partir si el móvil infla texto */
  text-align:center;
}

/* Micro-gallery */
.micro-gallery{
  width: min(520px, 45vw);
  margin-inline:auto 0;
  position:relative;
  min-width:0;
}

.micro-gallery::before,
.micro-gallery::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:48px;
  z-index:3;
  pointer-events:none;
  mask-image: linear-gradient(to right, black, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.02));
  backdrop-filter: blur(2px);
}
.micro-gallery::before{left:0}
.micro-gallery::after{right:0; transform:scaleX(-1)}

.mg-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:6px 6px 10px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.mg-track::-webkit-scrollbar{display:none}

.mg-card{
  position:relative;
  min-width:150px;
  height:110px;
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transform: perspective(700px) rotateY(-6deg);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  backdrop-filter: blur(2px);
}
.mg-card:nth-child(even){ transform: perspective(700px) rotateY(6deg); }

.mg-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .35s ease, filter .35s ease;
}

.mg-card:hover{
  transform: perspective(700px) rotateY(0deg) translateY(-4px) scale(1.02);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 18px 38px rgba(0,0,0,.35);
}
.mg-card:hover img{
  transform:scale(1.07);
  filter:saturate(1.05) contrast(1.05);
}

/* ================== RESPONSIVE ================== */

/* Tablet */
@media (max-width: 980px){
  .hero-grid{
    grid-template-columns:1fr;
    padding:32px;
  }
  .micro-gallery{
    width:100%;
    margin: 10px 0 0;
  }
}

/* Móvil */
@media (max-width: 560px){
  .hero-full{
    margin: 14px auto;
    padding: 16px 0;
    border-radius: 14px;

    /* ✅ evita bugs con vh en móvil */
    min-height: auto;
  }

  .hero-overlay,
  .hero-full::before{
    border-radius: 14px;
  }

  .hero-grid{
    padding: 16px;
    gap: 16px;
  }

  /* ✅ Botones bien en móvil */
  .hero-ctas{
    flex-direction: column;
    gap: 10px;
  }
  .hero-ctas .btn{
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    line-height: 1.15;
  }

  /* Micro-gallery más cómoda */
  .mg-card{
    min-width: 210px;
    height: 140px;
    transform: none;
  }
  .mg-card:nth-child(even){ transform:none; }
}