/* ============================================================
   contador-argentinos-uruguay.css — reglas propias de
   /contador-para-argentinos-en-uruguay/ (12/08/2026).

   Se enlaza SOLO desde esa pagina, despues de
   ez-design-system-v2.purged.css. Todo scoped bajo .ez-arg-page.

   El vocabulario .ez-arg-ed-* es el mismo patron editorial de
   /contador-punta-del-este/ y /contador-software-exportacion-uruguay/
   (.ez-ed-*), pero con nombre propio para no colisionar mientras las
   tres paginas viven en hojas aisladas: el encargo prohibe sumar
   capas al CSS compartido.

   REDISENO INTEGRAL. La version anterior duplicaba el pilar
   /feriado-fiscal-2-0/ (tabla 0/6/12%, tres vias completas), afirmaba
   una oficina en Punta del Este que no existe y no distinguia el
   analisis uruguayo del argentino. La nueva pagina vende coordinacion,
   no una segunda guia del Tax Holiday: hero compacto, franja de tres
   datos, tres situaciones, la composicion bilateral (el concepto
   central), la cronologia de tres momentos, residencia vs. beneficio,
   el entregable, cuatro preguntas, fuentes y un solo CTA.

   No se usa .ez-reveal: pone opacity 0 y solo la devuelve el JS. El
   contenido tiene que leerse igual con JavaScript desactivado.
   ============================================================ */

.ez-arg-page {
  --ez-cool: #f7fafc;
  /* Marfil del sitio, el mismo valor que ya usan /home/ y
     /sobre-estudio/. Sustituye al azul saturado --ez-pale que tenia
     antes el bloque de residencia vs. beneficio: dos azules distintos
     mas el blanco daban el efecto pijama. */
  --ez-ivory: #fbfaf7;
  --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. Mismo valor que /honorarios/ y las paginas hermanas
     fijaron como --ez-gold-ink, 5,8:1 sobre blanco. */
  --ez-gold-ink: #7d6229;
}

/* ------------------------------------------------------------
   FOCO VISIBLE
   ------------------------------------------------------------
   Mismo arreglo ya aprobado en /honorarios/, /contador-punta-del-este/
   y /contador-software-exportacion-uruguay/: el aro dorado del sistema
   da 2,17:1 contra blanco y WCAG 1.4.11 pide 3:1 para un indicador no
   textual. Navy con halo dorado; invertido dentro del hero. */
.ez-arg-page :focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(200, 169, 104, 0.45);
}

.ez-arg-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
   ------------------------------------------------------------
   min-height: 0 rompe a proposito los 550px que el sistema fija a
   .ez-page-hero para que la franja de confianza arranque en el mismo
   pixel en todas las paginas del menu. Es la misma decision ya tomada
   en /honorarios/, /contador-punta-del-este/ y
   /contador-software-exportacion-uruguay/: pagina interna y
   transaccional, no portada institucional. */
.ez-arg-page .ez-page-hero {
  min-height: 0;
  padding: var(--sp-16) 0;
}

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

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

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

/* 22ch: el H1 entra en un solo renglon en escritorio y en dos en
   pantallas angostas sin quebrar "Uruguay" solo. */
.ez-arg-page .ez-page-hero h1 {
  margin-inline: 0;
  margin-bottom: 0;
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.14;
}

.ez-arg-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-arg-page .ez-page-hero__sub {
  margin: 0;
  max-width: 58ch;
  text-align: left;
}

.ez-arg-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. Sin
   sombra: la direccion no lleva sombras en contenido. */
.ez-arg-page .ez-page-hero .ez-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #061d36;
  box-shadow: none;
}

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

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

/* ------------------------------------------------------------
   FRANJA DE CONFIANZA — tres datos
   ------------------------------------------------------------ */
.ez-arg-page .ez-pricing-trust {
  background: var(--white);
  padding: var(--sp-8) 0;
}

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

.ez-arg-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-arg-page .ez-pricing-trust__list strong::after {
  margin-top: var(--sp-3);
}

