/* Web pública de Madeira — composición sobre el sistema del cuarto oscuro */

/* ---------- navegación --------------------------------------------------- */

.menu{display:flex;align-items:center;gap:clamp(.9rem,3vw,2rem)}
.menu a{
  color:var(--crema);text-decoration:none;
  font-family:var(--cuadrada);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
}
.menu a:hover{color:var(--oro)}
.menu a.boton{color:var(--negro)}
.menu a.boton:hover{color:var(--negro)}
.boton--chico{min-height:40px;padding:.55rem 1.1rem}
@media (max-width:560px){ .menu a:not(.boton){display:none} }

/* ---------- portada ------------------------------------------------------ */

.portada{
  padding:clamp(2.5rem,7vw,5rem) var(--borde) clamp(3rem,8vw,5.5rem);
  display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center;
}
.portada__texto{display:grid;gap:1.15rem;justify-items:start}
.portada h1{font-size:clamp(2.6rem,1.4rem + 5.4vw,5.2rem);max-width:13ch}
.portada h1 em{font-style:normal;color:var(--oro)}
.portada__entrada{margin:0;max-width:46ch;color:var(--plata);font-size:clamp(1.05rem,1rem + .4vw,1.2rem)}

.precio{display:flex;align-items:baseline;gap:.7rem;margin:.3rem 0 0}
.precio__cifra{
  font-family:var(--display);font-weight:800;color:var(--oro);
  font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1;letter-spacing:-.02em;
}
.precio__pie{font-family:var(--cuadrada);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--plata)}

.portada__acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.5rem}
.portada__copia{width:min(100%,400px);justify-self:start}

@media (min-width:900px){
  .portada{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .portada__copia{justify-self:center;width:min(100%,380px)}
}

/* ---------- reputación --------------------------------------------------- */

.reputacion{
  padding:1.1rem var(--borde);
  border-block:1px solid rgba(234,191,60,.22);
  background:rgba(234,191,60,.05);
}
.reputacion__nota{
  margin:0;font-family:var(--cuadrada);font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--plata);
}
.reputacion__nota strong{color:var(--oro);font-size:1rem;letter-spacing:0}
.reputacion__sep{opacity:.5;margin-inline:.5rem}
.reputacion__nota a{color:var(--plata);text-underline-offset:4px}
.reputacion__nota a:hover{color:var(--oro)}

/* ---------- cómo funciona ------------------------------------------------ */

.rodizio{padding:var(--salto) var(--borde)}
.rodizio h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);margin:.5rem 0 clamp(2.2rem,5vw,3.2rem);max-width:20ch}

.gestos{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.6rem,4vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.gesto{display:grid;gap:.6rem;align-content:start;padding-top:1.1rem;border-top:2px solid var(--oro-hondo)}
.gesto__n{
  font-family:var(--cuadrada);font-size:.5625rem;letter-spacing:.2em;color:var(--oro);
}
.gesto h3{font-size:clamp(1.1rem,1rem + .7vw,1.4rem);font-weight:800;margin:0}
.gesto p{margin:0;color:var(--plata);font-size:.9375rem;line-height:1.55}

.ninos{margin:clamp(2rem,5vw,3rem) 0 0;padding-top:1.2rem;border-top:1px solid rgba(234,191,60,.18);max-width:52ch}

/* ---------- galería ------------------------------------------------------ */

.galeria{padding:var(--salto) var(--borde);border-top:1px solid rgba(234,191,60,.18)}
.galeria h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);margin:.5rem 0 clamp(2.2rem,5vw,3rem)}
.laminas{display:grid;gap:clamp(1.2rem,3.5vw,2.2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}

/* ---------- dónde y horario ---------------------------------------------- */

.donde{
  padding:var(--salto) var(--borde);
  border-top:1px solid rgba(234,191,60,.18);
  display:grid;gap:clamp(2.5rem,6vw,4rem);
}
@media (min-width:820px){ .donde{grid-template-columns:1.2fr .8fr} }
.donde__bloque{display:grid;gap:.9rem;justify-items:start;align-content:start}
.donde h2{font-size:clamp(1.6rem,1.15rem + 2vw,2.6rem);max-width:16ch}
.donde__dir{margin:0;color:var(--plata)}

.horario{border-collapse:collapse;width:100%;max-width:26rem}
.horario th,.horario td{
  padding:.7rem 0;text-align:left;font-weight:400;
  border-bottom:1px solid rgba(234,191,60,.16);
}
.horario th{color:var(--plata);font-size:.9375rem}
.horario td{text-align:right;font-family:var(--nota);color:var(--crema)}

/* ---------- reservar ----------------------------------------------------- */

.reservar{
  padding:var(--salto) var(--borde);
  border-top:1px solid rgba(234,191,60,.18);
  display:grid;gap:1.1rem;justify-items:start;
  background:radial-gradient(90vw 60vh at 70% 0%, rgba(234,191,60,.09), transparent 66%);
}
.reservar h2{font-size:clamp(1.8rem,1.25rem + 2.4vw,3.1rem);max-width:18ch}
.reservar__texto{margin:0;color:var(--plata);font-size:1.1rem}
.boton--grande{min-height:62px;padding:1.1rem 2.2rem;font-size:.8125rem;letter-spacing:.16em;margin-top:.5rem}