/* ============================================================
   TRAZO — BASE & COMPONENTS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-weight:300; font-size:var(--fs-body);
  line-height:var(--lh-body); color:var(--ash); background:var(--obsidian);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-tint);color:var(--ivory)}

/* ---- layout ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.stack>*+*{margin-top:var(--sp-4)}

/* ---- type ---- */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ivory);line-height:var(--lh-head)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
.display{font-family:var(--serif);font-weight:400;font-size:var(--fs-display);line-height:var(--lh-tight);color:var(--ivory);letter-spacing:-.01em}
.display em{font-style:normal;color:var(--gold-bright)}
.lead{font-size:var(--fs-lead);color:var(--ash);font-weight:300}
strong{color:var(--ivory);font-weight:400}
em{font-style:normal}

.eyebrow{display:inline-flex;align-items:center;gap:.9em;font-family:var(--sans);
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.eyebrow.is-plain::before{display:none}
.label{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ash-dim)}

/* ---- the gold line device ---- */
.goldline{display:block;width:100%;height:1.5px;border:0;background:var(--line-grad);box-shadow:var(--glow);opacity:.9}
/* draw-on for inline SVG paths: add class .draw to a <path>, set pathLength via CSS var */
.line-draw path{fill:none;stroke:url(#trazoGrad);stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(166,195,236,.55));
  stroke-dasharray:var(--len,1600);stroke-dashoffset:var(--len,1600);
  animation:lineDraw 2.6s var(--ease-line) forwards}
@keyframes lineDraw{to{stroke-dashoffset:0}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:1.05em 2.1em;border-radius:var(--r-xs);border:1px solid transparent;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn--gold{background:var(--gold);color:#08152B;border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ivory);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
.btn--lg{padding:1.2em 2.5em;font-size:.82rem}

.link-arrow{display:inline-flex;align-items:center;gap:.7em;font-size:.78rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);transition:color var(--dur) var(--ease)}
.link-arrow svg{color:var(--gold);transition:transform var(--dur) var(--ease)}
.link-arrow:hover{color:var(--gold-bright)} .link-arrow:hover svg{transform:translateX(5px)}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);border-radius:var(--r-full);padding:.5em 1.1em}

/* ---- skip link ---- */
.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--gold);color:#08152B;
  padding:.65em 1.1em;border-radius:var(--r-xs);font-size:.8rem;font-weight:500}
.skip:focus{left:8px;top:8px}

/* ---- focus ---- */
:where(a,button,.btn,input,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- long-form i18n blocks (testimonials): show only the active language ---- */
html[lang="en"] .i18n-es{display:none}
html[lang="es"] .i18n-en{display:none}

/* ---- reveal on scroll ---- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1!important;transform:none!important}}