.ez-arg-page .ez-pricing-trust__list span {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ez-arg-page .ez-pricing-trust {
    padding: var(--sp-5) 0;
  }
  .ez-arg-page .ez-pricing-trust__list {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .ez-arg-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-arg-page .ez-pricing-trust__list > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .ez-arg-page .ez-pricing-trust__list > li:last-child {
    padding-bottom: 0;
  }
  .ez-arg-page .ez-pricing-trust__list strong {
    margin-bottom: var(--sp-1);
    font-size: 0.75rem;
  }
  .ez-arg-page .ez-pricing-trust__list strong::after {
    display: none;
  }
  .ez-arg-page .ez-pricing-trust__list span {
    font-size: 0.9rem;
  }
}

/* ------------------------------------------------------------
   SECCION EDITORIAL — carcasa comun
   ------------------------------------------------------------
   Cuatro superficies y tres transiciones, cada una con un motivo,
   en vez de siete franjas que alternaban blanco/azul/blanco:

     situaciones                      blanco   reconocimiento
     dos paises + cronologia +
     residencia vs. beneficio         frio     como se coordina
     entregable                       marfil   que te llevas
     preguntas + fuentes + CTA        blanco   cierre

   El azul saturado (#eaf1f6) desaparecio: con el frio y el blanco
   ya habia dos superficies claras y el tercero solo aportaba rayas. */
.ez-arg-page .ez-arg-ed {
  padding: var(--sp-10) 0;
}

.ez-arg-page .ez-arg-ed--white { background: var(--white); }
.ez-arg-page .ez-arg-ed--cool  { background: var(--ez-cool); }
.ez-arg-page .ez-arg-ed--ivory { background: var(--ez-ivory); }

/* CAPITULO CONTINUO — el mismo patron ya aprobado en
   /contador-software-exportacion-uruguay/. Secciones seguidas sobre
   la misma superficie: si cada una pagara su padding completo
   quedarian 80px de nada entre ellas y el capitulo se leeria como
   franjas sueltas del mismo color. La segunda arranca pegada y se
   separa con un filete fino sobre el eje interior, nunca a sangre. */
.ez-arg-page .ez-arg-ed--cap + .ez-arg-ed--cap {
  padding-top: 0;
}

.ez-arg-page .ez-arg-ed--cap + .ez-arg-ed--cap > .ez-arg-ed__inner {
  padding-top: var(--sp-10);
  border-top: 1px solid var(--ez-rule);
}

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

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

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

.ez-arg-page .ez-arg-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-arg-page .ez-arg-ed__head p {
  margin: var(--sp-4) 0 0;
  max-width: 70ch;
  color: var(--gray-600);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Rotulo de capitulo, usado solo en la composicion bilateral. */
.ez-arg-page .ez-arg-chapter {
  display: block;
  margin: 0 0 var(--sp-3);
  color: var(--ez-gold-ink);
  font: 600 0.74rem/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   ENLACES DE TEXTO — blanco tactil de 24px
   ------------------------------------------------------------ */
.ez-arg-page .ez-arg-ed a:not(.ez-btn) {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

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

/* ------------------------------------------------------------
   SITUACIONES — tres columnas editoriales con subgrid
   ------------------------------------------------------------
   Titulo, descripcion y resultado caen en la misma fila en las tres
   columnas. Sin cajas, sin sombra: dos filetes verticales separan. */
.ez-arg-page .ez-arg-situ {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}

@supports (grid-template-rows: subgrid) {
  .ez-arg-page .ez-arg-situ {
    grid-template-rows: auto auto 1fr;
  }
  .ez-arg-page .ez-arg-situ > article {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--sp-3);
  }
}

.ez-arg-page .ez-arg-situ > article {
  padding-left: var(--sp-8);
  border-left: 1px solid var(--ez-rule);
}

.ez-arg-page .ez-arg-situ > article:first-child {
  padding-left: 0;
  border-left: 0;
}

.ez-arg-page .ez-arg-situ h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-arg-page .ez-arg-situ > article > p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* align-self: start, no end. Con "end" las tres conclusiones se
   alineaban por abajo y, como miden 2 o 3 renglones, sus filetes
   superiores caian a alturas distintas: a 1440px el de la primera
   columna quedaba 28px mas arriba que los otros dos. El filete es lo
   que el ojo lee como separacion, asi que lo que tiene que coincidir
   es su altura, no el pie del parrafo. */
.ez-arg-page .ez-arg-situ__resultado {
  align-self: start;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ez-rule);
  color: var(--navy) !important;
  font-weight: 600;
}

@media (max-width: 860px) {
  .ez-arg-page .ez-arg-situ {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .ez-arg-page .ez-arg-situ > article {
    padding-left: 0;
    padding-top: var(--sp-5);
    border-left: 0;
    border-top: 2px solid var(--gold);
  }
  .ez-arg-page .ez-arg-situ > article:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* ------------------------------------------------------------
   SECUENCIA DE CUATRO ETAPAS — fecha, documentacion, decisiones,
   presentacion
   ------------------------------------------------------------
   Reemplaza al "eje del cambio" vertical, que dibujaba una linea de
   arriba abajo por el medio de la columna y un punto dorado centrado
   sobre cada palabra: la linea partia los rotulos al medio y los
   puntos quedaban encima de las letras.

   Aca la linea vive en una banda propia, ARRIBA de los rotulos, y
   nunca toca el texto. Los conectores van solo entre marcadores, asi
   que la secuencia no se lee como una regla horizontal a todo el
   ancho, sino como cuatro paradas encadenadas. Sin circulos grandes,
   sin numeros y sin capsulas.

   GEOMETRIA (cierre del 12/08/2026). Cuatro columnas iguales con el
   marcador al comienzo de cada una dejaban los hitos en 0 / 25 / 50 /
   75 % del eje: "Presentacion" terminaba a 160px del limite derecho y
   sobraba una cuarta parte del contenedor.

   La reticula es ahora de TRES pistas iguales y los cuatro hitos se
   cuelgan de sus cuatro lineas: 1, 2, 3 y el final de la 3. El primer
   punto apoya su borde izquierdo en el eje y el ultimo su borde
   derecho en el limite, que es lo que hace que la secuencia arranque
   y termine donde arranca y termina la seccion.

   POR QUE LOS DOS CENTRALES LLEVAN UN DESPLAZAMIENTO DE 7px/6. Lo que
   tiene que repartirse en tres partes iguales no es el ancho del
   contenedor sino el tramo entre CENTROS de marcador, que mide
   (W - 7) porque cada extremo cede medio punto. El centro del hito 2
   cae entonces en 3,5 + (W-7)/3, y la linea 2 de la grilla en W/3: la
   diferencia es exactamente 3,5 - 7/3 = +7/6. Para el hito 3 es
   -7/6. Sin ese desplazamiento los tres intervalos dan W/3, W/3 y
   W/3 - 7: siete pixeles de dispersion. Con el dan cero.

   No hay anchos en pixeles ni margenes arbitrarios: 7px es el
   diametro del punto, declarado una sola vez en --punto, y todo lo
   demas lo reparte la grilla en porcentajes.

   La linea es del <ol>, no de cada <li>: va del centro del primer
   marcador al centro del ultimo y no sigue despues de
   "Presentacion". Como esta en position:absolute no participa de la
   colocacion de la grilla, y como el ::before del contenedor se pinta
   antes que los ::after de los hijos, los puntos quedan encima de la
   linea. */
.ez-arg-page .ez-arg-secuencia {
  --punto: 7px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* La linea, de centro de marcador a centro de marcador. */
.ez-arg-page .ez-arg-secuencia::before {
  content: "";
  position: absolute;
  top: calc(var(--punto) / 2 - 0.5px);
  left: calc(var(--punto) / 2);
  right: calc(var(--punto) / 2);
  height: 1px;
  background: var(--ez-rule);
}

.ez-arg-page .ez-arg-secuencia > li {
  position: relative;
  padding-top: var(--sp-6);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-arg-page .ez-arg-secuencia > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--punto);
  height: var(--punto);
  border-radius: 50%;
  background: var(--gold);
}

/* Los cuatro van en la MISMA fila. El hito 3 y el 4 comparten la
   pista 3 —uno anclado al inicio y el otro al final—, y sin fijar la
   fila la colocacion automatica manda el 4 a una fila nueva:
   "Presentacion" caia debajo de la linea, suelta. */
.ez-arg-page .ez-arg-secuencia > li {
  grid-row: 1;
}

/* Hito 1: apoyado en el eje. */
.ez-arg-page .ez-arg-secuencia > li:nth-child(1) {
  grid-column: 1;
  justify-self: start;
}

/* Hitos 2 y 3: rotulo centrado sobre su marcador, y el conjunto
   corrido 7px/6 para que los tres intervalos entre centros midan
   exactamente lo mismo. */
.ez-arg-page .ez-arg-secuencia > li:nth-child(2) {
  grid-column: 2;
  justify-self: start;
  transform: translateX(calc(-50% + var(--punto) / 6));
}

.ez-arg-page .ez-arg-secuencia > li:nth-child(3) {
  grid-column: 3;
  justify-self: start;
  transform: translateX(calc(-50% - var(--punto) / 6));
}

.ez-arg-page .ez-arg-secuencia > li:nth-child(2)::after,
.ez-arg-page .ez-arg-secuencia > li:nth-child(3)::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Hito 4: apoyado en el limite derecho. El rotulo se alinea a la
   derecha porque, si no, un marcador en el limite empujaria la
   etiqueta fuera del contenedor. */
.ez-arg-page .ez-arg-secuencia > li:nth-child(4) {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}

.ez-arg-page .ez-arg-secuencia > li:nth-child(4)::after {
  left: auto;
  right: 0;
}

/* El conector por item solo existe en movil. */
.ez-arg-page .ez-arg-secuencia > li::before {
  display: none;
}

/* En movil la secuencia se apila y la linea pasa a ser un filete
   vertical lateral, siempre fuera del texto. La linea del contenedor
   se apaga y vuelve el conector por item, que es el que sabe donde
   termina cada paso. */
@media (max-width: 860px) {
  .ez-arg-page .ez-arg-secuencia {
    grid-template-columns: 1fr;
  }
  .ez-arg-page .ez-arg-secuencia::before {
    display: none;
  }
  .ez-arg-page .ez-arg-secuencia > li:nth-child(1),
  .ez-arg-page .ez-arg-secuencia > li:nth-child(2),
  .ez-arg-page .ez-arg-secuencia > li:nth-child(3),
  .ez-arg-page .ez-arg-secuencia > li:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    transform: none;
    text-align: left;
  }
  .ez-arg-page .ez-arg-secuencia > li {
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
  }
  .ez-arg-page .ez-arg-secuencia > li::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    right: auto;
    width: 1px;
    height: 100%;
    background: var(--ez-rule);
  }
  .ez-arg-page .ez-arg-secuencia > li:last-child::before {
    display: none;
  }
  .ez-arg-page .ez-arg-secuencia > li::after,
  .ez-arg-page .ez-arg-secuencia > li:nth-child(2)::after,
  .ez-arg-page .ez-arg-secuencia > li:nth-child(3)::after,
  .ez-arg-page .ez-arg-secuencia > li:nth-child(4)::after {
    top: 50%;
    left: 0;
    right: auto;
    transform: translateY(-50%);
  }
}

/* ------------------------------------------------------------
   DOS RESPONSABILIDADES — Uruguay | Argentina
   ------------------------------------------------------------
   Dos columnas editoriales equilibradas. Sin cajas: las separa el
   espacio y, solo en escritorio, un filete vertical muy fino. El
   subgrid ata rotulo, titulo y lista para que las dos columnas
   arranquen cada renglon a la misma altura aunque "Lo confirmas con
   tu asesor argentino" envuelva a dos lineas. */
.ez-arg-page .ez-arg-resp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--sp-10);
}

