/* ==========================================================================
   Sofía Fractional — Design System
   ds.css  ·  Phase 2 sandbox stylesheet
   ========================================================================== */

/* Allura (display script) + Poppins (body) — DEBE ir antes de @font-face */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Poppins:wght@300;400;500;600;700&display=swap');

/* -------------------------------------------------------------------------
   Fonts — Josefin Sans, self-hosted (SIL OFL)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/JosefinSans-Thin.ttf') format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/JosefinSans-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/JosefinSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/JosefinSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/JosefinSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('./fonts/JosefinSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* -------------------------------------------------------------------------
   Design tokens (custom properties)
   ------------------------------------------------------------------------- */
:root {
  /* Color - neutral */
  --c-ink:    #000000;
  --c-paper:  #ffffff;
  --c-beige:  #d6d1ca;
  --c-taupe:  #a49b96;
  --c-sand:   #ddc9a3;
  --c-muted:  #f7f5f2;

  /* Color - accent */
  --c-gold:       #cbb26c;
  --c-gold-deep:  #9a7f3e;
  --c-gold-soft:  #efe6cf;
  --c-jungle:     #3b5c46;
  --c-jungle-soft:#e6ede8;
  --c-danger:     #b0413e;
  --c-danger-soft:#f6e6e5;

  /* Color - semantic */
  --c-text:           #000000;
  --c-text-secondary: #5a524d;
  --c-text-muted:     #a49b96;
  --c-text-inverse:   #ffffff;
  --c-link:           #9a7f3e;
  --c-border:         #e5e0d8;
  --c-border-strong:  #a49b96;
  --c-overlay-hero:   rgba(0,0,0,0.45);

  /* Typography */
  --ff-ui: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-display: 'Allura', 'Josefin Sans', serif;

  /* Radius */
  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* Spacing scale (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 8vw, 96px);
  --container-max: 1200px;
  --container-prose: 760px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --sh-md: 0 4px 10px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --sh-lg: 0 12px 30px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06);
  --sh-gold: 0 10px 30px rgba(203,178,108,0.25);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* Focus ring */
  --focus-ring: 2px solid var(--c-gold);
  --focus-offset: 2px;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--ff-ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------------------
   Typography utilities
   ------------------------------------------------------------------------- */
.ds-display-xl { font-size: clamp(3rem, 6vw + 1rem, 6rem); line-height: 1.05; font-weight: 300; letter-spacing: -0.01em; }
.ds-display-lg { font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem); line-height: 1.1; font-weight: 300; letter-spacing: -0.01em; }
.ds-h1 { font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.15; font-weight: 300; margin: 0 0 var(--s-4); }
.ds-h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height: 1.2; font-weight: 400; margin: 0 0 var(--s-4); }
.ds-h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 600; margin: 0 0 var(--s-3); }
.ds-h4 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; margin: 0 0 var(--s-3); }
.ds-h5 { font-size: 1.125rem; line-height: 1.4; font-weight: 600; margin: 0 0 var(--s-2); }
.ds-h6 { font-size: 1rem; line-height: 1.4; font-weight: 600; margin: 0 0 var(--s-2); }
.ds-body-lg, .ds-body, .ds-body-sm, p { font-family: var(--ff-body); text-wrap: pretty; hyphens: manual; overflow-wrap: break-word; }
.ds-body-lg { font-size: 0.875rem; line-height: 1.55; font-weight: 400; }
.ds-body-lg strong, .ds-body-lg b { font-weight: 600; }
.ds-body { font-size: 1.0625rem; line-height: 1.65; font-weight: 400; }
.ds-body-sm { font-size: 0.9375rem; line-height: 1.55; font-weight: 400; }
.section-heading .ds-body-lg { font-weight: 500; color: var(--c-text); }
h1, h2, h3, h4, h5 { text-wrap: balance; }
.ds-caption { font-size: 0.8125rem; line-height: 1.45; color: var(--c-text-secondary); }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  line-height: 1.2;
}
.eyebrow--ink { color: var(--c-ink); }
.eyebrow--taupe { color: var(--c-text-secondary); }

