/* ============================================================
   liquidacion-sueldos-empresas.css — reglas propias de
   /liquidacion-sueldos-empresas/ (24/08/2026, P4).

   NO ES UN DISENO NUEVO. Es contabilidad-maldonado.css con el scope
   renombrado a .ez-sueldos-page y sin los bloques de los componentes
   que esta pagina no usa (.ez-ed-lugar, .ez-scope-note,
   .ez-service-card, .ez-ed-list, .ez-table y las dos clases raiz
   viejas). Mas las reglas de .ez-ed-src tomadas de
   software-exportacion.css, tambien re-scopeadas.

   POR QUE SE DUPLICA EN VEZ DE COMPARTIR: es el patron del repo. La
   familia .ez-ed no existe en ez-design-system-v2.purged.css (cero
   apariciones) y se redeclara en cada CSS por pagina bajo su propia
   clase raiz: 58 veces en contabilidad-maldonado, 68 en
   contador-punta-del-este, 124 en diagnostico-fiscal, 170 en
   software-exportacion. Unificarlas es una refactorizacion del sistema
   visual, no una tarea de esta pagina.

   SI SE UNIFICA ALGUN DIA, este archivo desaparece entero: no tiene
   una sola declaracion propia que no venga de los otros dos.

   Se enlaza SOLO desde esta pagina, despues de
   ez-design-system-v2.purged.css.
   ============================================================ */

/* Tokens locales de la familia .ez-ed, mismos valores que
   contabilidad-maldonado.css (la pagina madre de esta copia). La
   copia original los dejo afuera y todo var(--ez-*) se descartaba
   entero: la pagina renderizaba sin fondos de seccion ni filetes.
   Detectado el 25/08/2026 midiendo backgroundColor en el navegador. */
.ez-sueldos-page {
  --ez-cool: #f7fafc;
  --ez-pale: #eaf1f6;
  --ez-rule: #cdd5e0;
  /* Dorado para TEXTO sobre fondo claro. El --gold del sistema
     (#c8a968) da 2,17:1 contra blanco: sirve para un filete, no
     para una palabra. Este valor da 5,0:1 sobre el azul niebla. */
  --ez-gold-ink: #7d6229;
}

/* ------------------------------------------------------------
   FOCO VISIBLE
   ------------------------------------------------------------
   Hallado al revisar el foco del enlace al calendario dentro de la
   banda nueva. El sistema pone un aro dorado de 2px, y WCAG 1.4.11
   pide 3:1 para un indicador no textual: el dorado daba 2,17:1
   contra el blanco de la pagina y 1,97:1 contra el azul niebla de
   la banda. Fallaba ya antes de esta ronda, en las nueve paradas de
   teclado de la pagina; la banda solo lo empeoro un poco.

   Se aplica el mismo arreglo ya aprobado en /honorarios/: navy
   (12:1) con halo dorado, invertido sobre el hero navy. Es una
   regla de pagina; el aro global no se toca desde aca. axe no lo
   ve, porque el contraste del foco no esta entre sus reglas. */
.ez-sueldos-page :focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(200, 169, 104, 0.45);
}

.ez-sueldos-page .ez-page-hero :focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------------
   HERO — escala compacta
   ------------------------------------------------------------
   Alineado a la izquierda, con la bajada y las acciones en la
   misma fila: el H1 es el titular de la busqueda y la accion
   tiene que quedar dentro de la primera pantalla en 1440.

   min-height: 0 y hay que decir que rompe, igual que en
   /honorarios/. El sistema fija 550px a .ez-page-hero a
   proposito, para que la franja de confianza arranque en el
   mismo pixel en todas las paginas del menu. Esta no es una
   pagina del menu: se llega desde una busqueda, es interna y
   transaccional, y su primera pantalla tiene que resolver
   "esto es lo que necesito" mas la accion. Con el hero
   reducido mide ~385px y deja de coincidir con /servicios/,
   /sobre-estudio/ y /ubicaciones/. Se acepta a sabiendas: es
   la misma decision ya tomada en /honorarios/ y el encargo
   prohibe tocar el CSS compartido. Si algun dia se prefiere la
   coincidencia, se borra esta linea y vuelven los 550px.

   Baja el AIRE, no la tipografia: el H1 conserva su clamp y la
   bajada su cuerpo. Lo que se recorta es el relleno vertical
   (sp-16/sp-12 -> sp-16 parejo) y el salto entre el titulo y
   la fila de abajo. */