@supports (grid-template-rows: subgrid) {
  .ez-arg-page .ez-arg-resp {
    grid-template-rows: auto auto auto;
  }
  .ez-arg-page .ez-arg-resp__col {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--sp-4);
  }
}

.ez-arg-page .ez-arg-resp__col {
  min-width: 0;
  padding-right: var(--sp-10);
}

.ez-arg-page .ez-arg-resp__col + .ez-arg-resp__col {
  padding-right: 0;
  padding-left: var(--sp-10);
  border-left: 1px solid var(--ez-rule);
}

.ez-arg-page .ez-arg-resp__pais {
  display: block;
  margin: 0;
  color: var(--ez-gold-ink);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-arg-page .ez-arg-resp h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 860px) {
  .ez-arg-page .ez-arg-resp {
    grid-template-columns: 1fr;
    margin-top: var(--sp-8);
  }
  @supports (grid-template-rows: subgrid) {
    .ez-arg-page .ez-arg-resp {
      grid-template-rows: none;
    }
    .ez-arg-page .ez-arg-resp__col {
      grid-row: auto;
      grid-template-rows: none;
    }
  }
  .ez-arg-page .ez-arg-resp__col {
    padding-right: 0;
  }
  .ez-arg-page .ez-arg-resp__col + .ez-arg-resp__col {
    padding-left: 0;
    padding-top: var(--sp-6);
    margin-top: var(--sp-6);
    border-left: 0;
    border-top: 1px solid var(--ez-rule);
  }
}

