/* MAATICA · 14 Núcleo nocturno · mobile first (base: 12 Núcleo de vidrio; el estudio del hero es negro, no claro) */
:root{
  /* Estudio negro (solo hero): grafito profundo con un leve tinte violeta = fondo del shader */
  --studio:#0C0B11; --studio-ink:#F2F1F4; --studio-ink-2:#B9B7C6; --studio-line:rgba(255,255,255,.2); --studio-nav:rgba(12,11,17,.86);
  /* Noche */
  --night:#0A0817; --night-nav:rgba(10,8,23,.94);
  --surface-1:#121019; --surface-2:#1A1724; --surface-3:#221F2E;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --text:#F2F1F4; --text-2:#B4B2BF; --text-3:#9C9AB0;
  /* Violeta */
  --violet-600:#5B3FD9; --violet-600-h:#6A50DE; --violet-300:#B8A6FF; --violet-tint:rgba(91,63,217,.16);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -24px rgba(0,0,0,.6);
  /* Tipo */
  --f:'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;
  --fs-h1:clamp(2.375rem, 1.6rem + 3.2vw, 4.5rem);
  --fs-h2:clamp(1.875rem, 1.3rem + 2.4vw, 3.5rem);
  --fs-h3:clamp(1.25rem, 1.2rem + .2vw, 1.375rem);
  --fs-lead:clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body:clamp(1rem, .97rem + .1vw, 1.0625rem);
  /* Movimiento */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1); --ease-inout:cubic-bezier(0.65, 0, 0.35, 1);
  --t-press:140ms; --t-state:240ms; --t-enter:600ms; --t-fade-rm:200ms;
  /* Layout */
  --gutter:20px; --nav-h:56px; --sec-y:72px;
}
@media (min-width:641px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --gutter:48px; --nav-h:64px; --sec-y:112px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--studio); -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; transition:background-color var(--t-state) var(--ease-out); }
html.is-night{ background:var(--night); }
body{ margin:0; font-family:var(--f); font-weight:400; font-size:var(--fs-body); line-height:1.6; color:var(--text); overflow-x:clip;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1,h2,h3,p,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
svg{ display:block; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--violet-300); outline-offset:3px; border-radius:4px; }
[tabindex="-1"]:focus{ outline:none; }

.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter); }
@media (min-width:1024px){ .wrap{ max-width:calc(1240px + 2 * var(--gutter)); } }

.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--text); color:var(--night); padding:12px 16px; border-radius:12px; text-decoration:none; }
.skip:focus{ top:12px; }

/* ---------------------------------------------------------------- tipografía */
.h1{ font-weight:300; font-size:var(--fs-h1); line-height:1.04; letter-spacing:-0.03em; max-width:15ch; color:var(--studio-ink); text-wrap:balance; }
.h1 .ln{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.h1 .ln > span{ display:inline-block; }
.h2{ font-weight:300; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-0.02em; max-width:18ch; text-wrap:balance; }
.h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:0; }
h3{ font-weight:400; font-size:var(--fs-h3); line-height:1.3; letter-spacing:-0.01em; }
.lead{ font-size:var(--fs-lead); line-height:1.5; max-width:38ch; color:var(--text-2); text-wrap:pretty; }
.eyebrow{ font-size:12px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-feature-settings:"tnum"; }
@media (min-width:1024px){ .eyebrow{ font-size:13px; } }
.eyebrow + .h2{ margin-top:12px; }
.h2 + .lead{ margin-top:20px; }
.fine{ font-size:14px; line-height:1.45; color:var(--text-3); }
@media (min-width:1024px){ .fine{ font-size:15px; } }

/* ---------------------------------------------------------------- botones */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px;
  font-size:16px; line-height:1; letter-spacing:-0.005em; text-decoration:none; white-space:nowrap; cursor:pointer; border:1px solid transparent; background:none;
  transition:background-color var(--t-press) ease-out, border-color var(--t-press) ease-out, color var(--t-press) ease-out, transform var(--t-press) ease-out; }
