/* 18-sectores.css — Phase 3 sectorials (despachos, construcción, agencias, consultoría)
 *
 * The 4 sectorial pages are layout-uniform and built almost entirely from the
 * shared kit (_hero_simple, _trust_strip, _problem_block, _capabilities, _faq,
 * _final_cta). This file owns:
 *   - .sec-placeholder*     — visual placeholder card for capability rows
 *                             (production screenshots ship later)
 *   - sectorial hero microcopy alignment
 */

/* ---------- visual placeholder for capability rows ---------- */

.sec-placeholder {
  width: 100%;
  max-width: 480px;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.sec-placeholder__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-border-light);
}

.sec-placeholder__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-medium-violant);
  display: inline-block;
}

.sec-placeholder__dot:first-child { background: var(--color-hq-pink-700); }
.sec-placeholder__dot:nth-child(2) { background: var(--color-hq-blue-300); }

.sec-placeholder__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-7);
  margin: 0;
}

.sec-placeholder__label {
  font-family: var(--font-display, inherit);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0;
}

.sec-placeholder__caption {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 38ch;
}

@media (max-width: 959px) {
  .sec-placeholder {
    max-width: 100%;
    min-height: 220px;
  }
}

@media (max-width: 600px) {
  .sec-placeholder__body {
    padding: var(--space-7) var(--space-6);
  }

  .sec-placeholder__label {
    font-size: var(--font-size-lg);
  }
}

/* ---------- sectorial hero micro alignment ----------
 * `.lp-hero--simple .lp-hero__inner` already centres text; the new optional
 * `.lp-hero__micro` slot inherits centring. This rule constrains its width so
 * it doesn't sprawl on wide viewports.
 */

.lp-hero--simple .lp-hero__micro {
  max-width: 52ch;
  margin-inline: auto;
  margin-top: var(--space-5);
}