/* ============================================================
   servicios-empresas-maldonado.css — reglas propias de
   /servicios-empresas-maldonado/ (12/08/2026).

   Se enlaza SOLO desde esa pagina, despues de
   ez-design-system-v2.purged.css. Todo scoped bajo .ez-sem-page,
   una clase que existe unicamente en el <main> de esta ruta.

   QUE ES ESTA PAGINA, porque de eso sale el diseno. No vende la
   gestion contable mensual: eso lo hace /contabilidad-maldonado/.
   Esta es una herramienta de decision para una empresa que todavia
   no sabe que necesita. Su bloque central es una matriz de cuatro
   frentes, y todo lo demas esta subordinado a que esa matriz se lea.
   Por eso el unico acento de azul palido de la pagina cae ahi.

   PALETA DE FONDOS, de arriba a abajo:

     heroe                 navy
     franja de confianza   blanco
     identifica (matriz)   #eaf1f6   <- unico acento
     que revisamos         blanco
     contexto local        #f7fafc
     que recibe            blanco
     resenas               blanco
     CTA                   navy

   Un solo acento fuerte y una sola franja marfil, las dos separadas
   por bloques blancos: no hay alternancia mecanica y no hay navy en
   ningun bloque intermedio. Los tres colores del cuerpo son los de
   docs/landing-seo-2026/00-guardrails.md. Sin degradados propios.

   EL DORADO ES ESCASO A PROPOSITO: el filete de 48px bajo cada H2 y
   el filete superior de las tres particularidades. Nada mas. Cuando
   el acento aparece en cada columna de cada bloque deja de jerarquizar.

   El vocabulario .ez-sem-* es hermano del .ez-ed-* de
   /contabilidad-maldonado/, /honorarios/ y /diagnostico-fiscal/: se
   repite archivo por archivo porque el encargo pide una hoja aislada
   por pagina y prohibe sumar capas al CSS compartido.

   SI SE USA .ez-reveal, al reves que en /contabilidad-maldonado/.
   Alli se evito porque pone opacity 0 y solo la devuelve el JS. Aca
   lo llevan todas las secciones del cuerpo: sacarlo de unas pocas
   las dejaria como las unicas visibles con el JS caido. Es una deuda
   de la pagina entera, no de un bloque.
   ============================================================ */

.ez-sem-page {
  /* Los dos fondos claros de la paleta aprobada. Contrastes medidos
     sobre #eaf1f6, que es el mas oscuro: --gray-600 6,5:1 y --navy
     12,3:1, los dos por encima de 4,5:1. Sobre #f7fafc son mas altos
     todavia. */
  --ez-sem-cool: #f7fafc;
  --ez-sem-pale: #eaf1f6;
  --ez-sem-rule: #cdd5e0;
}

/* ------------------------------------------------------------
   FOCO VISIBLE
   ------------------------------------------------------------
   El sistema pone un aro dorado de 2px. WCAG 1.4.11 pide 3:1 para
   un indicador no textual, y el dorado da 2,17:1 contra el blanco y
   1,97:1 contra el azul palido de la matriz: fallaba en las doce
   paradas de teclado de la pagina.

   Se aplica el mismo arreglo ya aprobado en /honorarios/ y en
   /contabilidad-maldonado/: navy (12:1) con halo dorado, invertido
   sobre los dos bloques 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-sem-page :focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(200, 169, 104, 0.45);
}

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

/* ------------------------------------------------------------
   HERO — escala compacta
   ------------------------------------------------------------
   min-height: 0 y hay que decir que rompe, igual que en
   /honorarios/ y /contabilidad-maldonado/. El sistema le 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
   su primera pantalla tiene que resolver "esto es lo que necesito"
   mas la accion. Con el heroe reducido mide ~385px y deja de
   coincidir con /servicios/ y /sobre-estudio/. Se acepta a sabiendas.

   Baja el AIRE, no la tipografia: el H1 conserva su clamp y la
   bajada su cuerpo. */
.ez-sem-page .ez-page-hero {
  min-height: 0;
  padding: var(--sp-8) 0;
}

