/* ============================================================
   AlySec para empresas — superficie de venta B2B
   ------------------------------------------------------------
   Hereda el sistema light del producto tal cual: los tokens, las
   primitivas (.btn, .input, .field, .chip, .mono) y las sombras
   viven en base.css y aquí NO se redefine ni un color.

   Por qué light y no el mundo oscuro de la home: el lector es un
   comité de compras que teme una fuga de datos, no un
   investigador que busca reto. La estética de consola comunica
   "underground" justo donde hace falta comunicar "proveedor
   auditable". Es la misma razón por la que las plataformas de
   bug bounty separan su sitio corporativo de su superficie de
   investigadores.

   El mono queda reservado a dato duro —dominios, eventos de
   bitácora, rutas, fechas—; nunca a prosa.
   ============================================================ */

.emp { background: var(--bg); color: var(--text); }

.emp h1, .emp h2, .emp h3, .emp h4 { color: var(--ink); }

.e-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

.emp .e-skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 10px 14px; font-size: var(--fs-small); font-weight: 600;
  box-shadow: var(--shadow-md); transition: top .18s;
}
.emp .e-skip:focus { top: 12px; }

/* ---------- Nav ---------- */
.e-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,248,251,.88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid), background var(--t-mid);
}
.e-nav.is-stuck { border-bottom-color: var(--line); background: rgba(246,248,251,.97); }
.e-nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }

.emp .e-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.emp .e-brand:hover { color: var(--ink); }
.e-logo { width: 28px; height: 28px; flex: none; color: var(--ink); }
.e-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.e-brand-name span { font-weight: 500; color: var(--text-mut); }

.e-nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.emp .e-nav-links a {
  font-size: var(--fs-small); font-weight: 500; color: var(--text-dim);
  padding: 6px 0; position: relative;
}
.emp .e-nav-links a:hover { color: var(--ink); }
.e-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--blue); transition: right var(--t-mid);
}
.e-nav-links a:hover::after { right: 0; }

/* Acción secundaria, junto al CTA. Un cliente con cuenta entra por aquí; el
   enlace del pie estaba demasiado abajo para servir de puerta. */
.emp .e-sign {
  font-size: var(--fs-small); font-weight: 500; color: var(--text-dim);
  padding: 8px 4px; white-space: nowrap; transition: color var(--t-fast);
}
.emp .e-sign:hover { color: var(--ink); }

.e-burger {
  display: none; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--text-dim); padding: 8px; cursor: pointer;
}
.e-burger svg { width: 20px; height: 20px; display: block; }

/* ---------- Hero ---------- */
.e-hero { padding: clamp(52px, 7vw, 92px) 0 clamp(48px, 6vw, 80px); }
.e-hero-grid {
  display: grid; gap: clamp(34px, 4.5vw, 64px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
}
.e-hero h1 {
  font-size: clamp(30px, 3.7vw, 46px); line-height: 1.1;
  letter-spacing: -.03em; font-weight: 800; text-wrap: balance;
}
.e-lede {
  margin-top: 20px; max-width: 58ch;
  font-size: 16.5px; line-height: 1.65; color: var(--text);
}
.e-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.e-hero-foot {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  max-width: 56ch; font-size: var(--fs-small); color: var(--text-mut); line-height: 1.6;
}

/* ---------- El documento firmado ---------- */
.e-doc {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 24px 20px; box-shadow: var(--shadow-lg);
}
.e-doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.e-doc-head h2 { font-size: 16px; letter-spacing: -.015em; }
.e-doc-rows { margin: 0; }
.e-doc-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.e-doc-rows dt { font-size: var(--fs-small); color: var(--text-mut); flex: none; }
.e-doc-rows dd {
  margin: 0; font-size: var(--fs-small); color: var(--ink); font-weight: 500; text-align: right;
}
.e-doc-rows .e-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--secure-ink); }
.e-doc-rows .e-ok svg { width: 13px; height: 13px; }
.e-doc-note { margin-top: 16px; font-size: var(--fs-small); line-height: 1.55; color: var(--text-dim); }
.e-synth {
  position: absolute; right: 16px; bottom: -11px;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-mut);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: 3px 11px;
}

/* ---------- Bandas ---------- */
.e-band { padding: clamp(56px, 7vw, 92px) 0; border-top: 1px solid var(--line); }
.e-band-alt { background: var(--surface-2); }

.e-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 50px); }
.e-head h2 {
  font-size: clamp(24px, 2.9vw, 34px); line-height: 1.15;
  letter-spacing: -.028em; font-weight: 700;
}
.e-head p { margin-top: 14px; max-width: 56ch; font-size: 16px; line-height: 1.65; color: var(--text-dim); }