.ez-sueldos-page .ez-page-hero {
  min-height: 0;
  padding: var(--sp-16) 0;
}

.ez-sueldos-page .ez-page-hero__inner {
  max-width: none;
  text-align: left;
}

.ez-sueldos-page .ez-page-hero .ez-eyebrow {
  text-align: left;
  margin-bottom: var(--sp-5);
}

.ez-sueldos-page .ez-page-hero .ez-eyebrow::after {
  margin: var(--sp-3) 0 0;
}

/* 26ch, no 22ch: con 22ch el titulo caia en tres renglones en
   escritorio y el encargo pide dos como maximo. A 26ch entra en
   dos y sigue siendo medida de titular. */
.ez-sueldos-page .ez-page-hero h1 {
  margin-inline: 0;
  margin-bottom: 0;
  max-width: 26ch;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.14;
}

.ez-sueldos-page .ez-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-6) var(--sp-10);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ez-sueldos-page .ez-page-hero__sub {
  margin: 0;
  max-width: 56ch;
  text-align: left;
}

.ez-sueldos-page .ez-page-hero__actions {
  margin: 0;
  justify-content: flex-start;
}

/* Boton principal sobre fondo oscuro: dorado con texto azul
   profundo. En navy sobre navy el boton principal queda a 1,3:1
   del fondo. La sombra se saca: la direccion no lleva sombras. */
.ez-sueldos-page .ez-page-hero .ez-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #061d36;
  box-shadow: none;
}

.ez-sueldos-page .ez-page-hero .ez-btn--primary:hover {
  background: #d6ba78;
  border-color: #d6ba78;
  color: #061d36;
}

@media (max-width: 900px) {
  .ez-sueldos-page .ez-hero-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-6);
  }
}


/* ------------------------------------------------------------
   FRANJA DE CONFIANZA — tres datos
   ------------------------------------------------------------
   El sistema la arma en cuatro columnas. Aca son tres, que es el
   patron aprobado, y los tres son rotulos cortos ("30+",
   "CCEAU", "1 a 1"), no cifras de display: se les baja el cuerpo
   y se les da tratamiento de etiqueta, igual que en /honorarios/.
   Asi "CCEAU" no compite en tamano con un numero. */
.ez-sueldos-page .ez-pricing-trust {
  background: var(--white);
  padding: var(--sp-8) 0;
}

