/* ==========================================================================
   BRIGHTLOOP — COMPONENTES
   Cada familia declara sus propios tokens de componente (--btn-*, --card-*)
   que apuntan a los semánticos. Así se puede reajustar una familia sin
   tocar la paleta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BOTONES
   Forma: píldora. Es la firma del sistema y se reserva EXCLUSIVAMENTE
   a la acción; nada más en la web es una píldora salvo los badges.
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-display);
  --btn-pad-i: var(--sp-6);
  --btn-pad-b: 0.8125rem;
  --btn-gap: var(--sp-3);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: 2.875rem;              /* E4 — objetivo táctil */
  padding: var(--btn-pad-b) var(--btn-pad-i);
  border-radius: var(--r-full);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.006em;
  text-decoration: none;
  white-space: nowrap;
  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),
    box-shadow var(--dur-fast) var(--ease-in-out);
}

.btn[disabled], .btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* La flecha señala la dirección y se queda quieta. Antes avanzaba al pasar
   el ratón; era el gesto que más se notaba de la página, y lo que se tiene
   que notar es lo que dice el botón. */
.btn__arrow {
  width: 0.875rem; height: 0.875rem;
  flex: none;
}

.btn--primary {
  background-color: var(--action-bg);
  color: var(--action-text);
  border: 1px solid var(--action-bg);
}
.btn--primary:hover  { background-color: var(--action-bg-hover); border-color: var(--action-bg-hover); }
.btn--primary:active { background-color: var(--action-bg-active); }

.btn--ghost {
  background-color: transparent;
  color: var(--action-ghost-text);
  border: 1px solid var(--action-ghost-border);
}
.btn--ghost:hover {
  border-color: var(--action-ghost-border-hover);
  background-color: var(--action-ghost-bg-hover);
}

.btn--quiet {
  padding-inline: var(--sp-4);
  min-height: 2.75rem;          /* E4 — 44 px aunque sea la acción más discreta */
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.btn--quiet:hover { color: var(--text-primary); }

.btn--lg {
  --btn-pad-i: var(--sp-7);
  --btn-pad-b: 1.0625rem;
  min-height: 3.375rem;
  font-size: var(--fs-body);
}

.btn--block { display: flex; width: 100%; }


/* --------------------------------------------------------------------------
   2. ETIQUETA DE APOYO
   Aquí vivía `[01] SERVICIOS`: mono, versalitas, tracking abierto y un número
   de acento delante. Ese patrón está RETIRADO (listón A15). Ni la web pública
   ni el cuestionario lo usan; en su sitio va `.section-kicker` (site.css §12),
   que es una palabra en Switzer y una regla horizontal.

   La clase se conserva sólo para que el marcado antiguo del styleguide no se
   quede sin estilo, y pinta ya en la voz nueva. Si vas a escribir marcado
   nuevo, usa `.t-label` o `.section-kicker`.
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
  line-height: var(--lh-ui);
}
.eyebrow__index { color: var(--text-tertiary); }


/* --------------------------------------------------------------------------
   3. BADGE Y PUNTO DE ESTADO
   -------------------------------------------------------------------------- */

/* La píldora en versalitas también está retirada (listón A15): una categoría
   —«Web nueva», «Reforma»— es una palabra, no una pegatina. Lo que queda es
   una etiqueta de texto; el estado que antes daba el fondo lo da ahora el
   color. Para categorías nuevas, `.work__kind` (site.css §20). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-small);
  color: var(--text-secondary);
  line-height: var(--lh-ui);
}

.badge--accent { color: var(--text-accent); }

.status-dot {
  position: relative;
  width: 6px; height: 6px;
  flex: none;
  border-radius: var(--r-full);
  background-color: var(--feedback-ok);
}
.status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--feedback-ok);
  opacity: 0;
  animation: bl-pulse 2.6s var(--ease-out) infinite;
}
@keyframes bl-pulse {
  0%   { opacity: 0.7; transform: scale(0.6); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}


/* --------------------------------------------------------------------------
   4. TARJETAS — radio --r-md, reservado a este nivel
   -------------------------------------------------------------------------- */

.card {
  --card-pad: clamp(var(--sp-6), 2.4vw, var(--sp-8));

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--card-pad);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  background-color: var(--surface-raised);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* Panel: el nivel superior, radio --r-lg */
.panel {
  padding: clamp(var(--sp-7), 3vw, var(--sp-10));
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg);
  background-color: var(--surface-raised);
}

/* Tarjeta plana: sin caja, sólo un hairline superior.
   Evita el bloque de N tarjetas iguales del render por defecto. */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border-strong);
}


/* --------------------------------------------------------------------------
   5. LISTA DE CARACTERÍSTICAS — marca de check propia, no un emoji
   -------------------------------------------------------------------------- */

.feature-list {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.feature-list svg {
  width: 1rem; height: 1rem;
  margin-block-start: 0.125rem;
  color: var(--text-primary);
  flex: none;
}
.feature-list li[data-state='off'] { color: var(--text-disabled); }
.feature-list li[data-state='off'] svg { color: var(--text-disabled); }


/* --------------------------------------------------------------------------
   6. PRECIO — cifras tabulares y alineación óptica de la moneda
   -------------------------------------------------------------------------- */

.price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.price__amount {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h1);
  line-height: 1;
}
.price__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.price__strike {
  font-size: var(--fs-h3);
  color: var(--text-disabled);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-weight: var(--fw-normal);
}