.btn:active{ transform:scale(.98); }
@media (min-width:1024px){ .btn{ font-size:15px; } }
.btn-ink{ background:var(--violet-600); color:#fff; }   /* 14: sobre el estudio negro el CTA es el violeta (blanco 6,65:1) */
.btn-ink:hover{ background:var(--violet-600-h); }
.btn-outline-ink{ border-color:var(--studio-line); color:var(--studio-ink); }
.btn-outline-ink:hover{ border-color:rgba(255,255,255,.36); }
.btn-violet{ background:var(--violet-600); color:#fff; }
.btn-violet:hover{ background:var(--violet-600-h); }
.btn-outline{ border-color:var(--line-strong); color:var(--text); }
.btn-outline:hover{ border-color:rgba(255,255,255,.28); }
.btn-block{ width:100%; min-height:52px; }

/* ---------------------------------------------------------------- nav */
.nav{ position:sticky; top:0; z-index:40; height:calc(var(--nav-h) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
  color:var(--studio-ink); background:transparent; border-bottom:1px solid transparent;
  transition:background-color var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out), transform 400ms var(--ease-out); }
.nav.is-scrolled{ background:var(--studio-nav); -webkit-backdrop-filter:saturate(1.2) blur(8px); backdrop-filter:saturate(1.2) blur(8px); }
.nav.is-night{ background:var(--night-nav); color:var(--text); border-bottom-color:var(--line); }
.nav.is-hidden{ transform:translateY(-100%); }
.nav-in{ height:var(--nav-h); display:flex; align-items:center; gap:16px; }
.nav-brand{ display:flex; align-items:center; min-height:44px; margin-right:auto; color:inherit; }
.nav .wm{ width:96px; height:auto; aspect-ratio:936/126; }
.nav-links{ display:none; }
.btn-nav{ display:none; }
.nav-burger{ width:44px; height:44px; margin-right:-10px; display:grid; place-items:center; border:0; background:none; cursor:pointer; border-radius:12px; }
.nav-burger svg{ width:24px; height:24px; }
@media (min-width:1024px){
  .nav .wm{ width:112px; }
  .nav-links{ display:flex; gap:32px; position:absolute; left:50%; transform:translateX(-50%); }
  .nav-in{ position:relative; }
  .nav-links a{ font-size:15px; text-decoration:none; padding:12px 0; opacity:.86; transition:opacity var(--t-press) ease-out; }
  .nav-links a:hover{ opacity:1; }
  .btn-nav{ display:inline-flex; min-height:44px; padding:0 18px; background:var(--violet-600); color:#fff; }
  .btn-nav:hover{ background:var(--violet-600-h); }
  .nav-links a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; }
  .nav.is-night .btn-nav{ background:var(--violet-600); color:#fff; }
  .nav.is-night .btn-nav:hover{ background:var(--violet-600-h); }
  .nav-burger{ display:none; }
}

/* menú celu */
.menu{ position:fixed; inset:0; z-index:60; background:var(--night); color:var(--text); display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:max(24px, env(safe-area-inset-bottom)); overflow-y:auto; }
.menu[hidden]{ display:none; }
.menu .wm{ width:96px; height:auto; aspect-ratio:936/126; }
.menu-top{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; }
.menu-close{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; margin-right:-12px; background:none; border:0; cursor:pointer; font-size:16px; border-radius:12px; }
.menu-close svg{ width:20px; height:20px; }
.menu-links{ display:flex; flex-direction:column; margin-top:24px; }
.menu-links a{ min-height:56px; display:flex; align-items:center; font-size:20px; text-decoration:none; border-bottom:1px solid var(--line); }
.menu-foot{ margin-top:auto; padding-top:32px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.menu-mail{ min-height:44px; display:inline-flex; align-items:center; color:var(--text-2); }

/* ---------------------------------------------------------------- escena */
.stage{ position:absolute; inset:0 0 auto 0; height:0; z-index:0; }
.poster{ position:absolute; left:0; top:0; width:100%; height:100lvh; display:block; transition:opacity 400ms linear; }
.poster img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:821px) and (max-width:1279px){ .poster{ display:none; } }
#gl{ position:fixed; left:0; top:0; width:100%; height:100lvh; display:block; opacity:0; transition:opacity 400ms linear; pointer-events:none; }
html.gl-on #gl{ opacity:1; }
html.gl-on .poster{ opacity:0; }
html.gl-dead #gl{ display:none; }
main, .foot{ position:relative; z-index:1; }
.stage-slot{ pointer-events:none; }

/* ---------------------------------------------------------------- hero */
.hero{ position:relative; color:var(--studio-ink); }
#stage-hero{ height:clamp(220px, 30svh, 280px); position:relative; }
#stage-hero video, #stage-hero .hero-still{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.hero-in{ padding-top:16px; padding-bottom:40px; }
.hero-lead{ margin-top:16px; color:var(--studio-ink-2); max-width:38ch; }
.cta-row{ margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.cta-row .btn-ink{ min-height:52px; }
.hero .note{ margin-top:12px; font-size:16px; line-height:1.45; color:var(--studio-ink-2); max-width:44ch; }
.hero .note + .note{ margin-top:4px; }
.hero .note.note-mp{ margin-top:16px; }   /* r4: la nota de Mercado Pago a 16 px del CTA (antes 4 px, se leía como letra chica) */
.note-lead-2{ display:none; }
.channels{ margin-top:16px; display:flex; flex-wrap:wrap; gap:4px 16px; color:var(--studio-ink-2); font-size:13px; line-height:1.3; }
.channels li{ display:inline-flex; align-items:center; gap:6px; min-height:28px; }
.channels svg{ width:20px; height:20px; flex:none; }

@media (max-height:699.98px) and (max-width:1023.98px){
  #stage-hero{ height:max(140px, 20svh); }
  .h1{ font-size:36px; }
  .hero-lead .lead-2{ display:none; }
  .note-lead-2{ display:block; }
}
@media (min-width:641px) and (max-width:1023.98px){
  .cta-row{ flex-direction:row; }
  .cta-row .btn{ flex:none; }
}
/* tablet vertical y "desktop apilado": columna centrada de 600 */
@media (min-width:768px) and (max-width:1023.98px){
  .hero-in{ max-width:calc(600px + 2 * var(--gutter)); }
}

/* desktop: dos columnas, orbe por clamp (main.js) */
@media (min-width:1024px){
  html:not(.hero-stacked) #stage-hero{ position:absolute; inset:0; height:auto; }
  html:not(.hero-stacked) .hero{ min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; }
  html:not(.hero-stacked) .hero-in{ padding-top:48px; padding-bottom:64px; }
  html:not(.hero-stacked) .hero-col{ max-width:50%; }
  .cta-row{ flex-direction:row; gap:12px; margin-top:32px; }
  .cta-row .btn{ min-height:48px; }
  .hero-lead{ margin-top:20px; }
  .hero .note{ margin-top:12px; }
  .channels{ margin-top:20px; gap:8px 20px; }
  html.hero-stacked #stage-hero{ height:clamp(220px, 30svh, 300px); }
  html.hero-stacked .hero-in{ max-width:calc(600px + 2 * var(--gutter)); }
}
/* compu ancha y BAJA (2000×620, 1600×600, 1280×650: barra de marcadores o ventana sin maximizar): mismo layout de dos
   columnas, con la tipografía y los aires del hero ajustados al alto para que el texto entre en pantalla */
@media (min-width:1024px) and (max-height:760px){
  html:not(.hero-stacked) .hero-in{ padding-top:20px; padding-bottom:28px; }
  .hero .h1{ font-size:clamp(2.25rem, 8.2svh, 4.5rem); }
  .hero-lead{ margin-top:12px; }
  .cta-row{ margin-top:20px; }
  .hero .note{ margin-top:8px; }
  .hero .note.note-mp{ margin-top:10px; }
  .channels{ margin-top:12px; }
}
@media (min-width:1024px) and (orientation:portrait) and (pointer:coarse){
  #stage-hero{ position:relative !important; height:30svh !important; }
  .hero{ display:block !important; min-height:0 !important; }
  .hero-in{ max-width:calc(600px + 2 * var(--gutter)); padding-top:16px !important; }
  .hero-col{ max-width:none !important; }
}

/* ---------------------------------------------------------------- clima */
.clima{ height:34svh; }   /* 14: en el celu el salto a la luz necesita un tramo propio, sin texto encima */
@media (min-width:1024px) and (pointer:fine){ .clima{ height:75vh; } }   /* 14: un poco más de recorrido para el salto a la luz */
html.is-static .clima{ height:0 !important; }

/* ---------------------------------------------------------------- secciones de noche */
.sec{ position:relative; padding-block:var(--sec-y); color:var(--text); }
.sec-product{ padding-top:24px; }
@media (min-width:1024px){ .sec-product{ padding-top:64px; } }
#que-hace{ padding-top:48px; }
#contratar{ padding-bottom:40px; }
.sec-plans{ padding-top:40px; scroll-margin-top:40px; }
@media (min-width:1024px){ #que-hace{ padding-top:64px; } .sec-plans{ padding-top:72px; } }
html.is-static main > .sec, html.gl-dead main > .sec, html.no-gl main > .sec{ background:var(--night); transition:background-color var(--t-fade-rm) linear; }
html.is-static.is-night.gl-on main > .sec{ background:transparent; }

.night-block{ position:relative; isolation:isolate; }
.night-block::before{ content:""; position:absolute; inset:-24px -16px; z-index:-1; background:var(--night); border-radius:12px; opacity:1; transition:opacity 240ms var(--ease-out); pointer-events:none; }
@media (min-width:641px){ .night-block::before{ inset:-24px; } }
html.is-night .night-block::before{ opacity:0; }
html:not(.is-night) .night-block::before{ transition:none; }

/* entradas */
html.js .reveal{ opacity:0; transform:translateY(16px); }
html.js .reveal.in{ opacity:1; transform:none; transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay:var(--d, 0ms); }
html.js .reveal-night{ opacity:0; transform:translateY(16px); }
html.js .reveal-night.in{ opacity:1; transform:none; transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay:var(--d, 0ms); }
html.js .h1 .ln > span{ transform:translateY(105%); }
html.js .h1.in .ln > span{ transform:none; transition:transform 800ms var(--ease-out); transition-delay:var(--d, 0ms); }
html.js.rm .reveal, html.js.rm .reveal-night{ transform:none; }
html.js.rm .reveal.in, html.js.rm .reveal-night.in{ transition:opacity 200ms linear; }
html.js.rm .h1 .ln > span{ transform:none; }

/* ---------------------------------------------------------------- 2 · producto */
.h-block .lead{ max-width:38ch; }
.stage-product{ height:160px; }
.mock{ position:relative; background:var(--surface-1); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-card); font-size:14px; line-height:1.45; color:var(--text); overflow:hidden; }
.chip{ display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:6px; background:var(--violet-tint); color:var(--text); font-size:12px; letter-spacing:.08em; text-transform:uppercase; flex:none; }
.status{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--violet-600); box-shadow:0 0 0 2px rgba(184,166,255,.35); flex:none; display:inline-block; }
.mock-title{ font-size:13px; color:var(--text-2); }
.ch{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-3); transition:color 600ms var(--ease-out); }
.ch svg{ width:12px; height:12px; flex:none; }
.ch.is-hit{ color:var(--violet-300); transition-duration:0ms; }
.b{ max-width:80%; padding:10px 12px; border-radius:12px; overflow-wrap:anywhere; }
.b-in{ background:var(--surface-3); border-bottom-left-radius:4px; align-self:flex-start; }
.b-out{ background:var(--surface-2); border:1px solid var(--line-strong); border-bottom-right-radius:4px; align-self:flex-end; }
.b-op{ background:var(--surface-2); border-bottom-right-radius:4px; align-self:flex-end; }
.b-meta{ align-self:flex-end; font-size:13px; color:var(--text-3); margin-top:-4px; }
.b-typing{ background:transparent; border:1px dashed var(--line-strong); color:var(--text-2); align-self:flex-start; }
.chat-head{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--text-2); }
.chat-head b{ font-weight:400; color:var(--text); }
.chat-head time{ color:var(--text-3); }

.mock-desk{ display:none; }
.mock-mob{ margin-top:0; }
.mm-head{ padding:16px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.mm-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mm-channels{ display:flex; flex-wrap:wrap; gap:4px 12px; }
.mm-channels .ch{ min-height:24px; }
.mm-channels .ch.is-cur{ color:var(--text); }   /* r3: el canal de la charla abierta, fijo (sin rotación) */
.mm-chat{ padding:16px; display:flex; flex-direction:column; gap:8px; background:var(--night); }
.mm-chat .chat-head{ margin-bottom:4px; }
.mm-list{ border-top:1px solid var(--line); padding:8px 16px 12px; display:grid; grid-template-columns:minmax(0,1fr); }
.mm-list li{ font-size:13px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:8px 0; border-bottom:1px solid var(--line); }
.mm-list li:last-child{ border-bottom:0; }
.mm-list b{ font-weight:400; color:var(--text); }
.mm-list .more{ color:var(--text-3); }
.mock-note{ margin-top:12px; }
@media (min-width:641px) and (max-width:1023.98px){ .mock-mob{ max-width:560px; } }

@media (min-width:1024px){
  .sec-product .h-block{ max-width:calc(5 / 12 * 100%); }
  .stage-product{ display:none; }
  .mock-mob{ display:none; }
  .mock-desk{ display:block; margin-top:32px; width:calc(10 / 12 * 100% - 4px); }
  .mock-bar{ height:48px; display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid var(--line); }
  .mock-bar .status{ margin-left:auto; }
  .mock-body{ display:grid; grid-template-columns:260px minmax(0,1fr); min-height:472px; }
  .mock-list{ border-right:1px solid var(--line); }
  .mock-list li{ position:relative; padding:12px 16px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
  .mock-list li.is-sel{ background:var(--surface-2); }
  .mock-list li.is-sel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--violet-600); }
  .mock-list .row1{ display:flex; justify-content:space-between; }
  .mock-list b{ font-weight:400; }
  .mock-list time{ font-size:13px; color:var(--text-3); }
  .mock-list p{ color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mock-chat{ background:var(--night); padding:16px 20px; display:flex; flex-direction:column; gap:16px; }
  .bubbles{ display:flex; flex-direction:column; gap:10px; }
  .bubbles .b{ max-width:72%; }
  .mock-card{ display:none; }
}
@media (min-width:1181px){
  .mock-body{ grid-template-columns:280px minmax(0,1fr) 220px; }
  .mock-card{ display:block; padding:16px; border-left:1px solid var(--line); }
  .mock-card .lbl{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-top:16px; }
  .mock-card .lbl:first-child{ margin-top:0; }
  .mock-card .val{ margin-top:4px; }
  .mock-card .sub{ color:var(--text-2); font-size:13px; margin-top:2px; }
  .mock-card .state{ display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:13px; margin-top:6px; }
  .mock-card .state svg{ width:14px; height:14px; color:var(--text-3); }
}

/* ---------------------------------------------------------------- 3 · qué hace */
.h-row{ position:relative; }
.anchor-slot{ display:none; }
.cards{ margin-top:32px; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.card{ background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:24px; box-shadow:var(--shadow-card); transition:border-color 160ms ease-out; }
.card .ic{ width:24px; height:24px; color:var(--text-2); }
.card h3{ margin-top:20px; }
.card p{ margin-top:8px; color:var(--text-2); }
.also{ margin-top:32px; color:var(--text-2); max-width:60ch; }
@media (min-width:768px){ .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; } }
@media (min-width:1024px){
  .h-row{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:center; }
  .h-row .h-block{ grid-column:1 / span 8; }
  .anchor-slot{ display:block; grid-column:10 / span 3; height:160px; }
  .cards{ width:calc(8 / 12 * 100%); margin-top:48px; }
  .card{ padding:32px; }
  .card:hover{ border-color:var(--line-strong); }
}

/* ---------------------------------------------------------------- 4 · control */
.ctrl-grid{ display:grid; grid-template-columns:minmax(0,1fr); }
.points{ margin-top:32px; display:flex; flex-direction:column; gap:20px; }
.points li{ display:flex; gap:12px; }
.points svg{ width:20px; height:20px; color:var(--text-2); flex:none; margin-top:3px; }
.points b{ display:block; font-weight:400; color:var(--text); }
.points span{ display:block; color:var(--text-2); margin-top:2px; }
.stage-control{ height:240px; margin-bottom:16px; }
.mini{ background:var(--surface-1); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-card); font-size:14px; line-height:1.45; overflow:hidden; }
.mini-head{ padding:16px; border-bottom:1px solid var(--line); display:grid; gap:6px; justify-items:start; }
.mini-head b{ font-weight:400; }
.mini-state{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); }
.mini-state svg{ width:14px; height:14px; }
.mini-state .dot{ margin:0 4px; }
.mini-body{ padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--night); }
.summary{ border:1px solid var(--line-strong); border-radius:12px; padding:12px; color:var(--text); }
.summary .lbl{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-300); margin-bottom:4px; }
.b-resume{ animation:none; visibility:hidden; }
.b-resume.on{ visibility:visible; }
.b-resume.show{ animation:bubbleIn 240ms var(--ease-out) both; }
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.mini-foot{ padding:12px 16px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.mini-note{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-3); }
.mini-note svg{ width:14px; height:14px; }
.mini-foot .btn{ min-height:44px; }
@media (min-width:1024px){
  .ctrl-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; grid-template-rows:auto auto; }
  .ctrl-text{ grid-column:1 / span 6; grid-row:1; }
  .mini{ grid-column:1 / span 6; grid-row:2; width:440px; max-width:100%; margin-top:48px; }
  .stage-control{ grid-column:8 / span 5; grid-row:1 / span 2; height:auto; min-height:360px; }
}

