/* ============================================================
   RAFFEL PAGÈS ESSENCE · Tokens base unificados
   Fuente única de los tokens de color de marca. Cargada DESPUÉS
   del <style> inline de cada página para unificar los dos
   "dialectos" que existían (valores casi idénticos repartidos
   entre páginas). Cambios imperceptibles, solo coherencia.

   NO se redefinen --ink / --ink-soft / --text / --cream a propósito:
   oribe.html usa un negro más oscuro intencional y se respeta.
   --muted se unifica en rpe-a11y.css (#6B655C, contraste AA).
   ============================================================ */
:root {
  --gold:       #B8924A;   /* oro de marca (decorativo, bordes, acentos) */
  --gold-soft:  #D4B578;   /* oro claro (sobre fondos oscuros) */
  --gold-deep:  #8E6F35;   /* oro profundo (titulares, divisores) */
  --gold-text:  #7C5E2A;   /* oro de TEXTO pequeño — AA (≥4.5:1) sobre crema/papel */

  --cream-deep: #EFE8DB;
  --paper:      #FBF8F2;

  --line:       rgba(24, 22, 20, 0.10);
  --line-gold:  rgba(184, 146, 74, 0.35);
}

/* ============================================================
   Logos: no deformar
   Los <img> llevan width/height reales para que el navegador reserve
   el hueco y la página no salte al cargar (CLS). Pero el atributo
   width actúa como anchura CSS: si la hoja de la página fija SOLO la
   altura (p. ej. `.foot__brand img { height: 38px }`), el logo se
   estira a su anchura intrínseca. `width: auto` lo devuelve a su
   proporción.
   Los selectores se repiten EXACTOS para empatar en especificidad;
   esta hoja carga después del <style> inline, así que gana.
   ============================================================ */
.foot__brand img,
.nav-wrap.scrolled .brand img,
footer .brand-footer img,
.brand-footer img,
.logo img {
  width: auto;
}

/* ============================================================
   Footer completo (el de la portada) en TODAS las páginas
   Copia fiel del <style> inline de index.html (.footer / .footer-grid /
   .socials / .footer-bottom + sus dos breakpoints). Se centraliza aquí
   para no repetirlo en 35 hojas inline.
   En index.html estas reglas son idénticas a las suyas, así que no la
   cambian; el resto de páginas las reciben por primera vez.
   `.brand` va SIEMPRE acotado a `.footer` para no tocar la marca del nav.
   ============================================================ */
