/* ==========================================================================
   Responsive overrides — complementa Bootstrap 5 grid
   ========================================================================== */

/* ---------- Tablet (md: 768px–991px) — Figma: 744px ---------- */
@media (max-width: 991.98px) {
  /* Container-xl — Figma: 32px padding sides (680px content inside 744px) */
  .container-xl {
    padding-right: 32px;
    padding-left: 32px;
  }

  .mobile-menu__panel {
    width: 100%;
  }

  /* Header — Figma tablet contact (251:6192): Frame 48 y:268, title y:120, font:32px, width:345 */
  /* Header height: 228px (268 - 40 topbar) for canal variant; homepage uses 321px for channels space */
  .header {
    height: 321px; /* homepage with channels: 361 - 40 */
  }

  .header--canal {
    height: 228px; /* canal/contact: 268 - 40 */
  }

  .header--canal .header__title {
    top: 80px; /* y:120 - 40 topbar */
    font-size: 32px;
    width: 345px;
    max-width: calc(100% - 64px);
  }

  .header__background {
    height: 700px;
  }

  .header__title {
    font-size: 32px;
    width: 345px;
    max-width: calc(100% - 64px);
    top: 80px;
  }

  /* Nav hidden on tablet, hamburger visible (Bootstrap d-lg-none/d-lg-flex handles this) */
  .nav-main {
    display: none !important;
  }

  /* Hamburger visible on tablet */
  .nav-toggle {
    display: flex !important;
  }

  /* Channels — Figma: x:32, width:680, each card height:89px */
  .channels {
      top: 213px;
      width: calc(100% - 67px);
      max-width: calc(100% - 31px);
  }


  .channels__link {
    height: 89px;
    border-radius: var(--rtp-radius-sm);
  }

  .channels__logo {
    max-width: 100px;
    height: 24px;
  }

  /* Site main — Figma: Frame 48, border-radius:24px */
  .site-main {
    border-radius: 24px 24px 0 0;
  }

  /* About — Figma: Frame 59, x:32, width:680, gap:32px, padding:32px 0 0 */
  .about {
    padding: 32px 0 32px;
    max-width: inherit;
    width: 100%;
    margin: 0 auto;
}

  .about__block {
    margin-bottom: 40px;
  }

  .about__block:last-child {
    margin-bottom: 0;
  }

  .about__block h2 {
    margin-bottom: 12px;
  }

  /* Hero — Figma: height:347 */
  .hero {
    height: 347px;
  }

  /* Satellites glass card — Figma: Frame 43, width:744, radius:32, blur:150 */
  /* 32px padding only — no extra from container-xl */
  .satellites {
    margin: -80px 0 0;
    padding: 32px 32px 71px 32px;
    border-radius: 32px;
    max-width: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(150px);
  }
  .container.satellites-container {
      padding: 0;
  }
  /* Map — Figma: 680×339, radius:20 (680 = 744 - 32*2) */
  .satellites__map {
    height: 339px;
    aspect-ratio: auto;
    border-radius: 20px !important;
    margin: 0 !important;
    max-width: 100%;
    width: 100%;
  }

  /* Row — Figma: Frame 80, row, gap:20, gap:32 from map */
  .satellites .row {
    padding: 0;
    gap: 20px;
    column-gap: 20px;
    flex-wrap: nowrap;
    margin-top: 32px !important;
  }

  /* Zones — Figma: Frame 34, width:213, column, gap:20 */
  .satellites .row > .col-12.col-md-4.col-lg-3 {
    flex: 0 0 213px;
    width: 213px;
  }

  /* Info — Figma: Frame 35, fill width */
  .satellites .row > .col-12.col-md-8.col-lg-9 {
    flex: 1;
    width: auto;
    max-width: none;
  }

  .zones {
    padding: 0;
  }

  .zones__list {
    gap: 20px !important;
  }

  .zones__list .zones__item button,
  .zones__list .zones__item .zones__link {
    font-size: 20px;
    font-weight: 300;
    padding: 12px 0 24px;
  }

  .zones__list .zones__item--active button,
  .zones__list .zones__item--active .zones__link {
    font-size: 20px;
    font-weight: 700;
    padding: 12px 32px 24px;
  }

  /* Satellite info — Figma: Frame 35, gap:24, padding:12px 0 0 */
  .satellite-info {
    padding: 12px 0 0;
    gap: 24px;
    max-width: 100%;
  }

  .satellite-info__title {
    font-size: 18px;
  }

  .satellite-info__specs {
    max-width: 330px;
  }

  .satellite-info__specs dt,
  .satellite-info__specs dd {
    font-size: 16px;
  }

  .satellite-info__emission-block h3,
  .satellite-info__pids {
    font-size: 16px;
  }

  .satellite-info__emissions {
    max-width: 100%;
  }

  .satellite-info__emission-block {
    max-width: 228px;
  }

  /* Coverage map — Figma: fill width, height:242, radius:16 */
  .satellite-info__coverage {
    height: 242px;
    max-width: 100%;
    aspect-ratio: auto;
  }
}

