/* Landing pública. La base (tokens, tipografía, botones, cabecera) está en base.css, que se carga antes. Acá va sólo lo propio de la landing. */ /* ── EL héroe ─────────────────────────────────────────────────────────────── Título arriba, la demo a todo el ancho de un marco al 80%, y el CTA abajo. */ .heroe { --ciclo: 12s; --alto-fila: 2.15rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem); text-align: center; /* Un halo verde muy tenue detrás del héroe: da color sin ensuciar. */ background: radial-gradient(80% 55% at 50% 0%, rgba(15, 122, 82, .07), transparent 70%), var(--blanco); } .heroe-cab { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); padding-inline: var(--canal); } .heroe h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; } .heroe h1 .apaga { color: var(--apagado); display: block; } .heroe-bajada { margin: 1.15rem auto 0; max-width: 46ch; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--cuerpo); } /* El marco de la demo: 80% del ancho, y la maquinaria ocupa el 100% de él. */ .heroe-marco { width: 80%; max-width: 82rem; margin: 0 auto; } .heroe-cta { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-inline: var(--canal); } .heroe-nota { margin: .9rem 0 0; font-size: .88rem; color: var(--apagado); } .boton-grande { padding: .95rem 1.9rem; font-size: 1.02rem; border-radius: 9px; } /* ── La maquinaria: planilla → pila de informes ───────────────────────────── Ciclo de 12s. El desfase va en los PORCENTAJES de los keyframes, con animation-delay:0 para todos, para que compartan una sola línea de tiempo y se vayan juntos. El índice lo pone el template en data-i. Ventanas: fila i activa desde 5%+(i-1)·11% durante ~9%; su tarjeta aterriza 7% después; todo sostiene hasta 88% y sale en 88%→94%. */ .motor-paneles { display: grid; /* La planilla se acota: con el marco al 80% se estiraba a 700px y dejaba al documento como una estampilla. El par va centrado. */ grid-template-columns: minmax(0, 34rem) auto; justify-content: center; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: center; text-align: left; } /* ── El Excel ─────────────────────────────────────────────────────────────── Acá la rejilla SÍ corresponde: es lo que lo hace reconocible al golpe de vista. Es lo contrario del papel milimetrado de fondo que se descartó. */ .xls { background: var(--blanco); border-radius: 10px; box-shadow: var(--sombra-media); overflow: hidden; } .xls-barra { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; background: #217346; /* sólo como fondo, con texto blanco */ color: var(--blanco); font-size: .82rem; font-weight: 600; letter-spacing: -.01em; } .xls-barra svg { flex: none; } .xls-hoja { position: relative; } .xls-fila { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 3.6rem 5.5rem; height: var(--alto-fila); /* fijo: de esto depende la cuenta del cursor */ } .xls-fila > span { display: block; line-height: var(--alto-fila); padding: 0 .55rem; font-size: .78rem; border-right: 1px solid #E6E6E2; border-bottom: 1px solid #E6E6E2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xls-fila > span:last-child { border-right: 0; } /* Encabezados de fila y columna, en gris como en la planilla real. */ .xls-letras > span, .xls-num { text-align: center; background: #F4F4F2; color: var(--apagado); font-family: var(--mono); font-size: .66rem; } .xls-encab > span:not(.xls-num) { font-weight: 600; background: #FBFBFA; } /* La fila que se está procesando se tiñe. */ .xls-dato { animation: var(--ciclo) linear infinite; } .xls-dato[data-i="1"] { animation-name: xf1; } .xls-dato[data-i="2"] { animation-name: xf2; } .xls-dato[data-i="3"] { animation-name: xf3; } .xls-dato[data-i="4"] { animation-name: xf4; } .xls-dato[data-i="5"] { animation-name: xf5; } @keyframes xf1 { 0%,4%{background:transparent} 5%,14%{background:#E7F3EC} 16%,100%{background:transparent} } @keyframes xf2 { 0%,15%{background:transparent} 16%,25%{background:#E7F3EC} 27%,100%{background:transparent} } @keyframes xf3 { 0%,26%{background:transparent} 27%,36%{background:#E7F3EC} 38%,100%{background:transparent} } @keyframes xf4 { 0%,37%{background:transparent} 38%,47%{background:#E7F3EC} 49%,100%{background:transparent} } @keyframes xf5 { 0%,48%{background:transparent} 49%,58%{background:#E7F3EC} 60%,100%{background:transparent} } /* El cursor: un solo rectángulo que se desliza de fila en fila. Las dos primeras filas son letras y encabezado, así que la fila de datos i está en el múltiplo (i + 1) del alto de fila. */ .xls-cursor { position: absolute; top: 0; left: 2rem; right: 0; height: var(--alto-fila); border: 2px solid #107C41; border-radius: 2px; pointer-events: none; opacity: 0; animation: xcursor var(--ciclo) cubic-bezier(.4,.5,.2,1) infinite; } @keyframes xcursor { 0%, 3% { opacity: 0; transform: translateY(calc(var(--alto-fila) * 2)); } 5%, 14% { opacity: 1; transform: translateY(calc(var(--alto-fila) * 2)); } 16%, 25% { opacity: 1; transform: translateY(calc(var(--alto-fila) * 3)); } 27%, 36% { opacity: 1; transform: translateY(calc(var(--alto-fila) * 4)); } 38%, 47% { opacity: 1; transform: translateY(calc(var(--alto-fila) * 5)); } 49%, 58% { opacity: 1; transform: translateY(calc(var(--alto-fila) * 6)); } 62%, 100% { opacity: 0; transform: translateY(calc(var(--alto-fila) * 6)); } } /* ── La pila de documentos ────────────────────────────────────────────────── Absolutas dentro de un contenedor de alto fijo: cada tarjeta aterriza corrida respecto de la anterior y con z-index mayor, así la nueva queda arriba y las de abajo asoman. */ /* Ancho fijo, porque --escala-hoja tiene que casar con él: 794px (210mm a 96dpi) × .378 ≈ 300px. Con ancho fluido la hoja no encajaría. */ /* Ancho fijo, porque --escala-hoja tiene que casar con él: 794px (210mm a 96dpi) × .484 ≈ 384px. Con ancho fluido la hoja no encajaría. */ .pila { position: relative; width: 24rem; height: 20.5rem; --escala-hoja: .484; } .carta { position: absolute; /* right:26px reserva el corrimiento de la pila: la quinta tarjeta se desplaza 24px y con inset-inline:0 se salía del viewport en móvil. */ left: 0; top: 0; width: 24rem; /* 384px — ver --escala-hoja */ background: var(--blanco); border-radius: 10px; box-shadow: var(--sombra-alta); overflow: hidden; opacity: 0; animation: var(--ciclo) cubic-bezier(.2,.72,.3,1) infinite; } .carta[data-i="1"] { z-index: 1; animation-name: c1; } .carta[data-i="2"] { z-index: 2; animation-name: c2; } .carta[data-i="3"] { z-index: 3; animation-name: c3; } .carta[data-i="4"] { z-index: 4; animation-name: c4; } .carta[data-i="5"] { z-index: 5; animation-name: c5; } /* Entra desde la planilla (izquierda y abajo) y se asienta en su lugar de la pila. Las cinco se van juntas en 88%→94%. */ @keyframes c1 { 0%,8% { opacity:0; transform: translate(-48px, 26px) scale(.92) rotate(-7deg); } 13%,88% { opacity:1; transform: translate(0, 0) scale(1) rotate(-2.2deg); } 94%,100%{ opacity:0; transform: translate(0, 12px) scale(.97) rotate(-2.2deg); } } @keyframes c2 { 0%,19% { opacity:0; transform: translate(-48px, 37px) scale(.92) rotate(-7deg); } 24%,88% { opacity:1; transform: translate(6px, 11px) scale(1) rotate(-1.1deg); } 94%,100%{ opacity:0; transform: translate(6px, 23px) scale(.97) rotate(-1.1deg); } } @keyframes c3 { 0%,30% { opacity:0; transform: translate(-48px, 48px) scale(.92) rotate(-7deg); } 35%,88% { opacity:1; transform: translate(12px, 22px) scale(1) rotate(0deg); } 94%,100%{ opacity:0; transform: translate(12px, 34px) scale(.97) rotate(0deg); } } @keyframes c4 { 0%,41% { opacity:0; transform: translate(-48px, 59px) scale(.92) rotate(-7deg); } 46%,88% { opacity:1; transform: translate(18px, 33px) scale(1) rotate(1.1deg); } 94%,100%{ opacity:0; transform: translate(18px, 45px) scale(.97) rotate(1.1deg); } } @keyframes c5 { 0%,52% { opacity:0; transform: translate(-48px, 70px) scale(.92) rotate(-7deg); } 57%,88% { opacity:1; transform: translate(24px, 44px) scale(1) rotate(2.2deg); } 94%,100%{ opacity:0; transform: translate(24px, 56px) scale(.97) rotate(2.2deg); } } /* La tarjeta ES una hoja: el informe renderizado por el motor, a escala, con desvanecido abajo. La hoja va en position:absolute para que sus 210mm no entren en el cálculo de layout — así no hace falta compensar con márgenes negativos como en .hoja-real, y el ancho lo manda la tarjeta. */ .carta-hoja { position: relative; height: 17.5rem; overflow: hidden; background: var(--blanco); } /* El desvanecido arranca por debajo de la última línea del informe: con 3.5rem se comía el «Validado por…». */ .carta-hoja::after { content: ""; position: absolute; inset: auto 0 0; height: 2rem; background: linear-gradient(to bottom, rgba(252, 254, 253, 0), var(--blanco) 92%); } .hoja-informe { position: absolute; top: 0; left: 0; width: 210mm; min-height: 297mm; padding: 11mm 10mm; background: var(--blanco); transform: scale(var(--escala-hoja)); transform-origin: top left; } /* ── La barra de progreso ─────────────────────────────────────────────────── Va pegada a la maquinaria, no al pie de la sección: tiene que leerse junto con lo que está pasando. Superficie propia y sombra para que se despegue. */ .progreso { max-width: 60rem; margin-inline: auto; display: flex; align-items: center; gap: .75rem; margin-top: 1.1rem; padding: .55rem .9rem; background: var(--blanco); border-radius: 999px; box-shadow: var(--sombra-media); font-family: var(--mono); font-size: .78rem; color: var(--cuerpo); } .progreso-punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--verde); flex: none; animation: latido var(--ciclo) ease-in-out infinite; } @keyframes latido { 0%, 4% { opacity: .3; } 8%, 58% { opacity: 1; } 62%, 100% { opacity: 1; } } /* Los textos van superpuestos en la misma caja, así que sus ventanas NO se pueden solapar: si se cruzan durante el fundido se leen los dos encima. Cada uno llega a 0 exactamente donde el siguiente empieza a subir. */ .progreso-texto { position: relative; flex: 1; min-width: 0; height: 1.3rem; } .progreso-texto > span { position: absolute; inset: 0 auto auto 0; display: flex; align-items: center; height: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; animation: var(--ciclo) linear infinite; } .progreso-texto b { color: var(--tinta); font-weight: 600; } .progreso-texto > span[data-i="1"] { animation-name: e1; } .progreso-texto > span[data-i="2"] { animation-name: e2; } .progreso-texto > span[data-i="3"] { animation-name: e3; } .progreso-texto > span[data-i="4"] { animation-name: e4; } .progreso-texto > span[data-i="5"] { animation-name: e5; } .progreso-texto .estado-fin { animation-name: efin; color: var(--verde); font-weight: 600; } @keyframes e1 { 0%,4%{opacity:0} 5%,13%{opacity:1} 14%,100%{opacity:0} } @keyframes e2 { 0%,14%{opacity:0} 16%,24%{opacity:1} 25%,100%{opacity:0} } @keyframes e3 { 0%,25%{opacity:0} 27%,35%{opacity:1} 36%,100%{opacity:0} } @keyframes e4 { 0%,36%{opacity:0} 38%,46%{opacity:1} 47%,100%{opacity:0} } @keyframes e5 { 0%,47%{opacity:0} 49%,57%{opacity:1} 58%,100%{opacity:0} } @keyframes efin { 0%,58%{opacity:0} 62%,88%{opacity:1} 94%,100%{opacity:0} } .progreso-barra { width: 4.25rem; height: 5px; border-radius: 3px; background: var(--raya); overflow: hidden; flex: none; } .progreso-barra i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--verde); animation: avance var(--ciclo) linear infinite; } /* Cinco escalones, uno por fila; vuelve a cero recién al reiniciar el lote. */ @keyframes avance { 0%, 5% { width: 0; } 14% { width: 20%; } 25% { width: 40%; } 36% { width: 60%; } 47% { width: 80%; } 58%, 88% { width: 100%; } 94%, 100% { width: 0; } } /* ── Vida en las miniaturas ───────────────────────────────────────────────── «Cómo funciona» y «Entrada de datos» son dos bloques seguidos con la misma pinta, y es justo donde se abandona el scroll. Cada miniatura hace en bucle lo que su paso describe: se marca el dato, se recorre la planilla, caen los documentos. Todo CSS, todo apagable con prefers-reduced-motion. */ /* 1 · el dato que se marca sobre la hoja */ .dib-token { animation: marcar 4.5s ease-in-out infinite; } @keyframes marcar { 0%, 12% { transform: scale(.86); opacity: .35; } 22%, 62% { transform: scale(1); opacity: 1; } 74%, 100% { transform: scale(.86); opacity: .35; } } /* Las líneas de la hoja se corren un pelo, como si el texto se recompusiera. */ .dib-hoja .dib-linea:nth-child(4) { animation: reacomodar 4.5s ease-in-out infinite; } .dib-hoja .dib-linea:nth-child(5) { animation: reacomodar 4.5s ease-in-out infinite .12s; } @keyframes reacomodar { 0%, 18% { width: 100%; } 30%, 66% { width: 74%; } 80%, 100% { width: 100%; } } .dib-hoja .dib-linea.corta:nth-child(5) { } /* 2 · el recorrido por la planilla, fila por fila */ .dib-grilla i, .dib-planilla i { animation: 5s linear infinite; } .dib-grilla i:nth-child(-n+3), .dib-planilla i:nth-child(n+4):nth-child(-n+6) { animation-name: recorrer-1; } .dib-grilla i:nth-child(n+4):nth-child(-n+6), .dib-planilla i:nth-child(n+7):nth-child(-n+9) { animation-name: recorrer-2; } .dib-grilla i:nth-child(n+7):nth-child(-n+9), .dib-planilla i:nth-child(n+10):nth-child(-n+12) { animation-name: recorrer-3; } .dib-grilla i:nth-child(n+10) { animation-name: recorrer-4; } /* La fila de encabezado de la planilla no participa del recorrido. */ .dib-planilla i.cab { animation: none; } @keyframes recorrer-1 { 0%,4%{background: var(--blanco)} 8%,20%{background:var(--paso-color,var(--verde))} 26%,100%{background: var(--blanco)} } @keyframes recorrer-2 { 0%,24%{background: var(--blanco)} 28%,40%{background:var(--paso-color,var(--verde))} 46%,100%{background: var(--blanco)} } @keyframes recorrer-3 { 0%,44%{background: var(--blanco)} 48%,60%{background:var(--paso-color,var(--verde))} 66%,100%{background: var(--blanco)} } @keyframes recorrer-4 { 0%,64%{background: var(--blanco)} 68%,80%{background:var(--paso-color,var(--verde))} 86%,100%{background: var(--blanco)} } /* 3 · los documentos que van cayendo sobre la pila */ .dib-pila i { animation: caer 4.5s cubic-bezier(.2,.7,.3,1) infinite; } .dib-pila i:nth-child(1) { animation-delay: 0s; } .dib-pila i:nth-child(2) { animation-delay: .35s; } .dib-pila i:nth-child(3) { animation-delay: .7s; } @keyframes caer { 0%, 8% { opacity: 0; } 20%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } } /* Cada hoja mantiene su posición de reposo mientras aparece. */ .dib-pila i:nth-child(1) { --reposo: translate(-8px, -6px) rotate(-5deg); } .dib-pila i:nth-child(2) { --reposo: translate(0, 0) rotate(1deg); } .dib-pila i:nth-child(3) { --reposo: translate(8px, 6px) rotate(5deg); } .dib-pila i { transform: var(--reposo); } /* Formulario: los campos se completan y el botón se aprieta. */ .dib-form i.campo { position: relative; overflow: hidden; } .dib-form i.campo::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--operaciones); opacity: .5; animation: completar 5s ease-in-out infinite; } .dib-form i.campo.corto::after { animation-delay: .5s; } @keyframes completar { 0%, 6% { width: 0; } 26%, 62% { width: 100%; } 74%, 100% { width: 0; } } .dib-form i.enviar { animation: apretar 5s ease-in-out infinite; } @keyframes apretar { 0%, 64% { transform: scale(1); filter: none; } 70% { transform: scale(.92); filter: brightness(.8); } 78%, 100% { transform: scale(1); filter: none; } } /* API: el cursor que parpadea al final de la llamada. */ .dib-api::after { content: ""; display: inline-block; width: .42em; height: 1em; margin-left: .3em; background: #7FD6A8; vertical-align: -.15em; animation: latir 1.1s steps(1) infinite; } @keyframes latir { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* ── Entrada al hacer scroll ──────────────────────────────────────────────── Con `animation-timeline: view()`: avanza según la posición del elemento en el scroll, sin una línea de JavaScript. Anima SÓLO el desplazamiento, nunca la opacidad. Es a propósito: si la línea de tiempo no se comporta como se espera —navegador raro, motor throttleado, un bug mío— con opacidad el peor caso es una sección invisible, que en una landing es catastrófico. Sin opacidad el peor caso es que una tarjeta quede 20px más abajo, que no lo nota nadie. Va dentro de @supports: donde no está soportado (Firefox, Safari viejos) no pasa nada y todo se ve normal. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-revelar] { animation: asomar linear both; animation-timeline: view(); animation-range: entry 2% cover 26%; } /* El escalonado va escrito literal: animation-range NO admite calc() que mezcle el nombre del rango con un porcentaje —`calc(entry 2% + …)` es sintaxis inválida y el navegador descarta la declaración sin avisar. */ [data-revelar]:nth-child(2) { animation-range: entry 8% cover 32%; } [data-revelar]:nth-child(3) { animation-range: entry 14% cover 38%; } } } @keyframes asomar { from { transform: translateY(22px); } to { transform: none; } } /* ── Sin movimiento ───────────────────────────────────────────────────────── Queda el estado final, que es el que comunica: la pila armada, el cursor en la última fila y el progreso completo. */ @media (prefers-reduced-motion: reduce) { .xls-dato, .xls-cursor, .carta, .progreso-texto > span, .progreso-punto, .progreso-barra i, .progreso-texto .estado-fin, .dib-token, .dib-hoja .dib-linea, .dib-grilla i, .dib-planilla i, .dib-pila i, .dib-form i.campo::after, .dib-form i.enviar, .dib-api::after, .garantias li { animation: none; } /* Superpuestas y sin rotación se taparían: vuelven al flujo, las cuatro, y la frase baja al tamaño de un subtítulo porque ahora conviven. */ .garantias { min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 2rem; max-width: none; text-align: left; } .garantias li { position: static; opacity: 1; } .garantias strong { font-size: 1.05rem; letter-spacing: -.015em; } .garantia-texto { margin-inline: 0; font-size: .92rem; } /* Sin movimiento las miniaturas quedan en su estado con sentido. */ .dib-grilla i.viva, .dib-planilla i.viva { background: var(--paso-color, var(--verde)); opacity: .8; } .dib-form i.campo::after { width: 100%; } .dib-api::after { opacity: 1; } [data-revelar] { transform: none; animation: none; } .carta { opacity: 1; } .carta[data-i="1"] { transform: translate(0, 0) rotate(-2.2deg); } .carta[data-i="2"] { transform: translate(6px, 11px) rotate(-1.1deg); } .carta[data-i="3"] { transform: translate(12px, 22px) rotate(0deg); } .carta[data-i="4"] { transform: translate(18px, 33px) rotate(1.1deg); } .carta[data-i="5"] { transform: translate(24px, 44px) rotate(2.2deg); } .xls-cursor { opacity: 1; transform: translateY(calc(var(--alto-fila) * 6)); } .progreso-texto > span { opacity: 0; } .progreso-texto .estado-fin { opacity: 1; } .progreso-barra i { width: 100%; } .boton:hover, .tarjeta-muestra:hover { transform: none; } * { transition-duration: .01ms !important; } } /* ── Confianza: una promesa a la vez ──────────────────────────────────────── Cuatro promesas turnándose en el mismo lugar, al tamaño de un titular chico. La frase es el contenido de la franja, no el pie de otra cosa. Antes acá había un contador («17» grande, etiqueta al costado) en una rejilla auto/1px/1fr. Se fue por dos motivos: el molde «número enorme + etiqueta chica» es el cliché de portada de todo SaaS, y esa rejilla dejaba el número pegado a la izquierda con un hueco muerto a la derecha, que es el descentrado que se veía. Ahora es una sola columna centrada. Peor todavía: el conteo colgaba de animation-timeline: view(), así que el número dependía de dónde parara el scroll y llegó a mostrar 13 con el dato real en 17. Al scroll sólo se le atan transform y opacity, nunca un valor. */ .confianza { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); border-block: 1px solid var(--raya); background: var(--blanco); } .confianza-in { display: grid; justify-items: center; } .garantias { --ciclo-g: 16s; position: relative; list-style: none; margin: 0; padding: 0; width: 100%; max-width: 42rem; text-align: center; /* Alto fijo: las cuatro están superpuestas, así que sin esto la caja mide 0 y la página salta cada vez que rota. El valor NO se estima: sale del barrido, que mide el alto natural de las cuatro frases sacándolas del posicionado absoluto (medirlas con inset:0 devuelve el alto de la caja y la comprobación se muerde la cola). De 768 para arriba las cuatro miden lo mismo, 71px; esto deja 17 de holgura. */ min-height: 5.5rem; } /* Centradas en vertical: las cuatro frases no miden lo mismo (96px y 72px a 1440), y ancladas arriba la caja se ve desbalanceada en las cortas. */ .garantias li { position: absolute; inset: 0; display: grid; align-content: center; opacity: 0; animation: var(--ciclo-g) linear infinite; } .garantias li[data-g="1"] { animation-name: g1; } .garantias li[data-g="2"] { animation-name: g2; } .garantias li[data-g="3"] { animation-name: g3; } .garantias li[data-g="4"] { animation-name: g4; } /* El hueco entre una y la siguiente es de 1%: con 2% se veía un parpadeo con la caja vacía. Solaparlas no es opción: dos textos encima son un borrón. En el punto exacto del cruce las dos están por debajo del 2% de opacidad durante 5.4 ms —medido recorriendo el ciclo con currentTime a mano—, o sea un tercio de un frame a 60Hz: no alcanza a dibujarse un cuadro vacío. Ese cruce es inherente a dos rampas que no se pisan; cerrarlo exige solaparlas, que es el defecto peor. No tocar buscando el cero. */ @keyframes g1 { 0%,23.5%{opacity:1} 24.5%,99%{opacity:0} 100%{opacity:1} } @keyframes g2 { 0%,24.5%{opacity:0} 25.5%,48.5%{opacity:1} 49.5%,100%{opacity:0} } @keyframes g3 { 0%,49.5%{opacity:0} 50.5%,73.5%{opacity:1} 74.5%,100%{opacity:0} } @keyframes g4 { 0%,74.5%{opacity:0} 75.5%,98.5%{opacity:1} 99.5%,100%{opacity:0} } .garantias strong { display: block; font-size: clamp(1.5rem, 3.6vw, 2.15rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; } /* 34ch partía «…datos de pago.» y dejaba «pago.» solo en la segunda línea. Con 52ch las cuatro bajadas entran en un renglón en escritorio, y donde no entran, text-wrap:pretty evita que quede una palabra huérfana. */ .garantia-texto { display: block; margin: .55rem auto 0; max-width: 52ch; font-size: 1rem; line-height: 1.5; text-wrap: pretty; color: var(--cuerpo); } /* ── Cómo funciona ────────────────────────────────────────────────────────── Tarjetas con una miniatura por paso, en el mismo lenguaje visual del héroe: una hoja con su token, la grilla de la planilla y la pila de documentos. */ .pasos { list-style: none; margin: 0 auto; padding: 0; max-width: 54rem; display: grid; /* El aire ENTRE pasos es mucho mayor que el aire dentro de cada uno: es lo que hace que se lean como tres momentos y no como tres celdas. */ gap: clamp(2.75rem, 6vw, 4.5rem); } /* Cada paso es una fila con la ilustración de un lado y el texto del otro, y el lado se alterna. Antes eran tres tarjetas idénticas en rejilla —icono, título, párrafo, repetido— que es el molde más gastado que hay; y además chocaba con «Entrada de datos», que viene justo abajo y también era una rejilla. Acá no hay tarjeta: el fondo de la sección queda a la vista. */ .paso { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; } .paso:nth-child(even) { grid-template-columns: minmax(0, 1fr) 14rem; } .paso:nth-child(even) .paso-dibujo { grid-column: 2; grid-row: 1; } .paso:nth-child(even) .paso-texto { grid-column: 1; grid-row: 1; } .paso-1 { --paso-color: var(--verde); } .paso-2 { --paso-color: var(--operaciones); } .paso-3 { --paso-color: var(--legales); } /* El número y su raya: la raya se estira hasta el borde de la columna, así el ojo entra por el número y sigue hacia el título. */ /* Va calificado con .paso a propósito. El rótulo del número es un

, así que `.paso p` (0,1,1) le ganaba a `.paso-n` (0,1,0) y se comía el color y el margen: el número salía gris y pegado al título. Es exactamente el mismo choque de especificidad que ya había pasado con `.via p` y `.via-detalle`. Si esta regla vuelve a `.paso-n` a secas, el número vuelve a salir gris. */ .paso .paso-n { display: flex; align-items: center; gap: .7rem; margin: 0 0 .6rem; font-family: var(--mono); font-size: 1rem; /* a .82rem el número no registraba y la raya quedaba sola */ font-weight: 700; color: var(--paso-color, var(--verde)); } .paso-n span { flex: none; } .paso-n::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; } .paso h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 650; margin-bottom: .5rem; } .paso p { margin: 0; color: var(--cuerpo); font-size: 1rem; } .paso-dibujo { display: flex; align-items: center; justify-content: center; height: 9.5rem; border-radius: var(--radio); background: color-mix(in srgb, var(--paso-color) 8%, var(--blanco)); } /* Las miniaturas están dibujadas a un tamaño fijo, así que crecen con scale en vez de reescribir cada medida. Al estar centradas en flex, que transform no cambie la caja de layout acá no molesta. */ .paso-dibujo > * { transform: scale(1.55); } /* 1 · una hoja con un dato marcado */ .dib-hoja { width: 5.75rem; padding: .55rem .5rem; background: var(--blanco); border-radius: 3px; box-shadow: 0 1px 4px rgba(23,23,26,.14); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .dib-linea { display: block; height: 3px; width: 100%; border-radius: 2px; background: #E4E4E0; } .dib-linea.corta { width: 62%; } .dib-token { font-family: var(--mono); font-style: normal; font-size: .46rem; padding: .1rem .3rem; border-radius: 3px; background: var(--verde-tenue); color: var(--verde); } /* 2 · la grilla de la planilla, con una fila encendida */ .dib-grilla { display: grid; grid-template-columns: repeat(3, 1.75rem); gap: 2px; padding: 3px; background: #DFE6EC; border-radius: 3px; } .dib-grilla i { display: block; height: .95rem; background: var(--blanco); } .dib-grilla i.viva { background: var(--operaciones); opacity: .78; } /* 3 · la pila de documentos */ .dib-pila { position: relative; width: 4.8rem; height: 3.9rem; } .dib-pila i { position: absolute; inset: 0; border-radius: 3px; background: var(--blanco); box-shadow: 0 1px 4px rgba(23,23,26,.16); } .dib-pila i:nth-child(1) { transform: translate(-8px, -6px) rotate(-5deg); } .dib-pila i:nth-child(2) { transform: translate(0, 0) rotate(1deg); } .dib-pila i:nth-child(3) { transform: translate(8px, 6px) rotate(5deg); background: color-mix(in srgb, var(--legales) 10%, var(--blanco)); } /* ── Entrada de datos ─────────────────────────────────────────────────────── Lista, no rejilla: «Cómo funciona» ya es una rejilla de tres tarjetas justo arriba, y dos rejillas idénticas seguidas se leen como la misma sección repetida. Acá cada vía es una fila: miniatura, texto y el dato al costado. */ .vias { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra-baja); overflow: hidden; } .via { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 1.85rem); padding: 1.5rem clamp(1.25rem, 3vw, 2rem); } .via + .via { border-top: 1px solid var(--raya); } .via-1 { --via-color: var(--verde); } .via-2 { --via-color: var(--operaciones); } .via-3 { --via-color: var(--comunicacion); } .via-dibujo { display: flex; align-items: center; justify-content: center; width: 6.5rem; height: 5rem; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--via-color) 9%, var(--blanco)); } .via-texto h3 { font-size: 1.1rem; font-weight: 650; margin-bottom: .3rem; } .via-texto p { margin: 0; color: var(--cuerpo); font-size: .96rem; } /* El dato concreto, en su propia columna a la derecha. */ .via-detalle { margin: 0; padding: .35rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--via-color) 10%, var(--blanco)); color: var(--via-color); font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; white-space: nowrap; } /* ── Las miniaturas de cada vía ─────────────────────────────────────────── */ /* 1 · la planilla, con una fila resaltada */ .dib-planilla { display: grid; grid-template-columns: repeat(3, 1.5rem); gap: 2px; padding: 3px; background: #D8E4DE; border-radius: 3px; } .dib-planilla i { display: block; height: .7rem; background: var(--blanco); } .dib-planilla i.cab { background: #BCCFC7; } .dib-planilla i.viva { background: var(--verde); opacity: .8; } /* 2 · el formulario, con su botón */ .dib-form { display: flex; flex-direction: column; gap: 5px; width: 4.5rem; padding: .5rem; background: var(--blanco); border-radius: 4px; box-shadow: 0 1px 4px rgba(23, 23, 26, .14); } .dib-form i { display: block; height: 6px; border-radius: 2px; background: #E2E8EF; } .dib-form i.corto { width: 65%; } .dib-form i.enviar { height: 10px; width: 50%; background: var(--operaciones); } /* 3 · la llamada, tal cual es */ .dib-api { padding: .45rem .6rem; border-radius: 6px; background: var(--tinta); color: #E4E4EA; font-family: var(--mono); font-size: .58rem; white-space: nowrap; } /* ── Formatos, al pie de entrada de datos ─────────────────────────────────── Fila fija, no marquesina: el formato importa cuando se habla de cómo entran los datos, no como argumento de portada. Se nombran los productos, nunca sus logotipos — la guía de Microsoft prohíbe los íconos y permite el nombre. */ .formatos-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2.25rem; } .chip { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem .5rem .55rem; border-radius: 999px; background: var(--blanco); box-shadow: var(--sombra-baja); } /* Ícono de tipo de archivo: la hoja con la esquina doblada, dibujada con clip-path. Genérico — no es el logotipo de nadie. */ .chip-icono { position: relative; width: 1.4rem; height: 1.75rem; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .15rem; background: var(--chip, var(--verde)); border-radius: 2px; clip-path: polygon(0 0, 66% 0, 100% 24%, 100% 100%, 0 100%); } .chip-icono::after { content: ""; position: absolute; top: 0; right: 0; width: 35%; height: 24%; background: rgba(252, 254, 253, .45); clip-path: polygon(0 0, 100% 100%, 0 100%); } /* Blanco sobre cada color de formato: 5.82 el más bajo, verificado. */ .chip-icono b { font-family: var(--mono); font-size: .42rem; font-weight: 600; letter-spacing: .02em; color: var(--blanco); } .chip-nombre { font-size: .92rem; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; } .formatos-pie { margin: 1.1rem 0 0; text-align: center; font-size: .9rem; color: var(--apagado); } /* ── Plantillas listas: carrusel de a una ─────────────────────────────────── Sin JS: los radios ocultos deciden qué lámina se ve y las etiquetas de abajo hacen de puntos. Se mueve la pista con translateX, así la transición es una sola propiedad y no repinta las hojas. */ .carrusel { position: relative; max-width: 60rem; margin: 0 auto; overflow: hidden; } .carrusel-radio { position: absolute; opacity: 0; pointer-events: none; } .carrusel-pista { display: flex; transition: transform .45s cubic-bezier(.3, .7, .3, 1); } .lamina { flex: 0 0 100%; min-width: 0; padding: 0 .25rem; } /* Un radio por lámina: el que está marcado corre la pista. */ #pl-1:checked ~ .carrusel-pista { transform: translateX(0); } #pl-2:checked ~ .carrusel-pista { transform: translateX(-100%); } #pl-3:checked ~ .carrusel-pista { transform: translateX(-200%); } #pl-4:checked ~ .carrusel-pista { transform: translateX(-300%); } #pl-5:checked ~ .carrusel-pista { transform: translateX(-400%); } #pl-6:checked ~ .carrusel-pista { transform: translateX(-500%); } .lamina { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } /* La hoja, grande: es el argumento de la sección. */ .lamina-visor { position: relative; height: 20.5rem; overflow: hidden; border-radius: var(--radio); background: #EDEFEE; box-shadow: var(--sombra-baja); padding-top: 1.25rem; pointer-events: none; user-select: none; display: flex; justify-content: center; } .lamina-visor::after { content: ""; position: absolute; inset: auto 0 0; height: 4rem; background: linear-gradient(to bottom, transparent, #EDEFEE 92%); } /* Misma mecánica de siempre: la hoja mide sus 210mm y se achica con transform; como transform NO achica la caja de layout, los márgenes negativos la dejan del tamaño visual. La tipografía la inyecta la vista con css_contenido(prefijo=".hoja-real "). No tocar la geometría. */ .hoja-real { --ancho-hoja: 210mm; --escala: .46; width: var(--ancho-hoja); min-height: 297mm; padding: 16mm 14mm; background: var(--blanco); box-shadow: 0 2px 12px rgba(23, 23, 26, .16); transform: scale(var(--escala)); transform-origin: top center; flex: 0 0 auto; margin: 0 calc(var(--ancho-hoja) * (var(--escala) - 1) / 2); } .lamina-texto h3 { margin: .5rem 0 .6rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.03em; } .lamina-texto p { margin: 0 0 1.5rem; color: var(--cuerpo); font-size: 1.02rem; } .muestra-familia { display: inline-block; padding: .18rem .55rem; border-radius: 5px; background: var(--fam-tenue); color: var(--fam); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .fam-cobro { --fam: var(--cobro); --fam-tenue: var(--cobro-tenue); } .fam-operaciones { --fam: var(--operaciones); --fam-tenue: var(--operaciones-tenue); } .fam-legales { --fam: var(--legales); --fam-tenue: var(--legales-tenue); } .fam-comunicacion { --fam: var(--comunicacion); --fam-tenue: var(--comunicacion-tenue); } /* Los puntos: son