/* Sitio público de Zona Creativos.
   Sin framework y sin JavaScript en la ruta crítica. El sitio anterior cargaba
   44-48 hojas de estilo y 25-28 archivos JS por página; esto es un archivo.

   El sitio es oscuro por decisión de marca, no por preferencia del sistema:
   una sola paleta, la misma para todos. Por eso NO hay bloque
   prefers-color-scheme; si lo hubiera, media pantalla saldría clara y el verde
   de marca perdería el contraste sobre el que está calculado. */

:root {
  /* Fondos, del más oscuro al más claro. */
  --papel: #0d1117;
  --papel-2: #141b24;
  --fondo: #1a222d;

  /* Texto. El principal es blanco casi puro, como pidió Martín. */
  --tinta: #f2f6f8;
  --tinta-2: #c3ccd6;
  --apagado: #8b97a5;

  /* Verde de marca. El tono exacto que dio Martín es el acento; el claro se
     usa para texto sobre fondo oscuro, donde #37a641 se queda corto de
     contraste para texto pequeño. */
  --acento: #37a641;
  --acento-claro: #5fd06b;
  --acento-tinta: #7ee089;
  --acento-suave: #122b16;
  --sobre-acento: #04140a;

  --linea: #222b36;
  --linea-2: #2f3b49;

  --critico: #f0968c;
  --critico-suave: #341916;

  --radio: 10px;
  --ancho: 1180px;
  --lectura: 68ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }
.lectura { max-width: calc(var(--lectura) + 44px); }

a { color: var(--acento-tinta); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--acento); color: #fff; padding: 12px 18px;
}
.saltar:focus { left: 0; }

/* ---------- cabecera ---------- */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--papel); }
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px;
}
.logo {
  font-weight: 700; font-size: 18px; letter-spacing: -.02em;
  color: var(--tinta); text-decoration: none;
}
.nav, .nav-pie { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  display: block; padding: 8px 12px; border-radius: 6px;
  color: var(--tinta-2); text-decoration: none;
  /* En mayusculas, con algo de espaciado: sin el, las mayusculas se apelmazan
     y cuesta mas leerlas que en minusculas. */
  text-transform: uppercase; font-size: 13px; font-weight: 600;
  letter-spacing: .05em;
}
.nav a:hover { background: var(--papel-2); color: var(--tinta); }

.cinta-borrador {
  background: #92400e; color: #fff; text-align: center;
  padding: 9px 16px; font-size: 14px; font-weight: 500;
}

/* ---------- migas ---------- */
.migas { border-bottom: 1px solid var(--linea); background: var(--papel-2); }
.migas ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 10px 0; font-size: 13.5px; color: var(--apagado);
}
.migas li + li::before { content: "›"; margin-right: 6px; color: var(--linea); }
.migas a { color: var(--apagado); text-decoration: none; }
.migas a:hover { color: var(--acento-tinta); text-decoration: underline; }
.migas [aria-current] { color: var(--tinta-2); }

/* ---------- contenido ---------- */
.contenido { padding: 40px 0 72px; }
.cabecera-articulo h1 {
  font-size: clamp(28px, 5vw, 42px); line-height: 1.12; letter-spacing: -.025em;
  font-weight: 700; margin: 0 0 12px; text-wrap: balance;
}
.firma { color: var(--apagado); font-size: 14.5px; margin: 0 0 8px; }
.firma .sep { margin: 0 4px; color: var(--linea); }

/* Respuesta directa: el bloque que un motor de respuestas puede citar. */
.respuesta-directa {
  background: var(--acento-suave); border-left: 3px solid var(--acento);
  padding: 18px 22px; border-radius: 0 8px 8px 0; margin: 26px 0;
}
.respuesta-directa p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--tinta); }

.destacada { margin: 28px 0; }
.destacada img { width: 100%; height: auto; border-radius: 8px; display: block; }