/* NO SE TOCA LA MEDIDA DEL H1, y conviene dejar dicho por que. Cae
   en dos renglones a 1440 ("Servicios para empresas" / "en
   Maldonado") y el primer intento fue subirle el `max-width` para
   meterlo en uno. No sirve: el ancho lo fija
   `.ez-page-hero__inner`, que el sistema topea en 720px, y ese es el
   ancho del heroe centrado aprobado. Ensancharlo para ganar 48px de
   alto cambiaria la composicion del unico bloque que el encargo pide
   conservar. Los 48px se sacaron del relleno, que es aire.

.ez-sem-page .ez-page-hero__sub {
  max-width: 62ch;
  margin-inline: auto;
}

/* 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-sem-page .ez-page-hero .ez-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #061d36;
  box-shadow: none;
}

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

/* ------------------------------------------------------------
   FRANJA DE CONFIANZA — tres datos
   ------------------------------------------------------------
   El sistema la arma en cuatro columnas. Aca son tres, 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/ y /contabilidad-maldonado/.
   Asi "CCEAU" no compite en tamano con un numero. */
.ez-sem-page .ez-pricing-trust {
  background: var(--white);
  padding: var(--sp-8) 0;
}

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

.ez-sem-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-sem-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-sem-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. min-height: 0 es la linea que hace el trabajo: el
   componente compartido le pone 7,2rem de alto minimo a cada dato,
   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-sem-page .ez-pricing-trust {
    padding: var(--sp-5) 0;
  }
  .ez-sem-page .ez-pricing-trust__list {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .ez-sem-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-sem-page .ez-pricing-trust__list > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .ez-sem-page .ez-pricing-trust__list > li:last-child {
    padding-bottom: 0;
  }
  .ez-sem-page .ez-pricing-trust__list strong {
    margin-bottom: var(--sp-1);
    font-size: 0.75rem;
  }
  .ez-sem-page .ez-pricing-trust__list strong::after {
    display: none;
  }
  .ez-sem-page .ez-pricing-trust__list span {
    font-size: 0.9rem;
  }
}

/* ------------------------------------------------------------
   CARCASA EDITORIAL
   ------------------------------------------------------------
   Ancho completo, fondo propio y el contenido sobre el eje de
   1200px: el mismo min(var(--max-w), 100% - var(--side) * 2) que usa
   .ez-section__inner, para que todos los encabezados arranquen en el
   mismo pixel.

   En telefono el CSS compartido ya le da a
   `.ez-local-service-page section` clamp(2.5rem, 9vw, 4rem), que
   alcanza a estas secciones porque son `section` dentro de ese
   `main`: no hace falta repetirlo. */
.ez-sem-page .ez-sem-ed {
  padding: var(--sp-12) 0;
}

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

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

.ez-sem-page .ez-sem-ed__head {
  margin-bottom: var(--sp-7);
}

/* 52ch (~875px a 2,1rem). El tope de 13ch de .ez-local-section-head
   es el que partia estos titulos en cinco renglones apilados contra
   el margen izquierdo, con ~800px de blanco muerto a la derecha. Con
   52ch los cuatro H2 del cuerpo entran en UN renglon a 1440 sin un
   solo <br>: el tope de medida hace el corte. */
.ez-sem-page .ez-sem-ed__head h2 {
  margin: 0;
  max-width: 52ch;
  color: var(--navy);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.18;
}

/* El filete queda colgado del H2, no suelto: `margin-top` propio y
   ningun margen inferior en el titulo. Del filete al contenido hay
   un solo salto, el de la cabecera. */
.ez-sem-page .ez-sem-ed__head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--gold);
}

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

/* ------------------------------------------------------------
   MATRIZ DE SITUACIONES — cuatro filas, tres columnas
   ------------------------------------------------------------
   El bloque que justifica que esta URL exista aparte de
   /contabilidad-maldonado/. Cada fila se lee de izquierda a derecha:
   el frente, que se revisa, y adonde sigue.

   FILETE SOLO ENTRE FILAS, no arriba de la primera ni debajo de la
   ultima. Con los cinco filetes la seccion se leia como una tabla
   cerrada; con tres queda como una lista editorial. Es la misma
   razon por la que no hay divisores verticales: tres columnas de
   texto separadas por aire ya se leen como tres columnas.

   `align-items: start` para que las tres celdas de una fila arranquen
   en la misma linea aunque midan distinto. Sin altura fija. */