/* -------------------------------------------------------------------------
   Container + layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}
@supports (padding: max(0px)) {
  .container {
    padding-left: max(20px, env(safe-area-inset-left), 4vw);
    padding-right: max(20px, env(safe-area-inset-right), 4vw);
  }
}
.container-prose {
  max-width: 880px; /* antes 760 — evita orphans en párrafos largos */
  margin: 0 auto;
}
.container-prose p { text-wrap: pretty; }
.section-y { padding-top: var(--section-y); padding-bottom: clamp(48px, 6vw, 72px); }
.stack > * + * { margin-top: var(--s-4); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  --btn-pad-y: 14px;
  --btn-pad-x: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--ff-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  user-select: none;
  white-space: nowrap;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — high-contrast black on white; accent through gold hover detail */
.btn-primary {
  background: var(--c-ink);
  color: var(--c-text-inverse);
  border-color: var(--c-ink);
}
.btn-primary:hover { background: #1a1a1a; box-shadow: var(--sh-gold); border-color: var(--c-gold); }
.btn-primary:active { transform: translateY(1px); }

/* Secondary — outlined gold; text in gold_deep so it passes AA */
.btn-secondary {
  background: var(--c-paper);
  color: var(--c-gold-deep);
  border-color: var(--c-gold);
}
.btn-secondary:hover { background: var(--c-gold-soft); }
.btn-secondary:active { transform: translateY(1px); }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--c-muted); }

/* Big CTA variant (hero) */
.btn-lg { --btn-pad-y: 18px; --btn-pad-x: 32px; font-size: 1.0625rem; }

/* WhatsApp floating */
.btn-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-lg);
  z-index: 50;
  text-decoration: none;
}
.btn-whatsapp:hover { transform: scale(1.05); }

/* -------------------------------------------------------------------------
   Link underline (editorial)
   ------------------------------------------------------------------------- */
.link-underline {
  color: var(--c-link);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-standard);
  padding-bottom: 2px;
}
.link-underline:hover { background-size: 100% 2px; }

/* -------------------------------------------------------------------------
   Inputs
   ------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: 0.01em;
}
.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--ff-ui);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-text);
  background: var(--c-muted);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  box-sizing: border-box;
}
.input:hover, .textarea:hover, .select:hover { background: #f1ece3; border-color: transparent; }
.input:focus, .textarea:focus, .select:focus {
  background: #fff;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(203,178,108,0.18);
  outline: none;
}
.textarea { min-height: 120px; padding-top: 14px; resize: vertical; }

/* Select — anular UA styles para que iguale altura del .input */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 48px;                     /* match .input */
  padding-right: 44px;               /* espacio para chevron */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a7f3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.select::-ms-expand { display: none; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px rgba(176,65,62,0.15);
}
.field-error { font-size: 0.8125rem; color: var(--c-danger); }
.field-help  { font-size: 0.8125rem; color: var(--c-text-secondary); }

/* Radio + checkbox */
.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  min-height: 44px;
  font-size: 0.9375rem;
}
.option:hover { border-color: var(--c-gold); background: var(--c-muted); }
.option input[type="radio"], .option input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--c-gold-deep);
  margin: 0;
}
.option input:focus-visible + span { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.option--selected { border-color: var(--c-gold); background: var(--c-gold-soft); }

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-full);
  background: var(--c-muted);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.badge-gold { background: var(--c-gold-soft); color: var(--c-gold-deep); border-color: var(--c-gold); }
.badge-jungle { background: var(--c-jungle-soft); color: var(--c-jungle); border-color: #b8c9bd; }
.badge-ink { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

/* -------------------------------------------------------------------------
   Cards (shared base)
   ------------------------------------------------------------------------- */
.card {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base);
}
.card:hover { box-shadow: var(--sh-md); border-color: var(--c-gold); }
.card-lg { padding: var(--s-6); border-radius: var(--r-lg); }

/* -------------------------------------------------------------------------
   Reveal animation
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
  will-change: opacity, transform;
}
.reveal.is-revealing,
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* -------------------------------------------------------------------------
   Botanical divider (dorado)
   ------------------------------------------------------------------------- */
.botanical-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin: 0 auto;
  color: var(--c-gold);
  max-width: 480px;
}
/* Cuando un section-y va seguido/precedido por un botanical-divider,
   ajustamos el padding adyacente para que el espacio entre el contenido
   y el divisor sea exactamente 40px. */
.section-y:has(+ .container > .botanical-divider) { padding-bottom: 40px; }
.container:has(> .botanical-divider) + .section-y { padding-top: 40px; }
.botanical-divider::before,
.botanical-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.botanical-divider svg { width: 64px; height: auto; flex: none; }

