/* ============================================================================
   ZENITH 360 — components.css
   Piezas reutilizables. Todas validadas contra WCAG AA en la styleguide.
   Aquí van color, borde y sombra. La posición vive en layout.css.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 600;
  letter-spacing: var(--ls-micro); line-height: 1; text-align: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-out-expo);
}
/* CTA primario: verde de marca con etiqueta en tinta (6.45:1).
   Blanco sobre este verde da 2.74:1 y está prohibido. */
.btn--primary { background: var(--cta-bg); color: var(--cta-ink); }
.btn--primary:hover { background: var(--cta-bg-hover); }
.btn--primary:active { background: var(--cta-bg-active); }
.btn--ghost { background: transparent; color: var(--brand-800); border-color: var(--ink-400); }
.btn--ghost:hover { border-color: var(--brand-800); background: var(--brand-100); }
.btn--solid { background: var(--brand-800); color: var(--paper-50); }
.btn--solid:hover { background: var(--brand-900); }
.btn--sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-micro); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.on-dark .btn--ghost { color: var(--paper-50); border-color: var(--rule-on-dark); }
.on-dark .btn--ghost:hover { border-color: var(--brand-200); background: rgba(255,255,255,.06); }

/* ---------------------------------------------------------------------------
   CHIPS DE FILTRO Y PESTAÑAS
   --------------------------------------------------------------------------- */
/* Chips y pestañas en azul de marca, no en gris.
   El gris los hacía parecer desactivados; el azul dice "esto se puede pulsar".
   El verde sigue reservado al CTA y a las cifras de resultado. */
.chip, .tab {
  min-height: 44px; padding: 0 var(--s-4);
  display: inline-flex; align-items: center;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-micro);
  background: var(--white); color: var(--brand-800);
  border: 1px solid var(--brand-200); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-out-expo);
}
.chip:hover, .tab:hover {
  background: var(--brand-100);
  border-color: var(--brand-400);
  transform: translateY(-1px);
}
.chip.is-active, .chip[aria-pressed="true"] {
  background: var(--brand-800); border-color: var(--brand-800); color: var(--paper-50);
}
.chip.is-active:hover, .chip[aria-pressed="true"]:hover {
  background: var(--brand-900); border-color: var(--brand-900);
}
.tab { border-radius: var(--r-sm); }
.tab[aria-selected="true"] { background: var(--brand-800); border-color: var(--brand-800); color: var(--paper-50); }
.tab[aria-selected="true"]:hover { background: var(--brand-900); border-color: var(--brand-900); }
@media (prefers-reduced-motion: reduce) {
  .chip:hover, .tab:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   CAMPOS DE FORMULARIO
   --------------------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--s-6); }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-600);
}
.field .req { color: var(--signal); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px var(--s-4);
  font-size: 1rem; color: var(--ink-900); background: var(--white);
  border: 1px solid var(--ink-400); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-in-out);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-600); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brand-600); }
.field .hint { display: block; margin-top: 6px; font-size: var(--fs-micro); color: var(--ink-600); }
.field .err { display: none; margin-top: 6px; font-size: var(--fs-micro); font-weight: 500; color: var(--danger); }
.field [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.field:has([aria-invalid="true"]) .err { display: block; }
.field--check { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; }
.field--check input { width: 22px; height: 22px; min-height: 22px; flex: none; margin-top: 3px; accent-color: var(--brand-800); }
.field--check label {
  flex: 1; min-width: 200px; margin: 0;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: var(--fs-micro); color: var(--ink-600);
}
.field--check .err { flex-basis: 100%; }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-8); }
.form__status:empty { display: none; }
.form__status { margin-top: var(--s-6); }

/* ---------------------------------------------------------------------------
   MARCADORES DE EVIDENCIA — el activo diferencial del sitio
   --------------------------------------------------------------------------- */
.marker { display: inline-flex; font-family: var(--font-ui); }

