/* ══════════════════════════════════════════════════════════
   BRUNIO WHO — LA RADIO DE BOLSILLO  (/radio/)
   ──────────────────────────────────────────────────────────
   Pensada para el teléfono y para que alguien la mande por
   WhatsApp: una sola pantalla, el receptor grande, la lista de
   frecuencias, y dos botones.

   Hereda style.css entero porque el receptor ES el de la home,
   sacado del mismo HTML. Acá sólo va el envase.
   ══════════════════════════════════════════════════════════ */

.bolsillo{
  background:var(--black);
  min-height:100svh;min-height:100dvh;
  display:flex;
}

.pkt{
  width:100%;max-width:520px;margin:auto;
  padding:clamp(20px,5vw,34px) clamp(16px,5vw,26px) calc(clamp(24px,5vh,40px) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:clamp(18px,3vh,26px);
  position:relative;isolation:isolate;
}
/* la atmósfera de la temporada, apagada: la protagonista es la radio */
.pkt::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../assets/img/hero-s02.jpg") 50% 22%/cover no-repeat;
  opacity:.16;
}
.pkt::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,8,.72) 0%,rgba(7,8,8,.94) 62%,var(--black) 100%);
}

.pkt__top{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pkt__logo img{width:clamp(104px,30vw,132px);height:auto;display:block}
.pkt__kick{
  font-family:var(--f-ui);font-weight:500;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--radio-gold);
}

/* el receptor viene de la home: acá deja de ser una columna angosta
   al costado del título y pasa a ser lo único que hay */
.pkt .panel--rx{width:100%;padding:clamp(18px,4.6vw,26px)}
.pkt .rx__freq{font-size:clamp(46px,15vw,64px)}

.pkt__h{
  font-family:var(--f-ui);font-weight:500;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gray-muted);
  padding-bottom:9px;border-bottom:1px solid var(--border-dark);margin-bottom:2px;
}

/* la lista de temas, en columna y sin el carrusel horizontal de la home */
.pkt .strip__list{
  display:grid;grid-template-columns:1fr;gap:0;
  overflow:visible;list-style:none;margin:0;padding:0;
}
/* en la home el tema se apila (frecuencia arriba, título abajo) porque la
   cinta es horizontal y angosta. Acá la lista es vertical: entra en una
   línea, y se leen diez temas de un vistazo en vez de cuatro. */
.pkt .tk{
  width:100%;display:flex;flex-direction:row;align-items:center;gap:14px;
  padding:13px 2px;border:0;border-bottom:1px solid var(--border-dark);
  background:none;text-align:left;cursor:pointer;
}
.pkt .tk__f{margin-bottom:0}
.pkt .tk__on{margin-top:0}
.pkt .tk.is-on{background:none}
.pkt .tk__f{
  flex:none;width:52px;font-family:var(--f-ui);font-size:11px;letter-spacing:.1em;
  color:var(--radio-gold);
}
.pkt .tk__n{
  flex:1;min-width:0;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(16px,4.6vw,20px);line-height:1.1;color:var(--white-soft);
}
.pkt .tk.is-on .tk__n{color:var(--white-main)}
.pkt .tk.is-on .tk__f{color:var(--red-bright)}
.pkt .tk__on{
  flex:none;display:none;align-items:center;gap:6px;
  font-family:var(--f-ui);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-bright);
}
.pkt .tk.is-on .tk__on{display:flex}

.pkt__cta{display:flex;flex-direction:column;gap:10px;margin-top:4px}

/* LAS TRES COSAS ──────────────────────────────────────────
   Pasar la frecuencia por WhatsApp, pasarla por donde sea, o
   irse a escuchar el álbum. Un renglón de tres, todas del
   mismo tamaño: ninguna manda sobre las otras.

   Antes era una tarjeta con título y tres botones de
   compartir, más un botón grande aparte para el álbum: media
   pantalla de teléfono para tres acciones que entran en una
   línea. La tarjeta se fue con su título. */
.pkt__vias-l{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.pkt__vias-l li{flex:1 1 0;min-width:0}
.pkt__vias-l li:has(> [hidden]){display:none}
.via{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 6px;border:1px solid var(--border-dark);border-radius:2px;
  background:transparent;cursor:pointer;
  font-family:var(--f-ui);font-weight:500;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gray-muted);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
/* WhatsApp es de relleno; compartir y link son de trazo y traen
   su propio fill="none" en el símbolo, que gana sobre lo heredado. */
.via svg{width:19px;height:19px;fill:currentColor}
.via:hover,.via:focus-visible{color:var(--white-main);border-color:var(--radio-gold)}
.via--wa:hover,.via--wa:focus-visible{color:#25D366;border-color:#25D366}
/* El triángulo va en rojo como el de "Encender la radio": es la única
   de las tres que no comparte nada, y el color lo dice antes que la
   etiqueta. Al pasar el mouse se llena de blanco, como aquel. */
.via--play svg{fill:var(--red-bright)}
.via--play:hover,.via--play:focus-visible{color:var(--white-main);border-color:var(--red-ink)}
.via--play:hover svg,.via--play:focus-visible svg{fill:#fff}
.via[hidden]{display:none}

.pkt__copiado{
  margin-top:11px;
  text-align:center;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--radio-gold);word-break:break-all;
}
.pkt__copiado[hidden]{display:none}

.pkt__pie{
  text-align:center;font-family:var(--f-ui);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--border-light);
}

/* en pantallas grandes no se estira: sigue siendo un objeto de bolsillo */
@media (min-width:720px){
  .pkt{padding-top:clamp(34px,6vh,60px)}
}

/* El receptor se trae puesto un order:1 del hero móvil de la home, que acá
   lo mandaba al final de todo. El orden se fija a mano y explícito, que
   además es el que cuenta la página: la radio primero. */
.pkt__top{order:1}
.pkt .panel--rx{order:2}
.pkt__dial{order:3}
.pkt__cta{order:4}
.pkt__pie{order:5}

/* "Ver el proyecto" es la salida, no una acción: enlace de texto y no un
   tercer botón. Centrado como todo lo demás de la columna. */
.pkt__ver{
  align-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-family:var(--f-ui);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray-muted);
  border-bottom:1px solid var(--border-dark);padding-bottom:3px;
}
.pkt__ver:hover{color:var(--white-main);border-bottom-color:var(--red-main)}