/* -------------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--c-paper);
  border-radius: var(--r-lg);
  max-width: 600px;
  width: 100%;
  height: min(640px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--sh-lg);
  transform: translateY(16px);
  transition: transform var(--dur-base) var(--ease-standard);
}
.modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 32px 36px 24px;
  min-height: 0;
}
.modal__nav {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 36px;
  border-top: 1px solid var(--c-border);
  background: var(--c-paper);
}
.modal .ds-h2 { font-size: clamp(1.25rem, 1vw + 0.9rem, 1.625rem); margin: 0 0 4px; line-height: 1.25; }
.modal .ds-body { font-size: 0.9375rem; line-height: 1.45; margin: 0; }
.modal .dots { margin: 12px 0 !important; }
.modal .flow { display: flex; flex-direction: column; gap: 8px; }
.modal .field { gap: 2px; }
.modal .field-label { font-size: 0.8125rem; }
.modal .input, .modal .textarea, .modal .select { min-height: 42px; padding: 9px 14px; font-size: 0.9375rem; }
.modal .option { padding: 8px 12px; min-height: 40px; font-size: 0.9375rem; }
@media (max-width: 560px) {
  .modal { height: min(620px, 100vh); max-height: 100vh; border-radius: 0; }
  .modal__body { padding: 28px 20px 20px; }
  .modal__nav { padding: 14px 20px; }
}
.modal-backdrop.is-open .modal { transform: none; }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Hero overlay
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--c-text-inverse);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(120px, 14vh, 180px) 0 var(--s-9);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__content > * { max-width: 880px; }
.hero__content .hero__bullets { margin-left: auto; margin-right: auto; justify-items: start; }

/* -------------------------------------------------------------------------
   Progress dots (form steps)
   ------------------------------------------------------------------------- */
.dots { display: flex; gap: 8px; align-items: center; }
.dot {
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--c-border);
}
.dot.is-active { background: var(--c-gold); width: 28px; border-radius: var(--r-full); }
.dot.is-done { background: var(--c-gold-deep); }

/* -------------------------------------------------------------------------
   Small helpers
   ------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.flow > * + * { margin-top: var(--s-4); }
.hr-gold { height: 1px; background: var(--c-gold); border: 0; margin: var(--s-6) 0; opacity: 0.6; }
.text-center { text-align: center; }
.text-muted { color: var(--c-text-secondary); }
.text-gold { color: var(--c-gold-deep); }
.text-jungle { color: var(--c-jungle); }
.bg-beige { background: var(--c-beige); }
.bg-muted { background: var(--c-muted); }
.bg-ink { background: var(--c-ink); color: var(--c-paper); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* -------------------------------------------------------------------------
   Display script (Allura) — usar SOLO para acentos tipográficos del hero
   ------------------------------------------------------------------------- */
.display-script {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-style: normal;
  line-height: 0.95;
}
.display-script-xl { font-family: var(--ff-display); font-weight: 400; font-size: clamp(4rem, 10vw + 1rem, 10rem); line-height: 0.9; }

/* -------------------------------------------------------------------------
   Solid gold button (simple) — referencia "BROKERS" del header actual
   ------------------------------------------------------------------------- */