.ez-sueldos-page .ez-pricing-trust__list {
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.ez-sueldos-page .ez-pricing-trust__list strong {
  font: 600 0.82rem/1.3 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.ez-sueldos-page .ez-pricing-trust__list strong::after {
  margin-top: var(--sp-3);
}

/* El componente pide --gray-500, que no existe en el sistema: la
   declaracion se descarta entera y en silencio, y el texto hereda
   el gris del body. Se fija el token real para que el color no
   dependa de la herencia. */
.ez-sueldos-page .ez-pricing-trust__list span {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* En telefono, TRES RENGLONES enteros y no dos columnas mas una
   huerfana. La composicion 2+1 anterior dejaba el tercer dato
   solo y centrado cruzando las dos columnas: se leia como un pie
   de la franja, no como el tercero de tres. Medido: 335px antes,
   ~215px ahora, con los tres datos enteros y sin recorte.

   min-height: 0 es la linea que hace el trabajo. El componente
   compartido le pone 7,2rem de alto minimo a cada dato (115px),
   que con cuatro cifras en dos columnas tiene sentido y con tres
   frases apiladas son 40px de aire muerto por renglon. */
@media (max-width: 768px) {
  .ez-sueldos-page .ez-pricing-trust {
    padding: var(--sp-5) 0;
  }
  .ez-sueldos-page .ez-pricing-trust__list {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .ez-sueldos-page .ez-pricing-trust__list > li {
    min-height: 0;
    padding: var(--sp-3) 0;
    border-left: 0;
    border-top: 1px solid var(--gray-100);
  }
  .ez-sueldos-page .ez-pricing-trust__list > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .ez-sueldos-page .ez-pricing-trust__list > li:last-child {
    padding-bottom: 0;
  }
  .ez-sueldos-page .ez-pricing-trust__list strong {
    margin-bottom: var(--sp-1);
    font-size: 0.75rem;
  }
  .ez-sueldos-page .ez-pricing-trust__list strong::after {
    display: none;
  }
  .ez-sueldos-page .ez-pricing-trust__list span {
    font-size: 0.9rem;
  }
}

/* ------------------------------------------------------------
   SECCION EDITORIAL — carcasa comun
   ------------------------------------------------------------ */
.ez-sueldos-page .ez-ed {
  padding: var(--sp-10) 0;
}

.ez-sueldos-page .ez-ed--white { background: var(--white); }
.ez-sueldos-page .ez-ed--cool  { background: var(--ez-cool); }
.ez-sueldos-page .ez-ed--pale  { background: var(--ez-pale); }

.ez-sueldos-page .ez-ed__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  margin-inline: auto;
}

.ez-sueldos-page .ez-ed__head {
  max-width: 74ch;
  margin-bottom: var(--sp-6);
}

.ez-sueldos-page .ez-ed__head h2 {
  color: var(--navy);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.18;
  margin: 0;
}

.ez-sueldos-page .ez-ed__head h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  border-radius: var(--r-pill);
  margin: var(--sp-4) 0 0;
}

.ez-sueldos-page .ez-ed__head p {
  margin: var(--sp-5) 0 0;
  max-width: 74ch;
  color: var(--gray-600);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   QUE INCLUYE — cuatro columnas editoriales
   ------------------------------------------------------------
   Cuatro frentes de trabajo, sin caja ni sombra: un filete
   dorado arriba y el texto debajo. A 1440 cada columna mide
   ~270px, asi que el renglon queda muy por debajo del tope. */
.ez-sueldos-page .ez-ed-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8);
  align-items: start;
}

.ez-sueldos-page .ez-ed-quad > * {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--gold);
}

.ez-sueldos-page .ez-ed-quad h3 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-sueldos-page .ez-ed-quad p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .ez-sueldos-page .ez-ed-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-8);
  }
}


@media (max-width: 600px) {
  .ez-sueldos-page .ez-ed-quad {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}


/* ------------------------------------------------------------
   CUANDO CONVIENE — matriz de dos por dos
   ------------------------------------------------------------
   Cuatro celdas: rotulo de la situacion y, debajo, que pasa
   primero. Las dos columnas ocupan el eje entero.

   Dos formas descartadas y por que:
     - rotulo a la izquierda y desarrollo a la derecha, en cuatro
       filas: el texto moria en 899px y dejaba 341px de blanco
       muerto contra el borde derecho (check-huecos-visuales)
     - tabla de tres columnas como la de /honorarios/: en 1440
       queda muy bien, pero a 390px sus 544px de ancho minimo
       obligan a desplazar en horizontal para leer la ultima
       columna. Este es el bloque que decide la contratacion.

   El filete superior es dorado y de 2px, igual que el de las
   cuatro columnas de "Que incluye": son los dos bloques que
   sostienen la decision, y se leen como pareja. */
.ez-sueldos-page .ez-ed-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-12);
  row-gap: var(--sp-7);
  margin: 0;
}

.ez-sueldos-page .ez-ed-spec__row {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--gold);
}

