/* ==========================================================================
   sotowismify · 95-apply — «Cuéntame tu caso» (conversión)
   Cajas dentro de cajas: panel .glass → «Qué pasa después» + dos grupos (Tu caso · Cómo te contacto)
   → campos. Protagonista: el anillo del paso 01 y la línea hacia el 02 se llenan con el formulario
   (--p de .ap-steps, 0 → 1, lo mueve apply.js); al enviar, 01 queda hecho y 02 «en curso».
   TEMA CLARO (17-oct-2026): cajas blancas / blanco roto, tinta #14181f, sombras cálidas suaves. Monocromo salvo el
   botón «Enviar solicitud» (.btn-lime, uno de los pocos CTA en lima); seleccionados en tinta, nunca en lima. Sin
   backdrop-filter (todo es receta de cristal plana), hovers que mueven con `translate` y solo con
   (hover:hover), checks/chevrons como pseudo-elementos, nada de animar width/height (el «thumb» de
   pedidos/mes se mueve con clip-path, los acordeones con grid-template-rows).
   Bucles CSS (ping de la píldora, anillo «en curso», brillo de envío) parados fuera de pantalla:
   solo corren con .s-apply.is-live (IntersectionObserver en apply.js).
   Estados: .ap-form.is-notify (aviso de un recurso: solo nombre, email, WhatsApp y casilla) · .no-js
   (sin JavaScript no hay envío: se oculta el botón y el <noscript> ofrece WhatsApp). En móvil (≤640 px)
   «Qué pasa después» va debajo del formulario para que al llegar a #aplicar se vea el primer campo.
   ========================================================================== */

.s-apply { --ap-gap: clamp(10px, 1.1vw, 14px); --ap-r: 28px; --ap-ri: 16px; }

/* ---------- Cabecera ---------- */
.s-apply .ap-head { display: grid; gap: 18px; margin-bottom: clamp(28px, 3.6vw, 52px); }
.s-apply .ap-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.s-apply .ap-title { font-size: clamp(44px, 8.2vw, 124px); letter-spacing: -0.055em; line-height: 0.92; max-width: 15ch; }
/* .fade-y más suave: en EN (y en móvil) el titular ocupa dos líneas y la segunda no debe apagarse */
.s-apply .ap-title.fade-y { -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.74) 100%); mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.74) 100%); }
.s-apply .ap-lead { max-width: 62ch; }

