/* OVA GYM · inicio ("la recepción", la variante 1 que eligió Simón el 07/10; docs/web/inicio/rediseno.md), dentro de
   la dirección de la web: la pizarra de horarios de la recepción, con imanes de colores (la de horarios).
   El método es el de Neto (docs/motor/diseno/LENGUAJE_VISUAL.md §1): una metáfora física que todos conocen, un
   significado por elemento, movimiento que explica (solo en cool, inicio-cool.css).
   · Imán de color = una actividad (un color, un significado; siempre con su dibujo y su nombre: el color nunca va solo).
   · Amarillo = solo lo que se toca (Probá gratis y la › de cada imán). Por eso el eslogan va blanco y la píldora de la
     cabecera, con borde: un solo "Probá gratis" amarillo en la primera pantalla.
   Medidas: espacios de a 8 px; seis tamaños de letra; tocables de 48 px o más. */

/* los colores de las actividades ([data-act]) son los de horarios, en web.css: el mismo imán en las dos páginas */
.inicio{--chica:.875rem;--dato:1.25rem;--titulo:2rem}
.inicio h2{font-size:var(--titulo)}
.inicio .portada .eslogan{color:var(--blanco)}
.pagina-inicio .menu a.pildora{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 2px var(--blanco)}
.inicio .portada .botones .btn.prim{flex:1 1 100%;min-height:64px;font-size:1.125rem}
.inicio .portada .botones .btn:not(.prim){flex:1 1 0;min-height:48px;padding:0 12px;font-size:.9375rem;white-space:nowrap}
@media (max-width:359px){.inicio .portada .botones .btn:not(.prim){flex-basis:100%}}
@media (min-width:760px){
  .inicio .portada .botones .btn.prim{flex:0 1 240px}
  .inicio .portada .botones .btn:not(.prim){flex:0 1 auto;padding:0 20px}
}
.nota-socio{font-size:var(--chica);color:#d6d6d0;margin:16px 0 0}
.inicio .datos-gym{align-items:start}
.flecha{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--amarillo);color:var(--negro);border:2px solid var(--negro);font-size:1.25rem;font-weight:700;line-height:1}

/* ---------- la bandeja: un imán por actividad ---------- */
.clases{padding:32px 0 8px}
.bandeja-imanes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.actividad{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;min-height:120px;padding:12px 12px 16px;border:2px solid var(--negro);border-radius:var(--radio);
  background:var(--c);color:var(--t);text-decoration:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.28)}
.actividad-dib{display:block;width:64px;background:var(--blanco);border:2px solid var(--negro);border-radius:10px;padding:2px 4px}
.actividad-nom{font-family:var(--display);font-size:1.75rem;line-height:1;letter-spacing:.02em;padding-right:36px}
.actividad-que{font-size:var(--chica);line-height:1.35;font-weight:600}
.actividad .flecha{position:absolute;top:12px;right:12px}
.actividad:focus-visible{outline:3px solid var(--negro);outline-offset:3px}
@media (min-width:760px){.bandeja-imanes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* ---------- la portada: qué es OVA y Probá gratis ---------- */
.inicio .portada{padding:32px 0 40px}
.inicio .eslogan{font-size:clamp(3.75rem,19vw,8rem);line-height:.88;margin:0 0 16px}
.inicio .frase{max-width:30ch;margin-bottom:24px}

@media (forced-colors:active){
  .actividad{border-color:CanvasText}
  .flecha{forced-color-adjust:none;background:Highlight;color:HighlightText}
}