/* =============================================================
   1. Tokens
   ============================================================= */

:root {
  /* Diseño claro: fondo blanco, texto casi negro. Los NOMBRES de variable se
     mantienen igual que en el proyecto base (--bg/--cream/--accent...) por
     compatibilidad con staff.css, gestionar.js, etc. — pero el mapeo ahora es
     el inverso de un tema oscuro: --bg es blanco, --cream es el texto oscuro. */
  --bg: #ffffff;
  --bg-soft: #f6f4f0;       /* banda alterna, cálido muy claro, para dar ritmo entre secciones */
  --card: #ffffff;
  --card-2: #f6f4f0;
  --cream: #16150f;         /* texto principal, casi negro */
  --cream-mute: rgba(22, 21, 15, 0.64);
  --cream-dim: rgba(22, 21, 15, 0.42);
  --accent: #16150f;        /* negro — acento monocromo */
  --accent-light: #000000;
  --accent-dark: #57554c;
  --line: rgba(22, 21, 15, 0.13);
  --line-strong: rgba(22, 21, 15, 0.26);

  --serif: "Cormorant Garamond", "Georgia", serif;
  --display: "Cormorant Garamond", "Georgia", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 80px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --content-max: 1280px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* Red de seguridad: varios componentes fijan su propio display (flex/grid) en
   la misma clase que luego se oculta con el atributo [hidden] (p.ej.
   .booking-form, .field) — sin esto, esa regla de mayor especificidad puede
   pisar el [hidden] nativo del navegador y el elemento se queda visible. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
address { font-style: normal; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.02; }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: 0.7rem 1.1rem; background: var(--accent); color: var(--bg);
  border-radius: 4px; font-weight: 600;
  transition: top 0.3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.03em;
  color: var(--cream-mute);
  margin-bottom: 0.9rem;
}

.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  letter-spacing: -0.01em;
  line-height: 1.04;
}
.section-title em {
  font-style: italic;
  font-weight: 500;
}

.section-head {
  max-width: var(--content-max);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

section { position: relative; }
.about, .services, .testimonials, .location {
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
.about, .services, .testimonials {
  padding-inline: var(--gutter);
}
.bg-soft { background: var(--bg-soft); }

/* =============================================================
   4. Typography helpers
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
  /* initReveals (main.js) calcula esta variable por elemento según su
     posición dentro del grupo de hermanos — así varias tarjetas que entran
     juntas en el viewport aparecen en cascada, no todas de golpe. */
  /* !important a propósito: algunos elementos con [data-reveal] (p.ej.
     .service-card) tienen su propio "transition:" abreviado para sus efectos
     de hover, y al fijar solo las propiedades que le interesan (border-color,
     transform...) reinicia el delay a 0s para esas mismas propiedades — sin
     esto, esas tarjetas pierden el escalonado en cuanto se les añade
     cualquier transición propia. */
  transition-delay: var(--reveal-delay, 0ms) !important;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-split] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition-delay: 0ms !important; }
}

.split-word {
  display: inline-block; opacity: 0; transform: translateY(14px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-word.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .split-word { transition: none; }
}

/* =============================================================
   5. Components
   ============================================================= */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: 2px;
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft),
              background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn-small { padding: 0.7rem 1.4rem; font-size: 0.78rem; }

.btn-primary {
  background: var(--accent); color: var(--bg);
  box-shadow: 0 10px 24px -14px rgba(22, 21, 15, 0.55);
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(22, 21, 15, 0.55);
}
.btn-primary:active { transform: translateY(0); transition-duration: 0.12s; }

.btn-ghost {
  border: 1px solid var(--line-strong); color: var(--cream);
}
.btn-ghost:hover { border-color: var(--accent); background: var(--card-2); transform: translateY(-2px); }

/* Brillo interior que sigue al cursor (initSpotlight en main.js fija --x/--y
   en cada movimiento de ratón) — un detalle premium discreto, muy distinto
   del botón "magnético" que se arrastraba entero hacia el cursor. */
