/* ==========================================================================
   Ferro & Sable — design tokens + bespoke components
   Tailwind handles layout; this file holds texture, motion and the
   few components that need hand-tuned CSS.
   ========================================================================== */

:root {
  --obsidian: #0b0a09;
  --charcoal: #151311;
  --char-2: #1d1a17;
  --bone: #ece4d6;
  --bone-dim: #a39a8b;
  --brass: #b8925a;
  --brass-hi: #d7b57c;
  --line: rgba(236, 228, 214, 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* long, soft settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-fluid: cubic-bezier(0.22, 0.61, 0.18, 1);  /* button fill */
}

html { scroll-behavior: smooth; }
body {
  background: var(--obsidian);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brass); color: var(--obsidian); }

/* ---------- Film grain overlay (pure SVG noise, no image request) ---------- */
.grain::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
}

/* ---------- Typography helpers ---------- */
.display {
  font-family: "Bodoni Moda", "Didot", Georgia, serif;
  font-optical-sizing: auto;
  letter-spacing: -0.035em;
  line-height: 0.86;
}
.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.brass-rule {
  display: inline-block;
  width: 3.5rem;
  height: 1px;
  background: var(--brass);
  vertical-align: middle;
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Image curtain: the frame unclips from the bottom while the photo settles */
[data-reveal="frame"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--ease-in-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal="frame"] img {
  transform: scale(1.18);
  transition: transform 2s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal="frame"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="frame"].is-in img { transform: scale(1.02); }

/* Split headline lines */
.line-mask { display: block; overflow: hidden; padding: 0.22em 0 0.06em; margin-top: -0.22em; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.3s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.is-loaded .line-mask > span { transform: none; }

/* ---------- Fluid buttons ----------
   A circle is born exactly where the pointer enters (--x/--y set in JS)
   and swells to fill the pill; leaving drains it back out the exit point. */
.btn-fluid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  border-radius: 999px;
  padding: 1.05rem 1.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  color: var(--bone);
  transition: color 0.6s var(--ease-fluid), border-color 0.6s var(--ease-fluid);
}
.btn-fluid::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--brass);
  transform: translate(-50%, -50%);
  transition: width 0.75s var(--ease-fluid), height 0.75s var(--ease-fluid);
}
.btn-fluid:hover::before,
.btn-fluid:focus-visible::before { width: var(--r, 420px); height: var(--r, 420px); }
.btn-fluid:hover,
.btn-fluid:focus-visible { color: var(--obsidian); }
.btn-fluid .arrow { transition: transform 0.6s var(--ease-fluid); }
.btn-fluid:hover .arrow { transform: translateX(5px); }

.btn-fluid--solid { background: var(--bone); color: var(--obsidian); border-color: var(--bone); }
.btn-fluid--solid::before { background: var(--brass); }

.btn-fluid--ghost { border-color: var(--line); }
.btn-fluid--ghost::before { background: var(--bone); }

.btn-fluid:focus-visible { outline: 1px solid var(--brass-hi); outline-offset: 4px; }
.btn-fluid:active { transform: scale(0.98); }

/* ---------- Services menu ---------- */
.menu-row {
  position: relative;
  border-top: 1px solid var(--line);
  transition: background-color 0.6s var(--ease-out);
}
.menu-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}
.menu-row:hover::after { transform: scaleX(1); }
.menu-row:hover .menu-name { color: var(--brass-hi); }
.menu-name { transition: color 0.5s var(--ease-out); }

.leader { flex: 1; border-bottom: 1px dotted rgba(236, 228, 214, 0.22); transform: translateY(-0.35em); }

/* Floating cursor-follow preview inside the services menu (desktop only) */
.menu-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 15rem;
  aspect-ratio: 3 / 4;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(0.85) rotate(-4deg);
  transition: opacity 0.45s var(--ease-out), transform 0.7s var(--ease-out);
}
.menu-preview.is-on {
  opacity: 1;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1) rotate(-2deg);
}
.menu-preview img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.05); }

/* ---------- Misc ---------- */
.img-tone { filter: grayscale(0.35) contrast(1.08) brightness(0.88) sepia(0.12); }

.marquee-track { animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

.nav-scrolled { background: rgba(11, 10, 9, 0.78); backdrop-filter: blur(14px); border-color: var(--line) !important; }

.spin-slow { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  [data-reveal], [data-reveal="frame"], .line-mask > span { opacity: 1; transform: none; clip-path: none; }
  [data-reveal="frame"] img { transform: none; }
}

/* ---------- Accesibilidad y aviso de demo ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--brass); color: var(--obsidian); }
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 1px solid var(--brass-hi); outline-offset: 4px; }
.demo-bar { margin: 0; padding: 0.4rem 1.25rem; background: var(--bone); color: var(--obsidian); font-size: 0.7rem; letter-spacing: 0.04em; text-align: center; }
html { scroll-padding-top: 7rem; }

/* ---------- Estado abierto/cerrado ---------- */
.status-dot { background: var(--bone-dim); }
.status-dot.is-open { background: #4ade80; }

/* ---------- Formulario ---------- */
.field {
  margin-top: 0.5rem; width: 100%; padding: 0.75rem 0; font-size: 1.05rem;
  color: var(--bone); background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; color-scheme: dark; appearance: none;
  transition: border-color 0.3s var(--ease-out);
}
.field:focus { outline: none; border-bottom-color: var(--brass); }
.field[aria-invalid="true"] { border-bottom-color: #e08a7a; }
select.field { cursor: pointer; background: var(--char-2); }
select.field option { background: var(--charcoal); color: var(--bone); }
.field-error { display: block; min-height: 1.1em; margin-top: 0.35rem; font-size: 0.8rem; color: #f0a596; }
.field-error:empty { min-height: 0; margin: 0; }

.check { display: flex; gap: 0.85rem; align-items: flex-start; cursor: pointer; font-size: 0.875rem; line-height: 1.55; color: var(--bone); padding: 0.25rem 0; }
.check input {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; cursor: pointer;
  appearance: none; border: 1px solid var(--bone-dim); background: transparent; display: grid; place-items: center;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.check input::after { content: ""; width: 0.6rem; height: 0.35rem; border: solid var(--obsidian); border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-1px) scale(0); transition: transform 0.2s var(--ease-out); }
.check input:checked { background: var(--brass); border-color: var(--brass); }
.check input:checked::after { transform: rotate(-45deg) translateY(-1px) scale(1); }
.check input[aria-invalid="true"] { border-color: #e08a7a; }
.check a { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }

/* ---------- Botón flotante de WhatsApp (solo móvil) ---------- */
.wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* ---------- Páginas legales ---------- */
.legal { max-width: 46rem; }
.legal h2 { font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; margin: 3.5rem 0 1rem; color: var(--bone); scroll-margin-top: 7rem; text-wrap: balance; }
.legal p, .legal li { color: rgba(236, 228, 214, 0.82); line-height: 1.75; }
.legal p { margin: 0 0 1rem; }
.legal ul, .legal ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 0.5rem; }
.legal li::marker { color: var(--brass); }
.legal strong { color: var(--bone); font-weight: 500; }
.legal a { color: var(--brass-hi); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--bone-dim) !important; }
.legal-note { border-left: 2px solid var(--brass); background: var(--char-2); padding: 1rem 1.25rem; }
.legal-table { overflow-x: auto; margin: 0 0 1rem; }
.legal-table table { border-collapse: collapse; min-width: 560px; font-size: 0.875rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--line); color: rgba(236, 228, 214, 0.82); }
.legal-table th { color: var(--bone); font-weight: 500; }
@media (min-width: 768px) { .wa-float { display: none; } }