/* ============================================================
   HADS LIVE — Componentes UI
   "El entretenimiento en vivo sin límites"
   Fase 3
   ============================================================ */

/* ── NAVBAR COMPONENT ──────────────────────────────────────── */
.navbar__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--navbar-height);
}

.navbar__logo {
  font-family:    var(--font-title);
  font-size:      1.8rem;
  letter-spacing: 0.05em;
  color:          var(--color-white);
  display:        flex;
  align-items:    center;
  gap:            var(--space-xs);
}

.navbar__logo span {
  color: var(--color-red-primary);
}

.navbar__cta {
  font-family:    var(--font-ui);
  font-size:      var(--fs-small);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── BOTONES ───────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-xs);
  font-family:     var(--font-ui);
  font-weight:     700;
  font-size:       var(--fs-small);
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  cursor:          pointer;
  border:          none;
  outline:         none;
  text-decoration: none;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast),
                   transform var(--transition-fast),
                   box-shadow var(--transition-fast);
  white-space:     nowrap;
}

.btn:active {
  transform: scale(0.97);
}

/* Botón primario — rojo sólido */
.btn--primary {
  background-color: var(--color-red-primary);
  color:            var(--color-white);
  padding:          0.85rem 2.2rem;
  clip-path:        polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn--primary:hover {
  background-color: var(--color-red-bright);
  color:            var(--color-white);
  box-shadow:       0 0 24px var(--color-red-glow);
  transform:        translateY(-2px);
}

/* Botón outline — borde rojo */
.btn--outline {
  background-color: transparent;
  color:            var(--color-red-primary);
  border:           1px solid var(--color-red-primary);
  padding:          0.8rem 2rem;
  clip-path:        polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn--outline:hover {
  background-color: var(--color-red-primary);
  color:            var(--color-white);
  box-shadow:       0 0 24px var(--color-red-glow);
  transform:        translateY(-2px);
}

/* Botón grande — hero */
.btn--lg {
  font-size: 1rem;
  padding:   1rem 3rem;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

/* ── LIVE BADGE ────────────────────────────────────────────── */
.live-badge {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-family: var(--font-ui);
  font-size:   var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:       var(--color-white);
  background:  rgba(229, 9, 20, 0.15);
  border:      1px solid var(--color-red-primary);
  padding:     4px 12px;
  border-radius: var(--radius);
}

.live-badge__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-red-primary);
  flex-shrink:   0;
  animation:     pulse-dot 1.5s ease-in-out infinite;
}

/* ── HERO SECTION ──────────────────────────────────────────── */
.hero {
  position:        relative;
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  overflow:        hidden;
  padding:         var(--space-xl) 0;
}

.hero__bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  background: var(--color-bg-primary);
}

.hero__grid {
  position:           absolute;
  inset:              0;
  background-image:   linear-gradient(rgba(229, 9, 20, 0.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(229, 9, 20, 0.07) 1px, transparent 1px);
  background-size:    60px 60px;
  animation:          grid-drift 20s linear infinite;
}

.hero__content {
  position:  relative;
  z-index:   1;
  max-width: 800px;
}

.hero__badge {
  margin-bottom: var(--space-md);
}

.hero__title {
  font-size:      var(--fs-hero);
  color:          var(--color-white);
  line-height:    0.9;
  margin-bottom:  var(--space-sm);
}

.hero__title span {
  color: var(--color-red-primary);
}

.hero__slogan {
  font-family:    var(--font-ui);
  font-size:      clamp(1rem, 2.5vw, 1.4rem);
  font-weight:    600;
  color:          var(--color-gray-light);
  margin-bottom:  var(--space-lg);
  letter-spacing: 0.05em;
}

.hero__actions {
  display:     flex;
  gap:         var(--space-sm);
  justify-content: center;
  flex-wrap:   wrap;
}

/* ── BENEFITS SECTION ──────────────────────────────────────── */
.benefits {
  padding: var(--space-lg) 0;
}

.section__header {
  text-align:    center;
  margin-bottom: var(--space-lg);
}

.section__title {
  font-size:    var(--fs-h2);
  color:        var(--color-white);
  margin-bottom: var(--space-xs);
}

.section__title span {
  color: var(--color-red-primary);
}

.section__subtitle {
  font-family: var(--font-ui);
  font-size:   1rem;
  font-weight: 600;
  color:       var(--color-gray);
  letter-spacing: 0.05em;
}

.benefits__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--space-md);
}