.btn[data-spotlight] { position: relative; overflow: hidden; isolation: isolate; }
.btn[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(140px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.16), transparent 70%);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.btn-ghost[data-spotlight]::before {
  background: radial-gradient(140px circle at var(--x, 50%) var(--y, 50%), rgba(22, 21, 15, 0.05), transparent 70%);
}
.btn[data-spotlight]:hover::before { opacity: 1; }

/* --- Placeholders --- */
.img-placeholder {
  position: relative;
  width: 100%; height: 100%;
  min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem;
  background:
    repeating-linear-gradient(135deg, rgba(22,21,15,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #f4f2ee 0%, #e9e6de 100%);
  border: 1px dashed var(--line-strong);
  color: var(--cream-dim);
  text-align: center;
}
.img-placeholder-icon {
  font-size: 1.6rem; color: var(--cream-dim);
  font-family: var(--serif);
}
.img-placeholder-text {
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding-inline: 1rem; max-width: 22ch;
}

/* =============================================================
   6. Sections
   ============================================================= */

/* --- Scroll progress (línea fina arriba del todo, sutil) --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; background: var(--accent);
  transform-origin: 0 0; transform: scaleX(0); transition: transform 0.08s linear;
}

/* --- Nav --- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.nav.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(22, 21, 15, 0.4);
}
.nav-inner {
  max-width: var(--content-max); margin-inline: auto; height: 100%;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-logo {
  font-family: var(--sans); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.nav-logo-mark { height: 1.9em; width: auto; display: block; }
.nav-logo span { color: var(--cream-mute); margin-inline: 0.2em; font-weight: 500; }
.nav-links { display: none; gap: 2.2rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; font-size: 0.83rem; letter-spacing: 0.03em;
  color: var(--cream-mute); padding-block: 0.3rem;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  display: grid; place-items: center; gap: 5px; width: 40px; height: 40px;
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger span { width: 22px; height: 1.5px; background: var(--cream); transition: transform 0.35s var(--ease-out), opacity 0.35s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: var(--bg); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s var(--ease-soft);
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0); }
.nav-mobile a { font-family: var(--display); font-style: italic; font-size: 2rem; letter-spacing: 0; }

/* --- Hero (foto grande a toda anchura, cambia sola poco a poco) ---
   Es la única pieza que se pidió expresamente que recordara a la base de
   Xhris: una foto grande arriba del todo, en bucle lento entre varias
   imágenes (ver [data-hero-carousel] + initHeroCarousel en main.js). El
   resto (tipografía, texto, colores del sitio) sigue siendo el rediseño
   nuevo — el texto va en blanco aquí porque se apoya sobre foto + degradado,
   no sobre el fondo blanco del resto de la web. */
.hero {
  position: relative;
  margin-top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: flex-end;
  overflow: clip;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 80%; }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.38) 48%, rgba(10,10,10,0.12) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.35) 0%, transparent 26%);
}

.hero-content {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) clamp(5rem, 16vh, 10rem);
  max-width: 780px;
  color: #f5f4f1;
}
.hero-content .eyebrow { color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6); }
.hero-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-wrap: balance;
  color: #fff;
}
.hero-title em { font-style: italic; font-weight: 500; }
.hero-sub {
  margin-top: 1.4rem;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: rgba(245, 244, 241, 0.82);
  max-width: 46ch;
}
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero .btn-ghost { border-color: rgba(245, 244, 241, 0.4); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* --- Value marquee (banda de valores en bucle continuo, entre hero y manifiesto) --- */
.value-marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 0.85rem;
}
.value-marquee-track {
  display: flex; width: max-content; gap: 2.25rem;
  /* El contenido se repite 4 veces seguidas en el HTML (grupos idénticos) y
     la animación desplaza exactamente 1/4 del ancho total (-25%) — al llegar
     ahí, lo que se ve es pixel a pixel igual que al empezar (0%), así que el
     salto de vuelta a 0% para reiniciar el "infinite" no se nota: parece un
     desfile continuo, nunca un tirón ni una pausa. Iba con solo 2 repeticiones
     antes, y con un texto tan corto se notaba enseguida la vuelta al principio
     — con 4 el punto de "costura" queda mucho más disimulado y de seguido. */
  animation: marqueeScroll 26s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--cream-mute);
  white-space: nowrap;
}
.value-marquee-track span:not([aria-hidden]) { padding-inline: 0.25rem; }
.value-marquee-sep { display: inline-flex; align-items: center; color: var(--line-strong); }
.value-marquee-sep svg { width: 15px; height: 15px; }
@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-25%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .value-marquee-track { animation: none; }
}

