/* Espacios de la Barranca - sitio público
   Idea: un lugar de noche sobre una barranca. Estratos de tierra, un río y una guirnalda de luces. */

:root {
  --rio: #12303b;
  --rio-hondo: #0d222b;
  --rio-claro: #1b4350;
  --luz: #f2b84b;
  --luz-suave: #ffe3a3;
  --tiza: #eef1ec;
  --musgo: #dfe7e1;
  --tinta: #16282e;
  --suave: #52666b;
  --yuyo: #6f8a6a;
  --arena: #d8c9a8;
  --barro: #9b5b3a;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--tiza);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--rio-claro); outline-offset: 3px; }
.hero :focus-visible, .fechas-seccion :focus-visible, .pie :focus-visible { outline-color: var(--luz); }

.contenedor { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.saltar { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--luz); color: var(--rio-hondo); padding: .7rem 1rem; font-weight: 700; }
.saltar:focus { left: .5rem; top: .5rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; font: inherit; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer;
  padding: .85rem 1.4rem; border-radius: 4px; border: 1.5px solid rgb(238 241 236 / .65);
  background: transparent; color: var(--tiza); min-height: 46px; line-height: 1.3;
  transition: background-color .15s, color .15s, border-color .15s;
}
.boton:hover { background: rgb(238 241 236 / .12); }
.boton.principal { background: var(--luz); border-color: var(--luz); color: var(--rio-hondo); }
.boton.principal:hover { background: var(--luz-suave); border-color: var(--luz-suave); }
.boton.oscuro { background: var(--rio); border-color: var(--rio); color: var(--tiza); }
.boton.oscuro:hover { background: var(--rio-claro); border-color: var(--rio-claro); }
.boton.grande { display: block; width: 100%; padding: 1rem 1.4rem; font-size: 1.1rem; }

/* ---------- Portada ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 820px);
  display: flex; flex-direction: column;
  padding-bottom: clamp(200px, 31vw, 380px);
  color: var(--tiza);
  background: linear-gradient(to bottom, #0b1d25 0%, #12303b 38%, #21505a 72%, #6a6a52 100%);
}
.hero.con-foto {
  padding-bottom: clamp(3rem, 8vw, 6rem);
  background:
    linear-gradient(to bottom, rgb(13 34 43 / .78), rgb(13 34 43 / .42) 55%, rgb(13 34 43 / .88)),
    var(--portada) center / cover no-repeat;
}

.nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.nav-marca { font-family: var(--display); font-size: 1.15rem; color: #fff; text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; gap: clamp(.8rem, 3vw, 1.6rem); }
.nav-links a { color: var(--tiza); text-decoration: none; padding: .5rem 0; border-bottom: 1.5px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--luz); }
@media (max-width: 520px) {
  .nav-marca { font-size: 1.05rem; }
  .nav-links a:nth-child(3) { display: none; } /* "Contacto" queda en el pie; en el celular no entra */
}

.luces { position: absolute; left: 0; right: 0; top: 3.4rem; width: 100%; height: clamp(90px, 12vw, 150px); z-index: 1; pointer-events: none; }
.bombita circle {
  fill: var(--luz-suave);
  filter: drop-shadow(0 0 4px rgb(242 184 75 / .95)) drop-shadow(0 0 12px rgb(242 184 75 / .55));
  animation: encender .55s ease-out both;
  animation-delay: calc(400ms + var(--i) * 75ms);
}
@keyframes encender {
  from { fill: #3b4e52; filter: none; }
  55% { fill: #fff6dc; }
}

/* La ilustración nunca baja de 820 px de ancho: en el celular se recorta por la izquierda y la barranca queda a la vista. */
.barranca { position: absolute; right: 0; bottom: 0; width: max(100%, 820px); height: auto; aspect-ratio: 1200 / 380; z-index: -1; }

.hero-texto { position: relative; z-index: 2; margin-top: clamp(4.5rem, 13vw, 8.5rem); }
.hero h1 {
  font-family: var(--display); font-weight: 400; line-height: 1; letter-spacing: -.01em;
  font-size: clamp(2.8rem, 8.4vw, 5.8rem); margin: 0 0 1.1rem; max-width: 10.5ch; text-wrap: balance; color: #fff;
}
.hero-eslogan { font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--luz-suave); margin: 0 0 .6rem; max-width: 30rem; }
.hero-desc { max-width: 34rem; margin: 0 0 1.8rem; color: rgb(238 241 236 / .9); }
.hero-botones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3.5rem, 9vw, 7rem); }
h2 {
  font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -.005em;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); margin: 0 0 1rem; max-width: 20ch; text-wrap: balance;
}
.intro { max-width: 58ch; color: var(--suave); font-size: 1.1rem; margin: 0 0 2.2rem; }

