/* OVA GYM · secciones nuevas (Tu primera clase, Las clases, Cómo entrenás en OVA; rama claude/secciones-nuevas,
   09/10/2026). Mismo lenguaje que el resto de la web: la portada negra de Quiénes somos, las tarjetas blancas de la
   reserva (.paso), las piezas de colores de horarios (.pieza, [data-act] de web.css) y los plegables de la reserva.
   Ningún color, radio ni letra nuevos: todo sale de las variables de web.css. Solo lite: sin movimiento propio
   (INV-U14: el movimiento, solo donde explica algo; los plegables abren de golpe, como en la reserva).
   Amarillo = solo lo que se toca (la acción principal). Contrastes: los de web.css (texto #0d0d0d o #4f4f4a sobre
   blanco o #f4f4f1; blanco sobre negro). */
.sin-margen{margin:0}
/* una palabra o un link largo en los datos no abre scroll de costado a 360 px (revisión por pares, m6) */
.sec p,.sec li,.sec h2,.sec h3,.sec .pieza-nom,.antes-link{overflow-wrap:anywhere}

/* ---------- portada (como Quiénes somos) ---------- */
.sec-portada{padding:32px 0 30px}
.sec-portada h1{color:var(--blanco);font-size:clamp(3rem,15vw,5.5rem);line-height:.92;margin:0 0 12px}
.sec-bajada{font-size:clamp(1.05rem,4.2vw,1.3rem);font-weight:600;max-width:40ch;margin:0}