.ez-arg-page .ez-arg-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ez-arg-page .ez-arg-list li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--gray-600);
  font-size: 0.96rem;
  line-height: 1.6;
}

.ez-arg-page .ez-arg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--gold);
}

/* El mensaje central de toda la landing. Cierra el bloque como
   conclusion integrada: filete dorado breve a la izquierda y medida
   de lectura acotada, no otra tarjeta ni otra caja de alerta. 62ch
   deja el renglon en torno a 700px, bien por debajo del tope de 880
   del item 6, aunque el cuerpo sea de 1,3rem. */
.ez-arg-page .ez-arg-clave {
  margin: var(--sp-10) 0 0;
  padding-left: var(--sp-6);
  max-width: 62ch;
  border-left: 3px solid var(--gold);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
}

/* ------------------------------------------------------------
   CRONOLOGIA — tres momentos, sin ordinales
   ------------------------------------------------------------
   Llevaba un filete dorado de 2px a todo el ancho justo debajo del
   subrayado dorado del h2: dos reglas doradas paralelas a 40px de
   distancia, compitiendo. El subrayado del titulo ya marca donde
   arranca la seccion; los filetes verticales entre columnas ordenan
   el resto. */
.ez-arg-page .ez-arg-momentos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ez-arg-page .ez-arg-momentos > li {
  padding-left: var(--sp-8);
  border-left: 1px solid var(--ez-rule);
}