/* ---------------------------------------------------------------- 5 · contratar */
.stage-hire{ height:200px; }
.steps{ margin-top:8px; display:flex; flex-direction:column; gap:24px; position:relative; }
.steps li{ position:relative; display:flex; gap:16px; color:var(--text-2); }
.steps li b{ font-weight:400; color:var(--text); }
.steps li::after{ content:""; position:absolute; left:15.5px; top:40px; bottom:-20px; width:1px; background:var(--line); }
.steps li:last-child::after{ display:none; }
.num{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; flex:none; font-size:13px; color:var(--violet-300); font-feature-settings:"tnum"; }
.steps li > div{ padding-top:4px; max-width:60ch; }
@media (min-width:1024px){
  .hire-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:start; }
  .hire-side{ grid-column:1 / span 4; position:sticky; top:112px; }
  .stage-hire{ height:300px; }
  .steps{ grid-column:6 / span 6; margin-top:0; gap:32px; }
}

/* ---------------------------------------------------------------- 6 · planes */
.plans-quick{ margin-top:24px; }
.plans-quick .btn{ min-height:52px; width:100%; }
.quick-mail{ margin-top:12px; font-size:16px; line-height:1.5; color:var(--text-2); }
.mailrow{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 8px; vertical-align:middle; }
.mailrow a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-underline-offset:3px; }
.copy{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--line-strong); background:none; color:var(--text-2); font-size:14px; cursor:pointer; transition:border-color var(--t-press) ease-out, color var(--t-press) ease-out; }
.copy:hover{ border-color:rgba(255,255,255,.28); color:var(--text); }
.copy.is-done{ color:var(--violet-300); border-color:rgba(184,166,255,.4); }
.stage-plans{ height:190px; }
.panel{ margin-top:8px; background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:8px 20px 32px; box-shadow:var(--shadow-card); }
@media (min-width:641px){ .panel{ padding:16px 32px 32px; } .plans-quick .btn{ width:auto; } }
.plans-head .lead{ max-width:52ch; }
.blocks{ display:grid; grid-template-columns:minmax(0,1fr); }
.blk{ padding-block:24px; border-top:1px solid var(--line); }
.blk:first-child{ border-top:0; }
.blk .lbl{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.blk h3{ margin-top:8px; }
.blk ul{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.blk li{ position:relative; padding-left:20px; color:var(--text-2); }
.blk li::before{ content:""; position:absolute; left:2px; top:.72em; width:8px; height:1px; background:var(--text-3); }
.wa-note{ margin:16px 0; padding:12px 16px; border:1px solid var(--line); border-radius:12px; font-size:15px; line-height:1.5; color:var(--text-2); max-width:72ch; }
.assure{ margin-top:8px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; color:var(--text-2); }
.assure li{ display:flex; align-items:center; gap:8px; }
.assure svg{ width:18px; height:18px; flex:none; color:var(--text-2); }
.panel-cta{ margin-top:32px; }
.cta-line{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.panel-cta .btn{ min-height:52px; width:100%; }
.cta-note{ margin-top:12px; font-size:16px; line-height:1.5; color:var(--text-2); max-width:60ch; }
.who{ margin-top:16px; font-size:16px; line-height:1.5; color:var(--text-2); max-width:60ch; padding-top:16px; border-top:1px solid var(--line); }
.cta-sec{ margin-top:16px; color:var(--text-2); }
.cta-sec a{ color:var(--text); text-underline-offset:3px; }
@media (min-width:1024px){
  .plans-top{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; align-items:center; }
  .plans-head{ grid-column:1 / span 7; }
  .stage-plans{ grid-column:8 / span 5; height:auto; min-height:320px; align-self:stretch; }
  .panel{ margin-top:32px; padding:16px 48px 48px; }
  .blocks{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
  .blk{ border-top:0; padding-top:32px; padding-bottom:32px; }
  .blk + .blk{ border-left:1px solid var(--line); padding-left:24px; margin-left:-12px; }
  .assure{ flex-direction:row; gap:24px; flex-wrap:nowrap; margin-top:0; font-size:16px; }
  .assure li{ flex:0 1 auto; white-space:nowrap; }
  .cta-line{ flex-direction:row; align-items:center; gap:20px; }
  .panel-cta .btn{ width:auto; min-height:48px; }
}

/* ---------------------------------------------------------------- 7 · preguntas */
.faq-wrap{ max-width:calc(760px + 2 * var(--gutter)); }
.faq{ margin-top:32px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; min-height:56px; padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:17px; line-height:1.4; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:20px; height:20px; flex:none; color:var(--text-2); transition:transform var(--t-state) var(--ease-out); }
.faq details[open] summary svg{ transform:rotate(45deg); }
.faq-body{ overflow:hidden; }
.faq-inner{ padding-bottom:20px; color:var(--text-2); max-width:60ch; }
.faq-inner a{ color:var(--text); text-underline-offset:3px; }

/* ---------------------------------------------------------------- 8 · cierre */
.cierre{ text-align:center; padding-block:96px; }
.close-block{ display:flex; flex-direction:column; align-items:center; }
.word{ width:240px; height:auto; aspect-ratio:936/126; color:var(--text); }
html.js .word{ opacity:0; transition:opacity 400ms linear; }
html.js .word.on, html.is-static .word{ opacity:1; }
.close-block .h2{ margin-top:24px; max-width:16ch; }
.close-block .lead{ margin-top:16px; max-width:34ch; margin-inline:auto; }
.close-cta{ margin-top:32px; display:flex; flex-direction:column; gap:12px; width:100%; }
.close-cta .btn{ min-height:52px; white-space:normal; text-align:center; line-height:1.2; }
@media (min-width:641px){ .close-cta{ flex-direction:row; justify-content:center; width:auto; } .close-cta .btn{ min-height:48px; } }
@media (min-width:1024px){
  .cierre{ min-height:100svh; display:flex; align-items:center; padding-block:var(--sec-y); }
  .cierre .wrap{ width:100%; }
  .word{ width:440px; }
}

/* ---------------------------------------------------------------- footer */
.foot{ background:var(--night); border-top:1px solid var(--line); color:var(--text-2); padding-block:48px max(48px, env(safe-area-inset-bottom)); font-size:16px; }
.foot .wm{ width:96px; height:auto; aspect-ratio:936/126; color:var(--text); }
.foot-links{ margin-top:24px; display:flex; flex-direction:column; }
.foot-links li{ min-height:44px; display:flex; align-items:center; }
.foot-links a{ text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center; }
@media (min-width:1024px){
  .foot{ padding-block:64px; }
  .foot-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .foot-links{ margin-top:0; flex-direction:row; gap:32px; }
}

/* lenis (solo desktop) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* QA: ocultar texto para medir el fondo */
html.qa-hide-text main *, html.qa-hide-text .nav *{ color:transparent !important; }
html.qa-hide-text main .card, html.qa-hide-text main .mock, html.qa-hide-text main .panel, html.qa-hide-text main .mini, html.qa-hide-text .night-block::before{ visibility:hidden; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ scroll-behavior:auto !important; }
}

/* 14: sin lógica día/noche en el hero: la tinta es clara siempre (estudio negro y cosmos son oscuros) */
@media (min-width:1024px){ .hero .note{ max-width:60ch; } }

/* celu y tablet: el póster es el recorte del hueco del orbe (mismo encuadre que el canvas: orbe al 74 % del alto, centrado) */
@media (max-width:820px){
  .poster{ top:calc(56px + env(safe-area-inset-top)); height:clamp(220px, 30svh, 280px); }
  .poster img{ object-fit:contain; }
}
@media (max-width:820px) and (max-height:699.98px){ .poster{ height:max(140px, 20svh); } }
@media (min-width:641px) and (max-width:1023.98px){ .hero{ min-height:calc(100svh - var(--nav-h)); } }
@media (min-width:641px) and (max-width:1023.98px){ .hero{ display:flex; flex-direction:column; justify-content:center; } }

/* tablet horizontal (puntero grueso): objetivos de 44 px en el nav */
@media (min-width:1024px) and (pointer:coarse){ .nav-links a{ min-height:44px; } .btn-nav{ min-height:44px; } }
/* 1024–1279: la fila de canales entra en una línea */
@media (min-width:1024px) and (max-width:1279.98px){ html:not(.hero-stacked) .hero-col{ max-width:54%; } .channels{ gap:4px 12px; } }

/* r3: links de mail en línea con zona táctil de 44 px sin mover el renglón */
.faq-inner a[href^="mailto:"]{ display:inline-block; padding-block:12px; margin-block:-12px; line-height:20px; }

/* ---------------------------------------------------------------- r4 */
/* H2 enorme en Control: corta el registro uniforme de los H2 */
.h2-xl{ font-size:clamp(2.75rem, 1.4rem + 5.4vw, 6.5rem); line-height:1; letter-spacing:-0.035em; max-width:12ch; }
.h2-xl + .lead{ margin-top:24px; }

/* micro-maquetas de producto dentro de las cards de "Qué hace" */
.micro{ background:var(--night); border:1px solid var(--line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.4; min-height:132px; }
.mc-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text-3); }
.mc-tag{ display:inline-flex; align-items:center; gap:6px; color:var(--violet-300); font-feature-settings:"tnum"; }
.mc-tag svg, .mc-line svg{ width:14px; height:14px; flex:none; }
.mc-ch{ color:var(--text-3); }
.mb{ max-width:88%; padding:7px 10px; border-radius:10px; color:var(--text); }
.mb-in{ background:var(--surface-3); border-bottom-left-radius:3px; align-self:flex-start; }
.mb-out{ background:var(--surface-2); border:1px solid var(--line-strong); border-bottom-right-radius:3px; align-self:flex-end; }
.mc-hand{ display:flex; align-items:center; gap:10px; padding:8px 0; }
.mc-pill{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-2); }
.mc-pill.is-on{ border-color:rgba(184,166,255,.45); color:var(--text); background:var(--violet-tint); }
.mc-arrow{ width:18px; height:18px; color:var(--violet-300); }
.mc-line{ display:flex; align-items:center; gap:6px; color:var(--text-2); }
.mc-line svg{ color:var(--violet-300); }
.mc-sum{ border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; color:var(--text); }
.mc-lbl{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-300); margin-bottom:4px; }
.card:hover .micro{ border-color:var(--line-strong); }
.micro{ transition:border-color 160ms ease-out; }