/* --- Manifesto ---
   Antes tenía fondo gris sólido a toda anchura, pegado directamente al hero
   de arriba — se pidió expresamente que no quedara tan "pegado" ni tan
   sólido. Ahora hay separación real desde el hero (margin-top) y, en vez de
   un rectángulo de color plano, un resplandor difuminado (blur) centrado
   detrás del texto, que se desvanece por los bordes en vez de cortar en
   seco. */
.manifesto {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(4rem, 10vw, 6.5rem) var(--gutter);
  max-width: 1000px; margin-inline: auto;
  text-align: center;
  isolation: isolate;
}
.manifesto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 6%;
  background: var(--bg-soft);
  filter: blur(48px);
  border-radius: 50%;
}
.manifesto-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.4;
  color: var(--cream-mute);
}
.manifesto-text em { color: var(--cream); font-weight: 600; }

/* --- Sobre mí (perfil estático, sin carrusel: un único barbero) --- */
.about-grid {
  max-width: var(--content-max); margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 860px) { .about-grid { grid-template-columns: 0.85fr 1.15fr; } }
.about-media {
  position: relative;
  aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line);
  max-width: 420px;
}
/* Varias fotos (Javi + trabajos de clientes) que se deslizan con el dedo en
   móvil — scroll nativo con snap, sin necesidad de arrastrar nada por JS
   (initAboutSwipe en main.js solo sincroniza los puntos con la foto activa).
   En escritorio también se puede arrastrar con el ratón o hacer scroll. */