.benefit-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  padding:       var(--space-md);
  border-radius: var(--radius-lg);
  transition:    border-color var(--transition-normal),
                 box-shadow var(--transition-normal),
                 transform var(--transition-normal);
  cursor:        default;
}

.benefit-card:hover {
  border-color: var(--color-red-primary);
  box-shadow:   0 0 30px var(--color-red-glow);
  transform:    translateY(-4px);
}

.benefit-card__icon {
  font-size:     2.5rem;
  margin-bottom: var(--space-sm);
}

.benefit-card__title {
  font-family:   var(--font-ui);
  font-size:     var(--fs-h3);
  font-weight:   700;
  color:         var(--color-white);
  margin-bottom: var(--space-xs);
}

.benefit-card__desc {
  font-size:  var(--fs-small);
  color:      var(--color-gray);
  line-height: 1.7;
}

/* ── CATEGORIES SECTION ────────────────────────────────────── */
.categories {
  padding:          var(--space-lg) 0;
  background-color: var(--color-bg-secondary);
}

.categories__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   var(--space-sm);
}

.category-card {
  background:      var(--color-bg-card);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius);
  padding:         var(--space-md) var(--space-sm);
  text-align:      center;
  cursor:          pointer;
  transition:      border-color var(--transition-fast),
                   box-shadow var(--transition-fast),
                   transform var(--transition-fast);
  text-decoration: none;
}

.category-card:hover {
  border-color: var(--color-red-primary);
  box-shadow:   0 0 20px var(--color-red-glow);
  transform:    scale(1.03);
}

.category-card__icon {
  font-size:     2rem;
  margin-bottom: var(--space-xs);
}

.category-card__label {
  font-family:    var(--font-ui);
  font-size:      var(--fs-small);
  font-weight:    700;
  color:          var(--color-gray-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── TESTIMONIALS SECTION ──────────────────────────────────── */
.testimonials {
  padding: var(--space-lg) 0;
}

.testimonials__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--space-md);
}

.testimonial-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-md);
  transition:    border-color var(--transition-normal);
}

.testimonial-card:hover {
  border-color: rgba(229, 9, 20, 0.4);
}

.testimonial-card__text {
  font-size:     var(--fs-small);
  color:         var(--color-gray-light);
  line-height:   1.8;
  margin-bottom: var(--space-sm);
  font-style:    italic;
}

.testimonial-card__text::before {
  content: '"';
  color:   var(--color-red-primary);
  font-size: 1.5rem;
  font-style: normal;
  display: block;
  margin-bottom: var(--space-xs);
}

.testimonial-card__author {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
}

.testimonial-card__avatar {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    var(--color-red-primary);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-ui);
  font-weight:   700;
  font-size:     var(--fs-small);
  color:         var(--color-white);
  flex-shrink:   0;
}

.testimonial-card__name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size:   var(--fs-small);
  color:       var(--color-white);
}

.testimonial-card__country {
  font-size: var(--fs-tiny);
  color:     var(--color-gray);
}

/* ── CTA SECTION ───────────────────────────────────────────── */
.cta-section {
  background:  var(--color-red-primary);
  padding:     var(--space-xl) 0;
  text-align:  center;
  position:    relative;
  overflow:    hidden;
}

.cta-section::before {
  content:            '';
  position:           absolute;
  inset:              0;
  background-image:   linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size:    40px 40px;
}

.cta-section__content {
  position: relative;
  z-index:  1;
}

.cta-section__title {
  font-size:     var(--fs-h2);
  color:         var(--color-white);
  margin-bottom: var(--space-sm);
}

.cta-section__sub {
  font-family:   var(--font-ui);
  font-size:     1.1rem;
  font-weight:   600;
  color:         rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-md);
  letter-spacing: 0.05em;
}

.cta-section .btn--primary {
  background-color: var(--color-white);
  color:            var(--color-red-primary);
}

.cta-section .btn--primary:hover {
  background-color: var(--color-bg-primary);
  color:            var(--color-white);
  box-shadow:       0 0 30px rgba(0, 0, 0, 0.4);
}

/* ── FOOTER COMPONENT ──────────────────────────────────────── */
.footer__inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-sm);
  text-align:      center;
}

.footer__logo {
  font-family:    var(--font-title);
  font-size:      1.5rem;
  letter-spacing: 0.05em;
}

.footer__logo span {
  color: var(--color-red-primary);
}

