:root {
  --papel: #f3f3f1;
  --tinta: #000;
  --texto: #1c1c1c;
  --margen: clamp(20px, 6vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--texto);
  background: var(--papel) url("img/papel.png");
  line-height: 1.5;
}

/* Cartel: rejilla de una columna en móvil */
.cartel {
  max-width: 1100px;
  overflow: hidden;
  margin: 0 auto;
  padding: var(--margen);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  position: relative;
}

.frecuencia {
  font-weight: 800;
  font-size: clamp(1.7rem, 6.2vw, 3.2rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tinta);
  margin-top:3rem;
}

.hora {
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 3.8rem);
  line-height: 1.2;
  margin-top: .4rem;
}
.hora small { font-size: clamp(.8rem, 2.4vw, 1.05rem); margin-left: .5rem; }

.intro { font-size: clamp(.95rem, 2.4vw, 1.15rem); }

.clases h2 { font-weight: 500; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: .4rem; }
.fechas { list-style: none; font-size: clamp(1rem, 2.6vw, 1.3rem); line-height: 1.55; }

.aportacion { font-size: clamp(.95rem, 2.2vw, 1.1rem); }

.bailarina {
  width: 100%;
  height: auto;
  max-width: 520px;
  justify-self: end;
}

.imparte { font-size: 1rem; }

.contacto { margin-top: 1.5rem; display: grid; gap: .4rem; justify-items: start; }
.contacto p { margin-bottom: .3rem; }
.contacto a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}
.contacto a:hover, .contacto a:focus-visible { text-decoration: underline; }
.contacto img { width: 1.9rem; height: auto; }

.titulo {
  font-weight: 800;
  font-size: clamp(3.2rem, 15vw, 7.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom:3rem;
}

/* Escritorio: composición similar al cartel original */
@media (min-width: 800px) {
  .cartel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "cab   cab"
      "intro intro"
      "clases aport"
      "info  baile"
      "titulo baile";
    column-gap: 2rem;
    row-gap: 1.5rem;
    min-height: 100vh;
  }
  .cabecera   { grid-area: cab; }
  .intro      { grid-area: intro; }
  .clases     { grid-area: clases; }
  .aportacion { grid-area: aport; padding-top: .4rem; }
  .info       { grid-area: info; align-self: end; margin-top: 3rem; }
  .titulo     { grid-area: titulo; align-self: end; position: relative; z-index: 1; }
  .bailarina  {
    grid-area: 3 / 1 / 6 / 3;
    justify-self: end;
    align-self: start;
    width: 66%;
    max-width: none;
    margin-right: -4%;
    margin-top: 4.5rem;
    pointer-events: none;
  }
  .clases, .aportacion, .info { position: relative; z-index: 1; }
}