.about-slides {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.about-slides::-webkit-scrollbar { display: none; }
.about-slide {
  flex: 0 0 100%; scroll-snap-align: start;
}
.about-media .img-placeholder { border: none; border-radius: 0; }
.about-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-dots {
  position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; z-index: 2;
  display: flex; gap: 0.4rem;
  padding: 0.4rem 0.6rem; border-radius: 20px;
  background: rgba(22, 21, 15, 0.35);
  pointer-events: none; /* solo indicador — el clic tiene que pasar a .about-slides debajo */
}
.about-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.about-dot.is-active { background: #fff; transform: scale(1.3); }

/* Pista "Desliza" — solo en pantallas táctiles (sin ratón), una vez por
   visita y unos segundos, igual que la pista de swipe que ya existía en la
   base de Xhris para las fotos del equipo. */
.about-swipe-hint {
  display: none; position: absolute; left: 50%; top: 50%; z-index: 3;
  translate: -50% -50%;
  align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem; border-radius: 20px;
  background: rgba(22, 21, 15, 0.6); color: #fff;
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.about-swipe-hint svg { width: 16px; height: 16px; flex-shrink: 0; }
.about-swipe-hint.is-visible { opacity: 1; animation: aboutSwipeNudge 1.4s ease-in-out 2; }
.about-swipe-hint.is-done { opacity: 0; }
@keyframes aboutSwipeNudge {
  0%, 100% { translate: -50% -50%; }
  50% { translate: calc(-50% + 10px) -50%; }
}
@media (hover: none) {
  .about-swipe-hint { display: flex; }
}

/* Pistas de clic — solo en escritorio con ratón real: una flecha a cada lado
   que aparece al pasar por encima, para que quede claro que se puede hacer
   clic en la mitad izquierda (foto anterior) o derecha (siguiente foto) —
   ver initAboutClickAdvance en main.js, que decide según en qué mitad del
   ancho se hizo clic. */
@media (hover: hover) and (pointer: fine) {
  .about-slides { cursor: pointer; }
  .about-click-hint {
    position: absolute; top: 50%; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(22, 21, 15, 0.55); color: #fff;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    pointer-events: none; /* solo indicador — el clic tiene que pasar a .about-slides debajo */
  }
  .about-click-hint svg { width: 18px; height: 18px; }
  .about-click-hint-prev { left: 1rem; translate: -6px -50%; }
  .about-click-hint-next { right: 1rem; translate: 6px -50%; }
  .about-media:hover .about-click-hint-prev { opacity: 1; translate: 0 -50%; }
  .about-media:hover .about-click-hint-next { opacity: 1; translate: 0 -50%; }
}
.about-text { margin-top: 1.1rem; color: var(--cream-mute); max-width: 48ch; font-size: 1.05rem; line-height: 1.7; }
.about-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.about-ig {
  font-size: 0.85rem; letter-spacing: 0.02em;
  color: var(--cream); border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease-out);
}
.about-ig:hover { border-color: var(--accent); }

/* --- Cómo funciona (proceso en 3 pasos) --- */
.process { padding-block: clamp(4.5rem, 10vw, 8rem); padding-inline: var(--gutter); }
.process-grid {
  max-width: var(--content-max); margin-inline: auto;
  display: grid; gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }
.process-step {
  padding-top: clamp(1.6rem, 3vw, 2rem);
  border-top: 1px solid var(--line-strong);
}
.process-num {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; color: var(--cream-dim); margin-bottom: 1rem;
}
.process-step h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -0.005em;
  margin-bottom: 0.7rem;
}
.process-step p { color: var(--cream-mute); line-height: 1.65; max-width: 34ch; }

/* --- Services (tarjetas en cuadrícula) --- */
.services-grid {
  max-width: var(--content-max); margin-inline: auto;
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card);
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}
.service-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(22, 21, 15, 0.4);
}
.service-card.is-featured {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
}
.service-card.is-featured .service-num,
.service-card.is-featured .service-price { color: var(--bg); }
.service-card.is-featured .service-name em { color: rgba(255,255,255,0.7); }
.service-num {
  font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--cream-dim);
}
.service-name {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -0.005em;
}
.service-name em { font-style: italic; font-weight: 400; color: var(--cream-mute); font-size: 0.7em; }
.service-price {
  margin-top: auto;
  font-family: var(--sans); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream-mute);
}

/* --- Booking (protagonist block) --- */
.booking {
  padding-block: clamp(4.5rem, 10vw, 7rem);
  padding-inline: var(--gutter);
}
.booking-inner {
  max-width: var(--content-max); margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 960px) {
  .booking-inner { grid-template-columns: 1fr 1.05fr; }
  .booking-copy { margin-top: 2rem; position: sticky; top: calc(var(--nav-h) + 2rem); }
}

