/* ==========================================================================
   Orbeo · La red · tokens de marca
   Cargar DESPUÉS de v3.css (y de propuesta.css en propuesta.html).
   Redefine las variables de la web y pasa a verde y melocotón sus colores fijos.
   ========================================================================== */

:root {
  /* Color de marca */
  --forest: #2c333a;        /* verde botella: fondo principal */
  --forest-2: #2c333a;      /* secciones alternas, tarjetas */
  --forest-3: #30383f;      /* tarjeta elevada, hover */
  --ivory: #f2f2f0;         /* marfil: texto sobre verde, fondos claros */
  --ivory-2: #f9f9f8;
  --peach: #a4f8e3;         /* melocotón: símbolo, CTA y datos clave */
  --peach-deep: #74f0d1;    /* líneas, puntos, gráficos */
  --green-on-light: #38414a; /* acento sobre fondo claro (AA) */
  --deep: #2c333a;          /* texto sobre claro */

  /* Variables que ya usa v3.css */
  --night: var(--forest);
  --night-2: var(--forest-2);
  --night-3: var(--forest-3);
  --cream: var(--ivory);
  --paper: var(--ivory-2);
  --ink: var(--deep);
  --muted: #585d61;         /* texto secundario sobre claro */
  --muted-d: #a8f1e5;       /* texto secundario sobre verde */
  --line-l: rgba(44, 51, 58, 0.1);
  --line-d: rgba(242, 242, 240, 0.14);
  --accent: var(--peach);
  --accent-deep: var(--peach-deep);
  --terra: var(--green-on-light);

  /* Tipografía */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --tracking-display: -0.025em;
  --serif: var(--display);
}

/* Logo: solo "orbeo". Technologies no forma parte del logotipo */
.brand__mark { color: var(--peach); }
.brand__word { font-family: var(--display); font-weight: 600; letter-spacing: var(--tracking-display); text-transform: lowercase; }
.brand small { display: none; }

/* Nombre legal, el único sitio donde aparece "Technologies" */
.legal { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-d); }

/* Palabra gigante del pie y titulares */
.foot__word { font-family: var(--display); font-weight: 600; }
.title, h1, h2 { font-family: var(--display); letter-spacing: var(--tracking-display); }

/* Números grandes sobre fondo claro: el melocotón no se leería */
.step__n { color: var(--green-on-light); }

/* --------------------------------------------------------------------------
   Colores fijos de mocks.css, v3.css y propuesta.css pasados a la paleta.
   Se repiten también las variantes de esos componentes para respetar su orden.
   -------------------------------------------------------------------------- */
