/* ==========================================================================
   Home — video a sangre en móvil; en escritorio, contenido | video (tipo Axwell)
   ========================================================================== */

.site-main.home { padding: 0; }

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 0 var(--gutter) 14px;
  color: var(--white);
}

/* ---------- Video ---------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media video { object-position: 50% 30%; }
/* sombra superior para que se lean el pie de foto y el botón de sonido */
.hero__media::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 96px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.hero__media .scrim { height: 78%; }

.hero__caption {
  position: absolute;
  top: 6px;
  left: var(--gutter);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--white);
}
.hero__media .sound-toggle { right: calc(var(--gutter) - 6px); }

/* ---------- Contenido ---------- */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.hero__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Renglón de arriba: kicker a la izquierda, banderas de idioma a la derecha */
.hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__kicker {
  padding: 4px 6px 3px;
  background: var(--accent);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.hero__kicker:empty { display: none; }

/* el área táctil de las banderas no agranda el renglón */
.hero__lang { margin: -6px -5px -6px auto; }
.hero .lang-flag { color: var(--white); } /* sobre el video: subrayado blanco */

.hero__name {
  margin: 2px 0 0;
  font-size: inherit;
  line-height: 1;
}
.hero__name { min-width: 0; }
.hero__name .display {
  display: block;
  font-size: 56px; /* PK.fitText lo ajusta al ancho real */
}

.hero__tagline { color: rgba(255, 255, 255, 0.85); }

/* ---------- Lanzamiento destacado ---------- */
.feature { display: flex; flex-direction: column; }

.feature__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
}
.feature__line + .feature__line { border-top: 1px solid rgba(255, 255, 255, 0.28); }

.feature__title {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  min-width: 0;
}
.feature__hint { opacity: 0.7; }

.feature__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.feature__icons {
  display: flex;
  flex: none;
  margin-right: -6px;
}

/* ---------- Newsletter en línea ---------- */
.nl-inline__label {
  margin-bottom: 2px;
  opacity: 0.7;
}
.nl-inline__row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.nl-inline .field { flex: 1; min-width: 0; }
.nl-inline .btn { flex: none; }
.hero .field::placeholder { color: rgba(255, 255, 255, 0.6); }
.hero .field:focus { border-color: var(--white); }
.hero .nl-form__msg { min-height: 0; color: var(--white); }
.hero .nl-form__msg:empty { display: none; }

.hero__subscribed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.hero__check { color: var(--white); }

.hero__more {
  align-self: flex-start;
  min-height: 32px;
  line-height: 32px;
  transition: color var(--dur) var(--ease);
}
@media (hover: hover) {
  .hero__more:hover { color: var(--accent); }
  .hero .feature .icon-link:hover { color: var(--white); opacity: 0.65; }
}

/* ---------- Pantallas bajas (móvil) ---------- */
@media (max-height: 640px) {
  .hero { padding-bottom: 10px; }
  .hero__content { gap: 10px; }
  .hero__top { gap: 6px; }
  .feature__line { min-height: 32px; }
  .nl-inline__label { display: none; }
}

/* ---------- Tablet vertical: más aire ---------- */
@media (min-width: 768px) and (min-height: 900px) {
  .hero { padding-bottom: 28px; }
  .hero__content { gap: 22px; }
  .hero__tagline { font-size: 16px; }
}

/* ==========================================================================
   Escritorio (y teléfonos en horizontal): contenido a la izquierda, video a la derecha
   ========================================================================== */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 480px) {
  .site-main.home { padding: 0 var(--gutter); }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--gutter);
    padding: 6px 0 10px;
    color: var(--ink);
  }

  .hero__media {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
  }
  .hero__media .scrim { height: 32%; }
  .hero__caption { top: auto; bottom: 6px; left: 10px; }
  .hero__media .sound-toggle { right: 6px; }

  .hero__content {
    grid-column: 1;
    grid-row: 1;
    justify-content: space-between;
    gap: 18px;
    padding-top: 4px;
  }
  .hero__top { gap: 12px; }
  .hero__tagline { color: var(--ink); }
  .hero .lang-flag { color: var(--accent); }

  .feature { max-width: 560px; }
  .feature__line + .feature__line { border-top-color: var(--line); }

  .hero__bottom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 560px;
  }
  .hero .field::placeholder { color: var(--muted); }
  .hero .field:focus { border-color: var(--accent); }
  .hero .nl-form__msg { color: var(--accent); }
  .hero__check { color: var(--accent); }
  .hero .feature .icon-link:hover { color: var(--accent); opacity: 1; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .hero__tagline,
  .nl-inline__label,
  .hero__more { display: none !important; }
  .hero { padding: 4px 0 6px; }
  .hero__content { gap: 6px; padding-top: 0; }
  .hero__top { gap: 4px; }
  .feature__line { min-height: 30px; }
}

@media (min-width: 1440px) {
  .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
  .hero__tagline { font-size: 16px; }
}