.booking-sub { margin-top: 1.1rem; color: var(--cream-mute); max-width: 40ch; font-size: 1.02rem; }
.booking-perks { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.booking-perks li {
  padding-left: 1.6rem; position: relative; font-size: 0.95rem; color: var(--cream-mute);
}
.booking-perks li::before {
  content: "—"; position: absolute; left: 0; color: var(--cream-dim);
}

.booking-form-wrap { position: relative; }
.booking-form {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 8px; padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.3rem;
}
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label {
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cream-dim);
}
.field input, .field select {
  width: 100%; padding: 0.9rem 0.1rem;
  background: transparent; border: none; border-bottom: 1.5px solid var(--line-strong);
  border-radius: 0; color: var(--cream); font-family: var(--sans); font-size: 1rem;
  letter-spacing: normal; word-spacing: normal; line-height: 1.4;
  transition: border-color 0.3s var(--ease-out);
}
.field select { appearance: none; background: transparent; }
.field input:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field select.is-preset { animation: presetFlash 1.5s var(--ease-out); }
@keyframes presetFlash {
  0% { border-color: var(--accent); }
  100% { border-color: var(--line-strong); }
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* --- Booking calendar + time slots --- */
.booking-calendar {
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 1rem;
}
.calendar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.9rem;
}
.calendar-month {
  font-family: var(--serif); font-style: italic; font-size: 1.1rem; letter-spacing: 0.01em;
  text-transform: capitalize;
}
.calendar-nav {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: 1.1rem; color: var(--cream-mute);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.calendar-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--cream); }
.calendar-nav:disabled { opacity: 0.3; cursor: default; }

.calendar-weekdays, .calendar-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem;
}
.calendar-weekdays {
  margin-bottom: 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-dim);
  text-align: center;
}
.calendar-day {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 2px; font-size: 0.88rem; color: var(--cream);
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.calendar-day:not(.is-disabled):not(.is-empty):hover { background: var(--line); }
.calendar-day.is-empty { visibility: hidden; }
.calendar-day.is-disabled { color: var(--cream-dim); opacity: 0.35; cursor: default; }
.calendar-day.is-selected { background: var(--accent); color: var(--bg); font-weight: 600; }
.calendar-day.is-blocked { position: relative; color: var(--cream-dim); opacity: 0.35; }
.calendar-day.is-blocked::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 35px;
  height: 1px; background: currentColor; translate: -50% -50%;
}
.calendar-day.is-blocked.is-selected { color: var(--bg); opacity: 1; }
.calendar-day.is-blocked.is-selected::after { background: var(--bg); }

