/* ============================================================
   TRAECO — Landing QWeb crudo (stack-fork opción 1.5)
   Tokens = brand TREATMENT (A/B cerrado 2026-06-27, WCAG-validado):
   canvas gris cálido + forest (acción) + oxblood (riesgo) + Archivo.
   Documento limpio: sin Bootstrap, sin o_cc, sin !important.
   ============================================================ */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('/traeco_qweb/static/fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('/traeco_qweb/static/fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('/traeco_qweb/static/fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/traeco_qweb/static/fonts/firacode-var.woff2') format('woff2');}

:root{
  /* espejo del brandbook — fuente canónica: theme_traeco/static/src/css/
     brand_tokens.css (cualquier swap de token se hace ALLÁ primero; acá se
     consume). Reconciliación 07-29: los atajos locales de abajo son ALIAS. */
  --traeco-primary:#222222; --traeco-secondary:#E2DDD4;
  --traeco-accent:#2E4A21; --traeco-accent-strong:#233A19;
  --traeco-accent-on-dark:#9DBE8A; --traeco-accent2:#4C071E;
  --traeco-text-primary:#222222; --traeco-text-secondary:#57544E;
  --traeco-text-inverse:#F4F1EA;
  --traeco-bg:#ECECEC; --traeco-bg-subtle:#EFEAE0; --traeco-bg-dark:#1C1C1A;
  --traeco-border:#D9D3CA; --traeco-border-strong:#BFB8AC;

  /* atajos del landing = alias de los canónicos (mismo valor, un solo dueño) */
  --bg:var(--traeco-bg); --surface:var(--traeco-text-inverse); /* warm white */
  --surface-2:var(--traeco-bg-subtle); --band:var(--traeco-secondary);
  --ink:var(--traeco-text-primary); --muted:var(--traeco-text-secondary); --faint:#7A756C;
  --accent:var(--traeco-accent); --accent-strong:var(--traeco-accent-strong);
  --ox:var(--traeco-accent2);
  --sage:var(--traeco-accent-on-dark); --sage-strong:#B7D0A6; --rose:#D98BA0;
  --dark:var(--traeco-bg-dark); --dark-ink:var(--traeco-text-inverse);
  --dark-muted:#B8B2A7; --dark-faint:#8F8A80;
  --dark-line:rgb(244 241 234 / .12);
  --border:var(--traeco-border); --border-strong:var(--traeco-border-strong);
  --field:#FBFAF6;
  --shadow:0 2px 18px rgb(34 34 34 / .08); --shadow-lg:0 8px 40px rgb(34 34 34 / .12);
  --radius:2px;
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fira Code',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---- base ------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-weight:400;line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin:0;}
p,ul{margin:0;}
ul{padding:0;list-style:none;}
img{max-width:100%;height:auto;}
a{color:var(--accent);text-decoration:none;}
main a:not(.btn):not(.card-link):not(.cta-quiet){text-decoration:underline;text-underline-offset:3px;}
::selection{background:var(--accent);color:var(--surface);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;}
.dark :focus-visible,.footer :focus-visible{outline-color:var(--sage);}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.col{max-width:640px;}
section{scroll-margin-top:84px;}

.kicker{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;}
.lead{color:var(--muted);font-size:1.08rem;}

/* ---- botones ----------------------------------------------- */
.btn{display:inline-block;background:var(--accent);color:var(--surface);
  font-family:var(--font);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  padding:13px 28px;border:0;border-radius:var(--radius);cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);}
.btn:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:var(--shadow);}
.btn:active{transform:none;}
.btn-sm{padding:9px 18px;font-size:.85rem;}
.btn-sage{background:var(--sage);color:var(--dark);}
.btn-sage:hover{background:var(--sage-strong);}
.cta-quiet{font-weight:600;font-size:.95rem;color:var(--accent-strong);}
.cta-quiet:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---- nav ---------------------------------------------------- */
.nav{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);}
.nav-row{display:flex;align-items:center;gap:12px;height:66px;}
.nav-brand{display:flex;align-items:center;}
.nav-brand img{height:36px;width:auto;}
.nav-links{display:none;gap:26px;}
.nav-links a{color:var(--muted);font-size:.92rem;font-weight:600;}
.nav-links a:hover{color:var(--ink);}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.nav-portal{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:8px 10px;border:1px solid var(--accent);border-radius:var(--radius);
  color:var(--accent);font-size:.85rem;font-weight:600;line-height:1;white-space:nowrap;}
.nav-portal:hover{color:var(--accent-strong);background:var(--surface-2);}
.nav-portal-label-long{display:none;}
.nav-portal-label-short{display:none;}
.nav-portal-label-narrow{display:inline;}

/* ---- hero ---------------------------------------------------- */
.hero{padding:96px 0 72px;background:
  radial-gradient(120% 90% at 85% -10%,var(--surface-2) 0%,transparent 60%),var(--bg);}