/* mocks.css */
.mock { background: linear-gradient(180deg, #2c333a, #2c333a); color: var(--cream); }
.m-label { color: #b2b5b9; }
.m-pill { background: rgba(164, 248, 227, 0.14); color: var(--accent); }
.m-trio small { color: #b2b5b9; }
.mock--browser { background: #f5f5f3; color: var(--ink); }
.mock__bar { background: #e8e8e3; }
.mock__bar i { background: #c1c4c7; }
.mock__bar span { background: #f5f5f3; color: var(--muted); }
.mock__page small { color: var(--muted); }
.mock__btn { background: var(--ink); }
.mock__lines i { background: #e0e0da; }
.m-gauge circle { fill: none; }
.m-products i { background: linear-gradient(140deg, #e2e2db, #38414a); }
.m-products div:nth-child(2) i { background: linear-gradient(140deg, #46515c, #2c333a); }
.m-products div:nth-child(3) i { background: linear-gradient(140deg, #f2f2ef, #c5c8cb); }
.m-products div:nth-child(4) i { background: linear-gradient(140deg, #a4f8e3, #74f0d1); }
.mock--phone { background: radial-gradient(80% 60% at 50% 100%, rgba(164, 248, 227, 0.25), transparent 70%), linear-gradient(180deg, #2c333a, #2c333a); }
.m-phone { background: #2c333a; }
.m-notch { background: #2c333a; }
.m-card { background: #2c333a; }
.m-card small { color: #b2b5b9; }
.m-phone > i { background: #2c333a; }
.m-cta { background: var(--accent); color: var(--ink); }
.m-notif { background: rgba(255, 255, 255, 0.06); }
.m-notif small { color: #b2b5b9; }
.m-dot { background: var(--accent); }
.m-dot--b { background: #f2f2ef; }
.m-dot--c { background: var(--terra); }
.m-bars i { background: rgba(255, 255, 255, 0.12); }
.m-bars i:last-child { background: var(--accent); }
.m-col small { color: #b2b5b9; }
.m-deal { background: rgba(255, 255, 255, 0.06); }
.m-deal i { background: rgba(255, 255, 255, 0.16); }
.m-deal--hot { background: rgba(164, 248, 227, 0.16); box-shadow: inset 0 0 0 1px rgba(164, 248, 227, 0.5); }
.m-value span { color: var(--accent); }
.m-spark path { fill: none; }
.m-spark .area { fill: rgba(164, 248, 227, 0.14); }
.m-avatar { background: linear-gradient(140deg, #e2e2db, #74f0d1); color: var(--ink); }
.mock--contact small { color: #b2b5b9; }
.m-timeline li { color: #c4c7c9; }
.m-timeline li::before { background: var(--accent); }
.m-timeline li + li::before { background: #585d61; }
.mock--flow .edge { fill: none; }
.mock--flow .pulse { fill: none; }
.mock--flow rect { fill: #30383f; }
.mock--flow .node--trigger rect { fill: rgba(164, 248, 227, 0.16); }
.mock--flow text { fill: #d9d9d0; }
.m-tasks li { color: #b2b5b9; }
.m-tasks li::before { box-shadow: inset 0 0 0 1.5px #585d61; }
.m-tasks li.done { color: var(--cream); }
.m-tasks li.done::before { background: var(--accent); }
.m-bubble--in { background: rgba(255, 255, 255, 0.08); }
.m-bubble--out { background: var(--accent); color: var(--ink); }
.m-face--a { background: linear-gradient(140deg, #46515c, #2c333a); }
.m-face--b { background: linear-gradient(140deg, #a4f8e3, #38414a); color: var(--ink); }
.m-face--c { background: linear-gradient(140deg, #353e47, #2c333a); }
.m-callbar i { background: rgba(255, 255, 255, 0.1); }
.m-callbar .m-end { background: #38414a; }
.mock--wire { background: #f5f5f3; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(44, 51, 58, 0.35), inset 0 0 0 1px var(--line); }
.m-wire span { background: #e0e0da; }
.m-wire__hero { background: linear-gradient(140deg, #e2e2db, #74f0d1) !important; }
.mock--wire .m-pill { background: var(--ink); color: var(--cream); }
.m-progress { background: rgba(255, 255, 255, 0.1); }
.m-progress i { background: var(--accent); }

/* v3.css */
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--ghost { color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: #e2e2db; }
  .btn--dark:hover { background: #353e47; }
}
.gtile, .itile, .dot { color: #ffffff; }
.gtile::before, .itile::before, .dot::before { background: linear-gradient(160deg, rgba(255, 255, 255, 0.45), transparent 42%); }
.gtile--ink, .itile--ink, .dot--ink { background: radial-gradient(120% 120% at 30% 15%, #46515c, #2c333a 60%); }
.gtile--orange, .itile--orange, .dot--orange { background: radial-gradient(120% 120% at 30% 15%, #ebebe6, #74f0d1 55%, #52e5c0); --shadow: rgba(82, 229, 192, 0.55); }
.gtile--terra, .itile--terra, .dot--terra { background: radial-gradient(120% 120% at 30% 15%, #4f5c69, #38414a 60%, #2c333a); --shadow: rgba(44, 51, 58, 0.55); }
.gtile--peach { background: radial-gradient(120% 120% at 30% 15%, #f1f1ee, #e2e2db 60%, #74f0d1); color: var(--ink); --shadow: rgba(116, 240, 209, 0.5); }
.gtile--cream, .dot--cream { background: radial-gradient(120% 120% at 30% 15%, #ffffff, #e9e9e4 60%, #d3d3c9); color: var(--terra); --shadow: rgba(44, 51, 58, 0.35); }
.nav.is-scrolled .nav__bar, .nav.is-open .nav__bar { background: rgba(44, 51, 58, 0.9); }
.nav__links a { color: #c1c4c7; }
.nav__links a::after { background: var(--accent); }
.nav__toggle { background: rgba(255, 255, 255, 0.08); color: var(--cream); }
.nav__toggle i { background: currentColor; }
.hero { background: radial-gradient(60% 60% at 85% 35%, rgba(116, 240, 209, 0.16), transparent 70%), var(--night); }
.hero__lead { color: var(--muted-d); }
.svc__shade { background: #000000; }
.svc--cream { --chip: rgba(44, 51, 58, 0.07); --rule: rgba(44, 51, 58, 0.12); background: var(--cream); color: var(--ink); }
.svc--cream em { color: var(--terra); }
.svc--orange { --chip: rgba(44, 51, 58, 0.08); --rule: rgba(44, 51, 58, 0.16); background: linear-gradient(140deg, #e2e2db 0%, #a4f8e3 40%, #74f0d1 100%); color: var(--ink); }
.svc--orange em { color: #ffffff; }
.svc--ink { background: radial-gradient(70% 90% at 100% 100%, rgba(116, 240, 209, 0.28), transparent 60%), linear-gradient(160deg, #30383f, #2c333a 70%); color: var(--cream); }
.svc--terra { background: radial-gradient(60% 70% at 0% 0%, rgba(226, 226, 219, 0.3), transparent 60%), linear-gradient(140deg, #424d57, #2c333a); color: var(--cream); }
.svc--terra em { color: #ebebe6; }
.svc__art { background: rgba(255, 255, 255, 0.12); }
.svc--cream .svc__art { background: #e1e1da; }
.svc--ink .svc__art { background: rgba(255, 255, 255, 0.04); }
.svc__main--phone { background: transparent !important; }
.proj { color: #ffffff; }
.proj--orange { background: radial-gradient(90% 70% at 75% 15%, #ebebe6, transparent 55%), linear-gradient(160deg, #a4f8e3, #52e5c0); color: var(--ink); }
.proj--orange small, .proj--peach small, .proj--cream small { border-top-color: rgba(44, 51, 58, 0.16); }
.proj--ink { background: radial-gradient(70% 60% at 80% 10%, rgba(164, 248, 227, 0.35), transparent 60%), linear-gradient(160deg, #353e47, #2c333a); }
.proj--terra { background: radial-gradient(80% 70% at 20% 10%, #4f5c69, transparent 60%), linear-gradient(160deg, #38414a, #2c333a); }
.proj--peach { background: radial-gradient(80% 70% at 70% 20%, #f7f7f6, transparent 60%), linear-gradient(160deg, #e2e2db, #74f0d1); color: var(--ink); }
.proj--dusk { background: linear-gradient(170deg, #2c333a, #30383f 55%, #74f0d1 130%); }
.proj--cream { background: radial-gradient(80% 70% at 70% 15%, #ffffff, transparent 60%), linear-gradient(160deg, #e9e9e4, #bdc1c4); color: var(--ink); }
.cell { background: var(--paper); }
.cell::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(164, 248, 227, 0.2), transparent 60%); }
.cell p { color: var(--muted); }
.hub__lines path { fill: none; stroke: rgba(44, 51, 58, 0.14); }
.cell__big { color: var(--ink) !important; }
.step__dot { background: var(--cream); box-shadow: inset 0 0 0 2px rgba(44, 51, 58, 0.2); }
.step.is-on .step__dot { background: var(--accent-deep); box-shadow: 0 0 0 7px rgba(116, 240, 209, 0.18); }
.step__when { color: var(--muted); }
.step__text > p:last-child { color: var(--muted); }
.step__art .mock { box-shadow: 0 40px 70px -30px rgba(44, 51, 58, 0.45); }
.faq details { background: var(--paper); }
.faq details[open] { background: #ffffff; box-shadow: inset 0 0 0 1px var(--line-l), 0 20px 40px -28px rgba(44, 51, 58, 0.35); }
.faq__n { color: var(--muted); }
.faq details[open] .plus { background: var(--accent); }
.faq__body { color: var(--muted); }
.ccard { background: var(--night-2); }
.ccard__kicker { color: var(--muted-d); }
.ccard__go { background: rgba(255, 255, 255, 0.08); }
.ccard--accent { background: linear-gradient(140deg, #e2e2db, #74f0d1); color: var(--ink); }
.ccard--accent .ccard__kicker { color: rgba(44, 51, 58, 0.6); }
.ccard--accent .ccard__go { background: var(--ink); color: var(--cream); }
.foot__intro p { color: var(--muted-d); }
.foot h4 { color: var(--muted-d); }
.foot__bottom { color: var(--muted-d); }
.foot__word { background: linear-gradient(180deg, rgba(164, 248, 227, 0.55), rgba(164, 248, 227, 0) 78%); color: transparent; }

/* propuesta.css */
.wiz-page { background: radial-gradient(55% 60% at 80% 40%, rgba(116, 240, 209, 0.16), transparent 70%), var(--night); }
.wiz-progress .mono { color: var(--muted-d); }
.wiz-progress__track { background: var(--line-d); }
.wiz-progress__track i { background: var(--accent); }
.wiz-close { color: #c1c4c7; }
.wiz-side .lead { color: var(--muted-d); }
.wiz-perks li { background: rgba(255, 255, 255, 0.06); color: #d8d8cf; }
.wiz-perks li::before { background: var(--accent); }
.qcard { background-color: var(--cream); color: var(--ink); }
.qcard em { color: var(--terra); }
.qcard[data-pos="1"] { background-color: #a4f8e3; }
.qcard[data-pos="2"] { background-color: #38414a; }
.qcard[data-pos="hidden"] { background-color: #38414a; }
.qcard__n { color: var(--muted); }
.qcard__n::before { background: var(--accent-deep); }
.qcard__hint { color: var(--muted); }
.qcard__kbd { color: var(--muted); }
.qcard__error { color: var(--deep); }
.qcard__error:not(:empty) { background: rgba(116, 240, 209, 0.2); box-shadow: inset 0 0 0 1px var(--peach-deep); }
.wiz-back { background: none; color: var(--muted); }
.field label { color: var(--muted); }
.field input, .field textarea { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(44, 51, 58, 0.14); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #90959b; }
.field input:focus, .field textarea:focus { background: #ffffff; box-shadow: inset 0 0 0 2px var(--accent-deep), 0 0 0 4px rgba(116, 240, 209, 0.15); }
.choice span { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(44, 51, 58, 0.12); }
.choices--multi .choice span::after { box-shadow: inset 0 0 0 1.5px rgba(44, 51, 58, 0.25); background: center / 14px no-repeat; }
.choices--list .choice span::after { box-shadow: inset 0 0 0 1.5px rgba(44, 51, 58, 0.25); }
.choice small { color: var(--muted); }
.choice input:checked + span { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-deep), 0 14px 26px -16px rgba(82, 229, 192, 0.6); }
.choice input:checked + span small { color: rgba(44, 51, 58, 0.7); }
.choices--multi .choice input:checked + span::after { background-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .choice span:hover { box-shadow: inset 0 0 0 1px rgba(44, 51, 58, 0.25); }
  .choice input:checked + span:hover { background: #e2e2db; }
}

/* --------------------------------------------------------------------------
   Componentes del manual y titulares en Fraunces 600
   -------------------------------------------------------------------------- */
.title, .hero__title, .wiz-title, .qcard__q, .svc__copy h3, .cell__big, .stats dd b, .sheet nav a, .tape__track, .ccard b {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  font-optical-sizing: auto;
}
em { font-size: 1em; font-weight: 400; letter-spacing: -0.02em; line-height: inherit; }
.step__n { font-weight: 500; }
.hero__title { line-height: 1.02; }
.hero__line { display: inline-block; white-space: nowrap; }
.brand__word { font-size: 23px; }
.eyebrow { letter-spacing: 0.12em; font-size: 11.5px; }
.eyebrow i, .wiz-perks li::before, .qcard__n::before { border-radius: 50%; rotate: 0deg; }

/* Botones y navegación en píldora */
.btn, .btn--lg, .nav__toggle, .wiz-close, .ccard__go, .plus { border-radius: 999px; }
.nav__bar { border-radius: 999px; padding-left: 22px; }
.btn--ghost { box-shadow: inset 0 0 0 1px rgba(242, 242, 240, 0.24); }

/* Cintas: el símbolo como separador */
.tape i { display: inline-grid; place-items: center; }
.tape i svg { width: 0.62em; height: 0.62em; }
.tape--a i { color: var(--ink); }

/* Bento: un centro, seis puntos y las líneas que los unen */
.hub { min-height: 340px; }
.hub__t { --s: clamp(48px, 4.4vw, 60px); }
.hub__t:nth-child(6) { animation-delay: -2.2s; }
.hub__t:nth-child(7) { animation-delay: -3.8s; }
.hub__t--core { --s: clamp(70px, 6vw, 86px); }
.hub__lines .d5 { animation-delay: 0.5s; }
.hub__lines .d6 { animation-delay: 1.25s; }
.hub__lines .hub__pulse { stroke: var(--green-on-light); }

.foot__word { font-weight: 600; font-size: 27vw; letter-spacing: -0.035em; line-height: 0.92; -webkit-background-clip: text; background-clip: text; }
.contact .title { font-size: clamp(40px, 4.6vw, 72px); }
.foot__bottom { align-items: center; }

/* Sobre melocotón el icono va en verde: en blanco no se leería */
.gtile--orange, .itile--orange, .dot--orange { color: var(--ink); }