/* Typography refinements outside the original cards, price table, chart and popup. */
:root{--infoluz-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:where(html,body,nav li,h1,h2,h3,p,td,th,label,button,input,select,summary,
#cabeza,#text,#serie,.tomorrow-page,.apexcharts-text,tspan):not(:where(.grupo *,.grupo,#precio-luz-horas *,#precio-luz-horas,#chart *,#chart,#miPopup *,#miPopup)){
  font-family:var(--infoluz-font)!important;
}
body{font-size:16px}
p:not(:where(.grupo *,#precio-luz-horas *,#chart *,#miPopup *)){font-size:17px;line-height:1.5}
h1{line-height:1.15;letter-spacing:-.025em}
nav li{font-size:17px;font-weight:500}
#cabeza h1{font-size:36px;font-weight:700}
#cabeza h2{font-size:17px;font-weight:400;line-height:1.5;margin:14px 0 0}
#cabeza h2 a{font-size:inherit;font-weight:600}
#estado-actualizacion:empty{display:none}
#serie{box-shadow:0 4px 16px rgba(16,58,97,.09)}
#serie .serie>p:first-child{font-size:20px;font-weight:500;line-height:1.4;margin:12px 0 8px}
#serie .btramo{font-size:28px;font-weight:600;line-height:1.25;margin:8px 0}
#serie p{font-size:17px;line-height:1.5}
.tomorrow-summary,.tomorrow-table,.result{font-variant-numeric:tabular-nums}
#text p{font-size:17px;line-height:1.6}
#pie-c p{font-size:14px}
#miPopup,#precio-luz-horas{font-family:"Times New Roman",serif}
@media(max-width:1000px){
  #cabeza h1{font-size:30px}
  #serie .serie>p:first-child{font-size:18px}
  #serie .btramo{font-size:26px}
  #miPopup,#precio-luz-horas{font-family:Arial,sans-serif}
}

/* Cards: midpoint between the original and compact typography. */
#precio-ahora,#precio-barato,#precio-medio,#precio-caro{
  padding:16px;box-sizing:border-box;box-shadow:3px 6px 20px rgba(16,58,97,.21);
  font-variant-numeric:tabular-nums;
}
.grupo .a{font-size:26px;font-weight:400;line-height:1.2;margin:0}
.grupo .b2{font-size:54px;font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:8px 0 6px}
.grupo .b2:empty{display:none}
.grupo .c{font-size:26px;font-weight:400;line-height:1.2;margin:0}
@media(max-width:1000px){
  #precio-ahora,#precio-barato,#precio-medio,#precio-caro{padding:8px 16px}
  .grupo .a{font-size:22px}
  .grupo .b2{font-size:40px;font-weight:600;margin:6px 0 4px}
  .grupo .c{font-size:24px}
}

@media(max-width:600px){
  #cabeza h2{margin-top:6px}
}