/* ══════════════════════════════════════════════════════════
   DISEÑO · CARMÍN

   La idea: una portada de revista. El retrato en una banda
   ancha que cruza la parte de arriba, teñido de rosa, y el
   nombre debajo sobre el vino.

   El gesto: el TEÑIDO. La foto pasa a blanco y negro y encima
   se le echa el carmín, así que cualquier foto que subas queda
   integrada en el diseño en vez de pelearse con él. Ningún
   otro diseño toca la foto.

   El fondo es vino, no negro ni papel: se mira de noche.
   ══════════════════════════════════════════════════════════ */

:root {
  --gold: #F0839B;          /* carmín */
  --gold-light: #F9B4C2;
  --gold-dark: #A95169;
  --dark: #2A181F;          /* vino */
  --dark-2: #362029;
  --dark-3: #442A34;
  --text: #F7E9EC;
  --text-muted: #C4A3AC;
  --cuerpo: 18px;
  --grosor: 300;
  --serif: 'Cormorant', Georgia, serif;
  --sans: 'Epilogue', sans-serif;
}

/* ─── La banda del retrato ─── */
.cr-portada { background: var(--dark); }
.cr-banda {
  position: relative;
  height: 56vh;
  min-height: 340px;
  overflow: hidden;
  background: var(--dark-2);
}
.cr-banda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  /* A blanco y negro, para que el color lo ponga el diseño */
  filter: grayscale(1) contrast(1.08) brightness(0.95);
}
/* El carmín por encima */
.cr-banda::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  mix-blend-mode: multiply;
  opacity: 0.62;
  pointer-events: none;
}
/* Y el vino por debajo, para que las sombras no se vayan a gris */
.cr-banda::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
              var(--dark) 0%,
              color-mix(in srgb, var(--dark) 55%, transparent) 18%,
              transparent 45%);
  pointer-events: none;
}
/* Si no hay foto, la banda no se queda como un hueco vacío */
.cr-banda:empty, .cr-banda[hidden] { display: none; }

/* El texto, debajo de la banda */
.cr-portada .hero {
  min-height: 0;
  padding: 3.5rem 2rem 5rem;
  background: none;
}
.cr-portada .hero::before { display: none; }

/* ─── Nav ─── */
nav {
  background: color-mix(in srgb, var(--dark) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
}
.nav-logo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold);
}
.nav-links a { font-size: 0.74rem; letter-spacing: 0.14em; }
.nav-cta {
  border: none !important;
  background: var(--gold);
  color: var(--dark) !important;
  border-radius: 999px;
  padding: 0.5rem 1.3rem;
}
.nav-cta:hover, .nav-cta.active { background: var(--gold-light) !important; }

/* ─── Tipografía: la cabecera de revista ─── */
.hero-ornament {
  letter-spacing: 0.26em;
  font-size: 0.68rem;
  color: var(--gold);
}
.hero-ornament::before, .hero-ornament::after {
  width: 2rem; background: var(--gold); opacity: 0.6;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.6rem, 11vw, 8rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-tagline {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

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

/* ─── Botones: en píldora, como los de una revista ─── */
.btn-primary, .rsv-btn, .av-btn {
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 999px;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.btn-primary:hover, .rsv-btn:hover { background: var(--gold-light); }
.btn-outline {
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  letter-spacing: 0.1em;
}
.btn-outline:hover { background: color-mix(in srgb, var(--gold) 15%, transparent); }

/* ─── Tarjetas ─── */
.cita-card, .deseo-card, .faq-item,
.cita-aviso, .contacto-aviso, .contacto-donde {
  background: var(--dark-2);
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 22px color-mix(in srgb, #000 35%, transparent);
}
.citas-grid { background: transparent; gap: 1.4rem; }
.cita-icon {
  border: none;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
  border-radius: 50%;
}
.deseo-badge { background: var(--gold); color: var(--dark); border-radius: 999px; }

/* ─── Galería: el mismo teñido, más suave ─── */
.gallery-item, .video-thumb-item, .deseo-imagen img { border-radius: 10px; }
.gallery-overlay { background: transparent; }
.gallery-item:hover .gallery-overlay {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
}

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

footer { border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.footer-logo { font-family: var(--serif); font-style: italic; color: var(--gold); }

@media (max-width: 700px) {
  .cr-banda { height: 42vh; min-height: 260px; }
}

/* ─── «Quién soy»: el retrato teñido, en óvalo ───
   Mismo teñido que la portada: la foto va en blanco y negro y
   el carmín se echa encima, así cualquier foto pega. */
.cr-qs-caja {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr;
  gap: 3.5rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem 5rem;
}
.cr-qs-foto {
  position: relative;
  border-radius: 50% / 42%;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--dark-2);
}
.cr-qs-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.08) brightness(0.95);
}
.cr-qs-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.cr-qs .page-hero { padding-bottom: 1rem; }

@media (max-width: 850px) {
  .cr-qs-caja { grid-template-columns: 1fr; gap: 2rem; }
  .cr-qs-foto { max-width: 22rem; margin: 0 auto; }
}

/* ─── Citas: la banda, más baja ─── */
.cr-banda-corta { height: 34vh; min-height: 210px; }

/* ─── La cabecera de todas las páginas de dentro ───
   La misma banda teñida de la portada, más baja. Una sola clase
   para las siete: si se retoca, se retoca en un sitio. */
.cr-cab .page-hero { padding-top: 2.5rem; }

/* ─── Book: las fotos en rejilla redonda, sin teñir ───
   Aquí NO se tiñe: el Book es para verla a ella, no para lucir
   el diseño. El carmín se queda en los marcos. */
.book-tabs { border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.tab-btn { color: var(--text-muted); letter-spacing: 0.08em; }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.gallery-item, .video-thumb-item { border-radius: 12px; overflow: hidden; }

/* ─── Preguntas: cada una en su tarjeta redondeada ─── */
.faq-item { margin-bottom: 0.9rem; }
.faq-question { font-family: var(--serif); font-size: 1.15rem; }
.faq-arrow { color: var(--gold); }

/* ─── Mis deseos ─── */
.deseo-card { overflow: hidden; }
.deseos-intro { font-family: var(--sans); font-style: italic; }

/* ─── Contactar: el retrato del lado, teñido como el de dentro ─── */
.contacto-grid > div:last-child { position: relative; border-radius: 14px; overflow: hidden; }
.contacto-grid > div:last-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}
#ct-imagen { filter: grayscale(1) contrast(1.06); }
.contact-channel { border-radius: 999px; }

/* ─── Reservar: la tarjeta, redonda como todo lo demás ─── */
.rsv-tarjeta { border-radius: 16px; }
.rsv-num { border-radius: 50%; }
.rsv-dias button, .rsv-franjas button, .rsv-duraciones button { border-radius: 999px; }

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

/* ─── Sin imagen ───
   La banda desaparece y el título sube a ocupar su sitio. */
.cr-cab.sin-imagen .page-hero { padding-top: 7rem; }