@font-face {
  font-family: 'Freude';
  src: url('fonts/Freude-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Fuente global */
body,
input,
select,
textarea,
body * {
  font-family: 'Freude', sans-serif;
  box-sizing: border-box;
  font-size: 17px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fcf1bc !important;
  background-image: none !important;
  background-size: initial !important;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* CONTENEDOR GENERAL */
.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* izq - centro - der */
  gap: 20px;
  align-items: start;
}

/* Bloque izquierdo y derecho (imágenes) */
.col-izq, .col-der {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 14px;
  justify-items: center;
  align-items: center;
}

/* Formulario */
#formReserva {
  background-color: #d4b6ff;
  padding: 20px;
  border-radius: 12px;
  width: 100%;        /* que ocupe todo el espacio asignado */
  max-width: none;    /* quitamos el límite anterior */
  margin: 0 auto;
}

#formReserva h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 150%;
}

#formReserva input,
#formReserva select,
#formReserva textarea,
#formReserva button {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #aaa;
}

#formReserva button {
  background-color: #7b4dff;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border: none;
}

#formReserva button:hover {
  background-color: #5a36cc;
}
/* BLOQUES DE IMÁGENES */
.col-izq, .col-der {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columnas */
  grid-template-rows: repeat(4, auto); /* 4 filas */
  gap: 15px;
  justify-items: center;
  align-items: center;
}

/* IMÁGENES (base) */
[class^="imagen"] {
  width: 120px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Izquierda */

.imagen8 { background-image: url("http://localhost/Colegio/Codigo/img/abajo.png"); }
.imagen7 { background-image: url("http://localhost/Colegio/Codigo/img/celeste.png"); }
.imagen6 { background-image: url("http://localhost/Colegio/Codigo/img/peque.png"); }
.imagen5 { background-image: url("http://localhost/Colegio/Codigo/img/verdee.png"); }
.imagen4 { background-image: url("http://localhost/Colegio/Codigo/img/rosaclaro.png"); }
.imagen3 { background-image: url("http://localhost/Colegio/Codigo/img/centro.png"); }
.imagen2 { background-image: url("http://localhost/Colegio/Codigo/img/arriba.png"); }
.imagen  { background-image: url("http://localhost/Colegio/Codigo/img/rosa.png"); }


/* Derecha */
.imagen17 { background-image: url("http://localhost/Colegio/Codigo/img/abajo-.png"); }
.imagen16 { background-image: url("http://localhost/Colegio/Codigo/img/celeste-.png"); }
.imagen15 { background-image: url("http://localhost/Colegio/Codigo/img/peque-.png"); }
.imagen14 { background-image: url("http://localhost/Colegio/Codigo/img/verdee-.png"); }
.imagen13 { background-image: url("http://localhost/Colegio/Codigo/img/rosaclaro-.png"); }
.imagen12 { background-image: url("http://localhost/Colegio/Codigo/img/centro-.png"); }
.imagen11 { background-image: url("http://localhost/Colegio/Codigo/img/bg-.png"); }
.imagen10 { background-image: url("http://localhost/Colegio/Codigo/img/bgr-.png"); }



/* RESPONSIVE */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr; /* una sola columna */
  }

  .col-izq, .col-der {
    grid-template-columns: repeat(4, 1fr); /* imágenes en fila de 4 */
    grid-template-rows: auto;
  }

  #formReserva {
    max-width: 95%;
  }
}