/* Inglés con la Biblia (englishclasses.es), 6-nov-2026: la portada C que eligió Ramón, sobre la estética de la web.
   Va DESPUÉS de /estilo-nuevo.css y solo añade lo propio del curso, con sus mismas variables (--bg, --card, --line,
   --soft, --ink, --ink2, --es naranja = la lengua propia, --en azul = la que se practica, --ok, --r, --shadow). */

/* El menú de la web, desplegado en pantallas anchas, igual que en la portada (portada-moderna.css). */
@media (min-width:1180px){
  nav .wrap.nav-in{max-width:1280px;gap:.8rem}
  nav .busca{display:none}
  nav .menu{display:flex;position:static;width:auto;flex-direction:row;align-items:center;background:none;padding:0;border:0;gap:.95rem}
  nav .menu a{font-size:.85rem}
  nav .menu .busca-m{display:none}
  nav .burger{display:none}
  nav .menu-desp{position:relative;width:auto;border:0;padding:0;display:inline-flex;gap:.2rem}
  nav .menu-desp>a{padding:0}
  nav .menu-desp .desp-boton{width:19px;height:19px}
  nav .menu-desp .desp-panel{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);min-width:250px;width:auto;padding:.5rem;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  nav .menu .zona{padding:.45rem .95rem;font-size:.84rem}
}

