/* Shared alignment for the radio's full-width sections. */
:root {
  --content-width: 1320px;
  --page-gutter: max(clamp(24px, 4vw, 64px), calc((100vw - var(--content-width)) / 2));
  --column-gap: clamp(24px, 4vw, 56px);
  --card-gap: 24px;
  --header-height: 92px;
}
html { scroll-padding-top: var(--header-height); }
.topbar, .energy-hero, .section-pad, .station-strip, .energy-footer, .energy-player {
  padding-inline: var(--page-gutter);
}
.story-chapter-tag { left: var(--page-gutter); right: var(--page-gutter); }
.energy-scroll { left: var(--page-gutter); }
.hero-coordinate { right: var(--page-gutter); }
.story-section { scroll-margin-top: 0; }
.energy-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--column-gap); }
.energy-hero-copy, .energy-hero-art, .section-heading > *, .app-story-stage > *, .contact > * { min-width: 0; }
.energy-hero-art { margin-left: 0; transform: none; padding: 20px 0; }
.energy-hero-art > img { display: block; }
.equalizer { transform: none; }
.frequency-tag { text-align: center; margin-inline: 0; }
.section-heading { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--column-gap); align-items: end; }
.section-heading > p, .video-intro { width: 100%; max-width: 38rem; justify-self: start; }
.section-heading .kicker { margin-top: 0; }
.program-grid, .energy-news-grid { gap: var(--card-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.program-card, .energy-news-card { min-width: 0; }
.program-card { padding: 24px; }
.program-time { min-height: 1.2em; line-height: 1.2; }
.program-card h3 { min-height: 2.4em; }
.program-card .program-eyebrow { margin-top: 26px; }
.program-link { padding-top: 24px; }
.video-rail { width: 100%; margin: 0; padding: 4px 0 16px; gap: var(--card-gap); }
.video-card { min-width: 0; flex: 0 0 calc((100% - 2 * var(--card-gap)) / 3); display: flex; flex-direction: column; }
.video-frame { flex-shrink: 0; }
.video-card-copy { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.video-card-copy > div { min-height: 2.8em; align-items: start; }
.video-card-copy h3 { min-height: 2.2em; line-height: 1.15; margin-top: 12px; }
.video-card-copy > a { margin-top: auto; padding-top: 8px; }
.energy-news-card > img { display: block; }
.news-copy { padding: 24px; }
.energy-traffic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--column-gap); align-items: center; padding: 32px; }
.app-story-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--column-gap); }
.app-story-stage .phone-scene { width: 100%; margin: 0; }
.app-story-stage .phone-note { left: 0; right: 0; bottom: 8px; text-align: center; transform: none; }
.app-store-links { align-items: stretch; }
.store-button { min-width: 160px; justify-content: center; }
#contacto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--column-gap); align-items: start; }
#contacto .contact-form { width: 100%; margin: 0; align-self: start; }
.contact-intro > .kicker { margin-top: 0; }
.contact-form .energy-button { width: 100%; }
.energy-footer { grid-template-columns: 1fr 1.5fr 1fr; gap: var(--column-gap); align-items: start; }
.energy-footer img { display: block; }
.energy-footer p { margin-top: 12px; }
.energy-footer > p { margin-top: 0; }
.energy-footer nav { align-content: start; line-height: 1.6; }
/* Symmetric columns keep play exactly in the middle of the viewport. */
.energy-player { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; }
.player-track, .player-tools { display: flex; align-items: center; gap: 14px; min-width: 0; }
.player-track .player-copy { width: auto; flex: 1; min-width: 0; }
.player-tools { justify-content: flex-end; }
.player-center { display: grid; grid-template-columns: 76px 50px 76px; gap: 14px; align-items: center; }
.player-live { justify-content: flex-end; }
.player-frequency { display: block; }
.player-external { margin: 0; }
@media (min-width: 950px) {
  :root { --header-height: 132px; }
  .topbar > .nav { width: 100%; gap: clamp(12px, 1.4vw, 24px); justify-content: space-between; }
}
@media (min-width: 761px) and (min-height: 651px) and (prefers-reduced-motion: no-preference) {
  .story-motion .app-story-stage { top: var(--header-height); min-height: calc(100svh - var(--header-height) - var(--player-height)); }
  .story-motion .app-story-stage .phone-scene { min-height: calc(100svh - var(--header-height) - var(--player-height) - 12px); }
  .story-motion .app-story-stage .app-screenshot { width: min(240px, calc((100svh - var(--header-height) - var(--player-height) - 88px) * .46)); }
  .story-motion .app-layer { height: min(522px, calc(100svh - var(--header-height) - var(--player-height) - 88px)); width: min(240px, calc((100svh - var(--header-height) - var(--player-height) - 88px) * .46)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .video-card { flex-basis: calc((100% - var(--card-gap)) / 2); }
  .energy-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-time { font-size: clamp(1.4rem, 3.2vw, 2rem); }
  .program-card { padding: 20px; }
  .player-center { grid-template-columns: 54px 50px 54px; gap: 8px; }
  .player-frequency { font-size: .48rem; }
  .player-volume input { width: 70px; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 24px; --column-gap: 28px; --card-gap: 20px; --header-height: 78px; }
  .topbar { padding-inline: 20px; }
  .topbar > .nav { padding-inline: var(--page-gutter); align-items: stretch; gap: 10px; }
  .topbar .nav a { text-align: left; width: 100%; padding: 12px 0; }
  .section-heading, .program-grid, .energy-news-grid, .energy-traffic, .app-story-stage, #contacto, .energy-footer { grid-template-columns: minmax(0, 1fr); }
  .section-heading { align-items: start; }
  .energy-hero { padding-top: 122px; }
  .energy-hero h1 { font-size: clamp(3rem, 12vw, 5rem); }
  .energy-hero-copy .kicker { flex-wrap: wrap; line-height: 1.7; }
  .energy-hero-art { width: 85%; padding: 0 0 20px; }
  .program-card h3 { min-height: 0; }
  .video-card { flex-basis: 100%; }
  .video-card-copy h3 { min-height: 0; }
  .energy-traffic { padding: 24px; }
  .section-tail { flex-wrap: wrap; }
  .app-store-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .store-button { min-width: 0; padding: 12px 8px; gap: 8px; }
  .store-button strong { font-size: .95rem; }
  .store-button small { font-size: .55rem; }
  .energy-footer > p { text-align: left; }
  .energy-player { display: flex; gap: 10px; padding-inline: 16px; }
  .player-track { flex: 1; gap: 10px; }
  .player-center { display: flex; flex: none; }
  .player-live, .player-frequency { display: none; }
  .player-tools { flex: none; }
  .player-copy > span { max-width: 100%; }
}
.app-float-radio { right: 0; transform: translateY(calc((1 - var(--app-spread)) * 16px)); }
.app-float-social { left: 0; transform: translateY(calc((1 - var(--app-spread)) * 16px)); }