.booking-slots { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.slot-btn {
  padding: 0.6rem 1rem; border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: 0.85rem; color: var(--cream);
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.slot-btn:hover:not(.is-disabled) { border-color: var(--accent); }
.slot-btn.is-selected { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.slot-btn.is-disabled { opacity: 0.3; cursor: default; text-decoration: line-through; }
.slot-btn.is-taken { opacity: 0.45; cursor: default; text-decoration: line-through; }
.slots-empty { font-size: 0.85rem; color: var(--cream-dim); }

.booking-datetime-error { color: #b02a2a; font-size: 0.85rem; margin-top: -0.4rem; }
.booking-block-notice {
  margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 4px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--cream-mute); font-size: 0.82rem; line-height: 1.5;
}

.consent-field {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.84rem; line-height: 1.5; color: var(--cream-mute); cursor: pointer;
}
.consent-field input { width: 17px; height: 17px; margin-top: 0.2rem; accent-color: var(--accent); flex-shrink: 0; }
.consent-field a { color: var(--cream); border-bottom: 1px solid var(--line-strong); transition: border-color 0.25s var(--ease-out); }
.consent-field a:hover { border-color: var(--accent); }

.booking-submit { position: relative; margin-top: 0.4rem; width: 100%; }
.booking-submit .cta-form-spinner, .booking-submit .cta-form-check {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none;
}
.booking-form.is-sending .cta-form-label { opacity: 0; }
.booking-form.is-sending .cta-form-spinner { opacity: 1; }
.booking-form.is-sent { opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.5s, transform 0.5s; }
.cta-form-spinner::after {
  content: ""; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--bg); border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta-form-check path { stroke: var(--bg); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s var(--ease-out); }

.booking-success {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; gap: 0.6rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease-out) 0.2s;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 2rem;
  box-shadow: 0 30px 70px -35px rgba(22, 21, 15, 0.35);
}
.booking-success.is-visible { opacity: 1; pointer-events: auto; }

/* Una vez terminado el cruce de opacidad, el aviso pasa a marcar la altura
   real de la tarjeta (en vez de quedar centrado dentro del hueco, mucho más
   alto, que ocupaba el formulario completo con el calendario). */
.booking-form-wrap.is-success { overflow: hidden; }
.booking-form-wrap.is-success .booking-form { position: absolute; inset: 0; }
.booking-form-wrap.is-success .booking-success { position: static; }
.booking-success h3 { font-family: var(--display); font-style: italic; font-size: 1.9rem; }
.booking-success p { color: var(--cream-mute); }
.booking-success-reset {
  margin-top: 0.6rem; padding: 0.6rem 1.2rem;
  border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cream-mute);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.booking-success-reset:hover { border-color: var(--accent); color: var(--cream); }

/* --- Página de opiniones (opinion.html, enlace único por email) --- */
.review-page {
  max-width: 560px; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.review-sub { margin-top: 0.8rem; color: var(--cream-mute); }
.review-form-wrap { position: relative; margin-top: 2.2rem; }

/* --- Página de gestión de cita (gestionar.html, enlace del email) --- */

.manage-status-icon {
  width: 46px; height: 46px; margin-bottom: 1.1rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--line-strong); color: var(--cream);
}
.manage-status-icon svg { width: 22px; height: 22px; }
.manage-status-btn { margin-top: 1.8rem; }
.manage-loading { margin-top: 1.4rem; display: flex; align-items: center; gap: 0.9rem; }
.manage-loading .review-sub { margin-top: 0; }
.manage-spinner {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

/* Sección principal (cita ya cargada) — a toda anchura, calcada del bloque
   "protagonista" de reserva de la portada (.booking). */
.manage-hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem); }

/* gestionar.js añade/quita esta clase solo mientras se muestra la cita ya
   cargada, para dar una banda suave de fondo a toda la sección. */
body.manage-hero-active {
  background: var(--bg-soft);
}
.manage-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 960px) {
  .manage-hero-inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .manage-hero-panel { margin-top: clamp(3rem, 6vw, 5rem); }
}
.manage-hero-sub { margin-top: 1.1rem; color: var(--cream-mute); max-width: 46ch; font-size: 1.02rem; }

.manage-card {
  margin-top: 2.2rem; background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 8px; padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: 0 30px 70px -35px rgba(22, 21, 15, 0.3);
}
.manage-card-top { margin-bottom: 1.3rem; }
.manage-card-badge { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-dim); }
.manage-card-badge strong { color: var(--cream); font-weight: 600; }
.manage-card-datetime {
  padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line);
}
.manage-card-date {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.6rem); text-transform: capitalize; color: var(--cream); line-height: 1.1;
}
.manage-card-time { display: block; margin-top: 0.35rem; color: var(--cream); font-weight: 600; font-size: 1.15rem; }
.manage-card-rows { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 560px) {
  .manage-card-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
  .manage-card-row:nth-child(3), .manage-card-row:nth-child(4) { grid-column: 1 / -1; }
}
.manage-card-row { display: flex; align-items: center; gap: 0.85rem; }
.manage-card-row svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--cream-dim); }
.manage-card-row > span { min-width: 0; flex: 1; }
.manage-card-row-label {
  display: block; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-dim);
}
.manage-card-row-value {
  display: block; margin-top: 0.15rem; font-weight: 600; color: var(--cream);
  overflow-wrap: break-word; word-break: break-word;
}
@media (max-width: 559px) {
  .manage-card-row-value { font-size: 0.75rem; }
}

.manage-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }
.manage-actions .btn { flex: 1; min-width: 10rem; }

.manage-edit-head { margin-bottom: 0.6rem; }
.manage-edit-title {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 1.7rem);
  letter-spacing: -0.005em; color: var(--cream); line-height: 1.2;
}