/* result — cifra medida. Sin fuente del dato, no se pinta. */
.marker--result {
  flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4);
  background: var(--proof-100); border-left: 3px solid var(--proof-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.marker--result .val {
  font-size: var(--fs-h3); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; line-height: 1.05; color: var(--proof-800);
}
.marker--result .lbl { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.marker--result .src { font-size: 11px; color: var(--ink-600); line-height: 1.35; }
.on-dark .marker--result { background: rgba(0,180,84,.12); }
.on-dark .marker--result .val { color: var(--proof-500); }
.on-dark .marker--result .lbl { color: var(--paper-50); }
.on-dark .marker--result .src { color: var(--brand-200); }

/* method — metodología. Nunca verde. */
.marker--method {
  align-items: center; gap: 6px; padding: 6px var(--s-3);
  background: var(--brand-100); color: var(--brand-800);
  border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 500;
}
.on-dark .marker--method { background: rgba(185,211,230,.16); color: var(--brand-200); }

/* scope — tipo de engagement. Contorno, sin relleno. */
.marker--scope {
  align-items: center; padding: 5px var(--s-3);
  border: 1px solid var(--ink-400); border-radius: var(--r-sm);
  color: var(--ink-600); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.on-dark .marker--scope { border-color: var(--brand-400); color: var(--brand-200); }

/* sector — hairline superior, sin color. */
.marker--sector {
  flex-direction: column; padding-top: 6px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-micro); color: var(--ink-600); letter-spacing: .04em;
}
.on-dark .marker--sector { border-top-color: var(--rule-on-dark); color: var(--brand-200); }

/* credential — solo con credencial real y verificable. */
.marker--credential {
  align-items: center; gap: 7px; padding: 7px var(--s-3);
  background: var(--brand-800); color: var(--paper-50);
  border-radius: var(--r-sm); font-size: var(--fs-micro); font-weight: 500;
}
.on-dark .marker--credential { background: var(--brand-600); }

/* Aviso de contenido sin confirmar */
.ph-flag {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--s-3);
  padding: 4px 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--signal); border: 1px dashed var(--signal); border-radius: var(--r-sm);
}
.on-dark .ph-flag { color: #E9A67C; border-color: #E9A67C; }

/* ---------------------------------------------------------------------------
   TARJETA DE SERVICIO
   --------------------------------------------------------------------------- */
.service-card {
  display: flex; flex-direction: column;
  padding: var(--s-6); background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  transition: box-shadow var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-out-expo);
}
.service-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-600); transform: translateY(-2px); }
.service-card:focus-within { border-color: var(--brand-600); }
.service-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-6); }
.service-card .idx { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-eyebrow); color: var(--ink-400); }
.service-card__icon { color: var(--brand-600); }
.service-card h3 { margin-bottom: var(--s-2); }
.service-card__solves { margin-bottom: var(--s-4); font-size: .9375rem; line-height: 1.45; color: var(--ink-600); }
.service-card hr { margin: 0 0 var(--s-4); transition: border-color var(--dur-fast) var(--ease-in-out); }
.service-card:hover hr { border-top-color: var(--brand-600); }
.service-card__methods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-4); }
.service-card__meta { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); margin: 0; font-size: var(--fs-micro); }
.service-card__meta dt { color: var(--ink-600); }
.service-card__meta dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
/* margin-top:auto empuja el enlace al pie de la tarjeta. Como las tarjetas de
   una misma fila tienen la misma altura, todos los "Ver detalle" quedan
   alineados y el aire sobrante se reparte arriba en vez de acumularse abajo. */
.service-card__open {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start; margin-top: auto; padding-top: var(--s-6); min-height: 44px;
  font-size: var(--fs-micro); font-weight: 600; color: var(--brand-600);
}
.service-card__open svg { transition: transform 300ms var(--ease-out-expo); }
.service-card:hover .service-card__open svg { transform: translate(2px, -2px); }