.cuerpo { font-size: 17.5px; }
.cuerpo > * + * { margin-top: 1.1em; }
.cuerpo h2 {
  font-size: clamp(22px, 3.2vw, 28px); line-height: 1.2; letter-spacing: -.018em;
  margin-top: 2em; margin-bottom: .4em; text-wrap: balance;
}
.cuerpo h3 { font-size: 20px; margin-top: 1.7em; margin-bottom: .35em; }
.cuerpo p { margin: 0; }
.cuerpo ul, .cuerpo ol { padding-left: 1.3em; }
.cuerpo li + li { margin-top: .4em; }
.cuerpo li::marker { color: var(--acento); }
.cuerpo img { max-width: 100%; height: auto; border-radius: 6px; }
.cuerpo blockquote {
  border-left: 3px solid var(--linea); padding-left: 18px;
  margin-left: 0; color: var(--tinta-2); font-style: italic;
}
.cuerpo code {
  background: var(--papel-2); padding: .12em .4em; border-radius: 3px;
  font-family: ui-monospace, Consolas, monospace; font-size: .88em;
}
.cuerpo pre {
  background: var(--papel-2); padding: 16px; border-radius: 8px;
  overflow-x: auto; border: 1px solid var(--linea);
}
.cuerpo pre code { background: none; padding: 0; }

/* Las tablas nunca desbordan la página: se desplazan dentro de su contenedor. */
.cuerpo table { border-collapse: collapse; width: 100%; font-size: 15.5px; display: block; overflow-x: auto; }
.cuerpo th, .cuerpo td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; }
.cuerpo th { font-weight: 650; background: var(--papel-2); white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq { margin-top: 48px; }
.faq h2 { font-size: 24px; margin: 0 0 16px; letter-spacing: -.018em; }
.faq details {
  border: 1px solid var(--linea); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 10px; background: var(--papel);
}
.faq details[open] { background: var(--papel-2); }
.faq summary { font-weight: 600; cursor: pointer; font-size: 16.5px; }
.faq summary::marker { color: var(--acento); }
.faq-respuesta { margin-top: 10px; color: var(--tinta-2); }

/* ---------- subpáginas ---------- */
.subpaginas { margin-top: 48px; }
.subpaginas h2 { font-size: 22px; margin: 0 0 14px; }
.subpaginas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.subpaginas a {
  display: block; padding: 15px 18px; border: 1px solid var(--linea);
  border-radius: 8px; text-decoration: none; color: var(--tinta);
}
.subpaginas a:hover { border-color: var(--acento); background: var(--papel-2); }
.subpaginas strong { display: block; font-size: 16.5px; margin-bottom: 3px; }
.subpaginas span { color: var(--apagado); font-size: 14.5px; }

/* ---------- fuentes y autor ---------- */
.fuentes, .ficha-autor {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea);
}
.fuentes h2, .ficha-autor h2 { font-size: 18px; margin: 0 0 12px; }
.fuentes ol { padding-left: 1.2em; font-size: 15px; color: var(--tinta-2); }
.fuentes li + li { margin-top: .4em; }
.ficha-autor { background: var(--papel-2); padding: 22px; border-radius: 10px; border-top: 0; }
.ficha-autor p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.apagado { color: var(--apagado); }