.ez-sem-page .ez-sem-matriz {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ez-sem-page .ez-sem-matriz > li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  column-gap: var(--sp-10);
  align-items: start;
  padding: var(--sp-5) 0;
}

.ez-sem-page .ez-sem-matriz > li + li {
  border-top: 1px solid var(--ez-sem-rule);
}

.ez-sem-page .ez-sem-matriz > li:first-child {
  padding-top: 0;
}

.ez-sem-page .ez-sem-matriz > li:last-child {
  padding-bottom: 0;
}

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

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

/* Tablet: el frente arriba, ocupando las dos columnas, y debajo las
   otras dos celdas. La fila conserva su agrupacion. */
@media (max-width: 1024px) {
  .ez-sem-page .ez-sem-matriz > li {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
    row-gap: var(--sp-3);
  }
  .ez-sem-page .ez-sem-matriz h3 {
    grid-column: 1 / -1;
  }
}

/* Telefono: una columna, en orden. Sin desplazamiento horizontal y
   sin tabla rigida. */
@media (max-width: 700px) {
  .ez-sem-page .ez-sem-matriz > li {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
    padding: var(--sp-5) 0;
  }
}

/* ------------------------------------------------------------
   QUE REVISAMOS — seis datos, tres por dos
   ------------------------------------------------------------
   Una <dl>: la relacion entre el dato y lo que se pregunta esta en
   el marcado y no solo en el tamano de letra. Rotulo en Newsreader y
   una linea de explicacion. Sin numeros decorativos y sin tarjetas. */
.ez-sem-page .ez-sem-revision {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-10);
  row-gap: var(--sp-6);
  margin: 0;
}

.ez-sem-page .ez-sem-revision > div {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ez-sem-rule);
}

.ez-sem-page .ez-sem-revision dt {
  margin-bottom: var(--sp-2);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.ez-sem-page .ez-sem-revision dd {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.96rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .ez-sem-page .ez-sem-revision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
    row-gap: var(--sp-5);
  }
}

@media (max-width: 560px) {
  .ez-sem-page .ez-sem-revision {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   TRES PARTICULARIDADES — columnas con filete dorado superior
   ------------------------------------------------------------
   Es el unico bloque del cuerpo con acento dorado propio, y por eso
   se lo puede permitir: son tres columnas, no seis ni doce.
   Tratamiento equivalente al de "Que incluye la gestion mensual" en
   /contabilidad-maldonado/. Sin divisores verticales: el filete ya
   marca donde empieza cada columna. */
.ez-sem-page .ez-sem-tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-10);
}

.ez-sem-page .ez-sem-tri--filete > article {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--gold);
}

.ez-sem-page .ez-sem-tri 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-sem-page .ez-sem-tri p {
  margin: 0;
  max-width: 62ch;
  color: var(--gray-600);
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .ez-sem-page .ez-sem-tri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
    row-gap: var(--sp-7);
  }
}

/* Telefono: una columna con filete horizontal, y se va el dorado.
   Apilados, tres marcas doradas mas tres separadores serian seis
   rayas para tres parrafos; el unico dorado del bloque vuelve a ser
   el del H2. Misma decision que en la banda del proceso mensual de
   /contabilidad-maldonado/. */
@media (max-width: 640px) {
  .ez-sem-page .ez-sem-tri {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .ez-sem-page .ez-sem-tri--filete > article {
    padding-top: 0;
    border-top: 0;
  }
  .ez-sem-page .ez-sem-tri > article + article {
    padding-top: var(--sp-6);
    margin-top: var(--sp-6);
    border-top: 1px solid var(--ez-sem-rule);
  }
}

/* ------------------------------------------------------------
   QUE RECIBE — cuatro resultados, dos por dos
   ------------------------------------------------------------
   CUATRO columnas en una sola fila. Se probo en dos por dos y el
   bloque medía 446px contra 356: noventa pixeles por una fila de mas
   que no aporta nada, porque los cuatro textos son igual de cortos.
   Los rotulos caen en dos renglones los cuatro, asi que la fila no
   queda despareja.

   Filete gris y no dorado: el dorado del cuerpo esta reservado para
   las tres particularidades. */
.ez-sem-page .ez-sem-entrega {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sp-8);
  row-gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ez-sem-page .ez-sem-entrega > li {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ez-sem-rule);
}

