@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-700.woff2) format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-800.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-400.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-3-600.woff2) format('woff2');}
/* ------------------------------------------------------------
   Sistema de color con significado:
   azul bolígrafo = lo hace el sistema solo
   amarillo fosforito = hace falta una persona
   verde = venta ganada
   ------------------------------------------------------------ */
:root {
  --paper: #F0F3F7;
  --card: #FFFFFF;
  --ink: #14213D;
  --ink-soft: #4A576F;
  --rule: #D3D9E4;
  --blue: #2447C5;
  --on-blue: #FFFFFF;
  --green: #1A6B42;
  --green-bg: #DDF0E5;
  --hl: #FFE45C;
  --sheet-1: #FFF1A8;
  --sheet-2: #F8D2D0;
  --maxw: 1080px;
  --f-head: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1524;
    --card: #162033;
    --ink: #E9EDF5;
    --ink-soft: #AAB5CA;
    --rule: #2B3752;
    --blue: #8FA8FF;
    --on-blue: #0E1524;
    --green: #5CC796;
    --green-bg: #14352A;
    --sheet-1: #3A3820;
    --sheet-2: #3B2528;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.12; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 20; }

/* Marcador amarillo: señala lo que necesita a una persona */
.hl {
  background: linear-gradient(transparent 14%, var(--hl) 14%, var(--hl) 90%, transparent 90%);
  color: #14213D;
  padding: 0 .2em;
  margin: 0 -.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.btn {
  display: inline-block;
  padding: .72rem 1.25rem;
  border-radius: 3px;
  font: 600 1rem var(--f-body);
  text-decoration: none;
  background: var(--blue);
  color: var(--on-blue);
  border: 2px solid var(--blue);
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.mark-hl { background: var(--hl); color: #14213D; border-color: var(--hl); }

/* ---------- Cabecera ---------- */
.nav { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--rule); }
@supports (background: color-mix(in srgb, red, blue)) {
  .nav { background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); }
}
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font: 800 1.3rem var(--f-head); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand-mark { width: 1.7rem; height: 1.7rem; border-radius: 4px; background: var(--hl); display: grid; place-items: center; }
.brand-mark svg { width: 1.05rem; height: 1.05rem; stroke: #14213D; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .97rem; }
.nav-links a:not(.btn):hover { color: var(--blue); }
@media (max-width: 700px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 4rem;
  align-items: center;
}
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; gap: 3.5rem; padding-top: 3rem; } }
.hero h1 { font-size: clamp(2rem, 3.9vw, 3.1rem); }
.hero h1 span { display: block; text-wrap: balance; }
.hero h1 span + span { margin-top: .3em; }
.hero .sub { font-size: 1.2rem; color: var(--ink-soft); max-width: 34rem; margin: 1.6rem 0 2rem; }
.cta-row { display: flex; gap: .9rem; flex-wrap: wrap; }

/* El talón: presupuesto de ejemplo sobre papel autocopiativo */
.stack { position: relative; isolation: isolate; margin: 0 2rem 2.4rem 0; }
.stack::before, .stack::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(20, 33, 61, .14);
  border-radius: 2px;
  z-index: -1;
  transform-origin: 0 100%;
}
.stack::before { background: var(--sheet-2); transform: translate(14px, 10px) rotate(2.4deg); }
.stack::after { background: var(--sheet-1); transform: translate(7px, 5px) rotate(1.2deg); }
.ticket { background: var(--card); border: 1px solid var(--rule); border-radius: 2px; padding: 1.3rem 1.4rem 1.5rem; }
.ticket-top { display: flex; align-items: center; padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px dashed var(--rule); }
.chip { font: 600 .82rem var(--f-body); color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 99px; padding: .15rem .7rem; }
.t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.t-head strong { display: block; font: 700 1.25rem var(--f-head); letter-spacing: -0.01em; }
.t-head small { color: var(--ink-soft); font-size: .92rem; }
.amount { font: 800 1.7rem var(--f-head); letter-spacing: -0.02em; white-space: nowrap; }
.events { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ev { position: relative; display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .9rem; padding-bottom: 1.25rem; }
.ev:last-child { padding-bottom: 0; }
.ev::before { content: ""; position: absolute; left: calc(.6rem - 1px); top: 1.2rem; bottom: -.3rem; width: 2px; background: var(--rule); }
.ev:last-child::before { display: none; }
.dot { width: .8rem; height: .8rem; border-radius: 50%; margin: .38rem auto 0; position: relative; z-index: 1; background: var(--blue); }
.dot.client { background: var(--ink-soft); }
.dot.person { background: var(--hl); box-shadow: 0 0 0 2px var(--ink); }
.ev b { display: block; font-weight: 600; line-height: 1.35; }
.ev small { display: block; color: var(--ink-soft); font-size: .92rem; margin-top: .1rem; }
.said { margin: .35rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--rule); background: var(--paper); font-size: .95rem; }