.s-apply .ap-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px 0 12px; border-radius: var(--pill);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-1); white-space: nowrap;
}
.s-apply .ap-pill-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); flex: none; }
.s-apply .ap-pill-dot::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(20, 24, 31, 0.5);
  opacity: 0; animation: ap-ping 2.6s var(--ease-out) infinite; animation-play-state: paused;
}
.s-apply.is-live .ap-pill-dot::after { animation-play-state: running; }
@keyframes ap-ping { 0% { transform: scale(0.4); opacity: 0.9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- Panel (caja exterior) ---------- */
.s-apply .ap-panel { display: grid; gap: var(--ap-gap); padding: var(--ap-gap); border-radius: var(--ap-r); }
.s-apply .ap-panel > .box, .s-apply .ap-group, .s-apply .ap-ok-next, .s-apply .ap-ok-recap { border-radius: var(--ap-ri); }

/* ---------- Qué pasa después (protagonista) ---------- */
.s-apply .ap-next { padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px); }
.s-apply .ap-next-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(16px, 1.8vw, 22px); }
.s-apply .ap-meter { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.s-apply .ap-meter b { min-width: 3ch; text-align: right; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--fg); }
/* rótulo del medidor: «Completado 0 %» (sin él, el «0 %» se lee como una cifra suelta) */
.s-apply .ap-meter-l { margin-right: 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

.s-apply .ap-steps { --p: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-apply .ap-step {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 44px auto;
  column-gap: 12px; row-gap: 14px; align-items: center; align-content: start;
}
.s-apply .ap-node { grid-column: 1; grid-row: 1; position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.s-apply .ap-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.s-apply .ap-ring circle { fill: none; stroke-width: 1.5; }
.s-apply .ap-ring-t { stroke: rgba(15, 20, 30, 0.14); transition: stroke 0.35s ease; }
.s-apply .ap-ring-p { stroke: var(--fg); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.6s var(--ease); }
.s-apply .ap-step:first-child .ap-ring-p { stroke-dashoffset: calc(100 - var(--p) * 100); transition: none; }
.s-apply .ap-num { position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-3); transition: color 0.3s ease, opacity 0.3s ease; }
.s-apply .ap-step.is-current .ap-num { color: var(--fg); }
/* hecho: disco de tinta + check claro (pseudo-elementos) */
.s-apply .ap-node::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--inv-bg);
  transform: scale(0); transition: transform 0.55s var(--ease);
}
.s-apply .ap-node::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 13px; margin: -8.5px 0 0 -3.5px;
  border-right: 2px solid var(--inv-fg); border-bottom: 2px solid var(--inv-fg);
  transform: rotate(45deg) scale(0); transition: transform 0.45s var(--ease) 0.12s;
}
.s-apply .ap-step.is-done .ap-node::before { transform: scale(1); }
.s-apply .ap-step.is-done .ap-node::after { transform: rotate(45deg) scale(1); }
.s-apply .ap-step.is-done .ap-num { opacity: 0; }
/* en curso (paso 02 tras enviar): arco que gira */
.s-apply .ap-step.is-active .ap-ring-p { stroke-dashoffset: 72; }
.s-apply .ap-step.is-active .ap-ring { animation: ap-rot 2.2s linear infinite; animation-play-state: paused; }
.s-apply.is-live .ap-step.is-active .ap-ring { animation-play-state: running; }
@keyframes ap-rot { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

.s-apply .ap-link { grid-column: 2; grid-row: 1; position: relative; height: 2px; margin-right: 14px; border-radius: 2px; background: rgba(15, 20, 30, 0.1); overflow: hidden; }
.s-apply .ap-link i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 24, 31, 0.35), #14181f); transform-origin: 0 50%; transform: scaleX(0); }
.s-apply .ap-step:first-child .ap-link i { transform: scaleX(var(--p)); }
.s-apply .ap-steps.is-sent .ap-step:first-child .ap-link i { transform: scaleX(1); }
/* enviando: brillo que recorre la línea 01 → 02 */
.s-apply .ap-steps.is-sending .ap-step:first-child .ap-link i,
.s-apply .ap-steps.is-sent .ap-step:nth-child(2) .ap-link i {
  transform: none;
  background: linear-gradient(90deg, rgba(20, 24, 31, 0.1) 0%, rgba(20, 24, 31, 0.9) 45%, rgba(20, 24, 31, 0.1) 70%) 0 0 / 220% 100%;
  animation: ap-flow 1.1s linear infinite; animation-play-state: paused;
}
.s-apply .ap-steps.is-sent .ap-step:nth-child(2) .ap-link i { opacity: 0.45; animation-duration: 2.4s; }
.s-apply.is-live .ap-steps.is-sending .ap-step:first-child .ap-link i,
.s-apply.is-live .ap-steps.is-sent .ap-step:nth-child(2) .ap-link i { animation-play-state: running; }
@keyframes ap-flow { from { background-position: 120% 0; } to { background-position: -100% 0; } }

.s-apply .ap-st { grid-column: 1 / -1; grid-row: 2; align-self: start; display: grid; gap: 4px; align-content: start; padding-right: 22px; }
.s-apply .ap-st b { font-size: 14px; font-weight: 650; letter-spacing: -0.012em; color: var(--fg); }
.s-apply .ap-st span { font-size: 12.5px; line-height: 1.55; color: var(--fg-3); max-width: 34ch; }
@media (hover: hover) {
  .s-apply .ap-step:hover .ap-ring-t { stroke: rgba(15, 20, 30, 0.34); }
  .s-apply .ap-step:hover .ap-num { color: var(--fg); }
}

/* ---------- Formulario ---------- */
.s-apply .ap-stage { display: grid; min-width: 0; }
.s-apply .ap-form { display: grid; gap: var(--ap-gap); min-width: 0; }
.s-apply .ap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ap-gap); align-items: stretch; }
.s-apply .ap-group { container-type: inline-size; display: grid; gap: 24px; align-content: start; padding: clamp(18px, 2.2vw, 28px); min-width: 0; }
.s-apply .ap-group[data-group="2"] { display: flex; flex-direction: column; }
.s-apply .ap-group[data-group="2"] > .ap-consent-wrap { margin-top: auto; }
.s-apply .ap-legend { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--fg); }
.s-apply .ap-gn {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  border: 1px solid var(--line-2); background: #ffffff;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg-2);
  transition: background 0.45s var(--ease), border-color 0.45s ease, color 0.3s ease;
}
.s-apply .ap-gn::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; margin: -6.5px 0 0 -2.5px;
  border-right: 1.8px solid var(--inv-fg); border-bottom: 1.8px solid var(--inv-fg);
  transform: rotate(45deg) scale(0); transition: transform 0.4s var(--ease) 0.08s;
}
.s-apply .ap-group.is-complete .ap-gn { background: var(--inv-bg); border-color: var(--inv-bg); color: transparent; }
.s-apply .ap-group.is-complete .ap-gn::after { transform: rotate(45deg) scale(1); }