/* ---------- Las fases ---------- */
.e-phases { list-style: none; margin: 0; padding: 0; }
.e-phase {
  position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: 24px; padding-bottom: clamp(34px, 4vw, 48px);
}
/* El raíl que encadena las fases: el orden es el argumento. */
.e-phase::before {
  content: ""; position: absolute; left: 36px; top: 34px; bottom: 0; width: 2px;
  background: var(--line-2); border-radius: 2px;
}
.e-phase-end::before { display: none; }

.e-phase-mark { position: relative; }
.e-phase-mark span {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--blue-tint); border: 1px solid var(--blue-tint2);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep);
}

.e-phase-body { max-width: 64ch; padding-top: 2px; }
.e-phase-body h3 { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.022em; line-height: 1.25; }
.e-phase-body > p { margin-top: 12px; font-size: 15.5px; line-height: 1.68; color: var(--text); }
.e-phase-body b { color: var(--ink); font-weight: 600; }

.e-phase-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: 18px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.e-phase-grid > div { background: var(--surface); padding: 13px 15px; }
.e-band-alt .e-phase-grid > div { background: var(--surface); }
.e-phase-grid h4 {
  margin: 0 0 5px; font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text-mut);
}
.e-phase-grid p { font-size: var(--fs-small); line-height: 1.55; color: var(--text); }
.e-log p { color: var(--blue-deep); }

/* Intercambio HTTP de la verificación */
.e-http {
  margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.e-http-line {
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  padding: 11px 14px; font-size: var(--fs-small);
}
.e-http-line + .e-http-line { border-top: 1px solid var(--line); }
.e-http-line .mono { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-dim); }
.e-verb {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .06em; color: var(--text-mut);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 2px 7px; flex: none;
}
.e-code {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600;
  color: var(--secure-ink); background: var(--secure-tint);
  border: 1px solid var(--secure-line); border-radius: var(--r-sm); padding: 2px 7px; flex: none;
}

/* Las cuatro puertas */
.e-gates {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.e-gates li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-small); color: var(--text);
}
.e-gates span { color: var(--blue); font-weight: 600; }

.e-phases-note {
  padding-left: 132px; max-width: 76ch;
  font-size: var(--fs-small); line-height: 1.65; color: var(--text-mut);
}

/* ---------- Documentos legales ---------- */
.e-docs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.emp .e-doc-link {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform .1s;
}
.emp .e-doc-link:hover {
  border-color: var(--line-3); box-shadow: var(--shadow-md); transform: translateY(-1px);
  color: var(--text);
}
.e-doc-link h3 { font-size: 16px; letter-spacing: -.018em; }
.e-doc-link p { margin-top: 8px; font-size: var(--fs-small); line-height: 1.6; color: var(--text-dim); }
.e-doc-link span {
  display: inline-block; margin-top: 12px; font-size: var(--fs-small);
  font-weight: 600; color: var(--blue);
}

.e-controls {
  list-style: none; margin: 26px 0 0; padding: 0; max-width: 84ch;
  border-top: 1px solid var(--line-2);
}
.e-controls li {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.65; color: var(--text-dim);
}
.e-controls b { color: var(--ink); font-weight: 600; }

/* ---------- Qué recibes ---------- */
.e-gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.e-gets article { background: var(--bg); padding: clamp(22px, 2.6vw, 30px); }
.e-gets h3 { font-size: 17px; letter-spacing: -.02em; line-height: 1.3; }
.e-gets p { margin-top: 10px; font-size: 15px; line-height: 1.66; color: var(--text-dim); max-width: 48ch; }

/* ---------- Comunidades aliadas ----------
   Los tres logos vienen con fondos distintos: uno blanco opaco, otro
   transparente y otro negro. Puestos sobre la página se verían como tres
   cosas sueltas, así que cada uno va en la MISMA placa blanca con las
   esquinas redondeadas. Es el tratamiento de un muro de partners: uniforma
   la presentación sin retocar ninguna marca. */
.e-allies { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); }
/* Aquí NO hay desplegable ni llamada a la acción, al contrario que en la home
   de investigadores: una empresa no "participa" en una comunidad. Lee quién
   hay detrás y sigue hacia el formulario de propuesta. */