.ez-sueldos-page .ez-ed-spec dt {
  margin-bottom: var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-sueldos-page .ez-ed-spec dd {
  margin: 0;
  max-width: 62ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .ez-sueldos-page .ez-ed-spec {
    grid-template-columns: 1fr;
    row-gap: var(--sp-6);
  }
}


/* ------------------------------------------------------------
   UN MES DE TRABAJO — una banda, tres momentos
   ------------------------------------------------------------
   SE FUERON CINCO RAYAS (11/08/2026). La version anterior tenia,
   contando solo este bloque: el filete superior de 1px sobre las
   tres etapas, tres segmentos dorados de 32px colgados de ese
   filete (uno por etapa, `.ez-ed-step::before`) y dos divisores
   verticales. Sumado al filete dorado del H2 daban seis marcas
   decorativas para tres parrafos, y ninguna mandaba: se leia
   como una tabla a medio dibujar, no como un proceso.

   Ahora es UNA banda de azul niebla con las tres etapas adentro.
   Lo que queda:
     - un acento dorado, uno solo: el borde izquierdo de 3px que
       arranca la banda. No lleva ademas linea superior;
     - dos divisores verticales finos, que es lo unico que separa
       una etapa de la siguiente.
   El filete del H2 se queda porque es el patron de TODOS los H2
   de la pagina, y sacarlo aca dejaria una seccion desalineada
   respecto de las otras cinco.

   Las tres columnas son items de grid con `align-items: stretch`
   por defecto, asi que miden lo mismo: los divisores arrancan y
   terminan a la misma altura sin altura fija de por medio. */
.ez-sueldos-page .ez-ed-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ez-pale);
  border-left: 3px solid var(--gold);
  padding: var(--sp-8) 0;
}

.ez-sueldos-page .ez-ed-step {
  padding: 0 var(--sp-8);
}

.ez-sueldos-page .ez-ed-step + .ez-ed-step {
  border-left: 1px solid var(--ez-rule);
}

/* Dorado oscuro, no el gris de antes: la etiqueta es el momento
   del mes y es lo que ordena la lectura de izquierda a derecha.
   --ez-gold-ink da 5,0:1 sobre la banda; el --gold del sistema
   daria 1,9:1 y seria ilegible. */
.ez-sueldos-page .ez-ed-step__label {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--ez-gold-ink);
  font: 600 0.74rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-sueldos-page .ez-ed-step h3 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-sueldos-page .ez-ed-step p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Apiladas, con separador horizontal en vez de vertical. La banda
   conserva su fondo y su unico acento dorado a la izquierda: no se
   agrega ninguna segunda linea dorada por etapa. Sin alturas fijas,
   asi que cada etapa mide lo que mide su texto. */
@media (max-width: 900px) {
  .ez-sueldos-page .ez-ed-steps {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .ez-sueldos-page .ez-ed-step {
    padding: var(--sp-6);
  }
  .ez-sueldos-page .ez-ed-step + .ez-ed-step {
    border-left: 0;
    border-top: 1px solid var(--ez-rule);
  }
}

/* ------------------------------------------------------------
   PERFILES — cuatro, dos por dos
   ------------------------------------------------------------ */
.ez-sueldos-page .ez-ed-perfiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-12);
  row-gap: var(--sp-6);
}

.ez-sueldos-page .ez-ed-perfiles > li {
  position: relative;
  padding: var(--sp-5) 0 0 var(--sp-6);
  border-top: 1px solid var(--ez-rule);
}

.ez-sueldos-page .ez-ed-perfiles > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sp-5) + 0.55em);
  width: 12px;
  height: 1px;
  background: var(--gold);
}

.ez-sueldos-page .ez-ed-perfiles h3 {
  margin: 0 0 var(--sp-2);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

.ez-sueldos-page .ez-ed-perfiles p {
  margin: 0;
  max-width: 62ch;
  color: var(--gray-600);
  font-size: 0.96rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .ez-sueldos-page .ez-ed-perfiles {
    grid-template-columns: 1fr;
    row-gap: var(--sp-5);
  }
}


/* ------------------------------------------------------------
   RESENA — una sola, como cita editorial
   ------------------------------------------------------------
   El componente canonico arma una grilla de dos tarjetas con
   borde y alto minimo de 245px. Con una sola resena la grilla
   deja media fila vacia y la tarjeta estira el renglon hasta el
   ancho del bloque. Aca la resena se lee como cita: filete
   dorado a la izquierda, medida de lectura acotada y el enlace
   a la fuente intacto para que pueda verificarse. */
.ez-sueldos-page .ez-google-reviews {
  background: var(--ez-cool);
  border-bottom: 0;
  padding: var(--sp-10) 0;
}

.ez-sueldos-page .ez-google-reviews__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-10);
  align-items: start;
}

