/* ══════════════════════════════════════════════════════════
   DISEÑO · TRÍPTICO

   La idea: tres fotos a pantalla completa, una junto a otra,
   sin separación, y el nombre cruzándolas por el medio.

   El gesto: las tres a la vez. Los demás diseños enseñan un
   retrato; este enseña tres y deja que la mirada elija. La del
   centro va un poco más viva para que el ojo sepa dónde caer.

   Si solo tienes una foto subida, las otras dos se ocultan
   solas y la que quede ocupa el ancho entero: el diseño no se
   rompe, se estrecha.

   Bronce sobre marrón oscuro: los grises apagan las fotos y
   los dorados fuertes se pelean con ellas.
   ══════════════════════════════════════════════════════════ */

:root {
  --gold: #C0925A;          /* bronce */
  --gold-light: #E0BC8A;
  --gold-dark: #85602F;
  --dark: #1E1712;
  --dark-2: #2A211A;
  --dark-3: #372B22;
  --text: #F0E8DC;
  --text-muted: #B0A390;
  --cuerpo: 18px;
  --grosor: 300;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Work Sans', sans-serif;
}

/* ─── Las tres hojas ─── */
.tp-portada {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--dark);
}
.tp-hojas {
  position: absolute;
  inset: 0;
  display: flex;
}
.tp-hoja {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--dark-2);
}
.tp-hoja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  /* Las de fuera, un punto más apagadas: mandan el centro y el
     nombre, no las tres a la vez gritando */
  filter: brightness(0.62) saturate(0.85);
}
.tp-hoja.tp-centro { flex: 1.25; }
.tp-hoja.tp-centro img { filter: brightness(0.86); }

/* El velo: una banda ancha por el medio para que el nombre se
   lea sea cual sea la foto */
.tp-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dark) 55%, transparent) 0%,
    transparent 22%,
    color-mix(in srgb, var(--dark) 78%, transparent) 42%,
    color-mix(in srgb, var(--dark) 78%, transparent) 62%,
    transparent 80%,
    color-mix(in srgb, var(--dark) 70%, transparent) 100%);
}

.tp-portada .hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  background: none;
  padding: 6rem 2rem 4rem;
}
.tp-portada .hero::before { display: none; }

/* En móvil sobra el tríptico: una sola foto y a correr */
@media (max-width: 700px) {
  .tp-hoja { display: none; }
  .tp-hoja.tp-centro { display: block; flex: 1; }
}

/* ─── El resto de páginas ─── */
.page-hero {
  background: linear-gradient(0deg,
              color-mix(in srgb, var(--gold) 6%, var(--dark)) 0%,
              var(--dark) 70%);
  border-bottom: none;
}

/* ─── Nav ─── */
nav {
  background: color-mix(in srgb, var(--dark) 60%, transparent);
  border-bottom: none;
  backdrop-filter: blur(8px);
}
.nav-logo {
  font-family: var(--serif);
  font-style: normal;
  letter-spacing: 0.06em;
  font-size: 1.4rem;
}
.nav-links a { font-size: 0.73rem; letter-spacing: 0.15em; }

/* ─── Tipografía ─── */
.hero-ornament {
  letter-spacing: 0.3em;
  font-size: 0.68rem;
  color: var(--gold-light);
}
.hero-ornament::before, .hero-ornament::after {
  width: 3.5rem; background: var(--gold-light); opacity: 0.7;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: 0.04em;
  line-height: 1;
}
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero-tagline {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.section-title { font-family: var(--serif); font-weight: 400; letter-spacing: 0.02em; }
.section-title em { font-style: italic; color: var(--gold); }
.section-label { color: var(--gold-dark); letter-spacing: 0.2em; }

/* ─── Botones ─── */
.btn-primary, .rsv-btn, .av-btn {
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 0;
  letter-spacing: 0.13em;
  font-weight: 500;
}
.btn-primary:hover, .rsv-btn:hover { background: var(--gold-light); }
.btn-outline {
  border: 1px solid color-mix(in srgb, var(--text) 40%, transparent);
  color: var(--text);
  border-radius: 0;
  letter-spacing: 0.13em;
}
.btn-outline:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }

/* ─── Tarjetas: separadas por un filete, como las hojas ─── */
.cita-card, .deseo-card, .faq-item,
.cita-aviso, .contacto-aviso, .contacto-donde {
  background: var(--dark-2);
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 0;
}
.citas-grid {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  gap: 1px;
}
.cita-icon { border: 1px solid var(--gold-dark); border-radius: 0; color: var(--gold); }
.deseo-badge { background: var(--gold); color: var(--dark); border-radius: 0; }

/* ─── Galería: pegadas entre sí, como el tríptico ─── */
.gallery-item, .video-thumb-item { border-radius: 0; }
.gallery-overlay { background: color-mix(in srgb, var(--dark) 20%, transparent); }
.gallery-item:hover .gallery-overlay { background: transparent; }