/* El menú propio del curso, debajo del de la web */
.ib-sub{border-bottom:1px solid var(--line);background:var(--bg2,#fff)}
/* Todo a la vista, nada se desliza (Ramón, 6-nov-2026): si no cabe en una línea, los enlaces pasan a la siguiente. */
.ib-sub .wrap{display:flex;flex-wrap:wrap;column-gap:1.4rem;row-gap:.5rem;align-items:center;padding-top:.8rem;padding-bottom:.8rem}
@media(max-width:820px){.ib-sub .marca-ib{flex-basis:100%}}
.ib-sub a{color:var(--ink2);text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap}
.ib-sub a.on{color:var(--ink)}
.ib-sub .marca-ib{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink);font-size:1.05rem;margin-right:.4rem}
.cargando{color:var(--ink2);padding:40px 0}

/* Portada C */
.hero-c{padding:56px 0 44px}
.hero-c .dos{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero-c h1{font-size:clamp(2.2rem,4.6vw,3.3rem);margin:0 0 1rem}
.hero-c .botones-h{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.firma{display:flex;gap:.9rem;align-items:center;margin-top:1.6rem}
.firma img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.firma b{display:block}.firma span{color:var(--ink2);font-size:.95rem}
.demo .ib-ref-demo{font-size:.8rem;color:var(--ink2);font-weight:600;margin-bottom:1rem}
.demo .fin-demo{margin-top:1rem;color:var(--ink2)}
.ib-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.8rem}
.ib-precios{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:760px;margin:1.8rem auto 0}
.ib-precio{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow);text-align:center}
.ib-precio.dest{border:2px solid var(--es)}
.ib-precio .cifra{font-family:'Fraunces',Georgia,serif;font-size:2.6rem;font-weight:600;line-height:1}
.ib-precio .cada{color:var(--ink2)}
.ib-precio .ahorro{color:var(--ok-texto,#10865C);font-weight:700;margin:.6rem 0 1rem;min-height:1.6em}
.ib-centro{text-align:center}.ib-centro .sub{margin:0 auto}
.ib-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.ib-cab h1,.ib-cab h2{margin:0}

/* Las lenguas: una pastilla y, al pulsar «Cambiar», el panel con todas */
.ib-pill{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.4rem .5rem .4rem 1rem;box-shadow:var(--shadow);font-weight:600}
.ib-pill .tu{color:var(--es-texto,#B64625)}.ib-pill .pr{color:var(--en)}
.ib-pill button{border:0;background:var(--soft);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.88rem;cursor:pointer;color:var(--ink)}
.ib-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.2rem 1.4rem;margin-top:.8rem;max-width:720px}
.fila{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem}
.rot{width:100%;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:.45rem 1rem;font:inherit;font-size:.95rem;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.resumen{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-weight:700}

/* Los versículos */
.ib-v{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.35rem;box-shadow:var(--shadow)}
.ib-v + .ib-v{margin-top:.8rem}
.ib-ref{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:.45rem}
.ib-l{display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem .8rem;align-items:start;margin:.4rem 0}
.ib-l b{font-size:.72rem;font-weight:800;border-radius:6px;padding:.18rem 0;text-align:center;margin-top:.28rem}
.ib-l.tu b{background:color-mix(in srgb,var(--es) 14%,transparent);color:var(--es-texto,#B64625)}
.ib-l.pr b{background:color-mix(in srgb,var(--en) 12%,transparent);color:var(--en)}
.ib-l p{margin:0;font-size:1.06rem;line-height:1.55;white-space:pre-line}
.ib-l.pr p{font-weight:600}
mark{background:#FFE7A8;color:inherit;border-radius:3px;padding:0 2px}
.ib-acc{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.ib-acc button,.oir{font:inherit;font-size:.85rem;border:1px solid var(--line);border-radius:999px;padding:.28rem .75rem;color:var(--ink2);background:var(--bg);cursor:pointer}
.nota{color:var(--ink2)}
.barra-lector{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.barra-lector select{font:inherit;padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);max-width:100%}
.barra-lector .sig{margin-left:auto;display:flex;gap:.6rem}
.cerrado{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2rem;text-align:center;box-shadow:var(--shadow)}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.btn-s{background:var(--soft);color:var(--ink);border:1px solid var(--line)}

/* Puentes y Empareja (pestañas de la portada) */
.pestanas{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.2rem}
.pestanas button{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font:inherit;font-size:.85rem;font-weight:700;color:var(--ink2);cursor:pointer}
.pestanas button.on{background:var(--es-btn);color:var(--es-btn-ink,#fff);border-color:var(--es-btn)}
.panel{display:none}.panel.on{display:block}
.palabras{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.palabras button{font:inherit;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.45rem 1rem;cursor:pointer;color:var(--ink)}
.palabras button.on{border-color:var(--es);color:var(--es-texto,#B64625)}
.mapa{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:.8rem}
.mapa div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;text-align:center}
.mapa small{display:block;color:var(--ink2);font-size:.85rem}
.mapa strong{font-family:'Fraunces',Georgia,serif;font-size:1.6rem}
.ops{display:grid;gap:.6rem}
.ops button{font:inherit;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;cursor:pointer;color:var(--ink)}
blockquote{font-size:1.15rem;font-weight:600;margin:.6rem 0 1rem;padding-left:1rem;border-left:3px solid var(--en);white-space:pre-line}
.ref{color:var(--ink2)}
.res{min-height:1.6em;margin-top:.8rem;font-weight:700}

/* Tarjetas sueltas (ficha, suscripción, cómo aprender) */
.paso{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.5rem 1.6rem;margin:1rem 0}
.paso h2{font-size:1.5rem;margin:0 0 .6rem}
.texto h2{font-size:1.5rem;margin:0 0 .8rem}.texto h3{font-size:1.1rem;margin:1.2rem 0 .4rem}.texto li{margin-bottom:.4rem}
.esfuerzos{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem}
.esfuerzo{border:1px solid var(--line);border-radius:14px;padding:1rem;cursor:pointer;background:var(--bg)}
.esfuerzo.on{border-color:var(--es);box-shadow:0 0 0 2px var(--es) inset}
.esfuerzo b{display:block;font-size:1.15rem}.esfuerzo .min{color:var(--es-texto,#B64625);font-weight:700}
.esfuerzo p{margin:.3rem 0 0;color:var(--ink2);font-size:.92rem}
.linea-cuando{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.linea-cuando input{flex:1;min-width:220px;font:inherit;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.compromiso{background:var(--soft);border-radius:14px;padding:1rem 1.2rem;font-size:1.05rem;margin-top:1rem}
.hoy{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem}
.cifras div{background:var(--soft);border-radius:14px;padding:1rem}
.cifras b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.6rem}.cifras span{color:var(--ink2);font-size:.9rem}
.semana{display:flex;gap:.5rem;flex-wrap:wrap}
.dia{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;background:var(--soft);color:var(--ink2)}
.dia.si{background:var(--ok);color:#fff}
.hito{margin-top:.8rem;color:var(--ok-texto,#10865C);font-weight:700}
.toca{display:inline-block;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok-texto,#10865C);border-radius:999px;padding:.1rem .7rem;font-size:.8rem;font-weight:700;margin-bottom:.4rem}
.vers{border-top:1px solid var(--line);padding:.9rem 0;display:grid;grid-template-columns:7rem 1fr;gap:.8rem}
.vers .num{color:var(--ink2);font-weight:700;font-size:.85rem}
.vers p{margin:0 0 .3rem}
.practica-l{font-weight:600}.apoyo{color:var(--ink2)}

/* Ejercicios de Frasly */
.menu-ej{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.menu-ej button{all:unset;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.3rem;display:flex;flex-direction:column;gap:.35rem;transition:transform .15s,border-color .15s}
.menu-ej button:hover{transform:translateY(-3px);border-color:var(--es)}
.menu-ej .ico{font-size:1.6rem}.menu-ej b{font-family:'Fraunces',Georgia,serif;font-size:1.2rem}.menu-ej span{color:var(--ink2);font-size:.93rem}
.menu-ej button.estrella{border:2px solid var(--es)}
.ej{max-width:780px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin:1rem 0 2rem}
.ej-barra{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.3rem;border-bottom:1px solid var(--line);background:var(--soft);flex-wrap:wrap}
.ej-barra b{font-weight:800}.ej-barra small{color:var(--ink2)}
.puntos{display:flex;gap:6px}.puntos i{width:10px;height:10px;border-radius:50%;background:var(--line)}.puntos i.ok{background:var(--ok)}.puntos i.mal{background:var(--es)}.puntos i.ya{outline:2px solid var(--ink);outline-offset:1px}
.ej-cuerpo{padding:1.5rem 1.3rem}
.ej-cuerpo .lbl{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ej-cuerpo .lbl.tu{color:var(--es)}.ej-cuerpo .lbl.pr{color:var(--en)}
.ej-cuerpo .frase{font-family:'Fraunces',Georgia,serif;font-size:1.45rem;margin:.3rem 0 1.1rem;line-height:1.3}
.ej-cuerpo .en-linea{border-top:2px dashed var(--line);padding-top:1rem;min-height:4.6em}
textarea.esc{width:100%;font:inherit;font-size:1.08rem;padding:.85rem 1rem;border:2px solid var(--line);border-radius:14px;background:var(--bg);margin:1rem 0;min-height:92px;color:var(--ink)}
textarea.esc:focus{outline:none;border-color:var(--en)}
.fila-btn{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.fichas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.fichas button{font:inherit;font-weight:700;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.5rem .85rem;cursor:pointer;color:var(--ink);box-shadow:0 2px 0 var(--line)}
.montada{min-height:3.2rem;border-bottom:2px dashed var(--line);margin-top:1rem;padding:.4rem 0;font-weight:700;font-size:1.12rem;color:var(--en)}
.hueco{display:inline-block;min-width:5rem;border-bottom:3px solid var(--en);text-align:center;color:var(--en)}
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.1rem}
.opciones button{font:inherit;font-weight:700;padding:.85rem;border-radius:14px;border:1px solid var(--line);background:var(--bg);cursor:pointer;color:var(--ink)}
.resp{margin-top:1.1rem;border-radius:14px;padding:.9rem 1.1rem;display:none}
.resp.ok{display:block;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok-texto,#10865C)}
.resp.mal{display:block;background:color-mix(in srgb,var(--es) 10%,transparent);color:var(--ink)}
.resp b{display:block;margin-bottom:.2rem}
.fin-ej{text-align:center;padding:2.2rem 1.3rem}.fin-ej .cifra{font-family:'Fraunces',Georgia,serif;font-size:2.8rem;font-weight:600}
.micro{font-size:2.2rem;width:80px;height:80px;border-radius:50%;border:0;background:var(--en);color:#fff;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--en) 40%,transparent)}

@media(max-width:820px){
  .hero-c .dos{grid-template-columns:1fr;gap:2rem}
  .ib-tres,.ib-precios,.esfuerzos{grid-template-columns:1fr}
  .menu-ej{grid-template-columns:1fr 1fr}
  .opciones{grid-template-columns:1fr}
  .mapa{grid-template-columns:repeat(2,1fr)}
  .barra-lector .sig{margin-left:0;width:100%;justify-content:space-between}
  .cifras{grid-template-columns:1fr 1fr}
  .vers{grid-template-columns:1fr;gap:.2rem}
}
@media(max-width:480px){.menu-ej{grid-template-columns:1fr}}
@media(max-width:820px){.ib-pill{border-radius:18px}}
/* El curso por lecciones (6-nov-2026) y «← Volver» en cada pantalla */
.volver{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink2);text-decoration:none;background:none;border:0;font:inherit;font-weight:700;cursor:pointer;padding:0;margin-bottom:.9rem}
.volver:hover{color:var(--ink)}
.seguir{background:var(--card);border:2px solid var(--es);border-radius:var(--r);box-shadow:var(--shadow);padding:1.4rem 1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.seguir small{display:block;color:var(--ink2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem}
.seguir b{font-family:'Fraunces',Georgia,serif;font-size:1.4rem}
.cinco{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:1.4rem}
.cinco div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--shadow)}
.cinco .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);font-weight:800;font-size:.85rem;margin-bottom:.4rem}
.cinco b{display:block}.cinco span{color:var(--ink2);font-size:.9rem}
.mapa-c{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.2rem}
.mapa-c a{color:inherit;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.mapa-c a:hover{border-color:var(--es)}
.mapa-c a b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.15rem}
.mapa-c a span{color:var(--ink2);font-size:.88rem}
.mapa-c a.hecha{border-color:var(--ok)}.mapa-c a.hecha span{color:var(--ok-texto,#10865C);font-weight:700}
.mapa-c a.cerrada{opacity:.6}
.pasos{display:grid;gap:.7rem;margin-top:1.2rem;max-width:760px}
.pasos a{color:inherit;text-decoration:none;display:grid;grid-template-columns:44px 1fr auto;gap:1rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--shadow)}
.pasos a:hover{border-color:var(--es)}
.pasos .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--soft)}
.pasos a.hecho .n{background:var(--ok);color:#fff}
.pasos a.toca{border:2px solid var(--es)}
.pasos b{display:block}.pasos span{color:var(--ink2);font-size:.92rem}
.pasos em{font-style:normal;font-weight:700;color:var(--es-texto,#B64625);font-size:.9rem}
.pasos a.hecho em{color:var(--ok-texto,#10865C)}
.tira{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.tira a{font-size:.8rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;background:var(--soft);color:var(--ink2);text-decoration:none}
.tira a.on{background:var(--es-btn);color:#fff}.tira a.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-texto,#10865C)}
.fin-paso{text-align:center;padding:2rem 1.3rem}
@media(max-width:820px){.cinco{grid-template-columns:1fr 1fr}.mapa-c{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cinco{grid-template-columns:1fr}.pasos a{grid-template-columns:40px 1fr}.pasos em{grid-column:2}}
/* Tus cursos: una tarjeta por pareja de lenguas (6-nov-2026) */
.cursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:1.2rem}
.curso-par{display:flex;flex-direction:column;gap:.3rem;color:inherit;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.2rem 1.3rem}
.curso-par small{color:var(--ink2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem}
.curso-par b{font-family:'Fraunces',Georgia,serif;font-size:1.3rem}
.curso-par span{color:var(--ink2);font-size:.93rem}
.curso-par em{font-style:normal;font-weight:700;color:var(--es-texto,#B64625);margin-top:.4rem}
.curso-par .ver{color:var(--ink2);font-weight:600;font-size:.92rem;margin-top:.5rem}
.curso-par .ver:hover{color:var(--ink)}
/* Portada: 1. Elige tus lenguas, 2. Empieza (6-nov-2026) */
.elige{margin-top:1.4rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1rem 1.2rem}
.elige-t{font-weight:800;font-size:1.05rem;margin-bottom:.4rem}