/* ==========================================================================
   holaprivet — hoja de estilo
   Azulejo sevillano: azul cobalto sobre cal. PT Serif / PT Sans (cirilico
   nativo). El espanol se puede escuchar y el propio texto lo indica.
   ========================================================================== */

:root{
  --tinta:#12263A;
  --azul:#1F5C8B;
  --azul-claro:#DCE8F1;
  --cal:#F6F8FA;
  --papel:#FFFFFF;
  --gris:#5E7183;
  --gris-suave:#8FA0AE;
  --linea:#E2E9EF;
  --ambar:#B87A2B;
  --verde:#1F6B4D;
  --rojo:#9B3232;

  --serif:"PT Serif", Georgia, serif;
  --sans:"PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --col:41rem;
  --radio:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--cal); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2.5px solid var(--azul); outline-offset:3px; border-radius:2px}
img{max-width:100%; height:auto}
a{color:var(--azul)}

/* --------------------------------------------------------------- cabecera */
.barra{position:sticky; top:0; z-index:20; background:rgba(246,248,250,.93);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea)}
.barra-in{max-width:76rem; margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; gap:1.5rem}
.marca{font-family:var(--serif); font-weight:700; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--tinta); text-decoration:none}
.marca span{color:var(--azul)}
.barra nav{margin-left:auto; display:flex; gap:1.3rem; font-size:.87rem}
.barra nav a{color:var(--gris); text-decoration:none}
.barra nav a:hover{color:var(--azul)}
.barra nav a.act{color:var(--tinta); font-weight:700}

/* ------------------------------------------------------------ estructura */
.envoltura{max-width:76rem; margin:0 auto; padding:0 1.5rem 6rem;
  display:grid; grid-template-columns:1fr; gap:2.5rem}
@media(min-width:62rem){
  .envoltura{grid-template-columns:14rem minmax(0,var(--col)) 1fr;
    gap:3.5rem; padding-top:3rem}
}
main{padding-top:2.5rem}
@media(min-width:62rem){main{padding-top:0}}
.ancho{max-width:76rem; margin:0 auto; padding:2.5rem 1.5rem 6rem}

/* --------------------------------------------------------- indice lateral */
.indice{display:none}
@media(min-width:62rem){
  .indice{display:block; position:sticky; top:5.5rem; align-self:start; font-size:.84rem}
}
.indice h2{font-size:.7rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--gris-suave); margin:0 0 .9rem; font-weight:700; font-family:var(--sans)}
.indice ol{list-style:none; margin:0; padding:0}
.indice a{display:flex; gap:.65rem; padding:.32rem .6rem; border-radius:5px;
  color:var(--gris); text-decoration:none; border-left:2px solid transparent}
.indice a:hover{background:var(--azul-claro); color:var(--tinta)}
.indice a.act{color:var(--tinta); font-weight:700; border-left-color:var(--azul); background:var(--papel)}
.indice .n{color:var(--gris-suave); font-variant-numeric:tabular-nums; min-width:.9rem}

/* -------------------------------------------------------------- titulares */
.eyebrow{display:flex; align-items:center; gap:.6rem; font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--azul); margin-bottom:1rem}
.eyebrow .pipe{width:1.6rem; height:2px; background:var(--azul); opacity:.45}

h1{font-family:var(--serif); font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.14;
  margin:0 0 .35rem; letter-spacing:-.018em; font-weight:700}
.h1-ru{font-family:var(--serif); font-size:clamp(1.05rem,2.6vw,1.3rem);
  color:var(--gris); margin:0 0 1.6rem; font-weight:400}

.meta{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.6rem}
.chip{font-size:.78rem; padding:.28rem .7rem; border-radius:99px;
  background:var(--papel); border:1px solid var(--linea); color:var(--gris)}
.chip b{color:var(--tinta); font-weight:700}

section{margin-bottom:3.4rem; scroll-margin-top:5.5rem}
h2{font-family:var(--serif); font-size:1.42rem; margin:0 0 .15rem; letter-spacing:-.01em}
.h2-ru{font-size:.9rem; color:var(--gris-suave); margin:0 0 1.3rem; font-family:var(--serif)}
h3{font-family:var(--serif); font-size:1.08rem; margin:1.8rem 0 .6rem}
p{margin:0 0 1rem}
.ru{color:var(--gris)}
hr{border:0; border-top:1px solid var(--linea); margin:2rem 0}

