/* ============================================================ software-exportacion.css — reglas propias de /contador-software-exportacion-uruguay/ (11/08/2026). Se enlaza SOLO desde esa pagina, despues de ez-design-system-v2.purged.css. Todo scoped bajo .ez-software-page. El vocabulario .ez-ed-* es el mismo de /diagnostico-fiscal/, /honorarios/ y /feriado-fiscal-2-0/: se repite archivo por archivo porque el encargo pide una hoja aislada por pagina y prohibe sumar capas al CSS compartido. CIERRE INTEGRAL. La version anterior tenia nueve franjas que alternaban blanco y azul una por seccion, y un filete dorado de ancho completo sobre cada columna de cada bloque. Leida entera era un acordeon de rayas. Ahora la pagina se agrupa en TRES capitulos visuales y cinco superficies: hero navy | franja de decision blanco 1 ENTENDER LA OPERACION azul niebla + azul grisaceo 2 DEFINIR EL ENCUADRE blanco 3 SOSTENERLO Y DECIDIR azul niebla continuo | fuentes blanco | CTA final azul palido PULIDO 12/08/2026. El bloque de renta e IVA era un panel navy: el mismo fondo del hero y del pie, tres franjas oscuras en una misma pagina que se leian como tres banners y le sacaban jerarquia a la apertura. Ahora el navy queda reservado para abrir y cerrar, y ese bloque pasa a --ez-pale, la superficie mas oscura de la parte clara. De paso se corrige un problema que axe no ve: dentro del panel navy el aro de foco de pagina era navy sobre navy y no se distinguia. El dorado quedo reducido a lo que pide la direccion: eyebrows, separadores cortos, marcas de conexion y el boton principal. No se usa .ez-reveal: pone opacity 0 y solo la devuelve el JS. Esta pagina lleva contenido normativo y tiene que leerse aunque el JS falle. Por la misma razon los disclosures son
nativos: sin JS propio, el texto vive en el DOM y lo leen el buscador y un lector de pantalla. ============================================================ */ .ez-software-page { --ez-cool: #f7fafc; /* Azul grisaceo claro y desaturado: la superficie del bloque de renta e IVA. Se distingue del blanco y del --ez-cool de la seccion anterior sin pesar como un segundo hero. Ver la nota de jerarquia de superficies. */ --ez-pale: #e7eff6; --ez-rule: #cdd5e0; /* Filete sobre --ez-pale: el --ez-rule se pierde contra ese fondo. */ --ez-rule-soft: #c0cfdd; --ez-rule-navy: rgba(255, 255, 255, 0.18); /* Dorado para TEXTO sobre fondo claro. El --gold del sistema (#c8a968) da 2,25:1 contra blanco: sirve para un filete, no para una palabra. Mismo valor que el design system usa como --bronce, 5,8:1. Es el token que ya fijo /honorarios/ en su cierre. */ --ez-gold-ink: #7d6229; } /* ------------------------------------------------------------ FOCO VISIBLE ------------------------------------------------------------ El sistema pone un aro dorado de 2px y sobre blanco el dorado da 2,25:1 contra el fondo, cuando WCAG 1.4.11 pide 3:1 para un indicador no textual. Navy con halo dorado, y al reves dentro del hero. Es la misma regla de pagina que /honorarios/: el aro global no se toca desde aca. */ .ez-software-page :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(200, 169, 104, 0.45); } .ez-software-page .ez-page-hero :focus-visible { outline-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); } /* ------------------------------------------------------------ HERO ------------------------------------------------------------ min-height: 0, y hay que decir que rompe algo. El sistema fija 550px a .ez-page-hero a proposito, para que la franja arranque en el mismo pixel en todas las paginas del menu. Con el hero compacto esta pagina queda en ~380px y deja de coincidir con /servicios/, /sobre-estudio/ y /ubicaciones/ al cambiar de pagina. Se acepta a sabiendas, igual que en /honorarios/: es la geometria aprobada para una landing interna y el encargo prohibe tocar el CSS compartido. Se revierte borrando la linea. */ .ez-software-page .ez-page-hero { min-height: 0; padding: var(--sp-16) 0; } .ez-software-page .ez-page-hero__inner { max-width: none; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sp-12); } /* Tres marcas de confianza en la esquina inferior derecha. Filete dorado a la izquierda de cada una: mismo idioma que el kicker, sin volumen. */ .ez-software-page .ez-hero-marks { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--sp-5); } .ez-software-page .ez-hero-marks li { margin: 0; padding-left: var(--sp-4); border-left: 2px solid var(--gold); color: #b9c7d6; font-size: 0.92rem; line-height: 1.4; max-width: 24ch; } @media (max-width: 900px) { .ez-software-page .ez-page-hero__inner { grid-template-columns: 1fr; row-gap: var(--sp-8); } .ez-software-page .ez-hero-marks { grid-template-columns: 1fr; } } .ez-software-page .ez-page-hero .ez-eyebrow { text-align: left; margin-bottom: var(--sp-4); } .ez-software-page .ez-page-hero .ez-eyebrow::after { margin: var(--sp-3) 0 0; } /* 26ch, la misma medida de /honorarios/: el H1 cae en dos renglones en escritorio sin bajar el cuerpo del titular. */ .ez-software-page .ez-page-hero h1 { margin-inline: 0; margin-bottom: 0; max-width: 26ch; font-size: clamp(1.85rem, 3.2vw, 2.5rem); line-height: 1.16; } /* Bajada y boton en UNA columna, no repartidos en las dos puntas. Antes el boton iba contra el borde derecho a la altura de la bajada, con ~400px de vacio en el medio: dos piezas que son un solo mensaje ("esto puede aplicarte" -> "averigualo") se leian desconectadas. El vacio de la derecha del hero queda como decision, no como sobra. */ .ez-software-page .ez-hero-row { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--ez-rule-navy); max-width: 56ch; } .ez-software-page .ez-hero-row .ez-page-hero__actions { margin-top: var(--sp-7); } .ez-software-page .ez-page-hero__sub { margin: 0; max-width: 56ch; text-align: left; font-size: 1.02rem; } .ez-software-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 quedaba a 1,3:1 del fondo y solo se distinguia por el borde. La sombra se saca: la direccion no lleva sombras pesadas. */ .ez-software-page .ez-page-hero .ez-btn--primary { background: var(--gold); border-color: var(--gold); color: #061d36; box-shadow: none; } .ez-software-page .ez-page-hero .ez-btn--primary:hover { background: #d6ba78; border-color: #d6ba78; color: #061d36; } @media (max-width: 900px) { .ez-software-page .ez-hero-row { grid-template-columns: 1fr; align-items: start; gap: var(--sp-6); } } /* ------------------------------------------------------------ FRANJA DE DECISIONES — tres columnas, patron de /honorarios/ ------------------------------------------------------------ El componente compartido pone el a 1,7rem en Newsreader porque nacio para mostrar cifras ("30+", "48 h"). Aca los tres rotulos son nombres de decisiones: bajan a versalita, con el filete dorado del propio componente debajo. El eje de 1120px y los separadores verticales vienen del componente. */ .ez-software-page .ez-pricing-trust { padding: var(--sp-7) 0; background: var(--white); } .ez-software-page .ez-pricing-trust__list { grid-template-columns: repeat(3, 1fr); align-items: start; } .ez-software-page .ez-pricing-trust__list strong { margin-bottom: var(--sp-3); font: 600 0.82rem/1.3 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; } .ez-software-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 y el texto hereda el gris del body. Se fija el token real para que el color no dependa de la herencia. */ .ez-software-page .ez-pricing-trust__list span { margin-inline: auto; max-width: 30ch; color: var(--gray-600); font-size: 0.95rem; line-height: 1.6; } /* En telefono, tres renglones alineados a la izquierda. La linea que hace el trabajo es min-height: 0 — el componente le pone 7,2rem de alto minimo a cada dato, que con cifras en dos columnas tiene sentido y con tres frases apiladas son 40px de aire muerto por renglon. */ @media (max-width: 768px) { .ez-software-page .ez-pricing-trust { padding: var(--sp-4) 0; } .ez-software-page .ez-pricing-trust__list { grid-template-columns: 1fr; gap: 0; text-align: left; } .ez-software-page .ez-pricing-trust__list > li { min-height: 0; padding: var(--sp-2) 0; border-left: 0; border-top: 1px solid var(--gray-100); } .ez-software-page .ez-pricing-trust__list > li:first-child { padding-top: 0; border-top: 0; } .ez-software-page .ez-pricing-trust__list > li:last-child { padding-bottom: 0; } .ez-software-page .ez-pricing-trust__list strong { margin-bottom: var(--sp-1); font-size: 0.75rem; } .ez-software-page .ez-pricing-trust__list strong::after { display: none; } .ez-software-page .ez-pricing-trust__list span { margin-inline: 0; max-width: none; font-size: 0.9rem; } } /* ------------------------------------------------------------ SECCION EDITORIAL — carcasa comun ------------------------------------------------------------ */ .ez-software-page .ez-ed { padding: var(--sp-10) 0 var(--sp-8); } .ez-software-page .ez-ed--white { background: var(--white); } .ez-software-page .ez-ed--cool { background: var(--ez-cool); } /* CAPITULO CONTINUO. Tres secciones seguidas sobre la misma superficie: si cada una pagara su padding completo, entre ellas quedarian 72px de nada y el capitulo se leeria como tres franjas del mismo color. La segunda y la tercera arrancan pegadas y se separan con un filete fino, que es la costura correcta. */ .ez-software-page .ez-ed--cap + .ez-ed--cap { padding-top: 0; } .ez-software-page .ez-ed--cap + .ez-ed--cap > .ez-ed__inner { padding-top: var(--sp-8); border-top: 1px solid var(--ez-rule); } /* Bloque de renta e IVA: la superficie mas oscura de la parte clara. */ .ez-software-page .ez-ed--pale { background: var(--ez-pale); } .ez-software-page .ez-ed__inner { width: min(var(--max-w), calc(100% - var(--side) * 2)); margin-inline: auto; } .ez-software-page .ez-ed__head { max-width: 70ch; margin-bottom: var(--sp-6); } .ez-software-page .ez-ed__head h2 { color: var(--navy); font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.18; margin: 0; } .ez-software-page .ez-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: el dorado vive aca, no en un filete de ancho completo sobre cada columna. */ /* Rotulo, filete y titulo son TRES niveles y necesitan dos distancias distintas: 12px del rotulo al filete y 20px del filete al titulo. Antes el filete llevaba 12px arriba y el rotulo 16px abajo, y como el margen inferior del rotulo colapsa contra el margen del

siguiente, el filete terminaba casi tocando el titular. El margen inferior va en el ::after, no en el

: un pseudo elemento en flujo no colapsa con el hermano del padre, asi que la distancia es la que dice. */ .ez-software-page .ez-sw-chapter { margin: 0; color: var(--ez-gold-ink); font: 600 0.74rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; } .ez-software-page .ez-sw-chapter::after { content: ""; display: block; width: 28px; height: 2px; margin: var(--sp-3) 0 var(--sp-5); background: var(--gold); border-radius: var(--r-pill); } /* El h2 que sigue al rotulo no agrega margen propio: la separacion la fija el filete. Vale para el h2 del .ez-ed__head y para el del .ez-ed-split__intro, que son las dos formas que toma un capitulo. */ .ez-software-page .ez-sw-chapter + h2 { margin-top: 0; } /* Rotulo y dos enlaces en un renglon ordenado. Dos correcciones que costaron una pasada cada una: el "·" entre enlaces quedaba colgado al final de la primera linea al romper el renglon, y el borde vertical que lo reemplazo quedaba colgando cuando el segundo enlace bajaba de renglon. Ahora solo el gap separa, y el tope de medida se anula para que el filete superior no se corte a media pagina. */ .ez-software-page .ez-ed__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6); width: 100%; max-width: none; margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--ez-rule); color: var(--gray-600); font-size: 0.94rem; line-height: 1.6; } .ez-software-page .ez-ed__foot > span { color: var(--gray-400); font: 600 0.74rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; } @media (max-width: 760px) { .ez-software-page .ez-ed__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } } /* ------------------------------------------------------------ DISCLOSURE TECNICO —

nativo, chevron discreto ------------------------------------------------------------ El sistema compartido dibuja "+" y "−" en .ez-faq-item. Aca se usan clases propias para no heredar ese marcador: la direccion pide chevron, no signo mas. */ .ez-software-page .ez-sw-more { margin-top: var(--sp-6); border-top: 1px solid var(--ez-rule); } /* Dos variantes sin filete superior. El filete de extremo a extremo era correcto cuando el disclosure cerraba una seccion entera; en los dos bloques pulidos el 12/08 sobra: uno vive dentro de la franja de cierre (donde la senal es el filete dorado de la conclusion) y el otro cuelga de una conclusion que ya tiene su propia superficie. */ .ez-software-page .ez-sw-more--flush { margin-top: var(--sp-5); border-top: 0; } .ez-software-page .ez-sw-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-software-page .ez-sw-more > summary::-webkit-details-marker { display: none; } /* Chevron: dos lados de un cuadrado girado. Rota 90 grados al abrir, con la transicion desactivada si el sistema pide menos movimiento (la regla global de prefers-reduced-motion no alcanza a una propiedad declarada aca). */ .ez-software-page .ez-sw-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-software-page .ez-sw-more[open] > summary::before { transform: rotate(45deg); } .ez-software-page .ez-sw-more > summary:hover { color: var(--navy-light, #164a7d); } .ez-software-page .ez-sw-more__body { padding: 0 0 var(--sp-5); max-width: 74ch; } /* ------------------------------------------------------------ TRES REGIMENES — el cuerpo del disclosure de estructura ------------------------------------------------------------ Literal E, IRPF e IRAE en tres columnas editoriales: usan todo el eje en vez de amontonarse en la mitad izquierda, y cada una conserva su medida de lectura porque el ancho lo reparte la grilla. Sin fondos, sin sombras y sin radios: lo que ordena la lectura es el espacio y un filete vertical. */ .ez-software-page .ez-sw-regimenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0; max-width: none; } /* El titulo de cada regimen arranca a la misma altura aunque uno ocupe dos renglones. Sin subgrid las tres fluyen por su cuenta: se degrada, no se rompe. */ @supports (grid-template-rows: subgrid) { .ez-software-page .ez-sw-regimenes > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-2); } } .ez-software-page .ez-sw-regimenes > div { padding-right: var(--sp-8); } .ez-software-page .ez-sw-regimenes > div + div { padding-left: var(--sp-8); border-left: 1px solid var(--ez-rule); } .ez-software-page .ez-sw-regimenes > div:last-child { padding-right: 0; } .ez-software-page .ez-sw-regimenes h4 { margin: 0; color: var(--navy); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; line-height: 1.35; } .ez-software-page .ez-sw-regimenes p { margin: 0; max-width: none; } @media (max-width: 900px) { .ez-software-page .ez-sw-regimenes { grid-template-columns: 1fr; grid-template-rows: none; } @supports (grid-template-rows: subgrid) { .ez-software-page .ez-sw-regimenes > div { display: block; grid-row: auto; } } .ez-software-page .ez-sw-regimenes > div { padding: 0 0 var(--sp-5); } .ez-software-page .ez-sw-regimenes > div + div { padding: var(--sp-5) 0; border-left: 0; border-top: 1px solid var(--ez-rule); } .ez-software-page .ez-sw-regimenes > div:last-child { padding-bottom: 0; } .ez-software-page .ez-sw-regimenes h4 { margin-bottom: var(--sp-2); } } .ez-software-page .ez-sw-more__body p { margin: 0; color: var(--gray-600); font-size: 0.94rem; line-height: 1.7; } .ez-software-page .ez-sw-more__body p + p, .ez-software-page .ez-sw-more__body ul + p { margin-top: var(--sp-3); } .ez-software-page .ez-sw-more__body strong { color: var(--navy); } @media (prefers-reduced-motion: reduce) { .ez-software-page .ez-sw-more > summary::before { transition: none; } } /* ------------------------------------------------------------ MAPA DE LA OPERACION — intro a la izquierda, ficha unica ------------------------------------------------------------ 38 / 62 con 68px entre columnas. La seccion respira mas que el resto (--sp-16 arriba y abajo) porque es la entrada del primer capitulo. */ .ez-software-page .ez-ed--mapa { padding: var(--sp-16) 0; } .ez-software-page .ez-ed-split { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: var(--sp-16); align-items: start; } .ez-software-page .ez-ed-split__intro h2 { margin: 0; color: var(--navy); font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.18; } .ez-software-page .ez-ed-split__intro > p { margin: var(--sp-4) 0 0; max-width: 34ch; color: var(--gray-600); font-size: 1rem; line-height: 1.7; } /* UNA superficie, no cuatro. Antes cada dato traia su propio filete dorado arriba y el bloque se leia como cuatro tarjetas sueltas: el mismo gesto repetido cuatro veces deja de ser un gesto. Ahora el filete es uno solo, arriba de la ficha, y adentro hay exactamente dos divisores: uno vertical y uno horizontal. */ .ez-software-page .ez-ed-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: var(--sp-8); background: var(--white); border-top: 2px solid var(--gold); border-radius: 2px; } .ez-software-page .ez-ed-ficha > div { padding: var(--sp-5) var(--sp-8); } .ez-software-page .ez-ed-ficha > div:nth-child(odd) { padding-left: 0; } .ez-software-page .ez-ed-ficha > div:nth-child(even) { padding-right: 0; border-left: 1px solid var(--gray-100); } .ez-software-page .ez-ed-ficha > div:nth-child(-n + 2) { padding-top: 0; } .ez-software-page .ez-ed-ficha > div:nth-child(n + 3) { padding-bottom: 0; border-top: 1px solid var(--gray-100); } .ez-software-page .ez-ed-ficha 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-software-page .ez-ed-ficha dd { margin: 0; color: var(--gray-600); font-size: 0.94rem; line-height: 1.65; } @media (max-width: 1000px) { .ez-software-page .ez-ed--mapa { padding: var(--sp-12) 0; } .ez-software-page .ez-ed-split { grid-template-columns: 1fr; gap: var(--sp-7); } .ez-software-page .ez-ed-split__intro > p { max-width: 70ch; } } /* Una columna: los divisores verticales se van y queda uno horizontal entre dato y dato. */ @media (max-width: 700px) { .ez-software-page .ez-ed--mapa { padding: var(--sp-8) 0; } .ez-software-page .ez-ed-ficha { grid-template-columns: 1fr; padding: var(--sp-5); } .ez-software-page .ez-ed-ficha > div, .ez-software-page .ez-ed-ficha > div:nth-child(odd), .ez-software-page .ez-ed-ficha > div:nth-child(even) { padding: var(--sp-4) 0; border-left: 0; border-top: 1px solid var(--gray-100); } .ez-software-page .ez-ed-ficha > div:first-child { padding-top: 0; border-top: 0; } .ez-software-page .ez-ed-ficha > div:last-child { padding-bottom: 0; } .ez-software-page .ez-ed-ficha dt { margin-bottom: var(--sp-1); } } /* ------------------------------------------------------------ RENTA E IVA — cabecera horizontal, comparacion y cierre ------------------------------------------------------------ PULIDO 12/08/2026. Antes: panel navy de ~580px de alto para una explicacion breve, con la cabecera apilada sobre 70ch (media pagina de aire a la derecha), un filete horizontal sobre cada columna y la conclusion y el enlace normativo colgando abajo, lejos del titulo. Ahora la seccion se arma en tres franjas pegadas —cabecera en dos columnas, comparacion y cierre— y el eje se usa entero en las tres. */ .ez-software-page .ez-sw-duo { padding: var(--sp-10) 0; } /* Titulo a la izquierda, entrada a la derecha, alineados por la base: los dos bloques terminan sobre el mismo renglon aunque el titulo ocupe dos lineas y la entrada tres. */ /* 19/08/2026. Era una grilla de dos columnas, titulo a la izquierda y bajada a la derecha. Quedaba la unica cabecera partida de la pagina y la bajada se leia flotando, sin nada que la apoyara. Se apila, como todas las demas: titulo, bajada, y debajo el contenido. */ .ez-software-page .ez-sw-duo__head { display: block; max-width: 70ch; margin-bottom: var(--sp-7); } .ez-software-page .ez-sw-duo__head > p { margin-top: var(--sp-4); } .ez-software-page .ez-sw-duo__head h2 { margin: 0; color: var(--navy); font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.18; } .ez-software-page .ez-sw-duo__head p { margin: 0; color: var(--gray-600); font-size: 1.02rem; line-height: 1.7; } /* Dos columnas exactas. El gap es 0 y la distancia la ponen los paddings simetricos de cada columna: asi el unico separador vertical queda centrado entre los dos renglones de texto y las dos medidas utiles son identicas. */ .ez-software-page .ez-ed-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; } .ez-software-page .ez-ed-duo__col { padding-right: var(--sp-10); } .ez-software-page .ez-ed-duo__col + .ez-ed-duo__col { padding-right: 0; padding-left: var(--sp-10); border-left: 1px solid var(--ez-rule-soft); } .ez-software-page .ez-ed-duo__col h3 { margin: 0 0 var(--sp-3); color: var(--navy); font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; line-height: 1.3; } .ez-software-page .ez-ed-list { display: grid; gap: var(--sp-1); } .ez-software-page .ez-ed-list li { position: relative; padding-left: var(--sp-5); color: var(--gray-600); font-size: 0.98rem; line-height: 1.6; } .ez-software-page .ez-ed-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--gold); } /* Franja de cierre: la conclusion a la izquierda y el disclosure a la derecha, en el mismo renglon. Al abrirlo pasa a ocupar el ancho completo y baja de linea, que es lo que necesita el texto normativo; el resumen sigue visible y la conclusion no se mueve de sitio. */ .ez-software-page .ez-sw-duo__cierre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-8); margin-top: var(--sp-8); } /* El unico mensaje central de la pagina. No se repite en hero, franja, FAQ ni cierre. */ .ez-software-page .ez-ed-clave { flex: 1 1 34ch; margin: 0; padding-left: var(--sp-5); max-width: 60ch; border-left: 3px solid var(--gold); color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.05rem, 1.6vw, 1.22rem); font-weight: 600; line-height: 1.4; } .ez-software-page .ez-sw-duo__cierre .ez-sw-more { flex: 0 0 auto; margin: 0; margin-left: auto; } .ez-software-page .ez-sw-duo__cierre .ez-sw-more[open] { flex: 1 1 100%; margin-left: 0; } /* En escritorio el resumen es un elemento mas de la franja y se alinea por la base con la conclusion: los 44px de caja del disclosure general lo bajarian medio renglon. Queda en ~37px, por encima del piso de 24px que mide el control de blancos tactiles; en telefono, donde es el unico objeto del renglon, vuelve a 44. */ .ez-software-page .ez-sw-duo__cierre .ez-sw-more > summary { min-height: 0; padding-block: var(--sp-2); } /* Abierto, el detalle normativo usa el eje entero: renta e IVA en dos columnas y el cierre debajo, sobre las dos. Con una sola columna topada en 74ch quedaban 450px de superficie vacia a la derecha, que es el mismo defecto que este pulido vino a sacar. El renglon sigue corto porque lo acota la columna, no un max-width. */ .ez-software-page .ez-sw-duo__cierre .ez-sw-more__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-12); row-gap: var(--sp-4); max-width: none; padding-top: var(--sp-4); } .ez-software-page .ez-sw-duo__cierre .ez-sw-more__body p { margin: 0; } .ez-software-page .ez-sw-duo__cierre .ez-sw-more__body p:nth-child(3) { grid-column: 1 / -1; max-width: 74ch; } @media (max-width: 860px) { .ez-software-page .ez-sw-duo__cierre .ez-sw-more__body { grid-template-columns: 1fr; row-gap: var(--sp-3); } } @media (max-width: 1000px) { /* Las dos reglas de grilla que habia aca sobran desde que la cabecera se apila en todos los anchos. Queda solo el aire, que si cambia. */ .ez-software-page .ez-sw-duo__head { margin-bottom: var(--sp-6); } } /* Una columna: el separador se pone horizontal entre los dos analisis y la franja de cierre se apila. */ @media (max-width: 860px) { .ez-software-page .ez-sw-duo { padding: var(--sp-8) 0; } .ez-software-page .ez-ed-duo { grid-template-columns: 1fr; } .ez-software-page .ez-ed-duo__col { padding-right: 0; } /* Al apilarse, la columna pasa de angosta a ancho completo pero los parrafos siguen topados por el `65ch` global, pensado para la columna que ya no existe: a 768px la caja queda en 722 y el texto en 656, y check-huecos-visuales.mjs lo marca [RAGGED]. Es el mismo caso ya documentado en /honorarios/. Solo afecta a #ademas-del-irae, que es la unica columna de duo con parrafos; las demas llevan listas, que no tienen ese tope. */ .ez-software-page .ez-ed-duo__col p { max-width: none; } .ez-software-page .ez-ed-duo__col + .ez-ed-duo__col { margin-top: var(--sp-5); padding-left: 0; padding-top: var(--sp-5); border-left: 0; border-top: 1px solid var(--ez-rule-soft); } .ez-software-page .ez-sw-duo__cierre { margin-top: var(--sp-6); } .ez-software-page .ez-sw-duo__cierre .ez-sw-more, .ez-software-page .ez-sw-duo__cierre .ez-sw-more[open] { flex: 1 1 100%; margin-left: 0; } .ez-software-page .ez-sw-duo__cierre .ez-sw-more > summary { min-height: 44px; padding-block: var(--sp-3); } } /* ------------------------------------------------------------ ESTRUCTURA Y REGIMEN — dos perfiles de operacion ------------------------------------------------------------ No hay tres columnas equivalentes. Literal E es un REGIMEN; unipersonal, SAS y SRL son FORMAS de operar. La pagina parte del perfil (como trabaja la persona) y deja el regimen para el disclosure, que es el orden real de la decision. */ /* PULIDO 12/08/2026. La aclaracion de que forma juridica y regimen no son lo mismo colgaba de un filete vertical dorado que corria todo su alto, y competia con el filete corto del rotulo de capitulo: dos marcas doradas seguidas en la misma cabecera. Ahora es una entrada editorial —Newsreader, tinta navy— sin marca propia: el nivel lo da la tipografia. */ /* 46ch, no 64: a 64 la frase entraba en dos renglones de 81 y 9 caracteres y dejaba "lo mismo." solo en el segundo. */ .ez-software-page .ez-ed-nota { max-width: 46ch !important; color: var(--navy) !important; font-family: var(--font-heading) !important; font-size: 1.08rem !important; line-height: 1.55 !important; } /* Dos columnas simetricas. La grilla exterior declara las tres filas —titulo, definicion y desarrollo— y cada perfil las toma prestadas con subgrid: los titulos arrancan sobre la misma linea, las definiciones comparten fila aunque una ocupe dos renglones y los dos desarrollos empiezan a la misma altura. Sin subgrid cada columna fluye por su cuenta: se degrada, no se rompe. Es el mismo recurso que ya usan .ez-sw-regimenes y .ez-ed-cadena en esta hoja. El column-gap es 0 y la distancia la ponen los paddings simetricos, igual que en el bloque de renta e IVA: un solo filete central y dos medidas utiles identicas. */ .ez-software-page .ez-ed-perfiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 0; } @supports (grid-template-rows: subgrid) { .ez-software-page .ez-ed-perfil { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--sp-4); } } .ez-software-page .ez-ed-perfil { padding-right: var(--sp-10); } .ez-software-page .ez-ed-perfil + .ez-ed-perfil { padding-right: 0; padding-left: var(--sp-10); border-left: 1px solid var(--ez-rule); } .ez-software-page .ez-ed-perfil h3 { margin: 0; color: var(--navy); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.3; } .ez-software-page .ez-ed-perfil p { margin: 0; max-width: none; color: var(--gray-600); font-size: 0.96rem; line-height: 1.7; } /* Sin subgrid las tres piezas de cada perfil vuelven al flujo normal y necesitan su propio aire. */ @supports not (grid-template-rows: subgrid) { .ez-software-page .ez-ed-perfil h3, .ez-software-page .ez-ed-perfil__def { margin-bottom: var(--sp-4) !important; } } .ez-software-page .ez-ed-perfil__def { color: var(--gray-400) !important; font-size: 0.92rem !important; } /* Conclusion del bloque, sobre las dos columnas: superficie azul muy tenue y un filete dorado breve. El renglon se topa en 74ch para que siga siendo un parrafo y no una banda de texto de 1200px. */ .ez-software-page .ez-ed-eje { margin: var(--sp-8) 0 0; padding: var(--sp-5) var(--sp-6); max-width: none; background: var(--ez-cool); border-left: 3px solid var(--gold); color: var(--navy); font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.55; } .ez-software-page .ez-ed-eje > span { display: block; max-width: 74ch; } @media (max-width: 860px) { .ez-software-page .ez-ed-perfiles { grid-template-columns: 1fr; grid-template-rows: none; } @supports (grid-template-rows: subgrid) { .ez-software-page .ez-ed-perfil { display: block; grid-row: auto; } /* El !important no es adorno: `.ez-ed-perfil p { margin: 0 }` lleva un selector de tipo y le gana en especificidad a `.ez-ed-perfil__def`. Sin esto, apilados, la definicion y el desarrollo quedan pegados como un solo parrafo. */ .ez-software-page .ez-ed-perfil h3, .ez-software-page .ez-ed-perfil__def { margin-bottom: var(--sp-4) !important; } } .ez-software-page .ez-ed-perfil { padding-right: 0; } .ez-software-page .ez-ed-perfil + .ez-ed-perfil { margin-top: var(--sp-6); padding-left: 0; padding-top: var(--sp-6); border-left: 0; border-top: 1px solid var(--ez-rule); } .ez-software-page .ez-ed-eje { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); } } /* ------------------------------------------------------------ CADENA DOCUMENTAL — una secuencia, no cinco items sueltos ------------------------------------------------------------ En escritorio los cinco pasos cuelgan de una misma linea horizontal, con una marca dorada por paso. En movil la linea se pone vertical. El
    es correcto: es una secuencia. Los numeros no se muestran. */ .ez-software-page .ez-ed-cadena { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; } /* "Cobros, costos y declaraciones" ocupa dos renglones de titulo y los otros cuatro uno: sin subgrid las explicaciones arrancaban a alturas distintas y la fila se veia desalineada. */ @supports (grid-template-rows: subgrid) { .ez-software-page .ez-ed-cadena > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-2); } } .ez-software-page .ez-ed-cadena::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--ez-rule); } .ez-software-page .ez-ed-cadena > li { position: relative; padding-top: var(--sp-5); padding-right: var(--sp-4); } .ez-software-page .ez-ed-cadena > li::before { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .ez-software-page .ez-ed-cadena h3 { margin: 0 0 var(--sp-2); color: var(--navy); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; line-height: 1.3; } .ez-software-page .ez-ed-cadena p { margin: 0; color: var(--gray-600); font-size: 0.92rem; line-height: 1.6; } @media (max-width: 900px) { .ez-software-page .ez-ed-cadena { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--sp-4); } @supports (grid-template-rows: subgrid) { .ez-software-page .ez-ed-cadena > li { display: block; grid-row: auto; } } .ez-software-page .ez-ed-cadena::before { top: 6px; bottom: 6px; left: 4px; right: auto; width: 1px; height: auto; } .ez-software-page .ez-ed-cadena > li { padding: 0 0 0 var(--sp-6); } .ez-software-page .ez-ed-cadena > li::before { top: 2px; } } /* Bloque tecnico: se ve que es un requisito acotado, no una regla general de toda exportacion de servicios. */ /* Ancho completo, en dos columnas internas: rotulo a la izquierda y explicacion a la derecha. Antes la caja se ataba a la medida del parrafo (74ch) y quedaba como un recorte a media pagina bajo una cadena que si usaba todo el eje. Repartido en dos columnas, el eje se usa entero y el renglon de lectura sigue siendo corto, que era la razon original del tope. El filete vertical navy es la unica senal: no lleva borde de caja ni sombra. */ .ez-software-page .ez-ed-tecnico { display: grid; /* 19/08/2026. Era rotulo a la izquierda en 15rem y texto a la derecha. Debajo del rotulo quedaba un bloque de aire del alto del parrafo, y se leia como hueco. Es el mismo idioma que se acaba de retirar de .ez-intl-nota: rotulo arriba, texto debajo. Una sola columna, y el tope de lectura de 70ch se mantiene, que era la razon original. */ grid-template-columns: minmax(0, 70ch); gap: var(--sp-3); /* La caja se ajusta al texto en vez de estirarse: apilada y con el tope de 70ch, `width: 100%` dejaba 429px de fondo blanco vacio a la derecha, que es justo lo que se lee como error. */ width: fit-content; max-width: 100%; margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-8); background: var(--white); border-left: 3px solid var(--navy); border-radius: 2px; } .ez-software-page .ez-ed-tecnico h3 { margin: 0; color: var(--navy); font: 600 0.74rem/1.5 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; } .ez-software-page .ez-ed-tecnico p { margin: 0; max-width: none; color: var(--gray-600); font-size: 0.94rem; line-height: 1.7; } @media (max-width: 860px) { .ez-software-page .ez-ed-tecnico { grid-template-columns: 1fr; gap: var(--sp-3); } } /* ------------------------------------------------------------ QUE RECIBIS — el entregable como una hoja, con su CTA adentro ------------------------------------------------------------ */ .ez-software-page .ez-ed-hoja { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--sp-10); padding: var(--sp-8); background: var(--white); border: 1px solid var(--ez-rule); /* El mismo remate dorado de la ficha de renta-iva: los dos objetos tarjeta de la pagina se reconocen entre si. */ border-top: 2px solid var(--gold); border-radius: 2px; } .ez-software-page .ez-ed-hoja h2 { margin: 0 0 var(--sp-5); color: var(--navy); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; } .ez-software-page .ez-ed-entrega { display: grid; gap: 0; } /* Indice numerado compacto: el mismo dispositivo de las dos listas grandes (01, 02...) en escala de documento. Adentro de la hoja habia vuelto el termino|texto con filetes, que es el patron de planilla que esta pagina acaba de dejar. */ .ez-software-page .ez-ed-entrega { counter-reset: entrega; } .ez-software-page .ez-ed-entrega > li { counter-increment: entrega; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-3); padding: var(--sp-4) 0; border: 0; } .ez-software-page .ez-ed-entrega > li::before { content: counter(entrega, decimal-leading-zero); grid-row: 1 / span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--gold); border-radius: 50%; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; line-height: 1; color: var(--navy); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .ez-software-page .ez-ed-entrega > li strong { grid-column: 2; } .ez-software-page .ez-ed-entrega > li span { grid-column: 2; display: block; margin-top: 0.15em; } .ez-software-page .ez-ed-entrega strong { color: var(--navy); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; line-height: 1.4; } .ez-software-page .ez-ed-entrega span { color: var(--gray-600); font-size: 0.94rem; line-height: 1.6; } .ez-software-page .ez-ed-hoja__cierre { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding-left: var(--sp-8); border-left: 1px solid var(--ez-rule); } .ez-software-page .ez-ed-hoja__cierre p { margin: 0; color: var(--gray-600); font-size: 0.94rem; line-height: 1.65; /* El tope global de 65ch esta pensado para una columna de lectura ancha. Aca la caja mide 802px a 900px de viewport y el texto se topaba en 564-617, dejando 238px muertos: check-huecos-visuales.mjs lo marcaba [MUERTO]. Al ser una columna ya angosta y con filete a la izquierda, el tope no aporta nada y solo desalinea. */ max-width: none; } .ez-software-page .ez-ed-hoja__nota { color: var(--gray-400) !important; font-size: 0.86rem !important; } @media (max-width: 960px) { .ez-software-page .ez-ed-hoja { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); } .ez-software-page .ez-ed-hoja__cierre { padding-left: 0; padding-top: var(--sp-5); border-left: 0; border-top: 1px solid var(--ez-rule); } } @media (max-width: 600px) { .ez-software-page .ez-ed-entrega > li { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-3) 0; } .ez-software-page .ez-ed-hoja__cierre .ez-btn { width: 100%; max-width: 340px; } } /* ------------------------------------------------------------ FAQ — disclosures nativos, cerrados por defecto ------------------------------------------------------------ Cuatro preguntas en dos columnas. Cada
    es una fila de grilla propia con align-items:start, asi que abrir uno empuja hacia abajo y nunca desplaza la columna vecina de costado. */ .ez-software-page .ez-sw-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-12); align-items: start; } .ez-software-page .ez-sw-faq__item { border-bottom: 1px solid var(--ez-rule); } .ez-software-page .ez-sw-faq__item:nth-child(-n + 2) { border-top: 1px solid var(--ez-rule); } .ez-software-page .ez-sw-faq__item > summary { display: flex; align-items: flex-start; gap: var(--sp-4); min-height: 44px; padding: var(--sp-4) 0; cursor: pointer; list-style: none; } .ez-software-page .ez-sw-faq__item > summary::-webkit-details-marker { display: none; } .ez-software-page .ez-sw-faq__item > summary::before { content: ""; flex: 0 0 auto; margin-top: 0.42em; 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-software-page .ez-sw-faq__item[open] > summary::before { transform: rotate(45deg); } .ez-software-page .ez-sw-faq__item h3 { margin: 0; color: var(--navy); font-family: var(--font-heading); font-size: 1.06rem; font-weight: 600; line-height: 1.4; } .ez-software-page .ez-sw-faq__item > summary:hover h3 { color: var(--navy-light, #164a7d); } .ez-software-page .ez-sw-faq__body { padding: 0 0 var(--sp-4) calc(7px + var(--sp-4)); } .ez-software-page .ez-sw-faq__body p { margin: 0; max-width: 62ch; color: var(--gray-600); font-size: 0.96rem; line-height: 1.7; } @media (prefers-reduced-motion: reduce) { .ez-software-page .ez-sw-faq__item > summary::before { transition: none; } } @media (max-width: 860px) { .ez-software-page .ez-sw-faq { grid-template-columns: 1fr; } .ez-software-page .ez-sw-faq__item:nth-child(-n + 2) { border-top: 0; } .ez-software-page .ez-sw-faq__item:first-child { border-top: 1px solid var(--ez-rule); } } /* ------------------------------------------------------------ FUENTES Y REVISION — compacto, con el listado en disclosure ------------------------------------------------------------ */ .ez-software-page .ez-ed-legal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--sp-10); } .ez-software-page .ez-ed-legal h2 { margin: 0 0 var(--sp-4); color: var(--navy); font-size: 1.3rem; line-height: 1.25; } .ez-software-page .ez-ed-legal > div > p { margin: 0; max-width: 70ch; color: var(--gray-600); font-size: 0.94rem; line-height: 1.7; } .ez-software-page .ez-ed-src { display: grid; border-top: 1px solid var(--ez-rule); } .ez-software-page .ez-ed-src > li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--ez-rule); } .ez-software-page .ez-ed-src > li > span { display: block; max-width: 64ch; color: var(--gray-600); font-size: 0.86rem; line-height: 1.55; } .ez-software-page .ez-ed-src__nota { margin-top: var(--sp-4) !important; color: var(--gray-400) !important; font-size: 0.86rem !important; } .ez-software-page .ez-ed-legal__ficha { align-self: start; padding: var(--sp-5) var(--sp-6); background: var(--ez-cool); border: 1px solid var(--gray-100); border-radius: 2px; } .ez-software-page .ez-ed-legal__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-software-page .ez-ed-legal__ficha dd { margin: 0 0 var(--sp-4); color: var(--gray-600); font-size: 0.9rem; line-height: 1.6; } .ez-software-page .ez-ed-legal__ficha dd:last-child { margin-bottom: 0; } @media (max-width: 900px) { .ez-software-page .ez-ed-legal { grid-template-columns: 1fr; gap: var(--sp-6); } } /* ------------------------------------------------------------ ENLACES DE TEXTO — blanco tactil de 24px ------------------------------------------------------------ */ .ez-software-page .ez-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-software-page .ez-ed a:not(.ez-btn):hover, .ez-software-page .ez-ed a:not(.ez-btn):focus-visible { text-decoration-color: var(--navy); } .ez-software-page .ez-ed--navy a:not(.ez-btn) { color: var(--white); } .ez-software-page .ez-ed--navy a:not(.ez-btn):hover, .ez-software-page .ez-ed--navy a:not(.ez-btn):focus-visible { text-decoration-color: var(--white); } /* ------------------------------------------------------------ CTA FINAL ------------------------------------------------------------ Patron editorial aprobado en las paginas principales: rotulo limpio, sin capsula; eje ancho de 1200px; Newsreader en el titulo e Inter en apoyo y acciones. El bloque de fuentes anterior es blanco y el pie es navy, por eso se conserva el azul niebla. */ .ez-software-page .ez-cta-light { background: var(--ez-cool); border-top: 1px solid rgba(205, 213, 224, 0.75); padding: var(--sp-10) 0; } .ez-software-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-software-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-software-page .ez-cta-light h2 { margin-inline: auto; font-family: var(--font-heading); font-size: 2rem; font-weight: 600; line-height: 1.14; text-align: center; } .ez-software-page .ez-cta-light p { margin-inline: auto; margin-bottom: var(--sp-6); font-family: var(--font-body); font-size: 1.05rem; line-height: 1.6; text-align: center; } .ez-software-page .ez-cta-light .ez-mid-cta__actions { justify-content: center; } .ez-software-page .ez-cta-light .ez-btn { box-shadow: none; font-family: var(--font-body); font-weight: 600; } /* ------------------------------------------------------------ MOVIL ------------------------------------------------------------ Se aprieta el aire ENTRE piezas, nunca el interlineado ni el tamano del texto: la altura baja sin que se lea mas apretado. */ @media (max-width: 640px) { .ez-software-page .ez-ed { padding: var(--sp-7) 0 var(--sp-6); } .ez-software-page .ez-ed--cap + .ez-ed--cap > .ez-ed__inner { padding-top: var(--sp-6); } .ez-software-page .ez-ed__head { margin-bottom: var(--sp-5); } .ez-software-page .ez-ed__head p { margin-top: var(--sp-3); } /* En telefono la distancia al titulo baja de 20 a 16px, pero la del rotulo al filete se mantiene en 12: el filete tiene que seguir leyendose como un nivel aparte y no como un subrayado. */ .ez-software-page .ez-sw-chapter::after { margin: var(--sp-3) 0 var(--sp-4); } .ez-software-page .ez-ed__foot { margin-top: var(--sp-6); padding-top: var(--sp-4); } .ez-software-page .ez-sw-more { margin-top: var(--sp-5); } .ez-software-page .ez-ed-tecnico { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); } /* Los 64px de padding del hero compacto se leen bien en escritorio, donde el titular y las acciones van en dos columnas. Apilado, el de abajo queda como una banda vacia entre el ultimo boton y la franja. */ .ez-software-page .ez-page-hero { padding: var(--sp-12) 0; } .ez-software-page .ez-page-hero h1 { font-size: clamp(1.7rem, 6.6vw, 2.2rem); max-width: none; } .ez-software-page .ez-page-hero__actions .ez-btn { width: 100%; max-width: 340px; } } /* ------------------------------------------------------------ ACTIVIDADES COMPRENDIDAS (seccion nueva, 19/08/2026) ------------------------------------------------------------ Seis tarjetas de la lista del 161-Bis. La pagina no tenia ninguna grilla de tres columnas: .ez-ed-perfiles es de dos y .ez-ed-duo tambien. Se crea una propia en vez de forzar las existentes, que traen reglas de fondo y borde que aca sobran. El guion dorado de 18px antes del h3 es el mismo gesto de .ez-hon-factor en /honorarios/: marca corta en lugar de un filete que cruce la tarjeta. Se repite a proposito, para que las dos paginas se lean como el mismo sistema. Sin fondo ni borde en las tarjetas: la seccion ya va sobre superficie fria y encajonar cada una las convertiria en seis cajas dentro de otra caja. */ .ez-software-page .ez-sw-servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-10); margin-top: var(--sp-8); } .ez-software-page .ez-sw-servicio h3 { margin: 0 0 var(--sp-3); color: var(--navy); font-family: var(--font-heading); font-size: 1.14rem; font-weight: 600; line-height: 1.3; } .ez-software-page .ez-sw-servicio h3::before { content: ""; display: block; width: 18px; height: 2px; background: var(--gold); margin-bottom: var(--sp-3); } .ez-software-page .ez-sw-servicio p { margin: 0; color: var(--gray-600); font-size: 0.95rem; line-height: 1.65; /* Sin el, el tope global de 65ch deja blanco muerto cuando la grilla se apila en telefono. Es el mismo caso ya documentado en /honorarios/. */ max-width: none; } @media (max-width: 900px) { .ez-software-page .ez-sw-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-8); } } @media (max-width: 560px) { .ez-software-page .ez-sw-servicios { grid-template-columns: 1fr; gap: var(--sp-7); } } /* ------------------------------------------------------------ CASO REAL ANONIMIZADO (seccion nueva, 19/08/2026) ------------------------------------------------------------ Es el unico bloque narrativo de la pagina: cinco parrafos que se leen seguidos, no fichas ni columnas. Por eso va en una sola columna angosta, con el ancho de lectura como criterio y no el del contenedor. El filete dorado a la izquierda lo separa del resto sin encajonarlo: es una historia, no una tarjeta. Mismo gesto que .ez-ed-clave usa en esta pagina, con menos peso. */ .ez-software-page .ez-sw-caso { max-width: 46rem; margin-top: var(--sp-6); padding-left: var(--sp-6); border-left: 2px solid var(--gold); } .ez-software-page .ez-sw-caso p { margin: 0 0 var(--sp-5); color: var(--gray-600); font-size: 1rem; line-height: 1.7; /* Sin esto, el tope global de 65ch pelea con el max-width del bloque y deja el texto corrido a la izquierda dentro de una caja mas ancha. El ancho de lectura ya lo fija el contenedor. */ max-width: none; } .ez-software-page .ez-sw-caso p:last-child { margin-bottom: 0; } .ez-software-page .ez-sw-caso__cierre { color: var(--navy) !important; font-weight: 600; } /* Nota de alcance del caso. Letra chica, sin recuadro: acota, no compite. Es el mismo criterio que la nota de fuente de /honorarios/. */ .ez-software-page .ez-sw-caso__nota { max-width: 46rem; margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--ez-rule); color: var(--gray-400); font-size: 0.84rem; line-height: 1.65; } .ez-software-page .ez-sw-caso__cta { margin-top: var(--sp-8); } @media (max-width: 560px) { .ez-software-page .ez-sw-caso { padding-left: var(--sp-5); } } /* ------------------------------------------------------------ RITMO DE .ez-ed-clave CUANDO ES HERMANA DIRECTA ------------------------------------------------------------ En #renta-iva la clave vive dentro de .ez-sw-duo__cierre, que le da su propio margen: ahi el hueco contra el bloque anterior es de 36px. En las secciones nuevas (#actividades-comprendidas y #requisitos) es hermana directa de la grilla, y sin esto queda a 0px, con el filete dorado apoyado sobre el ultimo renglon. No afecta al uso existente: ese va anidado y no matchea el selector de hermano adyacente. */ .ez-software-page .ez-ed-duo + .ez-ed-clave, .ez-software-page .ez-sw-servicios + .ez-ed-clave { margin-top: var(--sp-8); } /* Linea de fuente al pie de una columna. OJO: .ez-ed-nota NO es una nota al pie. Es una bajada: serif navy a 1,08rem topada en 46ch, y se usa asi bajo los H2. Atribuir una fuente con esa clase la renderiza como subtitulo destacado. Esta es la version chica y gris que corresponde. */ .ez-software-page .ez-sw-fuente { margin: var(--sp-5) 0 0; color: var(--gray-400); font-size: 0.84rem; line-height: 1.6; max-width: none; } .ez-software-page .ez-sw-fuente a { color: var(--ez-gold-ink); } /* ------------------------------------------------------------ CASO ANONIMIZADO — titulo a un lado, relato al otro ------------------------------------------------------------ 19/08/2026. La seccion iba apilada: titulo arriba y relato debajo, topado en 46rem por buena lectura. Sobre una banda a sangre eso dejaba 504px muertos a la derecha y una asimetria de 464px contra el margen izquierdo: la seccion entera se leia corrida. El tope de lectura del relato NO se toca, que es lo que lo hace legible. Lo que cambia es quien ocupa la columna que sobraba: el titulo. Es el mismo reparto de #renta-iva. ------------------------------------------------------------ */ .ez-software-page .ez-sw-caso-fila { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--sp-10); align-items: start; } /* Dentro de la fila el head deja de ser una banda superior: pierde su margen inferior y el relato pierde el suyo superior, asi los dos arrancan a la misma altura. */ .ez-software-page .ez-sw-caso-fila > .ez-ed__head { margin-bottom: 0; } .ez-software-page .ez-sw-caso-fila > .ez-sw-caso { margin-top: 0; max-width: none; } /* La nota de alcance cierra la seccion entera, no solo la columna del relato: el filete cruza el eje y el texto se topa en el . */ .ez-software-page .ez-sw-caso__nota { max-width: none; } .ez-software-page .ez-sw-caso__nota > span { display: block; max-width: 46rem; } @media (max-width: 900px) { .ez-software-page .ez-sw-caso-fila { grid-template-columns: 1fr; gap: var(--sp-6); } .ez-software-page .ez-sw-caso-fila > .ez-sw-caso { max-width: 46rem; } } .ez-software-page p + .ez-ed-list { margin-top: var(--sp-4); } /* ------------------------------------------------------------ PREGUNTAS DE FAQ — el renglon se llena antes de cortar ------------------------------------------------------------ La hoja global trae `h1, h2, h3 { text-wrap: balance }`. En un titular esta bien: evita que la ultima linea quede con una palabra sola. En una pregunta de FAQ hace otra cosa: parte el texto en dos mitades parejas y deja el renglon a la mitad del ancho disponible. Medido el 19/08/2026 en "¿Una empresa unipersonal puede acceder a la exoneracion de IRAE del software?": caja de 553px, renglones de 310 y 292. Se leia como que la pregunta no usa la columna, y es exactamente lo que se ve. `wrap` es el valor por defecto de la propiedad: llena el renglon y corta cuando no entra. Solo para las preguntas; los titulos de seccion siguen balanceados, que ahi si conviene. ------------------------------------------------------------ */ .ez-software-page .ez-sw-faq__item h3 { text-wrap: wrap; } /* ------------------------------------------------------------ LAS CUATRO CLAVES — el bloque de "60 segundos" ------------------------------------------------------------ 19/08/2026. Reemplaza a la grilla de tarjetas, que con cuatro items en tres columnas dejaba uno huerfano y no jerarquizaba nada. Es una lista de definiciones y no una grilla porque el contenido ES una lista de definiciones: cuatro afirmaciones con su desarrollo. El
    ademas se lo dice a un lector de pantalla, cosa que cuatro
    sueltos no hacian. La columna izquierda es la que manda: leida de arriba abajo, sola, es el resumen entero. Por eso va en serif, grande y en navy, mientras la derecha acompana en cuerpo chico y gris. ------------------------------------------------------------ */ .ez-software-page .ez-sw-claves { margin: var(--sp-8) 0 0; border-top: 2px solid var(--navy); } /* 36/64 con gap de 40px dejaba 400px de aire entre el termino y su explicacion: el termino mas largo mide ~340px y la columna medía 432. Ese hueco es el mismo defecto flotante que ya se corrigio en otras secciones. Se ajusta la columna al termino real. */ .ez-software-page .ez-sw-clave { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: var(--sp-8); column-gap: 0; align-items: baseline; padding: var(--sp-6) 0; border-bottom: 1px solid var(--ez-rule); } /* El termino es el titular del bloque, no una etiqueta: por eso pesa. */ .ez-software-page .ez-sw-clave dt { margin: 0; color: var(--navy); font-family: var(--font-heading); font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; /* `wrap` y no `balance`: el termino tiene que llenar su columna antes de cortar. Balanceado partia "Cliente extranjero no basta" en dos renglones cortos con espacio de sobra al lado. */ text-wrap: wrap; } /* El filete vertical es el unico gesto propio del bloque, y no es adorno: separa la afirmacion de su desarrollo como una columna de libro separa el concepto del detalle. Ademas ata los cuatro terminos en un solo eje, que es lo que permite leerlos de corrido como resumen. */ .ez-software-page .ez-sw-clave dd { margin: 0; padding-left: var(--sp-8); border-left: 1px solid var(--ez-rule); max-width: none; color: var(--gray-600); font-size: 0.98rem; line-height: 1.7; } /* Apilado, el filete de arriba de cada fila sobra: alcanza el de abajo, y el termino pasa a leerse como encabezado de su propio parrafo. */ @media (max-width: 860px) { .ez-software-page .ez-sw-clave { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5) 0; } .ez-software-page .ez-sw-clave dd { padding-left: var(--sp-5); max-width: none; } } /* La bajada de esta seccion vive encima de un bloque que ocupa el eje entero. Topada en 65ch quedaba corta y desalineada contra el filete navy que abre la lista. */ .ez-software-page #lo-esencial .ez-ed__head, .ez-software-page #essentials .ez-ed__head, .ez-software-page #essencial .ez-ed__head { max-width: none; } .ez-software-page #lo-esencial .ez-ed__head p, .ez-software-page #essentials .ez-ed__head p, .ez-software-page #essencial .ez-ed__head p { max-width: 74ch; } /* ------------------------------------------------------------ BANDA DE TAREAS COMPRENDIDAS ------------------------------------------------------------ Las seis actividades vivian dentro de un parrafo topado en 65ch. Eran los terminos por los que efectivamente se busca y no se veian. En banda ocupan el eje entero y se leen de un vistazo. El filete vertical entre una y otra repite el recurso de .ez-sw-clave, que es lo que hace que las secciones se lean como una misma pagina y no como cinco bloques sueltos. ------------------------------------------------------------ */ /* Tres columnas y no una banda que fluye: son SEIS items exactos, asi que 3x2 cierra parejo. En flex el sexto caia a un segundo renglon arrancando con un filete suelto, que se leia como un error de maquetado. */ .ez-software-page .ez-sw-tareas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--sp-7) 0 0; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--ez-rule); list-style: none; padding: 0; } .ez-software-page .ez-sw-tareas li { padding: var(--sp-4) var(--sp-6); border-left: 1px solid var(--ez-rule); color: var(--navy); font-family: var(--font-heading); font-size: 1.02rem; font-weight: 600; line-height: 1.35; } /* El primero de cada fila no lleva filete: el borde de la banda ya la abre. */ .ez-software-page .ez-sw-tareas li:nth-child(3n + 1) { padding-left: 0; border-left: 0; } /* La segunda fila se separa de la primera con un filete propio. */ .ez-software-page .ez-sw-tareas li:nth-child(n + 4) { border-top: 1px solid var(--ez-rule); } .ez-software-page .ez-sw-tareas__nota { margin-top: var(--sp-6); max-width: 78ch; } @media (max-width: 860px) { .ez-software-page .ez-sw-tareas { grid-template-columns: 1fr; } /* Apiladas, el filete pasa de vertical a horizontal: en una columna un borde izquierdo no separa nada. */ .ez-software-page .ez-sw-tareas li, .ez-software-page .ez-sw-tareas li:nth-child(3n + 1) { padding: var(--sp-3) 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--ez-rule); } .ez-software-page .ez-sw-tareas li:last-child { border-bottom: 0; } } /* Lo que sigue a una lista de claves se apoyaba sobre el ultimo filete. El margen va en el hermano y no en la lista, para que la lista siga cerrando contra su propio borde cuando es el ultimo elemento. */ .ez-software-page .ez-sw-claves + .ez-ed-clave, .ez-software-page .ez-sw-claves + .ez-ed-eje, .ez-software-page .ez-sw-claves + p, .ez-software-page .ez-sw-claves + .ez-sw-more { margin-top: var(--sp-8); } /* ------------------------------------------------------------ JERARQUIA TIPOGRAFICA — corregida el 19/08/2026 ------------------------------------------------------------ Matias: "los titulos de la izquierda de la tabla son practicamente el mismo tamaño que los titulos, hay un tema de jerarquia". Medido, tenia razon y habia DOS problemas. 1. EL ROTULO NUNCA SE APLICO. `.ez-software-page .ez-ed__head p` pesa (0,2,1) y fija `font-size: 1.02rem; color: var(--gray-600)`. `.ez-sw-chapter` pesa (0,2,0) y perdia. El rotulo estaba diseñado en 0.74rem dorado y se renderizaba en 16,32px gris: del diseño original solo sobrevivian la versalita y el tracking, porque esas dos propiedades no estaban en la regla que lo pisaba. Resultado: cinco roles distintos —rotulo, bajada, barra de cierre, actividad y pregunta— compartian el mismo tamaño. Nada era subordinado de nada, que es exactamente lo que se veia. 2. EL SALTO DEL TITULO AL TERMINO ERA DE 1,31x. 33,6px contra 25,6px, mismo color, mismo peso, misma familia. El tamaño era el unico diferenciador y era debil. Un salto editorial pide ~1,6x. La escala queda asi, y es la que hay que respetar al agregar algo: Rotulo 11,8px versalita dorada marcador Titulo 33,6px serif navy nivel 1 Termino 20,8px serif navy claro nivel 2 (1,6x) Cierre 16,8px serif navy + caja nivel 3 Cuerpo 15,7px sans gris base ------------------------------------------------------------ */ .ez-software-page .ez-ed__head p.ez-sw-chapter { color: var(--ez-gold-ink); font-size: 0.74rem; line-height: 1; } /* Navy claro y no navy pleno: el color tambien separa niveles, no solo el tamaño. El titulo de seccion queda como el unico en navy pleno. */ .ez-software-page .ez-sw-clave dt { color: var(--navy-light); font-size: clamp(1.1rem, 1.6vw, 1.3rem); } /* ============================================================ DOS MOMENTOS — 19/08/2026 ------------------------------------------------------------ Matias: "arriba, abajo, veo todo como si fuera un Excel de cuadrado". Mirando la pagina ENTERA de una sola vez, en vez de seccion por seccion, el problema no era de ninguna seccion: era de la pagina. Nueve secciones seguidas con la misma forma exacta: rotulo, titulo a la izquierda, bajada al 50%, bloque con filetes. El mismo borde izquierdo de arriba abajo, sin una sola excepcion, y filetes horizontales en todos lados. Densidad uniforme en 5.800px. Eso es una planilla, no una pagina. Lo que le falta son MOMENTOS: algo que pare al lector. Se crean dos. ============================================================ */ /* ------------------------------------------------------------ MOMENTO 1 — el hero ocupa lo que tiene que ocupar ------------------------------------------------------------ Ocupaba el 7% del alto de la pagina mas importante del estudio. Y el h1 medía 40px contra 33,6 de un titulo de seccion: 1,19x. El titulo principal era apenas mas grande que un subtitulo, que es el mismo fallo de jerarquia ya corregido, un nivel mas arriba. ------------------------------------------------------------ */ .ez-software-page .ez-page-hero { padding: clamp(var(--sp-12), 9vw, var(--sp-20)) 0 clamp(var(--sp-12), 8vw, var(--sp-16)); } .ez-software-page .ez-page-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; } .ez-software-page .ez-page-hero__sub { max-width: 52ch; font-size: 1.1rem; line-height: 1.65; } /* ------------------------------------------------------------ LISTAS NUMERADAS — la ruta de anillos ------------------------------------------------------------ 20/08/2026, segunda vuelta sobre los numeros. El numero suelto en serif dorado quedaba "ahi tirado" (Matias): tipografia sin arquitectura. Ahora cada numero vive dentro de un anillo fino dorado, y un hilo dorado baja de anillo en anillo conectando los items. La lista se lee como una ruta dibujada, y sigue sin haber una sola caja. El hilo es un ::after absoluto que nace bajo el anillo y termina justo en el anillo siguiente: el bottom negativo compensa el padding del item para que el tramo no quede cortado en la juntura. El ultimo item no dibuja hilo. ------------------------------------------------------------ */ .ez-software-page .ez-sw-claves--num { counter-reset: clave; margin-top: var(--sp-10); border-top: 0; } .ez-software-page .ez-sw-claves--num .ez-sw-clave { counter-increment: clave; position: relative; grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-6); row-gap: 0; align-items: start; padding: var(--sp-6) 0; border-bottom: 0; } .ez-software-page .ez-sw-claves--num .ez-sw-clave::before { content: counter(clave, decimal-leading-zero); grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid var(--gold); border-radius: 50%; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; line-height: 1; color: var(--navy); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; background: transparent; } /* El hilo entre anillos. */ .ez-software-page .ez-sw-claves--num .ez-sw-clave::after { content: ""; position: absolute; left: 1.5rem; top: calc(var(--sp-6) + 3rem + 8px); bottom: calc(-1 * var(--sp-6) + 8px); width: 1px; margin-left: -0.5px; background: rgba(200, 169, 104, 0.45); } .ez-software-page .ez-sw-claves--num .ez-sw-clave:last-child::after { content: none; } .ez-software-page .ez-sw-claves--num .ez-sw-clave dt { grid-column: 2; align-self: center; color: var(--navy); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.2; } .ez-software-page .ez-sw-claves--num .ez-sw-clave dd { grid-column: 2; padding-left: 0; border-left: 0; margin-top: 0.5em; font-size: 1.02rem; /* Sin tope propio: manda el contenedor. Con 58ch el texto cortaba en "cada / tarea" con media pagina libre a la derecha (20/08/2026). */ max-width: none; } @media (max-width: 640px) { .ez-software-page .ez-sw-claves--num .ez-sw-clave { grid-template-columns: 2.7rem minmax(0, 1fr); column-gap: var(--sp-4); } .ez-software-page .ez-sw-claves--num .ez-sw-clave::before { width: 2.5rem; height: 2.5rem; font-size: 0.92rem; } .ez-software-page .ez-sw-claves--num .ez-sw-clave::after { left: 1.25rem; top: calc(var(--sp-6) + 2.5rem + 8px); } } /* La bajada de la tesis sube de tamaño y de color: es la frase que resume la pagina entera, no una aclaracion de seccion. */ .ez-software-page #lo-esencial .ez-ed__head p, .ez-software-page #essentials .ez-ed__head p, .ez-software-page #essencial .ez-ed__head p { max-width: none; color: var(--navy); font-size: clamp(1.1rem, 1.8vw, 1.32rem); line-height: 1.55; } /* ------------------------------------------------------------ ACTIVIDADES — muestrario asentado, no palabras corridas ------------------------------------------------------------ 20/08/2026, tercera forma de este bloque. La banda 3x2 con filetes era una planilla; la linea corrida con puntos dorados quedo como "palabras tiradas ahi por tirar" (Matias): seis terminos flotando en el eje ancho sin lugar propio. Ahora: grilla de 3x2 SIN cajas y cada termino con su filete corto dorado debajo, el mismo gesto que llevan los h3 de perfiles y duo. Cada actividad tiene su lugar y su ancla; la estructura la da la reticula y el gesto repetido, no un borde. (La primera version de este cambio corto el archivo con s.index sobre la palabra ACTIVIDADES a secas, que aparece en tres comentarios, y borro 622 lineas de otros bloques. Por eso el marcador de corte es el titulo completo y el corte se verifica por tamaño antes de escribir.) ------------------------------------------------------------ */ .ez-software-page #actividades-comprendidas .ez-sw-tareas, .ez-software-page #covered .ez-sw-tareas, .ez-software-page #atividades .ez-sw-tareas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-8); margin: var(--sp-10) 0 var(--sp-8); border: 0; padding: 0; max-width: none; } .ez-software-page #actividades-comprendidas .ez-sw-tareas li, .ez-software-page #covered .ez-sw-tareas li, .ez-software-page #atividades .ez-sw-tareas li { margin: 0; padding: 0; border: 0; font-family: var(--font-heading); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.3; color: var(--navy); font-weight: 500; } .ez-software-page #actividades-comprendidas .ez-sw-tareas li::after, .ez-software-page #covered .ez-sw-tareas li::after, .ez-software-page #atividades .ez-sw-tareas li::after { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin-top: var(--sp-3); } @media (max-width: 900px) { .ez-software-page #actividades-comprendidas .ez-sw-tareas, .ez-software-page #covered .ez-sw-tareas, .ez-software-page #atividades .ez-sw-tareas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ez-software-page #actividades-comprendidas .ez-sw-tareas, .ez-software-page #covered .ez-sw-tareas, .ez-software-page #atividades .ez-sw-tareas { grid-template-columns: 1fr; gap: var(--sp-6); } } /* ------------------------------------------------------------ PERFILES — atados al sistema dorado ------------------------------------------------------------ Los bloques numerados y la linea de materias hablan con acentos dorados; los perfiles no tenian ninguno y quedaban de otro diseño. El filete corto bajo el h3 es el mismo gesto del kicker. La definicion pasa a italica: antes era el mismo gris del cuerpo y no se distinguia de el. ------------------------------------------------------------ */ .ez-software-page .ez-ed-duo__item h3::after, .ez-software-page .ez-ed-perfil h3::after { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin-top: var(--sp-3); } .ez-software-page .ez-ed-perfil .ez-ed-perfil__def { font-style: italic; } /* ------------------------------------------------------------ EL TEXTO USA EL EJE ENTERO ------------------------------------------------------------ 20/08/2026. El tope global de p { max-width: 65ch } cortaba las bajadas y explicaciones de esta pagina a media caja, dejando viudas ("...recibe un tratamiento / u otro.") con media pagina vacia a la derecha. En esta pagina el ancho lo dicta el contenedor de cada bloque, no un tope tipografico: las columnas angostas (caso, hoja, duo) ya acotan por su propia grilla. ------------------------------------------------------------ */ .ez-software-page .ez-ed__inner p, .ez-software-page .ez-ed__head p { max-width: none; } /* El tope de verdad no estaba en los

    : el contenedor .ez-ed__head mide 706px por su cuenta (medido con getComputedStyle, no adivinado). Con el ancho en los parrafos liberado, era el quien seguia cortando las bajadas en "...tratamiento / u otro." */ .ez-software-page .ez-ed__head { max-width: none; } /* Auditoria 20/08: "Primer paso" era el unico kicker gris de la pagina; todos los demas son dorados. Mismo tono de tinta dorada legible que usa .ez-sw-chapter. */ .ez-software-page .ez-cta-light .ez-eyebrow { color: var(--ez-gold-ink, #6b4f16); }