.footer__links {
  display:  flex;
  gap:      var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.footer__links a {
  font-family:    var(--font-ui);
  font-size:      var(--fs-tiny);
  font-weight:    600;
  color:          var(--color-gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:     color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-red-primary);
}

.footer__legal {
  font-size: var(--fs-tiny);
  color:     var(--color-gray);
}

.footer__badge {
  display:       inline-block;
  font-family:   var(--font-ui);
  font-size:     var(--fs-tiny);
  font-weight:   700;
  color:         var(--color-red-primary);
  border:        1px solid var(--color-red-primary);
  padding:       2px 8px;
  border-radius: var(--radius);
  letter-spacing: 0.1em;
}

/* ── RESPONSIVE COMPONENTS ─────────────────────────────────── */
@media (max-width: 768px) {
  .hero__actions {
    flex-direction: column;
    align-items:    center;
  }

  .navbar__logo {
    font-size: 1.5rem;
  }

  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__links {
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .btn--lg {
    width:   100%;
    padding: 1rem;
  }
}

/* ── MODEL CARDS ───────────────────────────────────────────── */
.models__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   var(--space-sm);
  margin-bottom:         var(--space-md);
}

.model-card {
  display:         block;
  background:      var(--color-bg-card);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  overflow:        hidden;
  text-decoration: none;
  transition:      border-color var(--transition-fast),
                   box-shadow var(--transition-fast),
                   transform var(--transition-fast);
}

.model-card:hover {
  border-color: var(--color-red-primary);
  box-shadow:   0 0 24px var(--color-red-glow);
  transform:    translateY(-4px);
}

.model-card__thumb {
  position:    relative;
  aspect-ratio: 4 / 3;
  overflow:    hidden;
  background:  var(--color-bg-secondary);
}

.model-card__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.model-card:hover .model-card__thumb img {
  transform: scale(1.05);
}

.model-card__live {
  position:       absolute;
  top:            8px;
  left:           8px;
  display:        flex;
  align-items:    center;
  gap:            4px;
  background:     var(--color-red-primary);
  color:          var(--color-white);
  font-family:    var(--font-ui);
  font-size:      var(--fs-tiny);
  font-weight:    700;
  letter-spacing: 0.1em;
  padding:        2px 8px;
  border-radius:  var(--radius);
}

.model-card__live .live-badge__dot {
  width:  6px;
  height: 6px;
}

.model-card__viewers {
  position:    absolute;
  bottom:      8px;
  left:        8px;
  background:  rgba(0, 0, 0, 0.7);
  color:       var(--color-white);
  font-family: var(--font-ui);
  font-size:   var(--fs-tiny);
  font-weight: 600;
  padding:     2px 8px;
  border-radius: var(--radius);
}

.model-card__hd {
  position:       absolute;
  bottom:         8px;
  right:          8px;
  background:     rgba(0, 0, 0, 0.7);
  color:          var(--color-red-primary);
  font-family:    var(--font-ui);
  font-size:      var(--fs-tiny);
  font-weight:    700;
  letter-spacing: 0.1em;
  padding:        2px 6px;
  border-radius:  var(--radius);
  border:         1px solid var(--color-red-primary);
}

.model-card__info {
  padding:     var(--space-xs) var(--space-sm);
  display:     flex;
  align-items: center;
  justify-content: space-between;
}

.model-card__name {
  font-family:   var(--font-ui);
  font-size:     var(--fs-small);
  font-weight:   700;
  color:         var(--color-white);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.models__cta {
  text-align: center;
  margin-top: var(--space-md);
}

/* ── RESPONSIVE MODEL GRID ─────────────────────────────────── */
@media (max-width: 768px) {
  .models__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .models__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
}

/* ── HERO SLIDER ───────────────────────────────────────────── */
.hero {
  position:   relative;
  min-height: 100vh;
  overflow:   hidden;
  display:    flex;
  align-items: center;
  justify-content: center;
}

.hero-slider {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  z-index:  0;
}

.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  width:  100%;
  height: 100%;
}

.hero-slider__img {
  width:               100%;
  height:              100%;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  transform:           scale(1.05);
  animation:           hero-zoom 6s ease-in-out infinite alternate;
}

@keyframes hero-zoom {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.12); }
}

.hero__overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.70) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.hero__content-wrap {
  position:        relative;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  width:           100%;
}

.hero__content {
  max-width: 800px;
}