.ez-arg-page .ez-arg-momentos > li:first-child {
  padding-left: 0;
  border-left: 0;
}

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

@media (max-width: 900px) {
  .ez-arg-page .ez-arg-momentos {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .ez-arg-page .ez-arg-momentos > li {
    padding-left: 0;
    padding-top: var(--sp-5);
    border-left: 0;
    border-top: 1px solid var(--ez-rule);
  }
  .ez-arg-page .ez-arg-momentos > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* ------------------------------------------------------------
   RESIDENCIA VS BENEFICIO — dos conceptos enfrentados
   ------------------------------------------------------------
   Estaba construido como una tabla: filete dorado de 2px a todo el
   ancho debajo del subrayado del titulo, dos columnas con mucho
   blanco a la derecha, la conclusion perdida entre parrafos y el
   enlace suelto al pie, leyendose como texto agregado.

   Ahora son dos terminos con su definicion (<dl>), separados por
   aire y un filete vertical fino, y la conclusion queda como frase
   fuerte con el enlace pegado debajo: se leen como una sola unidad.
   Sin tarjeta exterior, sin capsulas y sin numeracion. */
.ez-arg-page .ez-arg-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

@supports (grid-template-rows: subgrid) {
  .ez-arg-page .ez-arg-duo {
    grid-template-rows: auto auto;
  }
  .ez-arg-page .ez-arg-duo > div {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: var(--sp-3);
  }
}

.ez-arg-page .ez-arg-duo > div {
  min-width: 0;
  padding-right: var(--sp-10);
}

.ez-arg-page .ez-arg-duo > div + div {
  padding-right: 0;
  padding-left: var(--sp-10);
  border-left: 1px solid var(--ez-rule);
}

.ez-arg-page .ez-arg-duo dt {
  color: var(--ez-gold-ink);
  font: 600 0.74rem/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-arg-page .ez-arg-duo dd {
  margin: 0;
  max-width: 46ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* La conclusion, con el enlace debajo y sobre el mismo eje. */
.ez-arg-page .ez-arg-cierre {
  margin-top: var(--sp-10);
  max-width: 62ch;
}

.ez-arg-page .ez-arg-cierre__frase {
  margin: 0;
  max-width: none;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
}

.ez-arg-page .ez-arg-cierre__enlace {
  margin: var(--sp-4) 0 0;
}

.ez-arg-page .ez-arg-cierre__enlace a span {
  margin-left: var(--sp-1);
}

@media (max-width: 700px) {
  .ez-arg-page .ez-arg-duo {
    grid-template-columns: 1fr;
  }
  @supports (grid-template-rows: subgrid) {
    .ez-arg-page .ez-arg-duo {
      grid-template-rows: none;
    }
    .ez-arg-page .ez-arg-duo > div {
      grid-row: auto;
      grid-template-rows: none;
    }
  }
  .ez-arg-page .ez-arg-duo > div {
    padding-right: 0;
  }
  .ez-arg-page .ez-arg-duo > div + div {
    padding-left: 0;
    padding-top: var(--sp-5);
    margin-top: var(--sp-5);
    border-left: 0;
    border-top: 1px solid var(--ez-rule);
  }
  .ez-arg-page .ez-arg-duo dd {
    max-width: none;
  }
  .ez-arg-page .ez-arg-cierre {
    margin-top: var(--sp-8);
  }
}

/* ------------------------------------------------------------
   ENTREGABLE — composicion editorial, no planilla
   ------------------------------------------------------------
   Era una caja rectangular de borde completo con seis filas
   separadas por filetes horizontales: leia como formulario y la
   advertencia del pie quedaba desconectada del resto.

   Ahora no hay borde exterior ni filas. El encabezado ocupa la
   columna angosta (0,72) y los seis entregables la ancha (1,28), en
   dos columnas con un check discreto. La nota va debajo de la
   grilla, al ancho completo de esa columna, asi que se lee como
   parte del entregable y no como un aparte. */
.ez-arg-page .ez-arg-hoja {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--sp-12);
  align-items: start;
}

.ez-arg-page .ez-arg-hoja__intro {
  max-width: none;
  margin-bottom: 0;
}

.ez-arg-page .ez-arg-hoja__intro p {
  max-width: 40ch;
}

.ez-arg-page .ez-arg-entrega {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ez-arg-page .ez-arg-entrega li {
  position: relative;
  padding-left: var(--sp-7);
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Check dibujado con dos bordes, no un glifo: dos lados de un
   rectangulo girado 45 grados. Va en --ez-gold-ink (5,8:1) y no en
   el --gold de marca (2,17:1 sobre claro), porque WCAG 1.4.11 pide
   3:1 para un indicador grafico. */
.ez-arg-page .ez-arg-entrega li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.36em;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--ez-gold-ink);
  border-bottom: 2px solid var(--ez-gold-ink);
  transform: rotate(45deg);
}

/* padding-left igual al de los entregables: asi el texto de la nota
   cae sobre el mismo eje que el de los checks y no 7px corrido. */
.ez-arg-page .ez-arg-hoja__nota {
  margin: var(--sp-8) 0 0;
  padding-left: var(--sp-7);
  max-width: none;
  border-left: 3px solid var(--ez-rule);
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .ez-arg-page .ez-arg-hoja {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

@media (max-width: 640px) {
  .ez-arg-page .ez-arg-entrega {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .ez-arg-page .ez-arg-hoja__intro p {
    max-width: none;
  }
  .ez-arg-page .ez-arg-hoja__nota {
    margin-top: var(--sp-6);
  }
}

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

.ez-arg-page .ez-arg-faq article {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ez-rule);
}

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

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

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

/* ------------------------------------------------------------
   FUENTES Y ALCANCE PROFESIONAL — seccion editorial secundaria
   ------------------------------------------------------------
   Es una landing comercial: las fuentes respaldan, no mandan. Antes
   ocupaban 618px con una lista de bibliografia —un filete horizontal
   completo por cada norma— y la autoria quedaba encerrada en una
   tarjeta con fondo propio, flotando sobre 350px de vacio.

   Ahora las normas entran en un <details> cerrado, la lista pierde
   los filetes y la ficha pierde la caja: queda como columna de datos
   colgada de un filete dorado, alineada con el arranque del
   contenido de la izquierda. */
.ez-arg-page .ez-arg-fuentes {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--sp-12);
  align-items: start;
}

.ez-arg-page .ez-arg-fuentes h2 {
  margin: 0 0 var(--sp-4);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1.25;
}

.ez-arg-page .ez-arg-fuentes__cuerpo > p {
  margin: 0;
  max-width: 74ch;
  color: var(--gray-600);
  font-size: 0.94rem;
  line-height: 1.7;
}

/* Disclosure nativo, chevron discreto. Mismo patron que el
   <details> ya aprobado en /contador-software-exportacion-uruguay/:
   sin JS propio, con tabindex nativo y el contenido siempre en el
   DOM, que es lo que lee Google. */
.ez-arg-page .ez-arg-more {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--ez-rule);
}

.ez-arg-page .ez-arg-more > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-3) 0;
  color: var(--navy);
  font: 600 0.92rem/1.4 var(--font-body);
  cursor: pointer;
  list-style: none;
}

.ez-arg-page .ez-arg-more > summary::-webkit-details-marker {
  display: none;
}

.ez-arg-page .ez-arg-more > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
  transform-origin: 55% 55%;
  transition: transform 0.18s ease;
}