/* ---------- Secciones ---------- */
.band-section { border-top: 1px solid var(--rule); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.band-section .wrap { padding-top: 4.5rem; padding-bottom: 5rem; }
.band-section h2 { max-width: 28ch; }
.lead { color: var(--ink-soft); max-width: 38rem; margin: 1rem 0 0; font-size: 1.12rem; }

.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: start; margin-top: 3.5rem; }
.product + .product { margin-top: 5rem; padding-top: 4rem; border-top: 1px dashed var(--rule); }
@media (max-width: 880px) { .product { grid-template-columns: 1fr; gap: 2.2rem; } }
.p-title { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.p-title h3 { font-size: 2.1rem; }
.pill { font: 600 .85rem var(--f-body); padding: .18rem .7rem; border-radius: 99px; }
.pill.live { background: var(--green-bg); color: var(--green); }
.pill.soon { border: 1px solid var(--ink-soft); color: var(--ink-soft); }
.p-sub { font: 700 1.15rem var(--f-head); color: var(--ink-soft); margin: 0 0 1.2rem; }
.p-text p { max-width: 36rem; }
.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 36rem; }
.ticks li { position: relative; padding-left: 1.9rem; }
.ticks li::before { content: ""; position: absolute; left: .15rem; top: .5em; width: .85rem; height: .45rem; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.ticks li.person::before { border-color: var(--ink); }
.soon-cta { margin-top: 1.6rem; }

/* Recorrido ilustrado */
.viz { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; padding: 1.6rem 1.6rem 1.7rem; }
.viz.soon { border-style: dashed; background: transparent; }
.track { list-style: none; margin: 0; padding: 0; }
.station { position: relative; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.5rem; }
.station:last-child { padding-bottom: 0; }
.station::before, .station::after { content: ""; position: absolute; left: calc(1.35rem - 1px); top: 2.7rem; bottom: 0; width: 2px; }
.station::before { background: var(--rule); }
.station::after { background: var(--blue); transform-origin: top; }
.station:last-child::before, .station:last-child::after { display: none; }
.ico { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--on-blue); border: 2px solid var(--blue); }
.ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.station b { display: block; font: 700 1.1rem var(--f-head); letter-spacing: -0.005em; line-height: 1.3; padding-top: .35rem; }
.station small { display: block; color: var(--ink-soft); font-size: .98rem; margin-top: .15rem; line-height: 1.45; }
.viz.soon .ico { background: transparent; color: var(--ink-soft); border-color: var(--rule); }
.viz.soon .station::after { display: none; }

