/* Empresas (PROTOTIPO nivel Awwwards): antes y después, red de clientes y armador de propuesta */

/* ---------- Antes y después ---------- */
.ad { padding-block: clamp(56px, 8vw, 104px) 0; }
.ad h2 em { font-style: italic; color: var(--accent); }
.ad-box {
  --pos: 50%; position: relative; margin-top: 28px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 8.2;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); user-select: none; touch-action: pan-y;
}
.ad-pane { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ad-despues { clip-path: inset(0 0 0 var(--pos)); }
.ad-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #f4f1ea; color: #333; }
.ad-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: .82rem; }
.ad-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d6d1c4; }
.ad-bar span { margin-left: 8px; color: inherit; opacity: .75; font-family: var(--f-data); }
.ad-sheet { padding: 14px 16px; display: grid; align-content: start; font-family: var(--f-data); font-size: clamp(.62rem, 1.15vw, .88rem); transform: rotate(-.6deg); }
.ad-row { display: grid; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); }
.ad-row > * { border: 1px solid #ddd8cb; margin: -1px 0 0 -1px; padding: .5em .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 2.3em; }
.ad-row b { background: #e9e5da; color: #8a8576; font-weight: 600; text-align: center; }
.ad-hd b { background: #e9e5da; }
.ad-row .mal { color: #c0392b; font-weight: 700; background: #fbe3df; }
.ad-row .am { background: #fff3a8; }
.ad-nota {
  position: absolute; padding: 10px 14px; background: #ffe680; color: #5a4a00; font-size: clamp(.68rem, 1.1vw, .9rem); font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); max-width: 16ch; line-height: 1.3;
}
.ad-nota.n1 { left: 54%; top: 26%; transform: rotate(4deg); }
.ad-nota.n2 { left: 8%; bottom: 9%; transform: rotate(-3deg); background: #ffd0c7; color: #6b1f12; }

.ad-despues { background: var(--surface); color: var(--ink); }
.ad-despues .ad-bar { border-color: var(--line); }
.ad-despues .ad-bar i { background: var(--line); }
.ad-despues .ad-bar i:first-child { background: var(--teal); }
.ad-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: clamp(8px, 1.4vw, 16px); padding: clamp(10px, 2vw, 22px); }
.ad-kpi, .ad-chart { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: clamp(8px, 1.4vw, 16px); display: grid; align-content: start; gap: 4px; min-width: 0; }
.ad-kpi span, .ad-chart > span { font-size: clamp(.6rem, 1vw, .82rem); color: var(--muted); }
.ad-kpi strong { font-family: var(--f-display); font-size: clamp(1rem, 2.6vw, 2rem); letter-spacing: -0.03em; }
.ad-kpi em { font-style: normal; font-family: var(--f-data); font-size: clamp(.6rem, 1vw, .82rem); color: var(--teal); }
.ad-chart { grid-column: span 2; grid-template-rows: auto minmax(0, 1fr); }
.ad-bars { display: flex; align-items: flex-end; gap: 8%; padding: 8px 4px 0; min-height: 0; height: 100%; }
.ad-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); transform-origin: bottom; }
.ad-bars i.hoy { background: var(--accent); }
.ad-box.ad-mas-despues .ad-bars i { animation: ad-crece .8s var(--aw-ease, ease) both; animation-delay: calc(var(--h) * 300ms); }
@keyframes ad-crece { from { transform: scaleY(.2); } }
.ad-dona { grid-column: span 1; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ad-dona svg { width: min(100%, 120px); transform: rotate(-90deg); }
.ad-dona circle { fill: none; stroke-width: 7; }
.ad-dona .d1 { stroke: var(--accent); stroke-dasharray: 62 38; }
.ad-dona .d2 { stroke: var(--teal); stroke-dasharray: 38 62; stroke-dashoffset: -62; }
.ad-dona ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; font-size: clamp(.58rem, .95vw, .78rem); color: var(--muted); }
.ad-dona li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 5px; }
.ad-dona li + li::before { background: var(--teal); }

.ad-linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--on-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); pointer-events: none; }
.ad-tirador {
  position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
  transition: transform .3s var(--aw-ease, ease);
}
.ad-tirador svg { width: 24px; height: 24px; }
.ad-box:hover .ad-tirador, .ad-range:focus-visible ~ .ad-linea .ad-tirador { transform: scale(1.12); }
.ad-range:focus-visible + * , .ad-box:has(.ad-range:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.ad-et { position: absolute; bottom: 14px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; transition: opacity .3s; }
.ad-et-a { left: 14px; background: #3a352a; color: #f4f1ea; }
.ad-et-d { right: 14px; background: var(--brand); color: #fff; }
.ad-mas-despues .ad-et-a, .ad-mas-antes .ad-et-d { opacity: 0; }
.ad-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.aw-cursor .ad-range { cursor: ew-resize; }
.ad-pares { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ad-pares li { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ad-pares span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.ad-pares strong { color: var(--ink); }
.ad-pares strong::before { content: "→ "; color: var(--teal); }

@media (max-width: 760px) {
  .ad-box { aspect-ratio: 4 / 5; }
  .ad-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr); }
  .ad-kpi:nth-child(3) { display: none; }
  .ad-chart { grid-column: span 2; }
  .ad-dona { grid-column: span 2; grid-template-columns: auto auto; align-items: center; gap: 16px; }
  .ad-dona svg { width: 90px; }
  .ad-row { grid-template-columns: 24px repeat(4, minmax(0, 1fr)); }
  .ad-row > :nth-child(n + 6) { display: none; }
  .ad-nota.n1 { left: 40%; top: 58%; }
  .ad-pares { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Red de clientes ---------- */
.con-red { position: relative; }
.red-clientes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.con-red .logo-wall, .con-red .clients-title { position: relative; }
.con-red .logo-wall li { padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--sky) 60%, var(--bg)); }

/* ---------- Armador de propuesta ---------- */
.arm { display: grid; gap: 16px; }
.arm[hidden], .arm-paso[hidden], .arm-top[hidden], .arm-saltar[hidden] { display: none; }
.biz-form:has(.lead-done:not([hidden])) .arm { display: none; }
.arm-top { display: flex; justify-content: space-between; align-items: center; }
.arm-step { font-family: var(--f-data); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.arm-prog { display: flex; gap: 5px; }
.arm-prog i { width: 26px; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.arm-prog i.on { background: var(--accent); }
.arm-paso { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; animation: arm-in .45s var(--aw-ease, ease) both; }
@keyframes arm-in { from { opacity: 0; transform: translateX(18px); } }
.arm-paso legend, .arm-fin h3 { font-family: var(--f-display); font-size: var(--step-2); letter-spacing: -0.02em; font-weight: 600; padding: 0; margin-bottom: 14px; }
.arm-fin h3 { margin: 0; }
.arm-ayuda { color: var(--muted); margin: -10px 0 0; font-size: .92rem; }
.arm-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arm-opts--3 { grid-template-columns: minmax(0, 1fr); }
.arm-opt {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--bg); transition: border-color .2s, background .2s, transform .2s;
}
.arm-opt strong { font-family: var(--f-display); font-size: 1.15rem; }
.arm-opt span { color: var(--muted); font-size: .9rem; }
.arm-opt:hover, .arm-opt:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.arm-opt[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.arm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.arm-chip {
  all: unset; cursor: pointer; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 600; font-size: .92rem;
  transition: border-color .2s, background .2s, color .2s;
}
.arm-chip:hover, .arm-chip:focus-visible { border-color: var(--accent); }
.arm-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.arm-acc { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.arm-acc .btn[disabled] { opacity: .45; pointer-events: none; }
.arm-atras, .arm-saltar { all: unset; cursor: pointer; color: var(--muted); font-size: .92rem; padding: 8px 0; }
.arm-atras:hover, .arm-saltar:hover, .arm-atras:focus-visible, .arm-saltar:focus-visible { color: var(--accent); text-decoration: underline; }
.arm-saltar { justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.arm-cambiar { justify-self: start; }
.arm-fin { gap: 6px; }
.arm-fin .arm-step { margin: 0; }
/* Ya elegido en el armador: el formulario no lo vuelve a preguntar */
.biz-form.armado .field:has(#bf-tamano), .biz-form.armado .topic-pick { display: none; }

.arm-vista {
  margin-top: 26px; padding: 20px; border-radius: 18px; background: color-mix(in srgb, var(--on-deep) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-deep) 16%, transparent); display: grid; gap: 16px; max-width: 440px;
}
.arm-vista-t { font-family: var(--f-data); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-deep-accent); margin: 0; }
.arm-equipo { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; }
.arm-equipo i {
  aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--on-deep) 14%, transparent);
  transform: scale(.55); transition: transform .45s var(--aw-ease, ease), background .4s; transition-delay: calc(var(--i) * 12ms);
}
.arm-equipo i.on { transform: scale(1); background: var(--on-deep-accent); }
.arm-equipo i.on[data-c="1"] { background: #3cc4b8; }
.arm-equipo i.on[data-c="2"] { background: #e4edf5; }
/* La modalidad cambia la forma: en la empresa quedan juntos, a distancia cada uno en su lugar */
.arm-vista[data-modo="1"] .arm-equipo i.on { border-radius: 4px; }
.arm-vista[data-modo="2"] .arm-equipo i.on:nth-child(even) { border-radius: 4px; }
.arm-res { margin: 0; display: grid; gap: 10px; }
.arm-res div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.arm-res dt { color: color-mix(in srgb, var(--on-deep) 60%, transparent); font-size: .88rem; }
.arm-res dd { margin: 0; color: color-mix(in srgb, var(--on-deep) 55%, transparent); font-size: .95rem; }
.arm-res dd.ok { color: var(--on-deep); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .arm-paso, .ad-box.ad-mas-despues .ad-bars i { animation: none; }
  .arm-equipo i { transition: none; }
}

/* Ajustes del .md de decisiones */
.biz-hero-nota { margin-top: 18px; color: var(--muted); max-width: 46ch; font-size: .95rem; line-height: 1.5; }
.exclusivas { padding-block: clamp(40px, 6vw, 72px) 0; }
.excl-pendiente { margin-top: 20px; padding: 28px; border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.arm-vista[data-modo="3"] .arm-equipo i.on { opacity: .6; }

/* Capacitaciones exclusivas para empresas */
.excl-grupo { margin-top: clamp(24px, 3vw, 36px); }
.excl-grupo h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 14px; }
.excl-grupo h3 span { font-family: var(--f-data); font-size: .78rem; padding: 2px 9px; border-radius: 999px; color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.excl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.excl-card { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .25s, box-shadow .25s; }
.excl-card strong { font-family: var(--f-display); font-size: 1.05rem; line-height: 1.25; }
.excl-card span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.excl-card small { display: flex; justify-content: space-between; font-family: var(--f-data); font-size: .74rem; color: var(--faint); letter-spacing: .04em; }
.excl-card b { color: var(--accent); transition: transform .25s; }
.excl-card:hover, .excl-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.excl-card:hover b { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .excl-card, .excl-card b { transition: none; } }