/* ==========================================================================
   Hero Section — restauración premium, minimalista
   Mobile: flujo natural en orden de lectura.
   Desktop: grid de 2 columnas vía grid-template-areas (mismo DOM, otro layout).
   ========================================================================== */

.hero {
  position: relative;
  overflow: clip;
  background: var(--c-white);
  display: flex;
  align-items: center;
  align-items: safe center;
}

.hero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-8) var(--sp-9);
  width: 100%;
}

/* ---- 1. Badge ---- */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  border: 1px solid rgba(43, 122, 120, 0.2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-primary);
}

.hero__badge .icon {
  color: var(--c-cta);
}

/* ---- 2. Hook ---- */
.hero__hook {
  font-size: var(--fs-3xl);
  line-height: 1.05;
  max-width: 16ch;
  margin: 0;
}

.hero__hook em {
  font-style: normal;
  color: var(--c-primary);
}

/* ---- 3. Descripción ---- */
.hero__desc {
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--c-text-primary);
  margin: 0;
}

.hero__credential {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ---- 4. Visual ---- */
.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.hero__rating-card,
.hero__water-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-white);
  border: 1.5px solid var(--c-primary-tint);
  border-left: 4px solid var(--c-cta);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  width: fit-content;
  max-width: 100%;
}

.hero__water-card {
  border-left-color: var(--c-secondary);
}

.hero__stars {
  color: var(--c-text-primary);
  font-size: 1rem;
  letter-spacing: 2px;
  flex-shrink: 0;
}

.hero__rating-card strong,
.hero__water-card strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-text-primary);
  font-weight: 700;
}

.hero__rating-card span:not(.hero__stars),
.hero__water-card span {
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

.hero__water-card .icon {
  width: 24px;
  height: 24px;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--c-secondary-tint);
  color: var(--c-secondary);
  flex-shrink: 0;
}

.hero__frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .hero__frame {
    aspect-ratio: 4 / 5;
    max-height: 50vh;
  }
}

.hero__frame img,
.hero__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  display: block;
}

.hero__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.5) 48%,
    transparent 60%
  );
  transform: translateX(-120%);
  animation: sheen 6s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}

@keyframes sheen {
  0%, 30% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sheen { display: none; }
}

/* ---- 5. Beneficios ---- */
.hero__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-4);
}

.hero__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-primary);
}

.hero__benefits .icon {
  width: 18px;
  height: 18px;
  color: var(--c-cta);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---- 6-7. CTAs ---- */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.btn--block-mobile {
  width: 100%;
}

@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .btn--block-mobile {
    width: auto;
  }
}

/* ==========================================================================
   Desktop — grid de 2 columnas, ~100vh
   ========================================================================== */
@media (min-width: 900px) {
  .hero {
    min-height: calc(100vh - 74px);
    padding-block: var(--sp-4) var(--sp-7);
  }

  .hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "badge  visual"
      "hook   visual"
      "desc   visual"
      "bene   visual"
      "cta    visual";
    align-items: start;
    row-gap: var(--sp-4);
    column-gap: var(--sp-9);
    padding-block: 0;
  }

  .hero__badge  { grid-area: badge; }
  .hero__hook   { grid-area: hook; }
  .hero__desc   { grid-area: desc; }
  .hero__visual { grid-area: visual; align-self: center; }
  .hero__benefits { grid-area: bene; }
  .hero__actions   { grid-area: cta; }

  .hero__visual {
    align-items: stretch;
  }

  .hero__rating-card {
    align-self: flex-start;
    margin-left: var(--sp-6);
    transform: translateY(50%);
    position: relative;
    z-index: 1;
  }

  .hero__water-card {
    align-self: flex-end;
    margin-right: var(--sp-6);
  }
}

@media (min-width: 1180px) {
  .hero__hook {
    font-size: var(--fs-3xl);
  }
}

/* ---- Indicador de scroll (solo escritorio) ---- */
.hero__scroll-cue {
  display: none;
}

@media (min-width: 900px) {
  .hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: var(--sp-4);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-text-secondary);
  }

  .hero__scroll-cue span {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
  }

  .hero__scroll-cue .icon {
    width: 18px;
    height: 18px;
    animation: scroll-cue-bounce 2s ease-in-out infinite;
  }

  .hero__scroll-cue:hover {
    color: var(--c-primary);
  }
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue .icon {
    animation: none;
  }
}