.ez-sem-page .ez-sem-entrega 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-sem-page .ez-sem-entrega p {
  margin: 0;
  max-width: 62ch;
  color: var(--gray-600);
  font-size: 0.96rem;
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .ez-sem-page .ez-sem-entrega {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-10);
  }
}

@media (max-width: 700px) {
  .ez-sem-page .ez-sem-entrega {
    grid-template-columns: 1fr;
    row-gap: var(--sp-5);
  }
}

/* ------------------------------------------------------------
   ENLACES DE TEXTO — blanco tactil de 24px
   ------------------------------------------------------------
   Los cuatro enlaces contextuales de la matriz son la unica via de
   salida del cuerpo, asi que tienen que verse y tener area util.

   `inline`, no `inline-block`: una caja en linea no se parte entre
   renglones, asi que tomaria el ancho disponible entero y empujaria
   al renglon siguiente lo que venga despues. En linea, el padding
   vertical igual entra en el rectangulo que mide el control y no
   mueve el alto del renglon. */
.ez-sem-page .ez-sem-ed a:not(.ez-btn) {
  display: inline;
  padding-block: 3px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

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

/* ------------------------------------------------------------
   DOS CIERRES SOBRE COMPONENTES COMPARTIDOS
   ------------------------------------------------------------
   Los dos van con scope de pagina a proposito. Son reglas sobre
   componentes que usan otras siete rutas, y ninguna de esas rutas
   pidio el cambio: acotarlas a .ez-sem-page deja al resto del sitio
   exactamente como estaba.

   1. "Ver fuente" de las resenas. Es un enlace de 66x22px, dos por
   debajo del minimo de 24. El diseno de la resena NO se toca: no
   cambia el color, ni el cuerpo, ni el subrayado, ni una letra del
   texto. Lo unico que crece es el area util. Medido: 22px -> 28px. */
.ez-sem-page .ez-google-review__source {
  display: inline;
  padding-block: 3px;
}

/* 2. Nota de alcance al pie. Su renglon medía 973px, el mas largo de
   la pagina.

   HAY QUE DECIR QUE ESTO CONTRADICE UNA DECISION DOCUMENTADA. El CSS
   compartido le da `max-width: 1200px` y explica por que: es letra
   chica legal al pie, que se escanea y no se lee de corrido, y con
   el tope del eje baja de cuatro renglones a tres.

   Se aplica igual porque el encargo lo pide para esta ruta, y SOLO
   para esta ruta: las otras siete paginas con nota al pie conservan
   la decision original. En pixeles y no en ch ni en rem, por el
   mismo motivo que da la regla compartida: la raiz de este sitio es
   fluida y un tope en rem no topa nada arriba de 1440. */
.ez-sem-page .ez-scope-note .ez-article-disclaimer p {
  max-width: 880px;
}

/* ------------------------------------------------------------
   TELEFONO
   ------------------------------------------------------------
   El relleno vertical de las secciones lo pone el CSS compartido.
   Aca se recorta el salto entre encabezado y contenido, y el aire
   del heroe: los 64px de relleno del heroe estan pensados para
   escritorio y en un telefono chico dejan la accion principal fuera
   de la primera pantalla. Se recorta el relleno y no la tipografia:
   el H1 conserva su clamp y los botones su alto tactil. */
@media (max-width: 640px) {
  .ez-sem-page .ez-sem-ed__head {
    margin-bottom: var(--sp-7);
  }
  .ez-sem-page .ez-page-hero {
    padding: var(--sp-10) 0;
  }
  .ez-sem-page .ez-page-hero__actions .ez-btn {
    width: 100%;
    max-width: 340px;
  }
}