/* ---------- pie ---------- */
.pie-sitio {
  border-top: 1px solid var(--linea); background: var(--papel-2);
  padding: 32px 0; margin-top: 64px;
}
.nav-pie { gap: 18px; margin-bottom: 14px; }
.nav-pie a { color: var(--tinta-2); text-decoration: none; font-size: 14.5px; }
.nav-pie a:hover { color: var(--acento-tinta); text-decoration: underline; }
.pie-legal { color: var(--apagado); font-size: 13.5px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- precio y especificaciones de un plan ---------- */
.precio {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 6px; padding-bottom: 18px; border-bottom: 1px solid var(--linea);
}
.precio-cifra { margin: 0; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; line-height: 1.1; }
.precio-cifra strong { font-weight: 700; }
.precio-periodo { font-size: 16px; font-weight: 400; color: var(--apagado); margin-left: 4px; }
.precio-nota { margin: 0; color: var(--apagado); font-size: 14.5px; }

.specs { margin: 34px 0; }
.specs h2 { font-size: 22px; margin: 0 0 14px; letter-spacing: -.018em; }
.specs table { border-collapse: collapse; width: 100%; font-size: 16px; }
.specs th, .specs td { padding: 11px 14px; border-bottom: 1px solid var(--linea); text-align: left; }
.specs th { font-weight: 500; color: var(--tinta-2); width: 55%; }
.specs td { font-weight: 600; font-variant-numeric: tabular-nums; }
.specs tr.destacado { background: var(--acento-suave); }
.specs tr.destacado th, .specs tr.destacado td { color: var(--acento-tinta); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* ---------- tienda ---------- */
/* El sitio publico no tenia botones ni formularios: no habia ninguno hasta
   ahora. Estos estilos son los minimos para que el checkout se vea como el
   resto y no como una pagina pegada. */

.btn {
  display: inline-block; padding: 11px 20px; border-radius: var(--radio);
  border: 1px solid var(--linea-2); background: var(--fondo);
  color: var(--tinta); font: inherit; font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: background .12s ease;
}
.btn:hover { background: var(--papel-2); }
.btn-principal {
  background: var(--acento); border-color: var(--acento);
  color: var(--sobre-acento); font-weight: 600;
}
.btn-principal:hover { filter: brightness(1.08); background: var(--acento); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.precio-accion { margin: 16px 0 0; }

.checkout .migas { border: 0; background: none; padding: 0; margin-bottom: 8px; font-size: 14px; }
.checkout .migas span[aria-hidden] { margin: 0 6px; color: var(--apagado); }

.resumen-pedido {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 20px 22px; margin: 22px 0 28px; background: var(--papel-2);
}
.resumen-pedido .precio { margin: 0; padding: 0; border: 0; background: none; }
.resumen-pedido .precio strong { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; }
.resumen-pedido .periodo { font-size: 16px; color: var(--apagado); margin-left: 4px; }
.resumen-pedido .nota-precio { margin: 4px 0 0; color: var(--apagado); font-size: 14.5px; }

.specs-resumen { list-style: none; margin: 16px 0 0; padding: 0; font-size: 15px; }
.specs-resumen li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--linea);
}
.specs-resumen li:last-child { border-bottom: 0; }
.specs-resumen .etiqueta { color: var(--tinta-2); }
.specs-resumen .valor { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.specs-resumen li.destacado .valor { color: var(--acento-tinta); }

.formulario .campo { margin: 0 0 18px; display: block; }
.formulario label { display: block; font-weight: 500; margin-bottom: 5px; font-size: 15.5px; }
.formulario .opcional { font-weight: 400; color: var(--apagado); font-size: 14px; }
.formulario input, .formulario textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--linea-2); border-radius: var(--radio);
  background: var(--fondo); color: var(--tinta);
}
.formulario input:focus, .formulario textarea:focus {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.formulario .ayuda { display: block; margin-top: 5px; font-size: 14px; color: var(--apagado); }
.formulario .error { display: block; margin-top: 5px; font-size: 14px; color: var(--critico); font-weight: 500; }
.formulario .acciones { margin: 24px 0 0; }
.formulario .nota-pago { margin: 14px 0 0; font-size: 14px; color: var(--apagado); }

.aviso {
  padding: 14px 16px; border-radius: var(--radio); margin: 18px 0;
  border: 1px solid var(--linea-2); background: var(--papel-2); font-size: 15.5px;
}
.aviso-error { border-color: var(--critico); background: var(--critico-suave); color: var(--critico); }

.retorno-pago .destacado { font-size: 18px; }
.retorno-pago .detalle { color: var(--apagado); }
.retorno-pago .acciones { margin-top: 26px; }

/* La pagina actual se marca en el menu. Sin esto, el visitante no sabe donde
   esta: el unico indicio seria el titulo. */
.nav a[aria-current="page"] {
  background: var(--acento-suave); color: var(--acento-tinta); font-weight: 600;
}
.nav-pie a[aria-current="page"] { font-weight: 600; }

@media (max-width: 640px) {
  /* Con siete entradas, en movil el menu ocupa dos lineas. Se aprieta un poco
     para que no empuje el contenido fuera de la primera pantalla. */
  .nav a { padding: 6px 9px; font-size: 14.5px; }
  .cabecera-fila { gap: 12px; }
}

/* =====================================================================
   PORTADA
   ===================================================================== */

.hero {
  /* El degradado hace el trabajo que en la referencia hacía una fotografía.
     Una imagen de cabecera cuesta entre 200 KB y 1 MB y es lo primero que
     retrasa el renderizado; esto pesa cero. Cuando haya una foto propia de
     la cabina, este es el sitio donde va. */
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(55, 166, 65, .22), transparent 70%),
    radial-gradient(700px 380px at 8% 4%, rgba(55, 166, 65, .10), transparent 65%),
    var(--papel);
  border-bottom: 1px solid var(--linea);
}
.hero-caja { padding: clamp(56px, 9vw, 104px) 22px clamp(44px, 7vw, 76px); max-width: 900px; }