/* ----------------------------------------------- EL ELEMENTO CENTRAL: audio
   Todo el espanol se puede escuchar y el texto mismo lo dice.               */
.es{
  font-weight:700; color:var(--tinta); cursor:pointer;
  border-bottom:2px dotted var(--azul); padding-bottom:1px;
  background:linear-gradient(var(--azul-claro),var(--azul-claro)) no-repeat 0 100%/0 100%;
  transition:background-size .22s ease;
}
.es:hover,.es:focus-visible{background-size:100% 100%; border-bottom-style:solid}
.es.son{background-size:100% 100%; border-bottom-style:solid}
@media(prefers-reduced-motion:reduce){.es{transition:none}}

/* ----------------------------------------------------------------- escena */
.escena{background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden}
.escena-top{display:flex; align-items:center; gap:.75rem; padding:.8rem 1.4rem;
  border-bottom:1px solid var(--linea); background:var(--cal)}
.escena-top .lugar{font-size:.82rem; color:var(--gris); font-style:italic; flex:1}
.oir{display:inline-flex; align-items:center; gap:.45rem; font-size:.79rem; font-weight:700;
  color:var(--azul); background:none; border:1px solid var(--azul); border-radius:99px;
  padding:.3rem .8rem; cursor:pointer; font-family:var(--sans)}
.oir:hover{background:var(--azul); color:#fff}
.oir svg{width:13px; height:13px}
.replicas{padding:1.4rem}
.replica{display:grid; grid-template-columns:1fr; gap:.15rem; padding:.7rem 0}
.replica + .replica{border-top:1px solid var(--linea)}
@media(min-width:34rem){
  .replica{grid-template-columns:7.5rem 1fr; gap:1.2rem; align-items:baseline}
}
.quien{font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--azul)}
.acota{display:block; font-size:.73rem; font-weight:400; text-transform:none;
  letter-spacing:0; color:var(--gris-suave); font-style:italic;
  margin-top:.1rem; font-family:var(--serif)}
.dice{font-size:1.02rem}
.corte{text-align:center; color:var(--gris-suave); font-style:italic;
  font-size:.85rem; font-family:var(--serif); padding:.5rem 0}

/* ---------------------------------------------------------------- relato
   En los cuentos el texto es prosa continua. Si cada frase llevara el
   subrayado punteado, la pagina entera seria un campo de puntos: aqui el
   audio se sugiere solo al pasar por encima.                              */
.relato{padding:1.6rem 1.6rem .8rem}
.relato p{font-size:1.06rem; line-height:1.72; margin:0 0 1.05rem}
.relato .trad{font-family:var(--serif); font-size:.95rem; margin-top:-.7rem}
.es.lisa{border-bottom:0; font-weight:400; padding-bottom:0}
.es.lisa:hover,.es.lisa:focus-visible,.es.lisa.son{
  background-size:100% 100%; border-bottom:0; border-radius:2px;
}
.nota-cuento{
  margin:0 0 1.05rem; padding:.75rem 1.1rem; border-left:3px solid var(--azul-claro);
  background:var(--cal); border-radius:0 6px 6px 0;
  font-family:var(--serif); font-style:italic; color:var(--gris);
}
.nota-cuento .es{font-style:italic}

/* --------------------------------------------------------------- frases */
.frases{list-style:none; margin:0; padding:0; counter-reset:f}
.frases li{counter-increment:f; display:grid; grid-template-columns:1.7rem 1fr;
  gap:.9rem; padding:.72rem 0; border-bottom:1px solid var(--linea)}
.frases li::before{content:counter(f,decimal-leading-zero); font-size:.74rem;
  color:var(--gris-suave); font-variant-numeric:tabular-nums; padding-top:.28rem}
.par .tr{display:block; color:var(--gris); font-family:var(--serif);
  font-size:.94rem; margin-top:.1rem}

/* -------------------------------------------------------------- glosario */
.glosario{background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden; margin-bottom:1.4rem}
.glosario-top{padding:.7rem 1.1rem; border-bottom:1px solid var(--linea);
  background:var(--cal); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--gris)}
