/* OVA GYM · Quiénes somos (/nosotros), modo lite: plano, sin sombras, sin texturas, sin movimiento. Lo de cool está en
   nosotros-cool.css y se pide solo si el teléfono puede (modo-web.js). La metáfora: el corcho de la recepción, al lado
   de la pizarra de horarios (grilla C), con el mismo marco de aluminio, los mismos colores y letras.
   Amarillo = solo lo que se toca (Probá gratis, Reintentar). Sin texto sobre el corcho: todo va en papel. Contrastes:
   negro sobre blanco 19:1; negro sobre el papelito #eef3f7 17:1; blanco sobre el año negro 17:1; #3a3a36 sobre
   blanco 11:1. */
/* que el foco no quede debajo de la cabecera fija (WCAG 2.4.11). Solo en esta página: en horarios cambiaría el salto a lo elegido */
html{scroll-padding-top:72px}
.nos-portada{padding:32px 0 30px}
.nos-portada h1{color:var(--blanco);font-size:clamp(3rem,15vw,5.5rem);line-height:.92;margin:0 0 12px}
.nos-bajada{font-size:clamp(1.05rem,4.2vw,1.3rem);font-weight:600;max-width:40ch;margin:0}
.nos-ejemplo{margin:24px 0 0;padding:14px 16px;border-radius:var(--radio-chico);background:#fff7ed;border:3px dashed #c2410c;color:#7c2d12;font-weight:700}
.nos-vacio{margin:28px 0 0;padding:18px;border-radius:var(--radio-chico);background:var(--blanco);border:1px dashed var(--linea);font-weight:600}
/* el error de carga usa el molde común de web.css (.error-carga; coherencia web-lista 08/10) */
.nos-error{margin:24px 0 0}
.nos-seccion{padding:34px 0 8px}
.nos-seccion h2{font-size:clamp(2.2rem,8vw,3rem)}
/* en el celular, los títulos de sección miden lo mismo que en el inicio, horarios y reservar (2rem; coherencia web-lista 08/10) */
@media (max-width:599px){.nos-seccion h2,.nos-cierre h2{font-size:2rem}}

/* el esqueleto mientras llega nosotros.json (coherencia web-lista 08/10): el marco del corcho y dos papeles grises de la
   medida de los reales (la foto de la familia, 3 a 2, y la hoja de su historia), quietos y sin texto (INV-U07 regla 1).
   El cierre y el pie no se muestran hasta que llegan los datos: lo de abajo no salta, sea cual sea el alto final. */
.nos-esperando .pie{display:none}
/* el margen de arriba del aviso (vacía, ejemplo, error) queda adentro de su caja: la caja no baja al cambiar el
   esqueleto por el aviso (era el salto que quedaba, 0,03) */
.nos-estado{display:flow-root}
.nos-cargando{position:relative;padding:34px 0 8px}
.esq-titulo{width:62%;max-width:360px;height:2.1rem;margin:0 0 .8rem;border-radius:6px;background:#dcdcd6}
@media (min-width:600px){.esq-titulo{height:3.15rem}}
.corcho.esqueleto{background:#ecece8}
.esqueleto .instantanea,.esqueleto .hoja{background:#f7f7f4;border-color:#d9d9d3}
.esq-foto{aspect-ratio:3/2;background:#dcdcd6}
.esq-renglon{display:block;height:14px;margin:4px 0 16px;border-radius:4px;background:#dcdcd6}
.esq-renglon.corto{width:60%}
.nos-tarda{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 14px;background:var(--blanco);border:1px solid #8a8a84;font-weight:600;text-align:center;width:max-content;max-width:calc(100% - 32px)}
.nos-cierre{padding:30px 0 4px}
.nos-cierre .botones{max-width:560px}
.nos-cierre .botones .btn{flex:1 1 160px}

/* fotos y retratos: tamaño fijo (4 a 5), así no se mueve la página cuando cargan */
.foto img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
/* las fotos de grupo no se recortan: no puede quedar nadie afuera */
.foto img.grupo,.foto-chica img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#f4f4f1}   /* lugar reservado: no salta al cargar (INV-U07) */
.iniciales{display:grid;place-items:center;width:100%;aspect-ratio:4/5;background:#2b2b29;color:var(--blanco);font:400 clamp(2.6rem,12vw,4rem)/1 var(--display);letter-spacing:.04em}

/* lo que falta cargar: solo con ?revision=1 (nosotros.js ni lo arma sin eso) */
.faltas{list-style:none;margin:16px 0 0;padding:12px 14px;border:3px dashed #c2410c;border-radius:var(--radio-chico);background:#fff7ed;color:#7c2d12;font-weight:600;font-size:.9rem;display:grid;gap:6px}

/* =================================================================== el corcho de la recepción (elegido por Simón, 07/10)
   El corcho con el mismo marco de aluminio que la pizarra = lo que la familia y el equipo cuentan de sí mismos (la
   pizarra dice qué hay; el corcho, quiénes somos). La foto instantánea (borde blanco, nombre escrito abajo) = una
   persona que dijo que sí. El papelito clavado = lo que esa persona escribió (su frase) o un momento con su año. La
   chinche = está clavado acá (gris: el amarillo es solo lo que se toca). Sin texto sobre el corcho: todo va en papel. */
.corcho{background:#b98a5c;border:3px solid #b9b9b2;outline:2px solid var(--negro);border-radius:12px;padding:20px 14px 18px;margin-top:6px}
.corcho + .faltas{margin-top:16px}
.clavada{position:relative}
.chinche{position:absolute;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#3a3a36;border:2px solid #dcdcd6;z-index:2}
.instantanea{position:relative;background:var(--blanco);padding:8px 8px 10px;border:1px solid #8a8a84}
.instantanea .pie-foto{padding:8px 2px 0;line-height:1.25}
.instantanea .pie-foto b{display:block;font:400 1.45rem/1 var(--display);letter-spacing:.02em}
.instantanea .pie-foto span{display:block;font-size:.875rem;font-weight:600}
.instantanea .pie-foto .desde{color:#3a3a36;margin-top:3px}
.instantanea .pie-foto .desde span{display:inline;font-size:inherit}
.instantanea.grande{max-width:460px;padding-bottom:12px}
.pagina{display:grid;gap:24px;align-items:start}
.hoja{background:var(--blanco);border:1px solid #8a8a84;padding:22px 18px 6px}
.hoja p{font-size:1.05rem;max-width:60ch}
@media (min-width:760px){.pagina{grid-template-columns:5fr 6fr;gap:36px;align-items:center}.hoja p{font-size:1.12rem}.corcho{padding:28px 26px 24px}}
.clavadas{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:24px 14px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.pagina + .clavadas{margin-top:30px}
.corcho > .clavadas:first-child{margin-top:4px}
@media (min-width:760px){.clavadas{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:30px 24px}}
/* un poco torcidas, como en un corcho de verdad (fijo, no es movimiento) */
.clavadas > li:nth-child(3n+1) .instantanea{transform:rotate(-1.2deg)}
.clavadas > li:nth-child(3n+2) .instantanea{transform:rotate(.9deg)}
.papelito{position:relative;margin:10px 4px 0;background:#eef3f7;border:1px solid #8a8a84;padding:8px 10px;font-size:1rem;font-weight:600;color:#1d1d1b;overflow-wrap:anywhere}
.papelitos{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.papelitos > li{background:var(--blanco);border:1px solid #8a8a84;padding:18px 14px 14px}
.papelitos .anio{display:inline-block;font:400 1.7rem/1 var(--display);background:#1d1d1b;color:var(--blanco);padding:5px 9px 3px;border-radius:6px;margin-bottom:6px}
.papelitos p{margin:0}
.foto-chica{margin-top:10px;border:6px solid var(--blanco);outline:1px solid #8a8a84}

/* alto contraste del sistema: sin materiales, todo con los colores del sistema */
@media (forced-colors:active){
  .corcho,.instantanea,.hoja,.papelito,.papelitos > li,.anio{border-color:CanvasText}
  .chinche{forced-color-adjust:none;background:CanvasText;border-color:CanvasText}
}