.ez-sueldos-page .ez-google-reviews__header {
  margin: 0;
  max-width: none;
  text-align: left;
}

.ez-sueldos-page .ez-google-reviews__header h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.18;
}

.ez-sueldos-page .ez-google-reviews__header h2::after {
  height: 2px;
  width: 40px;
  margin: var(--sp-4) 0 0;
}

.ez-sueldos-page .ez-google-reviews__header p {
  margin: var(--sp-4) 0 0;
  margin-inline: 0;
  max-width: 74ch;
  font-size: 0.92rem;
}

.ez-sueldos-page .ez-google-reviews__list {
  grid-template-columns: 1fr;
}

.ez-sueldos-page .ez-google-review {
  min-height: 0;
  padding: 0 0 0 var(--sp-6);
  background: none;
  border: 0;
  border-left: 2px solid var(--gold);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 900px) {
  .ez-sueldos-page .ez-google-reviews__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}


.ez-sueldos-page .ez-google-review p {
  font-size: 1rem;
}

.ez-sueldos-page .ez-google-review__footer {
  margin-top: var(--sp-4);
  padding-top: 0;
  border-top: 0;
}

/* ------------------------------------------------------------
   PREGUNTAS — cuatro, visibles, sin acordeon
   ------------------------------------------------------------ */
.ez-sueldos-page .ez-ed-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-12);
  row-gap: var(--sp-7);
}

.ez-sueldos-page .ez-ed-faq__item {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ez-rule);
}

.ez-sueldos-page .ez-ed-faq__item h3 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

.ez-sueldos-page .ez-ed-faq__item p {
  margin: 0;
  max-width: 62ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .ez-sueldos-page .ez-ed-faq {
    grid-template-columns: 1fr;
    row-gap: var(--sp-6);
  }
}


/* ------------------------------------------------------------
   ENLACES DE TEXTO — blanco tactil de 24px
   ------------------------------------------------------------ */
/* `inline`, no `inline-block`: una caja en linea no se parte entre
   renglones, asi que toma el ancho disponible entero y empuja a la
   linea siguiente lo que venga despues. Medido el 11/08 en "Entrega
   y avisos": el punto final del parrafo quedaba solo, en un renglon
   propio. Con `inline` el enlace se parte como texto y el `padding`
   vertical igual agranda el area util por encima de los 24px. */
.ez-sueldos-page .ez-ed a:not(.ez-btn),
.ez-sueldos-page .ez-google-review__source {
  display: inline;
  padding-block: 3px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.ez-sueldos-page .ez-ed a:not(.ez-btn):hover,
.ez-sueldos-page .ez-ed a:not(.ez-btn):focus-visible,
.ez-sueldos-page .ez-google-review__source:hover,
.ez-sueldos-page .ez-google-review__source:focus-visible {
  text-decoration-color: var(--navy);
}

/* ------------------------------------------------------------
   CTA FINAL
   ------------------------------------------------------------
   Uno solo, y la bajada acotada a dos renglones en escritorio.
   El componente compartido deja el parrafo con la medida del
   eje: con esta redaccion caia en tres. El tope de 62ch lo
   cierra en dos sin tocar el cuerpo ni el interlineado. */
.ez-sueldos-page .ez-cta-light {
  background: var(--white);
}

.ez-sueldos-page .ez-mid-cta__inner p {
  max-width: 62ch;
}


/* Nota al pie de seccion. En software-exportacion .ez-ed-src es una
   LISTA de fuentes (li > span) y su display:grid apila las filas; aca
   la clase vive en PARRAFOS con enlaces en linea, y ese mismo grid
   convertia cada <a> en fila propia, partiendo la frase en pedazos.
   Bloque normal, con aire contra el bloque anterior (antes quedaba
   pegado al borde de la seccion de arriba). Las reglas de li se
   fueron: aca no hay listas con esta clase. */
.ez-sueldos-page .ez-ed-src {
  display: block;
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ez-rule);
}