.hero-marca {
  display: inline-block; margin: 0 0 20px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--acento); background: var(--acento-suave);
  color: var(--acento-tinta); font-size: 13.5px; font-weight: 600;
  letter-spacing: .02em;
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 6vw, 60px); line-height: 1.08;
  letter-spacing: -.028em; font-weight: 800; color: var(--tinta);
}

.hero-texto {
  margin: 0 0 30px; max-width: 62ch;
  font-size: clamp(17px, 2vw, 19.5px); line-height: 1.6; color: var(--tinta-2);
}

.hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

.cifras-hero {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: flex; gap: clamp(24px, 5vw, 56px); flex-wrap: wrap;
}
.cifras-hero li { display: flex; flex-direction: column; gap: 2px; }
.cifras-hero strong {
  font-size: clamp(24px, 3.4vw, 32px); font-weight: 800;
  letter-spacing: -.02em; color: var(--acento-tinta);
}
.cifras-hero span { font-size: 14px; color: var(--apagado); }

/* ---------- secciones ---------- */

.seccion { padding: clamp(56px, 8vw, 92px) 0; }
.seccion-alterna { background: var(--papel-2); border-block: 1px solid var(--linea); }

.seccion-etiqueta {
  margin: 0 0 10px; text-align: center;
  color: var(--acento-tinta); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.seccion-titulo {
  margin: 0 auto 16px; max-width: 22ch; text-align: center;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.15;
  letter-spacing: -.024em; font-weight: 800;
}
.seccion-entrada {
  margin: 0 auto 40px; max-width: 62ch; text-align: center;
  color: var(--tinta-2); font-size: 17px;
}
.seccion-pie {
  margin: 36px auto 0; max-width: 62ch; text-align: center;
  color: var(--apagado); font-size: 15.5px;
}
.acciones-centro { text-align: center; margin: 0; }

/* ---------- tarjetas ---------- */

.rejilla-servicios, .rejilla-perfiles, .rejilla-planes, .rejilla-demos {
  display: grid; gap: 18px; margin-top: 40px;
}
.rejilla-servicios { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.rejilla-perfiles  { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.rejilla-planes    { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.rejilla-demos     { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Las dos tarjetas miden lo mismo. Lo que antes dejaba un hueco muerto en la
   del audio no era el estirado, sino que su contenido no lo aprovechaba: ahora
   el espectro crece para llenar lo que sobre y los controles se apoyan abajo. */
.rejilla-demos { align-items: stretch; }

.tarjeta-servicio, .tarjeta-perfil, .tarjeta-plan, .demo {
  background: var(--fondo); border: 1px solid var(--linea-2);
  border-radius: var(--radio); padding: 26px 24px;
}
.tarjeta-servicio h3, .tarjeta-perfil h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.015em; }
.tarjeta-servicio h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta-servicio h3 a:hover { color: var(--acento-tinta); }
.tarjeta-servicio p, .tarjeta-perfil p { margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.6; }

/* Los iconos son cuadrados de color, no imágenes ni una fuente de iconos:
   cargar 60 KB de tipografía para cuatro adornos no se sostiene. */
.icono {
  display: block; width: 38px; height: 38px; margin-bottom: 16px;
  border-radius: 9px; background: var(--acento-suave);
  border: 1px solid var(--acento);
}
.icono-audio   { background: linear-gradient(140deg, #37a641, #1d6d2a); }
.icono-web     { background: linear-gradient(140deg, #2f7fd6, #1c4f88); border-color: #2f7fd6; }
.icono-app     { background: linear-gradient(140deg, #8b5cf6, #5b32b8); border-color: #8b5cf6; }
.icono-hosting { background: linear-gradient(140deg, #d97a1f, #9a5310); border-color: #d97a1f; }
.icono-software { background: linear-gradient(140deg, #e0457b, #97255280); border-color: #e0457b; }
.icono-seo { background: linear-gradient(140deg, #d9b31f, #8a6f0f); border-color: #d9b31f; }

.pastillas { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 0; padding: 0; }
.pastillas li {
  padding: 4px 10px; border-radius: 999px;
  background: var(--papel-2); border: 1px solid var(--linea-2);
  font-size: 12.5px; color: var(--tinta-2);
}

/* ---------- planes ---------- */

.tarjeta-plan { position: relative; display: flex; flex-direction: column; }
.tarjeta-plan.destacado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.tarjeta-plan .cinta {
  position: absolute; top: -12px; left: 24px; margin: 0;
  padding: 4px 12px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: 12px; font-weight: 700;
}
.tarjeta-plan h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.015em; }
.plan-precio { margin: 0 0 20px; display: flex; align-items: baseline; gap: 6px; }
.plan-precio strong { font-size: 30px; font-weight: 800; letter-spacing: -.025em; }
.plan-precio span { color: var(--apagado); font-size: 14.5px; }

.plan-specs { list-style: none; margin: 0 0 22px; padding: 0; font-size: 15px; }
.plan-specs li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.plan-specs li:last-child { border-bottom: 0; }
.plan-specs span { color: var(--tinta-2); }
.plan-specs strong { font-variant-numeric: tabular-nums; }
.plan-specs li.destacado strong { color: var(--acento-tinta); }
.plan-accion { margin: auto 0 0; }
.plan-accion .btn { display: block; text-align: center; }

/* ---------- demos ---------- */

.demo-video { display: flex; flex-direction: column; }
.demo-video .video-portada, .demo-video .marco-video { margin-top: auto; }

.demo h3 { margin: 0 0 4px; font-size: 19px; }
.demo-nota { margin: 0 0 18px; color: var(--apagado); font-size: 14.5px; }
.demo audio { width: 100%; }

/* El marco NO reserva proporción propia: video.js ya lo hace con vjs-fluid.
   Reservarla aquí además dejaba un hueco negro del mismo alto que el video,
   que es el espacio enorme que aparecía al pulsar «Ver la emisión». */
.marco-video { background: var(--papel); border-radius: 8px; overflow: hidden; }
.marco-video .video-js { border-radius: 8px; overflow: hidden; }

/* Por si alguna vez se configura una URL de inserción en vez de un .m3u8:
   un iframe sí necesita que alguien le reserve la proporción. */
.marco-video:has(iframe) { position: relative; aspect-ratio: 16 / 9; }
.marco-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- cierre ---------- */

.cierre { text-align: center; border-top: 1px solid var(--linea); }
.cierre h2 { margin: 0 0 12px; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.022em; }
.cierre p { margin: 0 auto 26px; max-width: 56ch; color: var(--tinta-2); }
.cierre .hero-acciones { justify-content: center; }
.cierre-lugar { margin-top: 26px; color: var(--apagado); font-size: 14.5px; }

/* ---------- botón de contorno ---------- */

.btn-contorno {
  background: transparent; border-color: var(--linea-2); color: var(--tinta);
}
.btn-contorno:hover { border-color: var(--acento); background: var(--acento-suave); }

@media (max-width: 640px) {
  .hero-acciones .btn { flex: 1 1 100%; text-align: center; }
  .cifras-hero { gap: 22px; }
}

/* ---------- reproductor de radio ---------- */
/* El botón propio solo aparece cuando el JavaScript ha tomado el control
   (.con-js). Sin él manda el <audio controls> del HTML, y la radio se oye
   igual: un reproductor bonito que no suena no sirve de nada. */

.radio {
  display: flex; flex-direction: column;
  background: var(--fondo); border: 1px solid var(--linea-2);
  border-radius: var(--radio); padding: 22px;
}
.radio-cabecera { display: flex; gap: 20px; align-items: center; }
.radio-caratula {
  /* Crece con el ancho disponible: la caratula es lo que mira la gente.
     iTunes sirve 600x600, asi que hay resolucion de sobra. */
  width: clamp(110px, 26vw, 170px); height: clamp(110px, 26vw, 170px);
  flex: none; border-radius: 10px; object-fit: cover;
  background: var(--papel-2); border: 1px solid var(--linea);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
}
.radio-texto { min-width: 0; }
.radio-estado {
  margin: 0 0 4px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--apagado);
}
.radio.sonando .radio-estado { color: var(--acento-tinta); }
.radio.sonando .radio-estado::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--acento-claro); vertical-align: middle;
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .25; } }

/* Título y artista se recortan en vez de romper la caja: los nombres de
   canción pueden ser larguísimos. */
.radio-cancion {
  margin: 0; font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.radio-artista {
  margin: 4px 0 0; color: var(--tinta-2); font-size: clamp(15px, 1.8vw, 17px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* auto empuja los controles al fondo de la tarjeta. Si no hay espectro
   —porque el stream no permite analizarlo— el hueco se lo queda este margen
   y las dos tarjetas siguen midiendo lo mismo. */
.radio-controles { margin-top: auto; padding-top: 18px; }
.radio-controles audio { width: 100%; }
.radio-boton { display: none; }

.radio.con-js .radio-controles audio { display: none; }
.radio.con-js .radio-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento);
  transition: transform .12s ease, filter .12s ease;
}
.radio.con-js .radio-boton:hover { filter: brightness(1.1); transform: scale(1.04); }
.radio.con-js .radio-boton:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; }

/* El icono es un triángulo hecho con bordes: sin imagen y sin fuente de
   iconos. Al sonar se convierte en dos barras de pausa. */
.radio-icono {
  width: 0; height: 0; margin-left: 4px;
  border-left: 16px solid currentColor;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.radio.sonando .radio-icono {
  width: 15px; height: 18px; margin-left: 0; border: 0;
  border-left: 5px solid currentColor; border-right: 5px solid currentColor;
}

.radio-pie {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0 0;
  padding-top: 14px; border-top: 1px solid var(--linea);
  color: var(--apagado); font-size: 13.5px;
}
.radio-pie strong { color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ---------- video bajo demanda ---------- */

/* El selector lleva :not([hidden]) a proposito. El atributo hidden equivale a
   display:none, pero CUALQUIER regla con display lo pisa: sin esto, al pulsar
   el boton el cartel seguia visible encima del video. */
.video-portada:not([hidden]) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.video-portada {
  gap: 12px; padding: 40px 20px; text-align: center; aspect-ratio: 16 / 9;
  border: 1px dashed var(--linea-2); border-radius: 8px; background: var(--papel);
}
.video-boton {
  padding: 12px 24px; border-radius: var(--radio); cursor: pointer;
  border: 1px solid var(--acento); background: var(--acento);
  color: var(--sobre-acento); font: inherit; font-weight: 600;
}
.video-boton:hover { filter: brightness(1.08); }
.video-boton[disabled] { opacity: .6; cursor: progress; }
.video-aviso { margin: 0; color: var(--apagado); font-size: 13px; max-width: 34ch; }

@media (prefers-reduced-motion: reduce) {
  .radio.sonando .radio-estado::before { animation: none; }
  .radio.con-js .radio-boton { transition: none; }
}

/* ---------- volumen, compartir y espectro ---------- */

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}

.radio-espectro {
  display: none; width: 100%; margin-top: 16px;
  border-radius: 6px; background: var(--papel);
}
/* flex:1 le da todo el alto que sobre en la tarjeta. El minimo evita que se
   quede en una linea cuando la pantalla es estrecha y sobra poco. */
.radio.con-js .radio-espectro { display: block; flex: 1 1 auto; min-height: 90px; }

.radio.con-js .radio-controles {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.radio-volumen { display: none; flex: 1 1 120px; min-width: 100px; }
.radio.con-js .radio-volumen { display: block; }

/* El control nativo se pinta a mano porque su aspecto por defecto choca con
   todo lo demás en un fondo oscuro. */
.radio-volumen input {
  width: 100%; height: 4px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--linea-2); border-radius: 999px; cursor: pointer;
}
.radio-volumen input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--acento-claro); border: 0; cursor: pointer;
}
.radio-volumen input::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--acento-claro); border: 0; cursor: pointer;
}
.radio-volumen input:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 4px; }

.radio-compartir { display: none; }
.radio.con-js .radio-compartir {
  display: inline-block; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--linea-2); border-radius: var(--radio);
  background: transparent; color: var(--tinta-2);
  font: inherit; font-size: 14px;
}
.radio.con-js .radio-compartir:hover { border-color: var(--acento); color: var(--tinta); }

/* ---------- reseñas ---------- */

.resumen-resenas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin: 0 0 34px;
}
.logo-google { flex: none; }
.resumen-resenas p { margin: 0; }
.resumen-resenas .estrellas { color: #f5b301; font-size: 22px; letter-spacing: 2px; }
.resumen-resenas .media { font-size: 19px; font-weight: 700; }

/* Carrusel sin librerias. scroll-snap hace el trabajo: se desplaza con el
   dedo, con la rueda y con el teclado aunque el JavaScript no llegue. Las
   flechas son un anadido, no el mecanismo. */
.carrusel {
  position: relative;
  /* Recorta en horizontal. Sin esto la pista hacia crecer la pagina entera y
     aparecia una barra de desplazamiento horizontal en TODO el sitio, no solo
     en el carrusel. Se usa clip y no hidden porque hidden crea un contenedor
     de desplazamiento y fuerza overflow-y a auto; clip solo recorta.
     hidden queda como respaldo para navegadores sin clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

.pista-resenas {
  display: grid; grid-auto-flow: column; gap: 18px;
  grid-auto-columns: minmax(280px, 1fr);
  list-style: none; margin: 0; padding: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 4px;
  /* Igual que en los logos: mandan las flechas. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pista-resenas::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pista-resenas > li { scroll-snap-align: start; }
.pista-resenas:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 4px; }

/* Tres a la vez en pantalla ancha, una en movil. */
@media (min-width: 900px) {
  .pista-resenas { grid-auto-columns: calc((100% - 36px) / 3); }
}

.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0 0 3px; cursor: pointer;
  border: 1px solid var(--linea-2); border-radius: 50%;
  background: var(--fondo); color: var(--tinta);
  font-size: 26px; line-height: 1;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .8);
}
.carrusel-flecha:hover { border-color: var(--acento); color: var(--acento-tinta); }
.carrusel-flecha:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }
/* Dentro del carrusel, no fuera: al recortarlo, una flecha en negativo
   quedaria cortada por la mitad. */
.carrusel-flecha.atras { left: 6px; }
.carrusel-flecha.adelante { right: 6px; }

/* Al llegar al extremo la flecha se apaga en vez de desaparecer: si se
   quitara, el carrusel daria un salto al recolocarse. */
.carrusel-flecha[disabled] { opacity: .3; cursor: default; }
.carrusel-flecha[disabled]:hover { border-color: var(--linea-2); color: var(--tinta); }

@media (max-width: 720px) {
  /* Con el dedo las flechas sobran y taparian el contenido. */
  .carrusel-flecha { display: none; }
}

.resena {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--fondo); border: 1px solid var(--linea-2);
  border-radius: var(--radio); padding: 22px;
}
.resena-cabecera { display: flex; align-items: center; gap: 12px; }
.resena-fuente { margin-left: auto; flex: none; }

.resena-foto {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--papel-2); flex: none;
}
/* Cuando Google no da foto, la inicial evita el hueco y no descarga nada. */
.resena-inicial {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento-tinta);
  font-weight: 700; font-size: 18px;
}

.resena-autor { margin: 0; font-weight: 600; font-size: 15.5px; }
.resena-fecha { margin: 1px 0 0; color: var(--apagado); font-size: 13px; }
.resena-estrellas { margin: 0; color: #f5b301; font-size: 16px; letter-spacing: 1px; }

.resena blockquote {
  margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.6;
}

/* ---------- emisoras con app propia ---------- */

.pista-logos {
  display: flex; gap: 16px; list-style: none; margin: 0; padding: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 4px;
  /* Sin barra de desplazamiento: las flechas ya indican que hay mas, y con el
     dedo se arrastra sin verla. Se oculta en los dos motores. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pista-logos::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pista-logos > li { scroll-snap-align: start; flex: none; }
.pista-logos:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 4px; }

.logo-app {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  /* Crece con la pantalla en vez de quedarse en un ancho fijo: en un monitor
     grande se ven bien y en movil siguen cabiendo tres. */
  width: clamp(124px, 15vw, 168px);
  padding: 16px 10px; border-radius: var(--radio);
  border: 1px solid transparent; text-decoration: none; color: var(--tinta-2);
  transition: border-color .12s ease, transform .12s ease;
}
.logo-app:hover { border-color: var(--acento); color: var(--tinta); transform: translateY(-2px); }
.logo-app:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

.logo-app img {
  /* Los iconos se descargaron a 128 px, asi que hasta ese tamano se ven
     nitidos sin volver a pedirlos. */
  width: clamp(88px, 11vw, 118px); height: clamp(88px, 11vw, 118px);
  border-radius: 22px;
  background: var(--papel-2); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .85);
}
/* El nombre se recorta a dos lineas: hay emisoras con nombres largos y una
   tarjeta mas alta que las demas rompe la fila entera. */
.logo-app span {
  font-size: 13.5px; line-height: 1.35; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- escaparate de capturas ---------- */

.escaparate {
  display: flex; gap: clamp(14px, 2.5vw, 26px); flex-wrap: wrap;
  justify-content: center; margin-top: 44px;
}

.movil { margin: 0; width: clamp(140px, 17vw, 190px); }
/* Se alternan las alturas para que la fila no parezca una tabla. */
.movil-bajo { margin-top: clamp(14px, 3vw, 34px); }

.movil-marco {
  position: relative; padding: 8px; border-radius: 26px;
  background: linear-gradient(160deg, #2b3541, #161d26);
  border: 1px solid var(--linea-2);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .95);
}
.movil-marco img {
  display: block; width: 100%; height: auto;
  border-radius: 19px; background: var(--papel);
}

/* La muesca superior: es lo que hace que se lea como un telefono y no como
   una imagen con bordes redondeados. */
.movil-muesca {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 13px; border-radius: 0 0 9px 9px;
  background: #161d26; z-index: 1;
}

.movil figcaption {
  margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--apagado);
}

@media (prefers-reduced-motion: reduce) {
  .logo-app { transition: none; }
  .logo-app:hover { transform: none; }
}

/* ---------- plantilla de venta ---------- */

.hero-compacto .hero-caja { padding-top: clamp(34px, 5vw, 56px); padding-bottom: clamp(30px, 4vw, 48px); }
.migas-hero { margin: 0 0 16px; font-size: 14px; color: var(--apagado); }
.migas-hero a { color: var(--apagado); text-decoration: none; }
.migas-hero a:hover { color: var(--acento-tinta); text-decoration: underline; }
.migas-hero span { margin: 0 6px; }

/* Una sola tarjeta de demo no debe estirarse a lo ancho de la pantalla. */
.rejilla-demos-solo { grid-template-columns: minmax(0, 620px); justify-content: center; }

.rejilla-specs {
  display: grid; gap: 14px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.spec {
  background: var(--fondo); border: 1px solid var(--linea-2);
  border-radius: var(--radio); padding: 20px 18px; text-align: center;
}
.spec.destacado { border-color: var(--acento); }
.spec-valor {
  margin: 0 0 4px; font-size: clamp(19px, 2.2vw, 23px); font-weight: 700;
  letter-spacing: -.018em; font-variant-numeric: tabular-nums;
}
.spec.destacado .spec-valor { color: var(--acento-tinta); }
.spec-etiqueta { margin: 0; font-size: 14px; color: var(--apagado); }

/* ---------- redes sociales ---------- */

.redes { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.redes a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--apagado); text-decoration: none;
  transition: color .12s ease, background .12s ease;
}
.redes a:hover { color: var(--tinta); background: var(--papel-2); }
.redes a:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* ---------- botón flotante de WhatsApp ---------- */

.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #0b2e17; text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .75);
  transition: transform .15s ease;
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 4px; }
.wa-flotante svg { position: relative; z-index: 1; }

