/* Marnic Bros: fondo azul noche del logo, verde lima como único acento, títulos anchos y rótulos mono */
:root {
  --bg: #0b0f1a;
  --bg-2: #111827;
  --line: #222b3b;
  --fg: #eef1f6;
  --muted: #9aa4b5;
  --lime: #c6ff3d;
  --lime-ink: #0b0f1a;
  --wide: "Archivo", "Arial Black", Arial, sans-serif;
  --body: "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, figure { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.wrap { max-width: 1140px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 760px) { .wrap { padding-inline: 32px; } }

/* Encabezado */
.top { position: sticky; top: 0; z-index: 10; background: rgb(11 15 26 / .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { width: 38px; }
.marca span { font: 900 1.05rem/1 var(--wide); font-stretch: 112%; letter-spacing: .01em; }
.marca b { color: var(--lime); font-weight: 900; }
.nav { display: none; gap: 4px; font: 500 .8125rem/1 var(--mono); }
.nav a { text-decoration: none; color: var(--muted); padding: 10px 12px; border-radius: 999px; transition: color .15s, background-color .15s; }
.nav a:hover { color: var(--fg); background: var(--bg-2); }
@media (min-width: 820px) { .nav { display: flex; } }

/* Tipografía */
.tag { font: 500 .75rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.tag span { color: var(--lime); margin-left: 10px; }
h1 { font: 900 clamp(2.75rem, 7.4vw, 5.25rem)/.95 var(--wide); font-stretch: 112%; letter-spacing: -.02em; text-transform: uppercase; }
h2 { font: 900 clamp(1.875rem, 4.2vw, 3rem)/1.02 var(--wide); font-stretch: 112%; letter-spacing: -.015em; text-wrap: balance; max-width: 18ch; }
h1 em, h2 em { font-style: normal; color: var(--lime); }
h3 { font: 800 1.25rem/1.2 var(--wide); font-stretch: 112%; }
.lead { color: var(--muted); font-size: 1.1875rem; max-width: 34em; margin-top: 24px; }

/* Botón: un solo CTA por sección, siempre a Instagram */
.btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; background: var(--lime); color: var(--lime-ink); text-decoration: none; font: 600 1rem/1 var(--body); padding: 16px 24px; border-radius: 999px; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgb(198 255 61 / .6); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn svg circle:last-child { fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* Hero */
.hero { display: grid; gap: 40px; align-items: center; padding-block: 56px 72px; }
.hero > * { min-width: 0; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.15fr .85fr; padding-block: 96px 112px; } }
.hero-logo { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--bg); }

/* Secciones */
.sec { padding-block: 72px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .sec { padding-block: 104px; } }

.servicios { list-style: none; display: grid; gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
@media (min-width: 820px) { .servicios { grid-template-columns: repeat(3, 1fr); } }
.servicios li { background: var(--bg); padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 12px; }
.servicios .num { font: 500 .8125rem/1 var(--mono); color: var(--lime); }
.servicios p { color: var(--muted); }

.trabajo { display: grid; gap: 40px; align-items: center; }
.trabajo > * { min-width: 0; }
@media (min-width: 900px) { .trabajo { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.trabajo-copy p:not(.tag) { color: var(--muted); margin-top: 20px; max-width: 32em; }
.link { display: inline-flex; gap: 8px; margin-top: 24px; font: 500 .9375rem/1 var(--mono); color: var(--lime); text-underline-offset: 5px; }
.captura { display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-2); text-decoration: none; transition: transform .2s, border-color .2s; }
.captura:hover { transform: translateY(-3px); border-color: #3a475e; }
@media (prefers-reduced-motion: reduce) { .captura:hover { transform: none; } }
.barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.barra i { width: 9px; height: 9px; border-radius: 50%; background: #2c3648; }
.barra small { margin-left: 10px; font: 400 .75rem/1 var(--mono); color: var(--muted); }

.pasos { list-style: none; counter-reset: paso; display: grid; gap: 28px; margin-top: 48px; }
@media (min-width: 820px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.pasos li { counter-increment: paso; border-top: 2px solid var(--lime); padding-top: 20px; }
.pasos li::before { content: "0" counter(paso); display: block; font: 500 .8125rem/1 var(--mono); color: var(--muted); margin-bottom: 14px; }
.pasos b { font: 800 1.25rem/1.2 var(--wide); font-stretch: 112%; }
.pasos p { color: var(--muted); margin-top: 8px; }

.nosotros { display: grid; gap: 24px; }
@media (min-width: 900px) { .nosotros { grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; } }
.nosotros > p { color: var(--muted); font-size: 1.1875rem; max-width: 32em; }

/* Cierre */
.cierre { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: 88px; }
.cierre-in { display: flex; flex-direction: column; align-items: flex-start; }
.cierre .btn { margin-top: 28px; }

/* Pie */
.pie { border-top: 1px solid var(--line); }
.pie-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 24px 32px; font: 400 .8125rem/1.4 var(--mono); color: var(--muted); }
.pie a { text-underline-offset: 4px; }
.pie a:hover { color: var(--lime); }

/* Para quién */
.rubros { margin-top: 56px; }
.rubros .tag { margin-bottom: 14px; }
.rubros ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rubros li { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font: 500 .875rem/1 var(--mono); color: var(--fg); }

/* Qué incluye */
.incluye { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 32px 40px; }
@media (min-width: 700px) { .incluye { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .incluye { grid-template-columns: repeat(3, 1fr); } }
.incluye li { padding-left: 22px; position: relative; }
.incluye li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--lime); border-radius: 2px; }
.incluye b { font: 800 1.125rem/1.25 var(--wide); font-stretch: 112%; }
.incluye p { color: var(--muted); margin-top: 6px; }

/* Caso Zarpa */
.hicimos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hicimos li { font: 400 .875rem/1.5 var(--mono); color: var(--fg); }
.hicimos li::before { content: "+ "; color: var(--lime); }

/* Qué traer */
.traer { margin-top: 56px; border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: var(--bg-2); }
@media (min-width: 760px) { .traer { padding: 36px 40px; } }
.traer ul { margin: 18px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--fg); }
@media (min-width: 760px) { .traer ul { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
.traer li::marker { color: var(--lime); }
.traer > p { color: var(--muted); margin-top: 18px; }

/* Nosotros */
.nosotros-txt { display: flex; flex-direction: column; gap: 14px; color: var(--muted); font-size: 1.1875rem; max-width: 32em; }

/* Preguntas */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; font: 800 1.125rem/1.3 var(--wide); font-stretch: 112%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font: 500 1rem/1 var(--mono); color: var(--lime); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); padding-bottom: 22px; max-width: 38em; }

/* Terminal del inicio */
.terminal { border: 1px solid var(--line); border-radius: 18px; background: #070a12; overflow: hidden; box-shadow: 0 40px 80px -40px rgb(198 255 61 / .25); }
.term-barra { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.term-barra i { width: 10px; height: 10px; border-radius: 50%; background: #2c3648; }
.term-barra i:first-child { background: var(--lime); }
.term-barra small { margin-left: 10px; font: 400 .75rem/1 var(--mono); color: var(--muted); }
.term-cuerpo { margin: 0; padding: 22px 22px 26px; min-height: 290px; font: 400 .875rem/1.75 var(--mono); white-space: pre-wrap; color: var(--fg); }
@media (min-width: 900px) { .term-cuerpo { font-size: .9375rem; min-height: 320px; } }
.term-cuerpo .l { display: block; min-height: 1.75em; }
.term-cuerpo .cmd { color: var(--fg); }
.term-cuerpo .gris { color: var(--muted); }
.term-cuerpo .ok { color: var(--lime); }
.term-cuerpo .fin { color: var(--fg); font-weight: 600; }
.term-cuerpo .escribiendo::after { content: "▍"; color: var(--lime); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Cinta de rubros */
.cinta { overflow: hidden; border-block: 1px solid var(--line); background: var(--lime); color: var(--lime-ink); }
.cinta-pista { display: flex; width: max-content; animation: cinta 32s linear infinite; }
.cinta span { font: 900 1.05rem/1 var(--wide); font-stretch: 112%; text-transform: uppercase; padding: 16px 0; white-space: nowrap; }
.cinta span::after { content: "✦"; margin: 0 26px; font-size: .8em; }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } }

/* Aparecer al hacer scroll */
.revela.oculta { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.revela.oculta.visible { opacity: 1; transform: none; }

/* Hover en tarjetas de servicios */
.servicios li { transition: background-color .2s; }
.servicios li:hover { background: var(--bg-2); }
.servicios li:hover .num { text-decoration: underline; text-underline-offset: 4px; }

/* Armá tu web */
.arma { display: grid; gap: 36px; }
@media (min-width: 900px) { .arma { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } .arma > div:first-child { position: sticky; top: 100px; } }
.arma > * { min-width: 0; }
.arma-sub { color: var(--muted); margin-top: 20px; max-width: 30em; }
.arma-form { display: flex; flex-direction: column; gap: 26px; border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: var(--bg-2); }
@media (min-width: 760px) { .arma-form { padding: 32px; } }
.arma-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.arma-form legend { padding: 0; margin-bottom: 12px; font: 800 1.0625rem/1.2 var(--wide); font-stretch: 112%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: block; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font: 500 .875rem/1 var(--body); color: var(--muted); background: var(--bg); transition: border-color .15s, color .15s, background-color .15s; }
.chips label:hover span { border-color: #3a475e; color: var(--fg); }
.chips input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.chips input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.rubro { display: flex; flex-direction: column; gap: 10px; font: 800 1.0625rem/1.2 var(--wide); font-stretch: 112%; }
.rubro input { font: 400 1rem/1.4 var(--body); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; }
.rubro input::placeholder { color: #6b7587; }
.mensaje { border-left: 3px solid var(--lime); padding: 6px 0 6px 16px; }
.mensaje small { font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mensaje p { margin-top: 8px; font: 400 .9375rem/1.6 var(--mono); }
.arma-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.arma-acciones .btn { margin-top: 0; }
.estado { color: var(--lime); font-size: .9375rem; }