.s-apply .ap-fs { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.s-apply .ap-fs > legend { float: left; width: 100%; margin: 0; padding: 0; }
.s-apply .ap-fld { display: grid; gap: 8px; align-content: start; min-width: 0; }
.s-apply .ap-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
.s-apply .ap-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg-1); }
.s-apply .ap-opt-t { margin-left: 6px; font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }
.s-apply .ap-help { font-size: 11.5px; line-height: 1.5; color: var(--fg-3); }

/* Campos de texto */
.s-apply .ap-ctl { position: relative; min-width: 0; }
.s-apply .ap-ctl input, .s-apply .ap-ctl textarea {
  width: 100%; height: 48px; padding: 0 40px 0 15px; border-radius: 12px;
  background: #ffffff; border: 1px solid rgba(15, 20, 30, 0.16); color: var(--fg); caret-color: var(--fg);
  box-shadow: 0 1px 2px rgba(60, 50, 35, 0.04);
  font-size: 15px; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.35s ease;
}
.s-apply .ap-ctl textarea {
  display: block; height: auto; min-height: 120px; max-height: 360px; padding: 13px 15px 30px;
  line-height: 1.55; resize: vertical; field-sizing: content;
}
/* ≈4,7:1 sobre el campo blanco: los ejemplos de formato tienen que leerse (y distinguirse de lo escrito, en tinta) */
.s-apply .ap-ctl input::placeholder, .s-apply .ap-ctl textarea::placeholder { color: rgba(20, 24, 31, 0.6); opacity: 1; }
.s-apply .ap-ctl input:hover, .s-apply .ap-ctl textarea:hover { border-color: var(--line-3); }
.s-apply .ap-ctl input:focus, .s-apply .ap-ctl textarea:focus {
  border-color: rgba(20, 24, 31, 0.7); background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(20, 24, 31, 0.08), 0 10px 26px rgba(60, 50, 35, 0.08);
}
/* Autorrelleno del navegador: blanco (sin el fondo azulado de Chrome) */
.s-apply .ap-ctl input:-webkit-autofill, .s-apply .ap-ctl input:-webkit-autofill:hover, .s-apply .ap-ctl input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset; box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* Válido: check (pseudo-elemento) */
.s-apply .ap-ctl::after {
  content: ''; position: absolute; right: 17px; top: 50%; width: 5px; height: 10px; margin-top: -7px; pointer-events: none;
  border-right: 1.6px solid var(--fg); border-bottom: 1.6px solid var(--fg);
  transform: rotate(45deg) scale(0); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.25s ease;
}
.s-apply .ap-ctl--ta::after { display: none; }
.s-apply .ap-fld.is-ok .ap-ctl::after { transform: rotate(45deg) scale(1); opacity: 0.9; }
.s-apply .ap-count {
  position: absolute; right: 13px; bottom: 9px; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-4); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 0.25s ease, color 0.25s ease;
}
.s-apply .ap-ctl--ta:focus-within .ap-count, .s-apply .ap-count.is-on { opacity: 1; }
.s-apply .ap-count.is-over { color: var(--fg); }
.s-apply .ap-count b { font-weight: 500; color: var(--fg-2); }

