:root {
  color-scheme: light;
  --paper: #f7f4ed;
  --ink: #25261f;
  --gold: #b8955d;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--paper);
  background: #171914;
  font-family: "Cinzel", serif;
}

.access-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: clamp(12px, 2vw, 28px);
  gap: clamp(10px, 1.8vh, 20px);
  overflow: hidden;
}

.access-heading {
  color: #f6f0e5;
  text-align: center;
}

.access-heading p {
  margin: 0 0 5px;
  color: #dab978;
  font-size: clamp(1.02rem, 1.4vw, 1.24rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.access-heading h1 {
  margin: 0;
  font: 500 clamp(1.8rem, 3vw, 2.8rem)/1.05 "Bodoni Moda", serif;
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1380px, 100%);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  gap: clamp(12px, 2vw, 28px);
}

.access-card {
  display: grid;
  grid-template-rows: clamp(86px, 12vh, 108px) minmax(0, 1fr) clamp(132px, 20vh, 170px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
  text-decoration: none;
}

.access-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding: 12px 24px;
  color: #22231e;
  background: #fff;
  font: 600 clamp(1.35rem, 2.3vw, 2.35rem)/1.05 "Bodoni Moda", serif;
  text-align: center;
}

.access-image {
  display: block;
  min-height: 0;
  margin-inline: clamp(14px, 1.8vw, 26px);
  background-position: center;
  background-size: cover;
  transition: transform .7s ease, filter .7s ease;
}

.access-card-sanjose .access-image {
  background-image: url("https://www.sanjosedelmar.cl/imagenes/proyecto/caracteristicas.jpg");
  background-position: left 52%;
  background-size: 166% auto;
}

.access-card-bosquemar .access-image {
  background-image: url("../assets/img/DSC03178.jpg");
  background-position: 60% 64%;
  background-size: 108% auto;
}

.access-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: start;
  gap: clamp(9px, 1.4vh, 14px);
  min-height: 0;
  height: 100%;
  padding: clamp(16px, 2.2vw, 30px);
  color: var(--ink);
  background: #fff;
}

.access-copy strong {
  align-self: center;
  max-width: 640px;
  font: 500 clamp(1.05rem, 1.65vw, 1.65rem)/1.18 "Bodoni Moda", serif;
}

.access-copy > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 15px;
  color: #211d16;
  background: #d5b679;
  border: 1px solid #b8955d;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.access-copy b {
  margin-left: 7px;
  font-size: .95rem;
}

.access-card:hover .access-image,
.access-card:focus-visible .access-image {
  filter: saturate(1.08);
  transform: scale(1.025);
}

.access-card:hover .access-copy > span,
.access-card:focus-visible .access-copy > span {
  color: #fff;
  background: #9b7741;
  transform: translateY(-2px);
}

.access-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

@media (max-width: 760px) {
  .access-page { padding: 8px; gap: 7px; }
  .access-heading p { margin-bottom: 2px; font-size: clamp(.8rem, 3.1vw, .96rem); }
  .access-heading h1 { font-size: clamp(1.25rem, 5.5vw, 1.7rem); }
  .access-grid { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .access-card { grid-template-rows: 43px minmax(0, 1fr) 90px; }
  .access-card-title { min-height: 0; padding: 6px 12px; font-size: clamp(1rem, 4.5vw, 1.3rem); }
  .access-image { margin-inline: 8px; }
  .access-copy { grid-template-columns: minmax(0, 1fr); min-height: 90px; padding: 8px 10px; gap: 7px; }
  .access-copy strong { font-size: clamp(.76rem, 3vw, .94rem); line-height: 1.12; }
  .access-copy > span { min-height: 34px; padding: 7px 9px; font-size: .55rem; }
  .access-card-sanjose .access-image { background-position: left 54%; background-size: 178% auto; }
  .access-card-bosquemar .access-image { background-position: 62% 68%; background-size: 116% auto; }
}

@media (min-width: 761px) and (max-height: 760px) {
  .access-heading p { font-size: .94rem; }
  .access-heading h1 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
  .access-card { grid-template-rows: 64px minmax(0, 1fr) 112px; }
  .access-card-title { min-height: 0; padding: 8px 18px; font-size: clamp(1.25rem, 2vw, 1.8rem); }
  .access-image { margin-inline: 14px; }
  .access-copy { min-height: 0; padding: 12px 16px; }
  .access-copy strong { font-size: clamp(.95rem, 1.4vw, 1.25rem); }
  .access-copy > span { min-height: 36px; padding: 8px 11px; font-size: .6rem; }
}