/* menos vacío alrededor de Planes y Preguntas */
@media (min-width:1024px){
  #contratar{ padding-bottom:24px; }
  .sec-plans{ padding-bottom:56px; }
  #preguntas{ padding-top:56px; }
  .stage-plans{ min-height:300px; }
}
/* tablet vertical: el hero arranca arriba (sin ~150 px vacíos sobre el hueco del orbe) */
@media (min-width:641px) and (max-width:1023.98px) and (orientation:portrait){
  .hero{ justify-content:flex-start; min-height:0; }
  #stage-hero{ margin-top:16px; }
  .hero-in{ padding-bottom:56px; }
}

/* ---------------------------------------------------------------- historia nueva (copy v2, 23/10) */
/* una palabra en serif itálica en el H1 (T4: misma tinta) */
.h1 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:0; }
.h1{ max-width:16ch; }
/* títulos grandes: una idea por pantalla */
.h2-big{ font-size:clamp(2.125rem, 1.25rem + 3.6vw, 4.25rem); line-height:1.04; letter-spacing:-0.03em; max-width:14ch; }
.h2-big + .lead{ margin-top:20px; }

/* Atiende por vos: el control en una línea, debajo de la bandeja */
.ctrl-row{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 24px; color:var(--text); font-size:15px; line-height:1.4; }
.ctrl-row li{ display:inline-flex; align-items:center; gap:8px; min-height:32px; }
.ctrl-row svg{ width:18px; height:18px; flex:none; color:var(--violet-300); }
.ctrl-row + .mock-note{ margin-top:8px; }