/* Errores por campo */
.s-apply .ap-err { display: none; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--fg); }
.s-apply .ap-err::before, .s-apply .ap-summary-t::before, .s-apply .ap-formerr::before {
  content: '!'; flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-family: var(--font); font-size: 10px; font-weight: 800; line-height: 1;
}
.s-apply .is-err > .ap-err { display: flex; animation: ap-in 0.4s var(--ease-out); }
.s-apply .is-err > .ap-help { display: none; }
.s-apply .is-err .ap-ctl input, .s-apply .is-err .ap-ctl textarea { border-color: rgba(20, 24, 31, 0.78); background-color: #ffffff; box-shadow: 0 0 0 3px rgba(20, 24, 31, 0.07); }
@keyframes ap-in { from { opacity: 0; translate: 0 -4px; } }

/* Interés: tarjetas-radio con la voz de cada puerta */
.s-apply .ap-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s-apply .ap-chip {
  position: relative; display: grid; gap: 5px; align-content: start; min-height: 72px; padding: 14px 40px 13px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(130px 70px at 100% 100%, rgba(244, 240, 232, 0.7), transparent 70%),
    #ffffff;
  box-shadow: 0 1px 2px rgba(60, 50, 35, 0.04);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.35s ease, translate 0.45s var(--ease);
}
.s-apply .ap-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.s-apply .ap-chip-t { font-size: 13.5px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; color: var(--fg); }
.s-apply .ap-chip-d { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; line-height: 1.4; text-transform: uppercase; color: var(--fg-3); transition: color 0.3s ease; }
.s-apply .ap-chip::before {
  content: ''; position: absolute; top: 13px; right: 13px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--line-3); transition: background 0.3s ease, border-color 0.3s ease;
}
.s-apply .ap-chip::after {
  content: ''; position: absolute; top: 16px; right: 19px; width: 4px; height: 7px;
  border-right: 1.5px solid var(--inv-fg); border-bottom: 1.5px solid var(--inv-fg);
  transform: rotate(45deg) scale(0); transition: transform 0.35s var(--ease);
}
/* seleccionada: borde de tinta marcado (doble con el inset) + disco de tinta con check; nunca lima */
.s-apply .ap-chip:has(input:checked) { border-color: #14181f; background: #ffffff; box-shadow: inset 0 0 0 1px #14181f, 0 10px 26px rgba(60, 50, 35, 0.1); }
.s-apply .ap-chip:has(input:checked)::before { background: var(--inv-bg); border-color: var(--inv-bg); }
.s-apply .ap-chip:has(input:checked)::after { transform: rotate(45deg) scale(1); }
.s-apply .ap-chip:has(input:checked) .ap-chip-d { color: var(--fg-1); }
.s-apply .ap-chip:has(input:focus-visible) { outline: 2px solid rgba(20, 24, 31, 0.8); outline-offset: 2px; }
.s-apply .ap-chip.is-flash { animation: ap-flash 1.2s var(--ease-out) 1; }
@keyframes ap-flash {
  0% { box-shadow: inset 0 0 0 1px #14181f, 0 0 0 0 rgba(20, 24, 31, 0.3), 0 10px 26px rgba(60, 50, 35, 0.1); }
  100% { box-shadow: inset 0 0 0 1px #14181f, 0 0 0 14px rgba(20, 24, 31, 0), 0 10px 26px rgba(60, 50, 35, 0.1); }
}
.s-apply .ap-int.is-err .ap-chip { border-color: rgba(20, 24, 31, 0.45); }
@media (hover: hover) {
  .s-apply .ap-chip:hover { translate: 0 -2px; border-color: var(--line-3); }
  .s-apply .ap-chip:has(input:checked):hover { border-color: #14181f; }
}

/* Demo de Cal: solo con «Wismify» marcado (con JS se pliega; sin JS se ve) */
.s-apply .ap-demo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.55s var(--ease); }
.s-apply .ap-demo > div { min-height: 0; overflow: hidden; }
.s-apply .ap-demo-in {
  margin-top: 4px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(15, 20, 30, 0.24);
  background: #ffffff; font-size: 12.5px; line-height: 1.5; color: var(--fg-2);
}
.s-apply .ap-demo-in a {
  position: relative; display: inline-block; padding-right: 17px; color: var(--fg); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(20, 24, 31, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.25s ease;
}
.s-apply .ap-demo-in a::before, .s-apply .ap-demo-in a::after { content: ''; position: absolute; transition: translate 0.35s var(--ease); }
.s-apply .ap-demo-in a::before { right: 1px; top: 50%; width: 10px; height: 1.5px; margin-top: -0.5px; background: currentColor; border-radius: 2px; transform: rotate(-45deg); }
.s-apply .ap-demo-in a::after { right: 1px; top: 50%; width: 6px; height: 6px; margin-top: -4.5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
@media (hover: hover) {
  .s-apply .ap-demo-in a:hover { text-decoration-color: var(--fg); }
  .s-apply .ap-demo-in a:hover::before, .s-apply .ap-demo-in a:hover::after { translate: 2px -2px; }
}
.s-apply .ap-int.is-enh .ap-demo { grid-template-rows: 0fr; }
.s-apply .ap-int.is-enh .ap-demo > div { visibility: hidden; transition: visibility 0s linear 0.55s; }
.s-apply .ap-int.is-enh.is-wismify .ap-demo { grid-template-rows: 1fr; }
.s-apply .ap-int.is-enh.is-wismify .ap-demo > div { visibility: visible; transition-delay: 0s; }

/* Pedidos al mes: control segmentado blanco con «thumb» de tinta que se desliza (clip-path, sin animar width) */
.s-apply .ap-opts {
  --tt: 4px; --tr: 100%; --tb: 4px; --tl: 4px;
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: var(--pill); border: 1px solid rgba(15, 20, 30, 0.16); background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 50, 35, 0.04);
  transition: border-color 0.3s ease;
}
.s-apply .ap-thumb {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: var(--inv-bg);
  clip-path: inset(var(--tt) var(--tr) var(--tb) var(--tl) round 999px); opacity: 0;
  transition: clip-path 0.55s var(--ease), opacity 0.3s ease;
}
.s-apply .ap-opts.has-sel .ap-thumb { opacity: 1; }
.s-apply .ap-opts.no-anim .ap-thumb { transition: opacity 0.3s ease; }
.s-apply .ap-opt {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px;
  border-radius: var(--pill); cursor: pointer; text-align: center; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-2); transition: color 0.35s var(--ease), background-color 0.3s ease;
}
.s-apply .ap-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.s-apply .ap-opt:has(input:checked) { color: var(--inv-fg); }
.s-apply .ap-opt:has(input:focus-visible) { outline: 2px solid rgba(20, 24, 31, 0.8); outline-offset: 2px; }
.s-apply .ap-opts:not(.is-enh) .ap-opt:has(input:checked) { background: var(--inv-bg); }
.s-apply .ap-size.is-err .ap-opts { border-color: rgba(20, 24, 31, 0.7); box-shadow: 0 0 0 3px rgba(20, 24, 31, 0.07); }
@media (hover: hover) {
  .s-apply .ap-opt:hover { color: var(--fg); }
  .s-apply .ap-opt:has(input:checked):hover { color: var(--inv-fg); }
  .s-apply .ap-opts:hover { border-color: var(--line-3); }
}

/* Consentimiento + capa básica RGPD */
.s-apply .ap-consent-wrap { gap: 10px; padding-top: 4px; }
.s-apply .ap-consent { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.s-apply .ap-consent input { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.s-apply .ap-cb {
  position: relative; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(15, 20, 30, 0.3); background: #ffffff;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, scale 0.3s var(--ease);
}
.s-apply .ap-cb::after {
  content: ''; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px;
  border-right: 2px solid var(--inv-fg); border-bottom: 2px solid var(--inv-fg);
  transform: rotate(45deg) scale(0); transition: transform 0.35s var(--ease) 0.05s;
}
.s-apply .ap-consent input:checked + .ap-cb { background: var(--inv-bg); border-color: var(--inv-bg); }
.s-apply .ap-consent input:checked + .ap-cb::after { transform: rotate(45deg) scale(1); }
.s-apply .ap-consent input:focus-visible + .ap-cb { outline: 2px solid rgba(20, 24, 31, 0.8); outline-offset: 2px; }
.s-apply .ap-consent:active .ap-cb { scale: 0.9; }
.s-apply .ap-ct { font-size: 12.5px; line-height: 1.55; color: var(--fg-2); }
.s-apply .ap-consent-wrap.is-err .ap-cb { border-color: var(--fg); box-shadow: 0 0 0 4px rgba(20, 24, 31, 0.08); }
@media (hover: hover) { .s-apply .ap-consent:hover .ap-cb { border-color: rgba(20, 24, 31, 0.55); } }

.s-apply .ap-gdpr { margin-left: 34px; }
.s-apply .ap-gdpr summary {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); transition: color 0.25s ease;
}
.s-apply .ap-gdpr summary::-webkit-details-marker { display: none; }
.s-apply .ap-gdpr summary::after {
  content: ''; width: 6px; height: 6px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.45s var(--ease);
}
.s-apply .ap-gdpr:not(.is-enh)[open] summary::after, .s-apply .ap-gdpr.is-open summary::after { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) { .s-apply .ap-gdpr summary:hover { color: var(--fg); } }
.s-apply .ap-gdpr-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--ease); }
.s-apply .ap-gdpr.is-enh .ap-gdpr-body { grid-template-rows: 0fr; }
.s-apply .ap-gdpr.is-enh.is-open .ap-gdpr-body { grid-template-rows: 1fr; }
.s-apply .ap-gdpr-in { min-height: 0; overflow: hidden; }
.s-apply .ap-gdpr dl { margin-top: 10px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff; font-size: 12px; line-height: 1.5; }
.s-apply .ap-gdpr dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 9px 13px; border-top: 1px solid rgba(15, 20, 30, 0.07); }
.s-apply .ap-gdpr dl > div:first-child { border-top: 0; }
.s-apply .ap-gdpr dt { padding-top: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.s-apply .ap-gdpr dd { margin: 0; color: var(--fg-2); overflow-wrap: anywhere; }
.s-apply .ap-gdpr a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20, 24, 31, 0.4); }