/* Las ondas: dos anillos que crecen y se desvanecen sin parar. Van detras del
   icono y no capturan el raton, para que no estorben al clic. */
.wa-onda {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25d366; opacity: .55; pointer-events: none;
  animation: wa-onda 2.4s ease-out infinite;
}
.wa-onda-2 { animation-delay: 1.2s; }

@keyframes wa-onda {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* En movil el boton comparte sitio con la barra del navegador. */
@media (max-width: 640px) {
  .wa-flotante { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Un anillo latiendo sin parar en una esquina es justo lo que molesta a
     quien pide menos movimiento. Se queda el boton, sin ondas. */
  .wa-onda { animation: none; opacity: 0; }
  .wa-flotante { transition: none; }
  .wa-flotante:hover { transform: none; }
}

/* ---------- qué incluye ---------- */

.rejilla-caracteristicas {
  display: grid; gap: 16px; margin-top: 40px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.caracteristica {
  background: var(--fondo); border: 1px solid var(--linea-2);
  border-radius: var(--radio); padding: 22px 20px;
}
.caracteristica h3 {
  margin: 0 0 8px; font-size: 17px; letter-spacing: -.012em;
}
/* La línea de acento a la izquierda separa las tarjetas sin necesidad de
   inventarse un icono para cada característica. */
.caracteristica h3::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 15px; margin-right: 9px; border-radius: 2px;
  background: var(--acento);
}
.caracteristica p { margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.6; }

/* ---------- cómo empezar ---------- */

.pasos {
  list-style: none; counter-reset: paso; margin: 40px 0 0; padding: 0;
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pasos li { display: flex; gap: 14px; align-items: flex-start; }

.paso-numero {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--acento-suave); border: 1px solid var(--acento);
  color: var(--acento-tinta); font-weight: 700; font-size: 15px;
}
.pasos h3 { margin: 4px 0 6px; font-size: 16.5px; letter-spacing: -.01em; }
.pasos p { margin: 0; color: var(--tinta-2); font-size: 15px; line-height: 1.55; }