.btn-solid-gold {
  background: var(--c-gold);
  color: var(--c-paper);
  border-color: var(--c-gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.btn-solid-gold:hover { background: var(--c-gold-deep); border-color: var(--c-gold-deep); }
.btn-solid-gold:active { transform: translateY(1px); }

/* -------------------------------------------------------------------------
   Animated bracket CTA — réplica estructural del .bs-pr-btn-2 actual
   + variantes light / dark / solid.
   Uso: <a class="btn-bracket" ...><span class="bb-text" data-front="..." data-back="..."></span>
         <span class="bb-line bb-line-1"></span><span class="bb-line bb-line-2"></span>
         <span class="bb-box bb-box-1"></span>...<span class="bb-box bb-box-4"></span></a>
   ------------------------------------------------------------------------- */
.btn-bracket {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 34px;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  background: #fefdf7;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 2px;
  transition: border-color 0.8s cubic-bezier(0.1, 0.75, 0.25, 1);
}
.btn-bracket .bb-text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1;
  /* compensa el ascender de Josefin para que el texto quede centrado óptico */
  padding-top: 2px;
}
/* Sin reset de background (rompía is-dark). Solo font-family para neutralizar UA del <button> */
button.btn-bracket { font-family: var(--ff-ui); }
.btn-bracket .bb-text::before,
.btn-bracket .bb-text::after {
  display: block;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  line-height: 1;
}
.btn-bracket .bb-text::before {
  content: attr(data-front);
  position: relative;
  opacity: 1;
  transform: translateY(0);
  color: inherit;
}
.btn-bracket .bb-text::after {
  content: attr(data-back);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  opacity: 0;
  transform: translateY(100%);
  color: #fff;
}
.btn-bracket .bb-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.btn-bracket .bb-line::before,
.btn-bracket .bb-line::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-style: solid;
  border-color: var(--c-gold);
  transition: all 0.5s ease-in-out;
}
/* line-1: top-left + bottom-right corners */
.btn-bracket .bb-line-1::before { left: -14px; top: -14px; border-width: 0 1px 1px 0; }
.btn-bracket .bb-line-1::after  { right: -14px; bottom: -14px; border-width: 1px 0 0 1px; }
/* line-2: top-right + bottom-left corners */
.btn-bracket .bb-line-2::before { right: -14px; top: -14px; border-width: 0 0 1px 1px; }
.btn-bracket .bb-line-2::after  { left: -14px; bottom: -14px; border-width: 1px 1px 0 0; }
/* boxes that fill from corners on hover */
.btn-bracket .bb-box {
  position: absolute;
  width: 50%;
  height: 50%;
  background: var(--c-gold);
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.1, 0.75, 0.25, 1);
  z-index: 1;
  will-change: transform;
}
/* stagger sutil para que el "cierre" desde las 4 esquinas se sienta más vivo */
.btn-bracket:hover .bb-box-1 { transition-delay: 0ms; }
.btn-bracket:hover .bb-box-2 { transition-delay: 40ms; }
.btn-bracket:hover .bb-box-3 { transition-delay: 80ms; }
.btn-bracket:hover .bb-box-4 { transition-delay: 40ms; }
.btn-bracket .bb-box-1 { top: 0; left: 0; transform-origin: left top; }
.btn-bracket .bb-box-2 { top: 0; right: 0; transform-origin: right top; }
.btn-bracket .bb-box-3 { bottom: 0; right: 0; transform-origin: right bottom; }
.btn-bracket .bb-box-4 { bottom: 0; left: 0; transform-origin: left bottom; }
.btn-bracket:hover { border-color: var(--c-gold); color: #fff; }
.btn-bracket:hover .bb-box { transform: scale(1); }
.btn-bracket:hover .bb-text::before { opacity: 0; transform: translateY(-100%); }
.btn-bracket:hover .bb-text::after  { opacity: 1; transform: translateY(0); }
.btn-bracket:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 6px; }
@media (max-width: 640px) {
  .btn-bracket {
    display: flex;
    width: calc(100% - 48px);
    max-width: 420px;
    margin: 0 auto;
    padding: 16px 18px;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-align: center;
  }
  .btn-bracket .bb-text { text-align: center; line-height: 1.25; white-space: normal; }
  .btn-bracket .bb-line::before,
  .btn-bracket .bb-line::after { width: 10px; height: 10px; }
  .btn-bracket .bb-line-1::before { left: -10px; top: -10px; }
  .btn-bracket .bb-line-1::after  { right: -10px; bottom: -10px; }
  .btn-bracket .bb-line-2::before { right: -10px; top: -10px; }
  .btn-bracket .bb-line-2::after  { left: -10px; bottom: -10px; }
}

/* Variant: dark / "negativo" — fondo negro, texto blanco, brackets dorados */
.btn-bracket.is-dark {
  background: #1e1d1a;
  color: var(--c-paper);
  border-color: var(--c-paper);
}
.btn-bracket.is-dark .bb-text::after { color: var(--c-ink); }
.btn-bracket.is-dark .bb-box { background: var(--c-gold); }
.btn-bracket.is-dark:hover { border-color: var(--c-gold); color: var(--c-ink); }

/* Variant: solid — sin brackets, fondo dorado lleno (estilo "BROKERS" del header) */
.btn-bracket.is-solid {
  background: var(--c-gold);
  color: var(--c-paper);
  border-color: var(--c-gold);
  border-radius: 6px;
}
.btn-bracket.is-solid .bb-line,
.btn-bracket.is-solid .bb-box { display: none; }
.btn-bracket.is-solid:hover { background: var(--c-gold-deep); border-color: var(--c-gold-deep); color: var(--c-paper); }
.btn-bracket.is-solid .bb-text::after { display: none; }