/* El acompañamiento en la implementación es el diferencial de la firma:
   se destaca, no se esconde en una nota al pie. */
.services__claim {
  max-width: var(--measure);
  margin: 0 0 var(--s-12);
  padding: var(--s-4) var(--s-6);
  border-left: 3px solid var(--proof-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--proof-100);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-900);
}
.services__note { margin-top: var(--s-8); max-width: var(--measure); }
.services__empty { padding: var(--s-16) var(--s-6); text-align: center; border: 1px dashed var(--paper-200); border-radius: var(--r-md); }
.services__empty p { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   SÍNTOMA (sección 03)
   --------------------------------------------------------------------------- */
.symptom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding: var(--s-4) var(--s-6);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-sm);
  text-decoration: none; font-size: 1.0625rem;
  transition: border-color var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-out-expo);
}
.symptom::after {
  content: "→"; color: var(--brand-600); font-size: 1.1rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 300ms var(--ease-out-expo), transform 300ms var(--ease-out-expo);
}
.symptom:hover { border-color: var(--brand-600); transform: translateX(3px); }
.symptom:hover::after, .symptom:focus-visible::after { opacity: 1; transform: translateX(0); }

/* ---------------------------------------------------------------------------
   ACORDEÓN (FAQ)
   --------------------------------------------------------------------------- */
.accordion { border-bottom: 1px solid var(--rule); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding: var(--s-4) 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 1.5px solid var(--brand-600); border-bottom: 1.5px solid var(--brand-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease-in-out);
}
.accordion[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion__body { padding-bottom: var(--s-6); }
.accordion__body p { color: var(--ink-600); }

/* ---------------------------------------------------------------------------
   NAV
   --------------------------------------------------------------------------- */
.site-nav { background: transparent; transition: background-color 300ms var(--ease-in-out), box-shadow 300ms var(--ease-in-out); }
.site-nav.is-shrunk {
  background: color-mix(in srgb, var(--paper-50) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.site-nav.is-shrunk .site-nav__inner { min-height: 62px; }
.site-nav__inner { transition: min-height 300ms var(--ease-in-out); }
/* Área táctil mínima de 44px en TODO enlace de navegación. El texto se ve
   igual; lo que crece es la zona que responde al dedo. Requisito del brief. */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-800); text-decoration: none; flex: none; }
.site-nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .9375rem; text-decoration: none; color: var(--ink-600);
}
.site-nav__links a:hover { color: var(--brand-800); }

.lang-switch { display: flex; border: 1px solid var(--paper-200); border-radius: var(--r-pill); overflow: hidden; }
.lang-switch__btn {
  min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink-600);
}
.lang-switch__btn[aria-pressed="true"] { background: var(--brand-800); color: var(--paper-50); }

.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }
@media (max-width: 1023px) { .nav-cta { display: none; } }
.menu-toggle__bars { display: grid; gap: 5px; width: 22px; }
.menu-toggle__bars i { display: block; height: 1.5px; background: var(--brand-800); }

.menu-full { background: var(--brand-900); }
.menu-full__list { display: grid; gap: var(--s-6); }
.menu-full__list a { font-family: var(--font-display); font-size: var(--fs-h2); text-decoration: none; color: var(--paper-50); }

/* ---------------------------------------------------------------------------
   BARRA DE PROGRESO Y BOTÓN FLOTANTE
   --------------------------------------------------------------------------- */
.reading-progress { background: var(--proof-500); transform: scaleX(0); }
.wa-float {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--proof-500); color: var(--ink-900);
  box-shadow: var(--shadow-lg); text-decoration: none;
}
.wa-float:hover { background: var(--cta-bg-hover); }

/* ---------------------------------------------------------------------------
   TARJETA ANCLA DEL HERO
   --------------------------------------------------------------------------- */
