/* reels — generado por refactor modular (verbatim de styles.css) */

/* Fondo negro (diseño Figma): gradiente neutro muy oscuro en vez del navy #0b2b54. */
.reels { background: linear-gradient(120deg, #05080e 0%, #090b11 60%, #05080e 100%); overflow: hidden; }
.reels__inner { display: flex; align-items: center; gap: 60px; padding: var(--sp) 0; min-height: clamp(420px, 40vw, 520px); }
.reels__left { flex: 1 1 42%; max-width: 430px; }
.reels__title { font-family: var(--font-sora); font-weight: 800; font-size: 36px; line-height: 1.12; margin-bottom: 16px; }
.reels__subtitle { font-family: var(--font-mont); font-weight: 600; font-size: 18px; margin-bottom: 18px; }
.reels__text { font-family: var(--font-mont); font-size: 13px; line-height: 1.7; color: var(--white-75); margin-bottom: 30px; }
.reels__right { flex: 1 1 55%; }
.reels__tabs { display: flex; gap: 14px; justify-content: center; margin-bottom: 34px; }
.reels__tab { font-family: var(--font-sora); font-size: 14px; color: var(--gold); background: transparent; border: 1px solid var(--gold); border-radius: 30px; padding: 9px 26px; cursor: pointer; transition: background .2s, color .2s; }
.reels__tab--active { background: var(--gold); color: #000; font-weight: 600; }
.reels__phones { display: flex; align-items: center; justify-content: center; gap: 20px; }
.reels__phone { width: 180px; height: 380px; border-radius: 16px; background: linear-gradient(150deg, #d6dedb 0%, #7f8c89 55%, #cdd5d2 100%); flex-shrink: 0; }
.reels__phone--mid { width: 210px; height: 430px; }
.reels__nav { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.reels__dots { display: flex; gap: 8px; }
.reels__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: none; padding: 0; cursor: pointer; transition: background .2s, width .2s; }
.reels__dot--active { background: var(--gold); width: 24px; border-radius: 5px; }
.archivo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  width: 100%;
  height: 460px;
}
.archivo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  border: 1px solid rgba(255, 200, 0, 0.12);
}
.archivo__img--a { grid-column: 1; grid-row: 1; }
.archivo__img--b { grid-column: 1; grid-row: 2; }
.archivo__img--c { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 900px) {
  .reels__inner { flex-direction: column; gap: 40px; padding: var(--sp) 0; }
  .reels__left { max-width: none; }
  .reels__phones {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: 0 16px;
    padding: 6px 4px 10px;
  }
  .reels__phones::-webkit-scrollbar { display: none; }
  .reels__phone { scroll-snap-align: center; }
  .reels__phone--mid { height: 380px; }
  .reels__nav { display: flex; }
}
@media (max-width: 600px) {
  .reels__title { font-size: 28px; }
  .reels__phone { width: 140px; height: 300px; }
  .reels__phone--mid { width: 160px; height: 340px; }
}
@media (max-width: 860px) {
  .archivo__grid { height: 380px; gap: 12px; }
}