.footer {
  background: var(--ink, #181614);
  color: rgba(247,243,236,0.7);
  padding: 5rem 0 2rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(247,243,236,0.1);
}
.footer .brand {
  display: inline-flex;
  align-items: center;
  color: var(--gold-soft);
  margin-bottom: 1.25rem;
  text-decoration: none;
}
.footer .brand img { height: 110px; width: auto; }
.footer p {
  max-width: 320px;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  color: rgba(247,243,236,0.55);
}
.footer h5 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-weight: 400;
  font-size: 1rem;
  color: var(--cream, #F7F3EC);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer ul a { color: rgba(247,243,236,0.7); font-size: 0.88rem; text-decoration: none; }
.footer ul a:hover { color: var(--gold-soft); }

.socials { display: flex; gap: 0.85rem; margin-top: 1rem; }
.socials a {
  width: 40px; height: 40px;
  border: 1px solid rgba(247,243,236,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(247,243,236,0.7);
  transition: all 0.3s var(--ease, ease);
}
.socials a:hover { border-color: var(--gold); color: var(--gold-soft); }
.socials svg { width: 16px; height: 16px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.78rem;
  color: rgba(247,243,236,0.4);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom ul { display: flex; gap: 1.5rem; list-style: none; flex-direction: row; }
.footer-bottom a { color: rgba(247,243,236,0.55); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-soft); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ============================================================
   Contraste AA del oro de TEXTO pequeño sobre fondos claros
   (cierra lo que quedó del Prompt 6).
   Especificidad baja (0,1,0): las secciones oscuras que ya
   sobrescriben estos eyelines a --gold-soft mantienen su color.
   Los eyelines sobre foto/oscuro usan clases propias
   (.hero-eyeline, .pack-card__eyeline, .pack-hero__eyeline,
   .phone-card-eyeline) y NO se tocan.
   ============================================================ */
.eyeline,
.whoweare-card__eyeline,
.brands-eyeline,
.careers-modal__eyeline {
  color: var(--gold-text);
}

/* Página de tema oscuro (oribe.html): los eyelines van sobre negro */
.theme-dark .eyeline {
  color: var(--gold-soft);
}

/* ============================================================
   Botón de reserva flotante (móvil) — lo inyecta rpe-motion.js
   Discreto y premium; en escritorio ya está el CTA del nav.
   ============================================================ */
.rpe-fab {
  position: fixed;
  right: 0.9rem;
  bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  background: rgba(24, 22, 20, 0.72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--cream, #F7F3EC);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(184, 146, 74, 0.7);
  border-radius: 999px;
  box-shadow: 0 8px 22px -12px rgba(24, 22, 20, 0.5);
  transition: transform 0.35s var(--ease, ease), opacity 0.35s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}
.rpe-fab svg { width: 15px; height: 15px; flex: none; stroke: var(--gold-soft, #D4B578); }
.rpe-fab:hover { background: rgba(24, 22, 20, 0.92); }
.rpe-fab:active { transform: translateY(1px) scale(0.98); }
.rpe-fab:focus-visible { outline: 3px solid var(--gold-soft, #D4B578); outline-offset: 3px; }
/* Oculto al hacer scroll para no tapar el texto (lo gestiona rpe-motion.js) */
.rpe-fab.rpe-fab--hidden { transform: translateY(180%); opacity: 0; pointer-events: none; }
/* Con el menú móvil abierto, el flotante sobra (el menú ya tiene su "Reservar")
   y se colaba por encima: ocultarlo. */
body.menu-open .rpe-fab { opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  .rpe-fab { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .rpe-fab.rpe-fab--hidden { transform: none; opacity: 0; }
}
@media print {
  .rpe-fab { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rpe-fab { transition: none; }
  .rpe-fab:active { transform: none; }
}

/* ============================================================
   Fixes responsive (móvil) — evitar overflow horizontal.
   Cargado después del inline de cada página → gana sin !important.
   ============================================================ */
/* Packs: .pack-hero es flex, y su .container era un flex-item con
   min-width:auto que no encogía por debajo del ancho de su contenido
   (breadcrumbs con letter-spacing). Permitir que encoja. (Robustez.) */
.pack-hero > .container { min-width: 0; }

/* Footer: los enlaces iban en una sola fila (flex nowrap) y se salían ~13px
   en móviles estrechos (≤360px). Permitir que envuelvan. En escritorio caben
   en una línea, así que no cambia nada. Afecta a todas las páginas. */
.footer-links { flex-wrap: wrap; row-gap: 0.85rem; }

/* Breadcrumbs: con letter-spacing y nombres largos envuelven a 2 líneas y
   quedaban muy juntas en móvil. Más interlineado para que respiren. */
.breadcrumbs { line-height: 1.7; }

/* Footer legal: que cada enlace no se parta a media palabra al envolver. */
.legal-foot a { white-space: nowrap; display: inline-block; }

/* Siglas/marcas (p.ej. QIQI): dentro de un título en cursiva Playfair salían
   ilegibles (swash). Con .brand-mark van rectas y con leve espaciado → se leen
   como la marca, manteniendo el color. Sirve en cualquier página. */
.brand-mark { font-style: normal; letter-spacing: 0.05em; }

/* ============================================================
   Panel de reserva — al pulsar "Reservar cita" da a elegir: LLAMAR al
   salón (destacado) u online. Lo inyecta e intercepta rpe-motion.js.
   ============================================================ */
.rpe-booking[hidden] { display: none; }
.rpe-booking {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.rpe-booking__overlay {
  position: absolute; inset: 0; background: rgba(20, 18, 14, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.35s ease;
}
.rpe-booking.is-open .rpe-booking__overlay { opacity: 1; }
.rpe-booking__panel {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: var(--paper, #FBF8F2); color: var(--ink, #181614);
  border: 1px solid var(--line-gold, rgba(184,146,74,0.35)); border-radius: 4px;
  padding: 2.4rem 1.75rem 1.85rem;
  box-shadow: 0 30px 80px -30px rgba(24, 22, 20, 0.6);
  transform: translateY(16px) scale(0.985); opacity: 0;
  transition: transform 0.4s var(--ease, ease), opacity 0.35s ease;
  text-align: center;
}
.rpe-booking.is-open .rpe-booking__panel { transform: none; opacity: 1; }
.rpe-booking__close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 40px; height: 40px;
  border: none; background: none; color: var(--ink-soft, #2b2622);
  font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.rpe-booking__close:hover { color: var(--gold-deep, #8E6F35); }
.rpe-booking__eyeline {
  display: block; font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-deep, #8E6F35); margin-bottom: 0.6rem;
}
.rpe-booking__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-weight: 400; font-size: 1.55rem; line-height: 1.2; color: var(--ink, #181614);
  margin: 0 0 0.4rem;
}
.rpe-booking__sub {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic; font-size: 1rem; color: var(--ink-soft, #2b2622);
  margin: 0 0 1.5rem; line-height: 1.4;
}
.rpe-booking__call {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  width: 100%; padding: 0.9rem 1.15rem; margin-bottom: 0.7rem;
  background: var(--ink, #181614); color: var(--cream, #F7F3EC);
  border: 1px solid var(--ink, #181614); border-radius: 3px; text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}
.rpe-booking__call:hover { background: var(--gold-deep, #8E6F35); border-color: var(--gold-deep, #8E6F35); }
.rpe-booking__call:active { transform: scale(0.99); }
.rpe-booking__call:focus-visible { outline: 3px solid var(--gold-soft, #D4B578); outline-offset: 2px; }
.rpe-booking__call-salon {
  display: flex; align-items: center; gap: 0.55rem; text-align: left;
  font-family: var(--font-sans, 'Inter', sans-serif); font-size: 0.64rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: rgba(247, 243, 236, 0.78);
}
.rpe-booking__call svg { width: 16px; height: 16px; flex: none; stroke: var(--gold-soft, #D4B578); }
.rpe-booking__call-num {
  font-family: var(--font-display, 'Playfair Display', serif); font-size: 1.15rem;
  color: var(--gold-soft, #D4B578); white-space: nowrap;
}
.rpe-booking__or {
  display: flex; align-items: center; gap: 0.75rem; margin: 1.15rem 0 0.95rem;
  color: var(--muted, #6B655C); font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.rpe-booking__or::before, .rpe-booking__or::after { content: ''; height: 1px; flex: 1; background: var(--line, rgba(24,22,20,0.12)); }
.rpe-booking__online {
  display: inline-block; font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink, #181614); border-bottom: 1px solid var(--line-gold, rgba(184,146,74,0.5));
  padding-bottom: 2px; text-decoration: none; transition: color 0.3s ease;
}
.rpe-booking__online:hover { color: var(--gold-deep, #8E6F35); }
body.rpe-booking-open { overflow: hidden; }
@media (max-width: 560px) {
  .rpe-booking { align-items: flex-end; padding: 0; }
  .rpe-booking__panel {
    width: 100%; border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    padding-bottom: calc(1.85rem + env(safe-area-inset-bottom, 0px));
  }
  .rpe-booking.is-open .rpe-booking__panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rpe-booking__overlay, .rpe-booking__panel { transition: opacity 0.2s ease; transform: none; }
}