.manage-fade {
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
  opacity: 0;
  transform: translateY(12px);
}
.manage-fade.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .manage-fade { transition: opacity 0.15s linear; transform: none; }
}

.manage-confirm {
  margin-top: 1.8rem; padding: 1.4rem 1.6rem; border-radius: 6px;
  background: var(--card-2); border: 1px solid var(--line-strong);
}
.manage-confirm p { color: var(--cream); }
.manage-confirm .manage-actions { margin-top: 1.2rem; }

.manage-success {
  margin-top: 1.8rem; padding: clamp(2rem, 5vw, 2.6rem);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 30px 70px -35px rgba(22, 21, 15, 0.3);
}
.manage-success-check {
  width: 46px; height: 46px; margin-bottom: 0.5rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--bg);
}
.manage-success-check svg { width: 22px; height: 22px; }
.manage-success h3 { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.9rem; }
.manage-success p { color: var(--cream-mute); }

.field textarea {
  width: 100%; padding: 0.9rem 0.1rem; resize: vertical; min-height: 6.5rem;
  background: transparent; border: none; border-bottom: 1.5px solid var(--line-strong);
  border-radius: 0; color: var(--cream); font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  transition: border-color 0.25s var(--ease-out);
}
.field textarea:focus { border-color: var(--accent); outline: none; }

.star-rating { display: flex; gap: 0.5rem; }
.star-rating-btn {
  font-size: 2.1rem; line-height: 1; color: var(--line-strong);
  transition: color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.star-rating-btn.is-filled { color: var(--accent); }
.star-rating-btn:hover { transform: scale(1.15); }

/* --- Testimonials (varias tarjetas en bucle, izquierda → derecha) ---
   Se mueve por JavaScript cambiando el scroll nativo del track fotograma a
   fotograma (ver initTestimonials en main.js). */
.testimonials-empty {
  max-width: var(--content-max); margin-inline: auto;
  color: var(--cream-mute); font-size: 1.05rem;
}
.testimonials-marquee {
  position: relative; overflow: hidden;
  max-width: 1600px; margin-inline: auto;
}
.testimonials-marquee::before, .testimonials-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem);
  z-index: 2; pointer-events: none;
}
.testimonials-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), transparent); }
.testimonials-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-soft), transparent); }
.testimonials-track {
  display: flex; gap: 1.25rem; padding-block: 0.5rem;
  overflow-x: hidden; /* el scroll lo controla JS, no el visitante */
}