/* ─── Formularios ─── */
.form-group input, .form-group textarea, .form-group select,
.rsv-campo, .rsv-codigo-campo {
  background: var(--dark-2);
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 0;
  color: var(--text);
}
.form-group input:focus, .form-group textarea:focus,
.form-group select:focus, .rsv-campo:focus { border-bottom-color: var(--gold); }

footer { border-top: 1px solid color-mix(in srgb, var(--gold) 15%, transparent); }
.footer-logo { font-family: var(--serif); font-style: normal; letter-spacing: 0.05em; }

/* ─── «Quién soy»: el tríptico partido ───
   Una sola hoja, alta y pegada al borde, con el texto al lado.
   Es el mismo gesto de la portada reducido a la mitad. */
.tp-qs {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 3rem;
  padding-top: 0;
}
.tp-qs-hoja {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--dark-2);
}
.tp-qs-hoja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(0.82);
}
.tp-qs-texto { padding: 8rem 3rem 5rem 0; }
.tp-qs .page-hero { background: none; padding: 0 0 2rem; }
.tp-qs .section-title { text-align: left; }
.tp-qs .about-text { max-width: 48ch; }

@media (max-width: 900px) {
  .tp-qs { grid-template-columns: 1fr; gap: 0; }
  .tp-qs-hoja { position: relative; height: 50vh; }
  .tp-qs-texto { padding: 2.5rem 1.6rem 4rem; }
}

/* ─── Citas: dos hojas y las tarifas por el pasillo ─── */
.tp-ci { position: relative; padding-top: 0; }
.tp-ci-hoja {
  position: fixed;
  top: 0;
  width: 22%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 0;
}
.tp-ci-izq { left: 0; }
.tp-ci-der { right: 0; }
.tp-ci-hoja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(0.5) saturate(0.85);
}
.tp-ci-centro {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 56%;
  background: var(--dark);
  padding-top: 5rem;
  min-height: 100vh;
  box-shadow: 0 0 60px color-mix(in srgb, #000 60%, transparent);
}

/* En móvil las hojas estorban: fuera, y las tarifas al ancho */
@media (max-width: 1000px) {
  .tp-ci-hoja { display: none; }
  .tp-ci-centro { max-width: 100%; box-shadow: none; }
}

/* ─── La cabecera de todas las páginas de dentro ───
   El tríptico tumbado: una foto ancha con las dos juntas
   dibujadas encima. Cuesta una sola foto en vez de tres, y el
   gesto de la portada se reconoce igual. */
.tp-cab { position: relative; overflow: hidden; }
.tp-cab-foto { position: absolute; inset: 0; }
.tp-cab-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: brightness(0.55) saturate(0.9);
}
/* El velo de la cabecera.
   Aquí iban las dos juntas del tríptico dibujadas a tercios.
   Fuera: sobre una foto de verdad no se leían como juntas, se
   leían como dos rayas encima de la modelo. El gesto del
   tríptico ya lo hace la portada; repetirlo en las siete
   páginas de dentro solo estorbaba. */
.tp-cab-juntas {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--dark) 0%,
    color-mix(in srgb, var(--dark) 30%, transparent) 60%,
    transparent 100%);
}
.tp-cab .page-hero {
  position: relative;
  z-index: 2;
  background: none;
  min-height: 38vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2.5rem;
}

/* ─── Book: las fotos pegadas, como las hojas ─── */
.book-tabs { border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.tab-btn { color: var(--text-muted); letter-spacing: 0.15em; }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.gallery-grid, .video-grid { gap: 2px; }
.gallery-item, .video-thumb-item { border-radius: 0; }

/* ─── Preguntas: una lista continua, separada por filetes ─── */
.faq-item { border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.faq-item + .faq-item { margin-top: 0; }
.faq-question { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.01em; }
.faq-arrow { color: var(--gold); }

/* ─── Contactar y Reservar ─── */
.contacto-grid > div:last-child { overflow: hidden; }
#ct-imagen { filter: brightness(0.88); }
.rsv-tarjeta { border-radius: 0; border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }

/* ─── La cabecera, un punto más alta en el ordenador ─── */
@media (min-width: 901px) {
  .tp-cab .page-hero { min-height: 46vh; }
  .contacto-grid { align-items: center; }
}

/* ─── Sin imagen ───
   Si en /edit eliges «Sin imagen» para una página, el reparto le
   pone esta clase a la cabecera. Aquí se recoge: fuera el velo,
   que sin foto detrás sería una mancha, y la altura al mínimo. */
.tp-cab.sin-imagen .tp-cab-velo,
.tp-cab.sin-imagen .tp-cab-rescoldo,
.tp-cab.sin-imagen .tp-cab-juntas { display: none; }
.tp-cab.sin-imagen .page-hero {
  min-height: 0;
  display: block;
  padding: 7rem 1.5rem 2rem;
}