/* secciones de una idea */
.feat .feat-vis{ margin-top:32px; }
.orb-slot{ display:none; }
/* celu (como Control en la versión aprobada): el anillo chico de Mercado va entre el texto y la tarjeta */
@media (max-width:1023.98px){
  #orb-mer{ display:block; height:240px; margin:16px 0 -16px; }
}
/* compu (como Qué hace / Control en la versión aprobada): texto + tarjeta en la columna izquierda, una debajo de la
   otra, y el orbe grande AL COSTADO, en la columna derecha (la ancla es .orb-slot, estirada a lo alto de la sección) */
@media (min-width:1024px){
  .feat{ min-height:88svh; display:flex; align-items:center; }
  .feat > .wrap{ width:100%; }
  .feat-grid{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; }
  .feat-text, .feat.flip .feat-text{ grid-column:1 / span 6; grid-row:1; }
  .feat .feat-vis, .feat.flip .feat-vis{ grid-column:1 / span 6; grid-row:2; margin-top:32px; }
  /* a lo alto de la sección, pero nunca más que una pantalla: en ventanas bajas (2000×620) el orbe queda al lado del
     título y no a mitad de una sección más alta que la pantalla */
  .orb-slot{ display:block; position:absolute; top:0; left:calc(7 / 12 * 100%); right:var(--gutter); height:min(100%, calc(100svh - var(--nav-h) - 48px)); margin:0; }
}