/* Ocasiones: tres filas tipográficas */
.ocasiones h2 { margin-bottom: 2rem; }
.ocasion {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .6rem 3rem; align-items: baseline;
  padding: 1.7rem 0; border-top: 1px solid rgb(22 40 46 / .28);
}
.ocasion:last-child { border-bottom: 1px solid rgb(22 40 46 / .28); }
.ocasion h3 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5.4vw, 3.5rem); line-height: 1.05; margin: 0; }
.ocasion p { margin: 0; max-width: 40ch; font-size: 1.15rem; }
@media (max-width: 720px) { .ocasion { grid-template-columns: 1fr; padding: 1.3rem 0; } }

/* Galería (solo aparece si hay fotos en assets/img/galeria) */
.galeria-seccion { background: #fff; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); grid-auto-flow: dense; gap: 10px; }
.galeria figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--musgo); }
.galeria figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.galeria a:hover img { transform: scale(1.03); }
@media (max-width: 560px) { .galeria figure:first-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .galeria img { transition: none; } .galeria a:hover img { transform: none; } }

/* Menús */
.menus-seccion { background: var(--musgo); }
.menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.25rem; align-items: stretch; }
.carta {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid rgb(22 40 46 / .14); border-radius: 6px; padding: 0 1.5rem 1.6rem;
}
.carta-estratos {
  height: 14px; margin: 0 -1.5rem 1.3rem;
  background: linear-gradient(to bottom, var(--yuyo) 0 25%, var(--arena) 25% 50%, var(--barro) 50% 75%, #7a4630 75% 100%);
}
.carta h3 { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.15; margin: 0; }
.precio { margin: .5rem 0 .8rem; color: var(--suave); }
.precio strong { font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--tinta); margin-right: .3rem; }
.carta-desc { margin: 0 0 .4rem; }
.menu-detalle { margin-bottom: 1.4rem; }
.menu-detalle h4 { font-size: 1rem; font-weight: 700; margin: 1rem 0 .15rem; color: var(--rio-claro); }
.menu-detalle ul { margin: 0; padding-left: 1.1rem; }
.carta .boton { margin-top: auto; align-self: flex-start; }

/* Fechas y consulta */
.fechas-seccion { background: var(--rio); color: var(--tiza); }
.fechas-seccion h2 { color: #fff; }
.fechas-seccion .intro { color: rgb(238 241 236 / .8); }
.fechas-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .fechas-grid { grid-template-columns: 1fr; } }

.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.cal-cab h3 { font-family: var(--display); font-weight: 400; font-size: 1.55rem; margin: 0; text-align: center; flex: 1; }
.cal-cab button {
  width: 46px; height: 46px; flex: none; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
  border: 1.5px solid rgb(238 241 236 / .55); background: transparent; color: var(--tiza);
}
.cal-cab button:hover:not(:disabled) { background: rgb(238 241 236 / .14); }
.cal-cab button:disabled { opacity: .3; cursor: not-allowed; }