.ez-arg-page .ez-arg-more[open] > summary::before {
  transform: rotate(45deg);
}

.ez-arg-page .ez-arg-more > summary:hover {
  color: var(--navy-light, #164a7d);
}

.ez-arg-page .ez-arg-more__body {
  padding: var(--sp-2) 0 var(--sp-5);
}

@media (prefers-reduced-motion: reduce) {
  .ez-arg-page .ez-arg-more > summary::before {
    transition: none;
  }
}

.ez-arg-page .ez-arg-src-group {
  margin: 0;
}

.ez-arg-page .ez-arg-src-group dt {
  margin: 0 0 var(--sp-3);
  color: var(--gray-400);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-arg-page .ez-arg-src-group dd {
  margin: 0 0 var(--sp-6);
}

.ez-arg-page .ez-arg-src-group dd:last-child {
  margin-bottom: 0;
}

/* Lista editorial compacta: nombre de la fuente y una sola frase.
   Sin un filete horizontal por norma, que era lo que le daba
   aspecto de bibliografia academica. */
.ez-arg-page .ez-arg-src {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ez-arg-page .ez-arg-src > li > span {
  display: block;
  max-width: 64ch;
  color: var(--gray-600);
  font-size: 0.86rem;
  line-height: 1.55;
}

.ez-arg-page .ez-arg-fuentes__ficha {
  align-self: start;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--gold);
}

.ez-arg-page .ez-arg-fuentes__ficha dl {
  margin: 0;
}

.ez-arg-page .ez-arg-fuentes__ficha dt {
  margin-bottom: var(--sp-2);
  color: var(--gray-400);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-arg-page .ez-arg-fuentes__ficha dd {
  margin: 0 0 var(--sp-4);
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ez-arg-page .ez-arg-fuentes__ficha dd:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .ez-arg-page .ez-arg-fuentes {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ------------------------------------------------------------
   CIERRE GEOMETRICO — excepciones acotadas a #dos-paises y
   #distincion (12/08/2026)
   ------------------------------------------------------------
   Las dos composiciones estan aprobadas y no se rediseñan. Lo que se
   corrige es que varios elementos internos terminaban antes del
   limite derecho y dejaban una franja del eje sin usar.

   Van con selector de ID a proposito: son excepciones a reglas
   generales de la pagina (el tope de 74ch del encabezado, el de 70ch
   de su bajada, el de 46ch de las definiciones), no un cambio de esas
   reglas. El ID les da (1,1,0) contra los (0,2,0) de las generales,
   asi que ganan sin depender del orden del archivo — que es la trampa
   con la que ya tropezo el bloque movil del entregable. Por lo mismo,
   sus contrapartes moviles tambien llevan ID. */

/* --- #dos-paises: encabezado sobre todo el eje --- */
.ez-arg-page #dos-paises .ez-arg-ed__head {
  max-width: none;
}

/* El H2 conserva su medida: 74ch del encabezado daban 746,94px y ese
   es el ancho que produce el corte aprobado en dos renglones ("El
   cambio funciona cuando / los dos lados coinciden"). Al soltar el
   encabezado, el tope pasa al propio titulo. Se expresa en ch de su
   fuente para que siga siendo una medida de lectura y no un ancho. */
.ez-arg-page #dos-paises .ez-arg-ed__head h2 {
  max-width: 21.5ch;
}

.ez-arg-page #dos-paises .ez-arg-ed__head p {
  max-width: 85ch;
}

/* La conclusion del bloque deja de ser un parrafo corto contra la
   esquina izquierda: usa la franja editorial hasta cerca del limite
   derecho, sin pasar del tope de lectura de 880px del item 6.
   Conserva filete dorado, no se centra y no se convierte en caja. */
.ez-arg-page #dos-paises .ez-arg-clave {
  max-width: 74ch;
}

/* --- #distincion: definiciones y cierre sobre todo el eje --- */
.ez-arg-page #distincion .ez-arg-duo dd {
  max-width: none;
}

