/* Integraciones para dealers (14/10/2026): el hub `/integrations/` y cada
   `/integrations/<slug>/`. Mismo lenguaje visual que vender.css: héroe azul muy
   claro, tarjetas blancas con borde fino, radio 12px, píldoras de estado.
   Prefijo `mh-int-`. Móvil primero: a 360 px todo va en una columna y nada
   desborda (los textos largos —URLs, nombres de endpoint— parten con
   `overflow-wrap`). Cuelga de los tokens de motorhangar.css. */

.mh-int-c { max-width: 1160px; }
#notify, #today, #how, #faqs { scroll-margin-top: calc(var(--mh-header-h) + 12px); }

/* ─── Héroe ─────────────────────────────────────────────────────────────── */
.mh-int-hero { background: linear-gradient(180deg, var(--mh-blue-050) 0%, #f6f9ff 100%); border-bottom: 1px solid var(--mh-blue-100);
  padding: 1rem 0 1.75rem; }
.mh-int-hero .mh-crumbs { margin-bottom: 1.25rem; }
.mh-int-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mh-blue); }
.mh-int-h1 { font-size: clamp(1.85rem, 5.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.035em; margin: 0 0 1rem; max-width: 22ch;
  text-wrap: balance; color: var(--mh-ink); }
.mh-int-lead { font-size: 1.06rem; line-height: 1.6; color: var(--mh-ink-2); margin: 0 0 1.5rem; max-width: 66ch; }
.mh-int-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.mh-int-cta .mh-btn { padding: .75rem 1.2rem; font-weight: 700; }
.mh-int-cta .mh-btn-primary { box-shadow: 0 6px 18px rgba(20, 99, 243, .22); }
@media (max-width: 575.98px) { .mh-int-cta .mh-btn { flex: 1 1 100%; } }
@media (min-width: 768px) { .mh-int-hero { padding: 1.25rem 0 2.5rem; } }

/* Página de una integración: logo-icono a la izquierda del título. */
.mh-int-hero-in { display: flex; gap: 1rem; align-items: flex-start; }
.mh-int-hero-txt { min-width: 0; }
.mh-int-logo { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 14px; display: grid; place-items: center; background: #fff;
  border: 1px solid var(--mh-blue-100); color: var(--mh-blue); font-size: 1.6rem; box-shadow: var(--mh-shadow-s); }
@media (min-width: 768px) { .mh-int-logo { width: 4rem; height: 4rem; font-size: 1.9rem; border-radius: 16px; } }
.mh-int-hero-1 .mh-int-h1 { font-size: clamp(1.7rem, 4.8vw, 2.7rem); max-width: 26ch; }

/* Leyenda de estados del hub */
.mh-int-leyenda { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-size: .86rem; color: var(--mh-muted); }
.mh-int-leyenda li { display: flex; align-items: center; gap: .45rem; }

/* ─── Píldoras de estado ────────────────────────────────────────────────── */
.mh-int-pill { display: inline-flex; align-items: center; flex: none; padding: .16rem .55rem; border-radius: 999px; font-size: .72rem;
  font-weight: 700; letter-spacing: .01em; text-transform: none; white-space: nowrap; line-height: 1.4; border: 1px solid transparent; }
.mh-int-pill.is-disponible { background: var(--mh-ok-050); color: #15803d; border-color: #bbf7d0; }
.mh-int-pill.is-beta { background: var(--mh-blue-050); color: var(--mh-blue-600); border-color: var(--mh-blue-100); }
.mh-int-pill.is-planeada { background: var(--mh-bg-soft); color: var(--mh-muted); border-color: var(--mh-line); }

/* Aviso de estado bajo el título (planeada / beta) */
.mh-int-estado { display: flex; gap: .85rem; align-items: flex-start; border-radius: 12px; padding: 1rem 1.1rem; margin: .25rem 0 1.25rem;
  max-width: 66ch; background: #fff; border: 1px solid var(--mh-line); }
.mh-int-estado > .bi { font-size: 1.25rem; line-height: 1.3; flex: none; }
.mh-int-estado b { display: block; color: var(--mh-ink); font-size: 1rem; margin-bottom: .2rem; }
.mh-int-estado p { margin: 0; font-size: .93rem; color: var(--mh-ink-2); line-height: 1.5; }
.mh-int-estado a { display: inline-block; margin-top: .5rem; font-weight: 700; font-size: .92rem; text-decoration: none; }
.mh-int-estado a:hover { text-decoration: underline; }
.mh-int-estado.is-planeada { background: var(--mh-warn-050); border-color: #fde3b0; }
.mh-int-estado.is-planeada > .bi { color: var(--mh-warn); }
.mh-int-estado.is-beta > .bi { color: var(--mh-blue); }

/* ─── Cuerpo ────────────────────────────────────────────────────────────── */
.mh-int-cuerpo { padding-top: 2.25rem; padding-bottom: 2.5rem; }
@media (min-width: 992px) { .mh-int-cuerpo { padding-top: 3rem; padding-bottom: 3.5rem; } }
.mh-int-sec + .mh-int-sec { margin-top: 2.75rem; }
.mh-int-h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); line-height: 1.2; letter-spacing: -.015em; color: var(--mh-ink); margin: 0 0 1rem; text-wrap: balance; }

/* «Qué hace MotorHangar» (hub) */
.mh-int-que { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .mh-int-que { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .mh-int-que { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.mh-int-que li { background: #fff; border: 1px solid var(--mh-line); border-radius: 12px; padding: 1.15rem 1.15rem 1.2rem; }
.mh-int-que b { display: block; color: var(--mh-ink); font-size: 1.02rem; margin-top: .75rem; }
.mh-int-que p { margin: .35rem 0 0; color: var(--mh-ink-2); font-size: .92rem; line-height: 1.5; }
.mh-int-ico { width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center; background: var(--mh-blue-050);
  color: var(--mh-blue); font-size: 1.2rem; }

/* Tarjetas de integración (hub) */
.mh-int-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mh-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mh-int-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mh-int-grid > li { min-width: 0; }
.mh-int-card { display: flex; gap: .85rem; align-items: flex-start; height: 100%; padding: 1rem 1rem 1rem 1.05rem; background: #fff;
  border: 1px solid var(--mh-line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.mh-int-card:hover { color: inherit; border-color: var(--mh-blue-100); box-shadow: var(--mh-shadow); }
.mh-int-card:focus-visible { outline: 2px solid var(--mh-blue); outline-offset: 2px; }
.mh-int-card-ic { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; background: var(--mh-blue-050);
  color: var(--mh-blue); font-size: 1.15rem; }
.mh-int-card-txt { flex: 1; min-width: 0; }
.mh-int-card-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.mh-int-card-cab b { color: var(--mh-ink); font-size: .98rem; line-height: 1.3; }
.mh-int-card-que { display: block; margin-top: .3rem; color: var(--mh-muted); font-size: .87rem; line-height: 1.45; }
.mh-int-card-ir { flex: none; align-self: center; color: var(--mh-line-2); transition: transform .15s, color .15s; }
.mh-int-card:hover .mh-int-card-ir { color: var(--mh-blue); transform: translateX(2px); }

/* Banda del API (hub) */
.mh-int-banda { margin-top: 3rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: center;
  background: linear-gradient(100deg, var(--mh-blue-050) 0%, #f7faff 100%); border: 1px solid var(--mh-blue-100); border-radius: 16px; padding: 1.5rem 1.25rem; }
.mh-int-banda-txt { min-width: 0; }
.mh-int-banda-txt > p:not(.mh-int-eyebrow) { color: var(--mh-ink-2); line-height: 1.6; margin: 0 0 1.25rem; max-width: 60ch; }
@media (min-width: 992px) { .mh-int-banda { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; padding: 2.25rem 2.5rem; } }
.mh-int-banda-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mh-int-banda-links a { display: flex; gap: .8rem; align-items: center; padding: .8rem .95rem; background: #fff; border: 1px solid var(--mh-line);
  border-radius: 12px; text-decoration: none; color: inherit; }
.mh-int-banda-links a:hover { border-color: var(--mh-blue-100); box-shadow: var(--mh-shadow-s); }
.mh-int-banda-links .bi { color: var(--mh-blue); font-size: 1.15rem; flex: none; }
.mh-int-banda-links span { min-width: 0; }
.mh-int-banda-links b { display: block; color: var(--mh-ink); font-size: .95rem; }
.mh-int-banda-links small { display: block; color: var(--mh-muted); font-size: .84rem; }

/* ─── Página de una integración: columnas ───────────────────────────────── */
.mh-int-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.mh-int-main { min-width: 0; color: var(--mh-ink-2); line-height: 1.6; }
@media (min-width: 992px) { .mh-int-cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 3.5rem; } }

/* Pasos */
.mh-int-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.mh-int-pasos li { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--mh-line); border-radius: 12px; padding: .95rem 1rem; }
.mh-int-pasos p { margin: .2rem 0 0; min-width: 0; overflow-wrap: anywhere; font-size: .98rem; }
.mh-int-num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--mh-blue);
  color: #fff; font-weight: 800; font-size: .9rem; }

/* Listas con icono: qué sincroniza, límites, qué hacer hoy */
.mh-int-lista { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--mh-line); border-radius: 12px; }
.mh-int-lista li { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; }
.mh-int-lista li + li { border-top: 1px solid var(--mh-line); }
.mh-int-lista .bi { flex: none; color: var(--mh-ok); font-size: 1.05rem; line-height: 1.5; }
.mh-int-lista span { min-width: 0; overflow-wrap: anywhere; font-size: .97rem; }
.mh-int-lista.is-limite .bi { color: var(--mh-muted); }
.mh-int-lista.is-hoy { background: var(--mh-blue-050); border-color: var(--mh-blue-100); }
.mh-int-lista.is-hoy li + li { border-top-color: var(--mh-blue-100); }
.mh-int-lista.is-hoy .bi { color: var(--mh-blue); }

/* FAQ: el acordeón compartido, en tarjeta */
.mh-int-faq .mh-acordeon { border: 1px solid var(--mh-line); border-top: 1px solid var(--mh-line); border-radius: 12px; background: #fff; padding: 0 1.1rem; }
.mh-int-faq .mh-acordeon details:last-child { border-bottom: 0; }
.mh-int-faq .mh-acordeon summary { color: var(--mh-ink); }
.mh-int-faq .mh-acordeon p { overflow-wrap: anywhere; }

/* Lateral */
.mh-int-lado { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 992px) { .mh-int-lado { position: sticky; top: calc(var(--mh-header-h) + 16px); } }
.mh-int-card-lado { background: #fff; border: 1px solid var(--mh-line); border-radius: 12px; padding: 1.2rem 1.2rem 1.25rem; }
.mh-int-card-lado > b { display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; color: var(--mh-ink); margin-bottom: .45rem; }
.mh-int-card-lado > p { color: var(--mh-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 1rem; }
.mh-int-card-lado > p .mh-int-pill { margin-right: .2rem; }
.mh-int-acciones, .mh-int-rel { list-style: none; margin: 0; padding: 0; }
.mh-int-acciones li + li, .mh-int-rel li + li { border-top: 1px solid var(--mh-line); }
.mh-int-acciones a { display: flex; align-items: center; gap: .55rem; padding: .6rem 0; font-weight: 600; font-size: .92rem; text-decoration: none; }
.mh-int-acciones a:hover { text-decoration: underline; }
.mh-int-rel a { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; color: var(--mh-ink); text-decoration: none; font-size: .93rem; font-weight: 600; }
.mh-int-rel a > span:first-of-type { flex: 1; min-width: 0; }
.mh-int-rel a .bi { color: var(--mh-blue); flex: none; }
.mh-int-rel a:hover > span:first-of-type { color: var(--mh-blue); }
.mh-int-todas { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--mh-line);
  font-size: .9rem; font-weight: 700; text-decoration: none; }

/* ─── Lista de espera ───────────────────────────────────────────────────── */
.mh-int-espera { margin-top: 3rem; display: grid; gap: 1.25rem 2.5rem; grid-template-columns: minmax(0, 1fr); background: #fff;
  border: 1px solid var(--mh-line); border-radius: 16px; padding: 1.5rem 1.25rem; box-shadow: var(--mh-shadow-s); }
@media (min-width: 992px) { .mh-int-espera { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 2.25rem 2.5rem; } }
.mh-int-espera-txt { min-width: 0; }
.mh-int-espera-txt > p { color: var(--mh-ink-2); line-height: 1.6; margin: 0 0 .9rem; }
.mh-int-espera-nota { display: flex; gap: .5rem; align-items: baseline; font-size: .86rem; color: var(--mh-muted) !important; }
.mh-int-espera-nota .bi { color: var(--mh-ok); }
.mh-int-form { min-width: 0; }
.mh-int-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mh-int-legend { font-size: .9rem; font-weight: 700; color: var(--mh-ink); margin-bottom: .55rem; float: none; width: auto; }
.mh-int-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.mh-int-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border: 1px solid var(--mh-line-2); border-radius: 999px;
  font-size: .88rem; color: var(--mh-ink); cursor: pointer; background: #fff; user-select: none; max-width: 100%; }
.mh-int-chip input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--mh-blue); flex: none; }
.mh-int-chip:has(input:checked) { border-color: var(--mh-blue); background: var(--mh-blue-050); color: var(--mh-blue-600); font-weight: 600; }
.mh-int-chip:focus-within { outline: 2px solid var(--mh-blue); outline-offset: 2px; }
.mh-int-mas { margin: -.25rem 0 1rem; }
.mh-int-mas summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--mh-blue); margin-bottom: .6rem; }
.mh-int-campos { display: grid; gap: .85rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 576px) { .mh-int-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mh-int-campo.is-email { grid-column: 1 / -1; } }
.mh-int-campo { min-width: 0; }
.mh-int-campo .form-label { font-size: .88rem; font-weight: 600; color: var(--mh-ink); margin-bottom: .3rem; }
.mh-int-enviar { padding: .75rem 1.3rem; font-weight: 700; }
@media (max-width: 575.98px) { .mh-int-enviar { width: 100%; } }
.mh-int-ok { align-self: center; display: flex; gap: .6rem; align-items: flex-start; background: var(--mh-ok-050); border: 1px solid #bbf7d0;
  color: #166534; border-radius: 12px; padding: 1rem 1.1rem; font-weight: 600; }

.mh-int-legal { margin: 2.5rem 0 0; font-size: .82rem; color: var(--mh-muted); max-width: 80ch; }

@media (prefers-reduced-motion: reduce) { .mh-int-card, .mh-int-card-ir { transition: none; } }

/* Móvil: la intro un punto más chica y los cuatro «qué hacemos» en fila
   (icono a la izquierda), para que el catálogo de integraciones no quede a
   cuatro pantallas del héroe. */
@media (max-width: 575.98px) {
  .mh-int-lead { font-size: 1rem; }
  .mh-int-que li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; padding: .95rem 1rem; }
  .mh-int-que .mh-int-ico { grid-row: span 2; }
  .mh-int-que b { margin-top: 0; }
}