/* maquetas simples de producto (mismo lenguaje que la bandeja) */
.ui{ position:relative; background:var(--surface-1); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-card); font-size:15px; line-height:1.45; color:var(--text); overflow:hidden; }
.ui-bar{ min-height:48px; display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ui-title{ font-size:13px; color:var(--text-2); }
.ui-bar .status, .ui-bar .soon{ margin-left:auto; }
.ui-body{ padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--night); }
@media (min-width:1024px){ .ui-body{ padding:24px; gap:14px; } }
.ui-hi{ color:var(--text-2); font-size:14px; }
.ui-item{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-1); }
.ui-item p{ color:var(--text); }
.ui-item p b{ display:block; font-weight:400; color:var(--text); margin-bottom:2px; }
.ui-item p span{ display:block; color:var(--text-2); }
@media (min-width:641px){ .ui-item{ flex-direction:row; align-items:baseline; gap:14px; } .ui-item .tag{ flex:none; width:104px; justify-content:center; } }
.tag{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font-size:13px; line-height:1; white-space:nowrap; border:1px solid var(--line-strong); color:var(--text-2); }
.tag svg{ width:14px; height:14px; flex:none; }
.tag-v{ background:var(--violet-tint); border-color:rgba(184,166,255,.45); color:var(--text); }
.tag-v svg{ color:var(--violet-300); }
.tag-o{ border-color:rgba(255,255,255,.28); color:var(--text); }
.tag-w{ color:var(--text-2); }
.ui-lbl{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.ui-lbl:not(:first-child){ margin-top:8px; }
.ui-val{ color:var(--text); font-size:16px; margin-top:-6px; }
.ui-rows{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; background:var(--surface-1); margin-top:-4px; }
.ui-rows li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-top:1px solid var(--line); }
.ui-rows li:first-child{ border-top:0; }
.ui-rows small{ display:block; font-size:13px; color:var(--text-3); }
.trend{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--text-2); white-space:nowrap; }
.trend svg{ width:16px; height:16px; }
.trend.is-up{ color:var(--text); }
.trend.is-up svg{ color:var(--violet-300); }
.ui-foot{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-3); padding-top:4px; }
.ui-foot svg{ width:16px; height:16px; flex:none; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:-4px; }
.pill{ display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; border:1px solid rgba(184,166,255,.4); background:var(--violet-tint); color:var(--text); font-size:13px; }
.ui-msg{ align-self:stretch; max-width:none; margin-top:-4px; font-size:15px; }
.ui-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.ui-btn{ display:inline-flex; align-items:center; min-height:36px; padding:0 16px; border-radius:999px; border:1px solid var(--line-strong); font-size:14px; color:var(--text); }
.ui-btn.is-pri{ background:var(--violet-600); border-color:var(--violet-600); color:#fff; }
.soon{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; border:1px solid rgba(184,166,255,.5); color:var(--violet-300); font-size:12px; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; }
.eyebrow .soon{ margin-left:8px; }

/* contenido (próximamente) */
.con{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:12px; }
.con-photo{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; color:var(--text-2); }
.con-shot{ width:120px; aspect-ratio:4/5; border-radius:10px; border:1px dashed var(--line-strong); background:radial-gradient(120% 90% at 50% 35%, #2A2734 0%, #15131C 70%); display:grid; place-items:center; }
.con-shot svg{ width:46px; height:58px; color:var(--text); }
.con-arrow{ width:24px; height:24px; color:var(--violet-300); transform:rotate(90deg); }
.con-outs{ width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.con-out{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; color:var(--text-2); min-width:0; }
.con-frame{ position:relative; width:100%; max-width:104px; aspect-ratio:9/16; border:1px solid var(--line-strong); border-radius:10px; background:radial-gradient(120% 80% at 50% 40%, #2A2734 0%, #15131C 75%); display:grid; place-items:center; overflow:hidden; }
.con-lamp{ width:38%; height:auto; aspect-ratio:64/80; color:var(--text); }
.con-play{ position:absolute; left:8px; bottom:8px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; }
.con-play svg{ width:14px; height:14px; color:#fff; }
.con-bar{ position:absolute; left:8px; right:8px; top:8px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); }
.con-cap{ position:absolute; left:8px; right:8px; bottom:8px; font-style:normal; font-size:12px; line-height:1.25; color:var(--text); text-align:center; background:rgba(10,8,23,.7); border-radius:6px; padding:4px; }
.con-text{ background:var(--surface-2); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px; padding:10px; }
.con-text p{ font-size:12px; line-height:1.35; color:var(--text); }
.con-text i{ display:block; height:5px; border-radius:3px; background:rgba(255,255,255,.16); }
.con-text i + i{ width:60%; }
@media (min-width:641px){
  .con{ grid-template-columns:auto auto minmax(0,1fr); align-items:center; justify-items:stretch; gap:16px; }
  .con-arrow{ transform:none; }
}