/* Conclusion a la izquierda y enlace a la derecha, sobre la misma
   linea optica y con el contenedor a todo el ancho. Antes los dos
   caian dentro de una caja de 62ch y la mitad derecha de la seccion
   quedaba vacia. Sin borde, sin fondo, sin tarjeta y sin filete. */
.ez-arg-page #distincion .ez-arg-cierre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6) var(--sp-12);
  max-width: none;
}

/* La frase conserva medida de lectura propia aunque el contenedor
   ocupe el eje entero. */
.ez-arg-page #distincion .ez-arg-cierre__frase {
  max-width: 62ch;
}

.ez-arg-page #distincion .ez-arg-cierre__enlace {
  margin: 0;
  justify-self: end;
  text-align: right;
}

@media (max-width: 700px) {
  .ez-arg-page #distincion .ez-arg-cierre {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .ez-arg-page #distincion .ez-arg-cierre__enlace {
    justify-self: start;
    text-align: left;
  }
}

/* ------------------------------------------------------------
   CTA FINAL
   ------------------------------------------------------------
   Patron editorial aprobado en /honorarios/ y
   /contador-software-exportacion-uruguay/, que son identicos entre
   si: rotulo plano sin capsula, titulo serif de 2rem, eje de 1200px
   y fondo frio. Verificado con
   `node scripts/comparar-componente.mjs cierre honorarios
   contador-para-argentinos-en-uruguay`: cero diferencias.

   Estaba en blanco y con la bajada capada a 62ch. Sobre el blanco de
   las dos secciones anteriores el cierre no se despegaba, y era la
   unica de las tres paginas hermanas con otro fondo y otra medida. */