.voces{list-style:none; margin:0; padding:.4rem 1.1rem}
.voces li{display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  padding:.42rem 0; border-bottom:1px solid var(--linea); font-size:.95rem}
.voces li:last-child{border-bottom:0}
.voces .rus{color:var(--gris); font-family:var(--serif)}
.voces .visto{font-size:.72rem; color:var(--gris-suave)}

/* ---------------------------------------------------------------- tablas */
table{width:100%; border-collapse:collapse; background:var(--papel);
  border:1px solid var(--linea); border-radius:8px; overflow:hidden;
  font-size:.95rem; margin:0 0 1.2rem}
th{background:var(--tinta); color:#fff; text-align:left; padding:.6rem .9rem;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700}
td{padding:.62rem .9rem; border-top:1px solid var(--linea); vertical-align:top}
td:last-child{color:var(--gris); font-family:var(--serif)}
.tabla-scroll{overflow-x:auto}

/* ---------------------------------------------------------------- avisos */
.ojo{background:var(--papel); border:1px solid var(--linea);
  border-left:3px solid var(--ambar); border-radius:0 8px 8px 0;
  padding:1rem 1.2rem; margin-bottom:.7rem}
.ojo b{display:block; margin-bottom:.2rem}
.ojo p:last-child{margin-bottom:0}
.mal{color:var(--rojo); text-decoration:line-through; text-decoration-thickness:1px}
.bien{color:var(--verde); font-weight:700}
.tarea{background:var(--azul-claro); border-radius:var(--radio); padding:1.3rem 1.5rem}
.tarea h2,.tarea .h2-ru{margin-top:0}

/* --------------------------------------------------------------- listados */
ul.limpia{list-style:none; margin:0 0 1rem; padding:0}
ul.limpia li{padding:.3rem 0 .3rem 1.1rem; position:relative}
ul.limpia li::before{content:"·"; position:absolute; left:.2rem; color:var(--azul); font-weight:700}

/* ---------------------------------------------------------------- fichas */
.rejilla{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:38rem){.rejilla{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.rejilla.tres{grid-template-columns:1fr 1fr 1fr}}

.tarjeta{display:block; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1.1rem 1.25rem; text-decoration:none;
  color:inherit; transition:border-color .15s, transform .15s}
.tarjeta:hover{border-color:var(--azul); transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.tarjeta{transition:none} .tarjeta:hover{transform:none}}
.tarjeta .num{font-size:.72rem; font-weight:700; color:var(--azul);
  letter-spacing:.09em; text-transform:uppercase}
.tarjeta .tit{font-family:var(--serif); font-size:1.05rem; margin:.25rem 0 .1rem; line-height:1.3}
.tarjeta .sub{font-size:.86rem; color:var(--gris); font-family:var(--serif)}
.tarjeta .pie{margin-top:.7rem; font-size:.75rem; color:var(--gris-suave);
  display:flex; gap:.8rem; flex-wrap:wrap}

/* ---------------------------------------------------------------- niveles */
.nivel-cab{border-top:2px solid var(--tinta); padding-top:1rem; margin:3rem 0 1.4rem}
.nivel-cab .n{font-size:.76rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--azul)}
.nivel-cab h2{font-size:1.6rem; margin:.2rem 0 .1rem}
.nivel-cab p{color:var(--gris); font-family:var(--serif); margin:0}

/* ----------------------------------------------------------------- portada */
.hero{padding:4rem 0 3rem; border-bottom:1px solid var(--linea); margin-bottom:1rem}
.hero h1{font-size:clamp(2.2rem,6vw,3.4rem); max-width:18ch}
.hero .lema{font-family:var(--serif); font-size:clamp(1.1rem,2.8vw,1.4rem);
  color:var(--gris); max-width:34ch; margin:.6rem 0 1.8rem}
.cifras{display:flex; gap:2.2rem; flex-wrap:wrap; font-size:.86rem; color:var(--gris)}
.cifras b{display:block; font-family:var(--serif); font-size:1.7rem;
  color:var(--tinta); font-weight:700; line-height:1.1}

/* ----------------------------------------------------------------- pie */
.siguiente{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; background:var(--tinta); color:#fff; border-radius:var(--radio);
  padding:1.3rem 1.5rem; margin-top:3.5rem}
.siguiente .et{font-size:.74rem; text-transform:uppercase; letter-spacing:.11em; color:#8FB4D0}
.siguiente .ti{font-family:var(--serif); font-size:1.12rem; margin-top:.15rem}
.siguiente a{background:#fff; color:var(--tinta); text-decoration:none; font-weight:700;
  padding:.6rem 1.1rem; border-radius:6px; font-size:.9rem; white-space:nowrap}

.enlaces{list-style:none; margin:0; padding:0; font-size:.93rem}
.enlaces li{padding:.35rem 0; border-bottom:1px solid var(--linea)}
.enlaces a{text-decoration:none}
.enlaces a:hover{text-decoration:underline}

.pie-web{border-top:1px solid var(--linea); background:var(--papel)}
.pie-web div{max-width:76rem; margin:0 auto; padding:2rem 1.5rem;
  font-size:.83rem; color:var(--gris-suave); display:flex;
  justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ------------------------------------------------------------- ejercicios */
/* Interactivos: un intento por pregunta, correccion inmediata, resumen. */

.ej-como{color:var(--gris); font-size:.93rem}

.ej-progreso{
  height:6px; background:var(--azul-claro); border-radius:99px;
  overflow:hidden; margin:.25rem 0 .1rem;
}
.ej-barra{
  display:block; height:100%; width:0; background:var(--azul);
  border-radius:99px; transition:width .25s ease;
}
.ej-cuenta{color:var(--gris-suave); font-size:.85rem; margin:.15rem 0 1.2rem}

.ej-lista{padding-left:1.6rem; margin:0}
.ejercicio{margin:0 0 1.4rem}
.ej-enunciado{margin:.1rem 0 .55rem; font-family:var(--serif)}

.opciones{display:flex; flex-wrap:wrap; gap:.5rem}
.opcion{
  font:inherit; font-size:.95rem; color:var(--tinta);
  background:var(--papel); border:1.5px solid var(--linea);
  border-radius:var(--radio); padding:.42rem .8rem; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.opcion:hover:not(:disabled){border-color:var(--azul)}
.opcion:disabled{cursor:default; color:var(--gris)}
.opcion .letra{color:var(--gris-suave); font-size:.85em; margin-right:.15rem}

.opcion.op-correcta{
  border-color:var(--verde); background:#EAF3EE; color:var(--verde);
  font-weight:700;
}
.opcion.op-correcta .letra{color:var(--verde)}
.opcion.op-fallida{
  border-color:var(--rojo); background:#F7ECEC; color:var(--rojo);
  text-decoration:line-through;
}
.opcion.op-fallida .letra{color:var(--rojo)}

.explicacion{
  margin:.6rem 0 0; padding:.5rem .9rem; font-size:.92rem;
  color:var(--gris); background:var(--cal);
  border-left:3px solid var(--linea); border-radius:0 var(--radio) var(--radio) 0;
}
.ej-acierto .explicacion{border-left-color:var(--verde)}
.ej-fallo   .explicacion{border-left-color:var(--rojo)}
.explicacion .veredicto{color:var(--tinta)}

.ej-resumen{
  margin-top:1.8rem; padding:1.2rem 1.4rem; text-align:center;
  background:var(--papel); border:1.5px solid var(--linea);
  border-radius:var(--radio);
}
.ej-nota{
  font-family:var(--serif); font-size:1.9rem; font-weight:700;
  color:var(--azul);
}
.ej-frase{margin:.3rem 0 .6rem; color:var(--gris)}
.ej-repaso{font-size:.92rem; margin:.2rem 0 .9rem}
.ej-reiniciar{
  font:inherit; font-size:.95rem; cursor:pointer;
  color:var(--azul); background:var(--azul-claro); border:none;
  border-radius:99px; padding:.5rem 1.3rem;
}
.ej-reiniciar:hover{background:#CFE0ED}

/* ----------------------------------------------------------------- camino */
/* El curso como recorrido: hecho ✓, «вы здесь», y el futuro en voz baja. */

.continuar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin:1.4rem 0 .4rem; padding:.9rem 1.3rem;
  background:var(--azul); color:#fff; text-decoration:none;
  border-radius:var(--radio);
}
.continuar .c-et{
  display:block; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.06em; opacity:.75;
}
.continuar .c-ti{display:block; font-family:var(--serif); font-size:1.15rem; font-weight:700}
.continuar .c-flecha{font-size:1.5rem; transition:transform .15s ease}
.continuar:hover .c-flecha{transform:translateX(4px)}

.tarjeta{position:relative}

.tarjeta .marca-hecha{
  position:absolute; top:.7rem; right:.7rem;
  font-size:.78rem; font-weight:700; color:var(--verde);
  background:#EAF3EE; border-radius:99px; padding:.12rem .55rem;
}
.tarjeta.hecha{border-color:#BFD8CB}

.tarjeta.aqui{border-color:var(--azul); box-shadow:0 0 0 2px var(--azul-claro)}
.tarjeta .marca-aqui{
  position:absolute; top:-.62rem; left:.9rem;
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:#fff; background:var(--azul);
  border-radius:99px; padding:.1rem .6rem;
}

.tarjeta.futura{opacity:.55}
.tarjeta.futura:hover{opacity:1}

/* ------------------------------------------------------------------ audio */
.es.sonando, .es.lisa.sonando{
  background:var(--azul-claro); border-radius:4px;
  box-shadow:0 0 0 3px var(--azul-claro);
}
.oir.en-marcha{background:var(--azul); color:#fff}
.oir.en-marcha svg{transform:none}

/* ----------------------------------------------------------------- cuenta */
.quien-soy{color:var(--gris); font-size:.9rem; margin-left:.6rem}
.forma-salir{display:inline; margin:0}
.forma-salir button{
  font:inherit; font-size:.9rem; color:var(--gris-suave); background:none;
  border:none; cursor:pointer; padding:0; margin-left:.6rem;
}
.forma-salir button:hover{color:var(--rojo)}
.entrar-enlace{font-weight:700}

.aviso{
  max-width:var(--col); margin:1rem auto 0; padding:.6rem 1rem;
  background:#FBF3E4; border:1px solid #EAD9B8; border-radius:var(--radio);
  color:#7A5A22; font-size:.92rem;
}
.aviso a{color:inherit}
.aviso.bien-aviso{background:#EAF3EE; border-color:#BFD8CB; color:var(--verde)}

.ancho.estrecho{max-width:26rem}
.titulo-cuenta{margin-bottom:.3rem}
.sub-cuenta{color:var(--gris); margin:.3rem 0 1rem}

.forma{display:flex; flex-direction:column; gap:.9rem; margin:1rem 0}
.forma label{display:flex; flex-direction:column; gap:.3rem; font-size:.92rem; color:var(--gris)}
.forma label .pista{color:var(--gris-suave); font-weight:400}
.forma input{
  font:inherit; padding:.55rem .8rem; border:1.5px solid var(--linea);
  border-radius:var(--radio); background:var(--papel); color:var(--tinta);
}
.forma input:focus{outline:none; border-color:var(--azul)}
.forma .fallo{color:var(--rojo); font-size:.9rem; margin:0}

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:700; color:#fff; background:var(--azul);
  border:none; border-radius:99px; padding:.6rem 1.5rem; cursor:pointer;
  text-decoration:none;
}
.boton:hover{background:#17466B}
.boton.claro{background:var(--azul-claro); color:var(--azul)}
.boton.claro:hover{background:#CFE0ED}
.boton.google{background:var(--papel); color:var(--tinta); border:1.5px solid var(--linea); width:100%}
.boton.google:hover{border-color:var(--azul); background:var(--papel)}

.o-bien{
  display:flex; align-items:center; gap:.8rem; color:var(--gris-suave);
  font-size:.85rem; margin:1.1rem 0;
}
.o-bien::before,.o-bien::after{content:""; flex:1; height:1px; background:var(--linea)}
.pie-forma{color:var(--gris); font-size:.92rem}

.cta{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:1.2rem 0 .4rem}
.enlace-suave{color:var(--gris); font-size:.95rem}
.nota-cta{color:var(--gris-suave); font-size:.88rem; margin:.2rem 0 1.4rem}
.tarjeta.quieta{cursor:default}
.tarjeta.quieta:hover{transform:none}
.rejilla.dos{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media(max-width:640px){.rejilla.dos{grid-template-columns:1fr}}
.cierre-bienvenida{
  text-align:center; margin:3rem 0 1rem; padding:2rem 1.5rem;
  background:var(--cal); border-radius:var(--radio);
}
.cierre-bienvenida p{color:var(--gris); margin:.4rem 0 1.2rem}

/* ----------------------------------------------------------- ilustraciones */
.ilustracion{
  margin:1.2rem 0 1.4rem; border-radius:var(--radio); overflow:hidden;
  background:var(--cal); line-height:0;
}
.ilustracion img{width:100%; height:auto; display:block}
/* Los cuentos llevan formato vertical (4:5): se limita la altura para que no
   empuje el texto fuera de la primera pantalla. */
.ilustracion.alta{max-width:26rem; margin-left:auto; margin-right:auto}

/* --------------------------------------------------------------- recursos */
.tarjeta.recurso{position:relative; padding-right:3.4rem}
.pdf-marca{
  position:absolute; top:1rem; right:1rem;
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  color:var(--rojo); border:1.5px solid currentColor;
  border-radius:5px; padding:.1rem .38rem;
}
.recurso-pie{margin-top:.6rem; font-size:.85rem; font-weight:700; color:var(--azul)}
.recurso .fuera{color:var(--gris-suave); font-size:.85em}
.recursos-vacio{color:var(--gris); margin:1rem 0 2rem}

/* ---------------------------------------------------------------- gestion */
.g-nav{display:flex; gap:.3rem; flex-wrap:wrap; margin:0 0 1.4rem}
.g-nav a{
  font-size:.9rem; color:var(--gris); text-decoration:none;
  padding:.35rem .8rem; border:1.5px solid var(--linea); border-radius:99px;
}
.g-nav a.act,.g-nav a:hover{color:var(--azul); border-color:var(--azul)}
.g-cifras{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1rem 0}
.g-cifras div{background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1rem; text-align:center}
.g-cifras b{display:block; font-family:var(--serif); font-size:1.8rem; color:var(--azul)}
.g-cifras span{color:var(--gris); font-size:.85rem}
.g-nota{color:var(--gris); font-size:.92rem}
.g-tabla{font-size:.88rem}
.g-tabla td,.g-tabla th{padding:.4rem .6rem}
.g-tabla tr.g-mal td{background:#F7ECEC}
.g-barra{height:8px; background:var(--azul-claro); border-radius:99px;
  overflow:hidden; margin-bottom:.2rem}
.g-barra span{display:block; height:100%; background:var(--azul)}
.g-ok{color:var(--verde); font-weight:700}
.g-sub{margin-top:2rem}
.g-forma .g-fila{display:flex; gap:1rem; flex-wrap:wrap}
.g-forma .g-fila label{flex:1; min-width:8rem}
.g-forma select{font:inherit; padding:.5rem .6rem; border:1.5px solid var(--linea);
  border-radius:var(--radio); background:var(--papel)}
.g-check{flex-direction:row !important; align-items:center; gap:.4rem !important}
.g-borrar{font:inherit; font-size:.82rem; color:var(--rojo); background:none;
  border:none; cursor:pointer; padding:0}
@media(max-width:640px){.g-cifras{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- nosotros */
.ancho.estrecho-medio{max-width:34rem}
.nosotros-texto::after{content:""; display:block; clear:both}
.nosotros-foto{
  float:left; width:11rem; margin:0 1.3rem .6rem 0;
  border-radius:var(--radio); overflow:hidden;
}
.nosotros-foto img{width:100%; height:auto; display:block}
@media(max-width:520px){.nosotros-foto{float:none; width:100%; max-width:14rem; margin:0 auto 1.2rem}}

/* ------------------------------------------------------------------- muro */
.muro{display:flex; flex-wrap:wrap; gap:.55rem; margin:1.4rem 0 .6rem}
.ladrillo{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  min-width:7.2rem; padding:.55rem .8rem .5rem;
  background:var(--papel); border:1.5px solid var(--linea);
  border-radius:var(--radio); text-decoration:none;
}
.ladrillo .pal{font-family:var(--serif); font-weight:700; color:var(--tinta)}
.ladrillo .tra{font-size:.78rem; color:var(--gris-suave)}
.ladrillo .quien{
  margin-top:.25rem; font-size:.75rem; font-weight:700; color:var(--azul);
}
.ladrillo.libre{border-style:dashed}
.ladrillo.libre:hover{border-color:var(--azul); border-style:solid}
.ladrillo.libre .pal{color:var(--gris)}
.ladrillo.reservada{opacity:.5}
.ladrillo.ocupada{background:var(--cal); border-color:#CBD9E4}
.ladrillo.especial{
  border-width:2px; border-color:var(--ambar); min-width:9.5rem;
}
.ladrillo.especial .pal{font-size:1.15rem; color:var(--ambar)}
.ladrillo.ocupada.especial{background:#FBF5EA}
.muro-pie{color:var(--gris-suave); font-size:.85rem}

/* ------------------------------------------------- nosotros: texto bilingue */
.bi{line-height:1.9; text-align:justify}
.bi-es{color:var(--tinta); font-weight:600}
.bi-ru{color:var(--gris-suave); font-size:.9em}
.bi a{color:var(--azul)}
.nosotros-firma{margin-top:1.6rem; color:var(--gris)}
.nosotros-firma b{font-family:var(--serif); font-size:1.1rem; color:var(--tinta)}

/* ---------------------------------------------------------- banda invitado */
.banda-invitado{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin:1.2rem 0 0; padding:.9rem 1.2rem;
  background:var(--cal); border:1px solid var(--linea); border-radius:var(--radio);
}
.banda-invitado p{margin:0; color:var(--gris); font-size:.95rem; max-width:32rem}
.banda-botones{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
@media(max-width:640px){.banda-invitado{flex-direction:column; align-items:flex-start}}

/* -------------------------------------------------- compartir + offline */
.compartir{
  font:inherit; font-size:.92rem; font-weight:700; color:var(--azul);
  background:none; border:1.5px solid var(--azul); border-radius:99px;
  padding:.45rem 1.1rem; cursor:pointer; margin:.6rem 0;
}
.compartir:hover{background:var(--azul-claro)}
.compartir:disabled{color:var(--verde); border-color:var(--verde)}

.zona-offline{margin-bottom:2rem}
.zona-offline .sub{margin:.4rem 0}
.zona-offline progress{width:100%; height:10px; margin-top:.6rem; accent-color:var(--azul)}

/* --------------------------------------------------- chuleta de enunciados */
.chuleta{
  margin:.4rem 0 1.2rem; border:1px solid var(--linea);
  border-radius:var(--radio); background:var(--cal);
}
.chuleta summary{
  cursor:pointer; padding:.55rem .9rem; font-size:.9rem; font-weight:700;
  color:var(--gris); list-style-position:inside;
}
.chuleta[open] summary{border-bottom:1px solid var(--linea)}
.chuleta-rejilla{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.15rem 1.4rem;
  padding:.7rem .9rem .8rem;
}
.chuleta-par{display:flex; justify-content:space-between; gap:.8rem;
  font-size:.88rem; padding:.12rem 0}
.chuleta-par span[lang]{font-weight:600; color:var(--tinta)}
.chuleta-ru{color:var(--gris)}
@media(max-width:560px){.chuleta-rejilla{grid-template-columns:1fr}}

/* ------------------------------------------------- pulsador de traduccion */
.ej-lista{list-style:none; padding-left:0}
.ej-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.7rem; height:1.7rem; margin-right:.45rem; padding:0 .3rem;
  font:inherit; font-size:.88rem; font-weight:700; color:var(--gris);
  background:var(--cal); border:1.5px solid var(--linea); border-radius:8px;
  vertical-align:baseline;
}
button.ej-num.con-glosa{
  cursor:pointer; color:var(--azul); border-color:var(--azul);
  border-bottom-width:3px;               /* pinta de tecla pulsable */
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
button.ej-num.con-glosa:hover{background:var(--azul-claro)}
button.ej-num.viendo{background:var(--azul); color:#fff; border-bottom-width:1.5px}
.ej-glosa{
  margin:.2rem 0 .5rem 2.15rem; padding:.45rem .8rem;
  background:var(--azul-claro); border-radius:var(--radio);
  color:var(--tinta); font-size:.92rem;
}