.testimonial-card {
  flex: 0 0 clamp(280px, 38vw, 420px);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 2rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.testimonial-stars { color: var(--cream); letter-spacing: 0.2em; font-size: 0.95rem; }
.testimonial-text { font-family: var(--serif); font-style: italic; font-size: 1.14rem; line-height: 1.5; color: var(--cream); }
.testimonial-author { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; }
.testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.testimonial-avatar .img-placeholder { min-height: 100%; border: none; }
.testimonial-avatar .img-placeholder-icon { font-size: 1rem; }
.testimonial-who { display: flex; flex-direction: column; font-size: 0.85rem; }
.testimonial-who strong { font-size: 0.95rem; }
.testimonial-who span { color: var(--cream-dim); }

/* --- Location / Contact --- */
.location-grid {
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 960px) { .location-grid { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.location-sublabel {
  margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; letter-spacing: 0.01em; color: var(--cream-mute);
}
.location-hours { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; }
.location-hours li {
  display: flex; justify-content: space-between; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
  font-size: 0.92rem; color: var(--cream-mute);
}
.location-hours li span:first-child { color: var(--cream); }
.location-map {
  position: relative; display: flex; align-items: center;
  min-height: 320px; border-radius: 6px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.location-service-card {
  padding: clamp(2rem, 5vw, 3rem);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.location-service-card .location-sublabel { margin-top: 0; padding-top: 0; border-top: none; }
.location-service-card h3 {
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
}
.location-service-card p { color: var(--cream-mute); max-width: 42ch; line-height: 1.6; }
.location-service-card .btn { align-self: flex-start; margin-top: 0.6rem; }

.contact-list { margin-top: 1.9rem; display: flex; flex-direction: column; max-width: 420px; }
.contact-row {
  display: flex; align-items: center; gap: 0.95rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease-out);
}
.contact-row:hover, .contact-row:focus-visible { border-color: var(--accent); }
.contact-icon {
  width: 19px; height: 19px; flex-shrink: 0; color: var(--cream-mute);
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.contact-row:hover .contact-icon { color: var(--cream); transform: scale(1.1); }
.contact-row-label {
  width: 84px; flex-shrink: 0;
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cream-dim);
}
.contact-row-value {
  flex: 1; min-width: 0; font-size: 0.98rem; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-row-arrow {
  flex-shrink: 0; font-size: 0.9rem; color: var(--cream-mute);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.contact-row:hover .contact-row-arrow { opacity: 1; transform: translateX(0); }

/* --- Footer --- */
.footer { padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2rem; background: var(--bg-soft); border-top: 1px solid var(--line); }
.footer-top {
  max-width: var(--content-max); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-bottom: clamp(2rem, 5vw, 3rem); border-bottom: 1px solid var(--line);
}
.footer-grid {
  max-width: var(--content-max); margin-inline: auto;
  display: grid; gap: 2rem; padding-block: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a, .footer-contact a, .footer-social a { color: var(--cream-mute); font-size: 0.92rem; }
.footer-nav a:hover, .footer-contact a:hover, .footer-social a:hover { color: var(--cream); }
.footer-contact { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-legal {
  max-width: var(--content-max); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-size: 0.78rem; color: var(--cream-dim);
}
.footer-legal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.footer-legal-nav a { color: var(--cream-dim); font-size: 0.78rem; }
.footer-legal-nav a:hover { color: var(--cream); }

/* =============================================================
   Legal pages (aviso legal / privacidad / cookies)
   ============================================================= */
.legal-body { background: var(--bg); }
.legal-header {
  max-width: var(--content-max); margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.6rem) var(--gutter) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.legal-back {
  font-size: 0.82rem; color: var(--cream-dim); border-bottom: 1px solid var(--line-strong);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.legal-back:hover { color: var(--cream); border-color: var(--accent); }
.legal-main {
  max-width: 780px; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.legal-title {
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: 0; margin-top: 0.4rem;
}
.legal-updated { margin-top: 0.6rem; color: var(--cream-dim); font-size: 0.85rem; }
.legal-callout {
  margin-top: 2rem; padding: 1.1rem 1.3rem; background: var(--card-2);
  border: 1px solid var(--accent); border-radius: 4px;
  font-size: 0.88rem; color: var(--cream-mute); line-height: 1.6;
}
.legal-callout strong { color: var(--cream); }
.legal-section { margin-top: clamp(2.2rem, 5vw, 3rem); }
.legal-section h2 {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 3vw, 1.65rem);
  letter-spacing: 0; color: var(--cream); margin-bottom: 0.9rem;
}
.legal-section p { color: var(--cream-mute); line-height: 1.75; margin-top: 0.8rem; }
.legal-section p:first-child { margin-top: 0; }
.legal-section ul { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.legal-section li { color: var(--cream-mute); line-height: 1.65; padding-left: 1.1rem; position: relative; }
.legal-section li::before { content: "—"; position: absolute; left: 0; color: var(--cream-dim); }
.legal-section a { color: var(--cream); border-bottom: 1px solid var(--line-strong); transition: border-color 0.25s var(--ease-out); }
.legal-section a:hover { border-color: var(--accent); }
.legal-section strong { color: var(--cream); }

/* =============================================================
   7. Responsive tweaks
   ============================================================= */
@media (max-width: 539px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .field-row { grid-template-columns: 1fr; }
}