/* --------------------------------------------------------------------------
   7. CAMPOS DE FORMULARIO — radio --r-sm
   -------------------------------------------------------------------------- */

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tr-small);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.6875rem var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface-raised);
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  transition:
    border-color var(--dur-fast) var(--ease-in-out),
    box-shadow var(--dur-fast) var(--ease-in-out);
}
.textarea { min-height: 7.5rem; resize: vertical; }

.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }

.input:hover, .textarea:hover, .select:hover { border-color: var(--text-tertiary); }

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-glow);
}

.field__error {
  font-size: var(--fs-caption);
  color: var(--feedback-error);
}


/* --------------------------------------------------------------------------
   8. ACORDEÓN
   -------------------------------------------------------------------------- */

.accordion { border-block-start: 1px solid var(--border-hairline); }

.accordion__item { border-block-end: 1px solid var(--border-hairline); }

.accordion__trigger {
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding-block: var(--sp-5);
  text-align: start;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h4);
  line-height: 1.35;
  color: var(--text-primary);
  transition: color var(--dur-instant) var(--ease-in-out);
}
.accordion__trigger:hover { color: var(--text-accent); }

/* Signo +/− construido con dos trazos: uno gira, el otro no */
.accordion__sign {
  position: relative;
  width: 0.875rem; height: 0.875rem;
  flex: none;
}
.accordion__sign::before,
.accordion__sign::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%; height: 1.5px;
  background-color: currentColor;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion__sign::after { transform: rotate(90deg); }
[aria-expanded='true'] .accordion__sign::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__panel[data-open='true'] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding-block-end: var(--sp-6);
  max-width: var(--measure-prose);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-prose);
}


/* --------------------------------------------------------------------------
   9. MARCA
   -------------------------------------------------------------------------- */

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  color: var(--text-primary);
  text-decoration: none;
}
/* El lockup mide 19 px de alto; el área de pulsación, 44. Se amplía con un
   pseudoelemento para no alterar la caja ni el ritmo del header. */
.logo::after {
  content: '';
  position: absolute;
  inset-inline: calc(var(--sp-2) * -1);
  inset-block-start: 50%;
  height: 2.75rem;
  translate: 0 -50%;
}
.logo__mark {
  /* caja del archivo original: 271 x 157 */
  height: 1.05rem;
  width: calc(1.05rem * 1.72611);
  flex: none;
}
/* El logotipo es parte del archivo de marca, no texto compuesto: se usa
   el lockup original en vez de recomponer 'brightloop' con una fuente. */
.logo__lockup {
  /* caja del archivo original: 1120.75 x 171.75 */
  height: 1.15rem;
  width: calc(1.15rem * 6.52547);
  flex: none;
}
/* El gesto de hover de la marca queda pendiente: el trazado del PNG es una
   sola ruta, sin los dos arcos separados que permitirian animarlos. Volvera
   cuando la marca sea geometria limpia. */


/* --------------------------------------------------------------------------
   10. DIVISOR DE LAZO — sustituye al <hr> plano entre secciones
   -------------------------------------------------------------------------- */

.loop-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  color: var(--border-hairline);
}
.loop-divider::before,
.loop-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: currentColor;
}
.loop-divider svg {
  width: 1.75rem;
  color: var(--border-strong);
  flex: none;
}


/* --------------------------------------------------------------------------
   11. TABLA
   -------------------------------------------------------------------------- */

/* Una tabla no se puede comprimir por debajo de su contenido. En vez de
   romper la página, hace scroll dentro de su propia caja — y es enfocable
   para que también se pueda desplazar con teclado. */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--r-sm);
}
.table-scroll .table { min-width: 32rem; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
/* Cabecera de tabla: etiqueta, no dato. Switzer y caja baja (listón A15) */
.table th {
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--border-strong);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
}
.table td {
  padding: var(--sp-4);
  border-block-end: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  vertical-align: top;
}
.table td:first-child { color: var(--text-primary); }
.table [data-num] { font-variant-numeric: tabular-nums; text-align: end; }


/* --------------------------------------------------------------------------
   12. SELECTOR DE IDIOMA
   -------------------------------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-full);
  background-color: var(--surface-raised);
}
.lang-switch__btn {
  display: inline-grid;
  place-items: center;
  min-height: 2.75rem;          /* E4 — 44 px; con el borde, 46, igual que el CTA */
  min-width: 2.75rem;
  padding-inline: var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
  line-height: 1;
  transition:
    background-color var(--dur-fast) var(--ease-in-out),
    color var(--dur-fast) var(--ease-in-out);
}
.lang-switch__btn:hover { color: var(--text-primary); }
.lang-switch__btn[aria-pressed='true'] {
  background-color: var(--action-bg);
  color: var(--action-text);
}


/* --------------------------------------------------------------------------
   13. ICONOS — un solo set: trazo 1.5, sin relleno, sin emojis (A13)
   -------------------------------------------------------------------------- */

.icon {
  width: 1.25rem; height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1rem;   height: 1rem;   stroke-width: 1.6; }
.icon--lg { width: 1.75rem; height: 1.75rem; stroke-width: 1.4; }