.e-allies > li {
  background: var(--bg); padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 16px;
  transition: background var(--t-fast);
}
.e-allies > li:hover { background: var(--surface); }
.e-ally-mark { transition: transform var(--t-fast); }
.e-allies > li:hover .e-ally-mark { transform: scale(1.04); }
.e-ally-mark {
  width: 72px; height: 72px; flex: none;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 12px; overflow: hidden;
}
.e-ally-mark img { width: 56px; height: 56px; object-fit: contain; }
.e-allies h3 { font-size: 16px; letter-spacing: -.02em; line-height: 1.35; }
.e-allies p { margin-top: 8px; font-size: 14.5px; line-height: 1.62; color: var(--text-dim); }
/* La aclaración pesa: pertenecer a una comunidad no es estar acreditado, y de
   esa distinción depende que la bitácora signifique algo. */
.e-allies-note {
  margin-top: clamp(22px, 2.6vw, 30px); max-width: 68ch;
  font-size: 14.5px; line-height: 1.66; color: var(--text-dim);
}

/* ---------- Piloto + formulario ---------- */
.e-apply {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 4vw, 60px); align-items: start;
}
.e-apply-copy h2 { font-size: clamp(24px, 2.9vw, 34px); letter-spacing: -.028em; line-height: 1.15; }
.e-apply-lede { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--text); max-width: 50ch; }
.e-apply-lede b { color: var(--ink); font-weight: 600; }

.e-pilot { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.e-pilot li {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.62; color: var(--text-dim); max-width: 54ch;
}
.e-pilot b { color: var(--ink); font-weight: 600; }
.e-pilot-note { margin-top: 16px; font-size: var(--fs-small); line-height: 1.6; color: var(--text-mut); max-width: 50ch; }

.e-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px, 2.8vw, 30px);
  box-shadow: var(--shadow-lg);
}
.e-form h3 {
  font-size: 18px; letter-spacing: -.02em;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.emp .field { margin-bottom: 16px; }
.emp .field label span { color: var(--text-mut); font-weight: 400; }
.e-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.emp textarea.input { resize: vertical; min-height: 84px; line-height: 1.6; font-family: inherit; }

.e-form-msg {
  display: none; margin-bottom: 14px; padding: 11px 13px;
  border-radius: var(--r); font-size: var(--fs-small); line-height: 1.55;
}
.e-form-msg.is-error {
  display: block; color: var(--critical-ink);
  background: var(--critical-tint); border: 1px solid var(--critical-line);
}
.e-form-msg.is-ok {
  display: block; color: var(--secure-ink);
  background: var(--secure-tint); border: 1px solid var(--secure-line);
}
.e-form-legal { margin-top: 14px; font-size: var(--fs-micro); line-height: 1.6; color: var(--text-mut); }

/* ---------- Pie ---------- */
.e-foot { border-top: 1px solid var(--line); padding: clamp(44px, 5vw, 64px) 0 26px; }
.e-foot-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 40px; padding-bottom: 32px;
}
.e-foot-brand p { margin-top: 13px; font-size: var(--fs-small); color: var(--text-mut); max-width: 36ch; line-height: 1.6; }
.e-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.e-foot-col h4 {
  margin: 0 0 13px; font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text-mut);
}
.emp .e-foot-col a {
  display: block; padding: 5px 0; font-size: var(--fs-small);
  color: var(--text-dim); font-weight: 500;
}
.emp .e-foot-col a:hover { color: var(--blue); }
.e-foot-note {
  display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); line-height: 1.5; color: var(--text-mut); max-width: 32ch;
}
.e-foot-bar {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); color: var(--text-mut);
}
.e-foot-bar b { color: var(--text-dim); font-weight: 600; }

/* ---------- Reveal ---------- */
.e-reveal { opacity: 0; transform: translateY(14px); }
.e-reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .e-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .e-doc { max-width: 520px; }
  .e-apply { grid-template-columns: minmax(0, 1fr); }
  .e-foot-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .e-allies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-burger { display: inline-flex; }
  .e-nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 6px 24px 14px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .e-nav-links.is-open { display: flex; }
  .emp .e-nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .e-nav-links a::after { display: none; }
  .e-nav-in { position: relative; gap: 12px; }
  .e-nav-cta { margin-left: auto; }
  .e-docs, .e-gets { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .e-wrap { padding: 0 18px; }
  .e-nav-in { gap: 10px; }
  .emp .e-sign { font-size: 13px; padding-inline: 2px; }
  .emp .e-nav-cta { font-size: 12.5px; padding: 9px 13px; }
  .e-brand-name span { display: none; }
  .e-phase { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .e-phase::before { display: none; }
  .e-phases-note { padding-left: 0; }
  .e-phase-grid { grid-template-columns: minmax(0, 1fr); }
  .e-allies { grid-template-columns: minmax(0, 1fr); }
  .e-form-row { grid-template-columns: minmax(0, 1fr); }
  .e-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .e-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .e-reveal { opacity: 1 !important; transform: none !important; }
}