.o-title { margin: 1.7rem 0 0; padding-top: 1.3rem; border-top: 1px dashed var(--rule); font: 700 1rem var(--f-head); }
.outcomes { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .75rem; }
.outcomes li { display: grid; grid-template-columns: .8rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.outcomes b { font-weight: 600; }
.sq { width: .8rem; height: .8rem; border-radius: 2px; background: var(--blue); transform: translateY(.1rem); }
.sq.g { background: var(--green); }
.sq.n { background: var(--ink-soft); }
.sq.h { background: var(--hl); box-shadow: 0 0 0 1.5px var(--ink); }
.fine { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px dashed var(--rule); color: var(--ink-soft); font-size: .92rem; }

/* La única secuencia animada: el recorrido se ilumina paso a paso al llegar a él.
   Sin JavaScript o con movimiento reducido, se ve ya completo. */
.viz[data-anim] .ico { background: var(--card); color: var(--ink-soft); border-color: var(--rule); transition: background .45s ease, color .45s ease, border-color .45s ease; transition-delay: calc(var(--i) * .8s); }
.viz[data-anim] .station::after { transform: scaleY(0); transition: transform .6s ease; transition-delay: calc(var(--i) * .8s + .35s); }
.viz[data-anim] .outcomes li { opacity: 0; transition: opacity .5s ease; transition-delay: calc(3.4s + var(--j) * .3s); }
.viz[data-anim].play .ico { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.viz[data-anim].play .station::after { transform: scaleY(1); }
.viz[data-anim].play .outcomes li { opacity: 1; }

/* ---------- Cómo trabajamos ---------- */
.steps { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.6rem; counter-reset: s; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.steps li::before { content: counter(s); display: block; font: 800 2.3rem var(--f-head); color: var(--blue); line-height: 1; margin-bottom: .8rem; }
.steps h3 { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- Contacto ---------- */
.contact { background: #14213D; color: #F0F3F7; }
.contact .wrap { padding-top: 4.5rem; padding-bottom: 4.8rem; }
.contact h2 { color: #FFFFFF; max-width: 20ch; }
.contact .intro p { color: #C3CCDD; max-width: 34rem; margin: 1.1rem 0 1.4rem; font-size: 1.12rem; }

footer { border-top: 1px solid var(--rule); }
footer .wrap { padding-top: 1.6rem; padding-bottom: 1.8rem; color: var(--ink-soft); font-size: .92rem; }

/* ---------- Añadidos para producción ---------- */
:root { --danger: #B03A2E; }
@media (prefers-color-scheme: dark) { :root { --danger: #FF8E80; } }

/* Contacto con formulario */
.contact .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: start; }
@media (max-width: 880px) { .contact .wrap { grid-template-columns: 1fr; gap: 2.4rem; } }
.contact .intro p.alt { margin: 0; font-size: 1rem; }
.contact .intro p.alt a { color: #FFFFFF; }

.form { background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; padding: 1.7rem; }
.field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.field label { font-weight: 600; font-size: .97rem; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: 3px;
  padding: .65rem .8rem;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: .4rem 0 .9rem; font-size: .96rem; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--blue); }
.legal-note { font-size: .86rem; color: var(--ink-soft); margin: 0 0 1.3rem; line-height: 1.5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.btn { appearance: none; cursor: pointer; }
button.btn:disabled { opacity: .6; cursor: progress; }
.form-status { margin: 1rem 0 0; font-weight: 600; min-height: 1.5em; }
.form-status.ok { color: var(--green); }
.form-status.err { color: var(--danger); }

/* Pie con enlaces legales */
.foot { display: flex; justify-content: space-between; gap: .8rem 2rem; flex-wrap: wrap; }
.foot nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot a { color: var(--ink-soft); }
.foot a:hover { color: var(--blue); }

/* Páginas legales */
.page { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.5rem 5.5rem; }
.page h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin-bottom: .6rem; }
.page .updated { color: var(--ink-soft); margin: 0 0 2.4rem; font-size: .97rem; }
.page h2 { font-size: 1.45rem; margin: 2.5rem 0 .7rem; line-height: 1.2; }
.page p { margin: .7rem 0; }
.page ul { margin: .6rem 0 1rem; padding-left: 1.3rem; }
.page li { margin: .4rem 0; }
.ident { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: .5rem 1.2rem; margin: 1.1rem 0 1.4rem; padding: 1.1rem 1.3rem; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; }
.ident dt { font-weight: 600; }
.ident dd { margin: 0; }
@media (max-width: 520px) { .ident { grid-template-columns: 1fr; gap: .1rem; } .ident dd { margin-bottom: .6rem; } }
/* Datos que faltan por rellenar: se ven en amarillo para que no se escapen */
.todo { background: var(--hl); color: #14213D; padding: 0 .25em; border-radius: 2px; font-weight: 600; }

/* 404 */
.notfound { max-width: var(--maxw); margin: 0 auto; padding: 6rem 1.5rem 7rem; }
.notfound h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 16ch; }
.notfound p { color: var(--ink-soft); max-width: 32rem; margin: 1.2rem 0 2rem; font-size: 1.12rem; }

/* Los enlaces internos no quedan tapados por la cabecera fija */
html { scroll-padding-top: 5rem; }

/* Ilustración de "Páginas web": maqueta de una página dentro de un navegador */
.viz.web { padding: 1.3rem 1.3rem 1.5rem; }
.mock { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--paper); }
.mock-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; background: var(--card); border-bottom: 1px solid var(--rule); }
.mock-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rule); }
.mock-bar span { margin-left: .6rem; flex: 1; max-width: 14rem; font-size: .8rem; color: var(--ink-soft); background: var(--paper); border-radius: 99px; padding: .1rem .8rem; }
.mock-page { padding: 1.1rem 1.3rem 1.4rem; display: grid; gap: 1.6rem; background: var(--card); }
.mock-nav { display: flex; align-items: center; gap: .9rem; }
.mock-nav b { width: 4.4rem; height: .9rem; border-radius: 3px; background: var(--ink); }
.mock-nav span { width: 2.6rem; height: .5rem; border-radius: 3px; background: var(--rule); }
.mock-nav em { margin-left: auto; width: 4.2rem; height: 1.5rem; border-radius: 3px; background: var(--blue); }
.mock-hero { display: grid; gap: .6rem; }
.m-h1 { height: 1.55rem; width: 80%; border-radius: 3px; background: var(--ink); }
.m-h1.short { width: 54%; }
.m-line { height: .55rem; width: 92%; border-radius: 3px; background: var(--rule); }
.m-line.w70 { width: 70%; }
.m-cta { margin-top: .6rem; width: 7.5rem; height: 2.1rem; border-radius: 3px; background: var(--blue); }
.mock-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.mock-tiles div { height: 4.4rem; border-radius: 3px; background: var(--paper); border: 1px solid var(--rule); }
.viz.web .fine { margin-top: 1.1rem; padding-top: 0; border-top: 0; }