/* ---------- Mobile (sm: 576px) — Figma: 393px ---------- */
/* Frame 59 (Site main inner): width:393, padding:32px 24px 0, gap:40 */
@media (max-width: 575.98px) {

  /* Container — Figma: 24px padding sides */
  .container-xl {
    padding-right: 24px;
    padding-left: 24px;
  }

  /* Header — Figma: title at x:24, y:136, font:32px, width:345 */
  .header {
    height: 236px; /* 276 - 40 (topbar) */
  }

  .header__title {
    font-size: 32px;
    width: 345px;
    max-width: calc(100% - 48px);
    top: 96px; /* 136 - 40 (topbar) */
    padding: 0;
  }

  .header--canal .header__title {
    top: 96px;
    font-size: 32px;
    width: 345px;
  }

  .channels {
    display: none;
  }

  /* Hero — Figma: 393×333 */
  .hero {
    height: 333px;
  }

  /* Site main — radius:24 */
  .site-main {
    border-radius: 24px 24px 0 0;
  }

  /* About — Figma: Frame 46, width:345, column, gap:56 */
  /* Wrapper Frame 59: padding:32px 24px 0, gap:40 between channels grid and about */
  .about {
    padding: 32px 0 0;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Channels mobile grid — Figma: Frame 14, 2x2, gap:20, height:93, radius:16 */
  .channels-mobile {
    margin-bottom: 40px; /* gap:40 from Frame 59 */
  }

  .channels-mobile__grid {
    gap: 20px;
  }

  .channels-mobile__link {
    height: 93px;
    border-radius: 16px;
  }

  .channels-mobile__logo {
    max-width: 100px;
    height: 24px;
  }

  /* About blocks — Figma: Frame 46 gap:56 between blocks, Frame 32/33 gap:12 inside */
  .about__block {
    margin-bottom: 56px;
  }

  .about__block:last-child {
    margin-bottom: 0;
  }

  .about__block h2 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .about__block p {
    font-size: 18px;
    line-height: 160%;
  }

  /* Satellites glass card — Figma: Frame 43, width:393, radius:32, blur:150 */
  /* Inner Frame 79: padding:24px 24px 24px 24px, gap:32 (calc x:24, y:24, width:345) */
  .satellites {
    margin: -64px 0 56px;
    padding: 24px;
    border-radius: 32px;
    max-width: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(150px);
  }

  /* Map — Figma: image 4, fill width, height:172, radius:16 */
  .satellites__map {
    height: 172px;
    aspect-ratio: auto;
    border-radius: 16px !important;
    margin: 0 !important;
    max-width: 100%;
    width: 100%;
  }

  /* Row — Figma: column inside, gap:32 from map */
  .satellites .row {
    padding: 0;
    flex-direction: column;
    gap: 32px;
    margin-top: 32px !important;
  }

  .satellites .row > .col-12.col-md-4.col-lg-3 {
    flex: 0 0 auto;
    width: 100%;
  }

  .satellites .row > .col-12.col-md-8.col-lg-9 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  /* Zones — Figma: Frame 61, row, fill width, padding:16px 28px 16px 24px, radius:80 */
  .zones__list {
    display: none !important;
  }

  .zones__select-wrapper {
    display: block !important;
  }

  .zones__select {
    border-radius: 80px;
    padding: 16px 28px 16px 24px;
    font-size: 16px;
    font-weight: 500;
  }

  /* Satellite info — Figma: Frame 35, column, gap:24, fill width */
  .satellite-info {
    max-width: 100%;
    padding: 0;
    gap: 24px;
  }

  /* Zone title — Figma: bold 32px center #1A1A1A */
  .satellite-info__zone-title {
    font-size: 24px;
    font-weight: 800;
    text-align: left!important;
    color: var(--rtp-dark);
  }

  /* Title satellite — Figma: bold 18px/120% */
  .satellite-info__title {
    font-size: 18px;
  }

  /* Specs — Figma: width:330, font:16px */
  .satellite-info__specs {
    max-width: 330px;
  }

  .satellite-info__specs dt,
  .satellite-info__specs dd {
    font-size: 16px;
  }

  /* Emissions — Figma: column, width:228, font:16px */
  .satellite-info__emissions {
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
  }

  .satellite-info__emission-block {
    max-width: 228px;
  }

  .satellite-info__emission-block h3,
  .satellite-info__pids {
    font-size: 16px;
  }

  /* Coverage map — Figma: fill width, height:187, radius:16 */
  .satellite-info__coverage {
    height: 187px;
    max-width: 100%;
    aspect-ratio: auto;
    border-radius: 16px;
  }
}

/* ==========================================================================
   Page Canal — Responsive
   ========================================================================== */

/* Tablet — Figma: node 251:6143 (744px) */
/* Frame 59: width:680, padding:32px 0, gap:64px between sections */
@media (max-width: 991.98px) {
  /* Intro — Figma: Frame 51, row, gap:20, fill width (NOT stacked) */
  .canal-intro {
    padding: 32px 0 0;
    margin-bottom: 0;
  }

  .canal-intro__inner {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .canal-intro__logo {
    width: 278px;
    height: 156px;
    flex-shrink: 0;
  }

  .canal-intro__desc {
    max-width: 100%;
    font-size: 18px;
    line-height: 150%;
    flex: 1;
  }

  /* Content — Figma: Frame 50, gap:32px, gap:64 from intro */
  .canal-content {
    padding: 64px 0 0;
  }

  .canal-content .container-xl {
    max-width: 100%;
    padding-right: 32px;
    padding-left: 32px;
  }

  .canal-content__block {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .canal-content__block + .canal-content__video {
    margin-top: 32px;
  }

  /* Frame 33 — gap:12px between title and text */
  .canal-content__block h2 {
    margin-bottom: 12px;
  }

  /* Video — Figma: Rectangle 16, fill width, height:380.68, radius:24 */
  .canal-content__video {
    margin: 0 0 32px;
    max-width: 100%;
  }

  .canal-content__video-placeholder {
    padding-bottom: 56%; /* aspect ratio ~16:9 */
    height: 0;
    border-radius: var(--rtp-radius-lg);
  }

  .canal-content__distribution {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Info — Figma: Frame 52, gap:24, gap:64 from content */
  .canal-info {
    padding: 64px 0 0;
  }

  .canal-info__wrapper {
    max-width: 100%;
    padding: 0;
  }

  .canal-info h2 {
    margin-bottom: 24px;
  }

  /* Frame 57 — row, gap:20, 3 columns fill */
  .canal-info__grid {
    flex-wrap: nowrap;
    gap: 20px;
  }

  .canal-info__col {
    flex: 1;
    min-width: 0;
  }

  /* Other channels — Figma: Frame 53, gap:20, padding-top:24, gap:64 from info */
  .canal-others {
    padding: 64px 0 32px;
  }

  .canal-others .container-xl {
    max-width: 100%;
    padding-right: 32px;
    padding-left: 32px;
  }

  .canal-others__list {
    padding: 24px 0 0;
    gap: 20px;
    flex-wrap: nowrap;
  }

  .canal-others__link {
    border-radius: var(--rtp-radius-sm);
    height: 89px;
    aspect-ratio: auto;
  }

  .canal-others__link img {
    max-width: 90px;
    height: 24px;
  }

  /* ==========================================================================
     Page: Contactos — Tablet — Figma: node 251:6192 (744px)
     Frame 59: width:680, padding:32px 0, gap:72 between sections
     Frame 64: column, gap:48
     Frame 63: gap:20, Name+Email STACKED (column, not row)
     ========================================================================== */
  .contact .container-xl {
    max-width: 100%;
    padding-right: 32px;
    padding-left: 32px;
  }

  .contact__inner {
    max-width: 100%;
    gap: 48px;
    padding: 32px 0 0;
  }

  /* Intro — Figma: fill width, font:18/160% #1A1A1A */
  .contact__intro {
    max-width: 100%;
  }

  /* Frame 50: form + button, align:center, gap:40 */
  .contact__form,
  .fsform-container {
    gap: 40px;
  }

  /* Frame 63: fields, gap:20, fill width */
  .contact__fields {
    gap: 20px;
  }

  /* Frame 46: Name + Email STACKED on tablet (column, not row) */
  .contact__row {
    flex-direction: column;
    gap: 20px;
  }

  /* Submit button — Figma tablet: padding:16px 24px (vs 12px desktop) */
  .contact__submit {
    padding: 16px 24px;
  }

  /* Other channels after contact — Frame 59 gap:72 */

}

/* Mobile — Figma: node 251:5869 (393px) */
/* Frame 59: width:393, padding:32px 24px 56px, gap:56px */
@media (max-width: 575.98px) {
  /* Container — Figma: 24px padding sides */
  .container-xl {
    padding-right: 24px;
    padding-left: 24px;
  }

  /* Intro — Figma: Frame 51, column, gap:16, fill width */
  .canal-intro {
    padding: 32px 0 0;
    margin-bottom: 0;
  }

  .canal-intro__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-width: 100%;
    padding: 0;
  }

  /* Logo — Figma: fill width, height:194.77, radius:18 */
  .canal-intro__logo {
    width: 100%;
    max-width: 100%;
    height: 195px;
    border-radius: 18px;
  }

  .canal-intro__logo-img {
    max-width: 200px;
    height: 48px;
  }

  /* Desc — Figma: fill width, font:18/160%, color:#1A1A1A */
  .canal-intro__desc {
    max-width: 100%;
    font-size: 18px;
    line-height: 160%;
    color: var(--rtp-dark);
  }

  /* Canal content — Figma: Frame 50, column, gap:24, fill width */
  .canal-content {
    padding: 56px 0 0;
  }

  .canal-content .container-xl {
    max-width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }

  /* Frame 33 — gap:16px between title and text */
  .canal-content__block {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .canal-content__block h2 {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .canal-content__block p {
    font-size: 18px;
  }

  /* Frame 46 — gap:96px between text and content. Block→video gap should be 96px in figma but figma shows 24 (frame 50 gap). Use 24px which is parent gap */
  .canal-content__block + .canal-content__video {
    margin-top: 24px;
  }

  /* Video — Figma: Rectangle 18, fill width, height:193, radius:16 */
  .canal-content__video {
    margin: 0 0 24px;
    max-width: 100%;
  }

  .canal-content__video-placeholder {
    padding-bottom: 56%; /* aspect ratio ~16:9 */
    height: 0;
    border-radius: var(--rtp-radius-md);
  }

  .canal-content__distribution {
    font-size: 18px;
    color: var(--rtp-text);
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Info — Figma: Frame 52, column, gap:20 */
  .canal-info {
    padding: 56px 0 0;
  }

  .canal-info h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  /* Frame 57 — column, gap:24, list of info items stacked */
  .canal-info__grid {
    flex-direction: column;
    gap: 24px;
  }

  .canal-info__col {
    flex: 1 1 100%;
    gap: 24px;
  }

  .canal-info__col dt,
  .canal-info__col dd {
    font-size: 18px;
  }

  /* Button — Figma: padding:16px 24px */
  .btn-outline {
    padding: 16px 24px;
    display: inline-block;
    line-height: normal;
  }

  /* Other channels — Figma: Frame 14, column with grid 2x2, gap:20, padding:8px 0 */
  .canal-others {
    padding: 56px 0 56px;
  }

  .canal-others .container-xl {
    max-width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }

  .canal-others__list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 8px 0;
  }

  .canal-others__link {
    border-radius: 16px;
    aspect-ratio: auto;
    height: 93px;
  }

  .canal-others__link img {
    max-width: 100px;
    height: 24px;
  }
}