/* Honeypot */
.s-apply .ap-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Resumen de errores */
.s-apply .ap-summary {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--ap-ri); outline: none;
  border: 1px solid rgba(20, 24, 31, 0.45);
  background:
    radial-gradient(160px 90px at 100% 100%, rgba(244, 240, 232, 0.75), transparent 75%),
    #ffffff;
  box-shadow: 0 10px 28px rgba(60, 50, 35, 0.08);
}
.s-apply .ap-summary-t { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 650; color: var(--fg); }
.s-apply .ap-summary-t::before { margin-top: 0; }
.s-apply .ap-summary-list { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 25px; }
.s-apply .ap-summary-list a {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: #faf9f6;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-1);
  transition: border-color 0.25s ease, background 0.25s ease, translate 0.35s var(--ease);
}
.s-apply .ap-summary-list a::after { content: ''; width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg) translateY(-2px); }
@media (hover: hover) { .s-apply .ap-summary-list a:hover { border-color: rgba(20, 24, 31, 0.5); background: #ffffff; translate: 0 -1px; } }

/* Envío */
.s-apply .ap-submit-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 22px;
  padding: clamp(12px, 1.6vw, 20px) clamp(10px, 1.6vw, 20px) clamp(8px, 1vw, 12px);
}
.s-apply .ap-submit { min-width: 244px; }
.s-apply .ap-submit-meta { display: grid; gap: 9px; justify-items: start; min-width: 0; }
.s-apply .ap-note { font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
/* alternativa de conversión: objetivo táctil ≥ 44 px sin mover el layout (padding + margen negativo) */
.s-apply .ap-wa { font-size: 12px; color: var(--fg-2); padding-block: 14px; margin-block: -10px; }
.s-apply .ap-wa::before { bottom: 10px; }
@media (hover: hover) { .s-apply .ap-wa:hover { color: var(--fg); } }
/* el botón de envío es .btn-lime (texto en tinta): el spinner, en tinta */
.s-apply .ap-spin { display: none; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(20, 24, 31, 0.2); border-top-color: var(--accent-ink); animation: ap-spin 0.8s linear infinite; }
.s-apply .ap-form.is-loading .ap-spin { display: inline-block; }
.s-apply .ap-form.is-loading .ap-submit .btn-arr, .s-apply .ap-form.is-loading .ap-submit > .arrow { display: none; }
.s-apply .ap-form.is-loading .ap-submit { pointer-events: none; }
.s-apply .ap-form.is-loading .ap-groups { opacity: 0.55; transition: opacity 0.3s ease; }
@keyframes ap-spin { to { transform: rotate(360deg); } }
/* Listo para enviar (todo lo obligatorio válido): anillo de tinta + barrido de brillo una vez */
.s-apply .ap-submit.is-ready { box-shadow: 0 14px 32px rgba(130, 170, 0, 0.3), 0 0 0 1px rgba(20, 24, 31, 0.9), 0 0 0 5px rgba(20, 24, 31, 0.07); }
.s-apply .ap-submit.is-ready::after { animation: ap-sweep 1.3s var(--ease) 0.1s 1; }
@keyframes ap-sweep { from { left: -70%; } to { left: 130%; } }
.s-apply .ap-submit-row.is-shake { animation: ap-shake 0.45s ease; }
@keyframes ap-shake { 20% { translate: -7px 0; } 45% { translate: 6px 0; } 70% { translate: -3px 0; } 100% { translate: 0 0; } }

.s-apply .ap-formerr {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(20, 24, 31, 0.45); background: #ffffff; font-size: 13px; line-height: 1.5; color: var(--fg);
  box-shadow: 0 8px 22px rgba(60, 50, 35, 0.07);
}
.s-apply .ap-formerr.is-info { border-color: var(--line-2); background: #faf9f6; color: var(--fg-1); }
.s-apply .ap-formerr.is-info::before { content: 'i'; font-family: var(--mono); font-weight: 600; }
.s-apply .ap-formerr-m { min-width: 0; }
.s-apply .ap-formerr-wa {
  color: var(--fg); font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(20, 24, 31, 0.4); transition: text-decoration-color 0.25s ease;
}
@media (hover: hover) { .s-apply .ap-formerr-wa:hover { text-decoration-color: var(--fg); } }

/* Sin JavaScript: no hay envío (el endpoint solo acepta JSON); el <noscript> ofrece WhatsApp */
.no-js .s-apply .ap-submit, .no-js .s-apply .ap-meter { display: none; }
.s-apply .ap-submit-nojs { min-width: 244px; }
@media (max-width: 640px) { .s-apply .ap-submit-nojs { width: 100%; min-width: 0; } }
.s-apply .ap-nojs { display: grid; gap: 12px; justify-items: start; padding: 16px 18px; border-radius: var(--ap-ri); }
.s-apply .ap-nojs p { font-size: 13.5px; line-height: 1.55; color: var(--fg-1); max-width: 60ch; }

/* Modo aviso de un recurso: solo nombre, email, WhatsApp y la casilla */
.s-apply .ap-form.is-notify .ap-group[data-group="1"], .s-apply .ap-form.is-notify .ap-row--brand,
.s-apply.is-notify .ap-next { display: none; }
.s-apply .ap-form.is-notify .ap-groups { grid-template-columns: minmax(0, 1fr); }
.s-apply .ap-notify {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px); border-radius: var(--ap-ri);
}
.s-apply .ap-notify-in { display: grid; gap: 6px; flex: 1 1 320px; min-width: 0; }
.s-apply .ap-notify-t { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; }
.s-apply .ap-notify-t:empty { display: none; }
.s-apply .ap-notify-d { font-size: 13px; line-height: 1.55; color: var(--fg-2); max-width: 62ch; }
.s-apply .ap-notify-full {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; margin: -6px 0;
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--fg-1);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.s-apply .ap-notify-full > span:first-child { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(20, 24, 31, 0.35); transition: text-decoration-color 0.3s ease; }
.s-apply .ap-notify-full:focus-visible { outline: 2px solid rgba(20, 24, 31, 0.8); outline-offset: 2px; }
@media (hover: hover) {
  .s-apply .ap-notify-full:hover { color: var(--fg); }
  .s-apply .ap-notify-full:hover > span:first-child { text-decoration-color: rgba(20, 24, 31, 0.9); }
}

/* ---------- Éxito ---------- */
.s-apply .ap-success { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--ap-gap); outline: none; }
.s-apply .ap-ok-main { display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(16px, 2.2vw, 30px) clamp(8px, 1.6vw, 20px); }
.s-apply .ap-check { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--inv-bg); box-shadow: 0 0 0 8px rgba(20, 24, 31, 0.05), 0 16px 40px rgba(60, 50, 35, 0.16); }
.s-apply .ap-check::after { content: ''; position: absolute; left: 22px; top: 14px; width: 11px; height: 21px; border-right: 3px solid var(--inv-fg); border-bottom: 3px solid var(--inv-fg); transform: rotate(45deg); }
.s-apply .ap-ok-t { font-size: clamp(34px, 4.4vw, 64px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; color: var(--fg); overflow-wrap: anywhere; }
.s-apply .ap-ok-t:focus { outline: none; } /* foco por script (tabindex=-1) para anunciar el éxito */
.s-apply .ap-ok-text { max-width: 48ch; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.s-apply .ap-ok-next { justify-self: stretch; display: grid; gap: 10px; margin-top: 8px; padding: 18px 20px 20px; }
.s-apply .ap-ok-next-t { font-size: 14px; line-height: 1.6; color: var(--fg-1); max-width: 56ch; }
.s-apply .ap-ok-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.s-apply .ap-ok-ctas:empty { display: none; }
.s-apply .ap-ok-recap { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2.2vw, 28px); }
.s-apply .ap-recap { display: grid; margin-top: 6px; }
.s-apply .ap-recap > div { display: grid; grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(15, 20, 30, 0.08); }
.s-apply .ap-recap dt { padding-top: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.s-apply .ap-recap dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fg); overflow-wrap: anywhere; }
.s-apply .ap-ok-back { align-self: flex-start; margin-top: auto; padding-top: 18px; color: var(--fg-2); }
@media (hover: hover) { .s-apply .ap-ok-back:hover { color: var(--fg); } }