.hero h1{font-size:clamp(2.35rem,5.6vw,3.6rem);max-width:15em;margin-bottom:22px;}
.hero h1 .fg{color:var(--accent);}
.hero .lead{font-size:1.16rem;}
.ox{color:var(--ox);font-weight:600;}
.cta-row{margin-top:34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.hero.gracias{min-height:56vh;}

/* Firma "expediente": garantías como sellos de documento, voz mono */
.sello{margin-top:46px;display:flex;gap:10px 14px;flex-wrap:wrap;}
.sello span{font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.08em;
  color:var(--muted);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:7px 13px;background:color-mix(in srgb,var(--surface) 66%,transparent);}

/* ---- secciones ----------------------------------------------- */
.section{padding:78px 0;border-top:1px solid var(--border);}
.section h2{font-size:clamp(1.7rem,3.4vw,2.3rem);}
.section .kicker + h2{margin-bottom:0;}
.section h2 + .lead{margin-top:14px;}

/* ---- servicios: cards ----------------------------------------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.card-feat{border-top:3px solid var(--accent);}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-strong);}
.tag-ox{color:var(--ox);}
.card h3{font-size:1.16rem;}
.card p{color:var(--muted);font-size:.95rem;flex:1;}
.card strong{color:var(--ink);font-weight:600;}
.card-link{font-size:.92rem;font-weight:600;color:var(--accent-strong);margin-top:6px;}
.card-link::after{content:" →";}
.card-link:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---- proceso: pauta editorial con números mono ----------------- */
.steps{display:grid;grid-template-columns:1fr;gap:26px;margin-top:38px;}
.step{border-top:1px solid var(--border-strong);padding-top:20px;}
.step-n{font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--accent);
  display:block;margin-bottom:12px;font-variant-numeric:tabular-nums;}
.step h3{font-size:1.12rem;margin-bottom:6px;}
.step p{color:var(--muted);font-size:.95rem;}

/* ---- alcance: banda oscura, momento sage ------------------------ */
.dark{background:var(--dark);color:var(--dark-ink);border-top:none;}
.dark h2{color:var(--dark-ink);}
.k-sage{color:var(--sage);}
.scope{display:grid;grid-template-columns:1fr;gap:34px;margin-top:38px;}
.scope-h{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;}
.scope-h.yes{color:var(--sage);}
.scope-h.no{color:var(--rose);}
.scope-list li{padding:11px 0 11px 30px;position:relative;color:var(--dark-muted);
  border-top:1px solid var(--dark-line);font-size:.98rem;}
.scope-list li::before{position:absolute;left:2px;font-family:var(--mono);font-size:.85rem;}
.scope-list.yes li::before{content:"✓";color:var(--sage);}
.scope-list.no li::before{content:"✕";color:var(--rose);}
.scope-cta{margin-top:42px;}

/* ---- banda de confianza ----------------------------------------- */
.trust{background:var(--surface-2);border-top:1px solid var(--border);padding:46px 0;}
.trust-label{color:var(--muted);font-size:.92rem;margin-bottom:18px;}
.trust-pills{display:flex;gap:10px 12px;flex-wrap:wrap;}
.pill{display:inline-block;padding:6px 14px;border:1px solid var(--border-strong);
  border-radius:var(--radius);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--surface);}

/* ---- contacto: form --------------------------------------------- */
.form{margin-top:36px;max-width:720px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 30px 30px;}
.form-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:7px;margin:0;}
.field label{font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:.01em;}
.req{color:var(--ox);}
.field input,.field textarea{font-family:var(--font);font-size:.95rem;color:var(--ink);
  background:var(--field);border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:11px 13px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgb(46 74 33 / .16);}
.field textarea{resize:vertical;min-height:120px;}
.form-send{margin-top:26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.form-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--faint);}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---- footer ------------------------------------------------------- */
.footer{background:var(--dark);color:var(--dark-muted);padding:64px 0 36px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;}
.footer-mark{font-weight:700;font-size:1.06rem;letter-spacing:.02em;color:var(--dark-ink);
  margin-bottom:10px;}
.footer-tag{font-size:.88rem;color:var(--dark-faint);line-height:1.7;}
.footer-h{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dark-faint);margin-bottom:14px;}
.footer-links li{margin-bottom:9px;font-size:.92rem;}
.footer-links a{color:var(--dark-muted);}
.footer-links a:hover{color:var(--sage);}
.footer-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--dark-line);}
.footer-bottom p{font-size:.78rem;color:var(--dark-faint);}

/* ---- motion -------------------------------------------------------- */
.rise{opacity:0;transform:translateY(16px);animation:rise .8s var(--ease) forwards;}
.d1{animation-delay:.08s;}.d2{animation-delay:.16s;}.d3{animation-delay:.24s;}.d4{animation-delay:.34s;}
@keyframes rise{to{opacity:1;transform:none;}}
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rise,.reveal{animation:none;transition:none;opacity:1;transform:none;}
  .btn,.card{transition:none;}
}

/* ---- responsive: mobile-first, cortes progresivos -------------------- */
@media (min-width:360px){
  .nav-portal-label-short{display:inline;}
  .nav-portal-label-narrow{display:none;}
}
@media (min-width:640px){
  .form-grid{grid-template-columns:1fr 1fr;}
  .span-2{grid-column:1 / -1;}
  .scope{grid-template-columns:1fr 1fr;gap:20px 56px;}
}
@media (min-width:880px){
  .nav-row{gap:28px;}
  .nav-links{display:flex;}
  .nav-actions{gap:20px;}
  .nav-portal{display:inline;min-height:0;padding:0;border:0;border-radius:0;
    color:var(--muted);line-height:inherit;}
  .nav-portal:hover{color:var(--ink);background:transparent;}
  .nav-portal-label-long{display:inline;}
  .nav-portal-label-short{display:none;}
  .nav-portal-label-narrow{display:none;}
  .hero{padding:118px 0 86px;}
  .cards{grid-template-columns:repeat(3,1fr);gap:18px;}
  .steps{grid-template-columns:repeat(3,1fr);gap:34px;}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;}
  .section{padding:88px 0;}
}