.anchor-card {
  padding: var(--s-6); background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.anchor-card__label { margin: 0 0 var(--s-2); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.anchor-card__value { margin: 0 0 var(--s-2); font-size: var(--fs-h3); color: var(--brand-800); }
.anchor-card__note { margin: 0; }

/* ---------------------------------------------------------------------------
   OTROS
   --------------------------------------------------------------------------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--paper-200); border-radius: var(--r-pill);
  color: var(--brand-800);
}
.icon-btn:hover { border-color: var(--brand-600); }
.disclaimer {
  margin-top: var(--s-8); padding: var(--s-4) var(--s-6);
  border-left: 3px solid var(--brand-400); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(185,211,230,.08);
  font-size: var(--fs-micro); line-height: 1.55; color: var(--brand-200);
}
.noscript-note {
  padding: var(--s-4) var(--s-6); margin: var(--s-4);
  background: var(--brand-100); border-left: 3px solid var(--brand-600); border-radius: var(--r-sm);
}
.resource { padding: var(--s-6); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-md); }
.resource h3 { margin: var(--s-4) 0 var(--s-3); font-size: 1.125rem; }
.resource p { font-size: var(--fs-micro); color: var(--ink-600); margin-bottom: var(--s-6); }

.contact-details { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-6); margin: var(--s-8) 0 0; }
.contact-details dt { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-600); }
.contact-details dd { margin: 0; font-size: .9375rem; }
.contact-details dd a { display: inline-flex; align-items: center; min-height: 44px; }

.testimonial__text p { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.22; letter-spacing: var(--ls-title); max-width: none; }
.testimonial__text { margin: 0; }

/* El aval lo da la empresa, no un retrato: los entrevistados son dueños y
   altos ejecutivos. El logo va sobre tarjeta blanca para que respete su
   propia paleta sin pelearse con el fondo de la sección. */
.testimonial__logo {
  flex: none;
  width: 140px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-2);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.testimonial__logo img, .testimonial__logo svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.testimonial__company { margin: 0; font-size: .9375rem; line-height: 1.45; }
.testimonial__company b { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--ink-900); }
.testimonial__company .micro { color: var(--ink-600); }

.method-node { padding-left: var(--s-8); border-left: 1px solid var(--rule); }
.method-node__idx { display: block; margin-bottom: var(--s-2); font-size: var(--fs-micro); color: var(--brand-400); }
.method-node h3 { margin-bottom: var(--s-2); }
.method-node p { color: var(--ink-600); font-size: .9375rem; }
.method__not { margin-top: var(--s-24); padding-top: var(--s-12); border-top: 1px solid var(--rule); }
.process { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-8); }
.process__step { display: flex; align-items: baseline; gap: var(--s-3); font-size: .9375rem; }
.process__step .num { color: var(--brand-400); font-size: var(--fs-micro); }

.fees__table th[scope="row"] { font-family: var(--font-ui); font-weight: 600; color: var(--brand-800); }
.fees__table thead th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-600); }
.fees__table td { font-size: .9375rem; color: var(--ink-600); }
/* Cómo se cotiza. Sustituye a las columnas de duración y cobro: si no hay
   cifras publicables, se publica el método. Un token en su lugar no informa. */
.fees__quote { margin-top: var(--s-16); padding-top: var(--s-12); border-top: 1px solid var(--rule); }
.fees__quote > p { margin-bottom: var(--s-8); }
.quote-factors { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .quote-factors { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-12); } }
.quote-factors li { display: flex; gap: var(--s-4); align-items: baseline; }
.quote-factors .num { flex: none; font-size: var(--fs-micro); color: var(--brand-400); }
.quote-factors b { display: block; font-size: 1.0625rem; margin-bottom: 2px; }
.quote-factors span:not(.num) { font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-600); }
.fees__quote .micro { margin-top: var(--s-8); padding-left: var(--s-4); border-left: 2px solid var(--proof-500); }
.fees__note { margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--rule); }

.case__foot { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-6); }

