/* Estilos de las fichas: los de la portada mas los propios. Lo genera genera-seo.py */

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url('fuentes/baloo2-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('fuentes/baloo2-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('fuentes/baloo2-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* barra superior en pantallas estrechas: que quepa todo sin salirse */
@media (max-width:900px){
  .bar{padding:8px 12px;gap:6px}
  .bar .logo{font-size:0;gap:0;-webkit-flex:none;flex:none}
  .bar .logo svg{width:26px;height:26px}
  .bar nav a.solo-ancho{display:none}
  .bar nav{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:6px;min-width:0;-webkit-flex:1;flex:1;-webkit-justify-content:flex-end;justify-content:flex-end}
  .bar .navsel{font-size:14px;padding:6px 8px;max-width:38vw}
  .bar .navlink{font-size:14px;padding:6px 10px;white-space:nowrap}
  .bar .navcta{padding:6px 12px !important;font-size:14px;white-space:nowrap}
}
@media (max-width:430px){
  /* el botón de unirse se queda siempre: lo recoge ajustaCabecera con su nombre corto */
  .bar .navsel{max-width:44vw}
}
.pielink{border:0;background:none;font-family:inherit;font-size:inherit;color:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* el tira y afloja de la portada se mueve */
#kidsL{-webkit-animation:tiraIzq 3.2s ease-in-out infinite;animation:tiraIzq 3.2s ease-in-out infinite;-webkit-transform-origin:150px 178px;transform-origin:0px 190px}
#kidsR{-webkit-animation:tiraDer 3.2s ease-in-out infinite;animation:tiraDer 3.2s ease-in-out infinite;-webkit-transform-origin:370px 178px;transform-origin:0px 190px}
#lazo{-webkit-animation:lazoVa 3.2s ease-in-out infinite;animation:lazoVa 3.2s ease-in-out infinite}
#cuerda{-webkit-animation:cuerdaVa 3.2s ease-in-out infinite;animation:cuerdaVa 3.2s ease-in-out infinite}
@-webkit-keyframes tiraIzq{0%,100%{-webkit-transform:translateX(0) rotate(0)}30%{-webkit-transform:translateX(-7px) rotate(-4deg)}65%{-webkit-transform:translateX(5px) rotate(3deg)}}
@keyframes tiraIzq{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(-7px) rotate(-4deg)}65%{transform:translateX(5px) rotate(3deg)}}
@-webkit-keyframes tiraDer{0%,100%{-webkit-transform:translateX(0) rotate(0)}30%{-webkit-transform:translateX(5px) rotate(3deg)}65%{-webkit-transform:translateX(-7px) rotate(-4deg)}}
@keyframes tiraDer{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(5px) rotate(3deg)}65%{transform:translateX(-7px) rotate(-4deg)}}
@-webkit-keyframes lazoVa{0%,100%{-webkit-transform:translateX(0)}30%{-webkit-transform:translateX(-14px)}65%{-webkit-transform:translateX(11px)}}
@keyframes lazoVa{0%,100%{transform:translateX(0)}30%{transform:translateX(-14px)}65%{transform:translateX(11px)}}
@-webkit-keyframes cuerdaVa{0%,100%{-webkit-transform:translateY(0)}30%{-webkit-transform:translateY(-3px)}65%{-webkit-transform:translateY(2px)}}
@keyframes cuerdaVa{0%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}65%{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){#kidsL,#kidsR,#lazo,#cuerda{-webkit-animation:none;animation:none}}

/* vista previa del juego, debajo de la cabecera */
.hero-pizarra{max-width:620px;margin:0 auto}
.demo-marco{background:#1D2B3A;border-radius:22px;padding:14px 14px 10px;box-shadow:0 16px 40px rgba(29,43,58,.22)}
/* La altura de la pantalla de la demo va con el truco del padding de toda
   la vida, NO con aspect-ratio: esa propiedad es de Chrome 88 y muchas
   pizarras digitales llevan un Chromium bastante mas viejo. Alli la
   pantalla se quedaba con altura cero y solo se veia el marco oscuro, una
   tira negra donde tenia que estar el tira y afloja moviendose. */
.demo-pant{background:#EAF2FB;border-radius:14px;overflow:hidden;position:relative}
.demo-pant:before{content:'';display:block;padding-top:56.25%}
.demo-pie{height:12px;width:120px;margin:8px auto 0;border-radius:0 0 8px 8px;background:#33465C}
.demo-rotulo{text-align:center;font-weight:800;color:#2B4A63;margin-top:10px;font-size:15px}
.dm-top{position:absolute;left:0;right:0;top:0;height:16%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;padding:0 3%}
.dm-eq{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;font-weight:800;font-size:16px;font-size:clamp(12px,2.2vw,20px)}
.dm-eq.a{color:#1553B0}
.dm-eq.b{color:#B5217A}
.dm-pt{min-width:1.9em;text-align:center;color:#fff;border-radius:999px;padding:2px 8px}
.dm-eq.a .dm-pt{background:#2E7BF6}
.dm-eq.b .dm-pt{background:#E0329E}
.dm-zona{position:absolute;left:0;right:0;top:15%;bottom:0;overflow:hidden}
.dm-zona svg{width:100%;height:100%;display:block}
.dm-campo{position:absolute;left:0;right:0;top:0;height:62%;background:#CFE9FF;overflow:hidden}
.dm-campo svg{width:100%;height:100%;display:block}
.dm-campo svg > g{-webkit-transition:-webkit-transform .5s ease-out;transition:transform .5s ease-out}
.dm-reloj{font-weight:800;font-size:16px;font-size:clamp(12px,2.2vw,20px);color:#1D2B3A}
.dm-cuerpo{position:absolute;left:0;right:0;top:62%;bottom:0;display:-webkit-flex;display:flex}
.dm-lado{-webkit-flex:1;flex:1;margin:1.4%;border-radius:12px;background:#fff;border:3px solid #2E7BF6;position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;gap:4%}
.dm-lado.b{border-color:#E0329E}
.dm-op{font-weight:800;font-size:26px;font-size:clamp(16px,3.6vw,34px);color:#1D2B3A}
.dm-ops{width:92%;display:-webkit-flex;display:flex;gap:4%;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-justify-content:center;justify-content:center}
.dm-op-b{-webkit-flex:1;flex:1;max-width:28%;text-align:center;background:-webkit-linear-gradient(top,#FFE07A,#FFC327);background:linear-gradient(to bottom,#FFE07A,#FFC327);border-radius:10px;padding:2.4% 0;font-weight:800;font-size:19px;font-size:clamp(13px,2.6vw,26px);color:#1D2B3A;box-shadow:0 4px 0 #D9A900}
.dm-op-b.ok{background:#2FA84F;color:#fff;box-shadow:0 4px 0 #1F7C39}
.dm-dedo{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(29,43,58,.28);border:3px solid rgba(29,43,58,.5);pointer-events:none;opacity:0}
@media (max-width:860px){.hero-pizarra{max-width:100%}}
.dm-tira.izq{-webkit-animation:dmTiraA 2.4s ease-in-out infinite;animation:dmTiraA 2.4s ease-in-out infinite;-webkit-transform-origin:0 190px;transform-origin:0 190px}
.dm-tira.der{-webkit-animation:dmTiraB 2.4s ease-in-out infinite;animation:dmTiraB 2.4s ease-in-out infinite;-webkit-transform-origin:0 190px;transform-origin:0 190px}
@-webkit-keyframes dmTiraA{0%,100%{-webkit-transform:rotate(0)}35%{-webkit-transform:rotate(-4deg)}70%{-webkit-transform:rotate(2deg)}}
@keyframes dmTiraA{0%,100%{transform:rotate(0)}35%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}}
@-webkit-keyframes dmTiraB{0%,100%{-webkit-transform:rotate(0)}35%{-webkit-transform:rotate(2deg)}70%{-webkit-transform:rotate(-4deg)}}
@keyframes dmTiraB{0%,100%{transform:rotate(0)}35%{transform:rotate(2deg)}70%{transform:rotate(-4deg)}}
.dm-vaiven{-webkit-animation:dmVaiven 2.4s ease-in-out infinite;animation:dmVaiven 2.4s ease-in-out infinite}
@-webkit-keyframes dmVaiven{0%,100%{-webkit-transform:translateX(0)}35%{-webkit-transform:translateX(-7px)}70%{-webkit-transform:translateX(6px)}}
@keyframes dmVaiven{0%,100%{transform:translateX(0)}35%{transform:translateX(-7px)}70%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.dm-vaiven{-webkit-animation:none;animation:none}}
@media (prefers-reduced-motion:reduce){.dm-tira.izq,.dm-tira.der{-webkit-animation:none;animation:none}}
.buscador{display:-webkit-flex;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #D7E2EC;border-radius:999px;padding:4px 10px 4px 16px;margin:0 0 14px;max-width:460px}
.buscador:focus-within{border-color:#2E7BF6}
.buscador svg{flex:none}
.buscador input{flex:1;border:0;outline:0;font-family:inherit;font-size:16px;font-weight:700;color:#1D2B3A;padding:10px 0;background:none;min-width:0}
.buscador input::-webkit-search-cancel-button{display:none}
.buscador button{border:0;background:#EAF2FB;color:#3D556B;font-size:20px;line-height:1;width:30px;height:30px;border-radius:50%;cursor:pointer;flex:none}
.sinNada{font-weight:800;color:#3D556B;margin:0 0 14px}


*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Baloo 2','Trebuchet MS',Arial,sans-serif;color:#1D2B3A;background:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* Cabecera */
.bar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;padding:18px 0}
.logo{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:24px;font-weight:800}
.logo svg{margin-right:10px}
.bar nav a{font-weight:700;margin-left:22px;font-size:17px;color:#4A5B6C}
.bar nav a:hover{color:#1D2B3A}

/* Portada */
.hero{background:#CFEAFF;background-image:-webkit-linear-gradient(#CFEAFF 92%,#8CCB5E 92%);background-image:linear-gradient(#CFEAFF 92%,#8CCB5E 92%);border-radius:0;margin:0;overflow:hidden;position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.hero-in{max-width:1240px;margin:0 auto}
.hero-in{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;padding:34px 40px 44px;gap:26px}
.hero-txt{-webkit-flex:1 1 380px;flex:1 1 380px;padding-bottom:44px}
.hero h1{max-width:11em;font-size:54px;line-height:1.05;max-width:12ch}
.hero p{font-size:20px;color:#3D556B;margin-top:14px;max-width:46ch;line-height:1.4}
.cta{display:inline-block;margin-top:24px;background:#FFD23F;box-shadow:0 6px 0 #D9A900;border-radius:16px;padding:14px 28px;font-size:20px;font-weight:800}
.cta:active{-webkit-transform:translateY(3px);transform:translateY(3px);box-shadow:0 3px 0 #D9A900}
.hero-art{-webkit-flex:1 1 520px;flex:1 1 520px;min-width:300px;align-self:center;padding:0}
.hero-art svg{display:block;width:100%;height:auto}

/* Filtros */
h2{font-size:32px;margin:48px 0 6px}
.section{margin-top:26px}
.section h3{font-size:27px;display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline}
.section h3 em{font-style:normal;font-size:17px;font-weight:700;color:#7A8B9C;margin-left:12px}
.area{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:800;color:#6B7C8D;margin-bottom:2px}
.area i{width:10px;height:10px;border-radius:4px;margin-right:7px;display:inline-block}
.section .note{color:#6B7C8D;font-size:16px;margin-top:2px}
.empty{color:#6B7C8D;font-size:18px;margin-top:18px}
.lead{color:#4A5B6C;font-size:18px}
.filters{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:18px 0 6px}
.filters button{border:3px solid #E1E8EF;background:#fff;border-radius:14px;padding:9px 18px;font-size:17px;font-weight:700;margin:0 10px 10px 0}
.filters button.on{background:#1D2B3A;border-color:#1D2B3A;color:#fff}

/* Rejilla */
.grid{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:14px -10px 0}
.card{-webkit-flex:1 1 300px;flex:1 1 300px;max-width:360px;margin:10px;border:3px solid #EDF1F5;border-radius:24px;overflow:hidden;background:#fff;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;transition:border-color .15s,transform .15s}
.card:hover{border-color:#CBD8E4;transform:translateY(-3px)}
.modo{display:block;font-size:14px;font-weight:800;color:#3D556B;background:#F1F5F9;border-radius:999px;padding:5px 12px;margin-top:10px;align-self:flex-start}
.cuenta{color:#6B7C8D;font-size:16px;font-weight:700;margin-top:14px}
.card.soon{opacity:.72}
.thumb{height:150px;position:relative}
.thumb svg{display:block;width:100%;height:100%}
.card-in{padding:16px 20px 20px;-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}
.card h3{font-size:22px}
.card p{color:#4A5B6C;font-size:16px;line-height:1.35;margin-top:4px;-webkit-flex:1;flex:1}
.meta{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:12px}
.tag{font-size:14px;font-weight:700;border-radius:999px;padding:4px 12px;margin:0 6px 6px 0;background:#F1F5F9;color:#3D556B}
.play{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-top:12px;font-weight:800;font-size:17px}
.play svg{margin-left:8px}
.card.math .play{color:#1553B0}
.card.lang .play{color:#C23A17}
.card.eng .play{color:#1E7A3C}
.card.world .play{color:#5E3DA8}
.soon-note{margin-top:12px;font-weight:700;font-size:16px;color:#7A8B9C}

/* Pie */
footer{margin:64px 0 40px;padding-top:26px;border-top:3px solid #EDF1F5;color:#6B7C8D;font-size:16px;line-height:1.5}
@media (max-width:640px){.hero h1{max-width:11em;font-size:38px}.hero-in{padding:28px 22px 0}.hero p{font-size:17px}h2{font-size:26px}}
.navcta{background:#1D2B3A;color:#fff !important;border-radius:999px;padding:8px 16px !important;font-weight:800}
.navcta.ilim{background:#DDF4D2;color:#1F6B0E !important}
.aviso-cuenta{max-width:1180px;margin:0 auto 6px;padding:0 24px}
.aviso-cuenta div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#FFF8E2;border-radius:16px;padding:12px 16px;font-weight:700;color:#6B5200}
.aviso-cuenta a{background:#2E7BF6;color:#fff;border-radius:12px;padding:8px 14px;text-decoration:none;font-weight:800}


.cifra.precio b{font-size:21px}
.franja-precio{background:#1D2B3A;border-radius:24px;padding:28px 26px;margin:34px 0 10px;color:#fff}
.franja-precio h3{font-size:26px;margin-bottom:8px}
.franja-precio p{font-size:17px;line-height:1.5;color:#D6E2EF;max-width:46em}
.franja-precio b{color:#FFD23F}
.franja-precio .cta{margin-top:16px;display:inline-block}
@media (max-width:760px){
  .franja-precio{padding:20px 16px}
  .franja-precio h3{font-size:21px}
  .franja-precio p{font-size:15.5px}
  .cifra.precio b{font-size:16px}
}
.modtit2{font-size:30px;margin:30px 0 4px}
.mic{margin-bottom:10px}
.mic svg{width:84px;height:50px}
.navpiz{display:inline-flex;align-items:center;gap:6px}
.navpiz svg{width:17px;height:17px;flex:0 0 auto}
.cifras{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 6px}
.cifra{flex:1 1 150px;background:#fff;border-radius:18px;box-shadow:0 6px 0 #E9EEF5;padding:16px 18px;text-align:center}
.cifra b{display:block;font-size:30px;color:#1D2B3A;line-height:1.1}
.cifra span{font-size:15px;font-weight:700;color:#7A8B9C}
@media (max-width:760px){
  .cifra{flex:1 1 44%;padding:12px 10px}
  .cifra b{font-size:24px}
  .cifra span{font-size:13px}
}
.filters button.on{position:relative}
.pista{font-size:13px;color:#8A99A8;font-weight:700;margin:2px 0 8px}
.card .pie{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#7A8B9C;margin-top:10px;line-height:1.3}
.card .pie i{width:9px;height:9px;border-radius:50%;flex:none}
.carril .card p{max-height:none;font-size:14.5px}
.carril .card .pie{font-size:12.5px}
.filtro-cab{font-size:13px;font-weight:800;color:#8A99A8;text-transform:uppercase;letter-spacing:.4px;margin:14px 0 2px}
.modos{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 6px}
.modo{flex:1 1 280px;background:#F7FAFF;border:3px solid #E6EDF8;border-radius:18px;padding:18px 20px}
.modo h4{font-size:19px;margin-bottom:6px}
.modo p{font-size:16px;color:#4A5B6C;line-height:1.4}
.modo.destaca{background:#FFF8E2;border-color:#FFD23F}
.avisopago{margin-top:10px;font-weight:800;color:#8A6E2B !important}
@media (max-width:760px){ .modo{flex:1 1 100%} }
.pasos{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 8px}
.paso{flex:1 1 260px;background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 6px 0 #E9EEF5}
.paso .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#FFD23F;color:#1D2B3A;font-weight:800;font-size:18px;margin-bottom:10px}
.paso h4{font-size:20px;margin-bottom:6px}
.paso p{font-size:16px;color:#4A5B6C;line-height:1.4}
.quetit{font-size:24px;margin:26px 0 10px}
.que{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:10px}
.que li{flex:1 1 300px;font-size:17px;color:#3D556B;line-height:1.4;padding-left:26px;position:relative}
.que li:before{content:'';position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:50%;background:#2FA84F}
.que li b{color:#1D2B3A}
@media (max-width:760px){ .paso{flex:1 1 100%} .que li{flex:1 1 100%;font-size:16px} }
.ov-sala{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(21,35,52,.62);display:none;align-items:center;justify-content:center;z-index:70}
.ov-sala .hoja{background:#fff;border-radius:22px;padding:26px 28px;max-width:460px;width:92vw;text-align:center}
.ov-sala h3{font-size:26px;margin-bottom:8px}
.ov-sala p{font-size:16px;color:#4A5B6C;line-height:1.35}
.ov-sala .fila{display:flex;gap:10px;justify-content:center;margin:16px 0}
.ov-sala input{width:170px;border:3px solid #E1E8EF;border-radius:14px;font-family:inherit;font-size:30px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:6px;padding:8px}
.ov-sala button{border:0;border-radius:14px;background:#FFD23F;color:#1D2B3A;font-family:inherit;font-size:18px;font-weight:800;padding:12px 22px;cursor:pointer;box-shadow:0 5px 0 #D9A900}
.ov-sala button.ghost{background:#F1F5F9;color:#3D556B;box-shadow:0 5px 0 #D5DDE6;margin-top:8px}
@media (max-width:760px){ #btnSala{font-size:14px;padding:6px 10px} }
/* Cabecera compacta y pegada arriba */
h2,.fila,#catalogo,#como{scroll-margin-top:86px}
.bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid #EDF1F5;padding:10px 18px;gap:10px}
.logo{font-size:19px;white-space:nowrap;gap:8px}
.logo svg{width:24px;height:24px}
nav{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;flex-wrap:nowrap}
nav a,.navlink{white-space:nowrap;font-size:16px}
.bar{overflow:hidden}
nav{min-width:0;-webkit-flex-shrink:1;flex-shrink:1}
.navsel{border:2px solid #E1E8EF;background:#fff;border-radius:999px;padding:7px 12px;font-family:inherit;font-size:15px;font-weight:800;color:#3D556B;cursor:pointer;max-width:130px}
.navcta{-webkit-flex:none;flex:none}
.navlink{border:2px solid #E1E8EF;background:#fff;border-radius:999px;padding:7px 14px;font-weight:800;color:#3D556B;font-family:inherit;cursor:pointer}
.navcta{padding:8px 18px !important;font-size:16px}

/* Catálogo por filas con desplazamiento horizontal */
.fila{margin-top:22px}
.fila-cab{display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline;-webkit-justify-content:space-between;justify-content:space-between;gap:12px}
.fila-cab h3{font-size:24px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:10px}
.fila-cab h3 i{width:12px;height:12px;border-radius:50%;display:inline-block}
.fila-cab span{font-size:15px;color:#7A8B9C;font-weight:700;white-space:nowrap}
.carril{display:-webkit-flex;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:12px 4px 16px;margin:0 -4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.carril::-webkit-scrollbar{height:8px}
.carril::-webkit-scrollbar-thumb{background:#D5DDE6;border-radius:4px}
.carril .card{-webkit-flex:0 0 250px;flex:0 0 250px;max-width:250px;margin:0;scroll-snap-align:start}
.carril .thumb{height:112px}
.carril .card-in{padding:12px 14px 14px}
.carril .card h3{font-size:19px;line-height:1.15}
.carril .card p{font-size:14px;line-height:1.35;max-height:76px;overflow:hidden}
.carril .tag{font-size:12px;padding:3px 8px}
.carril .modo{font-size:13px}
.carril .meta .tag:nth-child(n+4){display:none}
.carril .modo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carril .card .area{font-size:12px}
.carril .card p{max-height:58px}
.flechas{display:-webkit-flex;display:flex;gap:6px}
.flechas button{width:34px;height:34px;border-radius:999px;border:2px solid #E1E8EF;background:#fff;font-size:17px;font-weight:800;color:#3D556B;cursor:pointer;line-height:1}
.flechas button:disabled{opacity:.35}
@media (max-width:760px){
  .solo-ancho{display:none}
  .filters.filters{-webkit-flex-wrap:wrap;flex-wrap:wrap;overflow:visible;margin:8px 0 0;padding:0}
  .filters.filters button{-webkit-flex:0 0 auto;flex:0 0 auto;margin:0 6px 6px 0;font-size:13px;padding:6px 10px;border-width:2px;border-radius:11px}
  .flechas{display:none}
  .carril .card{-webkit-flex:0 0 78vw;flex:0 0 78vw;max-width:78vw}
  .fila-cab h3{font-size:21px}
  .logo{font-size:0;gap:0;-webkit-flex:none;flex:none}
  .navsel{font-size:14px;padding:6px 8px;max-width:104px}
  .navcta{padding:7px 14px !important;font-size:15px}
  nav{gap:6px}
  .logo svg{width:28px;height:28px}
}


/* todos los juegos, uno a uno (enlaces a sus fichas) */
.todos{margin:46px 0 10px}
.todos h2{font-size:28px;margin-bottom:6px}
.todos .lead{margin-bottom:14px}
.todos-grupos{-webkit-columns:3 260px;columns:3 260px;-webkit-column-gap:28px;column-gap:28px}
.todos-grupo{-webkit-column-break-inside:avoid;break-inside:avoid;margin-bottom:18px}
.todos-grupo h3{font-size:18px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;margin-bottom:4px}
.todos-grupo h3 i{width:12px;height:12px;border-radius:50%;display:inline-block}
.todos-grupo ul{list-style:none}
.todos-grupo li{padding:2px 0;font-weight:700;color:#2B4A63}
.todos-grupo a{text-decoration:underline;text-decoration-color:#C8D3DF;text-underline-offset:3px}
.todos-grupo a:hover{color:#2E7BF6;text-decoration-color:#2E7BF6}
footer .copy{font-size:13px;color:#5B7083;margin-top:8px}
/* cabecera de la portada: titular, la demo y un solo botón */
.hero{background:#CFEAFF;background-image:-webkit-linear-gradient(bottom,#8CCB5E 40px,#CFEAFF 40px);background-image:linear-gradient(to top,#8CCB5E 40px,#CFEAFF 40px)}
.hero-in{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;text-align:center;padding:22px 18px 58px;gap:0}
.hero h1{-webkit-order:1;order:1;font-size:35px;line-height:1.05;max-width:none;margin:0 auto}
.hero-art{-webkit-order:2;order:2;-webkit-flex:none;flex:none;width:100%;max-width:620px;min-width:0;margin-top:16px}
.hero-acc{-webkit-order:3;order:3;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;margin-top:18px;width:100%}
.hero .hero-p{-webkit-order:4;order:4;font-size:17px;color:#3D556B;margin:18px auto 0;max-width:40ch;line-height:1.4}
.hero .cta{display:block;margin:0;width:100%;max-width:340px;text-align:center;font-size:23px;padding:14px 28px;border-radius:18px;color:#1D2B3A;text-decoration:none}
.hero .cta:focus-visible,.hero-ver:focus-visible{outline:3px solid #1553B0;outline-offset:3px}
.hero-ver{margin-top:14px;font-weight:800;font-size:18px;color:#1553B0;text-decoration:none;border-bottom:3px solid #9CC8FF;line-height:1.3}
.hero-ver:hover{border-bottom-color:#1553B0}
.hero .hero-nota{margin:10px 0 0;max-width:none;font-size:15px;font-weight:700;color:#3D556B}
.hero .demo-rotulo{font-size:14px;margin:8px auto 0;max-width:none;color:#2B4A63}
.hero-pizarra{margin:0 auto}
.herr-linea{margin:14px 2px 0;font-size:16px;font-weight:700;color:#4A5B6C}
.herr-linea a{color:#1553B0;text-decoration:underline;text-decoration-color:#9CC8FF;text-underline-offset:3px}
@supports (display:grid){
  @media (min-width:861px){
    .hero{background-image:linear-gradient(to top,#8CCB5E 56px,#CFEAFF 56px)}
    .hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". art" "h1 art" "p art" "acc art" ". art";-webkit-column-gap:56px;column-gap:56px;text-align:left;-webkit-align-items:start;align-items:start;padding:36px 40px 92px}
    .hero h1{grid-area:h1;font-size:58px;margin:0;max-width:none}
    .hero .hero-p{grid-area:p;font-size:20px;margin:18px 0 0;max-width:34ch}
    .hero-art{grid-area:art;-webkit-align-self:center;align-self:center;margin:0;max-width:none}
    .hero-acc{grid-area:acc;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;margin-top:28px;gap:6px 26px}
    .hero .cta{width:auto;max-width:none;padding:15px 40px}
    .hero-ver{margin:0}
    .hero .hero-nota{width:100%;margin-top:8px}
  }
}
/* oferta con fecha: solo sale si está puesta en las estadísticas */
.oferta-franja{background:#1D2B3A;color:#fff}
.of-in{max-width:1180px;margin:0 auto;padding:10px 24px;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;gap:8px 16px;font-size:17px;font-weight:700;text-align:center;line-height:1.3}
.of-in b{color:#FFD23F;font-weight:800}
.of-in s{color:#AFC0D2}
.of-dias{background:#E0329E;color:#fff;border-radius:999px;padding:3px 12px;font-weight:800;font-size:15px;white-space:nowrap}
.of-btn{background:#FFD23F;color:#1D2B3A;border-radius:12px;padding:7px 16px;font-weight:800;text-decoration:none;box-shadow:0 4px 0 #D9A900;white-space:nowrap}
.of-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:640px){
  .of-in{padding:8px 12px 10px;font-size:14px;gap:5px 8px;line-height:1.25}
  .of-in > span:first-child{width:100%}
  .of-dias{font-size:12.5px;padding:2px 10px}
  .of-btn{padding:3px 12px;font-size:14px;border-radius:10px;box-shadow:0 3px 0 #D9A900}
}
/* cabecera del móvil: que nada se monte encima del logo */
@media (max-width:900px){
  .bar nav a{margin-left:0}
  .bar .navsel{padding:6px 4px}
}
/* pizarra y temporizador: con el nombre en pantalla grande; en las más estrechas, solo el dibujo
   (el nombre sigue ahí para los lectores de pantalla) */
@media (max-width:1279px){
  .bar .navpiz span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bar .navpiz{padding:6px;border-radius:10px;margin-left:12px}
  .bar .navpiz svg{width:22px;height:22px}
  .bar .navpiz:hover{background:#EAF2FB}
}
@media (max-width:1100px){
  .bar nav a.solo-ancho[href="#como"]{display:none}
  .bar nav a{margin-left:14px}
}
@media (max-width:1000px){
  .bar .logo{font-size:0}
}
@media (max-width:900px){
  .bar .navpiz{margin-left:0;padding:5px}
  .bar nav a{margin-left:0}
}
@media (max-width:600px){
  .bar{padding:8px 0;margin-left:-8px;margin-right:-8px;gap:4px}
  .bar nav{gap:4px}
  .bar .navpiz{padding:4px}
  .bar .navsel{font-size:13px;padding:5px 2px}
  .bar .navcta{padding:6px 10px !important;font-size:13px}
}
@media (max-width:560px){
  .bar .navlink{display:none}
}
@media (max-width:350px){
  .bar .navcta{display:inline-block;max-width:30vw;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
  .bar .navsel{max-width:27vw}
}
/* capturas reales de cada juego en las tarjetas, encima del dibujo (que queda si no carga) */
.thumb,.carril .thumb{height:auto;position:relative;overflow:hidden;background:#EAF2FB}
.thumb:before{content:'';display:block;padding-top:56.25%}
.thumb svg{position:absolute;left:0;top:0;width:100%;height:100%}
.thumb img{position:absolute;left:0;top:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 0;object-position:50% 0;display:block}

/* ---- cabecera: el desplegable Conócenos y lo que se recoge cuando no cabe (ajustaCabecera) ----
   Juegos y Unirse a una partida no se recogen nunca. Por orden: a1 Pizarra y Temporizador solo con dibujo ·
   a2 sin el nombre del logo · a3 Conócenos como botón de menú · a4 Pizarra y Temporizador al menú ·
   a5 el idioma al menú · a6 nombres cortos (Unirse, Ilimitado) · a7 menos aire · a8 sin el logo (móviles de 320) */
.bar.nv{overflow:visible}
.bar.nv nav{-webkit-flex:0 0 auto;flex:0 0 auto;min-width:0;gap:0;-webkit-justify-content:flex-end;justify-content:flex-end}
.bar.nv nav > *{margin-left:10px}
.bar.nv nav > a.nv-juegos,.bar.nv nav > .nv-mas{margin-left:20px}
.bar.nv nav > a.navpiz{margin-left:16px}
.bar.nv nav > select{margin-left:18px}
.bar.nv nav a.nv-juegos{display:inline}
.bar.nv #btnSala{display:inline-block}
.nv-mas{position:relative}
.nv-boton{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;gap:4px;border:0;background:none;font-family:inherit;font-weight:700;font-size:17px;color:#4A5B6C;cursor:pointer;padding:6px 4px;border-radius:10px;white-space:nowrap}
.nv-boton:hover,.nv-mas.abierto .nv-boton{color:#1D2B3A;background:#EAF2FB}
.nv-boton .nv-chev{margin-left:2px;-webkit-transition:transform .15s;transition:transform .15s}
.nv-mas.abierto .nv-chev{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.nv-boton .nv-hamb{display:none}
.nv-menu{display:none;position:absolute;right:0;top:100%;margin-top:10px;min-width:230px;background:#fff;border:2px solid #E1E8EF;border-radius:16px;box-shadow:0 12px 30px rgba(29,43,58,.16);padding:8px;z-index:40;text-align:left}
.nv-mas.abierto .nv-menu{display:block}
.bar.nv .nv-menu a{display:block;margin:0;padding:11px 14px;border-radius:10px;font-size:17px;font-weight:800;color:#3D556B;text-decoration:none;white-space:nowrap}
.bar.nv .nv-menu a:hover,.bar.nv .nv-menu a:focus-visible{background:#EAF2FB;color:#1D2B3A}
.bar.nv .nv-menu .nv-x-piz,.nv-menu .nv-x-idioma{display:none}
.nv-x-idioma{border-top:2px solid #EDF1F5;margin-top:6px;padding:10px 6px 4px}
.nv-x-idioma button{border:2px solid #E1E8EF;background:#fff;border-radius:10px;font-family:inherit;font-weight:800;font-size:15px;color:#3D556B;padding:6px 0;width:19%;margin-right:1%;cursor:pointer}
.nv-x-idioma button.on{background:#1D2B3A;border-color:#1D2B3A;color:#fff}
#btnSala .sl-c,.navcta .cta-c{display:none}
.bar.nv.a1 .navpiz span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar.nv.a1 nav > a.navpiz{padding:6px;border-radius:10px;margin-left:8px}
.bar.nv.a1 .navpiz svg{width:22px;height:22px}
.bar.nv.a2 .logo span{display:none}
.bar.nv.a3 .nv-boton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar.nv.a3 .nv-boton .nv-chev{display:none}
.bar.nv.a3 .nv-boton .nv-hamb{display:block}
.bar.nv.a3 .nv-boton{padding:6px;border:2px solid #E1E8EF;background:#fff}
.bar.nv.a3 nav > .nv-mas{margin-left:10px}
.bar.nv.a4 nav > a.navpiz{display:none}
.bar.nv.a4 .nv-menu .nv-x-piz{display:block}
.bar.nv.a5 nav > select{display:none}
.bar.nv.a5 .nv-menu .nv-x-idioma{display:block}
.bar.nv.a6 #btnSala .sl-l,.bar.nv.a6 .navcta .cta-l{display:none}
.bar.nv.a6 #btnSala .sl-c,.bar.nv.a6 .navcta .cta-c{display:inline}
.bar.nv.a7 nav > *{margin-left:6px}
.bar.nv.a7 nav > a.nv-juegos{margin-left:10px}
.bar.nv.a7 #btnSala,.bar.nv.a7 .navcta{padding-left:10px !important;padding-right:10px !important}
.bar.nv.a8 .logo{display:none}
.bar.nv.a8 nav > a.nv-juegos{margin-left:0}
@media (max-width:600px){ .nv-menu{min-width:210px} .bar.nv .nv-menu a{font-size:16px;padding:10px 12px} }


.pblog{margin:10px 0 40px}.pblog h2{font-size:32px;margin-bottom:6px}.pblog .lead{margin-bottom:16px}
.pblog-cards{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -8px}
.pblog-card{-webkit-flex:1 1 260px;flex:1 1 260px;margin:0 8px 16px;border:2px solid #E1EAF3;border-radius:18px;overflow:hidden;background:#fff;display:block;color:#1D2B3A;text-decoration:none;padding-bottom:12px}
.pblog-card img{display:block;width:100%;height:auto;background:#EAF2FB;margin-bottom:10px}
.pblog-card b{display:block;font-size:19px;line-height:1.25;padding:0 14px 4px}
.pblog-card span{display:block;font-size:15px;line-height:1.4;color:#5B7083;padding:0 14px}
.pblog-card:hover{border-color:#2E7BF6}.pblog-todo{font-weight:800;color:#1553B0;text-decoration:underline;text-underline-offset:3px}

/* etiquetas de curso y area y botones de la ficha (antes venian de la portada) */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.pill{background:#fff;border:2px solid #CFE0F5;border-radius:999px;padding:7px 14px;font-size:15px;font-weight:800;color:#1553B0}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
@media (max-width:860px){.pills,.ctas{justify-content:center}}
@media (max-width:760px){.pill{font-size:13.5px;padding:6px 11px}}

/* ---- fichas de los juegos ---- */
.bar .logo span{font-size:22px}
.f-idiomas{display:-webkit-inline-flex;display:inline-flex;gap:2px;margin:0 6px}
.f-idiomas a{font-weight:800;font-size:14px;padding:4px 7px;border-radius:8px;color:#3D556B}
.f-idiomas a.on{background:#1D2B3A;color:#fff}
.migas{font-size:15px;color:#5B7083;margin:2px 0 18px}
.migas a{text-decoration:underline;text-decoration-color:#C8D3DF;text-underline-offset:3px}
.migas span{margin:0 6px;color:#9AAABB}
.f-hero{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;margin:0 -16px 34px}
.f-txt,.f-captura{-webkit-flex:1 1 440px;flex:1 1 440px;padding:0 16px;min-width:0}
.f-txt h1{font-size:44px;line-height:1.08;margin-bottom:12px}
.f-intro{font-size:19px;line-height:1.5;color:#2B4A63;margin-bottom:16px}
.f-txt .pills{margin-bottom:18px}
.f-txt .ctas{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center}
.f-txt .ctas .cta{margin-right:16px}
.f-gratis{font-weight:800;color:#1E7B34}
.f-captura img{display:block;width:100%;height:auto;border-radius:18px;border:6px solid #1D2B3A;background:#EAF2FB;box-shadow:0 16px 40px rgba(29,43,58,.18)}
.f-area{background:#fff !important;border:2px solid}
.f-sec{margin:0 0 34px}
.f-sec h2,.f-consejo h2{font-size:28px;margin-bottom:12px}
.f-lista{list-style:none}
.f-lista li{position:relative;padding:6px 0 6px 34px;font-size:18px;line-height:1.45}
.f-lista li:before{content:'';position:absolute;left:4px;top:11px;width:18px;height:18px;border-radius:50%;background:#2FA84F}
.f-lista li:after{content:'';position:absolute;left:10px;top:15px;width:5px;height:9px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.f-niveles,.f-modos,.f-rels{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -8px}
.f-niv,.f-modo{-webkit-flex:1 1 230px;flex:1 1 230px;margin:0 8px 16px;background:#F4F8FC;border:2px solid #E1EAF3;border-radius:16px;padding:14px 16px}
.f-niv h3,.f-modo h3{font-size:19px;margin-bottom:4px;color:#1F5FBF}
.f-niv p,.f-modo p{font-size:16px;line-height:1.45;color:#2B4A63}
.f-pasos{counter-reset:paso;list-style:none}
.f-pasos li{counter-increment:paso;position:relative;padding:8px 0 8px 48px;font-size:18px;line-height:1.45;min-height:44px}
.f-pasos li:before{content:counter(paso);position:absolute;left:0;top:4px;width:36px;height:36px;border-radius:50%;background:#2E7BF6;color:#fff;font-weight:800;text-align:center;line-height:36px}
.f-consejo{background:#FFF6D6;border-left:8px solid #FFD23F;border-radius:14px;padding:16px 20px;margin:0 0 34px}
.f-consejo p{font-size:18px;line-height:1.5}
.f-faq details{border-bottom:2px solid #E1EAF3;padding:12px 0}
.f-faq summary{font-weight:800;font-size:18px;cursor:pointer}
.f-faq details p{font-size:17px;line-height:1.5;color:#2B4A63;margin-top:8px}
.f-rel{-webkit-flex:1 1 220px;flex:1 1 220px;margin:0 8px 16px;border:2px solid #E1EAF3;border-radius:16px;overflow:hidden;background:#fff;display:block}
.f-rel img{display:block;width:100%;height:auto;background:#EAF2FB}
.f-rel span{display:block;font-weight:800;font-size:18px;padding:10px 14px 2px}
.f-rel small{display:block;font-size:15px;line-height:1.4;color:#5B7083;padding:0 14px 14px}
.f-rel:hover{border-color:#2E7BF6}
.f-fin{text-align:center;background:#EAF2FB;border-radius:20px;padding:26px 16px;margin:10px 0 30px}
.f-fin p{font-size:26px;font-weight:800;margin-bottom:12px}
.q-p{font-size:18px;line-height:1.55;color:#1D2B3A;max-width:46em}
.q-hero figcaption{font-size:15px;color:#5B7083;font-weight:700;margin-top:10px;text-align:center}
.q-datos{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -8px}
.q-datos div{-webkit-flex:1 1 300px;flex:1 1 300px;margin:0 8px 14px;background:#F4F8FC;border:2px solid #E1EAF3;border-radius:16px;padding:12px 16px}
.q-datos dt{font-size:14px;font-weight:800;color:#5B7083;margin-bottom:2px}
.q-datos dd{font-size:17px;font-weight:700;line-height:1.4;color:#1D2B3A}
.q-datos a{color:#1553B0;text-decoration:underline;text-underline-offset:3px}
.q-escribe{margin-top:6px}
@media (max-width:760px){.f-txt h1{font-size:34px}.f-intro{font-size:17px}.f-sec h2,.f-consejo h2{font-size:24px}.f-captura{margin-top:18px}.f-idiomas a{padding:4px 5px;font-size:13px}}
@media (max-width:430px){.bar .logo span{display:none}.bar .logo{-webkit-flex:none;flex:none}.f-idiomas{margin:0 2px}.f-idiomas a{padding:3px 4px;font-size:12px}.f-txt .ctas .cta{margin-bottom:8px}}

/* ---- blog (lo añade genera-blog.py) ---- */
.bar nav a[aria-current="page"]{color:#2E7BF6}
.b-art{max-width:760px;margin:0 auto}
.b-cab{margin:6px 0 22px}
.b-cab h1{font-size:44px;line-height:1.1;margin:4px 0 10px}
.b-tema{display:inline-block;background:#EAF2FB;color:#1553B0;font-weight:800;font-size:15px;border-radius:999px;padding:4px 12px}
.b-meta{color:#5B7083;font-size:16px;margin-bottom:14px}
.b-lead{font-size:21px;line-height:1.55;color:#2B4A63}
.b-hero{margin:0 0 30px}
.b-hero img,.b-fig img{display:block;width:100%;height:auto;border-radius:18px;background:#EAF2FB}
.b-art>h2,.b-art>section>h2{font-size:30px;line-height:1.2;margin:34px 0 12px}
.b-art>h3{font-size:23px;margin:26px 0 8px;color:#1F5FBF}
.b-art>p{font-size:19px;line-height:1.65;margin:0 0 16px;color:#22394D}
.b-art a{color:#1553B0;text-decoration:underline;text-decoration-color:#9CC0F0;text-underline-offset:3px}
.b-art a:hover{text-decoration-color:#1553B0}
.b-lista{margin:0 0 18px;padding-left:26px}
.b-lista li{font-size:19px;line-height:1.6;margin:0 0 8px;color:#22394D;padding-left:4px}
.b-fig{margin:24px 0 26px}
.b-fig figcaption{font-size:16px;line-height:1.45;color:#5B7083;margin-top:8px;text-align:center}
.b-aula{background:#EAF2FB;border-radius:18px;padding:18px 20px 8px;margin:26px 0}
.b-aula h2{font-size:24px;margin:0 0 8px}
.b-aula p{font-size:18px;line-height:1.6;margin:0 0 14px;color:#22394D}
.b-jgs{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -6px}
.b-art a.b-jg,.b-jg{-webkit-flex:1 1 150px;flex:1 1 150px;max-width:220px;margin:0 6px 12px;background:#fff;border:2px solid #D3E2F2;border-radius:14px;overflow:hidden;text-decoration:none;color:#1D2B3A;display:block}
.b-jg img{display:block;width:100%;height:auto;background:#EAF2FB}
.b-jg span{display:block;font-weight:800;font-size:16px;padding:7px 10px 9px;line-height:1.25}
.b-jg:hover{border-color:#2E7BF6}
.b-tabla{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.b-tabla table{border-collapse:collapse;width:100%;min-width:520px;font-size:17px;line-height:1.45}
.b-tabla th,.b-tabla td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:2px solid #E1EAF3}
.b-tabla thead th{background:#1D2B3A;color:#fff;font-size:16px}
.b-tabla thead th:first-child{border-radius:12px 0 0 0}.b-tabla thead th:last-child{border-radius:0 12px 0 0}
.b-tabla tbody th{color:#1F5FBF;white-space:nowrap}
.b-faq{margin-top:34px}
.b-fuentes{margin:34px 0 10px}
.b-fuentes ol{padding-left:22px}
.b-fuentes li{font-size:15px;line-height:1.5;color:#5B7083;margin-bottom:8px;overflow-wrap:anywhere}
.b-mas{margin:40px 0 10px}
.b-mas h2{font-size:28px;margin-bottom:12px}
.b-cards{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -8px}
.b-card{-webkit-flex:1 1 300px;flex:1 1 300px;margin:0 8px 18px;border:2px solid #E1EAF3;border-radius:18px;overflow:hidden;background:#fff;display:block;color:#1D2B3A;text-decoration:none;padding-bottom:14px}
.b-card img{display:block;width:100%;height:auto;background:#EAF2FB;margin-bottom:12px}
.b-card .b-tema{margin:0 14px 6px}
.b-card h2,.b-card h3{font-size:21px;line-height:1.25;padding:0 14px;margin:0 0 6px}
.b-card small{display:block;font-size:15.5px;line-height:1.45;color:#5B7083;padding:0 14px}
.b-card:hover{border-color:#2E7BF6}
.b-cabindice{max-width:760px}
.b-cards-grandes .b-card{-webkit-flex:1 1 340px;flex:1 1 340px}
.f-fin .b-gratis{display:block;margin-top:12px;font-weight:800;color:#1E7B34}
.b-delblog .b-cards{margin-top:4px}
.b-delblog .b-card{max-width:420px}
@media (max-width:760px){.b-cab h1{font-size:32px}.b-lead{font-size:18.5px}.b-art>h2,.b-art>section>h2{font-size:25px}.b-art>p,.b-lista li{font-size:17.5px}.b-aula p{font-size:17px}
.b-art a.b-jg,.b-jg{-webkit-flex:1 1 40%;flex:1 1 40%;max-width:calc(50% - 12px)}.b-jg span{font-size:14.5px}
.migas b{display:none}
.b-tabla table{min-width:0}.b-tabla thead{display:none}.b-tabla table,.b-tabla tbody,.b-tabla tr,.b-tabla th,.b-tabla td{display:block;width:auto}
.b-tabla tr{border:2px solid #E1EAF3;border-radius:14px;margin-bottom:12px;padding:6px 4px}
.b-tabla th,.b-tabla td{border:0;padding:6px 10px}.b-tabla tbody th{white-space:normal;font-size:18px}
.b-tabla td:before{content:attr(data-label);display:block;font-size:13.5px;color:#5B7083;font-weight:800}}