.cal-dias-semana, .cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dias-semana span { text-align: center; font-size: .85rem; color: rgb(238 241 236 / .7); padding-bottom: .4rem; }
.dia {
  position: relative; aspect-ratio: 1; min-height: 44px; border-radius: 6px; cursor: pointer;
  font: inherit; font-weight: 500; font-variant-numeric: tabular-nums;
  border: 1.5px solid transparent; background: transparent; color: var(--tiza);
}
.dia.libre { background: var(--tiza); color: var(--rio-hondo); font-weight: 700; }
.dia.parcial { border-color: var(--tiza); font-weight: 700; }
.dia.parcial::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--luz); }
.dia.completo { color: rgb(238 241 236 / .45); text-decoration: line-through; cursor: not-allowed; }
.dia.pasado { color: rgb(238 241 236 / .25); cursor: default; }
.dia.hoy { text-decoration: underline; text-underline-offset: 4px; }
.dia:not(:disabled):hover { box-shadow: 0 0 0 2px var(--luz); }
.dia[aria-pressed="true"] { background: var(--luz); border-color: var(--luz); color: var(--rio-hondo); box-shadow: 0 0 0 3px rgb(242 184 75 / .4); font-weight: 700; }
.cal-vacio { aspect-ratio: 1; }
.cal-grilla[aria-busy="true"] { opacity: .5; }

.cal-estado { min-height: 1.6rem; margin: .8rem 0 0; color: var(--luz-suave); }
.cal-estado button { font: inherit; color: var(--tiza); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }

.referencias { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .95rem; color: rgb(238 241 236 / .85); }
.muestra { display: inline-block; width: 1.15rem; height: 1.15rem; border-radius: 4px; vertical-align: -.2rem; margin-right: .45rem; position: relative; }
.muestra.libre { background: var(--tiza); }
.muestra.parcial { border: 1.5px solid var(--tiza); }
.muestra.parcial::after { content: ""; position: absolute; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--luz); }
.muestra.completo { border: 1.5px solid rgb(238 241 236 / .4); background: linear-gradient(135deg, transparent 44%, rgb(238 241 236 / .55) 44% 56%, transparent 56%); }

.consulta {
  color-scheme: dark; background: rgb(255 255 255 / .06); border: 1px solid rgb(238 241 236 / .2);
  border-radius: 8px; padding: clamp(1.1rem, 3vw, 1.7rem);
}
.consulta h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .9rem; }
.consulta label { display: block; font-weight: 500; margin-top: 1rem; }
.consulta select, .consulta input {
  display: block; width: 100%; margin-top: .3rem; min-height: 46px; padding: .6rem .75rem;
  font: inherit; color: var(--tiza); background: rgb(255 255 255 / .08);
  border: 1px solid rgb(238 241 236 / .4); border-radius: 4px;
}
.consulta input::placeholder { color: rgb(238 241 236 / .5); }
.pista { color: rgb(238 241 236 / .75); margin: 0; }
.estimado { min-height: 1.5rem; margin: 1rem 0; color: var(--luz-suave); font-weight: 500; }
.politica { font-size: .92rem; color: rgb(238 241 236 / .75); margin: 1rem 0 0; }

.turnos-dia { display: grid; gap: .5rem; }
.fecha-elegida { margin: 0 0 .1rem; font-weight: 700; font-size: 1.1rem; }
.turno {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; text-align: left; cursor: pointer; width: 100%;
  font: inherit; color: var(--tiza); background: transparent; border: 1.5px solid rgb(238 241 236 / .55);
  border-radius: 6px; padding: .6rem .9rem; min-height: 54px;
}
.turno b { font-weight: 700; }
.turno small { grid-column: 1; color: rgb(238 241 236 / .75); font-size: .9rem; }
.turno .est { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .9rem; font-weight: 700; }
.turno:hover:not(:disabled) { background: rgb(238 241 236 / .12); }
.turno[aria-pressed="true"] { background: var(--luz); border-color: var(--luz); color: var(--rio-hondo); }
.turno[aria-pressed="true"] small { color: var(--rio-hondo); }
.turno:disabled { cursor: not-allowed; border-style: dashed; border-color: rgb(238 241 236 / .3); color: rgb(238 241 236 / .5); }
.turno:disabled b { text-decoration: line-through; }

/* Pie */
.pie { background: var(--rio-hondo); color: rgb(238 241 236 / .85); padding-block: 3rem; }
.pie-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 720px) { .pie-grid { grid-template-columns: 1fr; } }
.pie-nombre { font-family: var(--display); font-size: 1.6rem; color: #fff; margin: 0 0 .3rem; }
.pie p { margin: 0; }
.pie-contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pie a { color: var(--luz-suave); }