/* Página /reservar: portada oscura como la web y el calendario sobre fondo piedra, como el formulario. */

/* portada: titular grande y los tres momentos de la llamada */
.r-hero { padding: 72px 0 88px; }
.r-cap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 64px; align-items: end; }
.r-cap h1 { font-size: clamp(48px, 7vw, 112px); line-height: .92; letter-spacing: -.055em; font-weight: 800; }
.r-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 64px; padding-top: 36px; box-shadow: inset 0 1px 0 #2e2e2e; }

/* botón secundario de la cabecera: el principal de esta página es el calendario */
.boto-sec { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px #3e3e3e; }
.boto-sec:hover { box-shadow: inset 0 0 0 1.5px var(--accent); filter: none; }

/* calendario sobre piedra (su fondo interior también es piedra) */
/* el calendario ya deja aire arriba (unos 60 px) dentro de su marco */
.r-cal { background: #f1efe9; color: #151515; padding: 0 0 72px; }
.r-cal .marc { max-width: 1160px; }
.r-cal iframe { display: block; width: 100%; height: 820px; border: 0; transition: height 200ms var(--ease); }
.r-nota { margin-top: 8px; text-align: center; font-size: 15px; color: #55524c; }
.r-nota a { color: #0f7f7b; font-weight: 700; }

@media (max-width: 960px) {
  .r-cap { grid-template-columns: 1fr; }
  .r-passos { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
}
@media (max-width: 640px) {
  .r-hero { padding: 36px 0 56px; }
  .r-cap h1 { font-size: 15vw; }
  .r-cal { padding: 8px 0 48px; }
  .r-cal .marc { padding-left: 8px; padding-right: 8px; }
  .r-cal iframe { height: 1100px; }
}