/* Plantilla «plaza». Las rayas de la camiseta son --acento sobre --papel; el escudo y las placas
   con texto claro son --tinta. */

:root {
  --papel: #FFFFFF;
  --tinta: #0B2A5B;
  --acento: #FFC72C;
  --disp: "Rubik", "Arial Black", sans-serif;
  --texto: "Familjen Grotesk", system-ui, sans-serif;
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 72rem;
  --raya: clamp(34px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.1rem;
  line-height: 1.55;
}
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ─── La camiseta ──────────────────────────────────────────────── */

.camiseta {
  background: repeating-linear-gradient(90deg, var(--acento) 0 var(--raya), var(--papel) var(--raya) calc(var(--raya) * 2));
  border-bottom: 10px solid var(--tinta);
}
.camiseta-in {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--margen);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 820px) {
  .camiseta-in { grid-template-columns: auto 1fr; gap: 2.5rem; }
}
.escudo {
  width: clamp(120px, 18vw, 230px);
  height: auto;
  filter: drop-shadow(6px 8px 0 color-mix(in srgb, var(--tinta) 30%, transparent));
}
.esc-fondo { fill: var(--tinta); }
.esc-banda { fill: var(--acento); }
.esc-borde { fill: none; stroke: var(--papel); stroke-width: 5; }
.esc-sigla { fill: var(--papel); }

/* La placa: el nombre sobre tinta, como la leyenda de una bandera de tribuna. */
.placa {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(18px, 3vw, 32px) clamp(18px, 3.4vw, 40px);
  max-width: 46rem;
  transform: skewX(-6deg);
}
.placa > * { transform: skewX(6deg); }
.placa-que { font-weight: 600; font-size: 1.05rem; }
.placa h1 {
  font-family: var(--disp);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin-top: .3rem;
}
.placa-lema { margin-top: .8rem; font-size: clamp(1.1rem, 2vw, 1.35rem); }

/* ─── La próxima fecha ─────────────────────────────────────────── */

.fecha { background: var(--acento); color: var(--tinta); }
.fecha-in {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) var(--margen);
  display: grid;
  gap: .2rem 2rem;
  align-items: baseline;
}
@media (min-width: 820px) {
  .fecha-in { grid-template-columns: auto 1fr; }
  .fecha-in > p:last-child { grid-column: 2; }
}
.fecha-cuando {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.15rem;
}
.fecha h2 {
  font-family: var(--disp);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1;
}

/* ─── Bloques ──────────────────────────────────────────────────── */

main {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}
.presenta {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.4;
  max-width: 38ch;
  padding-top: clamp(40px, 6vw, 72px);
}
.bloque { padding-top: clamp(48px, 7vw, 88px); }
.titulo {
  font-family: var(--disp);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
/* Tres rayas cortas antes de cada título: la camiseta, en chiquito. */
.titulo::before {
  content: "";
  flex: 0 0 auto;
  width: 2.2rem;
  height: .9em;
  background: repeating-linear-gradient(90deg, var(--acento) 0 .4rem, transparent .4rem .9rem);
  transform: skewX(-12deg);
  outline: 2px solid var(--tinta);
  outline-offset: -2px;
}
.bajada { font-size: 1.25rem; max-width: 40ch; margin-bottom: 1.4rem; }

/* El collage de fotos. */
.collage {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.collage figure { min-height: 11rem; display: grid; }
.collage-0 { grid-column: 1 / -1; min-height: 16rem !important; }
@media (min-width: 820px) {
  .collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; }
  .collage-0 { grid-column: 1 / span 2; grid-row: span 2; }
}
.collage img, .collage .foto-hueco { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-hueco {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 1rem;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--acento) 30%, var(--papel)) 0 22px, var(--papel) 22px 44px);
  border: 2px solid var(--tinta);
  font-weight: 600;
}
.foto-hueco span {
  display: block;
  background: var(--papel);
  border: 2px solid var(--tinta);
  padding: .3rem .7rem;
  max-width: 24ch;
}

.disciplinas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.disciplinas li {
  border: 3px solid var(--tinta);
  padding: 1rem 1.1rem 1.1rem;
  border-top-width: 12px;
}
.disciplinas h3 { font-family: var(--disp); font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.disciplinas p { margin-top: .3rem; }

/* El cuadro semanal: una columna por día, como la pizarra de la secretaría. */
.cuadro { display: grid; gap: 0; border: 3px solid var(--tinta); }
@media (min-width: 820px) {
  .cuadro { grid-template-columns: repeat(var(--dias), 1fr); }
  .dia + .dia { border-left: 2px solid var(--tinta); }
}
@media (max-width: 819px) {
  .dia + .dia { border-top: 2px solid var(--tinta); }
}
.dia h3 {
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.05rem;
  padding: .5rem .8rem;
}
.dia ul { list-style: none; margin: 0; padding: .6rem .8rem .8rem; }
.dia li { padding: .3rem 0; line-height: 1.3; }
.hora {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 800;
  background: var(--acento);
  color: var(--tinta);
  padding: 0 .35rem;
  margin-right: .2rem;
}

.historia p { font-size: 1.25rem; line-height: 1.5; max-width: 50ch; }

.preguntas { max-width: 48rem; border-top: 3px solid var(--tinta); }
.preguntas details { border-bottom: 3px solid var(--tinta); }
.preguntas summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1.15rem;
}
.preguntas details p { padding: 0 0 1.1rem; max-width: 60ch; }

.direccion {
  font-family: var(--disp);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1;
  margin-bottom: .5rem;
}

/* ─── Hacete socio: vuelven las rayas ──────────────────────────── */

.socio {
  margin-top: clamp(56px, 8vw, 104px);
  background: repeating-linear-gradient(90deg, var(--acento) 0 var(--raya), var(--papel) var(--raya) calc(var(--raya) * 2));
  padding: clamp(40px, 7vw, 88px) var(--margen);
}
.socio-in {
  max-width: 40rem;
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(24px, 4vw, 44px);
  margin: 0 auto 0 max(0px, calc((100% - var(--ancho)) / 2));
}
.socio h2 {
  font-family: var(--disp);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: .95;
  color: var(--acento);
}
.socio p { margin-top: .9rem; font-size: 1.2rem; }
.socio .socio-juliana { font-size: 1rem; }

.pie {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 28px var(--margen) 110px;
  display: grid;
  gap: .4rem;
  font-size: .95rem;
}
.pie-nombre { font-family: var(--disp); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}