.site-footer { padding-block: var(--s-24) var(--s-12); }
.footer__title { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--brand-200); margin-bottom: var(--s-4); }
.footer__list { display: grid; gap: var(--s-1); font-size: .9375rem; }
.footer__list li { display: flex; align-items: center; min-height: 32px; }
.footer__list a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--paper-50);
}
.footer__list a:hover { text-decoration: underline; }
.footer__newsletter { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.footer__newsletter input {
  flex: 1; min-width: 160px; min-height: 44px; padding: 0 var(--s-4);
  background: rgba(255,255,255,.06); color: var(--paper-50);
  border: 1px solid var(--rule-on-dark); border-radius: var(--r-sm);
}
.footer__newsletter input::placeholder { color: var(--brand-400); }
.footer__wordmark span {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-display); color: var(--paper-50); opacity: .07;
  letter-spacing: var(--ls-title); transform: translateY(18%);
}
.footer__bottom { border-top: 1px solid var(--rule-on-dark); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); justify-content: space-between; align-items: baseline; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-6); font-size: var(--fs-micro); }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-200); }

.trustbar { background: var(--brand-900); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; }
.trustbar__sep { display: inline-block; width: 16px; height: 8px; border-top: 1.5px solid var(--brand-400); border-radius: 999px 999px 0 0; opacity: .55; }

/* Cartera de organizaciones asesoradas. Se listan como texto editorial, no
   como logos: sin autorización escrita no se usan marcas, y una retícula de
   siluetas grises se lee como relleno. */
.client-list {
  display: grid; gap: 0 var(--s-8); margin-top: var(--s-8);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.client-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem; font-weight: 500; color: var(--ink-900);
}

/* ===========================================================================
   DIAGNÓSTICO 360 (Fase 4) — todo sobre fondo --brand-900
   =========================================================================== */
.diag__bar { height: 3px; background: rgba(185,211,230,.2); border-radius: var(--r-pill); overflow: hidden; }
.diag__bar-fill { height: 100%; background: var(--proof-500); transform-origin: 0 50%; transition: transform var(--dur-base) var(--ease-out-expo); }
.diag__progress { margin: var(--s-4) 0 var(--s-6); color: var(--brand-200); }
.diag__q { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; letter-spacing: var(--ls-title); color: var(--paper-50); margin-bottom: var(--s-8); outline: none; }
.diag__opts { display: grid; gap: var(--s-3); }
.diag__opt {
  display: flex; align-items: flex-start; gap: var(--s-4);
  min-height: 56px; padding: var(--s-4) var(--s-6); cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--rule-on-dark);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-in-out), background-color var(--dur-fast) var(--ease-in-out);
}
.diag__opt:hover { border-color: var(--brand-400); background: rgba(255,255,255,.06); }
.diag__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.diag__opt input:focus-visible + .diag__opt-n { outline: 2px solid var(--focus-on-dark); outline-offset: 3px; }
.diag__opt-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: rgba(185,211,230,.14); color: var(--brand-200); font-size: var(--fs-micro);
}
.diag__opt-t { color: var(--paper-50); font-size: .9375rem; line-height: 1.4; }
.diag__opt.is-chosen { border-color: var(--proof-500); background: rgba(0,180,84,.10); }
.diag__opt.is-chosen .diag__opt-n { background: var(--proof-500); color: var(--ink-900); font-weight: 700; }
.diag__nav { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-8); }

