/* =========================================================
   Home de restaurantes.wokiapp.com — estilos propios
   Depende de tokens.css y site.css.
   ========================================================= */

/* ===================== HERO ===================== */

.hero { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 96px; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; justify-items: center; }

.hero__logos {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 40px 110px;
  align-items: center;
  justify-items: center;
}
.hero__logos img {
  max-height: 60px;
  max-width: min(150px, 100%);
  width: auto;
  object-fit: contain;
  opacity: .92;
}

.hero__proof {
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, .62);
  text-align: center;
  margin-top: -28px;
}

/* ===================== CALCULADORA ===================== */

.nunca { font-style: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.calc {
  margin-top: 56px;
  padding: 48px var(--sp-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.calc__q { color: var(--fg-3); max-width: 44ch; margin-inline: auto; }
.calc__result {
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 92px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  margin: 12px 0 8px;
}
.calc__foot { color: var(--fg-3); font-size: var(--fs-14); max-width: 46ch; margin-inline: auto; }

.calc__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: 40px;
}
.calc__field {
  background: #F5F6F8;
  border-radius: var(--r-lg);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label label" "value steppers";
  align-items: center;
  gap: 6px;
  text-align: left;
}
.calc__label {
  grid-area: label;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.calc__value {
  grid-area: value;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}
.calc__steppers { grid-area: steppers; display: flex; gap: 8px; }
.calc__steppers button {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg-2);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.calc__steppers button:hover { background: var(--b2b-50); border-color: var(--b2b-200); color: var(--b2b-600); }
.calc__steppers button:disabled { opacity: .4; cursor: not-allowed; }

/* ===================== STATS ===================== */

.stats { margin-top: var(--sp-6); }
.stat { box-shadow: var(--shadow-sm); }
.stat__num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  color: var(--b2b-800);
  margin-bottom: var(--sp-3);
}
.stat__txt { color: var(--fg-3); }

.closing-line { margin-top: 56px; margin-bottom: var(--sp-6); font-size: var(--fs-20); color: var(--fg-2); }

/* ===================== SECCIONES: encabezado ===================== */

.section .eyebrow-chip { display: block; width: fit-content; margin: 0 auto var(--sp-4); }
.section .h-section + .lede { margin-top: var(--sp-4); }
.on-dark .h-section { color: #F8F8F8; }
.on-dark .eyebrow-chip { background: rgba(0, 102, 204, .18); color: #7FB2F0; }

/* ===================== HOSPITALITY MANAGER ===================== */

.hm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  max-width: 1040px;
  margin: 64px auto 0;
}
.hm__copy .lede { text-align: left; margin-inline: 0; margin-top: var(--sp-3); }
.hm__copy .h-card { color: #F8F8F8; }
/* El ancho lo fija la columna, no la imagen: así el espacio queda reservado
   desde el principio y la ficha no "salta" cuando termina de cargar. */
.hm__art { width: 100%; max-width: 420px; justify-self: center; }
.hm__art > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 846 / 1104;
  border-radius: var(--r-lg);
}

.hm__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) auto 0;
  max-width: 1040px;
  list-style: none;
  padding: 0;
}
.hm__chips li { display: flex; }
.hm__chips img { display: block; height: 44px; width: auto; }

.nucleo { margin-top: 96px; text-align: center; }
.nucleo__title { color: #F8F8F8; }
.nucleo__frame {
  width: 100%;
  border: 0;
  border-radius: var(--r-card);
  margin-top: var(--sp-8);
  display: block;
  background: transparent;
}
.nucleo__frame--desktop { height: 900px; }
.nucleo__frame--mobile { height: 980px; display: none; }

/* ===================== FEATURES (campañas / experiencias) ===================== */

/* Dos columnas que se alternan: mockup de un lado, texto del otro. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
  margin-top: 72px;
}
.split__text .h-card { font-size: 32px; line-height: 1.2; }
.split__text .btn { margin-top: var(--sp-6); }

.feature__lede {
  color: var(--fg-3);
  margin-top: var(--sp-4);
  text-wrap: pretty;
}
.feature__lede strong { color: var(--fg-1); font-weight: var(--fw-semibold); }

.campaign {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.campaign__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.campaign__app { font-weight: var(--fw-semibold); font-size: var(--fs-14); }
.campaign__pill {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--b2b-600);
  border: 1px solid var(--b2b-200, #BFDBFE);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}
.campaign__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 14px 20px;
  background: #F5F6F8;
  border-bottom: 1px solid var(--border);
}
.campaign__name { font-family: var(--font-display); font-weight: var(--fw-semibold); }
.campaign__meta { font-size: var(--fs-14); color: var(--fg-3); }

.campaign__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.campaign__metrics li {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 2px;
}
.campaign__metrics li:nth-child(3n) { border-right: 0; }
.campaign__metrics .k {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.campaign__metrics .v {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}
.campaign__metrics .s { font-size: 11px; color: var(--fg-3); }
.campaign__metrics .is-highlight { background: var(--b2b-50); }
.campaign__metrics .is-highlight .v { color: var(--b2b-600); }

/* Las tarjetas traen el texto dentro de la imagen: si se agrandan, la
   tipografía queda desproporcionada respecto del resto de la página. */
.experiencias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
  max-width: 420px;
  margin-inline: auto;
}
.experiencias img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ===================== BRIEF ===================== */

.brief { display: block; margin-top: 56px; }
.brief img { width: 100%; border-radius: var(--r-card); }

/* ===================== DATOS ===================== */

.datos__row .split__media img {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

#datos .btn-row { margin-top: var(--sp-10); }

/* ===================== PANEL DE COBROS ===================== */

.panel {
  margin-top: 48px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.panel__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
  background: #F5F6F8;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-14);
}
.panel__dots { display: flex; gap: 6px; }
.panel__dots i { width: 10px; height: 10px; border-radius: 50%; background: #E0E2E7; }
.panel__dots i:nth-child(1) { background: #FF5F57; }
.panel__dots i:nth-child(2) { background: #FEBC2E; }
.panel__dots i:nth-child(3) { background: #28C840; }
.panel__title { font-weight: var(--fw-semibold); }
.panel__date { justify-self: end; color: var(--fg-3); }

.panel__rows li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.panel__rows li:last-child { border-bottom: 0; }
.panel__txt { display: grid; gap: 3px; }
.panel__row-title { font-weight: var(--fw-semibold); }
.panel__row-sub { font-size: var(--fs-14); color: var(--fg-3); }
.panel__amount {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--success);
}
.panel__badge {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--success);
  background: var(--success-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

.cobros { margin-top: var(--sp-6); }
.cobros .h-card { margin-top: var(--sp-3); }
.cobros .feature__lede { text-align: left; margin-inline: 0; }
#cobros .btn-row { margin-top: var(--sp-10); }

/* ===================== MICHELIN ===================== */

.michelin {
  margin: 48px auto 0;
  max-width: 760px;
  background: #fff;
  border: 1px solid #E8E3DD;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(14, 15, 18, .08), 0 2px 6px rgba(14, 15, 18, .04);
  text-align: left;
}

/* Barra superior */
.michelin__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px 18px;
  border-bottom: 1px solid #ECECEC;
  flex-wrap: wrap;
}
.michelin__brand {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-black);
  letter-spacing: .02em;
  color: #111;
}
.michelin__brand strong { font-weight: var(--fw-black); color: var(--michelin); }
.michelin__tabs { display: flex; gap: 14px; font-size: var(--fs-12); color: #444; }
.michelin__tabs .is-active {
  color: #111;
  font-weight: var(--fw-semibold);
  border-bottom: 2px solid #111;
  padding-bottom: 2px;
}
.michelin__crumbs {
  padding: 10px 18px;
  font-size: var(--fs-12);
  color: #888;
  border-bottom: 1px solid #F0F0F0;
}
.michelin__crumbs strong { color: #111; font-weight: var(--fw-semibold); }

/* Tira de fotos */
.michelin__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.michelin__gallery img { display: block; width: 100%; height: 132px; object-fit: cover; }

/* Cuerpo */
.michelin__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  padding: 22px 20px;
  align-items: start;
}
.michelin__name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: #111;
}
.michelin__addr { font-size: var(--fs-14); color: #444; margin-top: 6px; }
.michelin__meta {
  font-size: var(--fs-14);
  color: #444;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ECECEC;
}
.michelin__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.michelin__pill {
  font-size: var(--fs-12);
  background: #F3F3F3;
  border-radius: var(--r-xs);
  padding: 5px 11px;
  color: #444;
}
.michelin__fav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: #666;
  background: #fff;
  border: 1px solid #DCDCDC;
  border-radius: var(--r-xs);
  padding: 4px 11px;
}
.michelin__fav svg { width: 12px; height: 12px; flex: none; }

.michelin__stars {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ECECEC;
  font-size: var(--fs-12);
  color: #222;
}
.michelin__macarons { display: inline-flex; gap: 3px; align-items: center; line-height: 1; flex: none; }
.michelin__star { width: 17px; height: 18px; color: var(--michelin); display: block; }
.michelin__desc { margin-top: 10px; font-size: var(--fs-14); color: #333; line-height: 1.65; max-width: 46ch; }

/* Recuadro de reserva */
.michelin__cta {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  align-content: start;
  border: 1px solid #DCDCDC;
  border-radius: 8px;
  padding: var(--sp-4);
  min-width: 150px;
}
.michelin__btn {
  background: var(--michelin);
  color: #fff;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  border-radius: var(--r-xs);
  padding: 11px 26px;
  width: 100%;
  text-align: center;
}
.michelin__by { font-size: var(--fs-12); color: #888; text-align: center; line-height: 1.5; }

/* ===================== INTEGRACIONES ===================== */

.integraciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 48px 0;
}
.integraciones img {
  width: 68px; height: 68px;
  object-fit: contain;
  border-radius: var(--r-lg);
}

/* ===================== EN 72HS ===================== */

.pasos { margin-top: 48px; }
.pasos .card { text-align: center; box-shadow: var(--shadow-sm); }
.paso__num {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-4);
  margin-bottom: var(--sp-2);
}
.pasos .feature__lede { margin-top: var(--sp-2); }
#onboarding .btn-row { margin-top: var(--sp-10); }

/* ===================== CIERRE ===================== */

#clientes .h-section strong { font-weight: var(--fw-bold); }
.clientes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: center;
  justify-items: center;
  margin: 56px 0 48px;
  max-width: 900px;
  margin-inline: auto;
}
.clientes img { max-height: 56px; max-width: min(170px, 100%); width: auto; object-fit: contain; opacity: .92; }
#clientes .hero__proof { margin-top: var(--sp-4); }

/* ===================== FORMULARIO ===================== */

.form-section {
  background: var(--ink-form);
  color: #F8F8F8;
  padding: 96px 0 120px;
}
.form-section .h-section { color: #F8F8F8; margin-bottom: 48px; }

/* ---------------------------------------------------------
   Formulario de HubSpot (embed "developer")

   HubSpot lo dibuja dentro de nuestra página, no en un recuadro
   aparte, así que lo podemos pintar con los colores de Woki.
   Sus clases empiezan todas con "hsfc-". Sus estilos se inyectan
   después que los nuestros, por eso acá usamos selectores más
   específicos (.form-section .hsfc-Form ...) en vez de !important.
   --------------------------------------------------------- */

.form-section .hs-form-html {
  max-width: 720px;
  margin-inline: auto;
  min-height: 300px;
}
.form-section .hsfc-Form { font-family: var(--font-body); }
.form-section .hsfc-Form .hsfc-Step__Content { padding: 0; }
.form-section .hsfc-Form .hsfc-Row { gap: var(--sp-5); margin-bottom: var(--sp-5); }

/* Etiquetas */
.form-section .hsfc-Form .hsfc-FieldLabel {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: #C6CEDA;
  margin-bottom: 8px;
}
.form-section .hsfc-Form .hsfc-FieldLabel__RequiredIndicator { color: #7FB2F0; }

/* Campos de texto */
.form-section .hsfc-Form .hsfc-TextInput,
.form-section .hsfc-Form .hsfc-DropdownInput {
  height: 48px;
  padding: 0 14px;
  font-size: var(--fs-16);
  color: var(--fg-1);
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-section .hsfc-Form .hsfc-TextInput:focus,
.form-section .hsfc-Form .hsfc-DropdownInput:focus {
  outline: 0;
  border-color: var(--b2b-500);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .3);
}
.form-section .hsfc-Form .hsfc-PhoneInput {
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  overflow: hidden;
}
.form-section .hsfc-Form .hsfc-PhoneInput .hsfc-TextInput { border: 0; box-shadow: none; }

/* Lista desplegable */
.form-section .hsfc-Form .hsfc-DropdownOptions {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.form-section .hsfc-Form .hsfc-DropdownOptions__List__ListItem { color: var(--fg-1); }
.form-section .hsfc-Form .hsfc-DropdownOptions__List__ListItem--selected {
  background: var(--b2b-50);
  color: var(--b2b-800);
}

/* Botones "Siguiente" / "Anterior" / "Enviar" */
.form-section .hsfc-Form .hsfc-Button {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  background: var(--b2b-gradient);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  padding: 14px 28px;
  transition: filter 200ms ease, transform 120ms ease;
}
.form-section .hsfc-Form .hsfc-Button:hover { filter: brightness(1.1); }
.form-section .hsfc-Form .hsfc-Button:active { transform: scale(.985); }
.form-section .hsfc-Form .hsfc-NavigationRow { margin-top: var(--sp-6); }

/* Mensajes de error y textos de ayuda */
.form-section .hsfc-Form .hsfc-ErrorAlert,
.form-section .hsfc-Form .hsfc-FieldError { color: #FF9B9B; font-size: var(--fs-12); }
.form-section .hsfc-Form .hsfc-RichText,
.form-section .hsfc-Form .hsfc-RichText p { color: #C6CEDA; font-size: var(--fs-14); }
.form-section .hsfc-Form .hsfc-RichText a { color: #7FB2F0; }

/* ---------------------------------------------------------
   Mensaje de "gracias" después de enviar

   HubSpot lo dibuja en .hsfc-PostSubmit, que es HERMANO de
   .hsfc-Form, no hijo. Por eso ninguna de las reglas de arriba
   lo alcanzaba y salía en Helvetica. Lo pintamos aparte.
   --------------------------------------------------------- */

.form-section .hsfc-PostSubmit {
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
}
.form-section .hsfc-PostSubmit .hsfc-Step__Content { padding: 0; }
.form-section .hsfc-PostSubmit .hsfc-RichText {
  font-family: var(--font-body);
  color: #C6CEDA;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}
.form-section .hsfc-PostSubmit .hsfc-RichText p { margin: 0 0 var(--sp-3); }
.form-section .hsfc-PostSubmit .hsfc-RichText p:last-child { margin-bottom: 0; }
.form-section .hsfc-PostSubmit .hsfc-RichText strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  font-weight: var(--fw-semibold);
  color: #F8F8F8;
  margin-bottom: var(--sp-3);
}
.form-section .hsfc-PostSubmit .hsfc-RichText a { color: #7FB2F0; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1200px) {
  .hero__logos { gap: 32px 72px; }
  .calc__result { font-size: 60px; line-height: 74px; }
}

@media (max-width: 960px) {
  .hm { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hm__copy { text-align: center; }
  .hm__copy .lede { text-align: center; margin-inline: auto; }
  .nucleo__frame--desktop { display: none; }
  .nucleo__frame--mobile { display: block; }
  .split { grid-template-columns: 1fr; gap: var(--sp-8); margin-top: 56px; }
  .split--reverse .split__text { order: -1; }
  .split__text { text-align: center; }
  .campaign__metrics li:nth-child(3n) { border-right: 1px solid var(--border); }
  .campaign__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign__metrics li:nth-child(2n) { border-right: 0; }
  .michelin__body { grid-template-columns: 1fr; }
  .michelin__cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: stretch;
    gap: var(--sp-4);
    padding: 12px 16px;
    min-width: 0;
  }
  .michelin__btn { width: auto; }
  .michelin__by { text-align: left; order: -1; }
  .michelin__by br { display: none; }
  .clientes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hero { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 64px; }
  .hero__inner { gap: 36px; }
  .hero__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
  .hero__logos img { max-height: 40px; }
  .calc { padding: var(--sp-8) var(--sp-5); }
  .calc__result { font-size: 42px; line-height: 52px; }
  .calc__inputs { grid-template-columns: 1fr; }
  .stat__num { font-size: 34px; }
  .closing-line { font-size: var(--fs-18); }
  .hm__chips { gap: var(--sp-3); }
  .hm__chips img { height: 38px; }
  .nucleo { margin-top: 64px; }
  .nucleo__frame--mobile { height: 1080px; }
  .panel__rows li { grid-template-columns: 1fr auto; row-gap: 6px; }
  .panel__amount, .panel__badge { grid-column: 2; justify-self: end; }
  .panel__amount { grid-row: 1; align-self: end; }
  .panel__badge { grid-row: 2; align-self: start; }
  .michelin__bar { padding: 10px 14px; }
  .michelin__crumbs { padding: 9px 14px; }
  .michelin__gallery img { height: 96px; }
  .michelin__body { padding: 16px 14px; gap: var(--sp-4); }
  .michelin__name { font-size: 22px; }
  .michelin__cta { padding: 10px 14px; }
  .michelin__btn { padding: 10px 22px; }
  .integraciones { gap: 18px; }
  .integraciones img { width: 56px; height: 56px; }
  .clientes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .form-section { padding: 64px 0 80px; }
}

@media (max-width: 560px) {
  .campaign__metrics { grid-template-columns: 1fr; }
  .campaign__metrics li { border-right: 0; }
  .campaign__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .michelin__bar { gap: var(--sp-2); }
  .panel__bar { grid-template-columns: auto 1fr; }
  .panel__title { justify-self: end; }
  .panel__date { display: none; }
}