/* ---------- Contenedores (cada grupo se adapta a su ancho) ---------- */
@container (min-width: 720px) {
  .s-apply .ap-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 470px) {
  .s-apply .ap-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
}
@container (max-width: 430px) {
  .s-apply .ap-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .s-apply .ap-groups { grid-template-columns: minmax(0, 1fr); }
  .s-apply .ap-success { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .s-apply { --ap-gap: 8px; --ap-r: 22px; --ap-ri: 14px; }
  .s-apply .ap-pill { height: 30px; font-size: 9.5px; letter-spacing: 0.12em; white-space: normal; }
  /* «Qué pasa después» debajo del formulario: al llegar a #aplicar se ve ya el primer campo (lo mismo
     que cuentan los pasos lo dicen la entradilla y la píldora); tras enviar, el éxito queda arriba */
  .s-apply .ap-next { order: 2; padding: 18px 16px 8px; }
  .s-apply .ap-opt { min-height: 44px; }
  /* pasos en vertical: la línea baja del 01 al 02 */
  .s-apply .ap-steps { grid-template-columns: minmax(0, 1fr); }
  .s-apply .ap-step { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 40px auto; column-gap: 14px; row-gap: 0; align-items: start; }
  .s-apply .ap-node { width: 40px; height: 40px; }
  .s-apply .ap-st { grid-column: 2; grid-row: 1 / span 2; padding: 9px 0 22px; }
  .s-apply .ap-st span { max-width: none; }
  .s-apply .ap-link { grid-column: 1; grid-row: 2; justify-self: center; align-self: stretch; width: 2px; height: auto; min-height: 18px; margin: 6px 0; }
  .s-apply .ap-link i { transform-origin: 50% 0; transform: scaleY(0); }
  .s-apply .ap-step:first-child .ap-link i { transform: scaleY(var(--p)); }
  .s-apply .ap-steps.is-sent .ap-step:first-child .ap-link i { transform: scaleY(1); }
  .s-apply .ap-group { gap: 22px; padding: 18px 14px 20px; }
  .s-apply .ap-chip { min-height: 66px; padding: 12px 34px 12px 12px; }
  .s-apply .ap-chip::before { top: 12px; right: 11px; }
  .s-apply .ap-chip::after { top: 15px; right: 17px; }
  .s-apply .ap-gdpr { margin-left: 0; }
  .s-apply .ap-gdpr dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .s-apply .ap-submit-row { grid-template-columns: minmax(0, 1fr); padding: 14px 6px 10px; }
  .s-apply .ap-submit { width: 100%; min-width: 0; }
  .s-apply .ap-ok-main { padding: 18px 8px 8px; }
  .s-apply .ap-ok-next { padding: 16px; }
  .s-apply .ap-ok-ctas .btn { flex: 1 1 auto; }
}
/* iOS no hace zoom al enfocar un campo de 16 px o más */
@media (max-width: 640px), (pointer: coarse) {
  .s-apply .ap-ctl input, .s-apply .ap-ctl textarea { font-size: 16px; }
}

/* ---------- Movimiento reducido: todo visible y estático ---------- */
@media (prefers-reduced-motion: reduce) {
  .s-apply .ap-thumb, .s-apply .ap-demo, .s-apply .ap-gdpr-body, .s-apply .ap-chip, .s-apply .ap-ring-p, .s-apply .ap-node::before, .s-apply .ap-node::after { transition: none !important; }
  .s-apply .ap-chip:hover, .s-apply .ap-summary-list a:hover { translate: none; }
  .s-apply .ap-pill-dot::after, .s-apply .ap-chip.is-flash, .s-apply .ap-submit-row.is-shake { animation: none !important; }
}

/* /hablemos: el formulario es la página entera; deja aire bajo la nav fija */
.page-hablemos .s-apply { padding-top: clamp(124px, 12vw, 176px); }
@media (max-width: 980px) { .page-hablemos .s-apply { padding-top: 112px; } }

/* Mentoría (agencias, SaaS, empresas): sin «Pedidos al mes» */
.s-apply .ap-form.is-mentoria [data-field="size"] { display: none; }