.diag-result h3 { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--paper-50); outline: none; }
.diag-result__level { margin: var(--s-8) 0; padding: var(--s-6); border-left: 3px solid var(--proof-500); background: rgba(0,180,84,.08); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.diag-result__level-name { font-family: var(--font-ui); font-size: var(--fs-h3); font-weight: 700; color: var(--proof-500); margin: 4px 0 var(--s-3); }
.diag-result__level p:last-child { color: var(--brand-200); font-size: .9375rem; }
.diag-result__table { margin-top: var(--s-6); }
.diag-result__table summary { cursor: pointer; font-size: var(--fs-micro); color: var(--brand-200); min-height: 44px; display: flex; align-items: center; }
.diag-result__table th, .diag-result__table td { border-bottom-color: var(--rule-on-dark); font-size: var(--fs-micro); color: var(--paper-50); }
.radar { width: 100%; max-width: 420px; height: auto; }

.gaps { display: grid; gap: var(--s-8); margin-top: var(--s-6); }
.gap { display: flex; gap: var(--s-4); align-items: flex-start; }
.gap > div { flex: 1; min-width: 0; }
.gap__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--signal); color: var(--paper-50); font-size: var(--fs-micro); }
.gap h4 { color: var(--paper-50); margin-bottom: 2px; }
.gap__pct { color: var(--proof-500); margin-bottom: var(--s-4); }

/* La oferta concreta que responde a la brecha: sin esto el diagnóstico
   señala el problema y deja al prospecto sin saber qué se le ofrece. */
.gap__offer {
  padding: var(--s-4) var(--s-6);
  background: rgba(255,255,255,.04);
  border-left: 2px solid var(--brand-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.gap__offer-label {
  margin: 0 0 2px; text-transform: uppercase; letter-spacing: .1em;
  font-size: 10px; color: var(--brand-400);
}
.gap__offer-label + .gap__offer-label,
.gap__offer-solves + .gap__offer-label { margin-top: var(--s-4); }
.gap__offer-name { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; color: var(--paper-50); }
.gap__offer-solves,
.gap__offer-deliver { margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--brand-200); }
.gap__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin-top: var(--s-3);
  font-size: var(--fs-micro); font-weight: 600; color: var(--proof-500);
  text-align: left;
}
.gap__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.gap__link svg { flex: none; transition: transform 300ms var(--ease-out-expo); }
.gap__link:hover svg { transform: translate(2px, -2px); }

/* Los otros seis ejes: la lectura son 9, no 3 */
.diag-rest { margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--rule-on-dark); }
.diag-rest h4 { color: var(--paper-50); margin-bottom: 4px; }
.diag-rest > p { color: var(--brand-200); margin-bottom: var(--s-6); }
.axis-list { display: grid; gap: var(--s-2); }
@media (min-width: 700px) { .axis-list { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-8); } }
.axis-row { display: flex; gap: var(--s-4); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid rgba(185,211,230,.12); }
.axis-row__pct { flex: none; width: 48px; color: var(--brand-200); font-size: var(--fs-micro); }
.axis-row b { display: block; color: var(--paper-50); font-size: .9375rem; font-weight: 600; }
.axis-row__link {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: var(--fs-micro); color: var(--brand-400); text-align: left;
}
.axis-row__link:hover { color: var(--proof-500); text-decoration: underline; text-underline-offset: 3px; }

.diag-lead { margin-top: var(--s-16); padding-top: var(--s-12); border-top: 1px solid var(--rule-on-dark); }
.diag-lead h4 { color: var(--paper-50); font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.diag-lead > p { color: var(--brand-200); margin-bottom: var(--s-8); }
.diag-lead label { color: var(--brand-200); }
.diag-lead .field--check label { color: var(--brand-200); }

/* Estados del formulario — los cuatro están diseñados, ninguno es un alert() */
.form__status { padding: var(--s-4) var(--s-6); border-radius: var(--r-sm); border-left: 3px solid; }
.form__status p { margin: 6px 0 0; font-size: var(--fs-micro); }
.form__status strong { font-size: .9375rem; }
.form__status.is-ok { border-left-color: var(--proof-500); background: var(--proof-100); color: var(--ink-900); }
.form__status.is-fail { border-left-color: var(--danger); background: rgba(168,51,31,.08); color: var(--danger); }
.form__status.is-fail .btn { margin-top: var(--s-4); }
.on-dark .form__status.is-ok { background: rgba(0,180,84,.12); color: var(--paper-50); }
.on-dark .form__status.is-fail { color: #F0B4A8; }

/* ===========================================================================
   PANEL DE DETALLE DE SERVICIO (Fase 3)
   =========================================================================== */
.service-dialog { width: min(680px, calc(100vw - 2rem)); max-height: 88vh; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper-50); color: var(--ink-900); }
.service-dialog::backdrop { background: rgba(0,31,56,.62); backdrop-filter: blur(3px); }
.service-dialog__inner { position: relative; padding: var(--s-12) var(--s-8) var(--s-8); overflow-y: auto; max-height: 88vh; }
@media (min-width: 640px) { .service-dialog__inner { padding: var(--s-12); } }
.service-dialog__close { position: absolute; top: var(--s-4); right: var(--s-4); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); color: var(--ink-600); }
.service-dialog__close:hover { background: var(--paper-100); color: var(--ink-900); }
.service-dialog h2 { font-size: var(--fs-h2); margin-bottom: var(--s-4); }
.service-dialog__methods { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-6) 0; }
.service-dialog__block { padding-top: var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.service-dialog__block h3 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--ink-600); margin-bottom: var(--s-3); }
.service-dialog .btn { margin-top: var(--s-8); }

