/* Clases personalizadas con Ramón por Teams: el realce en toda la web
   (6-oct-2026, aprobado por Ramón sobre maqueta: «aplícalo»).
   Un solo archivo para todas las páginas y el blog:
     - el enlace del menú, con su foto pequeña y en negrita;
     - la banda con su foto, título, «Nuevo», firma y botón de WhatsApp.
   Usa las variables de cada página (--card, --ink...) y trae su propio
   valor por si alguna no las tiene, así se ve bien en claro y en oscuro. */

/* ---- El enlace del menú ---- */
html nav .menu a[href$="clases-personalizadas.html"]{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.25rem .8rem .25rem .25rem;border-radius:999px;
  background:var(--soft,#EFEBF6);border:1px solid var(--line,#E6E2ED);
  color:var(--ink,#2E2947);font-weight:700;
}
html nav .menu a[href$="clases-personalizadas.html"]::before{
  content:"";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:url(/ramon-128.jpg) center/cover;
}
html nav .menu a[href$="clases-personalizadas.html"].actual{border-color:var(--es,#F2A93B)}

/* ---- La banda ----
   Colores propios de la banda: en la web principal el texto es --ink y en el
   blog es --text (allí --ink no cambia en oscuro), así que se toma --text si
   existe y si no --ink. Igual con el resto. */
.cp-banda{
  --cp-ink:var(--text,var(--ink,#2E2947));
  --cp-ink2:var(--text-soft,var(--ink2,#574F74));
  --cp-card:var(--card,#fff);
  --cp-line:var(--line,var(--paper-dim,#E6E2ED));
  max-width:1100px;margin:2.4rem auto;padding:0 1.2rem;
}
.cp-banda .cp-in{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;
  padding:22px 26px;border-radius:22px;
  background:var(--cp-card);border:1px solid var(--cp-line);
  box-shadow:var(--shadow,0 10px 30px rgba(87,79,116,.12));
}
.cp-banda .cp-foto,.cp-hero .cp-foto{
  display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:4px solid var(--es,#F2A93B);
}
.cp-tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--es-btn-ink,#2E2947);background:var(--es-btn,var(--es,#F2A93B));border-radius:999px;padding:.2rem .7rem;
}
.cp-banda .cp-txt h2{
  font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:clamp(1.35rem,3vw,1.75rem);
  line-height:1.2;margin:.45rem 0 .3rem;color:var(--cp-ink,var(--ink,#2E2947));text-wrap:balance;
}
.cp-banda .cp-txt h2 a{color:inherit;text-decoration:none}
.cp-banda .cp-txt h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.cp-firma{margin:0;color:var(--cp-ink2,var(--ink2,#574F74));font-size:.95rem}
.cp-wa{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;
  padding:.9rem 1.5rem;border-radius:999px;white-space:nowrap;text-decoration:none;
  /* El mismo par de colores que el botón principal de cada página (.btn-es):
     ámbar con letra oscura en Frasly, naranja oscuro con letra blanca en la
     paleta general. En el blog, que no lo define, ámbar con letra oscura. */
  background:var(--es-btn,var(--es,#F2A93B));color:var(--es-btn-ink,#2E2947);
  box-shadow:0 6px 20px rgba(242,169,59,.35);
}
.cp-wa:hover{transform:translateY(-1px)}
.cp-wa:focus-visible,
html nav .menu a[href$="clases-personalizadas.html"]:focus-visible{outline:3px solid var(--ink,#2E2947);outline-offset:3px}
@media (max-width:720px){
  .cp-banda .cp-in{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px}
  .cp-banda .cp-foto{width:84px;height:84px}
  .cp-banda .cp-acc{grid-column:1 / -1}
  .cp-banda .cp-wa{width:100%;justify-content:center}
}

/* ---- La página de las clases ---- */
.cp-hero .cp-foto{width:200px;height:200px;margin:0 auto 18px;border-width:6px}
@media (max-width:720px){.cp-hero .cp-foto{width:150px;height:150px}}
@media (prefers-reduced-motion:reduce){.cp-wa:hover{transform:none}}

/* ---- La tira de la cabecera (6-oct-2026, Ramón: «en todas las pestañas
   debe aparecer en la cabecera»): justo debajo del menú, en ordenador y en
   móvil. Toda la tira lleva a WhatsApp. ---- */
.cp-tira{
  --cp-ink:var(--text,var(--ink,#2E2947));
  --cp-ink2:var(--text-soft,var(--ink2,#574F74));
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 18px;text-decoration:none;color:var(--cp-ink);
  background:var(--soft,var(--paper-dim,#EFEBF6));
  border-bottom:1px solid var(--line,var(--paper-dim,#E6E2ED));
}
.cp-tira img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--es,#F2A93B);flex:0 0 auto}
.cp-tira .cp-t{min-width:0;flex:0 1 auto;line-height:1.25}
.cp-tira .cp-t .cp-tag{margin-right:8px;vertical-align:2px;font-size:.66rem;padding:.12rem .55rem}
.cp-tira .cp-t b{font-size:1rem;color:var(--cp-ink)}
.cp-tira .cp-t .cp-f{color:var(--cp-ink2);font-size:.9rem}
.cp-tira .cp-b{
  flex:0 0 auto;white-space:nowrap;font-weight:700;font-size:.88rem;border-radius:999px;padding:.55rem 1rem;
  background:var(--es-btn,var(--es,#F2A93B));color:var(--es-btn-ink,#2E2947);
}
.cp-tira:hover .cp-t b{text-decoration:underline;text-underline-offset:3px}
.cp-tira:focus-visible{outline:3px solid var(--cp-ink);outline-offset:-3px}
.cp-tira .cp-b-corto{display:none}
@media (max-width:720px){
  .cp-tira{justify-content:flex-start;gap:10px;padding:8px 12px}
  .cp-tira .cp-t{flex:1}
  .cp-tira .cp-t .cp-tag{display:block;width:max-content;margin:0 0 2px}
  .cp-tira .cp-t b{font-size:.9rem}
  .cp-tira .cp-t .cp-f{display:none}
  .cp-tira .cp-b{font-size:.8rem;padding:.5rem .8rem}
  .cp-tira .cp-b-largo{display:none}
  .cp-tira .cp-b-corto{display:inline}
}

/* El enlace del menú también en el blog (su menú no usa .menu). */
html nav .site-nav-links a[href$="clases-personalizadas.html"]{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.25rem .8rem .25rem .25rem;border-radius:999px;
  background:var(--soft,var(--paper-dim,#EFEBF6));border:1px solid var(--line,var(--paper-dim,#E6E2ED));
  color:var(--text,var(--ink,#2E2947));font-weight:700;
}
html nav .site-nav-links a[href$="clases-personalizadas.html"]::before{
  content:"";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:url(/ramon-128.jpg) center/cover;
}
/* En el blog, con el menú en horizontal (desde 1141 px) el enlace no cabe y
   hace caer «Zona de alumnos» a una segunda línea, a cualquier ancho (el
   menú tiene ancho fijo). Ahí se esconde: la tira con la foto está justo
   debajo. Sale en el menú plegable del móvil y la tableta. */
@media (min-width:1141px){
  html nav .site-nav-links a[href$="clases-personalizadas.html"]{display:none}
}

/* ===== COLORES PROPIOS (6-oct-2026) =====
   Las variables de cada página no significan lo mismo en todas: en
   cursos.html --soft es un color de TEXTO (morado oscuro) y la tira salió
   oscura con letra oscura. Por eso la tira, la banda y el enlace del menú
   llevan su propia paleta, en claro y en oscuro, sin tirar de la página.
   Va al final para mandar sobre todo lo anterior. */
.cp-tira,.cp-banda,
html nav .menu a[href$="clases-personalizadas.html"],
html nav .site-nav-links a[href$="clases-personalizadas.html"]{
  --cp-fondo:#EFEBF6; --cp-borde:#DED7EC; --cp-card:#FFFFFF;
  --cp-ink:#2E2947; --cp-ink2:#574F74;
  --cp-ambar:#F2A93B; --cp-ambar-ink:#2E2947;
}
html[data-tema="oscuro"] .cp-tira, html[data-theme="dark"] .cp-tira,
html[data-tema="oscuro"] .cp-banda, html[data-theme="dark"] .cp-banda,
html[data-tema="oscuro"] nav .menu a[href$="clases-personalizadas.html"],
html[data-theme="dark"] nav .menu a[href$="clases-personalizadas.html"],
html[data-tema="oscuro"] nav .site-nav-links a[href$="clases-personalizadas.html"],
html[data-theme="dark"] nav .site-nav-links a[href$="clases-personalizadas.html"]{
  --cp-fondo:#211D30; --cp-borde:#37324B; --cp-card:#211D30;
  --cp-ink:#F3F1F9; --cp-ink2:#A9A3BA;
  --cp-ambar:#F6BC5E; --cp-ambar-ink:#2E2947;
}
/* La tira */
.cp-tira{background:var(--cp-fondo) !important;border-bottom:1px solid var(--cp-borde) !important;color:var(--cp-ink) !important}
.cp-tira .cp-t{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px}
.cp-tira .cp-t b{color:var(--cp-ink) !important;font-weight:700}
.cp-tira .cp-t .cp-f{color:var(--cp-ink2) !important}
.cp-tira .cp-tag,.cp-banda .cp-tag{background:var(--cp-ambar) !important;color:var(--cp-ambar-ink) !important}
.cp-tira .cp-b,.cp-banda .cp-wa{background:var(--cp-ambar) !important;color:var(--cp-ambar-ink) !important}
.cp-tira img,.cp-banda .cp-foto{border-color:var(--cp-ambar) !important}
@media (max-width:720px){.cp-tira .cp-t{display:block}}
/* La banda */
.cp-banda .cp-in{background:var(--cp-card) !important;border-color:var(--cp-borde) !important}
.cp-banda .cp-txt h2,.cp-banda .cp-txt h2 a{color:var(--cp-ink) !important}
.cp-banda .cp-firma{color:var(--cp-ink2) !important}
/* El enlace del menú */
html nav .menu a[href$="clases-personalizadas.html"],
html nav .site-nav-links a[href$="clases-personalizadas.html"]{
  background:var(--cp-fondo) !important;border-color:var(--cp-borde) !important;color:var(--cp-ink) !important}