/* ---------- estados: ejemplo, vacía, cargando, error (los mismos de Quiénes somos) ---------- */
/* el pie no se muestra hasta que llegan los datos: lo de abajo no salta, sea cual sea el alto final (INV-U07) */
.sec-esperando .pie{display:none}
.sec-estado{display:flow-root}
.sec-ejemplo{margin:24px 0 0;padding:14px 16px;border-radius:var(--radio-chico);background:#fff7ed;border:3px dashed #c2410c;color:#7c2d12;font-weight:700}
.sec-vacio{margin:28px 0 0;padding:18px;border-radius:var(--radio-chico);background:var(--blanco);border:1px dashed var(--linea);font-weight:600}
.sec-error{margin:24px 0 0}
.sec-cargando{position:relative;padding:24px 0 8px}
.sec-tarda{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 14px;background:var(--blanco);border:1px solid var(--linea);font-weight:600;text-align:center;width:max-content;max-width:calc(100% - 32px)}
.esqueleto .paso-sec,.esqueleto .bloque-sec{background:#f7f7f4;border-color:#d9d9d3}
.esq-num{display:block;width:34px;height:34px;border-radius:999px;background:#dcdcd6;margin:0 0 14px}
.esq-titulo-chico{display:block;width:50%;height:1.8rem;border-radius:6px;background:#dcdcd6;margin:0 0 14px}
.esq-renglon{display:block;height:14px;margin:4px 0 16px;border-radius:4px;background:#dcdcd6}
.esq-renglon.corto{width:60%}
/* las piezas grises de "Las clases" ocupan lo mismo que las de verdad: al llegar los datos, nada se corre */
.sec-cargando-clases{padding-top:24px}
.sec-cargando-clases .piezas{margin:0 0 16px}

/* ---------- Tu primera clase: los pasos (tarjetas blancas numeradas, como los pasos de la reserva) ---------- */
.pasos{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.paso-sec{background:var(--blanco);border:1px solid var(--linea-suave);border-radius:var(--radio);padding:18px 16px 6px}
.paso-sec h2{display:flex;align-items:center;gap:10px;font-size:2rem;margin:0 0 12px}
.paso-sec h2 .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--negro);color:var(--amarillo);font-size:1.25rem;flex:none}
.paso-sec p{max-width:60ch}
.sec-nota{margin:14px 0 0;background:var(--blanco);border-left:6px solid var(--negro);border-radius:0 var(--radio-chico) var(--radio-chico) 0;padding:14px 16px 2px}
.sec-nota h2{font-size:1.6rem;margin:0 0 8px}
.sec-nota-chica{margin:18px 0 0;font-weight:600}
.sec-nota-chica a{display:inline-flex;align-items:center;min-height:48px;text-underline-offset:3px}

/* las dudas: plegables nativos (details/summary: teclado y lector sin código), los mismos de la reserva (reservar.css);
   varios abiertos a la vez (sin name), la etiqueta dice qué hay adentro (INV-U16) */
.sec-dudas{margin:28px 0 8px}
.sec-dudas h2{margin-bottom:12px}
.sec .plegable{background:var(--blanco);border:2px solid var(--linea);border-radius:var(--radio-chico);margin:0 0 12px}
.sec .plegable summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 14px;cursor:pointer;font-weight:700;list-style:none}
.sec .plegable summary::-webkit-details-marker{display:none}
.sec .plegable summary::after{content:"";flex:none;width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.sec .plegable[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sec .plegable summary:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.sec .plegable-cuerpo{padding:4px 14px 6px}
.sec .plegable-cuerpo .btn{margin:0 0 12px}

/* ---------- Las clases: las piezas de horarios y la ficha de la elegida ---------- */
#sec-cuerpo .piezas{margin:24px 0 16px}
.ficha-clase{display:grid;gap:0;background:var(--blanco);border:2px solid var(--negro);border-left:12px solid var(--c);border-radius:var(--radio);padding:16px 16px 4px;margin:0 0 8px}
.ficha-clase h2{display:flex;align-items:center;gap:10px;font-size:2.2rem;margin:0 0 8px}
.ficha-clase h2:focus{outline:none}   /* recibe el foco al elegir (tabindex=-1): no es algo que se toque */
.ficha-dib{flex:none;width:56px;background:var(--blanco);border:2px solid var(--negro);border-radius:10px;padding:2px 4px}
.ficha-que{font-weight:600;margin:0 0 8px}
.ficha-clase .ficha-datos{margin:4px 0 12px}
.ficha-clase h3{font-size:1.5rem;margin:12px 0 6px}
.ficha-clase p{max-width:60ch}
.ficha-foto{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radio-chico);background:#ecece8;margin:4px 0 8px}
.ficha-foto img{display:block;width:100%;height:100%;object-fit:cover}
.ficha-dias{list-style:none;margin:0 0 12px;padding:0}
.ficha-dias li{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--linea-suave)}
.ficha-dias li:last-child{border-bottom:0}
.ficha-dias b{min-width:96px}
.ficha-botones{margin:8px 0 14px}
.ficha-botones .btn{flex:1 1 200px}
@media (min-width:860px){.ficha-clase{padding:22px 24px 8px}}

/* ---------- Cómo entrenás en OVA: un bloque por tema ---------- */
.bloques{display:grid;gap:14px;margin:24px 0 0}
.bloque-sec{background:var(--blanco);border:1px solid var(--linea-suave);border-radius:var(--radio);padding:18px 16px 4px}
.bloque-sec h2{font-size:2rem;margin:0 0 10px}
.bloque-sec p{max-width:60ch}
@media (min-width:860px){.bloques{grid-template-columns:1fr 1fr}}

/* ---------- el cierre: una sola acción amarilla y, abajo, las otras secciones nuevas ---------- */
.sec-cierre{padding:28px 0 4px}
.sec-cierre .botones{max-width:560px}
.sec-cierre .botones .btn{flex:1 1 200px}
.sec-siguen{list-style:none;margin:16px 0 0;padding:0}
.sec-siguen a{display:inline-flex;align-items:center;min-height:48px;font-weight:700;text-underline-offset:4px}
.sec-siguen a::after{content:"›";content:"›"/"";margin-left:8px}

/* ---------- con ?revision=1: lo que falta cargar (lo ve Simón, no es público) ---------- */
.faltas{margin:16px 0 0;padding:12px 16px 12px 34px;border-radius:var(--radio-chico);background:#fff7ed;border:2px dashed #c2410c;color:#7c2d12;font-weight:600}
.faltas li{margin:2px 0}

@media (forced-colors:active){
  .ficha-clase{border-left-color:CanvasText}
  .paso-sec h2 .n{forced-color-adjust:none;background:CanvasText;color:Canvas}
  .sec .plegable summary::after{border-color:CanvasText}
}