/* ===========================================================================
   DIAGRAMA ORBITAL (Fase 5) — segundo de los tres usos permitidos del círculo
   =========================================================================== */
.orbit { width: 100%; max-width: 420px; height: auto; }
.orbit__ring { fill: none; stroke: var(--paper-200); stroke-width: 1; }
.orbit__ring--inner { stroke-dasharray: 3 6; }
.orbit__node circle { fill: var(--paper-200); transition: fill var(--dur-fast) var(--ease-in-out), r var(--dur-fast) var(--ease-out-expo); }
.orbit__node.is-active circle { fill: var(--proof-500); r: 10; }
.orbit__label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; fill: var(--ink-400); }
/* El puntero gira sobre el CENTRO del diagrama. El transform-origin va en el
   <g>, que es donde el JS aplica la rotación: si se pone en la <line> el grupo
   rota sobre la esquina 0,0 del SVG y el puntero acaba fuera del círculo. */
.orbit__pointer { transform-origin: 200px 200px; transition: transform var(--dur-slow) var(--ease-out-expo); }
.orbit__pointer line { stroke: var(--brand-600); stroke-width: 1.5; }
.orbit__center-n { font-family: var(--font-ui); font-size: 26px; font-weight: 700; fill: var(--brand-800); }
.orbit__center-t { font-family: var(--font-ui); font-size: 9px; letter-spacing: 3px; fill: var(--ink-400); }
/* El hairline izquierdo es la línea de escala de cada eje: debe estar SIEMPRE
   presente y a la misma altura, no aparecer solo en algunos. */
.method-node { border-left: 2px solid var(--paper-200); transition: border-color var(--dur-base) var(--ease-in-out), opacity var(--dur-base) var(--ease-in-out); }
@media (min-width: 1024px) {
  .method-node { opacity: .45; }
  .method-node.is-active { opacity: 1; border-left-color: var(--proof-500); }
}
.process__trace { margin-top: var(--s-8); }
.process__trace svg { width: 100%; height: 24px; }


/* ===========================================================================
   LEER MÁS — para bloques largos.
   Sin JavaScript el contenido se ve completo: nunca se esconde información
   detrás de un botón que podría no funcionar.
   =========================================================================== */
[data-expandable] { position: relative; }
.js-ready [data-expandable]:not(.is-open) {
  max-height: 8.5em;
  overflow: hidden;
}
.js-ready [data-expandable]:not(.is-open)::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 4.5em;
  background: linear-gradient(to bottom, transparent, var(--brand-800));
  pointer-events: none;
}
.expand-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; margin-top: var(--s-4);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em;
  color: var(--proof-500);
}
.expand-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.expand-btn svg { transition: transform var(--dur-fast) var(--ease-in-out); }
.expand-btn[aria-expanded="true"] svg { transform: rotate(180deg); }