.ez-arg-page .ez-cta-light {
  background: var(--ez-cool);
  border-top: 1px solid rgba(205, 213, 224, 0.75);
  padding: var(--sp-10) 0;
}

.ez-arg-page .ez-cta-light .ez-mid-cta__inner {
  width: min(var(--max-w), calc(100% - var(--side) * 2));
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.ez-arg-page .ez-cta-light .ez-eyebrow {
  display: inline-block;
  margin: 0 auto var(--sp-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ez-arg-page .ez-cta-light .ez-eyebrow::after {
  display: none;
}

.ez-arg-page .ez-cta-light h2 {
  margin-inline: auto;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.14;
  text-align: center;
}

.ez-arg-page .ez-cta-light p {
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  color: var(--gray-600);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

.ez-arg-page .ez-cta-light .ez-mid-cta__actions {
  justify-content: center;
}

.ez-arg-page .ez-cta-light .ez-btn {
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 600;
}

/* ------------------------------------------------------------
   MOVIL
   ------------------------------------------------------------
   El cuerpo baja a 0,94rem con interlinea 1,6 o mas. Ningun control
   baja de 44px ni ningun enlace de 24px. */
@media (max-width: 640px) {
  .ez-arg-page .ez-arg-ed {
    padding: var(--sp-8) 0;
  }
  .ez-arg-page .ez-arg-ed__head {
    margin-bottom: var(--sp-6);
  }
  /* El encabezado del entregable es una COLUMNA de la grilla, no un
     encabezado suelto: su separacion la pone el gap. La regla de
     arriba esta escrita mas abajo en el archivo que la del bloque
     del entregable y, como las media queries no suman especificidad,
     le ganaba por orden y sumaba 24px sobre los 32 del gap. */
  .ez-arg-page .ez-arg-hoja__intro {
    margin-bottom: 0;
  }
  .ez-arg-page .ez-arg-situ > article > p,
  .ez-arg-page .ez-arg-list li,
  .ez-arg-page .ez-arg-duo dd,
  .ez-arg-page .ez-arg-faq p,
  .ez-arg-page .ez-arg-entrega li,
  .ez-arg-page .ez-arg-fuentes__cuerpo > p {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .ez-arg-page .ez-page-hero {
    padding: var(--sp-10) 0;
  }
  .ez-arg-page .ez-page-hero .ez-eyebrow {
    margin-bottom: var(--sp-4);
  }
  .ez-arg-page .ez-hero-row {
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
  }
  .ez-arg-page .ez-page-hero h1 {
    font-size: clamp(1.6rem, 6.4vw, 2.1rem);
    max-width: none;
  }
  .ez-arg-page .ez-page-hero__sub {
    font-size: 0.98rem;
  }
  .ez-arg-page .ez-page-hero__actions {
    gap: var(--sp-2);
  }
  .ez-arg-page .ez-page-hero__actions .ez-btn {
    width: 100%;
    max-width: 340px;
  }
  .ez-arg-page .ez-cta-light {
    padding: var(--sp-10) 0;
  }
  .ez-arg-page .ez-cta-light .ez-mid-cta__actions .ez-btn {
    width: 100%;
    max-width: 340px;
  }
}